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

package/dist/components/atom/html-atom.svelte

@@ -1,93 +1,95 @@
-<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
-	import type { HTMLAttributes } from 'svelte/elements';
-	import type { Base, HtmlAtomProps, SnippetBase } from './types';
-	import { RootBond } from '../root';
-	import { HtmlElement } from '../element';
-	import { getPreset } from '../../context';
-	import type { PresetModuleName } from '../../context/preset.svelte';
-	import SnippetRenderer from './snippet-renderer.svelte';
-	import type { Component } from 'svelte';
-	import type { ClassValue } from '../../utils';
-	import {
-		resolvePreset,
-		resolveLocalVariants,
-		mergeVariants,
-		mergeClassesWithPreset,
-		extractRestProps,
-		isSnippetBase
-	} from './utils';
-
-	type Element = HTMLElementTagNameMap[E];
-
-	const rootBond = RootBond.get();
-
-	let {
-		class: klass = '',
-		as = 'div',
-		base = undefined,
-		preset: presetKey = undefined,
-		bond = undefined,
-		variants = undefined,
-		children: childrenProp = undefined,
-		...restProps
-	}: HtmlAtomProps<E, B> & Omit<HTMLAttributes<Element>, 'children'> = $props();
-
-	// Memoize preset resolution - only recompute when presetKey or bond changes
-	const preset = $derived.by(() => {
-		if (!presetKey) return undefined;
-		const result = getPreset(presetKey as PresetModuleName)?.apply?.(bond, [bond]);
-		return resolvePreset(result);
-	});
-
-	const presetVariantsProps = $derived(preset?.variants);
-
-	// Resolve local variants - either VariantDefinition or function
-	const localVariants = $derived(resolveLocalVariants(variants, bond, restProps));
-
-	// Merge preset variants with local variants
-	// Memoized to avoid recomputation when inputs haven't changed
-	const mergedVariants = $derived.by(() => {
-		return mergeVariants(
-			presetVariantsProps,
-			preset?.class,
-			preset?.compounds,
-			preset?.defaults,
-			localVariants,
-			bond,
-			restProps
-		);
-	});
-
-	const _klass = $derived(
-		mergeClassesWithPreset(klass, preset?.class, mergedVariants?.class as ClassValue)
-	);
-
-	const _base = $derived(base ?? preset?.base);
-	const _as = $derived(as ?? preset?.as);
-	const _restProps = $derived(extractRestProps(preset, mergedVariants, restProps));
-
-	const isSnippet = $derived(isSnippetBase(_base));
-
-	const snippet = $derived(_base as SnippetBase);
-
-	const atom = rootBond?.state?.props?.renderers?.html ?? HtmlElement;
-
-	const renderer = $derived.by(() => {
-		if (isSnippet)
-			return {
-				component: SnippetRenderer,
-				props: { snippet: snippet, class: _klass, as: _as, children: childrenProp, ..._restProps }
-			};
-
-		return {
-			component: base ?? atom,
-			props: { class: _klass, as: _as, ..._restProps }
-		};
-	}) as { component: Component; props: Record<string, any> };
-</script>
-
-<renderer.component {...renderer.props}>
-	{#snippet children(args: any)}
-		{@render (childrenProp as any)?.(args)}
-	{/snippet}
-</renderer.component>
+<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import type { Base, HtmlAtomProps, SnippetBase } from './types';
+	import { RootBond } from '../root';
+	import { HtmlElement } from '../element';
+	import { getPreset } from '../../context';
+	import type { PresetModuleName } from '../../context/preset.svelte';
+	import SnippetRenderer from './snippet-renderer.svelte';
+	import type { Component } from 'svelte';
+	import type { ClassValue } from '../../utils';
+	import {
+		resolvePreset,
+		resolveLocalVariants,
+		mergeVariants,
+		mergeClassesWithPreset,
+		extractRestProps,
+		isSnippetBase
+	} from './utils';
+
+	type Element = HTMLElementTagNameMap[E];
+
+	type Props =  Omit<HTMLAttributes<Element>, 'children'> & HtmlAtomProps<E, B>;
+
+	const rootBond = RootBond.get();
+
+	let {
+		class: klass = '',
+		as = 'div',
+		base = undefined,
+		preset: presetKey = undefined,
+		bond = undefined,
+		variants = undefined,
+		children: childrenProp = undefined,
+		...restProps
+	}: Props = $props();
+
+	// Memoize preset resolution - only recompute when presetKey or bond changes
+	const preset = $derived.by(() => {
+		if (!presetKey) return undefined;
+		const result = getPreset(presetKey as PresetModuleName)?.apply?.(bond, [bond]);
+		return resolvePreset(result);
+	});
+
+	const presetVariantsProps = $derived(preset?.variants);
+
+	// Resolve local variants - either VariantDefinition or function
+	const localVariants = $derived(resolveLocalVariants(variants, bond, restProps));
+
+	// Merge preset variants with local variants
+	// Memoized to avoid recomputation when inputs haven't changed
+	const mergedVariants = $derived.by(() => {
+		return mergeVariants(
+			presetVariantsProps,
+			preset?.class,
+			preset?.compounds,
+			preset?.defaults,
+			localVariants,
+			bond,
+			restProps
+		);
+	});
+
+	const _klass = $derived(
+		mergeClassesWithPreset(klass, preset?.class, mergedVariants?.class as ClassValue)
+	);
+
+	const _base = $derived(base ?? preset?.base);
+	const _as = $derived(as ?? preset?.as);
+	const _restProps = $derived(extractRestProps(preset, mergedVariants, restProps));
+
+	const isSnippet = $derived(isSnippetBase(_base));
+
+	const snippet = $derived(_base as SnippetBase);
+
+	const atom = rootBond?.state?.props?.renderers?.html ?? HtmlElement;
+
+	const renderer = $derived.by(() => {
+		if (isSnippet)
+			return {
+				component: SnippetRenderer,
+				props: { snippet: snippet, class: _klass, as: _as, children: childrenProp, ..._restProps }
+			};
+
+		return {
+			component: _base ?? atom,
+			props: { class: _klass, as: _as, ..._restProps }
+		};
+	}) as { component: Component; props: Record<string, any> };
+</script>
+
+<renderer.component {...renderer.props}>
+	{#snippet children(args: any)}
+		{@render (childrenProp as any)?.(args)}
+	{/snippet}
+</renderer.component>

package/dist/components/atom/html-atom.svelte.d.ts

@@ -1,7 +1,7 @@
 import type { HTMLAttributes } from 'svelte/elements';
 import type { Base, HtmlAtomProps } from './types';
 declare function $$render<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(): {
-    props: HtmlAtomProps<E, B> & Omit<HTMLAttributes<HTMLElementTagNameMap[E]>, "children">;
+    props: Omit<HTMLAttributes<HTMLElementTagNameMap[E]>, "children"> & HtmlAtomProps<E, B>;
     exports: {};
     bindings: "";
     slots: {};

package/dist/components/button/button.svelte

@@ -1,31 +1,31 @@
-<script lang="ts">
-	import type { HTMLAttributes } from 'svelte/elements';
-	import type { ButtonProps } from './types';
-	import { HtmlAtom } from '../atom';
-
-	let {
-		class: klass = '',
-		type = 'button',
-		preset = 'button',
-		children = undefined,
-		...restProps
-	}: ButtonProps & HTMLAttributes<HTMLButtonElement> = $props();
-
-	const buttonProps = $derived({
-		...restProps,
-		type
-	});
-</script>
-
-<HtmlAtom
-	{preset}
-	as="button"
-	class={[
-		'button text-primary-foreground bg-primary border-border hover:bg-primary/95 active:bg-primary/90 disabled:bg-muted disabled:text-muted-foreground w-fit cursor-pointer rounded-md px-3 py-2 transition-colors duration-200',
-		'$preset',
-		klass
-	]}
-	{...buttonProps}
->
-	{@render children?.()}
-</HtmlAtom>
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import type { ButtonProps } from './types';
+	import { HtmlAtom } from '../atom';
+
+	let {
+		class: klass = '',
+		type = 'button',
+		preset = 'button',
+		children = undefined,
+		...restProps
+	}: ButtonProps & HTMLAttributes<HTMLButtonElement> = $props();
+
+	const buttonProps = $derived({
+		...restProps,
+		type
+	});
+</script>
+
+<HtmlAtom
+	{preset}
+	as="button"
+	class={[
+		'button text-primary-foreground bg-primary border-border hover:bg-primary/95 active:bg-primary/90 disabled:bg-muted disabled:text-muted-foreground w-fit cursor-pointer rounded-md px-3 py-2 transition-colors duration-200',
+		'$preset',
+		klass
+	]}
+	{...buttonProps}
+>
+	{@render children?.()}
+</HtmlAtom>

package/dist/components/chip/chip.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { HtmlAtom } from '../atom';
+	import { Icon } from '../icon';
+	import type { ChipProps } from './types';
+	import CloseIcon from '../../icons/icon-close.svelte';
+
+	let {
+		class: klass = '',
+		preset = 'chip',
+		children = undefined,
+		icon = undefined,
+		onclose = undefined,
+		...restProps
+	}: ChipProps & HTMLAttributes<HTMLButtonElement> = $props();
+</script>
+
+<HtmlAtom
+	{preset}
+	as="div"
+	class={[
+		'chip text-foreground bg-foreground/5 border-border hover:bg-foreground/10 active:bg-foreground/15 disabled:bg-muted disabled:text-muted-foreground w-fit cursor-pointer rounded-md px-3 py-1 transition-colors duration-100',
+		'$preset',
+		klass
+	]}
+	{...restProps}
+>
+	{@render children?.()}
+
+	<button
+		class="bg-foreground/0 hover:bg-foreground/5 active:bg-foreground/10 inline-flex aspect-square h-full cursor-pointer items-center justify-center rounded-xs p-0.5"
+		type="button"
+		onclick={onclose}
+	>
+		{#if icon}
+			{@render icon?.()}
+		{:else}
+			<Icon src={CloseIcon} class="h-full" />
+		{/if}
+	</button>
+</HtmlAtom>

package/dist/components/chip/chip.svelte.d.ts

@@ -0,0 +1,6 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import type { ChipProps } from './types';
+type $$ComponentProps = ChipProps & HTMLAttributes<HTMLButtonElement>;
+declare const Chip: import("svelte").Component<$$ComponentProps, {}, "">;
+type Chip = ReturnType<typeof Chip>;
+export default Chip;

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

@@ -0,0 +1 @@
+export { default as Chip } from './chip.svelte';

package/dist/components/chip/index.js

@@ -0,0 +1 @@
+export { default as Chip } from './chip.svelte';

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

@@ -0,0 +1,11 @@
+import type { HtmlAtomProps } from '../atom/types';
+import type { Snippet } from 'svelte';
+/**
+ * Extend this interface to add custom button properties in your application.
+ */
+export interface ChipExtendProps {
+}
+export interface ChipProps extends HtmlAtomProps<'button'>, ChipExtendProps {
+    children?: Snippet<[]>;
+    icon?: Snippet<[]>;
+}

package/dist/components/chip/types.js

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

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

@@ -6,4 +6,5 @@ export { default as Item } from './combobox-item.svelte';
  */
 export { default as Input } from './combobox-control.svelte';
 export { default as Control } from './combobox-control.svelte';
-export { Arrow, Indicator, Content, List, Group, Divider, Title } from '../dropdown/atoms';
+export { default as Selections } from './combobox-selections.svelte';
+export { Arrow, Indicator, Content, List, Group, Divider, Title, Selection, Placeholder } from '../dropdown/atoms';

package/dist/components/combobox/atoms.js

@@ -6,4 +6,5 @@ export { default as Item } from './combobox-item.svelte';
  */
 export { default as Input } from './combobox-control.svelte';
 export { default as Control } from './combobox-control.svelte';
-export { Arrow, Indicator, Content, List, Group, Divider, Title } from '../dropdown/atoms';
+export { default as Selections } from './combobox-selections.svelte';
+export { Arrow, Indicator, Content, List, Group, Divider, Title, Selection, Placeholder } from '../dropdown/atoms';

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

@@ -1,15 +1,12 @@
-import { type PopoverDomElements, type PopoverStateProps } from '../popover/bond.svelte';
-import { DropdownBond, DropdownBondState } from '../dropdown/bond.svelte';
-export type ComboboxBondProps = PopoverStateProps & {
-    value?: string;
-    query?: string;
-    text?: string;
-};
+import { type PopoverDomElements } from '../popover/bond.svelte';
+import { DropdownBond, DropdownBondState, type DropdownStateProps } from '../dropdown/bond.svelte';
+import type { ComboboxSelection } from './types';
+export type ComboboxBondProps = DropdownStateProps & {};
 export type ComboboxBondElements = PopoverDomElements & {
     input: HTMLInputElement;
 };
-export declare class ComboboxBond<T = unknown> extends DropdownBond<ComboboxBondProps, ComboboxBondState<T>, ComboboxBondElements> {
-    constructor(s: ComboboxBondState<T>);
+export declare class ComboboxBond extends DropdownBond<ComboboxBondProps, ComboboxBondState, ComboboxBondElements> {
+    constructor(s: ComboboxBondState);
     control(): {
         [x: symbol]: (node: HTMLInputElement) => void;
         'data-atom': string;
@@ -21,12 +18,18 @@ export declare class ComboboxBond<T = unknown> extends DropdownBond<ComboboxBond
         'aria-activedescendant': string | undefined;
         'aria-disabled': boolean;
         tabindex: number;
-        oninput: (ev: Event) => void;
+        oninput: () => void;
         onkeydown: (ev: KeyboardEvent) => void;
     };
-    static get: typeof DropdownBond.get;
-    static set: typeof DropdownBond.set;
+    static get(): ComboboxBond | undefined;
+    static set(context: ComboboxBond): ComboboxBond;
 }
-export declare class ComboboxBondState<T> extends DropdownBondState<ComboboxBondProps> {
+export declare class ComboboxBondState extends DropdownBondState<ComboboxBondProps> {
+    #private;
     constructor(props: () => ComboboxBondProps);
+    addSelection(label: string): void;
+    deleteSelection(id: string): void;
+    get userSelections(): ComboboxSelection[];
+    get allSelections(): ComboboxSelection[];
+    protected updateLabels(): void;
 }

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

@@ -1,11 +1,14 @@
 import {} from '../popover/bond.svelte';
 import { DropdownBond, DropdownBondState } from '../dropdown/bond.svelte';
 import { createAttachmentKey } from 'svelte/attachments';
+import { SvelteMap } from 'svelte/reactivity';
+import { nanoid } from 'nanoid';
 export class ComboboxBond extends DropdownBond {
     constructor(s) {
         super(s);
     }
     control() {
+        const isMultiselect = this.state.props.multiple ?? false;
         return {
             'data-atom': `trigger-${this.id}`,
             'data-kind': 'combobox-input',
@@ -13,35 +16,76 @@ export class ComboboxBond extends DropdownBond {
             'aria-autocomplete': 'list',
             'aria-expanded': this.state.props.open ?? false,
             'aria-controls': `overlay-${this.id}`,
-            'aria-activedescendant': this.state.selectedItems.at(0)?.id
-                ? `item-${this.state.selectedItems.at(0)?.id}`
+            'aria-activedescendant': this.state.selections.at(0)?.id
+                ? `item-${this.state.selections.at(0)?.id}`
                 : undefined,
             'aria-disabled': this.state.props.disabled ?? false,
             tabindex: this.state.props.disabled ? -1 : 0,
-            oninput: (ev) => {
-                const target = ev.target;
-                this.state.props.query = target.value;
+            oninput: () => {
+                if (!isMultiselect) {
+                    this.state.props.values = [];
+                }
             },
             onkeydown: (ev) => {
                 if (this.state.props.disabled)
                     return;
+                if (ev.key === 'Enter' && isMultiselect) {
+                    const currentTarget = ev.currentTarget;
+                    const value = currentTarget.value.trim();
+                    if (value !== '') {
+                        this.state.addSelection(value);
+                    }
+                }
             },
             [createAttachmentKey()]: (node) => {
                 this.elements.input = node;
             }
         };
     }
-    static get = DropdownBond.get;
-    static set = DropdownBond.set;
+    static get() {
+        return super.get();
+    }
+    static set(context) {
+        return super.set(context);
+    }
 }
 export class ComboboxBondState extends DropdownBondState {
-    // #items: Map<string, DropdownItemAtom<T>> = new SvelteMap();
-    // #selectedItems = $derived(
-    // 	this.props.values?.map((id) => this.#items.get(id)).filter(Boolean) ?? []
-    // ) as DropdownItemAtom<T>[];
-    // #value: string = $state('');
-    // #query: string = $state('');
+    #userSelections = new SvelteMap();
     constructor(props) {
         super(props);
     }
+    addSelection(label) {
+        const id = nanoid();
+        // eslint-disable-next-line svelte/prefer-svelte-reactivity
+        const createdAt = new Date();
+        this.#userSelections.set(id, {
+            id,
+            label,
+            createdAt,
+            unselect: () => this.deleteSelection(id)
+        });
+        this.updateLabels();
+    }
+    deleteSelection(id) {
+        this.#userSelections.delete(id);
+        this.updateLabels();
+    }
+    get userSelections() {
+        return Array.from(this.#userSelections.values());
+    }
+    get allSelections() {
+        const itemSelections = this.selections.map((controller) => ({
+            id: controller.id,
+            label: controller.label,
+            createdAt: controller.createdAt, // default date for items from the list
+            controller,
+            unselect: () => this.unselect([controller.id])
+        }));
+        return [...itemSelections, ...this.userSelections].sort((a, b) => a.createdAt.getTime() - b.createdAt.getTime());
+    }
+    updateLabels() {
+        const labels = this.allSelections.map((s) => s.label);
+        this.props.labels = labels;
+        this.props.label = labels[0] ?? '';
+    }
 }

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

@@ -1,15 +1,17 @@
 <script lang="ts">
-	import { onMount } from 'svelte';
+	import { onMount, untrack } from 'svelte';
 	import { Input } from '../input';
 	import { ComboboxBond } from './bond.svelte';
+	import type { ComboboxControlProps } from './types';
 
-	const bond = ComboboxBond.get() as ComboboxBond<{}>;
+	const bond = ComboboxBond.get() as ComboboxBond;
 
 	if (!bond) {
 		throw new Error('Combobox atom was not found');
 	}
 
 	let {
+		value = $bindable(),
 		class: klass = '',
 		children = undefined,
 		onmount = undefined,
@@ -19,7 +21,7 @@
 		exit = undefined,
 		initial = undefined,
 		...restProps
-	} = $props();
+	}: ComboboxControlProps = $props();
 
 	let isMounted = $state(false);
 
@@ -27,18 +29,31 @@
 		isMounted = true;
 	});
 
-	const isMultiple = $derived(bond?.state.props?.multiple ?? false);
-	const selectedText = $derived(
-		isMounted || isMultiple ? (bond.state.selectedItems.at(0)?.text ?? '') : ''
-	);
+	const isMultiselect = untrack(() => bond.state.props.multiple);
 
-	const value = $derived(
-		bond?.state.props?.query ?? (bond?.state.props?.text || selectedText || '')
-	);
+	$effect(() => {
+		bond.state.allSelections;
+
+		if (isMultiselect) {
+			value = '';
+		} else {
+			value = untrack(() => bond.state.props.label);
+		}
+	});
+
+	const comboboxProps = $derived({
+		...bond.control(),
+		...restProps
+	});
 </script>
 
 <Input.Control
-	{value}
+	bind:value={
+		() => value,
+		(v) => {
+			value = v;
+		}
+	}
 	preset="combobox.control"
 	class={['border-border flex-1 py-1', '$preset', klass]}
 	enter={enter?.bind(bond.state)}
@@ -47,6 +62,5 @@
 	animate={animate?.bind(bond.state)}
 	onmount={onmount?.bind(bond.state)}
 	ondestroy={ondestroy?.bind(bond.state)}
-	{...bond.control()}
-	{...restProps}
+	{...comboboxProps}
 />

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

@@ -1,12 +1,4 @@
-declare const ComboboxControl: import("svelte").Component<{
-    class?: string;
-    children?: any;
-    onmount?: any;
-    ondestroy?: any;
-    animate?: any;
-    enter?: any;
-    exit?: any;
-    initial?: any;
-} & Record<string, any>, {}, "">;
+import type { ComboboxControlProps } from './types';
+declare const ComboboxControl: import("svelte").Component<ComboboxControlProps, {}, "value">;
 type ComboboxControl = ReturnType<typeof ComboboxControl>;
 export default ComboboxControl;

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

@@ -5,7 +5,7 @@
 
 	import { on } from '../../attachments';
 
-	const bond = ComboboxBond.get() as ComboboxBond<{}>;
+	const bond = ComboboxBond.get() as ComboboxBond;
 
 	if (!bond) {
 		throw new Error('Combobox atom was not found');
@@ -38,9 +38,9 @@
 				| undefined;
 
 			// Set selected item text
-			bond.state.props.text = textElement?.innerText ?? '';
+			bond.state.props.label = textElement?.innerText ?? '';
 			// Clear input query
-			bond.state.props.query = '';
+			bond.state.props.label = '';
 
 			item?.toggle();