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

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/avatar/avatar.stories.svelte

@@ -1,22 +1,22 @@
-<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>
+<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,12 +1,12 @@
-<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>
+<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 w-fit 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-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>

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

@@ -1,27 +1,27 @@
-<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>
+<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

@@ -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}

package/dist/components/calendar/calendar.stories.svelte

@@ -1,26 +1,26 @@
-<script module>
-	import { defineMeta } from '@storybook/addon-svelte-csf';
-	import { Calendar as CalendarModule } from '.';
-
-	const { Story } = defineMeta({
-		title: 'Atoms/Calendar'
-	});
-</script>
-
-<script>
-</script>
-
-<Story name="Calendar">
-	{#snippet children({ args })}
-		<div class="flex h-fit items-center justify-center">
-			<CalendarModule.Root>
-				<CalendarModule.Header></CalendarModule.Header>
-				<CalendarModule.Body>
-					{#snippet children({ day })}
-						<CalendarModule.Day {day}></CalendarModule.Day>
-					{/snippet}
-				</CalendarModule.Body>
-			</CalendarModule.Root>
-		</div>
-	{/snippet}
-</Story>
+<script module>
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import { Calendar as CalendarModule } from '.';
+
+	const { Story } = defineMeta({
+		title: 'Atoms/Calendar'
+	});
+</script>
+
+<script>
+</script>
+
+<Story name="Calendar">
+	{#snippet children({ args })}
+		<div class="flex h-fit items-center justify-center">
+			<CalendarModule.Root>
+				<CalendarModule.Header></CalendarModule.Header>
+				<CalendarModule.Body>
+					{#snippet children({ day })}
+						<CalendarModule.Day {day}></CalendarModule.Day>
+					{/snippet}
+				</CalendarModule.Body>
+			</CalendarModule.Root>
+		</div>
+	{/snippet}
+</Story>

package/dist/components/card/card-body.svelte

@@ -1,39 +1,39 @@
-<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
-	import { HtmlAtom, type Base } from '../atom';
-	export type { CardContentProps } from './types';
-	import { CardBond } from './bond.svelte';
-
-	const bond = CardBond.get();
-
-	let {
-		class: klass = '',
-		children = undefined,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = undefined,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
-		...restProps
-	}: CardContentProps<E, B> = $props();
-
-	const contentProps = $derived({
-		...bond?.content(),
-		...restProps
-	});
-</script>
-
-<HtmlAtom
-	{bond}
-	preset="card.content"
-	class={['card-content border-border px-4 pb-4', '$preset', klass]}
-	enter={enter?.bind(bond.state)}
-	exit={exit?.bind(bond.state)}
-	initial={initial?.bind(bond.state)}
-	animate={animate?.bind(bond.state)}
-	onmount={onmount?.bind(bond.state)}
-	ondestroy={ondestroy?.bind(bond.state)}
-	{...contentProps}
->
-	{@render children?.()}
-</HtmlAtom>
+<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
+	import { HtmlAtom, type Base } from '../atom';
+	export type { CardContentProps } from './types';
+	import { CardBond } from './bond.svelte';
+
+	const bond = CardBond.get();
+
+	let {
+		class: klass = '',
+		children = undefined,
+		onmount = undefined,
+		ondestroy = undefined,
+		animate = undefined,
+		enter = undefined,
+		exit = undefined,
+		initial = undefined,
+		...restProps
+	}: CardContentProps<E, B> = $props();
+
+	const contentProps = $derived({
+		...bond?.content(),
+		...restProps
+	});
+</script>
+
+<HtmlAtom
+	{bond}
+	preset="card.content"
+	class={['card-content border-border px-4 pb-4', '$preset', klass]}
+	enter={enter?.bind(bond.state)}
+	exit={exit?.bind(bond.state)}
+	initial={initial?.bind(bond.state)}
+	animate={animate?.bind(bond.state)}
+	onmount={onmount?.bind(bond.state)}
+	ondestroy={ondestroy?.bind(bond.state)}
+	{...contentProps}
+>
+	{@render children?.()}
+</HtmlAtom>