fix: improve atom components & adjust components styles (#5)

* fix: use proper id for root portals

* cleanup code

* feat: add storybook scripts for development, building, and serving

* fix: update button styles for improved visual consistency

* fix: refine snippet condition and include base prop in rendering

* fix: update background color for input component

* fix: replace div with Input.Root for textarea component structure

* bump version to 1.0.0-alpha.18

Author: ryu-man

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",
@@ -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",

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?.()}

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])
 	]}

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])
 	]}

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,

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>;

src/lib/components/root/root.svelte

@@ -73,7 +73,7 @@
 	)}
 	{...restProps}
 >
-	<Portals id="root fixed">
+	<Portals id="root">
 		{#if portals}
 			{@render portals?.()}
 		{:else}

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>