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

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

@@ -1,79 +1,65 @@
-<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 {
-		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';
-
-	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,
-		...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="accordion.item"
-	class={['$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,
+		...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="accordion.item"
+	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/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,42 @@
-<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 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 = '',
+		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>

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,72 @@
-<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 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 { AlertBond } from './bond.svelte';
+	import { HtmlAtom, type Base } from '../atom';
+	import type { AlertCloseButtonProps } from './types';
+
+	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}

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

@@ -1,41 +1,14 @@
-export type AlertCloseButtonProps<E extends keyof HTMLElementTagNameMap, B extends 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';
-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]>;
+import { type Base } from '../atom';
+import type { AlertCloseButtonProps } from './types';
+declare function $$render<E extends keyof HTMLElementTagNameMap = 'button', B extends Base = Base>(): {
+    props: AlertCloseButtonProps<E, B> & HTMLAttributes<HTMLElementTagNameMap[E]>;
     exports: {};
     bindings: "";
     slots: {};
     events: {};
 };
-declare class __sveltets_Render<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> {
+declare class __sveltets_Render<E extends keyof HTMLElementTagNameMap = 'button', B extends Base = Base> {
     props(): ReturnType<typeof $$render<E, B>>['props'];
     events(): ReturnType<typeof $$render<E, B>>['events'];
     slots(): ReturnType<typeof $$render<E, B>>['slots'];
@@ -43,12 +16,12 @@ declare class __sveltets_Render<E extends keyof HTMLElementTagNameMap = 'div', B
     exports(): {};
 }
 interface $$IsomorphicComponent {
-    new <E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<E, B>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<E, B>['props']>, ReturnType<__sveltets_Render<E, B>['events']>, ReturnType<__sveltets_Render<E, B>['slots']>> & {
+    new <E extends keyof HTMLElementTagNameMap = 'button', B extends Base = Base>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<E, B>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<E, B>['props']>, ReturnType<__sveltets_Render<E, B>['events']>, ReturnType<__sveltets_Render<E, B>['slots']>> & {
         $$bindings?: ReturnType<__sveltets_Render<E, B>['bindings']>;
     } & ReturnType<__sveltets_Render<E, B>['exports']>;
-    <E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(internal: unknown, props: ReturnType<__sveltets_Render<E, B>['props']> & {}): ReturnType<__sveltets_Render<E, B>['exports']>;
+    <E extends keyof HTMLElementTagNameMap = 'button', B extends Base = Base>(internal: unknown, props: ReturnType<__sveltets_Render<E, B>['props']> & {}): ReturnType<__sveltets_Render<E, B>['exports']>;
     z_$$bindings?: ReturnType<__sveltets_Render<any, any>['bindings']>;
 }
 declare const AlertCloseButton: $$IsomorphicComponent;
-type AlertCloseButton<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> = InstanceType<typeof AlertCloseButton<E, B>>;
+type AlertCloseButton<E extends keyof HTMLElementTagNameMap = 'button', B extends Base = Base> = InstanceType<typeof AlertCloseButton<E, B>>;
 export default AlertCloseButton;