Skip to content

fix: improve atom components & adjust components styles #5

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 8 commits into from
Oct 22, 2025
Merged

fix: improve atom components & adjust components styles #5

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
2ac82ab
fix: use proper id for root portals
ryu-man Oct 22, 2025
6357df4
cleanup code
ryu-man Oct 22, 2025
a70e1a8
feat: add storybook scripts for development, building, and serving
ryu-man Oct 22, 2025
f245c47
fix: update button styles for improved visual consistency
ryu-man Oct 22, 2025
9669d2e
fix: refine snippet condition and include base prop in rendering
ryu-man Oct 22, 2025
c72bf4a
fix: update background color for input component
ryu-man Oct 22, 2025
d83eb55
fix: replace div with Input.Root for textarea component structure
ryu-man Oct 22, 2025
90d47f8
bump version to 1.0.0-alpha.18
ryu-man Oct 22, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 4 additions & 3 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@svelte-atoms/core",
"version": "1.0.0-alpha.17",
"version": "1.0.0-alpha.18",
"description": "A modular, accessible, and extensible Svelte UI component library.",
"repository": {
"type": "git",
Expand All @@ -25,8 +25,9 @@
"test:unit": "vitest",
"test": "npm run test:unit -- --run && npm run test:e2e",
"test:e2e": "playwright test",
"storybook": "storybook dev -p 6006 --no-open",
"build-storybook": "storybook build"
"storybook:dev": "storybook dev -p 6006 --no-open",
"storybook:build": "storybook build",
"storybook:serve": "bunx http-server ./storybook-static"
},
"files": [
"dist",
Expand Down
4 changes: 2 additions & 2 deletions src/lib/components/atom/html-atom.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
...restProps
}: HtmlAtomProps<E, B> & HTMLAttributes<Element> = $props();
const isSnippet = typeof base === 'function' && base.name !== 'wrapper';
const isSnippet = $derived(typeof base === 'function' && base.length === 1 && !base.prototype);
Copy link

Copilot AI Oct 22, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The snippet detection logic using base.length === 1 is fragile and may incorrectly identify functions. Svelte 5 snippets have a specific signature - consider using a more reliable detection method such as checking for the snippet symbol or using a documented Svelte API if available.

Suggested change
const isSnippet = $derived(typeof base === 'function' && base.length === 1 && !base.prototype);
const isSnippet = $derived(
typeof base === 'function' && !!base && !!base[Symbol.for('svelte.snippet')]
);

Copilot uses AI. Check for mistakes.
const snippet = $derived(base as SnippetBase);
Expand All @@ -27,7 +27,7 @@
</script>

{#if isSnippet}
{@render snippet({ class: cn(klass), as, children, ...restProps })}
{@render snippet({ class: cn(klass), as, base, children, ...restProps })}
Copy link

Copilot AI Oct 22, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Adding base to the snippet props is potentially breaking if existing snippets don't expect this parameter. Consider documenting this change or providing backward compatibility if this is part of a public API.

Suggested change
{@render snippet({ class: cn(klass), as, base, children, ...restProps })}
{@render snippet({ class: cn(klass), as, children, ...restProps })}

Copilot uses AI. Check for mistakes.
{:else}
<Component class={cn(klass)} {as} {...restProps}>
{@render children?.()}
Expand Down
2 changes: 1 addition & 1 deletion src/lib/components/button/button.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@
<HtmlAtom
as="button"
class={[
'button text-foreground bg-foreground/10 hover:bg-foreground/15 active:bg-foreground/20 w-fit cursor-pointer rounded-md px-3 py-2 transition-colors duration-200',
'button text-primary-foreground bg-primary hover:bg-primary/95 active:bg-primary/90 disabled:bg-muted disabled:text-muted-foreground w-fit cursor-pointer rounded-md px-3 py-2 transition-colors duration-200',
toClassValue.apply(null, [preset?.class]),
toClassValue.apply(null, [klass])
]}
Expand Down
2 changes: 1 addition & 1 deletion src/lib/components/input/input-root.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,7 @@

<HtmlAtom
class={[
'border-border text-foreground bg-background relative flex h-10 items-center overflow-hidden rounded-md border',
'border-border text-foreground bg-input relative flex h-10 items-center overflow-hidden rounded-md border',
toClassValue.apply(bond, [preset?.class]),
toClassValue.apply(bond, [klass])
]}
Expand Down
2 changes: 1 addition & 1 deletion src/lib/components/portal/portal-inner.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
import type { HTMLAttributes } from 'svelte/elements';
import { PortalBond } from './bond.svelte';
import { toClassValue, cn } from '$svelte-atoms/core/utils';
import { toClassValue } from '$svelte-atoms/core/utils';
import {
HtmlAtom,
type ElementType,
Expand Down
2 changes: 1 addition & 1 deletion src/lib/components/portal/portal-root.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@
type HtmlAtomProps,
type Base
} from '$svelte-atoms/core/components/atom';
import { toClassValue, cn, defineProperty, defineState } from '$svelte-atoms/core/utils';
import { toClassValue, defineProperty, defineState } from '$svelte-atoms/core/utils';
import { getPreset } from '$svelte-atoms/core/context';

type Element = ElementType<E>;
Expand Down
2 changes: 1 addition & 1 deletion src/lib/components/root/root.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,7 @@
)}
{...restProps}
>
<Portals id="root fixed">
<Portals id="root">
{#if portals}
{@render portals?.()}
{:else}
Expand Down
11 changes: 4 additions & 7 deletions src/lib/components/textarea/textarea-root.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,9 @@
<script>
import { cn } from '$svelte-atoms/core/utils';
import { Input } from '../input';

let { class: klass = '', children, ...restProps } = $props();
let { children, ...restProps } = $props();
</script>

<div
class={['border-stroke-0/50 bg-background-0 w-full rounded-lg border p-2', klass]}
{...restProps}
>
<Input.Root {...restProps}>
{@render children?.()}
</div>
</Input.Root>