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

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-root.svelte

@@ -1,65 +1,65 @@
-<script lang="ts" generics="D">
-	import type { ComboboxRootProps } from './types';
-	import { defineProperty, defineState } from '../../utils';
-	import { ComboboxBond, ComboboxBondState, type ComboboxBondProps } from './bond.svelte';
-
-	let {
-		open = $bindable(false),
-		value = $bindable(),
-		values = $bindable(),
-		query = $bindable(),
-		text = $bindable(),
-		multiple = false,
-		disabled = false,
-		placements = ['bottom-start', 'bottom-end', 'top-start', 'top-end'],
-		placement = 'bottom-start',
-		offset = 1,
-		factory = _factory,
-		children = undefined,
-		...restProps
-	}: ComboboxRootProps = $props();
-
-	const bondProps = defineState<ComboboxBondProps>(
-		[
-			defineProperty(
-				'open',
-				() => open,
-				(v) => {
-					open = v;
-				}
-			),
-			defineProperty(
-				'values',
-				() => (multiple ? values : [value]),
-				(v) => {
-					values = v;
-					value = v[0];
-				}
-			),
-			defineProperty(
-				'query',
-				() => query,
-				(v) => (query = v)
-			),
-			defineProperty(
-				'text',
-				() => text,
-				(v) => (text = v)
-			)
-		],
-		() => ({ disabled, multiple, placements, offset, placement: 'bottom-start', ...restProps })
-	);
-	const bond = factory(bondProps).share();
-
-	function _factory(props: typeof bondProps) {
-		const bondState = new ComboboxBondState<D>(() => props);
-
-		return new ComboboxBond(bondState).share();
-	}
-
-	export function getBond() {
-		return bond;
-	}
-</script>
-
-{@render children?.({ combobox: bond })}
+<script lang="ts" generics="D">
+	import type { ComboboxRootProps } from './types';
+	import { defineProperty, defineState } from '../../utils';
+	import { ComboboxBond, ComboboxBondState, type ComboboxBondProps } from './bond.svelte';
+
+	let {
+		open = $bindable(false),
+		value = $bindable(),
+		values = $bindable(),
+		query = $bindable(),
+		text = $bindable(),
+		multiple = false,
+		disabled = false,
+		placements = ['bottom-start', 'bottom-end', 'top-start', 'top-end'],
+		placement = 'bottom-start',
+		offset = 1,
+		factory = _factory,
+		children = undefined,
+		...restProps
+	}: ComboboxRootProps = $props();
+
+	const bondProps = defineState<ComboboxBondProps>(
+		[
+			defineProperty(
+				'open',
+				() => open,
+				(v) => {
+					open = v;
+				}
+			),
+			defineProperty(
+				'values',
+				() => (multiple ? values : [value]),
+				(v) => {
+					values = v;
+					value = v[0];
+				}
+			),
+			defineProperty(
+				'query',
+				() => query,
+				(v) => (query = v)
+			),
+			defineProperty(
+				'text',
+				() => text,
+				(v) => (text = v)
+			)
+		],
+		() => ({ disabled, multiple, placements, offset, placement: 'bottom-start', ...restProps })
+	);
+	const bond = factory(bondProps).share();
+
+	function _factory(props: typeof bondProps) {
+		const bondState = new ComboboxBondState<D>(() => props);
+
+		return new ComboboxBond(bondState).share();
+	}
+
+	export function getBond() {
+		return bond;
+	}
+</script>
+
+{@render children?.({ combobox: bond })}

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/combobox/index.d.ts

@@ -1,2 +1,3 @@
 export * as Combobox from './atoms';
 export * from './types';
+export type { AnimatePopoverContentParams as AnimateComboboxContentParams, animatePopoverContent as animateComboboxContent } from '../popover/motion';

package/dist/components/container/container.stories.svelte

@@ -1,20 +1,20 @@
-<script module>
-	import { defineMeta } from '@storybook/addon-svelte-csf';
-	import ContainerCmp from './container.svelte';
-
-	const { Story } = defineMeta({
-		title: 'ATOMS/Container'
-	});
-</script>
-
-<Story name="Container">
-	<ContainerCmp class="flex w-full flex-col items-center gap-4">
-		<div class="flex w-full gap-4">
-			{#each { length: 5 } as _, i (i)}
-				<div class="bg-foreground h-80 flex-1 rounded-lg"></div>
-			{/each}
-		</div>
-
-		<div class="bg-foreground h-80 w-[50cqw] rounded-lg"></div>
-	</ContainerCmp>
-</Story>
+<script module>
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import ContainerCmp from './container.svelte';
+
+	const { Story } = defineMeta({
+		title: 'ATOMS/Container'
+	});
+</script>
+
+<Story name="Container">
+	<ContainerCmp class="flex w-full flex-col items-center gap-4">
+		<div class="flex w-full gap-4">
+			{#each { length: 5 } as _, i (i)}
+				<div class="bg-foreground h-80 flex-1 rounded-lg"></div>
+			{/each}
+		</div>
+
+		<div class="bg-foreground h-80 w-[50cqw] rounded-lg"></div>
+	</ContainerCmp>
+</Story>

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

@@ -1,4 +1,4 @@
 import type { ContainerProps } from './types';
-declare const Container: import("svelte").Component<ContainerProps, {}, "clientWidth" | "clientHeight">;
+declare const Container: import("svelte").Component<ContainerProps, {}, "clientHeight" | "clientWidth">;
 type Container = ReturnType<typeof Container>;
 export default Container;

package/dist/components/datagrid/datagrid.stories.svelte

@@ -1,72 +1,72 @@
-<script module>
-	import { defineMeta } from '@storybook/addon-svelte-csf';
-	import { DataGrid as DataGridCmp } from '.';
-	import { Dropdown } from '../dropdown';
-	import MoreVerticalIcon from '../../icons/icon-more-vert.svelte';
-	import { Icon } from '../icon';
-	import { container } from '../../runes/container.svelte';
-
-	const { Story } = defineMeta({
-		title: 'Atoms/DataGrid'
-	});
-</script>
-
-<script>
-	let values = $state([]);
-
-	const datagridContainer = container();
-</script>
-
-<Story name="DataGrid">
-	{#snippet children({ args })}
-		<DataGridCmp.Root class="" {@attach datagridContainer.attach}>
-			<DataGridCmp.Header>
-				<DataGridCmp.Tr header>
-					<DataGridCmp.Th width="auto">
-						<DataGridCmp.Checkbox />
-					</DataGridCmp.Th>
-					<DataGridCmp.Th
-						class="resize-x overflow-x-auto"
-						width="auto"
-						hidden={datagridContainer.current?.width
-							? datagridContainer.current.width < 1024
-							: false}>ID</DataGridCmp.Th
-					>
-					<DataGridCmp.Th>Name</DataGridCmp.Th>
-					<DataGridCmp.Th width="auto">Job</DataGridCmp.Th>
-					<DataGridCmp.Th width="auto">Contact</DataGridCmp.Th>
-					<DataGridCmp.Th width="auto"></DataGridCmp.Th>
-				</DataGridCmp.Tr>
-			</DataGridCmp.Header>
-
-			<DataGridCmp.Body>
-				{#each { length: 10 } as _, i (i)}
-					<DataGridCmp.Tr>
-						<DataGridCmp.Td>
-							<DataGridCmp.Checkbox />
-						</DataGridCmp.Td>
-
-						<DataGridCmp.Td>{crypto.randomUUID()}</DataGridCmp.Td>
-						<DataGridCmp.Td>John Doe</DataGridCmp.Td>
-						<DataGridCmp.Td>Software Engineer</DataGridCmp.Td>
-						<DataGridCmp.Td>+213659009944</DataGridCmp.Td>
-
-						<DataGridCmp.Td base={Dropdown.Root} placement="bottom-end" offset={0}>
-							<Dropdown.Trigger class="flex aspect-square items-center justify-center p-0">
-								<Icon src={MoreVerticalIcon} />
-							</Dropdown.Trigger>
-							<Dropdown.List>
-								<Dropdown.Item value="ar">Arabic</Dropdown.Item>
-								<Dropdown.Item value="en">English</Dropdown.Item>
-								<Dropdown.Item value="sp">Spanish</Dropdown.Item>
-								<Dropdown.Item value="fr">Frensh</Dropdown.Item>
-							</Dropdown.List>
-						</DataGridCmp.Td>
-					</DataGridCmp.Tr>
-				{/each}
-			</DataGridCmp.Body>
-
-			<DataGridCmp.Footer></DataGridCmp.Footer>
-		</DataGridCmp.Root>
-	{/snippet}
-</Story>
+<script module>
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import { DataGrid as DataGridCmp } from '.';
+	import { Dropdown } from '../dropdown';
+	import MoreVerticalIcon from '../../icons/icon-more-vert.svelte';
+	import { Icon } from '../icon';
+	import { container } from '../../runes/container.svelte';
+
+	const { Story } = defineMeta({
+		title: 'Atoms/DataGrid'
+	});
+</script>
+
+<script>
+	let values = $state([]);
+
+	const datagridContainer = container();
+</script>
+
+<Story name="DataGrid">
+	{#snippet children({ args })}
+		<DataGridCmp.Root class="" {@attach datagridContainer.attach}>
+			<DataGridCmp.Header>
+				<DataGridCmp.Tr header>
+					<DataGridCmp.Th width="auto">
+						<DataGridCmp.Checkbox />
+					</DataGridCmp.Th>
+					<DataGridCmp.Th
+						class="resize-x overflow-x-auto"
+						width="auto"
+						hidden={datagridContainer.current?.width
+							? datagridContainer.current.width < 1024
+							: false}>ID</DataGridCmp.Th
+					>
+					<DataGridCmp.Th>Name</DataGridCmp.Th>
+					<DataGridCmp.Th width="auto">Job</DataGridCmp.Th>
+					<DataGridCmp.Th width="auto">Contact</DataGridCmp.Th>
+					<DataGridCmp.Th width="auto"></DataGridCmp.Th>
+				</DataGridCmp.Tr>
+			</DataGridCmp.Header>
+
+			<DataGridCmp.Body>
+				{#each { length: 10 } as _, i (i)}
+					<DataGridCmp.Tr>
+						<DataGridCmp.Td>
+							<DataGridCmp.Checkbox />
+						</DataGridCmp.Td>
+
+						<DataGridCmp.Td>{crypto.randomUUID()}</DataGridCmp.Td>
+						<DataGridCmp.Td>John Doe</DataGridCmp.Td>
+						<DataGridCmp.Td>Software Engineer</DataGridCmp.Td>
+						<DataGridCmp.Td>+213659009944</DataGridCmp.Td>
+
+						<DataGridCmp.Td base={Dropdown.Root} placement="bottom-end" offset={0}>
+							<Dropdown.Trigger class="flex aspect-square items-center justify-center p-0">
+								<Icon src={MoreVerticalIcon} />
+							</Dropdown.Trigger>
+							<Dropdown.List>
+								<Dropdown.Item value="ar">Arabic</Dropdown.Item>
+								<Dropdown.Item value="en">English</Dropdown.Item>
+								<Dropdown.Item value="sp">Spanish</Dropdown.Item>
+								<Dropdown.Item value="fr">Frensh</Dropdown.Item>
+							</Dropdown.List>
+						</DataGridCmp.Td>
+					</DataGridCmp.Tr>
+				{/each}
+			</DataGridCmp.Body>
+
+			<DataGridCmp.Footer></DataGridCmp.Footer>
+		</DataGridCmp.Root>
+	{/snippet}
+</Story>

package/dist/components/datagrid/tr/bond.svelte.d.ts

@@ -15,7 +15,8 @@ export declare class DataGridTrBond<T, Props extends DataGridTrBondProps<T> = Da
     share(): this;
     mount(): () => void;
     unmount(): void;
-    root(props?: Record<string, unknown>): {
+    root(): {
+        [x: symbol]: (node: HTMLElement) => void;
         'data-kind': string;
         'data-header': string | undefined;
         'data-selected': string | undefined;
@@ -24,12 +25,13 @@ export declare class DataGridTrBond<T, Props extends DataGridTrBondProps<T> = Da
     static set(bond: DataGridTrBond): DataGridTrBond;
 }
 export declare class DataGridTrBondState<T, Props extends DataGridTrBondProps<T> = DataGridTrBondProps<T>> extends BondState<Props> {
+    #private;
     static CONTEXT_KEY: string;
     constructor(props: () => Props);
     get id(): string;
     get isSelected(): boolean | undefined;
     get isHeader(): boolean;
-    get datagrid(): import("..").DataGridBondState<unknown>;
+    get datagrid(): import("..").DataGridBondState<unknown> | undefined;
     select(): void;
     unselect(): void;
 }

package/dist/components/datagrid/tr/bond.svelte.js

@@ -2,6 +2,7 @@ import { getContext, setContext } from 'svelte';
 import { createAttachmentKey } from 'svelte/attachments';
 import { Bond, BondState } from '../../../shared/bond.svelte';
 import { DataGridBond } from '../bond.svelte';
+import { getDatagridHeaderContext } from '../context';
 const DATAGRID_TR_ELEMENTS_KIND = {
     root: 'datagrid-tr'
 };
@@ -26,12 +27,11 @@ export class DataGridTrBond extends Bond {
     unmount() {
         return this.datagrid.state.unmountRow(this.state.id);
     }
-    root(props = {}) {
+    root() {
         return {
             'data-kind': DATAGRID_TR_ELEMENTS_KIND.root,
             'data-header': this.state.isHeader ? 'true' : undefined,
             'data-selected': this.state.isSelected ? 'true' : undefined,
-            ...props,
             [createAttachmentKey()]: (node) => {
                 this.elements.root = node;
             }
@@ -46,6 +46,8 @@ export class DataGridTrBond extends Bond {
 }
 export class DataGridTrBondState extends BondState {
     static CONTEXT_KEY = '@atoms/context/datagrid/tr';
+    #datagrid = DataGridBond.get();
+    #isHeader = $state(!!getDatagridHeaderContext());
     constructor(props) {
         super(props);
     }
@@ -53,18 +55,18 @@ export class DataGridTrBondState extends BondState {
         return this.props.value || super.id;
     }
     get isSelected() {
-        return this.datagrid.props.values?.some((id) => id === this.id);
+        return this.datagrid?.props.values?.some((id) => id === this.id);
     }
     get isHeader() {
-        return this.props.header ?? false;
+        return this.#isHeader;
     }
     get datagrid() {
-        return DataGridBond.get().state;
+        return this.#datagrid?.state;
     }
     select() {
-        this.datagrid.select([this.id]);
+        this.datagrid?.select([this.id]);
     }
     unselect() {
-        this.datagrid.unselect([this.id]);
+        this.datagrid?.unselect([this.id]);
     }
 }

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

@@ -6,12 +6,10 @@
 	import type { HtmlElementTagName } from '../../element';
 	import { DataGridTrBond, DataGridTrBondState, type DataGridTrBondProps } from './bond.svelte';
 	import type { DatagridTrProps } from '../types';
-	import { getDatagridHeaderContext, type DatagridContext } from '../context';
+	import { type DatagridContext } from '../context';
 
 	import './datagrid-tr.css';
 
-	const context_header = getDatagridHeaderContext();
-
 	let {
 		class: klass = '',
 		value = nanoid(),
@@ -37,9 +35,14 @@
 	]);
 	const bond = factory(bondProps).share();
 
-	const isHeader = $derived(context_header?.derived?.data?.header ?? false);
+	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();
@@ -67,8 +70,7 @@
 	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 last:border-b-0',
+		!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',
@@ -82,7 +84,7 @@
 	onmount={onmount?.bind(bond.state)}
 	ondestroy={ondestroy?.bind(bond.state)}
 	onclick={onclick_}
-	{...bond.root(restProps)}
+	{...headerProps}
 >
 	{@render children?.({ tr: bond as unknown as DatagridContext<T> })}
 </HtmlAtom>