svelora 3.0.0 → 3.0.2

package/dist/Form/Form.svelte

@@ -1,178 +1,120 @@
-<script lang="ts" module>
-    import type { FormProps, FormSchema } from './form.types.js'
-
-    export type Props<
-        S extends FormSchema | undefined = FormSchema | undefined,
-        T extends boolean = true,
-        N extends boolean = false
-    > = FormProps<S, T, N>
+<script lang="ts" module>export {};
 </script>
 
 <script
     lang="ts"
     generics="S extends FormSchema | undefined = FormSchema | undefined, T extends boolean = true, N extends boolean = false"
->
-    import { onDestroy, onMount, setContext, untrack } from 'svelte'
-    import type { HTMLAttributes } from 'svelte/elements'
-    import { getComponentConfig } from '../config.js'
-    import { FORM_CONTEXT_KEY, FormContext, getFormContext } from './form.context.svelte.js'
-    import type { FormApi, FormErrorWithId } from './form.types.js'
-    import { formDefaults, formVariants } from './form.variants.js'
-
-    const config = getComponentConfig('form', formDefaults)
-
-    let {
-        ref = $bindable(null),
-        api = $bindable<FormApi<unknown> | undefined>(),
-        id,
-        schema,
-        state = $bindable({} as never),
-        validate: customValidate,
-        validateOn = ['input', 'blur', 'change'],
-        validateOnInputDelay = 300,
-        disabled = false,
-        loadingAuto = true,
-        transform = true as T,
-        nested = false as N,
-        name,
-        onsubmit,
-        onerror,
-        class: className,
-        ui,
-        children,
-        ...restProps
-    }: Props<S, T, N> = $props()
-
-    // Generate a stable form id. Both `id` and `nested` are effectively init-only
-    // (they should not change over a form instance's lifetime), so `untrack`
-    // silences Svelte's state_referenced_locally warning.
-    const formId: string | number = untrack(
-        () =>
-            (id as string | number | undefined) ??
-            (typeof crypto !== 'undefined' && 'randomUUID' in crypto
-                ? crypto.randomUUID()
-                : `svelora-form-${Math.random().toString(36).slice(2)}`)
-    )
-
-    // Parent context captured once at init — `nested` is effectively immutable
-    // over a form instance's lifetime. We warn (dev-only) if it's mutated later.
-    const parentCtx = untrack(() => (nested ? getFormContext() : undefined))
-    const initialNested = untrack(() => nested)
-    $effect(() => {
-        if (nested !== initialNested) {
-        }
-    })
-
-    // Create the reactive form context. All config is passed via getter closures
-    // so that reactive prop changes are visible inside the class.
-    const ctx = new FormContext(
-        {
-            getState: () => state as unknown,
-            getSchema: () => schema as FormSchema | undefined,
-            getCustomValidate: () =>
-                customValidate as
-                    | ((s: unknown) => ReturnType<NonNullable<typeof customValidate>>)
-                    | undefined,
-            getValidateOn: () => validateOn,
-            getValidateOnInputDelay: () => validateOnInputDelay,
-            getDisabled: () => disabled,
-            getLoadingAuto: () => loadingAuto,
-            getTransform: () => transform,
-            getName: () => name as string | undefined,
-            getOnSubmit: () =>
-                onsubmit as
-                    | ((
-                          e: import('./form.types.js').FormSubmitEvent<unknown>
-                      ) => void | Promise<void>)
-                    | undefined,
-            getOnError: () => onerror
-        },
-        formId,
-        parentCtx
-    )
-
-    setContext(FORM_CONTEXT_KEY, ctx)
-
-    // Build the bindable API object. Getters ensure reactive state reads stay live.
-    const apiObject: FormApi<unknown> = {
-        validate: (opts) => ctx.validate(opts) as Promise<unknown | false>,
-        submit: () => ctx.submit(),
-        clear: (name) => ctx.clear(name),
-        getErrors: (name) => ctx.getErrors(name),
-        setErrors: (errs, name) => ctx.setErrors(errs, name),
-        reset: () => ctx.reset(),
-        get errors() {
-            return ctx.errors
-        },
-        get loading() {
-            return ctx.loading
-        },
-        get disabled() {
-            return ctx.disabled
-        },
-        get dirty() {
-            return ctx.dirty
-        },
-        get dirtyFields() {
-            return ctx.dirtyFields as ReadonlySet<string>
-        },
-        get touchedFields() {
-            return ctx.touchedFields as ReadonlySet<string>
-        },
-        get blurredFields() {
-            return ctx.blurredFields as ReadonlySet<string>
-        },
-        get submitCount() {
-            return ctx.submitCount
-        }
-    }
-
-    // Sync the api object to the bindable prop once at setup time. `apiObject`
-    // is a stable reference built from getters, so there's nothing reactive to
-    // track — direct assignment is sufficient.
-    api = apiObject as typeof api
-
-    // Nested form attach/detach lifecycle.
-    onMount(() => {
-        if (parentCtx && nested) {
-            parentCtx.attachChild(formId, {
-                formId,
-                name: name as string | undefined,
-                validate: (opts) => ctx.validate(opts) as Promise<unknown | false>,
-                clear: (n) => ctx.clear(n),
-                reset: () => ctx.reset(),
-                setErrors: (errs, n) => ctx.setErrors(errs, n)
-            })
-        }
-    })
-
-    onDestroy(() => {
-        if (parentCtx && nested) parentCtx.detachChild(formId)
-        ctx.dispose()
-    })
-
-    async function handleSubmit(event: SubmitEvent) {
-        event.preventDefault()
-        // Forward the real SubmitEvent so user handlers can read `submitter`,
-        // `target`, etc. When `api.submit()` is called programmatically, ctx.submit
-        // synthesizes a fresh event instead.
-        await ctx.submit(event)
-    }
-
-    // `formVariants` has no variants (only a single `root` slot), so its
-    // output is stable — compute once at setup rather than via $derived.
-    const variantSlots = formVariants()
-    const classes = $derived({
-        root: variantSlots.root({
-            class: [config.slots.root, className, ui?.root]
-        })
-    })
-
-    // Slot props for children
-    const slotProps = $derived({
-        errors: ctx.errors as FormErrorWithId[],
-        loading: ctx.loading
-    })
+>import { onDestroy, onMount, setContext, untrack } from "svelte";
+import { getComponentConfig } from "../config.js";
+import { FORM_CONTEXT_KEY, FormContext, getFormContext } from "./form.context.svelte.js";
+import { formDefaults, formVariants } from "./form.variants.js";
+const config = getComponentConfig("form", formDefaults);
+let { ref = $bindable(null), api = $bindable(), id, schema, state = $bindable({}), validate: customValidate, validateOn = [
+	"input",
+	"blur",
+	"change"
+], validateOnInputDelay = 300, disabled = false, loadingAuto = true, transform = true, nested = false, name, onsubmit, onerror, class: className, ui, children, ...restProps } = $props();
+// Generate a stable form id. Both `id` and `nested` are effectively init-only
+// (they should not change over a form instance's lifetime), so `untrack`
+// silences Svelte's state_referenced_locally warning.
+const formId = untrack(() => id ?? (typeof crypto !== "undefined" && "randomUUID" in crypto ? crypto.randomUUID() : `svelora-form-${Math.random().toString(36).slice(2)}`));
+// Parent context captured once at init — `nested` is effectively immutable
+// over a form instance's lifetime. We warn (dev-only) if it's mutated later.
+const parentCtx = untrack(() => nested ? getFormContext() : undefined);
+const initialNested = untrack(() => nested);
+$effect(() => {
+	if (nested !== initialNested) {}
+});
+// Create the reactive form context. All config is passed via getter closures
+// so that reactive prop changes are visible inside the class.
+const ctx = new FormContext({
+	getState: () => state,
+	getSchema: () => schema,
+	getCustomValidate: () => customValidate,
+	getValidateOn: () => validateOn,
+	getValidateOnInputDelay: () => validateOnInputDelay,
+	getDisabled: () => disabled,
+	getLoadingAuto: () => loadingAuto,
+	getTransform: () => transform,
+	getName: () => name,
+	getOnSubmit: () => onsubmit,
+	getOnError: () => onerror
+}, formId, parentCtx);
+setContext(FORM_CONTEXT_KEY, ctx);
+// Build the bindable API object. Getters ensure reactive state reads stay live.
+const apiObject = {
+	validate: (opts) => ctx.validate(opts),
+	submit: () => ctx.submit(),
+	clear: (name) => ctx.clear(name),
+	getErrors: (name) => ctx.getErrors(name),
+	setErrors: (errs, name) => ctx.setErrors(errs, name),
+	reset: () => ctx.reset(),
+	get errors() {
+		return ctx.errors;
+	},
+	get loading() {
+		return ctx.loading;
+	},
+	get disabled() {
+		return ctx.disabled;
+	},
+	get dirty() {
+		return ctx.dirty;
+	},
+	get dirtyFields() {
+		return ctx.dirtyFields;
+	},
+	get touchedFields() {
+		return ctx.touchedFields;
+	},
+	get blurredFields() {
+		return ctx.blurredFields;
+	},
+	get submitCount() {
+		return ctx.submitCount;
+	}
+};
+// Sync the api object to the bindable prop once at setup time. `apiObject`
+// is a stable reference built from getters, so there's nothing reactive to
+// track — direct assignment is sufficient.
+api = apiObject;
+// Nested form attach/detach lifecycle.
+onMount(() => {
+	if (parentCtx && nested) {
+		parentCtx.attachChild(formId, {
+			formId,
+			name,
+			validate: (opts) => ctx.validate(opts),
+			clear: (n) => ctx.clear(n),
+			reset: () => ctx.reset(),
+			setErrors: (errs, n) => ctx.setErrors(errs, n)
+		});
+	}
+});
+onDestroy(() => {
+	if (parentCtx && nested) parentCtx.detachChild(formId);
+	ctx.dispose();
+});
+async function handleSubmit(event) {
+	event.preventDefault();
+	// Forward the real SubmitEvent so user handlers can read `submitter`,
+	// `target`, etc. When `api.submit()` is called programmatically, ctx.submit
+	// synthesizes a fresh event instead.
+	await ctx.submit(event);
+}
+// `formVariants` has no variants (only a single `root` slot), so its
+// output is stable — compute once at setup rather than via $derived.
+const variantSlots = formVariants();
+const classes = $derived({ root: variantSlots.root({ class: [
+	config.slots.root,
+	className,
+	ui?.root
+] }) });
+// Slot props for children
+const slotProps = $derived({
+	errors: ctx.errors,
+	loading: ctx.loading
+});
 </script>
 
 {#if nested}

package/dist/FormField/FormField.svelte

@@ -1,140 +1,107 @@
-<script lang="ts" module>
-    import type { FormFieldProps } from './form-field.types.js'
-
-    export type Props = FormFieldProps
+<script lang="ts" module>export {};
 </script>
 
-<script lang="ts">
-    import { Label, useId } from 'bits-ui'
-    import { setContext, untrack } from 'svelte'
-    import { getComponentConfig } from '../config.js'
-    import { getFormContext } from '../Form/form.context.svelte.js'
-    import { FORM_FIELD_CONTEXT_KEY, type FormFieldContext } from '../hooks/useFormField.svelte.js'
-    import { formFieldDefaults, formFieldVariants } from './form-field.variants.js'
-
-    const config = getComponentConfig('formField', formFieldDefaults)
-
-    let {
-        ref = $bindable(null),
-        ui,
-        name,
-        label,
-        description,
-        hint,
-        help,
-        error,
-        size = config.defaultVariants.size ?? 'md',
-        required = false,
-        orientation = config.defaultVariants.orientation ?? 'vertical',
-        eagerValidation,
-        validateOnInputDelay,
-        errorPattern,
-        class: className,
-        children,
-        labelSlot,
-        hintSlot,
-        descriptionSlot,
-        helpSlot,
-        errorSlot,
-        ...restProps
-    }: Props = $props()
-
-    const id = useId()
-    const ariaId = $derived(name ? `form-field-${name}` : id)
-
-    // Form-level context (undefined when FormField is used standalone).
-    const formCtx = getFormContext()
-
-    // Resolve error: explicit `error` prop always wins; otherwise ask the Form for
-    // errors matching this field's name (or errorPattern regex, if provided).
-    const resolvedError = $derived.by<string | boolean | undefined>(() => {
-        if (error !== undefined) return error
-        if (!formCtx || !name) return undefined
-        const errs = errorPattern ? formCtx.getErrors(errorPattern) : formCtx.getErrors(name)
-        return errs[0]?.message
-    })
-
-    // Register this field with the form. Split into two effects:
-    //
-    // 1. Lifecycle effect — tracks only `name`. Handles the initial registration
-    //    and cleanup on unmount / rename. Reads other entry fields via `untrack`
-    //    so they don't retrigger the lifecycle.
-    // 2. Update effect — tracks ariaId / errorPattern / eagerValidation /
-    //    validateOnInputDelay and rewrites the entry via `.set()`. No cleanup —
-    //    a single atomic overwrite, so no window where the registry is empty.
-    //
-    // Without this split, changing an unrelated prop (e.g. errorPattern) would
-    // cause cleanup→re-register, briefly leaving `#fieldRegistry.get(name)`
-    // undefined for any concurrent `#resolveErrorIds` call.
-    $effect(() => {
-        if (!formCtx || !name) return
-        const registeredName = name
-        untrack(() => {
-            formCtx.registerField(registeredName, {
-                id: ariaId,
-                pattern: errorPattern,
-                eagerValidation,
-                validateOnInputDelay
-            })
-        })
-        return () => {
-            formCtx.unregisterField(registeredName)
-        }
-    })
-
-    $effect(() => {
-        if (!formCtx || !name) return
-        formCtx.registerField(name, {
-            id: ariaId,
-            pattern: errorPattern,
-            eagerValidation,
-            validateOnInputDelay
-        })
-    })
-
-    const variantSlots = $derived(formFieldVariants({ size, required, orientation }))
-    const classes = $derived({
-        root: variantSlots.root({ class: [config.slots.root, className, ui?.root] }),
-        wrapper: variantSlots.wrapper({ class: [config.slots.wrapper, ui?.wrapper] }),
-        labelWrapper: variantSlots.labelWrapper({
-            class: [config.slots.labelWrapper, ui?.labelWrapper]
-        }),
-        label: variantSlots.label({ class: [config.slots.label, ui?.label] }),
-        container: variantSlots.container({ class: [config.slots.container, ui?.container] }),
-        description: variantSlots.description({
-            class: [config.slots.description, ui?.description]
-        }),
-        error: variantSlots.error({ class: [config.slots.error, ui?.error] }),
-        hint: variantSlots.hint({ class: [config.slots.hint, ui?.hint] }),
-        help: variantSlots.help({ class: [config.slots.help, ui?.help] })
-    })
-
-    const hasError = $derived(resolvedError !== undefined && resolvedError !== false)
-    const errorMessage = $derived(typeof resolvedError === 'string' ? resolvedError : undefined)
-
-    setContext<FormFieldContext>(FORM_FIELD_CONTEXT_KEY, {
-        get name() {
-            return name
-        },
-        get size() {
-            return size
-        },
-        get error() {
-            return resolvedError
-        },
-        get ariaId() {
-            return ariaId
-        },
-        get eagerValidation() {
-            return eagerValidation
-        },
-        get validateOnInputDelay() {
-            return validateOnInputDelay
-        },
-        get errorPattern() {
-            return errorPattern
-        }
-    })
+<script lang="ts">import { Label, useId } from "bits-ui";
+import { setContext, untrack } from "svelte";
+import { getComponentConfig } from "../config.js";
+import { getFormContext } from "../Form/form.context.svelte.js";
+import { FORM_FIELD_CONTEXT_KEY } from "../hooks/useFormField.svelte.js";
+import { formFieldDefaults, formFieldVariants } from "./form-field.variants.js";
+const config = getComponentConfig("formField", formFieldDefaults);
+let { ref = $bindable(null), ui, name, label, description, hint, help, error, size = config.defaultVariants.size ?? "md", required = false, orientation = config.defaultVariants.orientation ?? "vertical", eagerValidation, validateOnInputDelay, errorPattern, class: className, children, labelSlot, hintSlot, descriptionSlot, helpSlot, errorSlot, ...restProps } = $props();
+const id = useId();
+const ariaId = $derived(name ? `form-field-${name}` : id);
+// Form-level context (undefined when FormField is used standalone).
+const formCtx = getFormContext();
+// Resolve error: explicit `error` prop always wins; otherwise ask the Form for
+// errors matching this field's name (or errorPattern regex, if provided).
+const resolvedError = $derived.by(() => {
+	if (error !== undefined) return error;
+	if (!formCtx || !name) return undefined;
+	const errs = errorPattern ? formCtx.getErrors(errorPattern) : formCtx.getErrors(name);
+	return errs[0]?.message;
+});
+// Register this field with the form. Split into two effects:
+//
+// 1. Lifecycle effect — tracks only `name`. Handles the initial registration
+//    and cleanup on unmount / rename. Reads other entry fields via `untrack`
+//    so they don't retrigger the lifecycle.
+// 2. Update effect — tracks ariaId / errorPattern / eagerValidation /
+//    validateOnInputDelay and rewrites the entry via `.set()`. No cleanup —
+//    a single atomic overwrite, so no window where the registry is empty.
+//
+// Without this split, changing an unrelated prop (e.g. errorPattern) would
+// cause cleanup→re-register, briefly leaving `#fieldRegistry.get(name)`
+// undefined for any concurrent `#resolveErrorIds` call.
+$effect(() => {
+	if (!formCtx || !name) return;
+	const registeredName = name;
+	untrack(() => {
+		formCtx.registerField(registeredName, {
+			id: ariaId,
+			pattern: errorPattern,
+			eagerValidation,
+			validateOnInputDelay
+		});
+	});
+	return () => {
+		formCtx.unregisterField(registeredName);
+	};
+});
+$effect(() => {
+	if (!formCtx || !name) return;
+	formCtx.registerField(name, {
+		id: ariaId,
+		pattern: errorPattern,
+		eagerValidation,
+		validateOnInputDelay
+	});
+});
+const variantSlots = $derived(formFieldVariants({
+	size,
+	required,
+	orientation
+}));
+const classes = $derived({
+	root: variantSlots.root({ class: [
+		config.slots.root,
+		className,
+		ui?.root
+	] }),
+	wrapper: variantSlots.wrapper({ class: [config.slots.wrapper, ui?.wrapper] }),
+	labelWrapper: variantSlots.labelWrapper({ class: [config.slots.labelWrapper, ui?.labelWrapper] }),
+	label: variantSlots.label({ class: [config.slots.label, ui?.label] }),
+	container: variantSlots.container({ class: [config.slots.container, ui?.container] }),
+	description: variantSlots.description({ class: [config.slots.description, ui?.description] }),
+	error: variantSlots.error({ class: [config.slots.error, ui?.error] }),
+	hint: variantSlots.hint({ class: [config.slots.hint, ui?.hint] }),
+	help: variantSlots.help({ class: [config.slots.help, ui?.help] })
+});
+const hasError = $derived(resolvedError !== undefined && resolvedError !== false);
+const errorMessage = $derived(typeof resolvedError === "string" ? resolvedError : undefined);
+setContext(FORM_FIELD_CONTEXT_KEY, {
+	get name() {
+		return name;
+	},
+	get size() {
+		return size;
+	},
+	get error() {
+		return resolvedError;
+	},
+	get ariaId() {
+		return ariaId;
+	},
+	get eagerValidation() {
+		return eagerValidation;
+	},
+	get validateOnInputDelay() {
+		return validateOnInputDelay;
+	},
+	get errorPattern() {
+		return errorPattern;
+	}
+});
 </script>
 
 <div bind:this={ref} class={classes.root} {...restProps}>

package/dist/Icon/Icon.svelte

@@ -1,37 +1,12 @@
-<script lang="ts" module>
-    import type { IconProps } from './icon.types.js'
-
-    export type Props = IconProps
+<script lang="ts" module>export {};
 </script>
 
-<script lang="ts">
-    import Icon from '@iconify/svelte'
-    import { twMerge } from 'tailwind-merge'
-
-    let {
-        name,
-        size = 24,
-        color,
-        flipH = false,
-        flipV = false,
-        rotate = 0,
-        class: className,
-        ...restProps
-    }: Props = $props()
-
-    const flip = $derived(
-        flipH && flipV
-            ? 'horizontal,vertical'
-            : flipH
-              ? 'horizontal'
-              : flipV
-                ? 'vertical'
-                : undefined
-    )
-
-    const rotateValue = $derived(rotate ? rotate / 90 : undefined)
-
-    const iconClass = $derived(twMerge('shrink-0', className))
+<script lang="ts">import Icon from "@iconify/svelte";
+import { twMerge } from "tailwind-merge";
+let { name, size = 24, color, flipH = false, flipV = false, rotate = 0, class: className, ...restProps } = $props();
+const flip = $derived(flipH && flipV ? "horizontal,vertical" : flipH ? "horizontal" : flipV ? "vertical" : undefined);
+const rotateValue = $derived(rotate ? rotate / 90 : undefined);
+const iconClass = $derived(twMerge("shrink-0", className));
 </script>
 
 <Icon