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

package/dist/components/form/field/field-helper-text.svelte.d.ts

@@ -0,0 +1,26 @@
+import { type Base } from '../../atom';
+import type { FieldTextProps } from '../types';
+declare function $$render<E extends keyof HTMLElementTagNameMap = 'p', B extends Base = Base>(): {
+    props: FieldTextProps<E, B>;
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<E extends keyof HTMLElementTagNameMap = 'p', 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'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <E extends keyof HTMLElementTagNameMap = 'p', 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 = 'p', 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 FieldHelperText: $$IsomorphicComponent;
+type FieldHelperText<E extends keyof HTMLElementTagNameMap = 'p', B extends Base = Base> = InstanceType<typeof FieldHelperText<E, B>>;
+export default FieldHelperText;

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

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

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

@@ -1,7 +1,7 @@
-import type { Base } from '../../atom';
+import { type Base } from '../../atom';
 import type { FieldLabelProps } from '../types';
 declare function $$render<E extends keyof HTMLElementTagNameMap = 'label', B extends Base = Base>(): {
-    props: FieldLabelProps;
+    props: FieldLabelProps<E, B>;
     exports: {};
     bindings: "";
     slots: {};

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

@@ -1,5 +1,5 @@
 <script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
-	import { onDestroy } from 'svelte';
+	import { onDestroy, untrack } from 'svelte';
 	import { defineProperty, defineState } from '../../../utils';
 	import { HtmlAtom, type Base } from '../../atom';
 	import { FieldBond, FieldBondState, type FieldStateProps } from './bond.svelte';
@@ -32,16 +32,25 @@
 		),
 		defineProperty('type', () => typeof value),
 		defineProperty('schema', () => schema),
-		defineProperty('validator', () => validator ?? formBond.state.props.validator)
+		defineProperty(
+			'validator',
+			() =>
+				validator ??
+				(formBond?.state?.props as { validator?: FieldStateProps['validator'] } | undefined)
+					?.validator
+		)
 	]);
-	const bond = factory(bondProps).share();
+	const bondFactory = untrack(() => factory);
+	const bond = bondFactory(bondProps).share();
 
-	const rootProps = $derived({
-		...bond?.root(),
-		...restProps
-	});
+	const rootProps = $derived(
+		({
+			...bond?.root(),
+			...restProps
+		}) as Record<string, unknown>
+	);
 
-	const unmount = formBond.state.mountField(bond.id, bond);
+	const unmount = formBond?.state.mountField(bond.id, bond) ?? (() => {});
 	onDestroy(() => unmount());
 
 	function _factory(props: typeof bondProps) {

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

@@ -1,66 +1,66 @@
-<script module lang="ts">
-	import type { Snippet } from 'svelte';
-	import type { HTMLAttributes } from 'svelte/elements';
-	import { HtmlAtom, type HtmlAtomProps, type Base } from '../atom';
-	import { defineState, defineProperty } from '../../utils/state';
-	import type { Override, Factory } from '../../types';
-	import { FormBond, FormBondState, type FormProps } from './bond.svelte';
-
-	type CommonProps = {
-		factory?: Factory<FormBond>;
-	};
-
-	type RenderlessProps = {
-		renderless?: true;
-		children?: Snippet<[{ form: FormBond }]>;
-	};
-
-	type RenderfullProps<B extends Base = Base> = Override<
-		HtmlAtomProps<'form', B>,
-		{
-			renderless?: false;
-			children?: Snippet<[{ form: FormBond }]>;
-		}
-	>;
-
-	export type FormRootProps<B extends Base = Base> = CommonProps &
-		(RenderlessProps | RenderfullProps<B>);
-</script>
-
-<script lang="ts" generics="B extends Base = Base">
-	let {
-		class: klass = '',
-		renderless = false,
-		validator = undefined,
-		factory = _factory,
-		children = undefined,
-		...restProps
-	}: FormRootProps<S> & HTMLAttributes<HTMLFormElement> = $props();
-
-	const bondProps = defineState<FormProps>([
-		defineProperty('renderless', () => renderless),
-		defineProperty('validator', () => validator),
-		defineProperty('rest', () => restProps)
-	]);
-	const bond = factory(bondProps).share();
-
-	function _factory(props: typeof bondProps) {
-		// Placeholder for any factory logic if needed
-
-		const bondState = new FormBondState(() => props);
-
-		return new FormBond(bondState);
-	}
-
-	export function getBond() {
-		return bond;
-	}
-</script>
-
-{#if renderless}
-	{@render children?.({ form: bond })}
-{:else}
-	<HtmlAtom {bond} preset="form" class={['$preset', klass]} as="form" {...restProps}>
-		{@render children?.({ form: bond })}
-	</HtmlAtom>
-{/if}
+<script module lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { HtmlAtom, type HtmlAtomProps, type Base } from '../atom';
+	import { defineState, defineProperty } from '../../utils/state';
+	import type { Override, Factory } from '../../types';
+	import { FormBond, FormBondState, type FormProps } from './bond.svelte';
+
+	type CommonProps = {
+		factory?: Factory<FormBond>;
+	};
+
+	type RenderlessProps = {
+		renderless?: true;
+		children?: Snippet<[{ form: FormBond }]>;
+	};
+
+	type RenderfullProps<B extends Base = Base> = Override<
+		HtmlAtomProps<'form', B>,
+		{
+			renderless?: false;
+			children?: Snippet<[{ form: FormBond }]>;
+		}
+	>;
+
+	export type FormRootProps<B extends Base = Base> = CommonProps &
+		(RenderlessProps | RenderfullProps<B>);
+</script>
+
+<script lang="ts" generics="B extends Base = Base">
+	let {
+		class: klass = '',
+		renderless = false,
+		validator = undefined,
+		factory = _factory,
+		children = undefined,
+		...restProps
+	}: FormRootProps<S> & HTMLAttributes<HTMLFormElement> = $props();
+
+	const bondProps = defineState<FormProps>([
+		defineProperty('renderless', () => renderless),
+		defineProperty('validator', () => validator),
+		defineProperty('rest', () => restProps)
+	]);
+	const bond = factory(bondProps).share();
+
+	function _factory(props: typeof bondProps) {
+		// Placeholder for any factory logic if needed
+
+		const bondState = new FormBondState(() => props);
+
+		return new FormBond(bondState);
+	}
+
+	export function getBond() {
+		return bond;
+	}
+</script>
+
+{#if renderless}
+	{@render children?.({ form: bond })}
+{:else}
+	<HtmlAtom {bond} preset="form" class={['$preset', klass]} as="form" {...restProps}>
+		{@render children?.({ form: bond })}
+	</HtmlAtom>
+{/if}

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

@@ -1,76 +1,52 @@
 import type { Snippet } from 'svelte';
 import type { HtmlAtomProps, Base } from '../atom';
-import type { Override, Factory } from '../../types';
+import type { Factory } from '../../types';
 import type { FormBond } from './bond.svelte';
-import type { FieldBond } from './field/bond.svelte';
-import type { LabelProps } from '../label';
-import type { Schema } from './validation-adapters';
-/**
- * Extend this interface to add custom form root properties in your application.
- */
-export interface FormRootExtendProps {
+import type { FieldBond, FieldStateProps } from './field/bond.svelte';
+type SnippetProps = Record<string, unknown>;
+type Schema = unknown;
+export interface FormSnippetProps extends SnippetProps {
+    form: FormBond;
 }
-/**
- * Extend this interface to add custom field root properties in your application.
- */
-export interface FieldRootExtendProps {
+export type FormChildren = Snippet<[FormSnippetProps]>;
+export interface FieldSnippetProps extends SnippetProps {
+    field: FieldBond | undefined;
 }
-/**
- * Extend this interface to add custom field label properties in your application.
- */
-export interface FieldLabelExtendProps {
-}
-/**
- * Extend this interface to add custom field control properties in your application.
- */
-export interface FieldControlExtendProps {
-}
-interface CommonProps extends FormRootExtendProps {
+export type FieldChildren = Snippet<[FieldSnippetProps]>;
+interface CommonProps {
     factory?: Factory<FormBond>;
 }
-interface RenderlessProps {
-    renderless?: true;
-    children?: Snippet<[{
-        form: FormBond;
-    }]>;
-}
-interface RenderfullProps<B extends Base = Base> extends Override<HtmlAtomProps<'form', B>, {
-    renderless?: false;
-    children?: Snippet<[{
-        form: FormBond;
-    }]>;
-}> {
+export interface FormRootProps<B extends Base = Base> extends HtmlAtomProps<'form', B, FormChildren>, CommonProps {
+    renderless?: boolean;
+    children?: FormChildren;
 }
-export type FormRootProps<B extends Base = Base> = CommonProps & (RenderlessProps | RenderfullProps<B>);
-export type FieldRootProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> = Override<HtmlAtomProps<E, B>, {
-    disabled: boolean;
-    readonly: boolean;
+export interface FieldRootProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends HtmlAtomProps<E, B, FieldChildren> {
+    disabled?: boolean;
+    readonly?: boolean;
     name?: string;
-    value?: any;
+    value?: unknown;
     schema?: Schema;
-    parse: (schema: Schema) => void;
-    extend: any;
-    factory?: Factory<FieldBond>;
-    children?: Snippet<[{
-        field?: FieldBond;
-    }]>;
-}> & FieldRootExtendProps;
-export type FieldLabelProps<E extends keyof HTMLElementTagNameMap = 'label', B extends Base = Base> = Omit<LabelProps<E, B>, 'for'> & FieldLabelExtendProps;
-export type FieldControlProps<B extends Base<{
+    parse?: (schema: Schema) => void;
+    extend?: Record<string, unknown>;
+    factory?: ((props: FieldStateProps) => FieldBond) | Factory<FieldBond>;
+}
+export interface FieldLabelProps<E extends keyof HTMLElementTagNameMap = 'label', B extends Base = Base> extends HtmlAtomProps<E, B, FieldChildren> {
+    for?: never;
+}
+export interface FieldControlProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends HtmlAtomProps<E, B, FieldChildren> {
     value?: unknown;
-}>> = Override<HtmlAtomProps<any, B>, {
-    value?: any;
     valueAsDate?: Date;
     valueAsNumber?: number;
     checked?: boolean;
     files?: File[] | null;
     oninput?: (ev: CustomEvent, detail?: {
-        value: any;
+        value: unknown;
     }) => void;
-    children?: Snippet;
-}> & FieldControlExtendProps;
-/**
- * @deprecated Use FormRootExtendProps instead
- */
-export type FormExtendProps = FormRootExtendProps;
+    children?: FieldChildren;
+}
+export interface FieldHelperTextProps<E extends keyof HTMLElementTagNameMap = 'p', B extends Base = Base> extends HtmlAtomProps<E, B, FieldChildren> {
+    children?: FieldChildren;
+}
+export interface FieldTextProps<E extends keyof HTMLElementTagNameMap = 'p', B extends Base = Base> extends FieldHelperTextProps<E, B> {
+}
 export {};

package/dist/components/icon/icon.svelte

@@ -1,40 +1,40 @@
-<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';
-	import './icon.css';
-
-	type Element = HtmlElementType<'div'>;
-
-	let {
-		class: klass = '',
-		src = undefined,
-		preset = 'icon',
-		children = undefined,
-		...restProps
-	}: IconProps<Src, E, B> & HTMLAttributes<Element> = $props();
-
-	const content = $derived(src ? sourceSnippet : children );
-</script>
-
-{#snippet sourceSnippet()}
-	{@const Src = src}
-	<Src />
-{/snippet}
-
-<HtmlAtom
-	{preset}
-	class={[
-		'icon inline-flex aspect-square h-6 items-center justify-center leading-none text-current',
-		'$preset',
-		klass
-	]}
-	{...restProps}
->
-	{@render content?.()}
-</HtmlAtom>
+<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';
+	import './icon.css';
+
+	type Element = HtmlElementType<'div'>;
+
+	let {
+		class: klass = '',
+		src = undefined,
+		preset = 'icon',
+		children = undefined,
+		...restProps
+	}: IconProps<Src, E, B> & HTMLAttributes<Element> = $props();
+
+	const content = $derived(src ? sourceSnippet : children );
+</script>
+
+{#snippet sourceSnippet()}
+	{@const Src = src}
+	<Src />
+{/snippet}
+
+<HtmlAtom
+	{preset}
+	class={[
+		'icon inline-flex aspect-square h-6 items-center justify-center leading-none text-current',
+		'$preset',
+		klass
+	]}
+	{...restProps}
+>
+	{@render content?.()}
+</HtmlAtom>

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

@@ -1,11 +1,8 @@
 import type { Component, Snippet } from 'svelte';
-import type { HtmlAtomProps, Base } from '../atom';
-/**
- * Extend this interface to add custom icon properties in your application.
- */
-export interface IconExtendProps {
+import type { HtmlAtomProps, Base, SnippetProps } from '../atom';
+export interface IconSnippetProps extends SnippetProps {
 }
-export interface IconProps<Src extends Component = Component, E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends HtmlAtomProps<E, B>, IconExtendProps {
+export type IconChildren = Snippet<[IconSnippetProps]>;
+export interface IconProps<Src extends Component = Component, E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends HtmlAtomProps<E, B, IconChildren> {
     src?: Src;
-    children?: Snippet;
 }

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

@@ -0,0 +1,2 @@
+export { default as Image } from './image.svelte';
+export * from './types';

package/dist/components/image/index.js

@@ -1 +1,2 @@
-"use strict";
+export { default as Image } from './image.svelte';
+export * from './types';

package/dist/components/index.d.ts

@@ -20,17 +20,20 @@ export * from './badge';
 export * from './breadcrumb';
 export * from './checkbox';
 export * from './combobox';
+export * from './context-menu';
 export * from './label';
 export * from './layer';
 export * from './link';
 export * from './list';
 export * from './menu';
+export * from './dropdown-menu';
 export * from './radio';
 export * from './sidebar';
 export * from './drawer';
 export * from './textarea';
 export * from './tree';
 export * from './dropdown';
+export * from './select';
 export * from './stack';
 export * from './stepper';
 export * from './element';
@@ -39,5 +42,13 @@ export * from './container';
 export * from './calendar';
 export * from './date-picker';
 export * from './qr-code';
+export * from './swatch';
 export * from './lazy';
 export * from './chip';
+export * from './toast';
+export * from './context-menu';
+export * from './divider';
+export * from './image';
+export * from './virtual';
+export * from './switch';
+export * from './slider';

package/dist/components/index.js

@@ -20,17 +20,20 @@ export * from './badge';
 export * from './breadcrumb';
 export * from './checkbox';
 export * from './combobox';
+export * from './context-menu';
 export * from './label';
 export * from './layer';
 export * from './link';
 export * from './list';
 export * from './menu';
+export * from './dropdown-menu';
 export * from './radio';
 export * from './sidebar';
 export * from './drawer';
 export * from './textarea';
 export * from './tree';
 export * from './dropdown';
+export * from './select';
 export * from './stack';
 export * from './stepper';
 export * from './element';
@@ -39,5 +42,13 @@ export * from './container';
 export * from './calendar';
 export * from './date-picker';
 export * from './qr-code';
+export * from './swatch';
 export * from './lazy';
 export * from './chip';
+export * from './toast';
+export * from './context-menu';
+export * from './divider';
+export * from './image';
+export * from './virtual';
+export * from './switch';
+export * from './slider';

package/dist/components/input/atoms.d.ts

@@ -1,8 +1,26 @@
 export { default as Root } from './input-root.svelte';
 /**
- * @deprecated use Input.Control instead
+ * @deprecated use Input.XXXControl instead where XXX is the type of input you want to use
  */
 export { default as Value } from './input-control.svelte';
+/**
+ * @deprecated use Input.XXXControl instead where XXX is the type of input you want to use
+ */
 export { default as Control } from './input-control.svelte';
+export { default as NumberControl } from './input-number-control.svelte';
+export { default as TimeControl } from './time/time-control.svelte';
+export { default as DateTimeControl } from './time/datetime-control.svelte';
+export { default as DateControl } from './time/datetime-control.svelte';
+export { default as FileControl } from './input-file-control.svelte';
+export { default as UrlControl } from './input-url-control.svelte';
+export { default as EmailControl } from './input-email-control.svelte';
+export { default as PasswordControl } from './input-password-control.svelte';
+export { default as TextControl } from './input-text-control.svelte';
+export { default as PhoneControl } from './input-phone-control.svelte';
+export { default as LocationControl } from './input-location.svelte';
+export { default as OtpControl } from './input-otp-control.svelte';
+export { default as CurrencyControl } from './input-currency-control.svelte';
+export { default as ColorControl } from './color/color-control.svelte';
+export { default as ColorSwatch } from './color/swatch.svelte';
 export { default as Icon } from './input-icon.svelte';
 export { default as Placeholder } from './input-placeholder.svelte';

package/dist/components/input/atoms.js

@@ -1,8 +1,26 @@
 export { default as Root } from './input-root.svelte';
 /**
- * @deprecated use Input.Control instead
+ * @deprecated use Input.XXXControl instead where XXX is the type of input you want to use
  */
 export { default as Value } from './input-control.svelte';
+/**
+ * @deprecated use Input.XXXControl instead where XXX is the type of input you want to use
+ */
 export { default as Control } from './input-control.svelte';
+export { default as NumberControl } from './input-number-control.svelte';
+export { default as TimeControl } from './time/time-control.svelte';
+export { default as DateTimeControl } from './time/datetime-control.svelte';
+export { default as DateControl } from './time/datetime-control.svelte';
+export { default as FileControl } from './input-file-control.svelte';
+export { default as UrlControl } from './input-url-control.svelte';
+export { default as EmailControl } from './input-email-control.svelte';
+export { default as PasswordControl } from './input-password-control.svelte';
+export { default as TextControl } from './input-text-control.svelte';
+export { default as PhoneControl } from './input-phone-control.svelte';
+export { default as LocationControl } from './input-location.svelte';
+export { default as OtpControl } from './input-otp-control.svelte';
+export { default as CurrencyControl } from './input-currency-control.svelte';
+export { default as ColorControl } from './color/color-control.svelte';
+export { default as ColorSwatch } from './color/swatch.svelte';
 export { default as Icon } from './input-icon.svelte';
 export { default as Placeholder } from './input-placeholder.svelte';