@svelte-atoms/core 1.0.0-alpha.14

package/dist/components/list/list-title.svelte.d.ts

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

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

@@ -0,0 +1,3 @@
+export { Root, Trigger, Arrow, Indicator } from '../popover/atoms';
+export { default as List } from './menu-list.svelte';
+export { default as Item } from './menu-item.svelte';

package/dist/components/menu/atoms.js

@@ -0,0 +1,3 @@
+export { Root, Trigger, Arrow, Indicator } from '../popover/atoms';
+export { default as List } from './menu-list.svelte';
+export { default as Item } from './menu-item.svelte';

package/dist/components/menu/attachments.svelte.d.ts

@@ -0,0 +1,2 @@
+import { PopoverBond } from '../popover/bond.svelte';
+export declare function menu(callback: (node: HTMLElement, bond?: PopoverBond) => any): (node: HTMLElement) => any;

package/dist/components/menu/attachments.svelte.js

@@ -0,0 +1,5 @@
+import { popover } from '../popover/attachments.svelte';
+import { PopoverBond } from '../popover/bond.svelte';
+export function menu(callback) {
+    return popover(callback);
+}

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

@@ -0,0 +1,2 @@
+export * as Menu from './atoms';
+export { PopoverBond, type PopoverDomElements, type PopoverParams, PopoverState, type PopoverStateProps, type TriggerParams } from '../popover/bond.svelte';

package/dist/components/menu/index.js

@@ -0,0 +1,2 @@
+export * as Menu from './atoms';
+export { PopoverBond, PopoverState } from '../popover/bond.svelte';

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

@@ -0,0 +1,56 @@
+<script lang="ts" generics="T extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
+	import { getPreset } from '../../context';
+	import { toClassValue } from '../../utils';
+	import { List } from '../list';
+	import { PopoverBond } from '../popover/bond.svelte';
+	import type { Base } from '../atom';
+
+	const bond = PopoverBond.get();
+
+	const preset = getPreset('dropdown.item');
+
+	let {
+		class: klass = '',
+		as = preset?.as ?? 'div',
+		base = preset?.base as B,
+		children = undefined,
+		onclick = undefined,
+		onmount = undefined,
+		ondestroy = undefined,
+		animate = undefined,
+		enter = undefined,
+		exit = undefined,
+		initial = undefined,
+		...restProps
+	} = $props();
+
+	function _onclick(ev: MouseEvent) {
+		onclick?.(ev);
+
+		if (ev.defaultPrevented) {
+			return;
+		}
+
+		bond?.state.close();
+	}
+</script>
+
+<List.Item
+	class={[
+		'border-border last:border-b-none hover:bg-foreground/5 active:bg-foreground/10 cursor-pointer border-b',
+		toClassValue.apply(bond, [preset?.class]),
+		toClassValue.apply(bond, [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)}
+	{as}
+	{base}
+	onclick={_onclick}
+	{...restProps}
+>
+	{@render children?.({ menu: bond })}
+</List.Item>

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

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

package/dist/components/menu/menu-list.svelte

@@ -0,0 +1,44 @@
+<script lang="ts" generics="T extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
+	import { List } from '../list';
+	import { Content } from '../popover/atoms';
+	import { toClassValue } from '../../utils';
+	import { getPreset } from '../../context';
+	import type { Base } from '../atom';
+	import { PopoverBond } from '../popover';
+
+	const bond = PopoverBond.get();
+	const preset = getPreset('menu.body');
+
+	let {
+		class: klass = '',
+		as = preset?.as ?? 'ul',
+		base = preset?.base ?? List.Root,
+		children = undefined,
+		onmount = undefined,
+		ondestroy = undefined,
+		animate = undefined,
+		enter = undefined,
+		exit = undefined,
+		initial = undefined,
+		...restProps
+	} = $props();
+</script>
+
+<Content
+	class={[
+		'bg-background overflow-hidden p-0',
+		toClassValue.apply(bond, [preset?.class]),
+		toClassValue.apply(bond, [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)}
+	{as}
+	{base}
+	{...restProps}
+>
+	{@render children?.()}
+</Content>

package/dist/components/menu/menu-list.svelte.d.ts

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

package/dist/components/menu/menu.stories.svelte

@@ -0,0 +1,36 @@
+<script module>
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import { Menu as AMenu } from '.';
+	import Root from '../root/root.svelte';
+	import { Button } from '../button';
+
+	// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+	const { Story } = defineMeta({
+		title: 'Atoms/Menu',
+		// This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+
+		parameters: {
+			// More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
+			layout: 'fullscreen'
+		},
+		args: {}
+	});
+</script>
+
+<script lang="ts">
+	let open = $state(false);
+</script>
+
+<Story name="Menu" args={{}}>
+	<Root class="p-4">
+		<AMenu.Root bind:open offset={4}>
+			<AMenu.Trigger base={Button}>Select a language</AMenu.Trigger>
+			<AMenu.List>
+				<AMenu.Item>Arabic</AMenu.Item>
+				<AMenu.Item>English</AMenu.Item>
+				<AMenu.Item>Spanish</AMenu.Item>
+				<AMenu.Item>Italian</AMenu.Item>
+			</AMenu.List>
+		</AMenu.Root>
+	</Root>
+</Story>

package/dist/components/menu/menu.stories.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const Menu: import("svelte").Component<Record<string, never>, {}, "">;
+type Menu = ReturnType<typeof Menu>;
+export default Menu;

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

@@ -0,0 +1,5 @@
+export { default as Root } from './popover-root.svelte';
+export { default as Trigger } from './popover-trigger.svelte';
+export { default as Content } from './popover-content.svelte';
+export { default as Indicator } from './popover-indicator.svelte';
+export { default as Arrow } from './popover-arrow.svelte';

package/dist/components/popover/atoms.js

@@ -0,0 +1,5 @@
+export { default as Root } from './popover-root.svelte';
+export { default as Trigger } from './popover-trigger.svelte';
+export { default as Content } from './popover-content.svelte';
+export { default as Indicator } from './popover-indicator.svelte';
+export { default as Arrow } from './popover-arrow.svelte';

package/dist/components/popover/attachments.svelte.d.ts

@@ -0,0 +1,3 @@
+import { PopoverBond } from './bond.svelte';
+export declare function popover(callback: (node: HTMLElement, bond?: PopoverBond) => any): (node: HTMLElement) => any;
+export declare function clickoutPopover(onclickout?: (ev: PointerEvent, atom: PopoverBond) => any): (node: Element) => () => void;

package/dist/components/popover/attachments.svelte.js

@@ -0,0 +1,18 @@
+import { PopoverBond } from './bond.svelte';
+import { clickout as gclickout } from '../../attachments/clickout.svelte';
+export function popover(callback) {
+    const bond = PopoverBond.get();
+    return (node) => callback(node, bond);
+}
+export function clickoutPopover(onclickout) {
+    const atom = PopoverBond.get();
+    return gclickout((ev) => {
+        if (!atom)
+            return;
+        const target = ev.target;
+        if (atom.elements.trigger?.contains(target)) {
+            return;
+        }
+        onclickout?.(ev, atom);
+    });
+}

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

@@ -0,0 +1,77 @@
+import { type ComputePositionReturn, type Placement } from '@floating-ui/dom';
+import { Bond, BondState, type BondStateProps } from '../../shared/bond.svelte.js';
+export type PopoverParams = {
+    apply?: (node: HTMLElement, params: {
+        x: number;
+        y: number;
+        dx: number;
+        dy: number;
+        open: boolean;
+        offset: number;
+    }) => void;
+    onchange?: (node: HTMLElement, params: ComputePositionReturn) => void;
+};
+export type PopoverStateProps<T extends Record<string, unknown> = Record<string, unknown>> = BondStateProps & {
+    open: boolean;
+    disabled: boolean;
+    placements: Placement[];
+    placement: Placement | undefined;
+    offset: number;
+    extend: T;
+};
+export type TriggerParams = {
+    onclick?: (ev: MouseEvent) => void;
+};
+export type PopoverDomElements = {
+    trigger: HTMLElement;
+    content: HTMLElement;
+    indicator: HTMLElement;
+    arrow: HTMLElement;
+};
+export declare class PopoverBond<Props extends PopoverStateProps = PopoverStateProps, State extends PopoverState<Props> = PopoverState<Props>, Elements extends PopoverDomElements = PopoverDomElements> extends Bond<Props, State, Elements> {
+    #private;
+    static CONTEXT_KEY: string;
+    constructor(state: State);
+    get position(): ComputePositionReturn | undefined;
+    get isReady(): Promise<unknown>;
+    trigger(props?: Record<string, unknown>): {
+        id: string;
+        role: string;
+        disabled: boolean | undefined;
+        tabindex: number;
+        'aria-expanded': boolean;
+        'aria-disabled': boolean;
+        'aria-controls': string;
+        'data-kind': string;
+        onclick: (ev: PointerEvent) => void;
+    };
+    content(props?: Record<string, unknown>): {
+        id: string;
+        role: string;
+        'aria-modal': boolean;
+        'aria-labelledby': string;
+        'aria-controlledby': string;
+        'data-atom': string;
+        'data-kind': string;
+        'data-active': boolean;
+    };
+    indicator(props?: Record<string, unknown>): {
+        id: string;
+        'aria-controlledby': string;
+        'data-kind': string;
+    };
+    arrow(props?: Record<string, unknown>): {
+        id: string;
+        'data-kind': string;
+    };
+    share(): this;
+    static get(): PopoverBond;
+    static set(bond: PopoverBond): PopoverBond<PopoverStateProps<Record<string, unknown>>, PopoverState<PopoverStateProps<Record<string, unknown>>>, PopoverDomElements>;
+}
+export declare class PopoverState<Props extends PopoverStateProps = PopoverStateProps> extends BondState<Props> {
+    constructor(props: () => Props);
+    get isOpen(): boolean;
+    open(): void;
+    close(): void;
+    toggle(): void;
+}

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

@@ -0,0 +1,203 @@
+import { getContext, setContext, untrack } from 'svelte';
+import { createAttachmentKey } from 'svelte/attachments';
+import { autoUpdate, computePosition, arrow, flip, offset } from '@floating-ui/dom';
+import { debounce } from 'es-toolkit';
+import { getElementId, isBrowser } from '../../utils/dom.svelte.js';
+import { Bond, BondState } from '../../shared/bond.svelte.js';
+const POPOVER_ELEMENTS_KIND = {
+    trigger: 'popover-trigger',
+    content: 'popover-content',
+    indicator: 'popover-indicator',
+    arrow: 'popover-arrow'
+};
+export class PopoverBond extends Bond {
+    static CONTEXT_KEY = '@atomic-sv/bonds/popover';
+    #position = $state();
+    #isReady = Promise.withResolvers();
+    constructor(state) {
+        super(state);
+    }
+    get position() {
+        return this.#position;
+    }
+    get isReady() {
+        return this.#isReady.promise;
+    }
+    trigger(props = {}) {
+        const isButtonElement = isBrowser()
+            ? this.elements.trigger instanceof HTMLButtonElement
+            : false;
+        const isDisabled = this.state?.props?.disabled ?? false;
+        const isOpen = this.state?.props?.open ?? false;
+        const kind = POPOVER_ELEMENTS_KIND.trigger;
+        const id = getElementId(this.id, kind);
+        const overlayId = getElementId(this.id, POPOVER_ELEMENTS_KIND.content);
+        return {
+            id,
+            role: isButtonElement ? '' : 'button', // Ensure trigger is announced as a button
+            disabled: isButtonElement ? isDisabled : undefined,
+            tabindex: isDisabled ? -1 : 0, // Make focusable unless disabled
+            'aria-expanded': isOpen,
+            'aria-disabled': isDisabled,
+            'aria-controls': overlayId,
+            'data-kind': kind,
+            onclick: (ev) => {
+                if (ev.button === 2) {
+                    return; // Ignore right-clicks
+                }
+                if (ev.defaultPrevented) {
+                    return;
+                }
+                this.state.toggle();
+            },
+            ...props,
+            [createAttachmentKey()]: (node) => {
+                this.elements.trigger = node;
+                const position = untrack(() => this.#position);
+                if (!position) {
+                    const init = async () => {
+                        popover(this)(node, {
+                            ...props,
+                            onchange: (node, position) => {
+                                this.#position = position;
+                                this.#isReady.resolve(position);
+                            }
+                        });
+                        const pointerLeaveHandler = () => {
+                            node.removeEventListener('pointerenter', init);
+                            node.removeEventListener('pointerleave', pointerLeaveHandler);
+                        };
+                        node.addEventListener('pointerleave', pointerLeaveHandler);
+                    };
+                    node.addEventListener('pointerenter', init, { passive: true });
+                    return () => {
+                        node.removeEventListener('pointerenter', init);
+                    };
+                }
+            }
+        };
+    }
+    content(props = {}) {
+        const kind = POPOVER_ELEMENTS_KIND.content;
+        const id = getElementId(this.id, kind);
+        const triggerId = getElementId(this.id, POPOVER_ELEMENTS_KIND.trigger);
+        const isOpen = this.state?.props?.open ?? false;
+        const isDisabled = this.state?.props?.disabled ?? false;
+        const isActive = isOpen && !isDisabled;
+        return {
+            id,
+            role: 'dialog', // Announce as dialog
+            'aria-modal': true, // Modal dialog
+            'aria-labelledby': triggerId, // Link overlay to trigger
+            'aria-controlledby': triggerId, // Link overlay to trigger
+            'data-atom': this.id,
+            'data-kind': 'overlay',
+            'data-active': isActive,
+            ...props,
+            [createAttachmentKey()]: (node) => {
+                this.elements.content = node;
+                if (!this.elements.trigger) {
+                    return;
+                }
+                if (!this.state.isOpen)
+                    return;
+                return popover(this)(node, {
+                    ...props,
+                    onchange: (node, position) => {
+                        this.#position = position;
+                        props.onchange?.(node, position);
+                    }
+                }, autoUpdate);
+            }
+        };
+    }
+    indicator(props = {}) {
+        const kind = POPOVER_ELEMENTS_KIND.indicator;
+        const id = getElementId(this.id, kind);
+        const triggerId = getElementId(this.id, POPOVER_ELEMENTS_KIND.trigger);
+        return {
+            id,
+            'aria-controlledby': triggerId,
+            'data-kind': kind,
+            ...props,
+            [createAttachmentKey()]: (node) => {
+                this.elements.indicator = node;
+            }
+        };
+    }
+    arrow(props = {}) {
+        const kind = POPOVER_ELEMENTS_KIND.arrow;
+        const id = getElementId(this.id, kind);
+        return {
+            id: id,
+            'data-kind': kind,
+            ...props,
+            [createAttachmentKey()]: (node) => {
+                this.elements.arrow = node;
+            }
+        };
+    }
+    share() {
+        return PopoverBond.set(this);
+    }
+    static get() {
+        return getContext(PopoverBond.CONTEXT_KEY);
+    }
+    static set(bond) {
+        return setContext(PopoverBond.CONTEXT_KEY, bond);
+    }
+}
+export class PopoverState extends BondState {
+    constructor(props) {
+        super(props);
+    }
+    get isOpen() {
+        return this.props.open ?? false;
+    }
+    open() {
+        this.props.open = true;
+    }
+    close() {
+        this.props.open = false;
+    }
+    toggle() {
+        this.props.open = !this.props.open;
+    }
+}
+function popover(bond) {
+    return (node, props, updater) => {
+        const { offset: ofs, placements, placement } = bond.state.props;
+        if (!bond.elements.content) {
+            return;
+        }
+        if (!bond.elements.trigger) {
+            return;
+        }
+        node.style.minWidth = bond.elements.trigger.clientWidth + 'px';
+        const middleware = [];
+        if (bond.elements.arrow) {
+            middleware.push(arrow({ element: bond.elements.arrow }));
+        }
+        const onchangeDebounced = debounce((node, position) => {
+            props.onchange?.(node, position);
+        }, 1000 / 60);
+        const compute = async () => {
+            const position = await computePosition(bond.elements.trigger, node, {
+                placement,
+                middleware: [
+                    offset(ofs),
+                    flip({
+                        fallbackPlacements: placements,
+                        padding: 4
+                    }),
+                    ...middleware
+                ]
+            });
+            onchangeDebounced?.(node, position);
+        };
+        if (updater) {
+            return updater(bond.elements.trigger, node, compute, {});
+        }
+        compute();
+    };
+}

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

@@ -0,0 +1,3 @@
+export * as Popover from './atoms';
+export { clickoutPopover, popover } from './attachments.svelte';
+export { PopoverBond, type PopoverDomElements, type PopoverParams, PopoverState, type PopoverStateProps, type TriggerParams } from './bond.svelte';

package/dist/components/popover/index.js

@@ -0,0 +1,3 @@
+export * as Popover from './atoms';
+export { clickoutPopover, popover } from './attachments.svelte';
+export { PopoverBond, PopoverState } from './bond.svelte';