entasis 0.11.0 → 0.12.0

package/dist/components/Form/Field/field.theme.d.ts

@@ -1,5 +1,8 @@
 import { type InferComponentTheme } from '../../../utils/cva/index.js';
+import { type DeepPartial, type MotionSpec, type ResolvedMotion } from '../../../utils/motion/index.js';
+export declare const defaultFieldMotion: import("../../../utils/motion/index.js").MotionResolver<import("../../../utils/motion/index.js").MotionVariantShape>;
 export declare const fieldTheme: {
+    motion: import("../../../utils/motion/index.js").MotionResolver<import("../../../utils/motion/index.js").MotionVariantShape>;
     root: (props?: (import("../../../utils/cva/types.js").CVAVariantSchema<{
         density: {
             compact: string;
@@ -47,6 +50,10 @@ export declare const fieldTheme: {
             true: string;
             false: string;
         };
+        disabled: {
+            true: string;
+            false: string;
+        };
     }> & import("../../../utils/cva/types.js").CVAClassProp) | undefined) => string;
     actions: (props?: (import("../../../utils/cva/types.js").CVAVariantSchema<{
         density: {
@@ -135,6 +142,10 @@ export declare const fieldTheme: {
             normal: string;
             large: string;
         };
+        disabled: {
+            true: string;
+            false: string;
+        };
     }> & import("../../../utils/cva/types.js").CVAClassProp) | undefined) => string;
     helper: (props?: (import("../../../utils/cva/types.js").CVAVariantSchema<{
         size: {
@@ -142,11 +153,16 @@ export declare const fieldTheme: {
             normal: string;
             large: string;
         };
+        disabled: {
+            true: string;
+            false: string;
+        };
     }> & import("../../../utils/cva/types.js").CVAClassProp) | undefined) => string;
 };
 export type FieldTheme = typeof fieldTheme;
 export type FieldThemeProps = InferComponentTheme<FieldTheme>;
 export declare const setFieldTheme: (theme: InferComponentTheme<{
+    motion: import("../../../utils/motion/index.js").MotionResolver<import("../../../utils/motion/index.js").MotionVariantShape>;
     root: (props?: (import("../../../utils/cva/types.js").CVAVariantSchema<{
         density: {
             compact: string;
@@ -194,6 +210,10 @@ export declare const setFieldTheme: (theme: InferComponentTheme<{
             true: string;
             false: string;
         };
+        disabled: {
+            true: string;
+            false: string;
+        };
     }> & import("../../../utils/cva/types.js").CVAClassProp) | undefined) => string;
     actions: (props?: (import("../../../utils/cva/types.js").CVAVariantSchema<{
         density: {
@@ -282,6 +302,10 @@ export declare const setFieldTheme: (theme: InferComponentTheme<{
             normal: string;
             large: string;
         };
+        disabled: {
+            true: string;
+            false: string;
+        };
     }> & import("../../../utils/cva/types.js").CVAClassProp) | undefined) => string;
     helper: (props?: (import("../../../utils/cva/types.js").CVAVariantSchema<{
         size: {
@@ -289,9 +313,14 @@ export declare const setFieldTheme: (theme: InferComponentTheme<{
             normal: string;
             large: string;
         };
+        disabled: {
+            true: string;
+            false: string;
+        };
     }> & import("../../../utils/cva/types.js").CVAClassProp) | undefined) => string;
 }>) => void;
 export declare const useFieldTheme: import("../../../utils/cva/theme.js").UseComponentTheme<{
+    motion: import("../../../utils/motion/index.js").MotionResolver<import("../../../utils/motion/index.js").MotionVariantShape>;
     root: (props?: (import("../../../utils/cva/types.js").CVAVariantSchema<{
         density: {
             compact: string;
@@ -339,6 +368,10 @@ export declare const useFieldTheme: import("../../../utils/cva/theme.js").UseCom
             true: string;
             false: string;
         };
+        disabled: {
+            true: string;
+            false: string;
+        };
     }> & import("../../../utils/cva/types.js").CVAClassProp) | undefined) => string;
     actions: (props?: (import("../../../utils/cva/types.js").CVAVariantSchema<{
         density: {
@@ -427,6 +460,10 @@ export declare const useFieldTheme: import("../../../utils/cva/theme.js").UseCom
             normal: string;
             large: string;
         };
+        disabled: {
+            true: string;
+            false: string;
+        };
     }> & import("../../../utils/cva/types.js").CVAClassProp) | undefined) => string;
     helper: (props?: (import("../../../utils/cva/types.js").CVAVariantSchema<{
         size: {
@@ -434,5 +471,14 @@ export declare const useFieldTheme: import("../../../utils/cva/theme.js").UseCom
             normal: string;
             large: string;
         };
+        disabled: {
+            true: string;
+            false: string;
+        };
     }> & import("../../../utils/cva/types.js").CVAClassProp) | undefined) => string;
 }>;
+/**
+ * The Field motion resolver. Unlike other components a Field also renders without a `<Theme>`
+ * (a standalone control), so it falls back to the library motion scale instead of throwing.
+ */
+export declare const useFieldMotion: () => ((override?: DeepPartial<MotionSpec>) => ResolvedMotion);

package/dist/components/Form/Field/field.theme.js

@@ -1,4 +1,6 @@
 import { cva, setComponentTheme, useComponentTheme } from '../../../utils/cva/index.js';
+import { getContext } from 'svelte';
+import { motion } from '../../../utils/motion/index.js';
 // A Field lays itself out against its OWN width, not the viewport: the `left` (horizontal)
 // label layout turns the root into an inline-size container and every breakpoint below is a
 // container query, so a narrow Field on a wide screen still stacks its label above the control.
@@ -65,6 +67,11 @@ const defaultFieldLabel = cva({
         required: {
             true: 'relative before:content-["*"] before:text-danger-readable before:text-sm before:font-bold before:absolute before:-right-2 before:top-0',
             false: ''
+        },
+        // A disabled field, directly or through its group, dims its text with its control.
+        disabled: {
+            true: 'opacity-50',
+            false: ''
         }
     }
 });
@@ -185,6 +192,10 @@ const defaultFieldDescription = cva({
             small: 'text-xs',
             normal: 'text-sm',
             large: 'text-base'
+        },
+        disabled: {
+            true: 'opacity-50',
+            false: ''
         }
     }
 });
@@ -195,10 +206,23 @@ const defaultFieldHelper = cva({
             small: 'text-xs',
             normal: 'text-sm',
             large: 'text-base'
+        },
+        disabled: {
+            true: 'opacity-50',
+            false: ''
         }
     }
 });
+// Errors fade and grow in on the y axis; the Theme's motion tokens decide the duration and easing.
+export const defaultFieldMotion = motion({
+    base: {
+        in: { axis: 'y', x: 0, y: 0, scale: 1, opacity: 0 },
+        out: { axis: 'y', x: 0, y: 0, scale: 1, opacity: 0 },
+        easing: 'enter'
+    }
+});
 export const fieldTheme = {
+    motion: defaultFieldMotion,
     root: defaultField,
     header: defaultFieldHeader,
     label: defaultFieldLabel,
@@ -215,3 +239,12 @@ export const fieldTheme = {
 };
 export const setFieldTheme = setComponentTheme('field');
 export const useFieldTheme = useComponentTheme('field', fieldTheme);
+/**
+ * The Field motion resolver. Unlike other components a Field also renders without a `<Theme>`
+ * (a standalone control), so it falls back to the library motion scale instead of throwing.
+ */
+export const useFieldMotion = () => {
+    const theme = getContext('entasisTheme');
+    const scoped = getContext('fieldTheme');
+    return (override) => defaultFieldMotion({}, { theme, overrides: [theme?.componentThemes?.field?.motion, scoped?.motion, override] });
+};

package/dist/components/Form/Field/fieldHiddenInputs.props.d.ts

@@ -0,0 +1,61 @@
+import type { HTMLInputAttributes } from 'svelte/elements';
+import type { FieldType } from './field.js';
+import type { FieldState } from './field.state.svelte.js';
+/** One submitted value; numbers are submitted as their string form. */
+export type FieldHiddenInputValue = string | number;
+/** An option an autofilled text can name, by its value or by its label. */
+export type FieldHiddenInputOption = {
+    /** Value committed when the autofilled text names this option. */
+    value: string;
+    /** Text the browser may fill in place of the value, such as a country name. */
+    label?: string;
+};
+export type FieldHiddenInputsProps<T extends FieldType = FieldType> = {
+    /**
+     * The field the inputs submit for. Its name, required and disabled state are the defaults
+     * below, and its control takes focus when the browser reports an input invalid.
+     */
+    field: FieldState<T>;
+    /**
+     * Submitted value. A string or number renders one input, an array one input per entry under
+     * the same name (read them with `FormData.getAll`), and `null` or `undefined` submits nothing.
+     * With `checked`, the value a checked input submits (default `'on'`).
+     *
+     * @readonly-value The submitted value mirrors the field; the inputs never edit it.
+     */
+    value?: FieldHiddenInputValue | readonly FieldHiddenInputValue[] | null;
+    /** Renders one checkbox input that submits `value` only while checked, like a native checkbox. */
+    checked?: boolean;
+    /**
+     * Submitted name. Defaults to the field's name when the app gave one, directly or through
+     * Form; a field without a name submits nothing.
+     */
+    name?: string;
+    /**
+     * Blocks a native submit while nothing is submitted (unchecked, or no non-empty value) and
+     * hands the browser's report to the field's control. Defaults to the field's required state.
+     */
+    required?: boolean;
+    /** Leaves the inputs out of submission and validation. Defaults to the field's disabled state. */
+    disabled?: boolean;
+    /** Id of the form the inputs belong to when the control sits outside it. Defaults to Field's `form`. */
+    form?: string;
+    /** Id of the input the browser reports invalid. Defaults to `${field.id}-input`. */
+    id?: string;
+    /**
+     * Autofill token, such as `country` or `address-level1`. Renders the single value as a
+     * visually hidden text input the browser can autofill; an autofilled text goes through
+     * `options` and `onAutofill`.
+     */
+    autocomplete?: HTMLInputAttributes['autocomplete'];
+    /**
+     * Options an autofilled text is matched against: by value, then by label, then by label
+     * ignoring case and accents. Text that names no option is ignored. Without options, the text
+     * itself is the value.
+     */
+    options?: readonly FieldHiddenInputOption[];
+    /** Receives the value an autofill names. Defaults to committing it with `field.setValue`. */
+    onAutofill?: (value: string) => void;
+    /** Ignores autofill while true. Defaults to the field's read-only state. */
+    readOnly?: boolean;
+};

package/dist/components/Form/Field/fieldHiddenInputs.props.js

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

package/dist/components/Form/Field/fieldNativeForm.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { Attachment } from 'svelte/attachments';
+import type { FieldType } from './field.js';
+import type { FieldState } from './field.state.svelte.js';
+/** @internal Field registers the `form` prop it received for its controller. */
+export declare const setFieldFormAttribute: (field: object, read: () => string | undefined) => void;
+/** The id of the native form a field submits with, from its Field's `form` prop. */
+export declare const getFieldFormAttribute: (field: object) => string | undefined;
+/**
+ * Field root attachment. A control rendered outside its form joins it through Field's `form`
+ * prop, and a native reset of that form returns the field to the value it mounted with and
+ * clears its errors, as the browser does for its own controls. The reset is cancelable by any
+ * listener, so the field follows one task later, once the reset has run.
+ */
+export declare const fieldNativeForm: <T extends FieldType>(field: FieldState<T>) => Attachment<HTMLElement>;

package/dist/components/Form/Field/fieldNativeForm.svelte.js

@@ -0,0 +1,113 @@
+// Native <form> participation shared by every Field: the `form` attribute for controls placed
+// outside their form, and the form's `reset` event. Field wires both onto its root element;
+// FieldHiddenInputs reads the same `form` attribute for the inputs it renders.
+import { untrack } from 'svelte';
+const formAttributes = new WeakMap();
+/** @internal Field registers the `form` prop it received for its controller. */
+export const setFieldFormAttribute = (field, read) => {
+    formAttributes.set(field, read);
+};
+/** The id of the native form a field submits with, from its Field's `form` prop. */
+export const getFieldFormAttribute = (field) => formAttributes.get(field)?.();
+// Inputs, selects and textareas, plus the buttons that submit or reset on their own say-so. A
+// button without a `type` is left alone: with a `form` attribute it would turn into a submit
+// button of that form, and a button needs none to work as `type="button"`.
+const formControls = 'input, select, textarea, button[type="submit" i], button[type="reset" i], button[type="image" i]';
+// Gives the form controls inside the field root the `form` attribute, now and as the control
+// renders more of them (a hidden input per value). Controls that set their own `form` attribute
+// keep it.
+const mirrorFormAttribute = (root, form) => {
+    const marked = [];
+    const mark = () => {
+        for (const element of root.querySelectorAll(formControls)) {
+            if (element.hasAttribute('form'))
+                continue;
+            element.setAttribute('form', form);
+            marked.push(element);
+        }
+    };
+    mark();
+    const observer = new MutationObserver(mark);
+    observer.observe(root, { childList: true, subtree: true });
+    return () => {
+        observer.disconnect();
+        for (const element of marked) {
+            if (element.getAttribute('form') === form)
+                element.removeAttribute('form');
+        }
+    };
+};
+// A field belongs to the form its `form` attribute names, else to the form around it.
+const belongsTo = (field, root, form) => {
+    const attribute = getFieldFormAttribute(field);
+    return attribute ? root.ownerDocument.getElementById(attribute) === form : form.contains(root);
+};
+// The browser resets each control to its default (the `value`/`checked` attributes), which says
+// nothing about the field: Svelte sets live properties, and it only writes them again when the
+// value it renders changes. Pinning every default to the live state first turns the native reset
+// into a no-op for the field's controls, so they always show what the field holds; the field then
+// returns to its initial value and renders it.
+// The text box of a combobox or a tags input holds a search draft, not the field's value: it is
+// left to the native reset, which clears it like any text input, and the control's own binding
+// follows.
+const draftTypes = new Set(['combobox', 'tag']);
+const holdNativeState = (root, form, type) => {
+    for (const element of root.querySelectorAll('input, select, textarea')) {
+        if (element.form !== form)
+            continue;
+        if (element.localName === 'select') {
+            for (const option of element.options) {
+                option.defaultSelected = option.selected;
+            }
+        }
+        else if (element.type === 'checkbox' || element.type === 'radio') {
+            element.defaultChecked = element.checked;
+        }
+        else if (element.type !== 'file' && !draftTypes.has(type)) {
+            element.defaultValue = element.value;
+        }
+    }
+};
+/**
+ * Field root attachment. A control rendered outside its form joins it through Field's `form`
+ * prop, and a native reset of that form returns the field to the value it mounted with and
+ * clears its errors, as the browser does for its own controls. The reset is cancelable by any
+ * listener, so the field follows one task later, once the reset has run.
+ */
+export const fieldNativeForm = (field) => (root) => {
+    // The value the field mounted with, read once its owners settled it: a Form applies its
+    // `value` and entry defaults in an effect that runs before this one.
+    let initialValue = untrack(() => field.value);
+    $effect(() => {
+        initialValue = untrack(() => field.value);
+    });
+    $effect(() => {
+        const form = getFieldFormAttribute(field);
+        if (form)
+            return mirrorFormAttribute(root, form);
+    });
+    let timer;
+    const onreset = (event) => {
+        const form = event.target;
+        if (form?.localName !== 'form' || !belongsTo(field, root, form))
+            return;
+        holdNativeState(root, form, field.type);
+        clearTimeout(timer);
+        timer = setTimeout(() => {
+            if (event.defaultPrevented)
+                return;
+            if (field.hasError)
+                field.errors = [];
+            field.touched = false;
+            field.setValue(initialValue);
+        });
+    };
+    // Capture on the document: the reset reaches it first, and a form attribute can name a form
+    // the field is not inside.
+    const doc = root.ownerDocument;
+    doc.addEventListener('reset', onreset, true);
+    return () => {
+        clearTimeout(timer);
+        doc.removeEventListener('reset', onreset, true);
+    };
+};

package/dist/components/Form/Field/index.d.ts

@@ -1,7 +1,10 @@
 export { default as Field } from './Field.svelte';
 export { default as FieldActionButton } from './FieldActionButton.svelte';
+export { default as FieldHiddenInputs } from './FieldHiddenInputs.svelte';
+export type { FieldHiddenInputOption, FieldHiddenInputValue, FieldHiddenInputsProps } from './fieldHiddenInputs.props.js';
 export { createFieldState } from './field.state.svelte.js';
 export { schemas as fieldSchemas } from './schemas.js';
-export type { FieldControlAttributes, FieldState, FieldValidationResult } from './field.state.svelte.js';
+export type { FieldControlAttributes, FieldState, FieldValidationResult, FieldValidatorResult, ValidationMode } from './field.state.svelte.js';
+export type { FieldMessageOverrides, FieldMessages } from './field.messages.js';
 export { fieldTheme, setFieldTheme, useFieldTheme, type FieldTheme, type FieldThemeProps } from './field.theme.js';
-export { fieldStructure, llmDescription, type BooleanInputType, type CalendarInputType, type ColorInputType, type DateInputType, type FieldAttributes, type FieldLabelPosition, type FieldProps, type FieldValue, type FileInputType, type InputProps, type InputType, type KeyValueInputType, type KeyValuePair, type MultipleChoiceInputType, type NumberInputType, type PinInputType, type RatingInputType, type RichTextInputType, type SingleOptionInputType, type SliderRangeInputType, type TagGroupInputType, type TagInputType, type TextInputType, type TimeInputType, type VoiceInputType } from './field.js';
+export { fieldStructure, llmDescription, type BooleanInputType, type CalendarInputType, type ColorInputType, type DateInputType, type FieldAttributes, type FieldButtonAttributes, type FieldLabelPosition, type FieldProps, type FieldValue, type FileInputType, type InputProps, type InputType, type KeyValueInputType, type KeyValuePair, type MultipleChoiceInputType, type NumberInputType, type PinInputType, type RatingInputType, type RichTextInputType, type SingleOptionInputType, type SliderRangeInputType, type TagGroupInputType, type TagInputType, type TextInputType, type TimeInputType, type VoiceInputType } from './field.js';

package/dist/components/Form/Field/index.js

@@ -1,5 +1,6 @@
 export { default as Field } from './Field.svelte';
 export { default as FieldActionButton } from './FieldActionButton.svelte';
+export { default as FieldHiddenInputs } from './FieldHiddenInputs.svelte';
 export { createFieldState } from './field.state.svelte.js';
 export { schemas as fieldSchemas } from './schemas.js';
 export { fieldTheme, setFieldTheme, useFieldTheme } from './field.theme.js';

package/dist/components/Form/Field/schemas.js

@@ -11,7 +11,8 @@ const emptyArrayNull = (schema) => v.union([
     schema
 ]);
 const optional = (schema) => v.optional(v.nullable(schema, null), null);
-const sliderRangeValue = v.pipe(v.array(v.number()), v.minLength(2));
+// A one-thumb Slider keeps an array value when it was given one, so a range holds one or more values.
+const sliderRangeValue = v.pipe(v.array(v.number()), v.minLength(1));
 const tagGroupValue = v.union([nonEmptyString, nonEmptyArray(v.string())]);
 const keyValuePair = v.object({ key: v.string(), value: v.string() });
 const calendarRangeValue = v.strictTuple([v.nullable(v.date()), v.nullable(v.date())]);
@@ -48,7 +49,9 @@ export const schemas = {
         // Time input type
         time: v.number(),
         // Boolean input types
-        switch: v.boolean(),
+        // An untouched switch is null and a turned-off one false: both are "off", and Switch's own
+        // rule (required means on) reports them with the same error.
+        switch: v.nullable(v.boolean()),
         checkbox: v.boolean(),
         // Single option input types
         select: v.string(),
@@ -56,6 +59,7 @@ export const schemas = {
         combobox: v.string(),
         // Multiple choice input types
         checkboxes: v.array(v.string()),
+        'select-multiple': v.array(v.string()),
         // File input types
         file: v.instance(File),
         files: nonEmptyArray(v.instance(File)),
@@ -102,6 +106,7 @@ export const schemas = {
         combobox: optional(v.string()),
         // Multiple choice input types
         checkboxes: optional(emptyArrayNull(v.array(v.string()))),
+        'select-multiple': optional(emptyArrayNull(v.array(v.string()))),
         // File input types
         file: optional(v.instance(File)),
         files: optional(emptyArrayNull(v.array(v.instance(File)))),

package/dist/components/Form/File/FileInput.svelte

@@ -35,6 +35,8 @@
 		required = false,
 		theme,
 		disabled,
+		readOnly,
+		messages,
 		name,
 		onValidate,
 		visible,
@@ -75,6 +77,12 @@
 		set disabled(v: boolean | undefined) {
 			disabled = v;
 		},
+		get readOnly() {
+			return readOnly;
+		},
+		get messages() {
+			return messages;
+		},
 		get required() {
 			return required;
 		},
@@ -102,7 +110,8 @@
 	};
 
 	const dropzone = new FileDropzone(() => ({
-		disabled: field.disabled,
+		// A read-only zone neither opens the chooser nor takes drops or removals.
+		disabled: field.disabled || field.readOnly,
 		types,
 		maxFiles,
 		clickable,
@@ -180,7 +189,13 @@
 								<div class="truncate">{fil.name}</div>
 								<div class="text-neutral/70 text-xs">{size}</div>
 							</div>
-							<Button variant="ghost" size="small" squared onclick={() => dropzone.removeFile(fil)}>
+							<Button
+								variant="ghost"
+								size="small"
+								squared
+								disabled={field.readOnly}
+								onclick={() => dropzone.removeFile(fil)}
+							>
 								{#snippet prefix()}
 									{@render xIcon({ size: 16 })}
 								{/snippet}
@@ -189,7 +204,13 @@
 					</div>
 				{/each}
 				{#if mode === 'multiple' && dropzone.files.length > 0 && dropzone.files.length < maxFiles}
-					<Button variant="soft" color="primary" fullWidth onclick={() => dropzone.open()}>
+					<Button
+						variant="soft"
+						color="primary"
+						fullWidth
+						disabled={field.readOnly}
+						onclick={() => dropzone.open()}
+					>
 						{#snippet prefix()}
 							{@render plusIcon({ size: 16 })}
 						{/snippet}

package/dist/components/Form/File/fileInput.mcp.d.ts

@@ -1 +1 @@
-export declare const fileInputDescription = "\n# FileInput Component\n\nThe FileInput component provides file upload functionality with drag-and-drop support and an inline list of the selected files (image files get a thumbnail preview). It supports a single-file mode and a multiple-file mode.\n\n## Basic Usage\n\n```svelte\n<script lang=\"ts\">\n\tlet file = $state<File | null>(null);\n</script>\n\n<FileInput label=\"Upload File\" bind:value={file} />\n```\n\n## Props\n\nExtends all Field component props plus:\n\n### Core Props\n- **mode**: 'single' | 'multiple' (default: 'single') - Single-file or multiple-file mode\n- **value**: File | null in single mode, File[] | null in multiple mode (bindable) - Selected file(s)\n- **defaultValue**: same type as `value` - Initial selection when `value` is omitted\n- **types**: string[] (default: ['image/*']) - Accepted MIME types or extensions (e.g. ['image/*'], ['.pdf', '.docx']); used for the native `accept` attribute and drag validation\n- **maxSize**: number (default: 50 MB) - Maximum file size in bytes; larger files are rejected\n- **maxFiles**: number (default: 1) - Maximum number of files (multiple mode caps the combined selection)\n- **clickable**: boolean (default: true) - Whether clicking the dropzone opens the native file picker\n\n### Display Props\n- **placeholder**: string (default: 'Click or drag files here') - Text shown in the empty dropzone\n- **fileList**: Snippet - Custom rendering of the selected files list\n- **file**: Snippet - Custom rendering of each selected file row\n- **fileListClass** / **fileClass** / **placeholderClass**: string - Extra classes for those parts\n\n### Field Props (inherited)\n- **label**: string | Snippet - Field label\n- **description**: string | Snippet - Helper text\n- **required**: boolean - Mark as required\n- **disabled**: boolean - Disable input\n- **size**: 'small' | 'normal' | 'large'\n\n### Event Props\n- **onValueChange**: (value: File | null) => void in single mode, (value: File[] | null) => void in multiple mode - Called when the selection changes\n- **onReject**: (rejections: { file: File; reason: 'type' | 'size' | 'duplicate' | 'limit' }[]) => void - Called with the files rejected by type, size, duplicate or count validation\n\n### Styling Props\n- **class**: string - Additional CSS classes\n- **theme**: ComponentTheme - Custom theme overrides\n\n## Structure\n\n```\n<Field>\n\t<Label />\n\t<Description />\n\t<Dropzone>            <!-- inputContainer -->\n\t\t<Placeholder />     <!-- shown while no file is selected -->\n\t\t<FileList>          <!-- shown once files are selected -->\n\t\t\t<File />          <!-- thumbnail, name, size, remove button -->\n\t\t\t<AddMoreButton /> <!-- multiple mode, while below maxFiles -->\n\t\t</FileList>\n\t</Dropzone>\n\t<Error />\n</Field>\n```\n\n## Examples\n\n### Basic File Input\n```svelte\n<script lang=\"ts\">\n\tlet file = $state<File | null>(null);\n</script>\n\n<FileInput\n\tlabel=\"Upload Document\"\n\ttypes={['.pdf', '.doc', '.docx']}\n\tbind:value={file}\n/>\n```\n\n### Multiple Files\n```svelte\n<script lang=\"ts\">\n\tlet files = $state<File[]>([]);\n</script>\n\n<FileInput\n\tmode=\"multiple\"\n\tmaxFiles={5}\n\tlabel=\"Upload Documents\"\n\ttypes={['.pdf', '.doc', '.docx']}\n\tbind:value={files}\n/>\n```\n\n### Image Upload with Preview\n```svelte\n<script lang=\"ts\">\n\tlet avatar = $state<File | null>(null);\n</script>\n\n<FileInput\n\tlabel=\"Profile Picture\"\n\tbind:value={avatar}\n\ttypes={['image/*']}\n/>\n```\n\n### Restrict File Types\n```svelte\n<script lang=\"ts\">\n\tlet document = $state<File | null>(null);\n</script>\n\n<FileInput\n\tlabel=\"Upload PDF\"\n\tbind:value={document}\n\ttypes={['.pdf']}\n\tdescription=\"PDF files only\"\n/>\n```\n\n### With File Size Limit\n```svelte\n<script lang=\"ts\">\n\tlet image = $state<File | null>(null);\n</script>\n\n<FileInput\n\tlabel=\"Upload Image\"\n\tbind:value={image}\n\ttypes={['image/*']}\n\tmaxSize={5 * 1024 * 1024}\n\tdescription=\"Maximum 5MB\"\n/>\n```\n\n### Required File\n```svelte\n<script lang=\"ts\">\n\tlet resume = $state<File | null>(null);\n</script>\n\n<FileInput\n\tlabel=\"Resume\"\n\tbind:value={resume}\n\ttypes={['.pdf', '.doc', '.docx']}\n\trequired\n/>\n```\n\n### Disabled State\n```svelte\n<FileInput\n\tlabel=\"Uploaded File\"\n\tvalue={existingFile}\n\tdisabled\n/>\n```\n\n### Avatar Upload\n```svelte\n<script lang=\"ts\">\n\tlet avatar = $state<File | null>(null);\n\n\tfunction handleUpload(file: File | null) {\n\t\tif (!file) return;\n\t\tconsole.log('Uploading:', file.name);\n\t\t// Upload to server\n\t}\n</script>\n\n<FileInput\n\tlabel=\"Profile Picture\"\n\tbind:value={avatar}\n\ttypes={['image/png', 'image/jpeg']}\n\tmaxSize={2 * 1024 * 1024}\n\tdescription=\"PNG or JPEG, max 2MB\"\n\tonValueChange={handleUpload}\n/>\n```\n\n### Handling Rejected Files\n```svelte\n<script lang=\"ts\">\n\tlet image = $state<File | null>(null);\n\tlet rejectionMessage = $state('');\n</script>\n\n<FileInput\n\tlabel=\"Upload Image\"\n\tbind:value={image}\n\ttypes={['image/*']}\n\tmaxSize={1024 * 1024}\n\tonReject={(rejections) => {\n\t\trejectionMessage = rejections\n\t\t\t.map((rejection) => `${rejection.file.name}: ${rejection.reason}`)\n\t\t\t.join(', ');\n\t}}\n/>\n\n{#if rejectionMessage}\n\t<p class=\"text-danger-readable text-sm\">{rejectionMessage}</p>\n{/if}\n```\n\n### Document Upload Form\n```svelte\n<script lang=\"ts\">\n\tlet documents = $state<File[]>([]);\n\n\tasync function handleSubmit(event: SubmitEvent) {\n\t\tevent.preventDefault();\n\t\tconst formData = new FormData();\n\t\tdocuments.forEach((file, i) => {\n\t\t\tformData.append(`document${i}`, file);\n\t\t});\n\n\t\tawait fetch('/api/upload', {\n\t\t\tmethod: 'POST',\n\t\t\tbody: formData\n\t\t});\n\t}\n</script>\n\n<form onsubmit={handleSubmit}>\n\t<FileInput\n\t\tmode=\"multiple\"\n\t\tmaxFiles={10}\n\t\tlabel=\"Supporting Documents\"\n\t\tbind:value={documents}\n\t\ttypes={['.pdf', '.doc', '.docx']}\n\t\tdescription=\"Upload relevant documents\"\n\t\trequired\n\t/>\n\n\t<Button type=\"submit\" disabled={documents.length === 0}>\n\t\tSubmit Application\n\t</Button>\n</form>\n```\n\n### Image Gallery Upload\n```svelte\n<script lang=\"ts\">\n\tlet images = $state<File[]>([]);\n</script>\n\n<FileInput\n\tmode=\"multiple\"\n\tmaxFiles={20}\n\tlabel=\"Upload Photos\"\n\tbind:value={images}\n\ttypes={['image/*']}\n\tmaxSize={10 * 1024 * 1024}\n\tdescription=\"Select multiple images (max 10MB each)\"\n/>\n\n<p>Selected: {images.length} images</p>\n```\n\n### With Upload Progress\n```svelte\n<script lang=\"ts\">\n\tlet file = $state<File | null>(null);\n\tlet progress = $state(0);\n\tlet uploading = $state(false);\n\n\tasync function handleUpload(selectedFile: File | null) {\n\t\tif (!selectedFile) return;\n\t\tuploading = true;\n\t\tprogress = 0;\n\n\t\tconst formData = new FormData();\n\t\tformData.append('file', selectedFile);\n\n\t\t// Simulate upload progress\n\t\tconst interval = setInterval(() => {\n\t\t\tprogress += 10;\n\t\t\tif (progress >= 100) {\n\t\t\t\tclearInterval(interval);\n\t\t\t\tuploading = false;\n\t\t\t}\n\t\t}, 200);\n\t}\n</script>\n\n<FileInput\n\tlabel=\"Upload File\"\n\tbind:value={file}\n\tonValueChange={handleUpload}\n\tdisabled={uploading}\n/>\n\n{#if uploading}\n\t<Meter value={progress} />\n{/if}\n```\n\n### CV Upload\n```svelte\n<script lang=\"ts\">\n\tlet cv = $state<File | null>(null);\n</script>\n\n<FileInput\n\tlabel=\"Upload CV/Resume\"\n\tbind:value={cv}\n\ttypes={['.pdf', '.doc', '.docx']}\n\tmaxSize={5 * 1024 * 1024}\n\tdescription=\"PDF or Word document, max 5MB\"\n\trequired\n/>\n```\n\n### Attachment Field\n```svelte\n<script lang=\"ts\">\n\tlet attachments = $state<File[]>([]);\n\n\tfunction removeFile(index: number) {\n\t\tattachments = attachments.filter((_, i) => i !== index);\n\t}\n</script>\n\n<FileInput\n\tmode=\"multiple\"\n\tmaxFiles={Infinity}\n\tlabel=\"Attachments\"\n\ttypes={['*/*']}\n\tbind:value={attachments}\n\tdescription=\"Add any supporting files\"\n/>\n\n{#if attachments.length > 0}\n\t<div class=\"file-list\">\n\t\t{#each attachments as file, i}\n\t\t\t<div class=\"file-item\">\n\t\t\t\t<span>{file.name}</span>\n\t\t\t\t<Button\n\t\t\t\t\tsize=\"small\"\n\t\t\t\t\tvariant=\"ghost\"\n\t\t\t\t\tonclick={() => removeFile(i)}\n\t\t\t\t>\n\t\t\t\t\tRemove\n\t\t\t\t</Button>\n\t\t\t</div>\n\t\t{/each}\n\t</div>\n{/if}\n```\n\n## Drag and Drop\n\nFileInput supports drag-and-drop:\n- Drag files over the drop zone\n- Visual feedback while dragging (the dropzone reflects an idle / potential / valid / invalid state)\n- Drop to select files\n- Works alongside click-to-browse (disable with `clickable={false}`)\n\n## File List\n\nOnce files are selected the dropzone shows them inline:\n- Images show a thumbnail preview\n- Other files show their name\n- File size displayed\n- Remove button for each file\n- In multiple mode, an \"Add more files\" button appears while below `maxFiles`\n\n## Validation\n\nFileInput validates:\n- **required**: At least one file selected\n- **types**: File type matches the accepted types (rejected with reason 'type')\n- **maxSize**: File size within limit (rejected with reason 'size')\n- **maxFiles**: Number of files in multiple mode (rejected with reason 'limit')\n- Duplicate files (same name and size) are rejected with reason 'duplicate'\n\nRejected files never enter `value`; listen to `onReject` to surface them.\n\n## File Type Patterns\n\nEntries accepted in `types`:\n- `'image/*'` - All images\n- `'image/png'`, `'image/jpeg'` - Specific image types\n- `'.pdf'` - PDF files\n- `'.pdf'`, `'.doc'`, `'.docx'` - Documents\n- `'video/*'` - Videos\n- `'audio/*'` - Audio files\n- `'*/*'` - Any file\n\n## Accessibility\n\n- Proper label association\n- Keyboard accessible (Enter/Space to open file picker)\n- ARIA attributes for drop zone\n- File selection announced to screen readers\n- Error states communicated\n\n## Notes\n\n- Supports drag-and-drop file upload\n- Preview images before upload\n- Validates file types and sizes\n- Works with FormData for upload\n- Can handle single or multiple files\n- File objects are returned for processing\n\n## Theme Customization\n\nThe FileInput component uses a theme object that can be customized using the `theme` prop or by setting a global theme.\n\n### Theme Structure\n\nThe theme object contains the following parts:\n- **inputContainer**: The dropzone container\n- **placeholder**: The empty-state placeholder (icon and text)\n- **fileList**: The list wrapping the selected files\n- **file**: Each selected file row\n\nField theme parts (label, description, error, ...) are also accepted on the same `theme` prop.\n\n### Available Variants\n\n**inputContainer**:\n- base: Base classes for the dropzone\n- Variants:\n  - size: 'small' | 'normal' | 'large' - Minimum height\n  - state: 'idle' | 'potential' | 'valid' | 'invalid' - Drag state styling\n  - disabled: boolean - Disabled state styling\n\n**placeholder**:\n- base: Base classes for the placeholder\n- Variants:\n  - size: 'small' | 'normal' | 'large' - Text size and gap\n\n**fileList**:\n- base: Base classes for the file list\n- Variants:\n  - size: 'small' | 'normal' | 'large' - Gap between rows\n\n**file**:\n- base: Base classes for each file row\n- Variants:\n  - size: 'small' | 'normal' | 'large' - Padding, text size and gap\n\n### Usage Examples\n\n**Basic Theme Override**:\n```svelte\n<FileInput\n  label=\"Upload Files\"\n  bind:value={files}\n  theme={{\n    inputContainer: {\n      base: 'border-2 border-dashed rounded-lg',\n      state: {\n        valid: 'border-primary bg-primary/10'\n      }\n    }\n  }}\n/>\n```\n\n**Custom Dropzone Styling**:\n```svelte\n<FileInput\n  label=\"Custom Upload\"\n  bind:value={files}\n  theme={{\n    inputContainer: {\n      base: 'border-2 border-dashed border-neutral-muted rounded-xl p-8 hover:border-primary transition-colors',\n      state: {\n        potential: 'border-primary',\n        valid: 'border-primary bg-primary/5',\n        invalid: 'border-danger bg-danger/5'\n      }\n    },\n    fileList: {\n      base: 'mt-4 grid grid-cols-2 gap-4'\n    },\n    file: {\n      base: 'rounded-md border border-neutral-muted'\n    }\n  }}\n/>\n```\n\n**Global Theme Setting**:\n```svelte\n<script>\n  import { setFileInputTheme } from './index.ts';\n\n  setFileInputTheme({\n    inputContainer: {\n      base: 'border-2 border-dashed rounded-lg transition-all',\n      state: {\n        valid: 'border-primary bg-primary/5'\n      }\n    },\n    fileList: {\n      base: 'mt-4'\n    }\n  });\n</script>\n```\n\n## State contract\n\n- **value**: current bindable editable value.\n- **defaultValue**: initial value used only when `value` is omitted.\n- **onValueChange**: called with the new value when the component changes it.\n\n";
+export declare const fileInputDescription = "\n# FileInput Component\n\nThe FileInput component provides file upload functionality with drag-and-drop support and an inline list of the selected files (image files get a thumbnail preview). It supports a single-file mode and a multiple-file mode.\n\n## Basic Usage\n\n```svelte\n<script lang=\"ts\">\n\tlet file = $state<File | null>(null);\n</script>\n\n<FileInput label=\"Upload File\" bind:value={file} />\n```\n\n## Props\n\nExtends all Field component props plus:\n\n### Core Props\n- **mode**: 'single' | 'multiple' (default: 'single') - Single-file or multiple-file mode\n- **value**: File | null in single mode, File[] | null in multiple mode (bindable) - Selected file(s)\n- **defaultValue**: same type as `value` - Initial selection when `value` is omitted\n- **types**: string[] (default: ['image/*']) - Accepted MIME types or extensions (e.g. ['image/*'], ['.pdf', '.docx']); used for the native `accept` attribute and drag validation\n- **maxSize**: number (default: 50 MB) - Maximum file size in bytes; larger files are rejected\n- **maxFiles**: number (default: 1) - Maximum number of files (multiple mode caps the combined selection)\n- **clickable**: boolean (default: true) - Whether clicking the dropzone opens the native file picker\n\n### Display Props\n- **placeholder**: string (default: 'Click or drag files here') - Text shown in the empty dropzone\n- **fileList**: Snippet - Custom rendering of the selected files list\n- **file**: Snippet - Custom rendering of each selected file row\n- **fileListClass** / **fileClass** / **placeholderClass**: string - Extra classes for those parts\n\n### Field Props (inherited)\n- **label**: string | Snippet - Field label\n- **description**: string | Snippet - Helper text\n- **required**: boolean - Mark as required\n- **disabled**: boolean - Disable input\n- **readOnly**: boolean - Keep the files but refuse choosing, dropping and removing them; the value still submits\n- **size**: 'small' | 'normal' | 'large'\n\n### Event Props\n- **onValueChange**: (value: File | null) => void in single mode, (value: File[] | null) => void in multiple mode - Called when the selection changes\n- **onReject**: (rejections: { file: File; reason: 'type' | 'size' | 'duplicate' | 'limit' }[]) => void - Called with the files rejected by type, size, duplicate or count validation\n\n### Styling Props\n- **class**: string - Additional CSS classes\n- **theme**: ComponentTheme - Custom theme overrides\n\n## Structure\n\n```\n<Field>\n\t<Label />\n\t<Description />\n\t<Dropzone>            <!-- inputContainer -->\n\t\t<Placeholder />     <!-- shown while no file is selected -->\n\t\t<FileList>          <!-- shown once files are selected -->\n\t\t\t<File />          <!-- thumbnail, name, size, remove button -->\n\t\t\t<AddMoreButton /> <!-- multiple mode, while below maxFiles -->\n\t\t</FileList>\n\t</Dropzone>\n\t<Error />\n</Field>\n```\n\n## Examples\n\n### Basic File Input\n```svelte\n<script lang=\"ts\">\n\tlet file = $state<File | null>(null);\n</script>\n\n<FileInput\n\tlabel=\"Upload Document\"\n\ttypes={['.pdf', '.doc', '.docx']}\n\tbind:value={file}\n/>\n```\n\n### Multiple Files\n```svelte\n<script lang=\"ts\">\n\tlet files = $state<File[]>([]);\n</script>\n\n<FileInput\n\tmode=\"multiple\"\n\tmaxFiles={5}\n\tlabel=\"Upload Documents\"\n\ttypes={['.pdf', '.doc', '.docx']}\n\tbind:value={files}\n/>\n```\n\n### Image Upload with Preview\n```svelte\n<script lang=\"ts\">\n\tlet avatar = $state<File | null>(null);\n</script>\n\n<FileInput\n\tlabel=\"Profile Picture\"\n\tbind:value={avatar}\n\ttypes={['image/*']}\n/>\n```\n\n### Restrict File Types\n```svelte\n<script lang=\"ts\">\n\tlet document = $state<File | null>(null);\n</script>\n\n<FileInput\n\tlabel=\"Upload PDF\"\n\tbind:value={document}\n\ttypes={['.pdf']}\n\tdescription=\"PDF files only\"\n/>\n```\n\n### With File Size Limit\n```svelte\n<script lang=\"ts\">\n\tlet image = $state<File | null>(null);\n</script>\n\n<FileInput\n\tlabel=\"Upload Image\"\n\tbind:value={image}\n\ttypes={['image/*']}\n\tmaxSize={5 * 1024 * 1024}\n\tdescription=\"Maximum 5MB\"\n/>\n```\n\n### Required File\n```svelte\n<script lang=\"ts\">\n\tlet resume = $state<File | null>(null);\n</script>\n\n<FileInput\n\tlabel=\"Resume\"\n\tbind:value={resume}\n\ttypes={['.pdf', '.doc', '.docx']}\n\trequired\n/>\n```\n\n### Disabled State\n```svelte\n<FileInput\n\tlabel=\"Uploaded File\"\n\tvalue={existingFile}\n\tdisabled\n/>\n```\n\n### Avatar Upload\n```svelte\n<script lang=\"ts\">\n\tlet avatar = $state<File | null>(null);\n\n\tfunction handleUpload(file: File | null) {\n\t\tif (!file) return;\n\t\tconsole.log('Uploading:', file.name);\n\t\t// Upload to server\n\t}\n</script>\n\n<FileInput\n\tlabel=\"Profile Picture\"\n\tbind:value={avatar}\n\ttypes={['image/png', 'image/jpeg']}\n\tmaxSize={2 * 1024 * 1024}\n\tdescription=\"PNG or JPEG, max 2MB\"\n\tonValueChange={handleUpload}\n/>\n```\n\n### Handling Rejected Files\n```svelte\n<script lang=\"ts\">\n\tlet image = $state<File | null>(null);\n\tlet rejectionMessage = $state('');\n</script>\n\n<FileInput\n\tlabel=\"Upload Image\"\n\tbind:value={image}\n\ttypes={['image/*']}\n\tmaxSize={1024 * 1024}\n\tonReject={(rejections) => {\n\t\trejectionMessage = rejections\n\t\t\t.map((rejection) => `${rejection.file.name}: ${rejection.reason}`)\n\t\t\t.join(', ');\n\t}}\n/>\n\n{#if rejectionMessage}\n\t<p class=\"text-danger-readable text-sm\">{rejectionMessage}</p>\n{/if}\n```\n\n### Document Upload Form\n```svelte\n<script lang=\"ts\">\n\tlet documents = $state<File[]>([]);\n\n\tasync function handleSubmit(event: SubmitEvent) {\n\t\tevent.preventDefault();\n\t\tconst formData = new FormData();\n\t\tdocuments.forEach((file, i) => {\n\t\t\tformData.append(`document${i}`, file);\n\t\t});\n\n\t\tawait fetch('/api/upload', {\n\t\t\tmethod: 'POST',\n\t\t\tbody: formData\n\t\t});\n\t}\n</script>\n\n<form onsubmit={handleSubmit}>\n\t<FileInput\n\t\tmode=\"multiple\"\n\t\tmaxFiles={10}\n\t\tlabel=\"Supporting Documents\"\n\t\tbind:value={documents}\n\t\ttypes={['.pdf', '.doc', '.docx']}\n\t\tdescription=\"Upload relevant documents\"\n\t\trequired\n\t/>\n\n\t<Button type=\"submit\" disabled={documents.length === 0}>\n\t\tSubmit Application\n\t</Button>\n</form>\n```\n\n### Image Gallery Upload\n```svelte\n<script lang=\"ts\">\n\tlet images = $state<File[]>([]);\n</script>\n\n<FileInput\n\tmode=\"multiple\"\n\tmaxFiles={20}\n\tlabel=\"Upload Photos\"\n\tbind:value={images}\n\ttypes={['image/*']}\n\tmaxSize={10 * 1024 * 1024}\n\tdescription=\"Select multiple images (max 10MB each)\"\n/>\n\n<p>Selected: {images.length} images</p>\n```\n\n### With Upload Progress\n```svelte\n<script lang=\"ts\">\n\tlet file = $state<File | null>(null);\n\tlet progress = $state(0);\n\tlet uploading = $state(false);\n\n\tasync function handleUpload(selectedFile: File | null) {\n\t\tif (!selectedFile) return;\n\t\tuploading = true;\n\t\tprogress = 0;\n\n\t\tconst formData = new FormData();\n\t\tformData.append('file', selectedFile);\n\n\t\t// Simulate upload progress\n\t\tconst interval = setInterval(() => {\n\t\t\tprogress += 10;\n\t\t\tif (progress >= 100) {\n\t\t\t\tclearInterval(interval);\n\t\t\t\tuploading = false;\n\t\t\t}\n\t\t}, 200);\n\t}\n</script>\n\n<FileInput\n\tlabel=\"Upload File\"\n\tbind:value={file}\n\tonValueChange={handleUpload}\n\tdisabled={uploading}\n/>\n\n{#if uploading}\n\t<Meter value={progress} />\n{/if}\n```\n\n### CV Upload\n```svelte\n<script lang=\"ts\">\n\tlet cv = $state<File | null>(null);\n</script>\n\n<FileInput\n\tlabel=\"Upload CV/Resume\"\n\tbind:value={cv}\n\ttypes={['.pdf', '.doc', '.docx']}\n\tmaxSize={5 * 1024 * 1024}\n\tdescription=\"PDF or Word document, max 5MB\"\n\trequired\n/>\n```\n\n### Attachment Field\n```svelte\n<script lang=\"ts\">\n\tlet attachments = $state<File[]>([]);\n\n\tfunction removeFile(index: number) {\n\t\tattachments = attachments.filter((_, i) => i !== index);\n\t}\n</script>\n\n<FileInput\n\tmode=\"multiple\"\n\tmaxFiles={Infinity}\n\tlabel=\"Attachments\"\n\ttypes={['*/*']}\n\tbind:value={attachments}\n\tdescription=\"Add any supporting files\"\n/>\n\n{#if attachments.length > 0}\n\t<div class=\"file-list\">\n\t\t{#each attachments as file, i}\n\t\t\t<div class=\"file-item\">\n\t\t\t\t<span>{file.name}</span>\n\t\t\t\t<Button\n\t\t\t\t\tsize=\"small\"\n\t\t\t\t\tvariant=\"ghost\"\n\t\t\t\t\tonclick={() => removeFile(i)}\n\t\t\t\t>\n\t\t\t\t\tRemove\n\t\t\t\t</Button>\n\t\t\t</div>\n\t\t{/each}\n\t</div>\n{/if}\n```\n\n## Drag and Drop\n\nFileInput supports drag-and-drop:\n- Drag files over the drop zone\n- Visual feedback while dragging (the dropzone reflects an idle / potential / valid / invalid state)\n- Drop to select files\n- Works alongside click-to-browse (disable with `clickable={false}`)\n\n## File List\n\nOnce files are selected the dropzone shows them inline:\n- Images show a thumbnail preview\n- Other files show their name\n- File size displayed\n- Remove button for each file\n- In multiple mode, an \"Add more files\" button appears while below `maxFiles`\n\n## Validation\n\nFileInput validates:\n- **required**: At least one file selected\n- **types**: File type matches the accepted types (rejected with reason 'type')\n- **maxSize**: File size within limit (rejected with reason 'size')\n- **maxFiles**: Number of files in multiple mode (rejected with reason 'limit')\n- Duplicate files (same name and size) are rejected with reason 'duplicate'\n\nRejected files never enter `value`; listen to `onReject` to surface them.\n\n## File Type Patterns\n\nEntries accepted in `types`:\n- `'image/*'` - All images\n- `'image/png'`, `'image/jpeg'` - Specific image types\n- `'.pdf'` - PDF files\n- `'.pdf'`, `'.doc'`, `'.docx'` - Documents\n- `'video/*'` - Videos\n- `'audio/*'` - Audio files\n- `'*/*'` - Any file\n\n## Accessibility\n\n- Proper label association\n- Keyboard accessible (Enter/Space to open file picker)\n- ARIA attributes for drop zone\n- File selection announced to screen readers\n- Error states communicated\n\n## Notes\n\n- Supports drag-and-drop file upload\n- Preview images before upload\n- Validates file types and sizes\n- Works with FormData for upload\n- Can handle single or multiple files\n- File objects are returned for processing\n\n## Theme Customization\n\nThe FileInput component uses a theme object that can be customized using the `theme` prop or by setting a global theme.\n\n### Theme Structure\n\nThe theme object contains the following parts:\n- **inputContainer**: The dropzone container\n- **placeholder**: The empty-state placeholder (icon and text)\n- **fileList**: The list wrapping the selected files\n- **file**: Each selected file row\n\nField theme parts (label, description, error, ...) are also accepted on the same `theme` prop.\n\n### Available Variants\n\n**inputContainer**:\n- base: Base classes for the dropzone\n- Variants:\n  - size: 'small' | 'normal' | 'large' - Minimum height\n  - state: 'idle' | 'potential' | 'valid' | 'invalid' - Drag state styling\n  - disabled: boolean - Disabled state styling\n\n**placeholder**:\n- base: Base classes for the placeholder\n- Variants:\n  - size: 'small' | 'normal' | 'large' - Text size and gap\n\n**fileList**:\n- base: Base classes for the file list\n- Variants:\n  - size: 'small' | 'normal' | 'large' - Gap between rows\n\n**file**:\n- base: Base classes for each file row\n- Variants:\n  - size: 'small' | 'normal' | 'large' - Padding, text size and gap\n\n### Usage Examples\n\n**Basic Theme Override**:\n```svelte\n<FileInput\n  label=\"Upload Files\"\n  bind:value={files}\n  theme={{\n    inputContainer: {\n      base: 'border-2 border-dashed rounded-lg',\n      state: {\n        valid: 'border-primary bg-primary/10'\n      }\n    }\n  }}\n/>\n```\n\n**Custom Dropzone Styling**:\n```svelte\n<FileInput\n  label=\"Custom Upload\"\n  bind:value={files}\n  theme={{\n    inputContainer: {\n      base: 'border-2 border-dashed border-neutral-muted rounded-xl p-8 hover:border-primary transition-colors',\n      state: {\n        potential: 'border-primary',\n        valid: 'border-primary bg-primary/5',\n        invalid: 'border-danger bg-danger/5'\n      }\n    },\n    fileList: {\n      base: 'mt-4 grid grid-cols-2 gap-4'\n    },\n    file: {\n      base: 'rounded-md border border-neutral-muted'\n    }\n  }}\n/>\n```\n\n**Global Theme Setting**:\n```svelte\n<script>\n  import { setFileInputTheme } from './index.ts';\n\n  setFileInputTheme({\n    inputContainer: {\n      base: 'border-2 border-dashed rounded-lg transition-all',\n      state: {\n        valid: 'border-primary bg-primary/5'\n      }\n    },\n    fileList: {\n      base: 'mt-4'\n    }\n  });\n</script>\n```\n\n## State contract\n\n- **value**: current bindable editable value.\n- **defaultValue**: initial value used only when `value` is omitted.\n- **onValueChange**: called with the new value when the component changes it.\n\n";

package/dist/components/Form/File/fileInput.mcp.js

@@ -37,6 +37,7 @@ Extends all Field component props plus:
 - **description**: string | Snippet - Helper text
 - **required**: boolean - Mark as required
 - **disabled**: boolean - Disable input
+- **readOnly**: boolean - Keep the files but refuse choosing, dropping and removing them; the value still submits
 - **size**: 'small' | 'normal' | 'large'
 
 ### Event Props