@mitcsutt/kiln-ui 0.1.0

package/dist/components/inputs/DateRangeField/DateRangeField.d.ts

@@ -0,0 +1,37 @@
+import { type FocusEventHandler, type HTMLAttributes } from 'react';
+import type { Size } from '../../../utils/tokens.js';
+import { type FieldLabelProps } from '../Field/index.js';
+/** Two ISO dates (`YYYY-MM-DD`); `''` for an unset end. */
+export interface DateRangeValue {
+    start: string;
+    end: string;
+}
+export interface DateRangeFieldProps extends FieldLabelProps, Omit<HTMLAttributes<HTMLFieldSetElement>, 'onChange' | 'defaultValue' | 'onBlur' | keyof FieldLabelProps> {
+    value?: DateRangeValue;
+    defaultValue?: DateRangeValue;
+    onValueChange?: (value: DateRangeValue) => void;
+    /** Earliest date either end may take (`YYYY-MM-DD`). */
+    min?: string;
+    /** Latest date either end may take (`YYYY-MM-DD`). */
+    max?: string;
+    /** Label of the first input. Default `'Start date'`. */
+    startLabel?: string;
+    /** Label of the second input. Default `'End date'`. */
+    endLabel?: string;
+    /** Submits `${name}.start` and `${name}.end`. */
+    name?: string;
+    disabled?: boolean;
+    readOnly?: boolean;
+    /** Fires when focus leaves both inputs (not when it moves from start to end). */
+    onBlur?: FocusEventHandler;
+    size?: Size;
+}
+/**
+ * A date range as two native date inputs under one legend, side by side and wrapping
+ * when narrow. The start can't pass the end and the end can't come before the start
+ * (each input's `min`/`max` follows the other). `id` goes to the start input; the ref to
+ * the fieldset.
+ *
+ * <DateRangeField label="Trip dates" value={dates} onValueChange={setDates} />
+ */
+export declare const DateRangeField: import("react").ForwardRefExoticComponent<DateRangeFieldProps & import("react").RefAttributes<HTMLFieldSetElement>>;

package/dist/components/inputs/DateRangeField/DateRangeField.js

@@ -0,0 +1,87 @@
+import { cx as e } from "../../../utils/cx.js";
+import { hasError as t } from "../internal/errors.js";
+import { Field as n } from "../Field/Field.js";
+import { Input as r } from "../Input/Input.js";
+import { Fieldset as i } from "../Fieldset/Fieldset.js";
+import { splitFieldLabelProps as a } from "../internal/fieldProps.js";
+import o from "./DateRangeField.module.js";
+import { forwardRef as s, useState as c } from "react";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+//#region src/components/inputs/DateRangeField/DateRangeField.tsx
+var d = {
+	start: "",
+	end: ""
+}, f = s(function(s, f) {
+	let [p, m] = a(s), { label: h, labelHidden: g, hint: _, description: v, readOnly: y = !1, ...b } = p, { value: x, defaultValue: S, onValueChange: C, min: w, max: T, startLabel: E = "Start date", endLabel: D = "End date", name: O, disabled: k = !1, onBlur: A, size: j, id: M, className: N, ...P } = m, [F, I] = c(S ?? d), L = x ?? F, R = (e, t) => {
+		if (y) return;
+		let n = {
+			...L,
+			[e]: t
+		};
+		x === void 0 && I(n), C?.(n);
+	}, z = (e) => {
+		e.relatedTarget instanceof Node && e.currentTarget.contains(e.relatedTarget) || A?.(e);
+	}, B = t(b.error) || void 0, V = b.required, H = b.validating ? !0 : void 0;
+	return /* @__PURE__ */ l(i, {
+		ref: f,
+		...P,
+		...b,
+		legend: h,
+		legendHidden: g,
+		description: v ?? _,
+		disabled: k,
+		readOnly: y,
+		className: e(o.root, N),
+		onBlur: z,
+		children: /* @__PURE__ */ u("div", {
+			className: o.parts,
+			children: [/* @__PURE__ */ l(n, {
+				label: E,
+				htmlFor: M,
+				className: o.part,
+				error: B,
+				errorHidden: !0,
+				disabled: k,
+				readOnly: y,
+				children: /* @__PURE__ */ l(r, {
+					id: M,
+					type: "date",
+					size: j,
+					name: O == null ? void 0 : `${O}.start`,
+					value: L.start,
+					min: w,
+					max: L.end || T,
+					required: V,
+					"aria-busy": H,
+					onChange: (e) => {
+						R("start", e.target.value);
+					}
+				})
+			}), /* @__PURE__ */ l(n, {
+				label: D,
+				className: o.part,
+				error: B,
+				errorHidden: !0,
+				disabled: k,
+				readOnly: y,
+				children: /* @__PURE__ */ l(r, {
+					type: "date",
+					size: j,
+					name: O == null ? void 0 : `${O}.end`,
+					value: L.end,
+					min: L.start || w,
+					max: T,
+					required: V,
+					"aria-busy": H,
+					onChange: (e) => {
+						R("end", e.target.value);
+					}
+				})
+			})]
+		})
+	});
+});
+//#endregion
+export { f as DateRangeField };
+
+//# sourceMappingURL=DateRangeField.js.map

package/dist/components/inputs/DateRangeField/DateRangeField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateRangeField.js","names":["styles","DateRangeField_module_default","EMPTY","DateRangeField","forwardRef","fieldProps","rest","splitFieldLabelProps","props","fieldsetProps","valueProp","restProps","internal","setInternal","useState","defaultValue","value","update","readOnly","nextValue","part","next","onValueChange","handleBlur","event","onBlur","invalid","hasError","required","busy","Fieldset","label","labelHidden","description","hint","cx","className","Field","startLabel","id","Input","name","max","endLabel","min"],"sources":["../../../../src/components/inputs/DateRangeField/DateRangeField.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useState,\n  type FocusEvent,\n  type FocusEventHandler,\n  type HTMLAttributes,\n} from 'react'\nimport { cx } from '#utils/cx'\nimport type { Size } from '#utils/tokens'\nimport { Field, type FieldLabelProps } from '#components/inputs/Field'\nimport { Fieldset } from '#components/inputs/Fieldset'\nimport { Input } from '#components/inputs/Input'\nimport { splitFieldLabelProps } from '#components/inputs/internal/fieldProps'\nimport { hasError } from '#components/inputs/internal/errors'\nimport styles from './DateRangeField.module.css'\n\n/** Two ISO dates (`YYYY-MM-DD`); `''` for an unset end. */\nexport interface DateRangeValue {\n  start: string\n  end: string\n}\n\nexport interface DateRangeFieldProps\n  extends\n    FieldLabelProps,\n    Omit<\n      HTMLAttributes<HTMLFieldSetElement>,\n      'onChange' | 'defaultValue' | 'onBlur' | keyof FieldLabelProps\n    > {\n  value?: DateRangeValue\n  defaultValue?: DateRangeValue\n  onValueChange?: (value: DateRangeValue) => void\n  /** Earliest date either end may take (`YYYY-MM-DD`). */\n  min?: string\n  /** Latest date either end may take (`YYYY-MM-DD`). */\n  max?: string\n  /** Label of the first input. Default `'Start date'`. */\n  startLabel?: string\n  /** Label of the second input. Default `'End date'`. */\n  endLabel?: string\n  /** Submits `${name}.start` and `${name}.end`. */\n  name?: string\n  disabled?: boolean\n  readOnly?: boolean\n  /** Fires when focus leaves both inputs (not when it moves from start to end). */\n  onBlur?: FocusEventHandler\n  size?: Size\n}\n\nconst EMPTY: DateRangeValue = { start: '', end: '' }\n\n/**\n * A date range as two native date inputs under one legend, side by side and wrapping\n * when narrow. The start can't pass the end and the end can't come before the start\n * (each input's `min`/`max` follows the other). `id` goes to the start input; the ref to\n * the fieldset.\n *\n * <DateRangeField label=\"Trip dates\" value={dates} onValueChange={setDates} />\n */\nexport const DateRangeField = forwardRef<HTMLFieldSetElement, DateRangeFieldProps>(\n  function DateRangeField(props, ref) {\n    const [fieldProps, rest] = splitFieldLabelProps(props)\n    // `layout` goes to the Fieldset (legend column for `horizontal`); the two inputs always\n    // sit side by side.\n    const { label, labelHidden, hint, description, readOnly = false, ...fieldsetProps } = fieldProps\n    const {\n      value: valueProp,\n      defaultValue,\n      onValueChange,\n      min,\n      max,\n      startLabel = 'Start date',\n      endLabel = 'End date',\n      name,\n      disabled = false,\n      onBlur,\n      size,\n      id,\n      className,\n      ...restProps\n    } = rest\n\n    const [internal, setInternal] = useState<DateRangeValue>(defaultValue ?? EMPTY)\n    const value = valueProp ?? internal\n\n    const update = (part: keyof DateRangeValue, next: string) => {\n      if (readOnly) return\n      const nextValue = { ...value, [part]: next }\n      if (valueProp === undefined) setInternal(nextValue)\n      onValueChange?.(nextValue)\n    }\n\n    const handleBlur = (event: FocusEvent<HTMLFieldSetElement>) => {\n      if (event.relatedTarget instanceof Node && event.currentTarget.contains(event.relatedTarget))\n        return\n      onBlur?.(event)\n    }\n\n    const invalid = hasError(fieldsetProps.error) || undefined\n    const required = fieldsetProps.required\n    const busy = fieldsetProps.validating ? true : undefined\n\n    return (\n      <Fieldset\n        ref={ref}\n        {...restProps}\n        {...fieldsetProps}\n        legend={label}\n        legendHidden={labelHidden}\n        description={description ?? hint}\n        disabled={disabled}\n        readOnly={readOnly}\n        className={cx(styles.root, className)}\n        onBlur={handleBlur}\n      >\n        <div className={styles.parts}>\n          <Field\n            label={startLabel}\n            htmlFor={id}\n            className={styles.part}\n            error={invalid}\n            errorHidden\n            disabled={disabled}\n            readOnly={readOnly}\n          >\n            <Input\n              id={id}\n              type=\"date\"\n              size={size}\n              name={name != null ? `${name}.start` : undefined}\n              value={value.start}\n              min={min}\n              max={value.end || max}\n              required={required}\n              aria-busy={busy}\n              onChange={(event) => {\n                update('start', event.target.value)\n              }}\n            />\n          </Field>\n          <Field\n            label={endLabel}\n            className={styles.part}\n            error={invalid}\n            errorHidden\n            disabled={disabled}\n            readOnly={readOnly}\n          >\n            <Input\n              type=\"date\"\n              size={size}\n              name={name != null ? `${name}.end` : undefined}\n              value={value.end}\n              min={value.start || min}\n              max={max}\n              required={required}\n              aria-busy={busy}\n              onChange={(event) => {\n                update('end', event.target.value)\n              }}\n            />\n          </Field>\n        </div>\n      </Fieldset>\n    )\n  },\n)\n"],"mappings":";;;;;;;;;;AAiDA,IAAME,IAAwB;CAAE,OAAO;CAAI,KAAK;AAAG,GAUtCC,IAAiBC,EAC5B,SAAwB,GAAO,GAAK;CAClC,IAAM,CAACC,GAAYC,KAAQC,EAAqBC,CAAK,GAG/C,EAAE,UAAO,gBAAa,SAAM,gBAAa,cAAW,IAAO,GAAGC,MAAkBJ,GAChF,EACJ,OAAOK,GACP,iBACA,kBACA,QACA,QACA,gBAAa,cACb,cAAW,YACX,SACA,cAAW,IACX,WACA,SACA,OACA,cACA,GAAGC,MACDL,GAEE,CAACM,GAAUC,KAAeC,EAAyBC,KAAgBb,CAAK,GACxEc,IAAQN,KAAaE,GAErBK,KAAU,GAA4B,MAAiB;EAC3D,IAAIC,GAAU;EACd,IAAMC,IAAY;GAAE,GAAGH;IAAQI,IAAOC;EAAK;EAE3C,AADIX,MAAc,KAAA,KAAWG,EAAYM,CAAS,GAClDG,IAAgBH,CAAS;CAC3B,GAEMI,KAAc,MAA2C;EAC7D,AAAIC,EAAM,yBAAyB,QAAQA,EAAM,cAAc,SAASA,EAAM,aAAa,KAE3FC,IAASD,CAAK;CAChB,GAEME,IAAUC,EAASlB,EAAc,KAAK,KAAK,KAAA,GAC3CmB,IAAWnB,EAAc,UACzBoB,IAAOpB,EAAc,aAAa,KAAO,KAAA;CAE/C,OACE,kBAACqB,GAAD;EACO;EACL,GAAInB;EACJ,GAAIF;EACJ,QAAQsB;EACR,cAAcC;EACd,aAAaC,KAAeC;EAClB;EACA;EACV,WAAWC,EAAGnC,EAAO,MAAMoC,CAAS;EACpC,QAAQb;EAER,UAAA,kBAAC,OAAD;GAAK,WAAWvB,EAAO;GAAvB,UAAA,CACE,kBAACqC,GAAD;IACE,OAAOC;IACP,SAASC;IACT,WAAWvC,EAAO;IAClB,OAAO0B;IACP,aAAA;IACU;IACA;IAEV,UAAA,kBAACc,GAAD;KACM;KACJ,MAAK;KACC;KACN,MAAMC,KAAQ,OAAyB,KAAA,IAAlB,GAAGA,EAAK;KAC7B,OAAOzB,EAAM;KACR;KACL,KAAKA,EAAM,OAAO0B;KACR;KACV,aAAWb;KACX,WAAW,MAAU;MACnB,EAAO,SAASL,EAAM,OAAO,KAAK;KACpC;IACD,CAAA;GACI,CAAA,GACP,kBAACa,GAAD;IACE,OAAOM;IACP,WAAW3C,EAAO;IAClB,OAAO0B;IACP,aAAA;IACU;IACA;IAEV,UAAA,kBAACc,GAAD;KACE,MAAK;KACC;KACN,MAAMC,KAAQ,OAAuB,KAAA,IAAhB,GAAGA,EAAK;KAC7B,OAAOzB,EAAM;KACb,KAAKA,EAAM,SAAS4B;KACf;KACK;KACV,aAAWf;KACX,WAAW,MAAU;MACnB,EAAO,OAAOL,EAAM,OAAO,KAAK;KAClC;IACD,CAAA;GACI,CAAA,CACJ;;CACG,CAAA;AAEd,CACF"}

package/dist/components/inputs/DateRangeField/DateRangeField.module.js

@@ -0,0 +1,10 @@
+//#region src/components/inputs/DateRangeField/DateRangeField.module.css
+var e = "kiln-DateRangeField__root", t = "kiln-DateRangeField__parts", n = "kiln-DateRangeField__part", r = {
+	root: e,
+	parts: t,
+	part: n
+};
+//#endregion
+export { r as default, n as part, t as parts, e as root };
+
+//# sourceMappingURL=DateRangeField.module.js.map

package/dist/components/inputs/DateRangeField/DateRangeField.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateRangeField.module.js","names":["root","parts","part","DateRangeField_module_default"],"sources":["../../../../src/components/inputs/DateRangeField/DateRangeField.module.css"],"sourcesContent":["/*\n * Start and end side by side, each at least --space-11 wide, wrapping to a stack when the\n * column is narrower than both.\n */\n.root {\n  min-inline-size: 0;\n}\n\n.parts {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--space-3);\n}\n\n.part {\n  flex: 1 1 var(--space-11);\n  min-inline-size: 0;\n}\n"],"mappings":""}

package/dist/components/inputs/DateRangeField/index.d.ts

@@ -0,0 +1,2 @@
+export { DateRangeField } from './DateRangeField.js';
+export type { DateRangeFieldProps, DateRangeValue } from './DateRangeField.js';

package/dist/components/inputs/Field/Field.d.ts

@@ -0,0 +1,79 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+/** Props handed to a render-function child — spread them onto your control. */
+export interface FieldRenderProps {
+    id: string;
+    'aria-describedby'?: string;
+    'aria-invalid'?: true;
+    'aria-required'?: true;
+    /** The Field's `required`. Spreading it onto a native input also turns on browser validation. */
+    required: boolean;
+    disabled?: boolean;
+}
+/** `Field`'s (and `Fieldset`'s) `layout` values. */
+export type FieldLayout = 'stack' | 'horizontal' | 'inline';
+/** The label/description/error props every field shares (TextField, SelectField… extend these). */
+export interface FieldLabelProps {
+    /** Visible label. Keep it short; put guidance in `description`. */
+    label: ReactNode;
+    /** Help text under the label, linked to the control with `aria-describedby`. */
+    description?: ReactNode;
+    /** Alias of `description` (the legacy name). */
+    hint?: ReactNode;
+    /**
+     * Validation message. When present the control gets `aria-invalid` and its border (only)
+     * turns critical. Pass `true` to mark invalid without a message.
+     */
+    error?: ReactNode;
+    /** Shows a mark after the label and sets `aria-required` on the control. */
+    required?: boolean;
+    /** Shows "Optional" after the label (or your own word). Ignored when `required`. */
+    optional?: boolean | string;
+    /** Keep the label for assistive tech only — e.g. a search box beside a visible heading. */
+    labelHidden?: boolean;
+    /**
+     * Non-blocking advice ("Usernames are case-sensitive"). Shown under the control in a
+     * caution tone, never `role="alert"`. Hidden while an error message is shown.
+     */
+    warning?: ReactNode;
+    /**
+     * Whether the error message is `role="alert"` (announced as soon as it appears).
+     * Default `true`. Pass `false` once a form-level `ErrorSummary` owns the announcement
+     * — the message stays in `aria-describedby` either way.
+     */
+    errorLive?: boolean;
+    /**
+     * Keeps the invalid state (border, `aria-invalid`) but doesn't render the error text —
+     * for layouts that show the message elsewhere (a sentence, a table cell).
+     */
+    errorHidden?: boolean;
+    /** Shows a small spinner after the label and sets `aria-busy` on the control. */
+    validating?: boolean;
+    /** Focusable but not editable. Controls set native `readOnly`/`aria-readonly`. */
+    readOnly?: boolean;
+    /**
+     * `stack` (default) — label above the control.
+     * `horizontal` — label/description in one column, the control in another (collapses
+     * to a stack below `sm`).
+     * `inline` — the label is visually hidden and the control sits in text flow.
+     */
+    layout?: FieldLayout;
+}
+export interface FieldProps extends FieldLabelProps, Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    /** Id for the control. Defaults to the child's own `id`, then a generated one. */
+    htmlFor?: string;
+    /** Disables the control inside and dims the label. */
+    disabled?: boolean;
+    /**
+     * The control. Library controls pick the wiring up from context; any other single element
+     * gets `id` / `aria-*` cloned in; or pass a function and spread its props yourself.
+     */
+    children: ReactNode | ((props: FieldRenderProps) => ReactNode);
+}
+/**
+ * Wires a label, description and error to one control.
+ *
+ * <Field label="Amount" description="Include GST" error={errors.amount}>
+ *   <Input numeric leading="$" />
+ * </Field>
+ */
+export declare const Field: import("react").ForwardRefExoticComponent<FieldProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/inputs/Field/Field.js

@@ -0,0 +1,100 @@
+import { cx as e } from "../../../utils/cx.js";
+import { joinIds as t } from "../internal/refs.js";
+import { FieldContext as n, isFieldAware as r } from "../internal/FieldContext.js";
+import i from "../internal/messages.module.js";
+import { FieldDescription as a, FieldError as o, FieldWarning as s, LabelContent as c } from "../internal/messages.js";
+import { hasError as l, hasErrorMessage as u } from "../internal/errors.js";
+import d from "./Field.module.js";
+import { cloneElement as f, forwardRef as p, isValidElement as m, useId as h, useMemo as g } from "react";
+import { jsx as _, jsxs as v } from "react/jsx-runtime";
+//#region src/components/inputs/Field/Field.tsx
+var y = p(function({ label: p, description: y, hint: b, error: x, required: S = !1, optional: C, labelHidden: w = !1, warning: T, errorLive: E = !0, errorHidden: D = !1, validating: O = !1, readOnly: k = !1, layout: A = "stack", htmlFor: j, disabled: M = !1, className: N, children: P, ...F }, I) {
+	let L = h(), R = m(P) ? P.props : void 0, z = j ?? R?.id ?? `${L}control`, B = `${z}-label`, V = `${z}-description`, H = `${z}-warning`, U = `${z}-error`, W = y ?? b, G = l(x), K = u(x) && !D, q = T != null && !K, J = w || A === "inline", Y = t(W != null && V, q && H, K && U), X = g(() => ({
+		id: z,
+		labelId: B,
+		describedBy: Y,
+		invalid: G,
+		required: S,
+		disabled: M,
+		readOnly: k,
+		busy: O,
+		warningId: H
+	}), [
+		z,
+		B,
+		Y,
+		G,
+		S,
+		M,
+		k,
+		O,
+		H
+	]), Z;
+	return Z = typeof P == "function" ? P({
+		id: z,
+		"aria-describedby": Y,
+		"aria-invalid": G || void 0,
+		"aria-required": S || void 0,
+		required: S,
+		disabled: M || void 0
+	}) : m(P) && !r(P.type) ? f(P, {
+		id: z,
+		"aria-describedby": t(R?.["aria-describedby"], Y),
+		"aria-invalid": G ? !0 : R?.["aria-invalid"] === !1 ? void 0 : R?.["aria-invalid"],
+		"aria-required": S || void 0
+	}) : P, /* @__PURE__ */ v("div", {
+		ref: I,
+		className: e(d.field, N),
+		"data-invalid": G || void 0,
+		"data-disabled": M || void 0,
+		"data-readonly": k || void 0,
+		"data-label-hidden": J || void 0,
+		"data-layout": A,
+		...F,
+		children: [
+			/* @__PURE__ */ v("div", {
+				className: d.header,
+				children: [/* @__PURE__ */ _("label", {
+					id: B,
+					htmlFor: z,
+					className: e(i.label, J && i.visuallyHidden),
+					children: /* @__PURE__ */ _(c, {
+						required: S,
+						optional: C,
+						busy: O,
+						children: p
+					})
+				}), W == null ? null : /* @__PURE__ */ _(a, {
+					id: V,
+					children: W
+				})]
+			}),
+			/* @__PURE__ */ _("div", {
+				className: d.controlSlot,
+				children: /* @__PURE__ */ _(n.Provider, {
+					value: X,
+					children: Z
+				})
+			}),
+			q ? /* @__PURE__ */ _("div", {
+				className: d.warningSlot,
+				children: /* @__PURE__ */ _(s, {
+					id: H,
+					children: T
+				})
+			}) : null,
+			K ? /* @__PURE__ */ _("div", {
+				className: d.errorSlot,
+				children: /* @__PURE__ */ _(o, {
+					id: U,
+					live: E,
+					children: x
+				})
+			}) : null
+		]
+	});
+});
+//#endregion
+export { y as Field };
+
+//# sourceMappingURL=Field.js.map

package/dist/components/inputs/Field/Field.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Field.js","names":["styles","messageStyles","messages_module_default","Field_module_default","Field","forwardRef","rest","autoId","useId","childProps","isValidElement","children","id","htmlFor","labelId","descriptionId","warningId","errorId","help","description","hint","invalid","hasError","error","showErrorMessage","hasErrorMessage","errorHidden","showWarning","warning","effectiveLabelHidden","labelHidden","layout","describedBy","joinIds","context","useMemo","validating","required","disabled","readOnly","control","isFieldAware","cloneElement","cx","className","LabelContent","label","FieldDescription","FieldContext","FieldWarning","FieldError","errorLive"],"sources":["../../../../src/components/inputs/Field/Field.tsx"],"sourcesContent":["import {\n  cloneElement,\n  forwardRef,\n  isValidElement,\n  useId,\n  useMemo,\n  type HTMLAttributes,\n  type ReactElement,\n  type ReactNode,\n} from 'react'\nimport { cx } from '#utils/cx'\nimport {\n  FieldContext,\n  isFieldAware,\n  type FieldControlContext,\n} from '#components/inputs/internal/FieldContext'\nimport {\n  FieldDescription,\n  FieldError,\n  FieldWarning,\n  LabelContent,\n} from '#components/inputs/internal/messages'\nimport { hasError, hasErrorMessage } from '#components/inputs/internal/errors'\nimport messageStyles from '#components/inputs/internal/messages.module.css'\nimport { joinIds } from '#components/inputs/internal/refs'\nimport styles from './Field.module.css'\n\n/** Props handed to a render-function child — spread them onto your control. */\nexport interface FieldRenderProps {\n  id: string\n  'aria-describedby'?: string\n  'aria-invalid'?: true\n  'aria-required'?: true\n  /** The Field's `required`. Spreading it onto a native input also turns on browser validation. */\n  required: boolean\n  disabled?: boolean\n}\n\n/** `Field`'s (and `Fieldset`'s) `layout` values. */\nexport type FieldLayout = 'stack' | 'horizontal' | 'inline'\n\n/** The label/description/error props every field shares (TextField, SelectField… extend these). */\nexport interface FieldLabelProps {\n  /** Visible label. Keep it short; put guidance in `description`. */\n  label: ReactNode\n  /** Help text under the label, linked to the control with `aria-describedby`. */\n  description?: ReactNode\n  /** Alias of `description` (the legacy name). */\n  hint?: ReactNode\n  /**\n   * Validation message. When present the control gets `aria-invalid` and its border (only)\n   * turns critical. Pass `true` to mark invalid without a message.\n   */\n  error?: ReactNode\n  /** Shows a mark after the label and sets `aria-required` on the control. */\n  required?: boolean\n  /** Shows \"Optional\" after the label (or your own word). Ignored when `required`. */\n  optional?: boolean | string\n  /** Keep the label for assistive tech only — e.g. a search box beside a visible heading. */\n  labelHidden?: boolean\n  /**\n   * Non-blocking advice (\"Usernames are case-sensitive\"). Shown under the control in a\n   * caution tone, never `role=\"alert\"`. Hidden while an error message is shown.\n   */\n  warning?: ReactNode\n  /**\n   * Whether the error message is `role=\"alert\"` (announced as soon as it appears).\n   * Default `true`. Pass `false` once a form-level `ErrorSummary` owns the announcement\n   * — the message stays in `aria-describedby` either way.\n   */\n  errorLive?: boolean\n  /**\n   * Keeps the invalid state (border, `aria-invalid`) but doesn't render the error text —\n   * for layouts that show the message elsewhere (a sentence, a table cell).\n   */\n  errorHidden?: boolean\n  /** Shows a small spinner after the label and sets `aria-busy` on the control. */\n  validating?: boolean\n  /** Focusable but not editable. Controls set native `readOnly`/`aria-readonly`. */\n  readOnly?: boolean\n  /**\n   * `stack` (default) — label above the control.\n   * `horizontal` — label/description in one column, the control in another (collapses\n   * to a stack below `sm`).\n   * `inline` — the label is visually hidden and the control sits in text flow.\n   */\n  layout?: FieldLayout\n}\n\nexport interface FieldProps\n  extends FieldLabelProps, Omit<HTMLAttributes<HTMLDivElement>, 'children'> {\n  /** Id for the control. Defaults to the child's own `id`, then a generated one. */\n  htmlFor?: string\n  /** Disables the control inside and dims the label. */\n  disabled?: boolean\n  /**\n   * The control. Library controls pick the wiring up from context; any other single element\n   * gets `id` / `aria-*` cloned in; or pass a function and spread its props yourself.\n   */\n  children: ReactNode | ((props: FieldRenderProps) => ReactNode)\n}\n\ninterface ControlElementProps {\n  id?: string\n  'aria-describedby'?: string\n  'aria-invalid'?: unknown\n}\n\n/**\n * Wires a label, description and error to one control.\n *\n * <Field label=\"Amount\" description=\"Include GST\" error={errors.amount}>\n *   <Input numeric leading=\"$\" />\n * </Field>\n */\nexport const Field = forwardRef<HTMLDivElement, FieldProps>(function Field(\n  {\n    label,\n    description,\n    hint,\n    error,\n    required = false,\n    optional,\n    labelHidden = false,\n    warning,\n    errorLive = true,\n    errorHidden = false,\n    validating = false,\n    readOnly = false,\n    layout = 'stack',\n    htmlFor,\n    disabled = false,\n    className,\n    children,\n    ...rest\n  },\n  ref,\n) {\n  const autoId = useId()\n  const childProps = isValidElement(children) ? (children.props as ControlElementProps) : undefined\n  const id = htmlFor ?? childProps?.id ?? `${autoId}control`\n  const labelId = `${id}-label`\n  const descriptionId = `${id}-description`\n  const warningId = `${id}-warning`\n  const errorId = `${id}-error`\n\n  const help = description ?? hint\n  const invalid = hasError(error)\n  const showErrorMessage = hasErrorMessage(error) && !errorHidden\n  const showWarning = warning != null && !showErrorMessage\n  const effectiveLabelHidden = labelHidden || layout === 'inline'\n  const describedBy = joinIds(\n    help != null && descriptionId,\n    showWarning && warningId,\n    showErrorMessage && errorId,\n  )\n\n  const context = useMemo<FieldControlContext>(\n    () => ({\n      id,\n      labelId,\n      describedBy,\n      invalid,\n      required,\n      disabled,\n      readOnly,\n      busy: validating,\n      warningId,\n    }),\n    [id, labelId, describedBy, invalid, required, disabled, readOnly, validating, warningId],\n  )\n\n  let control: ReactNode\n  if (typeof children === 'function') {\n    control = children({\n      id,\n      'aria-describedby': describedBy,\n      'aria-invalid': invalid || undefined,\n      'aria-required': required || undefined,\n      required,\n      disabled: disabled || undefined,\n    })\n  } else if (isValidElement(children) && !isFieldAware(children.type)) {\n    control = cloneElement(\n      children as ReactElement<ControlElementProps & Record<string, unknown>>,\n      {\n        id,\n        'aria-describedby': joinIds(childProps?.['aria-describedby'], describedBy),\n        'aria-invalid': invalid\n          ? true\n          : childProps?.['aria-invalid'] === false\n            ? undefined\n            : childProps?.['aria-invalid'],\n        'aria-required': required || undefined,\n      },\n    )\n  } else {\n    control = children\n  }\n\n  return (\n    <div\n      ref={ref}\n      className={cx(styles.field, className)}\n      data-invalid={invalid || undefined}\n      data-disabled={disabled || undefined}\n      data-readonly={readOnly || undefined}\n      data-label-hidden={effectiveLabelHidden || undefined}\n      data-layout={layout}\n      {...rest}\n    >\n      <div className={styles.header}>\n        <label\n          id={labelId}\n          htmlFor={id}\n          className={cx(messageStyles.label, effectiveLabelHidden && messageStyles.visuallyHidden)}\n        >\n          <LabelContent required={required} optional={optional} busy={validating}>\n            {label}\n          </LabelContent>\n        </label>\n        {help != null ? <FieldDescription id={descriptionId}>{help}</FieldDescription> : null}\n      </div>\n      <div className={styles.controlSlot}>\n        <FieldContext.Provider value={context}>{control}</FieldContext.Provider>\n      </div>\n      {showWarning ? (\n        <div className={styles.warningSlot}>\n          <FieldWarning id={warningId}>{warning}</FieldWarning>\n        </div>\n      ) : null}\n      {showErrorMessage ? (\n        <div className={styles.errorSlot}>\n          <FieldError id={errorId} live={errorLive}>\n            {error}\n          </FieldError>\n        </div>\n      ) : null}\n    </div>\n  )\n})\n"],"mappings":";;;;;;;;;;AAmHA,IAAaI,IAAQC,EAAuC,SAC1D,EACE,UACA,gBACA,SACA,UACA,cAAW,IACX,aACA,iBAAc,IACd,YACA,eAAY,IACZ,iBAAc,IACd,gBAAa,IACb,cAAW,IACX,YAAS,SACT,YACA,cAAW,IACX,cACA,aACA,GAAGC,KAEL,GACA;CACA,IAAMC,IAASC,EAAM,GACfC,IAAaC,EAAeC,CAAQ,IAAKA,EAAS,QAAgC,KAAA,GAClFC,IAAKC,KAAWJ,GAAY,MAAM,GAAGF,EAAO,UAC5CO,IAAU,GAAGF,EAAG,SAChBG,IAAgB,GAAGH,EAAG,eACtBI,IAAY,GAAGJ,EAAG,WAClBK,IAAU,GAAGL,EAAG,SAEhBM,IAAOC,KAAeC,GACtBC,IAAUC,EAASC,CAAK,GACxBC,IAAmBC,EAAgBF,CAAK,KAAK,CAACG,GAC9CC,IAAcC,KAAW,QAAQ,CAACJ,GAClCK,IAAuBC,KAAeC,MAAW,UACjDC,IAAcC,EAClBf,KAAQ,QAAQH,GAChBY,KAAeX,GACfQ,KAAoBP,CACtB,GAEMiB,IAAUC,SACP;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA,MAAMC;EACN;CACF,IACA;EAACxB;EAAIE;EAASkB;EAAaX;EAASgB;EAAUC;EAAUC;EAAUH;EAAYpB;CAAS,CACzF,GAEIwB;CA4BJ,OA3BA,AAwBEA,IAxBE,OAAO7B,KAAa,aACZA,EAAS;EACjB;EACA,oBAAoBqB;EACpB,gBAAgBX,KAAW,KAAA;EAC3B,iBAAiBgB,KAAY,KAAA;EAC7B;EACA,UAAUC,KAAY,KAAA;CACxB,CAAC,IACQ5B,EAAeC,CAAQ,KAAK,CAAC8B,EAAa9B,EAAS,IAAI,IACtD+B,EACR/B,GACA;EACE;EACA,oBAAoBsB,EAAQxB,IAAa,qBAAqBuB,CAAW;EACzE,gBAAgBX,IACZ,KACAZ,IAAa,oBAAoB,KAC/B,KAAA,IACAA,IAAa;EACnB,iBAAiB4B,KAAY,KAAA;CAC/B,CACF,IAEU1B,GAIV,kBAAC,OAAD;EACO;EACL,WAAWgC,EAAG3C,EAAO,OAAO4C,CAAS;EACrC,gBAAcvB,KAAW,KAAA;EACzB,iBAAeiB,KAAY,KAAA;EAC3B,iBAAeC,KAAY,KAAA;EAC3B,qBAAmBV,KAAwB,KAAA;EAC3C,eAAaE;EACb,GAAIzB;EARN,UAAA;GAUE,kBAAC,OAAD;IAAK,WAAWN,EAAO;IAAvB,UAAA,CACE,kBAAC,SAAD;KACE,IAAIc;KACJ,SAASF;KACT,WAAW+B,EAAG1C,EAAc,OAAO4B,KAAwB5B,EAAc,cAAc;KAEvF,UAAA,kBAAC4C,GAAD;MAAwB;MAAoB;MAAU,MAAMT;MACzD,UAAAU;KACW,CAAA;IACT,CAAA,GACN5B,KAAQ,OAAwE,OAAjE,kBAAC6B,GAAD;KAAkB,IAAIhC;KAAgB,UAAAG;IAAuB,CAAA,CAC1E;;GACL,kBAAC,OAAD;IAAK,WAAWlB,EAAO;IACrB,UAAA,kBAACgD,EAAa,UAAd;KAAuB,OAAOd;KAAU,UAAAM;IAA+B,CAAA;GACpE,CAAA;GACJb,IACC,kBAAC,OAAD;IAAK,WAAW3B,EAAO;IACrB,UAAA,kBAACiD,GAAD;KAAc,IAAIjC;KAAY,UAAAY;IAAsB,CAAA;GACjD,CAAA,IACH;GACHJ,IACC,kBAAC,OAAD;IAAK,WAAWxB,EAAO;IACrB,UAAA,kBAACkD,GAAD;KAAY,IAAIjC;KAAS,MAAMkC;KAC5B,UAAA5B;IACS,CAAA;GACT,CAAA,IACH;EACD;;AAET,CAAC"}

package/dist/components/inputs/Field/Field.module.js

@@ -0,0 +1,12 @@
+//#region src/components/inputs/Field/Field.module.css
+var e = "kiln-Field__field", t = "kiln-Field__header", n = "kiln-Field__controlSlot", r = "kiln-Field__warningSlot", i = "kiln-Field__errorSlot", a = {
+	field: e,
+	header: t,
+	controlSlot: n,
+	warningSlot: r,
+	errorSlot: i
+};
+//#endregion
+export { n as controlSlot, a as default, i as errorSlot, e as field, t as header, r as warningSlot };
+
+//# sourceMappingURL=Field.module.js.map

package/dist/components/inputs/Field/Field.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Field.module.js","names":["field","header","controlSlot","warningSlot","errorSlot","Field_module_default"],"sources":["../../../../src/components/inputs/Field/Field.module.css"],"sourcesContent":["/*\n * Label and help sit tight together; the control keeps a little more air above it so\n * the header reads as one unit. Error text sits directly under the control.\n *\n * Component tokens:\n *   --field-gap   default var(--space-2) — space around the control\n *\n * `data-layout='stack'` (default) keeps the plain flex column below: the slot wrappers\n * (.controlSlot/.warningSlot/.errorSlot) are `display: contents` so they don't add a box.\n * `data-layout='horizontal'` turns them into real grid cells (label column | control\n * column) at and above `sm`; below it, everything stacks in DOM order.\n * `data-layout='inline'` forces the label hidden (see Field.tsx) and lays the root out\n * as an inline-flex run, for a control sitting in a sentence or a table cell.\n */\n.field {\n  display: flex;\n  flex-direction: column;\n  gap: var(--field-gap, var(--space-2));\n  min-inline-size: 0;\n}\n\n.header {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-1);\n}\n\n/* A hidden label leaves no visible header row — drop the wrapper from the flow. */\n.field[data-label-hidden] > .header {\n  display: contents;\n}\n\n.controlSlot,\n.warningSlot,\n.errorSlot {\n  display: contents;\n}\n\n.field[data-layout='inline'] {\n  display: inline-flex;\n  align-items: baseline;\n  gap: var(--space-2);\n}\n\n.field[data-layout='horizontal'] {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr);\n  gap: var(--space-2);\n}\n\n@media (min-width: 40em) {\n  .field[data-layout='horizontal'] {\n    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);\n    column-gap: var(--space-4);\n    row-gap: var(--space-1);\n    align-items: start;\n  }\n  .field[data-layout='horizontal'] > .header {\n    grid-column: 1;\n  }\n  .field[data-layout='horizontal'] > .controlSlot,\n  .field[data-layout='horizontal'] > .warningSlot,\n  .field[data-layout='horizontal'] > .errorSlot {\n    display: block;\n    grid-column: 2;\n  }\n}\n"],"mappings":""}

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

@@ -0,0 +1,4 @@
+export { Field } from './Field.js';
+export type { FieldProps, FieldLabelProps, FieldRenderProps, FieldLayout } from './Field.js';
+export { useFieldControl } from '../internal/FieldContext.js';
+export type { FieldControlContext } from '../internal/FieldContext.js';

package/dist/components/inputs/Fieldset/Fieldset.d.ts

@@ -0,0 +1,48 @@
+import { type FieldsetHTMLAttributes, type ReactNode } from 'react';
+import type { FieldLayout } from '../Field/index.js';
+export type FieldsetVariant = 'default' | 'section';
+export interface FieldsetProps extends FieldsetHTMLAttributes<HTMLFieldSetElement> {
+    /** The group's name — "Plan", "Notify me about". */
+    legend: ReactNode;
+    description?: ReactNode;
+    /** A message about the group as a whole ("Choose at least one"). */
+    error?: ReactNode;
+    /** Visual mark after the legend. Put `required` on the controls (or RadioGroup) too. */
+    required?: boolean;
+    optional?: boolean | string;
+    legendHidden?: boolean;
+    /**
+     * `default` — the legend reads like a field label (a radio group, a checkbox set).
+     * `section` — the legend is set as a small heading with a hairline under it, for a
+     * form broken into groups of fields ("Your details", "Payment"), so groups read as
+     * groups rather than as one more label.
+     */
+    variant?: FieldsetVariant;
+    /** Non-blocking advice about the group as a whole. Hidden while an error message is shown. */
+    warning?: ReactNode;
+    /** Whether the error message is `role="alert"`. Default `true`. */
+    errorLive?: boolean;
+    /** Keeps the invalid state but doesn't render the error text. */
+    errorHidden?: boolean;
+    /** Shows a small spinner after the legend and sets `aria-busy` on every control inside. */
+    validating?: boolean;
+    /** Every control inside sets native `readOnly`/`aria-readonly` and ignores changes. */
+    readOnly?: boolean;
+    /**
+     * Same values as `Field`'s `layout`. `stack` (default) puts the legend above the group;
+     * `horizontal` puts it in a label column beside the group from `sm` up (matching a
+     * horizontal `Field`), stacking below; `inline` hides the legend (like `legendHidden`).
+     */
+    layout?: FieldLayout;
+}
+/**
+ * Groups related controls under a legend: a RadioGroup, a set of CheckboxFields, or an
+ * address block. `disabled` disables every control inside (native fieldset behaviour).
+ *
+ * <Fieldset legend="Plan" description="Pay by card or bank transfer">
+ *   <RadioGroup …/>
+ * </Fieldset>
+ *
+ * <Fieldset variant="section" legend="Your details">…TextFields…</Fieldset>
+ */
+export declare const Fieldset: import("react").ForwardRefExoticComponent<FieldsetProps & import("react").RefAttributes<HTMLFieldSetElement>>;

package/dist/components/inputs/Fieldset/Fieldset.js

@@ -0,0 +1,83 @@
+import { cx as e } from "../../../utils/cx.js";
+import { joinIds as t } from "../internal/refs.js";
+import { FieldContext as n } from "../internal/FieldContext.js";
+import r from "../internal/messages.module.js";
+import { FieldDescription as i, FieldError as a, FieldWarning as o, LabelContent as s } from "../internal/messages.js";
+import { hasError as c, hasErrorMessage as l } from "../internal/errors.js";
+import u from "./Fieldset.module.js";
+import { forwardRef as d, useId as f, useMemo as p } from "react";
+import { jsx as m, jsxs as h } from "react/jsx-runtime";
+//#region src/components/inputs/Fieldset/Fieldset.tsx
+var g = d(function({ legend: d, description: g, error: _, required: v = !1, optional: y, legendHidden: b = !1, variant: x = "default", warning: S, errorLive: C = !0, errorHidden: w = !1, validating: T = !1, readOnly: E = !1, layout: D = "stack", className: O, children: k, "aria-describedby": A, ...j }, M) {
+	let N = f(), P = `${N}legend`, F = `${N}description`, I = `${N}warning`, L = `${N}error`, R = l(_) && !w, z = S != null && !R, B = c(_), V = j.disabled ?? !1, H = b || D === "inline", U = p(() => ({
+		id: N,
+		labelId: P,
+		invalid: B,
+		required: v,
+		disabled: V,
+		readOnly: E,
+		busy: T,
+		warningId: I,
+		fieldset: !0
+	}), [
+		N,
+		P,
+		B,
+		v,
+		V,
+		E,
+		T,
+		I
+	]);
+	return /* @__PURE__ */ h("fieldset", {
+		ref: M,
+		className: e(u.fieldset, O),
+		"data-variant": x,
+		"data-layout": D,
+		"data-invalid": B || void 0,
+		"data-disabled": V || void 0,
+		"data-readonly": E || void 0,
+		"aria-describedby": t(A, g != null && F, z && I, R && L),
+		...j,
+		children: [/* @__PURE__ */ m("legend", {
+			id: P,
+			className: e(r.label, u.legend, H && r.visuallyHidden),
+			"data-disabled": V || void 0,
+			children: /* @__PURE__ */ m(s, {
+				required: v,
+				optional: y,
+				busy: T,
+				children: d
+			})
+		}), /* @__PURE__ */ h("div", {
+			className: u.body,
+			children: [
+				g == null ? null : /* @__PURE__ */ m(i, {
+					id: F,
+					className: u.description,
+					children: g
+				}),
+				/* @__PURE__ */ m("div", {
+					className: u.controls,
+					children: /* @__PURE__ */ m(n.Provider, {
+						value: U,
+						children: k
+					})
+				}),
+				z ? /* @__PURE__ */ m(o, {
+					id: I,
+					children: S
+				}) : null,
+				R ? /* @__PURE__ */ m(a, {
+					id: L,
+					live: C,
+					children: _
+				}) : null
+			]
+		})]
+	});
+});
+//#endregion
+export { g as Fieldset };
+
+//# sourceMappingURL=Fieldset.js.map

package/dist/components/inputs/Fieldset/Fieldset.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Fieldset.js","names":["styles","messageStyles","messages_module_default","Fieldset_module_default","Fieldset","forwardRef","describedByProp","rest","id","useId","legendId","descriptionId","warningId","errorId","showErrorMessage","hasErrorMessage","error","errorHidden","showWarning","warning","invalid","hasError","disabled","effectiveLegendHidden","legendHidden","layout","context","useMemo","validating","required","readOnly","cx","className","variant","joinIds","description","LabelContent","legend","FieldDescription","FieldContext","FieldWarning","FieldError","errorLive"],"sources":["../../../../src/components/inputs/Fieldset/Fieldset.tsx"],"sourcesContent":["import { forwardRef, useId, useMemo, type FieldsetHTMLAttributes, type ReactNode } from 'react'\nimport { cx } from '#utils/cx'\nimport { FieldContext, type FieldControlContext } from '#components/inputs/internal/FieldContext'\nimport {\n  FieldDescription,\n  FieldError,\n  FieldWarning,\n  LabelContent,\n} from '#components/inputs/internal/messages'\nimport { hasError, hasErrorMessage } from '#components/inputs/internal/errors'\nimport messageStyles from '#components/inputs/internal/messages.module.css'\nimport { joinIds } from '#components/inputs/internal/refs'\nimport type { FieldLayout } from '#components/inputs/Field'\nimport styles from './Fieldset.module.css'\n\nexport type FieldsetVariant = 'default' | 'section'\n\nexport interface FieldsetProps extends FieldsetHTMLAttributes<HTMLFieldSetElement> {\n  /** The group's name — \"Plan\", \"Notify me about\". */\n  legend: ReactNode\n  description?: ReactNode\n  /** A message about the group as a whole (\"Choose at least one\"). */\n  error?: ReactNode\n  /** Visual mark after the legend. Put `required` on the controls (or RadioGroup) too. */\n  required?: boolean\n  optional?: boolean | string\n  legendHidden?: boolean\n  /**\n   * `default` — the legend reads like a field label (a radio group, a checkbox set).\n   * `section` — the legend is set as a small heading with a hairline under it, for a\n   * form broken into groups of fields (\"Your details\", \"Payment\"), so groups read as\n   * groups rather than as one more label.\n   */\n  variant?: FieldsetVariant\n  /** Non-blocking advice about the group as a whole. Hidden while an error message is shown. */\n  warning?: ReactNode\n  /** Whether the error message is `role=\"alert\"`. Default `true`. */\n  errorLive?: boolean\n  /** Keeps the invalid state but doesn't render the error text. */\n  errorHidden?: boolean\n  /** Shows a small spinner after the legend and sets `aria-busy` on every control inside. */\n  validating?: boolean\n  /** Every control inside sets native `readOnly`/`aria-readonly` and ignores changes. */\n  readOnly?: boolean\n  /**\n   * Same values as `Field`'s `layout`. `stack` (default) puts the legend above the group;\n   * `horizontal` puts it in a label column beside the group from `sm` up (matching a\n   * horizontal `Field`), stacking below; `inline` hides the legend (like `legendHidden`).\n   */\n  layout?: FieldLayout\n}\n\n/**\n * Groups related controls under a legend: a RadioGroup, a set of CheckboxFields, or an\n * address block. `disabled` disables every control inside (native fieldset behaviour).\n *\n * <Fieldset legend=\"Plan\" description=\"Pay by card or bank transfer\">\n *   <RadioGroup …/>\n * </Fieldset>\n *\n * <Fieldset variant=\"section\" legend=\"Your details\">…TextFields…</Fieldset>\n */\nexport const Fieldset = forwardRef<HTMLFieldSetElement, FieldsetProps>(function Fieldset(\n  {\n    legend,\n    description,\n    error,\n    required = false,\n    optional,\n    legendHidden = false,\n    variant = 'default',\n    warning,\n    errorLive = true,\n    errorHidden = false,\n    validating = false,\n    readOnly = false,\n    layout = 'stack',\n    className,\n    children,\n    'aria-describedby': describedByProp,\n    ...rest\n  },\n  ref,\n) {\n  const id = useId()\n  const legendId = `${id}legend`\n  const descriptionId = `${id}description`\n  const warningId = `${id}warning`\n  const errorId = `${id}error`\n  const showErrorMessage = hasErrorMessage(error) && !errorHidden\n  const showWarning = warning != null && !showErrorMessage\n  const invalid = hasError(error)\n  const disabled = rest.disabled ?? false\n  const effectiveLegendHidden = legendHidden || layout === 'inline'\n\n  const context = useMemo<FieldControlContext>(\n    () => ({\n      id,\n      labelId: legendId,\n      invalid,\n      required,\n      disabled,\n      readOnly,\n      busy: validating,\n      warningId,\n      fieldset: true,\n    }),\n    [id, legendId, invalid, required, disabled, readOnly, validating, warningId],\n  )\n\n  return (\n    <fieldset\n      ref={ref}\n      className={cx(styles.fieldset, className)}\n      data-variant={variant}\n      data-layout={layout}\n      data-invalid={invalid || undefined}\n      data-disabled={disabled || undefined}\n      data-readonly={readOnly || undefined}\n      aria-describedby={joinIds(\n        describedByProp,\n        description != null && descriptionId,\n        showWarning && warningId,\n        showErrorMessage && errorId,\n      )}\n      {...rest}\n    >\n      <legend\n        id={legendId}\n        className={cx(\n          messageStyles.label,\n          styles.legend,\n          effectiveLegendHidden && messageStyles.visuallyHidden,\n        )}\n        data-disabled={disabled || undefined}\n      >\n        <LabelContent required={required} optional={optional} busy={validating}>\n          {legend}\n        </LabelContent>\n      </legend>\n      <div className={styles.body}>\n        {description != null ? (\n          <FieldDescription id={descriptionId} className={styles.description}>\n            {description}\n          </FieldDescription>\n        ) : null}\n        <div className={styles.controls}>\n          <FieldContext.Provider value={context}>{children}</FieldContext.Provider>\n        </div>\n        {showWarning ? <FieldWarning id={warningId}>{warning}</FieldWarning> : null}\n        {showErrorMessage ? (\n          <FieldError id={errorId} live={errorLive}>\n            {error}\n          </FieldError>\n        ) : null}\n      </div>\n    </fieldset>\n  )\n})\n"],"mappings":";;;;;;;;;;AA8DA,IAAaI,IAAWC,EAA+C,SACrE,EACE,WACA,gBACA,UACA,cAAW,IACX,aACA,kBAAe,IACf,aAAU,WACV,YACA,eAAY,IACZ,iBAAc,IACd,gBAAa,IACb,cAAW,IACX,YAAS,SACT,cACA,aACA,oBAAoBC,GACpB,GAAGC,KAEL,GACA;CACA,IAAMC,IAAKC,EAAM,GACXC,IAAW,GAAGF,EAAG,SACjBG,IAAgB,GAAGH,EAAG,cACtBI,IAAY,GAAGJ,EAAG,UAClBK,IAAU,GAAGL,EAAG,QAChBM,IAAmBC,EAAgBC,CAAK,KAAK,CAACC,GAC9CC,IAAcC,KAAW,QAAQ,CAACL,GAClCM,IAAUC,EAASL,CAAK,GACxBM,IAAWf,EAAK,YAAY,IAC5BgB,IAAwBC,KAAgBC,MAAW,UAEnDC,IAAUC,SACP;EACL;EACA,SAASjB;EACT;EACA;EACA;EACA;EACA,MAAMkB;EACN;EACA,UAAU;CACZ,IACA;EAACpB;EAAIE;EAAUU;EAASS;EAAUP;EAAUQ;EAAUF;EAAYhB;CAAS,CAC7E;CAEA,OACE,kBAAC,YAAD;EACO;EACL,WAAWmB,EAAG/B,EAAO,UAAUgC,CAAS;EACxC,gBAAcC;EACd,eAAaR;EACb,gBAAcL,KAAW,KAAA;EACzB,iBAAeE,KAAY,KAAA;EAC3B,iBAAeQ,KAAY,KAAA;EAC3B,oBAAkBI,EAChB5B,GACA6B,KAAe,QAAQxB,GACvBO,KAAeN,GACfE,KAAoBD,CACtB;EACA,GAAIN;EAdN,UAAA,CAgBE,kBAAC,UAAD;GACE,IAAIG;GACJ,WAAWqB,EACT9B,EAAc,OACdD,EAAO,QACPuB,KAAyBtB,EAAc,cACzC;GACA,iBAAeqB,KAAY,KAAA;GAE3B,UAAA,kBAACc,GAAD;IAAwB;IAAoB;IAAU,MAAMR;IACzD,UAAAS;GACW,CAAA;EACR,CAAA,GACR,kBAAC,OAAD;GAAK,WAAWrC,EAAO;GAAvB,UAAA;IACGmC,KAAe,OAIZ,OAHF,kBAACG,GAAD;KAAkB,IAAI3B;KAAe,WAAWX,EAAO;KACpD,UAAAmC;IACe,CAAA;IAEpB,kBAAC,OAAD;KAAK,WAAWnC,EAAO;KACrB,UAAA,kBAACuC,EAAa,UAAd;MAAuB,OAAOb;MAAU;KAAgC,CAAA;IACrE,CAAA;IACJR,IAAc,kBAACsB,GAAD;KAAc,IAAI5B;KAAY,UAAAO;IAAsB,CAAA,IAAI;IACtEL,IACC,kBAAC2B,GAAD;KAAY,IAAI5B;KAAS,MAAM6B;KAC5B,UAAA1B;IACS,CAAA,IACV;GACD;EACG,CAAA,CAAA;;AAEd,CAAC"}

package/dist/components/inputs/Fieldset/Fieldset.module.js

@@ -0,0 +1,12 @@
+//#region src/components/inputs/Fieldset/Fieldset.module.css
+var e = "kiln-Fieldset__fieldset", t = "kiln-Fieldset__legend", n = "kiln-Fieldset__body", r = "kiln-Fieldset__description", i = "kiln-Fieldset__controls", a = {
+	fieldset: e,
+	legend: t,
+	body: n,
+	description: r,
+	controls: i
+};
+//#endregion
+export { n as body, i as controls, a as default, r as description, e as fieldset, t as legend };
+
+//# sourceMappingURL=Fieldset.module.js.map

package/dist/components/inputs/Fieldset/Fieldset.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Fieldset.module.js","names":["fieldset","legend","body","description","controls","Fieldset_module_default"],"sources":["../../../../src/components/inputs/Fieldset/Fieldset.module.css"],"sourcesContent":["/*\n * No box: a fieldset is grouping, not a surface. The legend reads like a field label.\n *\n * `data-variant='section'` promotes the legend to a small heading (heading tokens,\n * text-lg) over a hairline, for forms split into groups of fields.\n *\n * `data-layout='horizontal'` matches a horizontal Field: at and above `sm` the legend takes\n * the label column and the body the control column; below it, everything stacks. (The\n * legend is floated, so it is an ordinary grid item, not the fieldset's rendered legend.)\n * `data-layout='inline'` only hides the legend (Fieldset.tsx).\n *\n * Component tokens:\n *   --fieldset-gap            default var(--space-3) — space between the grouped controls\n *                             (var(--space-5) for `section`: it groups whole fields)\n *   --fieldset-section-rule   rule under a section legend, default var(--color-line)\n */\n.fieldset {\n  min-inline-size: 0;\n  margin: 0;\n  padding: 0;\n  border: 0;\n}\n\n.legend {\n  float: inline-start; /* makes the legend an ordinary block so the body can sit under it */\n  inline-size: 100%;\n  margin-block-end: var(--space-2);\n}\n.legend + * {\n  clear: both;\n}\n\n.body {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-3);\n}\n\n/* Help text hugs the legend (label → help is space-1 everywhere in a form). */\n.description {\n  margin-block-start: calc(var(--space-1) - var(--space-2));\n}\n\n.controls {\n  display: flex;\n  flex-direction: column;\n  gap: var(--fieldset-gap, var(--space-3));\n}\n\n/* Section: a heading, not a label. The rule sits under the legend, across the column. */\n.fieldset[data-variant='section'] > .legend {\n  display: flex;\n  margin-block-end: var(--space-4);\n  padding-block-end: var(--space-2);\n  border-block-end: var(--border-width) solid var(--fieldset-section-rule, var(--color-line));\n  font-family: var(--heading-font);\n  font-size: var(--text-lg);\n  font-weight: var(--heading-weight);\n  letter-spacing: var(--heading-tracking);\n  text-transform: var(--heading-transform);\n  line-height: var(--leading-tight);\n}\n.fieldset[data-variant='section'] > .body {\n  gap: var(--space-4);\n}\n.fieldset[data-variant='section'] > .body > .description {\n  margin-block-start: calc(-1 * var(--space-1));\n}\n.fieldset[data-variant='section'] > .body > .controls {\n  gap: var(--fieldset-gap, var(--space-5));\n}\n\n/* Horizontal: legend column | body column, like Field's horizontal grid. */\n@media (min-width: 40em) {\n  .fieldset[data-layout='horizontal'] {\n    display: grid;\n    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);\n    column-gap: var(--space-4);\n    align-items: start;\n  }\n  .fieldset[data-layout='horizontal'] > .legend {\n    grid-column: 1;\n    margin-block-end: 0;\n  }\n  .fieldset[data-layout='horizontal'] > .body {\n    grid-column: 2;\n  }\n}\n"],"mappings":""}

package/dist/components/inputs/Fieldset/index.d.ts

@@ -0,0 +1,2 @@
+export { Fieldset } from './Fieldset.js';
+export type { FieldsetProps, FieldsetVariant } from './Fieldset.js';

package/dist/components/inputs/FileDrop/FileDrop.d.ts

@@ -0,0 +1,60 @@
+import { type FocusEventHandler, type HTMLAttributes, type ReactNode } from 'react';
+/** A file that already lives somewhere (uploaded earlier): shown and removable, never re-sent. */
+export interface StoredFile {
+    id: string;
+    name: string;
+    /** Bytes. */
+    size?: number;
+    /** MIME type, e.g. `image/jpeg`. */
+    type?: string;
+    /** Where to preview it (thumbnails). */
+    url?: string;
+}
+export type FileValue = File | StoredFile;
+export type FileRejectReason = 'type' | 'size' | 'count';
+export interface FileRejection {
+    file: File;
+    reason: FileRejectReason;
+}
+export interface FileDropProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue' | 'onBlur'> {
+    value?: readonly FileValue[];
+    defaultValue?: readonly FileValue[];
+    onValueChange?: (files: FileValue[]) => void;
+    /** Native `accept`: extensions (`.pdf`), MIME types (`image/png`) or wildcards (`image/*`). Also checked on drop. */
+    accept?: string;
+    /** Several files (added to the list). Without it a new file replaces the current one. */
+    multiple?: boolean;
+    /** With `multiple`: the most files the list may hold. */
+    maxFiles?: number;
+    /** Largest file accepted, in bytes. */
+    maxSize?: number;
+    /** Files that weren't added, and why. One call per pick or drop. */
+    onReject?: (rejections: readonly FileRejection[]) => void;
+    /** `list` (default): name and size rows. `thumbnails`: a grid with image previews. */
+    preview?: 'list' | 'thumbnails';
+    /** Default "Drop files here or". */
+    dropLabel?: ReactNode;
+    /** Default "choose files". Also the input's name when nothing else labels it. */
+    browseLabel?: string;
+    /** Accessible name of a file's remove button. Default `Remove <name>`. */
+    removeLabel?: (name: string) => string;
+    name?: string;
+    disabled?: boolean;
+    readOnly?: boolean;
+    required?: boolean;
+    /** Critical border + `aria-invalid`. Inside a `<Field error>` this is set for you. */
+    invalid?: boolean;
+    /** Fires once focus leaves the whole control (the input and the remove buttons). */
+    onBlur?: FocusEventHandler<HTMLElement>;
+}
+/**
+ * Pick or drop files. The real control is the native `<input type="file">` (visually
+ * hidden, labelled by the surrounding Field, focus ring on the zone); drag-and-drop is an
+ * enhancement. Files are held in state, not uploaded: `value` is `File`s plus any
+ * `StoredFile`s from an earlier upload. The input's `FileList` is kept in sync where the
+ * browser allows it, so a native form submit sends the current files.
+ * The ref goes to the file input; `className`/`style` and other props go to the wrapper.
+ *
+ * <FileDrop accept="image/*,.pdf" multiple maxFiles={5} maxSize={5_000_000} preview="thumbnails" />
+ */
+export declare const FileDrop: import("react").ForwardRefExoticComponent<FileDropProps & import("react").RefAttributes<HTMLInputElement>>;