@mitcsutt/kiln-ui 0.1.0

package/dist/components/inputs/Slider/SliderBase.js

@@ -0,0 +1,85 @@
+import { cx as e } from "../../../utils/cx.js";
+import { joinIds as t } from "../internal/refs.js";
+import n from "./Slider.module.js";
+import { forwardRef as r, useMemo as i } from "react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import { Slider as s } from "radix-ui";
+//#region src/components/inputs/Slider/SliderBase.tsx
+function c(e, t) {
+	let n = JSON.stringify(t ?? null);
+	return i(() => new Intl.NumberFormat(e, t), [e, n]);
+}
+var l = (e, t, n) => n === t ? 0 : (e - t) / (n - t) * 100, u = r(function({ values: r, onValuesChange: i, onValuesCommit: u, min: d, max: f, step: p, minStepsBetweenThumbs: m, marks: h, showValue: g, formatOptions: _, locale: v, name: y, disabled: b, readOnly: x, invalid: S, size: C, thumbs: w, className: T, ...E }, D) {
+	let O = c(v, _), k = (e) => {
+		let t = h?.find((t) => t.value === e);
+		return t ? t.label : _ ? O.format(e) : void 0;
+	}, A = g ? r.map((e) => O.format(e)).join(" – ") : null;
+	return /* @__PURE__ */ o("span", {
+		ref: D,
+		className: e(n.slider, T),
+		"data-size": C,
+		"data-invalid": S || void 0,
+		"data-disabled": b || void 0,
+		"data-readonly": x || void 0,
+		"data-show-value": g || void 0,
+		...E,
+		children: [
+			/* @__PURE__ */ o(s.Root, {
+				className: n.control,
+				value: [...r],
+				min: d,
+				max: f,
+				step: p,
+				minStepsBetweenThumbs: m,
+				disabled: b,
+				onValueChange: (e) => {
+					x || i(e);
+				},
+				onValueCommit: (e) => {
+					x || u(e);
+				},
+				children: [/* @__PURE__ */ a(s.Track, {
+					className: n.track,
+					children: /* @__PURE__ */ a(s.Range, { className: n.range })
+				}), w.map(({ ref: e, ...t }, i) => {
+					let o = r[i];
+					return /* @__PURE__ */ a(s.Thumb, {
+						ref: e,
+						className: n.thumb,
+						"aria-valuetext": o === void 0 ? void 0 : k(o),
+						...t
+					}, t.id);
+				})]
+			}),
+			g ? /* @__PURE__ */ a("output", {
+				className: n.output,
+				htmlFor: t(...w.map((e) => e.id)),
+				"aria-live": "off",
+				children: A
+			}) : null,
+			h && h.length > 0 ? /* @__PURE__ */ a("span", {
+				className: n.marks,
+				"aria-hidden": "true",
+				children: h.map((e) => {
+					let t = l(e.value, d, f);
+					return /* @__PURE__ */ a("span", {
+						className: n.mark,
+						"data-edge": t <= 0 ? "start" : t >= 100 ? "end" : void 0,
+						style: { "--_p": t },
+						children: e.label
+					}, e.value);
+				})
+			}) : null,
+			y ? r.map((e, t) => /* @__PURE__ */ a("input", {
+				type: "hidden",
+				name: y,
+				value: e,
+				disabled: b || void 0
+			}, t)) : null
+		]
+	});
+});
+//#endregion
+export { u as SliderBase };
+
+//# sourceMappingURL=SliderBase.js.map

package/dist/components/inputs/Slider/SliderBase.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SliderBase.js","names":["styles","RadixSlider","Slider_module_default","useFormatter","key","options","useMemo","locale","percentOf","max","min","value","SliderBase","forwardRef","rest","formatter","formatOptions","valueText","mark","marks","m","v","output","showValue","values","cx","className","size","invalid","disabled","readOnly","Slider","onValuesChange","next","onValuesCommit","thumbs","thumbRef","thumb","joinIds","t","p","name","i"],"sources":["../../../../src/components/inputs/Slider/SliderBase.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useMemo,\n  type CSSProperties,\n  type HTMLAttributes,\n  type ReactNode,\n  type Ref,\n} from 'react'\nimport { Slider as RadixSlider } from 'radix-ui'\nimport { cx } from '#utils/cx'\nimport { joinIds } from '#components/inputs/internal/refs'\nimport styles from './Slider.module.css'\n\n/*\n * The shared body of Slider and RangeSlider (internal — import it only from those two).\n * Radix Slider underneath: values are always an array here; the public components map\n * them to a number or a tuple.\n */\n\nexport interface SliderMark {\n  value: number\n  /** Shown under the track; also used as the thumb's `aria-valuetext` when it lands on it. */\n  label: string\n}\n\nexport type SliderSize = 'sm' | 'md'\n\nexport interface SliderThumbConfig {\n  id: string\n  ref?: Ref<HTMLSpanElement>\n  'aria-label'?: string\n  'aria-labelledby'?: string\n  'aria-describedby'?: string\n  'aria-invalid'?: true\n  'aria-readonly'?: true\n  'aria-busy'?: true\n}\n\nexport interface SliderBaseProps extends Omit<\n  HTMLAttributes<HTMLSpanElement>,\n  'onChange' | 'defaultValue' | 'dir'\n> {\n  values: readonly number[]\n  onValuesChange: (values: number[]) => void\n  onValuesCommit: (values: number[]) => void\n  min: number\n  max: number\n  step: number\n  minStepsBetweenThumbs?: number\n  marks?: readonly SliderMark[]\n  showValue: boolean\n  formatOptions?: Intl.NumberFormatOptions\n  locale?: string\n  name?: string\n  disabled: boolean\n  readOnly: boolean\n  invalid: boolean\n  size: SliderSize\n  thumbs: readonly SliderThumbConfig[]\n}\n\n/** `Intl.NumberFormat` for the value and `aria-valuetext`, memoised on its inputs. */\nfunction useFormatter(locale: string | undefined, options: Intl.NumberFormatOptions | undefined) {\n  const key = JSON.stringify(options ?? null)\n  // eslint-disable-next-line react-hooks/exhaustive-deps -- `key` is the options' identity\n  return useMemo(() => new Intl.NumberFormat(locale, options), [locale, key])\n}\n\nconst percentOf = (value: number, min: number, max: number) =>\n  max === min ? 0 : ((value - min) / (max - min)) * 100\n\nexport const SliderBase = forwardRef<HTMLSpanElement, SliderBaseProps>(function SliderBase(\n  {\n    values,\n    onValuesChange,\n    onValuesCommit,\n    min,\n    max,\n    step,\n    minStepsBetweenThumbs,\n    marks,\n    showValue,\n    formatOptions,\n    locale,\n    name,\n    disabled,\n    readOnly,\n    invalid,\n    size,\n    thumbs,\n    className,\n    ...rest\n  },\n  ref,\n) {\n  const formatter = useFormatter(locale, formatOptions)\n  const valueText = (v: number): string | undefined => {\n    const mark = marks?.find((m) => m.value === v)\n    if (mark) return mark.label\n    return formatOptions ? formatter.format(v) : undefined\n  }\n  const output: ReactNode = showValue ? values.map((v) => formatter.format(v)).join(' – ') : null\n\n  return (\n    <span\n      ref={ref}\n      className={cx(styles.slider, className)}\n      data-size={size}\n      data-invalid={invalid || undefined}\n      data-disabled={disabled || undefined}\n      data-readonly={readOnly || undefined}\n      data-show-value={showValue || undefined}\n      {...rest}\n    >\n      <RadixSlider.Root\n        className={styles.control}\n        value={[...values]}\n        min={min}\n        max={max}\n        step={step}\n        minStepsBetweenThumbs={minStepsBetweenThumbs}\n        disabled={disabled}\n        onValueChange={(next) => {\n          if (!readOnly) onValuesChange(next)\n        }}\n        onValueCommit={(next) => {\n          if (!readOnly) onValuesCommit(next)\n        }}\n      >\n        <RadixSlider.Track className={styles.track}>\n          <RadixSlider.Range className={styles.range} />\n        </RadixSlider.Track>\n        {thumbs.map(({ ref: thumbRef, ...thumb }, i) => {\n          const v = values[i]\n          return (\n            <RadixSlider.Thumb\n              key={thumb.id}\n              ref={thumbRef}\n              className={styles.thumb}\n              aria-valuetext={v === undefined ? undefined : valueText(v)}\n              {...thumb}\n            />\n          )\n        })}\n      </RadixSlider.Root>\n      {showValue ? (\n        <output\n          className={styles.output}\n          htmlFor={joinIds(...thumbs.map((t) => t.id))}\n          aria-live=\"off\"\n        >\n          {output}\n        </output>\n      ) : null}\n      {marks && marks.length > 0 ? (\n        <span className={styles.marks} aria-hidden=\"true\">\n          {marks.map((m) => {\n            const p = percentOf(m.value, min, max)\n            return (\n              <span\n                key={m.value}\n                className={styles.mark}\n                data-edge={p <= 0 ? 'start' : p >= 100 ? 'end' : undefined}\n                style={{ '--_p': p } as CSSProperties}\n              >\n                {m.label}\n              </span>\n            )\n          })}\n        </span>\n      ) : null}\n      {name\n        ? values.map((v, i) => (\n            <input key={i} type=\"hidden\" name={name} value={v} disabled={disabled || undefined} />\n          ))\n        : null}\n    </span>\n  )\n})\n"],"mappings":";;;;;;;AA8DA,SAASG,EAAa,GAA4B,GAA+C;CAC/F,IAAMC,IAAM,KAAK,UAAUC,KAAW,IAAI;CAE1C,OAAOC,QAAc,IAAI,KAAK,aAAaC,GAAQF,CAAO,GAAG,CAACE,GAAQH,CAAG,CAAC;AAC5E;AAEA,IAAMI,KAAa,GAAe,GAAa,MAC7CC,MAAQC,IAAM,KAAMC,IAAQD,MAAQD,IAAMC,KAAQ,KAEvCE,IAAaC,EAA6C,SACrE,EACE,WACA,mBACA,mBACA,QACA,QACA,SACA,0BACA,UACA,cACA,kBACA,WACA,SACA,aACA,aACA,YACA,SACA,WACA,cACA,GAAGC,KAEL,GACA;CACA,IAAMC,IAAYZ,EAAaI,GAAQS,CAAa,GAC9CC,KAAa,MAAkC;EACnD,IAAMC,IAAOC,GAAO,MAAM,MAAMC,EAAE,UAAUC,CAAC;EAE7C,OADIH,IAAaA,EAAK,QACfF,IAAgBD,EAAU,OAAOM,CAAC,IAAI,KAAA;CAC/C,GACMC,IAAoBC,IAAYC,EAAO,KAAK,MAAMT,EAAU,OAAOM,CAAC,CAAC,CAAC,CAAC,KAAK,KAAK,IAAI;CAE3F,OACE,kBAAC,QAAD;EACO;EACL,WAAWI,EAAGzB,EAAO,QAAQ0B,CAAS;EACtC,aAAWC;EACX,gBAAcC,KAAW,KAAA;EACzB,iBAAeC,KAAY,KAAA;EAC3B,iBAAeC,KAAY,KAAA;EAC3B,mBAAiBP,KAAa,KAAA;EAC9B,GAAIT;EARN,UAAA;GAUE,kBAACb,EAAY,MAAb;IACE,WAAWD,EAAO;IAClB,OAAO,CAAC,GAAGwB,CAAM;IACZ;IACA;IACC;IACiB;IACb;IACV,gBAAgB,MAAS;KACvB,AAAKM,KAAUE,EAAeC,CAAI;IACpC;IACA,gBAAgB,MAAS;KACvB,AAAKH,KAAUI,EAAeD,CAAI;IACpC;IAbF,UAAA,CAeE,kBAAChC,EAAY,OAAb;KAAmB,WAAWD,EAAO;KACnC,UAAA,kBAACC,EAAY,OAAb,EAAmB,WAAWD,EAAO,MAAQ,CAAA;IAC5B,CAAA,GAClBmC,EAAO,KAAK,EAAE,KAAKC,GAAU,GAAGC,KAAS,MAAM;KAC9C,IAAMhB,IAAIG,EAAO;KACjB,OACE,kBAACvB,EAAY,OAAb;MAEE,KAAKmC;MACL,WAAWpC,EAAO;MAClB,kBAAgBqB,MAAM,KAAA,IAAY,KAAA,IAAYJ,EAAUI,CAAC;MACzD,GAAIgB;KACL,GALMA,EAAM,EAKZ;IAEL,CAAC,CACe;;GACjBd,IACC,kBAAC,UAAD;IACE,WAAWvB,EAAO;IAClB,SAASsC,EAAQ,GAAGH,EAAO,KAAK,MAAMI,EAAE,EAAE,CAAC;IAC3C,aAAU;IAET,UAAAjB;GACK,CAAA,IACN;GACHH,KAASA,EAAM,SAAS,IACvB,kBAAC,QAAD;IAAM,WAAWnB,EAAO;IAAO,eAAY;IACxC,UAAAmB,EAAM,KAAK,MAAM;KAChB,IAAMqB,IAAIhC,EAAUY,EAAE,OAAOV,GAAKD,CAAG;KACrC,OACE,kBAAC,QAAD;MAEE,WAAWT,EAAO;MAClB,aAAWwC,KAAK,IAAI,UAAUA,KAAK,MAAM,QAAQ,KAAA;MACjD,OAAO,EAAE,QAAQA,EAAE;MAElB,UAAApB,EAAE;KACC,GANCA,EAAE,KAMH;IAEV,CAAC;GACG,CAAA,IACJ;GACHqB,IACGjB,EAAO,KAAK,GAAG,MACb,kBAAC,SAAD;IAAe,MAAK;IAAe;IAAM,OAAOH;IAAG,UAAUQ,KAAY,KAAA;GAAY,GAAzEa,CAAyE,CACtF,IACD;EACA;;AAEV,CAAC"}

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

@@ -0,0 +1,2 @@
+export { Slider } from './Slider.js';
+export type { SliderProps, SliderMark, SliderSize } from './Slider.js';

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

@@ -0,0 +1,12 @@
+import { type FieldLabelProps } from '../Field/index.js';
+import { type SliderProps } from '../Slider/index.js';
+export interface SliderFieldProps extends FieldLabelProps, Omit<SliderProps, 'invalid' | keyof FieldLabelProps> {
+}
+/**
+ * A labelled `Slider`. The thumb is labelled by the Field's label and described by its
+ * help, warning and error. `className`/`style` go to the Field; `ref`, `id`, `name` and the
+ * rest go to the slider (the ref to its thumb).
+ *
+ * <SliderField label="Discount rate" name="discountRate" step={5} showValue formatOptions={{ style: 'unit', unit: 'percent' }} />
+ */
+export declare const SliderField: import("react").ForwardRefExoticComponent<SliderFieldProps & import("react").RefAttributes<HTMLSpanElement>>;

package/dist/components/inputs/SliderField/SliderField.js

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"SliderField.js","names":["SliderField","forwardRef","fieldProps","sliderProps","splitFieldLabelProps","props","Field","id","Slider"],"sources":["../../../../src/components/inputs/SliderField/SliderField.tsx"],"sourcesContent":["import { forwardRef } from 'react'\nimport { Field, type FieldLabelProps } from '#components/inputs/Field'\nimport { splitFieldLabelProps } from '#components/inputs/internal/fieldProps'\nimport { Slider, type SliderProps } from '#components/inputs/Slider'\n\nexport interface SliderFieldProps\n  extends FieldLabelProps, Omit<SliderProps, 'invalid' | keyof FieldLabelProps> {}\n\n/**\n * A labelled `Slider`. The thumb is labelled by the Field's label and described by its\n * help, warning and error. `className`/`style` go to the Field; `ref`, `id`, `name` and the\n * rest go to the slider (the ref to its thumb).\n *\n * <SliderField label=\"Discount rate\" name=\"discountRate\" step={5} showValue formatOptions={{ style: 'unit', unit: 'percent' }} />\n */\nexport const SliderField = forwardRef<HTMLSpanElement, SliderFieldProps>(\n  function SliderField(props, ref) {\n    const [fieldProps, { id, disabled, className, style, ...sliderProps }] =\n      splitFieldLabelProps(props)\n    return (\n      <Field {...fieldProps} htmlFor={id} disabled={disabled} className={className} style={style}>\n        <Slider ref={ref} {...sliderProps} />\n      </Field>\n    )\n  },\n)\n"],"mappings":";;;;;;AAeA,IAAaA,IAAcC,EACzB,SAAqB,GAAO,GAAK;CAC/B,IAAM,CAACC,GAAY,EAAE,OAAI,aAAU,cAAW,UAAO,GAAGC,OACtDC,EAAqBC,CAAK;CAC5B,OACE,kBAACC,GAAD;EAAO,GAAIJ;EAAY,SAASK;EAAc;EAAqB;EAAkB;EACnF,UAAA,kBAACC,GAAD;GAAa;GAAK,GAAIL;EAAc,CAAA;CAC/B,CAAA;AAEX,CACF"}

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

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

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

@@ -0,0 +1,18 @@
+import { type ComponentPropsWithoutRef, type ReactNode } from 'react';
+import { Switch as RadixSwitch } from 'radix-ui';
+export interface SwitchProps extends Omit<ComponentPropsWithoutRef<typeof RadixSwitch.Root>, 'asChild'> {
+    size?: 'sm' | 'md';
+    /** Inline label after the switch. Omit inside a `<Field>` or when labelling another way. */
+    label?: ReactNode;
+    /** Critical border + `aria-invalid`. Rare — a switch usually can't be wrong. */
+    invalid?: boolean;
+    /** Focusable but not editable: sets `aria-readonly` and ignores toggling. */
+    readOnly?: boolean;
+}
+/**
+ * An on/off setting that applies immediately (Radix Switch). For a choice that's
+ * submitted with a form, prefer a checkbox. The ref and `className` go to the switch.
+ *
+ * <Switch label="Repeats monthly" checked={recurring} onCheckedChange={setRecurring} />
+ */
+export declare const Switch: import("react").ForwardRefExoticComponent<SwitchProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/components/inputs/Switch/Switch.js

@@ -0,0 +1,46 @@
+import { cx as e } from "../../../utils/cx.js";
+import { markFieldAware as t, useResolvedField as n } from "../internal/FieldContext.js";
+import r from "./Switch.module.js";
+import { forwardRef as i, useId as a } from "react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import { Switch as c } from "radix-ui";
+//#region src/components/inputs/Switch/Switch.tsx
+var l = t(i(function({ size: t = "md", label: i, invalid: l, id: u, disabled: d, readOnly: f, onCheckedChange: p, className: m, "aria-describedby": h, "aria-invalid": g, ..._ }, v) {
+	let y = a(), b = n({
+		id: u,
+		describedBy: h,
+		invalid: l,
+		ariaInvalid: g,
+		disabled: d,
+		readOnly: f
+	}), x = b.id ?? (i == null ? void 0 : y), S = /* @__PURE__ */ o(c.Root, {
+		ref: v,
+		id: x,
+		className: e(r.switch, m),
+		"data-size": t,
+		"data-invalid": b.invalid || void 0,
+		"data-readonly": b.readOnly || void 0,
+		disabled: b.disabled,
+		"aria-readonly": b.readOnly || void 0,
+		"aria-describedby": b.describedBy,
+		"aria-invalid": b.invalid || void 0,
+		"aria-required": b.required || void 0,
+		"aria-busy": b.busy || void 0,
+		onCheckedChange: b.readOnly ? void 0 : p,
+		..._,
+		children: /* @__PURE__ */ o(c.Thumb, { className: r.thumb })
+	});
+	return i == null ? S : /* @__PURE__ */ s("span", {
+		className: r.wrapper,
+		"data-disabled": b.disabled || void 0,
+		children: [S, /* @__PURE__ */ o("label", {
+			htmlFor: x,
+			className: r.label,
+			children: i
+		})]
+	});
+}));
+//#endregion
+export { l as Switch };
+
+//# sourceMappingURL=Switch.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Switch.js","names":["Switch","RadixSwitch","styles","Switch_module_default","Switch$1","markFieldAware","forwardRef","invalidProp","idProp","disabledProp","readOnlyProp","describedByProp","ariaInvalid","rest","autoId","useId","field","useResolvedField","id","label","control","Switch","cx","className","size","onCheckedChange"],"sources":["../../../../src/components/inputs/Switch/Switch.tsx"],"sourcesContent":["import { forwardRef, useId, type ComponentPropsWithoutRef, type ReactNode } from 'react'\nimport { Switch as RadixSwitch } from 'radix-ui'\nimport { cx } from '#utils/cx'\nimport { markFieldAware, useResolvedField } from '#components/inputs/internal/FieldContext'\nimport styles from './Switch.module.css'\n\nexport interface SwitchProps extends Omit<\n  ComponentPropsWithoutRef<typeof RadixSwitch.Root>,\n  'asChild'\n> {\n  size?: 'sm' | 'md'\n  /** Inline label after the switch. Omit inside a `<Field>` or when labelling another way. */\n  label?: ReactNode\n  /** Critical border + `aria-invalid`. Rare — a switch usually can't be wrong. */\n  invalid?: boolean\n  /** Focusable but not editable: sets `aria-readonly` and ignores toggling. */\n  readOnly?: boolean\n}\n\n/**\n * An on/off setting that applies immediately (Radix Switch). For a choice that's\n * submitted with a form, prefer a checkbox. The ref and `className` go to the switch.\n *\n * <Switch label=\"Repeats monthly\" checked={recurring} onCheckedChange={setRecurring} />\n */\nexport const Switch = markFieldAware(\n  forwardRef<HTMLButtonElement, SwitchProps>(function Switch(\n    {\n      size = 'md',\n      label,\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 autoId = useId()\n    const field = useResolvedField({\n      id: idProp,\n      describedBy: describedByProp,\n      invalid: invalidProp,\n      ariaInvalid,\n      disabled: disabledProp,\n      readOnly: readOnlyProp,\n    })\n    const id = field.id ?? (label != null ? autoId : undefined)\n\n    const control = (\n      <RadixSwitch.Root\n        ref={ref}\n        id={id}\n        className={cx(styles.switch, 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        <RadixSwitch.Thumb className={styles.thumb} />\n      </RadixSwitch.Root>\n    )\n\n    if (label == null) return control\n    return (\n      <span className={styles.wrapper} data-disabled={field.disabled || undefined}>\n        {control}\n        <label htmlFor={id} className={styles.label}>\n          {label}\n        </label>\n      </span>\n    )\n  }),\n)\n"],"mappings":";;;;;;;AAyBA,IAAaA,IAASK,EACpBC,EAA2C,SACzC,EACE,UAAO,MACP,UACA,SAASC,GACT,IAAIC,GACJ,UAAUC,GACV,UAAUC,GACV,oBACA,cACA,oBAAoBC,GACpB,gBAAgBC,GAChB,GAAGC,KAEL,GACA;CACA,IAAMC,IAASC,EAAM,GACfC,IAAQC,EAAiB;EAC7B,IAAIT;EACJ,aAAaG;EACb,SAASJ;EACT;EACA,UAAUE;EACV,UAAUC;CACZ,CAAC,GACKQ,IAAKF,EAAM,OAAOG,KAAS,OAAgB,KAAA,IAATL,IAElCM,IACJ,kBAACnB,EAAY,MAAb;EACO;EACD;EACJ,WAAWqB,EAAGpB,EAAO,QAAQqB,CAAS;EACtC,aAAWC;EACX,gBAAcR,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,IAAYS;EAC9C,GAAIZ;EAEJ,UAAA,kBAACZ,EAAY,OAAb,EAAmB,WAAWC,EAAO,MAAQ,CAAA;CAC7B,CAAA;CAIpB,OADIiB,KAAS,OAAaC,IAExB,kBAAC,QAAD;EAAM,WAAWlB,EAAO;EAAS,iBAAec,EAAM,YAAY,KAAA;EAAlE,UAAA,CACGI,GACD,kBAAC,SAAD;GAAO,SAASF;GAAI,WAAWhB,EAAO;GACnC,UAAAiB;EACI,CAAA,CACH;;AAEV,CAAC,CACH"}

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

@@ -0,0 +1,11 @@
+//#region src/components/inputs/Switch/Switch.module.css
+var e = "kiln-Switch__thumb", t = "kiln-Switch__wrapper", n = "kiln-Switch__label", r = {
+	switch: "kiln-Switch__switch",
+	thumb: e,
+	wrapper: t,
+	label: n
+};
+//#endregion
+export { r as default, n as label, e as thumb, t as wrapper };
+
+//# sourceMappingURL=Switch.module.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Switch.module.js","names":["thumb","wrapper","label","Switch_module_default","\"switch\""],"sources":["../../../../src/components/inputs/Switch/Switch.module.css"],"sourcesContent":["/*\n * Track + thumb. The thumb travels (track width − track height) — a pill in Monograph and\n * Fiesta, a squared key in Ledger (radius follows --radius-action). Fiesta's spring\n * easing makes the thumb land with a bump.\n *\n * Component tokens:\n *   --switch-radius            default var(--radius-action)\n *   --control-checked-bg       default var(--color-accent)\n *   --control-checked-border   default var(--color-accent)\n *   --control-checked-ink      default var(--color-accent-ink)   (thumb when on)\n *   --control-border           default var(--color-line-control) (unchecked edge, ≥ 3:1)\n *   --control-shadow           default var(--shadow-active)\n */\n.switch {\n  --_h: calc(var(--control-sm) * 0.6875);\n  --_w: calc(var(--_h) * 1.8);\n  --_inset: 2px;\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  --_radius: var(--switch-radius, var(--radius-action));\n\n  all: unset;\n  box-sizing: border-box;\n  position: relative;\n  display: inline-flex;\n  flex: none;\n  align-items: center;\n  inline-size: var(--_w);\n  block-size: var(--_h);\n  padding: var(--_inset);\n  border: var(--border-width) solid var(--_border);\n  border-radius: var(--_radius);\n  background-color: var(--color-surface-sunken);\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-2) var(--ease-out),\n    border-color var(--dur-2) var(--ease-out),\n    translate var(--dur-1) var(--ease-spring),\n    box-shadow var(--dur-1) var(--ease-out);\n}\n.switch[data-size='sm'] {\n  --_h: calc(var(--control-sm) * 0.5625);\n}\n\n.switch::before {\n  content: '';\n  position: absolute;\n  inset: calc(var(--space-1) * -1.5);\n}\n\n@media (hover: hover) {\n  .switch:hover:not([data-disabled], [data-state='checked']) {\n    --_border: color-mix(in oklch, var(--color-line-strong), var(--color-ink) 65%);\n  }\n}\n\n.switch[data-state='checked'] {\n  --_border: var(--control-checked-border, var(--color-accent));\n  background-color: var(--control-checked-bg, var(--color-accent));\n}\n\n.switch[data-invalid] {\n  --_border: var(--tone-critical);\n}\n\n.switch:active:not([data-disabled]) {\n  translate: var(--active-shift) var(--active-shift);\n  box-shadow: none;\n}\n\n.switch:focus-visible {\n  outline: 2px solid var(--color-focus);\n  outline-offset: 2px;\n}\n\n.switch[data-disabled] {\n  cursor: not-allowed;\n  opacity: 0.45;\n  box-shadow: none;\n}\n\n/* The thumb is always the track's direct child, so it reads the track's --_w/--_h/--_radius. */\n.thumb {\n  display: block;\n  block-size: 100%;\n  aspect-ratio: 1;\n  border-radius: max(1px, calc(var(--_radius) - var(--_inset) - var(--border-width)));\n  background-color: var(--color-ink-muted);\n  transition:\n    translate var(--dur-2) var(--ease-spring),\n    background-color var(--dur-2) var(--ease-out);\n}\n.thumb[data-state='checked'] {\n  translate: calc(var(--_w) - var(--_h)) 0;\n  background-color: var(--control-checked-ink, var(--color-accent-ink));\n}\n\n/* Inline label */\n.wrapper {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--space-3);\n}\n.label {\n  color: var(--color-ink);\n  font-size: var(--text-md);\n  line-height: var(--leading-snug);\n  cursor: pointer;\n}\n.wrapper[data-disabled] .label {\n  color: var(--color-ink-subtle);\n  cursor: not-allowed;\n}\n"],"mappings":""}

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

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

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

@@ -0,0 +1,13 @@
+import { type SwitchProps } from '../Switch/index.js';
+import type { FieldLabelProps } from '../Field/index.js';
+export interface SwitchFieldProps extends FieldLabelProps, Omit<SwitchProps, 'label' | 'invalid' | keyof FieldLabelProps> {
+}
+/**
+ * A settings row: the label and its help on the left, the switch on the right, an error
+ * line underneath. For a setting that applies as soon as it's flipped; for a choice that
+ * is submitted with a form, a CheckboxField reads better. The ref goes to the switch,
+ * `className`/`style` to the row.
+ *
+ * <SwitchField label="Email me when a payment is due" description="Three days before" checked={on} onCheckedChange={setOn} />
+ */
+export declare const SwitchField: import("react").ForwardRefExoticComponent<SwitchFieldProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/components/inputs/SwitchField/SwitchField.js

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"SwitchField.js","names":["styles","messageStyles","messages_module_default","SwitchField_module_default","SwitchField","forwardRef","fieldProps","rest","splitFieldLabelProps","props","checkedProp","idProp","describedByProp","switchRest","autoId","useId","id","labelId","descriptionId","warningId","errorId","help","description","hint","showErrorMessage","hasErrorMessage","error","errorHidden","showWarning","warning","internal","setInternal","useState","defaultChecked","checked","cx","className","disabled","readOnly","labelHidden","LabelContent","validating","label","FieldDescription","Switch","hasError","required","joinIds","next","onCheckedChange","FieldWarning","FieldError","errorLive"],"sources":["../../../../src/components/inputs/SwitchField/SwitchField.tsx"],"sourcesContent":["import { forwardRef, useId, useState } from 'react'\nimport { cx } from '#utils/cx'\nimport { Switch, type SwitchProps } from '#components/inputs/Switch'\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 messageStyles from '#components/inputs/internal/messages.module.css'\nimport { joinIds } from '#components/inputs/internal/refs'\nimport styles from './SwitchField.module.css'\n\nexport interface SwitchFieldProps\n  extends FieldLabelProps, Omit<SwitchProps, 'label' | 'invalid' | keyof FieldLabelProps> {}\n\n/**\n * A settings row: the label and its help on the left, the switch on the right, an error\n * line underneath. For a setting that applies as soon as it's flipped; for a choice that\n * is submitted with a form, a CheckboxField reads better. The ref goes to the switch,\n * `className`/`style` to the row.\n *\n * <SwitchField label=\"Email me when a payment is due\" description=\"Three days before\" checked={on} onCheckedChange={setOn} />\n */\nexport const SwitchField = forwardRef<HTMLButtonElement, SwitchFieldProps>(\n  function SwitchField(props, ref) {\n    const [fieldProps, rest] = splitFieldLabelProps(props)\n    const {\n      label,\n      description,\n      hint,\n      error,\n      required = false,\n      optional,\n      labelHidden = false,\n      warning,\n      errorLive = true,\n      errorHidden = false,\n      validating = false,\n      readOnly = false,\n    } = fieldProps\n    const {\n      checked: checkedProp,\n      defaultChecked = false,\n      onCheckedChange,\n      id: idProp,\n      disabled = false,\n      className,\n      style,\n      'aria-describedby': describedByProp,\n      ...switchRest\n    } = rest\n\n    const autoId = useId()\n    const id = idProp ?? `${autoId}switch`\n    const labelId = `${id}-label`\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    // Always controlled underneath, so `readOnly` holds even when the caller is uncontrolled.\n    const [internal, setInternal] = useState(defaultChecked)\n    const checked = checkedProp ?? internal\n    const handleCheckedChange = (next: boolean) => {\n      if (readOnly) return\n      if (checkedProp === undefined) setInternal(next)\n      onCheckedChange?.(next)\n    }\n\n    return (\n      <div\n        className={cx(styles.root, className)}\n        style={style}\n        data-disabled={disabled || undefined}\n        data-readonly={readOnly || undefined}\n      >\n        <div className={styles.text}>\n          <label\n            id={labelId}\n            htmlFor={id}\n            className={cx(styles.label, labelHidden && messageStyles.visuallyHidden)}\n          >\n            <LabelContent required={required} optional={optional} busy={validating}>\n              {label}\n            </LabelContent>\n          </label>\n          {help != null ? <FieldDescription id={descriptionId}>{help}</FieldDescription> : null}\n        </div>\n        <span className={styles.slot}>\n          <Switch\n            ref={ref}\n            id={id}\n            disabled={disabled}\n            readOnly={readOnly}\n            required={required}\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            checked={checked}\n            onCheckedChange={handleCheckedChange}\n            {...switchRest}\n          />\n        </span>\n        {showWarning ? (\n          <FieldWarning id={warningId} className={styles.message}>\n            {warning}\n          </FieldWarning>\n        ) : null}\n        {showErrorMessage ? (\n          <FieldError id={errorId} className={styles.message} live={errorLive}>\n            {error}\n          </FieldError>\n        ) : null}\n      </div>\n    )\n  },\n)\n"],"mappings":";;;;;;;;;;;AA2BA,IAAaI,IAAcC,EACzB,SAAqB,GAAO,GAAK;CAC/B,IAAM,CAACC,GAAYC,KAAQC,EAAqBC,CAAK,GAC/C,EACJ,UACA,gBACA,SACA,UACA,cAAW,IACX,aACA,iBAAc,IACd,YACA,eAAY,IACZ,iBAAc,IACd,gBAAa,IACb,cAAW,OACTH,GACE,EACJ,SAASI,GACT,oBAAiB,IACjB,oBACA,IAAIC,GACJ,cAAW,IACX,cACA,UACA,oBAAoBC,GACpB,GAAGC,MACDN,GAEEO,IAASC,EAAM,GACfC,IAAKL,KAAU,GAAGG,EAAO,SACzBG,IAAU,GAAGD,EAAG,SAChBE,IAAgB,GAAGF,EAAG,eACtBG,IAAY,GAAGH,EAAG,WAClBI,IAAU,GAAGJ,EAAG,SAChBK,IAAOC,KAAeC,GACtBC,IAAmBC,EAAgBC,CAAK,KAAK,CAACC,GAC9CC,IAAcC,KAAW,QAAQ,CAACL,GAGlC,CAACM,GAAUC,KAAeC,EAASC,CAAc,GACjDC,IAAUxB,KAAeoB;CAO/B,OACE,kBAAC,OAAD;EACE,WAAWK,EAAGnC,EAAO,MAAMoC,CAAS;EAC7B;EACP,iBAAeC,KAAY,KAAA;EAC3B,iBAAeC,KAAY,KAAA;EAJ7B,UAAA;GAME,kBAAC,OAAD;IAAK,WAAWtC,EAAO;IAAvB,UAAA,CACE,kBAAC,SAAD;KACE,IAAIiB;KACJ,SAASD;KACT,WAAWmB,EAAGnC,EAAO,OAAOuC,KAAetC,EAAc,cAAc;KAEvE,UAAA,kBAACuC,GAAD;MAAwB;MAAoB;MAAU,MAAMC;MACzD,UAAAC;KACW,CAAA;IACT,CAAA,GACNrB,KAAQ,OAAwE,OAAjE,kBAACsB,GAAD;KAAkB,IAAIzB;KAAgB,UAAAG;IAAuB,CAAA,CAC1E;;GACL,kBAAC,QAAD;IAAM,WAAWrB,EAAO;IACtB,UAAA,kBAAC4C,GAAD;KACO;KACD;KACM;KACA;KACA;KACV,SAASC,EAASnB,CAAK;KACvB,iBAAeoB,KAAY,KAAA;KAC3B,aAAWL,KAAc,KAAA;KACzB,oBAAkBM,EAChBnC,GACAS,KAAQ,QAAQH,GAChBU,KAAeT,GACfK,KAAoBJ,CACtB;KACS;KACT,kBA1CqB,MAAkB;MAC7C,AAAIkB,MACA5B,MAAgB,KAAA,KAAWqB,EAAYiB,CAAI,GAC/CC,IAAkBD,CAAI;KACxB;KAuCQ,GAAInC;IACL,CAAA;GACG,CAAA;GACLe,IACC,kBAACsB,GAAD;IAAc,IAAI/B;IAAW,WAAWnB,EAAO;IAC5C,UAAA6B;GACW,CAAA,IACZ;GACHL,IACC,kBAAC2B,GAAD;IAAY,IAAI/B;IAAS,WAAWpB,EAAO;IAAS,MAAMoD;IACvD,UAAA1B;GACS,CAAA,IACV;EACD;;AAET,CACF"}

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

@@ -0,0 +1,12 @@
+//#region src/components/inputs/SwitchField/SwitchField.module.css
+var e = "kiln-SwitchField__root", t = "kiln-SwitchField__text", n = "kiln-SwitchField__label", r = "kiln-SwitchField__slot", i = "kiln-SwitchField__message", a = {
+	root: e,
+	text: t,
+	label: n,
+	slot: r,
+	message: i
+};
+//#endregion
+export { a as default, n as label, i as message, e as root, r as slot, t as text };
+
+//# sourceMappingURL=SwitchField.module.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SwitchField.module.js","names":["root","text","label","slot","message","SwitchField_module_default"],"sources":["../../../../src/components/inputs/SwitchField/SwitchField.module.css"],"sourcesContent":["/*\n * Label           [switch]\n * Help text\n * ⚠ Error\n * A settings row: the text takes the line, the switch sits at the end in a one-line-tall\n * slot so it centres on the label's first line.\n */\n.root {\n  display: grid;\n  grid-template-columns: 1fr auto;\n  column-gap: var(--space-4);\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.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.root[data-readonly] .label {\n  cursor: default;\n}\n\n.slot {\n  display: flex;\n  align-items: center;\n  block-size: 1lh;\n}\n\n.message {\n  grid-column: 1 / -1;\n}\n"],"mappings":""}

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

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

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

@@ -0,0 +1,12 @@
+import { type FieldLabelProps } from '../Field/index.js';
+import { type TagsInputProps } from '../TagsInput/index.js';
+export interface TagsFieldProps extends FieldLabelProps, Omit<TagsInputProps, 'invalid' | keyof FieldLabelProps> {
+}
+/**
+ * Label + TagsInput + description + warning + error. TagsInput props (`value`,
+ * `delimiters`, `maxTags`…) and the ref go to the text input; `className`/`style` go to
+ * the field wrapper. `onBlur` fires once focus leaves the whole control.
+ *
+ * <TagsField label="Labels" description="Press Enter or comma to add" maxTags={8} />
+ */
+export declare const TagsField: import("react").ForwardRefExoticComponent<TagsFieldProps & import("react").RefAttributes<HTMLInputElement>>;

package/dist/components/inputs/TagsField/TagsField.js

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"TagsField.js","names":["TagsField","forwardRef","fieldProps","rest","splitFieldLabelProps","props","inputProps","Field","id","TagsInput"],"sources":["../../../../src/components/inputs/TagsField/TagsField.tsx"],"sourcesContent":["import { forwardRef } from 'react'\nimport { Field, type FieldLabelProps } from '#components/inputs/Field'\nimport { TagsInput, type TagsInputProps } from '#components/inputs/TagsInput'\nimport { splitFieldLabelProps } from '#components/inputs/internal/fieldProps'\n\nexport interface TagsFieldProps\n  extends FieldLabelProps, Omit<TagsInputProps, 'invalid' | keyof FieldLabelProps> {}\n\n/**\n * Label + TagsInput + description + warning + error. TagsInput props (`value`,\n * `delimiters`, `maxTags`…) and the ref go to the text input; `className`/`style` go to\n * the field wrapper. `onBlur` fires once focus leaves the whole control.\n *\n * <TagsField label=\"Labels\" description=\"Press Enter or comma to add\" maxTags={8} />\n */\nexport const TagsField = forwardRef<HTMLInputElement, TagsFieldProps>(\n  function TagsField(props, ref) {\n    const [fieldProps, rest] = splitFieldLabelProps(props)\n    const { id, disabled, className, style, ...inputProps } = rest\n    return (\n      <Field {...fieldProps} htmlFor={id} disabled={disabled} className={className} style={style}>\n        <TagsInput ref={ref} id={id} disabled={disabled} {...inputProps} />\n      </Field>\n    )\n  },\n)\n"],"mappings":";;;;;;AAeA,IAAaA,IAAYC,EACvB,SAAmB,GAAO,GAAK;CAC7B,IAAM,CAACC,GAAYC,KAAQC,EAAqBC,CAAK,GAC/C,EAAE,OAAI,aAAU,cAAW,UAAO,GAAGC,MAAeH;CAC1D,OACE,kBAACI,GAAD;EAAO,GAAIL;EAAY,SAASM;EAAc;EAAqB;EAAkB;EACnF,UAAA,kBAACC,GAAD;GAAgB;GAAS;GAAc;GAAU,GAAIH;EAAa,CAAA;CAC7D,CAAA;AAEX,CACF"}

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

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

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

@@ -0,0 +1,35 @@
+import { type FocusEventHandler } from 'react';
+import type { InputProps } from '../Input/index.js';
+export type TagsRejectReason = 'duplicate' | 'max' | 'empty';
+export interface TagsInputProps extends Omit<InputProps, 'value' | 'defaultValue' | 'onChange' | 'type' | 'onBlur'> {
+    value?: readonly string[];
+    defaultValue?: readonly string[];
+    onValueChange?: (tags: string[]) => void;
+    /**
+     * What ends a tag: single characters (`','`, `';'`, `' '`) and/or the keys `'Enter'` and
+     * `'Tab'`. Character delimiters also split pasted text; `'Enter'` makes pasted line
+     * breaks split too. Default `[',', 'Enter']`.
+     */
+    delimiters?: readonly string[];
+    /** Further tags are rejected (`onReject(tag, 'max')`) once there are this many. */
+    maxTags?: number;
+    /** Default `false`: a tag already in the list is rejected (`'duplicate'`). */
+    allowDuplicates?: boolean;
+    /** `trim` (default) trims whitespace; `lowercase` trims and lower-cases; `none` keeps the text as typed. */
+    normalise?: 'none' | 'trim' | 'lowercase';
+    /** A typed tag wasn't added. */
+    onReject?: (tag: string, reason: TagsRejectReason) => void;
+    /** Accessible name of a chip's remove button. Default `Remove <tag>`. */
+    removeLabel?: (tag: string) => string;
+    /** Fires once focus leaves the whole control (input and chip buttons). */
+    onBlur?: FocusEventHandler<HTMLElement>;
+}
+/**
+ * Free-form tags in one box: type and press Enter (or a comma) to add, Backspace on an
+ * empty box removes the last, each chip has a remove button. Paste splits on the
+ * delimiters. The ref and native input props go to the text input; `className`/`style`
+ * go to the box. With `name`, each tag is submitted as its own hidden input.
+ *
+ * <TagsInput placeholder="Add a label" defaultValue={['Design']} maxTags={8} />
+ */
+export declare const TagsInput: import("react").ForwardRefExoticComponent<TagsInputProps & import("react").RefAttributes<HTMLInputElement>>;

package/dist/components/inputs/TagsInput/TagsInput.js

@@ -0,0 +1,155 @@
+import { cx as e } from "../../../utils/cx.js";
+import { useMergedRefs as t } from "../internal/refs.js";
+import { markFieldAware as n, useResolvedField as r } from "../internal/FieldContext.js";
+import i from "../internal/control.module.js";
+import { Tag as a, TagList as o } from "../../display/Tag/Tag.js";
+import { useControllableState as s } from "../Combobox/useControllableState.js";
+import c from "./TagsInput.module.js";
+import { forwardRef as l, useRef as u, useState as d } from "react";
+import { jsx as f, jsxs as p } from "react/jsx-runtime";
+//#region src/components/inputs/TagsInput/TagsInput.tsx
+var ee = [",", "Enter"], m = /* @__PURE__ */ new Set(["Enter", "Tab"]), te = (e) => `Remove ${e}`;
+function h(e) {
+	return e.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
+function g(e) {
+	let t = e.filter((e) => !m.has(e)).map(h);
+	return e.includes("Enter") && t.push("\\r?\\n"), t.length > 0 ? new RegExp(t.join("|")) : null;
+}
+var _ = n(l(function({ value: n, defaultValue: l, onValueChange: h, delimiters: _ = ee, maxTags: v, allowDuplicates: y = !1, normalise: b = "trim", onReject: x, removeLabel: S = te, size: C = "md", leading: w, trailing: T, invalid: ne, numeric: re = !1, htmlSize: ie, id: ae, disabled: oe, required: E, readOnly: D, inputMode: O, name: k, form: A, placeholder: j, className: M, style: N, onKeyDown: P, onPaste: F, onBlur: I, "aria-describedby": L, "aria-invalid": R, ...z }, B) {
+	let V = r({
+		id: ae,
+		describedBy: L,
+		invalid: ne,
+		ariaInvalid: R,
+		required: E,
+		disabled: oe,
+		readOnly: D
+	}), H = !V.disabled && !V.readOnly, U = u(null), W = u(null), G = t(B, U), [K, q] = s(n, l ?? [], (e) => h?.([...e])), [J, Y] = d(""), X = g(_), se = (e) => b === "none" ? e : b === "lowercase" ? e.trim().toLowerCase() : e.trim(), Z = (e) => {
+		if (!H) return !1;
+		let t = [...K];
+		for (let n of e) {
+			let e = se(n);
+			if (e.trim() === "") {
+				n !== "" && x?.(n, "empty");
+				continue;
+			}
+			if (!y && t.includes(e)) {
+				x?.(e, "duplicate");
+				continue;
+			}
+			if (v !== void 0 && t.length >= v) {
+				x?.(e, "max");
+				continue;
+			}
+			t.push(e);
+		}
+		return t.length !== K.length && (q(t), !0);
+	}, Q = () => {
+		J !== "" && (Z([J]), Y(""));
+	}, $ = (e) => {
+		H && q(K.filter((t, n) => n !== e));
+	}, ce = (e) => {
+		let t = e.target.value;
+		if (X?.test(t)) {
+			let e = t.split(X), n = e.pop() ?? "";
+			Z(e), Y(n);
+			return;
+		}
+		Y(t);
+	}, le = (e) => {
+		if (P?.(e), !(e.defaultPrevented || e.nativeEvent.isComposing)) {
+			if (_.includes(e.key) && (m.has(e.key) || e.key.length === 1) && H) {
+				if (e.key === "Tab") {
+					Q();
+					return;
+				}
+				if (J === "" && e.key === "Enter") return;
+				e.preventDefault(), Q();
+				return;
+			}
+			e.key === "Backspace" && J === "" && H && K.length > 0 && (e.preventDefault(), $(K.length - 1));
+		}
+	}, ue = (e) => {
+		if (F?.(e), e.defaultPrevented || !H || !X) return;
+		let t = e.clipboardData.getData("text");
+		if (!X.test(t)) return;
+		e.preventDefault();
+		let n = e.currentTarget, r = n.selectionStart ?? J.length, i = n.selectionEnd ?? J.length, a = J.slice(0, r) + t + J.slice(i);
+		Z(a.split(X)), Y("");
+	};
+	return /* @__PURE__ */ p("div", {
+		ref: W,
+		className: e(i.box, c.root, M),
+		style: N,
+		"data-size": C,
+		"data-invalid": V.invalid || void 0,
+		"data-disabled": V.disabled || void 0,
+		"data-readonly": V.readOnly || void 0,
+		onPointerDown: (e) => {
+			let t = e.target;
+			t === U.current || t.closest("button, a, input") || (e.preventDefault(), U.current?.focus());
+		},
+		onBlur: (e) => {
+			let t = e.relatedTarget;
+			t && W.current?.contains(t) || (Q(), I?.(e));
+		},
+		children: [
+			w == null ? null : /* @__PURE__ */ f("span", {
+				className: c.adornment,
+				"data-slot": "leading",
+				children: w
+			}),
+			/* @__PURE__ */ p("div", {
+				className: c.values,
+				children: [K.length > 0 ? /* @__PURE__ */ f(o, {
+					className: c.chips,
+					children: K.map((e, t) => /* @__PURE__ */ f(a, {
+						className: c.chip,
+						onRemove: H ? () => {
+							$(t), U.current?.focus();
+						} : void 0,
+						removeLabel: S(e),
+						children: e
+					}, `${String(t)}:${e}`))
+				}) : null, /* @__PURE__ */ f("input", {
+					ref: G,
+					id: V.id,
+					type: "text",
+					className: c.input,
+					value: J,
+					size: ie,
+					placeholder: K.length === 0 ? j : void 0,
+					disabled: V.disabled,
+					readOnly: V.readOnly,
+					inputMode: O ?? (re ? "decimal" : void 0),
+					enterKeyHint: "enter",
+					"aria-describedby": V.describedBy,
+					"aria-invalid": V.invalid || void 0,
+					"aria-required": V.required || void 0,
+					"aria-busy": V.busy || void 0,
+					...z,
+					onChange: ce,
+					onKeyDown: le,
+					onPaste: ue
+				})]
+			}),
+			T == null ? null : /* @__PURE__ */ f("span", {
+				className: c.adornment,
+				"data-slot": "trailing",
+				children: T
+			}),
+			k === void 0 ? null : K.map((e, t) => /* @__PURE__ */ f("input", {
+				type: "hidden",
+				name: k,
+				value: e,
+				form: A,
+				disabled: V.disabled || void 0
+			}, `${String(t)}:${e}`))
+		]
+	});
+}));
+//#endregion
+export { _ as TagsInput };
+
+//# sourceMappingURL=TagsInput.js.map