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

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

@@ -1,2 +1,3 @@
 export * as Input from './atoms';
 export * from './bond.svelte';
+export * from './types';

package/dist/components/input/index.js

@@ -1,2 +1,3 @@
 export * as Input from './atoms';
 export * from './bond.svelte';
+export * from './types';

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

@@ -1,107 +1,103 @@
-<script module lang="ts">
-	export type InputPortals = 'input.l0' | 'input.l1' | 'input.l2' | 'input.l3';
-</script>
-
-<script lang="ts" generics="B extends Base = Base">
-	import { on } from '../../attachments/event.svelte';
-	import { getPreset } from '../../context';
-	import { cn, toClassValue } from '../../utils';
-	import type { PresetModuleName } from '../../context/preset.svelte';
-	import type { Base } from '../atom';
-	import { InputBond } from './bond.svelte';
-	import type { InputControlProps } from './types';
-
-	const bond = InputBond.get();
-
-	let {
-		value = $bindable(),
-		files = $bindable(),
-		date = $bindable(),
-		number = $bindable(),
-		checked = $bindable(),
-		class: klass = '',
-		type = 'text',
-		preset: presetKey = 'input.control',
-		onchange = undefined,
-		oninput = undefined,
-		...restProps
-	}: InputControlProps<B> = $props();
-
-	const preset = getPreset(presetKey as PresetModuleName)?.apply(bond, [bond]);
-
-	const valueProps = $derived({
-		...(bond?.input?.() ?? {}),
-		...restProps
-	});
-
-	function handleChange(ev: CustomEvent) {
-		if (!onchange) return;
-
-		onchange?.(ev, {
-			value: value,
-			files: files,
-			date: date,
-			number: number,
-			checked: checked,
-			event: ev
-		});
-	}
-
-	function handleInput(ev: InputEvent) {
-		if (!oninput) return;
-
-		const currentTarget = ev.currentTarget as HTMLInputElement;
-
-		if (type === 'number') {
-			number = currentTarget.valueAsNumber;
-		}
-
-		if (type === 'date' || type == 'time' || type === 'datetime-local' || type === 'date-local') {
-			date = currentTarget.valueAsDate;
-		}
-
-		oninput?.(ev, {
-			value: value,
-			files: files,
-			date: date,
-			number: number,
-			checked: checked,
-			event: ev
-		});
-	}
-
-	function toFileList(files: File[]) {
-		const dataTransfer = new DataTransfer();
-		files.forEach((file) => dataTransfer.items.add(file));
-		return dataTransfer.files;
-	}
-</script>
-
-<input
-	bind:value={
-		() => value,
-		(v) => {
-			value = v;
-			if (bond) {
-				bond.state.props.value = v;
-			}
-		}
-	}
-	class={cn(
-		'text-foreground placeholder:text-muted-foreground h-full w-full flex-1 bg-transparent px-2 leading-1 outline-none',
-		preset?.class,
-		toClassValue(klass, bond)
-	)}
-	type={type ?? 'text'}
-	onchange={handleChange}
-	oninput={handleInput}
-	{...valueProps}
-	{@attach (node) => {
-		if (type === 'file') {
-			return on('input', () => {
-				files = Array.from(node.files || []);
-				bond!.state.props.files = files;
-			})(node);
-		}
-	}}
-/>
+<script lang="ts" generics="B extends Base = Base">
+	import { on } from '../../attachments/event.svelte';
+	import { getPreset } from '../../context';
+	import { cn, toClassValue } from '../../utils';
+	import type { PresetModuleName } from '../../context/preset.svelte';
+	import type { Base } from '../atom';
+	import { InputBond } from './bond.svelte';
+	import type { InputControlProps } from './types';
+
+	const bond = InputBond.get();
+
+	let {
+		value = $bindable(),
+		files = $bindable(),
+		date = $bindable(),
+		number = $bindable(),
+		checked = $bindable(),
+		class: klass = '',
+		type = 'text',
+		preset: presetKey = 'input.control',
+		onchange = undefined,
+		oninput = undefined,
+		...restProps
+	}: InputControlProps<B> = $props();
+
+	const preset = getPreset(presetKey as PresetModuleName)?.apply(bond, [bond]);
+
+	const valueProps = $derived({
+		...(bond?.input?.() ?? {}),
+		...restProps
+	});
+
+	function handleChange(ev: CustomEvent) {
+		if (!onchange) return;
+
+		onchange?.(ev, {
+			value: value,
+			files: files,
+			date: date,
+			number: number,
+			checked: checked,
+			event: ev
+		});
+	}
+
+	function handleInput(ev: InputEvent) {
+		if (!oninput) return;
+
+		const currentTarget = ev.currentTarget as HTMLInputElement;
+
+		if (type === 'number') {
+			number = currentTarget.valueAsNumber;
+		}
+
+		if (type === 'date' || type == 'time' || type === 'datetime-local' || type === 'date-local') {
+			date = currentTarget.valueAsDate;
+		}
+
+		oninput?.(ev, {
+			value: value,
+			files: files,
+			date: date,
+			number: number,
+			checked: checked,
+			event: ev
+		});
+	}
+
+	function toFileList(files: File[]) {
+		const dataTransfer = new DataTransfer();
+		files.forEach((file) => dataTransfer.items.add(file));
+		return dataTransfer.files;
+	}
+</script>
+
+<input
+	bind:value={
+		() => value,
+		(v) => {
+			value = v;
+			if (bond) {
+				bond.state.props.value = v;
+			}
+		}
+	}
+	class={cn(
+		'text-foreground placeholder:text-muted-foreground h-full w-full flex-1 bg-transparent px-2 leading-1 outline-none',
+		preset?.class,
+		toClassValue(klass, bond)
+	)}
+	type={type ?? 'text'}
+	onchange={handleChange}
+	oninput={handleInput}
+	{...valueProps}
+	{@attach (node) => {
+		if (type === 'file') {
+			return on('input', () => {
+				files = Array.from(node.files || []);
+				bond!.state.props.files = files;
+			})(node);
+		}
+	}}
+/>

package/dist/components/input/input-control.svelte.d.ts

@@ -1,10 +1,9 @@
-export type InputPortals = 'input.l0' | 'input.l1' | 'input.l2' | 'input.l3';
 import type { Base } from '../atom';
 import type { InputControlProps } from './types';
 declare function $$render<B extends Base = Base>(): {
     props: InputControlProps<B>;
     exports: {};
-    bindings: "number" | "value" | "date" | "files" | "checked";
+    bindings: "number" | "value" | "date" | "checked" | "files";
     slots: {};
     events: {};
 };
@@ -12,7 +11,7 @@ declare class __sveltets_Render<B extends Base = Base> {
     props(): ReturnType<typeof $$render<B>>['props'];
     events(): ReturnType<typeof $$render<B>>['events'];
     slots(): ReturnType<typeof $$render<B>>['slots'];
-    bindings(): "number" | "value" | "date" | "files" | "checked";
+    bindings(): "number" | "value" | "date" | "checked" | "files";
     exports(): {};
 }
 interface $$IsomorphicComponent {

package/dist/components/input/input-icon.svelte.d.ts

@@ -1,4 +1,4 @@
 import { type IconProps } from '../icon';
-declare const InputIcon: import("svelte").Component<IconProps, {}, "">;
+declare const InputIcon: import("svelte").Component<IconProps<import("svelte").Component<{}, {}, string>, "div", import("..").ComponentBase | import("..").SnippetBase>, {}, "">;
 type InputIcon = ReturnType<typeof InputIcon>;
 export default InputIcon;

package/dist/components/input/input-placeholder.svelte.d.ts

@@ -1,24 +1,7 @@
 import type { HTMLAttributes } from 'svelte/elements';
-import { type ElementType, type Base } from '../atom';
+import { type ElementType, type HtmlAtomProps, type Base } from '../atom';
 declare function $$render<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(): {
-    props: Record<string, unknown> & {
-        [key: string]: unknown;
-        class?: import("../..").ClassValue | import("../..").ClassValue[];
-        as?: (string & {}) | E | undefined;
-        global?: boolean;
-        initial?: import("..").NodeFunction<E> | undefined;
-        enter?: import("..").TransitionFunction<E> | undefined;
-        exit?: import("..").TransitionFunction<E> | undefined;
-        animate?: import("..").NodeFunction<E> | undefined;
-        onmount?: import("..").NodeFunction<E> | undefined;
-        ondestroy?: import("..").NodeFunction<E> | undefined;
-        children?: import("svelte").Snippet;
-    } & {
-        bond?: import("../..").Bond;
-        base?: B | undefined;
-        preset?: import("../..").ModuleName | (string & {});
-        variants?: import("../..").VariantDefinition<any> | ((bond: import("../..").Bond, variantProps: Record<string, any>) => Record<string, any>);
-    } & HTMLAttributes<ElementType<E>>;
+    props: HtmlAtomProps<E, B> & HTMLAttributes<ElementType<E>>;
     exports: {};
     bindings: "";
     slots: {};

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

@@ -1,14 +1,24 @@
-import type { HTMLAttributes, HTMLInputTypeAttribute } from 'svelte/elements';
-import type { Base, ElementType, HtmlAtomProps } from '../atom';
+import type { HTMLInputTypeAttribute } from 'svelte/elements';
+import type { Base, HtmlAtomProps } from '../atom';
 import type { Snippet } from 'svelte';
 import type { Override } from '../../types';
-export type InputRootProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> = HtmlAtomProps<E, B> & HTMLAttributes<ElementType<E>> & {
+/**
+ * Extend this interface to add custom input root properties in your application.
+ */
+export interface InputRootExtendProps {
+}
+/**
+ * Extend this interface to add custom input control properties in your application.
+ */
+export interface InputControlExtendProps {
+}
+export interface InputRootProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends HtmlAtomProps<E, B>, InputRootExtendProps {
     value?: string | number | string[] | null;
     checked?: boolean;
     files?: File[] | null;
     children?: Snippet<[]>;
-};
-type InputControlBaseProps = {
+}
+interface InputControlBaseProps {
     value?: any;
     files?: File[];
     date?: Date | null;
@@ -17,6 +27,7 @@ type InputControlBaseProps = {
     class?: string;
     type?: HTMLInputTypeAttribute | null;
     children?: Snippet<[]>;
-};
-export type InputControlProps<B extends Base = Base> = HtmlAtomProps<'input', B> & Override<HTMLAttributes<HTMLInputElement>, InputControlBaseProps>;
+}
+export interface InputControlProps<B extends Base = Base> extends Override<HtmlAtomProps<'input', B>, InputControlBaseProps>, InputControlExtendProps {
+}
 export {};

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

@@ -1 +1,2 @@
 export { default as Label } from './label.svelte';
+export * from './types';

package/dist/components/label/index.js

@@ -1 +1,2 @@
 export { default as Label } from './label.svelte';
+export * from './types';

package/dist/components/label/label.svelte

@@ -1,41 +1,25 @@
-<script module lang="ts">
-	import type { Snippet } from 'svelte';
-
-	export type LabelProps<
-		E extends keyof HTMLElementTagNameMap = 'label',
-		B extends Base = Base
-	> = HtmlAtomProps<E, B> & {
-		for?: string | null;
-		children?: Snippet<[]>;
-	};
-</script>
-
-<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'label', B extends Base = Base">
-	import {
-		HtmlAtom,
-		type ElementType,
-		type HtmlAtomProps,
-		type Base
-	} from '../atom';
-	import type { HTMLAttributes } from 'svelte/elements';
-
-	type Element = ElementType<E>;
-
-	let {
-		class: klass = '',
-		as = 'label' as E,
-		for: labelfor = null,
-		children,
-		...restProps
-	}: LabelProps<E, B> & HTMLAttributes<Element> = $props();
-</script>
-
-<HtmlAtom
-	{as}
-	preset="label"
-	class={['font-medium', '$preset', klass]}
-	for={labelfor}
-	{...restProps}
->
-	{@render children?.()}
-</HtmlAtom>
+<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'label', B extends Base = Base">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { HtmlAtom, type ElementType, type Base } from '../atom';
+	import type { LabelProps } from './types';
+
+	type Element = ElementType<E>;
+
+	let {
+		class: klass = '',
+		as = 'label' as E,
+		for: labelfor = null,
+		children,
+		...restProps
+	}: LabelProps<E, B> & HTMLAttributes<Element> = $props();
+</script>
+
+<HtmlAtom
+	{as}
+	preset="label"
+	class={['font-medium', '$preset', klass]}
+	for={labelfor}
+	{...restProps}
+>
+	{@render children?.()}
+</HtmlAtom>

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

@@ -1,32 +1,8 @@
-import type { Snippet } from 'svelte';
-export type LabelProps<E extends keyof HTMLElementTagNameMap = 'label', B extends Base = Base> = HtmlAtomProps<E, B> & {
-    for?: string | null;
-    children?: Snippet<[]>;
-};
-import { type ElementType, type HtmlAtomProps, type Base } from '../atom';
 import type { HTMLAttributes } from 'svelte/elements';
+import { type ElementType, type Base } from '../atom';
+import type { LabelProps } from './types';
 declare function $$render<E extends keyof HTMLElementTagNameMap = 'label', B extends Base = Base>(): {
-    props: Record<string, unknown> & {
-        [key: string]: unknown;
-        class?: import("../..").ClassValue | import("../..").ClassValue[];
-        as?: (string & {}) | E | undefined;
-        global?: boolean;
-        initial?: import("..").NodeFunction<E> | undefined;
-        enter?: import("..").TransitionFunction<E> | undefined;
-        exit?: import("..").TransitionFunction<E> | undefined;
-        animate?: import("..").NodeFunction<E> | undefined;
-        onmount?: import("..").NodeFunction<E> | undefined;
-        ondestroy?: import("..").NodeFunction<E> | undefined;
-        children?: Snippet;
-    } & {
-        bond?: import("../..").Bond;
-        base?: B | undefined;
-        preset?: import("../..").ModuleName | (string & {});
-        variants?: import("../..").VariantDefinition<any> | ((bond: import("../..").Bond, variantProps: Record<string, any>) => Record<string, any>);
-    } & {
-        for?: string | null;
-        children?: Snippet<[]>;
-    } & HTMLAttributes<ElementType<E>>;
+    props: LabelProps<E, B> & HTMLAttributes<ElementType<E>>;
     exports: {};
     bindings: "";
     slots: {};

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

@@ -0,0 +1,11 @@
+import type { Snippet } from 'svelte';
+import type { HtmlAtomProps, Base } from '../atom';
+/**
+ * Extend this interface to add custom label properties in your application.
+ */
+export interface LabelExtendProps {
+}
+export interface LabelProps<E extends keyof HTMLElementTagNameMap = 'label', B extends Base = Base> extends HtmlAtomProps<E, B>, LabelExtendProps {
+    for?: string | null;
+    children?: Snippet<[]>;
+}

package/dist/components/label/types.js

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

package/dist/components/layer/layer-inner.svelte.d.ts

@@ -1,24 +1,7 @@
 import type { HTMLAttributes } from 'svelte/elements';
-import { type ElementType, type Base } from '../atom';
+import { type ElementType, type HtmlAtomProps, type Base } from '../atom';
 declare function $$render<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(): {
-    props: Record<string, unknown> & {
-        [key: string]: unknown;
-        class?: import("../..").ClassValue | import("../..").ClassValue[];
-        as?: (string & {}) | E | undefined;
-        global?: boolean;
-        initial?: import("..").NodeFunction<E> | undefined;
-        enter?: import("..").TransitionFunction<E> | undefined;
-        exit?: import("..").TransitionFunction<E> | undefined;
-        animate?: import("..").NodeFunction<E> | undefined;
-        onmount?: import("..").NodeFunction<E> | undefined;
-        ondestroy?: import("..").NodeFunction<E> | undefined;
-        children?: import("svelte").Snippet;
-    } & {
-        bond?: import("../..").Bond;
-        base?: B | undefined;
-        preset?: import("../..").ModuleName | (string & {});
-        variants?: import("../..").VariantDefinition<any> | ((bond: import("../..").Bond, variantProps: Record<string, any>) => Record<string, any>);
-    } & HTMLAttributes<ElementType<E>>;
+    props: HtmlAtomProps<E, B> & HTMLAttributes<ElementType<E>>;
     exports: {};
     bindings: "";
     slots: {};

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

@@ -1,24 +1,7 @@
 import type { HTMLAttributes } from 'svelte/elements';
-import { type ElementType, type Base } from '../atom';
+import { type ElementType, type HtmlAtomProps, type Base } from '../atom';
 declare function $$render<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(): {
-    props: Record<string, unknown> & {
-        [key: string]: unknown;
-        class?: import("../../utils").ClassValue | import("../../utils").ClassValue[];
-        as?: (string & {}) | E | undefined;
-        global?: boolean;
-        initial?: import("..").NodeFunction<E> | undefined;
-        enter?: import("..").TransitionFunction<E> | undefined;
-        exit?: import("..").TransitionFunction<E> | undefined;
-        animate?: import("..").NodeFunction<E> | undefined;
-        onmount?: import("..").NodeFunction<E> | undefined;
-        ondestroy?: import("..").NodeFunction<E> | undefined;
-        children?: import("svelte").Snippet;
-    } & {
-        bond?: import("../..").Bond;
-        base?: B | undefined;
-        preset?: import("../..").ModuleName | (string & {});
-        variants?: import("../../utils").VariantDefinition<any> | ((bond: import("../..").Bond, variantProps: Record<string, any>) => Record<string, any>);
-    } & HTMLAttributes<ElementType<E>>;
+    props: HtmlAtomProps<E, B> & HTMLAttributes<ElementType<E>>;
     exports: {
         getBond: () => any;
     };

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

@@ -0,0 +1,11 @@
+import type { HtmlAtomProps, Base } from '../atom';
+import type { Factory } from '../../types';
+import type { LayerBond } from './bond.svelte';
+/**
+ * Extend this interface to add custom layer properties in your application.
+ */
+export interface LayerExtendProps {
+}
+export interface LayerRootProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends HtmlAtomProps<E, B>, LayerExtendProps {
+    factory?: Factory<LayerBond>;
+}

package/dist/components/layer/types.js

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

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

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

package/dist/components/link/types.js

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

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

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

package/dist/components/list/types.js

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

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

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

package/dist/components/menu/index.js

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

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

@@ -0,0 +1,15 @@
+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/menu/types.js

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

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

@@ -1,3 +1,4 @@
 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';
+export * from './types';

package/dist/components/popover/index.js

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

package/dist/components/popover/popover-arrow.svelte

@@ -1,7 +1,7 @@
 <script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
 	import type { HTMLAttributes } from 'svelte/elements';
 	import { animate as motion } from 'motion';
-	import { HtmlAtom, type HtmlAtomProps, type Base } from '../atom';
+	import { HtmlAtom, type Base } from '../atom';
 	import { PopoverBond } from './bond.svelte';
 	import type { PopoverArrowProps } from './types';
 

package/dist/components/popover/popover-arrow.svelte.d.ts

@@ -1,24 +1,8 @@
 import type { HTMLAttributes } from 'svelte/elements';
 import { type Base } from '../atom';
+import type { PopoverArrowProps } from './types';
 declare function $$render<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(): {
-    props: Record<string, unknown> & {
-        [key: string]: unknown;
-        class?: import("../..").ClassValue | import("../..").ClassValue[];
-        as?: (string & {}) | E | undefined;
-        global?: boolean;
-        initial?: import("..").NodeFunction<E> | undefined;
-        enter?: import("..").TransitionFunction<E> | undefined;
-        exit?: import("..").TransitionFunction<E> | undefined;
-        animate?: import("..").NodeFunction<E> | undefined;
-        onmount?: import("..").NodeFunction<E> | undefined;
-        ondestroy?: import("..").NodeFunction<E> | undefined;
-        children?: import("svelte").Snippet;
-    } & {
-        bond?: import("../..").Bond;
-        base?: B | undefined;
-        preset?: import("../..").ModuleName | (string & {});
-        variants?: import("../..").VariantDefinition<any> | ((bond: import("../..").Bond, variantProps: Record<string, any>) => Record<string, any>);
-    } & HTMLAttributes<HTMLElementTagNameMap[E]>;
+    props: PopoverArrowProps<E, B> & HTMLAttributes<HTMLElementTagNameMap[E]>;
     exports: {};
     bindings: "";
     slots: {};

package/dist/components/popover/popover-content.svelte

@@ -3,8 +3,8 @@
 	import { PortalBond, PortalsBond, Teleport } from '../portal';
 	import { HtmlAtom, type Base } from '../atom';
 	import type { HtmlElementTagName, HtmlElementType } from '../element';
-	import { PopoverBond } from './bond.svelte';
 	import { DURATION } from '../../shared';
+	import { PopoverBond } from './bond.svelte';
 	import type { AnimateParams, PopoverContentProps } from './types';
 
 	type Element = HtmlElementType<E>;