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

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}
+/>

package/dist/components/combobox/{compobox-item.svelte → combobox-item.svelte}

@@ -1,68 +1,62 @@
-<script
-	lang="ts"
-	generics="D, T extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base"
->
-	import { ComboboxBond } from './bond.svelte';
-	import { Item } from '../dropdown/atoms';
-	import { DropdownItemBond } from '../dropdown/item/bond.svelte';
-
-	import { on } from '../../attachments';
-	import type { Base } from '../atom';
-
-	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();
-</script>
-
-<Item
-	{@attach (node) => {
-		const item = DropdownItemBond.get();
-
-		return on('click', (ev) => {
-			ev.preventDefault();
-
-			const currentTarget = ev.currentTarget as HTMLElement | undefined;
-
-			const textElement = (currentTarget?.querySelector('data-text') ?? currentTarget) as
-				| HTMLElement
-				| undefined;
-
-			// Set selected item text
-			bond.state.props.text = textElement?.innerText ?? '';
-			// Clear input query
-			bond.state.props.query = undefined;
-
-			item?.state?.toggle();
-
-			// Create a promise that resolves when combobox.state.props.open is set to false
-
-			bond?.state.close();
-		})(node);
-	}}
-	{bond}
-	preset="combobox.item"
-	class={['border-border', '$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)}
-	{...restProps}
->
-	{@render children?.({ combobox: bond })}
-</Item>
+<script lang="ts">
+	import { ComboboxBond } from './bond.svelte';
+	import { Item } from '../dropdown/atoms';
+	import { DropdownItemController } from '../dropdown/item/controller.svelte';
+
+	import { on } from '../../attachments';
+
+	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();
+</script>
+
+<Item
+	{@attach (node: HTMLElement) => {
+		const item = DropdownItemController.get();
+
+		return on('click', (ev) => {
+			ev.preventDefault();
+
+			const currentTarget = ev.currentTarget as HTMLElement | undefined;
+
+			const textElement = (currentTarget?.querySelector('data-text') ?? currentTarget) as
+				| HTMLElement
+				| undefined;
+
+			// Set selected item text
+			bond.state.props.text = textElement?.innerText ?? '';
+			// Clear input query
+			bond.state.props.query = '';
+
+			item?.toggle();
+
+			bond?.state.close();
+		})(node);
+	}}
+	{bond}
+	preset="combobox.item"
+	class={['border-border', '$preset', klass].filter(Boolean).join(' ')}
+	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)}
+	{...restProps}
+>
+	{@render children?.({ combobox: bond })}
+</Item>

package/dist/components/combobox/combobox-item.svelte.d.ts

@@ -0,0 +1,12 @@
+declare const ComboboxItem: import("svelte").Component<{
+    class?: string;
+    children?: any;
+    onmount?: any;
+    ondestroy?: any;
+    animate?: any;
+    enter?: any;
+    exit?: any;
+    initial?: any;
+} & Record<string, any>, {}, "">;
+type ComboboxItem = ReturnType<typeof ComboboxItem>;
+export default ComboboxItem;

package/dist/components/combobox/combobox.stories.svelte

@@ -0,0 +1,50 @@
+<script module>
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import { Combobox as ACombobox } from '.';
+	import { Input } from '../input';
+	import { Divider } from '../divider';
+
+	// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+	const { Story } = defineMeta({
+		title: 'Atoms/Combobox',
+		// 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">
+	let open = $state(false);
+	let value = $state<string | undefined>('usd');
+	let query = $state('');
+	let array = $state([
+		{ value: 'usd', label: 'US Dollar' },
+		{ value: 'eur', label: 'Euro' },
+		{ value: 'gbp', label: 'British Pound' },
+		{ value: 'jpy', label: 'Japanese Yen' },
+		{ value: 'cny', label: 'Chinese Yuan' }
+	]);
+
+	const filteredItems = $derived(
+		array.filter((item) => !query || item.label.toLowerCase().includes(query))
+	);
+</script>
+
+<Story name="Combobox" args={{}}>
+	<ACombobox.Root bind:open bind:value bind:query>
+		<ACombobox.Trigger base={Input.Root} class="h-10 min-w-sm">
+			<Input.Icon class="text-foreground/50">$</Input.Icon>
+			<Divider class="mx-1" vertical />
+			<ACombobox.Control class="px-1" placeholder="Select a language" />
+		</ACombobox.Trigger>
+		<ACombobox.List>
+			{#each filteredItems as item (item.value)}
+				<ACombobox.Item value={item.value}>{item.label}</ACombobox.Item>
+			{/each}
+		</ACombobox.List>
+	</ACombobox.Root>
+</Story>

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

@@ -0,0 +1,3 @@
+declare const Combobox: import("svelte").Component<Record<string, never>, {}, "">;
+type Combobox = ReturnType<typeof Combobox>;
+export default Combobox;

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

@@ -1,90 +1,90 @@
-<script lang="ts" generics="T, E extends HtmlElementTagName, B extends Base = Base">
-	import { untrack } from 'svelte';
-	import { nanoid } from 'nanoid';
-	import { defineProperty, defineState } from '../../../utils';
-	import { HtmlAtom, type Base } from '../../atom';
-	import type { HtmlElementTagName } from '../../element';
-	import { DataGridTrBond, DataGridTrBondState, type DataGridTrBondProps } from './bond.svelte';
-	import type { DatagridTrProps } from '../types';
-	import { type DatagridContext } from '../context';
-
-	import './datagrid-tr.css';
-
-	let {
-		class: klass = '',
-		value = nanoid(),
-		rows = 'auto',
-		data = undefined,
-		header = false,
-		factory = _factory,
-		children = undefined,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = undefined,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
-		onclick = undefined,
-		...restProps
-	}: DatagridTrProps<T, E, B> = $props();
-
-	const bondProps = defineState<DataGridTrBondProps>([
-		defineProperty('data', () => data),
-		defineProperty('value', () => value),
-		defineProperty('header', () => header)
-	]);
-	const bond = factory(bondProps).share();
-
-	const isHeader = $derived(bond?.state.isHeader ?? false);
-	const isSelected = $derived(bond.state.isSelected);
-
-	const headerProps = $derived({
-		...bond.root(),
-		...restProps
-	});
-
-	const unmount = untrack(() => {
-		if (!isHeader) {
-			return bond.mount();
-		}
-	});
-
-	$effect(() => unmount);
-
-	function _factory(props: typeof bondProps) {
-		const datagridTrState = new DataGridTrBondState(() => props);
-		return new DataGridTrBond(datagridTrState);
-	}
-
-	function onclick_(ev: Event) {
-		onclick?.(ev, { tr: bond as unknown as DatagridContext<T> });
-
-		if (!ev.defaultPrevented) {
-			//
-		}
-	}
-</script>
-
-<HtmlAtom
-	{bond}
-	preset="datagrid.tr"
-	class={[
-		'datagrid-tr border-border items-center border-b bg-transparent',
-		!isHeader && 'hover:bg-foreground/2 active:bg-foreground/4 transition-colors duration-100',
-		isHeader && 'header-tr',
-		isSelected && 'bg-primary/2 hover:bg-primary/4 active:bg-primary/6',
-		'$preset',
-		klass
-	]}
-	style="--rows:{rows}"
-	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={onclick_}
-	{...headerProps}
->
-	{@render children?.({ tr: bond as unknown as DatagridContext<T> })}
-</HtmlAtom>
+<script lang="ts" generics="T, E extends HtmlElementTagName, B extends Base = Base">
+	import { untrack } from 'svelte';
+	import { nanoid } from 'nanoid';
+	import { defineProperty, defineState } from '../../../utils';
+	import { HtmlAtom, type Base } from '../../atom';
+	import type { HtmlElementTagName } from '../../element';
+	import { DataGridTrBond, DataGridTrBondState, type DataGridTrBondProps } from './bond.svelte';
+	import type { DatagridTrProps } from '../types';
+	import { type DatagridContext } from '../context';
+
+	import './datagrid-tr.css';
+
+	let {
+		class: klass = '',
+		value = nanoid(),
+		rows = 'auto',
+		data = undefined,
+		header = false,
+		factory = _factory,
+		children = undefined,
+		onmount = undefined,
+		ondestroy = undefined,
+		animate = undefined,
+		enter = undefined,
+		exit = undefined,
+		initial = undefined,
+		onclick = undefined,
+		...restProps
+	}: DatagridTrProps<T, E, B> = $props();
+
+	const bondProps = defineState<DataGridTrBondProps>([
+		defineProperty('data', () => data),
+		defineProperty('value', () => value),
+		defineProperty('header', () => header)
+	]);
+	const bond = factory(bondProps).share();
+
+	const isHeader = $derived(bond?.state.isHeader ?? false);
+	const isSelected = $derived(bond.state.isSelected);
+
+	const headerProps = $derived({
+		...bond.root(),
+		...restProps
+	});
+
+	const unmount = untrack(() => {
+		if (!isHeader) {
+			return bond.mount();
+		}
+	});
+
+	$effect(() => unmount);
+
+	function _factory(props: typeof bondProps) {
+		const datagridTrState = new DataGridTrBondState(() => props);
+		return new DataGridTrBond(datagridTrState);
+	}
+
+	function onclick_(ev: Event) {
+		onclick?.(ev, { tr: bond as unknown as DatagridContext<T> });
+
+		if (!ev.defaultPrevented) {
+			//
+		}
+	}
+</script>
+
+<HtmlAtom
+	{bond}
+	preset="datagrid.tr"
+	class={[
+		'datagrid-tr border-border items-center border-b bg-transparent',
+		!isHeader && 'hover:bg-foreground/2 active:bg-foreground/4 transition-colors duration-100',
+		isHeader && 'header-tr',
+		isSelected && 'bg-primary/2 hover:bg-primary/4 active:bg-primary/6',
+		'$preset',
+		klass
+	]}
+	style="--rows:{rows}"
+	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={onclick_}
+	{...headerProps}
+>
+	{@render children?.({ tr: bond as unknown as DatagridContext<T> })}
+</HtmlAtom>

package/dist/components/date-picker/bond.svelte.d.ts

@@ -12,13 +12,11 @@ export type DatePickerBondElements = PopoverDomElements & {
 };
 export declare class DatePickerBond<Props extends DatePickerBondProps = DatePickerBondProps, State extends DatePickerBondState<Props> = DatePickerBondState<Props>> extends PopoverBond<Props, State, DatePickerBondElements> {
     #private;
-    static CONTEXT_KEY: string;
     constructor(state: State);
     get calendar(): CalendarBond<CalendarBondProps, import("..").CalendarBondState<CalendarBondProps>> | undefined;
     setCalendar(calendar: CalendarBond): void;
     share(): this;
     trigger(): {
-        [x: symbol]: (node: HTMLInputElement) => void;
         id: string;
         role: string;
         'aria-expanded': boolean;
@@ -29,19 +27,31 @@ export declare class DatePickerBond<Props extends DatePickerBondProps = DatePick
         disabled: boolean;
         readonly: boolean;
         tabindex: number;
+        'aria-haspopup': string;
+        'data-kind': string;
+        onclick: (ev: PointerEvent) => void;
+        onkeydown: (ev: KeyboardEvent) => void;
     };
     content(): {
-        [x: symbol]: (node: HTMLElement) => void;
         id: string;
         role: string;
         'aria-label': string;
+        'aria-modal': boolean;
+        'aria-labelledby': string;
+        inert: boolean | undefined;
+        tabindex: number;
+        'data-atom': string;
+        'data-kind': string;
+        'data-active': boolean;
+        onkeydown: ((ev: KeyboardEvent) => void) | undefined;
     };
-    clearButton(props?: Record<string, unknown>): {
-        onclick: (ev: Event) => void;
+    clearButton(): {
+        [x: symbol]: (node: HTMLElement) => void;
         id: string;
         type: string;
         'aria-label': string;
         tabindex: number;
+        onclick: (ev: Event) => void;
     };
     static get(): DatePickerBond;
     static set(bond: DatePickerBond): DatePickerBond;

package/dist/components/date-picker/bond.svelte.js

@@ -2,7 +2,6 @@ import { PopoverBond, PopoverState } from '../popover/bond.svelte';
 import { getContext, setContext } from 'svelte';
 import { createAttachmentKey } from 'svelte/attachments';
 export class DatePickerBond extends PopoverBond {
-    static CONTEXT_KEY = '@atoms/context/date-picker';
     #calendarBond;
     constructor(state) {
         super(state);
@@ -20,6 +19,7 @@ export class DatePickerBond extends PopoverBond {
         const isDisabled = this.state.props.disabled ?? false;
         const placeholder = this.state.props.placeholder ?? 'Select a date';
         return {
+            ...super.trigger(),
             id: `date-picker-input-${this.id}`,
             role: 'combobox',
             'aria-expanded': this.state.props.open ?? false,
@@ -29,30 +29,24 @@ export class DatePickerBond extends PopoverBond {
             placeholder,
             disabled: isDisabled,
             readonly: true,
-            tabindex: isDisabled ? -1 : 0,
-            [createAttachmentKey()]: (node) => {
-                this.elements.trigger = node;
-            }
+            tabindex: isDisabled ? -1 : 0
         };
     }
     content() {
         return {
+            ...super.content(),
             id: `date-picker-calendar-${this.id}`,
             role: 'dialog',
-            'aria-label': 'Choose date',
-            [createAttachmentKey()]: (node) => {
-                this.elements.content = node;
-            }
+            'aria-label': 'Choose date'
         };
     }
-    clearButton(props = {}) {
+    clearButton() {
         const hasValue = this.state.hasValue;
         return {
             id: `date-picker-clear-${this.id}`,
             type: 'button',
             'aria-label': 'Clear date',
             tabindex: hasValue ? 0 : -1,
-            ...props,
             onclick: (ev) => {
                 ev.preventDefault();
                 ev.stopPropagation();