From 2ac82ab532bdff19ca0df65cdf87d52e4534b8fd Mon Sep 17 00:00:00 2001
From: abdel <rioman19@gmail.com>
Date: Wed, 22 Oct 2025 21:22:34 +0800
Subject: [PATCH 1/8] fix: use proper id for root portals

---
 src/lib/components/root/root.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/components/root/root.svelte b/src/lib/components/root/root.svelte
index ac41300..90dfe0f 100644
--- a/src/lib/components/root/root.svelte
+++ b/src/lib/components/root/root.svelte
@@ -73,7 +73,7 @@
 	)}
 	{...restProps}
 >
-	<Portals id="root fixed">
+	<Portals id="root">
 		{#if portals}
 			{@render portals?.()}
 		{:else}

From 6357df438e3b5f5bacf027aad750dbbce0b68c50 Mon Sep 17 00:00:00 2001
From: abdel <rioman19@gmail.com>
Date: Wed, 22 Oct 2025 21:23:08 +0800
Subject: [PATCH 2/8] cleanup code

---
 src/lib/components/portal/portal-inner.svelte | 2 +-
 src/lib/components/portal/portal-root.svelte  | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/lib/components/portal/portal-inner.svelte b/src/lib/components/portal/portal-inner.svelte
index 3a193f9..56d3f17 100644
--- a/src/lib/components/portal/portal-inner.svelte
+++ b/src/lib/components/portal/portal-inner.svelte
@@ -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,
diff --git a/src/lib/components/portal/portal-root.svelte b/src/lib/components/portal/portal-root.svelte
index 3a288b3..96c92c2 100644
--- a/src/lib/components/portal/portal-root.svelte
+++ b/src/lib/components/portal/portal-root.svelte
@@ -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>;

From a70e1a8973175732bf90087069e313ef18982f6f Mon Sep 17 00:00:00 2001
From: abdel <rioman19@gmail.com>
Date: Wed, 22 Oct 2025 21:23:20 +0800
Subject: [PATCH 3/8] feat: add storybook scripts for development, building,
 and serving

---
 package.json | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index 34a7286..f7c6f0c 100644
--- a/package.json
+++ b/package.json
@@ -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",

From f245c47225f02c1954fa3fd53d613d3c77e1dce8 Mon Sep 17 00:00:00 2001
From: abdel <rioman19@gmail.com>
Date: Wed, 22 Oct 2025 21:23:36 +0800
Subject: [PATCH 4/8] fix: update button styles for improved visual consistency

---
 src/lib/components/button/button.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/components/button/button.svelte b/src/lib/components/button/button.svelte
index 1eba4e2..c378ec1 100644
--- a/src/lib/components/button/button.svelte
+++ b/src/lib/components/button/button.svelte
@@ -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])
 	]}

From 9669d2e598b3ea57a4d64fc5f46727d7bffe0bb0 Mon Sep 17 00:00:00 2001
From: abdel <rioman19@gmail.com>
Date: Wed, 22 Oct 2025 21:23:55 +0800
Subject: [PATCH 5/8] fix: refine snippet condition and include base prop in
 rendering

---
 src/lib/components/atom/html-atom.svelte | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/lib/components/atom/html-atom.svelte b/src/lib/components/atom/html-atom.svelte
index 8cb7c67..48977ba 100644
--- a/src/lib/components/atom/html-atom.svelte
+++ b/src/lib/components/atom/html-atom.svelte
@@ -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);
 
 	const snippet = $derived(base as SnippetBase);
 
@@ -27,7 +27,7 @@
 </script>
 
 {#if isSnippet}
-	{@render snippet({ class: cn(klass), as, children, ...restProps })}
+	{@render snippet({ class: cn(klass), as, base, children, ...restProps })}
 {:else}
 	<Component class={cn(klass)} {as} {...restProps}>
 		{@render children?.()}

From c72bf4ac67bab3526af79191bc0fb28a1bbffdc4 Mon Sep 17 00:00:00 2001
From: abdel <rioman19@gmail.com>
Date: Wed, 22 Oct 2025 21:32:23 +0800
Subject: [PATCH 6/8] fix: update background color for input component

---
 src/lib/components/input/input-root.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/components/input/input-root.svelte b/src/lib/components/input/input-root.svelte
index 7ef4545..a9cbe93 100644
--- a/src/lib/components/input/input-root.svelte
+++ b/src/lib/components/input/input-root.svelte
@@ -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])
 	]}

From d83eb55b9b6c761b1006fb9ba87b710dd17a2df2 Mon Sep 17 00:00:00 2001
From: abdel <rioman19@gmail.com>
Date: Wed, 22 Oct 2025 21:32:46 +0800
Subject: [PATCH 7/8] fix: replace div with Input.Root for textarea component
 structure

---
 src/lib/components/textarea/textarea-root.svelte | 11 ++++-------
 1 file changed, 4 insertions(+), 7 deletions(-)

diff --git a/src/lib/components/textarea/textarea-root.svelte b/src/lib/components/textarea/textarea-root.svelte
index 7b9696c..7ec7c2a 100644
--- a/src/lib/components/textarea/textarea-root.svelte
+++ b/src/lib/components/textarea/textarea-root.svelte
@@ -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>

From 90d47f8d63047fcdd49ca675e484e6b7ab7b9774 Mon Sep 17 00:00:00 2001
From: abdel <rioman19@gmail.com>
Date: Wed, 22 Oct 2025 21:46:23 +0800
Subject: [PATCH 8/8] bump version to 1.0.0-alpha.18

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index f7c6f0c..fc7a8a1 100644
--- a/package.json
+++ b/package.json
@@ -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",