@svelte-atoms/core 1.0.0-alpha.25 → 1.0.0-alpha.27

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

@@ -1,85 +1,66 @@
-<script module lang="ts">
-	export type CollapsibleRootProps<
-		E extends keyof HTMLElementTagNameMap = 'div',
-		B extends Base = Base
-	> = Override<
-		HtmlAtomProps<E, B>,
-		{
-			children?: Snippet<[{ collapsible: CollapsibleBond }]>;
-		}
-	> & {
-		open?: boolean;
-		value?: string;
-		data?: any;
-		disabled?: boolean;
-		factory?: Factory<CollapsibleBond>;
-	};
-</script>
-
-<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
-	import type { Snippet } from 'svelte';
-	import { nanoid } from 'nanoid';
-	import type { Factory, Override } from '../../types';
-	import { defineProperty, defineState } from '../../utils';
-	import { CollapsibleBond, CollapsibleState, type CollapsibleStateProps } from './bond.svelte';
-	import { HtmlAtom, type HtmlAtomProps, type Base } from '../atom';
-
-	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)
-	]);
-
-	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={['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,
+		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)
+	]);
+
+	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>

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

@@ -1,18 +1,6 @@
-export type CollapsibleRootProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> = Override<HtmlAtomProps<E, B>, {
-    children?: Snippet<[{
-        collapsible: CollapsibleBond;
-    }]>;
-}> & {
-    open?: boolean;
-    value?: string;
-    data?: any;
-    disabled?: boolean;
-    factory?: Factory<CollapsibleBond>;
-};
-import type { Snippet } from 'svelte';
-import type { Factory, Override } from '../../types';
+import { type Base } from '../atom';
 import { CollapsibleBond } from './bond.svelte';
-import { type HtmlAtomProps, type Base } from '../atom';
+import type { CollapsibleRootProps } from './types';
 declare function $$render<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(): {
     props: CollapsibleRootProps<E, B>;
     exports: {

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

@@ -1,2 +1,3 @@
+export * from './types';
 export * as Collapsible from './atoms';
 export { CollapsibleBond, CollapsibleState, type CollapsibleStateProps, type CollapsibleDomElements } from './bond.svelte';

package/dist/components/collapsible/index.js

@@ -1,2 +1,3 @@
+export * from './types';
 export * as Collapsible from './atoms';
 export { CollapsibleBond, CollapsibleState } from './bond.svelte';

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

@@ -0,0 +1,54 @@
+import type { Snippet } from 'svelte';
+import type { HtmlAtomProps, Base } from '../atom';
+import type { Factory, Override } from '../../types';
+import type { CollapsibleBond } from './bond.svelte';
+/**
+ * Extend this interface to add custom collapsible root properties in your application.
+ */
+export interface CollapsibleRootExtendProps {
+}
+/**
+ * Extend this interface to add custom collapsible header properties in your application.
+ */
+export interface CollapsibleHeaderExtendProps {
+}
+/**
+ * Extend this interface to add custom collapsible body properties in your application.
+ */
+export interface CollapsibleBodyExtendProps {
+}
+/**
+ * Extend this interface to add custom collapsible indicator properties in your application.
+ */
+export interface CollapsibleIndicatorExtendProps {
+}
+export type CollapsibleRootProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> = Override<HtmlAtomProps<E, B>, {
+    children?: Snippet<[{
+        collapsible: CollapsibleBond;
+    }]>;
+}> & 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;
+/**
+ * @deprecated Use CollapsibleRootExtendProps instead
+ */
+export type CollapsibleExtendProps = CollapsibleRootExtendProps;

package/dist/components/collapsible/types.js

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

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

@@ -1,5 +1,9 @@
 export { default as Root } from './combobox-root.svelte';
 export { default as Trigger } from './combobox-trigger.svelte';
 export { default as Item } from './compobox-item.svelte';
-export { default as Input } from './combobox-input.svelte';
+/**
+ * @deprecated use Combobox.Control instead
+ */
+export { default as Input } from './combobox-control.svelte';
+export { default as Control } from './combobox-control.svelte';
 export { Arrow, Indicator, List } from '../dropdown/atoms';

package/dist/components/combobox/atoms.js

@@ -1,5 +1,9 @@
 export { default as Root } from './combobox-root.svelte';
 export { default as Trigger } from './combobox-trigger.svelte';
 export { default as Item } from './compobox-item.svelte';
-export { default as Input } from './combobox-input.svelte';
+/**
+ * @deprecated use Combobox.Control instead
+ */
+export { default as Input } from './combobox-control.svelte';
+export { default as Control } from './combobox-control.svelte';
 export { Arrow, Indicator, List } from '../dropdown/atoms';

package/dist/components/combobox/{combobox-input.svelte → combobox-control.svelte}

@@ -37,10 +37,10 @@
 	);
 </script>
 
-<Input.Value
+<Input.Control
 	{value}
-	preset="combobox.input"
-	class={['flex-1 py-1', '$preset', klass]}
+	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)}

package/dist/components/combobox/{combobox-input.svelte.d.ts → combobox-control.svelte.d.ts}

@@ -1,4 +1,4 @@
-declare const ComboboxInput: import("svelte").Component<{
+declare const ComboboxControl: import("svelte").Component<{
     class?: string;
     children?: any;
     onmount?: any;
@@ -8,5 +8,5 @@ declare const ComboboxInput: import("svelte").Component<{
     exit?: any;
     initial?: any;
 } & Record<string, any>, {}, "">;
-type ComboboxInput = ReturnType<typeof ComboboxInput>;
-export default ComboboxInput;
+type ComboboxControl = ReturnType<typeof ComboboxControl>;
+export default ComboboxControl;

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

@@ -1,68 +1,65 @@
-<script module lang="ts">
-	export type ComboboxRootProps = {};
-</script>
-
-<script lang="ts" generics="D">
-	import { defineProperty, defineState } from '../../utils';
-	import { ComboboxBond, ComboboxBondState, type ComboboxBondProps } from './bond.svelte';
-
-	let {
-		open = $bindable(false),
-		value = $bindable(),
-		values = $bindable(),
-		query = $bindable(),
-		text = $bindable(),
-		multiple = false,
-		disabled = false,
-		placements = ['bottom-start', 'bottom-end', 'top-start', 'top-end'],
-		placement = 'bottom-start',
-		offset = 4,
-		factory = _factory,
-		children = undefined,
-		...restProps
-	} = $props();
-
-	const bondProps = defineState<ComboboxBondProps>(
-		[
-			defineProperty(
-				'open',
-				() => open,
-				(v) => {
-					open = v;
-				}
-			),
-			defineProperty(
-				'values',
-				() => (multiple ? values : [value]),
-				(v) => {
-					values = v;
-					value = v[0];
-				}
-			),
-			defineProperty(
-				'query',
-				() => query,
-				(v) => (query = v)
-			),
-			defineProperty(
-				'text',
-				() => text,
-				(v) => (text = 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(),
+		query = $bindable(),
+		text = $bindable(),
+		multiple = false,
+		disabled = false,
+		placements = ['bottom-start', 'bottom-end', 'top-start', 'top-end'],
+		placement = 'bottom-start',
+		offset = 4,
+		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(
+				'query',
+				() => query,
+				(v) => (query = v)
+			),
+			defineProperty(
+				'text',
+				() => text,
+				(v) => (text = 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

@@ -1,22 +1,9 @@
-export type ComboboxRootProps = {};
-import { ComboboxBond, type ComboboxBondProps } from './bond.svelte';
+import type { ComboboxRootProps } from './types';
+import { ComboboxBond } from './bond.svelte';
 declare function $$render<D>(): {
-    props: {
-        open?: boolean;
-        value?: any;
-        values?: any;
-        query?: any;
-        text?: any;
-        multiple?: boolean;
-        disabled?: boolean;
-        placements?: any[];
-        placement?: string;
-        offset?: number;
-        factory?: (props: ComboboxBondProps) => ComboboxBond<D>;
-        children?: any;
-    } & Record<string, any>;
+    props: ComboboxRootProps;
     exports: {
-        getBond: () => ComboboxBond<D>;
+        getBond: () => ComboboxBond<unknown>;
     };
     bindings: "values" | "value" | "text" | "open" | "query";
     slots: {};
@@ -28,7 +15,7 @@ declare class __sveltets_Render<D> {
     slots(): ReturnType<typeof $$render<D>>['slots'];
     bindings(): "values" | "value" | "text" | "open" | "query";
     exports(): {
-        getBond: () => ComboboxBond<D>;
+        getBond: () => ComboboxBond<unknown>;
     };
 }
 interface $$IsomorphicComponent {

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

@@ -27,7 +27,7 @@
 	{as}
 	{bond}
 	preset="dropdown.trigger"
-	class={['h-8 w-40', '$preset', klass]}
+	class={['border-border h-8 w-40', '$preset', klass]}
 	enter={enter?.bind(bond.state)}
 	exit={exit?.bind(bond.state)}
 	initial={initial?.bind(bond.state)}

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

@@ -55,7 +55,7 @@
 	}}
 	{bond}
 	preset="combobox.item"
-	class={['$preset', klass]}
+	class={['border-border', '$preset', klass]}
 	enter={enter?.bind(bond.state)}
 	exit={exit?.bind(bond.state)}
 	initial={initial?.bind(bond.state)}

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

@@ -1 +1,2 @@
 export * as Combobox from './atoms';
+export * from './types';

package/dist/components/combobox/index.js

@@ -1 +1,2 @@
 export * as Combobox from './atoms';
+export * from './types';

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

@@ -0,0 +1,25 @@
+import type { Snippet } from 'svelte';
+import type { HtmlAtomProps, Base } from '../atom';
+import type { Factory } from '../../types';
+import type { ComboboxBond } from './bond.svelte';
+/**
+ * Extend this interface to add custom combobox properties in your application.
+ */
+export interface ComboboxExtendProps {
+}
+export interface ComboboxRootProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends Omit<HtmlAtomProps<E, B>, 'children'>, ComboboxExtendProps {
+    open?: boolean;
+    value?: unknown;
+    values?: unknown[];
+    query?: string;
+    text?: string;
+    multiple?: boolean;
+    disabled?: boolean;
+    placements?: string[];
+    placement?: string;
+    offset?: number;
+    factory?: Factory<ComboboxBond>;
+    children?: Snippet<[{
+        combobox: ComboboxBond;
+    }]>;
+}

package/dist/components/combobox/types.js

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

package/dist/components/container/container.svelte

@@ -42,7 +42,7 @@
 		};
 	}}
 	preset="container"
-	class={['$preset', klass]}
+	class={['border-border', '$preset', klass]}
 	style={[containerTypeStype, containerNameStyle].filter(Boolean).join('; ')}
 	onmount={onmount?.bind(null)}
 	ondestroy={ondestroy?.bind(null)}

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

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

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

@@ -0,0 +1,8 @@
+import type { HtmlAtomProps, Base } from '../atom';
+/**
+ * Extend this interface to add custom contextmenu properties in your application.
+ */
+export interface ContextMenuExtendProps {
+}
+export interface ContextMenuTriggerProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends HtmlAtomProps<E, B>, ContextMenuExtendProps {
+}

package/dist/components/contextmenu/types.js

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

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

@@ -1,44 +1,37 @@
-<script module lang="ts">
-	export type DatagridBodyProps<
-		E extends HtmlElementTagName,
-		B extends Base = Base
-	> = HtmlAtomProps<E, B> & {
-		children?: Snippet<[{ datagrid?: DataGridBond<E> }]>;
-	};
-</script>
-
-<script lang="ts" generics="E extends HtmlElementTagName, B extends Base = Base">
-	import type { Snippet } from 'svelte';
-	import { DataGridBond } from './bond.svelte';
-	import { HtmlAtom, type HtmlAtomProps, type Base } from '../atom';
-	export type { HtmlElementTagName } from '../element';
-
-	const bond = DataGridBond.get();
-
-	let {
-		class: klass = '',
-		children = undefined,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = undefined,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
-		...restProps
-	}: DatagridBodyProps<E, B> = $props();
-</script>
-
-<HtmlAtom
-	{bond}
-	preset="datagrid.body"
-	class={['$preset', klass, 'contents']}
-	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?.({ datagrid: bond })}
-</HtmlAtom>
+<script lang="ts" generics="T, E extends HtmlElementTagName, B extends Base = Base">
+	import type { DatagridBodyProps } from './types';
+	import { DataGridBond } from './bond.svelte';
+	import { HtmlAtom, type Base } from '../atom';
+	import type { HtmlElementTagName } from '../element';
+	export type { HtmlElementTagName } from '../element';
+	export type { DatagridBodyProps } from './types';
+
+	const bond = DataGridBond.get();
+
+	let {
+		class: klass = '',
+		children = undefined,
+		onmount = undefined,
+		ondestroy = undefined,
+		animate = undefined,
+		enter = undefined,
+		exit = undefined,
+		initial = undefined,
+		...restProps
+	}: DatagridBodyProps<T, E, B> = $props();
+</script>
+
+<HtmlAtom
+	{bond}
+	preset="datagrid.body"
+	class={['border-border', '$preset', klass, 'contents']}
+	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?.({ datagrid: bond })}
+</HtmlAtom>