@mitcsutt/kiln-ui 0.1.0

package/dist/components/feedback/StatusDot/StatusDot.js

@@ -0,0 +1,26 @@
+import { cx as e } from "../../../utils/cx.js";
+import t from "./StatusDot.module.js";
+import { forwardRef as n } from "react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/components/feedback/StatusDot/StatusDot.tsx
+var a = n(function({ tone: n = "neutral", label: a, labelHidden: o = !1, size: s = "md", className: c, ...l }, u) {
+	return /* @__PURE__ */ i("span", {
+		ref: u,
+		className: e(t.status, c),
+		"data-tone": n,
+		"data-size": s,
+		"data-label-hidden": o || void 0,
+		...l,
+		children: [/* @__PURE__ */ r("span", {
+			className: t.dot,
+			"aria-hidden": "true"
+		}), /* @__PURE__ */ r("span", {
+			className: o ? t.hidden : t.label,
+			children: a
+		})]
+	});
+});
+//#endregion
+export { a as StatusDot };
+
+//# sourceMappingURL=StatusDot.js.map

package/dist/components/feedback/StatusDot/StatusDot.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StatusDot.js","names":["styles","StatusDot_module_default","StatusDot","forwardRef","rest","cx","className","tone","size","labelHidden","label"],"sources":["../../../../src/components/feedback/StatusDot/StatusDot.tsx"],"sourcesContent":["import { forwardRef, type HTMLAttributes, type ReactNode } from 'react'\nimport { cx } from '#utils/cx'\nimport type { Tone } from '#utils/tokens'\nimport styles from './StatusDot.module.css'\n\nexport interface StatusDotProps extends HTMLAttributes<HTMLSpanElement> {\n  /** State colour. Default `neutral`. */\n  tone?: Tone\n  /** What the colour means: \"Paid\", \"Through to the round of 32\", \"Deploying\". Always required — colour alone is not information. */\n  label: ReactNode\n  /** Keep the label for screen readers only (e.g. in a dense table with a legend). */\n  labelHidden?: boolean\n  size?: 'sm' | 'md'\n}\n\n/** A small static dot plus a label. For states that sit still; for \"happening now\" use LiveIndicator. */\nexport const StatusDot = forwardRef<HTMLSpanElement, StatusDotProps>(function StatusDot(\n  { tone = 'neutral', label, labelHidden = false, size = 'md', className, ...rest },\n  ref,\n) {\n  return (\n    <span\n      ref={ref}\n      className={cx(styles.status, className)}\n      data-tone={tone}\n      data-size={size}\n      data-label-hidden={labelHidden || undefined}\n      {...rest}\n    >\n      <span className={styles.dot} aria-hidden=\"true\" />\n      <span className={labelHidden ? styles.hidden : styles.label}>{label}</span>\n    </span>\n  )\n})\n"],"mappings":";;;;;AAgBA,IAAaE,IAAYC,EAA4C,SACnE,EAAE,UAAO,WAAW,UAAO,iBAAc,IAAO,UAAO,MAAM,cAAW,GAAGC,KAC3E,GACA;CACA,OACE,kBAAC,QAAD;EACO;EACL,WAAWC,EAAGL,EAAO,QAAQM,CAAS;EACtC,aAAWC;EACX,aAAWC;EACX,qBAAmBC,KAAe,KAAA;EAClC,GAAIL;EANN,UAAA,CAQE,kBAAC,QAAD;GAAM,WAAWJ,EAAO;GAAK,eAAY;EAAQ,CAAA,GACjD,kBAAC,QAAD;GAAM,WAAWS,IAAcT,EAAO,SAASA,EAAO;GAAQ,UAAAU;EAAY,CAAA,CACtE;;AAEV,CAAC"}

package/dist/components/feedback/StatusDot/StatusDot.module.js

@@ -0,0 +1,11 @@
+//#region src/components/feedback/StatusDot/StatusDot.module.css
+var e = "kiln-StatusDot__status", t = "kiln-StatusDot__dot", n = "kiln-StatusDot__label", r = "kiln-StatusDot__hidden", i = {
+	status: e,
+	dot: t,
+	label: n,
+	hidden: r
+};
+//#endregion
+export { i as default, t as dot, r as hidden, n as label, e as status };
+
+//# sourceMappingURL=StatusDot.module.js.map

package/dist/components/feedback/StatusDot/StatusDot.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StatusDot.module.js","names":["status","dot","label","hidden","StatusDot_module_default"],"sources":["../../../../src/components/feedback/StatusDot/StatusDot.module.css"],"sourcesContent":["/*\n * Component tokens (themes may set any of these on [data-theme]):\n *   --status-dot-size     default 0.55em\n *   --status-dot-radius   default 50%\n *   --status-dot-ring     keyline around the dot, default calc(var(--border-width) - 1px)\n */\n.status {\n  --_c: var(--color-ink-subtle);\n\n  display: inline-flex;\n  align-items: center;\n  gap: 0.5em;\n  font-family: var(--font-text);\n  font-size: var(--text-sm);\n  line-height: var(--leading-snug);\n  color: var(--color-ink-muted);\n  vertical-align: middle;\n}\n.status[data-size='sm'] {\n  font-size: var(--text-xs);\n}\n\n.status[data-tone='accent'] {\n  --_c: var(--color-accent);\n}\n.status[data-tone='positive'] {\n  --_c: var(--tone-positive);\n}\n.status[data-tone='caution'] {\n  --_c: var(--tone-caution);\n}\n.status[data-tone='critical'] {\n  --_c: var(--tone-critical);\n}\n.status[data-tone='info'] {\n  --_c: var(--tone-info);\n}\n\n.dot {\n  /* Keyline ring: 0 in hairline themes, 1px of ink where the theme draws 2px rules. */\n  box-shadow: 0 0 0 var(--status-dot-ring, calc(var(--border-width) - 1px)) var(--color-line-strong);\n  flex: none;\n  inline-size: var(--status-dot-size, 0.55em);\n  block-size: var(--status-dot-size, 0.55em);\n  border-radius: var(--status-dot-radius, 50%);\n  background: var(--_c);\n}\n\n.label {\n  min-inline-size: 0;\n}\n\n.hidden {\n  position: absolute;\n  inline-size: 1px;\n  block-size: 1px;\n  margin: -1px;\n  padding: 0;\n  overflow: hidden;\n  clip-path: inset(50%);\n  white-space: nowrap;\n  border: 0;\n}\n"],"mappings":""}

package/dist/components/feedback/StatusDot/index.d.ts

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

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

@@ -0,0 +1,11 @@
+import { type FieldLabelProps } from '../Field/index.js';
+import { type AmountInputProps } from '../AmountInput/index.js';
+export interface AmountFieldProps extends FieldLabelProps, Omit<AmountInputProps, 'invalid' | keyof FieldLabelProps> {
+}
+/**
+ * Label + AmountInput + description + error. Input props (`currency`, `unit`, `value`…)
+ * and the ref go to the text input; `className`/`style` go to the wrapper.
+ *
+ * <AmountField label="Monthly retainer" currency="GBP" unit="minor" value={retainer} onValueChange={setRetainer} />
+ */
+export declare const AmountField: import("react").ForwardRefExoticComponent<AmountFieldProps & import("react").RefAttributes<HTMLInputElement>>;

package/dist/components/inputs/AmountField/AmountField.js

@@ -0,0 +1,26 @@
+import { Field as e } from "../Field/Field.js";
+import { splitFieldLabelProps as t } from "../internal/fieldProps.js";
+import { AmountInput as n } from "../AmountInput/AmountInput.js";
+import { forwardRef as r } from "react";
+import { jsx as i } from "react/jsx-runtime";
+//#region src/components/inputs/AmountField/AmountField.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 AmountField };
+
+//# sourceMappingURL=AmountField.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AmountField.js","names":["AmountField","forwardRef","fieldProps","rest","splitFieldLabelProps","props","inputRest","Field","id","AmountInput"],"sources":["../../../../src/components/inputs/AmountField/AmountField.tsx"],"sourcesContent":["import { forwardRef } from 'react'\nimport { Field, type FieldLabelProps } from '#components/inputs/Field'\nimport { AmountInput, type AmountInputProps } from '#components/inputs/AmountInput'\nimport { splitFieldLabelProps } from '#components/inputs/internal/fieldProps'\n\nexport interface AmountFieldProps\n  extends FieldLabelProps, Omit<AmountInputProps, 'invalid' | keyof FieldLabelProps> {}\n\n/**\n * Label + AmountInput + description + error. Input props (`currency`, `unit`, `value`…)\n * and the ref go to the text input; `className`/`style` go to the wrapper.\n *\n * <AmountField label=\"Monthly retainer\" currency=\"GBP\" unit=\"minor\" value={retainer} onValueChange={setRetainer} />\n */\nexport const AmountField = forwardRef<HTMLInputElement, AmountFieldProps>(\n  function AmountField(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        <AmountInput ref={ref} id={id} disabled={disabled} {...inputRest} />\n      </Field>\n    )\n  },\n)\n"],"mappings":";;;;;;AAcA,IAAaA,IAAcC,EACzB,SAAqB,GAAO,GAAK;CAC/B,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;GAAkB;GAAS;GAAc;GAAU,GAAIH;EAAY,CAAA;CAC9D,CAAA;AAEX,CACF"}

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

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

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

@@ -0,0 +1,38 @@
+import { type InputProps } from '../Input/index.js';
+export type AmountUnit = 'major' | 'minor';
+export type AmountCurrencyDisplay = 'symbol' | 'code' | 'both' | 'none';
+export interface AmountInputProps extends Omit<InputProps, 'type' | 'value' | 'defaultValue' | 'onChange' | 'numeric' | 'leading' | 'trailing' | 'min' | 'max'> {
+    /** The amount in `unit`s, or `null` when empty. */
+    value?: number | null;
+    defaultValue?: number | null;
+    /** Called while typing (on every text that parses) and on commit. `null` when cleared. */
+    onValueChange?: (value: number | null) => void;
+    /** ISO 4217 code — sets the symbol and the number of decimals (AUD 2, JPY 0, BHD 3). */
+    currency: string;
+    /** Locale for parsing and formatting. Defaults to the browser's. */
+    locale?: string;
+    /**
+     * `major` (default) — dollars as a number (`1450.5`).
+     * `minor` — integer cents (`145050`): recommended for money, never a float.
+     */
+    unit?: AmountUnit;
+    /** Accept a leading minus (refunds, adjustments). Default `false`. */
+    allowNegative?: boolean;
+    /** `symbol` (default) leads with "$"; `code` trails "AUD"; `both`; or `none`. */
+    showCurrency?: AmountCurrencyDisplay;
+    /**
+     * Bounds, in `unit`s, for form validation. The input never clamps money on its own —
+     * a silently changed amount is worse than an error message.
+     */
+    min?: number;
+    max?: number;
+}
+/**
+ * Money, typed as text (a textbox, not a spinbutton — arrow keys shouldn't nudge an invoice
+ * total). Decimals come from the currency; grouped when blurred ("1,450.00"), raw while
+ * focused ("1450.00"). Tabular and right-aligned like every amount. The ref goes to the
+ * text input; `name` is submitted as a plain number in `unit`s.
+ *
+ * <AmountInput currency="AUD" unit="minor" value={retainerCents} onValueChange={setRetainerCents} />
+ */
+export declare const AmountInput: import("react").ForwardRefExoticComponent<AmountInputProps & import("react").RefAttributes<HTMLInputElement>>;

package/dist/components/inputs/AmountInput/AmountInput.js

@@ -0,0 +1,99 @@
+import { joinIds as e } from "../internal/refs.js";
+import { markFieldAware as t, useResolvedField as n } from "../internal/FieldContext.js";
+import { Input as r } from "../Input/Input.js";
+import { parseMinorUnits as i } from "./amountFormat.js";
+import { forwardRef as a, useEffect as o, useId as s, useMemo as c, useState as l } from "react";
+import { Fragment as u, jsx as d, jsxs as f } from "react/jsx-runtime";
+//#region src/components/inputs/AmountInput/AmountInput.tsx
+function p(e, t) {
+	try {
+		let n = new Intl.NumberFormat(t, {
+			style: "currency",
+			currency: e
+		});
+		return {
+			digits: n.resolvedOptions().maximumFractionDigits ?? 2,
+			symbol: n.formatToParts(0).find((e) => e.type === "currency")?.value ?? e
+		};
+	} catch {
+		return {
+			digits: 2,
+			symbol: e
+		};
+	}
+}
+var m = (e, t, n) => Math.round(t === "minor" ? e : Number(`${String(e)}e${String(n)}`)), h = (e, t, n) => t === "minor" ? e : Number(`${String(e)}e-${String(n)}`), g = t(a(function({ value: t, defaultValue: a, onValueChange: g, currency: _, locale: v, unit: y = "major", allowNegative: b = !1, showCurrency: x = "symbol", min: ee, max: te, name: S, form: C, disabled: w, onFocus: T, onBlur: E, onKeyDown: D, "aria-describedby": O, ...k }, ne) {
+	let A = `${s()}currency`, j = n({ disabled: w }), { digits: M, symbol: N } = c(() => p(_, v), [_, v]), P = t !== void 0, [F, I] = l(a ?? null), L = P ? t : F, R = L == null ? null : m(L, y, M), [z, B] = l(!1), [V, H] = l(""), U = c(() => new Intl.NumberFormat(v, {
+		minimumFractionDigits: M,
+		maximumFractionDigits: M
+	}), [v, M]), W = c(() => new Intl.NumberFormat(v, {
+		minimumFractionDigits: M,
+		maximumFractionDigits: M,
+		useGrouping: !1
+	}), [v, M]), G = (e) => e == null ? "" : U.format(Number(`${String(e)}e-${String(M)}`)), K = (e) => e == null ? "" : W.format(Number(`${String(e)}e-${String(M)}`)), q = (e) => i(e, v, M, b);
+	o(() => {
+		if (!z) return;
+		let e = q(V);
+		e !== R && (e != null || R != null) && H(K(R));
+	}, [R]);
+	let J = (e) => {
+		let t = e == null ? null : h(e, y, M);
+		P || I(t), e !== R && g?.(t);
+	}, Y = () => {
+		let e = q(V);
+		if (e != null && Number.isNaN(e)) {
+			H(K(R));
+			return;
+		}
+		J(e), H(K(e));
+	}, X = (e) => {
+		let t = e.target.value;
+		H(t);
+		let n = q(t);
+		(n == null || !Number.isNaN(n)) && J(n);
+	}, Z = (e) => {
+		B(!0), H(K(R)), T?.(e);
+	}, Q = (e) => {
+		Y(), B(!1), E?.(e);
+	}, re = (e) => {
+		D?.(e), !e.defaultPrevented && e.key === "Enter" && Y();
+	}, $ = _.toUpperCase(), ie = x === "symbol" || x === "both" ? N : void 0, ae = x === "code" || x === "both" && N !== $ ? $ : void 0;
+	return /* @__PURE__ */ f(u, { children: [
+		/* @__PURE__ */ d(r, {
+			ref: ne,
+			...k,
+			disabled: w,
+			numeric: !0,
+			type: "text",
+			inputMode: b ? "text" : M === 0 ? "numeric" : "decimal",
+			autoComplete: "off",
+			autoCorrect: "off",
+			spellCheck: !1,
+			leading: ie,
+			trailing: ae,
+			value: z ? V : G(R),
+			onChange: X,
+			onFocus: Z,
+			onBlur: Q,
+			onKeyDown: re,
+			form: C,
+			"aria-describedby": e(O, A)
+		}),
+		/* @__PURE__ */ d("span", {
+			id: A,
+			hidden: !0,
+			children: $
+		}),
+		S == null ? null : /* @__PURE__ */ d("input", {
+			type: "hidden",
+			name: S,
+			form: C,
+			value: L == null ? "" : String(L),
+			disabled: j.disabled
+		})
+	] });
+}));
+//#endregion
+export { g as AmountInput };
+
+//# sourceMappingURL=AmountInput.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AmountInput.js","names":["_Fragment","Fragment$1","currencyInfo","format","locale","p","currency","toMinor","unit","value","digits","fromMinor","minor","AmountInput","markFieldAware","forwardRef","valueProp","_min","_max","describedBy","rest","currencyId","useId","field","useResolvedField","useMemo","isControlled","internal","setInternal","useState","defaultValue","focused","setFocused","draft","setDraft","grouped","plain","display","m","raw","parse","parseMinorUnits","text","allowNegative","parsed","setMinor","nextValue","next","onValueChange","commit","handleChange","event","handleFocus","onFocus","handleBlur","onBlur","handleKeyDown","onKeyDown","code","leading","showCurrency","symbol","trailing","Input","joinIds","name"],"sources":["../../../../src/components/inputs/AmountInput/AmountInput.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useEffect,\n  useId,\n  useMemo,\n  useState,\n  type ChangeEvent,\n  type FocusEvent,\n  type KeyboardEvent,\n} from 'react'\nimport { Input, type InputProps } from '#components/inputs/Input'\nimport { markFieldAware, useResolvedField } from '#components/inputs/internal/FieldContext'\nimport { joinIds } from '#components/inputs/internal/refs'\nimport { parseMinorUnits } from './amountFormat'\n\nexport type AmountUnit = 'major' | 'minor'\nexport type AmountCurrencyDisplay = 'symbol' | 'code' | 'both' | 'none'\n\nexport interface AmountInputProps extends Omit<\n  InputProps,\n  | 'type'\n  | 'value'\n  | 'defaultValue'\n  | 'onChange'\n  | 'numeric'\n  | 'leading'\n  | 'trailing'\n  | 'min'\n  | 'max'\n> {\n  /** The amount in `unit`s, or `null` when empty. */\n  value?: number | null\n  defaultValue?: number | null\n  /** Called while typing (on every text that parses) and on commit. `null` when cleared. */\n  onValueChange?: (value: number | null) => void\n  /** ISO 4217 code — sets the symbol and the number of decimals (AUD 2, JPY 0, BHD 3). */\n  currency: string\n  /** Locale for parsing and formatting. Defaults to the browser's. */\n  locale?: string\n  /**\n   * `major` (default) — dollars as a number (`1450.5`).\n   * `minor` — integer cents (`145050`): recommended for money, never a float.\n   */\n  unit?: AmountUnit\n  /** Accept a leading minus (refunds, adjustments). Default `false`. */\n  allowNegative?: boolean\n  /** `symbol` (default) leads with \"$\"; `code` trails \"AUD\"; `both`; or `none`. */\n  showCurrency?: AmountCurrencyDisplay\n  /**\n   * Bounds, in `unit`s, for form validation. The input never clamps money on its own —\n   * a silently changed amount is worse than an error message.\n   */\n  min?: number\n  max?: number\n}\n\ninterface CurrencyInfo {\n  digits: number\n  symbol: string\n}\n\nfunction currencyInfo(currency: string, locale: string | undefined): CurrencyInfo {\n  try {\n    const format = new Intl.NumberFormat(locale, { style: 'currency', currency })\n    return {\n      digits: format.resolvedOptions().maximumFractionDigits ?? 2,\n      symbol: format.formatToParts(0).find((p) => p.type === 'currency')?.value ?? currency,\n    }\n  } catch {\n    return { digits: 2, symbol: currency }\n  }\n}\n\nconst toMinor = (value: number, unit: AmountUnit, digits: number) =>\n  unit === 'minor' ? Math.round(value) : Math.round(Number(`${String(value)}e${String(digits)}`))\nconst fromMinor = (minor: number, unit: AmountUnit, digits: number) =>\n  unit === 'minor' ? minor : Number(`${String(minor)}e-${String(digits)}`)\n\n/**\n * Money, typed as text (a textbox, not a spinbutton — arrow keys shouldn't nudge an invoice\n * total). Decimals come from the currency; grouped when blurred (\"1,450.00\"), raw while\n * focused (\"1450.00\"). Tabular and right-aligned like every amount. The ref goes to the\n * text input; `name` is submitted as a plain number in `unit`s.\n *\n * <AmountInput currency=\"AUD\" unit=\"minor\" value={retainerCents} onValueChange={setRetainerCents} />\n */\nexport const AmountInput = markFieldAware(\n  forwardRef<HTMLInputElement, AmountInputProps>(function AmountInput(\n    {\n      value: valueProp,\n      defaultValue,\n      onValueChange,\n      currency,\n      locale,\n      unit = 'major',\n      allowNegative = false,\n      showCurrency = 'symbol',\n      // Bounds are for forms validation only — never sent to the text input, never clamped.\n      // eslint-disable-next-line @typescript-eslint/no-unused-vars\n      min: _min,\n      // eslint-disable-next-line @typescript-eslint/no-unused-vars\n      max: _max,\n      name,\n      form,\n      disabled,\n      onFocus,\n      onBlur,\n      onKeyDown,\n      'aria-describedby': describedBy,\n      ...rest\n    },\n    ref,\n  ) {\n    const currencyId = `${useId()}currency`\n    // Only for the hidden input: the visible Input resolves its own Field wiring.\n    const field = useResolvedField({ disabled })\n    const { digits, symbol } = useMemo(() => currencyInfo(currency, locale), [currency, locale])\n    const isControlled = valueProp !== undefined\n    const [internal, setInternal] = useState<number | null>(defaultValue ?? null)\n    const value = isControlled ? valueProp : internal\n    const minor = value == null ? null : toMinor(value, unit, digits)\n    const [focused, setFocused] = useState(false)\n    const [draft, setDraft] = useState('')\n\n    const grouped = useMemo(\n      () =>\n        new Intl.NumberFormat(locale, {\n          minimumFractionDigits: digits,\n          maximumFractionDigits: digits,\n        }),\n      [locale, digits],\n    )\n    const plain = useMemo(\n      () =>\n        new Intl.NumberFormat(locale, {\n          minimumFractionDigits: digits,\n          maximumFractionDigits: digits,\n          useGrouping: false,\n        }),\n      [locale, digits],\n    )\n    const display = (m: number | null) =>\n      m == null ? '' : grouped.format(Number(`${String(m)}e-${String(digits)}`))\n    const raw = (m: number | null) =>\n      m == null ? '' : plain.format(Number(`${String(m)}e-${String(digits)}`))\n    const parse = (text: string) => parseMinorUnits(text, locale, digits, allowNegative)\n\n    useEffect(() => {\n      if (!focused) return\n      const parsed = parse(draft)\n      if (parsed !== minor && !(parsed == null && minor == null)) setDraft(raw(minor))\n      // eslint-disable-next-line react-hooks/exhaustive-deps -- only react to the value changing\n    }, [minor])\n\n    const setMinor = (next: number | null) => {\n      const nextValue = next == null ? null : fromMinor(next, unit, digits)\n      if (!isControlled) setInternal(nextValue)\n      if (next !== minor) onValueChange?.(nextValue)\n    }\n\n    const commit = () => {\n      const parsed = parse(draft)\n      if (parsed != null && Number.isNaN(parsed)) {\n        setDraft(raw(minor))\n        return\n      }\n      setMinor(parsed)\n      setDraft(raw(parsed))\n    }\n\n    const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n      const text = event.target.value\n      setDraft(text)\n      const parsed = parse(text)\n      if (parsed == null || !Number.isNaN(parsed)) setMinor(parsed)\n    }\n\n    const handleFocus = (event: FocusEvent<HTMLInputElement>) => {\n      setFocused(true)\n      setDraft(raw(minor))\n      onFocus?.(event)\n    }\n\n    const handleBlur = (event: FocusEvent<HTMLInputElement>) => {\n      commit()\n      setFocused(false)\n      onBlur?.(event)\n    }\n\n    const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {\n      onKeyDown?.(event)\n      if (!event.defaultPrevented && event.key === 'Enter') commit()\n    }\n\n    const code = currency.toUpperCase()\n    const leading = showCurrency === 'symbol' || showCurrency === 'both' ? symbol : undefined\n    const trailing =\n      showCurrency === 'code' || (showCurrency === 'both' && symbol !== code) ? code : undefined\n\n    return (\n      <>\n        <Input\n          ref={ref}\n          {...rest}\n          disabled={disabled}\n          numeric\n          type=\"text\"\n          inputMode={allowNegative ? 'text' : digits === 0 ? 'numeric' : 'decimal'}\n          autoComplete=\"off\"\n          autoCorrect=\"off\"\n          spellCheck={false}\n          leading={leading}\n          trailing={trailing}\n          value={focused ? draft : display(minor)}\n          onChange={handleChange}\n          onFocus={handleFocus}\n          onBlur={handleBlur}\n          onKeyDown={handleKeyDown}\n          form={form}\n          aria-describedby={joinIds(describedBy, currencyId)}\n        />\n        {/* The symbol is decorative in the box; this names the currency for screen readers. */}\n        <span id={currencyId} hidden>\n          {code}\n        </span>\n        {/* Disabled like the control it stands for: a disabled control submits nothing. */}\n        {name != null ? (\n          <input\n            type=\"hidden\"\n            name={name}\n            form={form}\n            value={value == null ? '' : String(value)}\n            disabled={field.disabled}\n          />\n        ) : null}\n      </>\n    )\n  }),\n)\n"],"mappings":"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"}

package/dist/components/inputs/AmountInput/amountFormat.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Parse typed text straight to integer minor units — string arithmetic, so "0.1 + 0.2"
+ * style float error can't creep into money. `null` = empty, `NaN` = not an amount.
+ */
+export declare function parseMinorUnits(text: string, locale: string | undefined, digits: number, allowNegative: boolean): number | null;

package/dist/components/inputs/AmountInput/amountFormat.js

@@ -0,0 +1,15 @@
+import { normaliseNumberText as e } from "../NumberInput/numberFormat.js";
+//#region src/components/inputs/AmountInput/amountFormat.ts
+function t(t, n, r, i) {
+	let a = e(t, n);
+	if (a === "") return null;
+	if (a === null) return NaN;
+	let o = a.startsWith("-");
+	if (o && !i) return NaN;
+	let [s = "", c = ""] = a.replace("-", "").split("."), l = c.padEnd(r + 1, "0"), u = Number(s || "0") * 10 ** r + Number(l.slice(0, r) || "0");
+	return Number(l.charAt(r)) >= 5 && (u += 1), Number.isSafeInteger(u) ? o && u !== 0 ? -u : u : NaN;
+}
+//#endregion
+export { t as parseMinorUnits };
+
+//# sourceMappingURL=amountFormat.js.map

package/dist/components/inputs/AmountInput/amountFormat.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"amountFormat.js","names":["parseMinorUnits","normalised","normaliseNumberText","text","locale","negative","allowNegative","intPart","fracPart","padded","digits","minor"],"sources":["../../../../src/components/inputs/AmountInput/amountFormat.ts"],"sourcesContent":["import { normaliseNumberText } from '#components/inputs/NumberInput/numberFormat'\n\n/**\n * Parse typed text straight to integer minor units — string arithmetic, so \"0.1 + 0.2\"\n * style float error can't creep into money. `null` = empty, `NaN` = not an amount.\n */\nexport function parseMinorUnits(\n  text: string,\n  locale: string | undefined,\n  digits: number,\n  allowNegative: boolean,\n): number | null {\n  const normalised = normaliseNumberText(text, locale)\n  if (normalised === '') return null\n  if (normalised === null) return Number.NaN\n  const negative = normalised.startsWith('-')\n  if (negative && !allowNegative) return Number.NaN\n  const [intPart = '', fracPart = ''] = normalised.replace('-', '').split('.')\n  const padded = fracPart.padEnd(digits + 1, '0')\n  let minor = Number(intPart || '0') * 10 ** digits + Number(padded.slice(0, digits) || '0')\n  if (Number(padded.charAt(digits)) >= 5) minor += 1\n  if (!Number.isSafeInteger(minor)) return Number.NaN\n  return negative && minor !== 0 ? -minor : minor\n}\n"],"mappings":";;AAMA,SAAgBA,EACd,GACA,GACA,GACA,GACe;CACf,IAAMC,IAAaC,EAAoBC,GAAMC,CAAM;CACnD,IAAIH,MAAe,IAAI,OAAO;CAC9B,IAAIA,MAAe,MAAM,OAAO;CAChC,IAAMI,IAAWJ,EAAW,WAAW,GAAG;CAC1C,IAAII,KAAY,CAACC,GAAe,OAAO;CACvC,IAAM,CAACC,IAAU,IAAIC,IAAW,MAAMP,EAAW,QAAQ,KAAK,EAAE,CAAC,CAAC,MAAM,GAAG,GACrEQ,IAASD,EAAS,OAAOE,IAAS,GAAG,GAAG,GAC1CC,IAAQ,OAAOJ,KAAW,GAAG,IAAI,MAAMG,IAAS,OAAOD,EAAO,MAAM,GAAGC,CAAM,KAAK,GAAG;CAGzF,OAFI,OAAOD,EAAO,OAAOC,CAAM,CAAC,KAAK,MAAG,KAAS,IAC5C,OAAO,cAAcC,CAAK,IACxBN,KAAYM,MAAU,IAAI,CAACA,IAAQA,IADD;AAE3C"}

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

@@ -0,0 +1,2 @@
+export { AmountInput } from './AmountInput.js';
+export type { AmountInputProps, AmountUnit, AmountCurrencyDisplay } from './AmountInput.js';

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

@@ -0,0 +1,18 @@
+import { type ComponentPropsWithoutRef } from 'react';
+import { Checkbox as RadixCheckbox } from 'radix-ui';
+import type { Size } from '../../../utils/tokens.js';
+export type CheckedState = boolean | 'indeterminate';
+export interface CheckboxProps extends Omit<ComponentPropsWithoutRef<typeof RadixCheckbox.Root>, 'asChild'> {
+    size?: Size;
+    /** Critical border + `aria-invalid`. Inside a `<Field error>` this is set for you. */
+    invalid?: boolean;
+    /** Focusable but not editable: sets `aria-readonly` and ignores clicks. */
+    readOnly?: boolean;
+}
+/**
+ * A bare checkbox (Radix). `checked` may be `'indeterminate'` for a "some selected"
+ * parent. Needs a label — use `CheckboxField`, a `<Field>`, or `aria-label`.
+ *
+ * <Checkbox checked={allPaid ? true : somePaid ? 'indeterminate' : false} onCheckedChange={…} />
+ */
+export declare const Checkbox: import("react").ForwardRefExoticComponent<CheckboxProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/components/inputs/Checkbox/Checkbox.js

@@ -0,0 +1,42 @@
+import { cx as e } from "../../../utils/cx.js";
+import { CheckIcon as t, MinusIcon as n } from "../../../icons/icons.js";
+import { markFieldAware as r, useResolvedField as i } from "../internal/FieldContext.js";
+import a from "./Checkbox.module.js";
+import { forwardRef as o } from "react";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import { Checkbox as l } from "radix-ui";
+//#region src/components/inputs/Checkbox/Checkbox.tsx
+var u = r(o(function({ size: r = "md", invalid: o, id: u, disabled: d, readOnly: f, onCheckedChange: p, className: m, "aria-describedby": h, "aria-invalid": g, ..._ }, v) {
+	let y = i({
+		id: u,
+		describedBy: h,
+		invalid: o,
+		ariaInvalid: g,
+		disabled: d,
+		readOnly: f
+	});
+	return /* @__PURE__ */ s(l.Root, {
+		ref: v,
+		id: y.id,
+		className: e(a.checkbox, m),
+		"data-size": r,
+		"data-invalid": y.invalid || void 0,
+		"data-readonly": y.readOnly || void 0,
+		disabled: y.disabled,
+		"aria-readonly": y.readOnly || void 0,
+		"aria-describedby": y.describedBy,
+		"aria-invalid": y.invalid || void 0,
+		"aria-required": y.required || void 0,
+		"aria-busy": y.busy || void 0,
+		onCheckedChange: y.readOnly ? void 0 : p,
+		..._,
+		children: /* @__PURE__ */ c(l.Indicator, {
+			className: a.indicator,
+			children: [/* @__PURE__ */ s(t, { className: a.check }), /* @__PURE__ */ s(n, { className: a.dash })]
+		})
+	});
+}));
+//#endregion
+export { u as Checkbox };
+
+//# sourceMappingURL=Checkbox.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.js","names":["Checkbox","RadixCheckbox","styles","Checkbox_module_default","Checkbox$1","markFieldAware","forwardRef","invalidProp","idProp","disabledProp","readOnlyProp","describedByProp","ariaInvalid","rest","field","useResolvedField","Checkbox","cx","className","size","onCheckedChange","CheckIcon","MinusIcon"],"sources":["../../../../src/components/inputs/Checkbox/Checkbox.tsx"],"sourcesContent":["import { forwardRef, type ComponentPropsWithoutRef } from 'react'\nimport { Checkbox as RadixCheckbox } from 'radix-ui'\nimport { CheckIcon, MinusIcon } from '#icons'\nimport { cx } from '#utils/cx'\nimport type { Size } from '#utils/tokens'\nimport { markFieldAware, useResolvedField } from '#components/inputs/internal/FieldContext'\nimport styles from './Checkbox.module.css'\n\nexport type CheckedState = boolean | 'indeterminate'\n\nexport interface CheckboxProps extends Omit<\n  ComponentPropsWithoutRef<typeof RadixCheckbox.Root>,\n  'asChild'\n> {\n  size?: Size\n  /** Critical border + `aria-invalid`. Inside a `<Field error>` this is set for you. */\n  invalid?: boolean\n  /** Focusable but not editable: sets `aria-readonly` and ignores clicks. */\n  readOnly?: boolean\n}\n\n/**\n * A bare checkbox (Radix). `checked` may be `'indeterminate'` for a \"some selected\"\n * parent. Needs a label — use `CheckboxField`, a `<Field>`, or `aria-label`.\n *\n * <Checkbox checked={allPaid ? true : somePaid ? 'indeterminate' : false} onCheckedChange={…} />\n */\nexport const Checkbox = markFieldAware(\n  forwardRef<HTMLButtonElement, CheckboxProps>(function Checkbox(\n    {\n      size = 'md',\n      invalid: invalidProp,\n      id: idProp,\n      disabled: disabledProp,\n      readOnly: readOnlyProp,\n      onCheckedChange,\n      className,\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: invalidProp,\n      ariaInvalid,\n      disabled: disabledProp,\n      readOnly: readOnlyProp,\n    })\n    return (\n      <RadixCheckbox.Root\n        ref={ref}\n        id={field.id}\n        className={cx(styles.checkbox, className)}\n        data-size={size}\n        data-invalid={field.invalid || undefined}\n        data-readonly={field.readOnly || undefined}\n        disabled={field.disabled}\n        aria-readonly={field.readOnly || undefined}\n        aria-describedby={field.describedBy}\n        aria-invalid={field.invalid || undefined}\n        aria-required={field.required || undefined}\n        aria-busy={field.busy || undefined}\n        onCheckedChange={field.readOnly ? undefined : onCheckedChange}\n        {...rest}\n      >\n        <RadixCheckbox.Indicator className={styles.indicator}>\n          <CheckIcon className={styles.check} />\n          <MinusIcon className={styles.dash} />\n        </RadixCheckbox.Indicator>\n      </RadixCheckbox.Root>\n    )\n  }),\n)\n"],"mappings":";;;;;;;;AA2BA,IAAaA,IAAWK,EACtBC,EAA6C,SAC3C,EACE,UAAO,MACP,SAASC,GACT,IAAIC,GACJ,UAAUC,GACV,UAAUC,GACV,oBACA,cACA,oBAAoBC,GACpB,gBAAgBC,GAChB,GAAGC,KAEL,GACA;CACA,IAAMC,IAAQC,EAAiB;EAC7B,IAAIP;EACJ,aAAaG;EACb,SAASJ;EACT;EACA,UAAUE;EACV,UAAUC;CACZ,CAAC;CACD,OACE,kBAACT,EAAc,MAAf;EACO;EACL,IAAIa,EAAM;EACV,WAAWG,EAAGf,EAAO,UAAUgB,CAAS;EACxC,aAAWC;EACX,gBAAcL,EAAM,WAAW,KAAA;EAC/B,iBAAeA,EAAM,YAAY,KAAA;EACjC,UAAUA,EAAM;EAChB,iBAAeA,EAAM,YAAY,KAAA;EACjC,oBAAkBA,EAAM;EACxB,gBAAcA,EAAM,WAAW,KAAA;EAC/B,iBAAeA,EAAM,YAAY,KAAA;EACjC,aAAWA,EAAM,QAAQ,KAAA;EACzB,iBAAiBA,EAAM,WAAW,KAAA,IAAYM;EAC9C,GAAIP;EAEJ,UAAA,kBAACZ,EAAc,WAAf;GAAyB,WAAWC,EAAO;GAA3C,UAAA,CACE,kBAACmB,GAAD,EAAW,WAAWnB,EAAO,MAAQ,CAAA,GACrC,kBAACoB,GAAD,EAAW,WAAWpB,EAAO,KAAO,CAAA,CACb;;CACP,CAAA;AAExB,CAAC,CACH"}

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

@@ -0,0 +1,12 @@
+//#region src/components/inputs/Checkbox/Checkbox.module.css
+var e = "kiln-Checkbox__checkbox", t = "kiln-Checkbox__indicator", n = "kiln-Checkbox__check", r = "kiln-Checkbox__dash", i = {
+	checkbox: e,
+	indicator: t,
+	"tick-in": "kiln-Checkbox__tick-in",
+	check: n,
+	dash: r
+};
+//#endregion
+export { n as check, e as checkbox, r as dash, i as default, t as indicator };
+
+//# sourceMappingURL=Checkbox.module.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.module.js","names":["checkbox","indicator","check","dash","Checkbox_module_default"],"sources":["../../../../src/components/inputs/Checkbox/Checkbox.module.css"],"sourcesContent":["/*\n * Component tokens (themes may set any of these on [data-theme]):\n *   --checkbox-radius          default calc(var(--radius-field) * 0.4)\n *   --control-checked-bg       default var(--color-accent)   (shared with Radio, Switch)\n *   --control-checked-border   default var(--color-accent)\n *   --control-checked-ink      default var(--color-accent-ink)\n *   --control-border           default var(--color-line-control) (unchecked edge, ≥ 3:1)\n *   --control-shadow           default var(--shadow-active) — the printed offset in Fiesta, none elsewhere\n */\n.checkbox {\n  --_s: calc(var(--control-sm) * 0.5625);\n  /* An unchecked box is identified only by its edge, so it needs 3:1 (WCAG 1.4.11):\n     line-strong alone is a ~2:1 hairline in the quieter themes. */\n  --_border: var(--control-border, var(--color-line-control));\n\n  all: unset;\n  box-sizing: border-box;\n  position: relative;\n  display: inline-grid;\n  flex: none;\n  place-items: center;\n  inline-size: var(--_s);\n  block-size: var(--_s);\n  border: var(--border-width) solid var(--_border);\n  border-radius: var(--checkbox-radius, calc(var(--radius-field) * 0.4));\n  background-color: var(--color-surface);\n  color: var(--control-checked-ink, var(--color-accent-ink));\n  box-shadow: var(--control-shadow, var(--shadow-active));\n  cursor: pointer;\n  -webkit-tap-highlight-color: transparent;\n  transition:\n    background-color var(--dur-1) var(--ease-out),\n    border-color var(--dur-1) var(--ease-out),\n    box-shadow var(--dur-1) var(--ease-out),\n    translate var(--dur-1) var(--ease-spring);\n}\n.checkbox[data-size='sm'] {\n  --_s: calc(var(--control-sm) * 0.5);\n}\n.checkbox[data-size='lg'] {\n  --_s: calc(var(--control-sm) * 0.6875);\n}\n\n/* Bigger hit area than the glyph, without changing layout. */\n.checkbox::before {\n  content: '';\n  position: absolute;\n  inset: calc(var(--space-2) * -1);\n}\n\n@media (hover: hover) {\n  .checkbox:hover:not([data-disabled], [data-state='checked'], [data-state='indeterminate']) {\n    --_border: color-mix(in oklch, var(--color-line-strong), var(--color-ink) 65%);\n  }\n}\n\n.checkbox[data-state='checked'],\n.checkbox[data-state='indeterminate'] {\n  --_border: var(--control-checked-border, var(--color-accent));\n  background-color: var(--control-checked-bg, var(--color-accent));\n}\n\n.checkbox[data-invalid]:not([data-state='checked']) {\n  --_border: var(--tone-critical);\n}\n\n.checkbox:active:not([data-disabled]) {\n  translate: var(--active-shift) var(--active-shift);\n  box-shadow: none;\n}\n\n.checkbox:focus-visible {\n  outline: 2px solid var(--color-focus);\n  outline-offset: 2px;\n}\n\n.checkbox[data-disabled] {\n  cursor: not-allowed;\n  opacity: 0.45;\n  box-shadow: none;\n}\n\n.indicator {\n  display: grid;\n  place-items: center;\n  inline-size: 100%;\n  block-size: 100%;\n  animation: tick-in var(--dur-2) var(--ease-spring);\n}\n\n.check,\n.dash {\n  grid-area: 1 / 1;\n  inline-size: 88%;\n  block-size: 88%;\n  stroke-width: calc(var(--icon-stroke) * 1.4);\n}\n.indicator[data-state='checked'] .dash,\n.indicator[data-state='indeterminate'] .check {\n  display: none;\n}\n\n@keyframes tick-in {\n  from {\n    opacity: 0;\n    scale: 0.5;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .indicator {\n    animation: none;\n  }\n}\n"],"mappings":""}

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

@@ -0,0 +1,2 @@
+export { Checkbox } from './Checkbox.js';
+export type { CheckboxProps, CheckedState } from './Checkbox.js';

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

@@ -0,0 +1,19 @@
+import { type CSSProperties } from 'react';
+import { type CheckboxProps } from '../Checkbox/index.js';
+import type { FieldLabelProps } from '../Field/index.js';
+export interface CheckboxFieldProps extends FieldLabelProps, Omit<CheckboxProps, 'checked' | 'defaultChecked' | 'onCheckedChange' | 'invalid' | 'className' | 'style' | keyof FieldLabelProps> {
+    /** `'indeterminate'` shows a dash — for a "select all" over a partly-selected list. */
+    checked?: boolean | 'indeterminate';
+    defaultChecked?: boolean | 'indeterminate';
+    /** Called with a plain boolean (an indeterminate box becomes `true` when clicked). */
+    onCheckedChange?: (checked: boolean) => void;
+    /** Goes to the wrapper; the ref goes to the checkbox. */
+    className?: string;
+    style?: CSSProperties;
+}
+/**
+ * A checkbox with its label to the right, optional help underneath and an error line.
+ *
+ * <CheckboxField label="I've read the house rules" error={errors.rules} />
+ */
+export declare const CheckboxField: import("react").ForwardRefExoticComponent<CheckboxFieldProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/components/inputs/CheckboxField/CheckboxField.js

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"CheckboxField.js","names":["styles","CheckboxField_module_default","CheckboxField","forwardRef","fieldProps","rest","splitFieldLabelProps","props","idProp","describedByProp","restProps","autoId","useId","id","descriptionId","warningId","errorId","help","description","hint","showErrorMessage","hasErrorMessage","error","errorHidden","showWarning","warning","cx","className","disabled","readOnly","Checkbox","hasError","required","validating","joinIds","onCheckedChange","state","LabelContent","label","FieldDescription","FieldWarning","FieldError","errorLive"],"sources":["../../../../src/components/inputs/CheckboxField/CheckboxField.tsx"],"sourcesContent":["import { forwardRef, useId, type CSSProperties } from 'react'\nimport { cx } from '#utils/cx'\nimport { Checkbox, type CheckboxProps } from '#components/inputs/Checkbox'\nimport type { FieldLabelProps } from '#components/inputs/Field'\nimport { splitFieldLabelProps } from '#components/inputs/internal/fieldProps'\nimport {\n  FieldDescription,\n  FieldError,\n  FieldWarning,\n  LabelContent,\n} from '#components/inputs/internal/messages'\nimport { hasError, hasErrorMessage } from '#components/inputs/internal/errors'\nimport { joinIds } from '#components/inputs/internal/refs'\nimport styles from './CheckboxField.module.css'\n\nexport interface CheckboxFieldProps\n  extends\n    FieldLabelProps,\n    Omit<\n      CheckboxProps,\n      | 'checked'\n      | 'defaultChecked'\n      | 'onCheckedChange'\n      | 'invalid'\n      | 'className'\n      | 'style'\n      | keyof FieldLabelProps\n    > {\n  /** `'indeterminate'` shows a dash — for a \"select all\" over a partly-selected list. */\n  checked?: boolean | 'indeterminate'\n  defaultChecked?: boolean | 'indeterminate'\n  /** Called with a plain boolean (an indeterminate box becomes `true` when clicked). */\n  onCheckedChange?: (checked: boolean) => void\n  /** Goes to the wrapper; the ref goes to the checkbox. */\n  className?: string\n  style?: CSSProperties\n}\n\n/**\n * A checkbox with its label to the right, optional help underneath and an error line.\n *\n * <CheckboxField label=\"I've read the house rules\" error={errors.rules} />\n */\nexport const CheckboxField = forwardRef<HTMLButtonElement, CheckboxFieldProps>(\n  function CheckboxField(props, ref) {\n    const [fieldProps, rest] = splitFieldLabelProps(props)\n    const {\n      label,\n      description,\n      hint,\n      error,\n      required = false,\n      optional,\n      warning,\n      errorLive = true,\n      errorHidden = false,\n      validating = false,\n      readOnly,\n    } = fieldProps\n    const {\n      onCheckedChange,\n      id: idProp,\n      disabled,\n      className,\n      style,\n      'aria-describedby': describedByProp,\n      ...restProps\n    } = rest\n\n    const autoId = useId()\n    const id = idProp ?? `${autoId}checkbox`\n    const descriptionId = `${id}-description`\n    const warningId = `${id}-warning`\n    const errorId = `${id}-error`\n    const help = description ?? hint\n    const showErrorMessage = hasErrorMessage(error) && !errorHidden\n    const showWarning = warning != null && !showErrorMessage\n\n    return (\n      <div\n        className={cx(styles.root, className)}\n        style={style}\n        data-disabled={disabled ? true : undefined}\n        data-readonly={readOnly ? true : undefined}\n      >\n        <span className={styles.slot}>\n          <Checkbox\n            ref={ref}\n            id={id}\n            disabled={disabled}\n            readOnly={readOnly}\n            invalid={hasError(error)}\n            aria-required={required || undefined}\n            aria-busy={validating || undefined}\n            aria-describedby={joinIds(\n              describedByProp,\n              help != null && descriptionId,\n              showWarning && warningId,\n              showErrorMessage && errorId,\n            )}\n            onCheckedChange={\n              onCheckedChange\n                ? (state) => {\n                    onCheckedChange(state === true)\n                  }\n                : undefined\n            }\n            {...restProps}\n          />\n        </span>\n        <div className={styles.text}>\n          <label htmlFor={id} className={styles.label}>\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        {showWarning ? (\n          <FieldWarning id={warningId} className={styles.error}>\n            {warning}\n          </FieldWarning>\n        ) : null}\n        {showErrorMessage ? (\n          <FieldError id={errorId} className={styles.error} live={errorLive}>\n            {error}\n          </FieldError>\n        ) : null}\n      </div>\n    )\n  },\n)\n"],"mappings":";;;;;;;;;;AA2CA,IAAaE,IAAgBC,EAC3B,SAAuB,GAAO,GAAK;CACjC,IAAM,CAACC,GAAYC,KAAQC,EAAqBC,CAAK,GAC/C,EACJ,UACA,gBACA,SACA,UACA,cAAW,IACX,aACA,YACA,eAAY,IACZ,iBAAc,IACd,gBAAa,IACb,gBACEH,GACE,EACJ,oBACA,IAAII,GACJ,aACA,cACA,UACA,oBAAoBC,GACpB,GAAGC,MACDL,GAEEM,IAASC,EAAM,GACfC,IAAKL,KAAU,GAAGG,EAAO,WACzBG,IAAgB,GAAGD,EAAG,eACtBE,IAAY,GAAGF,EAAG,WAClBG,IAAU,GAAGH,EAAG,SAChBI,IAAOC,KAAeC,GACtBC,IAAmBC,EAAgBC,CAAK,KAAK,CAACC,GAC9CC,IAAcC,KAAW,QAAQ,CAACL;CAExC,OACE,kBAAC,OAAD;EACE,WAAWM,EAAG1B,EAAO,MAAM2B,CAAS;EAC7B;EACP,iBAAeC,IAAW,KAAO,KAAA;EACjC,iBAAeC,IAAW,KAAO,KAAA;EAJnC,UAAA;GAME,kBAAC,QAAD;IAAM,WAAW7B,EAAO;IACtB,UAAA,kBAAC8B,GAAD;KACO;KACD;KACM;KACA;KACV,SAASC,EAAST,CAAK;KACvB,iBAAeU,KAAY,KAAA;KAC3B,aAAWC,KAAc,KAAA;KACzB,oBAAkBC,EAChBzB,GACAQ,KAAQ,QAAQH,GAChBU,KAAeT,GACfK,KAAoBJ,CACtB;KACA,iBACEmB,KACK,MAAU;MACT,EAAgBC,MAAU,EAAI;KAChC,IACA,KAAA;KAEN,GAAI1B;IACL,CAAA;GACG,CAAA;GACN,kBAAC,OAAD;IAAK,WAAWV,EAAO;IAAvB,UAAA,CACE,kBAAC,SAAD;KAAO,SAASa;KAAI,WAAWb,EAAO;KACpC,UAAA,kBAACqC,GAAD;MAAwB;MAAoB;MAAU,MAAMJ;MACzD,UAAAK;KACW,CAAA;IACT,CAAA,GACNrB,KAAQ,OAAwE,OAAjE,kBAACsB,GAAD;KAAkB,IAAIzB;KAAgB,UAAAG;IAAuB,CAAA,CAC1E;;GACJO,IACC,kBAACgB,GAAD;IAAc,IAAIzB;IAAW,WAAWf,EAAO;IAC5C,UAAAyB;GACW,CAAA,IACZ;GACHL,IACC,kBAACqB,GAAD;IAAY,IAAIzB;IAAS,WAAWhB,EAAO;IAAO,MAAM0C;IACrD,UAAApB;GACS,CAAA,IACV;EACD;;AAET,CACF"}

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

@@ -0,0 +1,12 @@
+//#region src/components/inputs/CheckboxField/CheckboxField.module.css
+var e = "kiln-CheckboxField__root", t = "kiln-CheckboxField__slot", n = "kiln-CheckboxField__text", r = "kiln-CheckboxField__label", i = "kiln-CheckboxField__error", a = {
+	root: e,
+	slot: t,
+	text: n,
+	label: r,
+	error: i
+};
+//#endregion
+export { a as default, i as error, r as label, e as root, t as slot, n as text };
+
+//# sourceMappingURL=CheckboxField.module.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CheckboxField.module.js","names":["root","slot","text","label","error","CheckboxField_module_default"],"sources":["../../../../src/components/inputs/CheckboxField/CheckboxField.module.css"],"sourcesContent":["/*\n * [box] Label\n *       Help text\n *       ⚠ Error\n * The box sits in a one-line-tall slot so it centres on the label's first line.\n */\n.root {\n  display: grid;\n  grid-template-columns: auto 1fr;\n  column-gap: var(--space-3);\n  row-gap: var(--space-2);\n  align-items: start;\n  font-size: var(--text-md);\n  line-height: var(--leading-snug);\n}\n\n.slot {\n  display: flex;\n  align-items: center;\n  block-size: 1lh;\n}\n\n.text {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-1);\n  min-inline-size: 0;\n}\n\n.label {\n  display: inline-flex;\n  flex-wrap: wrap;\n  align-items: baseline;\n  column-gap: 0.35em;\n  color: var(--color-ink);\n  cursor: pointer;\n}\n.root[data-disabled] .label {\n  color: var(--color-ink-subtle);\n  cursor: not-allowed;\n}\n\n.error {\n  grid-column: 2;\n}\n"],"mappings":""}

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

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

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

@@ -0,0 +1,43 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+import { type Responsive } from '../../../utils/responsive.js';
+import type { Size } from '../../../utils/tokens.js';
+import { type ChoiceOption } from './choice.js';
+export type CheckboxGroupColumns = 1 | 2 | 3;
+export interface CheckboxGroupProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue'> {
+    /** Options as data. Alternatively pass `<CheckboxGroup.Item>` children. */
+    options?: readonly ChoiceOption[];
+    children?: ReactNode;
+    /** Controlled checked values. */
+    value?: readonly string[];
+    defaultValue?: readonly string[];
+    onValueChange?: (value: string[]) => void;
+    /** `vertical` (default) stacks the options; `horizontal` runs them in a wrapping row. */
+    orientation?: 'vertical' | 'horizontal';
+    /** Lay the options out in 1–3 equal columns (wins over `orientation`). Responsive. */
+    columns?: Responsive<CheckboxGroupColumns>;
+    /** Adds a tri-state "select all" checkbox above the options, with this label. */
+    selectAllLabel?: string;
+    /** Emits one hidden input per checked value, so FormData sees every choice. */
+    name?: string;
+    disabled?: boolean;
+    /** Focusable but not editable: every box sets `aria-readonly` and clicks are ignored. */
+    readOnly?: boolean;
+    /** Critical edge on the unchecked boxes. Inside a `<Fieldset error>` this is set for you. */
+    invalid?: boolean;
+    size?: Size;
+}
+export interface CheckboxGroupItemProps {
+    value: string;
+    label: ReactNode;
+    description?: ReactNode;
+    disabled?: boolean;
+    /** Id for the checkbox. Defaults to a generated one. */
+    id?: string;
+    className?: string;
+}
+/** One option. Must be a direct child of `CheckboxGroup` (so "select all" can count it). */
+declare function CheckboxGroupItem({ value, label, description, disabled, id, className, }: CheckboxGroupItemProps): import("react").JSX.Element;
+export declare const CheckboxGroup: import("react").ForwardRefExoticComponent<CheckboxGroupProps & import("react").RefAttributes<HTMLDivElement>> & {
+    Item: typeof CheckboxGroupItem;
+};
+export type { ChoiceOption } from './choice.js';