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

package/dist/components/select/item/bond.svelte.js

@@ -0,0 +1,77 @@
+import { BondAtom } from '../../../shared/bond.svelte';
+import { nanoid } from 'nanoid';
+export class SelectItemAtom extends BondAtom {
+    #id;
+    #props;
+    #selectBond;
+    // eslint-disable-next-line svelte/prefer-svelte-reactivity
+    #createdAt = new Date();
+    constructor(props, selectBond) {
+        super(selectBond, `item-${props().value}`);
+        this.#props = props;
+        this.#selectBond = selectBond;
+        this.#id = props().id ?? nanoid();
+    }
+    get id() {
+        return this.#id;
+    }
+    get createdAt() {
+        return this.#createdAt;
+    }
+    get props() {
+        return this.#props();
+    }
+    get value() {
+        return this.props.value;
+    }
+    get data() {
+        return this.props.data;
+    }
+    get label() {
+        const element = (this.element?.querySelector('[data-label]') ?? this.element);
+        return element?.innerText ?? this.#props().label ?? '';
+    }
+    get isHighlighted() {
+        return this.#selectBond.state.highlightedItem?.id === this.id;
+    }
+    get isSelected() {
+        return this.#selectBond.state.props.values?.includes(this.value) ?? false;
+    }
+    get attrs() {
+        const itemId = `select-item-${this.id}`;
+        return {
+            ...super.attrs,
+            id: itemId,
+            role: 'option',
+            'aria-selected': this.isSelected,
+            'data-selected': this.isSelected,
+            'data-highlighted': this.isHighlighted
+        };
+    }
+    get handlers() {
+        return {};
+    }
+    select() {
+        this.#selectBond?.state.select([this.value]);
+    }
+    unselect() {
+        this.#selectBond?.state.unselect([this.value]);
+    }
+    toggle() {
+        if (this.isSelected) {
+            this.unselect();
+        }
+        else {
+            this.select();
+        }
+    }
+    close() {
+        this.#selectBond?.state.close();
+    }
+    onmount() {
+        this.#selectBond?.state?.mountItem?.(this.value, this);
+        return () => {
+            this.#selectBond?.state?.unmountItem?.(this.value);
+        };
+    }
+}

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

@@ -0,0 +1,39 @@
+import type { DropdownMenuItemControllerInterface } from '../../dropdown-menu/item/controller.svelte';
+export type SelectItemProps<T = unknown> = {
+    readonly id: string;
+    readonly value: string;
+    readonly label?: string;
+    readonly data?: T;
+};
+export declare class SelectItemController<T = unknown> implements DropdownMenuItemControllerInterface<SelectItemProps<T>> {
+    #private;
+    static CONTEXT_KEY: string;
+    constructor(props: () => SelectItemProps<T>);
+    get id(): string;
+    get createdAt(): Date;
+    get props(): SelectItemProps<T>;
+    get element(): HTMLElement | null;
+    get value(): string;
+    get data(): T | undefined;
+    get label(): string;
+    get isHighlighted(): boolean;
+    get isSelected(): boolean;
+    mount(): () => void;
+    unmount(): void;
+    destroy(): void;
+    select(): void;
+    unselect(): void;
+    toggle(): void;
+    close(): void;
+    share(): SelectItemController<T>;
+    elementProps(): {
+        readonly [x: symbol]: (node: HTMLElement) => () => void;
+        readonly id: string;
+        readonly role: "option";
+        readonly 'aria-selected': boolean;
+        readonly 'data-selected': boolean;
+        readonly 'data-highlighted': boolean;
+    };
+    static get<T = unknown>(): SelectItemController<T> | undefined;
+    static set<T = unknown>(item: SelectItemController<T>): SelectItemController<T>;
+}

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

@@ -0,0 +1,105 @@
+import { getContext, setContext } from 'svelte';
+import { createAttachmentKey } from 'svelte/attachments';
+import { nanoid } from 'nanoid';
+import { SelectBond, SelectBondState } from '../bond.svelte';
+export class SelectItemController {
+    static CONTEXT_KEY = '@atoms/context/select/item';
+    #id;
+    #props;
+    #element = null;
+    #select;
+    #unmount;
+    // eslint-disable-next-line svelte/prefer-svelte-reactivity
+    #createdAt = new Date();
+    constructor(props) {
+        this.#props = props;
+        this.#id = this.props.id ?? nanoid();
+        this.#select = SelectBond.get();
+        if (!this.#select) {
+            throw new Error('SelectItem must be used within a Select context');
+        }
+    }
+    get id() {
+        return this.#id;
+    }
+    get createdAt() {
+        return this.#createdAt;
+    }
+    get props() {
+        return this.#props();
+    }
+    get element() {
+        return this.#element;
+    }
+    get value() {
+        return this.props?.value;
+    }
+    get data() {
+        return this.props?.data;
+    }
+    // get select() {
+    // 	return this.#select;
+    // }
+    get label() {
+        const element = (this.#element?.querySelector('[data-label]') ?? this.#element);
+        return element?.innerText ?? this.props?.label ?? '';
+    }
+    get isHighlighted() {
+        return this.#select?.state.highlightedItem?.id === this.id;
+    }
+    get isSelected() {
+        return this.#select?.state.props.values?.includes(this.value) ?? false;
+    }
+    mount() {
+        this.#unmount = this.#select?.state?.mountItem?.(this.#id, this) ?? undefined;
+        return this.unmount;
+    }
+    unmount() {
+        this.#unmount?.();
+    }
+    destroy() {
+        this.unmount();
+    }
+    select() {
+        this.#select?.state.select([this.value]);
+    }
+    unselect() {
+        this.#select?.state.unselect([this.value]);
+    }
+    toggle() {
+        if (this.isSelected) {
+            this.unselect();
+        }
+        else {
+            this.select();
+        }
+    }
+    close() {
+        this.#select?.state.close();
+    }
+    share() {
+        return SelectItemController.set(this);
+    }
+    elementProps() {
+        const itemId = `select-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.#element = null;
+                };
+            }
+        };
+    }
+    static get() {
+        return getContext(SelectItemController.CONTEXT_KEY);
+    }
+    static set(item) {
+        return setContext(SelectItemController.CONTEXT_KEY, item);
+    }
+}

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

@@ -0,0 +1,5 @@
+export * from './attachments.svelte';
+export { SelectItemController, type SelectItemProps as SelectItemControllerProps } from './controller.svelte';
+export { SelectItemAtom, type SelectItemAtomProps } from './bond.svelte';
+export { default as SelectItem } from './select-item.svelte';
+export * from './types';

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

@@ -0,0 +1,5 @@
+export * from './attachments.svelte';
+export { SelectItemController } from './controller.svelte';
+export { SelectItemAtom } from './bond.svelte';
+export { default as SelectItem } from './select-item.svelte';
+export * from './types';

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

@@ -0,0 +1,81 @@
+<script lang="ts" generics="D">
+	import { nanoid } from 'nanoid';
+	import { SelectItemAtom, type SelectItemAtomProps } from './bond.svelte';
+	import type { SelectItemProps } from './types';
+	import { SelectBond } from '../bond.svelte';
+	import { List } from '../../list';
+
+	const select = SelectBond.get();
+
+	if (!select) {
+		throw new Error('<SelectItem> must be used within a <Select>.');
+	}
+
+	let {
+		class: klass = '',
+		preset = 'select.item',
+		value = nanoid(),
+		data = undefined,
+		children = undefined,
+		onclick = undefined as ((ev: MouseEvent) => void) | undefined,
+		...restProps
+	}: SelectItemProps<D> = $props();
+
+	// Create reactive props object for the atom
+	const itemProps = $derived({
+		value,
+		data
+	} as SelectItemAtomProps<D>);
+
+	// Create the atom instance
+	const atom = new SelectItemAtom<D>(() => itemProps, select);
+
+	// Derived reactive properties
+	const isHighlighted = $derived(atom.isHighlighted);
+	const isSelected = $derived(atom.isSelected);
+
+	// Merge atom attrs with custom props
+	const itemAttrs = $derived({
+		...atom.spread,
+		...restProps
+	});
+
+	// Register item with select state and handle mounting
+	$effect.pre(() => {
+		select.state.registerItem(value, atom);
+
+		return () => {
+			select.state.unregisterItem(value);
+		};
+	});
+
+	function handleClick(ev: MouseEvent) {
+		(onclick as ((ev: MouseEvent) => void) | undefined)?.(ev);
+
+		if (ev.defaultPrevented) {
+			return;
+		}
+
+		ev.preventDefault();
+
+		atom.select();
+		select?.state?.close();
+	}
+</script>
+
+<List.Item
+	{preset}
+	class={[
+		'cursor-pointer',
+		isHighlighted && 'bg-foreground/5',
+		isSelected && 'bg-primary/5 hover:bg-primary/10 active:bg-primary/15',
+		'$preset',
+		klass
+	]
+		.filter(Boolean)
+		.join(' ')}
+	{...itemAttrs}
+	onclick={handleClick}
+>
+	{@render children?.({ selectItem: atom as unknown as import('./controller.svelte').SelectItemController<D> })}
+</List.Item>

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

@@ -0,0 +1,25 @@
+import type { SelectItemProps } from './types';
+declare function $$render<D>(): {
+    props: SelectItemProps<D>;
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+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>(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 SelectItem: $$IsomorphicComponent;
+type SelectItem<D> = InstanceType<typeof SelectItem<D>>;
+export default SelectItem;

package/dist/components/select/item/types.d.ts

@@ -0,0 +1,29 @@
+import type { Snippet } from 'svelte';
+import type { DropdownMenuItemProps } from '../../dropdown-menu/item/types';
+import type { SelectItemController } from './controller.svelte';
+export interface SelectItemProps<T = unknown> extends Omit<DropdownMenuItemProps, 'factory' | 'children' | 'preset'> {
+    /**
+     * Preset key for styling
+     * @default 'select.item'
+     */
+    preset?: string;
+    /**
+     * The value of the select item
+     * @default nanoid()
+     */
+    value?: string;
+    /**
+     * Custom data associated with the item
+     */
+    data?: T;
+    /**
+     * Factory function to create a custom SelectItemController instance
+     */
+    factory?: () => SelectItemController<T>;
+    /**
+     * Render prop for children
+     */
+    children?: Snippet<[{
+        selectItem: SelectItemController<T>;
+    }]>;
+}

package/dist/components/select/item/types.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,10 @@
+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 filterSelectData<T>(data: () => T[], predicate: Predicate<T>, initialQuery?: string): {
+    query: string;
+    readonly current: T[];
+};
+export {};

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

@@ -0,0 +1,15 @@
+export function filterSelectData(data, predicate, initialQuery = '') {
+    let query = $state(initialQuery);
+    const results = $derived(data().filter((...args) => predicate(query, ...args)));
+    return {
+        get query() {
+            return query;
+        },
+        set query(value) {
+            query = value;
+        },
+        get current() {
+            return results;
+        }
+    };
+}

package/dist/components/select/select-placeholder.svelte

@@ -0,0 +1,40 @@
+<script lang="ts" generics="T extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
+	import { SelectBond } from './bond.svelte';
+	import { HtmlAtom, type Base } from '../atom';
+
+	const bond = SelectBond.get();
+
+	let {
+		class: klass = '',
+		children = undefined,
+		onmount = undefined,
+		ondestroy = undefined,
+		animate = undefined,
+		enter = undefined,
+		exit = undefined,
+		initial = undefined,
+		...restProps
+	} = $props();
+
+	const hasValue = $derived(!!bond?.state.props.values?.length);
+
+	const placeholderProps = $derived({
+		...bond?.placeholder().spread,
+		...restProps
+	});
+</script>
+
+{#if !hasValue}
+	<HtmlAtom
+		{bond}
+		preset="select.placeholder"
+		class={[
+			'border-border absolute inset-0 flex h-full w-full items-center px-2 leading-1 opacity-50 outline-none',
+			'$preset',
+			klass
+		]}
+		{...placeholderProps}
+	>
+		{@render children?.()}
+	</HtmlAtom>
+{/if}

package/dist/components/select/select-placeholder.svelte.d.ts

@@ -0,0 +1,34 @@
+import { type Base } from '../atom';
+declare function $$render<T extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(): {
+    props: {
+        class?: string;
+        children?: 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 SelectPlaceholder: $$IsomorphicComponent;
+type SelectPlaceholder<T extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> = InstanceType<typeof SelectPlaceholder<T, B>>;
+export default SelectPlaceholder;

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

@@ -0,0 +1,80 @@
+<script lang="ts" generics="T">
+	import { defineProperty, defineState } from '../../utils';
+	import { SelectBond, SelectBondState, type SelectStateProps } from './bond.svelte';
+	import type { SelectRootProps } 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
+	}: SelectRootProps<T> = $props();
+
+	const bondProps = defineState<SelectStateProps>(
+		[
+			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 SelectBondState(() => props);
+		return new SelectBond(bondState);
+	}
+
+	export function getBond() {
+		return bond;
+	}
+
+	$effect(() => {
+		return () => {
+			bond.destroy();
+		};
+	});
+</script>
+
+{@render children?.({ select: bond, dropdown: bond })}

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

@@ -0,0 +1,30 @@
+import { SelectBond, SelectBondState, type SelectStateProps } from './bond.svelte';
+import type { SelectRootProps } from './types';
+declare function $$render<T>(): {
+    props: SelectRootProps<T>;
+    exports: {
+        getBond: () => SelectBond<SelectStateProps, SelectBondState<SelectStateProps, any>, import("./bond.svelte").SelectBondElements, unknown>;
+    };
+    bindings: "label" | "values" | "value" | "open" | "labels";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "label" | "values" | "value" | "open" | "labels";
+    exports(): {
+        getBond: () => SelectBond<SelectStateProps, SelectBondState<SelectStateProps, any>, import("./bond.svelte").SelectBondElements, unknown>;
+    };
+}
+interface $$IsomorphicComponent {
+    new <T>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const SelectRoot: $$IsomorphicComponent;
+type SelectRoot<T> = InstanceType<typeof SelectRoot<T>>;
+export default SelectRoot;

package/dist/components/select/select-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 { SelectBond } from './bond.svelte';
+	import type { SelectSelectionProps } from './types';
+	import { Chip } from '../chip';
+	import { HtmlAtom as Atom } from '../atom';
+
+	const bond = SelectBond.get();
+
+	if (!bond) {
+		throw new Error('SelectSelection must be used within a Select');
+	}
+
+	const isMultiple = $derived(bond.state.props.multiple);
+
+	let {
+		class: klass = '',
+		as = 'div' as T,
+		base = undefined,
+		selection,
+		children,
+		onclose,
+		...restProps
+	}: SelectSelectionProps<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="select.value"
+	class={[
+		'select-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/select/select-selection.svelte.d.ts

@@ -0,0 +1,26 @@
+import { type Base } from '../atom';
+import type { SelectSelectionProps } from './types';
+declare function $$render<T extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(): {
+    props: SelectSelectionProps<T, B>;
+    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 SelectSelection: $$IsomorphicComponent;
+type SelectSelection<T extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> = InstanceType<typeof SelectSelection<T, B>>;
+export default SelectSelection;