svelora 2.1.0

package/dist/FileUpload/file-upload.variants.js

@@ -0,0 +1,224 @@
+import { tv } from 'tailwind-variants';
+export const fileUploadVariants = tv({
+    slots: {
+        root: 'relative flex flex-col',
+        base: [
+            'w-full bg-surface-container border border-outline-variant select-none',
+            'flex flex-col items-stretch justify-center rounded-lg',
+            'focus-visible:outline-2 focus-visible:outline-offset-2',
+            'transition-colors duration-200'
+        ],
+        wrapper: 'flex flex-col items-center justify-center text-center',
+        icon: 'shrink-0 text-on-surface-variant',
+        label: 'font-medium text-on-surface mt-2',
+        description: 'text-on-surface-variant mt-1',
+        actions: 'flex flex-wrap gap-1.5 shrink-0 mt-4',
+        files: '',
+        file: 'relative',
+        fileLeading: 'shrink-0',
+        fileWrapper: 'flex flex-col min-w-0',
+        fileName: 'text-on-surface truncate',
+        fileSize: 'text-on-surface-variant truncate',
+        fileTrailing: '',
+        previewContent: '',
+        previewBody: ''
+    },
+    variants: {
+        color: {
+            primary: { base: 'focus-visible:outline-primary' },
+            secondary: { base: 'focus-visible:outline-secondary' },
+            tertiary: { base: 'focus-visible:outline-tertiary' },
+            success: { base: 'focus-visible:outline-success' },
+            warning: { base: 'focus-visible:outline-warning' },
+            error: { base: 'focus-visible:outline-error' },
+            info: { base: 'focus-visible:outline-info' },
+            surface: { base: 'focus-visible:outline-outline' }
+        },
+        variant: {
+            area: {
+                base: 'p-4 min-h-[120px]',
+                wrapper: 'py-6'
+            },
+            button: {}
+        },
+        size: {
+            xs: {
+                base: 'text-xs',
+                icon: 'size-5',
+                label: 'text-xs',
+                description: 'text-xs',
+                file: 'text-xs px-2 py-1 gap-1',
+                fileWrapper: 'flex-row gap-1'
+            },
+            sm: {
+                base: 'text-xs',
+                icon: 'size-6',
+                label: 'text-sm',
+                description: 'text-xs',
+                file: 'text-xs px-2.5 py-1.5 gap-1.5',
+                fileWrapper: 'flex-row gap-1'
+            },
+            md: {
+                base: 'text-sm',
+                icon: 'size-8',
+                label: 'text-sm',
+                description: 'text-sm',
+                file: 'text-xs px-2.5 py-1.5 gap-1.5'
+            },
+            lg: {
+                base: 'text-sm',
+                icon: 'size-10',
+                label: 'text-base',
+                description: 'text-sm',
+                file: 'text-sm px-3 py-2 gap-2',
+                fileSize: 'text-xs'
+            },
+            xl: {
+                base: 'text-base',
+                icon: 'size-12',
+                label: 'text-base',
+                description: 'text-base',
+                file: 'text-sm px-3 py-2 gap-2'
+            }
+        },
+        layout: {
+            list: {
+                root: 'gap-2 items-start',
+                files: 'flex flex-col w-full gap-1.5',
+                file: 'min-w-0 flex items-center bg-surface-container border border-outline-variant rounded-md w-full',
+                fileTrailing: 'ms-auto'
+            },
+            grid: {
+                root: 'gap-2',
+                files: 'grid grid-cols-2 gap-3 w-full',
+                file: 'relative aspect-square rounded-lg border border-outline-variant',
+                fileWrapper: 'hidden',
+                fileLeading: 'size-full',
+                fileTrailing: ''
+            }
+        },
+        dropzone: {
+            true: {
+                base: 'border-dashed data-[dragging=true]:bg-surface-container-high data-[dragging=true]:border-solid'
+            }
+        },
+        interactive: {
+            true: {
+                base: 'cursor-pointer hover:bg-surface-container-high'
+            }
+        },
+        highlight: {
+            true: {}
+        },
+        multiple: {
+            true: {}
+        },
+        disabled: {
+            true: {
+                base: 'cursor-not-allowed opacity-75 hover:bg-surface-container'
+            }
+        }
+    },
+    compoundVariants: [
+        // Highlight: colored border
+        { color: 'primary', highlight: true, class: { base: 'border-primary' } },
+        { color: 'secondary', highlight: true, class: { base: 'border-secondary' } },
+        { color: 'tertiary', highlight: true, class: { base: 'border-tertiary' } },
+        { color: 'success', highlight: true, class: { base: 'border-success' } },
+        { color: 'warning', highlight: true, class: { base: 'border-warning' } },
+        { color: 'error', highlight: true, class: { base: 'border-error' } },
+        { color: 'info', highlight: true, class: { base: 'border-info' } },
+        { color: 'surface', highlight: true, class: { base: 'border-outline' } },
+        // Dragging: colored border per color
+        {
+            color: 'primary',
+            dropzone: true,
+            class: { base: 'data-[dragging=true]:border-primary' }
+        },
+        {
+            color: 'secondary',
+            dropzone: true,
+            class: { base: 'data-[dragging=true]:border-secondary' }
+        },
+        {
+            color: 'tertiary',
+            dropzone: true,
+            class: { base: 'data-[dragging=true]:border-tertiary' }
+        },
+        {
+            color: 'success',
+            dropzone: true,
+            class: { base: 'data-[dragging=true]:border-success' }
+        },
+        {
+            color: 'warning',
+            dropzone: true,
+            class: { base: 'data-[dragging=true]:border-warning' }
+        },
+        { color: 'error', dropzone: true, class: { base: 'data-[dragging=true]:border-error' } },
+        { color: 'info', dropzone: true, class: { base: 'data-[dragging=true]:border-info' } },
+        // Button variant size padding
+        { variant: 'button', size: 'xs', class: { base: 'p-1' } },
+        { variant: 'button', size: 'sm', class: { base: 'p-1.5' } },
+        { variant: 'button', size: 'md', class: { base: 'p-1.5' } },
+        { variant: 'button', size: 'lg', class: { base: 'p-2' } },
+        { variant: 'button', size: 'xl', class: { base: 'p-2' } },
+        // Grid + multiple: 3 cols on larger screens, remove button outside top-right corner
+        {
+            layout: 'grid',
+            multiple: true,
+            class: { files: 'sm:grid-cols-3', fileTrailing: 'absolute -top-1.5 -end-1.5' }
+        },
+        // Grid + single: file overlays the base, remove button top-right inside
+        // variant:'area' guard is required — without it, variant='button' would also get
+        // absolute inset-0 on the external file item, making it invisible.
+        {
+            layout: 'grid',
+            multiple: false,
+            variant: 'area',
+            class: {
+                base: 'relative overflow-hidden',
+                file: 'absolute inset-0 p-0 border-0 rounded-none aspect-auto',
+                fileTrailing: 'absolute top-2 end-2'
+            }
+        },
+        // List size trailing adjustments
+        { size: 'xs', layout: 'list', class: { fileTrailing: '-me-1' } },
+        { size: 'sm', layout: 'list', class: { fileTrailing: '-me-1.5' } },
+        { size: 'md', layout: 'list', class: { fileTrailing: '-me-1.5' } },
+        { size: 'lg', layout: 'list', class: { fileTrailing: '-me-2' } },
+        { size: 'xl', layout: 'list', class: { fileTrailing: '-me-2' } }
+    ],
+    defaultVariants: {
+        color: 'primary',
+        variant: 'area',
+        size: 'md',
+        layout: 'list'
+    }
+});
+export const fileUploadDefaults = {
+    defaultVariants: {
+        color: 'primary',
+        variant: 'area',
+        size: 'md',
+        layout: 'list'
+    },
+    slots: {
+        root: '',
+        base: '',
+        wrapper: '',
+        icon: '',
+        label: '',
+        description: '',
+        actions: '',
+        files: '',
+        file: '',
+        fileLeading: '',
+        fileWrapper: '',
+        fileName: '',
+        fileSize: '',
+        fileTrailing: '',
+        previewContent: '',
+        previewBody: ''
+    }
+};

package/dist/FileUpload/index.d.ts

@@ -0,0 +1,2 @@
+export { default as FileUpload } from './FileUpload.svelte';
+export type { FileUploadProps, FileUploadRejection, FileUploadRejectionReason } from './file-upload.types.js';

package/dist/FileUpload/index.js

@@ -0,0 +1 @@
+export { default as FileUpload } from './FileUpload.svelte';

package/dist/Form/Form.svelte

@@ -0,0 +1,197 @@
+<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>
+
+<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
+    })
+</script>
+
+{#if nested}
+    <div
+        {...restProps as unknown as HTMLAttributes<HTMLDivElement>}
+        bind:this={ref}
+        id={typeof id === 'number' ? String(id) : id}
+        class={classes.root}
+    >
+        {@render children?.(slotProps)}
+    </div>
+{:else}
+    <form
+        {...restProps}
+        bind:this={ref}
+        id={typeof id === 'number' ? String(id) : id}
+        class={classes.root}
+        onsubmit={handleSubmit}
+    >
+        {@render children?.(slotProps)}
+    </form>
+{/if}

package/dist/Form/Form.svelte.d.ts

@@ -0,0 +1,26 @@
+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>;
+declare function $$render<S extends FormSchema | undefined = FormSchema | undefined, T extends boolean = true, N extends boolean = false>(): {
+    props: Props<S, T, N>;
+    exports: {};
+    bindings: "ref" | "api" | "state";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<S extends FormSchema | undefined = FormSchema | undefined, T extends boolean = true, N extends boolean = false> {
+    props(): ReturnType<typeof $$render<S, T, N>>['props'];
+    events(): ReturnType<typeof $$render<S, T, N>>['events'];
+    slots(): ReturnType<typeof $$render<S, T, N>>['slots'];
+    bindings(): "ref" | "api" | "state";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <S extends FormSchema | undefined = FormSchema | undefined, T extends boolean = true, N extends boolean = false>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<S, T, N>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<S, T, N>['props']>, ReturnType<__sveltets_Render<S, T, N>['events']>, ReturnType<__sveltets_Render<S, T, N>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<S, T, N>['bindings']>;
+    } & ReturnType<__sveltets_Render<S, T, N>['exports']>;
+    <S extends FormSchema | undefined = FormSchema | undefined, T extends boolean = true, N extends boolean = false>(internal: unknown, props: ReturnType<__sveltets_Render<S, T, N>['props']> & {}): ReturnType<__sveltets_Render<S, T, N>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any, any, any>['bindings']>;
+}
+declare const Form: $$IsomorphicComponent;
+type Form<S extends FormSchema | undefined = FormSchema | undefined, T extends boolean = true, N extends boolean = false> = InstanceType<typeof Form<S, T, N>>;
+export default Form;

package/dist/Form/form.context.svelte.d.ts

@@ -0,0 +1,64 @@
+import { SvelteSet } from 'svelte/reactivity';
+import { type FormError, type FormErrorEvent, type FormErrorWithId, type FormFieldRegistryEntry, type FormInputEvents, type FormSchema, type FormSubmitEvent, type FormValidateOpts, type NestedFormEntry } from './form.types.js';
+export declare const FORM_CONTEXT_KEY: unique symbol;
+export declare function getFormContext<T = unknown>(): FormContext<T> | undefined;
+export interface FormContextOptions<T> {
+    getState: () => T;
+    getSchema: () => FormSchema | undefined;
+    getCustomValidate: () => ((state: T) => FormError[] | Promise<FormError[]>) | undefined;
+    getValidateOn: () => FormInputEvents[];
+    getValidateOnInputDelay: () => number;
+    getDisabled: () => boolean;
+    getLoadingAuto: () => boolean;
+    getTransform: () => boolean;
+    getName: () => string | undefined;
+    getOnSubmit: () => ((event: FormSubmitEvent<unknown>) => void | Promise<void>) | undefined;
+    getOnError: () => ((event: FormErrorEvent) => void) | undefined;
+}
+export declare class FormContext<T = unknown> {
+    #private;
+    errors: FormErrorWithId[];
+    loading: boolean;
+    submitCount: number;
+    dirtyFields: SvelteSet<string>;
+    touchedFields: SvelteSet<string>;
+    blurredFields: SvelteSet<string>;
+    formId: string | number;
+    constructor(opts: FormContextOptions<T>, formId: string | number, parentCtx?: FormContext | undefined);
+    get dirty(): boolean;
+    get disabled(): boolean;
+    /**
+     * Current state. For nested forms, read the sub-tree from parent state by name.
+     * Falls back to `{}` if the parent hasn't initialized the sub-object yet —
+     * avoids crashing downstream validators when consumers forget to prefill it.
+     */
+    get state(): T;
+    getErrors(name?: (string | RegExp) | undefined): FormErrorWithId[];
+    setErrors(errs: FormError[], name?: (string | RegExp) | undefined): void;
+    clear(name?: (string | RegExp) | undefined): void;
+    /**
+     * Reset all form tracking state: errors, dirty/touched/blurred field sets,
+     * and submitCount. Does NOT modify `state` (caller owns that). Cascades to
+     * nested forms.
+     */
+    reset(): void;
+    registerField(name: string, entry: FormFieldRegistryEntry): void;
+    unregisterField(name: string): void;
+    attachChild(childFormId: string | number, entry: NestedFormEntry): void;
+    detachChild(childFormId: string | number): void;
+    onFocus(name: string): void;
+    onBlur(name: string): void;
+    onChange(name: string): void;
+    onInput(name: string, eager?: boolean): void;
+    validate(opts?: FormValidateOpts): Promise<T | false>;
+    /**
+     * Run full validation and fire onsubmit / onerror.
+     *
+     * @param sourceEvent - Real SubmitEvent from the `<form>` submit handler,
+     *   forwarded to the user's onsubmit / onerror so they can read `submitter`,
+     *   `preventDefault`, etc. When called programmatically (via the public API),
+     *   a fresh SubmitEvent is synthesized.
+     */
+    submit(sourceEvent?: SubmitEvent | undefined): Promise<void>;
+    dispose(): void;
+}