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

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

@@ -1,56 +1,56 @@
-<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
-	import type { HTMLAttributes } from 'svelte/elements';
-	import { InputBond } from './bond.svelte';
-	import {
-		HtmlAtom,
-		type ElementType,
-		type HtmlAtomProps,
-		type Base
-	} from '../atom';
-
-	type Element = ElementType<E>;
-
-	const bond = InputBond.get();
-
-	let {
-		class: klass = '',
-		children = undefined,
-		...restProps
-	}: HtmlAtomProps<E, B> & HTMLAttributes<Element> = $props();
-
-	const placeholderProps = $derived({
-		...bond?.placeholder(),
-		...restProps
-	});
-
-	const shouldShowPlaceholder = $derived.by(() => {
-		const type = bond?.elements?.input?.type ?? '';
-
-		if (['radio', 'checkbox'].includes(type)) {
-			return false;
-		}
-
-		if (['files'].includes(type)) {
-			return !bond?.state.props.files?.length;
-		}
-
-		console.log(!bond?.state.props.value);
-
-		return !bond?.state.props.value;
-	});
-</script>
-
-{#if shouldShowPlaceholder}
-	<HtmlAtom
-		preset="input.placeholder"
-		class={[
-			'pointer-events-none absolute inset-0 flex h-full w-full items-center px-1 leading-1 outline-none',
-			'$preset',
-			klass
-		]}
-		style="left:{bond?.elements?.input?.offsetLeft ?? 0}px"
-		{...placeholderProps}
-	>
-		{@render children?.()}
-	</HtmlAtom>
-{/if}
+<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { InputBond } from './bond.svelte';
+	import {
+		HtmlAtom,
+		type ElementType,
+		type HtmlAtomProps,
+		type Base
+	} from '../atom';
+
+	type Element = ElementType<E>;
+
+	const bond = InputBond.get();
+
+	let {
+		class: klass = '',
+		children = undefined,
+		...restProps
+	}: HtmlAtomProps<E, B> & HTMLAttributes<Element> = $props();
+
+	const placeholderProps = $derived({
+		...bond?.placeholder(),
+		...restProps
+	});
+
+	const shouldShowPlaceholder = $derived.by(() => {
+		const type = bond?.elements?.input?.type ?? '';
+
+		if (['radio', 'checkbox'].includes(type)) {
+			return false;
+		}
+
+		if (['files'].includes(type)) {
+			return !bond?.state.props.files?.length;
+		}
+
+		console.log(!bond?.state.props.value);
+
+		return !bond?.state.props.value;
+	});
+</script>
+
+{#if shouldShowPlaceholder}
+	<HtmlAtom
+		preset="input.placeholder"
+		class={[
+			'pointer-events-none absolute inset-0 flex h-full w-full items-center px-1 leading-1 outline-none',
+			'$preset',
+			klass
+		]}
+		style="left:{bond?.elements?.input?.offsetLeft ?? 0}px"
+		{...placeholderProps}
+	>
+		{@render children?.()}
+	</HtmlAtom>
+{/if}

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

@@ -17,6 +17,7 @@ declare function $$render<E extends keyof HTMLElementTagNameMap = 'div', B exten
         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>>;
     exports: {};
     bindings: "";

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

@@ -1,79 +1,79 @@
-<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
-	import type { HTMLAttributes } from 'svelte/elements';
-	import { InputBond, InputState, type InputStateProps } from './bond.svelte';
-	import { defineProperty, defineState, toClassValue } from '../../utils';
-	import {
-		HtmlAtom,
-		type ElementType,
-		type HtmlAtomProps,
-		type Base
-	} from '../atom';
-
-	type Element = ElementType<E>;
-
-	let {
-		class: klass = '',
-		value,
-		checked = undefined,
-		files = [],
-		preset = 'input',
-		children = undefined,
-		factory = _factory,
-		...restProps
-	}: HtmlAtomProps<E, B> & HTMLAttributes<Element> = $props();
-
-	const bondProps = defineState<InputStateProps>([
-		defineProperty(
-			'value',
-			() => value,
-			(v) => {
-				value = v;
-			}
-		),
-
-		defineProperty(
-			'checked',
-			() => checked,
-			(v) => {
-				checked = v;
-			}
-		),
-
-		defineProperty(
-			'files',
-			() => files,
-			(v) => {
-				files = [...v];
-			}
-		)
-	]);
-	const bond = _factory(bondProps).share();
-
-	const rootProps = $derived({
-		...bond.root(),
-		...restProps
-	});
-
-	function _factory(props: typeof bondProps) {
-		const bondState = new InputState(() => props);
-
-		return new InputBond(bondState);
-	}
-
-	export function getBond() {
-		return bond;
-	}
-</script>
-
-<HtmlAtom
-	{preset}
-	class={[
-		'border-border text-foreground bg-input relative flex h-10 items-center overflow-hidden rounded-md border',
-		'$preset',
-		klass
-	]}
-	{bond}
-	{...rootProps}
->
-	{@render children?.({ input: bond })}
-</HtmlAtom>
+<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { InputBond, InputState, type InputStateProps } from './bond.svelte';
+	import { defineProperty, defineState, toClassValue } from '../../utils';
+	import {
+		HtmlAtom,
+		type ElementType,
+		type HtmlAtomProps,
+		type Base
+	} from '../atom';
+
+	type Element = ElementType<E>;
+
+	let {
+		class: klass = '',
+		value,
+		checked = undefined,
+		files = [],
+		preset = 'input',
+		children = undefined,
+		factory = _factory,
+		...restProps
+	}: HtmlAtomProps<E, B> & HTMLAttributes<Element> = $props();
+
+	const bondProps = defineState<InputStateProps>([
+		defineProperty(
+			'value',
+			() => value,
+			(v) => {
+				value = v;
+			}
+		),
+
+		defineProperty(
+			'checked',
+			() => checked,
+			(v) => {
+				checked = v;
+			}
+		),
+
+		defineProperty(
+			'files',
+			() => files,
+			(v) => {
+				files = [...v];
+			}
+		)
+	]);
+	const bond = _factory(bondProps).share();
+
+	const rootProps = $derived({
+		...bond.root(),
+		...restProps
+	});
+
+	function _factory(props: typeof bondProps) {
+		const bondState = new InputState(() => props);
+
+		return new InputBond(bondState);
+	}
+
+	export function getBond() {
+		return bond;
+	}
+</script>
+
+<HtmlAtom
+	{preset}
+	class={[
+		'border-border text-foreground bg-input relative flex h-10 items-center overflow-hidden rounded-md border',
+		'$preset',
+		klass
+	]}
+	{bond}
+	{...rootProps}
+>
+	{@render children?.({ input: bond })}
+</HtmlAtom>

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

@@ -18,6 +18,7 @@ declare function $$render<E extends keyof HTMLElementTagNameMap = 'div', B exten
         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>>;
     exports: {
         getBond: () => InputBond;

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

@@ -1,113 +1,113 @@
-<script module lang="ts">
-	export type InputPortals = 'input.l0' | 'input.l1' | 'input.l2' | 'input.l3';
-
-	export type InputProps = {
-		value?: ClassValue;
-		files?: File[];
-		date?: Date | null;
-		number?: number;
-		checked?: boolean;
-		class?: string;
-		type?: HTMLInputTypeAttribute | null;
-		preset?: PresetModuleName | (string & {});
-		children?: Snippet<[]>;
-	};
-</script>
-
-<script>
-	import type { Snippet } from 'svelte';
-	import type { HTMLInputTypeAttribute } from 'svelte/elements';
-	import { on } from '../../attachments/event.svelte';
-	import { getPreset } from '../../context';
-	import { cn, toClassValue, type ClassValue } from '../../utils';
-	import type { PresetModuleName } from '../../context/preset.svelte';
-	import { InputBond } from './bond.svelte';
-
-	const bond = InputBond.get();
-
-	let {
-		value = $bindable(),
-		files = $bindable(),
-		date = $bindable(),
-		number = $bindable(),
-		checked = $bindable(),
-		class: klass = '',
-		type = 'text',
-		preset: presetKey = 'input.value',
-		onchange = undefined,
-		oninput = undefined,
-		...restProps
-	}: InputProps = $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
-		});
-	}
-</script>
-
-<input
-	{type}
-	bind:value={
-		() => value,
-		(v) => {
-			value = v;
-			if (bond) {
-				bond.state.props.value = v;
-			}
-		}
-	}
-	class={cn(
-		'h-full w-full flex-1 bg-transparent px-2 leading-1 outline-none',
-		preset?.class,
-		toClassValue(klass, bond)
-	)}
-	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 module lang="ts">
+	export type InputPortals = 'input.l0' | 'input.l1' | 'input.l2' | 'input.l3';
+
+	export type InputProps = {
+		value?: ClassValue;
+		files?: File[];
+		date?: Date | null;
+		number?: number;
+		checked?: boolean;
+		class?: string;
+		type?: HTMLInputTypeAttribute | null;
+		preset?: PresetModuleName | (string & {});
+		children?: Snippet<[]>;
+	};
+</script>
+
+<script>
+	import type { Snippet } from 'svelte';
+	import type { HTMLInputTypeAttribute } from 'svelte/elements';
+	import { on } from '../../attachments/event.svelte';
+	import { getPreset } from '../../context';
+	import { cn, toClassValue, type ClassValue } from '../../utils';
+	import type { PresetModuleName } from '../../context/preset.svelte';
+	import { InputBond } from './bond.svelte';
+
+	const bond = InputBond.get();
+
+	let {
+		value = $bindable(),
+		files = $bindable(),
+		date = $bindable(),
+		number = $bindable(),
+		checked = $bindable(),
+		class: klass = '',
+		type = 'text',
+		preset: presetKey = 'input.value',
+		onchange = undefined,
+		oninput = undefined,
+		...restProps
+	}: InputProps = $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
+		});
+	}
+</script>
+
+<input
+	{type}
+	bind:value={
+		() => value,
+		(v) => {
+			value = v;
+			if (bond) {
+				bond.state.props.value = v;
+			}
+		}
+	}
+	class={cn(
+		'h-full w-full flex-1 bg-transparent px-2 leading-1 outline-none',
+		preset?.class,
+		toClassValue(klass, bond)
+	)}
+	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-value.svelte.d.ts

@@ -14,6 +14,6 @@ import type { Snippet } from 'svelte';
 import type { HTMLInputTypeAttribute } from 'svelte/elements';
 import { type ClassValue } from '../../utils';
 import type { PresetModuleName } from '../../context/preset.svelte';
-declare const InputValue: import("svelte").Component<InputProps, {}, "number" | "date" | "value" | "checked" | "files">;
+declare const InputValue: import("svelte").Component<InputProps, {}, "number" | "value" | "date" | "checked" | "files">;
 type InputValue = ReturnType<typeof InputValue>;
 export default InputValue;

package/dist/components/input/input.stories.svelte

@@ -1,38 +1,38 @@
-<script module>
-	import { defineMeta } from '@storybook/addon-svelte-csf';
-	import { Input as AInput } from '.';
-	import Root from '../root/root.svelte';
-	import { Label } from '../label';
-
-	// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
-	const { Story } = defineMeta({
-		title: 'Atoms/Input',
-		// 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">
-</script>
-
-<Story name="Input" args={{}}>
-	<Root class="p-4">
-		<div class="flex flex-col">
-			<Label for="price-input">Price</Label>
-			<AInput.Root>
-				<AInput.Icon class="text-foreground box-content px-0">$</AInput.Icon>
-				<AInput.Value id="price-input" class="border-border box-content border-x px-2 py-2">
-					<!--  -->
-				</AInput.Value>
-				<AInput.Icon class="text-foreground box-content px-2">.00</AInput.Icon>
-
-				<AInput.Placeholder class="text-foreground/20 pl-2">Hello World</AInput.Placeholder>
-			</AInput.Root>
-		</div>
-	</Root>
-</Story>
+<script module>
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import { Input as AInput } from '.';
+	import Root from '../root/root.svelte';
+	import { Label } from '../label';
+
+	// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+	const { Story } = defineMeta({
+		title: 'Atoms/Input',
+		// 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">
+</script>
+
+<Story name="Input" args={{}}>
+	<Root class="p-4">
+		<div class="flex flex-col">
+			<Label for="price-input">Price</Label>
+			<AInput.Root>
+				<AInput.Icon class="text-foreground box-content px-0">$</AInput.Icon>
+				<AInput.Value id="price-input" class="border-border box-content border-x px-2 py-2">
+					<!--  -->
+				</AInput.Value>
+				<AInput.Icon class="text-foreground box-content px-2">.00</AInput.Icon>
+
+				<AInput.Placeholder class="text-foreground/20 pl-2">Hello World</AInput.Placeholder>
+			</AInput.Root>
+		</div>
+	</Root>
+</Story>

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

@@ -22,6 +22,7 @@ declare function $$render<E extends keyof HTMLElementTagNameMap = 'label', B ext
         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<[]>;

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

@@ -17,6 +17,7 @@ declare function $$render<E extends keyof HTMLElementTagNameMap = 'div', B exten
         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>>;
     exports: {};
     bindings: "";

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

@@ -17,6 +17,7 @@ declare function $$render<E extends keyof HTMLElementTagNameMap = 'div', B exten
         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>>;
     exports: {
         getBond: () => any;

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

@@ -18,6 +18,7 @@ declare function $$render<E extends keyof HTMLElementTagNameMap = 'div', B exten
         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]>;
     exports: {};
     bindings: "";

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

@@ -17,6 +17,7 @@ declare function $$render<E extends keyof HTMLElementTagNameMap = 'div', B exten
         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>>;
     exports: {};
     bindings: "";

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

@@ -24,6 +24,7 @@ declare function $$render<E extends keyof HTMLElementTagNameMap = 'div', B exten
         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>);
     } & {
         id: RootPortals | (string & {});
         children?: Snippet;

package/dist/components/portal/teleport.svelte.d.ts

@@ -21,6 +21,7 @@ declare function $$render<E extends HtmlElementTagName = 'div', B extends Base =
         bond?: import("../..").Bond;
         base?: B | undefined;
         preset?: import("../..").ModuleName | (string & {});
+        variants?: import("../..").VariantDefinition<any> | ((bond: import("../..").Bond, variantProps: Record<string, any>) => Record<string, any>);
     } & {
         portal?: string;
     } & HTMLAttributes<HtmlElementType<E>>;