@svelte-atoms/core 1.0.0-alpha.25 → 1.0.0-alpha.27

package/dist/components/alert/alert-title.svelte

@@ -1,51 +1,41 @@
-<script module lang="ts">
-	export type AlertTitleProps<
-		E extends keyof HTMLElementTagNameMap = 'div',
-		B extends Base = Base
-	> = HtmlAtomProps<E, B> & {
-		children?: Snippet<[{ alert: AlertBond }]>;
-	};
-</script>
-
-<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
-	import type { Snippet } from 'svelte';
-	import { AlertBond } from './bond.svelte';
-
-	import { HtmlAtom, type HtmlAtomProps, type Base } from '../atom';
-
-	const bond = AlertBond.get();
-
-	let {
-		as = 'h4' as E,
-		class: klass = '',
-		children = undefined,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = undefined,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
-		...restProps
-	}: AlertTitleProps<E, B> = $props();
-
-	const titleProps = $derived({
-		...bond?.title(),
-		...restProps
-	});
-</script>
-
-<HtmlAtom
-	{as}
-	{bond}
-	preset="alert.title"
-	class={['alert-title text-sm leading-tight font-medium', '$preset', klass]}
-	onmount={onmount?.bind(bond.state)}
-	ondestroy={ondestroy?.bind(bond.state)}
-	animate={animate?.bind(bond.state)}
-	enter={enter?.bind(bond.state)}
-	exit={exit?.bind(bond.state)}
-	initial={initial?.bind(bond.state)}
-	{...titleProps}
->
-	{@render children?.({ alert: bond! })}
-</HtmlAtom>
+<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
+	import { HtmlAtom, type Base } from '../atom';
+	import { AlertBond } from './bond.svelte';
+	import type { AlertTitleProps } from './types';
+
+	const bond = AlertBond.get();
+
+	let {
+		as = 'h4' as E,
+		class: klass = '',
+		children = undefined,
+		onmount = undefined,
+		ondestroy = undefined,
+		animate = undefined,
+		enter = undefined,
+		exit = undefined,
+		initial = undefined,
+		...restProps
+	}: AlertTitleProps<E, B> = $props();
+
+	const titleProps = $derived({
+		...bond?.title(),
+		...restProps
+	});
+</script>
+
+<HtmlAtom
+	{as}
+	{bond}
+	preset="alert.title"
+	class={['alert-title border-border text-sm leading-tight font-medium', '$preset', klass]}
+	onmount={onmount?.bind(bond.state)}
+	ondestroy={ondestroy?.bind(bond.state)}
+	animate={animate?.bind(bond.state)}
+	enter={enter?.bind(bond.state)}
+	exit={exit?.bind(bond.state)}
+	initial={initial?.bind(bond.state)}
+	{...titleProps}
+>
+	{@render children?.({ alert: bond! })}
+</HtmlAtom>

package/dist/components/alert/alert-title.svelte.d.ts

@@ -1,11 +1,5 @@
-export type AlertTitleProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> = HtmlAtomProps<E, B> & {
-    children?: Snippet<[{
-        alert: AlertBond;
-    }]>;
-};
-import type { Snippet } from 'svelte';
-import { AlertBond } from './bond.svelte';
-import { type HtmlAtomProps, type Base } from '../atom';
+import { type Base } from '../atom';
+import type { AlertTitleProps } from './types';
 declare function $$render<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(): {
     props: AlertTitleProps<E, B>;
     exports: {};

package/dist/components/alert/index.d.ts

@@ -1,2 +1,3 @@
 export * as Alert from './atoms';
 export type { AlertBondProps, AlertBondElements, AlertBond, AlertBondState } from './bond.svelte';
+export * from './types';

package/dist/components/alert/index.js

@@ -1 +1,2 @@
 export * as Alert from './atoms';
+export * from './types';

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

@@ -0,0 +1,85 @@
+import type { Snippet } from 'svelte';
+import type { HtmlAtomProps, Base } from '../atom';
+import type { Factory, Override } from '../../types';
+import type { AlertBond } from './bond.svelte';
+/**
+ * Extend this interface to add custom alert root properties in your application.
+ */
+export interface AlertRootExtendProps {
+}
+/**
+ * Extend this interface to add custom alert content properties in your application.
+ */
+export interface AlertContentExtendProps {
+}
+/**
+ * Extend this interface to add custom alert title properties in your application.
+ */
+export interface AlertTitleExtendProps {
+}
+/**
+ * Extend this interface to add custom alert description properties in your application.
+ */
+export interface AlertDescriptionExtendProps {
+}
+/**
+ * Extend this interface to add custom alert icon properties in your application.
+ */
+export interface AlertIconExtendProps {
+}
+/**
+ * Extend this interface to add custom alert actions properties in your application.
+ */
+export interface AlertActionsExtendProps {
+}
+/**
+ * Extend this interface to add custom alert close button properties in your application.
+ */
+export interface AlertCloseButtonExtendProps {
+}
+export interface AlertRootProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends Omit<HtmlAtomProps<E, B>, 'children'>, AlertRootExtendProps {
+    dismissible?: boolean;
+    dismissed?: boolean;
+    disabled?: boolean;
+    extend?: Record<string, unknown>;
+    factory?: Factory<AlertBond>;
+    children?: Snippet<[{
+        alert: AlertBond;
+    }]>;
+}
+export interface AlertContentProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends Override<HtmlAtomProps<E, B>, {
+    children?: Snippet<[{
+        alert: AlertBond;
+    }]>;
+}>, AlertContentExtendProps {
+}
+export interface AlertTitleProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends Override<HtmlAtomProps<E, B>, {
+    children?: Snippet<[{
+        alert: AlertBond;
+    }]>;
+}>, AlertTitleExtendProps {
+}
+export interface AlertDescriptionProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends Override<HtmlAtomProps<E, B>, {
+    children?: Snippet<[{
+        alert: AlertBond;
+    }]>;
+}>, AlertDescriptionExtendProps {
+}
+export interface AlertIconProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends Override<HtmlAtomProps<E, B>, {
+    children?: Snippet<[{
+        alert: AlertBond;
+    }]>;
+}>, AlertIconExtendProps {
+}
+export interface AlertActionsProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends Override<HtmlAtomProps<E, B>, {
+    children?: Snippet<[{
+        alert: AlertBond;
+    }]>;
+}>, AlertActionsExtendProps {
+}
+export interface AlertCloseButtonProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends Override<HtmlAtomProps<E, B>, {
+    children?: Snippet<[{
+        alert: AlertBond;
+    }]>;
+}>, AlertCloseButtonExtendProps {
+}

package/dist/components/alert/types.js

@@ -0,0 +1 @@
+export {};

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

@@ -1,217 +1,201 @@
-<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
-	import type { HTMLAttributes } from 'svelte/elements';
-	import type { Base, ComponentBase, HtmlAtomProps, SnippetBase } from './types';
-	import { RootBond } from '../root';
-	import { HtmlElement } from '../element';
-	import {
-		cn,
-		toClassValue,
-		type ClassValue,
-		type VariantDefinition
-	} from '../../utils';
-	import { getPreset } from '../../context';
-	import type { PresetModuleName } from '../../context/preset.svelte';
-	import type { Bond } from '../../shared';
-
-	type Element = HTMLElementTagNameMap[E];
-
-	const rootBond = RootBond.get();
-
-	let {
-		class: klass = '',
-		as = 'div',
-		base = undefined,
-		preset: presetKey = undefined,
-		bond = undefined,
-		variants = undefined,
-		children = undefined,
-		...restProps
-	}: HtmlAtomProps<E, B> & HTMLAttributes<Element> = $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([compilePresetPlaceholder(klass), mergedVariants?.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 Component = $derived(base ?? atom) as ComponentBase;
-
-	function compilePresetPlaceholder(klass: ClassValue): ReturnType<typeof toClassValue> {
-		if (Array.isArray(klass)) {
-			return klass.map((k) => compilePresetPlaceholder(k));
-		}
-
-		const compiled = toClassValue.apply(bond, [klass, bond]);
-
-		if (Array.isArray(compiled)) {
-			return compiled.map((c) => compilePresetPlaceholder(c));
-		}
-
-		if (typeof compiled === 'string') {
-			return compiled.replace('$preset', cn(preset?.class));
-		}
-
-		return compiled;
-	}
-
-	/**
-	 * 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>
-
-{#if isSnippet}
-	{@render snippet({ class: _klass, as: _as, base: _base, children, ..._restProps })}
-{:else}
-	<Component class={_klass} as={_as} {..._restProps}>
-		{@render children?.()}
-	</Component>
-{/if}
+<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import type { Base, ComponentBase, HtmlAtomProps, SnippetBase } from './types';
+	import { RootBond } from '../root';
+	import { HtmlElement } from '../element';
+	import {
+		cn,
+		toClassValue,
+		type ClassValue,
+		type VariantDefinition
+	} from '../../utils';
+	import { getPreset } from '../../context';
+	import type { PresetModuleName } from '../../context/preset.svelte';
+	import type { Bond } from '../../shared';
+
+	type Element = HTMLElementTagNameMap[E];
+
+	const rootBond = RootBond.get();
+
+	let {
+		class: klass = '',
+		as = 'div',
+		base = undefined,
+		preset: presetKey = undefined,
+		bond = undefined,
+		variants = undefined,
+		children = undefined,
+		...restProps
+	}: HtmlAtomProps<E, B> & HTMLAttributes<Element> = $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 Component = $derived(base ?? atom) as ComponentBase;
+
+	/**
+	 * 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>
+
+{#if isSnippet}
+	{@render snippet({ class: _klass, as: _as, base: _base, children, ..._restProps })}
+{:else}
+	<Component class={_klass} as={_as} {..._restProps}>
+		{@render children?.()}
+	</Component>
+{/if}

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

@@ -1,27 +1,7 @@
 import type { HTMLAttributes } from 'svelte/elements';
-import type { Base } from './types';
-import { type ClassValue, type VariantDefinition } from '../../utils';
-import type { PresetModuleName } from '../../context/preset.svelte';
-import type { Bond } from '../../shared';
+import type { Base, HtmlAtomProps } from './types';
 declare function $$render<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(): {
-    props: Record<string, unknown> & {
-        [key: string]: unknown;
-        class?: ClassValue | ClassValue[];
-        as?: (string & {}) | E | undefined;
-        global?: boolean;
-        initial?: import("..").NodeFunction<E> | undefined;
-        enter?: import("..").TransitionFunction<E> | undefined;
-        exit?: import("..").TransitionFunction<E> | undefined;
-        animate?: import("..").NodeFunction<E> | undefined;
-        onmount?: import("..").NodeFunction<E> | undefined;
-        ondestroy?: import("..").NodeFunction<E> | undefined;
-        children?: import("svelte").Snippet;
-    } & {
-        bond?: Bond;
-        base?: B | undefined;
-        preset?: PresetModuleName | (string & {});
-        variants?: VariantDefinition<any> | ((bond: Bond, variantProps: Record<string, any>) => Record<string, any>);
-    } & HTMLAttributes<HTMLElementTagNameMap[E]>;
+    props: HtmlAtomProps<E, B> & HTMLAttributes<HTMLElementTagNameMap[E]>;
     exports: {};
     bindings: "";
     slots: {};