@privaty/ui-forms 0.1.0

package/dist/inputs/date-input.svelte

@@ -0,0 +1,132 @@
+<!-- @component
+Date-family input (date, datetime-local, month, time, week) wired to a
+SvelteKit remote form field — must render inside a <Form>, whose context it
+registers with. Values are ISO-style strings in the chosen type's format.
+Shows resolver-translated validation errors once the form state reveals them,
+plus a majority-aware required/optional marker, and turns readonly while the
+form submits.
+-->
+<script lang="ts">
+  import { cn } from "@privaty/ui/cn.js";
+  import Input from "@privaty/ui/components/input.svelte";
+  import type { LabelStyle } from "@privaty/ui/components/types.js";
+  import type { HTMLInputAttributes } from "svelte/elements";
+  import type { DateField, DateFieldType } from "../types/field";
+  import { wireField } from "./wire-field";
+
+  interface Props {
+    /** The SvelteKit remote form field to bind. Structural — anything
+     * satisfying the DateField slice works, e.g. a fake from the public
+     * testing subpath. */
+    field: DateField;
+    /** Visible label text for the control. */
+    label: string;
+    /** Which date-family input to render: "date" (default),
+     * "datetime-local", "month", "time", or "week". */
+    type?: DateFieldType;
+
+    /** Label placement: "top" (default), "left", or "hidden". No floating:
+     * date-family inputs render their format scaffold even when empty, so
+     * :placeholder-shown never behaves. */
+    labelStyle?: Exclude<LabelStyle, "floating">;
+
+    /** Marks the field required: feeds the majority-aware required/optional
+     * marker (required markers styled red) — forms where at least half the
+     * fields are required mark the optional ones instead. Validation itself
+     * comes from the field's schema, not this flag, and it is not forwarded
+     * as a native `required` attribute. */
+    required?: boolean;
+    /** Disables the control. Disabled controls are excluded from FormData —
+     * never disable to lock the form during submit; the input already turns
+     * readonly while submitting. */
+    disabled?: boolean;
+    /** Renders the input readonly. Also forced on while the form is
+     * submitting, independent of this prop. */
+    readonly?: boolean;
+
+    /** ISO-style string in the chosen type's format (e.g. "2026-08" for
+     * month, "2026-08-18" for date). */
+    initialValue?: string;
+
+    /** Native lower bound, in the same format as the value. */
+    min?: string;
+    /** Native upper bound, in the same format as the value. */
+    max?: string;
+
+    /** Passed through to the native autocomplete attribute (e.g. "bday"). */
+    autocomplete?: HTMLInputAttributes["autocomplete"];
+
+    /** Extra classes for the outer field wrapper. */
+    class?: string;
+    /** Extra classes for the <label> element. */
+    labelClass?: string;
+    /** Extra classes for the <input> element. */
+    inputClass?: string;
+    /** Extra classes for the required/optional marker. */
+    markerClass?: string;
+    /** Extra classes for the error <ul>. */
+    errorClass?: string;
+  }
+
+  const {
+    field,
+    label,
+    type = "date",
+
+    labelStyle,
+
+    required = false,
+    disabled = false,
+    readonly = false,
+
+    initialValue = "",
+
+    min,
+    max,
+
+    autocomplete,
+
+    class: classes,
+    labelClass,
+    inputClass,
+    markerClass,
+    errorClass,
+  }: Props = $props();
+
+  const attributes = $derived(field.as(type, initialValue));
+
+  // The field, type, and initialValue are stable for the component's lifetime,
+  // so capturing the initial name and registration is intentional.
+  // svelte-ignore state_referenced_locally
+  const name = attributes.name;
+
+  // svelte-ignore state_referenced_locally
+  const wired = wireField({
+    name,
+    initialValue,
+    required,
+    issues: () => field.issues(),
+    getValue: () => field.value(),
+    setValue: (value) => field.set(value as string),
+    normalize: (value) => (value == null ? "" : String(value)),
+  });
+</script>
+
+<Input
+  {...attributes}
+  {label}
+  {labelStyle}
+  errors={wired.errors}
+  marker={wired.marker}
+  aria-invalid={wired.errors.length > 0 ? true : undefined}
+  {disabled}
+  readonly={readonly || wired.state.isSubmitting}
+  {min}
+  {max}
+  {autocomplete}
+  class={classes}
+  {labelClass}
+  {inputClass}
+  markerClass={cn(required && "text-red-700 dark:text-red-500", markerClass)}
+  {errorClass}
+/>

package/dist/inputs/date-input.svelte.d.ts

@@ -0,0 +1,61 @@
+import type { LabelStyle } from "@privaty/ui/components/types.js";
+import type { HTMLInputAttributes } from "svelte/elements";
+import type { DateField, DateFieldType } from "../types/field";
+interface Props {
+    /** The SvelteKit remote form field to bind. Structural — anything
+     * satisfying the DateField slice works, e.g. a fake from the public
+     * testing subpath. */
+    field: DateField;
+    /** Visible label text for the control. */
+    label: string;
+    /** Which date-family input to render: "date" (default),
+     * "datetime-local", "month", "time", or "week". */
+    type?: DateFieldType;
+    /** Label placement: "top" (default), "left", or "hidden". No floating:
+     * date-family inputs render their format scaffold even when empty, so
+     * :placeholder-shown never behaves. */
+    labelStyle?: Exclude<LabelStyle, "floating">;
+    /** Marks the field required: feeds the majority-aware required/optional
+     * marker (required markers styled red) — forms where at least half the
+     * fields are required mark the optional ones instead. Validation itself
+     * comes from the field's schema, not this flag, and it is not forwarded
+     * as a native `required` attribute. */
+    required?: boolean;
+    /** Disables the control. Disabled controls are excluded from FormData —
+     * never disable to lock the form during submit; the input already turns
+     * readonly while submitting. */
+    disabled?: boolean;
+    /** Renders the input readonly. Also forced on while the form is
+     * submitting, independent of this prop. */
+    readonly?: boolean;
+    /** ISO-style string in the chosen type's format (e.g. "2026-08" for
+     * month, "2026-08-18" for date). */
+    initialValue?: string;
+    /** Native lower bound, in the same format as the value. */
+    min?: string;
+    /** Native upper bound, in the same format as the value. */
+    max?: string;
+    /** Passed through to the native autocomplete attribute (e.g. "bday"). */
+    autocomplete?: HTMLInputAttributes["autocomplete"];
+    /** Extra classes for the outer field wrapper. */
+    class?: string;
+    /** Extra classes for the <label> element. */
+    labelClass?: string;
+    /** Extra classes for the <input> element. */
+    inputClass?: string;
+    /** Extra classes for the required/optional marker. */
+    markerClass?: string;
+    /** Extra classes for the error <ul>. */
+    errorClass?: string;
+}
+/**
+ * Date-family input (date, datetime-local, month, time, week) wired to a
+ * SvelteKit remote form field — must render inside a <Form>, whose context it
+ * registers with. Values are ISO-style strings in the chosen type's format.
+ * Shows resolver-translated validation errors once the form state reveals them,
+ * plus a majority-aware required/optional marker, and turns readonly while the
+ * form submits.
+ */
+declare const DateInput: import("svelte").Component<Props, {}, "">;
+type DateInput = ReturnType<typeof DateInput>;
+export default DateInput;

package/dist/inputs/number-input.svelte

@@ -0,0 +1,141 @@
+<!-- @component
+Number input wired to a SvelteKit remote form number field — must render
+inside a <Form>, whose context it registers with. Shows resolver-translated
+validation errors once the form state reveals them, plus a majority-aware
+required/optional marker, and turns readonly while the form submits.
+Mid-edit the field holds the raw DOM string — Kit only coerces to number at
+submit/reset — and a cleared input counts as unset.
+-->
+<script lang="ts">
+  import { cn } from "@privaty/ui/cn.js";
+  import Input from "@privaty/ui/components/input.svelte";
+  import type { LabelStyle } from "@privaty/ui/components/types.js";
+  import type { NumberField } from "../types/field";
+  import { wireField } from "./wire-field";
+
+  interface Props {
+    /** The SvelteKit remote form field to bind. Structural — anything
+     * satisfying the NumberField slice works, e.g. a fake from the public
+     * testing subpath. */
+    field: NumberField;
+    /** Visible label text. In the floating label style it doubles as the
+     * placeholder. */
+    label: string;
+
+    /** Label placement: "top" (default), "left", "floating", or "hidden"
+     * (visually hidden, still read by screen readers). */
+    labelStyle?: LabelStyle;
+
+    /** Marks the field required: feeds the majority-aware required/optional
+     * marker (required markers styled red) — forms where at least half the
+     * fields are required mark the optional ones instead. Validation itself
+     * comes from the field's schema, not this flag, and it is not forwarded
+     * as a native `required` attribute. */
+    required?: boolean;
+    /** Disables the control. Disabled controls are excluded from FormData —
+     * never disable to lock the form during submit; the input already turns
+     * readonly while submitting. */
+    disabled?: boolean;
+    /** Renders the input readonly. Also forced on while the form is
+     * submitting, independent of this prop. */
+    readonly?: boolean;
+
+    /** Seed handed to Kit's `as()` — the value native form reset restores
+     * and the baseline for dirty tracking (a cleared input compares as
+     * unset). Omitted means unseeded. Assumed stable for the component's
+     * lifetime. */
+    initialValue?: number;
+
+    /** Native `min` constraint, forwarded to the input. */
+    min?: number;
+    /** Native `max` constraint, forwarded to the input. */
+    max?: number;
+    /** Native `step` granularity, forwarded to the input — "any" permits any
+     * decimal. */
+    step?: number | "any";
+
+    /** Placeholder text — ignored in the floating label style, where the
+     * label plays that role. */
+    placeholder?: string;
+
+    /** Extra classes for the outer field wrapper. */
+    class?: string;
+    /** Extra classes for the <label> element. */
+    labelClass?: string;
+    /** Extra classes for the <input> element. */
+    inputClass?: string;
+    /** Extra classes for the required/optional marker. */
+    markerClass?: string;
+    /** Extra classes for the error <ul>. */
+    errorClass?: string;
+  }
+
+  const {
+    field,
+    label,
+
+    labelStyle,
+
+    required = false,
+    disabled = false,
+    readonly = false,
+
+    initialValue,
+
+    min,
+    max,
+    step,
+
+    placeholder,
+
+    class: classes,
+    labelClass,
+    inputClass,
+    markerClass,
+    errorClass,
+  }: Props = $props();
+
+  const attributes = $derived(
+    initialValue === undefined
+      ? field.as("number")
+      : field.as("number", initialValue),
+  );
+
+  // The field and initialValue are stable for the component's lifetime, so
+  // capturing the initial name and registration is intentional.
+  // svelte-ignore state_referenced_locally
+  const name = attributes.name;
+
+  // svelte-ignore state_referenced_locally
+  const wired = wireField({
+    name,
+    initialValue,
+    required,
+    issues: () => field.issues(),
+    getValue: () => field.value(),
+    setValue: (value) => field.set(value as number),
+    // Kit stores the raw DOM string mid-edit; "" (cleared) means unset.
+    normalize: (value) =>
+      value === "" || value == null ? undefined : Number(value),
+  });
+</script>
+
+<Input
+  {...attributes}
+  {label}
+  {labelStyle}
+  errors={wired.errors}
+  marker={wired.marker}
+  aria-invalid={wired.errors.length > 0 ? true : undefined}
+  {disabled}
+  readonly={readonly || wired.state.isSubmitting}
+  {min}
+  {max}
+  {step}
+  {placeholder}
+  class={classes}
+  {labelClass}
+  {inputClass}
+  markerClass={cn(required && "text-red-700 dark:text-red-500", markerClass)}
+  {errorClass}
+/>

package/dist/inputs/number-input.svelte.d.ts

@@ -0,0 +1,63 @@
+import type { LabelStyle } from "@privaty/ui/components/types.js";
+import type { NumberField } from "../types/field";
+interface Props {
+    /** The SvelteKit remote form field to bind. Structural — anything
+     * satisfying the NumberField slice works, e.g. a fake from the public
+     * testing subpath. */
+    field: NumberField;
+    /** Visible label text. In the floating label style it doubles as the
+     * placeholder. */
+    label: string;
+    /** Label placement: "top" (default), "left", "floating", or "hidden"
+     * (visually hidden, still read by screen readers). */
+    labelStyle?: LabelStyle;
+    /** Marks the field required: feeds the majority-aware required/optional
+     * marker (required markers styled red) — forms where at least half the
+     * fields are required mark the optional ones instead. Validation itself
+     * comes from the field's schema, not this flag, and it is not forwarded
+     * as a native `required` attribute. */
+    required?: boolean;
+    /** Disables the control. Disabled controls are excluded from FormData —
+     * never disable to lock the form during submit; the input already turns
+     * readonly while submitting. */
+    disabled?: boolean;
+    /** Renders the input readonly. Also forced on while the form is
+     * submitting, independent of this prop. */
+    readonly?: boolean;
+    /** Seed handed to Kit's `as()` — the value native form reset restores
+     * and the baseline for dirty tracking (a cleared input compares as
+     * unset). Omitted means unseeded. Assumed stable for the component's
+     * lifetime. */
+    initialValue?: number;
+    /** Native `min` constraint, forwarded to the input. */
+    min?: number;
+    /** Native `max` constraint, forwarded to the input. */
+    max?: number;
+    /** Native `step` granularity, forwarded to the input — "any" permits any
+     * decimal. */
+    step?: number | "any";
+    /** Placeholder text — ignored in the floating label style, where the
+     * label plays that role. */
+    placeholder?: string;
+    /** Extra classes for the outer field wrapper. */
+    class?: string;
+    /** Extra classes for the <label> element. */
+    labelClass?: string;
+    /** Extra classes for the <input> element. */
+    inputClass?: string;
+    /** Extra classes for the required/optional marker. */
+    markerClass?: string;
+    /** Extra classes for the error <ul>. */
+    errorClass?: string;
+}
+/**
+ * Number input wired to a SvelteKit remote form number field — must render
+ * inside a <Form>, whose context it registers with. Shows resolver-translated
+ * validation errors once the form state reveals them, plus a majority-aware
+ * required/optional marker, and turns readonly while the form submits.
+ * Mid-edit the field holds the raw DOM string — Kit only coerces to number at
+ * submit/reset — and a cleared input counts as unset.
+ */
+declare const NumberInput: import("svelte").Component<Props, {}, "">;
+type NumberInput = ReturnType<typeof NumberInput>;
+export default NumberInput;

package/dist/inputs/select-input.svelte

@@ -0,0 +1,156 @@
+<!-- @component
+Select wired to a SvelteKit remote form field — must render inside a <Form>,
+whose context it registers with. Shows resolver-translated validation errors
+once the form state reveals them, plus a majority-aware required/optional
+marker. While submitting it locks interaction with CSS and key swallowing
+instead of disabling — a disabled select is excluded from FormData.
+-->
+<script lang="ts">
+  import { cn } from "@privaty/ui/cn.js";
+  import Select from "@privaty/ui/components/select.svelte";
+  import type {
+    LabelStyle,
+    SelectOption,
+  } from "@privaty/ui/components/types.js";
+  import type { SelectField } from "../types/field";
+  import { wireField } from "./wire-field";
+
+  interface Props {
+    /** The SvelteKit remote form field to bind. Structural — anything
+     * satisfying the SelectField slice works, e.g. a fake from the public
+     * testing subpath. */
+    field: SelectField;
+    /** Visible label text for the control. */
+    label: string;
+
+    /** Options to render, in order. A plain string is shorthand for
+     * `{ value: s, label: s }`; values must be unique — they key the
+     * rendered list. */
+    options: readonly (string | SelectOption)[];
+    /** Rendered as a disabled empty option, shown until a value is chosen.
+     * Its presence also makes "" the default seed for an unseeded field. */
+    placeholder?: string;
+
+    /** Label placement: "top" (default), "left", or "hidden" — floating is
+     * not offered for selects. */
+    labelStyle?: Exclude<LabelStyle, "floating">;
+
+    /** Marks the field required: feeds the majority-aware required/optional
+     * marker (required markers styled red) — forms where at least half the
+     * fields are required mark the optional ones instead. Validation itself
+     * comes from the field's schema, not this flag, and it is not forwarded
+     * as a native `required` attribute. */
+    required?: boolean;
+    /**
+     * Selects have no native readonly, so submitting locks interaction with
+     * CSS instead. NEVER disable while submitting: disabled controls are
+     * excluded from FormData, and Kit validates live form data mid-submission
+     * — a disabled select vanishes from it and fails its own validation.
+     */
+    disabled?: boolean;
+
+    /** Seeds the field and marks the matching option `selected`, so native
+     * reset restores it. Omitted with a placeholder present, the field is
+     * seeded with "" and the placeholder is the initial state. */
+    initialValue?: string;
+
+    /** Extra classes for the outer field wrapper. */
+    class?: string;
+    /** Extra classes for the <label> element. */
+    labelClass?: string;
+    /** Extra classes for the <select> element. */
+    selectClass?: string;
+    /** Extra classes for the required/optional marker. */
+    markerClass?: string;
+    /** Extra classes for the error <ul>. */
+    errorClass?: string;
+  }
+
+  const {
+    field,
+    label,
+
+    options,
+    placeholder,
+
+    labelStyle,
+
+    required = false,
+    disabled = false,
+
+    initialValue,
+
+    class: classes,
+    labelClass,
+    selectClass,
+    markerClass,
+    errorClass,
+  }: Props = $props();
+
+  // With a placeholder, the natural empty state is the placeholder option —
+  // so an unseeded field is seeded with "". Without the seed, browsers select
+  // the first enabled option (skipping the disabled placeholder) while the
+  // field state stays unset, so the submission would carry no value at all.
+  // svelte-ignore state_referenced_locally
+  const seed = initialValue ?? (placeholder !== undefined ? "" : undefined);
+
+  const attributes = $derived(
+    seed === undefined ? field.as("select") : field.as("select", seed),
+  );
+
+  // The field and seed are stable for the component's lifetime, so capturing
+  // the initial name and registration is intentional.
+  // svelte-ignore state_referenced_locally
+  const name = attributes.name;
+
+  // svelte-ignore state_referenced_locally
+  const wired = wireField({
+    name,
+    initialValue: seed,
+    required,
+    issues: () => field.issues(),
+    getValue: () => field.value(),
+    setValue: (value) => field.set(value as never),
+    normalize: (value) => (value == null ? "" : String(value)),
+  });
+
+  // pointer-events-none blocks the mouse while submitting but not the
+  // keyboard — swallow value-changing keys too (Tab stays free).
+  function lockKeysWhileSubmitting(event: KeyboardEvent) {
+    if (!wired.state.isSubmitting) return;
+    if (
+      [
+        "ArrowUp",
+        "ArrowDown",
+        "ArrowLeft",
+        "ArrowRight",
+        " ",
+        "Enter",
+      ].includes(event.key)
+    ) {
+      event.preventDefault();
+    }
+  }
+</script>
+
+<Select
+  {...attributes}
+  {label}
+  {labelStyle}
+  {options}
+  {placeholder}
+  errors={wired.errors}
+  marker={wired.marker}
+  aria-invalid={wired.errors.length > 0 ? true : undefined}
+  defaultValue={seed}
+  onkeydown={lockKeysWhileSubmitting}
+  {disabled}
+  class={classes}
+  {labelClass}
+  selectClass={cn(
+    wired.state.isSubmitting && "pointer-events-none",
+    selectClass,
+  )}
+  markerClass={cn(required && "text-red-700 dark:text-red-500", markerClass)}
+  {errorClass}
+/>

package/dist/inputs/select-input.svelte.d.ts

@@ -0,0 +1,57 @@
+import type { LabelStyle, SelectOption } from "@privaty/ui/components/types.js";
+import type { SelectField } from "../types/field";
+interface Props {
+    /** The SvelteKit remote form field to bind. Structural — anything
+     * satisfying the SelectField slice works, e.g. a fake from the public
+     * testing subpath. */
+    field: SelectField;
+    /** Visible label text for the control. */
+    label: string;
+    /** Options to render, in order. A plain string is shorthand for
+     * `{ value: s, label: s }`; values must be unique — they key the
+     * rendered list. */
+    options: readonly (string | SelectOption)[];
+    /** Rendered as a disabled empty option, shown until a value is chosen.
+     * Its presence also makes "" the default seed for an unseeded field. */
+    placeholder?: string;
+    /** Label placement: "top" (default), "left", or "hidden" — floating is
+     * not offered for selects. */
+    labelStyle?: Exclude<LabelStyle, "floating">;
+    /** Marks the field required: feeds the majority-aware required/optional
+     * marker (required markers styled red) — forms where at least half the
+     * fields are required mark the optional ones instead. Validation itself
+     * comes from the field's schema, not this flag, and it is not forwarded
+     * as a native `required` attribute. */
+    required?: boolean;
+    /**
+     * Selects have no native readonly, so submitting locks interaction with
+     * CSS instead. NEVER disable while submitting: disabled controls are
+     * excluded from FormData, and Kit validates live form data mid-submission
+     * — a disabled select vanishes from it and fails its own validation.
+     */
+    disabled?: boolean;
+    /** Seeds the field and marks the matching option `selected`, so native
+     * reset restores it. Omitted with a placeholder present, the field is
+     * seeded with "" and the placeholder is the initial state. */
+    initialValue?: string;
+    /** Extra classes for the outer field wrapper. */
+    class?: string;
+    /** Extra classes for the <label> element. */
+    labelClass?: string;
+    /** Extra classes for the <select> element. */
+    selectClass?: string;
+    /** Extra classes for the required/optional marker. */
+    markerClass?: string;
+    /** Extra classes for the error <ul>. */
+    errorClass?: string;
+}
+/**
+ * Select wired to a SvelteKit remote form field — must render inside a <Form>,
+ * whose context it registers with. Shows resolver-translated validation errors
+ * once the form state reveals them, plus a majority-aware required/optional
+ * marker. While submitting it locks interaction with CSS and key swallowing
+ * instead of disabling — a disabled select is excluded from FormData.
+ */
+declare const SelectInput: import("svelte").Component<Props, {}, "">;
+type SelectInput = ReturnType<typeof SelectInput>;
+export default SelectInput;