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

package/dist/components/accordion/item/accordion-item-root.svelte

@@ -1,66 +1,66 @@
-<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
-	import { nanoid } from 'nanoid';
-	import { defineProperty, defineState } from '../../../utils';
-	import { HtmlAtom, type Base } from '../../atom';
-	import {
-		AccordionItemBond,
-		AccordionItemBondState,
-		type AccordionItemBondProps
-	} from './bond.svelte';
-	import type { AccordionItemRootProps } from './types';
-
-	let {
-		class: klass = '',
-		value = nanoid(),
-		data = undefined,
-		disabled = false,
-		factory = _factory,
-		children = undefined,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = undefined,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
-		preset = 'accordion.item',
-		...restProps
-	}: AccordionItemRootProps<E, B> = $props();
-
-	const accordionItemProps = defineState<AccordionItemBondProps>([
-		defineProperty('data', () => data),
-		defineProperty('disabled', () => disabled),
-		defineProperty('value', () => value)
-	]);
-	const bond = factory(accordionItemProps).share();
-
-	bond.state.mount();
-
-	const rootProps = $derived({
-		...bond.root(),
-		...restProps
-	});
-
-	function _factory(props: typeof accordionItemProps) {
-		const accordionItemState = new AccordionItemBondState(() => props);
-		return new AccordionItemBond(accordionItemState);
-	}
-
-	export function getBond() {
-		return bond;
-	}
-</script>
-
-<HtmlAtom
-	{bond}
-	{preset}
-	class={['border-border', '$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)}
-	{...rootProps}
->
-	{@render children?.({ accordionItem: bond })}
-</HtmlAtom>
+<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
+	import { nanoid } from 'nanoid';
+	import { defineProperty, defineState } from '../../../utils';
+	import { HtmlAtom, type Base } from '../../atom';
+	import {
+		AccordionItemBond,
+		AccordionItemBondState,
+		type AccordionItemBondProps
+	} from './bond.svelte';
+	import type { AccordionItemRootProps } from './types';
+
+	let {
+		class: klass = '',
+		value = nanoid(),
+		data = undefined,
+		disabled = false,
+		factory = _factory,
+		children = undefined,
+		onmount = undefined,
+		ondestroy = undefined,
+		animate = undefined,
+		enter = undefined,
+		exit = undefined,
+		initial = undefined,
+		preset = 'accordion.item',
+		...restProps
+	}: AccordionItemRootProps<E, B> = $props();
+
+	const accordionItemProps = defineState<AccordionItemBondProps>([
+		defineProperty('data', () => data),
+		defineProperty('disabled', () => disabled),
+		defineProperty('value', () => value)
+	]);
+	const bond = factory(accordionItemProps).share();
+
+	bond.state.mount();
+
+	const rootProps = $derived({
+		...bond.root(),
+		...restProps
+	});
+
+	function _factory(props: typeof accordionItemProps) {
+		const accordionItemState = new AccordionItemBondState(() => props);
+		return new AccordionItemBond(accordionItemState);
+	}
+
+	export function getBond() {
+		return bond;
+	}
+</script>
+
+<HtmlAtom
+	{bond}
+	{preset}
+	class={['border-border', '$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)}
+	{...rootProps}
+>
+	{@render children?.({ accordionItem: bond })}
+</HtmlAtom>

package/dist/components/alert/alert-close-button.svelte

@@ -1,66 +1,66 @@
-<script
-	lang="ts"
-	generics="E extends keyof HTMLElementTagNameMap = 'button', B extends Base = Base"
->
-	import type { HTMLAttributes } from 'svelte/elements';
-	import { HtmlAtom, type Base } from '../atom';
-	import { AlertBond } from './bond.svelte';
-	import type { AlertCloseButtonProps } from './types';
-	import { Icon } from '../icon';
-
-	type Element = HTMLElementTagNameMap[E];
-
-	const bond = AlertBond.get();
-
-	let {
-		class: klass = '',
-		as = 'button' as E,
-		preset = 'alert.close-button',
-		children = undefined,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = undefined,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
-		...restProps
-	}: AlertCloseButtonProps<E, B> & HTMLAttributes<Element> = $props();
-
-	const closeButtonProps = $derived({
-		...bond?.closeButton(),
-		...restProps
-	});
-</script>
-
-<HtmlAtom
-	{as}
-	{bond}
-	{preset}
-	class={[
-		'alert-close-button border-border flex size-6 items-center justify-center rounded p-0.5 transition-colors hover:bg-black/10 dark:hover:bg-white/10',
-		'$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)}
-	{...closeButtonProps}
->
-	{#if children}
-		{@render children({ alert: bond! })}
-	{:else}
-		<Icon class="h-full">
-			<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
-				<path
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					stroke-width="2"
-					d="M6 18L18 6M6 6l12 12"
-				/>
-			</svg>
-		</Icon>
-	{/if}
-</HtmlAtom>
+<script
+	lang="ts"
+	generics="E extends keyof HTMLElementTagNameMap = 'button', B extends Base = Base"
+>
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { HtmlAtom, type Base } from '../atom';
+	import { AlertBond } from './bond.svelte';
+	import type { AlertCloseButtonProps } from './types';
+	import { Icon } from '../icon';
+
+	type Element = HTMLElementTagNameMap[E];
+
+	const bond = AlertBond.get();
+
+	let {
+		class: klass = '',
+		as = 'button' as E,
+		preset = 'alert.close-button',
+		children = undefined,
+		onmount = undefined,
+		ondestroy = undefined,
+		animate = undefined,
+		enter = undefined,
+		exit = undefined,
+		initial = undefined,
+		...restProps
+	}: AlertCloseButtonProps<E, B> & HTMLAttributes<Element> = $props();
+
+	const closeButtonProps = $derived({
+		...bond?.closeButton(),
+		...restProps
+	});
+</script>
+
+<HtmlAtom
+	{as}
+	{bond}
+	{preset}
+	class={[
+		'alert-close-button border-border flex size-6 items-center justify-center rounded p-0.5 transition-colors hover:bg-black/10 dark:hover:bg-white/10',
+		'$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)}
+	{...closeButtonProps}
+>
+	{#if children}
+		{@render children({ alert: bond! })}
+	{:else}
+		<Icon class="h-full">
+			<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
+				<path
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					stroke-width="2"
+					d="M6 18L18 6M6 6l12 12"
+				/>
+			</svg>
+		</Icon>
+	{/if}
+</HtmlAtom>

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

@@ -1,42 +1,42 @@
-<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 { AlertDescriptionProps } from './types';
-
-	const bond = AlertBond.get();
-
-	let {
-		class: klass = '',
-		as = 'p' as E,
-		preset = 'alert.description',
-		children = undefined,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = undefined,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
-		...restProps
-	}: AlertDescriptionProps<E, B> = $props();
-
-	const descriptionProps = $derived({
-		...bond?.description(),
-		...restProps
-	});
-</script>
-
-<HtmlAtom
-	{bond}
-	{preset}
-	class={['alert-description border-border mt-1 text-sm leading-relaxed', '$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)}
-	{as}
-	{...descriptionProps}
->
-	{@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 { AlertDescriptionProps } from './types';
+
+	const bond = AlertBond.get();
+
+	let {
+		class: klass = '',
+		as = 'p' as E,
+		preset = 'alert.description',
+		children = undefined,
+		onmount = undefined,
+		ondestroy = undefined,
+		animate = undefined,
+		enter = undefined,
+		exit = undefined,
+		initial = undefined,
+		...restProps
+	}: AlertDescriptionProps<E, B> = $props();
+
+	const descriptionProps = $derived({
+		...bond?.description(),
+		...restProps
+	});
+</script>
+
+<HtmlAtom
+	{bond}
+	{preset}
+	class={['alert-description border-border mt-1 text-sm leading-relaxed', '$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)}
+	{as}
+	{...descriptionProps}
+>
+	{@render children?.({ alert: bond! })}
+</HtmlAtom>

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

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