@mitcsutt/kiln-ui 0.1.0

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

@@ -0,0 +1,15 @@
+//#region src/components/inputs/ChoiceCards/ChoiceCards.module.css
+var e = "kiln-ChoiceCards__cards", t = "kiln-ChoiceCards__card", n = "kiln-ChoiceCards__head", r = "kiln-ChoiceCards__label", i = "kiln-ChoiceCards__description", a = "kiln-ChoiceCards__meta", o = "kiln-ChoiceCards__mark", s = "kiln-ChoiceCards__check", c = {
+	cards: e,
+	card: t,
+	head: n,
+	label: r,
+	description: i,
+	meta: a,
+	mark: o,
+	check: s
+};
+//#endregion
+export { t as card, e as cards, s as check, c as default, i as description, n as head, r as label, o as mark, a as meta };
+
+//# sourceMappingURL=ChoiceCards.module.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ChoiceCards.module.js","names":["cards","card","head","label","description","meta","mark","check","ChoiceCards_module_default"],"sources":["../../../../src/components/inputs/ChoiceCards/ChoiceCards.module.css"],"sourcesContent":["/*\n * Choices as cards. Each card is the radio (single) or checkbox (multiple) itself, so\n * the whole card is the hit target.\n *\n * ┌───────────────────┐  ┌───────────────────┐\n * │ £10            (●)│  │ £20            ( )│   ← selected: accent edge, pressed flat\n * * │ Five projects     │  │ Unlimited         │\n * │ £120 a year       │  │ £240 a year       │   ← meta: tabular figures at the foot\n * └───────────────────┘  └───────────────────┘\n *\n * Component tokens:\n *   --choice-card-radius   default var(--radius-surface)\n *   --choice-card-bg       default var(--color-surface)\n *   --choice-card-line     default var(--color-line-strong) — the resting edge\n *   --choice-card-shadow   default var(--shadow-active) — Fiesta's offset, none elsewhere\n *   --choice-cards-min     default 12rem — card width when `columns` isn't set\n *   --choice-cards-gap     default var(--space-3)\n *\n * The selected card changes one thing: its edge becomes the accent (drawn 2px thick with an\n * inset ring so it reads at a glance), and where the theme has a press shadow it sits flat.\n *\n * Responsive `columns`: the component writes --choice-cards-columns-{bp}; they resolve into\n * --_cols here (see layout/Stack/Stack.module.css for the pattern).\n */\n.cards {\n  --_gap: var(--choice-cards-gap, var(--space-3));\n  --_cols: repeat(auto-fill, minmax(min(var(--choice-cards-min, 12rem), 100%), 1fr));\n\n  display: grid;\n  grid-template-columns: var(--_cols);\n  gap: var(--_gap);\n  min-inline-size: 0;\n}\n\n.cards[data-columns] {\n  --_cols: var(--choice-cards-columns-base, minmax(0, 1fr));\n}\n@media (min-width: 40em) {\n  .cards[data-columns] {\n    --_cols: var(--choice-cards-columns-sm, minmax(0, 1fr));\n  }\n}\n@media (min-width: 48em) {\n  .cards[data-columns] {\n    --_cols: var(--choice-cards-columns-md, minmax(0, 1fr));\n  }\n}\n@media (min-width: 64em) {\n  .cards[data-columns] {\n    --_cols: var(--choice-cards-columns-lg, minmax(0, 1fr));\n  }\n}\n@media (min-width: 80em) {\n  .cards[data-columns] {\n    --_cols: var(--choice-cards-columns-xl, minmax(0, 1fr));\n  }\n}\n\n.card {\n  --_line: var(--choice-card-line, var(--color-line-strong));\n  --_ring: transparent;\n  --_shadow: var(--choice-card-shadow, var(--shadow-active));\n\n  all: unset;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-1);\n  min-inline-size: 0;\n  padding: var(--space-4);\n  border: var(--border-width) solid var(--_line);\n  border-radius: var(--choice-card-radius, var(--radius-surface));\n  background-color: var(--choice-card-bg, var(--color-surface));\n  box-shadow:\n    inset 0 0 0 1px var(--_ring),\n    var(--_shadow);\n  color: var(--color-ink);\n  text-align: start;\n  cursor: pointer;\n  -webkit-tap-highlight-color: transparent;\n  transition:\n    border-color var(--dur-1) var(--ease-out),\n    box-shadow var(--dur-1) var(--ease-out),\n    translate var(--dur-2) var(--ease-spring);\n}\n\n@media (hover: hover) {\n  .card:hover:not([data-disabled], [data-state='checked']) {\n    --_line: var(--color-ink-subtle);\n  }\n}\n\n.card[data-state='checked'] {\n  --_line: var(--color-accent);\n  --_ring: var(--color-accent);\n  --_shadow: 0 0 0 0 transparent;\n\n  translate: var(--active-shift) var(--active-shift);\n}\n\n.cards[data-invalid] .card:not([data-state='checked']) {\n  --_line: var(--tone-critical);\n}\n\n.card:focus-visible {\n  outline: 2px solid var(--color-focus);\n  outline-offset: 2px;\n}\n\n.card[data-disabled] {\n  cursor: not-allowed;\n  opacity: 0.45;\n  --_shadow: 0 0 0 0 transparent;\n}\n\n.cards[data-readonly] .card {\n  cursor: default;\n}\n\n.head {\n  display: flex;\n  align-items: start;\n  justify-content: space-between;\n  gap: var(--space-3);\n}\n\n.label {\n  font-size: var(--text-md);\n  font-weight: var(--label-weight);\n  line-height: var(--leading-snug);\n}\n\n.description {\n  color: var(--color-ink-muted);\n  font-size: var(--text-sm);\n  line-height: var(--leading-snug);\n}\n\n.meta {\n  margin-block-start: auto;\n  padding-block-start: var(--space-2);\n  color: var(--color-ink);\n  font-family: var(--font-numeric);\n  font-stretch: var(--numeric-stretch);\n  font-variant-numeric: tabular-nums lining-nums;\n  font-size: var(--text-sm);\n}\n\n/* The corner mark: a ring for single, a box with a check for multiple. */\n.mark {\n  --_s: calc(var(--control-sm) * 0.5);\n\n  display: inline-grid;\n  flex: none;\n  place-items: center;\n  inline-size: var(--_s);\n  block-size: var(--_s);\n  margin-block-start: calc((1lh - var(--_s)) / 2);\n  border: var(--border-width) solid var(--color-line-control);\n  border-radius: 50%;\n  background-color: var(--color-surface);\n  color: var(--color-accent-ink);\n  transition:\n    background-color var(--dur-1) var(--ease-out),\n    border-color var(--dur-1) var(--ease-out);\n}\n.mark[data-kind='checkbox'] {\n  border-radius: calc(var(--radius-field) * 0.4);\n}\n.mark[data-kind='radio']::after {\n  content: '';\n  inline-size: 38%;\n  aspect-ratio: 1;\n  border-radius: 50%;\n  background-color: transparent;\n}\n\n.card[data-state='checked'] .mark {\n  border-color: var(--color-accent);\n  background-color: var(--color-accent);\n}\n.card[data-state='checked'] .mark[data-kind='radio']::after {\n  background-color: var(--color-accent-ink);\n}\n\n.check {\n  font-size: calc(var(--_s) * 0.8);\n  opacity: 0;\n}\n.card[data-state='checked'] .check {\n  opacity: 1;\n}\n"],"mappings":""}

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

@@ -0,0 +1,2 @@
+export { ChoiceCards } from './ChoiceCards.js';
+export type { ChoiceCardsProps, ChoiceCardsSingleProps, ChoiceCardsMultipleProps, ChoiceCardsColumns, ChoiceCardOption, } from './ChoiceCards.js';

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

@@ -0,0 +1,12 @@
+import { type ChoiceCardsMultipleProps, type ChoiceCardsProps, type ChoiceCardsSingleProps } from '../ChoiceCards/index.js';
+import type { FieldLabelProps } from '../Field/index.js';
+type Shared = Omit<ChoiceCardsProps, 'invalid' | 'type' | 'value' | 'defaultValue' | 'onValueChange' | keyof FieldLabelProps>;
+export type ChoiceCardsFieldProps = FieldLabelProps & Shared & (ChoiceCardsSingleProps | ChoiceCardsMultipleProps);
+/**
+ * `ChoiceCards` under a `<Fieldset>` legend, with help, warning and error for the set.
+ * `className`/`style` go to the fieldset; `ref`, `id`, `name` and the rest go to the cards.
+ *
+ * <ChoiceCardsField type="single" label="Plan" name="plan" options={plans} columns={{ base: 1, sm: 3 }} />
+ */
+export declare const ChoiceCardsField: import("react").ForwardRefExoticComponent<ChoiceCardsFieldProps & import("react").RefAttributes<HTMLDivElement>>;
+export {};

package/dist/components/inputs/ChoiceCardsField/ChoiceCardsField.js

@@ -0,0 +1,24 @@
+import { toFieldsetProps as e } from "../CheckboxGroup/choice.js";
+import { Fieldset as t } from "../Fieldset/Fieldset.js";
+import { splitFieldLabelProps as n } from "../internal/fieldProps.js";
+import { ChoiceCards as r } from "../ChoiceCards/ChoiceCards.js";
+import { forwardRef as i } from "react";
+import { jsx as a } from "react/jsx-runtime";
+//#region src/components/inputs/ChoiceCardsField/ChoiceCardsField.tsx
+var o = i(function(i, o) {
+	let [s, c] = n(i), { className: l, style: u, disabled: d, ...f } = c;
+	return /* @__PURE__ */ a(t, {
+		...e(s),
+		disabled: d,
+		className: l,
+		style: u,
+		children: /* @__PURE__ */ a(r, {
+			ref: o,
+			...f
+		})
+	});
+});
+//#endregion
+export { o as ChoiceCardsField };
+
+//# sourceMappingURL=ChoiceCardsField.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ChoiceCardsField.js","names":["ChoiceCardsField","forwardRef","fieldProps","rest","splitFieldLabelProps","props","cardsProps","Fieldset","toFieldsetProps","ChoiceCards"],"sources":["../../../../src/components/inputs/ChoiceCardsField/ChoiceCardsField.tsx"],"sourcesContent":["import { forwardRef } from 'react'\nimport {\n  ChoiceCards,\n  type ChoiceCardsMultipleProps,\n  type ChoiceCardsProps,\n  type ChoiceCardsSingleProps,\n} from '#components/inputs/ChoiceCards'\nimport { toFieldsetProps } from '#components/inputs/CheckboxGroup/choice'\nimport type { FieldLabelProps } from '#components/inputs/Field'\nimport { Fieldset } from '#components/inputs/Fieldset'\nimport { splitFieldLabelProps } from '#components/inputs/internal/fieldProps'\n\ntype Shared = Omit<\n  ChoiceCardsProps,\n  'invalid' | 'type' | 'value' | 'defaultValue' | 'onValueChange' | keyof FieldLabelProps\n>\n\nexport type ChoiceCardsFieldProps = FieldLabelProps &\n  Shared &\n  (ChoiceCardsSingleProps | ChoiceCardsMultipleProps)\n\n/**\n * `ChoiceCards` under a `<Fieldset>` legend, with help, warning and error for the set.\n * `className`/`style` go to the fieldset; `ref`, `id`, `name` and the rest go to the cards.\n *\n * <ChoiceCardsField type=\"single\" label=\"Plan\" name=\"plan\" options={plans} columns={{ base: 1, sm: 3 }} />\n */\nexport const ChoiceCardsField = forwardRef<HTMLDivElement, ChoiceCardsFieldProps>(\n  function ChoiceCardsField(props, ref) {\n    const [fieldProps, rest] = splitFieldLabelProps(props)\n    const { className, style, disabled, ...cardsProps } = rest\n    return (\n      <Fieldset\n        {...toFieldsetProps(fieldProps)}\n        disabled={disabled}\n        className={className}\n        style={style}\n      >\n        <ChoiceCards ref={ref} {...(cardsProps as ChoiceCardsProps)} />\n      </Fieldset>\n    )\n  },\n)\n"],"mappings":";;;;;;;AA2BA,IAAaA,IAAmBC,EAC9B,SAA0B,GAAO,GAAK;CACpC,IAAM,CAACC,GAAYC,KAAQC,EAAqBC,CAAK,GAC/C,EAAE,cAAW,UAAO,aAAU,GAAGC,MAAeH;CACtD,OACE,kBAACI,GAAD;EACE,GAAIC,EAAgBN,CAAU;EACpB;EACC;EACJ;EAEP,UAAA,kBAACO,GAAD;GAAkB;GAAK,GAAKH;EAAkC,CAAA;CACtD,CAAA;AAEd,CACF"}

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

@@ -0,0 +1,2 @@
+export { ChoiceCardsField } from './ChoiceCardsField.js';
+export type { ChoiceCardsFieldProps } from './ChoiceCardsField.js';

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

@@ -0,0 +1,12 @@
+import { type FieldLabelProps } from '../Field/index.js';
+import { type ColorInputProps } from '../ColorInput/index.js';
+export interface ColorFieldProps extends FieldLabelProps, Omit<ColorInputProps, 'invalid' | keyof FieldLabelProps> {
+}
+/**
+ * Label + ColorInput + description + error. Input props (`value`, `swatches`,
+ * `swatchesOnly`…) and the ref go to the hex input (or the swatch group with
+ * `swatchesOnly`); `className`/`style` go to the wrapper.
+ *
+ * <ColorField label="Label colour" swatches={palette} value={colour} onValueChange={setColour} />
+ */
+export declare const ColorField: import("react").ForwardRefExoticComponent<ColorFieldProps & import("react").RefAttributes<HTMLElement>>;

package/dist/components/inputs/ColorField/ColorField.js

@@ -0,0 +1,26 @@
+import { Field as e } from "../Field/Field.js";
+import { splitFieldLabelProps as t } from "../internal/fieldProps.js";
+import { ColorInput as n } from "../ColorInput/ColorInput.js";
+import { forwardRef as r } from "react";
+import { jsx as i } from "react/jsx-runtime";
+//#region src/components/inputs/ColorField/ColorField.tsx
+var a = r(function(r, a) {
+	let [o, s] = t(r), { id: c, disabled: l, className: u, style: d, ...f } = s;
+	return /* @__PURE__ */ i(e, {
+		...o,
+		htmlFor: c,
+		disabled: l,
+		className: u,
+		style: d,
+		children: /* @__PURE__ */ i(n, {
+			ref: a,
+			id: c,
+			disabled: l,
+			...f
+		})
+	});
+});
+//#endregion
+export { a as ColorField };
+
+//# sourceMappingURL=ColorField.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ColorField.js","names":["ColorField","forwardRef","fieldProps","rest","splitFieldLabelProps","props","inputRest","Field","id","ColorInput"],"sources":["../../../../src/components/inputs/ColorField/ColorField.tsx"],"sourcesContent":["import { forwardRef } from 'react'\nimport { Field, type FieldLabelProps } from '#components/inputs/Field'\nimport { ColorInput, type ColorInputProps } from '#components/inputs/ColorInput'\nimport { splitFieldLabelProps } from '#components/inputs/internal/fieldProps'\n\nexport interface ColorFieldProps\n  extends FieldLabelProps, Omit<ColorInputProps, 'invalid' | keyof FieldLabelProps> {}\n\n/**\n * Label + ColorInput + description + error. Input props (`value`, `swatches`,\n * `swatchesOnly`…) and the ref go to the hex input (or the swatch group with\n * `swatchesOnly`); `className`/`style` go to the wrapper.\n *\n * <ColorField label=\"Label colour\" swatches={palette} value={colour} onValueChange={setColour} />\n */\nexport const ColorField = forwardRef<HTMLElement, ColorFieldProps>(function ColorField(props, ref) {\n  const [fieldProps, rest] = splitFieldLabelProps(props)\n  const { id, disabled, className, style, ...inputRest } = rest\n  return (\n    <Field {...fieldProps} htmlFor={id} disabled={disabled} className={className} style={style}>\n      <ColorInput ref={ref} id={id} disabled={disabled} {...inputRest} />\n    </Field>\n  )\n})\n"],"mappings":";;;;;;AAeA,IAAaA,IAAaC,EAAyC,SAAoB,GAAO,GAAK;CACjG,IAAM,CAACC,GAAYC,KAAQC,EAAqBC,CAAK,GAC/C,EAAE,OAAI,aAAU,cAAW,UAAO,GAAGC,MAAcH;CACzD,OACE,kBAACI,GAAD;EAAO,GAAIL;EAAY,SAASM;EAAc;EAAqB;EAAkB;EACnF,UAAA,kBAACC,GAAD;GAAiB;GAAS;GAAc;GAAU,GAAIH;EAAY,CAAA;CAC7D,CAAA;AAEX,CAAC"}

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

@@ -0,0 +1,2 @@
+export { ColorField } from './ColorField.js';
+export type { ColorFieldProps } from './ColorField.js';

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

@@ -0,0 +1,30 @@
+import { type InputProps } from '../Input/index.js';
+export interface ColorSwatch {
+    /** Any `#rgb` / `#rrggbb`; emitted normalised (`#rrggbb`, lowercase). */
+    value: string;
+    /** The colour's name, read by assistive tech and shown on hover ("Coral"). Required. */
+    label: string;
+}
+export interface ColorInputProps extends Omit<InputProps, 'type' | 'value' | 'defaultValue' | 'onChange' | 'leading'> {
+    /** `#rrggbb` (lowercase), or `''` when empty. */
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (hex: string) => void;
+    /** Preset colours, shown as a row of swatch radios under the input. */
+    swatches?: readonly ColorSwatch[];
+    /** Only the swatches — no hex input or picker (a label colour from a fixed palette). */
+    swatchesOnly?: boolean;
+    /** Accessible name of the native colour picker button. Default `'Choose colour'`. */
+    pickerLabel?: string;
+    /** Accessible name appended to the field label for the swatch group. Default `'presets'`. */
+    swatchesLabel?: string;
+}
+/**
+ * A colour as a hex code: a native colour picker as the leading swatch, the `#rrggbb`
+ * text after it (normalised on blur — `#ABC` becomes `#aabbcc`), and optional named
+ * preset swatches as a radio group. The ref goes to the hex input (or, with
+ * `swatchesOnly`, to the swatch group); `name` submits the hex.
+ *
+ * <ColorInput swatches={[{ value: '#ff6b57', label: 'Coral' }]} value={colour} onValueChange={setColour} />
+ */
+export declare const ColorInput: import("react").ForwardRefExoticComponent<ColorInputProps & import("react").RefAttributes<HTMLElement>>;

package/dist/components/inputs/ColorInput/ColorInput.js

@@ -0,0 +1,149 @@
+import { cx as e } from "../../../utils/cx.js";
+import { markFieldAware as t, useResolvedField as n } from "../internal/FieldContext.js";
+import { Input as ee } from "../Input/Input.js";
+import { normaliseHex as r } from "./colorFormat.js";
+import i from "./ColorInput.module.js";
+import { forwardRef as a, useEffect as o, useId as te, useRef as s, useState as c } from "react";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+import { RadioGroup as d } from "radix-ui";
+//#region src/components/inputs/ColorInput/ColorInput.tsx
+var f = t(a(function({ value: t, defaultValue: a, onValueChange: f, swatches: p, swatchesOnly: m = !1, pickerLabel: h = "Choose colour", swatchesLabel: g = "presets", name: _, form: v, size: y = "md", id: b, disabled: x, readOnly: S, required: C, invalid: w, className: T, style: E, onBlur: D, onFocus: O, onKeyDown: ne, "aria-describedby": k, "aria-invalid": A, ...j }, M) {
+	let N = n({
+		id: b,
+		describedBy: k,
+		invalid: w,
+		ariaInvalid: A,
+		disabled: x,
+		readOnly: S,
+		required: C
+	}), P = te(), F = s(null), I = `${P}swatches`, L = t !== void 0, [R, re] = c(() => r(a ?? "") ?? ""), z = L ? r(t) ?? t : R, [B, V] = c(z), [H, U] = c(!1);
+	o(() => {
+		H || V(z);
+	}, [z, H]);
+	let W = !N.disabled && !N.readOnly, G = (e) => {
+		L || re(e), e !== z && f?.(e);
+	}, K = () => {
+		let e = B.trim();
+		if (e === "") {
+			G(""), V("");
+			return;
+		}
+		let t = r(e);
+		t && G(t), V(t ?? z);
+	}, q = (e) => {
+		let t = e.target.value;
+		V(t);
+		let n = /^#?[0-9a-f]{6}$/i.test(t.trim()) ? r(t) : null;
+		n ? G(n) : t.trim() === "" && G("");
+	}, J = (e) => !(e.relatedTarget instanceof Node && F.current?.contains(e.relatedTarget)), Y = (e) => {
+		K(), U(!1), J(e) && D?.(e);
+	}, X = (e) => {
+		J(e) && D?.(e);
+	}, Z = p?.find((e) => r(e.value) === z), ie = r((Z ?? p?.[0])?.value ?? ""), Q = m && z !== "" && !Z, $ = p && p.length > 0 ? /* @__PURE__ */ u(d.Root, {
+		ref: m ? M : void 0,
+		className: i.swatches,
+		orientation: "horizontal",
+		loop: !0,
+		value: Z ? r(Z.value) ?? "" : "",
+		onValueChange: (e) => {
+			W && G(e);
+		},
+		disabled: N.disabled,
+		name: m && !Q ? _ : void 0,
+		required: m && !Q ? N.required : void 0,
+		"aria-required": m && N.required || void 0,
+		"aria-labelledby": N.labelId ? m ? N.labelId : `${N.labelId} ${I}` : I,
+		"aria-describedby": m ? N.describedBy : void 0,
+		"aria-invalid": m && N.invalid || void 0,
+		"aria-readonly": N.readOnly || void 0,
+		"aria-busy": m && N.busy || void 0,
+		onBlur: X,
+		children: [/* @__PURE__ */ l("span", {
+			id: I,
+			hidden: !0,
+			children: g
+		}), p.map((e) => {
+			let t = r(e.value) ?? e.value;
+			return /* @__PURE__ */ l(d.Item, {
+				value: t,
+				id: m && t === ie ? N.id : void 0,
+				className: i.swatch,
+				"aria-label": e.label,
+				title: e.label,
+				"data-readonly": N.readOnly || void 0,
+				style: { "--_swatch": t }
+			}, t);
+		})]
+	}) : null;
+	return m ? /* @__PURE__ */ u("div", {
+		ref: F,
+		className: e(i.root, T),
+		style: E,
+		"data-size": y,
+		"data-swatches-only": "",
+		children: [$, Q && _ != null ? /* @__PURE__ */ l("input", {
+			type: "hidden",
+			name: _,
+			form: v,
+			value: z,
+			disabled: N.disabled
+		}) : null]
+	}) : /* @__PURE__ */ u("div", {
+		ref: F,
+		className: e(i.root, T),
+		style: E,
+		"data-size": y,
+		children: [/* @__PURE__ */ l(ee, {
+			ref: M,
+			...j,
+			className: i.box,
+			id: b,
+			size: y,
+			numeric: !1,
+			type: "text",
+			name: _,
+			form: v,
+			disabled: x,
+			readOnly: S,
+			required: C,
+			invalid: w,
+			"aria-describedby": k,
+			"aria-invalid": A,
+			maxLength: 7,
+			autoComplete: "off",
+			autoCapitalize: "off",
+			autoCorrect: "off",
+			spellCheck: !1,
+			placeholder: j.placeholder ?? "#rrggbb",
+			value: B,
+			onChange: q,
+			onFocus: (e) => {
+				U(!0), O?.(e);
+			},
+			onBlur: Y,
+			onKeyDown: (e) => {
+				ne?.(e), !e.defaultPrevented && e.key === "Enter" && K();
+			},
+			leading: /* @__PURE__ */ l("span", {
+				className: i.picker,
+				"data-empty": z === "" || void 0,
+				children: /* @__PURE__ */ l("input", {
+					type: "color",
+					className: i.pickerInput,
+					"aria-label": h,
+					value: z || "#000000",
+					disabled: !W,
+					tabIndex: N.readOnly ? -1 : void 0,
+					onChange: (e) => {
+						G(e.target.value.toLowerCase());
+					},
+					onBlur: X
+				})
+			})
+		}), $]
+	});
+}));
+//#endregion
+export { f as ColorInput };
+
+//# sourceMappingURL=ColorInput.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ColorInput.js","names":["styles","ColorInput_module_default","ColorInput","markFieldAware","forwardRef","valueProp","idProp","disabledProp","readOnlyProp","requiredProp","describedByProp","ariaInvalid","rest","field","useResolvedField","autoId","useId","rootRef","useRef","swatchesLabelId","isControlled","internal","setInternal","useState","normaliseHex","defaultValue","value","draft","setDraft","editing","setEditing","editable","setValue","next","onValueChange","commit","text","hex","handleTextChange","event","leftControl","handleTextBlur","onBlur","handleOtherBlur","matching","swatches","s","labelTarget","offPalette","swatchesOnly","swatchGroup","RadioGroup","ref","name","swatchesLabel","swatch","cx","className","size","Input","onFocus","onKeyDown","pickerLabel"],"sources":["../../../../src/components/inputs/ColorInput/ColorInput.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useEffect,\n  useId,\n  useRef,\n  useState,\n  type ChangeEvent,\n  type CSSProperties,\n  type FocusEvent,\n  type KeyboardEvent,\n  type Ref,\n} from 'react'\nimport { RadioGroup } from 'radix-ui'\nimport { cx } from '#utils/cx'\nimport { Input, type InputProps } from '#components/inputs/Input'\nimport { markFieldAware, useResolvedField } from '#components/inputs/internal/FieldContext'\nimport { normaliseHex } from './colorFormat'\nimport styles from './ColorInput.module.css'\n\nexport interface ColorSwatch {\n  /** Any `#rgb` / `#rrggbb`; emitted normalised (`#rrggbb`, lowercase). */\n  value: string\n  /** The colour's name, read by assistive tech and shown on hover (\"Coral\"). Required. */\n  label: string\n}\n\nexport interface ColorInputProps extends Omit<\n  InputProps,\n  'type' | 'value' | 'defaultValue' | 'onChange' | 'leading'\n> {\n  /** `#rrggbb` (lowercase), or `''` when empty. */\n  value?: string\n  defaultValue?: string\n  onValueChange?: (hex: string) => void\n  /** Preset colours, shown as a row of swatch radios under the input. */\n  swatches?: readonly ColorSwatch[]\n  /** Only the swatches — no hex input or picker (a label colour from a fixed palette). */\n  swatchesOnly?: boolean\n  /** Accessible name of the native colour picker button. Default `'Choose colour'`. */\n  pickerLabel?: string\n  /** Accessible name appended to the field label for the swatch group. Default `'presets'`. */\n  swatchesLabel?: string\n}\n\n/**\n * A colour as a hex code: a native colour picker as the leading swatch, the `#rrggbb`\n * text after it (normalised on blur — `#ABC` becomes `#aabbcc`), and optional named\n * preset swatches as a radio group. The ref goes to the hex input (or, with\n * `swatchesOnly`, to the swatch group); `name` submits the hex.\n *\n * <ColorInput swatches={[{ value: '#ff6b57', label: 'Coral' }]} value={colour} onValueChange={setColour} />\n */\nexport const ColorInput = markFieldAware(\n  forwardRef<HTMLElement, ColorInputProps>(function ColorInput(\n    {\n      value: valueProp,\n      defaultValue,\n      onValueChange,\n      swatches,\n      swatchesOnly = false,\n      pickerLabel = 'Choose colour',\n      swatchesLabel = 'presets',\n      name,\n      form,\n      size = 'md',\n      id: idProp,\n      disabled: disabledProp,\n      readOnly: readOnlyProp,\n      required: requiredProp,\n      invalid,\n      className,\n      style,\n      onBlur,\n      onFocus,\n      onKeyDown,\n      'aria-describedby': describedByProp,\n      'aria-invalid': ariaInvalid,\n      ...rest\n    },\n    ref,\n  ) {\n    const field = useResolvedField({\n      id: idProp,\n      describedBy: describedByProp,\n      invalid,\n      ariaInvalid,\n      disabled: disabledProp,\n      readOnly: readOnlyProp,\n      required: requiredProp,\n    })\n    const autoId = useId()\n    const rootRef = useRef<HTMLDivElement>(null)\n    const swatchesLabelId = `${autoId}swatches`\n    const isControlled = valueProp !== undefined\n    const [internal, setInternal] = useState(() => normaliseHex(defaultValue ?? '') ?? '')\n    const value = isControlled ? (normaliseHex(valueProp) ?? valueProp) : internal\n    const [draft, setDraft] = useState(value)\n    const [editing, setEditing] = useState(false)\n\n    useEffect(() => {\n      if (!editing) setDraft(value)\n    }, [value, editing])\n\n    const editable = !field.disabled && !field.readOnly\n\n    const setValue = (next: string) => {\n      if (!isControlled) setInternal(next)\n      if (next !== value) onValueChange?.(next)\n    }\n\n    const commit = () => {\n      const text = draft.trim()\n      if (text === '') {\n        setValue('')\n        setDraft('')\n        return\n      }\n      const hex = normaliseHex(text)\n      if (hex) setValue(hex)\n      setDraft(hex ?? value)\n    }\n\n    const handleTextChange = (event: ChangeEvent<HTMLInputElement>) => {\n      const text = event.target.value\n      setDraft(text)\n      const hex = /^#?[0-9a-f]{6}$/i.test(text.trim()) ? normaliseHex(text) : null\n      if (hex) setValue(hex)\n      else if (text.trim() === '') setValue('')\n    }\n\n    // Blur fires once focus leaves the whole control (picker, text, swatches).\n    const leftControl = (event: FocusEvent<HTMLElement>) =>\n      !(event.relatedTarget instanceof Node && rootRef.current?.contains(event.relatedTarget))\n\n    const handleTextBlur = (event: FocusEvent<HTMLInputElement>) => {\n      commit()\n      setEditing(false)\n      if (leftControl(event)) onBlur?.(event)\n    }\n    const handleOtherBlur = (event: FocusEvent<HTMLElement>) => {\n      // Same event, typed for the input's handler: the target is the picker or a swatch.\n      if (leftControl(event)) onBlur?.(event as unknown as FocusEvent<HTMLInputElement>)\n    }\n\n    const matching = swatches?.find((s) => normaliseHex(s.value) === value)\n    // With swatches only, the Field label points at the swatch a Tab would land on.\n    const labelTarget = normaliseHex((matching ?? swatches?.[0])?.value ?? '')\n    // Swatches only, with a value no swatch matches (saved data, a retired colour): no radio is\n    // checked, so a hidden input submits it instead — and the radios get no name, so it's never\n    // submitted twice. A non-empty value satisfies `required`, so the radios drop that too.\n    const offPalette = swatchesOnly && value !== '' && !matching\n    const swatchGroup =\n      swatches && swatches.length > 0 ? (\n        <RadioGroup.Root\n          ref={swatchesOnly ? (ref as Ref<HTMLDivElement>) : undefined}\n          className={styles.swatches}\n          orientation=\"horizontal\"\n          loop\n          value={matching ? (normaliseHex(matching.value) ?? '') : ''}\n          onValueChange={(next) => {\n            if (editable) setValue(next)\n          }}\n          disabled={field.disabled}\n          // Swatches only: the radios themselves submit `name` and carry `required` (Radix\n          // renders named native radios inside a form). Otherwise the hex input does.\n          name={swatchesOnly && !offPalette ? name : undefined}\n          required={swatchesOnly && !offPalette ? field.required : undefined}\n          aria-required={swatchesOnly ? field.required || undefined : undefined}\n          // Swatches only: the group *is* the control, named by the Field label alone. Beside the\n          // hex input it is a second control, \"Label colour presets\".\n          aria-labelledby={\n            field.labelId\n              ? swatchesOnly\n                ? field.labelId\n                : `${field.labelId} ${swatchesLabelId}`\n              : swatchesLabelId\n          }\n          aria-describedby={swatchesOnly ? field.describedBy : undefined}\n          aria-invalid={swatchesOnly ? field.invalid || undefined : undefined}\n          aria-readonly={field.readOnly || undefined}\n          aria-busy={swatchesOnly ? field.busy || undefined : undefined}\n          onBlur={handleOtherBlur}\n        >\n          <span id={swatchesLabelId} hidden>\n            {swatchesLabel}\n          </span>\n          {swatches.map((swatch) => {\n            const hex = normaliseHex(swatch.value) ?? swatch.value\n            return (\n              <RadioGroup.Item\n                key={hex}\n                value={hex}\n                id={swatchesOnly && hex === labelTarget ? field.id : undefined}\n                className={styles.swatch}\n                aria-label={swatch.label}\n                title={swatch.label}\n                data-readonly={field.readOnly || undefined}\n                // The swatch colour is data, not styling — the one place a raw colour renders.\n                style={{ '--_swatch': hex } as CSSProperties}\n              />\n            )\n          })}\n        </RadioGroup.Root>\n      ) : null\n\n    if (swatchesOnly) {\n      return (\n        <div\n          ref={rootRef}\n          className={cx(styles.root, className)}\n          style={style}\n          data-size={size}\n          data-swatches-only=\"\"\n        >\n          {swatchGroup}\n          {offPalette && name != null ? (\n            <input type=\"hidden\" name={name} form={form} value={value} disabled={field.disabled} />\n          ) : null}\n        </div>\n      )\n    }\n\n    return (\n      <div ref={rootRef} className={cx(styles.root, className)} style={style} data-size={size}>\n        <Input\n          ref={ref as Ref<HTMLInputElement>}\n          {...rest}\n          className={styles.box}\n          id={idProp}\n          size={size}\n          numeric={false}\n          type=\"text\"\n          name={name}\n          form={form}\n          disabled={disabledProp}\n          readOnly={readOnlyProp}\n          required={requiredProp}\n          invalid={invalid}\n          aria-describedby={describedByProp}\n          aria-invalid={ariaInvalid}\n          maxLength={7}\n          autoComplete=\"off\"\n          autoCapitalize=\"off\"\n          autoCorrect=\"off\"\n          spellCheck={false}\n          placeholder={rest.placeholder ?? '#rrggbb'}\n          value={draft}\n          onChange={handleTextChange}\n          onFocus={(event) => {\n            setEditing(true)\n            onFocus?.(event)\n          }}\n          onBlur={handleTextBlur}\n          onKeyDown={(event: KeyboardEvent<HTMLInputElement>) => {\n            onKeyDown?.(event)\n            if (!event.defaultPrevented && event.key === 'Enter') commit()\n          }}\n          leading={\n            <span className={styles.picker} data-empty={value === '' || undefined}>\n              <input\n                type=\"color\"\n                className={styles.pickerInput}\n                aria-label={pickerLabel}\n                value={value || '#000000'}\n                disabled={!editable}\n                tabIndex={field.readOnly ? -1 : undefined}\n                onChange={(event) => {\n                  setValue(event.target.value.toLowerCase())\n                }}\n                onBlur={handleOtherBlur}\n              />\n            </span>\n          }\n        />\n        {swatchGroup}\n      </div>\n    )\n  }),\n)\n"],"mappings":"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"}

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

@@ -0,0 +1,13 @@
+//#region src/components/inputs/ColorInput/ColorInput.module.css
+var e = "kiln-ColorInput__root", t = "kiln-ColorInput__box", n = "kiln-ColorInput__picker", r = "kiln-ColorInput__pickerInput", i = "kiln-ColorInput__swatches", a = "kiln-ColorInput__swatch", o = {
+	root: e,
+	box: t,
+	picker: n,
+	pickerInput: r,
+	swatches: i,
+	swatch: a
+};
+//#endregion
+export { t as box, o as default, n as picker, r as pickerInput, e as root, a as swatch, i as swatches };
+
+//# sourceMappingURL=ColorInput.module.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ColorInput.module.js","names":["root","box","picker","pickerInput","swatches","swatch","ColorInput_module_default"],"sources":["../../../../src/components/inputs/ColorInput/ColorInput.module.css"],"sourcesContent":["/*\n * The hex box is Input's; this seats the native colour picker as its leading swatch and\n * lays out the preset swatches under it. A swatch's fill is the colour itself (data, set\n * inline as --_swatch) — the one place a raw colour renders.\n *\n * Component tokens:\n *   --color-swatch-radius   default var(--radius-chip)\n */\n.root {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-2);\n  min-inline-size: 0;\n}\n\n.box {\n  max-inline-size: 100%;\n}\n\n/* The picker: a small square of the current colour, sized to the text. */\n.picker {\n  position: relative;\n  display: inline-flex;\n  flex: none;\n  inline-size: 1.25em;\n  block-size: 1.25em;\n  border: var(--border-width) solid var(--color-line);\n  border-radius: var(--color-swatch-radius, var(--radius-chip));\n  overflow: hidden;\n}\n.picker[data-empty] {\n  background-color: var(--color-surface-sunken);\n}\n\n.pickerInput {\n  inline-size: 100%;\n  block-size: 100%;\n  margin: 0;\n  padding: 0;\n  border: 0;\n  background: transparent;\n  cursor: pointer;\n  appearance: none;\n}\n.pickerInput:disabled {\n  cursor: not-allowed;\n}\n.pickerInput::-webkit-color-swatch-wrapper {\n  padding: 0;\n}\n.pickerInput::-webkit-color-swatch {\n  border: 0;\n  border-radius: 0;\n}\n.pickerInput::-moz-color-swatch {\n  border: 0;\n  border-radius: 0;\n}\n/* No colour yet: hide the browser's black default so the sunken fill reads as empty. */\n.picker[data-empty] .pickerInput {\n  opacity: 0;\n}\n.pickerInput:focus-visible {\n  outline: none;\n}\n.picker:has(.pickerInput:focus-visible) {\n  outline: 2px solid var(--color-focus);\n  outline-offset: 2px;\n}\n\n/* Presets */\n.swatches {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--space-2);\n}\n\n.swatch {\n  --_size: var(--control-sm);\n  --_swatch: transparent;\n\n  all: unset;\n  box-sizing: border-box;\n  inline-size: var(--_size);\n  block-size: var(--_size);\n  border: var(--border-width) solid var(--color-line);\n  border-radius: var(--color-swatch-radius, var(--radius-chip));\n  background-color: var(--_swatch);\n  cursor: pointer;\n  transition: box-shadow var(--dur-1) var(--ease-out);\n}\n.root[data-size='sm'] .swatch {\n  --_size: calc(var(--control-sm) * 0.75);\n}\n.root[data-size='lg'] .swatch {\n  --_size: var(--control-md);\n}\n\n/* Checked: an ink edge with a surface ring inside it, so it reads on any colour. */\n.swatch[data-state='checked'] {\n  border: 2px solid var(--color-ink);\n  box-shadow: inset 0 0 0 2px var(--color-surface);\n}\n\n.swatch:focus-visible {\n  outline: 2px solid var(--color-focus);\n  outline-offset: 3px;\n}\n\n.swatch[data-disabled] {\n  cursor: not-allowed;\n  opacity: 0.45;\n}\n.swatch[data-readonly] {\n  cursor: default;\n}\n"],"mappings":""}

package/dist/components/inputs/ColorInput/colorFormat.d.ts

@@ -0,0 +1,2 @@
+/** `#ABC` / `abc` / `#AABBCC` → `#aabbcc`; `null` when it isn't a hex colour. */
+export declare function normaliseHex(input: string): string | null;

package/dist/components/inputs/ColorInput/colorFormat.js

@@ -0,0 +1,10 @@
+//#region src/components/inputs/ColorInput/colorFormat.ts
+var e = /^#?([0-9a-f]{3}|[0-9a-f]{6})$/i;
+function t(t) {
+	let n = e.exec(t.trim())?.[1]?.toLowerCase();
+	return n ? `#${n.length === 3 ? n.split("").map((e) => e + e).join("") : n}` : null;
+}
+//#endregion
+export { t as normaliseHex };
+
+//# sourceMappingURL=colorFormat.js.map

package/dist/components/inputs/ColorInput/colorFormat.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"colorFormat.js","names":["HEX","normaliseHex","digits","input","d"],"sources":["../../../../src/components/inputs/ColorInput/colorFormat.ts"],"sourcesContent":["const HEX = /^#?([0-9a-f]{3}|[0-9a-f]{6})$/i\n\n/** `#ABC` / `abc` / `#AABBCC` → `#aabbcc`; `null` when it isn't a hex colour. */\nexport function normaliseHex(input: string): string | null {\n  const match = HEX.exec(input.trim())\n  const digits = match?.[1]?.toLowerCase()\n  if (!digits) return null\n  return `#${\n    digits.length === 3\n      ? digits\n          .split('')\n          .map((d) => d + d)\n          .join('')\n      : digits\n  }`\n}\n"],"mappings":";AAAA,IAAMA,IAAM;AAGZ,SAAgBC,EAAa,GAA8B;CAEzD,IAAMC,IADQF,EAAI,KAAKG,EAAM,KAAK,CACnB,CAAA,GAAQ,EAAE,EAAE,YAAY;CAEvC,OADKD,IACE,IACLA,EAAO,WAAW,IACdA,EACG,MAAM,EAAE,CAAC,CACT,KAAK,MAAME,IAAIA,CAAC,CAAC,CACjB,KAAK,EAAE,IACVF,MAPc;AAStB"}

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

@@ -0,0 +1,2 @@
+export { ColorInput } from './ColorInput.js';
+export type { ColorInputProps, ColorSwatch } from './ColorInput.js';

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

@@ -0,0 +1,74 @@
+import { type FocusEventHandler, type InputHTMLAttributes, type ReactNode } from 'react';
+import type { Size } from '../../../utils/tokens.js';
+export interface ComboboxOption {
+    value: string;
+    label: string;
+    /** A second, quieter line under the label. Also searched. */
+    description?: string;
+    /** Extra search terms that aren't shown ("USA", "Holland"). An exact keyword ranks first. */
+    keywords?: readonly string[];
+    /** Heading the option is listed under. Groups appear in order of their first option. */
+    group?: string;
+    disabled?: boolean;
+}
+export interface ComboboxBase extends Omit<InputHTMLAttributes<HTMLInputElement>, 'value' | 'defaultValue' | 'onChange' | 'size' | 'type' | 'multiple' | 'onBlur'> {
+    options: readonly ComboboxOption[];
+    /** The text in the box (the query). Controlled. */
+    inputValue?: string;
+    defaultInputValue?: string;
+    onInputValueChange?: (query: string) => void;
+    /**
+     * `auto` (default) filters and ranks `options` by the query. `none` shows `options` as
+     * given — for async search, where the loader has already filtered.
+     */
+    filter?: 'auto' | 'none';
+    /** Options are being fetched: a spinner in the box and `loadingMessage` in an empty list. */
+    loading?: boolean;
+    loadingMessage?: ReactNode;
+    /** Shown in the list when nothing matches. Default "No matches". */
+    emptyMessage?: ReactNode;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * Free text is allowed: whatever is typed becomes the value when committed (Enter, or
+     * leaving the field). A typed label that matches an option picks that option instead.
+     */
+    creatable?: boolean;
+    /** Shows a clear button while there's a value. */
+    clearable?: boolean;
+    /** Accessible name of the clear button. Default "Clear". */
+    clearLabel?: string;
+    size?: Size;
+    /** Critical border + `aria-invalid`. Inside a `<Field error>` this is set for you. */
+    invalid?: boolean;
+    /** Fires once focus leaves the whole control (input, chips, clear button, list). */
+    onBlur?: FocusEventHandler<HTMLElement>;
+}
+export interface ComboboxSingleProps extends ComboboxBase {
+    multiple?: false;
+    value?: string | null;
+    defaultValue?: string | null;
+    onValueChange?: (value: string | null) => void;
+}
+export interface ComboboxMultipleProps extends ComboboxBase {
+    multiple: true;
+    value?: readonly string[];
+    defaultValue?: readonly string[];
+    onValueChange?: (value: string[]) => void;
+    /** Once this many are chosen, the rest of the list is disabled. */
+    maxSelected?: number;
+    /** Accessible name of a chip's remove button. Default `Remove <label>`. */
+    removeLabel?: (label: string) => string;
+}
+export type ComboboxProps = ComboboxSingleProps | ComboboxMultipleProps;
+/**
+ * Type to filter, pick from a list (ARIA 1.2 combobox with a listbox popup). Single or
+ * `multiple` (chosen values become removable chips), `creatable` for free text, and
+ * async-ready: pass `filter="none"`, `loading` and the loader's results as `options`.
+ * The ref and native input props go to the text input; `className`/`style` go to the box.
+ *
+ * <Combobox options={projects} placeholder="Search projects" onValueChange={setProject} />
+ * <Combobox multiple options={labels} maxSelected={3} />
+ */
+export declare const Combobox: import("react").ForwardRefExoticComponent<ComboboxProps & import("react").RefAttributes<HTMLInputElement>>;