@svelte-atoms/core 1.0.0-alpha.39 → 1.0.0-alpha.41

package/dist/components/calendar/calendar-day.css

@@ -1,6 +1,6 @@
-.calendar-day:nth-child(7n + 1) {
-	border-left: none;
-}
-.calendar-day:nth-last-child(-n + 7) {
-	border-bottom: none;
-}
+.calendar-day:nth-child(7n + 1) {
+	border-left: none;
+}
+.calendar-day:nth-last-child(-n + 7) {
+	border-bottom: none;
+}

package/dist/components/combobox/combobox-trigger.svelte

@@ -1,45 +1,34 @@
-<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
-	import { ComboboxBond } from './bond.svelte';
-	import { Trigger } from '../dropdown/atoms';
-	import type { Base } from '../atom';
-
-	const bond = ComboboxBond.get();
-
-	if (!bond) {
-		throw new Error('Combobox atom was not found');
-	}
-
-	let {
-		class: klass = '',
-		as = 'button',
-		children = undefined,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = undefined,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
-		...restProps
-	} = $props();
-</script>
-
-<Trigger
-	{as}
-	{bond}
-	preset="dropdown.trigger"
-	class={['border-border h-8 w-40', '$preset', klass]}
-	enter={enter?.bind(bond.state)}
-	exit={exit?.bind(bond.state)}
-	initial={initial?.bind(bond.state)}
-	animate={animate?.bind(bond.state)}
-	onmount={onmount?.bind(bond.state)}
-	ondestroy={ondestroy?.bind(bond.state)}
-	onclick={(ev: Event) => {
-		ev.preventDefault();
-
-		bond?.state?.open();
-	}}
-	{...restProps}
->
-	{@render children?.({ dropdown: bond })}
-</Trigger>
+<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
+	import { ComboboxBond } from './bond.svelte';
+	import { Trigger } from '../dropdown/atoms';
+	import type { Base } from '../atom';
+
+	const bond = ComboboxBond.get();
+
+	if (!bond) {
+		throw new Error('Combobox atom was not found');
+	}
+
+	let {
+		class: klass = '',
+		as = 'button',
+		preset = 'combobox.trigger',
+		children = undefined,
+		...restProps
+	} = $props();
+</script>
+
+<Trigger
+	{as}
+	{bond}
+	preset={preset}
+	class={['border-border h-8 w-40', '$preset', klass]}
+	onclick={(ev: Event) => {
+		ev.preventDefault();
+
+		bond?.state?.open();
+	}}
+	{...restProps}
+>
+	{@render children?.({ dropdown: bond })}
+</Trigger>

package/dist/components/combobox/combobox-trigger.svelte.d.ts

@@ -3,13 +3,8 @@ declare function $$render<E extends keyof HTMLElementTagNameMap = 'div', B exten
     props: {
         class?: string;
         as?: string;
+        preset?: string;
         children?: any;
-        onmount?: any;
-        ondestroy?: any;
-        animate?: any;
-        enter?: any;
-        exit?: any;
-        initial?: any;
     } & Record<string, any>;
     exports: {};
     bindings: "";

package/dist/components/datagrid/datagrid-footer.svelte

@@ -1,34 +1,34 @@
-<script lang="ts" generics="T extends keyof HTMLElementTagNameMap, B extends Base = Base">
-	import { HtmlAtom, type Base } from '../atom';
-	import { DataGridBond } from './bond.svelte';
-	import type { DatagridFooterProps } from './types';
-
-	const bond = DataGridBond.get();
-
-	let {
-		class: klass = '',
-		children = undefined,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = undefined,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
-		...restProps
-	}: DatagridFooterProps<T> = $props();
-</script>
-
-<HtmlAtom
-	{bond}
-	preset="datagrid.footer"
-	class={['border-border', '$preset', klass, 'contents']}
-	enter={enter?.bind(bond.state)}
-	exit={exit?.bind(bond.state)}
-	initial={initial?.bind(bond.state)}
-	animate={animate?.bind(bond.state)}
-	onmount={onmount?.bind(bond.state)}
-	ondestroy={ondestroy?.bind(bond.state)}
-	{...restProps}
->
-	{@render children?.({ datagrid: bond })}
-</HtmlAtom>
+<script lang="ts" generics="T extends keyof HTMLElementTagNameMap, B extends Base = Base">
+	import { HtmlAtom, type Base } from '../atom';
+	import { DataGridBond } from './bond.svelte';
+	import type { DatagridFooterProps } from './types';
+
+	const bond = DataGridBond.get();
+
+	let {
+		class: klass = '',
+		children = undefined,
+		onmount = undefined,
+		ondestroy = undefined,
+		animate = undefined,
+		enter = undefined,
+		exit = undefined,
+		initial = undefined,
+		...restProps
+	}: DatagridFooterProps<T> = $props();
+</script>
+
+<HtmlAtom
+	{bond}
+	preset="datagrid.footer"
+	class={['border-border', '$preset', klass, 'contents']}
+	enter={enter?.bind(bond.state)}
+	exit={exit?.bind(bond.state)}
+	initial={initial?.bind(bond.state)}
+	animate={animate?.bind(bond.state)}
+	onmount={onmount?.bind(bond.state)}
+	ondestroy={ondestroy?.bind(bond.state)}
+	{...restProps}
+>
+	{@render children?.({ datagrid: bond })}
+</HtmlAtom>

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

@@ -1,59 +1,59 @@
-<script lang="ts" generics="T extends keyof HTMLElementTagNameMap, B extends Base = Base">
-	import { defineProperty, defineState } from '../../utils';
-	import { HtmlAtom, type Base } from '../atom';
-	import { DataGridBond, DataGridBondState, type DataGridStateProps } from './bond.svelte';
-	import type { DatagridRootProps } from './types';
-
-	import './datagrid.css';
-
-	let {
-		class: klass = '',
-		values = $bindable([]),
-		template = undefined,
-		fallbackTemplate = 'auto',
-		factory = _factory,
-		children = undefined,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = undefined,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
-		...restProps
-	}: DatagridRootProps<T> = $props();
-
-	const bondProps = defineState<DataGridStateProps<T>>([
-		defineProperty('template', () => template),
-		defineProperty(
-			'values',
-			() => values,
-			(v) => (values = v)
-		)
-	]);
-	const bond = factory(bondProps).share();
-
-	function _factory(props: typeof bondProps) {
-		const dataGridState = new DataGridBondState(() => props);
-		return new DataGridBond(dataGridState);
-	}
-
-	export function getBond() {
-		return bond;
-	}
-</script>
-
-<HtmlAtom
-	{bond}
-	preset="datagrid"
-	class={['border-border', 'datagrid-root w-full gap-x-0 gap-y-0', '$preset', klass]}
-	style="--template-columns:{bond.state.template ?? fallbackTemplate}"
-	enter={enter?.bind(bond.state)}
-	exit={exit?.bind(bond.state)}
-	initial={initial?.bind(bond.state)}
-	animate={animate?.bind(bond.state)}
-	onmount={onmount?.bind(bond.state)}
-	ondestroy={ondestroy?.bind(bond.state)}
-	{...restProps}
->
-	{@render children?.({ datagrid: bond })}
-</HtmlAtom>
+<script lang="ts" generics="T extends keyof HTMLElementTagNameMap, B extends Base = Base">
+	import { defineProperty, defineState } from '../../utils';
+	import { HtmlAtom, type Base } from '../atom';
+	import { DataGridBond, DataGridBondState, type DataGridStateProps } from './bond.svelte';
+	import type { DatagridRootProps } from './types';
+
+	import './datagrid.css';
+
+	let {
+		class: klass = '',
+		values = $bindable([]),
+		template = undefined,
+		fallbackTemplate = 'auto',
+		factory = _factory,
+		children = undefined,
+		onmount = undefined,
+		ondestroy = undefined,
+		animate = undefined,
+		enter = undefined,
+		exit = undefined,
+		initial = undefined,
+		...restProps
+	}: DatagridRootProps<T> = $props();
+
+	const bondProps = defineState<DataGridStateProps<T>>([
+		defineProperty('template', () => template),
+		defineProperty(
+			'values',
+			() => values,
+			(v) => (values = v)
+		)
+	]);
+	const bond = factory(bondProps).share();
+
+	function _factory(props: typeof bondProps) {
+		const dataGridState = new DataGridBondState(() => props);
+		return new DataGridBond(dataGridState);
+	}
+
+	export function getBond() {
+		return bond;
+	}
+</script>
+
+<HtmlAtom
+	{bond}
+	preset="datagrid"
+	class={['border-border', 'datagrid-root w-full gap-x-0 gap-y-0', '$preset', klass]}
+	style="--template-columns:{bond.state.template ?? fallbackTemplate}"
+	enter={enter?.bind(bond.state)}
+	exit={exit?.bind(bond.state)}
+	initial={initial?.bind(bond.state)}
+	animate={animate?.bind(bond.state)}
+	onmount={onmount?.bind(bond.state)}
+	ondestroy={ondestroy?.bind(bond.state)}
+	{...restProps}
+>
+	{@render children?.({ datagrid: bond })}
+</HtmlAtom>

package/dist/components/datagrid/tr/datagrid-tr.svelte

@@ -1,90 +1,90 @@
-<script lang="ts" generics="T, E extends HtmlElementTagName, B extends Base = Base">
-	import { untrack } from 'svelte';
-	import { nanoid } from 'nanoid';
-	import { defineProperty, defineState } from '../../../utils';
-	import { HtmlAtom, type Base } from '../../atom';
-	import type { HtmlElementTagName } from '../../element';
-	import { DataGridTrBond, DataGridTrBondState, type DataGridTrBondProps } from './bond.svelte';
-	import type { DatagridTrProps } from '../types';
-	import { type DatagridContext } from '../context';
-
-	import './datagrid-tr.css';
-
-	let {
-		class: klass = '',
-		value = nanoid(),
-		rows = 'auto',
-		data = undefined,
-		header = false,
-		factory = _factory,
-		children = undefined,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = undefined,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
-		onclick = undefined,
-		...restProps
-	}: DatagridTrProps<T, E, B> = $props();
-
-	const bondProps = defineState<DataGridTrBondProps>([
-		defineProperty('data', () => data),
-		defineProperty('value', () => value),
-		defineProperty('header', () => header)
-	]);
-	const bond = factory(bondProps).share();
-
-	const isHeader = $derived(bond?.state.isHeader ?? false);
-	const isSelected = $derived(bond.state.isSelected);
-
-	const headerProps = $derived({
-		...bond.root(),
-		...restProps
-	});
-
-	const unmount = untrack(() => {
-		if (!isHeader) {
-			return bond.mount();
-		}
-	});
-
-	$effect(() => unmount);
-
-	function _factory(props: typeof bondProps) {
-		const datagridTrState = new DataGridTrBondState(() => props);
-		return new DataGridTrBond(datagridTrState);
-	}
-
-	function onclick_(ev: Event) {
-		onclick?.(ev, { tr: bond as unknown as DatagridContext<T> });
-
-		if (!ev.defaultPrevented) {
-			//
-		}
-	}
-</script>
-
-<HtmlAtom
-	{bond}
-	preset="datagrid.tr"
-	class={[
-		'datagrid-tr border-border items-center border-b bg-transparent',
-		!isHeader && 'hover:bg-foreground/2 active:bg-foreground/4 transition-colors duration-100',
-		isHeader && 'header-tr',
-		isSelected && 'bg-primary/2 hover:bg-primary/4 active:bg-primary/6',
-		'$preset',
-		klass
-	]}
-	style="--rows:{rows}"
-	enter={enter?.bind(bond.state)}
-	exit={exit?.bind(bond.state)}
-	initial={initial?.bind(bond.state)}
-	animate={animate?.bind(bond.state)}
-	onmount={onmount?.bind(bond.state)}
-	ondestroy={ondestroy?.bind(bond.state)}
-	onclick={onclick_}
-	{...headerProps}
->
-	{@render children?.({ tr: bond as unknown as DatagridContext<T> })}
-</HtmlAtom>
+<script lang="ts" generics="T, E extends HtmlElementTagName, B extends Base = Base">
+	import { untrack } from 'svelte';
+	import { nanoid } from 'nanoid';
+	import { defineProperty, defineState } from '../../../utils';
+	import { HtmlAtom, type Base } from '../../atom';
+	import type { HtmlElementTagName } from '../../element';
+	import { DataGridTrBond, DataGridTrBondState, type DataGridTrBondProps } from './bond.svelte';
+	import type { DatagridTrProps } from '../types';
+	import { type DatagridContext } from '../context';
+
+	import './datagrid-tr.css';
+
+	let {
+		class: klass = '',
+		value = nanoid(),
+		rows = 'auto',
+		data = undefined,
+		header = false,
+		factory = _factory,
+		children = undefined,
+		onmount = undefined,
+		ondestroy = undefined,
+		animate = undefined,
+		enter = undefined,
+		exit = undefined,
+		initial = undefined,
+		onclick = undefined,
+		...restProps
+	}: DatagridTrProps<T, E, B> = $props();
+
+	const bondProps = defineState<DataGridTrBondProps>([
+		defineProperty('data', () => data),
+		defineProperty('value', () => value),
+		defineProperty('header', () => header)
+	]);
+	const bond = factory(bondProps).share();
+
+	const isHeader = $derived(bond?.state.isHeader ?? false);
+	const isSelected = $derived(bond.state.isSelected);
+
+	const headerProps = $derived({
+		...bond.root(),
+		...restProps
+	});
+
+	const unmount = untrack(() => {
+		if (!isHeader) {
+			return bond.mount();
+		}
+	});
+
+	$effect(() => unmount);
+
+	function _factory(props: typeof bondProps) {
+		const datagridTrState = new DataGridTrBondState(() => props);
+		return new DataGridTrBond(datagridTrState);
+	}
+
+	function onclick_(ev: Event) {
+		onclick?.(ev, { tr: bond as unknown as DatagridContext<T> });
+
+		if (!ev.defaultPrevented) {
+			//
+		}
+	}
+</script>
+
+<HtmlAtom
+	{bond}
+	preset="datagrid.tr"
+	class={[
+		'datagrid-tr border-border items-center border-b bg-transparent',
+		!isHeader && 'hover:bg-foreground/2 active:bg-foreground/4 transition-colors duration-100',
+		isHeader && 'header-tr',
+		isSelected && 'bg-primary/2 hover:bg-primary/4 active:bg-primary/6',
+		'$preset',
+		klass
+	]}
+	style="--rows:{rows}"
+	enter={enter?.bind(bond.state)}
+	exit={exit?.bind(bond.state)}
+	initial={initial?.bind(bond.state)}
+	animate={animate?.bind(bond.state)}
+	onmount={onmount?.bind(bond.state)}
+	ondestroy={ondestroy?.bind(bond.state)}
+	onclick={onclick_}
+	{...headerProps}
+>
+	{@render children?.({ tr: bond as unknown as DatagridContext<T> })}
+</HtmlAtom>

package/dist/components/dropdown/dropdown-trigger.svelte

@@ -1,41 +1,30 @@
-<script lang="ts" generics="T extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
-	import { Trigger } from '../popover/atoms';
-	import type { Base } from '../atom';
-	import { DropdownBond } from './bond.svelte';
-	import type { DropdownTriggerProps } from './types';
-
-	const bond = DropdownBond.get();
-
-	if (!bond) {
-		throw new Error('dropdown atom was not found');
-	}
-
-	let {
-		class: klass = '',
-		as = 'button' as T,
-		children = undefined,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = undefined,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
-		...restProps
-	}: DropdownTriggerProps<T, B> = $props();
-</script>
-
-<Trigger
-	{as}
-	{bond}
-	preset="dropdown.trigger"
-	class={['border-border relative flex h-auto min-h-10 flex-wrap items-center', '$preset', klass]}
-	onmount={onmount?.bind(bond.state)}
-	ondestroy={ondestroy?.bind(bond.state)}
-	enter={enter?.bind(bond.state)}
-	exit={exit?.bind(bond.state)}
-	initial={initial?.bind(bond.state)}
-	animate={animate?.bind(bond.state)}
-	{...restProps}
->
-	{@render children?.({ dropdown: bond })}
-</Trigger>
+<script lang="ts" generics="T extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
+	import { Trigger } from '../popover/atoms';
+	import type { Base } from '../atom';
+	import { DropdownBond } from './bond.svelte';
+	import type { DropdownTriggerProps } from './types';
+
+	const bond = DropdownBond.get();
+
+	if (!bond) {
+		throw new Error('dropdown atom was not found');
+	}
+
+	let {
+		class: klass = '',
+		as = 'button' as T,
+		preset = 'dropdown.trigger',
+		children = undefined,
+		...restProps
+	}: DropdownTriggerProps<T, B> = $props();
+</script>
+
+<Trigger
+	{as}
+	{bond}
+	preset={preset}
+	class={['border-border relative flex h-auto min-h-10 flex-wrap items-center', '$preset', klass]}
+	{...restProps}
+>
+	{@render children?.({ dropdown: bond })}
+</Trigger>

package/dist/components/element/element.stories.svelte

@@ -0,0 +1,37 @@
+<script module>
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import HtmlElement from './html-element.svelte';
+	import { Button } from '../button';
+	import { fade } from 'svelte/transition';
+
+	// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+	const { Story } = defineMeta({
+		title: 'Atoms/Element',
+		// This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+
+		parameters: {
+			// More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
+			layout: 'fullscreen'
+		},
+		args: {}
+	});
+</script>
+
+<script lang="ts">
+	let showElement = $state(true);
+</script>
+
+<Story name="Element" args={{}}>
+	<!-- Multi-select dropdown with search functionality -->
+	<div class="flex flex-col gap-4">
+		{#if showElement}
+			<HtmlElement enter={node=> ()=> fade(node, { duration: 500 })} exit={node => fade(node, { duration: 500 })} class="p-4 bg-blue-100 rounded" as="section">
+				Hello, I am an HtmlElement component! I can be used to render any HTML element with custom props and transitions.
+			</HtmlElement>
+		{/if}
+		
+		<Button onclick={() => showElement = !showElement}>
+			{showElement ? 'Hide' : 'Show'} HtmlElement
+		</Button>
+	</div>
+</Story>

package/dist/components/element/element.stories.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const Element: import("svelte").Component<Record<string, never>, {}, "">;
+type Element = ReturnType<typeof Element>;
+export default Element;

package/dist/components/element/html-element.svelte

@@ -48,7 +48,6 @@
 		[createAttachmentKey()]: (n: Element) => {
 			node = n;
 		},
-		class: cn(toClassValue(klass)),
 		onintroend: (ev: TransitionEvent) => {
 			onintroend?.(ev);
 			if (ev.defaultPrevented) return;
@@ -56,30 +55,31 @@
 			hasEntered = true;
 		},
 		...restProps
-	});
+	}) as Record<string, any>;
+
+	const transitionSnippet = $derived(global ? globalTransition : localTransition);
 
-	function _enter(node: Element) {
+	function enterTransition(node: Element) {
 		initial?.(node);
-		return () => {
-			const { duration = 0, delay = 0, easing = undefined } = enter?.(node) ?? {};
-			return { duration, delay, easing };
-		};
+		
+		return enter?.(node) ?? {};
 	}
 
-	function _exit(node: Element) {
-		return () => {
-			const { duration = 0, delay = 0, easing = undefined } = exit?.(node) ?? {};
-			return { duration, delay, easing };
-		};
+	function exitTransition(node: Element) {
+		return exit?.(node) ?? {};
 	}
 </script>
 
-{#if global}
-	<svelte:element this={as} in:_enter|global out:_exit|global {...elementProps}>
+{#snippet globalTransition()}
+	<svelte:element this={as} class={cn(toClassValue(klass))} in:enterTransition|global out:exitTransition|global {...elementProps}>
 		{@render children?.()}
 	</svelte:element>
-{:else}
-	<svelte:element this={as} in:_enter out:_exit {...elementProps}>
+{/snippet}
+
+{#snippet localTransition()}
+	<svelte:element this={as} class={cn(toClassValue(klass))} in:enterTransition out:exitTransition {...elementProps}>
 		{@render children?.()}
 	</svelte:element>
-{/if}
+{/snippet}
+
+{@render transitionSnippet()}

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

@@ -1,8 +1,4 @@
 export { default as HtmlElement } from './html-element.svelte';
 export { default as SvgElement } from './svg-element.svelte';
-/**
- * @deprecated
- */
-export { default as MathmlElement } from './mathml-element.svelte';
 export * as Element from './atoms';
 export * from './types';

package/dist/components/element/index.js

@@ -1,8 +1,4 @@
 export { default as HtmlElement } from './html-element.svelte';
 export { default as SvgElement } from './svg-element.svelte';
-/**
- * @deprecated
- */
-export { default as MathmlElement } from './mathml-element.svelte';
 export * as Element from './atoms';
 export * from './types';