sv5ui 1.5.1 → 1.7.0

package/dist/Carousel/carousel.variants.js

@@ -0,0 +1,88 @@
+import { tv } from 'tailwind-variants';
+export const carouselVariants = tv({
+    slots: {
+        root: 'relative',
+        viewport: 'overflow-hidden',
+        container: 'flex',
+        slide: 'shrink-0 grow-0 basis-[calc(100%/var(--sv-slides))]',
+        arrow: 'absolute z-10 shadow-md',
+        arrowPrev: '',
+        arrowNext: '',
+        dots: 'flex items-center justify-center gap-2',
+        dot: [
+            'rounded-full bg-on-surface/30 transition-all',
+            'hover:bg-on-surface/50',
+            'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2',
+            'data-[selected]:bg-primary'
+        ]
+    },
+    variants: {
+        orientation: {
+            horizontal: {
+                viewport: 'w-full',
+                container: 'flex-row touch-pan-y',
+                slide: 'min-w-0 h-auto',
+                dots: 'flex-row mt-4',
+                arrowPrev: 'left-2 top-1/2 -translate-y-1/2',
+                arrowNext: 'right-2 top-1/2 -translate-y-1/2'
+            },
+            vertical: {
+                root: 'h-full',
+                viewport: 'h-full w-full',
+                container: 'flex-col h-full touch-pan-x',
+                slide: 'min-h-0 w-auto',
+                dots: 'flex-col absolute right-2 top-1/2 -translate-y-1/2',
+                arrowPrev: 'top-2 left-1/2 -translate-x-1/2',
+                arrowNext: 'bottom-2 left-1/2 -translate-x-1/2'
+            }
+        },
+        size: {
+            xs: { dot: 'size-1.5' },
+            sm: { dot: 'size-2' },
+            md: { dot: 'size-2.5' },
+            lg: { dot: 'size-3' },
+            xl: { dot: 'size-3.5' }
+        },
+        color: {
+            primary: { dot: 'data-[selected]:bg-primary focus-visible:outline-primary' },
+            secondary: { dot: 'data-[selected]:bg-secondary focus-visible:outline-secondary' },
+            tertiary: { dot: 'data-[selected]:bg-tertiary focus-visible:outline-tertiary' },
+            success: { dot: 'data-[selected]:bg-success focus-visible:outline-success' },
+            warning: { dot: 'data-[selected]:bg-warning focus-visible:outline-warning' },
+            error: { dot: 'data-[selected]:bg-error focus-visible:outline-error' },
+            info: { dot: 'data-[selected]:bg-info focus-visible:outline-info' },
+            surface: {
+                dot: 'data-[selected]:bg-on-surface focus-visible:outline-on-surface'
+            }
+        },
+        variant: {
+            solid: '',
+            outline: '',
+            soft: '',
+            subtle: '',
+            ghost: ''
+        }
+    },
+    compoundVariants: [
+        { orientation: 'horizontal', size: 'xs', class: { dot: 'data-[selected]:w-4' } },
+        { orientation: 'horizontal', size: 'sm', class: { dot: 'data-[selected]:w-5' } },
+        { orientation: 'horizontal', size: 'md', class: { dot: 'data-[selected]:w-6' } },
+        { orientation: 'horizontal', size: 'lg', class: { dot: 'data-[selected]:w-7' } },
+        { orientation: 'horizontal', size: 'xl', class: { dot: 'data-[selected]:w-8' } },
+        { orientation: 'vertical', size: 'xs', class: { dot: 'data-[selected]:h-4' } },
+        { orientation: 'vertical', size: 'sm', class: { dot: 'data-[selected]:h-5' } },
+        { orientation: 'vertical', size: 'md', class: { dot: 'data-[selected]:h-6' } },
+        { orientation: 'vertical', size: 'lg', class: { dot: 'data-[selected]:h-7' } },
+        { orientation: 'vertical', size: 'xl', class: { dot: 'data-[selected]:h-8' } }
+    ],
+    defaultVariants: {
+        orientation: 'horizontal',
+        size: 'md',
+        color: 'primary',
+        variant: 'soft'
+    }
+});
+export const carouselDefaults = {
+    defaultVariants: carouselVariants.defaultVariants,
+    slots: {}
+};

package/dist/Carousel/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Carousel } from './Carousel.svelte';
+export type { CarouselProps, CarouselApi, CarouselAutoplayOptions, CarouselSlideSlotProps, CarouselDotSlotProps, CarouselArrowSlotProps } from './carousel.types.js';

package/dist/Carousel/index.js

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

package/dist/Checkbox/Checkbox.svelte

@@ -9,7 +9,7 @@
     import { checkboxVariants, checkboxDefaults } from './checkbox.variants.js'
     import { getComponentConfig, iconsDefaults } from '../config.js'
     import Icon from '../Icon/Icon.svelte'
-    import { useFormField } from '../hooks/useFormField.svelte.js'
+    import { useFormField, useFormFieldEmit } from '../hooks/useFormField.svelte.js'
 
     const config = getComponentConfig('checkbox', checkboxDefaults)
     const icons = getComponentConfig('icons', iconsDefaults)
@@ -43,6 +43,7 @@
     }: Props = $props()
 
     const formFieldContext = useFormField()
+    const emit = useFormFieldEmit()
 
     const hasError = $derived(
         formFieldContext?.error !== undefined && formFieldContext?.error !== false
@@ -107,9 +108,14 @@
     <div bind:this={containerRef} class={classes.container}>
         <Checkbox.Root
             bind:checked
-            {onCheckedChange}
+            onCheckedChange={(val) => {
+                emit.onChange()
+                onCheckedChange?.(val)
+            }}
             bind:indeterminate
             {onIndeterminateChange}
+            onblur={() => emit.onBlur()}
+            onfocus={() => emit.onFocus()}
             id={resolvedId}
             name={resolvedName}
             {value}

package/dist/CheckboxGroup/CheckboxGroup.svelte

@@ -9,7 +9,7 @@
     import { checkboxGroupVariants, checkboxGroupDefaults } from './checkbox-group.variants.js'
     import { getComponentConfig, iconsDefaults } from '../config.js'
     import Icon from '../Icon/Icon.svelte'
-    import { useFormField } from '../hooks/useFormField.svelte.js'
+    import { useFormField, useFormFieldEmit } from '../hooks/useFormField.svelte.js'
     import type { CheckboxGroupItem } from './checkbox-group.types.js'
 
     const config = getComponentConfig('checkboxGroup', checkboxGroupDefaults)
@@ -42,6 +42,7 @@
     }: Props = $props()
 
     const formFieldContext = useFormField()
+    const emit = useFormFieldEmit()
 
     const hasError = $derived(
         formFieldContext?.error !== undefined && formFieldContext?.error !== false
@@ -97,6 +98,7 @@
         } else {
             value = value.filter((v) => v !== itemValue)
         }
+        emit.onChange()
         onValueChange?.(value)
     }
 
@@ -169,7 +171,18 @@
 {/snippet}
 
 <div {...restProps} bind:this={ref} class={layoutClasses.root}>
-    <fieldset class={layoutClasses.fieldset} aria-describedby={ariaDescribedBy}>
+    <fieldset
+        class={layoutClasses.fieldset}
+        aria-describedby={ariaDescribedBy}
+        onfocusin={() => emit.onFocus()}
+        onfocusout={(e) => {
+            // Only emit blur when focus leaves the fieldset entirely, not when
+            // moving between checkboxes within the group.
+            if (!e.currentTarget.contains(e.relatedTarget as Node | null)) {
+                emit.onBlur()
+            }
+        }}
+    >
         {#if legend || legendSlot}
             {#if legendSlot}
                 {@render legendSlot({ legend })}

package/dist/FileUpload/FileUpload.svelte

@@ -1,5 +1,5 @@
 <script lang="ts" module>
-    import type { FileUploadProps } from './file-upload.types.js'
+    import type { FileUploadProps, FileUploadRejection } from './file-upload.types.js'
 
     export type Props = FileUploadProps
 </script>
@@ -12,6 +12,7 @@
     import Icon from '../Icon/Icon.svelte'
     import Button from '../Button/Button.svelte'
     import Modal from '../Modal/Modal.svelte'
+    import { useFormField, useFormFieldEmit } from '../hooks/useFormField.svelte.js'
 
     const config = getComponentConfig('fileUpload', fileUploadDefaults)
     const icons = getComponentConfig('icons', iconsDefaults)
@@ -22,6 +23,9 @@
         onValueChange,
         multiple = false,
         accept,
+        maxSize,
+        maxFiles,
+        onReject,
         dropzone = true,
         interactive = true,
         label = 'Drop files here or click to upload',
@@ -39,6 +43,7 @@
         required = false,
         fileIcon = icons.file,
         imagePreview = true,
+        id,
         name,
         leadingSlot,
         labelSlot,
@@ -59,6 +64,9 @@
     let previewOpen = $state(false)
     let previewFile = $state<File | null>(null)
 
+    const formFieldContext = useFormField()
+    const emit = useFormFieldEmit()
+
     // Stable file identity key with separator to avoid collisions
     const fileKey = (f: File) => `${f.name}:${f.size}:${f.lastModified}`
 
@@ -67,8 +75,23 @@
     // eslint-disable-next-line svelte/prefer-svelte-reactivity
     const urlCache = new Map<string, string>()
 
+    const hasError = $derived(
+        formFieldContext?.error !== undefined && formFieldContext?.error !== false
+    )
+    const resolvedHighlight = $derived(highlight || hasError)
+    const resolvedId = $derived(id ?? formFieldContext?.ariaId)
+    const resolvedName = $derived(name ?? formFieldContext?.name)
+    const ariaDescribedBy = $derived(
+        !formFieldContext
+            ? undefined
+            : hasError
+              ? `${formFieldContext.ariaId}-error`
+              : `${formFieldContext.ariaId}-description ${formFieldContext.ariaId}-help`
+    )
+
     const isDisabled = $derived(disabled || loading)
     const isDragging = $derived(dragCounter > 0)
+    const isFull = $derived(maxFiles !== undefined && value.length >= maxFiles)
     const showFilesInside = $derived(
         layout === 'grid' && !multiple && value.length > 0 && preview && variant === 'area'
     )
@@ -76,13 +99,13 @@
     // Pass booleans directly so compound variants with `false` values match correctly
     const slots = $derived(
         fileUploadVariants({
-            color,
+            color: hasError ? 'error' : color,
             size,
             variant,
             layout,
             dropzone,
             interactive: interactive && !isDisabled,
-            highlight,
+            highlight: resolvedHighlight,
             multiple,
             disabled: isDisabled
         })
@@ -150,17 +173,53 @@
             })
     }
 
+    function validateIngress(file: File): FileUploadRejection['reason'] | null {
+        if (accept && !isFileAccepted(file)) return 'accept'
+        if (maxSize !== undefined && file.size > maxSize) return 'maxSize'
+        return null
+    }
+
+    function applyMaxFiles(candidates: File[]): {
+        accepted: File[]
+        rejected: FileUploadRejection[]
+    } {
+        if (maxFiles === undefined) return { accepted: candidates, rejected: [] }
+        const remaining = Math.max(0, maxFiles - value.length)
+        if (candidates.length <= remaining) return { accepted: candidates, rejected: [] }
+        return {
+            accepted: candidates.slice(0, remaining),
+            rejected: candidates.slice(remaining).map((file) => ({ file, reason: 'maxFiles' }))
+        }
+    }
+
     function addFiles(newFiles: File[]) {
         if (isDisabled) return
-        const filtered = accept ? newFiles.filter(isFileAccepted) : newFiles
-        if (!filtered.length) return
+
+        const rejected: FileUploadRejection[] = []
+        const passed: File[] = []
+        for (const file of newFiles) {
+            const reason = validateIngress(file)
+            if (reason) rejected.push({ file, reason })
+            else passed.push(file)
+        }
+
+        let accepted: File[]
         if (!multiple) {
-            value = [filtered[0]]
+            accepted = passed.slice(0, 1)
         } else {
             const existing = new Set(value.map(fileKey))
-            value = [...value, ...filtered.filter((f) => !existing.has(fileKey(f)))]
+            const deduped = passed.filter((f) => !existing.has(fileKey(f)))
+            const result = applyMaxFiles(deduped)
+            accepted = result.accepted
+            rejected.push(...result.rejected)
         }
-        onValueChange?.(value)
+
+        if (accepted.length) {
+            value = multiple ? [...value, ...accepted] : accepted
+            onValueChange?.(value)
+            emit.onChange()
+        }
+        if (rejected.length) onReject?.(rejected)
     }
 
     function removeFile(index: number) {
@@ -176,6 +235,7 @@
         }
         value = value.filter((_, i) => i !== index)
         onValueChange?.(value)
+        emit.onChange()
     }
 
     export function clearAll() {
@@ -185,6 +245,7 @@
         urlCache.clear()
         value = []
         onValueChange?.(value)
+        emit.onChange()
     }
 
     function handleInputChange(e: Event) {
@@ -254,13 +315,13 @@
     }
 </script>
 
-<div {...restProps} bind:this={ref} class={classes.root}>
+<div {...restProps} bind:this={ref} class={classes.root} data-full={isFull ? '' : undefined}>
     <!-- Hidden file input — uses auto-generated id internally -->
     <input
         bind:this={inputRef}
         type="file"
         id={autoId}
-        {name}
+        name={resolvedName}
         {accept}
         {multiple}
         {required}
@@ -275,18 +336,23 @@
         <!-- Area / Dropzone -->
         <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
         <div
+            id={resolvedId}
             class={classes.base}
             data-dragging={isDragging ? '' : undefined}
             role={interactive ? 'button' : undefined}
             tabindex={interactive && !isDisabled ? 0 : undefined}
             aria-disabled={isDisabled || undefined}
             aria-label={interactive ? label : undefined}
+            aria-invalid={resolvedHighlight ? true : undefined}
+            aria-describedby={ariaDescribedBy}
             onclick={handleAreaClick}
             ondragenter={handleDragEnter}
             ondragover={handleDragOver}
             ondragleave={handleDragLeave}
             ondrop={handleDrop}
             onkeydown={handleKeydown}
+            onfocus={() => emit.onFocus()}
+            onblur={() => emit.onBlur()}
         >
             {#if showFilesInside}
                 <!-- Grid single: file fills the area as overlay -->
@@ -390,6 +456,7 @@
     {:else}
         <!-- Button variant -->
         <Button
+            id={resolvedId}
             {color}
             {size}
             disabled={isDisabled}
@@ -397,7 +464,11 @@
             {loadingIcon}
             leadingIcon={loading ? undefined : icon}
             {label}
+            aria-invalid={resolvedHighlight ? true : undefined}
+            aria-describedby={ariaDescribedBy}
             onclick={handleAreaClick}
+            onfocus={() => emit.onFocus()}
+            onblur={() => emit.onBlur()}
         />
     {/if}
 

package/dist/FileUpload/file-upload.types.d.ts

@@ -2,6 +2,21 @@ import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 import type { ClassNameValue } from 'tailwind-merge';
 import type { FileUploadVariantProps, FileUploadSlots } from './file-upload.variants.js';
+/**
+ * Reason a file was rejected by FileUpload.
+ *
+ * - `accept`: file did not match the `accept` MIME/extension filter
+ * - `maxSize`: file exceeded the `maxSize` byte limit
+ * - `maxFiles`: file would have pushed the selection past `maxFiles`
+ */
+export type FileUploadRejectionReason = 'accept' | 'maxSize' | 'maxFiles';
+/**
+ * A single rejected file along with the reason it was rejected.
+ */
+export interface FileUploadRejection {
+    file: File;
+    reason: FileUploadRejectionReason;
+}
 export type FileUploadProps = Omit<HTMLAttributes<HTMLElement>, 'class' | 'children'> & {
     /**
      * Bindable reference to the root DOM element.
@@ -25,6 +40,30 @@ export type FileUploadProps = Omit<HTMLAttributes<HTMLElement>, 'class' | 'child
      * Accepted file types as MIME types or extensions (e.g. "image/*,.pdf").
      */
     accept?: string;
+    /**
+     * Maximum allowed size per file, in bytes. Files exceeding this are
+     * rejected and reported through `onReject`.
+     *
+     * @example
+     * ```svelte
+     * <FileUpload maxSize={5 * 1024 * 1024} /> <!-- 5 MB -->
+     * ```
+     */
+    maxSize?: number;
+    /**
+     * Maximum number of files that can be selected. When the current
+     * selection plus the incoming files would exceed this, the excess
+     * files are rejected and reported through `onReject`. The root element
+     * exposes a `data-full` attribute when the limit is reached, so the
+     * upload area can be styled accordingly.
+     */
+    maxFiles?: number;
+    /**
+     * Called when one or more incoming files are rejected by `accept`,
+     * `maxSize`, or `maxFiles`. Receives the full rejection list for a
+     * single user action (one drop or one input change).
+     */
+    onReject?: (rejected: FileUploadRejection[]) => void;
     /**
      * Enable drag-and-drop file upload.
      * @default true

package/dist/FileUpload/index.d.ts

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

package/dist/Form/Form.svelte

@@ -0,0 +1,203 @@
+<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 { setContext, onMount, onDestroy, untrack } from 'svelte'
+    import type { HTMLAttributes } from 'svelte/elements'
+    import { formVariants, formDefaults } from './form.variants.js'
+    import { FormContext, FORM_CONTEXT_KEY, getFormContext } from './form.context.svelte.js'
+    import { getComponentConfig } from '../config.js'
+    import type { FormApi, FormErrorWithId } from './form.types.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()
+                : `sv5ui-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) {
+            // eslint-disable-next-line no-console
+            console.warn(
+                '[sv5ui Form] The `nested` prop was changed after mount. This is ' +
+                    'not supported — nested/standalone status is fixed at mount time. ' +
+                    'Unmount and remount the Form to toggle.'
+            )
+        }
+    })
+
+    // 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;