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

package/dist/components/dropdown/dropdown-values.svelte

@@ -1,17 +1,17 @@
-<script lang="ts">
-	import { DropdownBond } from './bond.svelte';
-
-	const bond = DropdownBond.get();
-
-	if (!bond) {
-		throw new Error('DropdownValue must be used within a Dropdown');
-	}
-
-	const selectedItems = $derived(bond.state.selectedItems);
-
-	let { class: klass = '', children, ...restProps } = $props();
-</script>
-
-<!-- <Render class={cn('dropdown-value inline-flex gap-2 items-center flex-wrap', klass)} {...restProps}>
-</Render> -->
-{@render children?.({ items: selectedItems })}
+<script lang="ts">
+	import { DropdownBond } from './bond.svelte';
+
+	const bond = DropdownBond.get();
+
+	if (!bond) {
+		throw new Error('DropdownValue must be used within a Dropdown');
+	}
+
+	const selectedItems = $derived(bond.state.selectedItems);
+
+	let { children } = $props();
+</script>
+
+<!-- <Render class={cn('dropdown-value inline-flex gap-2 items-center flex-wrap', klass)} {...restProps}>
+</Render> -->
+{@render children?.({ items: selectedItems })}

package/dist/components/dropdown/dropdown-values.svelte.d.ts

@@ -1,6 +1,5 @@
 declare const DropdownValues: import("svelte").Component<{
-    class?: string;
     children: any;
-} & Record<string, any>, {}, "">;
+}, {}, "">;
 type DropdownValues = ReturnType<typeof DropdownValues>;
 export default DropdownValues;

package/dist/components/dropdown/dropdown.stories.svelte

@@ -1,80 +1,83 @@
-<script module>
-	import { defineMeta } from '@storybook/addon-svelte-csf';
-	import { Dropdown as ADropdown } from '.';
-	import { Input } from '../input';
-	import { flip } from 'svelte/animate';
-	import { filter } from './runes.svelte';
-
-	// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
-	const { Story } = defineMeta({
-		title: 'Atoms/Dropdown',
-		// 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);
-
-	const data = $state([
-		{ id: 1, value: 'apple', text: 'Apple' },
-		{ id: 2, value: 'banana', text: 'Banana' },
-		{ id: 3, value: 'cherry', text: 'Cherry' },
-		{ id: 4, value: 'date', text: 'Date' },
-		{ id: 5, value: 'elderberry', text: 'Elderberry' }
-	]);
-
-	const dd = filter(
-		() => data,
-		(query, item) => item.text.toLowerCase().includes(query.toLowerCase())
-	);
-</script>
-
-<Story name="Dropdown" args={{}}>
-	<!-- Multi-select dropdown with search functionality -->
-	<ADropdown.Root
-		bind:open
-		keys={data.map((item) => item.value)}
-		multiple
-		onquerychange={(q) => (dd.query = q)}
-	>
-		{#snippet children({ dropdown })}
-			<!-- Compose ADropdown.Trigger with Input.Root for a custom trigger -->
-			<ADropdown.Trigger
-				base={Input.Root}
-				class="h-auto min-h-12 max-w-sm min-w-sm items-center gap-2 rounded-sm px-4 transition-colors duration-200"
-				onclick={(ev) => {
-					ev.preventDefault();
-
-					dropdown.state.open();
-				}}
-			>
-				<!-- Display selected values with animation -->
-				{#each dropdown?.state?.selectedItems ?? [] as item (item.id)}
-					<div animate:flip={{ duration: 200 }}>
-						<ADropdown.Value value={item.value} class="text-foreground/80">
-							{item.text}
-						</ADropdown.Value>
-					</div>
-				{/each}
-
-				<!-- Inline search input within the trigger -->
-				<ADropdown.Query class="flex-1 px-1" placeholder="Search for fruits..." />
-			</ADropdown.Trigger>
-
-			<!-- ADropdown list with filtered items -->
-			<ADropdown.List>
-				{#each dd.current as item (item.id)}
-					<div animate:flip={{ duration: 200 }}>
-						<ADropdown.Item value={item.value}>{item.text}</ADropdown.Item>
-					</div>
-				{/each}
-			</ADropdown.List>
-		{/snippet}
-	</ADropdown.Root>
-</Story>
+<script module>
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import { Dropdown as ADropdown } from '.';
+	import { Input } from '../input';
+	import { flip } from 'svelte/animate';
+	import { filter } from './runes.svelte';
+
+	// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+	const { Story } = defineMeta({
+		title: 'Atoms/Dropdown',
+		// 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);
+
+	const data = $state([
+		{ id: 1, value: 'apple', text: 'Apple' },
+		{ id: 2, value: 'banana', text: 'Banana' },
+		{ id: 3, value: 'cherry', text: 'Cherry' },
+		{ id: 4, value: 'date', text: 'Date' },
+		{ id: 5, value: 'elderberry', text: 'Elderberry' }
+	]);
+
+	const dd = filter(
+		() => data,
+		(query, item) => item.text.toLowerCase().includes(query.toLowerCase())
+	);
+</script>
+
+<Story name="Dropdown" args={{}}>
+	<!-- Multi-select dropdown with search functionality -->
+	<ADropdown.Root
+		bind:open
+		keys={data.map((item) => item.value)}
+		multiple
+		onquerychange={(q) => (dd.query = q)}
+	>
+		{#snippet children({ dropdown })}
+			<!-- Compose ADropdown.Trigger with Input.Root for a custom trigger -->
+			<ADropdown.Trigger
+				base={Input.Root}
+				class="flex h-auto min-h-12 max-w-sm min-w-sm flex-col items-start gap-1 rounded-sm px-4 transition-colors duration-200"
+				onclick={(ev) => {
+					ev.preventDefault();
+
+					dropdown.state.open();
+				}}
+			>
+				<!-- Inline search input within the trigger -->
+				<ADropdown.Query class="flex-1 px-1" placeholder="Search for fruits..." />
+				<!-- Display selected values with animation -->
+				{#if dropdown?.state?.selectedItems?.length}
+					<div class="flex flex-wrap gap-1">
+						{#each dropdown?.state?.selectedItems ?? [] as item (item.id)}
+							<div animate:flip={{ duration: 200 }}>
+								<ADropdown.Value value={item.value} class="text-foreground/80">
+									{item.text}
+								</ADropdown.Value>
+							</div>
+						{/each}
+					</div>
+				{/if}
+			</ADropdown.Trigger>
+
+			<!-- ADropdown list with filtered items -->
+			<ADropdown.List>
+				{#each dd.current as item (item.id)}
+					<div animate:flip={{ duration: 200 }}>
+						<ADropdown.Item value={item.value}>{item.text}</ADropdown.Item>
+					</div>
+				{/each}
+			</ADropdown.List>
+		{/snippet}
+	</ADropdown.Root>
+</Story>

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

@@ -1,5 +1,6 @@
 export * as Dropdown from './atoms';
 export { DropdownBond, type DropdownBondElements, DropdownBondState, type DropdownStateProps } from './bond.svelte';
+export * from './item';
 export { filter } from './runes.svelte';
 export * from './types';
 export type { AnimatePopoverContentParams as AnimateDropdownContentParams, animatePopoverContent as animateDropdownContent } from '../popover/motion';

package/dist/components/dropdown/index.js

@@ -1,4 +1,5 @@
 export * as Dropdown from './atoms';
 export { DropdownBond, DropdownBondState } from './bond.svelte';
+export * from './item';
 export { filter } from './runes.svelte';
 export * from './types';

package/dist/components/dropdown/item/attachments.svelte.d.ts

@@ -1,3 +1,3 @@
 import type { DropdownBond } from '../bond.svelte';
-import { DropdownItemBond } from './bond.svelte';
-export declare function dropdownItem(callback: (node: HTMLElement, item?: DropdownItemBond, dropdown?: DropdownBond) => any): (node: HTMLElement) => any;
+import { DropdownItemController } from './controller.svelte';
+export declare function dropdownItem(callback: (node: HTMLElement, item?: DropdownItemController, dropdown?: DropdownBond) => any): (node: HTMLElement) => any;

package/dist/components/dropdown/item/attachments.svelte.js

@@ -1,6 +1,6 @@
-import { DropdownItemBond } from './bond.svelte';
+import { DropdownItemController } from './controller.svelte';
 export function dropdownItem(callback) {
-    const item = DropdownItemBond.get();
+    const item = DropdownItemController.get();
     const bond = item?.dropdown;
     return (node) => callback(node, item, bond);
 }

package/dist/components/dropdown/item/controller.svelte.d.ts

@@ -0,0 +1,34 @@
+import { DropdownBond, DropdownBondState, type DropdownStateProps } from '../bond.svelte';
+import { MenuItemController } from '../../menu';
+export type DropdownItemProps<T = unknown> = {
+    id?: string;
+    value: string;
+    data?: T;
+};
+export declare class DropdownItemController<T = unknown> extends MenuItemController {
+    #private;
+    static CONTEXT_KEY: string;
+    constructor(props: () => DropdownItemProps<T>);
+    get value(): any;
+    get data(): any;
+    get element(): HTMLElement | null;
+    get dropdown(): DropdownBond<DropdownStateProps, DropdownBondState<DropdownStateProps>, import("..").DropdownBondElements> | undefined;
+    get text(): string;
+    get isHighlighted(): boolean;
+    get isSelected(): boolean;
+    select(): void;
+    unselect(): void;
+    toggle(): void;
+    close(): void;
+    share(): DropdownItemController<T>;
+    elementProps(): {
+        [x: symbol]: (node: HTMLElement) => () => void;
+        id: string;
+        role: string;
+        'aria-selected': boolean;
+        'data-selected': boolean;
+        'data-highlighted': boolean;
+    };
+    static get<T = unknown>(): DropdownItemController<T> | undefined;
+    static set<T = unknown>(item: DropdownItemController<T>): DropdownItemController<T>;
+}

package/dist/components/dropdown/item/controller.svelte.js

@@ -0,0 +1,82 @@
+import { getContext, setContext } from 'svelte';
+import { createAttachmentKey } from 'svelte/attachments';
+import { DropdownBond, DropdownBondState } from '../bond.svelte';
+import { MenuItemController } from '../../menu';
+export class DropdownItemController extends MenuItemController {
+    static CONTEXT_KEY = '@atoms/context/dropdown/item';
+    #element = null;
+    #dropdown;
+    #unmount;
+    constructor(props) {
+        super(props);
+        this.#dropdown = DropdownBond.get();
+        if (!this.#dropdown) {
+            throw new Error('DropdownItem must be used within a Dropdown context');
+        }
+    }
+    get value() {
+        return this.props?.value;
+    }
+    get data() {
+        return this.props?.data;
+    }
+    get element() {
+        return this.#element;
+    }
+    get dropdown() {
+        return this.#dropdown;
+    }
+    get text() {
+        const element = (this.#element?.querySelector('[data-text]') ?? this.#element);
+        return element?.innerText ?? '';
+    }
+    get isHighlighted() {
+        return this.#dropdown?.state.highlightedItem?.id === this.id;
+    }
+    get isSelected() {
+        return this.#dropdown?.state.props.values?.includes(this.value) ?? false;
+    }
+    select() {
+        this.#dropdown?.state.select([this.value]);
+    }
+    unselect() {
+        this.#dropdown?.state.unselect([this.value]);
+    }
+    toggle() {
+        if (this.isSelected) {
+            this.unselect();
+        }
+        else {
+            this.select();
+        }
+    }
+    close() {
+        this.#dropdown?.state.close();
+    }
+    share() {
+        return DropdownItemController.set(this);
+    }
+    elementProps() {
+        const itemId = `item-${this.id}`;
+        return {
+            id: itemId,
+            role: 'option',
+            'aria-selected': this.isSelected,
+            'data-selected': this.isSelected,
+            'data-highlighted': this.isHighlighted,
+            [createAttachmentKey()]: (node) => {
+                this.#element = node;
+                return () => {
+                    this.#unmount?.();
+                    this.#element = null;
+                };
+            }
+        };
+    }
+    static get() {
+        return getContext(DropdownItemController.CONTEXT_KEY);
+    }
+    static set(item) {
+        return setContext(DropdownItemController.CONTEXT_KEY, item);
+    }
+}

package/dist/components/dropdown/item/dropdown-item.svelte

@@ -1,102 +1,109 @@
-<script
-	lang="ts"
-	generics="D, E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base"
->
-	import { nanoid } from 'nanoid';
-	import {
-		DropdownItemBond,
-		DropdownItemBondState,
-		type DropdownItemBondProps
-	} from './bond.svelte';
-	import { DropdownBond } from '../bond.svelte';
-	import { Item } from '../../menu/atoms';
-	import { defineProperty, defineState } from '../../../utils';
-	import type { Base } from '../../atom';
-
-	const dropdown = DropdownBond.get();
-
-	if (!dropdown) {
-		throw new Error('<DropdownItem> must be used within a <Dropdown>.');
-	}
-
-	let {
-		class: klass = '',
-		preset = 'dropdown.item',
-		value = nanoid(),
-		data = undefined,
-		factory = _factory,
-		children = undefined,
-		onclick = undefined,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = undefined,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
-		...restProps
-	} = $props();
-
-	const bond = factory().share();
-
-	const unmount = bond.mount();
-	$effect(() => unmount);
-
-	const rootProps = $derived({
-		...bond?.root?.(),
-		...restProps
-	});
-
-	function _factory() {
-		const item = dropdown?.state.item(value);
-
-		if (item) {
-			return item as DropdownItemBond;
-		}
-
-		const bondProps = defineState<DropdownItemBondProps<D>>([
-			defineProperty('value', () => value),
-			defineProperty('data', () => data)
-		]);
-		const bondState = new DropdownItemBondState(() => bondProps);
-		return new DropdownItemBond(bondState);
-	}
-
-	function handleClick(ev: MouseEvent) {
-		onclick?.(ev);
-
-		if (ev.defaultPrevented) {
-			return;
-		}
-
-		ev.preventDefault();
-
-		bond.state.toggle();
-
-		if (bond.state.dropdown) {
-			bond.state.dropdown.query = '';
-		}
-
-		bond.state.close();
-	}
-</script>
-
-<Item
-	{bond}
-	{preset}
-	class={[
-		bond.state.isHighlighted && 'bg-foreground/5',
-		bond.state.isSelected && 'bg-primary/5 hover:bg-primary/10 active:bg-primary/15',
-		'$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)}
-	onclick={handleClick}
-	{...rootProps}
->
-	{@render children?.({ dropdownItem: bond })}
-</Item>
+<script lang="ts" generics="D">
+	import { nanoid } from 'nanoid';
+	import { defineProperty, defineState } from '../../../utils';
+	import {
+		DropdownItemController,
+		type DropdownItemProps as ControllerProps
+	} from './controller.svelte';
+	import type { DropdownItemProps } from './types';
+	import { DropdownBond } from '../bond.svelte';
+	import Item from '../../menu/item/menu-item.svelte';
+
+	const dropdown = DropdownBond.get();
+
+	if (!dropdown) {
+		throw new Error('<DropdownItem> must be used within a <Dropdown>.');
+	}
+
+	let {
+		class: klass = '',
+		preset = 'dropdown.item',
+		value = nanoid(),
+		data = undefined,
+		factory = _factory,
+		children = undefined,
+		onclick = undefined,
+		onmount = undefined,
+		ondestroy = undefined,
+		animate = undefined,
+		enter = undefined,
+		exit = undefined,
+		initial = undefined,
+		...restProps
+	}: DropdownItemProps<D> = $props();
+
+	let item: typeof Item = $state(undefined);
+	const controller = $derived(item?.getController());
+	const isHighlighted = $derived(controller?.isHighlighted ?? false);
+	const isSelected = $derived(controller?.isSelected ?? false);
+
+	// const item = factory().share();
+
+	const rootProps = $derived({
+		...controller?.elementProps(),
+		...restProps
+	});
+
+	const ID = $props.id();
+
+	function _factory() {
+		const existing = (dropdown?.state as any)?.item?.(value);
+
+		if (existing) {
+			return existing as DropdownItemController<D>;
+		}
+
+		const itemProps = defineState<ControllerProps<D>>([
+			defineProperty('value', () => value),
+			defineProperty('data', () => data),
+			defineProperty('id', () => value)
+		]);
+		const controller = new DropdownItemController<D>(() => itemProps);
+
+		controller.mount();
+
+		return controller;
+	}
+
+	function handleClick(ev: MouseEvent) {
+		onclick?.(ev);
+
+		if (ev.defaultPrevented) {
+			return;
+		}
+
+		ev.preventDefault();
+
+		controller.toggle();
+
+		if (controller.dropdown?.state) {
+			controller.dropdown.state.query = '';
+		}
+
+		controller.close();
+	}
+</script>
+
+<Item
+	bind:this={item}
+	{preset}
+	class={[
+		isHighlighted && 'bg-foreground/5',
+		isSelected && 'bg-primary/5 hover:bg-primary/10 active:bg-primary/15',
+		'$preset',
+		klass
+	]
+		.filter(Boolean)
+		.join(' ')}
+	enter={enter?.bind(controller)}
+	exit={exit?.bind(controller)}
+	initial={initial?.bind(controller)}
+	animate={animate?.bind(controller)}
+	onmount={onmount?.bind(controller)}
+	ondestroy={ondestroy?.bind(controller)}
+	onclick={handleClick}
+	{factory}
+	{...rootProps}
+>
+	{@render children?.({ dropdownItem: controller })}
+</Item>

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

@@ -1,40 +1,25 @@
-import { DropdownItemBond } from './bond.svelte';
-import type { Base } from '../../atom';
-declare function $$render<D, E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(): {
-    props: {
-        class?: string;
-        preset?: string;
-        value?: any;
-        data?: any;
-        factory?: () => DropdownItemBond<unknown>;
-        children?: any;
-        onclick?: any;
-        onmount?: any;
-        ondestroy?: any;
-        animate?: any;
-        enter?: any;
-        exit?: any;
-        initial?: any;
-    } & Record<string, any>;
+import type { DropdownItemProps } from './types';
+declare function $$render<D>(): {
+    props: DropdownItemProps<D>;
     exports: {};
     bindings: "";
     slots: {};
     events: {};
 };
-declare class __sveltets_Render<D, E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> {
-    props(): ReturnType<typeof $$render<D, E, B>>['props'];
-    events(): ReturnType<typeof $$render<D, E, B>>['events'];
-    slots(): ReturnType<typeof $$render<D, E, B>>['slots'];
+declare class __sveltets_Render<D> {
+    props(): ReturnType<typeof $$render<D>>['props'];
+    events(): ReturnType<typeof $$render<D>>['events'];
+    slots(): ReturnType<typeof $$render<D>>['slots'];
     bindings(): "";
     exports(): {};
 }
 interface $$IsomorphicComponent {
-    new <D, E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<D, E, B>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<D, E, B>['props']>, ReturnType<__sveltets_Render<D, E, B>['events']>, ReturnType<__sveltets_Render<D, E, B>['slots']>> & {
-        $$bindings?: ReturnType<__sveltets_Render<D, E, B>['bindings']>;
-    } & ReturnType<__sveltets_Render<D, E, B>['exports']>;
-    <D, E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(internal: unknown, props: ReturnType<__sveltets_Render<D, E, B>['props']> & {}): ReturnType<__sveltets_Render<D, E, B>['exports']>;
-    z_$$bindings?: ReturnType<__sveltets_Render<any, any, any>['bindings']>;
+    new <D>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<D>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<D>['props']>, ReturnType<__sveltets_Render<D>['events']>, ReturnType<__sveltets_Render<D>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<D>['bindings']>;
+    } & ReturnType<__sveltets_Render<D>['exports']>;
+    <D>(internal: unknown, props: ReturnType<__sveltets_Render<D>['props']> & {}): ReturnType<__sveltets_Render<D>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
 }
 declare const DropdownItem: $$IsomorphicComponent;
-type DropdownItem<D, E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> = InstanceType<typeof DropdownItem<D, E, B>>;
+type DropdownItem<D> = InstanceType<typeof DropdownItem<D>>;
 export default DropdownItem;

package/dist/components/dropdown/item/index.d.ts

@@ -0,0 +1,3 @@
+export * from './attachments.svelte';
+export { DropdownItemController } from './controller.svelte';
+export { default as DropdownItem } from './dropdown-item.svelte';

package/dist/components/dropdown/item/index.js

@@ -0,0 +1,3 @@
+export * from './attachments.svelte';
+export { DropdownItemController } from './controller.svelte';
+export { default as DropdownItem } from './dropdown-item.svelte';