@svelte-atoms/core 1.0.0-alpha.31 → 1.0.0-alpha.32

package/dist/components/atom/html-atom.svelte

@@ -3,13 +3,19 @@
 	import type { Base, HtmlAtomProps, SnippetBase } from './types';
 	import { RootBond } from '../root';
 	import { HtmlElement } from '../element';
-	import { cn, type ClassValue, type VariantDefinition } from '../../utils';
 	import { getPreset } from '../../context';
 	import type { PresetModuleName } from '../../context/preset.svelte';
-	import type { Bond } from '../../shared';
 	import SnippetRenderer from './snippet-renderer.svelte';
 	import type { Component } from 'svelte';
-	import { call } from '../../utils/function';
+	import type { ClassValue } from '../../utils';
+	import {
+		resolvePreset,
+		resolveLocalVariants,
+		mergeVariants,
+		mergeClassesWithPreset,
+		extractRestProps,
+		isSnippetBase
+	} from './utils';
 
 	type Element = HTMLElementTagNameMap[E];
 
@@ -26,128 +32,41 @@
 		...restProps
 	}: HtmlAtomProps<E, B> & Omit<HTMLAttributes<Element>, 'children'> = $props();
 
-	/**
-	 * Resolve variant definition to props
-	 */
-	// Cache for resolved variants to avoid recomputation
-	// Key: JSON stringified combination of variant props
-	const variantCache = new Map<string, Record<string, any>>();
-
 	// Memoize preset resolution - only recompute when presetKey or bond changes
 	const preset = $derived.by(() => {
 		if (!presetKey) return undefined;
 		const result = getPreset(presetKey as PresetModuleName)?.apply?.(bond, [bond]);
-		// Handle deferred preset result (factory function)
-		return call(result);
+		return resolvePreset(result);
 	});
 
-	const presetProps = $derived(preset?.variants);
+	const presetVariantsProps = $derived(preset?.variants);
 
 	// Resolve local variants - either VariantDefinition or function
-	const localVariants = $derived.by(() => {
-		if (!variants) return undefined;
-
-		// If it's a function, call it directly
-		if (typeof variants === 'function') {
-			return variants(bond as Bond, restProps);
-		}
-
-		// Otherwise it's a VariantDefinition, resolve it
-		return resolveVariants(variants, bond as Bond, restProps);
-	});
+	const localVariants = $derived(resolveLocalVariants(variants, bond, restProps));
 
 	// Merge preset variants with local variants
 	// Memoized to avoid recomputation when inputs haven't changed
 	const mergedVariants = $derived.by(() => {
-		// No variants at all
-		if (!presetProps && !localVariants) return undefined;
-
-		// Only preset variants (raw object from preset)
-		if (presetProps && !localVariants) {
-			// Convert preset variants to VariantDefinition-like structure
-			const variantDef: VariantDefinition<any> = {
-				class: preset?.class ?? '',
-				variants: presetProps,
-				compounds: preset?.compounds ?? [],
-				defaults: preset?.defaults ?? {}
-			};
-			return resolveVariants(variantDef, bond as Bond, restProps);
-		}
-
-		// Only local variants
-		if (!presetProps && localVariants) {
-			return localVariants;
-		}
-
-		// Both exist - merge them
-		// When both preset and local variants exist, we need to merge the resolved props
-		const presetVariantDef: VariantDefinition<any> = {
-			class: preset?.class ?? '',
-			variants: presetProps ?? {},
-			compounds: preset?.compounds ?? [],
-			defaults: preset?.defaults ?? {}
-		};
-
-		const presetResolved = resolveVariants(presetVariantDef, bond as Bond, restProps);
-
-		// Merge the resolved variant props
-		// Local variant classes and attributes override preset
-		const presetClasses = Array.isArray(presetResolved.class)
-			? presetResolved.class
-			: [presetResolved.class];
-		const localClasses = Array.isArray(localVariants?.class)
-			? localVariants.class
-			: [localVariants?.class];
-
-		return {
-			class: [...presetClasses, ...localClasses].filter(Boolean),
-			...presetResolved,
-			...localVariants
-		};
-	});
-
-	const presetClassString = $derived(cn(preset?.class));
-
-	const _klass = $derived.by(() => {
-		const klassStr = cn(klass ?? '');
-		// Check for $preset placeholder first
-		if (!klassStr.includes('$preset')) {
-			// No placeholder - normal merge: variants override direct class
-			return cn(klass, mergedVariants?.class ?? '');
-		}
-
-		// Has placeholder - calculate position and inject preset classes
-		const parts = klassStr.split('$preset');
-
-		// Only keep the last $preset placeholder
-		const beforeLastPlaceholder = parts.slice(0, -1).join('');
-		const afterLastPlaceholder = parts[parts.length - 1];
-
-		// Merge: before + preset + variants + after
-		return cn(
-			beforeLastPlaceholder,
-			presetClassString,
-			mergedVariants?.class ?? '',
-			afterLastPlaceholder
+		return mergeVariants(
+			presetVariantsProps,
+			preset?.class,
+			preset?.compounds,
+			preset?.defaults,
+			localVariants,
+			bond,
+			restProps
 		);
 	});
 
+	const _klass = $derived(
+		mergeClassesWithPreset(klass, preset?.class, mergedVariants?.class as ClassValue)
+	);
+
 	const _base = $derived(base ?? preset?.base);
 	const _as = $derived(as ?? preset?.as);
-	const _restProps = $derived.by(() => {
-		const {
-			class: klassPreset,
-			base,
-			as,
-			variants: presetProps,
-			...restPresetProps
-		} = preset ?? {};
-		const { class: variantClass, ...variantsRestProps } = mergedVariants ?? {};
+	const _restProps = $derived(extractRestProps(preset, mergedVariants, restProps));
 
-		return { ...restPresetProps, ...variantsRestProps, ...restProps };
-	});
-
-	const isSnippet = $derived(typeof _base === 'function' && _base.length === 1 && !_base.prototype);
+	const isSnippet = $derived(isSnippetBase(_base));
 
 	const snippet = $derived(_base as SnippetBase);
 
@@ -165,93 +84,6 @@
 			props: { class: _klass, as: _as, ..._restProps }
 		};
 	}) as { component: Component; props: Record<string, any> };
-
-	function resolveVariants(
-		def: VariantDefinition<any>,
-		bond: Bond | null | undefined,
-		props: Record<string, any>
-	): Record<string, any> {
-		const { variants: variantMap, compounds, defaults, class: baseClass } = def;
-
-		// Merge props with defaults
-		const finalProps = { ...defaults, ...props };
-
-		// Create cache key from final props (only variant-related props)
-		const variantKeys = variantMap ? Object.keys(variantMap) : [];
-		const relevantProps = Object.fromEntries(
-			Object.entries(finalProps).filter(([key]) => variantKeys.includes(key))
-		);
-		const cacheKey = JSON.stringify({ relevantProps, baseClass, compounds });
-
-		// Check cache
-		if (variantCache.has(cacheKey)) {
-			return variantCache.get(cacheKey)!;
-		}
-
-		const classes: ClassValue[] = [];
-		const attributes: Record<string, any> = {};
-
-		// Add base class
-		if (baseClass) classes.push(baseClass);
-
-		// Add variant classes
-		if (variantMap) {
-			for (const [key, value] of Object.entries(finalProps)) {
-				const variantValue = variantMap[key]?.[value as string];
-				if (variantValue !== undefined) {
-					const resolved = typeof variantValue === 'function' ? variantValue(bond) : variantValue;
-
-					if (typeof resolved === 'string') {
-						classes.push(resolved);
-					} else if (typeof resolved === 'object' && resolved !== null) {
-						if ('class' in resolved) {
-							classes.push(resolved.class);
-						}
-						// Add other attributes
-						Object.entries(resolved).forEach(([k, v]) => {
-							if (k !== 'class') {
-								attributes[k] = v;
-							}
-						});
-					}
-				}
-			}
-		}
-
-		// Add compound variants
-		if (compounds) {
-			for (const compound of compounds) {
-				const { class: compoundClass, ...compoundProps } = compound;
-				const matches = Object.entries(compoundProps).every(
-					([key, value]) => finalProps[key] === value
-				);
-				if (matches) {
-					if (compoundClass) classes.push(compoundClass);
-					// Add compound attributes
-					Object.entries(compound).forEach(([k, v]) => {
-						if (k !== 'class' && !Object.keys(compoundProps).includes(k)) {
-							attributes[k] = v;
-						}
-					});
-				}
-			}
-		}
-
-		const result = {
-			class: classes,
-			...attributes
-		};
-
-		// Store in cache (limit cache size to prevent memory leaks)
-		if (variantCache.size > 100) {
-			// Clear oldest entry (first in Map)
-			const firstKey = variantCache.keys().next().value;
-			if (firstKey) variantCache.delete(firstKey);
-		}
-		variantCache.set(cacheKey, result);
-
-		return result;
-	}
 </script>
 
 <renderer.component {...renderer.props}>

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

@@ -12,15 +12,16 @@ export type Base<Args = any> = Args extends Record<string, any> ? ComponentBase
  */
 export interface HtmlAtomExtendProps {
 }
+type Variants = VariantDefinition<any> | ((bond: Bond, variantProps: Record<string, any>) => Record<string, any>);
 export interface HtmlAtomProps<E extends HtmlElementTagName = HtmlElementTagName, B extends Base<any> = Base> extends HtmlElementProps<E>, HtmlAtomExtendProps {
     bond?: Bond;
-    base?: B;
+    base?: B | undefined;
     preset?: PresetModuleName | (string & {});
     /**
      * Variant definition or function to resolve variants
      * - VariantDefinition: Static variant config with base, variants, compoundVariants, defaultVariants
      * - Function: Dynamic function that receives bond and props, returns props (legacy)
      */
-    variants?: VariantDefinition<any> | ((bond: Bond, variantProps: Record<string, any>) => Record<string, any>);
+    variants?: Variants;
 }
 export type { ElementType };

package/dist/components/atom/utils.d.ts

@@ -0,0 +1,37 @@
+import type { Bond } from '../../shared';
+import { type ClassValue, type VariantDefinition } from '../../utils';
+type ResolvedProps = Record<string, unknown>;
+type AnyVariantDefinition = VariantDefinition<any>;
+/**
+ * Resolves preset to its final value, handling both direct values and factory functions
+ */
+export declare function resolvePreset<T>(preset: T | (() => T) | undefined): T | undefined;
+/**
+ * Pure function to resolve variant definition to props
+ * Caches results to avoid recomputation with same inputs
+ */
+export declare function resolveVariants(def: AnyVariantDefinition, bond: Bond | null | undefined, props: Record<string, unknown>): ResolvedProps;
+/**
+ * Pure function to merge preset and local variant definitions
+ * Returns merged variant props with local overriding preset
+ */
+export declare function mergeVariants(presetVariants: Record<string, any> | undefined, presetClass: ClassValue | undefined, presetCompounds: Array<Record<string, any>> | undefined, presetDefaults: Record<string, any> | undefined, localVariants: ResolvedProps | undefined, bond: Bond | null | undefined, props: Record<string, unknown>): ResolvedProps | undefined;
+/**
+ * Pure function to merge classes with $preset placeholder support
+ * Handles the special $preset placeholder for precise positioning of preset classes
+ */
+export declare function mergeClassesWithPreset(userClass: string | ClassValue | undefined, presetClass: ClassValue | undefined, variantClass: ClassValue | undefined): string;
+/**
+ * Pure function to resolve local variants
+ * Handles both function-based and VariantDefinition-based variants
+ */
+export declare function resolveLocalVariants(variants: any, bond: Bond | null | undefined, props: Record<string, unknown>): ResolvedProps | undefined;
+/**
+ * Pure function to extract rest props by filtering out preset and variant-specific props
+ */
+export declare function extractRestProps(preset: Record<string, any> | undefined, mergedVariants: ResolvedProps | undefined, restProps: Record<string, unknown>): Record<string, unknown>;
+/**
+ * Pure function to check if a base is a snippet
+ */
+export declare function isSnippetBase(base: unknown): boolean;
+export {};

package/dist/components/atom/utils.js

@@ -0,0 +1,208 @@
+import { cn } from '../../utils';
+import { call } from '../../utils/function';
+/**
+ * Cache for resolved variants to avoid recomputation
+ * Key: JSON stringified combination of variant props
+ */
+const variantCache = new Map();
+/**
+ * Maximum cache size to prevent memory leaks
+ */
+const MAX_CACHE_SIZE = 100;
+/**
+ * Resolves preset to its final value, handling both direct values and factory functions
+ */
+export function resolvePreset(preset) {
+    if (!preset)
+        return undefined;
+    const result = call(preset);
+    // If call returns a function, call it again (handle deferred preset)
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    return typeof result === 'function' ? result() : result;
+}
+/**
+ * Pure function to resolve variant definition to props
+ * Caches results to avoid recomputation with same inputs
+ */
+export function resolveVariants(def, bond, props) {
+    const { variants: variantMap, compounds, defaults, class: baseClass } = def;
+    // Merge props with defaults
+    const finalProps = { ...defaults, ...props };
+    // Create cache key from final props (only variant-related props)
+    const variantKeys = variantMap ? Object.keys(variantMap) : [];
+    const relevantProps = Object.fromEntries(Object.entries(finalProps).filter(([key]) => variantKeys.includes(key)));
+    const cacheKey = JSON.stringify({ relevantProps, baseClass, compounds });
+    // Check cache
+    if (variantCache.has(cacheKey)) {
+        return variantCache.get(cacheKey);
+    }
+    const classes = [];
+    const attributes = {};
+    // Add base class
+    if (baseClass)
+        classes.push(baseClass);
+    // Add variant classes
+    if (variantMap) {
+        for (const [key, value] of Object.entries(finalProps)) {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            const variantValue = variantMap[key]?.[value];
+            if (variantValue !== undefined) {
+                const resolved = typeof variantValue === 'function' ? variantValue(bond) : variantValue;
+                if (typeof resolved === 'string') {
+                    classes.push(resolved);
+                }
+                else if (typeof resolved === 'object' && resolved !== null) {
+                    if ('class' in resolved) {
+                        classes.push(resolved.class);
+                    }
+                    // Add other attributes (including Symbol-based attachment keys)
+                    Object.getOwnPropertySymbols(resolved).forEach((sym) => {
+                        attributes[sym] = resolved[sym];
+                    });
+                }
+            }
+        }
+    }
+    // Add compound variants
+    if (compounds) {
+        for (const compound of compounds) {
+            const { class: compoundClass, ...compoundProps } = compound;
+            const matches = Object.entries(compoundProps).every(([key, value]) => finalProps[key] === value);
+            if (matches) {
+                if (compoundClass)
+                    classes.push(compoundClass);
+                // Add compound attributes
+                Object.entries(compound).forEach(([k, v]) => {
+                    if (k !== 'class' && !Object.keys(compoundProps).includes(k)) {
+                        attributes[k] = v;
+                    }
+                });
+            }
+        }
+    }
+    const result = {
+        class: classes,
+        ...attributes
+    };
+    // Store in cache (limit cache size to prevent memory leaks)
+    if (variantCache.size >= MAX_CACHE_SIZE) {
+        // Clear oldest entry (first in Map)
+        const firstKey = variantCache.keys().next().value;
+        if (firstKey)
+            variantCache.delete(firstKey);
+    }
+    variantCache.set(cacheKey, result);
+    return result;
+}
+/**
+ * Pure function to merge preset and local variant definitions
+ * Returns merged variant props with local overriding preset
+ */
+export function mergeVariants(
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+presetVariants, presetClass, 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+presetCompounds, 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+presetDefaults, localVariants, bond, props) {
+    // No variants at all
+    if (!presetVariants && !localVariants)
+        return undefined;
+    // Only preset variants (raw object from preset)
+    if (presetVariants && !localVariants) {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const variantDef = {
+            class: presetClass ?? '',
+            variants: presetVariants,
+            compounds: presetCompounds ?? [],
+            defaults: presetDefaults ?? {}
+        };
+        return resolveVariants(variantDef, bond, props);
+    }
+    // Only local variants
+    if (!presetVariants && localVariants) {
+        return localVariants;
+    }
+    // Both exist - merge them
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const presetVariantDef = {
+        class: presetClass ?? '',
+        variants: presetVariants ?? {},
+        compounds: presetCompounds ?? [],
+        defaults: presetDefaults ?? {}
+    };
+    const presetResolved = resolveVariants(presetVariantDef, bond, props);
+    // Merge the resolved variant props
+    // Local variant classes and attributes override preset
+    const presetClasses = Array.isArray(presetResolved.class)
+        ? presetResolved.class
+        : [presetResolved.class];
+    const localClasses = Array.isArray(localVariants?.class)
+        ? localVariants.class
+        : [localVariants?.class];
+    return {
+        class: [...presetClasses, ...localClasses].filter(Boolean),
+        ...presetResolved,
+        ...localVariants
+    };
+}
+/**
+ * Pure function to merge classes with $preset placeholder support
+ * Handles the special $preset placeholder for precise positioning of preset classes
+ */
+export function mergeClassesWithPreset(userClass, presetClass, variantClass) {
+    const klassStr = cn(userClass ?? '');
+    // Check for $preset placeholder first
+    if (!klassStr.includes('$preset')) {
+        // No placeholder - normal merge: variants override direct class
+        return cn(userClass, variantClass ?? '');
+    }
+    // Has placeholder - calculate position and inject preset classes
+    const parts = klassStr.split('$preset');
+    // Only keep the last $preset placeholder
+    const beforeLastPlaceholder = parts.slice(0, -1).join('');
+    const afterLastPlaceholder = parts[parts.length - 1];
+    const presetClassString = cn(presetClass);
+    // Merge: before + preset + variants + after
+    return cn(beforeLastPlaceholder, presetClassString, variantClass ?? '', afterLastPlaceholder);
+}
+/**
+ * Pure function to resolve local variants
+ * Handles both function-based and VariantDefinition-based variants
+ */
+export function resolveLocalVariants(
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+variants, bond, props) {
+    if (!variants)
+        return undefined;
+    // If it's a function, call it directly
+    if (typeof variants === 'function') {
+        return variants(bond, props);
+    }
+    // Otherwise it's a VariantDefinition, resolve it
+    return resolveVariants(variants, bond, props);
+}
+/**
+ * Pure function to extract rest props by filtering out preset and variant-specific props
+ */
+export function extractRestProps(
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+preset, mergedVariants, restProps) {
+    const presetProps = { ...preset };
+    const presetKeysToRemove = ['class', 'base', 'as', 'variants', 'compounds', 'defaults'];
+    for (const key of presetKeysToRemove) {
+        delete presetProps[key];
+    }
+    const variantsRestProps = { ...mergedVariants };
+    const variantKeysToRemove = ['class', 'variants', 'compounds', 'defaults'];
+    for (const key of variantKeysToRemove) {
+        delete variantsRestProps[key];
+    }
+    return { ...presetProps, ...variantsRestProps, ...restProps };
+}
+/**
+ * Pure function to check if a base is a snippet
+ */
+export function isSnippetBase(base) {
+    return typeof base === 'function' && base.length === 1 && !base.prototype;
+}

package/dist/components/breadcrumb/breadcrumb-item.svelte

@@ -9,7 +9,7 @@
 	{href}
 	preset="breadcrumb.item"
 	class={[
-		'hover:text-primary hover:bg-primary/5 border-border flex gap-2 rounded-lg px-2 py-1',
+		'border-border text-foreground/70 hover:text-foreground flex gap-2 rounded-lg px-2 py-1',
 		'$preset',
 		klass
 	]}

package/dist/components/breadcrumb/breadcrumb-separator.svelte

@@ -11,5 +11,9 @@
 	data-kind="breadcrumb-separator"
 	{...restProps}
 >
-	{@render children?.()}
+	{#if children}
+		{@render children?.()}
+	{:else}
+		/
+	{/if}
 </HtmlAtom>

package/dist/components/breadcrumb/breadcrumb.stories.svelte

@@ -1,16 +1,16 @@
-<script module>
-	import { defineMeta } from '@storybook/addon-svelte-csf';
-	import { Breadcrumb as BreadcrumbModule } from '.';
-
-	const { Story } = defineMeta({
-		title: 'ATOMS/Breadcrumb'
-	});
-</script>
-
-<Story name="Breadcrumb">
-	<BreadcrumbModule.Root>
-		<BreadcrumbModule.Item href="/">Home</BreadcrumbModule.Item>
-		<BreadcrumbModule.Separator>/</BreadcrumbModule.Separator>
-		<BreadcrumbModule.Item href="/vehicles">Vehicles</BreadcrumbModule.Item>
-	</BreadcrumbModule.Root>
-</Story>
+<script module>
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import { Breadcrumb as BreadcrumbModule } from '.';
+
+	const { Story } = defineMeta({
+		title: 'ATOMS/Breadcrumb'
+	});
+</script>
+
+<Story name="Breadcrumb">
+	<BreadcrumbModule.Root>
+		<BreadcrumbModule.Item href="/">Home</BreadcrumbModule.Item>
+		<BreadcrumbModule.Separator>/</BreadcrumbModule.Separator>
+		<BreadcrumbModule.Item href="/vehicles">Vehicles</BreadcrumbModule.Item>
+	</BreadcrumbModule.Root>
+</Story>