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

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

@@ -1,26 +1,8 @@
-<script module>
-	import type { Factory } from '../../types';
-
-	export type AccordionRootProps<
-		E extends keyof HTMLElementTagNameMap = 'div',
-		B extends Base = Base
-	> = HtmlAtomProps<E, B> & {
-		value?: string;
-		values?: string[];
-		data?: unknown;
-		multiple?: boolean;
-		collapsible?: boolean;
-		disabled?: boolean;
-		factory?: Factory<AccordionBond>;
-		children?: Snippet<[{ accordion: AccordionBond }]>;
-	};
-</script>
-
 <script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
-	import type { Snippet } from 'svelte';
 	import { AccordionBond, AccordionState, type AccordionStateProps } from './bond.svelte';
 	import { defineProperty, defineState } from '../../utils';
-	import { HtmlAtom, type HtmlAtomProps, type Base } from '../atom';
+	import { HtmlAtom, type Base } from '../atom';
+	import type { AccordionRootProps } from './types';
 
 	let {
 		value = $bindable(undefined),

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

@@ -1,19 +1,6 @@
-import type { Factory } from '../../types';
-export type AccordionRootProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> = HtmlAtomProps<E, B> & {
-    value?: string;
-    values?: string[];
-    data?: unknown;
-    multiple?: boolean;
-    collapsible?: boolean;
-    disabled?: boolean;
-    factory?: Factory<AccordionBond>;
-    children?: Snippet<[{
-        accordion: AccordionBond;
-    }]>;
-};
-import type { Snippet } from 'svelte';
 import { AccordionBond } from './bond.svelte';
-import { type HtmlAtomProps, type Base } from '../atom';
+import { type Base } from '../atom';
+import type { AccordionRootProps } from './types';
 declare function $$render<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(): {
     props: AccordionRootProps<E, B>;
     exports: {

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

@@ -1,2 +1,3 @@
 export { Root as Accordion } from './atoms';
-export { AccordionItem } from './item';
+export * from './item';
+export * from './types';

package/dist/components/accordion/index.js

@@ -1,2 +1,3 @@
 export { Root as Accordion } from './atoms';
-export { AccordionItem } from './item';
+export * from './item';
+export * from './types';

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

@@ -1,17 +1,7 @@
-<script lang="ts" module>
-	export type AccordionItemBodyProps<
-		E extends keyof HTMLElementTagNameMap = 'div',
-		B extends Base = Base
-	> = HtmlAtomProps<E, B> & {
-		children?: Snippet<[{ accordionItem: AccordionItemBond }]>;
-	};
-</script>
-
 <script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
-	import type { Snippet } from 'svelte';
+	import { HtmlAtom, type Base } from '../../atom';
 	import { AccordionItemBond } from './bond.svelte';
-
-	import { HtmlAtom, type HtmlAtomProps, type Base } from '../../atom';
+	import type { AccordionItemBodyProps } from './types';
 
 	const bond = AccordionItemBond.get();
 	const isOpen = $derived(bond?.state.isOpen ?? false);

package/dist/components/accordion/item/accordion-item-body.svelte.d.ts

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

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

@@ -1,17 +1,7 @@
-<script lang="ts" module>
-	export type AccordionItemHeaderProps<
-		E extends keyof HTMLElementTagNameMap = 'div',
-		B extends Base = Base
-	> = HtmlAtomProps<E, B> & {
-		children?: Snippet<[{ accordionItem: AccordionItemBond }]>;
-	};
-</script>
-
 <script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
-	import type { Snippet } from 'svelte';
+	import { HtmlAtom, type Base } from '../../atom';
 	import { AccordionItemBond } from './bond.svelte';
-
-	import { HtmlAtom, type HtmlAtomProps, type Base } from '../../atom';
+	import type { AccordionItemHeaderProps } from './types';
 
 	let {
 		class: klass = '',
@@ -25,7 +15,7 @@
 		exit = undefined,
 		initial = undefined,
 		...restProps
-	} = $props();
+	}: AccordionItemHeaderProps = $props();
 
 	const bond = AccordionItemBond.get();
 

package/dist/components/accordion/item/accordion-item-header.svelte.d.ts

@@ -1,24 +1,7 @@
-export type AccordionItemHeaderProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> = HtmlAtomProps<E, B> & {
-    children?: Snippet<[{
-        accordionItem: AccordionItemBond;
-    }]>;
-};
-import type { Snippet } from 'svelte';
-import { AccordionItemBond } from './bond.svelte';
-import { type HtmlAtomProps, type Base } from '../../atom';
+import { type Base } from '../../atom';
+import type { AccordionItemHeaderProps } from './types';
 declare function $$render<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(): {
-    props: {
-        class?: string;
-        as?: string;
-        children?: any;
-        onpointerdown?: any;
-        onmount?: any;
-        ondestroy?: any;
-        animate?: any;
-        enter?: any;
-        exit?: any;
-        initial?: any;
-    } & Record<string, any>;
+    props: AccordionItemHeaderProps;
     exports: {};
     bindings: "";
     slots: {};

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

@@ -1,19 +1,10 @@
-<script lang="ts" module>
-	export type AccordionItemIndicatorProps<
-		E extends keyof HTMLElementTagNameMap = 'div',
-		B extends Base = Base
-	> = HtmlAtomProps<E, B> & {
-		children?: Snippet<[{ accordionItem: AccordionItemBond }]>;
-	};
-</script>
-
 <script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
-	import type { Snippet } from 'svelte';
 	import { animate as motion } from 'motion';
-	import { AccordionItemBond } from './bond.svelte';
 	import { Icon } from '../../icon';
 	import IconArrowDown from '../../../icons/icon-arrow-down.svelte';
-	import { HtmlAtom, type HtmlAtomProps, type Base } from '../../atom';
+	import { HtmlAtom, type Base } from '../../atom';
+	import { AccordionItemBond } from './bond.svelte';
+	import type { AccordionItemIndicatorProps } from './types';
 
 	const bond = AccordionItemBond.get();
 	const isOpen = $derived(bond?.state?.isOpen ?? false);

package/dist/components/accordion/item/accordion-item-indicator.svelte.d.ts

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

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

@@ -1,27 +1,13 @@
-<script module>
-	export type AccordionItemRootProps<
-		E extends keyof HTMLElementTagNameMap = 'div',
-		B extends Base = Base
-	> = HtmlAtomProps<E, B> & {
-		children?: Snippet<[{ accordionItem: AccordionItemBond }]>;
-		value?: string;
-		data?: any;
-		disabled?: boolean;
-		factory?: Factory<AccordionItemBond>;
-	};
-</script>
-
 <script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
-	import type { Snippet } from 'svelte';
 	import { nanoid } from 'nanoid';
+	import { defineProperty, defineState } from '../../../utils';
+	import { HtmlAtom, type Base } from '../../atom';
 	import {
 		AccordionItemBond,
 		AccordionItemBondState,
 		type AccordionItemBondProps
 	} from './bond.svelte';
-	import { defineProperty, defineState } from '../../../utils';
-	import { HtmlAtom, type HtmlAtomProps, type Base } from '../../atom';
-	import type { Factory } from '../../../types';
+	import type { AccordionItemRootProps } from './types';
 
 	let {
 		class: klass = '',

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

@@ -1,16 +1,6 @@
-export type AccordionItemRootProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> = HtmlAtomProps<E, B> & {
-    children?: Snippet<[{
-        accordionItem: AccordionItemBond;
-    }]>;
-    value?: string;
-    data?: any;
-    disabled?: boolean;
-    factory?: Factory<AccordionItemBond>;
-};
-import type { Snippet } from 'svelte';
+import { type Base } from '../../atom';
 import { AccordionItemBond } from './bond.svelte';
-import { type HtmlAtomProps, type Base } from '../../atom';
-import type { Factory } from '../../../types';
+import type { AccordionItemRootProps } from './types';
 declare function $$render<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(): {
     props: AccordionItemRootProps<E, B>;
     exports: {

package/dist/components/accordion/item/index.d.ts

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

package/dist/components/accordion/item/types.d.ts

@@ -0,0 +1,52 @@
+import type { Snippet } from 'svelte';
+import type { HtmlAtomProps, Base } from '../../atom';
+import type { Factory, Override } from '../../../types';
+import type { AccordionItemBond } from './bond.svelte';
+/**
+ * Extend this interface to add custom accordion item root properties in your application.
+ */
+export interface AccordionItemRootExtendProps {
+}
+/**
+ * Extend this interface to add custom accordion item header properties in your application.
+ */
+export interface AccordionItemHeaderExtendProps {
+}
+/**
+ * Extend this interface to add custom accordion item body properties in your application.
+ */
+export interface AccordionItemBodyExtendProps {
+}
+/**
+ * Extend this interface to add custom accordion item indicator properties in your application.
+ */
+export interface AccordionItemIndicatorExtendProps {
+}
+export interface AccordionItemRootProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends Override<HtmlAtomProps<E, B>, {
+    children?: Snippet<[{
+        accordionItem: AccordionItemBond;
+    }]>;
+}>, AccordionItemRootExtendProps {
+    value?: string;
+    data?: any;
+    disabled?: boolean;
+    factory?: Factory<AccordionItemBond>;
+}
+export interface AccordionItemHeaderProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends Override<HtmlAtomProps<E, B>, {
+    children?: Snippet<[{
+        accordionItem: AccordionItemBond;
+    }]>;
+}>, AccordionItemHeaderExtendProps {
+}
+export interface AccordionItemBodyProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends Override<HtmlAtomProps<E, B>, {
+    children?: Snippet<[{
+        accordionItem: AccordionItemBond;
+    }]>;
+}>, AccordionItemBodyExtendProps {
+}
+export interface AccordionItemIndicatorProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends Override<HtmlAtomProps<E, B>, {
+    children?: Snippet<[{
+        accordionItem: AccordionItemBond;
+    }]>;
+}>, AccordionItemIndicatorExtendProps {
+}

package/dist/components/accordion/item/types.js

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

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

@@ -0,0 +1,21 @@
+import type { Snippet } from 'svelte';
+import type { HtmlAtomProps, Base } from '../atom';
+import type { Factory } from '../../types';
+import type { AccordionBond } from './bond.svelte';
+/**
+ * Extend this interface to add custom accordion properties in your application.
+ */
+export interface AccordionExtendProps {
+}
+export interface AccordionRootProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends Omit<HtmlAtomProps<E, B>, 'children'>, AccordionExtendProps {
+    value?: string;
+    values?: string[];
+    data?: unknown;
+    multiple?: boolean;
+    collapsible?: boolean;
+    disabled?: boolean;
+    factory?: Factory<AccordionBond>;
+    children?: Snippet<[{
+        accordion: AccordionBond;
+    }]>;
+}

package/dist/components/accordion/types.js

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

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

@@ -1,52 +1,43 @@
-<script module lang="ts">
-	export type AlertActionsProps<
-		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 type { HTMLAttributes } from 'svelte/elements';
-	import { AlertBond } from './bond.svelte';
-
-	import { HtmlAtom, type HtmlAtomProps, type Base } from '../atom';
-
-	type Element = HTMLElementTagNameMap[E];
-
-	const bond = AlertBond.get();
-
-	let {
-		class: klass = '',
-		children = undefined,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = undefined,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
-		...restProps
-	}: AlertActionsProps<E, B> & HTMLAttributes<Element> = $props();
-
-	const actionsProps = $derived({
-		...bond?.actions(),
-		...restProps
-	});
-</script>
-
-<HtmlAtom
-	{bond}
-	preset="alert.actions"
-	class={['alert-actions border-border mt-3 flex items-center gap-2', '$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)}
-	{...actionsProps}
->
-	{@render children?.({ alert: bond! })}
-</HtmlAtom>
+<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { HtmlAtom, type Base } from '../atom';
+	import { AlertBond } from './bond.svelte';
+	import type { AlertActionsProps } from './types';
+
+	type Element = HTMLElementTagNameMap[E];
+
+	const bond = AlertBond.get();
+
+	let {
+		class: klass = '',
+		preset = 'alert.actions',
+		children = undefined,
+		onmount = undefined,
+		ondestroy = undefined,
+		animate = undefined,
+		enter = undefined,
+		exit = undefined,
+		initial = undefined,
+		...restProps
+	}: AlertActionsProps<E, B> & HTMLAttributes<Element> = $props();
+
+	const actionsProps = $derived({
+		...bond?.actions(),
+		...restProps
+	});
+</script>
+
+<HtmlAtom
+	{bond}
+	{preset}
+	class={['alert-actions border-border mt-3 flex items-center gap-2', '$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)}
+	{...actionsProps}
+>
+	{@render children?.({ alert: bond! })}
+</HtmlAtom>

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

@@ -1,35 +1,8 @@
-export type AlertActionsProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> = HtmlAtomProps<E, B> & {
-    children?: Snippet<[{
-        alert: AlertBond;
-    }]>;
-};
-import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
-import { AlertBond } from './bond.svelte';
-import { type HtmlAtomProps, type Base } from '../atom';
+import { type Base } from '../atom';
+import type { AlertActionsProps } from './types';
 declare function $$render<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(): {
-    props: Record<string, unknown> & {
-        [key: string]: unknown;
-        class?: import("../..").ClassValue | import("../..").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?: Snippet;
-    } & {
-        bond?: import("../..").Bond;
-        base?: B | undefined;
-        preset?: import("../..").ModuleName | (string & {});
-        variants?: import("../..").VariantDefinition<any> | ((bond: import("../..").Bond, variantProps: Record<string, any>) => Record<string, any>);
-    } & {
-        children?: Snippet<[{
-            alert: AlertBond;
-        }]>;
-    } & HTMLAttributes<HTMLElementTagNameMap[E]>;
+    props: AlertActionsProps<E, B> & HTMLAttributes<HTMLElementTagNameMap[E]>;
     exports: {};
     bindings: "";
     slots: {};

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

@@ -1,79 +1,70 @@
-<script module lang="ts">
-	export type AlertCloseButtonProps<
-		E extends keyof HTMLElementTagNameMap,
-		B extends 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 type { HTMLAttributes } from 'svelte/elements';
-	import { AlertBond } from './bond.svelte';
-
-	import { HtmlAtom, type HtmlAtomProps, type Base } from '../atom';
-
-	type Element = HTMLElementTagNameMap[E];
-
-	const bond = AlertBond.get();
-
-	let {
-		class: klass = '',
-		as = 'button' as E,
-		children = undefined,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = undefined,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
-		...restProps
-	}: AlertCloseButtonProps<E, B> & HTMLAttributes<Element> = $props();
-
-	const isDismissible = $derived(bond?.state.isDismissible ?? false);
-
-	const closeButtonProps = $derived({
-		...bond?.closeButton(),
-		...restProps
-	});
-</script>
-
-{#if isDismissible}
-	<HtmlAtom
-		{as}
-		{bond}
-		preset="alert.close-button"
-		class={[
-			'alert-close-button border-border absolute top-2 right-2 rounded p-1 transition-colors hover:bg-black/10 dark:hover:bg-white/10',
-			'focus:ring-2 focus:ring-offset-1 focus:outline-none',
-			{
-				'focus:ring-blue-500': bond?.state.variant === 'info',
-				'focus:ring-green-500': bond?.state.variant === 'success',
-				'focus:ring-yellow-500': bond?.state.variant === 'warning',
-				'focus:ring-red-500': bond?.state.variant === 'error'
-			},
-			'$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}
-	>
-		{@render children?.({ alert: bond! })}
-		{#if !children}
-			<svg class="h-4 w-4" 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>
-		{/if}
-	</HtmlAtom>
-{/if}
+<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 isDismissible = $derived(bond?.state.isDismissible ?? false);
+
+	const closeButtonProps = $derived({
+		...bond?.closeButton(),
+		...restProps
+	});
+</script>
+
+{#if isDismissible}
+	<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>
+{/if}