@svelte-atoms/core 1.0.0-alpha.25 → 1.0.0-alpha.26

package/dist/components/button/button.stories.svelte

@@ -1,57 +1,57 @@
-<script module>
-	import { defineMeta } from '@storybook/addon-svelte-csf';
-	import Root from '../root/root.svelte';
-	import ButtonCmp from './button.svelte';
-	import { defineVariants } from '../../utils/variant';
-
-	const { Story } = defineMeta({
-		title: 'ATOMS/Button'
-	});
-</script>
-
-<script lang="ts">
-	const variants = defineVariants((bond) => ({
-		variants: {
-			variant: {
-				primary: {
-					class: 'bg-primary text-primary-foreground hover:bg-primary/80 active:bg-primary/90'
-				},
-				secondary: {
-					class:
-						'bg-secondary text-secondary-foreground hover:bg-secondary/80 active:bg-secondary/90'
-				},
-				destructive: {
-					class:
-						'bg-destructive text-destructive-foreground hover:bg-destructive/80 active:bg-destructive/90'
-				},
-				outline: {
-					class:
-						'bg-transparent hover:bg-foreground/5 active:bg-foreground/10 border border-border text-foreground'
-				},
-				ghost: {
-					class: 'hover:bg-accent hover:text-accent-foreground'
-				}
-			}
-		},
-		compounds: [],
-		defaults: {
-			variant: 'destructive'
-		}
-	}));
-</script>
-
-<Story name="Button">
-	<Root class="p-4">
-		{#snippet children({ args })}
-			<ButtonCmp variant="primary">Clicke me</ButtonCmp>
-		{/snippet}
-	</Root>
-</Story>
-
-<Story name="Button - Local Variants">
-	<Root class="p-4">
-		{#snippet children({ args })}
-			<ButtonCmp {variants} {...args}>Clicke me</ButtonCmp>
-		{/snippet}
-	</Root>
-</Story>
+<script module>
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import Root from '../root/root.svelte';
+	import ButtonCmp from './button.svelte';
+	import { defineVariants } from '../../utils/variant';
+
+	const { Story } = defineMeta({
+		title: 'ATOMS/Button'
+	});
+</script>
+
+<script lang="ts">
+	const variants = defineVariants((bond) => ({
+		variants: {
+			variant: {
+				primary: {
+					class: 'bg-primary text-primary-foreground hover:bg-primary/80 active:bg-primary/90'
+				},
+				secondary: {
+					class:
+						'bg-secondary text-secondary-foreground hover:bg-secondary/80 active:bg-secondary/90'
+				},
+				destructive: {
+					class:
+						'bg-destructive text-destructive-foreground hover:bg-destructive/80 active:bg-destructive/90'
+				},
+				outline: {
+					class:
+						'bg-transparent hover:bg-foreground/5 active:bg-foreground/10 border border-border text-foreground'
+				},
+				ghost: {
+					class: 'hover:bg-accent hover:text-accent-foreground'
+				}
+			}
+		},
+		compounds: [],
+		defaults: {
+			variant: 'destructive'
+		}
+	}));
+</script>
+
+<Story name="Button">
+	<Root class="p-4">
+		{#snippet children({ args })}
+			<ButtonCmp variant="primary">Clicke me</ButtonCmp>
+		{/snippet}
+	</Root>
+</Story>
+
+<Story name="Button - Local Variants">
+	<Root class="p-4">
+		{#snippet children({ args })}
+			<ButtonCmp {variants} {...args}>Clicke me</ButtonCmp>
+		{/snippet}
+	</Root>
+</Story>

package/dist/components/button/button.svelte

@@ -21,7 +21,7 @@
 	{preset}
 	as="button"
 	class={[
-		'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',
+		'button text-primary-foreground bg-primary border-border 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',
 		'$preset',
 		klass
 	]}

package/dist/components/button/button.svelte.d.ts

@@ -1,3 +1,6 @@
-declare const Button: import("svelte").Component<any, {}, "">;
+import type { HTMLAttributes } from 'svelte/elements';
+import type { ButtonProps } from './types';
+type $$ComponentProps = ButtonProps & HTMLAttributes<HTMLButtonElement>;
+declare const Button: import("svelte").Component<$$ComponentProps, {}, "">;
 type Button = ReturnType<typeof Button>;
 export default Button;

package/dist/components/button/types.d.ts

@@ -1,4 +1,4 @@
-import type { HtmlAtomProps } from '../../helpers';
+import type { HtmlAtomProps } from '../atom/types';
 import type { Snippet } from 'svelte';
 export type ButtonProps = HtmlAtomProps<'button'> & {
     type?: 'button' | 'submit' | 'reset';

package/dist/components/card/card-body.svelte

@@ -32,7 +32,7 @@
 <HtmlAtom
 	{bond}
 	preset="card.content"
-	class={['card-content px-4', '$preset', klass]}
+	class={['card-content border-border px-4', '$preset', klass]}
 	enter={enter?.bind(bond.state)}
 	exit={exit?.bind(bond.state)}
 	initial={initial?.bind(bond.state)}

package/dist/components/card/card-description.svelte

@@ -35,7 +35,7 @@
 	{as}
 	{bond}
 	preset="card.description"
-	class={['card-description text-sm text-gray-500', '$preset', klass]}
+	class={['card-description border-border text-sm text-gray-500', '$preset', klass]}
 	enter={enter?.bind(bond.state)}
 	exit={exit?.bind(bond.state)}
 	initial={initial?.bind(bond.state)}

package/dist/components/card/card-footer.svelte

@@ -35,7 +35,7 @@
 	{as}
 	{bond}
 	preset="card.footer"
-	class={['card-footer flex items-center gap-2 px-4 py-4', '$preset', klass]}
+	class={['card-footer border-border flex items-center gap-2 px-4 py-4', '$preset', klass]}
 	enter={enter?.bind(bond.state)}
 	exit={exit?.bind(bond.state)}
 	initial={initial?.bind(bond.state)}

package/dist/components/card/card-header.svelte

@@ -35,7 +35,7 @@
 	{as}
 	{bond}
 	preset="card.header"
-	class={['card-header flex flex-col space-y-1.5 px-4 py-4', '$preset', klass]}
+	class={['card-header border-border flex flex-col space-y-1.5 px-4 py-4', '$preset', klass]}
 	enter={enter?.bind(bond.state)}
 	exit={exit?.bind(bond.state)}
 	initial={initial?.bind(bond.state)}

package/dist/components/card/card-media.svelte

@@ -35,7 +35,7 @@
 	{as}
 	{bond}
 	preset="card.media"
-	class={['card-media overflow-hidden', '$preset', klass]}
+	class={['card-media border-border overflow-hidden', '$preset', klass]}
 	enter={enter?.bind(bond.state)}
 	exit={exit?.bind(bond.state)}
 	initial={initial?.bind(bond.state)}

package/dist/components/card/card-subtitle.svelte

@@ -35,7 +35,7 @@
 	{as}
 	{bond}
 	preset="card.subtitle"
-	class={['card-subtitle text-sm font-medium text-gray-600', '$preset', klass]}
+	class={['card-subtitle border-border text-sm font-medium text-gray-600', '$preset', klass]}
 	enter={enter?.bind(bond.state)}
 	exit={exit?.bind(bond.state)}
 	initial={initial?.bind(bond.state)}

package/dist/components/card/card-title.svelte

@@ -35,7 +35,11 @@
 	{as}
 	{bond}
 	preset="card.title"
-	class={['card-title text-lg leading-none font-semibold tracking-tight', '$preset', klass]}
+	class={[
+		'card-title border-border text-lg leading-none font-semibold tracking-tight',
+		'$preset',
+		klass
+	]}
 	enter={enter?.bind(bond.state)}
 	exit={exit?.bind(bond.state)}
 	initial={initial?.bind(bond.state)}

package/dist/components/checkbox/checkbox.svelte

@@ -1,21 +1,22 @@
 <script lang="ts">
+	import { circOut } from 'svelte/easing';
 	import type { HTMLInputAttributes } from 'svelte/elements';
 	import { scale } from 'svelte/transition';
-	import type { CheckboxProps } from './types';
 	import { Icon } from '../icon';
 	import { HtmlAtom } from '../atom';
 	import CheckmarkRegularIcon from '../../icons/icon-checkmark.svelte';
-	import './checkbox.css';
 	import { DURATION } from '../../shared';
-	import { circOut } from 'svelte/easing';
+	import type { CheckboxProps } from './types';
+	import './checkbox.css';
 
 	let {
 		class: klass = '',
 		checked = $bindable(false),
-		indeterminate = $bindable(),
+		indeterminate = $bindable(false),
 		value = $bindable(undefined),
 		group = $bindable([]),
 		id,
+		name,
 		checkedContent,
 		indeterminateContent,
 		enter,
@@ -31,29 +32,25 @@
 
 	let checkboxElement: HTMLInputElement | undefined = $state();
 
-	function handleChange(ev: Event) {
-		const checked = (ev.currentTarget as HTMLInputElement)?.checked ?? false;
+	// Computed state for visual representation
+	const isChecked = $derived(checked === true);
+	const isIndeterminate = $derived(indeterminate === true);
+	const showCheckmark = $derived(isChecked && !isIndeterminate);
 
+	function handleChange(ev: Event) {
 		onchange?.(ev, {
-			checked,
+			checked: checked,
 			value: checked,
 			type: 'boolean'
 		});
 	}
 
 	function handleInput(ev: Event) {
-		const currentTarget = ev.currentTarget as HTMLInputElement;
-		const _checked = currentTarget?.checked ?? false;
-
 		oninput?.(ev, {
-			checked: _checked,
-			value: _checked,
+			checked: checked,
+			value: checked,
 			type: 'boolean'
 		});
-
-		if (ev.defaultPrevented) {
-			return;
-		}
 	}
 
 	function handleClick(ev: MouseEvent) {
@@ -63,7 +60,18 @@
 			return;
 		}
 
-		checkboxElement?.click();
+		// Handle indeterminate → checked → unchecked cycle
+		if (indeterminate) {
+			// Indeterminate → checked
+			indeterminate = false;
+			checked = true;
+		} else {
+			// Toggle checked state
+			checked = !checked;
+		}
+
+		// Trigger input event manually if needed
+		handleInput(ev);
 	}
 </script>
 
@@ -71,15 +79,16 @@
 <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
 <HtmlAtom
 	preset="checkbox"
-	as="button"
+	as="div"
 	class={[
-		'checkbox-root border-border outline-primary bg-foreground/5 aspect-square h-5 w-fit cursor-pointer rounded-sm border outline-0 outline-offset-2 transition-colors duration-100',
-		checked && 'bg-foreground',
-		!checked && '',
+		'checkbox-root border-border outline-primary bg-input text-foreground aspect-square h-5 w-fit cursor-pointer rounded-sm border outline-0 outline-offset-2 transition-colors duration-100',
+		isChecked && 'bg-foreground',
 		'$preset',
 		klass,
 		'relative'
 	]}
+	role="checkbox"
+	aria-checked={isIndeterminate ? 'mixed' : isChecked}
 	{enter}
 	{exit}
 	{initial}
@@ -87,6 +96,7 @@
 	{...restProps}
 >
 	<input
+		bind:this={checkboxElement}
 		bind:checked
 		bind:group
 		bind:indeterminate
@@ -94,34 +104,35 @@
 		class="checkbox-input pointer-events-none"
 		{value}
 		{id}
+		{name}
 		onchange={handleChange}
 		oninput={handleInput}
 		{onblur}
 		{onfocus}
 		hidden
-		{@attach (node) => {
-			checkboxElement = node;
-		}}
+		tabindex="-1"
 	/>
 
-	{#if indeterminate}
+	{#if isIndeterminate}
 		{#if indeterminateContent}
 			<HtmlAtom
 				preset="checkbox.indeterminate"
-				class={['checkbox-indeterminate flex size-full items-center justify-center p-1']}
+				class={[
+					'checkbox-indeterminate pointer-events-none flex size-full items-center justify-center p-1'
+				]}
 				base={indeterminateContent}
 			/>
 		{:else}
 			<HtmlAtom
 				preset="checkbox.indeterminate"
 				class={[
-					'checkbox-indeterminate text-foreground flex size-full items-center justify-center p-1'
+					'checkbox-indeterminate text-foreground pointer-events-none flex size-full items-center justify-center  p-1'
 				]}
 			>
 				<div class={['size-full rounded-xs bg-current']}></div>
 			</HtmlAtom>
 		{/if}
-	{:else if checked === true}
+	{:else if showCheckmark}
 		{#if checkedContent}
 			<HtmlAtom
 				preset="checkbox.checkmark"

package/dist/components/collapsible/collapsible-body.svelte

@@ -39,7 +39,7 @@
 <HtmlAtom
 	{bond}
 	preset="collapsible.body"
-	class={['$preset', klass]}
+	class={['border-border', '$preset', klass]}
 	onmount={onmount?.bind(bond.state)}
 	ondestroy={ondestroy?.bind(bond.state)}
 	animate={animate?.bind(bond.state)}

package/dist/components/collapsible/collapsible-header.svelte

@@ -39,7 +39,7 @@
 <HtmlAtom
 	{bond}
 	preset="collapsible.header"
-	class={['flex cursor-pointer items-center gap-2', '$preset', klass]}
+	class={['border-border flex cursor-pointer items-center gap-2', '$preset', klass]}
 	onmount={onmount?.bind(bond.state)}
 	ondestroy={ondestroy?.bind(bond.state)}
 	animate={animate?.bind(bond.state)}

package/dist/components/collapsible/collapsible-indicator.svelte

@@ -48,7 +48,7 @@
 <HtmlAtom
 	{bond}
 	preset="collapsible.indicator"
-	class={['flex size-4 items-center justify-center', '$preset', klass]}
+	class={['border-border flex size-4 items-center justify-center', '$preset', klass]}
 	onmount={onmount?.bind(bond.state)}
 	ondestroy={ondestroy?.bind(bond.state)}
 	animate={animate?.bind(bond.state)}

package/dist/components/collapsible/collapsible-root.svelte

@@ -72,7 +72,7 @@
 <HtmlAtom
 	{bond}
 	preset="collapsible"
-	class={['flex w-full flex-col overflow-hidden', '$preset', klass]}
+	class={['border-border flex w-full flex-col overflow-hidden', '$preset', klass]}
 	onmount={onmount?.bind(bond.state)}
 	ondestroy={ondestroy?.bind(bond.state)}
 	animate={animate?.bind(bond.state)}

package/dist/components/combobox/atoms.d.ts

@@ -1,5 +1,9 @@
 export { default as Root } from './combobox-root.svelte';
 export { default as Trigger } from './combobox-trigger.svelte';
 export { default as Item } from './compobox-item.svelte';
-export { default as Input } from './combobox-input.svelte';
+/**
+ * @deprecated use Combobox.Control instead
+ */
+export { default as Input } from './combobox-control.svelte';
+export { default as Control } from './combobox-control.svelte';
 export { Arrow, Indicator, List } from '../dropdown/atoms';

package/dist/components/combobox/atoms.js

@@ -1,5 +1,9 @@
 export { default as Root } from './combobox-root.svelte';
 export { default as Trigger } from './combobox-trigger.svelte';
 export { default as Item } from './compobox-item.svelte';
-export { default as Input } from './combobox-input.svelte';
+/**
+ * @deprecated use Combobox.Control instead
+ */
+export { default as Input } from './combobox-control.svelte';
+export { default as Control } from './combobox-control.svelte';
 export { Arrow, Indicator, List } from '../dropdown/atoms';

package/dist/components/combobox/{combobox-input.svelte → combobox-control.svelte}

@@ -37,10 +37,10 @@
 	);
 </script>
 
-<Input.Value
+<Input.Control
 	{value}
-	preset="combobox.input"
-	class={['flex-1 py-1', '$preset', klass]}
+	preset="combobox.control"
+	class={['border-border flex-1 py-1', '$preset', klass]}
 	enter={enter?.bind(bond.state)}
 	exit={exit?.bind(bond.state)}
 	initial={initial?.bind(bond.state)}

package/dist/components/combobox/{combobox-input.svelte.d.ts → combobox-control.svelte.d.ts}

@@ -1,4 +1,4 @@
-declare const ComboboxInput: import("svelte").Component<{
+declare const ComboboxControl: import("svelte").Component<{
     class?: string;
     children?: any;
     onmount?: any;
@@ -8,5 +8,5 @@ declare const ComboboxInput: import("svelte").Component<{
     exit?: any;
     initial?: any;
 } & Record<string, any>, {}, "">;
-type ComboboxInput = ReturnType<typeof ComboboxInput>;
-export default ComboboxInput;
+type ComboboxControl = ReturnType<typeof ComboboxControl>;
+export default ComboboxControl;

package/dist/components/combobox/combobox-trigger.svelte

@@ -27,7 +27,7 @@
 	{as}
 	{bond}
 	preset="dropdown.trigger"
-	class={['h-8 w-40', '$preset', klass]}
+	class={['border-border h-8 w-40', '$preset', klass]}
 	enter={enter?.bind(bond.state)}
 	exit={exit?.bind(bond.state)}
 	initial={initial?.bind(bond.state)}

package/dist/components/combobox/compobox-item.svelte

@@ -55,7 +55,7 @@
 	}}
 	{bond}
 	preset="combobox.item"
-	class={['$preset', klass]}
+	class={['border-border', '$preset', klass]}
 	enter={enter?.bind(bond.state)}
 	exit={exit?.bind(bond.state)}
 	initial={initial?.bind(bond.state)}

package/dist/components/container/container.svelte

@@ -42,7 +42,7 @@
 		};
 	}}
 	preset="container"
-	class={['$preset', klass]}
+	class={['border-border', '$preset', klass]}
 	style={[containerTypeStype, containerNameStyle].filter(Boolean).join('; ')}
 	onmount={onmount?.bind(null)}
 	ondestroy={ondestroy?.bind(null)}

package/dist/components/datagrid/datagrid-body.svelte

@@ -31,7 +31,7 @@
 <HtmlAtom
 	{bond}
 	preset="datagrid.body"
-	class={['$preset', klass, 'contents']}
+	class={['border-border', '$preset', klass, 'contents']}
 	enter={enter?.bind(bond.state)}
 	exit={exit?.bind(bond.state)}
 	initial={initial?.bind(bond.state)}

package/dist/components/datagrid/datagrid-footer.svelte

@@ -21,7 +21,7 @@
 <HtmlAtom
 	{bond}
 	preset="datagrid.footer"
-	class={['$preset', klass, 'contents']}
+	class={['border-border', '$preset', klass, 'contents']}
 	enter={enter?.bind(bond.state)}
 	exit={exit?.bind(bond.state)}
 	initial={initial?.bind(bond.state)}

package/dist/components/datagrid/datagrid-header.svelte

@@ -36,7 +36,7 @@
 <HtmlAtom
 	{bond}
 	preset="datagrid.header"
-	class={['col-span-full grid grid-cols-subgrid', '$preset', klass]}
+	class={['border-border col-span-full grid grid-cols-subgrid', '$preset', klass]}
 	enter={enter?.bind(bond.state)}
 	exit={exit?.bind(bond.state)}
 	initial={initial?.bind(bond.state)}

package/dist/components/datagrid/datagrid-root.svelte

@@ -45,7 +45,7 @@
 <HtmlAtom
 	{bond}
 	preset="datagrid"
-	class={['datagrid-root w-full gap-x-0 gap-y-0', '$preset', klass]}
+	class={['border-border', 'datagrid-root w-full gap-x-0 gap-y-0', '$preset', klass]}
 	style="--template-columns:{bond.state.template}"
 	enter={enter?.bind(bond.state)}
 	exit={exit?.bind(bond.state)}