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

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

@@ -1,60 +1,60 @@
-<script lang="ts" generics="T extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
-	import { Icon } from '../icon';
-	import { HtmlAtom, type Base } from '../atom';
-	import CloseIcon from '../../icons/icon-close.svelte';
-	import { DropdownBond } from './bond.svelte';
-
-	const bond = DropdownBond.get();
-
-	if (!bond) {
-		throw new Error('DropdownValue must be used within a Dropdown');
-	}
-
-	let {
-		class: klass = '',
-		as = 'div' as T,
-		value,
-		children,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = undefined,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
-		...restProps
-	} = $props();
-
-	function handleClick(ev: Event) {
-		ev.preventDefault();
-		ev.stopPropagation();
-
-		bond?.state.unselect([value]);
-	}
-</script>
-
-<HtmlAtom
-	{as}
-	{bond}
-	preset="dropdown.value"
-	class={[
-		'dropdown-value border-border bg-foreground/5 inline-flex flex-nowrap items-center gap-1 rounded-xs px-1 whitespace-nowrap',
-		'$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?.()}
-
-	<button
-		class="bg-foreground/5 flex aspect-square h-4 cursor-pointer items-center justify-center rounded-xs p-0"
-		onclick={handleClick}
-	>
-		<Icon class="h-3" src={CloseIcon} />
-	</button>
-</HtmlAtom>
+<script lang="ts" generics="T extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
+	import { Icon } from '../icon';
+	import { HtmlAtom, type Base } from '../atom';
+	import CloseIcon from '../../icons/icon-close.svelte';
+	import { DropdownBond } from './bond.svelte';
+
+	const bond = DropdownBond.get();
+
+	if (!bond) {
+		throw new Error('DropdownValue must be used within a Dropdown');
+	}
+
+	let {
+		class: klass = '',
+		as = 'div' as T,
+		value,
+		children,
+		onmount = undefined,
+		ondestroy = undefined,
+		animate = undefined,
+		enter = undefined,
+		exit = undefined,
+		initial = undefined,
+		...restProps
+	} = $props();
+
+	function handleClick(ev: Event) {
+		ev.preventDefault();
+		ev.stopPropagation();
+
+		bond?.state.unselect([value]);
+	}
+</script>
+
+<HtmlAtom
+	{as}
+	{bond}
+	preset="dropdown.value"
+	class={[
+		'dropdown-value border-border bg-foreground/5 inline-flex flex-nowrap items-center gap-1 rounded-xs px-1 whitespace-nowrap',
+		'$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?.()}
+
+	<button
+		class="bg-foreground/5 flex aspect-square h-4 cursor-pointer items-center justify-center rounded-xs p-0"
+		onclick={handleClick}
+	>
+		<Icon class="h-3" src={CloseIcon} />
+	</button>
+</HtmlAtom>

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

@@ -12,7 +12,7 @@ export interface ElementProps<T extends ElementTagName> extends Record<string, u
     animate?: NodeFunction<T>;
     onmount?: NodeFunction<T>;
     ondestroy?: NodeFunction<T>;
-    children?: Snippet;
+    children?: Snippet<unknown[]>;
     [key: string]: unknown;
 }
 export type HtmlElementTagName = keyof HTMLElementTagNameMap;

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

@@ -24,5 +24,5 @@ export declare class FormBondState<Props extends FormProps = FormProps> extends
     unmountField(id: string): void;
     validate(): void;
     clear(): void;
-    get fields(): FieldBond[];
+    get fields(): any;
 }

package/dist/components/form/field/field-control.svelte

@@ -1,48 +1,48 @@
-<script lang="ts" generics="B extends Base<{value: unknown}>">
-	import { HtmlAtom, type Base } from '../../atom';
-	import { FieldBond } from './bond.svelte';
-	import type { FieldControlProps } from '../types';
-
-	const bond = FieldBond.get();
-	const name = $derived(bond?.state?.props?.name);
-
-	let {
-		class: klass = '',
-		value = $bindable(),
-		checked = $bindable(),
-		number = $bindable(),
-		date = $bindable(),
-		files = $bindable(),
-		children = undefined,
-		oninput = undefined,
-		...restProps
-	}: FieldControlProps<B> = $props();
-	const controlProps = $derived({ ...bond.control(), ...restProps });
-
-	function handleInput(ev: CustomEvent, detail: any) {
-		oninput?.(ev);
-
-		if (ev.defaultPrevented) {
-			return;
-		}
-
-		bond.state.props.value = value = detail?.value;
-		bond.state.props.files = files = detail?.files ?? [];
-		bond.state.props.date = date = detail?.date ?? null;
-		bond.state.props.number = number = detail?.number ?? null;
-		bond.state.props.checked = checked = detail?.checked ?? false;
-	}
-</script>
-
-<HtmlAtom
-	{bond}
-	{value}
-	{checked}
-	{name}
-	preset="field.control"
-	class={['flex items-center', '$preset', klass]}
-	oninput={handleInput}
-	{...controlProps}
->
-	{@render children?.()}
-</HtmlAtom>
+<script lang="ts" generics="B extends Base<{value: unknown}>">
+	import { HtmlAtom, type Base } from '../../atom';
+	import { FieldBond } from './bond.svelte';
+	import type { FieldControlProps } from '../types';
+
+	const bond = FieldBond.get();
+	const name = $derived(bond?.state?.props?.name);
+
+	let {
+		class: klass = '',
+		value = $bindable(),
+		checked = $bindable(),
+		number = $bindable(),
+		date = $bindable(),
+		files = $bindable(),
+		children = undefined,
+		oninput = undefined,
+		...restProps
+	}: FieldControlProps<B> = $props();
+	const controlProps = $derived({ ...bond.control(), ...restProps });
+
+	function handleInput(ev: CustomEvent, detail: any) {
+		oninput?.(ev);
+
+		if (ev.defaultPrevented) {
+			return;
+		}
+
+		bond.state.props.value = value = detail?.value;
+		bond.state.props.files = files = detail?.files ?? [];
+		bond.state.props.date = date = detail?.date ?? null;
+		bond.state.props.number = number = detail?.number ?? null;
+		bond.state.props.checked = checked = detail?.checked ?? false;
+	}
+</script>
+
+<HtmlAtom
+	{bond}
+	{value}
+	{checked}
+	{name}
+	preset="field.control"
+	class={['flex items-center', '$preset', klass]}
+	oninput={handleInput}
+	{...controlProps}
+>
+	{@render children?.()}
+</HtmlAtom>

package/dist/components/form/field/field-label.svelte

@@ -1,24 +1,24 @@
-<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'label', B extends Base = Base">
-	import { Label } from '../../label';
-	import type { Base } from '../../atom';
-	import { FieldBond } from './bond.svelte';
-	import type { FieldLabelProps } from '../types';
-
-	const bond = FieldBond.get();
-
-	let {
-		class: klass = '',
-		as = 'label' as E,
-		children = undefined,
-		...restProps
-	}: FieldLabelProps = $props();
-
-	const labelProps = $derived({
-		...bond?.label(),
-		...restProps
-	});
-</script>
-
-<Label {as} {bond} preset="field.label" class={['flex flex-col', '$preset', klass]} {...labelProps}>
-	{@render children?.()}
-</Label>
+<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'label', B extends Base = Base">
+	import { Label } from '../../label';
+	import type { Base } from '../../atom';
+	import { FieldBond } from './bond.svelte';
+	import type { FieldLabelProps } from '../types';
+
+	const bond = FieldBond.get();
+
+	let {
+		class: klass = '',
+		as = 'label' as E,
+		children = undefined,
+		...restProps
+	}: FieldLabelProps = $props();
+
+	const labelProps = $derived({
+		...bond?.label(),
+		...restProps
+	});
+</script>
+
+<Label {as} {bond} preset="field.label" class={['flex flex-col', '$preset', klass]} {...labelProps}>
+	{@render children?.()}
+</Label>

package/dist/components/form/field/field-root.svelte

@@ -1,59 +1,59 @@
-<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
-	import { onDestroy } from 'svelte';
-	import { defineProperty, defineState } from '../../../utils';
-	import { HtmlAtom, type Base } from '../../atom';
-	import { FieldBond, FieldBondState, type FieldStateProps } from './bond.svelte';
-	import type { FieldRootProps } from '../types';
-	import { FormBond } from '../bond.svelte';
-
-	const formBond = FormBond.get();
-
-	let {
-		value = $bindable(),
-		class: klass = '',
-		name = undefined,
-		schema = undefined,
-		validator = undefined,
-		factory = _factory,
-		children = undefined,
-		...restProps
-	}: FieldRootProps<E, B> = $props();
-
-	const bondProps = defineState<FieldStateProps>([
-		defineProperty(
-			'name',
-			() => name,
-			(v) => (name = v)
-		),
-		defineProperty(
-			'value',
-			() => value,
-			(v) => (value = v)
-		),
-		defineProperty('type', () => typeof value),
-		defineProperty('schema', () => schema),
-		defineProperty('validator', () => validator ?? formBond.state.props.validator)
-	]);
-	const bond = factory(bondProps).share();
-
-	const rootProps = $derived({
-		...bond?.root(),
-		...restProps
-	});
-
-	const unmount = formBond.state.mountField(bond.id, bond);
-	onDestroy(() => unmount());
-
-	function _factory(props: typeof bondProps) {
-		const bondState = new FieldBondState(() => props);
-		return new FieldBond(bondState);
-	}
-
-	export function getBond() {
-		return bond;
-	}
-</script>
-
-<HtmlAtom preset="field" class={['flex flex-col', '$preset', klass]} {...rootProps}>
-	{@render children?.({ field: bond })}
-</HtmlAtom>
+<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
+	import { onDestroy } from 'svelte';
+	import { defineProperty, defineState } from '../../../utils';
+	import { HtmlAtom, type Base } from '../../atom';
+	import { FieldBond, FieldBondState, type FieldStateProps } from './bond.svelte';
+	import type { FieldRootProps } from '../types';
+	import { FormBond } from '../bond.svelte';
+
+	const formBond = FormBond.get();
+
+	let {
+		value = $bindable(),
+		class: klass = '',
+		name = undefined,
+		schema = undefined,
+		validator = undefined,
+		factory = _factory,
+		children = undefined,
+		...restProps
+	}: FieldRootProps<E, B> = $props();
+
+	const bondProps = defineState<FieldStateProps>([
+		defineProperty(
+			'name',
+			() => name,
+			(v) => (name = v)
+		),
+		defineProperty(
+			'value',
+			() => value,
+			(v) => (value = v)
+		),
+		defineProperty('type', () => typeof value),
+		defineProperty('schema', () => schema),
+		defineProperty('validator', () => validator ?? formBond.state.props.validator)
+	]);
+	const bond = factory(bondProps).share();
+
+	const rootProps = $derived({
+		...bond?.root(),
+		...restProps
+	});
+
+	const unmount = formBond.state.mountField(bond.id, bond);
+	onDestroy(() => unmount());
+
+	function _factory(props: typeof bondProps) {
+		const bondState = new FieldBondState(() => props);
+		return new FieldBond(bondState);
+	}
+
+	export function getBond() {
+		return bond;
+	}
+</script>
+
+<HtmlAtom preset="field" class={['flex flex-col', '$preset', klass]} {...rootProps}>
+	{@render children?.({ field: bond })}
+</HtmlAtom>

package/dist/components/icon/icon.svelte

@@ -1,44 +1,44 @@
-<script
-	lang="ts"
-	generics="Src extends Component = Component, E extends HtmlElementTagName = 'div', B extends Base = Base"
->
-	import type { Component } from 'svelte';
-	import type { HTMLAttributes } from 'svelte/elements';
-	import { HtmlAtom, type Base } from '../atom';
-	import type { HtmlElementTagName, HtmlElementType } from '../element';
-	import type { IconProps } from './types';
-
-	type Element = HtmlElementType<'div'>;
-
-	let {
-		class: klass = '',
-		src = undefined,
-		preset = 'icon',
-		children = undefined,
-		...restProps
-	}: IconProps<Src, E, B> & HTMLAttributes<Element> = $props();
-</script>
-
-<HtmlAtom
-	{preset}
-	class={[
-		'icon inline-flex aspect-square h-6 items-center justify-center leading-none text-current',
-		'$preset',
-		klass
-	]}
-	{...restProps}
->
-	{#if src}
-		{@const Src = src}
-		<Src />
-	{:else}
-		{@render children?.()}
-	{/if}
-</HtmlAtom>
-
-<style>
-	:global(.icon > *) {
-		width: 100%;
-		height: 100%;
-	}
-</style>
+<script
+	lang="ts"
+	generics="Src extends Component = Component, E extends HtmlElementTagName = 'div', B extends Base = Base"
+>
+	import type { Component } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { HtmlAtom, type Base } from '../atom';
+	import type { HtmlElementTagName, HtmlElementType } from '../element';
+	import type { IconProps } from './types';
+
+	type Element = HtmlElementType<'div'>;
+
+	let {
+		class: klass = '',
+		src = undefined,
+		preset = 'icon',
+		children = undefined,
+		...restProps
+	}: IconProps<Src, E, B> & HTMLAttributes<Element> = $props();
+</script>
+
+<HtmlAtom
+	{preset}
+	class={[
+		'icon inline-flex aspect-square h-6 items-center justify-center leading-none text-current',
+		'$preset',
+		klass
+	]}
+	{...restProps}
+>
+	{#if src}
+		{@const Src = src}
+		<Src />
+	{:else}
+		{@render children?.()}
+	{/if}
+</HtmlAtom>
+
+<style>
+	:global(.icon > *) {
+		width: 100%;
+		height: 100%;
+	}
+</style>

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

@@ -4,7 +4,7 @@ type Image = SvelteComponent<{
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}> & {
-    $$bindings?: string | undefined;
+    $$bindings?: string;
 };
 declare const Image: $$__sveltets_2_IsomorphicComponent<{
     [x: string]: never;

package/dist/components/index.d.ts

@@ -35,3 +35,7 @@ export * from './stack';
 export * from './element';
 export * from './atom';
 export * from './container';
+export * from './calendar';
+export * from './date-picker';
+export * from './qr-code';
+export * from './lazy';

package/dist/components/index.js

@@ -35,3 +35,7 @@ export * from './stack';
 export * from './element';
 export * from './atom';
 export * from './container';
+export * from './calendar';
+export * from './date-picker';
+export * from './qr-code';
+export * from './lazy';