@svelte-atoms/core 1.0.0-alpha.26 → 1.0.0-alpha.28

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

@@ -1,118 +1,103 @@
-<script module lang="ts">
-	import type { Factory } from '../../types';
-
-	export type AlertRootProps<
-		E extends keyof HTMLElementTagNameMap = 'div',
-		B extends Base = Base
-	> = HtmlAtomProps<E, B> & {
-		dismissible?: boolean;
-		dismissed?: boolean;
-		disabled?: boolean;
-		extend?: Record<string, unknown>;
-		factory?: Factory<AlertBond>;
-		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, AlertBondState, type AlertBondProps } from './bond.svelte';
-	import { defineProperty, defineState } from '../../utils';
-	import { HtmlAtom, type HtmlAtomProps, type Base } from '../atom';
-	import './alert.css';
-
-	let {
-		class: klass = '',
-		dismissible = false,
-		dismissed = $bindable(false),
-		disabled = false,
-		extend = {},
-		factory = _factory,
-		children = undefined,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = undefined,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
-		...restProps
-	}: AlertRootProps<E, B> = $props();
-
-	const bondProps = defineState<AlertBondProps>(
-		[
-			defineProperty(
-				'dismissed',
-				() => dismissed,
-				(v) => {
-					dismissed = v;
-				}
-			)
-		],
-		() => ({ dismissible, disabled, extend })
-	);
-	const bond = factory(bondProps).share();
-
-	const rootProps = $derived({
-		...bond.root(),
-		...restProps
-	});
-
-	// Auto-hide logic for dismissed alerts
-	$effect(() => {
-		if (dismissed && bond.elements.root) {
-			// Add smooth transition out animation
-			const element = bond.elements.root;
-			element.style.transition = 'opacity 0.3s ease-out, transform 0.3s ease-out';
-			element.style.opacity = '0';
-			element.style.transform = 'translateY(-10px)';
-
-			// Optional: Remove from DOM after animation
-			setTimeout(() => {
-				if (element?.parentNode) {
-					element.style.display = 'none';
-				}
-			}, 300);
-		} else if (!dismissed && bond.elements.root) {
-			// Restore visibility
-			const element = bond.elements.root;
-			element.style.display = '';
-			element.style.opacity = '1';
-			element.style.transform = 'translateY(0)';
-		}
-	});
-
-	function _factory(props: typeof bondProps) {
-		const bondState = new AlertBondState(() => props);
-		return new AlertBond(bondState);
-	}
-
-	export function getBond() {
-		return bond;
-	}
-</script>
-
-<HtmlAtom
-	preset="alert"
-	class={[
-		'alert border-border relative flex gap-3 rounded-md border p-4 transition-all duration-200',
-		// Base styles
-		'bg-background text-foreground',
-		// State styles
-		{
-			'pointer-events-none opacity-60': disabled,
-			'pointer-events-none opacity-0': dismissed
-		},
-		'$preset',
-		klass
-	]}
-	{bond}
-	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)}
-	{...rootProps}
->
-	{@render children?.({ alert: bond })}
-</HtmlAtom>
+<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
+	import { defineProperty, defineState } from '../../utils';
+	import { HtmlAtom, type Base } from '../atom';
+	import { AlertBond, AlertBondState, type AlertBondProps } from './bond.svelte';
+	import type { AlertRootProps } from './types';
+	import './alert.css';
+
+	let {
+		class: klass = '',
+		preset = 'alert',
+		dismissible = false,
+		dismissed = $bindable(false),
+		disabled = false,
+		extend = {},
+		factory = _factory,
+		children = undefined,
+		onmount = undefined,
+		ondestroy = undefined,
+		animate = undefined,
+		enter = undefined,
+		exit = undefined,
+		initial = undefined,
+		...restProps
+	}: AlertRootProps<E, B> = $props();
+
+	const bondProps = defineState<AlertBondProps>(
+		[
+			defineProperty(
+				'dismissed',
+				() => dismissed,
+				(v) => {
+					dismissed = v;
+				}
+			)
+		],
+		() => ({ dismissible, disabled, extend })
+	);
+	const bond = factory(bondProps).share();
+
+	const rootProps = $derived({
+		...bond.root(),
+		...restProps
+	});
+
+	// Auto-hide logic for dismissed alerts
+	$effect(() => {
+		if (dismissed && bond.elements.root) {
+			// Add smooth transition out animation
+			const element = bond.elements.root;
+			element.style.transition = 'opacity 0.3s ease-out, transform 0.3s ease-out';
+			element.style.opacity = '0';
+			element.style.transform = 'translateY(-10px)';
+
+			// Optional: Remove from DOM after animation
+			setTimeout(() => {
+				if (element?.parentNode) {
+					element.style.display = 'none';
+				}
+			}, 300);
+		} else if (!dismissed && bond.elements.root) {
+			// Restore visibility
+			const element = bond.elements.root;
+			element.style.display = '';
+			element.style.opacity = '1';
+			element.style.transform = 'translateY(0)';
+		}
+	});
+
+	function _factory(props: typeof bondProps) {
+		const bondState = new AlertBondState(() => props);
+		return new AlertBond(bondState);
+	}
+
+	export function getBond() {
+		return bond;
+	}
+</script>
+
+<HtmlAtom
+	{preset}
+	class={[
+		'alert border-border relative flex gap-1 rounded-md border p-4 transition-all duration-200',
+		// Base styles
+		'bg-background text-foreground',
+		// State styles
+		{
+			'pointer-events-none opacity-60': disabled,
+			'pointer-events-none opacity-0': dismissed
+		},
+		'$preset',
+		klass
+	]}
+	{bond}
+	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)}
+	{...rootProps}
+>
+	{@render children?.({ alert: bond })}
+</HtmlAtom>

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

@@ -1,17 +1,6 @@
-import type { Factory } from '../../types';
-export type AlertRootProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> = HtmlAtomProps<E, B> & {
-    dismissible?: boolean;
-    dismissed?: boolean;
-    disabled?: boolean;
-    extend?: Record<string, unknown>;
-    factory?: Factory<AlertBond>;
-    children?: Snippet<[{
-        alert: AlertBond;
-    }]>;
-};
-import type { Snippet } from 'svelte';
+import { type Base } from '../atom';
 import { AlertBond, AlertBondState, type AlertBondProps } from './bond.svelte';
-import { type HtmlAtomProps, type Base } from '../atom';
+import type { AlertRootProps } from './types';
 import './alert.css';
 declare function $$render<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(): {
     props: AlertRootProps<E, B>;

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

@@ -1,51 +1,42 @@
-<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 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>
+<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 = '',
+		preset = 'alert.title',
+		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}
+	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: {};