@svelte-atoms/core 1.0.0-alpha.41 → 1.0.0-alpha.44

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

@@ -1,92 +1,92 @@
-<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
-	import { defineState } from '../../utils';
-	import { defineProperty } from '../../utils/state';
-	import { HtmlAtom, type Base } from '../atom';
-	import { CardBond, CardBondState, type CardBondProps } from './bond.svelte';
-	import type { CardRootProps } from './types';
-	import './card.css';
-
-	let {
-		class: klass = '',
-		disabled = false,
-		factory = _factory,
-		children = undefined,
-		onclick = undefined,
-		onkeydown = undefined,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = undefined,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
-		...restProps
-	}: CardRootProps<E, B> = $props();
-
-	const bondProps = defineState<CardBondProps>(
-		[
-			defineProperty(
-				'disabled',
-				() => disabled,
-				(v) => {
-					disabled = v;
-				}
-			),
-			defineProperty('rest', () => restProps)
-		],
-		() => ({})
-	);
-	const bond = _factory(bondProps).share();
-
-	// Disabled styles
-	const disabledStyles = disabled ? 'opacity-50 cursor-not-allowed' : '';
-
-	const rootProps = $derived({
-		...bond?.root(),
-		...restProps
-	});
-
-	function _factory(props: typeof bondProps) {
-		const bondState = new CardBondState(() => props);
-		return new CardBond(bondState);
-	}
-
-	function handleClick(event: MouseEvent) {
-		if (disabled) return;
-		onclick?.(event);
-	}
-
-	function handleKeydown(event: KeyboardEvent) {
-		if (disabled) return;
-		if (event.key === 'Enter' || event.key === ' ') {
-			event.preventDefault();
-			onclick?.(event as unknown as MouseEvent);
-		}
-		onkeydown?.(event);
-	}
-
-	export function getBond() {
-		return bond;
-	}
-</script>
-
-<HtmlAtom
-	preset="card"
-	class={[
-		'card bg-card border-border flex flex-col overflow-clip rounded-lg border shadow-sm',
-		disabledStyles,
-		'$preset',
-		klass
-	]}
-	{bond}
-	enter={enter?.bind(bond.state)}
-	exit={exit?.bind(bond.state)}
-	initial={initial?.bind(bond.state)}
-	animate={animate?.bind(bond.state)}
-	onmount={onmount?.bind(bond.state)}
-	ondestroy={ondestroy?.bind(bond.state)}
-	onclick={handleClick}
-	onkeydown={handleKeydown}
-	{...rootProps}
->
-	{@render children?.({ card: bond })}
-</HtmlAtom>
+<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
+	import { defineState } from '../../utils';
+	import { defineProperty } from '../../utils/state';
+	import { HtmlAtom, type Base } from '../atom';
+	import { CardBond, CardBondState, type CardBondProps } from './bond.svelte';
+	import type { CardRootProps } from './types';
+	import './card.css';
+
+	let {
+		class: klass = '',
+		disabled = false,
+		factory = _factory,
+		children = undefined,
+		onclick = undefined,
+		onkeydown = undefined,
+		onmount = undefined,
+		ondestroy = undefined,
+		animate = undefined,
+		enter = undefined,
+		exit = undefined,
+		initial = undefined,
+		...restProps
+	}: CardRootProps<E, B> = $props();
+
+	const bondProps = defineState<CardBondProps>(
+		[
+			defineProperty(
+				'disabled',
+				() => disabled,
+				(v) => {
+					disabled = v;
+				}
+			),
+			defineProperty('rest', () => restProps)
+		],
+		() => ({})
+	);
+	const bond = _factory(bondProps).share();
+
+	// Disabled styles
+	const disabledStyles = disabled ? 'opacity-50 cursor-not-allowed' : '';
+
+	const rootProps = $derived({
+		...bond?.root(),
+		...restProps
+	});
+
+	function _factory(props: typeof bondProps) {
+		const bondState = new CardBondState(() => props);
+		return new CardBond(bondState);
+	}
+
+	function handleClick(event: MouseEvent) {
+		if (disabled) return;
+		onclick?.(event);
+	}
+
+	function handleKeydown(event: KeyboardEvent) {
+		if (disabled) return;
+		if (event.key === 'Enter' || event.key === ' ') {
+			event.preventDefault();
+			onclick?.(event as unknown as MouseEvent);
+		}
+		onkeydown?.(event);
+	}
+
+	export function getBond() {
+		return bond;
+	}
+</script>
+
+<HtmlAtom
+	preset="card"
+	class={[
+		'card bg-card border-border flex flex-col overflow-clip rounded-lg border shadow-sm',
+		disabledStyles,
+		'$preset',
+		klass
+	]}
+	{bond}
+	enter={enter?.bind(bond.state)}
+	exit={exit?.bind(bond.state)}
+	initial={initial?.bind(bond.state)}
+	animate={animate?.bind(bond.state)}
+	onmount={onmount?.bind(bond.state)}
+	ondestroy={ondestroy?.bind(bond.state)}
+	onclick={handleClick}
+	onkeydown={handleKeydown}
+	{...rootProps}
+>
+	{@render children?.({ card: bond })}
+</HtmlAtom>

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

@@ -1,68 +1,29 @@
 import type { Snippet } from 'svelte';
 import type { CardBond } from './bond.svelte';
-import type { HtmlAtomProps, Base } from '../atom';
+import type { HtmlAtomProps, Base, SnippetProps } from '../atom';
 import type { Factory } from '../../types';
-/**
- * Extend this interface to add custom card root properties in your application.
- */
-export interface CardExtendProps {
+export interface CardSnippetProps extends SnippetProps {
+    card: CardBond;
 }
-/**
- * Extend this interface to add custom card header properties in your application.
- */
-export interface CardHeaderExtendProps {
-}
-/**
- * Extend this interface to add custom card body/content properties in your application.
- */
-export interface CardBodyExtendProps {
-}
-/**
- * Extend this interface to add custom card footer properties in your application.
- */
-export interface CardFooterExtendProps {
-}
-/**
- * Extend this interface to add custom card title properties in your application.
- */
-export interface CardTitleExtendProps {
-}
-/**
- * Extend this interface to add custom card subtitle properties in your application.
- */
-export interface CardSubtitleExtendProps {
-}
-/**
- * Extend this interface to add custom card description properties in your application.
- */
-export interface CardDescriptionExtendProps {
-}
-/**
- * Extend this interface to add custom card media properties in your application.
- */
-export interface CardMediaExtendProps {
-}
-export interface CardRootProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends Omit<HtmlAtomProps<E, B>, 'children'>, CardExtendProps {
+export type CardChildren = Snippet<[CardSnippetProps]>;
+export interface CardRootProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends HtmlAtomProps<E, B, CardChildren> {
     disabled?: boolean;
     factory?: Factory<CardBond>;
-    children?: Snippet<[{
-        card: CardBond;
-    }]>;
     onclick?: (event: MouseEvent) => void;
     onkeydown?: (event: KeyboardEvent) => void;
 }
-export interface CardHeaderProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends HtmlAtomProps<E, B>, CardHeaderExtendProps {
+export interface CardHeaderProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends HtmlAtomProps<E, B, CardChildren> {
 }
-export interface CardBodyProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends HtmlAtomProps<E, B>, CardBodyExtendProps {
+export interface CardBodyProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends HtmlAtomProps<E, B, CardChildren> {
 }
-export interface CardFooterProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends HtmlAtomProps<E, B>, CardFooterExtendProps {
+export interface CardFooterProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends HtmlAtomProps<E, B, CardChildren> {
 }
-export interface CardTitleProps<E extends keyof HTMLElementTagNameMap = 'h3', B extends Base = Base> extends HtmlAtomProps<E, B>, CardTitleExtendProps {
+export interface CardTitleProps<E extends keyof HTMLElementTagNameMap = 'h3', B extends Base = Base> extends HtmlAtomProps<E, B, CardChildren> {
 }
-export interface CardSubtitleProps<E extends keyof HTMLElementTagNameMap = 'p', B extends Base = Base> extends HtmlAtomProps<E, B>, CardSubtitleExtendProps {
+export interface CardSubtitleProps<E extends keyof HTMLElementTagNameMap = 'p', B extends Base = Base> extends HtmlAtomProps<E, B, CardChildren> {
 }
-export interface CardDescriptionProps<E extends keyof HTMLElementTagNameMap = 'p', B extends Base = Base> extends HtmlAtomProps<E, B>, CardDescriptionExtendProps {
+export interface CardDescriptionProps<E extends keyof HTMLElementTagNameMap = 'p', B extends Base = Base> extends HtmlAtomProps<E, B, CardChildren> {
 }
-export interface CardMediaProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends HtmlAtomProps<E, B>, CardMediaExtendProps {
+export interface CardMediaProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends HtmlAtomProps<E, B, CardChildren> {
 }
 export type CardContentProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> = CardBodyProps<E, B>;

package/dist/components/checkbox/checkbox.svelte

@@ -1,13 +1,11 @@
 <script lang="ts">
-	import { circOut } from 'svelte/easing';
-	import type { HTMLInputAttributes } from 'svelte/elements';
-	import { scale } from 'svelte/transition';
 	import { Icon } from '../icon';
 	import { HtmlAtom } from '../atom';
 	import CheckmarkRegularIcon from '../../icons/icon-checkmark.svelte';
-	import { DURATION } from '../../shared';
 	import type { CheckboxProps } from './types';
+	import { animateCheckboxIndicator } from './motion';
 	import './checkbox.css';
+	import { Input } from '../input';
 
 	let {
 		class: klass = '',
@@ -29,8 +27,9 @@
 		onfocus,
 		onclick = undefined,
 		...restProps
-	}: CheckboxProps & Exclude<HTMLInputAttributes, 'type'> = $props();
+	}: CheckboxProps = $props();
 
+	// eslint-disable-next-line @typescript-eslint/no-unused-vars
 	let checkboxElement: HTMLInputElement | undefined = $state();
 
 	// Computed state for visual representation
@@ -38,27 +37,34 @@
 	const isIndeterminate = $derived(indeterminate === true);
 	const showCheckmark = $derived(isChecked && !isIndeterminate);
 
+	const overlayContent = $derived(isIndeterminate ? indeterminateSnippet : showCheckmark ? checkedSnippet : undefined);
+
 	function handleChange(ev: Event) {
 		onchange?.(ev, {
-			checked: checked,
-			value: checked,
-			type: 'boolean'
+			checked: checked
 		});
 	}
 
 	function handleInput(ev: Event) {
 		oninput?.(ev, {
-			checked: checked,
-			value: checked,
-			type: 'boolean'
+			checked: checked
 		});
 	}
 
 	function handleClick(ev: MouseEvent) {
 		if (disabled) return;
+		
+		// Check if click originated from the hidden input (via label click)
+		// If so, the input's bind:checked will handle the toggle
+		console.log(ev.target);
+		if (ev.target === checkboxElement) {
+			return;
+		}
 
+		// Let user's onclick handler run first
 		onclick?.(ev);
 
+		// If user prevented default, don't toggle
 		if (ev.defaultPrevented) {
 			return;
 		}
@@ -69,22 +75,64 @@
 			indeterminate = false;
 			checked = true;
 		} else {
-			// Toggle checked state
+			// Checked → unchecked or unchecked → checked
+			ev.stopPropagation(); // Prevent click from bubbling to label and toggling again
 			checked = !checked;
 		}
 
-		// Trigger input event manually if needed
 		handleInput(ev);
 	}
 </script>
 
+{#snippet indeterminateSnippet()}
+	<HtmlAtom
+		preset="checkbox.indeterminate"
+		class={[
+			'checkbox-indeterminate pointer-events-none flex size-full scale-50 items-center justify-center rounded-inherit bg-current'
+		]}
+		base={indeterminateContent}
+		enter={animateCheckboxIndicator()}
+		exit={animateCheckboxIndicator()}
+	/>
+{/snippet}
+
+{#snippet customCheckedSnippet()}
+	<HtmlAtom
+		preset="checkbox.checkmark"
+		class={[
+			'checkbox-indicator text-accent pointer-events-none flex h-full content-center items-center justify-center overflow-hidden p-0.5'
+		]}
+		base={checkedContent}
+		enter={animateCheckboxIndicator()}
+		exit={animateCheckboxIndicator()}
+	/>
+{/snippet}
+
+{#snippet defaultCheckedSnippet()}
+	<HtmlAtom
+		preset="checkbox.checkmark"
+		class={[
+			'checkbox-indicator text-accent pointer-events-none flex h-full content-center items-center justify-center overflow-hidden p-0.5'
+		]}
+		enter={animateCheckboxIndicator()}
+		exit={animateCheckboxIndicator()}
+	>
+		<Icon class="h-full p-0" src={CheckmarkRegularIcon} />
+	</HtmlAtom>
+{/snippet}
+
+{#snippet checkedSnippet()}
+	{@const content = checkedContent ? customCheckedSnippet : defaultCheckedSnippet}
+	{@render content?.()}
+{/snippet}
+
 <!-- svelte-ignore a11y_click_events_have_key_events -->
 <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
-<HtmlAtom
+<Input.Root
 	preset="checkbox"
 	as="div"
 	class={[
-		'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',
+		'checkbox-root aspect-square shrink-0 text-foreground h-5 w-fit cursor-pointer rounded-sm outline-0 outline-offset-2 transition-colors duration-100',
 		isChecked && 'bg-foreground',
 		'$preset',
 		klass,
@@ -117,43 +165,5 @@
 		tabindex="-1"
 	/>
 
-	{#if isIndeterminate}
-		{#if indeterminateContent}
-			<HtmlAtom
-				preset="checkbox.indeterminate"
-				class={[
-					'checkbox-indeterminate pointer-events-none flex size-full scale-50 items-center justify-center rounded-[inherit] bg-current'
-				]}
-				base={indeterminateContent}
-			/>
-		{:else}
-			<HtmlAtom
-				preset="checkbox.indeterminate"
-				class={[
-					'checkbox-indeterminate pointer-events-none flex size-full scale-50 items-center justify-center rounded-[inherit] bg-current'
-				]}
-			/>
-		{/if}
-	{:else if showCheckmark}
-		{#if checkedContent}
-			<HtmlAtom
-				preset="checkbox.checkmark"
-				class={[
-					'checkbox-indicator text-accent pointer-events-none flex h-full content-center items-center justify-center overflow-hidden p-0.5'
-				]}
-				base={checkedContent}
-			/>
-		{:else}
-			<HtmlAtom
-				preset="checkbox.checkmark"
-				class={[
-					'checkbox-indicator text-accent pointer-events-none flex h-full content-center items-center justify-center overflow-hidden p-0.5'
-				]}
-				enter={(node) => scale(node, { duration: DURATION.fast, easing: circOut, start: 0.6 })}
-				exit={(node) => scale(node, { duration: DURATION.fast, easing: circOut, start: 0.6 })}
-			>
-				<Icon class="h-full p-0" src={CheckmarkRegularIcon} />
-			</HtmlAtom>
-		{/if}
-	{/if}
-</HtmlAtom>
+	{@render overlayContent?.()}
+</Input.Root>

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

@@ -1,7 +1,5 @@
-import type { HTMLInputAttributes } from 'svelte/elements';
 import type { CheckboxProps } from './types';
 import './checkbox.css';
-type $$ComponentProps = CheckboxProps & Exclude<HTMLInputAttributes, 'type'>;
-declare const Checkbox: import("svelte").Component<$$ComponentProps, {}, "value" | "group" | "checked" | "indeterminate">;
+declare const Checkbox: import("svelte").Component<CheckboxProps, {}, "value" | "group" | "checked" | "indeterminate">;
 type Checkbox = ReturnType<typeof Checkbox>;
 export default Checkbox;

package/dist/components/checkbox/index.d.ts

@@ -1 +1,3 @@
 export { default as Checkbox } from './checkbox.svelte';
+export type { CheckboxSnippetProps, CheckboxChildren } from './types';
+export * from './motion';

package/dist/components/checkbox/index.js

@@ -1 +1,2 @@
 export { default as Checkbox } from './checkbox.svelte';
+export * from './motion';

package/dist/components/checkbox/motion.d.ts

@@ -0,0 +1,17 @@
+import type { EasingFunction } from 'svelte/transition';
+import type { TransitionFunction } from '../element';
+export type AnimateCheckboxIndicatorParams = {
+    /** Animation duration in milliseconds */
+    duration?: number;
+    /** Delay before animation starts in milliseconds (default: 0) */
+    delay?: number;
+    /** Custom easing function (default: cubicIn) */
+    easing?: EasingFunction;
+};
+/**
+ * Exit transition for checkbox indicator (uncheck/clear indeterminate)
+ * Quick scale and fade out
+ *
+ * Respects prefers-reduced-motion by using instant transition
+ */
+export declare function animateCheckboxIndicator(params?: AnimateCheckboxIndicatorParams): TransitionFunction<HTMLElement>;

package/dist/components/checkbox/motion.js

@@ -0,0 +1,34 @@
+import { cubicIn } from 'svelte/easing';
+/**
+ * Check if user prefers reduced motion
+ */
+function prefersReducedMotion() {
+    if (typeof window === 'undefined')
+        return false;
+    return window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+}
+/**
+ * Exit transition for checkbox indicator (uncheck/clear indeterminate)
+ * Quick scale and fade out
+ *
+ * Respects prefers-reduced-motion by using instant transition
+ */
+export function animateCheckboxIndicator(params = {}) {
+    const { duration = 100, delay = 0, easing = cubicIn } = params;
+    return () => {
+        // If user prefers reduced motion, use instant transition
+        if (prefersReducedMotion()) {
+            return {
+                duration: 0,
+                delay: 0,
+                css: () => ''
+            };
+        }
+        return () => ({
+            duration,
+            delay,
+            easing,
+            css: (t) => `transform: scale(${t}); opacity: ${t};`
+        });
+    };
+}

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

@@ -1,20 +1,27 @@
 import { type Component, type Snippet } from 'svelte';
-import { type HtmlAtomProps } from '../atom';
-/**
- * Extend this interface to add custom checkbox properties in your application.
- */
-export interface CheckboxExtendProps {
+import { type HtmlAtomProps, type SnippetProps } from '../atom';
+export interface CheckboxSnippetProps extends SnippetProps {
+    checked?: boolean;
+    indeterminate?: boolean;
 }
-export interface CheckboxProps extends HtmlAtomProps<'button'>, CheckboxExtendProps {
+export type CheckboxChildren = Snippet<[CheckboxSnippetProps]>;
+export interface CheckboxProps extends HtmlAtomProps<'button', never, CheckboxChildren> {
     value?: string;
     group?: string[];
     checked?: boolean;
     indeterminate?: boolean;
+    disabled?: boolean;
+    id?: string;
+    name?: string;
     checkedContent?: Component | Snippet;
     indeterminateContent?: Component | Snippet;
-    children?: Snippet<[]>;
     onclick?: (ev?: Event) => void;
     onchange?: (ev?: Event, options?: {
         checked: boolean;
     }) => void;
+    oninput?: (ev?: Event, options?: {
+        checked: boolean;
+    }) => void;
+    onblur?: () => void;
+    onfocus?: () => void;
 }

package/dist/components/chip/chip-close-button.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+	import { HtmlAtom } from '../atom';
+	import { Icon } from '../icon';
+	import type { ChipCloseButtonProps } from './types';
+	import CloseIcon from '../../icons/icon-close.svelte';
+
+	let {
+		class: klass = '',
+		preset = 'chip.close-button',
+		icon = undefined,
+		onclick = undefined,
+		...restProps
+	}: ChipCloseButtonProps = $props();
+</script>
+
+<HtmlAtom
+	{preset}
+	as="button"
+	class={[
+		'bg-foreground/0 hover:bg-foreground/5 active:bg-foreground/10 inline-flex aspect-square h-full cursor-pointer items-center justify-center rounded-xs p-0.5',
+		'$preset',
+		klass
+	]}
+	type="button"
+	{onclick}
+	{...restProps}
+>
+	{#if icon}
+		{@render icon?.()}
+	{:else}
+		<Icon src={CloseIcon} class="h-full" />
+	{/if}
+</HtmlAtom>

package/dist/components/chip/chip-close-button.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { ChipCloseButtonProps } from './types';
+declare const ChipCloseButton: import("svelte").Component<ChipCloseButtonProps, {}, "">;
+type ChipCloseButton = ReturnType<typeof ChipCloseButton>;
+export default ChipCloseButton;

package/dist/components/chip/chip.svelte

@@ -1,41 +1,34 @@
-<script lang="ts">
-	import type { HTMLAttributes } from 'svelte/elements';
-	import { HtmlAtom } from '../atom';
-	import { Icon } from '../icon';
-	import type { ChipProps } from './types';
-	import CloseIcon from '../../icons/icon-close.svelte';
-
-	let {
-		class: klass = '',
-		preset = 'chip',
-		children = undefined,
-		icon = undefined,
-		onclose = undefined,
-		...restProps
-	}: ChipProps & HTMLAttributes<HTMLButtonElement> = $props();
-</script>
-
-<HtmlAtom
-	{preset}
-	as="div"
-	class={[
-		'chip text-foreground bg-foreground/5 border-border hover:bg-foreground/10 active:bg-foreground/15 disabled:bg-muted disabled:text-muted-foreground w-fit cursor-pointer rounded-md px-3 py-1 transition-colors duration-100',
-		'$preset',
-		klass
-	]}
-	{...restProps}
->
-	{@render children?.()}
-
-	<button
-		class="bg-foreground/0 hover:bg-foreground/5 active:bg-foreground/10 inline-flex aspect-square h-full cursor-pointer items-center justify-center rounded-xs p-0.5"
-		type="button"
-		onclick={onclose}
-	>
-		{#if icon}
-			{@render icon?.()}
-		{:else}
-			<Icon src={CloseIcon} class="h-full" />
-		{/if}
-	</button>
-</HtmlAtom>
+<script lang="ts">
+	import { HtmlAtom } from '../atom';
+	import type { ChipProps } from './types';
+	import ChipCloseButton from './chip-close-button.svelte';
+
+	let {
+		class: klass = '',
+		preset = 'chip',
+		children = undefined,
+		icon = undefined,
+		closeButton = undefined,
+		onclose = undefined,
+		...restProps
+	}: ChipProps = $props();
+</script>
+
+<HtmlAtom
+	{preset}
+	as="div"
+	class={[
+		'chip text-foreground bg-foreground/5 border-border hover:bg-foreground/10 active:bg-foreground/15 disabled:bg-muted disabled:text-muted-foreground w-fit cursor-pointer rounded-md px-3 py-1 transition-colors duration-100',
+		'$preset',
+		klass
+	]}
+	{...restProps}
+>
+	{@render children?.()}
+
+	{#if closeButton}
+		{@render closeButton?.()}
+	{:else}
+		<ChipCloseButton {icon} onclick={onclose} />
+	{/if}
+</HtmlAtom>