@svelte-atoms/core 1.0.0-alpha.31 → 1.0.0-alpha.33

package/dist/components/calendar/calendar-day.svelte

@@ -1,101 +1,101 @@
-<script lang="ts">
-	import { isBefore, isSameDay, isWithinInterval } from 'date-fns';
-	import { CalendarBond } from './bond.svelte';
-	import type { CalendarDayProps } from './types';
-	import { HtmlAtom } from '../atom';
-
-	const calendarBond = CalendarBond.get();
-
-	const selectedDateStart = $derived(calendarBond?.state.props.start);
-	const selectedDateEnd = $derived(calendarBond?.state.props.end);
-	const isRange = $derived(Array.isArray(calendarBond?.state.props.type === 'range'));
-
-	let {
-		class: klass = '',
-		preset = 'calendar.day',
-		day,
-		as = 'button',
-		children = undefined,
-		onclick = handleClick,
-		...restProps
-	}: CalendarDayProps = $props();
-
-	const dayProps = $derived({
-		...calendarBond?.day(day),
-		...restProps
-	});
-
-	const isSelected = $derived.by(() => {
-		if (selectedDateEnd && selectedDateStart) {
-			return isWithinInterval(day.date, { end: selectedDateEnd, start: selectedDateStart });
-		}
-
-		return selectedDateStart && isSameDay(day.date, selectedDateStart);
-	});
-
-	function handleClick() {
-		if (day.disabled) return;
-
-		if (isRange) {
-			const start = calendarBond?.state.props.start;
-			if (!start) {
-				calendarBond?.state.selectStart(new Date(day.date));
-				return;
-			}
-
-			if (isBefore(new Date(day.date), new Date(start))) {
-				calendarBond?.state.selectStart(new Date(day.date));
-				return;
-			}
-
-			calendarBond?.state.selectEnd(new Date(day.date));
-		} else {
-			calendarBond?.state.selectStart(new Date(day.date));
-		}
-	}
-</script>
-
-<HtmlAtom
-	{as}
-	{preset}
-	class={[
-		'calendar-day text-foreground border-border hover:bg-accent hover:text-accent-foreground h-12 cursor-pointer border-b border-l p-1 transition-colors',
-		day.offmonth && !day.disabled && 'text-muted-foreground/50 bg-muted/50',
-		day.weekend && 'bg-accent',
-		isSelected &&
-			'bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground',
-		isSelected && day.offmonth && 'bg-primary/70',
-		day.today &&
-			!day.disabled &&
-			!isSelected &&
-			'border-primary bg-primary/5 border-2 font-semibold',
-		day.disabled && 'pointer-events-none opacity-25',
-		klass
-	]}
-	data-disabled={day.disabled}
-	data-prec={day.fromPreviousMonth}
-	data-next={day.fromNextMonth}
-	data-offmonth={day.offmonth}
-	data-weekend={day.weekend}
-	data-today={day.today}
-	data-selected={isSelected}
-	{onclick}
-	{...dayProps}
->
-	{#if children}
-		{@render children({
-			calendar: calendarBond!
-		})}
-	{:else}
-		<span class="value">{day.dayOfMonth}</span>
-	{/if}
-</HtmlAtom>
-
-<style>
-	:global(.calendar-day):nth-child(7n + 1) {
-		border-left: none;
-	}
-	:global(.calendar-day):nth-last-child(-n + 7) {
-		border-bottom: none;
-	}
-</style>
+<script lang="ts">
+	import { isBefore, isSameDay, isWithinInterval } from 'date-fns';
+	import { CalendarBond } from './bond.svelte';
+	import type { CalendarDayProps } from './types';
+	import { HtmlAtom } from '../atom';
+
+	const calendarBond = CalendarBond.get();
+
+	const selectedDateStart = $derived(calendarBond?.state.props.start);
+	const selectedDateEnd = $derived(calendarBond?.state.props.end);
+	const isRange = $derived(Array.isArray(calendarBond?.state.props.type === 'range'));
+
+	let {
+		class: klass = '',
+		preset = 'calendar.day',
+		day,
+		as = 'button',
+		children = undefined,
+		onclick = handleClick,
+		...restProps
+	}: CalendarDayProps = $props();
+
+	const dayProps = $derived({
+		...calendarBond?.day(day),
+		...restProps
+	});
+
+	const isSelected = $derived.by(() => {
+		if (selectedDateEnd && selectedDateStart) {
+			return isWithinInterval(day.date, { end: selectedDateEnd, start: selectedDateStart });
+		}
+
+		return selectedDateStart && isSameDay(day.date, selectedDateStart);
+	});
+
+	function handleClick() {
+		if (day.disabled) return;
+
+		if (isRange) {
+			const start = calendarBond?.state.props.start;
+			if (!start) {
+				calendarBond?.state.selectStart(new Date(day.date));
+				return;
+			}
+
+			if (isBefore(new Date(day.date), new Date(start))) {
+				calendarBond?.state.selectStart(new Date(day.date));
+				return;
+			}
+
+			calendarBond?.state.selectEnd(new Date(day.date));
+		} else {
+			calendarBond?.state.selectStart(new Date(day.date));
+		}
+	}
+</script>
+
+<HtmlAtom
+	{as}
+	{preset}
+	class={[
+		'calendar-day text-foreground border-border hover:bg-accent hover:text-accent-foreground h-12 cursor-pointer border-b border-l p-1 transition-colors',
+		day.offmonth && !day.disabled && 'text-muted-foreground/50 bg-muted/50',
+		day.weekend && 'bg-accent',
+		isSelected &&
+			'bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground',
+		isSelected && day.offmonth && 'bg-primary/70',
+		day.today &&
+			!day.disabled &&
+			!isSelected &&
+			'border-primary bg-primary/5 border-2 font-semibold',
+		day.disabled && 'pointer-events-none opacity-25',
+		klass
+	]}
+	data-disabled={day.disabled}
+	data-prec={day.fromPreviousMonth}
+	data-next={day.fromNextMonth}
+	data-offmonth={day.offmonth}
+	data-weekend={day.weekend}
+	data-today={day.today}
+	data-selected={isSelected}
+	{onclick}
+	{...dayProps}
+>
+	{#if children}
+		{@render children({
+			calendar: calendarBond!
+		})}
+	{:else}
+		<span class="value">{day.dayOfMonth}</span>
+	{/if}
+</HtmlAtom>
+
+<style>
+	:global(.calendar-day):nth-child(7n + 1) {
+		border-left: none;
+	}
+	:global(.calendar-day):nth-last-child(-n + 7) {
+		border-bottom: none;
+	}
+</style>

package/dist/components/checkbox/checkbox.svelte

@@ -1,159 +1,159 @@
-<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 './checkbox.css';
-
-	let {
-		class: klass = '',
-		checked = $bindable(false),
-		indeterminate = $bindable(false),
-		value = $bindable(undefined),
-		group = $bindable([]),
-		disabled = false,
-		id,
-		name,
-		checkedContent,
-		indeterminateContent,
-		enter,
-		exit,
-		initial,
-		onchange,
-		oninput,
-		onblur,
-		onfocus,
-		onclick = undefined,
-		...restProps
-	}: CheckboxProps & Exclude<HTMLInputAttributes, 'type'> = $props();
-
-	let checkboxElement: HTMLInputElement | undefined = $state();
-
-	// 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,
-			value: checked,
-			type: 'boolean'
-		});
-	}
-
-	function handleInput(ev: Event) {
-		oninput?.(ev, {
-			checked: checked,
-			value: checked,
-			type: 'boolean'
-		});
-	}
-
-	function handleClick(ev: MouseEvent) {
-		if (disabled) return;
-
-		onclick?.(ev);
-
-		if (ev.defaultPrevented) {
-			return;
-		}
-
-		// 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>
-
-<!-- svelte-ignore a11y_click_events_have_key_events -->
-<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
-<HtmlAtom
-	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',
-		isChecked && 'bg-foreground',
-		'$preset',
-		klass,
-		'relative'
-	]}
-	role="checkbox"
-	aria-checked={isIndeterminate ? 'mixed' : isChecked}
-	{enter}
-	{exit}
-	{initial}
-	onclick={handleClick}
-	{...restProps}
->
-	<input
-		bind:this={checkboxElement}
-		bind:checked
-		bind:group
-		bind:indeterminate
-		{value}
-		{id}
-		{name}
-		{disabled}
-		type="checkbox"
-		class="checkbox-input pointer-events-none"
-		onchange={handleChange}
-		oninput={handleInput}
-		{onblur}
-		{onfocus}
-		hidden
-		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>
+<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 './checkbox.css';
+
+	let {
+		class: klass = '',
+		checked = $bindable(false),
+		indeterminate = $bindable(false),
+		value = $bindable(undefined),
+		group = $bindable([]),
+		disabled = false,
+		id,
+		name,
+		checkedContent,
+		indeterminateContent,
+		enter,
+		exit,
+		initial,
+		onchange,
+		oninput,
+		onblur,
+		onfocus,
+		onclick = undefined,
+		...restProps
+	}: CheckboxProps & Exclude<HTMLInputAttributes, 'type'> = $props();
+
+	let checkboxElement: HTMLInputElement | undefined = $state();
+
+	// 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,
+			value: checked,
+			type: 'boolean'
+		});
+	}
+
+	function handleInput(ev: Event) {
+		oninput?.(ev, {
+			checked: checked,
+			value: checked,
+			type: 'boolean'
+		});
+	}
+
+	function handleClick(ev: MouseEvent) {
+		if (disabled) return;
+
+		onclick?.(ev);
+
+		if (ev.defaultPrevented) {
+			return;
+		}
+
+		// 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>
+
+<!-- svelte-ignore a11y_click_events_have_key_events -->
+<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+<HtmlAtom
+	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',
+		isChecked && 'bg-foreground',
+		'$preset',
+		klass,
+		'relative'
+	]}
+	role="checkbox"
+	aria-checked={isIndeterminate ? 'mixed' : isChecked}
+	{enter}
+	{exit}
+	{initial}
+	onclick={handleClick}
+	{...restProps}
+>
+	<input
+		bind:this={checkboxElement}
+		bind:checked
+		bind:group
+		bind:indeterminate
+		{value}
+		{id}
+		{name}
+		{disabled}
+		type="checkbox"
+		class="checkbox-input pointer-events-none"
+		onchange={handleChange}
+		oninput={handleInput}
+		{onblur}
+		{onfocus}
+		hidden
+		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>

package/dist/components/collapsible/bond.svelte.js

@@ -1,6 +1,7 @@
 import { createAttachmentKey } from 'svelte/attachments';
 import { getContext, setContext } from 'svelte';
 import { Bond, BondState } from '../../shared/bond.svelte';
+import { isBrowser } from '../../utils/dom.svelte.js';
 export class CollapsibleBond extends Bond {
     static CONTEXT_KEY = '@atoms/context/collapsible';
     #parent;
@@ -28,7 +29,7 @@ export class CollapsibleBond extends Bond {
     header(props = {}) {
         const isDisabled = this.state?.props?.disabled ?? false;
         const isOpen = this.state?.props?.open ?? false;
-        const isButton = this.elements.header instanceof HTMLButtonElement;
+        const isButton = isBrowser() && this.elements.header instanceof HTMLButtonElement;
         return {
             'aria-disabled': isDisabled ? 'true' : 'false',
             'aria-expanded': isOpen ? 'true' : 'false',

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

@@ -1,6 +1,7 @@
 <script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
 	import { HtmlAtom, type Base } from '../atom';
 	import { CollapsibleBond } from './bond.svelte';
+	import { animateCollapsibleBody } from './motion.svelte';
 	import type { CollapsibleBodyProps } from './types';
 
 	const bond = CollapsibleBond.get();
@@ -10,10 +11,10 @@
 		children = undefined,
 		onmount = undefined,
 		ondestroy = undefined,
-		animate = undefined,
+		animate = animateCollapsibleBody(),
 		enter = undefined,
 		exit = undefined,
-		initial = undefined,
+		initial = animateCollapsibleBody({ duration: 0 }),
 		...restProps
 	}: CollapsibleBodyProps<E, B> = $props();
 

package/dist/components/collapsible/motion.svelte.d.ts

@@ -0,0 +1,6 @@
+export type AnimateCollapsibleBodyParams = {
+    duration?: number;
+    delay?: number;
+    ease?: string;
+};
+export declare function animateCollapsibleBody(params?: AnimateCollapsibleBodyParams): (node: HTMLElement) => void;

package/dist/components/collapsible/motion.svelte.js

@@ -0,0 +1,15 @@
+import { animate } from 'motion';
+import { CollapsibleBond } from '.';
+import { DURATION } from '../../shared';
+export function animateCollapsibleBody(params = {}) {
+    const bond = CollapsibleBond.get();
+    return (node) => {
+        const { duration = DURATION.fast / 1000, delay = 0, ease } = params;
+        const isOpen = bond?.state.props.open ?? false;
+        // animate(node, { opacity: +isOpen }, { duration, ease, delay });
+        animate(node, {
+            opacity: +isOpen,
+            height: isOpen ? 'auto' : 0
+        }, { duration, delay, ease });
+    };
+}

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

@@ -1,9 +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 Item } from './combobox-item.svelte';
 /**
- * @deprecated use Combobox.Control instead
+ * @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, Group, Divider, Title } from '../dropdown/atoms';
+export { Arrow, Indicator, Content, List, Group, Divider, Title } from '../dropdown/atoms';

package/dist/components/combobox/atoms.js

@@ -1,9 +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 Item } from './combobox-item.svelte';
 /**
- * @deprecated use Combobox.Control instead
+ * @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, Group, Divider, Title } from '../dropdown/atoms';
+export { Arrow, Indicator, Content, List, Group, Divider, Title } from '../dropdown/atoms';

package/dist/components/combobox/bond.svelte.d.ts

@@ -10,9 +10,8 @@ export type ComboboxBondElements = PopoverDomElements & {
 };
 export declare class ComboboxBond<T = unknown> extends DropdownBond<ComboboxBondProps, ComboboxBondState<T>, ComboboxBondElements> {
     constructor(s: ComboboxBondState<T>);
-    input(props?: Record<string, unknown>): {
-        oninput: (ev: Event) => void;
-        onkeydown: (ev: KeyboardEvent) => void;
+    control(): {
+        [x: symbol]: (node: HTMLInputElement) => void;
         'data-atom': string;
         'data-kind': string;
         role: string;
@@ -21,11 +20,12 @@ export declare class ComboboxBond<T = unknown> extends DropdownBond<ComboboxBond
         'aria-controls': string;
         'aria-activedescendant': string | undefined;
         'aria-disabled': boolean;
-        'aria-label': {};
         tabindex: number;
+        oninput: (ev: Event) => void;
+        onkeydown: (ev: KeyboardEvent) => void;
     };
-    static get: typeof DropdownBond.getContext;
-    static set: typeof DropdownBond.setContext;
+    static get: typeof DropdownBond.get;
+    static set: typeof DropdownBond.set;
 }
 export declare class ComboboxBondState<T> extends DropdownBondState<ComboboxBondProps> {
     constructor(props: () => ComboboxBondProps);