@svelte-atoms/core 1.0.0-alpha.31 → 1.0.0-alpha.32

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

@@ -0,0 +1,69 @@
+import { getContext, setContext } from 'svelte';
+import { createAttachmentKey } from 'svelte/attachments';
+import { nanoid } from 'nanoid';
+import { MenuBond, MenuBondState } from '../bond.svelte';
+export class MenuItemController {
+    static CONTEXT_KEY = '@atoms/context/menu/item';
+    #id;
+    #props;
+    #element = null;
+    #menu;
+    #unmount;
+    constructor(props = () => ({})) {
+        this.#props = props;
+        this.#id = this.props.id ?? nanoid();
+        this.#menu = MenuBond.get();
+        if (!this.#menu) {
+            throw new Error('MenuItem must be used within a Menu context');
+        }
+    }
+    get id() {
+        return this.#id;
+    }
+    get props() {
+        return this.#props();
+    }
+    get element() {
+        return this.#element;
+    }
+    get menu() {
+        return this.#menu;
+    }
+    get isHighlighted() {
+        return this.#menu?.state.highlightedId === this.#id;
+    }
+    mount() {
+        this.#unmount = this.#menu?.state?.mountItem?.(this.#id, this) ?? undefined;
+        return this.unmount;
+    }
+    unmount() {
+        this.#unmount?.();
+    }
+    destroy() {
+        this.unmount();
+    }
+    share() {
+        return MenuItemController.set(this);
+    }
+    elementProps() {
+        const itemId = `item-${this.id}`;
+        return {
+            id: itemId,
+            role: 'menuitem',
+            'data-highlighted': this.isHighlighted,
+            [createAttachmentKey()]: (node) => {
+                this.#element = node;
+                return () => {
+                    // this.#unmount?.();
+                    this.#element = null;
+                };
+            }
+        };
+    }
+    static get() {
+        return getContext(MenuItemController.CONTEXT_KEY);
+    }
+    static set(item) {
+        return setContext(MenuItemController.CONTEXT_KEY, item);
+    }
+}

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

@@ -0,0 +1,2 @@
+export { MenuItemController, type MenuItemControllerProps } from './controller.svelte';
+export * from './types';

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

@@ -0,0 +1,2 @@
+export { MenuItemController } from './controller.svelte';
+export * from './types';

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

@@ -0,0 +1,103 @@
+<script
+	lang="ts"
+	generics="D, E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base"
+>
+	import { defineProperty, defineState } from '../../../utils';
+	import type { Base } from '../../atom';
+	import { MenuItemController, type MenuItemControllerProps } from './controller.svelte';
+	import { MenuBond } from '../bond.svelte';
+	import { List } from '../../list';
+	import type { MenuItemProps } from './types';
+
+	const menu = MenuBond.get();
+
+	if (!menu) {
+		throw new Error('<MenuItem> must be used within a <Menu>.');
+	}
+
+	const ID = $props.id();
+
+	let {
+		class: klass = '',
+		id = ID,
+		preset: presetKey = 'menu.item',
+		children = undefined,
+		onclick = undefined,
+		disabled = undefined,
+		onmount = undefined,
+		ondestroy = undefined,
+		animate = undefined,
+		enter = undefined,
+		exit = undefined,
+		initial = undefined,
+		factory = _factory,
+		...restProps
+	}: MenuItemProps = $props();
+
+	const controller = factory().share();
+
+	const itemProps = $derived({
+		...menu?.item?.(),
+		...controller?.elementProps(),
+		...restProps
+	});
+
+	$effect(() => {
+		return () => {
+			controller.destroy();
+		};
+	});
+
+	function _factory() {
+		const item = menu?.state?.item?.(id);
+
+		if (item) {
+			return item as MenuItemController;
+		}
+
+		const bondProps = defineState<MenuItemControllerProps>([defineProperty('id', () => id)]);
+		const controller = new MenuItemController(() => bondProps);
+
+		controller.mount();
+
+		return controller;
+	}
+
+	function handleClick(ev: MouseEvent) {
+		onclick?.(ev);
+
+		if (ev.defaultPrevented) {
+			return;
+		}
+
+		ev.preventDefault();
+
+		controller?.menu?.state.close();
+	}
+
+	export function getController() {
+		return controller;
+	}
+</script>
+
+<List.Item
+	bond={controller}
+	preset={presetKey}
+	class={[
+		'border-border last:border-b-none hover:bg-foreground/5 active:bg-foreground/10 outline-primary cursor-pointer border-b',
+		'$preset',
+		klass
+	]}
+	onmount={onmount?.bind(controller) as any}
+	ondestroy={ondestroy?.bind(controller) as any}
+	enter={enter?.bind(controller) as any}
+	exit={exit?.bind(controller) as any}
+	initial={initial?.bind(controller) as any}
+	animate={animate?.bind(controller) as any}
+	aria-disabled={disabled ? true : undefined}
+	tabIndex={disabled ? -1 : 0}
+	onclick={handleClick}
+	{...itemProps}
+>
+	{@render children?.({ menuItem: controller })}
+</List.Item>

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

@@ -0,0 +1,31 @@
+import type { Base } from '../../atom';
+import { MenuItemController } from './controller.svelte';
+import type { MenuItemProps } from './types';
+declare function $$render<D, E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(): {
+    props: MenuItemProps;
+    exports: {
+        getController: () => MenuItemController;
+    };
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<D, E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> {
+    props(): ReturnType<typeof $$render<D, E, B>>['props'];
+    events(): ReturnType<typeof $$render<D, E, B>>['events'];
+    slots(): ReturnType<typeof $$render<D, E, B>>['slots'];
+    bindings(): "";
+    exports(): {
+        getController: () => MenuItemController;
+    };
+}
+interface $$IsomorphicComponent {
+    new <D, E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<D, E, B>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<D, E, B>['props']>, ReturnType<__sveltets_Render<D, E, B>['events']>, ReturnType<__sveltets_Render<D, E, B>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<D, E, B>['bindings']>;
+    } & ReturnType<__sveltets_Render<D, E, B>['exports']>;
+    <D, E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(internal: unknown, props: ReturnType<__sveltets_Render<D, E, B>['props']> & {}): ReturnType<__sveltets_Render<D, E, B>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any, any, any>['bindings']>;
+}
+declare const MenuItem: $$IsomorphicComponent;
+type MenuItem<D, E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> = InstanceType<typeof MenuItem<D, E, B>>;
+export default MenuItem;

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

@@ -0,0 +1,62 @@
+import type { Snippet } from 'svelte';
+import type { MenuItemController } from './controller.svelte';
+import type { ClassValue } from '../../../utils';
+import type { Base, HtmlAtomProps } from '../../atom';
+/**
+ * Extend this interface to add custom menu list properties in your application.
+ */
+export interface MenuItemExtendProps {
+}
+export interface MenuItemProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends HtmlAtomProps<E, B>, MenuItemExtendProps {
+    /**
+     * Custom CSS class(es) to apply to the menu item
+     */
+    class?: ClassValue;
+    /**
+     * Preset key for styling
+     * @default 'menu.item'
+     */
+    preset?: string;
+    /**
+     * Whether the menu item is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Click event handler
+     */
+    onclick?: (event: MouseEvent) => void;
+    /**
+     * Mount lifecycle callback
+     */
+    onmount?: (this: MenuItemController) => void;
+    /**
+     * Destroy lifecycle callback
+     */
+    ondestroy?: (this: MenuItemController) => void;
+    /**
+     * Animation configuration
+     */
+    animate?: (this: MenuItemController) => any;
+    /**
+     * Enter animation configuration
+     */
+    enter?: (this: MenuItemController) => any;
+    /**
+     * Exit animation configuration
+     */
+    exit?: (this: MenuItemController) => any;
+    /**
+     * Initial state configuration
+     */
+    initial?: (this: MenuItemController) => any;
+    /**
+     * Factory function to create a custom MenuItemController instance
+     */
+    factory?: () => MenuItemController;
+    /**
+     * Render prop for children
+     */
+    children?: Snippet<[{
+        menuItem: MenuItemController;
+    }]>;
+}

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

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

package/dist/components/menu/{menu-list.svelte → menu-content.svelte}

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

package/dist/components/menu/{menu-list.svelte.d.ts → menu-content.svelte.d.ts}

@@ -32,6 +32,6 @@ interface $$IsomorphicComponent {
     <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;
+declare const MenuContent: $$IsomorphicComponent;
+type MenuContent<T extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> = InstanceType<typeof MenuContent<T, B>>;
+export default MenuContent;

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

@@ -0,0 +1,15 @@
+<script lang="ts">
+	import { MenuBond, MenuBondState, type MenuBondProps } from './bond.svelte';
+	import { Root } from '../popover/atoms';
+
+	let { open = $bindable(false), factory = _factory, children, ...restProps } = $props();
+
+	function _factory(props: MenuBondProps) {
+		const menuBondState = new MenuBondState(() => props);
+		return new MenuBond(menuBondState);
+	}
+</script>
+
+<Root bind:open {factory} {...restProps}>
+	{@render children?.()}
+</Root>

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

@@ -0,0 +1,8 @@
+import { MenuBond, MenuBondState, type MenuBondProps } from './bond.svelte';
+declare const MenuRoot: import("svelte").Component<{
+    open?: boolean;
+    factory?: (props: MenuBondProps) => MenuBond<MenuBondProps, MenuBondState<MenuBondProps>, import(".").PopoverDomElements>;
+    children: any;
+} & Record<string, any>, {}, "open">;
+type MenuRoot = ReturnType<typeof MenuRoot>;
+export default MenuRoot;

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

@@ -1,33 +1,33 @@
-<script module>
-	import { defineMeta } from '@storybook/addon-svelte-csf';
-	import { Menu as AMenu } from '.';
-	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={{}}>
-	<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>
-</Story>
+<script module>
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import { Menu as AMenu } from '.';
+	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={{}}>
+	<AMenu.Root bind:open>
+		<AMenu.Trigger base={Button}>Select a language</AMenu.Trigger>
+		<AMenu.List>
+			<AMenu.Item onclick={() => console.log('Arabic')}>Arabic</AMenu.Item>
+			<AMenu.Item onclick={() => console.log('English')}>English</AMenu.Item>
+			<AMenu.Item onclick={() => console.log('Spanish')}>Spanish</AMenu.Item>
+			<AMenu.Item onclick={() => console.log('Italian')}>Italian</AMenu.Item>
+		</AMenu.List>
+	</AMenu.Root>
+</Story>

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

@@ -1,15 +1,8 @@
 import type { HtmlAtomProps, Base } from '../atom';
-/**
- * Extend this interface to add custom menu item properties in your application.
- */
-export interface MenuItemExtendProps {
-}
 /**
  * Extend this interface to add custom menu list properties in your application.
  */
 export interface MenuListExtendProps {
 }
-export interface MenuItemProps<E extends keyof HTMLElementTagNameMap = 'button', B extends Base = Base> extends HtmlAtomProps<E, B>, MenuItemExtendProps {
-}
 export interface MenuListProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends HtmlAtomProps<E, B>, MenuListExtendProps {
 }

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

@@ -34,12 +34,8 @@ export declare class PopoverBond<Props extends PopoverStateProps = PopoverStateP
     static CONTEXT_KEY: string;
     position: ComputePositionReturn | undefined;
     constructor(state: State);
-    trigger(props?: Record<string, unknown> & {
-        onclick?: (ev: PointerEvent) => void;
-        onkeydown?: (ev: KeyboardEvent) => void;
-    }): {
-        onclick: (ev: PointerEvent) => void;
-        onkeydown: (ev: KeyboardEvent) => void;
+    trigger(): {
+        [x: symbol]: (node: HTMLElement) => (() => void) | undefined;
         id: string;
         role: string;
         disabled: boolean | undefined;
@@ -49,30 +45,31 @@ export declare class PopoverBond<Props extends PopoverStateProps = PopoverStateP
         'aria-controls': string;
         'aria-haspopup': string;
         'data-kind': string;
+        onclick: (ev: PointerEvent) => void;
+        onkeydown: (ev: KeyboardEvent) => void;
     };
-    content(props?: Record<string, unknown> & {
-        onchange?: (node: HTMLElement, position: ComputePositionReturn) => void;
-    }): {
-        onchange?: (node: HTMLElement, position: ComputePositionReturn) => void;
+    content(): {
+        [x: symbol]: (node: HTMLElement) => (() => void) | undefined;
         id: string;
         role: string;
         'aria-modal': boolean;
         'aria-labelledby': string;
-        'aria-hidden': boolean;
-        inert: string | undefined;
+        inert: boolean | undefined;
         tabindex: number;
         'data-atom': string;
         'data-kind': string;
         'data-active': boolean;
         onkeydown: ((ev: KeyboardEvent) => void) | undefined;
     };
-    indicator(props?: Record<string, unknown>): {
+    indicator(): {
+        [x: symbol]: (node: HTMLElement) => void;
         id: string;
         'aria-hidden': boolean;
         'aria-live': string;
         'data-kind': string;
     };
-    arrow(props?: Record<string, unknown>): {
+    arrow(): {
+        [x: symbol]: (node: HTMLElement) => void;
         id: string;
         role: string;
         'aria-hidden': boolean;