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

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

@@ -1,103 +1,68 @@
-<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>
+<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',
+		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('disabled', () => disabled)],
+		() => ({ disabled, extend })
+	);
+	const bond = factory(bondProps).share();
+
+	const rootProps = $derived({
+		...bond.root(),
+		...restProps
+	});
+
+	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-50': disabled
+		},
+		'$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

@@ -7,7 +7,7 @@ declare function $$render<E extends keyof HTMLElementTagNameMap = 'div', B exten
     exports: {
         getBond: () => AlertBond<AlertBondState<AlertBondProps>>;
     };
-    bindings: "dismissed";
+    bindings: "";
     slots: {};
     events: {};
 };
@@ -15,7 +15,7 @@ declare class __sveltets_Render<E extends keyof HTMLElementTagNameMap = 'div', B
     props(): ReturnType<typeof $$render<E, B>>['props'];
     events(): ReturnType<typeof $$render<E, B>>['events'];
     slots(): ReturnType<typeof $$render<E, B>>['slots'];
-    bindings(): "dismissed";
+    bindings(): "";
     exports(): {
         getBond: () => AlertBond<AlertBondState<AlertBondProps>>;
     };

package/dist/components/alert/alert.stories.svelte

@@ -1,6 +1,5 @@
 <script module>
 	import { defineMeta } from '@storybook/addon-svelte-csf';
-	import Root from '../root/root.svelte';
 	import { Alert as AAlert } from './index';
 	import { Button } from '../button';
 	import { Icon } from '../icon';
@@ -44,7 +43,7 @@
 {/snippet}
 
 <Story name="All Variants">
-	<Root class="space-y-6 p-8">
+	<div class="space-y-6 p-8">
 		<div class="space-y-4">
 			<h2 class="text-2xl font-bold">Alert Variants</h2>
 
@@ -113,11 +112,11 @@
 				<AAlert.Content></AAlert.Content>
 			</AAlert.Root>
 		</div>
-	</Root>
+	</div>
 </Story>
 
 <Story name="Dismissible">
-	<Root class="space-y-6 p-8">
+	<div class="space-y-6 p-8">
 		<div class="space-y-4">
 			<h2 class="text-2xl font-bold">Dismissible Alerts</h2>
 
@@ -172,11 +171,11 @@
 				</AAlert.CloseButton>
 			</AAlert.Root>
 		</div>
-	</Root>
+	</div>
 </Story>
 
 <Story name="With Actions">
-	<Root class="space-y-6 p-8">
+	<div class="space-y-6 p-8">
 		<div class="space-y-4">
 			<h2 class="text-2xl font-bold">Alerts with Action Buttons</h2>
 
@@ -243,11 +242,11 @@
 				<AAlert.Content></AAlert.Content>
 			</AAlert.Root>
 		</div>
-	</Root>
+	</div>
 </Story>
 
 <Story name="Minimal">
-	<Root class="space-y-6 p-8">
+	<div class="space-y-6 p-8">
 		<div class="space-y-4">
 			<h2 class="text-2xl font-bold">Minimal Alerts</h2>
 
@@ -268,11 +267,11 @@
 				<AAlert.Content>Connection lost. Attempting to reconnect...</AAlert.Content>
 			</AAlert.Root>
 		</div>
-	</Root>
+	</div>
 </Story>
 
 <Story name="Real-World Examples">
-	<Root class="space-y-6 p-8">
+	<div class="space-y-6 p-8">
 		<div class="space-y-4">
 			<h2 class="text-2xl font-bold">Real-World Use Cases</h2>
 
@@ -397,5 +396,5 @@
 				</AAlert.Actions>
 			</AAlert.Root>
 		</div>
-	</Root>
+	</div>
 </Story>

package/dist/components/alert/bond.svelte.d.ts

@@ -1,8 +1,5 @@
 import { Bond, BondState, type BondStateProps } from '../../shared/bond.svelte';
 export type AlertBondProps = BondStateProps & {
-    variant?: 'info' | 'success' | 'warning' | 'error';
-    dismissible?: boolean;
-    dismissed?: boolean;
     disabled?: boolean;
     extend?: Record<string, unknown>;
 };
@@ -25,9 +22,6 @@ export declare class AlertBond<State extends AlertBondState<AlertBondProps> = Al
         'aria-labelledby': string;
         'aria-describedby': string;
         'aria-disabled': boolean;
-        'data-variant': "success" | "error" | "info" | "warning";
-        'data-dismissed': boolean;
-        'data-dismissible': boolean;
     };
     icon(props?: Record<string, unknown>): {
         id: string;
@@ -49,17 +43,10 @@ export declare class AlertBond<State extends AlertBondState<AlertBondProps> = Al
         id: string;
         type: string;
         'aria-label': string;
-        'aria-expanded': boolean;
-        onclick: () => void;
     };
     static get(): AlertBond | undefined;
     static set(bond: AlertBond): AlertBond;
 }
 export declare class AlertBondState<Props extends AlertBondProps> extends BondState<Props> {
     constructor(props: () => Props);
-    dismiss(): void;
-    restore(): void;
-    get isDismissed(): boolean;
-    get isDismissible(): boolean;
-    get variant(): "success" | "error" | "info" | "warning";
 }

package/dist/components/alert/bond.svelte.js

@@ -10,8 +10,6 @@ export class AlertBond extends Bond {
         return AlertBond.set(this);
     }
     root(props = {}) {
-        const variant = this.state.props.variant ?? 'info';
-        const dismissed = this.state.props.dismissed ?? false;
         const disabled = this.state.props.disabled ?? false;
         return {
             id: `alert-root-${this.id}`,
@@ -19,9 +17,6 @@ export class AlertBond extends Bond {
             'aria-labelledby': `alert-title-${this.id}`,
             'aria-describedby': `alert-description-${this.id}`,
             'aria-disabled': disabled,
-            'data-variant': variant,
-            'data-dismissed': dismissed,
-            'data-dismissible': this.state.props.dismissible ?? false,
             ...props,
             [createAttachmentKey()]: (node) => {
                 this.elements.root = node;
@@ -75,13 +70,10 @@ export class AlertBond extends Bond {
         };
     }
     closeButton(props = {}) {
-        const dismissed = this.state.props.dismissed ?? false;
         return {
             id: `alert-close-button-${this.id}`,
             type: 'button',
             'aria-label': 'Dismiss alert',
-            'aria-expanded': !dismissed,
-            onclick: () => this.state.dismiss(),
             ...props,
             [createAttachmentKey()]: (node) => {
                 this.elements.closeButton = node;
@@ -99,28 +91,4 @@ export class AlertBondState extends BondState {
     constructor(props) {
         super(props);
     }
-    dismiss() {
-        if (this.props.dismissible && !this.props.disabled) {
-            // Update the dismissed state through props if mutable
-            const props = this.props;
-            if ('dismissed' in props) {
-                props.dismissed = true;
-            }
-        }
-    }
-    restore() {
-        const props = this.props;
-        if ('dismissed' in props) {
-            props.dismissed = false;
-        }
-    }
-    get isDismissed() {
-        return this.props.dismissed ?? false;
-    }
-    get isDismissible() {
-        return this.props.dismissible ?? false;
-    }
-    get variant() {
-        return this.props.variant ?? 'info';
-    }
 }

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

@@ -1,6 +1,6 @@
 import type { Snippet } from 'svelte';
 import type { HtmlAtomProps, Base } from '../atom';
-import type { Factory, Override } from '../../types';
+import type { Factory } from '../../types';
 import type { AlertBond } from './bond.svelte';
 /**
  * Extend this interface to add custom alert root properties in your application.
@@ -37,7 +37,7 @@ export interface AlertActionsExtendProps {
  */
 export interface AlertCloseButtonExtendProps {
 }
-export interface AlertRootProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends Omit<HtmlAtomProps<E, B>, 'children'>, AlertRootExtendProps {
+export interface AlertRootProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends HtmlAtomProps<E, B>, AlertRootExtendProps {
     dismissible?: boolean;
     dismissed?: boolean;
     disabled?: boolean;
@@ -47,39 +47,15 @@ export interface AlertRootProps<E extends keyof HTMLElementTagNameMap = 'div', B
         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 AlertContentProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends HtmlAtomProps<E, B>, 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 AlertTitleProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends HtmlAtomProps<E, B>, 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 AlertDescriptionProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends HtmlAtomProps<E, B>, 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 AlertIconProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends HtmlAtomProps<E, B>, 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 AlertActionsProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends HtmlAtomProps<E, B>, AlertActionsExtendProps {
 }
-export interface AlertCloseButtonProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends Override<HtmlAtomProps<E, B>, {
-    children?: Snippet<[{
-        alert: AlertBond;
-    }]>;
-}>, AlertCloseButtonExtendProps {
+export interface AlertCloseButtonProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends HtmlAtomProps<E, B>, AlertCloseButtonExtendProps {
 }