@svelte-atoms/core 1.0.0-alpha.28 → 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];
 
@@ -21,13 +22,24 @@
 		preset: presetKey = undefined,
 		bond = undefined,
 		variants = undefined,
-		children = undefined,
+		children: childrenProp = undefined,
 		...restProps
-	}: HtmlAtomProps<E, B> & HTMLAttributes<Element> = $props();
+	}: 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);
@@ -122,7 +157,7 @@
 		if (isSnippet)
 			return {
 				component: SnippetRenderer,
-				props: { snippet: snippet, class: _klass, as: _as, children, ..._restProps }
+				props: { snippet: snippet, class: _klass, as: _as, children: childrenProp, ..._restProps }
 			};
 
 		return {
@@ -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,13 +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}>
-	{@render children?.()}
+	{#snippet children(args: any)}
+		{@render (childrenProp as any)?.(args)}
+	{/snippet}
 </renderer.component>

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

@@ -1,7 +1,7 @@
 import type { HTMLAttributes } from 'svelte/elements';
 import type { Base, HtmlAtomProps } from './types';
 declare function $$render<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(): {
-    props: HtmlAtomProps<E, B> & HTMLAttributes<HTMLElementTagNameMap[E]>;
+    props: HtmlAtomProps<E, B> & Omit<HTMLAttributes<HTMLElementTagNameMap[E]>, "children">;
     exports: {};
     bindings: "";
     slots: {};

package/dist/components/atom/snippet-renderer.svelte

@@ -1,5 +1,5 @@
-<script lang="ts">
-	let { snippet, ...restProps } = $props();
-</script>
-
-{@render snippet?.({ ...restProps })}
+<script lang="ts">
+	let { snippet, ...restProps } = $props();
+</script>
+
+{@render snippet?.({ ...restProps })}

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,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-body.svelte

@@ -1,107 +1,107 @@
-<script lang="ts">
-	import { backInOut } from 'svelte/easing';
-	import CalendarDay from './calendar-day.svelte';
-	import { CalendarBond } from './bond.svelte';
-	import { cn } from '../../utils';
-	import { HtmlAtom } from '../atom';
-
-	const calendarBond = CalendarBond.get();
-
-	const currentMonth = $derived(calendarBond?.state.props.currentMonth);
-
-	let {
-		class: klass = '',
-		weekday,
-		preset = 'calendar.body',
-		children = undefined,
-		...restProps
-	} = $props();
-
-	const bodyProps = $derived({
-		...calendarBond?.body(),
-		...restProps
-	});
-
-	// const generator = function (pivot: Date, start: Date, end?: Date) {
-	// 	const firstDay = new Date(pivot.getFullYear(), pivot.getMonth(), 1).getDay();
-	// 	const lastMonthDaysCount = monthDays(pivot.getMonth() - 1, pivot.getFullYear());
-	// 	const sample = new Date(
-	// 		pivot.getFullYear(),
-	// 		pivot.getMonth() - 1,
-	// 		lastMonthDaysCount - firstDay
-	// 	);
-
-	// 	const array = [];
-	// 	let next = false,
-	// 		prec = false;
-
-	// 	for (let index = 0; index < 42; index++) {
-	// 		sample.setDate(sample.getDate() + 1);
-
-	// 		prec = pivot.getMonth() > sample.getMonth() || pivot.getFullYear() > sample.getFullYear();
-	// 		next =
-	// 			(pivot.getMonth() < sample.getMonth() && pivot.getFullYear() === sample.getFullYear()) ||
-	// 			(pivot.getMonth() > sample.getMonth() && pivot.getFullYear() < sample.getFullYear());
-
-	// 		array.push({
-	// 			id: sample.getTime(),
-	// 			date: sample.getDate(),
-	// 			offmonth: next || prec,
-	// 			next,
-	// 			prec,
-	// 			today: isToday(sample),
-	// 			week: Math.floor(index / 7),
-	// 			month: sample.getMonth(),
-	// 			disabled: false,
-	// 			weekend: sample.getDay() == 0,
-	// 			name: format(sample, 'iiiii'),
-	// 			selected: start?.getTime() === sample.getTime()
-	// 		});
-	// 	}
-
-	// 	return array;
-	// };
-
-	// const days = $derived(
-	// 	generator(
-	// 		context_calendar.derived.data.pivote,
-	// 		context_calendar.derived.data.start ?? new Date(),
-	// 		context_calendar.derived.data.end
-	// 	)
-	// );
-
-	function monthDays(month: number, year = 2020) {
-		return new Date(year, month + 1, 0).getDate();
-	}
-
-	function scle(node: HTMLElement, { delay = 0, duration = 400, easing = backInOut }) {
-		return {
-			delay,
-			duration,
-			easing,
-			css: (_, u) => {
-				return `transform: scale(${u})`;
-			}
-		};
-	}
-</script>
-
-<HtmlAtom
-	class={cn('col-span-full grid h-full w-full grid-cols-subgrid', klass)}
-	{preset}
-	{...bodyProps}
->
-	{#each currentMonth?.days ?? [] as day (day.id)}
-		{#if children}
-			{@render children?.({ day })}
-		{:else}
-			<CalendarDay
-				{day}
-				onclick={() => {
-					console.log('day clicked', day.date);
-					calendarBond?.state.selectStart(new Date(day.date));
-				}}
-			/>
-		{/if}
-	{/each}
-</HtmlAtom>
+<script lang="ts">
+	import { backInOut } from 'svelte/easing';
+	import CalendarDay from './calendar-day.svelte';
+	import { CalendarBond } from './bond.svelte';
+	import { cn } from '../../utils';
+	import { HtmlAtom } from '../atom';
+
+	const calendarBond = CalendarBond.get();
+
+	const currentMonth = $derived(calendarBond?.state.props.currentMonth);
+
+	let {
+		class: klass = '',
+		weekday,
+		preset = 'calendar.body',
+		children = undefined,
+		...restProps
+	} = $props();
+
+	const bodyProps = $derived({
+		...calendarBond?.body(),
+		...restProps
+	});
+
+	// const generator = function (pivot: Date, start: Date, end?: Date) {
+	// 	const firstDay = new Date(pivot.getFullYear(), pivot.getMonth(), 1).getDay();
+	// 	const lastMonthDaysCount = monthDays(pivot.getMonth() - 1, pivot.getFullYear());
+	// 	const sample = new Date(
+	// 		pivot.getFullYear(),
+	// 		pivot.getMonth() - 1,
+	// 		lastMonthDaysCount - firstDay
+	// 	);
+
+	// 	const array = [];
+	// 	let next = false,
+	// 		prec = false;
+
+	// 	for (let index = 0; index < 42; index++) {
+	// 		sample.setDate(sample.getDate() + 1);
+
+	// 		prec = pivot.getMonth() > sample.getMonth() || pivot.getFullYear() > sample.getFullYear();
+	// 		next =
+	// 			(pivot.getMonth() < sample.getMonth() && pivot.getFullYear() === sample.getFullYear()) ||
+	// 			(pivot.getMonth() > sample.getMonth() && pivot.getFullYear() < sample.getFullYear());
+
+	// 		array.push({
+	// 			id: sample.getTime(),
+	// 			date: sample.getDate(),
+	// 			offmonth: next || prec,
+	// 			next,
+	// 			prec,
+	// 			today: isToday(sample),
+	// 			week: Math.floor(index / 7),
+	// 			month: sample.getMonth(),
+	// 			disabled: false,
+	// 			weekend: sample.getDay() == 0,
+	// 			name: format(sample, 'iiiii'),
+	// 			selected: start?.getTime() === sample.getTime()
+	// 		});
+	// 	}
+
+	// 	return array;
+	// };
+
+	// const days = $derived(
+	// 	generator(
+	// 		context_calendar.derived.data.pivote,
+	// 		context_calendar.derived.data.start ?? new Date(),
+	// 		context_calendar.derived.data.end
+	// 	)
+	// );
+
+	function monthDays(month: number, year = 2020) {
+		return new Date(year, month + 1, 0).getDate();
+	}
+
+	function scle(node: HTMLElement, { delay = 0, duration = 400, easing = backInOut }) {
+		return {
+			delay,
+			duration,
+			easing,
+			css: (_, u) => {
+				return `transform: scale(${u})`;
+			}
+		};
+	}
+</script>
+
+<HtmlAtom
+	class={cn('col-span-full grid h-full w-full grid-cols-subgrid', klass)}
+	{preset}
+	{...bodyProps}
+>
+	{#each currentMonth?.days ?? [] as day (day.id)}
+		{#if children}
+			{@render children?.({ day })}
+		{:else}
+			<CalendarDay
+				{day}
+				onclick={() => {
+					console.log('day clicked', day.date);
+					calendarBond?.state.selectStart(new Date(day.date));
+				}}
+			/>
+		{/if}
+	{/each}
+</HtmlAtom>