@svelte-atoms/core 1.0.0-alpha.30 → 1.0.0-alpha.32

package/dist/components/collapsible/collapsible.stories.svelte

@@ -1,172 +1,172 @@
-<script module>
-	import { defineMeta } from '@storybook/addon-svelte-csf';
-	import { Collapsible as ACollapsible } from '.';
-
-	import { animate as motion } from 'motion';
-
-	// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
-	const { Story } = defineMeta({
-		title: 'Atoms/Collapsible',
-		// This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
-
-		parameters: {
-			// More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
-			layout: 'fullscreen'
-		},
-		args: {}
-	});
-</script>
-
-<script lang="ts">
-</script>
-
-<Story name="Collapsible" args={{}}>
-	<div class="flex w-full flex-col gap-2">
-		<ACollapsible.Root>
-			{#snippet children({ collapsible })}
-				{@const isOpen = collapsible.state.props.open}
-
-				<ACollapsible.Header class="">
-					<div>Hello Atoms UI 1</div>
-					<ACollapsible.Indicator />
-				</ACollapsible.Header>
-
-				<ACollapsible.Body
-					class={['pointer-events-none h-0 opacity-0', isOpen && 'pointer-events-auto']}
-					enter={(node) => {
-						motion(
-							node,
-							{
-								opacity: +isOpen,
-								height: isOpen ? 'auto' : 0
-							},
-							{
-								duration: 0.2,
-								ease: 'linear'
-							}
-						);
-						return { duration: 0.2 };
-					}}
-					exit={(node) => {
-						motion(node, { opacity: 0, height: 0 }, { duration: 0.2, ease: 'linear' });
-						return { duration: 0.2 };
-					}}
-					animate={(node) => {
-						motion(
-							node,
-							{
-								opacity: +isOpen,
-								height: isOpen ? 'auto' : 0
-							},
-							{ duration: 0.2, ease: 'linear' }
-						);
-					}}
-				>
-					<div class="py-2">
-						Mauris et habitasse cubilia potenti at condimentum iaculis nam. Ante fusce litora
-						tristique letius libero. Curabitur vitae cursus consectetur feugiat aenean viverra vel
-						dolor diam nascetur.
-					</div>
-				</ACollapsible.Body>
-			{/snippet}
-		</ACollapsible.Root>
-
-		<ACollapsible.Root>
-			{#snippet children({ collapsible })}
-				{@const isOpen = collapsible.state.isOpen}
-
-				<ACollapsible.Header class="">
-					<div>Hello Atoms UI 2</div>
-					<ACollapsible.Indicator />
-				</ACollapsible.Header>
-
-				<ACollapsible.Body
-					class={['pointer-events-none h-0 opacity-0', isOpen && 'pointer-events-auto']}
-					enter={(node) => {
-						motion(
-							node,
-							{
-								opacity: +isOpen,
-								height: isOpen ? 'auto' : 0
-							},
-							{
-								duration: 0.2,
-								ease: 'linear'
-							}
-						);
-						return { duration: 0.2 };
-					}}
-					exit={(node) => {
-						motion(node, { opacity: 0, height: 0 }, { duration: 0.2, ease: 'linear' });
-						return { duration: 0.2 };
-					}}
-					animate={(node) => {
-						motion(
-							node,
-							{
-								opacity: +isOpen,
-								height: isOpen ? 'auto' : 0
-							},
-							{ duration: 0.1, ease: 'linear' }
-						);
-					}}
-				>
-					<div class="py-2">
-						Mauris et habitasse cubilia potenti at condimentum iaculis nam. Ante fusce litora
-						tristique letius libero. Curabitur vitae cursus consectetur feugiat aenean viverra vel
-						dolor diam nascetur.
-					</div>
-				</ACollapsible.Body>
-			{/snippet}
-		</ACollapsible.Root>
-
-		<ACollapsible.Root>
-			{#snippet children({ collapsible })}
-				{@const isOpen = collapsible.state.isOpen}
-
-				<ACollapsible.Header class="">
-					<div>Hello Atoms UI 3</div>
-					<ACollapsible.Indicator />
-				</ACollapsible.Header>
-
-				<ACollapsible.Body
-					class={['pointer-events-none h-0 opacity-0', isOpen && 'pointer-events-auto']}
-					enter={(node) => {
-						motion(
-							node,
-							{
-								opacity: +isOpen,
-								height: isOpen ? 'auto' : 0
-							},
-							{
-								duration: 0.2,
-								ease: 'linear'
-							}
-						);
-						return { duration: 0.2 };
-					}}
-					exit={(node) => {
-						motion(node, { opacity: 0, height: 0 }, { duration: 0.2, ease: 'linear' });
-						return { duration: 0.2 };
-					}}
-					animate={(node) => {
-						motion(
-							node,
-							{
-								opacity: +isOpen,
-								height: isOpen ? 'auto' : 0
-							},
-							{ duration: 0.1, ease: 'linear' }
-						);
-					}}
-				>
-					<div class="py-2">
-						Mauris et habitasse cubilia potenti at condimentum iaculis nam. Ante fusce litora
-						tristique letius libero. Curabitur vitae cursus consectetur feugiat aenean viverra vel
-						dolor diam nascetur.
-					</div>
-				</ACollapsible.Body>
-			{/snippet}
-		</ACollapsible.Root>
-	</div>
-</Story>
+<script module>
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import { Collapsible as ACollapsible } from '.';
+
+	import { animate as motion } from 'motion';
+
+	// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+	const { Story } = defineMeta({
+		title: 'Atoms/Collapsible',
+		// This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+
+		parameters: {
+			// More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
+			layout: 'fullscreen'
+		},
+		args: {}
+	});
+</script>
+
+<script lang="ts">
+</script>
+
+<Story name="Collapsible" args={{}}>
+	<div class="flex w-full flex-col gap-2">
+		<ACollapsible.Root>
+			{#snippet children({ collapsible })}
+				{@const isOpen = collapsible.state.props.open}
+
+				<ACollapsible.Header class="">
+					<div>Hello Atoms UI 1</div>
+					<ACollapsible.Indicator />
+				</ACollapsible.Header>
+
+				<ACollapsible.Body
+					class={['pointer-events-none h-0 opacity-0', isOpen && 'pointer-events-auto']}
+					enter={(node) => {
+						motion(
+							node,
+							{
+								opacity: +isOpen,
+								height: isOpen ? 'auto' : 0
+							},
+							{
+								duration: 0.2,
+								ease: 'linear'
+							}
+						);
+						return { duration: 0.2 };
+					}}
+					exit={(node) => {
+						motion(node, { opacity: 0, height: 0 }, { duration: 0.2, ease: 'linear' });
+						return { duration: 0.2 };
+					}}
+					animate={(node) => {
+						motion(
+							node,
+							{
+								opacity: +isOpen,
+								height: isOpen ? 'auto' : 0
+							},
+							{ duration: 0.2, ease: 'linear' }
+						);
+					}}
+				>
+					<div class="py-2">
+						Mauris et habitasse cubilia potenti at condimentum iaculis nam. Ante fusce litora
+						tristique letius libero. Curabitur vitae cursus consectetur feugiat aenean viverra vel
+						dolor diam nascetur.
+					</div>
+				</ACollapsible.Body>
+			{/snippet}
+		</ACollapsible.Root>
+
+		<ACollapsible.Root>
+			{#snippet children({ collapsible })}
+				{@const isOpen = collapsible.state.isOpen}
+
+				<ACollapsible.Header class="">
+					<div>Hello Atoms UI 2</div>
+					<ACollapsible.Indicator />
+				</ACollapsible.Header>
+
+				<ACollapsible.Body
+					class={['pointer-events-none h-0 opacity-0', isOpen && 'pointer-events-auto']}
+					enter={(node) => {
+						motion(
+							node,
+							{
+								opacity: +isOpen,
+								height: isOpen ? 'auto' : 0
+							},
+							{
+								duration: 0.2,
+								ease: 'linear'
+							}
+						);
+						return { duration: 0.2 };
+					}}
+					exit={(node) => {
+						motion(node, { opacity: 0, height: 0 }, { duration: 0.2, ease: 'linear' });
+						return { duration: 0.2 };
+					}}
+					animate={(node) => {
+						motion(
+							node,
+							{
+								opacity: +isOpen,
+								height: isOpen ? 'auto' : 0
+							},
+							{ duration: 0.1, ease: 'linear' }
+						);
+					}}
+				>
+					<div class="py-2">
+						Mauris et habitasse cubilia potenti at condimentum iaculis nam. Ante fusce litora
+						tristique letius libero. Curabitur vitae cursus consectetur feugiat aenean viverra vel
+						dolor diam nascetur.
+					</div>
+				</ACollapsible.Body>
+			{/snippet}
+		</ACollapsible.Root>
+
+		<ACollapsible.Root>
+			{#snippet children({ collapsible })}
+				{@const isOpen = collapsible.state.isOpen}
+
+				<ACollapsible.Header class="">
+					<div>Hello Atoms UI 3</div>
+					<ACollapsible.Indicator />
+				</ACollapsible.Header>
+
+				<ACollapsible.Body
+					class={['pointer-events-none h-0 opacity-0', isOpen && 'pointer-events-auto']}
+					enter={(node) => {
+						motion(
+							node,
+							{
+								opacity: +isOpen,
+								height: isOpen ? 'auto' : 0
+							},
+							{
+								duration: 0.2,
+								ease: 'linear'
+							}
+						);
+						return { duration: 0.2 };
+					}}
+					exit={(node) => {
+						motion(node, { opacity: 0, height: 0 }, { duration: 0.2, ease: 'linear' });
+						return { duration: 0.2 };
+					}}
+					animate={(node) => {
+						motion(
+							node,
+							{
+								opacity: +isOpen,
+								height: isOpen ? 'auto' : 0
+							},
+							{ duration: 0.1, ease: 'linear' }
+						);
+					}}
+				>
+					<div class="py-2">
+						Mauris et habitasse cubilia potenti at condimentum iaculis nam. Ante fusce litora
+						tristique letius libero. Curabitur vitae cursus consectetur feugiat aenean viverra vel
+						dolor diam nascetur.
+					</div>
+				</ACollapsible.Body>
+			{/snippet}
+		</ACollapsible.Root>
+	</div>
+</Story>

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

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

@@ -5,7 +5,7 @@ export class ComboboxBond extends DropdownBond {
     constructor(s) {
         super(s);
     }
-    input(props = {}) {
+    control() {
         return {
             'data-atom': `trigger-${this.id}`,
             'data-kind': 'combobox-input',
@@ -17,9 +17,7 @@ export class ComboboxBond extends DropdownBond {
                 ? `item-${this.state.selectedItems.at(0)?.id}`
                 : undefined,
             'aria-disabled': this.state.props.disabled ?? false,
-            'aria-label': props['aria-label'] ?? 'Choose an option',
             tabindex: this.state.props.disabled ? -1 : 0,
-            ...props,
             oninput: (ev) => {
                 const target = ev.target;
                 this.state.props.query = target.value;
@@ -27,35 +25,14 @@ export class ComboboxBond extends DropdownBond {
             onkeydown: (ev) => {
                 if (this.state.props.disabled)
                     return;
-                if (ev.key === 'ArrowDown' || ev.key === 'ArrowUp') {
-                    ev.preventDefault();
-                    if (document.activeElement === this.elements.input) {
-                        this.state.open();
-                        if (ev.key === 'ArrowDown') {
-                            this.state.highlightNextItem();
-                        }
-                        else if (ev.key === 'ArrowUp') {
-                            this.state.highlightPreviousItem();
-                        }
-                    }
-                }
-                if (ev.key === 'Escape') {
-                    ev.preventDefault();
-                    if (document.activeElement === this.elements.input) {
-                        this.state.close();
-                    }
-                }
-                if (ev.key === 'Enter') {
-                    this.state.highlightedItem?.elements.root?.click();
-                }
             },
             [createAttachmentKey()]: (node) => {
                 this.elements.input = node;
             }
         };
     }
-    static get = DropdownBond.getContext;
-    static set = DropdownBond.setContext;
+    static get = DropdownBond.get;
+    static set = DropdownBond.set;
 }
 export class ComboboxBondState extends DropdownBondState {
     // #items: Map<string, DropdownItemAtom<T>> = new SvelteMap();

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

@@ -1,52 +1,52 @@
-<script lang="ts">
-	import { onMount } from 'svelte';
-	import { Input } from '../input';
-	import { ComboboxBond } from './bond.svelte';
-
-	const bond = ComboboxBond.get() as ComboboxBond<{}>;
-
-	if (!bond) {
-		throw new Error('Combobox atom was not found');
-	}
-
-	let {
-		class: klass = '',
-		children = undefined,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = undefined,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
-		...restProps
-	} = $props();
-
-	let isMounted = $state(false);
-
-	onMount(() => {
-		isMounted = true;
-	});
-
-	const isMultiple = $derived(bond?.state.props?.multiple ?? false);
-	const selectedText = $derived(
-		isMounted || isMultiple ? (bond.state.selectedItems.at(0)?.text ?? '') : ''
-	);
-
-	const value = $derived(
-		bond?.state.props?.query ?? (bond?.state.props?.text || selectedText || '')
-	);
-</script>
-
-<Input.Control
-	{value}
-	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)}
-	animate={animate?.bind(bond.state)}
-	onmount={onmount?.bind(bond.state)}
-	ondestroy={ondestroy?.bind(bond.state)}
-	{...bond.input()}
-	{...restProps}
-/>
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import { Input } from '../input';
+	import { ComboboxBond } from './bond.svelte';
+
+	const bond = ComboboxBond.get() as ComboboxBond<{}>;
+
+	if (!bond) {
+		throw new Error('Combobox atom was not found');
+	}
+
+	let {
+		class: klass = '',
+		children = undefined,
+		onmount = undefined,
+		ondestroy = undefined,
+		animate = undefined,
+		enter = undefined,
+		exit = undefined,
+		initial = undefined,
+		...restProps
+	} = $props();
+
+	let isMounted = $state(false);
+
+	onMount(() => {
+		isMounted = true;
+	});
+
+	const isMultiple = $derived(bond?.state.props?.multiple ?? false);
+	const selectedText = $derived(
+		isMounted || isMultiple ? (bond.state.selectedItems.at(0)?.text ?? '') : ''
+	);
+
+	const value = $derived(
+		bond?.state.props?.query ?? (bond?.state.props?.text || selectedText || '')
+	);
+</script>
+
+<Input.Control
+	{value}
+	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)}
+	animate={animate?.bind(bond.state)}
+	onmount={onmount?.bind(bond.state)}
+	ondestroy={ondestroy?.bind(bond.state)}
+	{...bond.control()}
+	{...restProps}
+/>