@epilot/zenith-react 0.2.0-next.5 → 0.2.0-next.7

package/README.md

@@ -152,7 +152,7 @@ page in the documentation's setup section has the steps for each agent.
 ## Which version you get
 
 `npm install @epilot/zenith-react` resolves the `latest` dist-tag, which points
-at `0.1.0` — published to `next`, verified, then promoted by hand.
+at `0.2.0` — published to `next`, verified, then promoted by hand.
 
 Unproven builds stay on `next` with a prerelease version:
 

package/dist/components/checkbox/checkbox.js

@@ -1,11 +1,13 @@
 import { jsx as o } from "react/jsx-runtime";
 import * as i from "react";
-import { Checkbox as u } from "../../_virtual/_zenith-runtime-family_checkbox.js";
-import { SLOT_ATTR as n, mergeClasses as C, shorthands as e } from "@epilot/zenith-runtime/v1";
-import { makeZenithStyles as v } from "../../styles/make-styles.js";
-import { boxModel as S, nativeControl as T } from "../../styles/host-reset.js";
-import { accentContrast as y, accentSolid as q, accentOnSoft as R, accentA7 as b, focusRing as x, radiusSm as I, accentSoft as M, errorA8 as O, grayA4 as A } from "../../tokens/index.js";
-const L = i.forwardRef(function(r, t) {
+import { Checkbox as b } from "../../_virtual/_zenith-runtime-family_checkbox.js";
+import { SLOT_ATTR as n, mergeClasses as S, shorthands as e } from "@epilot/zenith-runtime/v1";
+import { useOptionalFieldContext as T } from "../field/field.js";
+import { HiddenInputBox as y } from "../../lib/hidden-input-box.js";
+import { makeZenithStyles as q } from "../../styles/make-styles.js";
+import { boxModel as R, nativeControl as I } from "../../styles/host-reset.js";
+import { accentContrast as O, accentSolid as M, accentOnSoft as A, accentA7 as p, focusRing as f, radiusSm as B, accentSoft as L, errorA8 as E, grayA4 as F } from "../../tokens/index.js";
+const N = i.forwardRef(function(r, t) {
   return /* @__PURE__ */ o(
     "svg",
     {
@@ -21,7 +23,7 @@ const L = i.forwardRef(function(r, t) {
       children: /* @__PURE__ */ o("path", { d: "m382-354 339-339q12-12 28-12t28 12q12 12 12 28.5T777-636L410-268q-12 12-28 12t-28-12L182-440q-12-12-11.5-28.5T183-497q12-12 28.5-12t28.5 12l142 143Z" })
     }
   );
-}), B = i.forwardRef(function(r, t) {
+}), Z = i.forwardRef(function(r, t) {
   return /* @__PURE__ */ o(
     "svg",
     {
@@ -37,17 +39,17 @@ const L = i.forwardRef(function(r, t) {
       children: /* @__PURE__ */ o("path", { d: "M280-440q-17 0-28.5-11.5T240-480q0-17 11.5-28.5T280-520h400q17 0 28.5 11.5T720-480q0 17-11.5 28.5T680-440H280Z" })
     }
   );
-}), E = v({
+}), _ = q({
   root: {
-    ...T,
-    ...e.border("1px", "solid", b),
-    backgroundColor: M,
+    ...I,
+    ...e.border("1px", "solid", p),
+    backgroundColor: L,
     display: "inline-block",
     boxSizing: "border-box",
     width: "1rem",
     height: "1rem",
     flexShrink: 0,
-    borderRadius: I,
+    borderRadius: B,
     // v1 `shadow-xs` — elevation comes from Tailwind's shadow scale, which has no token (B7).
     boxShadow: "0 1px 2px 0 #0000000d",
     transitionProperty: "box-shadow",
@@ -60,26 +62,26 @@ const L = i.forwardRef(function(r, t) {
       outlineOffset: "2px",
       outlineWidth: "2px",
       outlineStyle: "solid",
-      outlineColor: x
+      outlineColor: f
     },
     "&[data-disabled]": {
       cursor: "not-allowed",
       opacity: 0.5,
-      ...e.borderColor(A)
+      ...e.borderColor(F)
     },
     "&[aria-invalid='true']": {
-      outlineColor: x,
-      ...e.borderColor(O)
+      outlineColor: f,
+      ...e.borderColor(E)
     },
     "&[data-indeterminate]": {
-      backgroundColor: b,
+      backgroundColor: p,
       ...e.borderColor("transparent"),
-      color: R
+      color: A
     },
     "&[data-checked]": {
-      backgroundColor: q,
+      backgroundColor: M,
       ...e.borderWidth("0px"),
-      color: y
+      color: O
     },
     "&[data-checked] svg, &[data-indeterminate] svg": {
       width: "0.875rem",
@@ -87,7 +89,7 @@ const L = i.forwardRef(function(r, t) {
     }
   },
   indicator: {
-    ...S,
+    ...R,
     display: "grid",
     placeContent: "center",
     height: "100%",
@@ -98,47 +100,47 @@ const L = i.forwardRef(function(r, t) {
       height: "0.875rem"
     }
   }
-}), N = /* @__PURE__ */ o("button", {}), F = i.forwardRef(
+}), z = /* @__PURE__ */ o("button", {}), K = i.forwardRef(
   function({
     className: r,
     checked: t,
-    defaultChecked: p,
+    defaultChecked: k,
     onCheckedChange: c,
-    asChild: Z,
-    value: s,
-    ...f
+    asChild: D,
+    value: l,
+    ...s
   }, g) {
-    const l = E(), [k, w] = i.useState(p ?? !1), a = t === void 0 ? k : t;
-    return /* @__PURE__ */ o(
-      u.Root,
+    const h = _(), w = T() !== null, [C, v] = i.useState(k ?? !1), a = t === void 0 ? C : t, m = /* @__PURE__ */ o(
+      b.Root,
       {
         ref: g,
         nativeButton: !0,
-        render: N,
+        render: z,
         checked: a === !0,
         indeterminate: a === "indeterminate",
-        onCheckedChange: (h, m) => {
-          c == null || c(h, m), m.isCanceled || w(h);
+        onCheckedChange: (u, x) => {
+          c == null || c(u, x), x.isCanceled || v(u);
         },
-        value: s === void 0 ? void 0 : String(s),
+        value: l === void 0 ? void 0 : String(l),
         "data-slot": "checkbox",
         [n]: "checkbox",
-        className: C(l.root, r),
-        ...f,
+        className: S(h.root, r),
+        ...s,
         children: /* @__PURE__ */ o(
-          u.Indicator,
+          b.Indicator,
           {
             "data-slot": "checkbox-indicator",
             [n]: "checkbox-indicator",
-            className: l.indicator,
-            children: a === "indeterminate" ? /* @__PURE__ */ o(B, {}) : /* @__PURE__ */ o(L, {})
+            className: h.indicator,
+            children: a === "indeterminate" ? /* @__PURE__ */ o(Z, {}) : /* @__PURE__ */ o(N, {})
           }
         )
       }
     );
+    return s.name === void 0 || w ? m : /* @__PURE__ */ o(y, { slot: "checkbox-box", layout: "inline-block", children: m });
   }
 );
 export {
-  F as Checkbox
+  K as Checkbox
 };
 //# sourceMappingURL=checkbox.js.map

package/dist/components/checkbox/checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.js","sources":["../../../src/components/checkbox/checkbox.tsx"],"sourcesContent":["import * as React from \"react\"\nimport { Checkbox as CheckboxPrimitive } from \"@base-ui/react/checkbox\"\nimport { mergeClasses, shorthands } from \"@epilot/zenith-runtime/v1\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeZenithStyles } from \"../../styles/make-styles\"\nimport { boxModel, nativeControl } from \"../../styles/host-reset\"\nimport * as tokens from \"../../tokens\"\n\nconst CheckIcon = React.forwardRef<\n  SVGSVGElement,\n  React.SVGProps<SVGSVGElement>\n>(function CheckIcon(props, ref) {\n  return (\n    <svg\n      ref={ref}\n      data-slot=\"checkbox-check-icon\"\n      {...{ [SLOT_ATTR]: \"checkbox-check-icon\" }}\n      xmlns=\"http://www.w3.org/2000/svg\"\n      height=\"24px\"\n      viewBox=\"0 -960 960 960\"\n      width=\"24px\"\n      fill=\"currentColor\"\n      {...props}\n    >\n      <path d=\"m382-354 339-339q12-12 28-12t28 12q12 12 12 28.5T777-636L410-268q-12 12-28 12t-28-12L182-440q-12-12-11.5-28.5T183-497q12-12 28.5-12t28.5 12l142 143Z\" />\n    </svg>\n  )\n})\n\nconst MinusIcon = React.forwardRef<\n  SVGSVGElement,\n  React.SVGProps<SVGSVGElement>\n>(function MinusIcon(props, ref) {\n  return (\n    <svg\n      ref={ref}\n      data-slot=\"checkbox-minus-icon\"\n      {...{ [SLOT_ATTR]: \"checkbox-minus-icon\" }}\n      xmlns=\"http://www.w3.org/2000/svg\"\n      height=\"24px\"\n      viewBox=\"0 -960 960 960\"\n      width=\"24px\"\n      fill=\"currentColor\"\n      {...props}\n    >\n      <path d=\"M280-440q-17 0-28.5-11.5T240-480q0-17 11.5-28.5T280-520h400q17 0 28.5 11.5T720-480q0 17-11.5 28.5T680-440H280Z\" />\n    </svg>\n  )\n})\n\nconst useStyles = makeZenithStyles({\n  root: {\n    ...nativeControl,\n    ...shorthands.border(\"1px\", \"solid\", tokens.accentA7),\n    backgroundColor: tokens.accentSoft,\n    display: \"inline-block\",\n    boxSizing: \"border-box\",\n    width: \"1rem\",\n    height: \"1rem\",\n    flexShrink: 0,\n    borderRadius: tokens.radiusSm,\n    // v1 `shadow-xs` — elevation comes from Tailwind's shadow scale, which has no token (B7).\n    boxShadow: \"0 1px 2px 0 #0000000d\",\n    transitionProperty: \"box-shadow\",\n    transitionTimingFunction: \"cubic-bezier(0.4, 0, 0.2, 1)\",\n    transitionDuration: \"150ms\",\n    \"@media (prefers-reduced-motion: reduce)\": {\n      transitionDuration: \"0.01ms\",\n    },\n    \":focus-visible\": {\n      outlineOffset: \"2px\",\n      outlineWidth: \"2px\",\n      outlineStyle: \"solid\",\n      outlineColor: tokens.focusRing,\n    },\n    \"&[data-disabled]\": {\n      cursor: \"not-allowed\",\n      opacity: 0.5,\n      ...shorthands.borderColor(tokens.grayA4),\n    },\n    \"&[aria-invalid='true']\": {\n      outlineColor: tokens.focusRing,\n      ...shorthands.borderColor(tokens.errorA8),\n    },\n    \"&[data-indeterminate]\": {\n      backgroundColor: tokens.accentA7,\n      ...shorthands.borderColor(\"transparent\"),\n      color: tokens.accentOnSoft,\n    },\n    \"&[data-checked]\": {\n      backgroundColor: tokens.accentSolid,\n      ...shorthands.borderWidth(\"0px\"),\n      color: tokens.accentContrast,\n    },\n    \"&[data-checked] svg, &[data-indeterminate] svg\": {\n      width: \"0.875rem\",\n      height: \"0.875rem\",\n    },\n  },\n  indicator: {\n    ...boxModel,\n    display: \"grid\",\n    placeContent: \"center\",\n    height: \"100%\",\n    color: \"currentColor\",\n    transitionProperty: \"none\",\n    \"& svg\": {\n      width: \"0.875rem\",\n      height: \"0.875rem\",\n    },\n  },\n})\n\n/**\n * `checked` and `defaultChecked` accept the same three states as on Radix; Base UI models the third\n * as its own `indeterminate` boolean, which the wrapper sets.\n */\nexport type CheckboxCheckedState = boolean | \"indeterminate\"\n\n/**\n * What `onCheckedChange` receives as its second argument: Base UI's change details, declared in\n * Zenith so that none of Base UI's internals reach the published declarations, where TypeScript 4\n * cannot parse them.\n */\ntype CheckboxCheckedChangeDetails = {\n  /** Why the checkbox changed. Base UI reports every checkbox change as `none`. */\n  reason: \"none\"\n  /** The native event behind the change. */\n  event: Event\n  /** Keeps the checkbox in its current state. */\n  cancel: () => void\n  /** Lets the event propagate where the checkbox would otherwise stop it. */\n  allowPropagation: () => void\n  isCanceled: boolean\n  isPropagationAllowed: boolean\n  /** The element that caused the change, if any. */\n  trigger: Element | undefined\n}\n\n/**\n * The checkbox props Base UI adds to a `<button>`'s, declared in Zenith with Base UI's types, apart\n * from the three-state `checked`, `defaultChecked` and `onCheckedChange`, which keep their Radix\n * shape. The root renders a native `<button>`, so the DOM attributes, handlers, `ref`, `key`,\n * `className`, `style` and `value` stay the button's, as they were on Radix; `render`,\n * `nativeButton`, `indeterminate` and `parent` are not part of the surface.\n */\ntype CheckboxRootProps = {\n  /**\n   * Whether the checkbox is currently checked, or `\"indeterminate\"`.\n   *\n   * To render an uncontrolled checkbox, use the `defaultChecked` prop instead.\n   */\n  checked?: CheckboxCheckedState | undefined\n  /** Whether the checkbox is initially checked, or `\"indeterminate\"`. */\n  defaultChecked?: CheckboxCheckedState | undefined\n  /** Whether the component should ignore user interaction. */\n  disabled?: boolean | undefined\n  /** A ref to access the hidden `<input>` element. */\n  inputRef?: React.Ref<HTMLInputElement> | undefined\n  /** Identifies the field when a form is submitted. */\n  name?: string | undefined\n  /**\n   * Identifies the form that owns the hidden input.\n   * Useful when the checkbox is rendered outside the form.\n   */\n  form?: string | undefined\n  /**\n   * Event handler called when the checkbox is checked or unchecked. Clicking an indeterminate\n   * checkbox reports `true`.\n   */\n  onCheckedChange?:\n    | ((\n        checked: CheckboxCheckedState,\n        eventDetails: CheckboxCheckedChangeDetails\n      ) => void)\n    | undefined\n  /** Whether the user should be unable to check or uncheck the checkbox. */\n  readOnly?: boolean | undefined\n  /** Whether the user must check the checkbox before submitting a form. */\n  required?: boolean | undefined\n  /**\n   * The value submitted with the form when the checkbox is unchecked.\n   * By default, unchecked checkboxes do not submit any value, matching native checkbox behavior.\n   */\n  uncheckedValue?: string | undefined\n}\n\nexport type CheckboxProps = Omit<\n  React.ComponentPropsWithRef<\"button\">,\n  keyof CheckboxRootProps\n> &\n  CheckboxRootProps & {\n    /**\n     * @deprecated Has no effect. The indicator is the checkbox's only child, so on Radix this\n     * rendered the indicator as the checkbox rather than an element of yours. Remove it.\n     */\n    asChild?: boolean\n  }\n\n// Base UI renders a <span> by default and moves the caller's id onto its hidden input. A native\n// button keeps the id, the HTMLButtonElement ref, native disabled and <label for> as Radix had them.\nconst ROOT_ELEMENT = <button />\n\nexport const Checkbox = React.forwardRef<HTMLButtonElement, CheckboxProps>(\n  function Checkbox(\n    {\n      className,\n      checked,\n      defaultChecked,\n      onCheckedChange,\n      asChild: _asChild,\n      value,\n      ...props\n    },\n    ref\n  ) {\n    const styles = useStyles()\n    // Base UI has no third state to start from or to hold uncontrolled, so the state lives here\n    // and Base UI is always controlled; a cancelled change leaves it as it was.\n    const [uncontrolled, setUncontrolled] =\n      React.useState<CheckboxCheckedState>(defaultChecked ?? false)\n    const state = checked === undefined ? uncontrolled : checked\n\n    return (\n      <CheckboxPrimitive.Root\n        ref={ref}\n        nativeButton\n        render={ROOT_ELEMENT}\n        checked={state === true}\n        indeterminate={state === \"indeterminate\"}\n        onCheckedChange={(next, details) => {\n          onCheckedChange?.(next, details)\n          if (!details.isCanceled) setUncontrolled(next)\n        }}\n        // Radix took the button's value type; Base UI submits a string, so it is converted here\n        // the way the button's value attribute stringified it.\n        value={value === undefined ? undefined : String(value)}\n        data-slot=\"checkbox\"\n        {...{ [SLOT_ATTR]: \"checkbox\" }}\n        className={mergeClasses(styles.root, className)}\n        // Base UI types the root's handlers for its default <span>; the element is the button\n        // above, so the caller's button-typed handlers receive exactly the events they declare.\n        {...(props as CheckboxPrimitive.Root.Props)}\n      >\n        <CheckboxPrimitive.Indicator\n          data-slot=\"checkbox-indicator\"\n          {...{ [SLOT_ATTR]: \"checkbox-indicator\" }}\n          className={styles.indicator}\n        >\n          {state === \"indeterminate\" ? <MinusIcon /> : <CheckIcon />}\n        </CheckboxPrimitive.Indicator>\n      </CheckboxPrimitive.Root>\n    )\n  }\n)\n"],"names":["CheckIcon","React","props","ref","jsx","SLOT_ATTR","MinusIcon","useStyles","makeZenithStyles","nativeControl","shorthands","tokens.accentA7","tokens.accentSoft","tokens.radiusSm","tokens.focusRing","tokens.grayA4","tokens.errorA8","tokens.accentOnSoft","tokens.accentSolid","tokens.accentContrast","boxModel","ROOT_ELEMENT","Checkbox","className","checked","defaultChecked","onCheckedChange","_asChild","value","styles","uncontrolled","setUncontrolled","state","CheckboxPrimitive","next","details","mergeClasses"],"mappings":"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"}
+{"version":3,"file":"checkbox.js","sources":["../../../src/components/checkbox/checkbox.tsx"],"sourcesContent":["import * as React from \"react\"\nimport { Checkbox as CheckboxPrimitive } from \"@base-ui/react/checkbox\"\nimport { mergeClasses, shorthands } from \"@epilot/zenith-runtime/v1\"\n\nimport { useOptionalFieldContext } from \"../field/field\"\nimport { HiddenInputBox } from \"../../lib/hidden-input-box\"\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeZenithStyles } from \"../../styles/make-styles\"\nimport { boxModel, nativeControl } from \"../../styles/host-reset\"\nimport * as tokens from \"../../tokens\"\n\nconst CheckIcon = React.forwardRef<\n  SVGSVGElement,\n  React.SVGProps<SVGSVGElement>\n>(function CheckIcon(props, ref) {\n  return (\n    <svg\n      ref={ref}\n      data-slot=\"checkbox-check-icon\"\n      {...{ [SLOT_ATTR]: \"checkbox-check-icon\" }}\n      xmlns=\"http://www.w3.org/2000/svg\"\n      height=\"24px\"\n      viewBox=\"0 -960 960 960\"\n      width=\"24px\"\n      fill=\"currentColor\"\n      {...props}\n    >\n      <path d=\"m382-354 339-339q12-12 28-12t28 12q12 12 12 28.5T777-636L410-268q-12 12-28 12t-28-12L182-440q-12-12-11.5-28.5T183-497q12-12 28.5-12t28.5 12l142 143Z\" />\n    </svg>\n  )\n})\n\nconst MinusIcon = React.forwardRef<\n  SVGSVGElement,\n  React.SVGProps<SVGSVGElement>\n>(function MinusIcon(props, ref) {\n  return (\n    <svg\n      ref={ref}\n      data-slot=\"checkbox-minus-icon\"\n      {...{ [SLOT_ATTR]: \"checkbox-minus-icon\" }}\n      xmlns=\"http://www.w3.org/2000/svg\"\n      height=\"24px\"\n      viewBox=\"0 -960 960 960\"\n      width=\"24px\"\n      fill=\"currentColor\"\n      {...props}\n    >\n      <path d=\"M280-440q-17 0-28.5-11.5T240-480q0-17 11.5-28.5T280-520h400q17 0 28.5 11.5T720-480q0 17-11.5 28.5T680-440H280Z\" />\n    </svg>\n  )\n})\n\nconst useStyles = makeZenithStyles({\n  root: {\n    ...nativeControl,\n    ...shorthands.border(\"1px\", \"solid\", tokens.accentA7),\n    backgroundColor: tokens.accentSoft,\n    display: \"inline-block\",\n    boxSizing: \"border-box\",\n    width: \"1rem\",\n    height: \"1rem\",\n    flexShrink: 0,\n    borderRadius: tokens.radiusSm,\n    // v1 `shadow-xs` — elevation comes from Tailwind's shadow scale, which has no token (B7).\n    boxShadow: \"0 1px 2px 0 #0000000d\",\n    transitionProperty: \"box-shadow\",\n    transitionTimingFunction: \"cubic-bezier(0.4, 0, 0.2, 1)\",\n    transitionDuration: \"150ms\",\n    \"@media (prefers-reduced-motion: reduce)\": {\n      transitionDuration: \"0.01ms\",\n    },\n    \":focus-visible\": {\n      outlineOffset: \"2px\",\n      outlineWidth: \"2px\",\n      outlineStyle: \"solid\",\n      outlineColor: tokens.focusRing,\n    },\n    \"&[data-disabled]\": {\n      cursor: \"not-allowed\",\n      opacity: 0.5,\n      ...shorthands.borderColor(tokens.grayA4),\n    },\n    \"&[aria-invalid='true']\": {\n      outlineColor: tokens.focusRing,\n      ...shorthands.borderColor(tokens.errorA8),\n    },\n    \"&[data-indeterminate]\": {\n      backgroundColor: tokens.accentA7,\n      ...shorthands.borderColor(\"transparent\"),\n      color: tokens.accentOnSoft,\n    },\n    \"&[data-checked]\": {\n      backgroundColor: tokens.accentSolid,\n      ...shorthands.borderWidth(\"0px\"),\n      color: tokens.accentContrast,\n    },\n    \"&[data-checked] svg, &[data-indeterminate] svg\": {\n      width: \"0.875rem\",\n      height: \"0.875rem\",\n    },\n  },\n  indicator: {\n    ...boxModel,\n    display: \"grid\",\n    placeContent: \"center\",\n    height: \"100%\",\n    color: \"currentColor\",\n    transitionProperty: \"none\",\n    \"& svg\": {\n      width: \"0.875rem\",\n      height: \"0.875rem\",\n    },\n  },\n})\n\n/**\n * `checked` and `defaultChecked` accept the same three states as on Radix; Base UI models the third\n * as its own `indeterminate` boolean, which the wrapper sets.\n */\nexport type CheckboxCheckedState = boolean | \"indeterminate\"\n\n/**\n * What `onCheckedChange` receives as its second argument: Base UI's change details, declared in\n * Zenith so that none of Base UI's internals reach the published declarations, where TypeScript 4\n * cannot parse them.\n */\ntype CheckboxCheckedChangeDetails = {\n  /** Why the checkbox changed. Base UI reports every checkbox change as `none`. */\n  reason: \"none\"\n  /** The native event behind the change. */\n  event: Event\n  /** Keeps the checkbox in its current state. */\n  cancel: () => void\n  /** Lets the event propagate where the checkbox would otherwise stop it. */\n  allowPropagation: () => void\n  isCanceled: boolean\n  isPropagationAllowed: boolean\n  /** The element that caused the change, if any. */\n  trigger: Element | undefined\n}\n\n/**\n * The checkbox props Base UI adds to a `<button>`'s, declared in Zenith with Base UI's types, apart\n * from the three-state `checked`, `defaultChecked` and `onCheckedChange`, which keep their Radix\n * shape. The root renders a native `<button>`, so the DOM attributes, handlers, `ref`, `key`,\n * `className`, `style` and `value` stay the button's, as they were on Radix; `render`,\n * `nativeButton`, `indeterminate` and `parent` are not part of the surface.\n */\ntype CheckboxRootProps = {\n  /**\n   * Whether the checkbox is currently checked, or `\"indeterminate\"`.\n   *\n   * To render an uncontrolled checkbox, use the `defaultChecked` prop instead.\n   */\n  checked?: CheckboxCheckedState | undefined\n  /** Whether the checkbox is initially checked, or `\"indeterminate\"`. */\n  defaultChecked?: CheckboxCheckedState | undefined\n  /** Whether the component should ignore user interaction. */\n  disabled?: boolean | undefined\n  /** A ref to access the hidden `<input>` element. */\n  inputRef?: React.Ref<HTMLInputElement> | undefined\n  /** Identifies the field when a form is submitted. */\n  name?: string | undefined\n  /**\n   * Identifies the form that owns the hidden input.\n   * Useful when the checkbox is rendered outside the form.\n   */\n  form?: string | undefined\n  /**\n   * Event handler called when the checkbox is checked or unchecked. Clicking an indeterminate\n   * checkbox reports `true`.\n   */\n  onCheckedChange?:\n    | ((\n        checked: CheckboxCheckedState,\n        eventDetails: CheckboxCheckedChangeDetails\n      ) => void)\n    | undefined\n  /** Whether the user should be unable to check or uncheck the checkbox. */\n  readOnly?: boolean | undefined\n  /** Whether the user must check the checkbox before submitting a form. */\n  required?: boolean | undefined\n  /**\n   * The value submitted with the form when the checkbox is unchecked.\n   * By default, unchecked checkboxes do not submit any value, matching native checkbox behavior.\n   */\n  uncheckedValue?: string | undefined\n}\n\nexport type CheckboxProps = Omit<\n  React.ComponentPropsWithRef<\"button\">,\n  keyof CheckboxRootProps\n> &\n  CheckboxRootProps & {\n    /**\n     * @deprecated Has no effect. The indicator is the checkbox's only child, so on Radix this\n     * rendered the indicator as the checkbox rather than an element of yours. Remove it.\n     */\n    asChild?: boolean\n  }\n\n// Base UI renders a <span> by default and moves the caller's id onto its hidden input. A native\n// button keeps the id, the HTMLButtonElement ref, native disabled and <label for> as Radix had them.\nconst ROOT_ELEMENT = <button />\n\nexport const Checkbox = React.forwardRef<HTMLButtonElement, CheckboxProps>(\n  function Checkbox(\n    {\n      className,\n      checked,\n      defaultChecked,\n      onCheckedChange,\n      asChild: _asChild,\n      value,\n      ...props\n    },\n    ref\n  ) {\n    const styles = useStyles()\n    const inField = useOptionalFieldContext() !== null\n    // Base UI has no third state to start from or to hold uncontrolled, so the state lives here\n    // and Base UI is always controlled; a cancelled change leaves it as it was.\n    const [uncontrolled, setUncontrolled] =\n      React.useState<CheckboxCheckedState>(defaultChecked ?? false)\n    const state = checked === undefined ? uncontrolled : checked\n\n    const root = (\n      <CheckboxPrimitive.Root\n        ref={ref}\n        nativeButton\n        render={ROOT_ELEMENT}\n        checked={state === true}\n        indeterminate={state === \"indeterminate\"}\n        onCheckedChange={(next, details) => {\n          onCheckedChange?.(next, details)\n          if (!details.isCanceled) setUncontrolled(next)\n        }}\n        // Radix took the button's value type; Base UI submits a string, so it is converted here\n        // the way the button's value attribute stringified it.\n        value={value === undefined ? undefined : String(value)}\n        data-slot=\"checkbox\"\n        {...{ [SLOT_ATTR]: \"checkbox\" }}\n        className={mergeClasses(styles.root, className)}\n        // Base UI types the root's handlers for its default <span>; the element is the button\n        // above, so the caller's button-typed handlers receive exactly the events they declare.\n        {...(props as CheckboxPrimitive.Root.Props)}\n      >\n        <CheckboxPrimitive.Indicator\n          data-slot=\"checkbox-indicator\"\n          {...{ [SLOT_ATTR]: \"checkbox-indicator\" }}\n          className={styles.indicator}\n        >\n          {state === \"indeterminate\" ? <MinusIcon /> : <CheckIcon />}\n        </CheckboxPrimitive.Indicator>\n      </CheckboxPrimitive.Root>\n    )\n\n    // A named checkbox's hidden input sits beside the button; the box keeps it in (#132). A Field\n    // is positioned already, so inside one the checkbox stays the layout item itself.\n    return props.name === undefined || inField ? (\n      root\n    ) : (\n      <HiddenInputBox slot=\"checkbox-box\" layout=\"inline-block\">\n        {root}\n      </HiddenInputBox>\n    )\n  }\n)\n"],"names":["CheckIcon","React","props","ref","jsx","SLOT_ATTR","MinusIcon","useStyles","makeZenithStyles","nativeControl","shorthands","tokens.accentA7","tokens.accentSoft","tokens.radiusSm","tokens.focusRing","tokens.grayA4","tokens.errorA8","tokens.accentOnSoft","tokens.accentSolid","tokens.accentContrast","boxModel","ROOT_ELEMENT","Checkbox","className","checked","defaultChecked","onCheckedChange","_asChild","value","styles","inField","useOptionalFieldContext","uncontrolled","setUncontrolled","state","root","CheckboxPrimitive","next","details","mergeClasses","HiddenInputBox"],"mappings":"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"}

package/dist/components/radio/radio.js

@@ -3,8 +3,8 @@ import * as n from "react";
 import { Radio as p } from "../../_virtual/_zenith-runtime-family_radio.js";
 import { mergeClasses as b, SLOT_ATTR as l, shorthands as i } from "@epilot/zenith-runtime/v1";
 import { makeZenithStyles as k } from "../../styles/make-styles.js";
-import { boxModel as m, nativeControl as y } from "../../styles/host-reset.js";
-import { accentContrast as f, errorA10 as v, focusRing as h, errorSoft as R, grayA3 as g, accentSolid as w, accentOnSoft as S, accentSoft as I, errorA8 as E, accentA7 as A, spacingElement3 as T } from "../../tokens/index.js";
+import { boxModel as m, nativeControl as v } from "../../styles/host-reset.js";
+import { accentContrast as f, errorA10 as y, focusRing as h, errorSoft as R, grayA3 as g, accentSolid as w, accentOnSoft as S, accentSoft as I, errorA8 as E, accentA7 as A, spacingElement3 as T } from "../../tokens/index.js";
 import { RadioGroupBase as j } from "./radio-group-base.js";
 const G = n.forwardRef(
   function(o, e) {
@@ -26,11 +26,14 @@ const G = n.forwardRef(
   }
 ), C = k({
   group: {
+    // A named group's radios each render a hidden input beside them, absolutely positioned with no
+    // offsets: the group is their containing block, so they cannot escape an app's scroll box (#132).
+    position: "relative",
     display: "grid",
     ...i.gap(T)
   },
   item: {
-    ...y,
+    ...v,
     boxSizing: "border-box",
     display: "inline-flex",
     alignItems: "center",
@@ -76,7 +79,7 @@ const G = n.forwardRef(
       outlineColor: h
     },
     "&[data-checked][aria-invalid='true'], &[data-checked][data-invalid]": {
-      backgroundColor: v,
+      backgroundColor: y,
       ...i.borderColor("transparent")
     }
   },
@@ -106,32 +109,32 @@ function N(a) {
   return o.length === 1 ? o[0] : void 0;
 }
 const F = n.forwardRef(
-  function({ className: o, asChild: e, children: d, ...u }, c) {
-    const s = C(), r = e ? N(d) : void 0;
+  function({ className: o, asChild: e, children: d, ...u }, s) {
+    const c = C(), r = e ? N(d) : void 0;
     return /* @__PURE__ */ t(
       j,
       {
-        ref: c,
+        ref: s,
         "data-slot": "radio-group",
         [l]: "radio-group",
-        className: b(s.group, o),
+        className: b(c.group, o),
         ...u,
         ...r ? { render: r } : { children: d }
       }
     );
   }
-), L = /* @__PURE__ */ t("button", { type: "button" }), P = n.forwardRef(function({ className: o, children: e, asChild: d, checked: u, ...c }, s) {
+), L = /* @__PURE__ */ t("button", { type: "button" }), P = n.forwardRef(function({ className: o, children: e, asChild: d, checked: u, ...s }, c) {
   const r = C();
   return /* @__PURE__ */ x(
     p.Root,
     {
-      ref: s,
+      ref: c,
       nativeButton: !0,
       render: L,
       "data-slot": "radio-group-item",
       [l]: "radio-group-item",
       className: b(r.item, o),
-      ...c,
+      ...s,
       children: [
         /* @__PURE__ */ t(
           p.Indicator,

package/dist/components/radio/radio.js.map

@@ -1 +1 @@
-{"version":3,"file":"radio.js","sources":["../../../src/components/radio/radio.tsx"],"sourcesContent":["import * as React from \"react\"\nimport { Radio } from \"@base-ui/react/radio\"\nimport { mergeClasses, shorthands } from \"@epilot/zenith-runtime/v1\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeZenithStyles } from \"../../styles/make-styles\"\nimport { boxModel, nativeControl } from \"../../styles/host-reset\"\nimport * as tokens from \"../../tokens\"\nimport {\n  RadioGroupBase,\n  type RadioGroupBaseProps,\n  type RadioGroupOrientation,\n} from \"./radio-group-base\"\n\nconst CircleIcon = React.forwardRef<SVGSVGElement, React.ComponentProps<\"svg\">>(\n  function CircleIcon(props, ref) {\n    return (\n      <svg\n        ref={ref}\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 24 24\"\n        fill=\"currentColor\"\n        stroke=\"currentColor\"\n        strokeWidth=\"2\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        {...props}\n      >\n        <circle cx=\"12\" cy=\"12\" r=\"10\" />\n      </svg>\n    )\n  }\n)\n\nconst useStyles = makeZenithStyles({\n  group: {\n    display: \"grid\",\n    ...shorthands.gap(tokens.spacingElement3),\n  },\n  item: {\n    ...nativeControl,\n    boxSizing: \"border-box\",\n    display: \"inline-flex\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    position: \"relative\",\n    aspectRatio: \"1 / 1\",\n    width: \"1rem\",\n    height: \"1rem\",\n    flexShrink: 0,\n    borderRadius: \"9999px\",\n    ...shorthands.border(\"1px\", \"solid\", tokens.accentA7),\n    backgroundColor: tokens.accentSoft,\n    color: tokens.accentOnSoft,\n    // Tailwind `shadow-xs` — literal per CONVENTIONS B7\n    boxShadow: \"0 1px 2px 0 #0000000d\",\n    transitionProperty: \"color, box-shadow\",\n    transitionDuration: \"150ms\",\n    transitionTimingFunction: \"cubic-bezier(0.4, 0, 0.2, 1)\",\n    \"@media (prefers-reduced-motion: reduce)\": {\n      transitionDuration: \"0.01ms\",\n    },\n    \":focus-visible\": {\n      outlineOffset: \"2px\",\n      outlineWidth: \"2px\",\n      outlineStyle: \"solid\",\n      outlineColor: tokens.focusRing,\n    },\n    \"&[data-disabled]\": {\n      cursor: \"not-allowed\",\n      backgroundColor: tokens.grayA3,\n      ...shorthands.borderColor(\"transparent\"),\n    },\n    \"&[data-checked]\": {\n      backgroundColor: tokens.accentSolid,\n      color: tokens.accentContrast,\n    },\n    \"&[data-checked][data-disabled]\": {\n      backgroundColor: tokens.grayA3,\n    },\n    \"&[aria-invalid='true'], &[data-invalid]\": {\n      backgroundColor: tokens.errorSoft,\n      ...shorthands.borderColor(tokens.errorA8),\n      outlineColor: tokens.focusRing,\n    },\n    \"&[data-checked][aria-invalid='true'], &[data-checked][data-invalid]\": {\n      backgroundColor: tokens.errorA10,\n      ...shorthands.borderColor(\"transparent\"),\n    },\n  },\n  indicator: {\n    ...boxModel,\n    position: \"relative\",\n    display: \"flex\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    width: \"100%\",\n    height: \"100%\",\n  },\n  icon: {\n    ...boxModel,\n    color: tokens.accentContrast,\n    position: \"absolute\",\n    top: \"50%\",\n    left: \"50%\",\n    width: \"0.5rem\",\n    height: \"0.5rem\",\n    transform: \"translate(-50%, -50%)\",\n    pointerEvents: \"none\",\n  },\n})\n\n/**\n * What `onValueChange` receives as its second argument: Base UI's change details, declared in\n * Zenith so that none of Base UI's internals reach the published declarations, where TypeScript 4\n * cannot parse them.\n */\nexport type RadioGroupChangeDetails = {\n  /** Why the value changed. Base UI reports every radio group change as `none`. */\n  reason: \"none\"\n  /** The native event behind the change. */\n  event: Event\n  /** Keeps the group's current value. */\n  cancel: () => void\n  /** Lets the event propagate where the group would otherwise stop it. */\n  allowPropagation: () => void\n  isCanceled: boolean\n  isPropagationAllowed: boolean\n  /** The element that caused the change, if any. */\n  trigger: Element | undefined\n}\n\ntype RadioGroupRootProps = {\n  /**\n   * The controlled value of the radio item that should be currently selected.\n   *\n   * To render an uncontrolled radio group, use the `defaultValue` prop instead.\n   */\n  value?: string | null | undefined\n  /** The value of the radio item that should be initially selected. */\n  defaultValue?: string | undefined\n  /** Event handler called when the value changes. */\n  onValueChange?:\n    ((value: string, eventDetails: RadioGroupChangeDetails) => void) | undefined\n  /** Whether the component should ignore user interaction. */\n  disabled?: boolean | undefined\n  /** Whether the user must choose a value before submitting a form. */\n  required?: boolean | undefined\n  /** Identifies the field when a form is submitted. */\n  name?: string | undefined\n  /**\n   * The axis the arrow keys move along. When set, only that axis' keys move between the options\n   * (Up and Down for `vertical`) and it is restated as `aria-orientation`. Unset, all four work.\n   */\n  orientation?: RadioGroupOrientation | undefined\n  /** The reading direction, which decides what Left and Right mean. */\n  dir?: \"ltr\" | \"rtl\" | undefined\n  /** Whether the arrow keys wrap from the last option to the first and back. Defaults to `true`. */\n  loop?: boolean | undefined\n  /** Renders the single child element as the group, merging the group's props and behaviour onto it. */\n  asChild?: boolean | undefined\n}\n\nexport type RadioGroupProps = Omit<\n  React.ComponentPropsWithRef<\"div\">,\n  keyof RadioGroupRootProps\n> &\n  RadioGroupRootProps\n\n// A single child can arrive wrapped in a one-element array depending on the JSX runtime, which\n// Radix's Slot normalised.\nfunction onlySlotChild(children: React.ReactNode) {\n  const elements = React.Children.toArray(children).filter(React.isValidElement)\n  return elements.length === 1 ? elements[0] : undefined\n}\n\nexport const RadioGroup = React.forwardRef<HTMLDivElement, RadioGroupProps>(\n  function RadioGroup({ className, asChild, children, ...props }, ref) {\n    const styles = useStyles()\n    const child = asChild ? onlySlotChild(children) : undefined\n\n    return (\n      <RadioGroupBase\n        ref={ref}\n        data-slot=\"radio-group\"\n        {...{ [SLOT_ATTR]: \"radio-group\" }}\n        className={mergeClasses(styles.group, className)}\n        // Base UI types the group's handlers for its <div>, which is the element rendered; the\n        // caller's div-typed handlers receive exactly the events they declare.\n        {...(props as RadioGroupBaseProps)}\n        {...(child ? { render: child } : { children })}\n      />\n    )\n  }\n)\n\ntype RadioGroupItemOwnProps = {\n  /** The value this item submits and selects the group with. */\n  value: string\n  /** Whether the item should ignore user interaction. */\n  disabled?: boolean | undefined\n  /** Whether the user must choose this item before submitting a form. */\n  required?: boolean | undefined\n  /**\n   * @deprecated Has no effect. The group decides which item is checked, as it did on Radix, which\n   * ignored this prop.\n   */\n  checked?: boolean | undefined\n  /**\n   * @deprecated Has no effect. The indicator is the item's only child, so on Radix this rendered\n   * the indicator as the item rather than an element of yours. Remove it.\n   */\n  asChild?: boolean | undefined\n}\n\n// `name` belongs to the group, which submits it, so it is not an item prop, as on Radix.\nexport type RadioGroupItemProps = Omit<\n  React.ComponentPropsWithRef<\"button\">,\n  keyof RadioGroupItemOwnProps | \"name\"\n> &\n  RadioGroupItemOwnProps\n\n// Base UI renders a <span> by default and moves the caller's id onto its hidden input. A native\n// button keeps the id, the HTMLButtonElement ref, native disabled and <label for> as Radix had them.\nconst ITEM_ELEMENT = <button type=\"button\" />\n\nexport const RadioGroupItem = React.forwardRef<\n  HTMLButtonElement,\n  RadioGroupItemProps\n>(function RadioGroupItem(\n  { className, children, asChild: _asChild, checked: _checked, ...props },\n  ref\n) {\n  const styles = useStyles()\n\n  return (\n    <Radio.Root\n      ref={ref}\n      nativeButton\n      render={ITEM_ELEMENT}\n      data-slot=\"radio-group-item\"\n      {...{ [SLOT_ATTR]: \"radio-group-item\" }}\n      className={mergeClasses(styles.item, className)}\n      // Base UI types the item's handlers for its default <span>; the element is the button above.\n      {...(props as Radio.Root.Props<string>)}\n    >\n      <Radio.Indicator\n        data-slot=\"radio-group-indicator\"\n        {...{ [SLOT_ATTR]: \"radio-group-indicator\" }}\n        className={styles.indicator}\n      >\n        <CircleIcon className={styles.icon} />\n      </Radio.Indicator>\n      {children}\n    </Radio.Root>\n  )\n})\n"],"names":["CircleIcon","React","props","ref","jsx","useStyles","makeZenithStyles","shorthands","tokens.spacingElement3","nativeControl","tokens.accentA7","tokens.accentSoft","tokens.accentOnSoft","tokens.focusRing","tokens.grayA3","tokens.accentSolid","tokens.accentContrast","tokens.errorSoft","tokens.errorA8","tokens.errorA10","boxModel","onlySlotChild","children","elements","RadioGroup","className","asChild","styles","child","RadioGroupBase","SLOT_ATTR","mergeClasses","ITEM_ELEMENT","RadioGroupItem","_asChild","_checked","jsxs","Radio"],"mappings":"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"}
+{"version":3,"file":"radio.js","sources":["../../../src/components/radio/radio.tsx"],"sourcesContent":["import * as React from \"react\"\nimport { Radio } from \"@base-ui/react/radio\"\nimport { mergeClasses, shorthands } from \"@epilot/zenith-runtime/v1\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeZenithStyles } from \"../../styles/make-styles\"\nimport { boxModel, nativeControl } from \"../../styles/host-reset\"\nimport * as tokens from \"../../tokens\"\nimport {\n  RadioGroupBase,\n  type RadioGroupBaseProps,\n  type RadioGroupOrientation,\n} from \"./radio-group-base\"\n\nconst CircleIcon = React.forwardRef<SVGSVGElement, React.ComponentProps<\"svg\">>(\n  function CircleIcon(props, ref) {\n    return (\n      <svg\n        ref={ref}\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 24 24\"\n        fill=\"currentColor\"\n        stroke=\"currentColor\"\n        strokeWidth=\"2\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        {...props}\n      >\n        <circle cx=\"12\" cy=\"12\" r=\"10\" />\n      </svg>\n    )\n  }\n)\n\nconst useStyles = makeZenithStyles({\n  group: {\n    // A named group's radios each render a hidden input beside them, absolutely positioned with no\n    // offsets: the group is their containing block, so they cannot escape an app's scroll box (#132).\n    position: \"relative\",\n    display: \"grid\",\n    ...shorthands.gap(tokens.spacingElement3),\n  },\n  item: {\n    ...nativeControl,\n    boxSizing: \"border-box\",\n    display: \"inline-flex\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    position: \"relative\",\n    aspectRatio: \"1 / 1\",\n    width: \"1rem\",\n    height: \"1rem\",\n    flexShrink: 0,\n    borderRadius: \"9999px\",\n    ...shorthands.border(\"1px\", \"solid\", tokens.accentA7),\n    backgroundColor: tokens.accentSoft,\n    color: tokens.accentOnSoft,\n    // Tailwind `shadow-xs` — literal per CONVENTIONS B7\n    boxShadow: \"0 1px 2px 0 #0000000d\",\n    transitionProperty: \"color, box-shadow\",\n    transitionDuration: \"150ms\",\n    transitionTimingFunction: \"cubic-bezier(0.4, 0, 0.2, 1)\",\n    \"@media (prefers-reduced-motion: reduce)\": {\n      transitionDuration: \"0.01ms\",\n    },\n    \":focus-visible\": {\n      outlineOffset: \"2px\",\n      outlineWidth: \"2px\",\n      outlineStyle: \"solid\",\n      outlineColor: tokens.focusRing,\n    },\n    \"&[data-disabled]\": {\n      cursor: \"not-allowed\",\n      backgroundColor: tokens.grayA3,\n      ...shorthands.borderColor(\"transparent\"),\n    },\n    \"&[data-checked]\": {\n      backgroundColor: tokens.accentSolid,\n      color: tokens.accentContrast,\n    },\n    \"&[data-checked][data-disabled]\": {\n      backgroundColor: tokens.grayA3,\n    },\n    \"&[aria-invalid='true'], &[data-invalid]\": {\n      backgroundColor: tokens.errorSoft,\n      ...shorthands.borderColor(tokens.errorA8),\n      outlineColor: tokens.focusRing,\n    },\n    \"&[data-checked][aria-invalid='true'], &[data-checked][data-invalid]\": {\n      backgroundColor: tokens.errorA10,\n      ...shorthands.borderColor(\"transparent\"),\n    },\n  },\n  indicator: {\n    ...boxModel,\n    position: \"relative\",\n    display: \"flex\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    width: \"100%\",\n    height: \"100%\",\n  },\n  icon: {\n    ...boxModel,\n    color: tokens.accentContrast,\n    position: \"absolute\",\n    top: \"50%\",\n    left: \"50%\",\n    width: \"0.5rem\",\n    height: \"0.5rem\",\n    transform: \"translate(-50%, -50%)\",\n    pointerEvents: \"none\",\n  },\n})\n\n/**\n * What `onValueChange` receives as its second argument: Base UI's change details, declared in\n * Zenith so that none of Base UI's internals reach the published declarations, where TypeScript 4\n * cannot parse them.\n */\nexport type RadioGroupChangeDetails = {\n  /** Why the value changed. Base UI reports every radio group change as `none`. */\n  reason: \"none\"\n  /** The native event behind the change. */\n  event: Event\n  /** Keeps the group's current value. */\n  cancel: () => void\n  /** Lets the event propagate where the group would otherwise stop it. */\n  allowPropagation: () => void\n  isCanceled: boolean\n  isPropagationAllowed: boolean\n  /** The element that caused the change, if any. */\n  trigger: Element | undefined\n}\n\ntype RadioGroupRootProps = {\n  /**\n   * The controlled value of the radio item that should be currently selected.\n   *\n   * To render an uncontrolled radio group, use the `defaultValue` prop instead.\n   */\n  value?: string | null | undefined\n  /** The value of the radio item that should be initially selected. */\n  defaultValue?: string | undefined\n  /** Event handler called when the value changes. */\n  onValueChange?:\n    ((value: string, eventDetails: RadioGroupChangeDetails) => void) | undefined\n  /** Whether the component should ignore user interaction. */\n  disabled?: boolean | undefined\n  /** Whether the user must choose a value before submitting a form. */\n  required?: boolean | undefined\n  /** Identifies the field when a form is submitted. */\n  name?: string | undefined\n  /**\n   * The axis the arrow keys move along. When set, only that axis' keys move between the options\n   * (Up and Down for `vertical`) and it is restated as `aria-orientation`. Unset, all four work.\n   */\n  orientation?: RadioGroupOrientation | undefined\n  /** The reading direction, which decides what Left and Right mean. */\n  dir?: \"ltr\" | \"rtl\" | undefined\n  /** Whether the arrow keys wrap from the last option to the first and back. Defaults to `true`. */\n  loop?: boolean | undefined\n  /** Renders the single child element as the group, merging the group's props and behaviour onto it. */\n  asChild?: boolean | undefined\n}\n\nexport type RadioGroupProps = Omit<\n  React.ComponentPropsWithRef<\"div\">,\n  keyof RadioGroupRootProps\n> &\n  RadioGroupRootProps\n\n// A single child can arrive wrapped in a one-element array depending on the JSX runtime, which\n// Radix's Slot normalised.\nfunction onlySlotChild(children: React.ReactNode) {\n  const elements = React.Children.toArray(children).filter(React.isValidElement)\n  return elements.length === 1 ? elements[0] : undefined\n}\n\nexport const RadioGroup = React.forwardRef<HTMLDivElement, RadioGroupProps>(\n  function RadioGroup({ className, asChild, children, ...props }, ref) {\n    const styles = useStyles()\n    const child = asChild ? onlySlotChild(children) : undefined\n\n    return (\n      <RadioGroupBase\n        ref={ref}\n        data-slot=\"radio-group\"\n        {...{ [SLOT_ATTR]: \"radio-group\" }}\n        className={mergeClasses(styles.group, className)}\n        // Base UI types the group's handlers for its <div>, which is the element rendered; the\n        // caller's div-typed handlers receive exactly the events they declare.\n        {...(props as RadioGroupBaseProps)}\n        {...(child ? { render: child } : { children })}\n      />\n    )\n  }\n)\n\ntype RadioGroupItemOwnProps = {\n  /** The value this item submits and selects the group with. */\n  value: string\n  /** Whether the item should ignore user interaction. */\n  disabled?: boolean | undefined\n  /** Whether the user must choose this item before submitting a form. */\n  required?: boolean | undefined\n  /**\n   * @deprecated Has no effect. The group decides which item is checked, as it did on Radix, which\n   * ignored this prop.\n   */\n  checked?: boolean | undefined\n  /**\n   * @deprecated Has no effect. The indicator is the item's only child, so on Radix this rendered\n   * the indicator as the item rather than an element of yours. Remove it.\n   */\n  asChild?: boolean | undefined\n}\n\n// `name` belongs to the group, which submits it, so it is not an item prop, as on Radix.\nexport type RadioGroupItemProps = Omit<\n  React.ComponentPropsWithRef<\"button\">,\n  keyof RadioGroupItemOwnProps | \"name\"\n> &\n  RadioGroupItemOwnProps\n\n// Base UI renders a <span> by default and moves the caller's id onto its hidden input. A native\n// button keeps the id, the HTMLButtonElement ref, native disabled and <label for> as Radix had them.\nconst ITEM_ELEMENT = <button type=\"button\" />\n\nexport const RadioGroupItem = React.forwardRef<\n  HTMLButtonElement,\n  RadioGroupItemProps\n>(function RadioGroupItem(\n  { className, children, asChild: _asChild, checked: _checked, ...props },\n  ref\n) {\n  const styles = useStyles()\n\n  return (\n    <Radio.Root\n      ref={ref}\n      nativeButton\n      render={ITEM_ELEMENT}\n      data-slot=\"radio-group-item\"\n      {...{ [SLOT_ATTR]: \"radio-group-item\" }}\n      className={mergeClasses(styles.item, className)}\n      // Base UI types the item's handlers for its default <span>; the element is the button above.\n      {...(props as Radio.Root.Props<string>)}\n    >\n      <Radio.Indicator\n        data-slot=\"radio-group-indicator\"\n        {...{ [SLOT_ATTR]: \"radio-group-indicator\" }}\n        className={styles.indicator}\n      >\n        <CircleIcon className={styles.icon} />\n      </Radio.Indicator>\n      {children}\n    </Radio.Root>\n  )\n})\n"],"names":["CircleIcon","React","props","ref","jsx","useStyles","makeZenithStyles","shorthands","tokens.spacingElement3","nativeControl","tokens.accentA7","tokens.accentSoft","tokens.accentOnSoft","tokens.focusRing","tokens.grayA3","tokens.accentSolid","tokens.accentContrast","tokens.errorSoft","tokens.errorA8","tokens.errorA10","boxModel","onlySlotChild","children","elements","RadioGroup","className","asChild","styles","child","RadioGroupBase","SLOT_ATTR","mergeClasses","ITEM_ELEMENT","RadioGroupItem","_asChild","_checked","jsxs","Radio"],"mappings":"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"}