@thomasfosterau/components 0.0.0 → 0.2.0

package/dist/fields/DateRangePicker.svelte.d.ts

@@ -0,0 +1,43 @@
+import type { DateValue } from '@internationalized/date';
+import { DateRangePicker } from 'bits-ui';
+import { type PickerProps, type SegmentedFieldProps } from './segmented-field.ts';
+/** A start–end span; either end `undefined` while incomplete. */
+interface DateRangeValue {
+    start: DateValue | undefined;
+    end: DateValue | undefined;
+}
+interface Props extends Omit<SegmentedFieldProps, 'name'>, PickerProps {
+    /** The span. Bindable. */
+    value?: DateRangeValue | undefined;
+    /** Earliest valid date. */
+    minValue?: DateValue | undefined;
+    /** Latest valid date. */
+    maxValue?: DateValue | undefined;
+    /** Shortest span in days. */
+    minDays?: number | undefined;
+    /** Longest span in days. */
+    maxDays?: number | undefined;
+    /**
+     * Close the popover once the span is complete.
+     * @defaultValue `true`
+     */
+    closeOnRangeSelect?: boolean | undefined;
+    /** Form field name of the start date (ISO), posted through a hidden input. */
+    startName?: string | undefined;
+    /** Form field name of the end date (ISO), posted through a hidden input. */
+    endName?: string | undefined;
+    /**
+     * Name of the start half.
+     * @defaultValue `'Start date'`
+     */
+    startLabel?: string | undefined;
+    /**
+     * Name of the end half.
+     * @defaultValue `'End date'`
+     */
+    endLabel?: string | undefined;
+}
+/** Two segmented date fields, a start and an end, with a range-calendar popover, on bits-ui `DateRangePicker`. */
+declare const DateRangePicker: import("svelte").Component<Props, {}, "value" | "open">;
+type DateRangePicker = ReturnType<typeof DateRangePicker>;
+export default DateRangePicker;

package/dist/fields/Dropzone.svelte

@@ -0,0 +1,232 @@
+<!-- @component
+Choose one or many files by dropping them on a target or through a "Choose files" button, with a removable file list and explained rejections; never uploads.
+-->
+<!--
+  Dropzone — a drop target plus a real "Choose files" button, a list of the
+  chosen files (name, size, optional thumbnail) each with a remove button,
+  and client-side `accept` / `maxBytes` / `maxFiles` checks whose rejections
+  are explained. It binds a `File[]` and never uploads: the transfer is the
+  caller's, as with `FileInput`.
+
+  Hand-rolled, and why (AGENTS.md): no bits-ui primitive exists for file
+  drops, and the contract is small — one button, one list, one alert —
+  pinned by `tests/fields/Dropzone.test.ts`. The checks are the pure helpers
+  in `file-validation.ts`, shared with `FileInput`.
+
+  A real `<input type="file">` sits inside, visually hidden, carrying
+  `name`, `accept`, `multiple` and `required`. Every change to `files` — a
+  pick, a drop, a removal, the caller's own write — is synced into it through
+  a `DataTransfer`, so a plain form POST posts exactly the listed files.
+  A drop is NOT filtered by the browser against `accept`, which is why the
+  checks run on drops too.
+
+  ARIA contract (no APG pattern; these are the guarantees):
+  - The drop area is never the only way in. The "Choose files" `<button>`
+    opens the native picker, and it carries the `FieldControl` id, so
+    `FormField`'s `<label for>` names it, plus `aria-describedby`
+    (`describedBy`, then the rejection alert). It takes no `aria-invalid` —
+    the `button` role does not support it — so `invalid` reaches assistive
+    technology through `FormField`'s error text in that description. The drop
+    area itself is not focusable; `promptLabel` sits in front of the button.
+  - Drag-over is visual only (`data-dragging`), never announced.
+  - The files are a `<ul>` of `<li>`; each remove button is named by
+    `removeLabel(file)`. After a removal, focus moves to the next remove
+    button, else the previous one, else the choose button.
+  - Rejections from the last selection render in one `role="alert"`
+    region (`FieldErrors`), cleared by the next selection.
+  - A polite live region says how many files are selected after each
+    selection or drop, since a drop otherwise produces no announcement.
+
+  Previews: an image file gets an object-URL thumbnail when `previews` is
+  on; every URL is revoked when its file leaves the list and when the
+  component is destroyed.
+-->
+<script lang="ts">import { tick, untrack } from "svelte";
+import { SvelteMap } from "svelte/reactivity";
+import { getComponentsContext } from "../context.svelte.js";
+import FieldErrors from "./FieldErrors.svelte";
+import { acceptMatches, exceedsSize, formatFileSize } from "./file-validation.js";
+let { files = $bindable([]), accept, maxBytes, maxFiles, multiple = true, name, onSelect, previews = true, promptLabel = "Drop files here or", chooseLabel = "Choose files", removeLabel = (file) => `Remove ${file.name}`, tooLargeMessage = (file) => `${file.name} is too large.`, wrongTypeMessage = (file) => `${file.name} is not an accepted file type.`, tooManyMessage = (max) => `Choose at most ${max} files.`, selectedMessage = (count) => count === 1 ? "1 file selected" : `${count} files selected`, locales = getComponentsContext().locale(), file: fileRow, disabled = false, id: idProp, labelId: _labelId, describedBy = "", invalid = false, required = false, class: className, ...rest } = $props();
+const uid = $props.id();
+const buttonId = $derived(idProp ?? uid);
+const errorsId = $derived(`${uid}-errors`);
+let input = $state(null);
+let chooseButton = $state(null);
+let root = $state(null);
+let dragging = $state(false);
+let rejections = $state([]);
+let announcement = $state("");
+const previewUrls = new SvelteMap();
+const cap = $derived(multiple ? maxFiles : 1);
+const messages = $derived(rejectionMessages(rejections));
+const described = $derived([describedBy, messages.length > 0 ? errorsId : ""].filter((part) => part !== "").join(" "));
+function rejectionMessages(list) {
+	const out = list.filter((rejection) => rejection.reason !== "too-many").map((rejection) => rejection.reason === "too-large" ? tooLargeMessage(rejection.file) : wrongTypeMessage(rejection.file));
+	if (cap !== undefined && list.some((rejection) => rejection.reason === "too-many")) {
+		out.push(tooManyMessage(cap));
+	}
+	return out;
+}
+/** Which rule, if any, refuses `candidate` once `taken` files are already in. */
+function refusal(candidate, taken) {
+	if (!acceptMatches(candidate, accept)) return "wrong-type";
+	if (exceedsSize(candidate, maxBytes)) return "too-large";
+	if (cap !== undefined && taken >= cap) return "too-many";
+	return undefined;
+}
+/** Check a pick or a drop, keep what passes, explain what does not. */
+function take(incoming) {
+	const base = multiple ? files : [];
+	const accepted = [];
+	const rejected = [];
+	for (const candidate of incoming) {
+		const reason = refusal(candidate, base.length + accepted.length);
+		if (reason === undefined) accepted.push(candidate);
+		else rejected.push({
+			file: candidate,
+			reason
+		});
+	}
+	if (accepted.length > 0 || !multiple) files = [...base, ...accepted];
+	rejections = rejected;
+	announcement = selectedMessage(files.length);
+	onSelect?.(accepted, rejected);
+}
+async function remove(index) {
+	files = files.filter((_, at) => at !== index);
+	announcement = selectedMessage(files.length);
+	// Let the list re-render before choosing where focus goes.
+	await tick();
+	const left = [...root?.querySelectorAll("[data-dropzone-remove]") ?? []];
+	(left[index] ?? left[index - 1] ?? chooseButton)?.focus();
+}
+/** Mirror `files` into the native input, so a form POST sends exactly the listed files. */
+function syncInput(current) {
+	if (input === null) return;
+	const transfer = new DataTransfer();
+	for (const entry of current) transfer.items.add(entry);
+	input.files = transfer.files;
+}
+$effect(() => {
+	const current = files;
+	untrack(() => {
+		for (const entry of current) {
+			if (previews && entry.type.startsWith("image/") && !previewUrls.has(entry)) {
+				previewUrls.set(entry, URL.createObjectURL(entry));
+			}
+		}
+		for (const [entry, url] of previewUrls) {
+			if (!current.includes(entry)) {
+				URL.revokeObjectURL(url);
+				previewUrls.delete(entry);
+			}
+		}
+		syncInput(current);
+	});
+});
+$effect(() => () => {
+	for (const url of previewUrls.values()) URL.revokeObjectURL(url);
+});
+function dragOver(event) {
+	event.preventDefault();
+	if (disabled) return;
+	dragging = true;
+	if (event.dataTransfer !== null) event.dataTransfer.dropEffect = "copy";
+}
+function dragLeave(event) {
+	const target = event.currentTarget;
+	if (event.relatedTarget instanceof Node && target.contains(event.relatedTarget)) return;
+	dragging = false;
+}
+function drop(event) {
+	event.preventDefault();
+	dragging = false;
+	if (disabled) return;
+	take([...event.dataTransfer?.files ?? []]);
+}
+function picked(event) {
+	const chosen = [...event.currentTarget.files ?? []];
+	// The native input now holds only the new pick; `take` decides the list,
+	// and the sync effect writes it back.
+	take(chosen);
+	syncInput(files);
+}
+</script>
+
+{#snippet row(entry: File, index: number)}
+  {@const preview = previewUrls.get(entry)}
+  {#if preview !== undefined}
+    <img src={preview} alt="" class="rounded-field size-10 object-cover" />
+  {/if}
+  <span class="min-w-0 grow truncate">{entry.name}</span>
+  <span class="text-base-content/70 text-sm tabular-nums">{formatFileSize(entry.size, locales)}</span>
+  <button
+    data-dropzone-remove
+    type="button"
+    {disabled}
+    class="btn btn-ghost btn-sm"
+    onclick={() => void remove(index)}
+  >
+    {removeLabel(entry)}
+  </button>
+{/snippet}
+
+<div
+  {...rest}
+  bind:this={root}
+  data-dragging={dragging ? '' : undefined}
+  ondragenter={dragOver}
+  ondragover={dragOver}
+  ondragleave={dragLeave}
+  ondrop={drop}
+  class={[
+    'rounded-box bg-base-100 border-2 border-dashed p-4',
+    invalid || messages.length > 0 ? 'border-error' : 'border-base-300',
+    'data-[dragging]:border-primary data-[dragging]:bg-base-200',
+    disabled && 'opacity-50',
+    className,
+  ]}
+>
+  <div class="flex flex-wrap items-center justify-center gap-2 py-4 text-center">
+    <span>{promptLabel}</span>
+    <button
+      bind:this={chooseButton}
+      id={buttonId}
+      type="button"
+      {disabled}
+      aria-describedby={described === '' ? undefined : described}
+      class="btn btn-sm"
+      onclick={() => input?.click()}
+    >
+      {chooseLabel}
+    </button>
+  </div>
+  <input
+    bind:this={input}
+    type="file"
+    class="sr-only"
+    tabindex="-1"
+    aria-hidden="true"
+    {name}
+    {accept}
+    {multiple}
+    {required}
+    {disabled}
+    onchange={picked}
+  />
+  {#if files.length > 0}
+    <ul class="mt-2 flex flex-col gap-2">
+      {#each files as entry, index (entry)}
+        <li class="flex items-center gap-3">
+          {#if fileRow}
+            {@render fileRow(entry, { remove: () => void remove(index) })}
+          {:else}
+            {@render row(entry, index)}
+          {/if}
+        </li>
+      {/each}
+    </ul>
+  {/if}
+  <FieldErrors errors={messages} id={errorsId} />
+  <p class="sr-only" aria-live="polite">{announcement}</p>
+</div>

package/dist/fields/Dropzone.svelte.d.ts

@@ -0,0 +1,103 @@
+import { type Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import { type FileRejection } from './file-validation.ts';
+interface Props extends Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'ondrop' | 'id'> {
+    /**
+     * The chosen files. Bindable.
+     * @defaultValue `[]`
+     */
+    files?: File[] | undefined;
+    /** The native `accept` syntax (`image/*`, `.pdf`, `application/json`); also enforced on drop. */
+    accept?: string | undefined;
+    /** Per-file size cap, in bytes. Omitted, there is no cap. */
+    maxBytes?: number | undefined;
+    /** Cap on the number of files; extra files are rejected with `tooManyMessage`. */
+    maxFiles?: number | undefined;
+    /**
+     * Allow more than one file. Off, a new choice replaces the current file.
+     * @defaultValue `true`
+     */
+    multiple?: boolean | undefined;
+    /** Posts the files under this name through the inner native input. */
+    name?: string | undefined;
+    /** Called after each pick or drop with the files accepted and the ones refused. */
+    onSelect?: ((accepted: readonly File[], rejected: readonly FileRejection[]) => void) | undefined;
+    /**
+     * Show a thumbnail for image files.
+     * @defaultValue `true`
+     */
+    previews?: boolean | undefined;
+    /**
+     * Text in front of the choose button.
+     * @defaultValue `'Drop files here or'`
+     */
+    promptLabel?: string | undefined;
+    /**
+     * The choose button's text.
+     * @defaultValue `'Choose files'`
+     */
+    chooseLabel?: string | undefined;
+    /**
+     * Accessible name of a file's remove button.
+     * @defaultValue `(file) => \`Remove ${file.name}\``
+     */
+    removeLabel?: ((file: File) => string) | undefined;
+    /**
+     * Shown for a file over `maxBytes`.
+     * @defaultValue `(file) => \`${file.name} is too large.\``
+     */
+    tooLargeMessage?: ((file: File) => string) | undefined;
+    /**
+     * Shown for a file `accept` refuses.
+     * @defaultValue `(file) => \`${file.name} is not an accepted file type.\``
+     */
+    wrongTypeMessage?: ((file: File) => string) | undefined;
+    /**
+     * Shown once when a selection would pass `maxFiles`.
+     * @defaultValue `(max) => \`Choose at most ${max} files.\``
+     */
+    tooManyMessage?: ((max: number) => string) | undefined;
+    /**
+     * Live-region text after a selection or drop.
+     * @defaultValue `(count) => count === 1 ? '1 file selected' : \`${count} files selected\``
+     */
+    selectedMessage?: ((count: number) => string) | undefined;
+    /** BCP 47 locale(s) for the file sizes; falls back to the context's `locale()`. */
+    locales?: string | readonly string[] | undefined;
+    /** Replaces a file row's body, e.g. to add upload progress the caller tracks. */
+    file?: Snippet<[File, {
+        remove: () => void;
+    }]> | undefined;
+    /**
+     * Disables the button, the drop target and the remove buttons.
+     * @defaultValue `false`
+     */
+    disabled?: boolean | undefined;
+    /** `FieldControl`: the choose button's `id`, which `FormField`'s label points at. Minted when omitted. */
+    id?: string | undefined;
+    /**
+     * `FieldControl`: the visible label's id. Not used — the choose button is
+     * labelable, so the `FormField`'s `<label for>` already names it; taken
+     * here so a spread `FieldControl` does not leak it as an attribute.
+     */
+    labelId?: string | undefined;
+    /**
+     * `FieldControl`: space-separated ids for the button's `aria-describedby`.
+     * @defaultValue `''`
+     */
+    describedBy?: string | undefined;
+    /**
+     * `FieldControl`: the field is in error — draws the error border (the message reaches the button through `describedBy`).
+     * @defaultValue `false`
+     */
+    invalid?: boolean | undefined;
+    /**
+     * `FieldControl`: at least one file is required (on the native input).
+     * @defaultValue `false`
+     */
+    required?: boolean | undefined;
+}
+/** Choose one or many files by dropping them on a target or through a "Choose files" button, with a removable file list and explained rejections; never uploads. */
+declare const Dropzone: import("svelte").Component<Props, {}, "files">;
+type Dropzone = ReturnType<typeof Dropzone>;
+export default Dropzone;

package/dist/fields/FieldErrors.svelte

@@ -0,0 +1,30 @@
+<!-- @component
+The validation messages under one control: one `<p>` per message inside a single container.
+-->
+<!--
+  FieldErrors — the validation messages under one control: one `<p>` per
+  message inside a single container.
+
+  ARIA contract: the container is the live region (`role="alert"`), not each
+  paragraph — a field that fails three rules should interrupt the reader once
+  and then read all three, which is what one region holding three paragraphs
+  does and what three regions do not. It carries the `id` a control points
+  `aria-describedby` at, so the messages are also read on demand when focus
+  reaches the control.
+
+  Nothing is rendered while `errors` is empty. That is deliberate: a live
+  region has to be IN the document before its content changes for the change
+  to be announced, and inserting a populated region announces it, so the
+  cheapest correct thing is to mount it only when there is something to say.
+-->
+<script lang="ts">let { errors, id, class: className, ...rest } = $props();
+export {};
+</script>
+
+{#if errors.length > 0}
+  <div {...rest} {id} role="alert" class={className}>
+    {#each errors as message, index (index)}
+      <p class="fieldset-label text-error">{message}</p>
+    {/each}
+  </div>
+{/if}

package/dist/fields/FieldErrors.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { HTMLAttributes } from 'svelte/elements';
+interface Props extends HTMLAttributes<HTMLDivElement> {
+    /** Messages to render, one paragraph each. */
+    errors: readonly string[];
+    /** The id a control's `aria-describedby` points at. */
+    id?: string | undefined;
+}
+/** The validation messages under one control: one `<p>` per message inside a single container. */
+declare const FieldErrors: import("svelte").Component<Props, {}, "">;
+type FieldErrors = ReturnType<typeof FieldErrors>;
+export default FieldErrors;

package/dist/fields/Fieldset.svelte

@@ -0,0 +1,53 @@
+<!-- @component
+The `FormField` frame — legend, hint, errors — for a group of controls rather than one.
+-->
+<!--
+  Fieldset — the same frame as `FormField`, for a GROUP of controls rather
+  than one.
+
+  A group of related checkboxes or radios is a `<fieldset>` with a `<legend>`,
+  not a label pointing at one input: there is no single control for a `for`
+  attribute to name, and the legend is what assistive technology repeats as it
+  moves between the members. So the hint and the errors hang off the
+  `<fieldset>` itself through `aria-describedby`. There is no `aria-invalid`:
+  the implicit `group` role does not support it, so the invalid state is a
+  `data-invalid` hook for styling and the error region is what announces it.
+
+  The `children` snippet receives a `FieldsetControl`, the `<legend>`'s id as
+  `labelId`, for a role-based control inside the group to point
+  `aria-labelledby` at.
+
+  `CheckboxGroup` is built on this. `RadioGroup` is not — bits-ui's radio
+  group renders its own `role="radiogroup"` element, and a role inside a
+  `<fieldset>` would be named by nothing, so it names itself from a heading it
+  renders instead. That is the one place the two frames diverge.
+-->
+<script lang="ts">import FieldErrors from "./FieldErrors.svelte";
+let { legend, hint, errors = [], required = false, requiredLabel = "(required)", children, class: className, ...rest } = $props();
+const uid = $props.id();
+const labelId = `${uid}-legend`;
+const hintId = `${uid}-hint`;
+const errorId = `${uid}-error`;
+const invalid = $derived(errors.length > 0);
+const describedBy = $derived([hint === undefined ? "" : hintId, invalid ? errorId : ""].filter((part) => part !== "").join(" "));
+</script>
+
+<fieldset
+  {...rest}
+  aria-describedby={describedBy === '' ? undefined : describedBy}
+  data-invalid={invalid ? '' : undefined}
+  class={['fieldset', className]}
+>
+  <legend class="fieldset-legend" id={labelId}>
+    {legend}
+    {#if required}
+      <span class="text-error" aria-hidden="true">*</span>
+      <span class="sr-only">{requiredLabel}</span>
+    {/if}
+  </legend>
+  {@render children({ labelId })}
+  {#if hint !== undefined}
+    <p class="fieldset-label" id={hintId}>{hint}</p>
+  {/if}
+  <FieldErrors {errors} id={errorId} />
+</fieldset>

package/dist/fields/Fieldset.svelte.d.ts

@@ -0,0 +1,27 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { FieldsetControl } from './field-types.ts';
+interface Props extends Omit<HTMLAttributes<HTMLFieldSetElement>, 'children'> {
+    /** The group's `<legend>`; names every control inside it. */
+    legend: string;
+    /** Guidance rendered under the legend. */
+    hint?: string | undefined;
+    /**
+     * Validation messages; any at all marks the group invalid.
+     * @defaultValue `[]`
+     */
+    errors?: readonly string[] | undefined;
+    /** Marks the group required and reads `requiredLabel` after the legend. */
+    required?: boolean | undefined;
+    /**
+     * Read out after the legend when `required`.
+     * @defaultValue `'(required)'`
+     */
+    requiredLabel?: string | undefined;
+    /** The grouped controls; receives the legend's id as `labelId`. */
+    children: Snippet<[FieldsetControl]>;
+}
+/** The `FormField` frame — legend, hint, errors — for a group of controls rather than one. */
+declare const Fieldset: import("svelte").Component<Props, {}, "">;
+type Fieldset = ReturnType<typeof Fieldset>;
+export default Fieldset;

package/dist/fields/FileInput.svelte

@@ -0,0 +1,68 @@
+<!-- @component
+A native file input in daisyUI `file-input` styling, with the chosen `File` bindable and a client-side size cap.
+-->
+<!--
+  FileInput — a native `<input type="file">` in daisyUI `file-input` styling,
+  with the chosen `File` exposed as a bindable prop and a client-side size cap.
+
+  It does NOT upload anything. The transfer belongs to the caller — a form
+  POST, a direct-to-storage PUT, a resumable client — and a component every
+  page imports has no business carrying one. `ImageInput` and `VideoInput`
+  build on this: the selection and the messaging are shared, the transfer is
+  not.
+
+  `maxBytes` is enforced here as well as on the server because a file rejected
+  after the transfer is a uniquely expensive way to say no. An over-size file
+  is cleared from the control rather than left sitting in it, so what the
+  control shows and what `file` holds cannot disagree.
+
+  ARIA contract: a native file input. `aria-invalid` is set when the field is
+  invalid OR the chosen file was too large, and the too-large message is an
+  `alert` region the input's `aria-describedby` also points at, so the reason
+  is announced and is available again on focus.
+-->
+<script lang="ts">import FieldErrors from "./FieldErrors.svelte";
+import { fileInputSize } from "./field-types.js";
+import { exceedsSize } from "./file-validation.js";
+let { file = $bindable(), accept, maxBytes, tooLargeMessage = "That file is too large.", onSelect, size = "md", invalid = false, describedBy = "", labelId: _labelId, class: className, ...rest } = $props();
+const uid = $props.id();
+const tooLargeId = `${uid}-too-large`;
+let tooLarge = $state(false);
+const described = $derived([describedBy, tooLarge ? tooLargeId : ""].filter((part) => part !== "").join(" "));
+const choose = (control) => {
+	const chosen = control.files?.[0];
+	tooLarge = false;
+	if (chosen === undefined) {
+		file = undefined;
+		onSelect?.(undefined);
+		return;
+	}
+	if (exceedsSize(chosen, maxBytes)) {
+		tooLarge = true;
+		// Clear the control too: leaving the name of a file that was refused
+		// showing in the field is how someone submits and wonders what happened.
+		control.value = "";
+		file = undefined;
+		onSelect?.(undefined);
+		return;
+	}
+	file = chosen;
+	onSelect?.(chosen);
+};
+</script>
+
+<input
+  {...rest}
+  type="file"
+  {accept}
+  onchange={(event) => choose(event.currentTarget)}
+  aria-invalid={invalid || tooLarge ? 'true' : undefined}
+  aria-describedby={described === '' ? undefined : described}
+  class={[
+    'file-input w-full',
+    fileInputSize[size],
+    (invalid || tooLarge) && 'file-input-error',
+    className,
+  ]}
+/>
+<FieldErrors errors={tooLarge ? [tooLargeMessage] : []} id={tooLargeId} />

package/dist/fields/FileInput.svelte.d.ts

@@ -0,0 +1,39 @@
+import type { HTMLInputAttributes } from 'svelte/elements';
+import { type FieldSize } from './field-types.ts';
+interface Props extends Omit<HTMLInputAttributes, 'type' | 'value' | 'files' | 'size'> {
+    /** The chosen file; `undefined` when the control is empty. */
+    file?: File | undefined;
+    /** `accept` attribute value. */
+    accept?: string | undefined;
+    /** Largest file to accept, in bytes. Omitted, there is no cap. */
+    maxBytes?: number | undefined;
+    /**
+     * Shown when the chosen file exceeds `maxBytes`.
+     * @defaultValue `'That file is too large.'`
+     */
+    tooLargeMessage?: string | undefined;
+    /** Called with the accepted file, or `undefined` when the choice cleared it. */
+    onSelect?: ((file: File | undefined) => void) | undefined;
+    /**
+     * daisyUI size step.
+     * @defaultValue `'md'`
+     */
+    size?: FieldSize | undefined;
+    /** `FieldControl`: the field is in error — sets `aria-invalid` and the error style. */
+    invalid?: boolean | undefined;
+    /**
+     * `FieldControl`: space-separated ids for `aria-describedby`.
+     * @defaultValue `''`
+     */
+    describedBy?: string | undefined;
+    /**
+     * `FieldControl`: the visible label's id. Not used — this control is
+     * labelable, so the `FormField`'s `<label for>` already names it; taken
+     * here so a spread `FieldControl` does not leak it as an attribute.
+     */
+    labelId?: string | undefined;
+}
+/** A native file input in daisyUI `file-input` styling, with the chosen `File` bindable and a client-side size cap. */
+declare const FileInput: import("svelte").Component<Props, {}, "file">;
+type FileInput = ReturnType<typeof FileInput>;
+export default FileInput;