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

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

@@ -1,66 +1,66 @@
-<script lang="ts">
-	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;
-
-	if (!bond) {
-		throw new Error('Combobox atom was not found');
-	}
-
-	let {
-		value = $bindable(),
-		class: klass = '',
-		children = undefined,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = undefined,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
-		...restProps
-	}: ComboboxControlProps = $props();
-
-	let isMounted = $state(false);
-
-	onMount(() => {
-		isMounted = true;
-	});
-
-	const isMultiselect = untrack(() => bond.state.props.multiple);
-
-	$effect(() => {
-		bond.state.allSelections;
-
-		if (isMultiselect) {
-			value = '';
-		} else {
-			value = untrack(() => bond.state.props.label);
-		}
-	});
-
-	const comboboxProps = $derived({
-		...bond.control(),
-		...restProps
-	});
-</script>
-
-<Input.Control
-	bind:value={
-		() => value,
-		(v) => {
-			value = v;
-		}
-	}
-	preset="combobox.control"
-	class={['border-border flex-1 py-1', '$preset', klass]}
-	enter={enter?.bind(bond.state)}
-	exit={exit?.bind(bond.state)}
-	initial={initial?.bind(bond.state)}
-	animate={animate?.bind(bond.state)}
-	onmount={onmount?.bind(bond.state)}
-	ondestroy={ondestroy?.bind(bond.state)}
-	{...comboboxProps}
-/>
+<script lang="ts">
+	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;
+
+	if (!bond) {
+		throw new Error('Combobox atom was not found');
+	}
+
+	let {
+		value = $bindable(),
+		class: klass = '',
+		children = undefined,
+		onmount = undefined,
+		ondestroy = undefined,
+		animate = undefined,
+		enter = undefined,
+		exit = undefined,
+		initial = undefined,
+		...restProps
+	}: ComboboxControlProps = $props();
+
+	let isMounted = $state(false);
+
+	onMount(() => {
+		isMounted = true;
+	});
+
+	const isMultiselect = untrack(() => bond.state.props.multiple);
+
+	$effect(() => {
+		void bond.state.selections;
+
+		if (isMultiselect) {
+			value = '';
+		} else {
+			value = untrack(() => bond.state.props.label);
+		}
+	});
+
+	const comboboxProps = $derived({
+		...bond.control().spread,
+		...restProps
+	});
+</script>
+
+<Input.Control
+	bind:value={
+		() => value,
+		(v) => {
+			value = v;
+		}
+	}
+	preset="combobox.control"
+	class={['border-border flex-1 py-1', '$preset', klass]}
+	enter={enter?.bind(bond.state)}
+	exit={exit?.bind(bond.state)}
+	initial={initial?.bind(bond.state)}
+	animate={animate?.bind(bond.state)}
+	onmount={onmount?.bind(bond.state)}
+	ondestroy={ondestroy?.bind(bond.state)}
+	{...comboboxProps}
+/>

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

@@ -1,62 +1,62 @@
-<script lang="ts">
-	import { ComboboxBond } from './bond.svelte';
-	import { Item } from '../dropdown/atoms';
-	import { DropdownItemController } from '../dropdown/item/controller.svelte';
-
-	import { on } from '../../attachments';
-
-	const bond = ComboboxBond.get() as ComboboxBond;
-
-	if (!bond) {
-		throw new Error('Combobox atom was not found');
-	}
-
-	let {
-		class: klass = '',
-		children = undefined,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = undefined,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
-		...restProps
-	} = $props();
-</script>
-
-<Item
-	{@attach (node: HTMLElement) => {
-		const item = DropdownItemController.get();
-
-		return on('click', (ev) => {
-			ev.preventDefault();
-
-			const currentTarget = ev.currentTarget as HTMLElement | undefined;
-
-			const textElement = (currentTarget?.querySelector('data-text') ?? currentTarget) as
-				| HTMLElement
-				| undefined;
-
-			// Set selected item text
-			bond.state.props.label = textElement?.innerText ?? '';
-			// Clear input query
-			bond.state.props.label = '';
-
-			item?.toggle();
-
-			bond?.state.close();
-		})(node);
-	}}
-	{bond}
-	preset="combobox.item"
-	class={['border-border', '$preset', klass].filter(Boolean).join(' ')}
-	enter={enter?.bind(bond.state)}
-	exit={exit?.bind(bond.state)}
-	initial={initial?.bind(bond.state)}
-	animate={animate?.bind(bond.state)}
-	onmount={onmount?.bind(bond.state)}
-	ondestroy={ondestroy?.bind(bond.state)}
-	{...restProps}
->
-	{@render children?.({ combobox: bond })}
-</Item>
+<script lang="ts">
+	import { ComboboxBond } from './bond.svelte';
+	import { Item } from '../select/atoms';
+	import { SelectItemController as DropdownItemController } from '../select/item/controller.svelte';
+
+	import { on } from '../../attachments';
+
+	const bond = ComboboxBond.get() as ComboboxBond;
+
+	if (!bond) {
+		throw new Error('Combobox atom was not found');
+	}
+
+	let {
+		class: klass = '',
+		children = undefined,
+		onmount = undefined,
+		ondestroy = undefined,
+		animate = undefined,
+		enter = undefined,
+		exit = undefined,
+		initial = undefined,
+		...restProps
+	} = $props();
+</script>
+
+<Item
+	{@attach (node: HTMLElement) => {
+		const item = DropdownItemController.get();
+
+		return on('click', (ev) => {
+			ev.preventDefault();
+
+			const currentTarget = ev.currentTarget as HTMLElement | undefined;
+
+			const textElement = (currentTarget?.querySelector('data-text') ?? currentTarget) as
+				| HTMLElement
+				| undefined;
+
+			// Set selected item text
+			bond.state.props.label = textElement?.innerText ?? '';
+			// Clear input query
+			bond.state.props.label = '';
+
+			item?.toggle();
+
+			bond?.state.close();
+		})(node);
+	}}
+	{bond}
+	preset="combobox.item"
+	class={['border-border', '$preset', klass].filter(Boolean).join(' ')}
+	enter={enter?.bind(bond.state)}
+	exit={exit?.bind(bond.state)}
+	initial={initial?.bind(bond.state)}
+	animate={animate?.bind(bond.state)}
+	onmount={onmount?.bind(bond.state)}
+	ondestroy={ondestroy?.bind(bond.state)}
+	{...restProps}
+>
+	{@render children?.({ combobox: bond })}
+</Item>

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

@@ -1,65 +1,65 @@
-<script lang="ts" generics="D">
-	import type { ComboboxRootProps } from './types';
-	import { defineProperty, defineState } from '../../utils';
-	import { ComboboxBond, ComboboxBondState, type ComboboxBondProps } from './bond.svelte';
-
-	let {
-		open = $bindable(false),
-		value = $bindable(),
-		values = $bindable(),
-		label = $bindable(),
-		labels = $bindable(),
-		multiple = false,
-		disabled = false,
-		placements = ['bottom-start', 'bottom-end', 'top-start', 'top-end'],
-		placement = 'bottom-start',
-		offset = 1,
-		factory = _factory,
-		children = undefined,
-		...restProps
-	}: ComboboxRootProps = $props();
-
-	const bondProps = defineState<ComboboxBondProps>(
-		[
-			defineProperty(
-				'open',
-				() => open,
-				(v) => {
-					open = v;
-				}
-			),
-			defineProperty(
-				'values',
-				() => (multiple ? values : [value]),
-				(v) => {
-					values = v;
-					value = v[0];
-				}
-			),
-			defineProperty(
-				'label',
-				() => label,
-				(v) => (label = v)
-			),
-			defineProperty(
-				'labels',
-				() => labels,
-				(v) => (labels = v)
-			)
-		],
-		() => ({ disabled, multiple, placements, offset, placement: 'bottom-start', ...restProps })
-	);
-	const bond = factory(bondProps).share();
-
-	function _factory(props: typeof bondProps) {
-		const bondState = new ComboboxBondState<D>(() => props);
-
-		return new ComboboxBond(bondState).share();
-	}
-
-	export function getBond() {
-		return bond;
-	}
-</script>
-
-{@render children?.({ combobox: bond })}
+<script lang="ts" generics="D">
+	import type { ComboboxRootProps } from './types';
+	import { defineProperty, defineState } from '../../utils';
+	import { ComboboxBond, ComboboxBondState, type ComboboxBondProps } from './bond.svelte';
+
+	let {
+		open = $bindable(false),
+		value = $bindable(),
+		values = $bindable(),
+		label = $bindable(),
+		labels = $bindable(),
+		multiple = false,
+		disabled = false,
+		placements = ['bottom-start', 'bottom-end', 'top-start', 'top-end'],
+		placement = 'bottom-start',
+		offset = 1,
+		factory = _factory,
+		children = undefined,
+		...restProps
+	}: ComboboxRootProps = $props();
+
+	const bondProps = defineState<ComboboxBondProps>(
+		[
+			defineProperty(
+				'open',
+				() => open,
+				(v) => {
+					open = v;
+				}
+			),
+			defineProperty(
+				'values',
+				() => (multiple ? values : [value]),
+				(v) => {
+					values = v;
+					value = v[0];
+				}
+			),
+			defineProperty(
+				'label',
+				() => label,
+				(v) => (label = v)
+			),
+			defineProperty(
+				'labels',
+				() => labels,
+				(v) => (labels = v)
+			)
+		],
+		() => ({ disabled, multiple, placements, offset, placement: 'bottom-start', ...restProps })
+	);
+	const bond = factory(bondProps).share();
+
+	function _factory(props: typeof bondProps) {
+		const bondState = new ComboboxBondState<D>(() => props);
+
+		return new ComboboxBond(bondState).share();
+	}
+
+	export function getBond() {
+		return bond;
+	}
+</script>
+
+{@render children?.({ combobox: bond })}

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

@@ -5,7 +5,7 @@ declare function $$render<D>(): {
     exports: {
         getBond: () => ComboboxBond;
     };
-    bindings: "values" | "value" | "label" | "open" | "labels";
+    bindings: "label" | "values" | "value" | "open" | "labels";
     slots: {};
     events: {};
 };
@@ -13,7 +13,7 @@ declare class __sveltets_Render<D> {
     props(): ReturnType<typeof $$render<D>>['props'];
     events(): ReturnType<typeof $$render<D>>['events'];
     slots(): ReturnType<typeof $$render<D>>['slots'];
-    bindings(): "values" | "value" | "label" | "open" | "labels";
+    bindings(): "label" | "values" | "value" | "open" | "labels";
     exports(): {
         getBond: () => ComboboxBond;
     };

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

@@ -1,17 +1,17 @@
-<script lang="ts">
-	import { ComboboxBond } from './bond.svelte';
-	import { Selections } from '../dropdown/atoms';
-	import type { ComboboxSelectionsProps } from './types';
-
-	const bond = ComboboxBond.get();
-
-	if (!bond) {
-		throw new Error('ComboboxSelections must be used within a Combobox');
-	}
-
-	let { ...restProps }: ComboboxSelectionsProps = $props();
-
-	let selections = $derived(bond.state.allSelections);
-</script>
-
-<Selections getSelections={() => selections} {...restProps} />
+<script lang="ts">
+	import { ComboboxBond } from './bond.svelte';
+	import { Selections } from '../select/atoms';
+	import type { ComboboxSelectionsProps } from './types';
+
+	const bond = ComboboxBond.get();
+
+	if (!bond) {
+		throw new Error('ComboboxSelections must be used within a Combobox');
+	}
+
+	let { ...restProps }: ComboboxSelectionsProps = $props();
+
+	let selections = $derived(bond.state.allSelections);
+</script>
+
+<Selections getSelections={() => selections} {...restProps} />

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

@@ -1,34 +1,34 @@
-<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
-	import { ComboboxBond } from './bond.svelte';
-	import { Trigger } from '../dropdown/atoms';
-	import type { Base } from '../atom';
-
-	const bond = ComboboxBond.get();
-
-	if (!bond) {
-		throw new Error('Combobox atom was not found');
-	}
-
-	let {
-		class: klass = '',
-		as = 'button',
-		preset = 'combobox.trigger',
-		children = undefined,
-		...restProps
-	} = $props();
-</script>
-
-<Trigger
-	{as}
-	{bond}
-	preset={preset}
-	class={['border-border h-8 w-40', '$preset', klass]}
-	onclick={(ev: Event) => {
-		ev.preventDefault();
-
-		bond?.state?.open();
-	}}
-	{...restProps}
->
-	{@render children?.({ dropdown: bond })}
-</Trigger>
+<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
+	import { ComboboxBond } from './bond.svelte';
+	import { Trigger } from '../select/atoms';
+	import type { Base } from '../atom';
+
+	const bond = ComboboxBond.get();
+
+	if (!bond) {
+		throw new Error('Combobox atom was not found');
+	}
+
+	let {
+		class: klass = '',
+		as = 'button',
+		preset = 'combobox.trigger',
+		children = undefined,
+		...restProps
+	} = $props();
+</script>
+
+<Trigger
+	{as}
+	{bond}
+	preset={preset}
+	class={['border-border h-8 w-40', '$preset', klass]}
+	onclick={(ev: Event) => {
+		ev.preventDefault();
+
+		bond?.state?.open();
+	}}
+	{...restProps}
+>
+	{@render children?.({ dropdown: bond })}
+</Trigger>

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

@@ -1,15 +1,14 @@
 import type { Snippet } from 'svelte';
-import type { HtmlAtomProps, Base } from '../atom';
+import type { HtmlAtomProps, Base, SnippetProps } from '../atom';
 import type { Factory } from '../../types';
 import type { ComboboxBond } from './bond.svelte';
-import type { DropdownSelectionProps, DropdownSelectionsProps } from '../dropdown';
+import type { SelectSelectionProps as DropdownSelectionProps, SelectSelectionsProps as DropdownSelectionsProps } from '../select';
 import type { InputControlProps } from '../input';
-/**
- * Extend this interface to add custom combobox properties in your application.
- */
-export interface ComboboxExtendProps {
+export interface ComboboxSnippetProps extends SnippetProps {
+    combobox: ComboboxBond;
 }
-export interface ComboboxRootProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends HtmlAtomProps<E, B>, ComboboxExtendProps {
+export type ComboboxChildren = Snippet<[ComboboxSnippetProps]>;
+export interface ComboboxRootProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends HtmlAtomProps<E, B, ComboboxChildren> {
     open?: boolean;
     value?: unknown;
     values?: unknown[];
@@ -21,9 +20,6 @@ export interface ComboboxRootProps<E extends keyof HTMLElementTagNameMap = 'div'
     placement?: string;
     offset?: number;
     factory?: Factory<ComboboxBond>;
-    children?: Snippet<[{
-        combobox: ComboboxBond;
-    }]>;
 }
 export interface ComboboxSelectionsProps extends DropdownSelectionsProps {
 }

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

@@ -1 +1,2 @@
 export { default as Container } from './container.svelte';
+export type { ContainerSnippetProps, ContainerChildren } from './types';

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

@@ -1,19 +1,13 @@
 import type { Snippet } from 'svelte';
-import type { HtmlAtomProps } from '../atom';
-/**
- * Extend this interface to add custom container properties in your application.
- */
-export interface ContainerExtendProps {
+import type { HtmlAtomProps, SnippetProps } from '../atom';
+export interface ContainerSnippetProps extends SnippetProps {
+    clientWidth: number;
+    clientHeight: number;
 }
-export interface ContainerProps extends Omit<HtmlAtomProps<'button'>, 'children'>, ContainerExtendProps {
+export type ContainerChildren = Snippet<[ContainerSnippetProps]>;
+export interface ContainerProps extends HtmlAtomProps<'button', never, ContainerChildren> {
     type?: 'inline-size' | 'size';
     name?: string;
     clientWidth?: number;
     clientHeight?: number;
-    children?: Snippet<[
-        {
-            clientWidth: number;
-            clientHeight: number;
-        }
-    ]>;
 }

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

@@ -0,0 +1,4 @@
+export { default as Root } from './context-menu-root.svelte';
+export { default as Trigger } from './context-menu-trigger.svelte';
+export { default as Content } from './context-menu-content.svelte';
+export { Arrow, Divider, Group, Indicator, Item, Title } from '../dropdown-menu/atoms';

package/dist/components/context-menu/atoms.js

@@ -0,0 +1,4 @@
+export { default as Root } from './context-menu-root.svelte';
+export { default as Trigger } from './context-menu-trigger.svelte';
+export { default as Content } from './context-menu-content.svelte';
+export { Arrow, Divider, Group, Indicator, Item, Title } from '../dropdown-menu/atoms';

package/dist/components/context-menu/context-menu-content.svelte

@@ -0,0 +1,52 @@
+<script lang="ts" generics="E extends HtmlElementTagName, B extends Base = Base">
+	import { clickout } from '../../attachments';
+	import type { Base } from '../atom';
+	import type { HtmlElementTagName } from '../element';
+	import { PopoverBond, type PopoverContentProps } from '../popover';
+	import { Content } from '../dropdown-menu/atoms';
+
+    const bond = PopoverBond.get();
+
+    if (!bond) {
+        throw new Error('<ContextMenu.Content /> must be used within a <ContextMenu.Root />');
+    }
+
+	let { onclickoutside, ...restProps }: PopoverContentProps<E, B> = $props();
+
+	function onclickoutHandler(ev: PointerEvent, bond: PopoverBond) {
+		const trigger = bond.element<Element>('trigger');
+
+		// button is right button do not close the popover
+		if (
+			trigger &&
+			(trigger.contains(ev.target as Node) || trigger === ev.target) &&
+			ev.button === 2
+		) {
+			return;
+		}
+
+		bond.state.close();
+	}
+
+	function contextMenuOutAttachement(node: HTMLElement) {
+		const cleanup = clickout(
+			(ev) => {
+				if (onclickoutside) {
+					onclickoutside(ev, bond);
+					return;
+				}
+
+				onclickoutHandler(ev, bond);
+			},
+			{ type: 'pointerdown' }
+		)(node);
+
+		return cleanup;
+	}
+</script>
+
+<Content
+	{@attach contextMenuOutAttachement}
+	onclickoutside={onclickoutside ?? onclickoutHandler}
+	{...restProps}
+/>

package/dist/components/context-menu/context-menu-content.svelte.d.ts

@@ -0,0 +1,27 @@
+import type { Base } from '../atom';
+import type { HtmlElementTagName } from '../element';
+import { type PopoverContentProps } from '../popover';
+declare function $$render<E extends HtmlElementTagName, B extends Base = Base>(): {
+    props: PopoverContentProps<E, B>;
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<E extends HtmlElementTagName, B extends Base = Base> {
+    props(): ReturnType<typeof $$render<E, B>>['props'];
+    events(): ReturnType<typeof $$render<E, B>>['events'];
+    slots(): ReturnType<typeof $$render<E, B>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <E extends HtmlElementTagName, B extends Base = Base>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<E, B>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<E, B>['props']>, ReturnType<__sveltets_Render<E, B>['events']>, ReturnType<__sveltets_Render<E, B>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<E, B>['bindings']>;
+    } & ReturnType<__sveltets_Render<E, B>['exports']>;
+    <E extends HtmlElementTagName, B extends Base = Base>(internal: unknown, props: ReturnType<__sveltets_Render<E, B>['props']> & {}): ReturnType<__sveltets_Render<E, B>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any, any>['bindings']>;
+}
+declare const ContextMenuContent: $$IsomorphicComponent;
+type ContextMenuContent<E extends HtmlElementTagName, B extends Base = Base> = InstanceType<typeof ContextMenuContent<E, B>>;
+export default ContextMenuContent;