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

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

@@ -1,58 +1,48 @@
-<script module lang="ts">
-	export type FieldInputProps<B extends Base<{ value?: unknown }>> = Override<
-		HtmlAtomProps<any, B>,
-		{
-			value?: any;
-			valueAsDate?: Date;
-			valueAsNumber?: number;
-			checked?: boolean;
-			files?: File[] | null;
-			oninput?: (ev: CustomEvent, detail?: { value: any }) => void;
-			children?: Snippet;
-		}
-	>;
-</script>
-
-<script lang="ts" generics="B extends Base<{value: unknown}>">
-	import type { Snippet } from 'svelte';
-	import type { Override } from '../../../types';
-	import { HtmlAtom, type HtmlAtomProps, type Base } from '../../atom';
-	import { FieldBond } from './bond.svelte';
-
-	const bond = FieldBond.get();
-	const name = $derived(bond?.state?.props?.name);
-
-	let {
-		class: klass = '',
-		value = $bindable(),
-		checked = $bindable(),
-		children = undefined,
-		oninput = undefined,
-		...restProps
-	}: FieldInputProps<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;
-	}
-</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-control.svelte.d.ts

@@ -1,25 +1,11 @@
-export type FieldInputProps<B extends Base<{
-    value?: unknown;
-}>> = Override<HtmlAtomProps<any, B>, {
-    value?: any;
-    valueAsDate?: Date;
-    valueAsNumber?: number;
-    checked?: boolean;
-    files?: File[] | null;
-    oninput?: (ev: CustomEvent, detail?: {
-        value: any;
-    }) => void;
-    children?: Snippet;
-}>;
-import type { Snippet } from 'svelte';
-import type { Override } from '../../../types';
-import { type HtmlAtomProps, type Base } from '../../atom';
+import { type Base } from '../../atom';
+import type { FieldControlProps } from '../types';
 declare function $$render<B extends Base<{
     value: unknown;
 }>>(): {
-    props: FieldInputProps<B>;
+    props: FieldControlProps<B>;
     exports: {};
-    bindings: "value" | "checked";
+    bindings: "number" | "value" | "date" | "checked" | "files";
     slots: {};
     events: {};
 };
@@ -29,7 +15,7 @@ declare class __sveltets_Render<B extends Base<{
     props(): ReturnType<typeof $$render<B>>['props'];
     events(): ReturnType<typeof $$render<B>>['events'];
     slots(): ReturnType<typeof $$render<B>>['slots'];
-    bindings(): "value" | "checked";
+    bindings(): "number" | "value" | "date" | "checked" | "files";
     exports(): {};
 }
 interface $$IsomorphicComponent {

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

@@ -1,31 +1,24 @@
-<script module lang="ts">
-	export type FieldLabelProps<
-		E extends keyof HTMLElementTagNameMap = 'label',
-		B extends Base = Base
-	> = Omit<LabelProps<E, B>, 'for'>;
-</script>
-
-<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'label', B extends Base = Base">
-	import { Label } from '../../label';
-	import type { LabelProps } from '../../label/label.svelte';
-	import type { Base } from '../../atom';
-	import { FieldBond } from './bond.svelte';
-
-	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-label.svelte.d.ts

@@ -1,6 +1,5 @@
-export type FieldLabelProps<E extends keyof HTMLElementTagNameMap = 'label', B extends Base = Base> = Omit<LabelProps<E, B>, 'for'>;
-import type { LabelProps } from '../../label/label.svelte';
 import type { Base } from '../../atom';
+import type { FieldLabelProps } from '../types';
 declare function $$render<E extends keyof HTMLElementTagNameMap = 'label', B extends Base = Base>(): {
     props: FieldLabelProps;
     exports: {};

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

@@ -1,88 +1,59 @@
-<script module lang="ts">
-	import type { Factory } from '../../../types';
-
-	export type FieldRootProps<
-		E extends keyof HTMLElementTagNameMap = 'div',
-		B extends Base = Base
-	> = Override<
-		HtmlAtomProps<E, B>,
-		{
-			disabled: boolean;
-			readonly: boolean;
-			name?: string;
-			value?: any;
-			schema?: Schema;
-			parse: (schema: Schema) => void;
-			extend: any;
-			factory?: Factory<FieldBond>;
-			children?: Snippet<[{ field?: FieldBond }]>;
-		}
-	>;
-</script>
-
-<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
-	import { onDestroy, type Snippet } from 'svelte';
-	import { FieldBond, FieldBondState, type FieldStateProps } from './bond.svelte';
-	import { FormBond } from '../bond.svelte';
-	import type { Override } from '../../../types';
-	import { defineProperty, defineState } from '../../../utils';
-	import {
-		HtmlAtom,
-		type ElementType,
-		type HtmlAtomProps,
-		type Base
-	} from '../../atom';
-
-	type Element = ElementType<E>;
-
-	const formBond = FormBond.get();
-
-	let {
-		value = $bindable(),
-		class: klass = '',
-		name = undefined,
-		schema = undefined,
-		validator = undefined,
-		factory = _factory,
-		children = undefined,
-		...restProps
-	}: FieldRootProps<E, B, Extension, Schema> = $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/form/field/field-root.svelte.d.ts

@@ -1,25 +1,10 @@
-import type { Factory } from '../../../types';
-export type FieldRootProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> = Override<HtmlAtomProps<E, B>, {
-    disabled: boolean;
-    readonly: boolean;
-    name?: string;
-    value?: any;
-    schema?: Schema;
-    parse: (schema: Schema) => void;
-    extend: any;
-    factory?: Factory<FieldBond>;
-    children?: Snippet<[{
-        field?: FieldBond;
-    }]>;
-}>;
-import { type Snippet } from 'svelte';
+import { type Base } from '../../atom';
 import { FieldBond } from './bond.svelte';
-import type { Override } from '../../../types';
-import { type HtmlAtomProps, type Base } from '../../atom';
+import type { FieldRootProps } from '../types';
 declare function $$render<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(): {
-    props: FieldRootProps<E, B, Extension, Schema>;
+    props: FieldRootProps<E, B>;
     exports: {
-        getBond: () => any;
+        getBond: () => FieldBond;
     };
     bindings: "value";
     slots: {};
@@ -31,7 +16,7 @@ declare class __sveltets_Render<E extends keyof HTMLElementTagNameMap = 'div', B
     slots(): ReturnType<typeof $$render<E, B>>['slots'];
     bindings(): "value";
     exports(): {
-        getBond: () => any;
+        getBond: () => FieldBond;
     };
 }
 interface $$IsomorphicComponent {

package/dist/components/form/form.stories.svelte

@@ -44,7 +44,7 @@
 							<Field.Label>First Name</Field.Label>
 							<Input.Root>
 								<Field.Control
-									base={Input.Value}
+									base={Input.Control}
 									placeholder="Enter your first name"
 									onblur={() => {
 										const results = field?.state.validate();
@@ -65,14 +65,14 @@
 					<Field.Root name="last name" schema={personSchema.shape.lastName}>
 						<Field.Label>Last Name</Field.Label>
 						<Input.Root>
-							<Field.Control base={Input.Value} placeholder="Enter your last name" />
+							<Field.Control base={Input.Control} placeholder="Enter your last name" />
 						</Input.Root>
 					</Field.Root>
 				</div>
 
 				<div class="flex flex-col">
 					<Field.Root name="is admin" schema={personSchema.shape.isAdmin}>
-						<Field.Label>Is Admin</Field.Label>
+						<Field.Label>Is Admin?</Field.Label>
 						<Field.Control base={Checkbox} />
 					</Field.Root>
 				</div>

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

@@ -1,3 +1,4 @@
+export * from './types';
 export { Root as Form } from './atoms';
 export { Field } from './field';
 export type { ValidationError, ValidationResult, ValidationAdapter, FieldStateProps } from './field/bond.svelte';

package/dist/components/form/index.js

@@ -1,3 +1,4 @@
+export * from './types';
 export { Root as Form } from './atoms';
 export { Field } from './field';
 export { ZodValidationAdapter } from './field/bond.svelte';

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

@@ -0,0 +1,76 @@
+import type { Snippet } from 'svelte';
+import type { HtmlAtomProps, Base } from '../atom';
+import type { Override, 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 {
+}
+/**
+ * Extend this interface to add custom field root properties in your application.
+ */
+export interface FieldRootExtendProps {
+}
+/**
+ * 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 {
+    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 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;
+    name?: string;
+    value?: any;
+    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<{
+    value?: unknown;
+}>> = Override<HtmlAtomProps<any, B>, {
+    value?: any;
+    valueAsDate?: Date;
+    valueAsNumber?: number;
+    checked?: boolean;
+    files?: File[] | null;
+    oninput?: (ev: CustomEvent, detail?: {
+        value: any;
+    }) => void;
+    children?: Snippet;
+}> & FieldControlExtendProps;
+/**
+ * @deprecated Use FormRootExtendProps instead
+ */
+export type FormExtendProps = FormRootExtendProps;
+export {};

package/dist/components/form/types.js

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

package/dist/components/icon/icon.svelte

@@ -1,55 +1,44 @@
-<script module lang="ts">
-	export type IconProps<
-		Src extends Component = Component,
-		E extends HtmlElementTagName = 'div',
-		B extends Base = Base
-	> = {
-		class?: string;
-		src?: Src;
-		children?: Snippet;
-	} & HtmlAtomProps<E, B>;
-</script>
-
-<script
-	lang="ts"
-	generics="Src extends Component = Component, E extends HtmlElementTagName = 'div', B extends Base = Base"
->
-	import type { Component, Snippet } from 'svelte';
-	import type { HTMLAttributes } from 'svelte/elements';
-	import { HtmlAtom, type HtmlAtomProps, type Base } from '../atom';
-	import type { HtmlElementTagName, HtmlElementType } from '../element';
-
-	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/icon/icon.svelte.d.ts

@@ -1,35 +1,10 @@
-export type IconProps<Src extends Component = Component, E extends HtmlElementTagName = 'div', B extends Base = Base> = {
-    class?: string;
-    src?: Src;
-    children?: Snippet;
-} & HtmlAtomProps<E, B>;
-import type { Component, Snippet } from 'svelte';
+import type { Component } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
-import { type HtmlAtomProps, type Base } from '../atom';
+import { type Base } from '../atom';
 import type { HtmlElementTagName } from '../element';
+import type { IconProps } from './types';
 declare function $$render<Src extends Component = Component, E extends HtmlElementTagName = 'div', B extends Base = Base>(): {
-    props: {
-        class?: string;
-        src?: Src | undefined;
-        children?: Snippet;
-    } & Record<string, unknown> & {
-        [key: string]: unknown;
-        class?: import("../..").ClassValue | import("../..").ClassValue[];
-        as?: (string & {}) | E | undefined;
-        global?: boolean;
-        initial?: import("../element").NodeFunction<E> | undefined;
-        enter?: import("../element").TransitionFunction<E> | undefined;
-        exit?: import("../element").TransitionFunction<E> | undefined;
-        animate?: import("../element").NodeFunction<E> | undefined;
-        onmount?: import("../element").NodeFunction<E> | undefined;
-        ondestroy?: import("../element").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>);
-    } & HTMLAttributes<HTMLDivElement>;
+    props: IconProps<Src, E, B> & HTMLAttributes<HTMLDivElement>;
     exports: {};
     bindings: "";
     slots: {};