@thomasfosterau/components 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,29 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { FieldControl } from './field-types.ts';
+interface Props extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    /** The control's `id`. Minted when omitted. */
+    id?: string | undefined;
+    /** Visible label; becomes the control's accessible name. */
+    label: string;
+    /** Guidance rendered under the control. */
+    hint?: string | undefined;
+    /**
+     * Validation messages; any at all marks the control invalid.
+     * @defaultValue `[]`
+     */
+    errors?: readonly string[] | undefined;
+    /** Marks the control required and reads `requiredLabel` after the label. */
+    required?: boolean | undefined;
+    /**
+     * Read out after the label when `required`.
+     * @defaultValue `'(required)'`
+     */
+    requiredLabel?: string | undefined;
+    /** The control; receives the `FieldControl` props to spread. */
+    children: Snippet<[FieldControl]>;
+}
+/** The label, hint and errors frame around one control, handing it the `FieldControl` wiring. */
+declare const FormField: import("svelte").Component<Props, {}, "">;
+type FormField = ReturnType<typeof FormField>;
+export default FormField;

package/dist/fields/ImageInput.svelte

@@ -0,0 +1,87 @@
+<!-- @component
+A `FileInput` that also measures the chosen image and previews it.
+-->
+<!--
+  ImageInput — a `FileInput` that also measures the picture and previews it.
+
+  It exists for one thing a server cannot do cheaply: read a file's INTRINSIC
+  DIMENSIONS. `createImageBitmap` (via `media/image-dimensions.ts`) decodes it in the browser the moment it is
+  chosen, so the form has `width` / `height` to submit alongside the binary and
+  the page that later renders the image can reserve its box on first paint
+  instead of reflowing when it loads.
+
+  The preview is an object URL, so the file never leaves the browser until the
+  form is submitted. The URL is revoked as soon as it is replaced and again on
+  teardown — an un-revoked object URL pins the whole file in memory for the
+  life of the document.
+
+  A decode failure means the browser could not read the file as an image; the
+  server's own media-type gate will refuse it too, so the dimensions are left
+  unset rather than blocking the submission.
+
+  ARIA contract: `FileInput`'s. The preview `<img>` is named by `previewAlt`,
+  and the measured size is a `<figcaption>` rather than an `aria-label`,
+  because it is information about the file that a sighted reader gets too.
+-->
+<script lang="ts">import { imageDimensions } from "../media/image-dimensions.js";
+import FileInput from "./FileInput.svelte";
+let { file = $bindable(), width = $bindable(), height = $bindable(), previewAlt = "Preview of the selected image", accept = "image/jpeg,image/png,image/gif,image/webp,image/avif", name, class: className, ...rest } = $props();
+let previewUrl = $state();
+let measuring = $state(false);
+// Revoke the PREVIOUS url whenever this one changes, and the last one when
+// the component goes away. Reading `previewUrl` inside the effect is what
+// makes the cleanup run on every change rather than only on teardown.
+$effect(() => {
+	const url = previewUrl;
+	return () => {
+		if (url !== undefined) URL.revokeObjectURL(url);
+	};
+});
+const measure = async (chosen) => {
+	measuring = true;
+	try {
+		({width, height} = await imageDimensions(chosen));
+	} catch {
+		width = undefined;
+		height = undefined;
+	} finally {
+		measuring = false;
+	}
+};
+const select = (chosen) => {
+	if (chosen === undefined) {
+		previewUrl = undefined;
+		width = undefined;
+		height = undefined;
+		return;
+	}
+	previewUrl = URL.createObjectURL(chosen);
+	void measure(chosen);
+};
+</script>
+
+<div class={['flex flex-col gap-2', className]}>
+  <FileInput {...rest} {name} {accept} bind:file onSelect={select} />
+
+  {#if previewUrl !== undefined}
+    <figure>
+      <!-- The caller's own file, not a served image, so a plain `<img>`. -->
+      <img src={previewUrl} alt={previewAlt} class="rounded-box border-base-300 max-h-64 border" />
+      <figcaption class="fieldset-label mt-1">
+        {#if measuring}
+          &nbsp;
+        {:else if width !== undefined && height !== undefined}
+          {width} × {height}
+        {/if}
+      </figcaption>
+    </figure>
+  {/if}
+
+  <!-- The measured dimensions ride the same multipart body as the binary. -->
+  {#if name !== undefined && width !== undefined}
+    <input type="hidden" name="width" value={width} />
+  {/if}
+  {#if name !== undefined && height !== undefined}
+    <input type="hidden" name="height" value={height} />
+  {/if}
+</div>

package/dist/fields/ImageInput.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. */
+    file?: File | undefined;
+    /** Measured intrinsic width, in pixels. */
+    width?: number | undefined;
+    /** Measured intrinsic height, in pixels. */
+    height?: number | undefined;
+    /**
+     * Alternative text for the local preview.
+     * @defaultValue `'Preview of the selected image'`
+     */
+    previewAlt?: string | undefined;
+    /**
+     * The `accept` filter passed to the file input.
+     * @defaultValue `'image/jpeg,image/png,image/gif,image/webp,image/avif'`
+     */
+    accept?: string | undefined;
+    /** Largest accepted file, in bytes; a larger file is rejected with `tooLargeMessage`. */
+    maxBytes?: number | undefined;
+    /**
+     * Shown when the chosen file exceeds `maxBytes`.
+     * @defaultValue `'That file is too large.'` (from `FileInput`)
+     */
+    tooLargeMessage?: string | undefined;
+    /** Called with the accepted file, or `undefined` when the selection is cleared. */
+    onSelect?: ((file: File | undefined) => void) | undefined;
+    /** daisyUI size step. */
+    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`. */
+    describedBy?: string | undefined;
+}
+/** A `FileInput` that also measures the chosen image and previews it. */
+declare const ImageInput: import("svelte").Component<Props, {}, "height" | "width" | "file">;
+type ImageInput = ReturnType<typeof ImageInput>;
+export default ImageInput;

package/dist/fields/PushToggle.svelte

@@ -0,0 +1,93 @@
+<!-- @component
+A `Toggle` that subscribes this browser to Web Push, or unsubscribes it, through the caller’s `enable` / `disable`.
+-->
+<!--
+  PushToggle — the browser half of Web Push behind one `Toggle`: it reads
+  whether THIS browser is subscribed, and turns the subscription on or off
+  through the caller's `enable` / `disable`.
+
+  The switch reflects this browser's registration, not the account's
+  preference — two different questions, and a settings page asks both.
+  `enable` / `disable` are props rather than imports because the network calls
+  (subscribing with the VAPID key, registering the endpoint with the app's
+  API) belong to the app's own client; injecting them keeps this package free
+  of it.
+
+  Every failure of `enable` is a different thing to tell the reader — the
+  browser cannot, the site cannot, or they said no — so `enable` RESOLVES with
+  an outcome instead of throwing, and each reason renders its own message.
+  The switch writes back what actually happened (see `Toggle`), so a denied
+  permission never reads as "on".
+
+  The subscription state is read on mount, from the browser, rather than
+  trusted from a prop: the page may be cached, and the reader may have revoked
+  the permission in browser settings since it rendered. `supported` and
+  `readSubscribed` default to the real browser checks and exist so a caller
+  (or a test) can supply its own.
+
+  ARIA contract: `Toggle`'s — a native checkbox with `role="switch"`, named by
+  `label`. The notice under it is a polite live region, so a refusal is
+  announced when it appears.
+-->
+<script lang="ts">import Toggle from "./Toggle.svelte";
+let { available, enable, disable, supported = typeof navigator !== "undefined" && "serviceWorker" in navigator && "PushManager" in globalThis, readSubscribed = async () => {
+	const registration = await navigator.serviceWorker.ready;
+	return await registration.pushManager.getSubscription() !== null;
+}, label = "Send push notifications to this browser", description, unavailableMessage = "Push notifications aren't available on this site yet.", unsupportedMessage = "This browser can't receive push notifications.", deniedMessage = "This browser is blocking notifications. Allow them in your browser settings to turn this on.", class: className } = $props();
+let subscribed = $state(false);
+let notice = $state(undefined);
+// Aborted on unmount, so a request in flight when the reader navigates away
+// is cancelled rather than resolving into a destroyed component.
+const controller = new AbortController();
+$effect(() => () => controller.abort());
+$effect(() => {
+	if (!available) return;
+	if (!supported) {
+		notice = "unsupported";
+		return;
+	}
+	void readSubscribed(controller.signal).then((value) => {
+		subscribed = value;
+	}, () => {
+		// Unreadable is reported as off; the switch still works.
+	});
+});
+const apply = async (next) => {
+	notice = undefined;
+	if (!next) {
+		await disable(controller.signal);
+		return false;
+	}
+	const result = await enable(controller.signal);
+	if (result._tag === "enabled") return true;
+	notice = result._tag;
+	return false;
+};
+const messages = $derived({
+	unsupported: unsupportedMessage,
+	unavailable: unavailableMessage,
+	denied: deniedMessage
+});
+const noticeTone = {
+	unsupported: "text-base-content/70",
+	unavailable: "text-base-content/70",
+	denied: "text-warning"
+};
+</script>
+
+{#if !available}
+  <p class={['text-base-content/70 text-sm', className]}>{unavailableMessage}</p>
+{:else}
+  <div class={['flex flex-col gap-2', className]}>
+    <Toggle
+      {label}
+      {description}
+      checked={subscribed}
+      disabled={!supported}
+      onChange={apply}
+    />
+    <p class={['text-sm', notice === undefined ? '' : noticeTone[notice]]} aria-live="polite">
+      {notice === undefined ? '' : messages[notice]}
+    </p>
+  </div>
+{/if}

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

@@ -0,0 +1,55 @@
+/** Why `enable` did not subscribe this browser. */
+export type PushDeclineReason = 'unsupported' | 'unavailable' | 'denied';
+/**
+ * What `enable` resolves with: it worked, or why not. The `_tag` shape
+ * matches a tagged-union result an Effect client already returns.
+ */
+export interface PushEnableResult {
+    readonly _tag: 'enabled' | PushDeclineReason;
+}
+interface Props {
+    /** False when the site has no push configuration (no VAPID key pair): the switch is not offered. */
+    available: boolean;
+    /** Subscribe this browser and register it. Resolves with the outcome rather than throwing. */
+    enable: (signal: AbortSignal) => Promise<PushEnableResult>;
+    /** Unsubscribe this browser. Its resolved value is ignored. */
+    disable: (signal: AbortSignal) => Promise<unknown>;
+    /**
+     * Whether this browser can do Web Push at all.
+     * @defaultValue feature detection (`serviceWorker` and `PushManager`)
+     */
+    supported?: boolean | undefined;
+    /**
+     * Whether this browser is subscribed now.
+     * @defaultValue asks the service worker's `PushManager`
+     */
+    readSubscribed?: ((signal: AbortSignal) => Promise<boolean>) | undefined;
+    /**
+     * Text beside the switch; its accessible name.
+     * @defaultValue `'Send push notifications to this browser'`
+     */
+    label?: string | undefined;
+    /** A sentence under the switch. */
+    description?: string | undefined;
+    /**
+     * Shown instead of the switch when `available` is false.
+     * @defaultValue `"Push notifications aren't available on this site yet."`
+     */
+    unavailableMessage?: string | undefined;
+    /**
+     * Shown instead of the switch when the browser cannot do Web Push.
+     * @defaultValue `"This browser can't receive push notifications."`
+     */
+    unsupportedMessage?: string | undefined;
+    /**
+     * Shown when the browser’s notification permission is denied.
+     * @defaultValue `'This browser is blocking notifications. Allow them in your browser settings to turn this on.'`
+     */
+    deniedMessage?: string | undefined;
+    /** Extra classes, merged last. */
+    class?: string | undefined;
+}
+/** A `Toggle` that subscribes this browser to Web Push, or unsubscribes it, through the caller’s `enable` / `disable`. */
+declare const PushToggle: import("svelte").Component<Props, {}, "">;
+type PushToggle = ReturnType<typeof PushToggle>;
+export default PushToggle;

package/dist/fields/RadioGroup.svelte

@@ -0,0 +1,85 @@
+<!-- @component
+One choice from a short, known list, on bits-ui’s `RadioGroup`.
+-->
+<!--
+  RadioGroup — one choice from a short, known list, on bits-ui's `RadioGroup`.
+
+  bits-ui owns what is genuinely hard here: the roving tabindex (the group is
+  ONE tab stop, and the arrow keys move within it), wrap-around, and the
+  `aria-checked` bookkeeping. Hand-rolled radio groups get the tab stop wrong
+  almost every time.
+
+  ARIA contract: bits-ui renders `role="radiogroup"` around `role="radio"`
+  buttons, and this adds `aria-orientation` beside the `data-orientation`
+  bits-ui sets, so the arrow keys a reader is told to use match the ones that
+  work. A `role` element cannot be named by a `<legend>` — the legend names
+  the `<fieldset>`, which is a different node — so the group renders its
+  question as a heading-ish `<span>` and points `aria-labelledby` at it. That
+  is why this is the one field group NOT built on `Fieldset`, and the hint and
+  errors hang off the radiogroup element itself through `aria-describedby`.
+
+  The marker is drawn rather than delegated to daisyUI's `.radio`, because
+  that class styles an `<input type="radio">` through `:checked` and bits-ui's
+  radio is a `<button>`. It is two spans of semantic tokens; `checked` comes
+  from bits-ui's own snippet prop, so the visual and the accessibility tree
+  cannot disagree.
+-->
+<script lang="ts">import { RadioGroup } from "bits-ui";
+import FieldErrors from "./FieldErrors.svelte";
+import { toFieldOptions } from "./field-types.js";
+let { legend, options, value = $bindable(""), orientation = "vertical", name, hint, errors = [], required = false, requiredLabel = "(required)", disabled = false, class: className, ...rest } = $props();
+const uid = $props.id();
+const legendId = `${uid}-legend`;
+const hintId = `${uid}-hint`;
+const errorId = `${uid}-error`;
+const entries = $derived(toFieldOptions(options));
+const invalid = $derived(errors.length > 0);
+const describedBy = $derived([hint === undefined ? "" : hintId, invalid ? errorId : ""].filter((part) => part !== "").join(" "));
+</script>
+
+<div {...rest} class={['fieldset', className]}>
+  <span id={legendId} class="fieldset-legend">
+    {legend}
+    {#if required}
+      <span class="text-error" aria-hidden="true">*</span>
+      <span class="sr-only">{requiredLabel}</span>
+    {/if}
+  </span>
+  <RadioGroup.Root
+    bind:value
+    {orientation}
+    {...name === undefined ? {} : { name }}
+    {required}
+    {disabled}
+    aria-labelledby={legendId}
+    aria-orientation={orientation}
+    aria-describedby={describedBy === '' ? undefined : describedBy}
+    aria-invalid={invalid ? 'true' : undefined}
+    class={['flex gap-3', orientation === 'horizontal' ? 'flex-row flex-wrap' : 'flex-col']}
+  >
+    {#each entries as option (option.value)}
+      <RadioGroup.Item
+        value={option.value}
+        disabled={option.disabled === true}
+        class="rounded-field focus-visible:outline-primary flex cursor-pointer items-center gap-3 text-left focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
+      >
+        {#snippet children({ checked })}
+          <span
+            aria-hidden="true"
+            class={[
+              'grid size-4 shrink-0 place-items-center rounded-full border-2',
+              checked ? 'border-primary' : 'border-base-content/40',
+            ]}
+          >
+            {#if checked}<span class="bg-primary size-2 rounded-full"></span>{/if}
+          </span>
+          <span>{option.label}</span>
+        {/snippet}
+      </RadioGroup.Item>
+    {/each}
+  </RadioGroup.Root>
+  {#if hint !== undefined}
+    <p class="fieldset-label" id={hintId}>{hint}</p>
+  {/if}
+  <FieldErrors {errors} id={errorId} />
+</div>

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

@@ -0,0 +1,41 @@
+import { RadioGroup } from 'bits-ui';
+import type { HTMLAttributes } from 'svelte/elements';
+import { type FieldOptionInput } from './field-types.ts';
+interface Props extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    /** The question the options answer; names the group. */
+    legend: string;
+    /** Full options, or bare strings when value and label are the same. */
+    options: readonly FieldOptionInput[];
+    /**
+     * The chosen value; empty string when nothing is chosen.
+     * @defaultValue `''`
+     */
+    value?: string | undefined;
+    /**
+     * Lay the options out in a column or a row.
+     * @defaultValue `'vertical'`
+     */
+    orientation?: 'vertical' | 'horizontal' | undefined;
+    /** Posted field name — bits-ui renders the hidden input when it is set. */
+    name?: string | undefined;
+    /** 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;
+    /** Disables every option. */
+    disabled?: boolean | undefined;
+}
+/** One choice from a short, known list, on bits-ui’s `RadioGroup`. */
+declare const RadioGroup: import("svelte").Component<Props, {}, "value">;
+type RadioGroup = ReturnType<typeof RadioGroup>;
+export default RadioGroup;

package/dist/fields/SearchInput.svelte

@@ -0,0 +1,57 @@
+<!-- @component
+A `type="search"` field with a leading icon, a clear button while there is text, and a spinner while `pending`. `name` defaults to `'q'` and `placeholder` to `'Search'`.
+-->
+<!--
+  SearchInput — a `type="search"` field in daisyUI's composite `input`
+  wrapper, with a leading icon, a clear button while there is text, and a
+  spinner while `pending`.
+
+  The wrapper is a `<div>`, not a `<label>`: the clear button lives inside it,
+  and a button inside a label is both mis-named (the label's text becomes part
+  of ITS name) and label-activated (clicking it also focuses the field). The
+  visible label is optional — `label` always supplies the accessible name.
+
+  ARIA contract: the leading magnifier is `aria-hidden`, because the field's
+  own name already says what it is; the clear button is a real button with a
+  visually-hidden name rather than a bare glyph; the spinner is `aria-hidden`,
+  because a busy state must not change the field's accessible name.
+
+  `onInput` fires on every keystroke (feed it to whatever debounce the app
+  uses) and `onSubmit` on Enter.
+-->
+<script lang="ts">import { Search, X } from "@lucide/svelte";
+import { inputSize } from "./field-types.js";
+let { label, value = $bindable(""), onInput, onSubmit, onClear, pending = false, clearLabel = "Clear search", size = "md", name = "q", placeholder = "Search", class: className, ...rest } = $props();
+const clear = () => {
+	value = "";
+	onInput?.("");
+	onClear?.();
+};
+</script>
+
+<div class={['input w-full', inputSize[size], className]}>
+  <Search class="size-4 opacity-60" aria-hidden="true" />
+  <input
+    {...rest}
+    type="search"
+    {name}
+    {placeholder}
+    aria-label={label}
+    bind:value
+    oninput={() => onInput?.(value)}
+    onkeydown={(event) => {
+      if (event.key === 'Enter') {
+        event.preventDefault();
+        onSubmit?.(value);
+      }
+    }}
+  />
+  {#if pending}
+    <span class="loading loading-spinner loading-xs" aria-hidden="true"></span>
+  {:else if value !== ''}
+    <button type="button" class="btn btn-ghost btn-xs btn-circle" onclick={clear}>
+      <X class="size-3.5" aria-hidden="true" />
+      <span class="sr-only">{clearLabel}</span>
+    </button>
+  {/if}
+</div>

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

@@ -0,0 +1,33 @@
+import type { HTMLInputAttributes } from 'svelte/elements';
+import { type FieldSize } from './field-types.ts';
+interface Props extends Omit<HTMLInputAttributes, 'type' | 'value' | 'size'> {
+    /** Accessible name of the field. */
+    label: string;
+    /**
+     * The query. Bindable.
+     * @defaultValue `''`
+     */
+    value?: string | undefined;
+    /** Fires on every change with the current text. */
+    onInput?: ((query: string) => void) | undefined;
+    /** Fires on Enter with the current text. */
+    onSubmit?: ((query: string) => void) | undefined;
+    /** Fires after the clear button empties the field. */
+    onClear?: (() => void) | undefined;
+    /** A search is in flight. */
+    pending?: boolean | undefined;
+    /**
+     * Accessible name of the clear button.
+     * @defaultValue `'Clear search'`
+     */
+    clearLabel?: string | undefined;
+    /**
+     * daisyUI size step.
+     * @defaultValue `'md'`
+     */
+    size?: FieldSize | undefined;
+}
+/** A `type="search"` field with a leading icon, a clear button while there is text, and a spinner while `pending`. `name` defaults to `'q'` and `placeholder` to `'Search'`. */
+declare const SearchInput: import("svelte").Component<Props, {}, "value">;
+type SearchInput = ReturnType<typeof SearchInput>;
+export default SearchInput;

package/dist/fields/Select.svelte

@@ -0,0 +1,36 @@
+<!-- @component
+A native `<select>` in daisyUI styling over a list of options, with an optional placeholder and `FieldControl` wiring.
+-->
+<!--
+  Select — a native `<select>` in daisyUI `select` styling over a list of
+  options, with a bindable `value`, an optional placeholder option (disabled,
+  selected while `value` is empty) and the `FieldControl` wiring.
+
+  Native, not bits-ui, and deliberately: a native select is keyboard-complete
+  and typeahead-complete without a line of script, and on a phone it opens the
+  platform picker. The rich alternative is `Combobox`, which exists for the
+  case a select genuinely cannot serve — a list too long to scroll, or one
+  that has to be fetched.
+
+  ARIA contract: the platform's. `describedBy` and `invalid` are the only
+  attributes added.
+-->
+<script lang="ts">import { selectSize, toFieldOptions } from "./field-types.js";
+let { options, value = $bindable(""), placeholder, size = "md", invalid = false, describedBy = "", class: className, ...rest } = $props();
+const entries = $derived(toFieldOptions(options));
+</script>
+
+<select
+  {...rest}
+  bind:value
+  aria-invalid={invalid ? 'true' : undefined}
+  aria-describedby={describedBy === '' ? undefined : describedBy}
+  class={['select w-full', selectSize[size], invalid && 'select-error', className]}
+>
+  {#if placeholder !== undefined}
+    <option value="" disabled>{placeholder}</option>
+  {/if}
+  {#each entries as option (option.value)}
+    <option value={option.value} disabled={option.disabled === true}>{option.label}</option>
+  {/each}
+</select>

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

@@ -0,0 +1,29 @@
+import type { HTMLSelectAttributes } from 'svelte/elements';
+import { type FieldOptionInput, type FieldSize } from './field-types.ts';
+interface Props extends Omit<HTMLSelectAttributes, 'value' | 'size'> {
+    /** Full options, or bare strings when value and label are the same. */
+    options: readonly FieldOptionInput[];
+    /**
+     * The selected option’s value; `''` selects the placeholder. Bindable.
+     * @defaultValue `''`
+     */
+    value?: string | undefined;
+    /** Disabled first option, shown while nothing is selected. */
+    placeholder?: string | 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;
+}
+/** A native `<select>` in daisyUI styling over a list of options, with an optional placeholder and `FieldControl` wiring. */
+declare const Select: import("svelte").Component<Props, {}, "value">;
+type Select = ReturnType<typeof Select>;
+export default Select;

package/dist/fields/TextInput.svelte

@@ -0,0 +1,26 @@
+<!-- @component
+A daisyUI `input` over a native `<input>`, with a bindable `value` and `FieldControl` wiring.
+-->
+<!--
+  TextInput — daisyUI `input` over a native `<input>`, with a bindable `value`
+  and the `FieldControl` wiring (`describedBy` → `aria-describedby`, `invalid`
+  → `aria-invalid` + `input-error`).
+
+  ARIA contract: a native input, so the role, the keyboard and the validation
+  semantics are the platform's. The component adds only the two attributes
+  that tie it back to its `FormField`; everything else — `name`, `autocomplete`,
+  `maxlength`, `pattern`, `data-*` — passes straight through, because a
+  control that swallows those cannot be submitted, tested or hooked into.
+-->
+<script lang="ts">import { inputSize } from "./field-types.js";
+let { value = $bindable(""), type = "text", size = "md", invalid = false, describedBy = "", class: className, ...rest } = $props();
+</script>
+
+<input
+  {...rest}
+  {type}
+  bind:value
+  aria-invalid={invalid ? 'true' : undefined}
+  aria-describedby={describedBy === '' ? undefined : describedBy}
+  class={['input w-full', inputSize[size], invalid && 'input-error', className]}
+/>

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

@@ -0,0 +1,30 @@
+import type { HTMLInputAttributes } from 'svelte/elements';
+import { type FieldSize } from './field-types.ts';
+interface Props extends Omit<HTMLInputAttributes, 'type' | 'value' | 'size'> {
+    /**
+     * The text. Bindable.
+     * @defaultValue `''`
+     */
+    value?: string | undefined;
+    /**
+     * The text-ish `type`s. Dates have `DateInput`, files have `FileInput`.
+     * @defaultValue `'text'`
+     */
+    type?: 'text' | 'email' | 'url' | 'password' | 'tel' | 'number' | 'search' | 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;
+    /**
+     * Ids for `aria-describedby`; empty means none.
+     * @defaultValue `''`
+     */
+    describedBy?: string | undefined;
+}
+/** A daisyUI `input` over a native `<input>`, with a bindable `value` and `FieldControl` wiring. */
+declare const TextInput: import("svelte").Component<Props, {}, "value">;
+type TextInput = ReturnType<typeof TextInput>;
+export default TextInput;