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

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

@@ -9,6 +9,7 @@
 	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];
 
@@ -25,9 +26,20 @@
 		...restProps
 	}: HtmlAtomProps<E, B> & Omit<HTMLAttributes<Element>, 'children'> = $props();
 
-	const preset = $derived(
-		presetKey ? getPreset(presetKey as PresetModuleName)?.apply?.(bond, [bond]) : undefined
-	);
+	/**
+	 * 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);
 
@@ -45,6 +57,7 @@
 	});
 
 	// 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;
@@ -52,8 +65,8 @@
 		// Only preset variants (raw object from preset)
 		if (presetProps && !localVariants) {
 			// Convert preset variants to VariantDefinition-like structure
-			const variantDef = {
-				class: preset?.class,
+			const variantDef: VariantDefinition<any> = {
+				class: preset?.class ?? '',
 				variants: presetProps,
 				compounds: preset?.compounds ?? [],
 				defaults: preset?.defaults ?? {}
@@ -68,9 +81,9 @@
 
 		// 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,
+		const presetVariantDef: VariantDefinition<any> = {
+			class: preset?.class ?? '',
+			variants: presetProps ?? {},
 			compounds: preset?.compounds ?? [],
 			defaults: preset?.defaults ?? {}
 		};
@@ -93,9 +106,31 @@
 		};
 	});
 
-	const _klass = $derived(
-		cn(klass, mergedVariants?.class ?? '').replaceAll('$preset', cn(preset?.class))
-	);
+	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);
@@ -131,9 +166,6 @@
 		};
 	}) as { component: Component; props: Record<string, any> };
 
-	/**
-	 * Resolve variant definition to props
-	 */
 	function resolveVariants(
 		def: VariantDefinition<any>,
 		bond: Bond | null | undefined,
@@ -144,6 +176,18 @@
 		// 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> = {};
 
@@ -193,15 +237,25 @@
 			}
 		}
 
-		return {
+		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)}
-		{@render childrenProp?.(args)}
+	{#snippet children(args: any)}
+		{@render (childrenProp as any)?.(args)}
 	{/snippet}
 </renderer.component>

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

@@ -1,27 +1,22 @@
-<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({
-		title: 'ATOMS/Avatar'
-	});
-</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" />
-
-				<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>
-</Story>
+<script module>
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import AvatarCmp from './avatar.svelte';
+	import CalendarRegularIcon from '../../icons/icon-arrow-down.svelte';
+
+	const { Story } = defineMeta({
+		title: 'ATOMS/Avatar'
+	});
+</script>
+
+<Story name="Avatar">
+	<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="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,17 +1,12 @@
-<script module>
-	import { defineMeta } from '@storybook/addon-svelte-csf';
-	import Root from '../root/root.svelte';
-	import { Badge as BadgeModule } from '.';
-
-	const { Story } = defineMeta({
-		title: 'ATOMS/Badge'
-	});
-</script>
-
-<Story name="Badge">
-	<Root>
-		{#snippet children({ args })}
-			<BadgeModule>Badge</BadgeModule>
-		{/snippet}
-	</Root>
-</Story>
+<script module>
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import { Badge as BadgeModule } from '.';
+
+	const { Story } = defineMeta({
+		title: 'ATOMS/Badge'
+	});
+</script>
+
+<Story name="Badge">
+	<BadgeModule>Badge</BadgeModule>
+</Story>

package/dist/components/badge/badge.svelte

@@ -1,19 +1,19 @@
-<script lang="ts">
-	import { HtmlAtom } from '../atom';
-	import type { BadgeProps } from './types';
-
-	let { class: klass = '', as = 'span', children = undefined, ...restProps }: BadgeProps = $props();
-</script>
-
-<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',
-		'$preset',
-		klass
-	]}
-	{as}
-	{...restProps}
->
-	{@render children?.()}
-</HtmlAtom>
+<script lang="ts">
+	import { HtmlAtom } from '../atom';
+	import type { BadgeProps } from './types';
+
+	let { class: klass = '', as = 'span', children = undefined, ...restProps }: BadgeProps = $props();
+</script>
+
+<HtmlAtom
+	preset="badge"
+	class={[
+		'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
+	]}
+	{as}
+	{...restProps}
+>
+	{@render children?.()}
+</HtmlAtom>

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,60 +1,27 @@
-<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',
-		argTypes: {
-			variant: {
-				control: 'select',
-				options: ['primary', 'secondary', 'destructive', 'outline', 'ghost'],
-				description: 'Button variant style',
-				table: {
-					defaultValue: { summary: 'primary' }
-				}
-			}
-		}
-	});
-</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>
-	{/snippet}
-</Story>
+<script module>
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import ButtonCmp from './button.svelte';
+
+	const { Story } = defineMeta({
+		title: 'ATOMS/Button',
+		argTypes: {
+			variant: {
+				control: 'select',
+				options: ['primary', 'secondary', 'destructive', 'outline', 'ghost'],
+				description: 'Button variant style',
+				table: {
+					defaultValue: { summary: 'primary' }
+				}
+			}
+		}
+	});
+</script>
+
+<script lang="ts">
+</script>
+
+<Story name="Button">
+	{#snippet template(args)}
+		<ButtonCmp {...args}>Click me</ButtonCmp>
+	{/snippet}
+</Story>

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

@@ -1,96 +1,96 @@
-<script lang="ts">
-	import { isBefore, isSameDay, isWithinInterval } from 'date-fns';
-	import { CalendarBond } from './bond.svelte';
-	import type { CalendarDayProps } from './types';
-	import { HtmlAtom } from '../atom';
-
-	const calendarBond = CalendarBond.get();
-
-	const selectedDateStart = $derived(calendarBond?.state.props.start);
-	const selectedDateEnd = $derived(calendarBond?.state.props.end);
-	const isRange = $derived(Array.isArray(calendarBond?.state.props.type === 'range'));
-
-	let {
-		class: klass = '',
-		preset = 'calendar.day',
-		day,
-		as = 'button',
-		children = undefined,
-		onclick = handleClick,
-		...restProps
-	}: CalendarDayProps = $props();
-
-	const dayProps = $derived({
-		...calendarBond?.day(day),
-		...restProps
-	});
-
-	const isSelected = $derived.by(() => {
-		if (selectedDateEnd && selectedDateStart) {
-			return isWithinInterval(day.date, { end: selectedDateEnd, start: selectedDateStart });
-		}
-
-		return selectedDateStart && isSameDay(day.date, selectedDateStart);
-	});
-
-	function handleClick() {
-		if (isRange) {
-			const start = calendarBond?.state.props.start;
-			if (!start) {
-				calendarBond?.state.selectStart(new Date(day.date));
-				return;
-			}
-
-			if (isBefore(new Date(day.date), new Date(start))) {
-				calendarBond?.state.selectStart(new Date(day.date));
-				return;
-			}
-
-			calendarBond?.state.selectEnd(new Date(day.date));
-		} else {
-			calendarBond?.state.selectStart(new Date(day.date));
-		}
-	}
-</script>
-
-<HtmlAtom
-	{as}
-	{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',
-		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',
-		klass
-	]}
-	data-disabled={day.disabled}
-	data-prec={day.fromPreviousMonth}
-	data-next={day.fromNextMonth}
-	data-offmonth={day.offmonth}
-	data-weekend={day.weekend}
-	data-today={day.today}
-	data-selected={isSelected}
-	{onclick}
-	{...dayProps}
->
-	{#if children}
-		{@render children({
-			calendar: calendarBond!
-		})}
-	{:else}
-		<span class="value">{day.dayOfMonth}</span>
-	{/if}
-</HtmlAtom>
-
-<style>
-	:global(.calendar-day):nth-child(7n + 1) {
-		border-left: none;
-	}
-	:global(.calendar-day):nth-last-child(-n + 7) {
-		border-bottom: none;
-	}
-</style>
+<script lang="ts">
+	import { isBefore, isSameDay, isWithinInterval } from 'date-fns';
+	import { CalendarBond } from './bond.svelte';
+	import type { CalendarDayProps } from './types';
+	import { HtmlAtom } from '../atom';
+
+	const calendarBond = CalendarBond.get();
+
+	const selectedDateStart = $derived(calendarBond?.state.props.start);
+	const selectedDateEnd = $derived(calendarBond?.state.props.end);
+	const isRange = $derived(Array.isArray(calendarBond?.state.props.type === 'range'));
+
+	let {
+		class: klass = '',
+		preset = 'calendar.day',
+		day,
+		as = 'button',
+		children = undefined,
+		onclick = handleClick,
+		...restProps
+	}: CalendarDayProps = $props();
+
+	const dayProps = $derived({
+		...calendarBond?.day(day),
+		...restProps
+	});
+
+	const isSelected = $derived.by(() => {
+		if (selectedDateEnd && selectedDateStart) {
+			return isWithinInterval(day.date, { end: selectedDateEnd, start: selectedDateStart });
+		}
+
+		return selectedDateStart && isSameDay(day.date, selectedDateStart);
+	});
+
+	function handleClick() {
+		if (isRange) {
+			const start = calendarBond?.state.props.start;
+			if (!start) {
+				calendarBond?.state.selectStart(new Date(day.date));
+				return;
+			}
+
+			if (isBefore(new Date(day.date), new Date(start))) {
+				calendarBond?.state.selectStart(new Date(day.date));
+				return;
+			}
+
+			calendarBond?.state.selectEnd(new Date(day.date));
+		} else {
+			calendarBond?.state.selectStart(new Date(day.date));
+		}
+	}
+</script>
+
+<HtmlAtom
+	{as}
+	{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',
+		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',
+		klass
+	]}
+	data-disabled={day.disabled}
+	data-prec={day.fromPreviousMonth}
+	data-next={day.fromNextMonth}
+	data-offmonth={day.offmonth}
+	data-weekend={day.weekend}
+	data-today={day.today}
+	data-selected={isSelected}
+	{onclick}
+	{...dayProps}
+>
+	{#if children}
+		{@render children({
+			calendar: calendarBond!
+		})}
+	{:else}
+		<span class="value">{day.dayOfMonth}</span>
+	{/if}
+</HtmlAtom>
+
+<style>
+	:global(.calendar-day):nth-child(7n + 1) {
+		border-left: none;
+	}
+	:global(.calendar-day):nth-last-child(-n + 7) {
+		border-bottom: none;
+	}
+</style>

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

@@ -1,29 +1,29 @@
-<script lang="ts">
-	import { cn } from '../../utils';
-	import { HtmlAtom } from '../atom';
-	import { CalendarBond } from './bond.svelte';
-	import CalendarWeekDay from './calendar-week-day.svelte';
-
-	const calendarBond = CalendarBond.get();
-	const currentMonth = $derived(calendarBond?.state.props.currentMonth);
-
-	let { class: klass = '', preset = 'calendar.header', ...restProps } = $props();
-
-	const headerProps = $derived({
-		...calendarBond?.header(),
-		...restProps
-	});
-</script>
-
-<HtmlAtom
-	{preset}
-	class={cn(
-		'calendar-header border-border col-span-full grid h-fit grid-cols-subgrid border-b',
-		klass
-	)}
-	{...headerProps}
->
-	{#each (currentMonth?.days ?? []).filter((d) => d.week == 1) as day}
-		<CalendarWeekDay isWeekend={day.weekend}>{day.name}</CalendarWeekDay>
-	{/each}
-</HtmlAtom>
+<script lang="ts">
+	import { cn } from '../../utils';
+	import { HtmlAtom } from '../atom';
+	import { CalendarBond } from './bond.svelte';
+	import CalendarWeekDay from './calendar-week-day.svelte';
+
+	const calendarBond = CalendarBond.get();
+	const currentMonth = $derived(calendarBond?.state.props.currentMonth);
+
+	let { class: klass = '', preset = 'calendar.header', ...restProps } = $props();
+
+	const headerProps = $derived({
+		...calendarBond?.header(),
+		...restProps
+	});
+</script>
+
+<HtmlAtom
+	{preset}
+	class={cn(
+		'calendar-header border-border col-span-full grid h-fit grid-cols-subgrid border-b',
+		klass
+	)}
+	{...headerProps}
+>
+	{#each (currentMonth?.days ?? []).filter((d) => d.week == 1) as day}
+		<CalendarWeekDay isWeekend={day.weekend}>{day.name}</CalendarWeekDay>
+	{/each}
+</HtmlAtom>