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

package/dist/components/drawer/drawer-backdrop.svelte.d.ts

@@ -21,6 +21,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>);
     } & {
         as?: E | undefined;
         class?: string;

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

@@ -28,6 +28,7 @@ declare function $$render<Src extends Component = Component, E extends HtmlEleme
         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<HTMLDivElement>;
     exports: {};
     bindings: "";

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.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/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>>;

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

@@ -14,7 +14,7 @@ declare function $$render<B extends Base = Base>(): {
         checkedContent?: any;
     } & Record<string, any>;
     exports: {};
-    bindings: "group" | "value";
+    bindings: "value" | "group";
     slots: {};
     events: {};
 };
@@ -22,7 +22,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(): "group" | "value";
+    bindings(): "value" | "group";
     exports(): {};
 }
 interface $$IsomorphicComponent {

package/dist/components/stack/stack-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("../..").VariantDefinition<any> | ((bond: import("../..").Bond, variantProps: Record<string, any>) => Record<string, any>);
     } & HTMLAttributes<ElementType<E>>;
     exports: {};
     bindings: "";

package/dist/components/toast/toast-description.svelte.d.ts

@@ -25,6 +25,7 @@ declare function $$render<T extends keyof HTMLElementTagNameMap>(): {
         bond?: import("../..").Bond;
         base?: import("../atom").ComponentBase | import("../atom").SnippetBase | undefined;
         preset?: import("../..").ModuleName | (string & {});
+        variants?: import("../..").VariantDefinition<any> | ((bond: import("../..").Bond, variantProps: Record<string, any>) => Record<string, any>);
     } & {
         as?: T | undefined;
         children?: Snippet<[{

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

@@ -30,6 +30,7 @@ declare function $$render<T extends keyof HTMLElementTagNameMap>(): {
         bond?: import("../..").Bond;
         base?: import("../atom").ComponentBase | import("../atom").SnippetBase | undefined;
         preset?: import("../..").ModuleName | (string & {});
+        variants?: import("../../utils").VariantDefinition<any> | ((bond: import("../..").Bond, variantProps: Record<string, any>) => Record<string, any>);
     } & {
         as?: T | undefined;
         open?: boolean;

package/dist/components/toast/toast-title.svelte.d.ts

@@ -26,6 +26,7 @@ declare function $$render<T extends keyof HTMLElementTagNameMap>(): {
         bond?: import("../..").Bond;
         base?: import("../atom").ComponentBase | import("../atom").SnippetBase | undefined;
         preset?: import("../..").ModuleName | (string & {});
+        variants?: import("../..").VariantDefinition<any> | ((bond: import("../..").Bond, variantProps: Record<string, any>) => Record<string, any>);
     } & {
         as?: T | undefined;
         class?: string;

package/dist/components/tree/tree-header.svelte.d.ts

@@ -27,6 +27,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>);
     } & {
         class?: string;
         open?: boolean;

package/dist/context/preset.svelte.d.ts

@@ -7,6 +7,9 @@ export type PresetEntryRecord = {
     class?: ClassValue;
     as?: string;
     base?: Base;
+    variants?: Record<string, Record<string, any>>;
+    compounds?: Array<Record<string, any>>;
+    defaults?: Record<string, any>;
 };
 export type PresetEntry = (this: Bond | undefined | null, bond: Bond | undefined | null, ...args: any[]) => PresetEntryRecord;
 export type Preset = Record<PresetModuleName, PresetEntry>;

package/dist/utils/index.d.ts

@@ -1,4 +1,5 @@
 export { type StateDefiner, defineProperty, defineState } from './state';
+export { defineVariants, type VariantDefinition, type VariantProps, type VariantValue, type ExtractVariants, type VariantPropsType } from './variant';
 import type { ClassValue as SvelteClassValue } from 'svelte/elements';
 export type ClassValueFunction = <T = unknown>(bond: T, ...args: unknown[]) => SvelteClassValue;
 export type ClassValue = SvelteClassValue | ClassValueFunction | undefined;

package/dist/utils/index.js

@@ -1,4 +1,5 @@
 export { defineProperty, defineState } from './state';
+export { defineVariants } from './variant';
 import clsx from 'clsx';
 import { twMerge } from 'tailwind-merge';
 export function cn(...inputs) {