@svelte-atoms/core 1.0.0-alpha.41 → 1.0.0-alpha.44

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

@@ -1,79 +1,79 @@
-<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'],
-		placement = 'bottom-start',
-		offset = 1,
-		keys = [],
-		factory = _factory,
-		children = undefined,
-		onquerychange = undefined,
-		...restProps
-	}: DropdownRootProps<T> = $props();
-
-	const bondProps = defineState<DropdownStateProps>(
-		[
-			defineProperty(
-				'open',
-				() => open,
-				(v) => {
-					open = v;
-				}
-			),
-			defineProperty(
-				'values',
-				() => (multiple ? values : [value].filter(Boolean) as T[]),
-				(v) => {
-					values = v;
-					value = v[0];
-				}
-			),
-			defineProperty(
-				'label',
-				() => label,
-				(v) => (label = v)
-			),
-			defineProperty(
-				'labels',
-				() => labels,
-				(v) => (labels = v)
-			),
-			defineProperty('multiple', () => multiple),
-			defineProperty('disabled', () => disabled),
-			defineProperty('placement', () => placement),
-			defineProperty('offset', () => offset),
-			defineProperty('placements', () => placements ?? []),
-			defineProperty('keys', () => keys ?? []),
-			defineProperty('rest', () => restProps)
-		],
-		() => ({})
-	);
-	const bond = factory(bondProps).share();
-
-	function _factory(props: typeof bondProps) {
-		const bondState = new DropdownBondState(() => props);
-		return new DropdownBond(bondState);
-	}
-
-	export function getBond() {
-		return bond;
-	}
-
-	$effect(() => {
-		return () => {
-			bond.destroy();
-		};
-	});
-</script>
-
-{@render children?.({ dropdown: bond })}
+<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'],
+		placement = 'bottom-start',
+		offset = 1,
+		keys = [],
+		factory = _factory,
+		children = undefined,
+		onquerychange = undefined,
+		...restProps
+	}: DropdownRootProps<T> = $props();
+
+	const bondProps = defineState<DropdownStateProps>(
+		[
+			defineProperty(
+				'open',
+				() => open,
+				(v) => {
+					open = v;
+				}
+			),
+			defineProperty(
+				'values',
+				() => (multiple ? values : [value].filter(Boolean) as T[]),
+				(v) => {
+					values = v;
+					value = v[0];
+				}
+			),
+			defineProperty(
+				'label',
+				() => label,
+				(v) => (label = v)
+			),
+			defineProperty(
+				'labels',
+				() => labels,
+				(v) => (labels = v)
+			),
+			defineProperty('multiple', () => multiple),
+			defineProperty('disabled', () => disabled),
+			defineProperty('placement', () => placement),
+			defineProperty('offset', () => offset),
+			defineProperty('placements', () => placements ?? []),
+			defineProperty('keys', () => keys ?? []),
+			defineProperty('rest', () => restProps)
+		],
+		() => ({})
+	);
+	const bond = factory(bondProps).share();
+
+	function _factory(props: typeof bondProps) {
+		const bondState = new DropdownBondState(() => props);
+		return new DropdownBond(bondState);
+	}
+
+	export function getBond() {
+		return bond;
+	}
+
+	$effect(() => {
+		return () => {
+			bond.destroy();
+		};
+	});
+</script>
+
+{@render children?.({ dropdown: bond })}

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

@@ -3,9 +3,9 @@ import type { DropdownRootProps } from './types';
 declare function $$render<T>(): {
     props: DropdownRootProps<T>;
     exports: {
-        getBond: () => DropdownBond<DropdownStateProps, DropdownBondState<DropdownStateProps>, import("./bond.svelte").DropdownBondElements>;
+        getBond: () => DropdownBond<DropdownStateProps, DropdownBondState<DropdownStateProps, any>, import("./bond.svelte").DropdownBondElements, unknown>;
     };
-    bindings: "values" | "value" | "label" | "open" | "labels";
+    bindings: "label" | "values" | "value" | "open" | "labels";
     slots: {};
     events: {};
 };
@@ -13,9 +13,9 @@ 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" | "label" | "open" | "labels";
+    bindings(): "label" | "values" | "value" | "open" | "labels";
     exports(): {
-        getBond: () => DropdownBond<DropdownStateProps, DropdownBondState<DropdownStateProps>, import("./bond.svelte").DropdownBondElements>;
+        getBond: () => DropdownBond<DropdownStateProps, DropdownBondState<DropdownStateProps, any>, import("./bond.svelte").DropdownBondElements, unknown>;
     };
 }
 interface $$IsomorphicComponent {

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

@@ -1,55 +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>
+<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-selections.svelte

@@ -1,70 +1,70 @@
-<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 { onMount, 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();
-
-	let isMounted = $state(false);
-
-	onMount(()=> {
-		isMounted = true;
-	})
-
-	const selections = $derived.by(() => {
-		isMounted; // ensure re-computation after mount
-
-		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}
+<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 { onMount, 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();
+
+	let isMounted = $state(false);
+
+	onMount(()=> {
+		isMounted = true;
+	})
+
+	const selections = $derived.by(() => {
+		isMounted; // ensure re-computation after mount
+
+		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-trigger.svelte

@@ -1,30 +1,30 @@
-<script lang="ts" generics="T extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
-	import { Trigger } from '../popover/atoms';
-	import type { Base } from '../atom';
-	import { DropdownBond } from './bond.svelte';
-	import type { DropdownTriggerProps } from './types';
-
-	const bond = DropdownBond.get();
-
-	if (!bond) {
-		throw new Error('dropdown atom was not found');
-	}
-
-	let {
-		class: klass = '',
-		as = 'button' as T,
-		preset = 'dropdown.trigger',
-		children = undefined,
-		...restProps
-	}: DropdownTriggerProps<T, B> = $props();
-</script>
-
-<Trigger
-	{as}
-	{bond}
-	preset={preset}
-	class={['border-border relative flex h-auto min-h-10 flex-wrap items-center', '$preset', klass]}
-	{...restProps}
->
-	{@render children?.({ dropdown: bond })}
-</Trigger>
+<script lang="ts" generics="T extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
+	import { Trigger } from '../popover/atoms';
+	import type { Base } from '../atom';
+	import { DropdownBond } from './bond.svelte';
+	import type { DropdownTriggerProps } from './types';
+
+	const bond = DropdownBond.get();
+
+	if (!bond) {
+		throw new Error('dropdown atom was not found');
+	}
+
+	let {
+		class: klass = '',
+		as = 'button' as T,
+		preset = 'dropdown.trigger',
+		children = undefined,
+		...restProps
+	}: DropdownTriggerProps<T, B> = $props();
+</script>
+
+<Trigger
+	{as}
+	{bond}
+	preset={preset}
+	class={['border-border relative flex h-auto min-h-10 flex-wrap items-center', '$preset', klass]}
+	{...restProps}
+>
+	{@render children?.({ dropdown: bond })}
+</Trigger>

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

@@ -1,10 +1,46 @@
-export * as Dropdown from './atoms';
-export { DropdownBond, type DropdownBondElements, DropdownBondState, type DropdownStateProps } from './bond.svelte';
+/**
+ * @deprecated Import from `select` instead. This module will be removed in a future version.
+ */
+export { 
+/**
+ * @deprecated Use `Select` instead.
+ */
+Select as Dropdown } from '../select';
+export { 
+/**
+ * @deprecated Use `SelectBond` instead.
+ */
+SelectBond as DropdownBond, 
+/**
+ * @deprecated Use `SelectBondState` instead.
+ */
+SelectBondState as DropdownBondState, 
+/**
+ * @deprecated Use `SelectBondElements` instead.
+ */
+type SelectBondElements as DropdownBondElements, 
+/**
+ * @deprecated Use `SelectStateProps` instead.
+ */
+type SelectStateProps as DropdownStateProps } from '../select/bond.svelte';
 export * from './item';
-export { filterDropdownData } from './runes.svelte';
+export { 
+/**
+ * @deprecated Use `filterSelectData` instead.
+ */
+filterSelectData as filterDropdownData } from '../select/runes.svelte';
+/**
+ * @deprecated Use `filterSelectData` instead.
+ */
+export { filterSelectData as filter } from '../select/runes.svelte';
+export type { DropdownRootProps, DropdownTriggerProps, DropdownSelectionsProps, DropdownSelectionProps, DropdownQueryProps, DropdownSelection } from './types';
+export type { 
+/**
+ * @deprecated Use `AnimateSelectContentParams` instead.
+ */
+AnimateSelectContentParams as AnimateDropdownContentParams } from '../select';
+export { 
 /**
- * @deprecated Use `filterDropdownData` instead.
+ * @deprecated Use `select` instead.
  */
-export { filterDropdownData as filter } from './runes.svelte';
-export * from './types';
-export type { AnimatePopoverContentParams as AnimateDropdownContentParams, animatePopoverContent as animateDropdownContent } from '../popover/motion';
+select as dropdown } from '../select/attachments.svelte';

package/dist/components/dropdown/index.js

@@ -1,9 +1,37 @@
-export * as Dropdown from './atoms';
-export { DropdownBond, DropdownBondState } from './bond.svelte';
+/**
+ * @deprecated Import from `select` instead. This module will be removed in a future version.
+ */
+// Namespace — Select is the canonical export; Dropdown remains for backward compat
+export { 
+/**
+ * @deprecated Use `Select` instead.
+ */
+Select as Dropdown } from '../select';
+// Bond classes
+export { 
+/**
+ * @deprecated Use `SelectBond` instead.
+ */
+SelectBond as DropdownBond, 
+/**
+ * @deprecated Use `SelectBondState` instead.
+ */
+SelectBondState as DropdownBondState } from '../select/bond.svelte';
+// Item exports (already shimmed in item/index.ts)
 export * from './item';
-export { filterDropdownData } from './runes.svelte';
+// Runes
+export { 
+/**
+ * @deprecated Use `filterSelectData` instead.
+ */
+filterSelectData as filterDropdownData } from '../select/runes.svelte';
+/**
+ * @deprecated Use `filterSelectData` instead.
+ */
+export { filterSelectData as filter } from '../select/runes.svelte';
+// Attachment functions
+export { 
 /**
- * @deprecated Use `filterDropdownData` instead.
+ * @deprecated Use `select` instead.
  */
-export { filterDropdownData as filter } from './runes.svelte';
-export * from './types';
+select as dropdown } from '../select/attachments.svelte';

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

@@ -0,0 +1,36 @@
+import { BondAtom } from '../../../shared/bond.svelte';
+import type { DropdownBond } from '../bond.svelte';
+export type DropdownItemAtomProps<T = unknown> = {
+    id: string;
+    value: string;
+    label?: string;
+    data?: T;
+};
+export declare class DropdownItemAtom<T = unknown, B extends DropdownBond = DropdownBond> extends BondAtom<B, HTMLElement> {
+    #private;
+    constructor(props: () => DropdownItemAtomProps<T>, dropdownBond: B);
+    get id(): string;
+    get createdAt(): Date;
+    get props(): DropdownItemAtomProps<T>;
+    get value(): string;
+    get data(): T | undefined;
+    get label(): string;
+    get isHighlighted(): boolean;
+    get isSelected(): boolean;
+    get attrs(): {
+        id: string;
+        role: string;
+        'aria-selected': boolean;
+        'data-selected': boolean;
+        'data-highlighted': boolean;
+    };
+    get handlers(): {
+        onclick: () => void;
+    };
+    select(): void;
+    unselect(): void;
+    toggle(): void;
+    close(): void;
+    mount(): () => void;
+    unmount(): void;
+}