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

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

@@ -1,207 +1,261 @@
-<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
-	import type { HTMLAttributes } from 'svelte/elements';
-	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';
-
-	type Element = HTMLElementTagNameMap[E];
-
-	const rootBond = RootBond.get();
-
-	let {
-		class: klass = '',
-		as = 'div',
-		base = undefined,
-		preset: presetKey = undefined,
-		bond = undefined,
-		variants = undefined,
-		children: childrenProp = undefined,
-		...restProps
-	}: HtmlAtomProps<E, B> & Omit<HTMLAttributes<Element>, 'children'> = $props();
-
-	const preset = $derived(
-		presetKey ? getPreset(presetKey as PresetModuleName)?.apply?.(bond, [bond]) : undefined
-	);
-
-	const presetProps = $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);
-	});
-
-	// Merge preset variants with local variants
-	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 = {
-				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 = {
-			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 _klass = $derived(
-		cn(klass, mergedVariants?.class ?? '').replaceAll('$preset', cn(preset?.class))
-	);
-
-	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 ?? {};
-
-		return { ...restPresetProps, ...variantsRestProps, ...restProps };
-	});
-
-	const isSnippet = $derived(typeof _base === 'function' && _base.length === 1 && !_base.prototype);
-
-	const snippet = $derived(_base as SnippetBase);
-
-	const atom = rootBond?.state?.props?.renderers?.html ?? HtmlElement;
-
-	const renderer = $derived.by(() => {
-		if (isSnippet)
-			return {
-				component: SnippetRenderer,
-				props: { snippet: snippet, class: _klass, as: _as, children: childrenProp, ..._restProps }
-			};
-
-		return {
-			component: base ?? atom,
-			props: { class: _klass, as: _as, ..._restProps }
-		};
-	}) as { component: Component; props: Record<string, any> };
-
-	/**
-	 * Resolve variant definition to props
-	 */
-	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 };
-
-		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;
-						}
-					});
-				}
-			}
-		}
-
-		return {
-			class: classes,
-			...attributes
-		};
-	}
-</script>
-
-<renderer.component {...renderer.props}>
-	{#snippet children(args)}
-		{@render childrenProp?.(args)}
-	{/snippet}
-</renderer.component>
+<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
+	import type { HTMLAttributes } from 'svelte/elements';
+	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';
+
+	type Element = HTMLElementTagNameMap[E];
+
+	const rootBond = RootBond.get();
+
+	let {
+		class: klass = '',
+		as = 'div',
+		base = undefined,
+		preset: presetKey = undefined,
+		bond = undefined,
+		variants = undefined,
+		children: childrenProp = undefined,
+		...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);
+	});
+
+	const presetProps = $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);
+	});
+
+	// 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
+		);
+	});
+
+	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 ?? {};
+
+		return { ...restPresetProps, ...variantsRestProps, ...restProps };
+	});
+
+	const isSnippet = $derived(typeof _base === 'function' && _base.length === 1 && !_base.prototype);
+
+	const snippet = $derived(_base as SnippetBase);
+
+	const atom = rootBond?.state?.props?.renderers?.html ?? HtmlElement;
+
+	const renderer = $derived.by(() => {
+		if (isSnippet)
+			return {
+				component: SnippetRenderer,
+				props: { snippet: snippet, class: _klass, as: _as, children: childrenProp, ..._restProps }
+			};
+
+		return {
+			component: base ?? atom,
+			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}>
+	{#snippet children(args: any)}
+		{@render (childrenProp as any)?.(args)}
+	{/snippet}
+</renderer.component>

package/dist/components/avatar/avatar.stories.svelte

@@ -1,7 +1,6 @@
 <script module>
 	import { defineMeta } from '@storybook/addon-svelte-csf';
 	import AvatarCmp from './avatar.svelte';
-	import Root from '../root/root.svelte';
 	import CalendarRegularIcon from '../../icons/icon-arrow-down.svelte';
 
 	const { Story } = defineMeta({
@@ -10,18 +9,14 @@
 </script>
 
 <Story name="Avatar">
-	<Root>
-		{#snippet children({ args })}
-			<div class="flex h-full w-full items-center justify-center gap-4">
-				<AvatarCmp alt="Abdelhalim Riache" />
+	<div class="flex h-full w-full items-center justify-center gap-4">
+		<AvatarCmp alt="Abdelhalim Riache" />
 
-				<AvatarCmp src={CalendarRegularIcon} alt="Abdelhalim Riache" />
+		<AvatarCmp src={CalendarRegularIcon} alt="Abdelhalim Riache" />
 
-				<AvatarCmp
-					src="https://sevennaturalwonders.org/wp-content/uploads/2023/12/1-Mount-Fuji.jpg"
-					alt="Mount Fuji"
-				/>
-			</div>
-		{/snippet}
-	</Root>
+		<AvatarCmp
+			src="https://sevennaturalwonders.org/wp-content/uploads/2023/12/1-Mount-Fuji.jpg"
+			alt="Mount Fuji"
+		/>
+	</div>
 </Story>

package/dist/components/badge/badge.stories.svelte

@@ -1,6 +1,5 @@
 <script module>
 	import { defineMeta } from '@storybook/addon-svelte-csf';
-	import Root from '../root/root.svelte';
 	import { Badge as BadgeModule } from '.';
 
 	const { Story } = defineMeta({
@@ -9,9 +8,5 @@
 </script>
 
 <Story name="Badge">
-	<Root>
-		{#snippet children({ args })}
-			<BadgeModule>Badge</BadgeModule>
-		{/snippet}
-	</Root>
+	<BadgeModule>Badge</BadgeModule>
 </Story>

package/dist/components/badge/badge.svelte

@@ -8,7 +8,7 @@
 <HtmlAtom
 	preset="badge"
 	class={[
-		'bg-foreground/10 border-border text-foreground inline-flex h-auto items-center rounded-full px-2.5 py-0.5 text-xs font-medium',
+		'bg-foreground/10 border-border text-foreground inline-flex h-auto w-fit items-center rounded-full px-2.5 py-0.5 text-xs font-medium',
 		'$preset',
 		klass
 	]}

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

@@ -1,21 +1,16 @@
-<script module>
-	import { defineMeta } from '@storybook/addon-svelte-csf';
-	import Root from '../root/root.svelte';
-	import { Breadcrumb as BreadcrumbModule } from '.';
-
-	const { Story } = defineMeta({
-		title: 'ATOMS/Breadcrumb'
-	});
-</script>
-
-<Story name="Breadcrumb">
-	<Root>
-		{#snippet children({ args })}
-			<BreadcrumbModule.Root>
-				<BreadcrumbModule.Item href="/">Home</BreadcrumbModule.Item>
-				<BreadcrumbModule.Separator>/</BreadcrumbModule.Separator>
-				<BreadcrumbModule.Item href="/vehicles">Vehicles</BreadcrumbModule.Item>
-			</BreadcrumbModule.Root>
-		{/snippet}
-	</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>

package/dist/components/button/button.stories.svelte

@@ -1,8 +1,6 @@
 <script module>
 	import { defineMeta } from '@storybook/addon-svelte-csf';
-	import Root from '../root/root.svelte';
 	import ButtonCmp from './button.svelte';
-	import { defineVariants } from '../../utils/variant';
 
 	const { Story } = defineMeta({
 		title: 'ATOMS/Button',
@@ -20,41 +18,10 @@
 </script>
 
 <script lang="ts">
-	const variants = defineVariants((bond) => ({
-		variants: {
-			variant: {
-				primary: {
-					class: 'bg-primary text-primary-foreground hover:bg-primary/80 active:bg-primary/90'
-				},
-				secondary: {
-					class:
-						'bg-secondary text-secondary-foreground hover:bg-secondary/80 active:bg-secondary/90'
-				},
-				destructive: {
-					class:
-						'bg-destructive text-destructive-foreground hover:bg-destructive/80 active:bg-destructive/90'
-				},
-				outline: {
-					class:
-						'bg-transparent hover:bg-foreground/5 active:bg-foreground/10 border border-border text-foreground'
-				},
-				ghost: {
-					class:
-						'bg-transparent text-foreground hover:bg-foreground/5 active:bg-foreground/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2'
-				}
-			}
-		},
-		compounds: [],
-		defaults: {
-			variant: 'destructive'
-		}
-	}));
 </script>
 
 <Story name="Button">
 	{#snippet template(args)}
-		<Root class="p-4">
-			<ButtonCmp {variants} {...args}>Clicke me</ButtonCmp>
-		</Root>
+		<ButtonCmp {...args}>Click me</ButtonCmp>
 	{/snippet}
 </Story>

package/dist/components/calendar/calendar-day.svelte

@@ -34,6 +34,8 @@
 	});
 
 	function handleClick() {
+		if (day.disabled) return;
+
 		if (isRange) {
 			const start = calendarBond?.state.props.start;
 			if (!start) {
@@ -58,13 +60,16 @@
 	{preset}
 	class={[
 		'calendar-day text-foreground border-border hover:bg-accent hover:text-accent-foreground h-12 cursor-pointer border-b border-l p-1 transition-colors',
-		day.offmonth && 'text-muted-foreground bg-muted/30',
-		day.weekend && 'bg-muted/50',
+		day.offmonth && !day.disabled && 'text-muted-foreground/50 bg-muted/50',
+		day.weekend && 'bg-accent',
 		isSelected &&
 			'bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground',
 		isSelected && day.offmonth && 'bg-primary/70',
-		day.today && !isSelected && 'border-primary border-2 font-semibold',
-		day.disabled && 'pointer-events-none opacity-50',
+		day.today &&
+			!day.disabled &&
+			!isSelected &&
+			'border-primary bg-primary/5 border-2 font-semibold',
+		day.disabled && 'pointer-events-none opacity-25',
 		klass
 	]}
 	data-disabled={day.disabled}