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

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(),
+		label = $bindable(),
+		labels = $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(
+				'label',
+				() => label,
+				(v) => (label = v)
+			),
+			defineProperty(
+				'labels',
+				() => labels,
+				(v) => (labels = 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-root.svelte.d.ts

@@ -3,9 +3,9 @@ import { ComboboxBond } from './bond.svelte';
 declare function $$render<D>(): {
     props: ComboboxRootProps;
     exports: {
-        getBond: () => ComboboxBond<unknown>;
+        getBond: () => ComboboxBond;
     };
-    bindings: "values" | "value" | "text" | "open" | "query";
+    bindings: "values" | "value" | "label" | "open" | "labels";
     slots: {};
     events: {};
 };
@@ -13,9 +13,9 @@ declare class __sveltets_Render<D> {
     props(): ReturnType<typeof $$render<D>>['props'];
     events(): ReturnType<typeof $$render<D>>['events'];
     slots(): ReturnType<typeof $$render<D>>['slots'];
-    bindings(): "values" | "value" | "text" | "open" | "query";
+    bindings(): "values" | "value" | "label" | "open" | "labels";
     exports(): {
-        getBond: () => ComboboxBond<unknown>;
+        getBond: () => ComboboxBond;
     };
 }
 interface $$IsomorphicComponent {

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

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { ComboboxBond } from './bond.svelte';
+	import { Selections } from '../dropdown/atoms';
+	import type { ComboboxSelectionsProps } from './types';
+
+	const bond = ComboboxBond.get();
+
+	if (!bond) {
+		throw new Error('ComboboxSelections must be used within a Combobox');
+	}
+
+	let { ...restProps }: ComboboxSelectionsProps = $props();
+
+	let selections = $derived(bond.state.allSelections);
+</script>
+
+<Selections getSelections={() => selections} {...restProps} />

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

@@ -0,0 +1,4 @@
+import type { ComboboxSelectionsProps } from './types';
+declare const ComboboxSelections: import("svelte").Component<ComboboxSelectionsProps, {}, "">;
+type ComboboxSelections = ReturnType<typeof ComboboxSelections>;
+export default ComboboxSelections;

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

@@ -3,6 +3,7 @@
 	import { Combobox as ACombobox } from '.';
 	import { Input } from '../input';
 	import { Divider } from '../divider';
+	import { filterDropdownData } from '../dropdown';
 
 	// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
 	const { Story } = defineMeta({
@@ -19,8 +20,6 @@
 
 <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' },
@@ -29,22 +28,36 @@
 		{ value: 'cny', label: 'Chinese Yuan' }
 	]);
 
-	const filteredItems = $derived(
-		array.filter((item) => !query || item.label.toLowerCase().includes(query))
+	const filteredItems = filterDropdownData(
+		() => array,
+		(query, item) => item.label.toLowerCase().includes(query.toLowerCase())
 	);
+
+	let selectedLabels = $state([]);
 </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.Root bind:open bind:labels={selectedLabels} multiple>
+		<ACombobox.Trigger
+			base={Input.Root}
+			class="flex h-auto min-h-10 min-w-sm flex-col items-start gap-2"
+		>
+			<div class="flex">
+				<Input.Icon class="text-foreground/50">$</Input.Icon>
+				<Divider class="mx-1" vertical />
+				<ACombobox.Control class="px-1" placeholder="Select a language" />
+			</div>
+			<ACombobox.Selections />
 		</ACombobox.Trigger>
-		<ACombobox.List>
-			{#each filteredItems as item (item.value)}
+		<ACombobox.Content>
+			<input
+				bind:value={filteredItems.query}
+				class="border-border border-b px-4 py-3"
+				placeholder="Type to filter..."
+			/>
+			{#each filteredItems.current as item (item.value)}
 				<ACombobox.Item value={item.value}>{item.label}</ACombobox.Item>
 			{/each}
-		</ACombobox.List>
+		</ACombobox.Content>
 	</ACombobox.Root>
 </Story>

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

@@ -2,17 +2,19 @@ import type { Snippet } from 'svelte';
 import type { HtmlAtomProps, Base } from '../atom';
 import type { Factory } from '../../types';
 import type { ComboboxBond } from './bond.svelte';
+import type { DropdownSelectionProps, DropdownSelectionsProps } from '../dropdown';
+import type { InputControlProps } from '../input';
 /**
  * Extend this interface to add custom combobox properties in your application.
  */
 export interface ComboboxExtendProps {
 }
-export interface ComboboxRootProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends Omit<HtmlAtomProps<E, B>, 'children'>, ComboboxExtendProps {
+export interface ComboboxRootProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends HtmlAtomProps<E, B>, ComboboxExtendProps {
     open?: boolean;
     value?: unknown;
     values?: unknown[];
-    query?: string;
-    text?: string;
+    label?: string;
+    labels?: string[];
     multiple?: boolean;
     disabled?: boolean;
     placements?: string[];
@@ -23,3 +25,15 @@ export interface ComboboxRootProps<E extends keyof HTMLElementTagNameMap = 'div'
         combobox: ComboboxBond;
     }]>;
 }
+export interface ComboboxSelectionsProps extends DropdownSelectionsProps {
+}
+export interface ComboboxSelectionProps extends DropdownSelectionProps {
+}
+export interface ComboboxControlProps extends InputControlProps {
+}
+export interface ComboboxSelection {
+    id: string;
+    label: string;
+    createdAt: Date;
+    unselect: () => void;
+}

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

@@ -33,8 +33,9 @@ export class DatePickerBond extends PopoverBond {
         };
     }
     content() {
+        const superProps = super.content();
         return {
-            ...super.content(),
+            ...superProps,
             id: `date-picker-calendar-${this.id}`,
             role: 'dialog',
             'aria-label': 'Choose date'

package/dist/components/date-picker/date-picker-calendar.svelte

@@ -1,67 +1,60 @@
-<script lang="ts">
-	import { Content } from '../popover/atoms';
-	import {
-		Root,
-		Header as CalendarHeader,
-		Body as CalendarBody,
-		Day as CalendarDay
-	} from '../calendar/atoms';
-	import { DatePickerBond } from './bond.svelte';
-	import DatePickerHeader from './date-picker-header.svelte';
-	import DatePickerMonths from './date-picker-months.svelte';
-	import DatePickerYears from './date-picker-years.svelte';
-	import { HtmlAtom } from '../atom';
-	import type { CalendarRange, Day as CalendarDayType } from '../calendar/types';
-	import type { DatePickerCalendarProps } from './types';
-
-	const datePickerBond = DatePickerBond.get();
-	const datePickerBondProps = $derived(datePickerBond?.state.props);
-
-	let {
-		class: klass = '',
-		preset = 'datepicker.calendar',
-		children: childrenProp,
-		Header = DatePickerHeader,
-		Weekdays = CalendarHeader,
-		Body = CalendarBody,
-		Day = CalendarDay,
-		Months = DatePickerMonths,
-		Years = DatePickerYears,
-		...restProps
-	}: DatePickerCalendarProps = $props();
-
-	const calendarProps = $derived({
-		...datePickerBond?.content(),
-		...datePickerBondProps,
-		...restProps
-	});
-
-	function handleChange(_: CustomEvent, { range, pivote }: { range: CalendarRange; pivote: Date }) {
-		if (!datePickerBond) return;
-
-		datePickerBond.state.props.range = range;
-		datePickerBond.state.props.pivote = pivote;
-	}
-</script>
-
-<Content
-	class={['relative overflow-hidden p-0', klass]}
-	base={Root}
-	onchange={handleChange}
-	{preset}
-	{...calendarProps}
->
-	<HtmlAtom base={Header} class="col-span-full" />
-	<HtmlAtom base={Weekdays} class="border-0" />
-
-	<HtmlAtom base={Body}>
-		{#snippet children({ day }: { day: CalendarDayType })}
-			<HtmlAtom base={Day} {day} class="flex items-center justify-center border-0">
-				<span class="value">{day.dayOfMonth}</span>
-			</HtmlAtom>
-		{/snippet}
-	</HtmlAtom>
-
-	<HtmlAtom base={Months} />
-	<HtmlAtom base={Years} />
-</Content>
+<script lang="ts">
+	import { Content } from '../popover/atoms';
+	import {
+		Root,
+		Header as CalendarHeader,
+		Body as CalendarBody,
+		Day as CalendarDay
+	} from '../calendar/atoms';
+	import { DatePickerBond } from './bond.svelte';
+	import DatePickerHeader from './date-picker-header.svelte';
+	import DatePickerMonths from './date-picker-months.svelte';
+	import DatePickerYears from './date-picker-years.svelte';
+	import { HtmlAtom } from '../atom';
+	import type { CalendarRange, Day as CalendarDayType } from '../calendar/types';
+	import type { DatePickerCalendarProps } from './types';
+
+	const datePickerBond = DatePickerBond.get();
+
+	let {
+		class: klass = '',
+		preset = 'datepicker.calendar',
+		children: childrenProp,
+		Header = DatePickerHeader,
+		Weekdays = CalendarHeader,
+		Body = CalendarBody,
+		Day = CalendarDay,
+		Months = DatePickerMonths,
+		Years = DatePickerYears,
+		...restProps
+	}: DatePickerCalendarProps = $props();
+
+	function handleChange(_: CustomEvent, { range, pivote }: { range: CalendarRange; pivote: Date }) {
+		if (!datePickerBond) return;
+
+		datePickerBond.state.props.range = range;
+		datePickerBond.state.props.pivote = pivote;
+	}
+</script>
+
+<Content
+	class={['relative overflow-hidden p-0', klass]}
+	base={Root}
+	onchange={handleChange}
+	{preset}
+	{...restProps}
+>
+	<HtmlAtom base={Header} class="col-span-full" />
+	<HtmlAtom base={Weekdays} class="border-0" />
+
+	<HtmlAtom base={Body}>
+		{#snippet children({ day }: { day: CalendarDayType })}
+			<HtmlAtom base={Day} {day} class="flex items-center justify-center border-0">
+				<span class="value">{day.dayOfMonth}</span>
+			</HtmlAtom>
+		{/snippet}
+	</HtmlAtom>
+
+	<HtmlAtom base={Months} />
+	<HtmlAtom base={Years} />
+</Content>

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

@@ -2,8 +2,7 @@ export { default as Root } from './dropdown-root.svelte';
 export { default as Item } from './item/dropdown-item.svelte';
 export { default as Trigger } from './dropdown-trigger.svelte';
 export { default as Placeholder } from './dropdown-placeholder.svelte';
-export { default as Query } from './dropdown-query.svelte';
-export { default as Value } from './dropdown-value.svelte';
-export { default as Values } from './dropdown-values.svelte';
+export { default as Selection } from './dropdown-selection.svelte';
+export { default as Selections } from './dropdown-selections.svelte';
 export { Arrow, Indicator } from '../popover/atoms';
 export { Content, List, Divider, Title, Group } from '../menu/atoms';

package/dist/components/dropdown/atoms.js

@@ -2,8 +2,8 @@ export { default as Root } from './dropdown-root.svelte';
 export { default as Item } from './item/dropdown-item.svelte';
 export { default as Trigger } from './dropdown-trigger.svelte';
 export { default as Placeholder } from './dropdown-placeholder.svelte';
-export { default as Query } from './dropdown-query.svelte';
-export { default as Value } from './dropdown-value.svelte';
-export { default as Values } from './dropdown-values.svelte';
+// export { default as Query } from './dropdown-query.svelte';
+export { default as Selection } from './dropdown-selection.svelte';
+export { default as Selections } from './dropdown-selections.svelte';
 export { Arrow, Indicator } from '../popover/atoms';
 export { Content, List, Divider, Title, Group } from '../menu/atoms';

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

@@ -3,9 +3,10 @@ import type { DropdownItemController } from './item/controller.svelte';
 export type DropdownStateProps = MenuBondProps & {
     values?: string[];
     value?: string;
+    labels?: string[];
+    label?: string;
     multiple?: boolean;
     keys?: string[];
-    onquerychange?: (query: string) => void;
 };
 export type DropdownBondElements = MenuBondElements & {
     placeholder?: HTMLElement;
@@ -44,9 +45,8 @@ export declare class DropdownBond<Props extends DropdownStateProps = DropdownSta
 export declare class DropdownBondState<Props extends DropdownStateProps = DropdownStateProps> extends MenuBondState<Props> {
     #private;
     constructor(props: () => Props);
-    get selectedItems(): DropdownItemController<unknown>[];
-    get query(): string;
-    set query(value: string);
+    get selections(): DropdownItemController<unknown>[];
     select(ids: string[]): void;
     unselect(ids: string[]): void;
+    protected updateLabels(): void;
 }

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

@@ -51,22 +51,14 @@ export class DropdownBond extends MenuBond {
     }
 }
 export class DropdownBondState extends MenuBondState {
-    #selectedItems = $derived(this.props.values
+    #selections = $derived(this.props.values
         ?.map((value) => this.items.get(value))
         .filter(Boolean) ?? []);
-    #query = $state('');
     constructor(props) {
         super(props);
     }
-    get selectedItems() {
-        return this.#selectedItems;
-    }
-    get query() {
-        return this.#query;
-    }
-    set query(value) {
-        this.#query = value;
-        this.props.onquerychange?.(value);
+    get selections() {
+        return this.#selections;
     }
     select(ids) {
         if (untrack(() => this.props.multiple)) {
@@ -78,6 +70,7 @@ export class DropdownBondState extends MenuBondState {
             const value = ids[0];
             this.props.values = value ? [value] : [];
         }
+        this.updateLabels();
     }
     unselect(ids) {
         // eslint-disable-next-line svelte/prefer-svelte-reactivity
@@ -86,5 +79,11 @@ export class DropdownBondState extends MenuBondState {
             sequence.delete(v);
         }
         this.props.values = [...sequence];
+        this.updateLabels();
+    }
+    updateLabels() {
+        const labels = this.#selections.map((s) => s.label);
+        this.props.labels = labels;
+        this.props.label = labels[0] ?? '';
     }
 }

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

@@ -1,54 +1,43 @@
-<script lang="ts" generics="T extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
-	import { onMount } from 'svelte';
-	import { DropdownBond } from './bond.svelte';
-	import { Input } from '../input';
-	import { type Base } from '../atom';
-
-	const bond = DropdownBond.get() as DropdownBond;
-
-	if (!bond) {
-		throw new Error('Combobox atom was not found');
-	}
-
-	let {
-		class: klass = '',
-		children = undefined,
-		onpointerdown,
-		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
-	bind:value={bond.state.query}
-	{bond}
-	preset="dropdown.query"
-	class={['inline-flex h-auto w-auto flex-1 py-1', '$preset', klass]}
-	onmount={onmount?.bind(bond.state)}
-	ondestroy={ondestroy?.bind(bond.state)}
-	enter={enter?.bind(bond.state)}
-	exit={exit?.bind(bond.state)}
-	initial={initial?.bind(bond.state)}
-	animate={animate?.bind(bond.state)}
-	{...restProps}
-/>
+<script lang="ts">
+	import { DropdownBond } from './bond.svelte';
+	import { Input } from '../input';
+	import type { DropdownQueryProps } from './types';
+
+	const bond = DropdownBond.get() as DropdownBond;
+
+	if (!bond) {
+		throw new Error('Dropdown atom was not found');
+	}
+
+	let {
+		value = $bindable(),
+		class: klass = '',
+		children = undefined,
+		onmount = undefined,
+		ondestroy = undefined,
+		animate = undefined,
+		enter = undefined,
+		exit = undefined,
+		initial = undefined,
+		...restProps
+	}: DropdownQueryProps = $props();
+</script>
+
+<Input.Control
+	bind:value={
+		() => value,
+		(v) => {
+			value = v;
+		}
+	}
+	{bond}
+	preset="dropdown.query"
+	class={['inline-flex h-auto w-auto flex-1 py-1', '$preset', klass]}
+	onmount={onmount?.bind(bond.state)}
+	ondestroy={ondestroy?.bind(bond.state)}
+	enter={enter?.bind(bond.state)}
+	exit={exit?.bind(bond.state)}
+	initial={initial?.bind(bond.state)}
+	animate={animate?.bind(bond.state)}
+	{...restProps}
+/>

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

@@ -1,35 +1,4 @@
-import { type Base } from '../atom';
-declare function $$render<T extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(): {
-    props: {
-        class?: string;
-        children?: any;
-        onpointerdown: any;
-        onmount?: any;
-        ondestroy?: any;
-        animate?: any;
-        enter?: any;
-        exit?: any;
-        initial?: any;
-    } & Record<string, any>;
-    exports: {};
-    bindings: "";
-    slots: {};
-    events: {};
-};
-declare class __sveltets_Render<T extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> {
-    props(): ReturnType<typeof $$render<T, B>>['props'];
-    events(): ReturnType<typeof $$render<T, B>>['events'];
-    slots(): ReturnType<typeof $$render<T, B>>['slots'];
-    bindings(): "";
-    exports(): {};
-}
-interface $$IsomorphicComponent {
-    new <T extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T, B>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T, B>['props']>, ReturnType<__sveltets_Render<T, B>['events']>, ReturnType<__sveltets_Render<T, B>['slots']>> & {
-        $$bindings?: ReturnType<__sveltets_Render<T, B>['bindings']>;
-    } & ReturnType<__sveltets_Render<T, B>['exports']>;
-    <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 DropdownQuery: $$IsomorphicComponent;
-type DropdownQuery<T extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> = InstanceType<typeof DropdownQuery<T, B>>;
+import type { DropdownQueryProps } from './types';
+declare const DropdownQuery: import("svelte").Component<DropdownQueryProps, {}, "value">;
+type DropdownQuery = ReturnType<typeof DropdownQuery>;
 export default DropdownQuery;