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

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

@@ -1,11 +1,14 @@
 <script lang="ts" generics="T">
 	import { defineProperty, defineState } from '../../utils';
 	import { DropdownBond, DropdownBondState, type DropdownStateProps } from './bond.svelte';
+	import type { DropdownRootProps } from './types';
 
 	let {
 		open = $bindable(false),
 		value = $bindable(),
 		values = $bindable(),
+		labels = $bindable(),
+		label = $bindable(),
 		multiple = false,
 		disabled = false,
 		placements = ['bottom-start', 'bottom-end', 'top-start', 'top-end'],
@@ -16,7 +19,7 @@
 		children = undefined,
 		onquerychange = undefined,
 		...restProps
-	} = $props();
+	}: DropdownRootProps<T> = $props();
 
 	const bondProps = defineState<DropdownStateProps>(
 		[
@@ -35,6 +38,16 @@
 					value = v[0];
 				}
 			),
+			defineProperty(
+				'label',
+				() => label,
+				(v) => (label = v)
+			),
+			defineProperty(
+				'labels',
+				() => labels,
+				(v) => (labels = v)
+			),
 			defineProperty('multiple', () => multiple),
 			defineProperty('disabled', () => disabled),
 			defineProperty('placement', () => placement),
@@ -42,7 +55,7 @@
 			defineProperty('placements', () => placements ?? []),
 			defineProperty('keys', () => keys ?? [])
 		],
-		() => ({ onquerychange })
+		() => ({})
 	);
 	const bond = factory(bondProps).share();
 

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

@@ -1,23 +1,11 @@
 import { DropdownBond, DropdownBondState, type DropdownStateProps } from './bond.svelte';
+import type { DropdownRootProps } from './types';
 declare function $$render<T>(): {
-    props: {
-        open?: boolean;
-        value?: any;
-        values?: any;
-        multiple?: boolean;
-        disabled?: boolean;
-        placements?: any[];
-        placement?: string;
-        offset?: number;
-        keys?: any[];
-        factory?: (props: DropdownStateProps) => DropdownBond<DropdownStateProps, DropdownBondState<DropdownStateProps>, import("./bond.svelte").DropdownBondElements>;
-        children?: any;
-        onquerychange?: any;
-    } & Record<string, any>;
+    props: DropdownRootProps<T>;
     exports: {
         getBond: () => DropdownBond<DropdownStateProps, DropdownBondState<DropdownStateProps>, import("./bond.svelte").DropdownBondElements>;
     };
-    bindings: "values" | "value" | "open";
+    bindings: "values" | "value" | "label" | "open" | "labels";
     slots: {};
     events: {};
 };
@@ -25,7 +13,7 @@ declare class __sveltets_Render<T> {
     props(): ReturnType<typeof $$render<T>>['props'];
     events(): ReturnType<typeof $$render<T>>['events'];
     slots(): ReturnType<typeof $$render<T>>['slots'];
-    bindings(): "values" | "value" | "open";
+    bindings(): "values" | "value" | "label" | "open" | "labels";
     exports(): {
         getBond: () => DropdownBond<DropdownStateProps, DropdownBondState<DropdownStateProps>, import("./bond.svelte").DropdownBondElements>;
     };

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

@@ -0,0 +1,55 @@
+<script lang="ts" generics="T extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
+	import { type Base } from '../atom';
+	import { DropdownBond } from './bond.svelte';
+	import type { DropdownSelectionProps } from './types';
+	import { Chip } from '../chip';
+	import { HtmlAtom as Atom } from '../atom';
+
+	const bond = DropdownBond.get();
+
+	if (!bond) {
+		throw new Error('DropdownValue must be used within a Dropdown');
+	}
+
+	const isMultiple = $derived(bond.state.props.multiple);
+
+	let {
+		class: klass = '',
+		as = 'div' as T,
+		base = undefined,
+		selection,
+		children,
+		onclose,
+		...restProps
+	}: DropdownSelectionProps<T, B> = $props();
+
+	const _base = $derived((base ?? isMultiple) ? Chip : undefined);
+
+	function handleClose(ev: Event) {
+		onclose?.(ev);
+
+		if (ev.defaultPrevented) return;
+
+		selection.unselect();
+	}
+</script>
+
+<Atom
+	{as}
+	{bond}
+	base={_base}
+	preset="dropdown.value"
+	class={[
+		'dropdown-value border-border inline-flex h-6 flex-nowrap items-center gap-1 rounded-sm px-2 whitespace-nowrap',
+		'$preset',
+		klass
+	]}
+	onclose={handleClose}
+	{...restProps}
+>
+	{#if children}
+		{@render children?.()}
+	{:else}
+		{selection.label}
+	{/if}
+</Atom>

package/dist/components/dropdown/{dropdown-value.svelte.d.ts → dropdown-selection.svelte.d.ts}

@@ -1,17 +1,7 @@
 import { type Base } from '../atom';
+import type { DropdownSelectionProps } from './types';
 declare function $$render<T extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(): {
-    props: {
-        class?: string;
-        as?: T;
-        value: any;
-        children: any;
-        onmount?: any;
-        ondestroy?: any;
-        animate?: any;
-        enter?: any;
-        exit?: any;
-        initial?: any;
-    } & Record<string, any>;
+    props: DropdownSelectionProps<T, B>;
     exports: {};
     bindings: "";
     slots: {};
@@ -31,6 +21,6 @@ interface $$IsomorphicComponent {
     <T extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(internal: unknown, props: ReturnType<__sveltets_Render<T, B>['props']> & {}): ReturnType<__sveltets_Render<T, B>['exports']>;
     z_$$bindings?: ReturnType<__sveltets_Render<any, any>['bindings']>;
 }
-declare const DropdownValue: $$IsomorphicComponent;
-type DropdownValue<T extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> = InstanceType<typeof DropdownValue<T, B>>;
-export default DropdownValue;
+declare const DropdownSelection: $$IsomorphicComponent;
+type DropdownSelection<T extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> = InstanceType<typeof DropdownSelection<T, B>>;
+export default DropdownSelection;

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

@@ -0,0 +1,62 @@
+<script lang="ts">
+	import { HtmlAtom as Atom } from '../atom';
+	import DropdownSelection from './dropdown-selection.svelte';
+	import { DropdownBond } from './bond.svelte';
+	import type { DropdownSelectionsProps } from './types';
+	import type { Component } from 'svelte';
+
+	const bond = DropdownBond.get();
+
+	if (!bond) {
+		throw new Error('DropdownValue must be used within a Dropdown');
+	}
+
+	let {
+		class: klass = '',
+		children,
+		getSelections = undefined,
+		Selection = DropdownSelection as unknown as Component,
+		...restProps
+	}: DropdownSelectionsProps = $props();
+
+	const selections = $derived.by(() => {
+		if (getSelections) {
+			return getSelections(bond);
+		}
+
+		return bond.state.selections.map((controller) => ({
+			id: controller.id,
+			value: controller.value,
+			get label() {
+				return controller.label;
+			},
+			unselect() {
+				controller.unselect();
+			},
+			get createdAt() {
+				return controller.createdAt;
+			},
+			controller
+		}));
+	});
+	const isMultiple = $derived(bond.state.props.multiple);
+</script>
+
+{#if isMultiple && selections.length}
+	<Atom class={['flex flex-wrap items-center gap-2', klass]} {...restProps}>
+		{#if children}
+			{@render children?.({ selections: selections, selection: selections[0] })}
+		{:else}
+			{#each selections as selection (selection.id)}
+				<Selection {selection}>
+					{selection.label}
+				</Selection>
+			{/each}
+		{/if}
+	</Atom>
+{:else if children && selections[0]}
+	{@render children?.({ selections: selections, selection: selections[0] })}
+{:else if selections[0]}
+	{@const selection = selections[0]}
+	{selection.label}
+{/if}

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

@@ -0,0 +1,5 @@
+import type { DropdownSelectionsProps } from './types';
+import type { Component } from 'svelte';
+declare const DropdownSelections: Component<DropdownSelectionsProps, {}, "">;
+type DropdownSelections = ReturnType<typeof DropdownSelections>;
+export default DropdownSelections;

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

@@ -3,7 +3,7 @@
 	import { Dropdown as ADropdown } from '.';
 	import { Input } from '../input';
 	import { flip } from 'svelte/animate';
-	import { filter } from './runes.svelte';
+	import { filterDropdownData } from './runes.svelte';
 
 	// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
 	const { Story } = defineMeta({
@@ -22,62 +22,106 @@
 	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' }
+		{ id: 1, value: 'apple', label: 'Apple' },
+		{ id: 2, value: 'banana', label: 'Banana' },
+		{ id: 3, value: 'cherry', label: 'Cherry' },
+		{ id: 4, value: 'date', label: 'Date' },
+		{ id: 5, value: 'elderberry', label: 'Elderberry' }
 	]);
 
-	const dd = filter(
+	const dd = filterDropdownData(
 		() => data,
-		(query, item) => item.text.toLowerCase().includes(query.toLowerCase())
+		(query, item) => item.label.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();
+	<div class="flex flex-col gap-4">
+		<ADropdown.Root bind:open keys={data.map((item) => item.value)} multiple>
+			{#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>
+						dropdown.state.open();
+					}}
+				>
+					<!-- Inline search input within the trigger -->
+					<input
+						class="w-full flex-1 px-1 outline-none"
+						placeholder="Search for fruits..."
+						bind:value={dd.query}
+					/>
 
-			<!-- 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>
+					<!-- Default usage  -->
+					<!-- <ADropdown.Selections class="flex flex-wrap gap-1" /> -->
+
+					<!-- Display selected values with animation -->
+					<ADropdown.Selections class="flex flex-wrap gap-1">
+						{#snippet children({ selections })}
+							{#each selections as selection (selection.id)}
+								<div animate:flip={{ duration: 200 }}>
+									<ADropdown.Selection {selection} />
+								</div>
+							{/each}
+						{/snippet}
+					</ADropdown.Selections>
+				</ADropdown.Trigger>
+
+				<!-- ADropdown list with filtered items -->
+				<ADropdown.Content>
+					{#each dd.current as item (item.id)}
+						<div animate:flip={{ duration: 200 }}>
+							<ADropdown.Item value={item.value}>{item.label}</ADropdown.Item>
+						</div>
+					{/each}
+				</ADropdown.Content>
+			{/snippet}
+		</ADropdown.Root>
+
+		<ADropdown.Root keys={data.map((item) => item.value)}>
+			{#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 gap-1 rounded-sm px-4 transition-colors duration-200"
+					onclick={(ev) => {
+						ev.preventDefault();
+
+						dropdown.state.open();
+					}}
+				>
+					<!-- Display selected values with animation -->
+					<ADropdown.Selections class="flex flex-wrap gap-1" />
+
+					<!-- Ability to customize the display of selected item -->
+					<!-- <ADropdown.Selections class="flex flex-wrap gap-1" >
+						{#snippet children({selection})}
+							{selection?.text}
+						{/snippet}
+					</ADropdown.Selections> -->
+				</ADropdown.Trigger>
+
+				<!-- ADropdown list with filtered items -->
+				<ADropdown.Content>
+					<!-- Inline search input within the trigger -->
+					<input
+						bind:value={dd.query}
+						class="border-border flex-1 border-b px-4 py-3"
+						placeholder="Search for fruits..."
+					/>
+
+					{#each dd.current as item (item.id)}
+						<div animate:flip={{ duration: 200 }}>
+							<ADropdown.Item value={item.value}>{item.label}</ADropdown.Item>
+						</div>
+					{/each}
+				</ADropdown.Content>
+			{/snippet}
+		</ADropdown.Root>
+	</div>
 </Story>

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

@@ -1,6 +1,10 @@
 export * as Dropdown from './atoms';
 export { DropdownBond, type DropdownBondElements, DropdownBondState, type DropdownStateProps } from './bond.svelte';
 export * from './item';
-export { filter } from './runes.svelte';
+export { filterDropdownData } from './runes.svelte';
+/**
+ * @deprecated Use `filterDropdownData` instead.
+ */
+export { filterDropdownData as 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,5 +1,9 @@
 export * as Dropdown from './atoms';
 export { DropdownBond, DropdownBondState } from './bond.svelte';
 export * from './item';
-export { filter } from './runes.svelte';
+export { filterDropdownData } from './runes.svelte';
+/**
+ * @deprecated Use `filterDropdownData` instead.
+ */
+export { filterDropdownData as filter } from './runes.svelte';
 export * from './types';

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

@@ -13,7 +13,7 @@ export declare class DropdownItemController<T = unknown> extends MenuItemControl
     get data(): any;
     get element(): HTMLElement | null;
     get dropdown(): DropdownBond<DropdownStateProps, DropdownBondState<DropdownStateProps>, import("..").DropdownBondElements> | undefined;
-    get text(): string;
+    get label(): string;
     get isHighlighted(): boolean;
     get isSelected(): boolean;
     select(): void;

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

@@ -26,8 +26,8 @@ export class DropdownItemController extends MenuItemController {
     get dropdown() {
         return this.#dropdown;
     }
-    get text() {
-        const element = (this.#element?.querySelector('[data-text]') ?? this.#element);
+    get label() {
+        const element = (this.#element?.querySelector('[data-label]') ?? this.#element);
         return element?.innerText ?? '';
     }
     get isHighlighted() {

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

@@ -44,8 +44,6 @@
 		...restProps
 	});
 
-	const ID = $props.id();
-
 	function _factory() {
 		const existing = (dropdown?.state as any)?.item?.(value);
 

package/dist/components/dropdown/runes.svelte.d.ts

@@ -1,5 +1,9 @@
-type Predicate<T> = ((query: string, value: T) => boolean) | ((query: string, value: T, index: number) => boolean) | ((query: string, value: T, index: number, array: T[]) => boolean);
-export declare function filter<T>(data: () => T[], predicate: Predicate<T>, initialQuery?: string): {
+type Predicate<T> = {
+    (query: string, value: T): boolean;
+    (query: string, value: T, index: number): boolean;
+    (query: string, value: T, index: number, array: T[]): boolean;
+};
+export declare function filterDropdownData<T>(data: () => T[], predicate: Predicate<T>, initialQuery?: string): {
     query: string;
     readonly current: T[];
 };

package/dist/components/dropdown/runes.svelte.js

@@ -1,4 +1,4 @@
-export function filter(data, predicate, initialQuery = '') {
+export function filterDropdownData(data, predicate, initialQuery = '') {
     let query = $state(initialQuery);
     const results = $derived(data().filter((...args) => predicate(query, ...args)));
     return {

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

@@ -1,8 +1,10 @@
-import type { Snippet } from 'svelte';
+import type { Component, Snippet } from 'svelte';
 import type { HtmlAtomProps, Base } from '../atom';
 import type { Factory, Override } from '../../types';
 import type { DropdownBond } from './bond.svelte';
 import type { PopoverTriggerProps } from '../popover';
+import type { ClassValue } from 'svelte/elements';
+import type { DropdownItemController } from './item';
 /**
  * Extend this interface to add custom dropdown properties in your application.
  */
@@ -13,10 +15,12 @@ export interface DropdownExtendProps {
  */
 export interface DropdownTriggerExtendProps {
 }
-export interface DropdownRootProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base, T = any> extends Omit<HtmlAtomProps<E, B>, 'children'>, DropdownExtendProps {
+export interface DropdownRootProps<T = any> extends DropdownExtendProps {
     open?: boolean;
     value?: T;
     values?: T[];
+    label?: string;
+    labels?: string[];
     multiple?: boolean;
     disabled?: boolean;
     placements?: string[];
@@ -35,3 +39,31 @@ export interface DropdownTriggerProps<E extends keyof HTMLElementTagNameMap = 'd
     }]>;
 }>, DropdownTriggerExtendProps {
 }
+export interface DropdownSelectionsProps {
+    class?: ClassValue;
+    Selection?: Component | undefined;
+    children?: Snippet<[
+        {
+            selections: DropdownSelection[];
+            selection?: DropdownSelection | undefined;
+        }
+    ]>;
+    getSelections?: <T extends DropdownBond>(bond: T) => DropdownSelection[];
+}
+export interface DropdownSelectionProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends HtmlAtomProps<E, B> {
+    selection: DropdownSelection;
+    children?: Snippet;
+    onclose?: (event: Event) => void;
+}
+export interface DropdownQueryProps extends HtmlAtomProps<'input'> {
+    value?: string;
+    children?: Snippet;
+}
+export interface DropdownSelection {
+    readonly id: string;
+    readonly value?: string;
+    readonly label: string;
+    readonly createdAt: Date;
+    unselect: () => void;
+    controller?: DropdownItemController<unknown>;
+}

package/dist/components/index.d.ts

@@ -32,6 +32,7 @@ export * from './textarea';
 export * from './tree';
 export * from './dropdown';
 export * from './stack';
+export * from './stepper';
 export * from './element';
 export * from './atom';
 export * from './container';
@@ -39,3 +40,4 @@ export * from './calendar';
 export * from './date-picker';
 export * from './qr-code';
 export * from './lazy';
+export * from './chip';

package/dist/components/index.js

@@ -32,6 +32,7 @@ export * from './textarea';
 export * from './tree';
 export * from './dropdown';
 export * from './stack';
+export * from './stepper';
 export * from './element';
 export * from './atom';
 export * from './container';
@@ -39,3 +40,4 @@ export * from './calendar';
 export * from './date-picker';
 export * from './qr-code';
 export * from './lazy';
+export * from './chip';

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

@@ -33,14 +33,16 @@ export class MenuBond extends PopoverBond {
         return {
             ...superProps,
             'aria-haspopup': 'menu',
-            'onkeydown': (ev) => {
+            onkeydown: (ev) => {
                 if (ev.key === 'ArrowDown') {
                     this.state.navigation.next();
                 }
                 if (ev.key === 'ArrowUp') {
                     this.state.navigation.previous();
                 }
-                if ((ev.key === 'Enter' || ev.key === ' ') && this.state.props.open && this.state.highlightedItem) {
+                if ((ev.key === 'Enter' || ev.key === ' ') &&
+                    this.state.props.open &&
+                    this.state.highlightedItem) {
                     if (ev.key === ' ') {
                         ev.preventDefault();
                     }

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

@@ -7,6 +7,7 @@ export declare class MenuItemController {
     static CONTEXT_KEY: string;
     constructor(props?: () => MenuItemControllerProps);
     get id(): string;
+    get createdAt(): Date;
     get props(): MenuItemControllerProps;
     get element(): HTMLElement | null;
     get menu(): MenuBond<MenuBondProps, MenuBondState<MenuBondProps>, import("..").PopoverDomElements> | undefined;

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

@@ -9,6 +9,8 @@ export class MenuItemController {
     #element = null;
     #menu;
     #unmount;
+    // eslint-disable-next-line svelte/prefer-svelte-reactivity
+    #createdAt = new Date();
     constructor(props = () => ({})) {
         this.#props = props;
         this.#id = this.props.id ?? nanoid();
@@ -20,6 +22,9 @@ export class MenuItemController {
     get id() {
         return this.#id;
     }
+    get createdAt() {
+        return this.#createdAt;
+    }
     get props() {
         return this.#props();
     }

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

@@ -122,8 +122,7 @@ export class PopoverBond extends Bond {
                 // check if trigger contains a focusable element and the focus is already inside
                 // check if the in-focus element is an input, textarea or select to avoid stealing focus
                 const activeElement = document.activeElement;
-                const triggerContainsFocus = ['input', 'textarea'].includes(activeElement.tagName.toLowerCase()) ||
-                    triggerElement === activeElement ||
+                const triggerContainsFocus = ['input', 'textarea'].includes(activeElement.tagName.toLowerCase()) &&
                     triggerElement.contains(activeElement);
                 // Move focus to popover when opened
                 if (!triggerContainsFocus) {