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

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/root/root.svelte

@@ -1,103 +1,121 @@
-<script module lang="ts">
-	export type RootPortals = 'root.l0' | 'root.l1' | 'root.l2' | 'root.l3';
-</script>
-
-<script lang="ts">
-	import { cn, defineState, defineProperty } from '../../utils';
-	import { RootBond, RootBondState, type RootStateProps } from './bond.svelte';
-	import { Portal, ActivePortal, Portals } from '../portal';
-	import { Stack } from '../stack';
-	import { HtmlAtom } from '../atom';
-	import { HtmlElement, MathmlElement, SvgElement } from '../element';
-
-	let { class: klass = '', children = undefined, portals = undefined, ...restProps } = $props();
-
-	let html: typeof HtmlElement | undefined = HtmlElement;
-	let svg: typeof SvgElement | undefined = undefined;
-	let mathml: typeof MathmlElement | undefined = undefined;
-
-	type Renderers = {
-		html?: typeof HtmlElement;
-		svg?: typeof SvgElement;
-		mathml?: typeof MathmlElement;
-	};
-
-	const renderers = defineState<Renderers>([
-		defineProperty('html', () => {
-			if (!html) {
-				import('../element/html-element.svelte').then((mod) => {
-					html = mod.default;
-				});
-			}
-
-			return html;
-		}),
-		defineProperty('svg', () => {
-			if (!svg) {
-				import('../element/svg-element.svelte').then((mod) => {
-					svg = mod.default;
-				});
-			}
-
-			return svg;
-		}),
-		defineProperty('mathml', () => {
-			if (!mathml) {
-				import('../element/mathml-element.svelte').then((mod) => {
-					mathml = mod.default;
-				});
-			}
-
-			return mathml;
-		})
-	]);
-
-	const bondProps = defineState<RootStateProps>([defineProperty('renderers', () => renderers)]);
-
-	const bondState = new RootBondState(() => bondProps);
-	const bond = new RootBond(bondState).share();
-</script>
-
-<HtmlAtom
-	{@attach (node) => {
-		bond.rootElement = node;
-	}}
-	preset="root"
-	class={cn(
-		'atom-root bg-background text-foreground relative flex w-full flex-1 flex-col items-start font-sans',
-		'$preset',
-		klass
-	)}
-	{...restProps}
->
-	<Portals id="root">
-		{#if portals}
-			{@render portals?.()}
-		{:else}
-			<Stack.Root
-				preset="root.portals"
-				class={['portals pointer-events-none absolute inset-0 z-1 overflow-hidden', '$preset']}
-			>
-				<Portal.Outer base={Stack.Item} id="root.l0">
-					<Portal.Inner />
-				</Portal.Outer>
-
-				<Portal.Outer base={Stack.Item} id="root.l1">
-					<Portal.Inner />
-				</Portal.Outer>
-
-				<Portal.Outer base={Stack.Item} id="root.l2">
-					<Portal.Inner />
-				</Portal.Outer>
-
-				<Portal.Outer base={Stack.Item} id="root.l3">
-					<Portal.Inner />
-				</Portal.Outer>
-			</Stack.Root>
-		{/if}
-
-		<ActivePortal id="root.l0">
-			{@render children?.()}
-		</ActivePortal>
-	</Portals>
-</HtmlAtom>
+<script module lang="ts">
+	export type RootPortals = 'root.l0' | 'root.l1' | 'root.l2' | 'root.l3';
+</script>
+
+<script lang="ts">
+	import { cn, defineState, defineProperty } from '../../utils';
+	import { RootBond, RootBondState, type RootStateProps } from './bond.svelte';
+	import { Portal, ActivePortal, Portals } from '../portal';
+	import { Stack } from '../stack';
+	import { HtmlAtom } from '../atom';
+	import { HtmlElement, MathmlElement, SvgElement } from '../element';
+
+	let {
+		class: klass = '',
+		base = undefined,
+		children = undefined,
+		portals = undefined,
+		...restProps
+	} = $props();
+
+	let html: typeof HtmlElement | undefined = HtmlElement;
+	let svg: typeof SvgElement | undefined = undefined;
+	let mathml: typeof MathmlElement | undefined = undefined;
+
+	type Renderers = {
+		html?: typeof HtmlElement;
+		svg?: typeof SvgElement;
+		mathml?: typeof MathmlElement;
+	};
+
+	const renderers = defineState<Renderers>([
+		defineProperty('html', () => {
+			if (!html) {
+				import('../element/html-element.svelte').then((mod) => {
+					html = mod.default;
+				});
+			}
+
+			return html;
+		}),
+		defineProperty('svg', () => {
+			if (!svg) {
+				import('../element/svg-element.svelte').then((mod) => {
+					svg = mod.default;
+				});
+			}
+
+			return svg;
+		}),
+		defineProperty('mathml', () => {
+			if (!mathml) {
+				import('../element/mathml-element.svelte').then((mod) => {
+					mathml = mod.default;
+				});
+			}
+
+			return mathml;
+		})
+	]);
+
+	const bondProps = defineState<RootStateProps>([defineProperty('renderers', () => renderers)]);
+
+	const bondState = new RootBondState(() => bondProps);
+	const bond = new RootBond(bondState).share();
+</script>
+
+<Portals id="root">
+	<HtmlAtom
+		{@attach (node) => {
+			bond.rootElement = node;
+		}}
+		{base}
+		preset="root"
+		class={cn(
+			'atom-root bg-background text-foreground relative flex w-full flex-1 flex-col items-start font-sans',
+			'$preset',
+			klass
+		)}
+		{...restProps}
+	>
+		{#if portals}
+			{@render portals?.()}
+		{:else}
+			<Portal.Outer
+				base={Stack.Item}
+				id="root.l0"
+				class="pointer-events-none absolute inset-0 z-10 overflow-hidden"
+			>
+				<Portal.Inner />
+			</Portal.Outer>
+
+			<Portal.Outer
+				base={Stack.Item}
+				id="root.l1"
+				class="pointer-events-none absolute inset-0 z-10 overflow-hidden"
+			>
+				<Portal.Inner />
+			</Portal.Outer>
+
+			<Portal.Outer
+				base={Stack.Item}
+				id="root.l2"
+				class="pointer-events-none absolute inset-0 z-10 overflow-hidden"
+			>
+				<Portal.Inner />
+			</Portal.Outer>
+
+			<Portal.Outer
+				base={Stack.Item}
+				id="root.l3"
+				class="pointer-events-none absolute inset-0 z-10 overflow-hidden"
+			>
+				<Portal.Inner />
+			</Portal.Outer>
+		{/if}
+
+		<ActivePortal id="root.l0">
+			{@render children?.()}
+		</ActivePortal>
+	</HtmlAtom>
+</Portals>

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

@@ -1,6 +1,7 @@
 export type RootPortals = 'root.l0' | 'root.l1' | 'root.l2' | 'root.l3';
 declare const Root: import("svelte").Component<{
     class?: string;
+    base?: any;
     children?: any;
     portals?: any;
 } & Record<string, any>, {}, "">;

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/runes/index.d.ts

@@ -1,2 +1,5 @@
 export { colorScheme, type ColorScheme } from './color-scheme.svelte';
+export { reducedMotion } from './reduced-motion.svelte';
+export { container } from './container.svelte';
+export { type Viewport, viewport } from './viewport.svelte';
 export { mounted } from './lifecycles.svelte';

package/dist/runes/index.js

@@ -1,2 +1,5 @@
 export { colorScheme } from './color-scheme.svelte';
+export { reducedMotion } from './reduced-motion.svelte';
+export { container } from './container.svelte';
+export { viewport } from './viewport.svelte';
 export { mounted } from './lifecycles.svelte';

package/dist/runes/reduced-motion.svelte.d.ts

@@ -0,0 +1,23 @@
+/**
+ * A rune that tracks the user's motion preferences via the `prefers-reduced-motion` media query.
+ *
+ * @returns An object with a `current` getter that returns `true` if the user prefers reduced motion, `false` otherwise.
+ *
+ * @example
+ * ```svelte
+ * <script>
+ *   import { reducedMotion } from '@svelte-atoms/core';
+ *
+ *   const motion = reducedMotion();
+ * </script>
+ *
+ * {#if motion.current}
+ *   <div>Animations disabled</div>
+ * {:else}
+ *   <div class="animated">Animations enabled</div>
+ * {/if}
+ * ```
+ */
+export declare function reducedMotion(): {
+    readonly current: boolean;
+};

package/dist/runes/reduced-motion.svelte.js

@@ -0,0 +1,41 @@
+/**
+ * A rune that tracks the user's motion preferences via the `prefers-reduced-motion` media query.
+ *
+ * @returns An object with a `current` getter that returns `true` if the user prefers reduced motion, `false` otherwise.
+ *
+ * @example
+ * ```svelte
+ * <script>
+ *   import { reducedMotion } from '@svelte-atoms/core';
+ *
+ *   const motion = reducedMotion();
+ * </script>
+ *
+ * {#if motion.current}
+ *   <div>Animations disabled</div>
+ * {:else}
+ *   <div class="animated">Animations enabled</div>
+ * {/if}
+ * ```
+ */
+export function reducedMotion() {
+    let prefersReduced = $state(false);
+    $effect(() => {
+        if (typeof window === 'undefined')
+            return;
+        const handleChange = (ev) => {
+            prefersReduced = ev.matches;
+        };
+        const media = window.matchMedia('(prefers-reduced-motion: reduce)');
+        media.addEventListener('change', handleChange);
+        prefersReduced = media.matches;
+        return () => {
+            media.removeEventListener('change', handleChange);
+        };
+    });
+    return {
+        get current() {
+            return prefersReduced;
+        }
+    };
+}

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) {

package/dist/utils/variant.d.ts

@@ -0,0 +1,213 @@
+/**
+ * Variant System for @svelte-atoms/core
+ *
+ * A simple, single-function approach to defining component variants.
+ * Define variants once, use everywhere with full type safety and bond state access.
+ *
+ * Goals:
+ * 1. Single function returns all variants for a component
+ * 2. Access internal component state (via bond) for reactive variants
+ * 3. Return both classes AND other attributes (aria, data, etc.)
+ * 4. Type-safe with autocompletion
+ * 5. No context, no complexity
+ */
+import type { ClassValue } from 'svelte/elements';
+import type { Bond } from '../shared';
+/**
+ * Variant value can be a static value or a function that receives bond
+ */
+export type VariantValue<T = any> = T | ((bond?: Bond | null) => T);
+/**
+ * Variant definition - maps variant keys to their possible values
+ * Each value can return classes and/or attributes
+ */
+export type VariantDefinition<V extends Record<string, Record<string, any>>> = {
+    /** Base classes applied to all variants */
+    class?: ClassValue;
+    /** Variant definitions - each key maps to possible values */
+    variants: V;
+    /** Compound variants - apply when multiple conditions match */
+    compounds?: Array<Partial<{
+        [K in keyof V]: keyof V[K];
+    }> & {
+        class?: ClassValue;
+        [key: string]: any;
+    }>;
+    /** Default values for variants */
+    defaults?: Partial<{
+        [K in keyof V]: keyof V[K];
+    }>;
+};
+/**
+ * Props type for variant function
+ */
+export type VariantProps<V extends Record<string, Record<string, any>>> = Partial<{
+    [K in keyof V]: keyof V[K];
+}> & {
+    bond?: Bond | null;
+};
+/**
+ * Define variants for a component
+ * Returns a function that takes variant props and returns classes + attributes
+ *
+ * @example
+ * ```ts
+ * // Option 1: Static config (no bond access needed)
+ * const buttonVariants = defineVariants({
+ *   class: 'rounded-md font-medium transition-colors',
+ *   variants: {
+ *     variant: {
+ *       primary: 'bg-blue-500 text-white hover:bg-blue-600',
+ *       secondary: 'bg-gray-500 text-white hover:bg-gray-600'
+ *     },
+ *     size: {
+ *       sm: 'px-2 py-1 text-sm',
+ *       md: 'px-4 py-2 text-base',
+ *       lg: 'px-6 py-3 text-lg'
+ *     }
+ *   },
+ *   compounds: [
+ *     {
+ *       variant: 'primary',
+ *       size: 'lg',
+ *       class: 'shadow-lg'
+ *     }
+ *   ],
+ *   defaults: {
+ *     variant: 'primary',
+ *     size: 'md'
+ *   }
+ * });
+ *
+ * // Option 2: Dynamic config (with bond access)
+ * const buttonVariants = defineVariants((bond) => ({
+ *   class: 'rounded-md font-medium transition-colors',
+ *   variants: {
+ *     variant: {
+ *       primary: 'bg-blue-500 text-white hover:bg-blue-600',
+ *       secondary: 'bg-gray-500 text-white hover:bg-gray-600',
+ *       danger: bond?.state?.disabled
+ *         ? 'bg-red-300 text-white'
+ *         : 'bg-red-500 text-white hover:bg-red-600'
+ *     },
+ *     size: {
+ *       sm: 'px-2 py-1 text-sm',
+ *       md: 'px-4 py-2 text-base',
+ *       lg: 'px-6 py-3 text-lg'
+ *     }
+ *   },
+ *   compounds: [
+ *     {
+ *       variant: 'primary',
+ *       size: 'lg',
+ *       class: 'shadow-lg'
+ *     }
+ *   ],
+ *   defaults: {
+ *     variant: 'primary',
+ *     size: 'md'
+ *   }
+ * }));
+ *
+ * // Usage in component:
+ * const props = buttonVariants({ variant: 'primary', size: 'lg', bond });
+ * // Returns: { class: '...' }
+ * ```
+ */
+export declare function defineVariants<V extends Record<string, Record<string, any>>>(config: VariantDefinition<V> | ((bond?: Bond | null) => VariantDefinition<V>)): (bond: Bond, props?: VariantProps<V>) => Record<string, any>;
+/**
+ * Example 1: Simple button variants (static config)
+ *
+ * ```ts
+ * const buttonVariants = defineVariants({
+ *   class: 'rounded-md font-medium transition-colors focus:outline-none focus:ring-2',
+ *   variants: {
+ *     variant: {
+ *       primary: 'bg-blue-500 text-white hover:bg-blue-600',
+ *       secondary: 'bg-gray-200 text-gray-900 hover:bg-gray-300',
+ *       ghost: 'hover:bg-gray-100'
+ *     },
+ *     size: {
+ *       sm: 'px-2 py-1 text-sm',
+ *       md: 'px-4 py-2',
+ *       lg: 'px-6 py-3 text-lg'
+ *     }
+ *   },
+ *   defaultVariants: {
+ *     variant: 'primary',
+ *     size: 'md'
+ *   }
+ * });
+ *
+ * // In component:
+ * let { variant, size, ...rest } = $props();
+ * const variantProps = buttonVariants({ variant, size });
+ *
+ * <button class={variantProps.class} {...rest}>Click me</button>
+ * ```
+ */
+/**
+ * Example 2: Reactive variants with bond state (function-based config)
+ *
+ * ```ts
+ * const buttonVariants = defineVariants((bond) => ({
+ *   class: 'rounded-md font-medium transition-colors',
+ *   variants: {
+ *     variant: {
+ *       primary: 'bg-blue-500 text-white hover:bg-blue-600',
+ *       secondary: 'bg-gray-500 text-white hover:bg-gray-600',
+ *       // Access bond in the config function itself
+ *       danger: bond?.state?.disabled
+ *         ? 'bg-red-300 text-white'
+ *         : 'bg-red-500 text-white hover:bg-red-600'
+ *     },
+ *     size: {
+ *       sm: 'px-2 py-1 text-sm',
+ *       md: 'px-4 py-2',
+ *       lg: 'px-6 py-3 text-lg'
+ *     }
+ *   },
+ *   defaults: {
+ *     variant: 'primary',
+ *     size: 'md'
+ *   }
+ * }));
+ *
+ * // In component:
+ * const bond = ButtonBond.get();
+ * const variantProps = buttonVariants({ variant: 'danger', size: 'md', bond });
+ *
+ * <button class={variantProps.class}>Click me</button>
+ * ```
+ */
+/**
+ * Example 3: Accordion with per-variant bond access
+ *
+ * ```ts
+ * const accordionVariants = defineVariants({
+ *   class: 'border rounded-md transition-all',
+ *   variants: {
+ *     state: {
+ *       // Each variant can also be a function receiving bond
+ *       open: (bond) => ({
+ *         class: bond?.state?.isOpen ? 'bg-blue-50 border-blue-200' : 'bg-white',
+ *         'aria-expanded': bond?.state?.isOpen,
+ *         'data-state': bond?.state?.isOpen ? 'open' : 'closed'
+ *       }),
+ *       disabled: (bond) => ({
+ *         class: bond?.state?.disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer',
+ *         'aria-disabled': bond?.state?.disabled
+ *       })
+ *     }
+ *   }
+ * });
+ *
+ * // In component:
+ * const bond = AccordionBond.get();
+ * const variantProps = accordionVariants({ state: 'open', bond });
+ *
+ * <div {...variantProps}>Content</div>
+ * ```
+ */
+export type ExtractVariants<T extends (...args: any[]) => any> = Parameters<T>[0];
+export type VariantPropsType<T> = T extends VariantDefinition<infer V> ? VariantProps<V> : Record<string, any>;