@mitcsutt/kiln-ui 0.1.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"PasswordInput.js","names":["PasswordToggleField","styles","PasswordInput_module_default","PasswordInput","markFieldAware","forwardRef","visibleProp","idProp","disabledProp","rest","field","useResolvedField","autoId","useId","inputId","inputRef","useRef","composedRef","useMergedRefs","ref","internalVisible","setInternalVisible","useState","defaultVisible","visible","setVisible","next","onVisibleChange","setVisibleRef","useEffect","formElement","hide","handleBlur","box","event","onBlur","handleToggleBlur","input","keepFocus","unstable_PasswordToggleField","Input","hideLabel","showLabel","IconButton","jsx","EyeOffIcon","EyeIcon"],"sources":["../../../../src/components/inputs/PasswordInput/PasswordInput.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useEffect,\n  useId,\n  useRef,\n  useState,\n  type FocusEvent,\n  type MouseEvent,\n} from 'react'\nimport { unstable_PasswordToggleField as PasswordToggleField } from 'radix-ui'\nimport { EyeIcon, EyeOffIcon } from '#icons'\nimport { IconButton } from '#components/actions/IconButton'\nimport { Input, type InputProps } from '#components/inputs/Input'\nimport { markFieldAware, useResolvedField } from '#components/inputs/internal/FieldContext'\nimport { useMergedRefs } from '#components/inputs/internal/refs'\nimport styles from './PasswordInput.module.css'\n\nexport interface PasswordInputProps extends Omit<InputProps, 'type' | 'trailing'> {\n  /** Required: tells password managers whether to fill a saved password or offer a new one. */\n  autoComplete: 'current-password' | 'new-password'\n  /** Whether the password shows as text. Controlled; pair with `onVisibleChange`. */\n  visible?: boolean\n  defaultVisible?: boolean\n  onVisibleChange?: (visible: boolean) => void\n  /** Accessible name of the toggle while hidden. Default `'Show password'`. */\n  showLabel?: string\n  /** Accessible name of the toggle while shown. Default `'Hide password'`. */\n  hideLabel?: string\n}\n\n/**\n * A password input with a show/hide toggle at the end of the box (Radix\n * PasswordToggleField). The toggle is an IconButton whose name says what pressing it\n * does; submitting or resetting the form hides the password again. The ref goes to the\n * input; `onBlur` fires only when focus leaves the input *and* its toggle.\n *\n * <PasswordInput autoComplete=\"current-password\" />\n */\nexport const PasswordInput = markFieldAware(\n  forwardRef<HTMLInputElement, PasswordInputProps>(function PasswordInput(\n    {\n      autoComplete,\n      visible: visibleProp,\n      defaultVisible = false,\n      onVisibleChange,\n      showLabel = 'Show password',\n      hideLabel = 'Hide password',\n      size = 'md',\n      id: idProp,\n      disabled: disabledProp,\n      onBlur,\n      ...rest\n    },\n    ref,\n  ) {\n    const field = useResolvedField({ id: idProp, disabled: disabledProp })\n    const autoId = useId()\n    const inputId = field.id ?? `${autoId}password`\n    const inputRef = useRef<HTMLInputElement>(null)\n    const composedRef = useMergedRefs(ref, inputRef)\n    const [internalVisible, setInternalVisible] = useState(defaultVisible)\n    const visible = visibleProp ?? internalVisible\n    const setVisible = (next: boolean) => {\n      if (visibleProp === undefined) setInternalVisible(next)\n      if (next !== visible) onVisibleChange?.(next)\n    }\n    const setVisibleRef = useRef(setVisible)\n    setVisibleRef.current = setVisible\n\n    // Submitting or resetting the form hides the password (a shown password shouldn't\n    // survive into the next screen or a reset form).\n    useEffect(() => {\n      const formElement = inputRef.current?.form\n      if (!formElement) return\n      const hide = () => {\n        setVisibleRef.current(false)\n      }\n      formElement.addEventListener('submit', hide)\n      formElement.addEventListener('reset', hide)\n      return () => {\n        formElement.removeEventListener('submit', hide)\n        formElement.removeEventListener('reset', hide)\n      }\n    }, [])\n\n    // Blur counts only when focus leaves the whole box (input + toggle).\n    const handleBlur = (event: FocusEvent<HTMLInputElement>) => {\n      const box = event.currentTarget.parentElement\n      if (box && event.relatedTarget instanceof Node && box.contains(event.relatedTarget)) return\n      onBlur?.(event)\n    }\n    const handleToggleBlur = (event: FocusEvent<HTMLButtonElement>) => {\n      const input = inputRef.current\n      if (!input || !onBlur) return\n      const box = input.parentElement\n      if (box && event.relatedTarget instanceof Node && box.contains(event.relatedTarget)) return\n      // Same event, typed for the input's handler: the target is the toggle that lost focus.\n      onBlur(event as unknown as FocusEvent<HTMLInputElement>)\n    }\n\n    // A pointer press keeps focus (and the caret) in the input.\n    const keepFocus = (event: MouseEvent) => {\n      if (document.activeElement === inputRef.current) event.preventDefault()\n    }\n\n    return (\n      <PasswordToggleField.Root visible={visible} onVisibilityChange={setVisible}>\n        <Input\n          ref={composedRef}\n          {...rest}\n          id={inputId}\n          size={size}\n          disabled={disabledProp}\n          type={visible ? 'text' : 'password'}\n          autoComplete={autoComplete}\n          autoCapitalize=\"off\"\n          autoCorrect=\"off\"\n          spellCheck={false}\n          onBlur={handleBlur}\n          trailing={\n            <PasswordToggleField.Toggle\n              asChild\n              id={`${inputId}-toggle`}\n              aria-controls={inputId}\n              aria-label={visible ? hideLabel : showLabel}\n            >\n              <IconButton\n                className={styles.toggle}\n                size=\"sm\"\n                label={visible ? hideLabel : showLabel}\n                icon={visible ? <EyeOffIcon /> : <EyeIcon />}\n                disabled={field.disabled}\n                onMouseDown={keepFocus}\n                onBlur={handleToggleBlur}\n              />\n            </PasswordToggleField.Toggle>\n          }\n        />\n      </PasswordToggleField.Root>\n    )\n  }),\n)\n"],"mappings":";;;;;;;;;;AAsCA,IAAaG,IAAgBC,EAC3BC,EAAiD,SAC/C,EACE,iBACA,SAASC,GACT,oBAAiB,IACjB,oBACA,eAAY,iBACZ,eAAY,iBACZ,UAAO,MACP,IAAIC,GACJ,UAAUC,GACV,WACA,GAAGC,KAEL,GACA;CACA,IAAMC,IAAQC,EAAiB;EAAE,IAAIJ;EAAQ,UAAUC;CAAa,CAAC,GAC/DI,IAASC,EAAM,GACfC,IAAUJ,EAAM,MAAM,GAAGE,EAAO,WAChCG,IAAWC,EAAyB,IAAI,GACxCC,IAAcC,EAAcC,GAAKJ,CAAQ,GACzC,CAACK,GAAiBC,KAAsBC,EAASC,CAAc,GAC/DC,IAAUlB,KAAec,GACzBK,KAAc,MAAkB;EAEpC,AADInB,MAAgB,KAAA,KAAWe,EAAmBK,CAAI,GAClDA,MAASF,KAASG,IAAkBD,CAAI;CAC9C,GACME,IAAgBZ,EAAOS,CAAU;CAKvC,AAJA,EAAc,UAAUA,GAIxBI,QAAgB;EACd,IAAMC,IAAcf,EAAS,SAAS;EACtC,IAAI,CAACe,GAAa;EAClB,IAAMC,UAAa;GACjB,EAAc,QAAQ,EAAK;EAC7B;EAGA,OAFAD,EAAY,iBAAiB,UAAUC,CAAI,GAC3CD,EAAY,iBAAiB,SAASC,CAAI,SAC7B;GAEX,AADAD,EAAY,oBAAoB,UAAUC,CAAI,GAC9CD,EAAY,oBAAoB,SAASC,CAAI;EAC/C;CACF,GAAG,CAAC,CAAC;CAGL,IAAMC,KAAc,MAAwC;EAC1D,IAAMC,IAAMC,EAAM,cAAc;EAChC,AAAID,KAAOC,EAAM,yBAAyB,QAAQD,EAAI,SAASC,EAAM,aAAa,KAClFC,IAASD,CAAK;CAChB,GACME,KAAoB,MAAyC;EACjE,IAAMC,IAAQtB,EAAS;EACvB,IAAI,CAACsB,KAAS,CAACF,GAAQ;EACvB,IAAMF,IAAMI,EAAM;EAClB,AAAIJ,KAAOC,EAAM,yBAAyB,QAAQD,EAAI,SAASC,EAAM,aAAa,KAElFC,EAAOD,CAAgD;CACzD,GAGMI,KAAa,MAAsB;EACvC,AAAI,SAAS,kBAAkBvB,EAAS,WAASmB,EAAM,eAAe;CACxE;CAEA,OACE,kBAAClC,EAAoB,MAArB;EAAmC;EAAS,oBAAoByB;EAC9D,UAAA,kBAACe,GAAD;GACE,KAAKvB;GACL,GAAIR;GACJ,IAAIK;GACE;GACN,UAAUN;GACV,MAAMgB,IAAU,SAAS;GACX;GACd,gBAAe;GACf,aAAY;GACZ,YAAY;GACZ,QAAQQ;GACR,UACE,kBAAChC,EAAoB,QAArB;IACE,SAAA;IACA,IAAI,GAAGc,EAAQ;IACf,iBAAeA;IACf,cAAYU,IAAUiB,IAAYC;IAElC,UAAA,kBAACC,GAAD;KACE,WAAW1C,EAAO;KAClB,MAAK;KACL,OAAOuB,IAAUiB,IAAYC;KAC7B,MAAgBE,EAAVpB,IAAWqB,IAAiBC,GAAlB,CAAa,CAAc;KAC3C,UAAUpC,EAAM;KAChB,aAAa4B;KACb,QAAQF;IACT,CAAA;GACyB,CAAA;EAE/B,CAAA;CACuB,CAAA;AAE9B,CAAC,CACH"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"PasswordInput.module.js","names":["toggle","PasswordInput_module_default"],"sources":["../../../../src/components/inputs/PasswordInput/PasswordInput.module.css"],"sourcesContent":["/*\n * The box is Input's and the toggle is an IconButton; this only seats the toggle in the\n * box's end padding. It is Button's own `sm`, so it overhangs a `sm` box a little —\n * pulled in on the block axis and toward the end edge so it never grows the box.\n */\n.toggle {\n  margin-block: calc(var(--space-1) * -1);\n  margin-inline-end: calc(var(--space-2) * -1);\n}\n"],"mappings":""}

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

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

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

@@ -0,0 +1,19 @@
+import { type ComponentPropsWithoutRef, type ReactNode } from 'react';
+import { RadioGroup as RadixRadioGroup } from 'radix-ui';
+import type { Size } from '../../../utils/tokens.js';
+export interface RadioGroupProps extends Omit<ComponentPropsWithoutRef<typeof RadixRadioGroup.Root>, 'asChild'> {
+    size?: Size;
+    /** Critical border on every radio + `aria-invalid`. Inside a `<Field error>` this is set for you. */
+    invalid?: boolean;
+    /** Focusable but not editable: sets `aria-readonly` and ignores selection changes. */
+    readOnly?: boolean;
+}
+export interface RadioGroupItemProps extends Omit<ComponentPropsWithoutRef<typeof RadixRadioGroup.Item>, 'asChild'> {
+    /** Visible label beside the radio. Omit only if you supply `aria-label`. */
+    label?: ReactNode;
+    /** Secondary line under the label, linked with `aria-describedby`. */
+    description?: ReactNode;
+}
+export declare const RadioGroup: import("react").ForwardRefExoticComponent<RadioGroupProps & import("react").RefAttributes<HTMLDivElement>> & {
+    Item: import("react").ForwardRefExoticComponent<RadioGroupItemProps & import("react").RefAttributes<HTMLButtonElement>>;
+};

package/dist/components/inputs/RadioGroup/RadioGroup.js

@@ -0,0 +1,68 @@
+import { cx as e } from "../../../utils/cx.js";
+import { joinIds as t } from "../internal/refs.js";
+import { markFieldAware as n, useResolvedField as r } from "../internal/FieldContext.js";
+import i from "../internal/messages.module.js";
+import a from "./RadioGroup.module.js";
+import { forwardRef as o, useId as s } from "react";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+import { RadioGroup as u } from "radix-ui";
+//#region src/components/inputs/RadioGroup/RadioGroup.tsx
+var d = o(function({ size: t = "md", invalid: n, orientation: i = "vertical", disabled: o, readOnly: s, onValueChange: l, className: d, "aria-describedby": f, "aria-invalid": p, "aria-labelledby": m, ...h }, g) {
+	let _ = r({
+		describedBy: f,
+		invalid: n,
+		ariaInvalid: p,
+		disabled: o,
+		readOnly: s
+	});
+	return /* @__PURE__ */ c(u.Root, {
+		ref: g,
+		className: e(a.group, d),
+		orientation: i,
+		"data-orientation": i,
+		"data-size": t,
+		"data-invalid": _.invalid || void 0,
+		"data-readonly": _.readOnly || void 0,
+		disabled: _.disabled,
+		"aria-labelledby": m ?? _.groupLabelId,
+		"aria-readonly": _.readOnly || void 0,
+		"aria-describedby": _.describedBy,
+		"aria-invalid": _.invalid || void 0,
+		"aria-required": _.required || void 0,
+		"aria-busy": _.busy || void 0,
+		onValueChange: _.readOnly ? void 0 : l,
+		...h
+	});
+}), f = o(function({ label: n, description: r, id: o, className: d, "aria-describedby": f, ...p }, m) {
+	let h = s(), g = o ?? `${h}radio`, _ = `${g}-description`, v = /* @__PURE__ */ c(u.Item, {
+		ref: m,
+		id: g,
+		className: e(a.radio, d),
+		"aria-describedby": t(f, r != null && _),
+		...p,
+		children: /* @__PURE__ */ c(u.Indicator, { className: a.dot })
+	});
+	return n == null ? v : /* @__PURE__ */ l("div", {
+		className: a.item,
+		"data-disabled": p.disabled ? !0 : void 0,
+		children: [/* @__PURE__ */ c("span", {
+			className: a.slot,
+			children: v
+		}), /* @__PURE__ */ l("span", {
+			className: a.text,
+			children: [/* @__PURE__ */ c("label", {
+				htmlFor: g,
+				className: a.label,
+				children: n
+			}), r == null ? null : /* @__PURE__ */ c("span", {
+				id: _,
+				className: i.description,
+				children: r
+			})]
+		})]
+	});
+}), p = n(Object.assign(d, { Item: f }));
+//#endregion
+export { p as RadioGroup };
+
+//# sourceMappingURL=RadioGroup.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RadioGroup.js","names":["RadioGroup","RadixRadioGroup","styles","messageStyles","messages_module_default","RadioGroup_module_default","RadioGroupRoot","forwardRef","invalidProp","disabledProp","readOnlyProp","describedByProp","ariaInvalid","labelledByProp","rest","field","useResolvedField","RadioGroup","cx","className","orientation","size","onValueChange","RadioGroupItem","idProp","autoId","useId","id","descriptionId","radio","joinIds","description","label","RadioGroup$1","markFieldAware"],"sources":["../../../../src/components/inputs/RadioGroup/RadioGroup.tsx"],"sourcesContent":["import { forwardRef, useId, type ComponentPropsWithoutRef, type ReactNode } from 'react'\nimport { RadioGroup as RadixRadioGroup } from 'radix-ui'\nimport { cx } from '#utils/cx'\nimport type { Size } from '#utils/tokens'\nimport { markFieldAware, useResolvedField } from '#components/inputs/internal/FieldContext'\nimport { joinIds } from '#components/inputs/internal/refs'\nimport messageStyles from '#components/inputs/internal/messages.module.css'\nimport styles from './RadioGroup.module.css'\n\nexport interface RadioGroupProps extends Omit<\n  ComponentPropsWithoutRef<typeof RadixRadioGroup.Root>,\n  'asChild'\n> {\n  size?: Size\n  /** Critical border on every radio + `aria-invalid`. Inside a `<Field error>` this is set for you. */\n  invalid?: boolean\n  /** Focusable but not editable: sets `aria-readonly` and ignores selection changes. */\n  readOnly?: boolean\n}\n\n/**\n * One choice from a short list (Radix RadioGroup: arrow keys move, one tab stop).\n * Label the group with a `<Fieldset legend>`, a `<Field label>` or `aria-label`.\n *\n * <RadioGroup defaultValue=\"20\" orientation=\"horizontal\">\n *   <RadioGroup.Item value=\"10\" label=\"$10\" />\n *   <RadioGroup.Item value=\"20\" label=\"$20\" />\n * </RadioGroup>\n */\nconst RadioGroupRoot = forwardRef<HTMLDivElement, RadioGroupProps>(function RadioGroup(\n  {\n    size = 'md',\n    invalid: invalidProp,\n    orientation = 'vertical',\n    disabled: disabledProp,\n    readOnly: readOnlyProp,\n    onValueChange,\n    className,\n    'aria-describedby': describedByProp,\n    'aria-invalid': ariaInvalid,\n    'aria-labelledby': labelledByProp,\n    ...rest\n  },\n  ref,\n) {\n  // A group is labelled by reference, so it takes the Field's label id rather than its id.\n  const field = useResolvedField({\n    describedBy: describedByProp,\n    invalid: invalidProp,\n    ariaInvalid,\n    disabled: disabledProp,\n    readOnly: readOnlyProp,\n  })\n  return (\n    <RadixRadioGroup.Root\n      ref={ref}\n      className={cx(styles.group, className)}\n      orientation={orientation}\n      data-orientation={orientation}\n      data-size={size}\n      data-invalid={field.invalid || undefined}\n      data-readonly={field.readOnly || undefined}\n      disabled={field.disabled}\n      aria-labelledby={labelledByProp ?? field.groupLabelId}\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      onValueChange={field.readOnly ? undefined : onValueChange}\n      {...rest}\n    />\n  )\n})\n\nexport interface RadioGroupItemProps extends Omit<\n  ComponentPropsWithoutRef<typeof RadixRadioGroup.Item>,\n  'asChild'\n> {\n  /** Visible label beside the radio. Omit only if you supply `aria-label`. */\n  label?: ReactNode\n  /** Secondary line under the label, linked with `aria-describedby`. */\n  description?: ReactNode\n}\n\n/** One option. The ref and `className` go to the radio button itself. */\nconst RadioGroupItem = forwardRef<HTMLButtonElement, RadioGroupItemProps>(function RadioGroupItem(\n  { label, description, id: idProp, className, 'aria-describedby': describedByProp, ...rest },\n  ref,\n) {\n  const autoId = useId()\n  const id = idProp ?? `${autoId}radio`\n  const descriptionId = `${id}-description`\n  const radio = (\n    <RadixRadioGroup.Item\n      ref={ref}\n      id={id}\n      className={cx(styles.radio, className)}\n      aria-describedby={joinIds(describedByProp, description != null && descriptionId)}\n      {...rest}\n    >\n      <RadixRadioGroup.Indicator className={styles.dot} />\n    </RadixRadioGroup.Item>\n  )\n  if (label == null) return radio\n  return (\n    <div className={styles.item} data-disabled={rest.disabled ? true : undefined}>\n      <span className={styles.slot}>{radio}</span>\n      <span className={styles.text}>\n        <label htmlFor={id} className={styles.label}>\n          {label}\n        </label>\n        {description != null ? (\n          <span id={descriptionId} className={messageStyles.description}>\n            {description}\n          </span>\n        ) : null}\n      </span>\n    </div>\n  )\n})\n\nexport const RadioGroup = markFieldAware(Object.assign(RadioGroupRoot, { Item: RadioGroupItem }))\n"],"mappings":";;;;;;;;;AA6BA,IAAMM,IAAiBC,EAA4C,SACjE,EACE,UAAO,MACP,SAASC,GACT,iBAAc,YACd,UAAUC,GACV,UAAUC,GACV,kBACA,cACA,oBAAoBC,GACpB,gBAAgBC,GAChB,mBAAmBC,GACnB,GAAGC,KAEL,GACA;CAEA,IAAMC,IAAQC,EAAiB;EAC7B,aAAaL;EACb,SAASH;EACT;EACA,UAAUC;EACV,UAAUC;CACZ,CAAC;CACD,OACE,kBAACT,EAAgB,MAAjB;EACO;EACL,WAAWiB,EAAGhB,EAAO,OAAOiB,CAAS;EACxB;EACb,oBAAkBC;EAClB,aAAWC;EACX,gBAAcN,EAAM,WAAW,KAAA;EAC/B,iBAAeA,EAAM,YAAY,KAAA;EACjC,UAAUA,EAAM;EAChB,mBAAiBF,KAAkBE,EAAM;EACzC,iBAAeA,EAAM,YAAY,KAAA;EACjC,oBAAkBA,EAAM;EACxB,gBAAcA,EAAM,WAAW,KAAA;EAC/B,iBAAeA,EAAM,YAAY,KAAA;EACjC,aAAWA,EAAM,QAAQ,KAAA;EACzB,eAAeA,EAAM,WAAW,KAAA,IAAYO;EAC5C,GAAIR;CACL,CAAA;AAEL,CAAC,GAaKS,IAAiBhB,EAAmD,SACxE,EAAE,UAAO,gBAAa,IAAIiB,GAAQ,cAAW,oBAAoBb,GAAiB,GAAGG,KACrF,GACA;CACA,IAAMW,IAASC,EAAM,GACfC,IAAKH,KAAU,GAAGC,EAAO,QACzBG,IAAgB,GAAGD,EAAG,eACtBE,IACJ,kBAAC5B,EAAgB,MAAjB;EACO;EACD;EACJ,WAAWiB,EAAGhB,EAAO,OAAOiB,CAAS;EACrC,oBAAkBW,EAAQnB,GAAiBoB,KAAe,QAAQH,CAAa;EAC/E,GAAId;EAEJ,UAAA,kBAACb,EAAgB,WAAjB,EAA2B,WAAWC,EAAO,IAAM,CAAA;CAC/B,CAAA;CAGxB,OADI8B,KAAS,OAAaH,IAExB,kBAAC,OAAD;EAAK,WAAW3B,EAAO;EAAM,iBAAeY,EAAK,WAAW,KAAO,KAAA;EAAnE,UAAA,CACE,kBAAC,QAAD;GAAM,WAAWZ,EAAO;GAAO,UAAA2B;EAAY,CAAA,GAC3C,kBAAC,QAAD;GAAM,WAAW3B,EAAO;GAAxB,UAAA,CACE,kBAAC,SAAD;IAAO,SAASyB;IAAI,WAAWzB,EAAO;IACnC,UAAA8B;GACI,CAAA,GACND,KAAe,OAIZ,OAHF,kBAAC,QAAD;IAAM,IAAIH;IAAe,WAAWzB,EAAc;IAC/C,UAAA4B;GACG,CAAA,CAEJ;EACH,CAAA,CAAA;;AAET,CAAC,GAEY/B,IAAakC,EAAe,OAAO,OAAO5B,GAAgB,EAAE,MAAMiB,EAAe,CAAC,CAAC"}

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

@@ -0,0 +1,15 @@
+//#region src/components/inputs/RadioGroup/RadioGroup.module.css
+var e = "kiln-RadioGroup__group", t = "kiln-RadioGroup__item", n = "kiln-RadioGroup__slot", r = "kiln-RadioGroup__text", i = "kiln-RadioGroup__label", a = "kiln-RadioGroup__radio", o = "kiln-RadioGroup__dot", s = {
+	group: e,
+	item: t,
+	slot: n,
+	text: r,
+	label: i,
+	radio: a,
+	dot: o,
+	"dot-in": "kiln-RadioGroup__dot-in"
+};
+//#endregion
+export { s as default, o as dot, e as group, t as item, i as label, a as radio, n as slot, r as text };
+
+//# sourceMappingURL=RadioGroup.module.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RadioGroup.module.js","names":["group","item","slot","text","label","radio","dot","RadioGroup_module_default"],"sources":["../../../../src/components/inputs/RadioGroup/RadioGroup.module.css"],"sourcesContent":["/*\n * Component tokens:\n *   --control-checked-bg       default var(--color-accent)   (shared with Checkbox, Switch)\n *   --control-checked-border   default var(--color-accent)\n *   --control-checked-ink      default var(--color-accent-ink) (the centre dot)\n *   --control-border           default var(--color-line-control) (unchecked edge, ≥ 3:1)\n *   --control-shadow           default var(--shadow-active)\n */\n.group {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-3);\n}\n.group[data-orientation='horizontal'] {\n  flex-direction: row;\n  flex-wrap: wrap;\n  column-gap: var(--space-5);\n  row-gap: var(--space-3);\n}\n\n.item {\n  display: grid;\n  grid-template-columns: auto 1fr;\n  column-gap: var(--space-3);\n  align-items: start;\n  font-size: var(--text-md);\n  line-height: var(--leading-snug);\n}\n\n/* One line tall, so the radio centres on the label's first line however long it wraps. */\n.slot {\n  display: flex;\n  align-items: center;\n  block-size: 1lh;\n}\n\n.text {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-1);\n  min-inline-size: 0;\n}\n\n.label {\n  color: var(--color-ink);\n  cursor: pointer;\n}\n.item[data-disabled] .label {\n  color: var(--color-ink-subtle);\n  cursor: not-allowed;\n}\n\n.radio {\n  --_s: calc(var(--control-sm) * 0.5625);\n  /* An unchecked box is identified only by its edge, so it needs 3:1 (WCAG 1.4.11):\n     line-strong alone is a ~2:1 hairline in the quieter themes. */\n  --_border: var(--control-border, var(--color-line-control));\n\n  all: unset;\n  box-sizing: border-box;\n  position: relative;\n  display: inline-grid;\n  flex: none;\n  place-items: center;\n  inline-size: var(--_s);\n  block-size: var(--_s);\n  border: var(--border-width) solid var(--_border);\n  border-radius: 50%;\n  background-color: var(--color-surface);\n  box-shadow: var(--control-shadow, var(--shadow-active));\n  cursor: pointer;\n  -webkit-tap-highlight-color: transparent;\n  transition:\n    background-color var(--dur-1) var(--ease-out),\n    border-color var(--dur-1) var(--ease-out),\n    box-shadow var(--dur-1) var(--ease-out),\n    translate var(--dur-1) var(--ease-spring);\n}\n.group[data-size='sm'] .radio {\n  --_s: calc(var(--control-sm) * 0.5);\n}\n.group[data-size='lg'] .radio {\n  --_s: calc(var(--control-sm) * 0.6875);\n}\n\n.radio::before {\n  content: '';\n  position: absolute;\n  inset: calc(var(--space-2) * -1);\n}\n\n@media (hover: hover) {\n  .radio: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.radio[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.group[data-invalid] .radio:not([data-state='checked']) {\n  --_border: var(--tone-critical);\n}\n\n.radio:active:not([data-disabled]) {\n  translate: var(--active-shift) var(--active-shift);\n  box-shadow: none;\n}\n\n.radio:focus-visible {\n  outline: 2px solid var(--color-focus);\n  outline-offset: 2px;\n}\n\n.radio[data-disabled] {\n  cursor: not-allowed;\n  opacity: 0.45;\n  box-shadow: none;\n}\n\n.dot {\n  display: block;\n  inline-size: 38%;\n  aspect-ratio: 1;\n  border-radius: 50%;\n  background-color: var(--control-checked-ink, var(--color-accent-ink));\n  animation: dot-in var(--dur-2) var(--ease-spring);\n}\n\n@keyframes dot-in {\n  from {\n    scale: 0.2;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .dot {\n    animation: none;\n  }\n}\n"],"mappings":""}

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

@@ -0,0 +1,2 @@
+export { RadioGroup } from './RadioGroup.js';
+export type { RadioGroupProps, RadioGroupItemProps } from './RadioGroup.js';

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

@@ -0,0 +1,16 @@
+import { type ChoiceOption } from '../CheckboxGroup/choice.js';
+import type { FieldLabelProps } from '../Field/index.js';
+import { type RadioGroupProps } from '../RadioGroup/index.js';
+export interface RadioGroupFieldProps extends FieldLabelProps, Omit<RadioGroupProps, 'invalid' | 'children' | keyof FieldLabelProps> {
+    options: readonly ChoiceOption[];
+    /** `vertical` (default) stacks the options; `horizontal` runs them in a wrapping row. */
+    orientation?: 'vertical' | 'horizontal';
+}
+/**
+ * One choice from a short list, under a `<Fieldset>` legend. Arrow keys move and select;
+ * the group is one tab stop. `className`/`style` go to the fieldset; `ref`, `id`, `name`
+ * and the rest go to the radio group (`name` submits the checked value natively).
+ *
+ * <RadioGroupField label="Billing period" name="period" options={periods} defaultValue="monthly" />
+ */
+export declare const RadioGroupField: import("react").ForwardRefExoticComponent<RadioGroupFieldProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/inputs/RadioGroupField/RadioGroupField.js

@@ -0,0 +1,33 @@
+import { toFieldsetProps as e, useControllableValue as t, useFocusLeave as n } from "../CheckboxGroup/choice.js";
+import { RadioGroup as r } from "../RadioGroup/RadioGroup.js";
+import { Fieldset as i } from "../Fieldset/Fieldset.js";
+import { splitFieldLabelProps as a } from "../internal/fieldProps.js";
+import { forwardRef as o } from "react";
+import { jsx as s } from "react/jsx-runtime";
+//#region src/components/inputs/RadioGroupField/RadioGroupField.tsx
+var c = o(function(o, c) {
+	let [l, u] = a(o), { options: d, value: f, defaultValue: p, onValueChange: m, onBlur: h, className: g, style: _, disabled: v, ...y } = u, [b, x] = t(f === null ? "" : f, p ?? "", m, l.readOnly), S = n(h);
+	return /* @__PURE__ */ s(i, {
+		...e(l),
+		disabled: v,
+		className: g,
+		style: _,
+		children: /* @__PURE__ */ s(r, {
+			ref: c,
+			value: b,
+			onValueChange: x,
+			onBlur: S,
+			...y,
+			children: d.map((e) => /* @__PURE__ */ s(r.Item, {
+				value: e.value,
+				label: e.label,
+				description: e.description,
+				disabled: e.disabled
+			}, e.value))
+		})
+	});
+});
+//#endregion
+export { c as RadioGroupField };
+
+//# sourceMappingURL=RadioGroupField.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RadioGroupField.js","names":["RadioGroupField","forwardRef","fieldProps","rest","splitFieldLabelProps","props","groupProps","current","setCurrent","useControllableValue","value","defaultValue","onValueChange","handleBlur","useFocusLeave","onBlur","Fieldset","toFieldsetProps","RadioGroup","options","o"],"sources":["../../../../src/components/inputs/RadioGroupField/RadioGroupField.tsx"],"sourcesContent":["import { forwardRef } from 'react'\nimport {\n  useControllableValue,\n  useFocusLeave,\n  toFieldsetProps,\n  type ChoiceOption,\n} from '#components/inputs/CheckboxGroup/choice'\nimport type { FieldLabelProps } from '#components/inputs/Field'\nimport { Fieldset } from '#components/inputs/Fieldset'\nimport { RadioGroup, type RadioGroupProps } from '#components/inputs/RadioGroup'\nimport { splitFieldLabelProps } from '#components/inputs/internal/fieldProps'\n\nexport interface RadioGroupFieldProps\n  extends FieldLabelProps, Omit<RadioGroupProps, 'invalid' | 'children' | keyof FieldLabelProps> {\n  options: readonly ChoiceOption[]\n  /** `vertical` (default) stacks the options; `horizontal` runs them in a wrapping row. */\n  orientation?: 'vertical' | 'horizontal'\n}\n\n/**\n * One choice from a short list, under a `<Fieldset>` legend. Arrow keys move and select;\n * the group is one tab stop. `className`/`style` go to the fieldset; `ref`, `id`, `name`\n * and the rest go to the radio group (`name` submits the checked value natively).\n *\n * <RadioGroupField label=\"Billing period\" name=\"period\" options={periods} defaultValue=\"monthly\" />\n */\nexport const RadioGroupField = forwardRef<HTMLDivElement, RadioGroupFieldProps>(\n  function RadioGroupField(props, ref) {\n    const [fieldProps, rest] = splitFieldLabelProps(props)\n    const {\n      options,\n      value,\n      defaultValue,\n      onValueChange,\n      onBlur,\n      className,\n      style,\n      disabled,\n      ...groupProps\n    } = rest\n    // Hold the value here so read-only also holds for an uncontrolled group.\n    const [current, setCurrent] = useControllableValue(\n      value === null ? '' : value,\n      defaultValue ?? '',\n      onValueChange,\n      fieldProps.readOnly,\n    )\n    const handleBlur = useFocusLeave(onBlur)\n    return (\n      <Fieldset\n        {...toFieldsetProps(fieldProps)}\n        disabled={disabled}\n        className={className}\n        style={style}\n      >\n        <RadioGroup\n          ref={ref}\n          value={current}\n          onValueChange={setCurrent}\n          onBlur={handleBlur}\n          {...groupProps}\n        >\n          {options.map((o) => (\n            <RadioGroup.Item\n              key={o.value}\n              value={o.value}\n              label={o.label}\n              description={o.description}\n              disabled={o.disabled}\n            />\n          ))}\n        </RadioGroup>\n      </Fieldset>\n    )\n  },\n)\n"],"mappings":";;;;;;;AA0BA,IAAaA,IAAkBC,EAC7B,SAAyB,GAAO,GAAK;CACnC,IAAM,CAACC,GAAYC,KAAQC,EAAqBC,CAAK,GAC/C,EACJ,YACA,UACA,iBACA,kBACA,WACA,cACA,UACA,aACA,GAAGC,MACDH,GAEE,CAACI,GAASC,KAAcC,EAC5BC,MAAU,OAAO,KAAKA,GACtBC,KAAgB,IAChBC,GACAV,EAAW,QACb,GACMW,IAAaC,EAAcC,CAAM;CACvC,OACE,kBAACC,GAAD;EACE,GAAIC,EAAgBf,CAAU;EACpB;EACC;EACJ;EAEP,UAAA,kBAACgB,GAAD;GACO;GACL,OAAOX;GACP,eAAeC;GACf,QAAQK;GACR,GAAIP;GAEH,UAAAa,EAAQ,KAAK,MACZ,kBAACD,EAAW,MAAZ;IAEE,OAAOE,EAAE;IACT,OAAOA,EAAE;IACT,aAAaA,EAAE;IACf,UAAUA,EAAE;GACb,GALMA,EAAE,KAKR,CACF;EACS,CAAA;CACJ,CAAA;AAEd,CACF"}

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

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

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

@@ -0,0 +1,23 @@
+import type { SliderProps } from '../Slider/index.js';
+export interface RangeSliderProps extends Omit<SliderProps, 'value' | 'defaultValue' | 'onValueChange' | 'onValueCommit'> {
+    /** Controlled `[low, high]`. */
+    value?: readonly [number, number];
+    /** Initial `[low, high]` when uncontrolled. Defaults to `[min, max]`. */
+    defaultValue?: readonly [number, number];
+    onValueChange?: (value: [number, number]) => void;
+    onValueCommit?: (value: [number, number]) => void;
+    /** How many steps the thumbs must stay apart. Default 0 (they may meet). */
+    minStepsBetweenThumbs?: number;
+    /** Accessible names of the two thumbs. Default `['Minimum', 'Maximum']`. */
+    thumbLabels?: readonly [string, string];
+}
+/**
+ * A low–high range on one track ("Price range": £500–£5,000). The wrapper is a
+ * `role="group"` labelled by the surrounding `<Field>` (see `RangeSliderField`) or
+ * `aria-label`; each thumb is a `role="slider"` named by `thumbLabels`. The ref and `id`
+ * go to the group. `onBlur` fires once, when focus leaves both thumbs.
+ *
+ * <RangeSlider aria-label="Price range" min={500} max={5000} step={100} defaultValue={[1000, 2500]} showValue
+ *   formatOptions={{ style: 'currency', currency: 'GBP', maximumFractionDigits: 0 }} />
+ */
+export declare const RangeSlider: import("react").ForwardRefExoticComponent<RangeSliderProps & import("react").RefAttributes<HTMLSpanElement>>;

package/dist/components/inputs/RangeSlider/RangeSlider.js

@@ -0,0 +1,63 @@
+import { useControllableValue as e, useFocusLeave as t } from "../CheckboxGroup/choice.js";
+import { markFieldAware as n, useResolvedField as r } from "../internal/FieldContext.js";
+import { SliderBase as i } from "../Slider/SliderBase.js";
+import { forwardRef as a, useId as o } from "react";
+import { jsx as s } from "react/jsx-runtime";
+//#region src/components/inputs/RangeSlider/RangeSlider.tsx
+var c = ["Minimum", "Maximum"], l = n(a(function({ value: n, defaultValue: a, onValueChange: l, onValueCommit: u, min: d = 0, max: f = 100, step: p = 1, minStepsBetweenThumbs: m = 0, thumbLabels: h = c, marks: g, showValue: _ = !1, formatOptions: v, locale: y, name: b, disabled: x, readOnly: S, invalid: C, size: w = "md", id: T, onBlur: E, "aria-labelledby": D, "aria-describedby": O, "aria-invalid": k, ...A }, j) {
+	let M = o(), N = r({
+		id: T,
+		describedBy: O,
+		invalid: C,
+		ariaInvalid: k,
+		disabled: x,
+		readOnly: S
+	}), [P, F] = e(n, a ?? [d, f], l && ((e) => {
+		l([e[0], e[1]]);
+	}), N.readOnly), I = t(E), L = (e) => [e[0] ?? d, e[1] ?? f], R = {
+		"aria-invalid": N.invalid || void 0,
+		"aria-readonly": N.readOnly || void 0,
+		"aria-busy": N.busy || void 0
+	};
+	return /* @__PURE__ */ s(i, {
+		ref: j,
+		id: N.id,
+		role: "group",
+		"aria-labelledby": D ?? (A["aria-label"] ? void 0 : N.labelId),
+		"aria-describedby": N.describedBy,
+		"aria-invalid": N.invalid || void 0,
+		...A,
+		onBlur: I,
+		values: P,
+		onValuesChange: (e) => {
+			F(L(e));
+		},
+		onValuesCommit: (e) => u?.(L(e)),
+		min: d,
+		max: f,
+		step: p,
+		minStepsBetweenThumbs: m,
+		marks: g,
+		showValue: _,
+		formatOptions: v,
+		locale: y,
+		name: b,
+		disabled: N.disabled,
+		readOnly: N.readOnly,
+		invalid: N.invalid,
+		size: w,
+		thumbs: [{
+			id: `${M}min`,
+			"aria-label": h[0],
+			...R
+		}, {
+			id: `${M}max`,
+			"aria-label": h[1],
+			...R
+		}]
+	});
+}));
+//#endregion
+export { l as RangeSlider };
+
+//# sourceMappingURL=RangeSlider.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RangeSlider.js","names":["DEFAULT_THUMB_LABELS","RangeSlider","markFieldAware","forwardRef","disabledProp","readOnlyProp","invalidProp","idProp","labelledByProp","describedByProp","ariaInvalid","rest","autoId","useId","field","useResolvedField","current","setCurrent","useControllableValue","value","defaultValue","min","max","onValueChange","next","handleBlur","useFocusLeave","onBlur","toTuple","thumbState","SliderBase","onValueCommit","thumbLabels"],"sources":["../../../../src/components/inputs/RangeSlider/RangeSlider.tsx"],"sourcesContent":["import { forwardRef, useId } from 'react'\nimport { useControllableValue, useFocusLeave } from '#components/inputs/CheckboxGroup/choice'\nimport { markFieldAware, useResolvedField } from '#components/inputs/internal/FieldContext'\nimport type { SliderProps } from '#components/inputs/Slider'\nimport { SliderBase } from '#components/inputs/Slider/SliderBase'\n\nexport interface RangeSliderProps extends Omit<\n  SliderProps,\n  'value' | 'defaultValue' | 'onValueChange' | 'onValueCommit'\n> {\n  /** Controlled `[low, high]`. */\n  value?: readonly [number, number]\n  /** Initial `[low, high]` when uncontrolled. Defaults to `[min, max]`. */\n  defaultValue?: readonly [number, number]\n  onValueChange?: (value: [number, number]) => void\n  onValueCommit?: (value: [number, number]) => void\n  /** How many steps the thumbs must stay apart. Default 0 (they may meet). */\n  minStepsBetweenThumbs?: number\n  /** Accessible names of the two thumbs. Default `['Minimum', 'Maximum']`. */\n  thumbLabels?: readonly [string, string]\n}\n\nconst DEFAULT_THUMB_LABELS = ['Minimum', 'Maximum'] as const\n\n/**\n * A low–high range on one track (\"Price range\": £500–£5,000). The wrapper is a\n * `role=\"group\"` labelled by the surrounding `<Field>` (see `RangeSliderField`) or\n * `aria-label`; each thumb is a `role=\"slider\"` named by `thumbLabels`. The ref and `id`\n * go to the group. `onBlur` fires once, when focus leaves both thumbs.\n *\n * <RangeSlider aria-label=\"Price range\" min={500} max={5000} step={100} defaultValue={[1000, 2500]} showValue\n *   formatOptions={{ style: 'currency', currency: 'GBP', maximumFractionDigits: 0 }} />\n */\nexport const RangeSlider = markFieldAware(\n  forwardRef<HTMLSpanElement, RangeSliderProps>(function RangeSlider(\n    {\n      value,\n      defaultValue,\n      onValueChange,\n      onValueCommit,\n      min = 0,\n      max = 100,\n      step = 1,\n      minStepsBetweenThumbs = 0,\n      thumbLabels = DEFAULT_THUMB_LABELS,\n      marks,\n      showValue = false,\n      formatOptions,\n      locale,\n      name,\n      disabled: disabledProp,\n      readOnly: readOnlyProp,\n      invalid: invalidProp,\n      size = 'md',\n      id: idProp,\n      onBlur,\n      'aria-labelledby': labelledByProp,\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 [current, setCurrent] = useControllableValue<readonly [number, number]>(\n      value,\n      defaultValue ?? [min, max],\n      onValueChange &&\n        ((next) => {\n          onValueChange([next[0], next[1]])\n        }),\n      field.readOnly,\n    )\n    const handleBlur = useFocusLeave(onBlur)\n    const toTuple = (next: number[]): [number, number] => [next[0] ?? min, next[1] ?? max]\n\n    const thumbState = {\n      'aria-invalid': field.invalid || undefined,\n      'aria-readonly': field.readOnly || undefined,\n      'aria-busy': field.busy || undefined,\n    } as const\n\n    return (\n      // aria-invalid on the group as well as each thumb, like CheckboxGroup: the error belongs to the range.\n      // eslint-disable-next-line jsx-a11y/role-supports-aria-props\n      <SliderBase\n        ref={ref}\n        id={field.id}\n        role=\"group\"\n        aria-labelledby={labelledByProp ?? (rest['aria-label'] ? undefined : field.labelId)}\n        aria-describedby={field.describedBy}\n        aria-invalid={field.invalid || undefined}\n        {...rest}\n        onBlur={handleBlur}\n        values={current}\n        onValuesChange={(next) => {\n          setCurrent(toTuple(next))\n        }}\n        onValuesCommit={(next) => onValueCommit?.(toTuple(next))}\n        min={min}\n        max={max}\n        step={step}\n        minStepsBetweenThumbs={minStepsBetweenThumbs}\n        marks={marks}\n        showValue={showValue}\n        formatOptions={formatOptions}\n        locale={locale}\n        name={name}\n        disabled={field.disabled}\n        readOnly={field.readOnly}\n        invalid={field.invalid}\n        size={size}\n        thumbs={[\n          { id: `${autoId}min`, 'aria-label': thumbLabels[0], ...thumbState },\n          { id: `${autoId}max`, 'aria-label': thumbLabels[1], ...thumbState },\n        ]}\n      />\n    )\n  }),\n)\n"],"mappings":";;;;;;AAsBA,IAAMA,IAAuB,CAAC,WAAW,SAAS,GAWrCC,IAAcC,EACzBC,EAA8C,SAC5C,EACE,UACA,iBACA,kBACA,kBACA,SAAM,GACN,SAAM,KACN,UAAO,GACP,2BAAwB,GACxB,iBAAcH,GACd,UACA,eAAY,IACZ,kBACA,WACA,SACA,UAAUI,GACV,UAAUC,GACV,SAASC,GACT,UAAO,MACP,IAAIC,GACJ,WACA,mBAAmBC,GACnB,oBAAoBC,GACpB,gBAAgBC,GAChB,GAAGC,KAEL,GACA;CACA,IAAMC,IAASC,EAAM,GACfC,IAAQC,EAAiB;EAC7B,IAAIR;EACJ,aAAaE;EACb,SAASH;EACT;EACA,UAAUF;EACV,UAAUC;CACZ,CAAC,GACK,CAACW,GAASC,KAAcC,EAC5BC,GACAC,KAAgB,CAACC,GAAKC,CAAG,GACzBC,OACI,MAAS;EACT,EAAc,CAACC,EAAK,IAAIA,EAAK,EAAE,CAAC;CAClC,IACFV,EAAM,QACR,GACMW,IAAaC,EAAcC,CAAM,GACjCC,KAAW,MAAqC,CAACJ,EAAK,MAAMH,GAAKG,EAAK,MAAMF,CAAG,GAE/EO,IAAa;EACjB,gBAAgBf,EAAM,WAAW,KAAA;EACjC,iBAAiBA,EAAM,YAAY,KAAA;EACnC,aAAaA,EAAM,QAAQ,KAAA;CAC7B;CAEA,OAGE,kBAACgB,GAAD;EACO;EACL,IAAIhB,EAAM;EACV,MAAK;EACL,mBAAiBN,MAAmBG,EAAK,gBAAgB,KAAA,IAAYG,EAAM;EAC3E,oBAAkBA,EAAM;EACxB,gBAAcA,EAAM,WAAW,KAAA;EAC/B,GAAIH;EACJ,QAAQc;EACR,QAAQT;EACR,iBAAiB,MAAS;GACxB,EAAWY,EAAQJ,CAAI,CAAC;EAC1B;EACA,iBAAiB,MAASO,IAAgBH,EAAQJ,CAAI,CAAC;EAClD;EACA;EACC;EACiB;EAChB;EACI;EACI;EACP;EACF;EACN,UAAUV,EAAM;EAChB,UAAUA,EAAM;EAChB,SAASA,EAAM;EACT;EACN,QAAQ,CACN;GAAE,IAAI,GAAGF,EAAO;GAAM,cAAcoB,EAAY;GAAI,GAAGH;EAAW,GAClE;GAAE,IAAI,GAAGjB,EAAO;GAAM,cAAcoB,EAAY;GAAI,GAAGH;EAAW,CACpE;CACD,CAAA;AAEL,CAAC,CACH"}

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

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

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

@@ -0,0 +1,12 @@
+import { type FieldLabelProps } from '../Field/index.js';
+import { type RangeSliderProps } from '../RangeSlider/index.js';
+export interface RangeSliderFieldProps extends FieldLabelProps, Omit<RangeSliderProps, 'invalid' | keyof FieldLabelProps> {
+}
+/**
+ * A labelled `RangeSlider`: the Field's label names the group, `thumbLabels` name the two
+ * thumbs. `className`/`style` go to the Field; `ref`, `id`, `name` and the rest go to the
+ * range slider's group.
+ *
+ * <RangeSliderField label="Price range" name="price" min={500} max={5000} step={100} showValue />
+ */
+export declare const RangeSliderField: import("react").ForwardRefExoticComponent<RangeSliderFieldProps & import("react").RefAttributes<HTMLSpanElement>>;

package/dist/components/inputs/RangeSliderField/RangeSliderField.js

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"RangeSliderField.js","names":["RangeSliderField","forwardRef","fieldProps","sliderProps","splitFieldLabelProps","props","Field","id","RangeSlider"],"sources":["../../../../src/components/inputs/RangeSliderField/RangeSliderField.tsx"],"sourcesContent":["import { forwardRef } from 'react'\nimport { Field, type FieldLabelProps } from '#components/inputs/Field'\nimport { splitFieldLabelProps } from '#components/inputs/internal/fieldProps'\nimport { RangeSlider, type RangeSliderProps } from '#components/inputs/RangeSlider'\n\nexport interface RangeSliderFieldProps\n  extends FieldLabelProps, Omit<RangeSliderProps, 'invalid' | keyof FieldLabelProps> {}\n\n/**\n * A labelled `RangeSlider`: the Field's label names the group, `thumbLabels` name the two\n * thumbs. `className`/`style` go to the Field; `ref`, `id`, `name` and the rest go to the\n * range slider's group.\n *\n * <RangeSliderField label=\"Price range\" name=\"price\" min={500} max={5000} step={100} showValue />\n */\nexport const RangeSliderField = forwardRef<HTMLSpanElement, RangeSliderFieldProps>(\n  function RangeSliderField(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        <RangeSlider ref={ref} {...sliderProps} />\n      </Field>\n    )\n  },\n)\n"],"mappings":";;;;;;AAeA,IAAaA,IAAmBC,EAC9B,SAA0B,GAAO,GAAK;CACpC,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;GAAkB;GAAK,GAAIL;EAAc,CAAA;CACpC,CAAA;AAEX,CACF"}

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

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

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

@@ -0,0 +1,31 @@
+import { type HTMLAttributes } from 'react';
+import type { Size } from '../../../utils/tokens.js';
+export interface RatingProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue' | 'dir'> {
+    /** Controlled rating, `null` for none. */
+    value?: number | null;
+    defaultValue?: number | null;
+    onValueChange?: (value: number | null) => void;
+    /** Number of stars. Default 5. */
+    max?: number;
+    /** Choosing the current rating again clears it (`null`). */
+    clearable?: boolean;
+    /** Each star's accessible name. Default `${n} of ${max}`. */
+    itemLabel?: (n: number, max: number) => string;
+    /** Emits a hidden input with the rating (none when `null`), for native form submission. */
+    name?: string;
+    disabled?: boolean;
+    /** Focusable but not editable: sets `aria-readonly` and ignores changes. */
+    readOnly?: boolean;
+    /** Critical edge on the empty stars + `aria-invalid`. Inside a `<Field error>` this is set for you. */
+    invalid?: boolean;
+    size?: Size;
+}
+/**
+ * A star rating — a Radix RadioGroup whose radios are stars, so it's one tab stop and the
+ * arrow keys move and choose. Stars up to the rating fill with the accent; hovering
+ * previews a rating before you choose it. Label it with a `<Field>` (see `RatingField`) or
+ * `aria-label`. `onBlur` fires once, when focus leaves the stars.
+ *
+ * <Rating aria-label="Rate this release" defaultValue={4} clearable />
+ */
+export declare const Rating: import("react").ForwardRefExoticComponent<RatingProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/inputs/Rating/Rating.js

@@ -0,0 +1,66 @@
+import { cx as e } from "../../../utils/cx.js";
+import { StarIcon as t } from "../../../icons/icons.js";
+import { useControllableValue as n, useFocusLeave as r } from "../CheckboxGroup/choice.js";
+import { markFieldAware as i, useResolvedField as a } from "../internal/FieldContext.js";
+import o from "./Rating.module.js";
+import { forwardRef as s, useState as c } from "react";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+import { RadioGroup as d } from "radix-ui";
+//#region src/components/inputs/Rating/Rating.tsx
+var f = (e, t) => `${String(e)} of ${String(t)}`, p = i(s(function({ value: i, defaultValue: s = null, onValueChange: p, max: m = 5, clearable: h = !1, itemLabel: g = f, name: _, disabled: v, readOnly: y, invalid: b, size: x = "md", id: S, className: C, onBlur: w, onPointerLeave: T, "aria-describedby": E, "aria-invalid": D, "aria-labelledby": O, ...k }, A) {
+	let j = a({
+		id: S,
+		describedBy: E,
+		invalid: b,
+		ariaInvalid: D,
+		disabled: v,
+		readOnly: y
+	}), [M, N] = n(i, s, p, j.readOnly), [P, F] = c(null), I = r(w), L = !j.disabled && !j.readOnly, R = P ?? M ?? 0, z = Array.from({ length: Math.max(0, Math.floor(m)) }, (e, t) => t + 1);
+	return /* @__PURE__ */ u(d.Root, {
+		ref: A,
+		id: j.id,
+		className: e(o.rating, C),
+		value: M === null ? "" : String(M),
+		onValueChange: (e) => {
+			N(e === "" ? null : Number(e));
+		},
+		disabled: j.disabled,
+		"data-size": x,
+		"data-invalid": j.invalid || void 0,
+		"data-readonly": j.readOnly || void 0,
+		"data-previewing": P !== null || void 0,
+		"aria-labelledby": O ?? (k["aria-label"] ? void 0 : j.labelId),
+		"aria-describedby": j.describedBy,
+		"aria-invalid": j.invalid || void 0,
+		"aria-required": j.required || void 0,
+		"aria-readonly": j.readOnly || void 0,
+		"aria-busy": j.busy || void 0,
+		onBlur: I,
+		onPointerLeave: (e) => {
+			F(null), T?.(e);
+		},
+		...k,
+		children: [z.map((e) => /* @__PURE__ */ l(d.Item, {
+			value: String(e),
+			className: o.star,
+			"aria-label": g(e, m),
+			"data-filled": e <= R || void 0,
+			onPointerEnter: L ? () => {
+				F(e);
+			} : void 0,
+			onClick: h ? () => {
+				M === e && N(null);
+			} : void 0,
+			children: /* @__PURE__ */ l(t, { className: o.glyph })
+		}, e)), _ && M !== null ? /* @__PURE__ */ l("input", {
+			type: "hidden",
+			name: _,
+			value: M,
+			disabled: j.disabled || void 0
+		}) : null]
+	});
+}));
+//#endregion
+export { p as Rating };
+
+//# sourceMappingURL=Rating.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Rating.js","names":["RadixRadioGroup","styles","Rating_module_default","defaultItemLabel","n","max","Rating","markFieldAware","forwardRef","disabledProp","readOnlyProp","invalidProp","idProp","describedByProp","ariaInvalid","labelledByProp","rest","field","useResolvedField","current","setCurrent","useControllableValue","value","defaultValue","onValueChange","preview","setPreview","useState","handleBlur","useFocusLeave","onBlur","interactive","shown","stars","i","RadioGroup","cx","className","v","size","onPointerLeave","event","itemLabel","clearable","StarIcon","name"],"sources":["../../../../src/components/inputs/Rating/Rating.tsx"],"sourcesContent":["import { forwardRef, useState, type HTMLAttributes } from 'react'\nimport { RadioGroup as RadixRadioGroup } from 'radix-ui'\nimport { StarIcon } from '#icons'\nimport { cx } from '#utils/cx'\nimport type { Size } from '#utils/tokens'\nimport { useControllableValue, useFocusLeave } from '#components/inputs/CheckboxGroup/choice'\nimport { markFieldAware, useResolvedField } from '#components/inputs/internal/FieldContext'\nimport styles from './Rating.module.css'\n\nexport interface RatingProps extends Omit<\n  HTMLAttributes<HTMLDivElement>,\n  'onChange' | 'defaultValue' | 'dir'\n> {\n  /** Controlled rating, `null` for none. */\n  value?: number | null\n  defaultValue?: number | null\n  onValueChange?: (value: number | null) => void\n  /** Number of stars. Default 5. */\n  max?: number\n  /** Choosing the current rating again clears it (`null`). */\n  clearable?: boolean\n  /** Each star's accessible name. Default `${n} of ${max}`. */\n  itemLabel?: (n: number, max: number) => string\n  /** Emits a hidden input with the rating (none when `null`), for native form submission. */\n  name?: string\n  disabled?: boolean\n  /** Focusable but not editable: sets `aria-readonly` and ignores changes. */\n  readOnly?: boolean\n  /** Critical edge on the empty stars + `aria-invalid`. Inside a `<Field error>` this is set for you. */\n  invalid?: boolean\n  size?: Size\n}\n\nconst defaultItemLabel = (n: number, max: number) => `${String(n)} of ${String(max)}`\n\n/**\n * A star rating — a Radix RadioGroup whose radios are stars, so it's one tab stop and the\n * arrow keys move and choose. Stars up to the rating fill with the accent; hovering\n * previews a rating before you choose it. Label it with a `<Field>` (see `RatingField`) or\n * `aria-label`. `onBlur` fires once, when focus leaves the stars.\n *\n * <Rating aria-label=\"Rate this release\" defaultValue={4} clearable />\n */\nexport const Rating = markFieldAware(\n  forwardRef<HTMLDivElement, RatingProps>(function Rating(\n    {\n      value,\n      defaultValue = null,\n      onValueChange,\n      max = 5,\n      clearable = false,\n      itemLabel = defaultItemLabel,\n      name,\n      disabled: disabledProp,\n      readOnly: readOnlyProp,\n      invalid: invalidProp,\n      size = 'md',\n      id: idProp,\n      className,\n      onBlur,\n      onPointerLeave,\n      'aria-describedby': describedByProp,\n      'aria-invalid': ariaInvalid,\n      'aria-labelledby': labelledByProp,\n      ...rest\n    },\n    ref,\n  ) {\n    const field = useResolvedField({\n      id: idProp,\n      describedBy: describedByProp,\n      invalid: invalidProp,\n      ariaInvalid,\n      disabled: disabledProp,\n      readOnly: readOnlyProp,\n    })\n    const [current, setCurrent] = useControllableValue<number | null>(\n      value,\n      defaultValue,\n      onValueChange,\n      field.readOnly,\n    )\n    const [preview, setPreview] = useState<number | null>(null)\n    const handleBlur = useFocusLeave(onBlur)\n    const interactive = !field.disabled && !field.readOnly\n    const shown = preview ?? current ?? 0\n    const stars = Array.from({ length: Math.max(0, Math.floor(max)) }, (_, i) => i + 1)\n\n    return (\n      <RadixRadioGroup.Root\n        ref={ref}\n        id={field.id}\n        className={cx(styles.rating, className)}\n        value={current === null ? '' : String(current)}\n        onValueChange={(v) => {\n          setCurrent(v === '' ? null : Number(v))\n        }}\n        disabled={field.disabled}\n        data-size={size}\n        data-invalid={field.invalid || undefined}\n        data-readonly={field.readOnly || undefined}\n        data-previewing={preview !== null || undefined}\n        aria-labelledby={labelledByProp ?? (rest['aria-label'] ? undefined : field.labelId)}\n        aria-describedby={field.describedBy}\n        aria-invalid={field.invalid || undefined}\n        aria-required={field.required || undefined}\n        aria-readonly={field.readOnly || undefined}\n        aria-busy={field.busy || undefined}\n        onBlur={handleBlur}\n        onPointerLeave={(event) => {\n          setPreview(null)\n          onPointerLeave?.(event)\n        }}\n        {...rest}\n      >\n        {stars.map((n) => (\n          <RadixRadioGroup.Item\n            key={n}\n            value={String(n)}\n            className={styles.star}\n            aria-label={itemLabel(n, max)}\n            data-filled={n <= shown || undefined}\n            onPointerEnter={\n              interactive\n                ? () => {\n                    setPreview(n)\n                  }\n                : undefined\n            }\n            onClick={\n              clearable\n                ? () => {\n                    // Radix ignores a click on the checked radio; clearable turns it into \"none\".\n                    if (current === n) setCurrent(null)\n                  }\n                : undefined\n            }\n          >\n            <StarIcon className={styles.glyph} />\n          </RadixRadioGroup.Item>\n        ))}\n        {name && current !== null ? (\n          <input type=\"hidden\" name={name} value={current} disabled={field.disabled || undefined} />\n        ) : null}\n      </RadixRadioGroup.Root>\n    )\n  }),\n)\n"],"mappings":";;;;;;;;;AAiCA,IAAMG,KAAoB,GAAW,MAAgB,GAAG,OAAOC,CAAC,EAAE,MAAM,OAAOC,CAAG,KAUrEC,IAASC,EACpBC,EAAwC,SACtC,EACE,UACA,kBAAe,MACf,kBACA,SAAM,GACN,eAAY,IACZ,eAAYL,GACZ,SACA,UAAUM,GACV,UAAUC,GACV,SAASC,GACT,UAAO,MACP,IAAIC,GACJ,cACA,WACA,mBACA,oBAAoBC,GACpB,gBAAgBC,GAChB,mBAAmBC,GACnB,GAAGC,KAEL,GACA;CACA,IAAMC,IAAQC,EAAiB;EAC7B,IAAIN;EACJ,aAAaC;EACb,SAASF;EACT;EACA,UAAUF;EACV,UAAUC;CACZ,CAAC,GACK,CAACS,GAASC,KAAcC,EAC5BC,GACAC,GACAC,GACAP,EAAM,QACR,GACM,CAACQ,GAASC,KAAcC,EAAwB,IAAI,GACpDC,IAAaC,EAAcC,CAAM,GACjCC,IAAc,CAACd,EAAM,YAAY,CAACA,EAAM,UACxCe,IAAQP,KAAWN,KAAW,GAC9Bc,IAAQ,MAAM,KAAK,EAAE,QAAQ,KAAK,IAAI,GAAG,KAAK,MAAM5B,CAAG,CAAC,EAAE,IAAI,GAAG,MAAM6B,IAAI,CAAC;CAElF,OACE,kBAAClC,EAAgB,MAAjB;EACO;EACL,IAAIiB,EAAM;EACV,WAAWmB,EAAGnC,EAAO,QAAQoC,CAAS;EACtC,OAAOlB,MAAY,OAAO,KAAK,OAAOA,CAAO;EAC7C,gBAAgB,MAAM;GACpB,EAAWmB,MAAM,KAAK,OAAO,OAAOA,CAAC,CAAC;EACxC;EACA,UAAUrB,EAAM;EAChB,aAAWsB;EACX,gBAActB,EAAM,WAAW,KAAA;EAC/B,iBAAeA,EAAM,YAAY,KAAA;EACjC,mBAAiBQ,MAAY,QAAQ,KAAA;EACrC,mBAAiBV,MAAmBC,EAAK,gBAAgB,KAAA,IAAYC,EAAM;EAC3E,oBAAkBA,EAAM;EACxB,gBAAcA,EAAM,WAAW,KAAA;EAC/B,iBAAeA,EAAM,YAAY,KAAA;EACjC,iBAAeA,EAAM,YAAY,KAAA;EACjC,aAAWA,EAAM,QAAQ,KAAA;EACzB,QAAQW;EACR,iBAAiB,MAAU;GAEzB,AADAF,EAAW,IAAI,GACfc,IAAiBC,CAAK;EACxB;EACA,GAAIzB;EAxBN,UAAA,CA0BGiB,EAAM,KAAK,MACV,kBAACjC,EAAgB,MAAjB;GAEE,OAAO,OAAOI,CAAC;GACf,WAAWH,EAAO;GAClB,cAAYyC,EAAUtC,GAAGC,CAAG;GAC5B,eAAaD,KAAK4B,KAAS,KAAA;GAC3B,gBACED,UACU;IACJ,EAAW3B,CAAC;GACd,IACA,KAAA;GAEN,SACEuC,UACU;IAEJ,AAAIxB,MAAYf,KAAGgB,EAAW,IAAI;GACpC,IACA,KAAA;GAGN,UAAA,kBAACwB,GAAD,EAAU,WAAW3C,EAAO,MAAQ,CAAA;EAChB,GAtBfG,CAsBe,CACvB,GACAyC,KAAQ1B,MAAY,OACnB,kBAAC,SAAD;GAAO,MAAK;GAAe;GAAM,OAAOA;GAAS,UAAUF,EAAM,YAAY,KAAA;EAAY,CAAA,IACvF,IACgB;;AAE1B,CAAC,CACH"}

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

@@ -0,0 +1,10 @@
+//#region src/components/inputs/Rating/Rating.module.css
+var e = "kiln-Rating__rating", t = "kiln-Rating__star", n = "kiln-Rating__glyph", r = {
+	rating: e,
+	star: t,
+	glyph: n
+};
+//#endregion
+export { r as default, n as glyph, e as rating, t as star };
+
+//# sourceMappingURL=Rating.module.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Rating.module.js","names":["rating","star","glyph","Rating_module_default"],"sources":["../../../../src/components/inputs/Rating/Rating.module.css"],"sourcesContent":["/*\n * A row of stars. Stars up to the rating (or the hovered star, while previewing) fill with\n * the accent; the rest are outlines.\n *\n * Component tokens:\n *   --rating-fill    default var(--color-accent) — filled stars\n *   --rating-empty   default var(--color-line-control) — empty star outline (≥ 3:1)\n *   --rating-gap     default var(--space-1)\n */\n.rating {\n  --_s: 1.5rem;\n\n  display: inline-flex;\n  align-items: center;\n  gap: var(--rating-gap, var(--space-1));\n  vertical-align: middle;\n}\n.rating[data-size='sm'] {\n  --_s: 1.25rem;\n}\n.rating[data-size='lg'] {\n  --_s: 2rem;\n}\n\n.star {\n  --_ink: var(--rating-empty, var(--color-line-control));\n  --_fill: transparent;\n\n  all: unset;\n  box-sizing: border-box;\n  position: relative;\n  display: inline-grid;\n  place-items: center;\n  border-radius: var(--radius-chip);\n  color: var(--_ink);\n  font-size: var(--_s);\n  cursor: pointer;\n  -webkit-tap-highlight-color: transparent;\n  transition: color var(--dur-1) var(--ease-out);\n}\n\n/* Fill the gap between stars into the hit area, so the pointer never falls through. */\n.star::before {\n  content: '';\n  position: absolute;\n  inset: calc(var(--space-1) * -0.5);\n}\n\n.star[data-filled] {\n  --_ink: var(--rating-fill, var(--color-accent));\n  --_fill: var(--rating-fill, var(--color-accent));\n}\n\n/* While previewing, the stars that would be chosen show at a lighter weight than a real rating. */\n.rating[data-previewing] .star[data-filled] {\n  --_fill: color-mix(in oklch, var(--rating-fill, var(--color-accent)) 45%, transparent);\n}\n\n.rating[data-invalid] .star:not([data-filled]) {\n  --_ink: var(--tone-critical);\n}\n\n.glyph {\n  fill: var(--_fill);\n  transition: fill var(--dur-1) var(--ease-out);\n}\n\n.star:focus-visible {\n  outline: 2px solid var(--color-focus);\n  outline-offset: 2px;\n}\n\n.star[data-disabled] {\n  cursor: not-allowed;\n  opacity: 0.45;\n}\n.rating[data-readonly] .star {\n  cursor: default;\n}\n"],"mappings":""}

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

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

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

@@ -0,0 +1,12 @@
+import { type FieldLabelProps } from '../Field/index.js';
+import { type RatingProps } from '../Rating/index.js';
+export interface RatingFieldProps extends FieldLabelProps, Omit<RatingProps, 'invalid' | keyof FieldLabelProps> {
+}
+/**
+ * A labelled `Rating`. The stars' radiogroup 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 radiogroup.
+ *
+ * <RatingField label="Rate this release" name="rating" clearable />
+ */
+export declare const RatingField: import("react").ForwardRefExoticComponent<RatingFieldProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/inputs/RatingField/RatingField.js

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"RatingField.js","names":["RatingField","forwardRef","fieldProps","ratingProps","splitFieldLabelProps","props","Field","id","Rating"],"sources":["../../../../src/components/inputs/RatingField/RatingField.tsx"],"sourcesContent":["import { forwardRef } from 'react'\nimport { Field, type FieldLabelProps } from '#components/inputs/Field'\nimport { splitFieldLabelProps } from '#components/inputs/internal/fieldProps'\nimport { Rating, type RatingProps } from '#components/inputs/Rating'\n\nexport interface RatingFieldProps\n  extends FieldLabelProps, Omit<RatingProps, 'invalid' | keyof FieldLabelProps> {}\n\n/**\n * A labelled `Rating`. The stars' radiogroup is labelled by the Field's label and described\n * by its help, warning and error. `className`/`style` go to the Field; `ref`, `id`, `name`\n * and the rest go to the radiogroup.\n *\n * <RatingField label=\"Rate this release\" name=\"rating\" clearable />\n */\nexport const RatingField = forwardRef<HTMLDivElement, RatingFieldProps>(\n  function RatingField(props, ref) {\n    const [fieldProps, { id, disabled, className, style, ...ratingProps }] =\n      splitFieldLabelProps(props)\n    return (\n      <Field {...fieldProps} htmlFor={id} disabled={disabled} className={className} style={style}>\n        <Rating ref={ref} {...ratingProps} />\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/RatingField/index.d.ts

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

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

@@ -0,0 +1,12 @@
+import { type SegmentedControlProps } from '../../actions/SegmentedControl/index.js';
+import { type FieldLabelProps } from '../Field/index.js';
+export interface SegmentedFieldProps extends FieldLabelProps, Omit<SegmentedControlProps, 'children' | 'invalid' | keyof FieldLabelProps> {
+}
+/**
+ * A labelled `SegmentedControl` — one of 2–5 peers, always one selected. The control 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 control.
+ *
+ * <SegmentedField label="Billing period" name="period" options={periods} layout="horizontal" />
+ */
+export declare const SegmentedField: import("react").ForwardRefExoticComponent<SegmentedFieldProps & import("react").RefAttributes<HTMLDivElement>>;