@mitcsutt/kiln-ui 0.1.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"TagsInput.js","names":["control","styles","control_module_default","TagsInput_module_default","DEFAULT_DELIMITERS","KEY_DELIMITERS","defaultRemoveLabel","tag","escapeRegExp","text","splitter","parts","delimiters","d","TagsInput","markFieldAware","forwardRef","valueProp","invalidProp","idProp","disabledProp","requiredProp","readOnlyProp","describedByProp","ariaInvalid","rest","field","useResolvedField","interactive","inputRef","useRef","rootRef","composedRef","useMergedRefs","ref","tags","setTags","useControllableState","defaultValue","onValueChange","next","draft","setDraft","useState","split","clean","normalise","commit","raw","candidates","onReject","allowDuplicates","maxTags","commitDraft","removeAt","i","index","handleChange","event","last","handleKeyDown","onKeyDown","handlePaste","onPaste","input","start","end","combined","cx","className","size","target","onBlur","leading","TagList","Tag","removeLabel","htmlSize","placeholder","inputMode","numeric","trailing","name"],"sources":["../../../../src/components/inputs/TagsInput/TagsInput.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useRef,\n  useState,\n  type ChangeEvent,\n  type ClipboardEvent,\n  type FocusEvent,\n  type FocusEventHandler,\n  type KeyboardEvent,\n  type PointerEvent,\n} from 'react'\nimport { cx } from '#utils/cx'\nimport { Tag, TagList } from '#components/display/Tag'\nimport type { InputProps } from '#components/inputs/Input'\nimport { useControllableState } from '#components/inputs/Combobox/useControllableState'\nimport { markFieldAware, useResolvedField } from '#components/inputs/internal/FieldContext'\nimport { useMergedRefs } from '#components/inputs/internal/refs'\nimport control from '#components/inputs/internal/control.module.css'\nimport styles from './TagsInput.module.css'\n\nexport type TagsRejectReason = 'duplicate' | 'max' | 'empty'\n\nexport interface TagsInputProps extends Omit<\n  InputProps,\n  'value' | 'defaultValue' | 'onChange' | 'type' | 'onBlur'\n> {\n  value?: readonly string[]\n  defaultValue?: readonly string[]\n  onValueChange?: (tags: string[]) => void\n  /**\n   * What ends a tag: single characters (`','`, `';'`, `' '`) and/or the keys `'Enter'` and\n   * `'Tab'`. Character delimiters also split pasted text; `'Enter'` makes pasted line\n   * breaks split too. Default `[',', 'Enter']`.\n   */\n  delimiters?: readonly string[]\n  /** Further tags are rejected (`onReject(tag, 'max')`) once there are this many. */\n  maxTags?: number\n  /** Default `false`: a tag already in the list is rejected (`'duplicate'`). */\n  allowDuplicates?: boolean\n  /** `trim` (default) trims whitespace; `lowercase` trims and lower-cases; `none` keeps the text as typed. */\n  normalise?: 'none' | 'trim' | 'lowercase'\n  /** A typed tag wasn't added. */\n  onReject?: (tag: string, reason: TagsRejectReason) => void\n  /** Accessible name of a chip's remove button. Default `Remove <tag>`. */\n  removeLabel?: (tag: string) => string\n  /** Fires once focus leaves the whole control (input and chip buttons). */\n  onBlur?: FocusEventHandler<HTMLElement>\n}\n\nconst DEFAULT_DELIMITERS: readonly string[] = [',', 'Enter']\nconst KEY_DELIMITERS = new Set(['Enter', 'Tab'])\nconst defaultRemoveLabel = (tag: string) => `Remove ${tag}`\n\nfunction escapeRegExp(text: string): string {\n  return text.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\$&')\n}\n\n/** Splits text on the character delimiters (and line breaks when Enter is a delimiter). */\nfunction splitter(delimiters: readonly string[]): RegExp | null {\n  const parts = delimiters.filter((d) => !KEY_DELIMITERS.has(d)).map(escapeRegExp)\n  if (delimiters.includes('Enter')) parts.push('\\\\r?\\\\n')\n  return parts.length > 0 ? new RegExp(parts.join('|')) : null\n}\n\n/**\n * Free-form tags in one box: type and press Enter (or a comma) to add, Backspace on an\n * empty box removes the last, each chip has a remove button. Paste splits on the\n * delimiters. The ref and native input props go to the text input; `className`/`style`\n * go to the box. With `name`, each tag is submitted as its own hidden input.\n *\n * <TagsInput placeholder=\"Add a label\" defaultValue={['Design']} maxTags={8} />\n */\nexport const TagsInput = markFieldAware(\n  forwardRef<HTMLInputElement, TagsInputProps>(function TagsInput(\n    {\n      value: valueProp,\n      defaultValue,\n      onValueChange,\n      delimiters = DEFAULT_DELIMITERS,\n      maxTags,\n      allowDuplicates = false,\n      normalise = 'trim',\n      onReject,\n      removeLabel = defaultRemoveLabel,\n      size = 'md',\n      leading,\n      trailing,\n      invalid: invalidProp,\n      numeric = false,\n      htmlSize,\n      id: idProp,\n      disabled: disabledProp,\n      required: requiredProp,\n      readOnly: readOnlyProp,\n      inputMode,\n      name,\n      form,\n      placeholder,\n      className,\n      style,\n      onKeyDown,\n      onPaste,\n      onBlur,\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      required: requiredProp,\n      disabled: disabledProp,\n      readOnly: readOnlyProp,\n    })\n    const interactive = !field.disabled && !field.readOnly\n    const inputRef = useRef<HTMLInputElement>(null)\n    const rootRef = useRef<HTMLDivElement>(null)\n    const composedRef = useMergedRefs(ref, inputRef)\n\n    const [tags, setTags] = useControllableState<readonly string[]>(\n      valueProp,\n      defaultValue ?? [],\n      (next) => onValueChange?.([...next]),\n    )\n    const [draft, setDraft] = useState('')\n    const split = splitter(delimiters)\n\n    const clean = (text: string) =>\n      normalise === 'none'\n        ? text\n        : normalise === 'lowercase'\n          ? text.trim().toLowerCase()\n          : text.trim()\n\n    /** Adds every candidate it can, reporting the rest. Returns whether anything was added. */\n    const commit = (candidates: readonly string[]): boolean => {\n      if (!interactive) return false\n      const next = [...tags]\n      for (const raw of candidates) {\n        const tag = clean(raw)\n        if (tag.trim() === '') {\n          if (raw !== '') onReject?.(raw, 'empty')\n          continue\n        }\n        if (!allowDuplicates && next.includes(tag)) {\n          onReject?.(tag, 'duplicate')\n          continue\n        }\n        if (maxTags !== undefined && next.length >= maxTags) {\n          onReject?.(tag, 'max')\n          continue\n        }\n        next.push(tag)\n      }\n      if (next.length === tags.length) return false\n      setTags(next)\n      return true\n    }\n\n    const commitDraft = () => {\n      if (draft === '') return\n      commit([draft])\n      setDraft('')\n    }\n\n    const removeAt = (index: number) => {\n      if (!interactive) return\n      setTags(tags.filter((_, i) => i !== index))\n    }\n\n    const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n      const text = event.target.value\n      // Typed (or IME/mobile-inserted) delimiter characters end a tag.\n      if (split?.test(text)) {\n        const parts = text.split(split)\n        const last = parts.pop() ?? ''\n        commit(parts)\n        setDraft(last)\n        return\n      }\n      setDraft(text)\n    }\n\n    const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {\n      onKeyDown?.(event)\n      if (event.defaultPrevented || event.nativeEvent.isComposing) return\n      const isDelimiter =\n        delimiters.includes(event.key) && (KEY_DELIMITERS.has(event.key) || event.key.length === 1)\n      if (isDelimiter && interactive) {\n        if (event.key === 'Tab') {\n          // Tab still moves focus; only a non-empty draft becomes a tag.\n          commitDraft()\n          return\n        }\n        if (draft === '' && event.key === 'Enter') return // let Enter submit the form\n        event.preventDefault()\n        commitDraft()\n        return\n      }\n      if (event.key === 'Backspace' && draft === '' && interactive && tags.length > 0) {\n        event.preventDefault()\n        removeAt(tags.length - 1)\n      }\n    }\n\n    const handlePaste = (event: ClipboardEvent<HTMLInputElement>) => {\n      onPaste?.(event)\n      if (event.defaultPrevented || !interactive || !split) return\n      const text = event.clipboardData.getData('text')\n      if (!split.test(text)) return\n      event.preventDefault()\n      const input = event.currentTarget\n      const start = input.selectionStart ?? draft.length\n      const end = input.selectionEnd ?? draft.length\n      const combined = draft.slice(0, start) + text + draft.slice(end)\n      commit(combined.split(split))\n      setDraft('')\n    }\n\n    /** Focus left the whole control: a half-typed tag is kept, not lost. */\n    const handleBlur = (event: FocusEvent<HTMLDivElement>) => {\n      const next = event.relatedTarget as Node | null\n      if (next && rootRef.current?.contains(next)) return\n      commitDraft()\n      onBlur?.(event)\n    }\n\n    // Clicking the box's padding focuses the input, like one native control.\n    const handlePointerDown = (event: PointerEvent<HTMLDivElement>) => {\n      const target = event.target as HTMLElement\n      if (target === inputRef.current || target.closest('button, a, input')) return\n      event.preventDefault()\n      inputRef.current?.focus()\n    }\n\n    return (\n      <div\n        ref={rootRef}\n        className={cx(control.box, styles.root, className)}\n        style={style}\n        data-size={size}\n        data-invalid={field.invalid || undefined}\n        data-disabled={field.disabled || undefined}\n        data-readonly={field.readOnly || undefined}\n        onPointerDown={handlePointerDown}\n        onBlur={handleBlur}\n      >\n        {leading != null ? (\n          <span className={styles.adornment} data-slot=\"leading\">\n            {leading}\n          </span>\n        ) : null}\n        <div className={styles.values}>\n          {tags.length > 0 ? (\n            <TagList className={styles.chips}>\n              {tags.map((tag, index) => (\n                <Tag\n                  // Duplicates are allowed when asked for, so the index is part of the key.\n                  key={`${String(index)}:${tag}`}\n                  className={styles.chip}\n                  onRemove={\n                    interactive\n                      ? () => {\n                          removeAt(index)\n                          inputRef.current?.focus()\n                        }\n                      : undefined\n                  }\n                  removeLabel={removeLabel(tag)}\n                >\n                  {tag}\n                </Tag>\n              ))}\n            </TagList>\n          ) : null}\n          <input\n            ref={composedRef}\n            id={field.id}\n            type=\"text\"\n            className={styles.input}\n            value={draft}\n            size={htmlSize}\n            placeholder={tags.length === 0 ? placeholder : undefined}\n            disabled={field.disabled}\n            readOnly={field.readOnly}\n            inputMode={inputMode ?? (numeric ? 'decimal' : undefined)}\n            enterKeyHint=\"enter\"\n            aria-describedby={field.describedBy}\n            aria-invalid={field.invalid || undefined}\n            aria-required={field.required || undefined}\n            aria-busy={field.busy || undefined}\n            {...rest}\n            onChange={handleChange}\n            onKeyDown={handleKeyDown}\n            onPaste={handlePaste}\n          />\n        </div>\n        {trailing != null ? (\n          <span className={styles.adornment} data-slot=\"trailing\">\n            {trailing}\n          </span>\n        ) : null}\n        {name !== undefined\n          ? tags.map((tag, index) => (\n              <input\n                key={`${String(index)}:${tag}`}\n                type=\"hidden\"\n                name={name}\n                value={tag}\n                form={form}\n                disabled={field.disabled || undefined}\n              />\n            ))\n          : null}\n      </div>\n    )\n  }),\n)\n"],"mappings":"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"}

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

@@ -0,0 +1,13 @@
+//#region src/components/inputs/TagsInput/TagsInput.module.css
+var e = "kiln-TagsInput__root", t = "kiln-TagsInput__values", n = "kiln-TagsInput__chips", r = "kiln-TagsInput__chip", i = "kiln-TagsInput__input", a = "kiln-TagsInput__adornment", o = {
+	root: e,
+	values: t,
+	chips: n,
+	chip: r,
+	input: i,
+	adornment: a
+};
+//#endregion
+export { a as adornment, r as chip, n as chips, o as default, i as input, e as root, t as values };
+
+//# sourceMappingURL=TagsInput.module.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TagsInput.module.js","names":["root","values","chips","chip","input","adornment","TagsInput_module_default"],"sources":["../../../../src/components/inputs/TagsInput/TagsInput.module.css"],"sourcesContent":["/*\n * The box (border, radius, sizes, states) comes from inputs/internal/control.module.css;\n * this file lays out the chips and the text input inside it. Chips are `Tag`s, so they\n * follow `--tag-radius`.\n */\n.root {\n  display: flex;\n  align-items: center;\n  gap: var(--space-2);\n  inline-size: 100%;\n  padding-block: calc(var(--space-1) * 0.75);\n  padding-inline: var(--_px);\n  cursor: text;\n}\n.root:focus-within {\n  outline: 2px solid var(--color-focus);\n  outline-offset: 2px;\n}\n.root[data-disabled] {\n  cursor: not-allowed;\n}\n\n.values {\n  display: flex;\n  flex: 1;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--space-1);\n  min-inline-size: 0;\n}\n\n.chips {\n  display: contents;\n}\n\n.chip {\n  max-inline-size: 100%;\n}\n\n.input {\n  flex: 1;\n  min-inline-size: 8ch;\n  min-block-size: calc(var(--space-5) * 0.9);\n  margin: 0;\n  padding: 0;\n  border: 0;\n  background: transparent;\n  color: inherit;\n  font: inherit;\n  letter-spacing: inherit;\n  outline: none;\n}\n.input:focus-visible {\n  outline: none;\n}\n.input:disabled {\n  cursor: not-allowed;\n}\n.input::placeholder {\n  color: var(--color-ink-subtle);\n  opacity: 1;\n}\n\n.adornment {\n  display: inline-flex;\n  flex: none;\n  align-items: center;\n  gap: var(--space-1);\n  color: var(--color-ink-subtle);\n  font-size: 0.875em;\n  white-space: nowrap;\n  user-select: none;\n}\n.adornment > svg {\n  inline-size: 1.15em;\n  block-size: 1.15em;\n}\n"],"mappings":""}

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

@@ -0,0 +1,2 @@
+export { TagsInput } from './TagsInput.js';
+export type { TagsInputProps, TagsRejectReason } from './TagsInput.js';

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

@@ -0,0 +1,18 @@
+import { type FieldLabelProps } from '../Field/index.js';
+import { type InputProps } from '../Input/index.js';
+export interface TextFieldProps extends FieldLabelProps, Omit<InputProps, 'invalid'> {
+    /** Called with the new string on every change (alongside the native `onChange`). */
+    onValueChange?: (value: string) => void;
+    /**
+     * Shows a "12 / 280" character counter under the field (needs `maxLength`). Announced
+     * politely only once the remaining count is within 10% of the limit.
+     */
+    showCount?: boolean;
+}
+/**
+ * Label + Input + description + error in one. Input props (`value`, `type`, `leading`,
+ * `numeric`…) and the ref go to the input; `className`/`style` go to the field wrapper.
+ *
+ * <TextField label="Amount" numeric leading="$" trailing="AUD" error={errors.amount} />
+ */
+export declare const TextField: import("react").ForwardRefExoticComponent<TextFieldProps & import("react").RefAttributes<HTMLInputElement>>;

package/dist/components/inputs/TextField/TextField.js

@@ -0,0 +1,40 @@
+import { FieldCount as e } from "../internal/messages.js";
+import { Field as t } from "../Field/Field.js";
+import { Input as n } from "../Input/Input.js";
+import { splitFieldLabelProps as r } from "../internal/fieldProps.js";
+import { forwardRef as i, useId as a, useState as o } from "react";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+//#region src/components/inputs/TextField/TextField.tsx
+var l = i(function(i, l) {
+	let [u, d] = r(i), { id: f, disabled: p, className: m, style: h, onChange: g, onValueChange: _, showCount: v, maxLength: y, ...b } = d, x = a(), S = `${f ?? `${x}control`}-count`, [C, w] = o(() => typeof b.defaultValue == "string" ? b.defaultValue : ""), T = typeof b.value == "string" ? b.value : C, E = (e) => {
+		w(e.target.value), g?.(e), _?.(e.target.value);
+	}, D = v === !0 && y != null, O = y == null ? 0 : y - T.length, k = y != null && O <= Math.ceil(y * .1);
+	return /* @__PURE__ */ c(t, {
+		...u,
+		htmlFor: f,
+		disabled: p,
+		className: m,
+		style: h,
+		children: [/* @__PURE__ */ s(n, {
+			ref: l,
+			id: f,
+			disabled: p,
+			maxLength: y,
+			onChange: E,
+			"aria-describedby": D ? S : void 0,
+			...b
+		}), D ? /* @__PURE__ */ c(e, {
+			id: S,
+			live: k,
+			children: [
+				T.length,
+				" / ",
+				y
+			]
+		}) : null]
+	});
+});
+//#endregion
+export { l as TextField };
+
+//# sourceMappingURL=TextField.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TextField.js","names":["TextField","forwardRef","fieldProps","rest","splitFieldLabelProps","props","inputRest","autoId","useId","countId","id","internalValue","setInternalValue","useState","currentValue","handleChange","event","onChange","onValueChange","showCounter","showCount","maxLength","remaining","nearLimit","Field","Input","FieldCount"],"sources":["../../../../src/components/inputs/TextField/TextField.tsx"],"sourcesContent":["import { forwardRef, useId, useState, type ChangeEvent } from 'react'\nimport { Field, type FieldLabelProps } from '#components/inputs/Field'\nimport { Input, type InputProps } from '#components/inputs/Input'\nimport { splitFieldLabelProps } from '#components/inputs/internal/fieldProps'\nimport { FieldCount } from '#components/inputs/internal/messages'\n\nexport interface TextFieldProps extends FieldLabelProps, Omit<InputProps, 'invalid'> {\n  /** Called with the new string on every change (alongside the native `onChange`). */\n  onValueChange?: (value: string) => void\n  /**\n   * Shows a \"12 / 280\" character counter under the field (needs `maxLength`). Announced\n   * politely only once the remaining count is within 10% of the limit.\n   */\n  showCount?: boolean\n}\n\n/**\n * Label + Input + description + error in one. Input props (`value`, `type`, `leading`,\n * `numeric`…) and the ref go to the input; `className`/`style` go to the field wrapper.\n *\n * <TextField label=\"Amount\" numeric leading=\"$\" trailing=\"AUD\" error={errors.amount} />\n */\nexport const TextField = forwardRef<HTMLInputElement, TextFieldProps>(\n  function TextField(props, ref) {\n    const [fieldProps, rest] = splitFieldLabelProps(props)\n    const {\n      id,\n      disabled,\n      className,\n      style,\n      onChange,\n      onValueChange,\n      showCount,\n      maxLength,\n      ...inputRest\n    } = rest\n    const autoId = useId()\n    const controlId = id ?? `${autoId}control`\n    const countId = `${controlId}-count`\n\n    const [internalValue, setInternalValue] = useState(() =>\n      typeof inputRest.defaultValue === 'string' ? inputRest.defaultValue : '',\n    )\n    const currentValue = typeof inputRest.value === 'string' ? inputRest.value : internalValue\n\n    const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n      setInternalValue(event.target.value)\n      onChange?.(event)\n      onValueChange?.(event.target.value)\n    }\n\n    const showCounter = showCount === true && maxLength != null\n    const remaining = maxLength != null ? maxLength - currentValue.length : 0\n    const nearLimit = maxLength != null && remaining <= Math.ceil(maxLength * 0.1)\n\n    return (\n      <Field {...fieldProps} htmlFor={id} disabled={disabled} className={className} style={style}>\n        <Input\n          ref={ref}\n          id={id}\n          disabled={disabled}\n          maxLength={maxLength}\n          onChange={handleChange}\n          aria-describedby={showCounter ? countId : undefined}\n          {...inputRest}\n        />\n        {showCounter ? (\n          <FieldCount id={countId} live={nearLimit}>\n            {currentValue.length} / {maxLength}\n          </FieldCount>\n        ) : null}\n      </Field>\n    )\n  },\n)\n"],"mappings":";;;;;;;AAsBA,IAAaA,IAAYC,EACvB,SAAmB,GAAO,GAAK;CAC7B,IAAM,CAACC,GAAYC,KAAQC,EAAqBC,CAAK,GAC/C,EACJ,OACA,aACA,cACA,UACA,aACA,kBACA,cACA,cACA,GAAGC,MACDH,GACEI,IAASC,EAAM,GAEfC,IAAU,GADEC,KAAM,GAAGH,EAAO,SACL,SAEvB,CAACI,GAAeC,KAAoBC,QACxC,OAAOP,EAAU,gBAAiB,WAAWA,EAAU,eAAe,EACxE,GACMQ,IAAe,OAAOR,EAAU,SAAU,WAAWA,EAAU,QAAQK,GAEvEI,KAAgB,MAAyC;EAG7D,AAFAH,EAAiBI,EAAM,OAAO,KAAK,GACnCC,IAAWD,CAAK,GAChBE,IAAgBF,EAAM,OAAO,KAAK;CACpC,GAEMG,IAAcC,MAAc,MAAQC,KAAa,MACjDC,IAAYD,KAAa,OAAyC,IAAlCA,IAAYP,EAAa,QACzDS,IAAYF,KAAa,QAAQC,KAAa,KAAK,KAAKD,IAAY,EAAG;CAE7E,OACE,kBAACG,GAAD;EAAO,GAAItB;EAAY,SAASQ;EAAc;EAAqB;EAAkB;EAArF,UAAA,CACE,kBAACe,GAAD;GACO;GACD;GACM;GACC;GACX,UAAUV;GACV,oBAAkBI,IAAcV,IAAU,KAAA;GAC1C,GAAIH;EACL,CAAA,GACAa,IACC,kBAACO,GAAD;GAAY,IAAIjB;GAAS,MAAMc;GAA/B,UAAA;IACGT,EAAa;IAAO;IAAIO;GACf;EACV,CAAA,IAAA,IACC;;AAEX,CACF"}

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

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

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

@@ -0,0 +1,20 @@
+import { type TextareaHTMLAttributes } from 'react';
+import type { Size } from '../../../utils/tokens.js';
+export interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
+    size?: Size;
+    /** Critical border + `aria-invalid`. Inside a `<Field error>` this is set for you. */
+    invalid?: boolean;
+    /**
+     * Grow with the content instead of scrolling. `rows` becomes the minimum height and
+     * `maxRows` the cap. Uses CSS `field-sizing: content`, with a small script fallback.
+     */
+    autoResize?: boolean;
+    /** With `autoResize`: stop growing after this many rows and scroll instead. */
+    maxRows?: number;
+}
+/**
+ * Multi-line text. Same box, states and focus ring as `Input`.
+ *
+ * <Textarea autoResize rows={2} maxRows={8} />
+ */
+export declare const Textarea: import("react").ForwardRefExoticComponent<TextareaProps & import("react").RefAttributes<HTMLTextAreaElement>>;

package/dist/components/inputs/Textarea/Textarea.js

@@ -0,0 +1,61 @@
+import { cx as e } from "../../../utils/cx.js";
+import { mergeStyles as t } from "../../../utils/responsive.js";
+import { useMergedRefs as n } from "../internal/refs.js";
+import { markFieldAware as r, useResolvedField as i } from "../internal/FieldContext.js";
+import a from "../internal/control.module.js";
+import o from "./Textarea.module.js";
+import { forwardRef as s, useEffect as c, useRef as l } from "react";
+import { jsx as u } from "react/jsx-runtime";
+//#region src/components/inputs/Textarea/Textarea.tsx
+function d() {
+	return typeof CSS < "u" && typeof CSS.supports == "function" && CSS.supports("field-sizing", "content");
+}
+var f = r(s(function({ size: r = "md", invalid: s, autoResize: f = !1, rows: p = 3, maxRows: m, id: h, disabled: g, required: _, readOnly: v, className: y, style: b, "aria-describedby": x, "aria-invalid": S, ...C }, w) {
+	let T = l(null), E = n(w, T), D = i({
+		id: h,
+		describedBy: x,
+		invalid: s,
+		ariaInvalid: S,
+		disabled: g,
+		readOnly: v
+	});
+	return c(() => {
+		let e = T.current;
+		if (!f || !e || d()) return;
+		let t = () => {
+			e.style.height = "auto";
+			let t = e.offsetHeight - e.clientHeight;
+			e.style.height = `${String(e.scrollHeight + t)}px`;
+		};
+		return t(), e.addEventListener("input", t), () => {
+			e.removeEventListener("input", t);
+		};
+	}, [f, C.value]), /* @__PURE__ */ u("textarea", {
+		ref: E,
+		id: D.id,
+		rows: p,
+		className: e(a.box, o.textarea, y),
+		style: t(f ? {
+			"--_rows": p,
+			"--_max-rows": m
+		} : void 0, b),
+		"data-size": r,
+		"data-auto-resize": f || void 0,
+		"data-max-rows": f && m ? "" : void 0,
+		"data-invalid": D.invalid || void 0,
+		"data-disabled": D.disabled || void 0,
+		"data-readonly": D.readOnly || void 0,
+		disabled: D.disabled,
+		readOnly: D.readOnly,
+		required: _ ?? D.required,
+		"aria-describedby": D.describedBy,
+		"aria-invalid": D.invalid || void 0,
+		"aria-required": D.required || void 0,
+		"aria-busy": D.busy || void 0,
+		...C
+	});
+}));
+//#endregion
+export { f as Textarea };
+
+//# sourceMappingURL=Textarea.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Textarea.js","names":["control","styles","control_module_default","Textarea_module_default","supportsFieldSizing","Textarea","markFieldAware","forwardRef","invalidProp","idProp","disabledProp","requiredProp","describedByProp","ariaInvalid","rest","innerRef","useRef","composedRef","useMergedRefs","ref","field","useResolvedField","useEffect","el","autoResize","fit","border","cx","className","mergeStyles","rows","maxRows","style","size"],"sources":["../../../../src/components/inputs/Textarea/Textarea.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useEffect,\n  useRef,\n  type CSSProperties,\n  type TextareaHTMLAttributes,\n} from 'react'\nimport { cx } from '#utils/cx'\nimport { mergeStyles } from '#utils/responsive'\nimport type { Size } from '#utils/tokens'\nimport { markFieldAware, useResolvedField } from '#components/inputs/internal/FieldContext'\nimport { useMergedRefs } from '#components/inputs/internal/refs'\nimport control from '#components/inputs/internal/control.module.css'\nimport styles from './Textarea.module.css'\n\nexport interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {\n  size?: Size\n  /** Critical border + `aria-invalid`. Inside a `<Field error>` this is set for you. */\n  invalid?: boolean\n  /**\n   * Grow with the content instead of scrolling. `rows` becomes the minimum height and\n   * `maxRows` the cap. Uses CSS `field-sizing: content`, with a small script fallback.\n   */\n  autoResize?: boolean\n  /** With `autoResize`: stop growing after this many rows and scroll instead. */\n  maxRows?: number\n}\n\nfunction supportsFieldSizing(): boolean {\n  return (\n    typeof CSS !== 'undefined' &&\n    typeof CSS.supports === 'function' &&\n    CSS.supports('field-sizing', 'content')\n  )\n}\n\n/**\n * Multi-line text. Same box, states and focus ring as `Input`.\n *\n * <Textarea autoResize rows={2} maxRows={8} />\n */\nexport const Textarea = markFieldAware(\n  forwardRef<HTMLTextAreaElement, TextareaProps>(function Textarea(\n    {\n      size = 'md',\n      invalid: invalidProp,\n      autoResize = false,\n      rows = 3,\n      maxRows,\n      id: idProp,\n      disabled: disabledProp,\n      required: requiredProp,\n      readOnly,\n      className,\n      style,\n      'aria-describedby': describedByProp,\n      'aria-invalid': ariaInvalid,\n      ...rest\n    },\n    ref,\n  ) {\n    const innerRef = useRef<HTMLTextAreaElement>(null)\n    const composedRef = useMergedRefs(ref, innerRef)\n    const field = useResolvedField({\n      id: idProp,\n      describedBy: describedByProp,\n      invalid: invalidProp,\n      ariaInvalid,\n      disabled: disabledProp,\n      readOnly,\n    })\n\n    // Fallback for browsers without field-sizing: size to scrollHeight on every input.\n    useEffect(() => {\n      const el = innerRef.current\n      if (!autoResize || !el || supportsFieldSizing()) return\n      const fit = () => {\n        el.style.height = 'auto'\n        const border = el.offsetHeight - el.clientHeight\n        el.style.height = `${String(el.scrollHeight + border)}px`\n      }\n      fit()\n      el.addEventListener('input', fit)\n      return () => {\n        el.removeEventListener('input', fit)\n      }\n    }, [autoResize, rest.value])\n\n    return (\n      <textarea\n        ref={composedRef}\n        id={field.id}\n        rows={rows}\n        className={cx(control.box, styles.textarea, className)}\n        style={mergeStyles(\n          autoResize ? ({ '--_rows': rows, '--_max-rows': maxRows } as CSSProperties) : undefined,\n          style,\n        )}\n        data-size={size}\n        data-auto-resize={autoResize || undefined}\n        data-max-rows={autoResize && maxRows ? '' : undefined}\n        data-invalid={field.invalid || undefined}\n        data-disabled={field.disabled || undefined}\n        data-readonly={field.readOnly || undefined}\n        disabled={field.disabled}\n        readOnly={field.readOnly}\n        required={requiredProp ?? field.required}\n        aria-describedby={field.describedBy}\n        aria-invalid={field.invalid || undefined}\n        aria-required={field.required || undefined}\n        aria-busy={field.busy || undefined}\n        {...rest}\n      />\n    )\n  }),\n)\n"],"mappings":";;;;;;;;;AA4BA,SAASI,IAA+B;CACtC,OACE,OAAO,MAAQ,OACf,OAAO,IAAI,YAAa,cACxB,IAAI,SAAS,gBAAgB,SAAS;AAE1C;AAOA,IAAaC,IAAWC,EACtBC,EAA+C,SAC7C,EACE,UAAO,MACP,SAASC,GACT,gBAAa,IACb,UAAO,GACP,YACA,IAAIC,GACJ,UAAUC,GACV,UAAUC,GACV,aACA,cACA,UACA,oBAAoBC,GACpB,gBAAgBC,GAChB,GAAGC,KAEL,GACA;CACA,IAAMC,IAAWC,EAA4B,IAAI,GAC3CC,IAAcC,EAAcC,GAAKJ,CAAQ,GACzCK,IAAQC,EAAiB;EAC7B,IAAIZ;EACJ,aAAaG;EACb,SAASJ;EACT;EACA,UAAUE;EACV;CACF,CAAC;CAkBD,OAfAY,QAAgB;EACd,IAAMC,IAAKR,EAAS;EACpB,IAAI,CAACS,KAAc,CAACD,KAAMnB,EAAoB,GAAG;EACjD,IAAMqB,UAAY;GAChB,EAAG,MAAM,SAAS;GAClB,IAAMC,IAASH,EAAG,eAAeA,EAAG;GACpC,EAAG,MAAM,SAAS,GAAG,OAAOA,EAAG,eAAeG,CAAM,EAAE;EACxD;EAGA,OAFAD,EAAI,GACJF,EAAG,iBAAiB,SAASE,CAAG,SACnB;GACX,EAAG,oBAAoB,SAASA,CAAG;EACrC;CACF,GAAG,CAACD,GAAYV,EAAK,KAAK,CAAC,GAGzB,kBAAC,YAAD;EACE,KAAKG;EACL,IAAIG,EAAM;EACJ;EACN,WAAWO,EAAG3B,EAAQ,KAAKC,EAAO,UAAU2B,CAAS;EACrD,OAAOC,EACLL,IAAc;GAAE,WAAWM;GAAM,eAAeC;EAAQ,IAAsB,KAAA,GAC9EC,CACF;EACA,aAAWC;EACX,oBAAkBT,KAAc,KAAA;EAChC,iBAAeA,KAAcO,IAAU,KAAK,KAAA;EAC5C,gBAAcX,EAAM,WAAW,KAAA;EAC/B,iBAAeA,EAAM,YAAY,KAAA;EACjC,iBAAeA,EAAM,YAAY,KAAA;EACjC,UAAUA,EAAM;EAChB,UAAUA,EAAM;EAChB,UAAUT,KAAgBS,EAAM;EAChC,oBAAkBA,EAAM;EACxB,gBAAcA,EAAM,WAAW,KAAA;EAC/B,iBAAeA,EAAM,YAAY,KAAA;EACjC,aAAWA,EAAM,QAAQ,KAAA;EACzB,GAAIN;CACL,CAAA;AAEL,CAAC,CACH"}

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

@@ -0,0 +1,6 @@
+//#region src/components/inputs/Textarea/Textarea.module.css
+var e = "kiln-Textarea__textarea", t = { textarea: e };
+//#endregion
+export { t as default, e as textarea };
+
+//# sourceMappingURL=Textarea.module.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Textarea.module.js","names":["textarea","Textarea_module_default"],"sources":["../../../../src/components/inputs/Textarea/Textarea.module.css"],"sourcesContent":["/*\n * Box, states and focus come from inputs/internal/control.module.css.\n * Private vars --_rows / --_max-rows are written inline by the component for autoResize.\n */\n.textarea {\n  --_rows: 3; /* overridden inline when autoResize */\n  --_py: var(--space-2);\n\n  display: block;\n  inline-size: 100%;\n  padding: var(--_py) var(--_px);\n  resize: vertical;\n  line-height: var(--leading-body);\n}\n.textarea::placeholder {\n  color: var(--color-ink-subtle);\n  opacity: 1;\n}\n.textarea:disabled {\n  resize: none;\n}\n\n.textarea[data-auto-resize] {\n  field-sizing: content;\n  resize: none;\n  min-block-size: calc(var(--_rows) * 1lh + 2 * var(--_py) + 2 * var(--border-width));\n  overflow-y: auto;\n}\n.textarea[data-auto-resize][data-max-rows] {\n  max-block-size: calc(var(--_max-rows) * 1lh + 2 * var(--_py) + 2 * var(--border-width));\n}\n"],"mappings":""}

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

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

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

@@ -0,0 +1,18 @@
+import { type FieldLabelProps } from '../Field/index.js';
+import { type TextareaProps } from '../Textarea/index.js';
+export interface TextareaFieldProps extends FieldLabelProps, Omit<TextareaProps, 'invalid'> {
+    /** Called with the new string on every change (alongside the native `onChange`). */
+    onValueChange?: (value: string) => void;
+    /**
+     * Shows a "12 / 280" character counter under the field (needs `maxLength`). Announced
+     * politely only once the remaining count is within 10% of the limit.
+     */
+    showCount?: boolean;
+}
+/**
+ * Label + Textarea + description + error. Textarea props and the ref go to the
+ * `<textarea>`; `className`/`style` go to the field wrapper.
+ *
+ * <TextareaField label="Notes" autoResize rows={2} optional />
+ */
+export declare const TextareaField: import("react").ForwardRefExoticComponent<TextareaFieldProps & import("react").RefAttributes<HTMLTextAreaElement>>;

package/dist/components/inputs/TextareaField/TextareaField.js

@@ -0,0 +1,40 @@
+import { FieldCount as e } from "../internal/messages.js";
+import { Field as t } from "../Field/Field.js";
+import { Textarea as n } from "../Textarea/Textarea.js";
+import { splitFieldLabelProps as r } from "../internal/fieldProps.js";
+import { forwardRef as i, useId as a, useState as o } from "react";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+//#region src/components/inputs/TextareaField/TextareaField.tsx
+var l = i(function(i, l) {
+	let [u, d] = r(i), { id: f, disabled: p, className: m, style: h, onChange: g, onValueChange: _, showCount: v, maxLength: y, ...b } = d, x = a(), S = `${f ?? `${x}control`}-count`, [C, w] = o(() => typeof b.defaultValue == "string" ? b.defaultValue : ""), T = typeof b.value == "string" ? b.value : C, E = (e) => {
+		w(e.target.value), g?.(e), _?.(e.target.value);
+	}, D = v === !0 && y != null, O = y == null ? 0 : y - T.length, k = y != null && O <= Math.ceil(y * .1);
+	return /* @__PURE__ */ c(t, {
+		...u,
+		htmlFor: f,
+		disabled: p,
+		className: m,
+		style: h,
+		children: [/* @__PURE__ */ s(n, {
+			ref: l,
+			id: f,
+			disabled: p,
+			maxLength: y,
+			onChange: E,
+			"aria-describedby": D ? S : void 0,
+			...b
+		}), D ? /* @__PURE__ */ c(e, {
+			id: S,
+			live: k,
+			children: [
+				T.length,
+				" / ",
+				y
+			]
+		}) : null]
+	});
+});
+//#endregion
+export { l as TextareaField };
+
+//# sourceMappingURL=TextareaField.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TextareaField.js","names":["TextareaField","forwardRef","fieldProps","rest","splitFieldLabelProps","props","textareaRest","autoId","useId","countId","id","internalValue","setInternalValue","useState","currentValue","handleChange","event","onChange","onValueChange","showCounter","showCount","maxLength","remaining","nearLimit","Field","Textarea","FieldCount"],"sources":["../../../../src/components/inputs/TextareaField/TextareaField.tsx"],"sourcesContent":["import { forwardRef, useId, useState, type ChangeEvent } from 'react'\nimport { Field, type FieldLabelProps } from '#components/inputs/Field'\nimport { Textarea, type TextareaProps } from '#components/inputs/Textarea'\nimport { splitFieldLabelProps } from '#components/inputs/internal/fieldProps'\nimport { FieldCount } from '#components/inputs/internal/messages'\n\nexport interface TextareaFieldProps extends FieldLabelProps, Omit<TextareaProps, 'invalid'> {\n  /** Called with the new string on every change (alongside the native `onChange`). */\n  onValueChange?: (value: string) => void\n  /**\n   * Shows a \"12 / 280\" character counter under the field (needs `maxLength`). Announced\n   * politely only once the remaining count is within 10% of the limit.\n   */\n  showCount?: boolean\n}\n\n/**\n * Label + Textarea + description + error. Textarea props and the ref go to the\n * `<textarea>`; `className`/`style` go to the field wrapper.\n *\n * <TextareaField label=\"Notes\" autoResize rows={2} optional />\n */\nexport const TextareaField = forwardRef<HTMLTextAreaElement, TextareaFieldProps>(\n  function TextareaField(props, ref) {\n    const [fieldProps, rest] = splitFieldLabelProps(props)\n    const {\n      id,\n      disabled,\n      className,\n      style,\n      onChange,\n      onValueChange,\n      showCount,\n      maxLength,\n      ...textareaRest\n    } = rest\n    const autoId = useId()\n    const controlId = id ?? `${autoId}control`\n    const countId = `${controlId}-count`\n\n    const [internalValue, setInternalValue] = useState(() =>\n      typeof textareaRest.defaultValue === 'string' ? textareaRest.defaultValue : '',\n    )\n    const currentValue = typeof textareaRest.value === 'string' ? textareaRest.value : internalValue\n\n    const handleChange = (event: ChangeEvent<HTMLTextAreaElement>) => {\n      setInternalValue(event.target.value)\n      onChange?.(event)\n      onValueChange?.(event.target.value)\n    }\n\n    const showCounter = showCount === true && maxLength != null\n    const remaining = maxLength != null ? maxLength - currentValue.length : 0\n    const nearLimit = maxLength != null && remaining <= Math.ceil(maxLength * 0.1)\n\n    return (\n      <Field {...fieldProps} htmlFor={id} disabled={disabled} className={className} style={style}>\n        <Textarea\n          ref={ref}\n          id={id}\n          disabled={disabled}\n          maxLength={maxLength}\n          onChange={handleChange}\n          aria-describedby={showCounter ? countId : undefined}\n          {...textareaRest}\n        />\n        {showCounter ? (\n          <FieldCount id={countId} live={nearLimit}>\n            {currentValue.length} / {maxLength}\n          </FieldCount>\n        ) : null}\n      </Field>\n    )\n  },\n)\n"],"mappings":";;;;;;;AAsBA,IAAaA,IAAgBC,EAC3B,SAAuB,GAAO,GAAK;CACjC,IAAM,CAACC,GAAYC,KAAQC,EAAqBC,CAAK,GAC/C,EACJ,OACA,aACA,cACA,UACA,aACA,kBACA,cACA,cACA,GAAGC,MACDH,GACEI,IAASC,EAAM,GAEfC,IAAU,GADEC,KAAM,GAAGH,EAAO,SACL,SAEvB,CAACI,GAAeC,KAAoBC,QACxC,OAAOP,EAAa,gBAAiB,WAAWA,EAAa,eAAe,EAC9E,GACMQ,IAAe,OAAOR,EAAa,SAAU,WAAWA,EAAa,QAAQK,GAE7EI,KAAgB,MAA4C;EAGhE,AAFAH,EAAiBI,EAAM,OAAO,KAAK,GACnCC,IAAWD,CAAK,GAChBE,IAAgBF,EAAM,OAAO,KAAK;CACpC,GAEMG,IAAcC,MAAc,MAAQC,KAAa,MACjDC,IAAYD,KAAa,OAAyC,IAAlCA,IAAYP,EAAa,QACzDS,IAAYF,KAAa,QAAQC,KAAa,KAAK,KAAKD,IAAY,EAAG;CAE7E,OACE,kBAACG,GAAD;EAAO,GAAItB;EAAY,SAASQ;EAAc;EAAqB;EAAkB;EAArF,UAAA,CACE,kBAACe,GAAD;GACO;GACD;GACM;GACC;GACX,UAAUV;GACV,oBAAkBI,IAAcV,IAAU,KAAA;GAC1C,GAAIH;EACL,CAAA,GACAa,IACC,kBAACO,GAAD;GAAY,IAAIjB;GAAS,MAAMc;GAA/B,UAAA;IACGT,EAAa;IAAO;IAAIO;GACf;EACV,CAAA,IAAA,IACC;;AAEX,CACF"}

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

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

package/dist/components/inputs/internal/FieldContext.d.ts

@@ -0,0 +1,60 @@
+/** What a `<Field>` hands to the control rendered inside it. */
+export interface FieldControlContext {
+    /** Id the label points at (`htmlFor`). */
+    id: string;
+    /** Id of the visible label, for controls that are labelled by reference (groups). */
+    labelId: string;
+    /** Space-separated ids of the description and error messages currently rendered. */
+    describedBy?: string;
+    invalid: boolean;
+    required: boolean;
+    disabled: boolean;
+    /** Focusable but not editable; controls set `readOnly`/`aria-readonly` and ignore changes. */
+    readOnly: boolean;
+    /** `validating` on the surrounding `<Field>`/`<Fieldset>` — controls set `aria-busy`. */
+    busy: boolean;
+    /** Id of the warning message, when the surrounding `<Field>` is currently showing one. */
+    warningId?: string;
+    /**
+     * `true` when the surrounding wrapper is a `<Fieldset>`: its `<legend>` already names the
+     * group, so a group-role control inside (RadioGroup, CheckboxGroup, ChoiceCards, ChipGroup)
+     * must not also point `aria-labelledby` at it, or the name is announced twice.
+     */
+    fieldset?: boolean;
+}
+export declare const FieldContext: import("react").Context<FieldControlContext | null>;
+/**
+ * Read the wiring of the surrounding `<Field>`, or `null` outside one. Library controls
+ * (Input, Textarea, Select, Checkbox, Switch, RadioGroup) call this themselves; use it to
+ * make your own control Field-aware.
+ */
+export declare function useFieldControl(): FieldControlContext | null;
+/**
+ * Tag a component that reads `useFieldControl()` itself, so `<Field>` passes it wiring
+ * through context only and doesn't also clone `id`/`aria-*` onto it.
+ */
+export declare function markFieldAware<T extends object>(component: T): T;
+export declare function isFieldAware(type: unknown): boolean;
+interface OwnControlProps {
+    id?: string;
+    describedBy?: string;
+    invalid?: boolean;
+    ariaInvalid?: boolean | 'true' | 'false' | 'grammar' | 'spelling';
+    required?: boolean;
+    disabled?: boolean;
+    readOnly?: boolean;
+}
+/** Merge a control's own props over the Field context. Own props win; describedby ids join. */
+export declare function useResolvedField(own: OwnControlProps): {
+    id: string | undefined;
+    describedBy: string | undefined;
+    invalid: boolean;
+    required: boolean;
+    disabled: boolean;
+    readOnly: boolean;
+    busy: boolean;
+    labelId: string | undefined;
+    /** `labelId` for a group-role control: `undefined` inside a Fieldset (the legend names it). */
+    groupLabelId: string | undefined;
+};
+export {};

package/dist/components/inputs/internal/FieldContext.js

@@ -0,0 +1,32 @@
+import { joinIds as e } from "./refs.js";
+import { createContext as t, useContext as n } from "react";
+//#region src/components/inputs/internal/FieldContext.ts
+var r = t(null);
+function i() {
+	return n(r);
+}
+var a = Symbol.for("@mitcsutt/kiln-ui/field-aware");
+function o(e) {
+	return Object.assign(e, { [a]: !0 });
+}
+function s(e) {
+	return (typeof e == "object" || typeof e == "function") && e !== null && a in e;
+}
+function c(t) {
+	let n = i(), r = t.ariaInvalid === !0 || t.ariaInvalid === "true" || void 0;
+	return {
+		id: t.id ?? n?.id,
+		describedBy: e(n?.describedBy, t.describedBy),
+		invalid: t.invalid ?? r ?? n?.invalid ?? !1,
+		required: t.required ?? n?.required ?? !1,
+		disabled: t.disabled ?? n?.disabled ?? !1,
+		readOnly: t.readOnly ?? n?.readOnly ?? !1,
+		busy: n?.busy ?? !1,
+		labelId: n?.labelId,
+		groupLabelId: n?.fieldset ? void 0 : n?.labelId
+	};
+}
+//#endregion
+export { r as FieldContext, s as isFieldAware, o as markFieldAware, i as useFieldControl, c as useResolvedField };
+
+//# sourceMappingURL=FieldContext.js.map

package/dist/components/inputs/internal/FieldContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FieldContext.js","names":["FieldContext","createContext","useFieldControl","useContext","FIELD_AWARE","markFieldAware","component","isFieldAware","type","useResolvedField","ctx","ariaInvalid","own","joinIds"],"sources":["../../../../src/components/inputs/internal/FieldContext.ts"],"sourcesContent":["import { createContext, useContext } from 'react'\nimport { joinIds } from './refs'\n\n/** What a `<Field>` hands to the control rendered inside it. */\nexport interface FieldControlContext {\n  /** Id the label points at (`htmlFor`). */\n  id: string\n  /** Id of the visible label, for controls that are labelled by reference (groups). */\n  labelId: string\n  /** Space-separated ids of the description and error messages currently rendered. */\n  describedBy?: string\n  invalid: boolean\n  required: boolean\n  disabled: boolean\n  /** Focusable but not editable; controls set `readOnly`/`aria-readonly` and ignore changes. */\n  readOnly: boolean\n  /** `validating` on the surrounding `<Field>`/`<Fieldset>` — controls set `aria-busy`. */\n  busy: boolean\n  /** Id of the warning message, when the surrounding `<Field>` is currently showing one. */\n  warningId?: string\n  /**\n   * `true` when the surrounding wrapper is a `<Fieldset>`: its `<legend>` already names the\n   * group, so a group-role control inside (RadioGroup, CheckboxGroup, ChoiceCards, ChipGroup)\n   * must not also point `aria-labelledby` at it, or the name is announced twice.\n   */\n  fieldset?: boolean\n}\n\nexport const FieldContext = createContext<FieldControlContext | null>(null)\n\n/**\n * Read the wiring of the surrounding `<Field>`, or `null` outside one. Library controls\n * (Input, Textarea, Select, Checkbox, Switch, RadioGroup) call this themselves; use it to\n * make your own control Field-aware.\n */\nexport function useFieldControl(): FieldControlContext | null {\n  return useContext(FieldContext)\n}\n\nconst FIELD_AWARE = Symbol.for('@mitcsutt/kiln-ui/field-aware')\n\n/**\n * Tag a component that reads `useFieldControl()` itself, so `<Field>` passes it wiring\n * through context only and doesn't also clone `id`/`aria-*` onto it.\n */\nexport function markFieldAware<T extends object>(component: T): T {\n  return Object.assign(component, { [FIELD_AWARE]: true })\n}\n\nexport function isFieldAware(type: unknown): boolean {\n  return (\n    (typeof type === 'object' || typeof type === 'function') && type !== null && FIELD_AWARE in type\n  )\n}\n\ninterface OwnControlProps {\n  id?: string\n  describedBy?: string\n  invalid?: boolean\n  ariaInvalid?: boolean | 'true' | 'false' | 'grammar' | 'spelling'\n  required?: boolean\n  disabled?: boolean\n  readOnly?: boolean\n}\n\n/** Merge a control's own props over the Field context. Own props win; describedby ids join. */\nexport function useResolvedField(own: OwnControlProps) {\n  const ctx = useFieldControl()\n  const ariaInvalid = own.ariaInvalid === true || own.ariaInvalid === 'true' ? true : undefined\n  return {\n    id: own.id ?? ctx?.id,\n    describedBy: joinIds(ctx?.describedBy, own.describedBy),\n    invalid: own.invalid ?? ariaInvalid ?? ctx?.invalid ?? false,\n    required: own.required ?? ctx?.required ?? false,\n    disabled: own.disabled ?? ctx?.disabled ?? false,\n    readOnly: own.readOnly ?? ctx?.readOnly ?? false,\n    busy: ctx?.busy ?? false,\n    labelId: ctx?.labelId,\n    /** `labelId` for a group-role control: `undefined` inside a Fieldset (the legend names it). */\n    groupLabelId: ctx?.fieldset ? undefined : ctx?.labelId,\n  }\n}\n"],"mappings":";;;AA4BA,IAAaA,IAAeC,EAA0C,IAAI;AAO1E,SAAgBC,IAA8C;CAC5D,OAAOC,EAAWH,CAAY;AAChC;AAEA,IAAMI,IAAc,OAAO,IAAI,+BAA+B;AAM9D,SAAgBC,EAAiC,GAAiB;CAChE,OAAO,OAAO,OAAOC,GAAW,GAAGF,IAAc,GAAK,CAAC;AACzD;AAEA,SAAgBG,EAAa,GAAwB;CACnD,QACG,OAAOC,KAAS,YAAY,OAAOA,KAAS,eAAeA,MAAS,QAAQJ,KAAeI;AAEhG;AAaA,SAAgBC,EAAiB,GAAsB;CACrD,IAAMC,IAAMR,EAAgB,GACtBS,IAAcC,EAAI,gBAAgB,MAAQA,EAAI,gBAAgB,UAAgB,KAAA;CACpF,OAAO;EACL,IAAIA,EAAI,MAAMF,GAAK;EACnB,aAAaG,EAAQH,GAAK,aAAaE,EAAI,WAAW;EACtD,SAASA,EAAI,WAAWD,KAAeD,GAAK,WAAW;EACvD,UAAUE,EAAI,YAAYF,GAAK,YAAY;EAC3C,UAAUE,EAAI,YAAYF,GAAK,YAAY;EAC3C,UAAUE,EAAI,YAAYF,GAAK,YAAY;EAC3C,MAAMA,GAAK,QAAQ;EACnB,SAASA,GAAK;EAEd,cAAcA,GAAK,WAAW,KAAA,IAAYA,GAAK;CACjD;AACF"}

package/dist/components/inputs/internal/control.module.js

@@ -0,0 +1,6 @@
+//#region src/components/inputs/internal/control.module.css
+var e = "kiln-control__box", t = { box: e };
+//#endregion
+export { e as box, t as default };
+
+//# sourceMappingURL=control.module.js.map

package/dist/components/inputs/internal/control.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"control.module.js","names":["box","control_module_default"],"sources":["../../../../src/components/inputs/internal/control.module.css"],"sourcesContent":["/*\n * The field box shared by Input, Textarea and Select's trigger, so all three share\n * one border, one radius and one set of states.\n *\n * Component tokens (themes may set any of these on [data-theme]):\n *   --field-bg            default var(--color-surface)\n *   --field-border        default var(--color-line-control) (≥ 3:1)\n *   --field-radius        default var(--radius-field)\n *   --field-shadow        default none\n *\n * Focus is the neutral ink ring, outside the border — it never tints the border.\n * Only validation (data-invalid) changes the border colour.\n */\n.box {\n  --_h: var(--control-md);\n  --_px: var(--space-3);\n  --_fs: var(--text-md);\n  --_border: var(--field-border, var(--color-line-control));\n\n  position: relative;\n  box-sizing: border-box;\n  min-block-size: var(--_h);\n  margin: 0;\n  border: var(--border-width) solid var(--_border);\n  border-radius: var(--field-radius, var(--radius-field));\n  background-color: var(--field-bg, var(--color-surface));\n  color: var(--color-ink);\n  box-shadow: var(--field-shadow, none);\n  font-family: var(--font-text);\n  font-size: var(--_fs);\n  line-height: var(--leading-snug);\n  transition:\n    border-color var(--dur-1) var(--ease-out),\n    background-color var(--dur-1) var(--ease-out),\n    outline-color var(--dur-1) var(--ease-out);\n}\n\n.box[data-size='sm'] {\n  --_h: var(--control-sm);\n  --_px: var(--space-2);\n  --_fs: var(--text-sm);\n}\n.box[data-size='lg'] {\n  --_h: var(--control-lg);\n  --_px: var(--space-4);\n  --_fs: var(--text-lg);\n}\n\n/* Hover firms the line toward ink (a no-op where the line already is ink). */\n@media (hover: hover) {\n  .box:hover:not([data-disabled], [data-invalid]) {\n    --_border: color-mix(\n      in oklab,\n      var(--field-border, var(--color-line-control)),\n      var(--color-ink) 35%\n    );\n  }\n}\n\n.box:focus-visible {\n  outline: 2px solid var(--color-focus);\n  outline-offset: 2px;\n}\n\n.box[data-invalid] {\n  --_border: var(--tone-critical);\n}\n\n.box[data-readonly] {\n  background-color: var(--color-surface-sunken);\n}\n\n.box[data-disabled] {\n  --_border: var(--color-line);\n  background-color: var(--color-surface-sunken);\n  color: var(--color-ink-subtle);\n  box-shadow: none;\n  cursor: not-allowed;\n}\n"],"mappings":""}

package/dist/components/inputs/internal/errors.d.ts

@@ -0,0 +1,5 @@
+import type { ReactNode } from 'react';
+/** `error` counts as invalid unless it is empty, `false` or nullish. */
+export declare function hasError(error: ReactNode): boolean;
+/** Whether there is a message to show (`error={true}` flags invalid without text). */
+export declare function hasErrorMessage(error: ReactNode): boolean;

package/dist/components/inputs/internal/errors.js

@@ -0,0 +1,11 @@
+//#region src/components/inputs/internal/errors.ts
+function e(e) {
+	return e != null && e !== !1 && e !== "";
+}
+function t(t) {
+	return e(t) && t !== !0;
+}
+//#endregion
+export { e as hasError, t as hasErrorMessage };
+
+//# sourceMappingURL=errors.js.map

package/dist/components/inputs/internal/errors.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"errors.js","names":["hasError","error","hasErrorMessage"],"sources":["../../../../src/components/inputs/internal/errors.ts"],"sourcesContent":["import type { ReactNode } from 'react'\n\n/** `error` counts as invalid unless it is empty, `false` or nullish. */\nexport function hasError(error: ReactNode): boolean {\n  return error !== undefined && error !== null && error !== false && error !== ''\n}\n\n/** Whether there is a message to show (`error={true}` flags invalid without text). */\nexport function hasErrorMessage(error: ReactNode): boolean {\n  return hasError(error) && error !== true\n}\n"],"mappings":";AAGA,SAAgBA,EAAS,GAA2B;CAClD,OAAOC,KAAiC,QAAQA,MAAU,MAASA,MAAU;AAC/E;AAGA,SAAgBC,EAAgB,GAA2B;CACzD,OAAOF,EAASC,CAAK,KAAKA,MAAU;AACtC"}

package/dist/components/inputs/internal/fieldProps.d.ts

@@ -0,0 +1,12 @@
+import type { FieldLabelProps } from '../Field/index.js';
+/** Every key `FieldLabelProps` declares — kept in sync so `splitFieldLabelProps` never drifts. */
+export declare const FIELD_LABEL_PROP_KEYS: readonly (keyof FieldLabelProps)[];
+/**
+ * Splits a composed field's props into the `FieldLabelProps` it forwards to `<Field>`
+ * (or `<Fieldset>`) and everything else, which goes to the bare control. Every composed
+ * `*Field` uses this so a future `FieldLabelProps` addition reaches all of them for free.
+ *
+ * const [fieldProps, rest] = splitFieldLabelProps(props)
+ * <Field {...fieldProps}><Input {...rest} /></Field>
+ */
+export declare function splitFieldLabelProps<P extends FieldLabelProps>(props: P): [FieldLabelProps, Omit<P, keyof FieldLabelProps>];

package/dist/components/inputs/internal/fieldProps.js

@@ -0,0 +1,25 @@
+//#region src/components/inputs/internal/fieldProps.ts
+var e = [
+	"label",
+	"description",
+	"hint",
+	"error",
+	"required",
+	"optional",
+	"labelHidden",
+	"warning",
+	"errorLive",
+	"errorHidden",
+	"validating",
+	"readOnly",
+	"layout"
+], t = new Set(e);
+function n(e) {
+	let n = {}, r = {};
+	for (let i of Object.keys(e)) t.has(i) ? n[i] = e[i] : r[i] = e[i];
+	return [n, r];
+}
+//#endregion
+export { e as FIELD_LABEL_PROP_KEYS, n as splitFieldLabelProps };
+
+//# sourceMappingURL=fieldProps.js.map

package/dist/components/inputs/internal/fieldProps.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fieldProps.js","names":["FIELD_LABEL_PROP_KEYS","FIELD_LABEL_PROP_KEY_SET","splitFieldLabelProps","fieldProps","rest","key","props"],"sources":["../../../../src/components/inputs/internal/fieldProps.ts"],"sourcesContent":["import type { FieldLabelProps } from '#components/inputs/Field'\n\n/** Every key `FieldLabelProps` declares — kept in sync so `splitFieldLabelProps` never drifts. */\nexport const FIELD_LABEL_PROP_KEYS: readonly (keyof FieldLabelProps)[] = [\n  'label',\n  'description',\n  'hint',\n  'error',\n  'required',\n  'optional',\n  'labelHidden',\n  'warning',\n  'errorLive',\n  'errorHidden',\n  'validating',\n  'readOnly',\n  'layout',\n]\n\nconst FIELD_LABEL_PROP_KEY_SET = new Set<PropertyKey>(FIELD_LABEL_PROP_KEYS)\n\n/**\n * Splits a composed field's props into the `FieldLabelProps` it forwards to `<Field>`\n * (or `<Fieldset>`) and everything else, which goes to the bare control. Every composed\n * `*Field` uses this so a future `FieldLabelProps` addition reaches all of them for free.\n *\n * const [fieldProps, rest] = splitFieldLabelProps(props)\n * <Field {...fieldProps}><Input {...rest} /></Field>\n */\nexport function splitFieldLabelProps<P extends FieldLabelProps>(\n  props: P,\n): [FieldLabelProps, Omit<P, keyof FieldLabelProps>] {\n  const fieldProps: Partial<Record<keyof FieldLabelProps, unknown>> = {}\n  const rest: Partial<Record<keyof P, unknown>> = {}\n  for (const key of Object.keys(props) as (keyof P)[]) {\n    if (FIELD_LABEL_PROP_KEY_SET.has(key))\n      fieldProps[key as unknown as keyof FieldLabelProps] = props[key]\n    else rest[key] = props[key]\n  }\n  return [fieldProps as FieldLabelProps, rest as Omit<P, keyof FieldLabelProps>]\n}\n"],"mappings":";AAGA,IAAaA,IAA4D;CACvE;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF,GAEMC,IAA2B,IAAI,IAAiBD,CAAqB;AAU3E,SAAgBE,EACd,GACmD;CACnD,IAAMC,IAA8D,CAAC,GAC/DC,IAA0C,CAAC;CACjD,KAAK,IAAMC,KAAO,OAAO,KAAKC,CAAK,GACjC,AAAIL,EAAyB,IAAII,CAAG,IAClC,EAAWA,KAA2CC,EAAMD,KACzD,EAAKA,KAAOC,EAAMD;CAEzB,OAAO,CAACF,GAA+BC,CAAsC;AAC/E"}

package/dist/components/inputs/internal/filterOptions.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Option filtering for type-to-search controls (Combobox). Not exported from the package.
+ *
+ * Matching is case-insensitive and diacritic-folded ("cote" finds "Côte d'Ivoire",
+ * "curacao" finds "Curaçao"). Results are ranked, and stable within a rank:
+ *   0 — exact: the label or a keyword equals the query ("USA" → United States)
+ *   1 — prefix: the label, a word in it, or a keyword starts with the query
+ *   2 — substring: the label, a keyword or the description contains the query
+ */
+export interface FilterableOption {
+    label: string;
+    keywords?: readonly string[];
+    description?: string;
+}
+/** Lower-case, strip accents, collapse whitespace. */
+export declare function foldText(text: string): string;
+/** Rank of one option for an already-folded, non-empty query (lower is better; 3 = no match). */
+export declare function rankOption(option: FilterableOption, foldedQuery: string): number;
+/**
+ * The options matching `query`, best first. An empty (or whitespace) query returns every
+ * option in its original order.
+ */
+export declare function filterOptions<O extends FilterableOption>(options: readonly O[], query: string): O[];

package/dist/components/inputs/internal/filterOptions.js

@@ -0,0 +1,28 @@
+//#region src/components/inputs/internal/filterOptions.ts
+function e(e) {
+	return e.normalize("NFD").replace(/\p{Diacritic}/gu, "").toLowerCase().replace(/\s+/g, " ").trim();
+}
+function t(e) {
+	return e.split(/[\s\-–—'’/().,]+/).filter(Boolean);
+}
+function n(n, r) {
+	let i = e(n.label), a = (n.keywords ?? []).map(e);
+	return i === r || a.includes(r) ? 0 : i.startsWith(r) || t(i).some((e) => e.startsWith(r)) || a.some((e) => e.startsWith(r)) ? 1 : i.includes(r) || a.some((e) => e.includes(r)) || n.description !== void 0 && e(n.description).includes(r) ? 2 : 3;
+}
+function r(t, r) {
+	let i = e(r);
+	if (i === "") return [...t];
+	let a = [];
+	return t.forEach((e, t) => {
+		let r = n(e, i);
+		r < 3 && a.push({
+			option: e,
+			rank: r,
+			index: t
+		});
+	}), a.sort((e, t) => e.rank - t.rank || e.index - t.index), a.map((e) => e.option);
+}
+//#endregion
+export { r as filterOptions, e as foldText, n as rankOption };
+
+//# sourceMappingURL=filterOptions.js.map

package/dist/components/inputs/internal/filterOptions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"filterOptions.js","names":["foldText","text","words","folded","rankOption","label","option","keywords","foldedQuery","word","keyword","filterOptions","query","options","ranked","rank","a","b","entry"],"sources":["../../../../src/components/inputs/internal/filterOptions.ts"],"sourcesContent":["/**\n * Option filtering for type-to-search controls (Combobox). Not exported from the package.\n *\n * Matching is case-insensitive and diacritic-folded (\"cote\" finds \"Côte d'Ivoire\",\n * \"curacao\" finds \"Curaçao\"). Results are ranked, and stable within a rank:\n *   0 — exact: the label or a keyword equals the query (\"USA\" → United States)\n *   1 — prefix: the label, a word in it, or a keyword starts with the query\n *   2 — substring: the label, a keyword or the description contains the query\n */\n\nexport interface FilterableOption {\n  label: string\n  keywords?: readonly string[]\n  description?: string\n}\n\n/** Lower-case, strip accents, collapse whitespace. */\nexport function foldText(text: string): string {\n  return text\n    .normalize('NFD')\n    .replace(/\\p{Diacritic}/gu, '')\n    .toLowerCase()\n    .replace(/\\s+/g, ' ')\n    .trim()\n}\n\nconst EXACT = 0\nconst PREFIX = 1\nconst SUBSTRING = 2\nconst NO_MATCH = 3\n\nfunction words(folded: string): string[] {\n  return folded.split(/[\\s\\-–—'’/().,]+/).filter(Boolean)\n}\n\n/** Rank of one option for an already-folded, non-empty query (lower is better; 3 = no match). */\nexport function rankOption(option: FilterableOption, foldedQuery: string): number {\n  const label = foldText(option.label)\n  const keywords = (option.keywords ?? []).map(foldText)\n  if (label === foldedQuery || keywords.includes(foldedQuery)) return EXACT\n  if (\n    label.startsWith(foldedQuery) ||\n    words(label).some((word) => word.startsWith(foldedQuery)) ||\n    keywords.some((keyword) => keyword.startsWith(foldedQuery))\n  ) {\n    return PREFIX\n  }\n  if (\n    label.includes(foldedQuery) ||\n    keywords.some((keyword) => keyword.includes(foldedQuery)) ||\n    (option.description !== undefined && foldText(option.description).includes(foldedQuery))\n  ) {\n    return SUBSTRING\n  }\n  return NO_MATCH\n}\n\n/**\n * The options matching `query`, best first. An empty (or whitespace) query returns every\n * option in its original order.\n */\nexport function filterOptions<O extends FilterableOption>(\n  options: readonly O[],\n  query: string,\n): O[] {\n  const folded = foldText(query)\n  if (folded === '') return [...options]\n  const ranked: { option: O; rank: number; index: number }[] = []\n  options.forEach((option, index) => {\n    const rank = rankOption(option, folded)\n    if (rank < NO_MATCH) ranked.push({ option, rank, index })\n  })\n  ranked.sort((a, b) => a.rank - b.rank || a.index - b.index)\n  return ranked.map((entry) => entry.option)\n}\n"],"mappings":";AAiBA,SAAgBA,EAAS,GAAsB;CAC7C,OAAOC,EACJ,UAAU,KAAK,CAAC,CAChB,QAAQ,mBAAmB,EAAE,CAAC,CAC9B,YAAY,CAAC,CACb,QAAQ,QAAQ,GAAG,CAAC,CACpB,KAAK;AACV;AAOA,SAASC,EAAM,GAA0B;CACvC,OAAOC,EAAO,MAAM,kBAAkB,CAAC,CAAC,OAAO,OAAO;AACxD;AAGA,SAAgBC,EAAW,GAA0B,GAA6B;CAChF,IAAMC,IAAQL,EAASM,EAAO,KAAK,GAC7BC,KAAYD,EAAO,YAAY,CAAC,EAAA,CAAG,IAAIN,CAAQ;CAgBrD,OAfIK,MAAUG,KAAeD,EAAS,SAASC,CAAW,IAAU,IAElEH,EAAM,WAAWG,CAAW,KAC5BN,EAAMG,CAAK,CAAC,CAAC,MAAM,MAASI,EAAK,WAAWD,CAAW,CAAC,KACxDD,EAAS,MAAM,MAAYG,EAAQ,WAAWF,CAAW,CAAC,IAEnD,IAGPH,EAAM,SAASG,CAAW,KAC1BD,EAAS,MAAM,MAAYG,EAAQ,SAASF,CAAW,CAAC,KACvDF,EAAO,gBAAgB,KAAA,KAAaN,EAASM,EAAO,WAAW,CAAC,CAAC,SAASE,CAAW,IAE/E,IAEF;AACT;AAMA,SAAgBG,EACd,GACA,GACK;CACL,IAAMR,IAASH,EAASY,CAAK;CAC7B,IAAIT,MAAW,IAAI,OAAO,CAAC,GAAGU,CAAO;CACrC,IAAMC,IAAuD,CAAC;CAM9D,OALAD,EAAQ,SAAS,GAAQ,MAAU;EACjC,IAAME,IAAOX,EAAWE,GAAQH,CAAM;EACtC,AAAIY,IAAO,KAAUD,EAAO,KAAK;GAAE;GAAQ;GAAM;EAAM,CAAC;CAC1D,CAAC,GACDA,EAAO,MAAM,GAAG,MAAME,EAAE,OAAOC,EAAE,QAAQD,EAAE,QAAQC,EAAE,KAAK,GACnDH,EAAO,KAAK,MAAUI,EAAM,MAAM;AAC3C"}