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

package/dist/components/chip/chip.svelte

@@ -1,41 +1,34 @@
-<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>
+<script lang="ts">
+	import { HtmlAtom } from '../atom';
+	import type { ChipProps } from './types';
+	import ChipCloseButton from './chip-close-button.svelte';
+
+	let {
+		class: klass = '',
+		preset = 'chip',
+		children = undefined,
+		icon = undefined,
+		closeButton = undefined,
+		onclose = undefined,
+		...restProps
+	}: ChipProps = $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?.()}
+
+	{#if closeButton}
+		{@render closeButton?.()}
+	{:else}
+		<ChipCloseButton {icon} onclick={onclose} />
+	{/if}
+</HtmlAtom>

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

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

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

@@ -1 +1,3 @@
 export { default as Chip } from './chip.svelte';
+export { default as ChipCloseButton } from './chip-close-button.svelte';
+export * from './types';

package/dist/components/chip/index.js

@@ -1 +1,3 @@
 export { default as Chip } from './chip.svelte';
+export { default as ChipCloseButton } from './chip-close-button.svelte';
+export * from './types';

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

@@ -1,11 +1,18 @@
-import type { HtmlAtomProps } from '../atom/types';
+import type { HtmlAtomProps, SnippetProps } from '../atom/types';
 import type { Snippet } from 'svelte';
-/**
- * Extend this interface to add custom button properties in your application.
- */
-export interface ChipExtendProps {
+export interface ChipSnippetProps extends SnippetProps {
 }
-export interface ChipProps extends HtmlAtomProps<'button'>, ChipExtendProps {
-    children?: Snippet<[]>;
-    icon?: Snippet<[]>;
+export type ChipChildren = Snippet<[ChipSnippetProps]>;
+export interface ChipProps extends HtmlAtomProps<'div', never, ChipChildren> {
+    /** Custom icon rendered inside the default close button */
+    icon?: Snippet<[ChipSnippetProps]> | undefined;
+    /** Fully replace the close button with a custom snippet */
+    closeButton?: Snippet<[ChipSnippetProps]> | undefined;
+    /** Called when the default close button is clicked */
+    onclose?: ((ev: MouseEvent) => void) | undefined;
+}
+export interface ChipCloseButtonProps extends HtmlAtomProps<'button', never, ChipChildren> {
+    /** Custom icon to render inside the close button */
+    icon?: Snippet<[ChipSnippetProps]> | undefined;
+    onclick?: ((ev: MouseEvent) => void) | undefined;
 }

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

@@ -1,4 +1,4 @@
-import { Bond, BondState, type BondStateProps } from '../../shared/bond.svelte';
+import { Bond, BondState, BondAtom, type BondStateProps } from '../../shared/bond.svelte';
 export type CollapsibleStateProps = BondStateProps & {
     open: boolean;
     disabled: boolean;
@@ -10,43 +10,53 @@ export type CollapsibleDomElements = {
     body: HTMLElement;
     indicator: HTMLElement;
 };
-export declare class CollapsibleBond extends Bond<CollapsibleStateProps, CollapsibleState, CollapsibleDomElements> {
-    #private;
-    static CONTEXT_KEY: string;
-    constructor(state: CollapsibleState);
-    get parent(): CollapsibleBond | undefined;
-    share(): this;
-    root(props?: Record<string, unknown>): {
-        'data-id': string;
-        'data-kind': string;
-        'data-atom': string;
-    };
-    header(props?: Record<string, unknown>): {
-        onclick: () => void;
-        onkeydown: (e: KeyboardEvent) => void;
+export declare class CollapsibleRootAtom extends BondAtom<CollapsibleBond> {
+    constructor(bond: CollapsibleBond);
+}
+export declare class CollapsibleHeaderAtom extends BondAtom<CollapsibleBond> {
+    constructor(bond: CollapsibleBond);
+    get attrs(): {
         'aria-disabled': string;
         'aria-expanded': string;
         'aria-controls': string;
         disabled: boolean | undefined;
         role: string | undefined;
         tabindex: number | undefined;
-        id: string;
-        'data-atom': string;
-        'data-kind': string;
     };
-    body(props?: Record<string, unknown>): {
+    get handlers(): {
+        onclick: () => void;
+        onkeydown: (e: KeyboardEvent) => void;
+    };
+}
+export declare class CollapsibleBodyAtom extends BondAtom<CollapsibleBond> {
+    constructor(bond: CollapsibleBond);
+    get attrs(): {
         'aria-labelledby': string;
         role: string;
         id: string;
-        'data-atom': string;
-        'data-kind': string;
         inert: boolean | undefined;
     };
-    indicator(props?: Record<string, unknown>): {
+}
+export declare class CollapsibleIndicatorAtom extends BondAtom<CollapsibleBond> {
+    constructor(bond: CollapsibleBond);
+    get attrs(): {
         role: string;
-        'data-atom': string;
-        'data-kind': string;
     };
+}
+export declare class CollapsibleBond extends Bond<CollapsibleStateProps, CollapsibleState, CollapsibleDomElements> {
+    #private;
+    static CONTEXT_KEY: string;
+    constructor(state: CollapsibleState);
+    get parent(): CollapsibleBond | undefined;
+    share(): this;
+    /** Handle for granular access to root attrs and attachment */
+    root(): CollapsibleRootAtom;
+    /** Handle for granular access to header attrs, handlers, and attachment */
+    header(): CollapsibleHeaderAtom;
+    /** Handle for granular access to body attrs and attachment */
+    body(): CollapsibleBodyAtom;
+    /** Handle for granular access to indicator attrs and attachment */
+    indicator(): CollapsibleIndicatorAtom;
     static get(): CollapsibleBond | undefined;
     static set(bond: CollapsibleBond): CollapsibleBond;
 }

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

@@ -1,88 +1,101 @@
-import { createAttachmentKey } from 'svelte/attachments';
-import { getContext, setContext } from 'svelte';
-import { Bond, BondState } from '../../shared/bond.svelte';
-import { isBrowser } from '../../utils/dom.svelte.js';
-export class CollapsibleBond extends Bond {
-    static CONTEXT_KEY = '@atoms/context/collapsible';
-    #parent;
-    constructor(state) {
-        super(state);
-        this.#parent = CollapsibleBond.get();
-    }
-    get parent() {
-        return this.#parent;
-    }
-    share() {
-        return CollapsibleBond.set(this);
+import { getContext, setContext, untrack } from 'svelte';
+import { Bond, BondState, BondAtom } from '../../shared/bond.svelte';
+import { isBrowser } from '../../utils/dom.svelte';
+export class CollapsibleRootAtom extends BondAtom {
+    constructor(bond) {
+        super(bond, 'root');
     }
-    root(props = {}) {
-        return {
-            'data-id': this.id,
-            'data-kind': 'collapsible',
-            'data-atom': this.id ?? '',
-            ...props,
-            [createAttachmentKey()]: (node) => {
-                this.elements.root = node;
-            }
-        };
+}
+export class CollapsibleHeaderAtom extends BondAtom {
+    constructor(bond) {
+        super(bond, 'header');
     }
-    header(props = {}) {
-        const isDisabled = this.state?.props?.disabled ?? false;
-        const isOpen = this.state?.props?.open ?? false;
-        const isButton = isBrowser() && this.elements.header instanceof HTMLButtonElement;
+    get attrs() {
+        const isDisabled = untrack(() => this.bond.state?.props)?.disabled ?? false;
+        const isOpen = untrack(() => this.bond.state?.props)?.open ?? false;
+        const isButton = isBrowser() && this.element instanceof HTMLButtonElement;
         return {
+            ...super.attrs,
             'aria-disabled': isDisabled ? 'true' : 'false',
             'aria-expanded': isOpen ? 'true' : 'false',
-            'aria-controls': `collapsible-body-${this.id}`,
+            'aria-controls': `collapsible-body-${this.bond.id}`,
             disabled: isButton ? isDisabled : undefined,
             role: isButton ? undefined : 'button',
-            tabindex: isButton ? undefined : isDisabled ? -1 : 0,
-            id: `collapsible-header-${this.id}`,
-            'data-atom': this.id ?? '',
-            'data-kind': 'collapsible-header',
-            ...props,
+            tabindex: isButton ? undefined : isDisabled ? -1 : 0
+        };
+    }
+    get handlers() {
+        const isDisabled = untrack(() => this.bond.state?.props)?.disabled ?? false;
+        return {
             onclick: () => {
                 if (!isDisabled) {
-                    this.state.toggle();
+                    this.bond.state.toggle();
                 }
             },
             onkeydown: (e) => {
                 if (!isDisabled && (e.key === 'Enter' || e.key === ' ')) {
                     e.preventDefault();
-                    this.state.toggle();
+                    this.bond.state.toggle();
                 }
-            },
-            [createAttachmentKey()]: (node) => {
-                this.elements.header = node;
             }
         };
     }
-    body(props = {}) {
-        const isOpen = this.state?.props?.open ?? false;
+}
+export class CollapsibleBodyAtom extends BondAtom {
+    constructor(bond) {
+        super(bond, 'body');
+    }
+    get attrs() {
+        const isOpen = untrack(() => this.bond.state?.props)?.open ?? false;
         return {
-            'aria-labelledby': `collapsible-header-${this.id}`,
+            ...super.attrs,
+            'aria-labelledby': `collapsible-header-${this.bond.id}`,
             role: 'region',
-            id: `collapsible-body-${this.id}`,
-            'data-atom': this.id ?? '',
-            'data-kind': 'collapsible-body',
-            inert: isOpen ? undefined : true,
-            ...props,
-            [createAttachmentKey()]: (node) => {
-                this.elements.body = node;
-            }
+            id: `collapsible-body-${this.bond.id}`,
+            inert: isOpen ? undefined : true
         };
     }
-    indicator(props = {}) {
+}
+export class CollapsibleIndicatorAtom extends BondAtom {
+    constructor(bond) {
+        super(bond, 'indicator');
+    }
+    get attrs() {
         return {
-            role: 'icon',
-            'data-atom': this.id ?? '',
-            'data-kind': 'collapsible-indicator',
-            ...props,
-            [createAttachmentKey()]: (node) => {
-                this.elements.indicator = node;
-            }
+            ...super.attrs,
+            role: 'icon'
         };
     }
+}
+export class CollapsibleBond extends Bond {
+    static CONTEXT_KEY = '@atoms/context/collapsible';
+    #parent;
+    constructor(state) {
+        super(state, 'collapsible');
+        this.#parent = CollapsibleBond.get();
+    }
+    get parent() {
+        return this.#parent;
+    }
+    share() {
+        return CollapsibleBond.set(this);
+    }
+    /** Handle for granular access to root attrs and attachment */
+    root() {
+        return this.atom('root', () => new CollapsibleRootAtom(this));
+    }
+    /** Handle for granular access to header attrs, handlers, and attachment */
+    header() {
+        return this.atom('header', () => new CollapsibleHeaderAtom(this));
+    }
+    /** Handle for granular access to body attrs and attachment */
+    body() {
+        return this.atom('body', () => new CollapsibleBodyAtom(this));
+    }
+    /** Handle for granular access to indicator attrs and attachment */
+    indicator() {
+        return this.atom('indicator', () => new CollapsibleIndicatorAtom(this));
+    }
     static get() {
         return getContext(CollapsibleBond.CONTEXT_KEY);
     }

package/dist/components/collapsible/collapsible-body.svelte

@@ -9,17 +9,15 @@
 	let {
 		class: klass = '',
 		children = undefined,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = animateCollapsibleBody(),
-		enter = undefined,
-		exit = undefined,
-		initial = animateCollapsibleBody({ duration: 0 }),
+		fallback = {
+			animate: animateCollapsibleBody(),
+			initial: animateCollapsibleBody({ duration: 0 })
+		},
 		...restProps
 	}: CollapsibleBodyProps<E, B> = $props();
 
 	const bodyProps = $derived({
-		...bond?.body(),
+		...bond?.body().spread,
 		...restProps
 	});
 </script>
@@ -28,12 +26,7 @@
 	{bond}
 	preset="collapsible.body"
 	class={['border-border', '$preset', klass]}
-	onmount={onmount?.bind(bond.state)}
-	ondestroy={ondestroy?.bind(bond.state)}
-	animate={animate?.bind(bond.state)}
-	enter={enter?.bind(bond.state)}
-	exit={exit?.bind(bond.state)}
-	initial={initial?.bind(bond.state)}
+	{fallback}
 	{...bodyProps}
 >
 	{@render children?.({ collapsible: bond })}

package/dist/components/collapsible/collapsible-header.svelte

@@ -8,17 +8,11 @@
 	let {
 		class: klass = '',
 		children = undefined,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = undefined,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
 		...restProps
 	}: CollapsibleHeaderProps<E, B> = $props();
 
 	const collapsibleProps = $derived({
-		...bond?.header(),
+		...bond?.header().spread,
 		...restProps
 	});
 </script>
@@ -27,12 +21,6 @@
 	{bond}
 	preset="collapsible.header"
 	class={['border-border flex cursor-pointer items-center gap-2', '$preset', klass]}
-	onmount={onmount?.bind(bond.state)}
-	ondestroy={ondestroy?.bind(bond.state)}
-	animate={animate?.bind(bond.state)}
-	enter={enter?.bind(bond.state)}
-	exit={exit?.bind(bond.state)}
-	initial={initial?.bind(bond.state)}
 	{...collapsibleProps}
 >
 	{@render children?.({ collapsible: bond })}

package/dist/components/collapsible/collapsible-indicator.svelte

@@ -12,16 +12,10 @@
 	let {
 		class: klass = '',
 		children = undefined,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = _animate,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
 		...restProps
 	}: CollapsibleIndicatorProps<E, B> = $props();
 	const indicatorProps = $derived({
-		...bond?.indicator(),
+		...bond?.indicator().spread,
 		...restProps
 	});
 
@@ -34,12 +28,6 @@
 	{bond}
 	preset="collapsible.indicator"
 	class={['border-border flex size-4 items-center justify-center', '$preset', klass]}
-	onmount={onmount?.bind(bond.state)}
-	ondestroy={ondestroy?.bind(bond.state)}
-	animate={animate?.bind(bond.state)}
-	enter={enter?.bind(bond.state)}
-	exit={exit?.bind(bond.state)}
-	initial={initial?.bind(bond.state)}
 	{...indicatorProps}
 >
 	{#if children}

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

@@ -1,67 +1,55 @@
-<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
-	import { nanoid } from 'nanoid';
-	import { defineProperty, defineState } from '../../utils';
-	import { HtmlAtom, type Base } from '../atom';
-	import { CollapsibleBond, CollapsibleState, type CollapsibleStateProps } from './bond.svelte';
-	import type { CollapsibleRootProps } from './types';
-
-	let {
-		open = $bindable(false),
-		class: klass = '',
-		value = nanoid(),
-		data = undefined,
-		disabled = false,
-		factory = _factory,
-		children = undefined,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = undefined,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
-		...restProps
-	}: CollapsibleRootProps<E, B> = $props();
-
-	const bondProps = defineState<CollapsibleStateProps>([
-		defineProperty(
-			'open',
-			() => open,
-			(v) => (open = v)
-		),
-		defineProperty('data', () => data),
-		defineProperty('disabled', () => disabled),
-		defineProperty('value', () => value),
-		defineProperty('rest', () => restProps)
-	]);
-
-	const bond = _factory(bondProps).share();
-
-	const rootProps = $derived({
-		...bond.root(),
-		...restProps
-	});
-
-	function _factory(props: typeof bondProps) {
-		const bondState = new CollapsibleState(() => props);
-		return new CollapsibleBond(bondState).share();
-	}
-
-	export function getBond() {
-		return bond;
-	}
-</script>
-
-<HtmlAtom
-	{bond}
-	preset="collapsible"
-	class={['border-border flex w-full flex-col overflow-hidden', '$preset', klass]}
-	onmount={onmount?.bind(bond.state)}
-	ondestroy={ondestroy?.bind(bond.state)}
-	animate={animate?.bind(bond.state)}
-	enter={enter?.bind(bond.state)}
-	exit={exit?.bind(bond.state)}
-	initial={initial?.bind(bond.state)}
-	{...rootProps}
->
-	{@render children?.({ collapsible: bond })}
-</HtmlAtom>
+<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
+	import { nanoid } from 'nanoid';
+	import { defineProperty, defineState } from '../../utils';
+	import { HtmlAtom, type Base } from '../atom';
+	import { CollapsibleBond, CollapsibleState, type CollapsibleStateProps } from './bond.svelte';
+	import type { CollapsibleRootProps } from './types';
+
+	let {
+		open = $bindable(false),
+		class: klass = '',
+		value = nanoid(),
+		data = undefined,
+		disabled = false,
+		factory = _factory,
+		children = undefined,
+		...restProps
+	}: CollapsibleRootProps<E, B> = $props();
+
+	const bondProps = defineState<CollapsibleStateProps>([
+		defineProperty(
+			'open',
+			() => open,
+			(v) => (open = v)
+		),
+		defineProperty('data', () => data),
+		defineProperty('disabled', () => disabled),
+		defineProperty('value', () => value),
+		defineProperty('rest', () => restProps)
+	]);
+
+	const bond = _factory(bondProps).share();
+
+	const rootProps = $derived({
+		...bond.root().spread,
+		...restProps
+	});
+
+	function _factory(props: typeof bondProps) {
+		const bondState = new CollapsibleState(() => props);
+		return new CollapsibleBond(bondState).share();
+	}
+
+	export function getBond() {
+		return bond;
+	}
+</script>
+
+<HtmlAtom
+	{bond}
+	preset="collapsible"
+	class={['border-border flex w-full flex-col overflow-hidden', '$preset', klass]}
+	{...rootProps}
+>
+	{@render children?.({ collapsible: bond })}
+</HtmlAtom>

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

@@ -1,6 +1,6 @@
 import type { Snippet } from 'svelte';
-import type { HtmlAtomProps, Base } from '../atom';
-import type { Factory, Override } from '../../types';
+import type { HtmlAtomProps, Base, SnippetProps } from '../atom';
+import type { Factory } from '../../types';
 import type { CollapsibleBond } from './bond.svelte';
 /**
  * Extend this interface to add custom collapsible root properties in your application.
@@ -22,32 +22,20 @@ export interface CollapsibleBodyExtendProps {
  */
 export interface CollapsibleIndicatorExtendProps {
 }
-export type CollapsibleRootProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> = Override<HtmlAtomProps<E, B>, {
-    children?: Snippet<[{
-        collapsible: CollapsibleBond;
-    }]>;
-}> & CollapsibleRootExtendProps & {
+export interface CollapsibleSnippetProps extends SnippetProps {
+    collapsible: CollapsibleBond;
+}
+export type CollapsibleChildren = Snippet<[CollapsibleSnippetProps]>;
+export type CollapsibleRootProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> = HtmlAtomProps<E, B, CollapsibleChildren> & CollapsibleRootExtendProps & {
     open?: boolean;
     value?: string;
     data?: any;
     disabled?: boolean;
     factory?: Factory<CollapsibleBond>;
 };
-export type CollapsibleHeaderProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> = Override<HtmlAtomProps<E, B>, {
-    children?: Snippet<[{
-        collapsible?: CollapsibleBond;
-    }]>;
-}> & CollapsibleHeaderExtendProps;
-export type CollapsibleBodyProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> = Override<HtmlAtomProps<E, B>, {
-    children?: Snippet<[{
-        collapsible?: CollapsibleBond;
-    }]>;
-}> & CollapsibleBodyExtendProps;
-export type CollapsibleIndicatorProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> = Override<HtmlAtomProps<E, B>, {
-    children?: Snippet<[{
-        collapsible?: CollapsibleBond;
-    }]>;
-}> & CollapsibleIndicatorExtendProps;
+export type CollapsibleHeaderProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> = HtmlAtomProps<E, B, CollapsibleChildren> & CollapsibleHeaderExtendProps;
+export type CollapsibleBodyProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> = HtmlAtomProps<E, B, CollapsibleChildren> & CollapsibleBodyExtendProps;
+export type CollapsibleIndicatorProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> = HtmlAtomProps<E, B, CollapsibleChildren> & CollapsibleIndicatorExtendProps;
 /**
  * @deprecated Use CollapsibleRootExtendProps instead
  */