@zyncat/ui 0.11.0 → 0.12.0

package/dist/radio-group.js

@@ -1,20 +1,19 @@
-'use client';import { useGlide, GlidePill } from './chunk-WM5J5TDI.js';
-import { Motion } from './chunk-2QWJ6FAX.js';
-import './chunk-XWUWYSCT.js';
-import './chunk-YGCVWGUG.js';
-import { IconSlot } from './chunk-2ERBBFZS.js';
-import { Icon } from './chunk-3SBCBYB7.js';
-import { UIMotion } from './chunk-S5ZTZANS.js';
-import { Collapse } from './chunk-7SZCJ7WI.js';
-import './chunk-VTJTGVZZ.js';
+'use client';import { useGlide, GlidePill } from './chunk-CNWTIMIP.js';
+import { Motion } from './chunk-5PZ43DCG.js';
+import './chunk-M43IOM5C.js';
+import './chunk-IJS7TPGV.js';
+import { IconSlot } from './chunk-3MPF7FZV.js';
+import { Icon } from './chunk-EAI4POPB.js';
+import { UIMotion } from './chunk-7IZJERGA.js';
+import { Collapse } from './chunk-45R4Z5XN.js';
+import './chunk-DMX2F6B4.js';
 import { cx } from './chunk-QGNC7LH5.js';
 import './radio-group.css';
-import { useId, useState, useRef } from 'react';
+import { useId, useRef } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 var SM = UIMotion;
 var LAYOUT_FLIP = { timing: SM.t.layout };
-var HOVER_FLIP = { scale: false, timing: SM.t.layout };
 function RadioGroup({
   name,
   value,
@@ -34,7 +33,6 @@ function RadioGroup({
   htmlProps
 }) {
   const groupId = useId();
-  const [hovered, setHovered] = useState(null);
   const optionsRef = useRef(null);
   const glide = useGlide(optionsRef);
   const cls = cx(
@@ -46,90 +44,67 @@ function RadioGroup({
     className
   );
   return /* @__PURE__ */ jsxs("fieldset", { className: cls, style, "aria-invalid": error ? true : void 0, ...htmlProps, children: [
-    label && /* @__PURE__ */ jsxs("div", { className: "rg__head", children: [
-      /* @__PURE__ */ jsxs("legend", { className: "rg__label", children: [
-        label,
-        required && /* @__PURE__ */ jsx("span", { className: "rg__req", "aria-hidden": "true", children: "*" }),
-        optional && /* @__PURE__ */ jsx("span", { className: "rg__optional", children: "(optional)" })
-      ] }),
-      helper && /* @__PURE__ */ jsx("p", { className: "rg__helper", children: helper })
+    label && /* @__PURE__ */ jsxs("legend", { className: "rg__label", children: [
+      label,
+      required && /* @__PURE__ */ jsx("span", { className: "rg__req", "aria-hidden": "true", children: "*" }),
+      optional && /* @__PURE__ */ jsx("span", { className: "rg__optional", children: "(optional)" })
+    ] }),
+    label && helper && /* @__PURE__ */ jsx("p", { className: "rg__helper", children: helper }),
+    /* @__PURE__ */ jsxs("div", { className: "rg__options", ref: optionsRef, onPointerLeave: () => glide.leave(), children: [
+      variant === "rows" && /* @__PURE__ */ jsx(GlidePill, { className: "rg__hover", glide }),
+      options.map((opt) => {
+        const selected = opt.value === value;
+        const isDisabled = disabled || opt.disabled;
+        return /* @__PURE__ */ jsxs(
+          "label",
+          {
+            className: cx("rg-opt", selected && "is-selected", isDisabled && "is-disabled"),
+            onPointerEnter: isDisabled || variant !== "rows" ? void 0 : (e) => glide.enter(e.currentTarget),
+            children: [
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  className: "rg-opt__input",
+                  type: "radio",
+                  name,
+                  value: opt.value,
+                  checked: selected,
+                  required,
+                  disabled: isDisabled,
+                  onChange: () => onChange && onChange(opt.value)
+                }
+              ),
+              variant === "cards" && selected && /* @__PURE__ */ jsx(
+                Motion,
+                {
+                  as: "span",
+                  layoutId: groupId + ":card-fill",
+                  layoutTransition: LAYOUT_FLIP,
+                  className: "rg__card-fill",
+                  "aria-hidden": "true"
+                }
+              ),
+              variant === "cards" && opt.icon && /* @__PURE__ */ jsx("span", { className: "rg-opt__icon", children: /* @__PURE__ */ jsx(IconSlot, { children: opt.icon }) }),
+              /* @__PURE__ */ jsx("span", { className: "rg-opt__control", children: /* @__PURE__ */ jsx("span", { className: "rg-opt__dot", children: selected && /* @__PURE__ */ jsx(
+                Motion,
+                {
+                  as: "span",
+                  layoutId: groupId + ":marker",
+                  layoutTransition: LAYOUT_FLIP,
+                  className: "rg__marker",
+                  "aria-hidden": "true"
+                }
+              ) }) }),
+              /* @__PURE__ */ jsxs("span", { className: "rg-opt__body", children: [
+                /* @__PURE__ */ jsx("span", { className: "rg-opt__label", children: opt.label }),
+                opt.description && /* @__PURE__ */ jsx("span", { className: "rg-opt__desc", children: opt.description })
+              ] })
+            ]
+          },
+          opt.value
+        );
+      })
     ] }),
-    /* @__PURE__ */ jsxs(
-      "div",
-      {
-        className: "rg__options",
-        ref: optionsRef,
-        onPointerLeave: () => {
-          glide.leave();
-          setHovered(null);
-        },
-        children: [
-          variant === "rows" && /* @__PURE__ */ jsx(GlidePill, { className: "rg__hover", glide }),
-          options.map((opt) => {
-            const selected = opt.value === value;
-            const isDisabled = disabled || opt.disabled;
-            return /* @__PURE__ */ jsxs(
-              "label",
-              {
-                className: cx("rg-opt", selected && "is-selected", isDisabled && "is-disabled"),
-                onPointerEnter: isDisabled ? void 0 : variant === "rows" ? (e) => glide.enter(e.currentTarget) : () => setHovered(opt.value),
-                children: [
-                  /* @__PURE__ */ jsx(
-                    "input",
-                    {
-                      className: "rg-opt__input",
-                      type: "radio",
-                      name,
-                      value: opt.value,
-                      checked: selected,
-                      required,
-                      disabled: isDisabled,
-                      onChange: () => onChange && onChange(opt.value)
-                    }
-                  ),
-                  variant === "cards" && hovered === opt.value && !selected && /* @__PURE__ */ jsx(
-                    Motion,
-                    {
-                      as: "span",
-                      layoutId: groupId + ":card-hover",
-                      layoutTransition: HOVER_FLIP,
-                      className: "rg__card-hover",
-                      "aria-hidden": "true"
-                    }
-                  ),
-                  variant === "cards" && selected && /* @__PURE__ */ jsx(
-                    Motion,
-                    {
-                      as: "span",
-                      layoutId: groupId + ":card-fill",
-                      layoutTransition: LAYOUT_FLIP,
-                      className: "rg__card-fill",
-                      "aria-hidden": "true"
-                    }
-                  ),
-                  variant === "cards" && opt.icon && /* @__PURE__ */ jsx("span", { className: "rg-opt__icon", children: /* @__PURE__ */ jsx(IconSlot, { children: opt.icon }) }),
-                  /* @__PURE__ */ jsx("span", { className: "rg-opt__control", children: /* @__PURE__ */ jsx("span", { className: "rg-opt__dot", children: selected && /* @__PURE__ */ jsx(
-                    Motion,
-                    {
-                      as: "span",
-                      layoutId: groupId + ":marker",
-                      layoutTransition: LAYOUT_FLIP,
-                      className: "rg__marker",
-                      "aria-hidden": "true"
-                    }
-                  ) }) }),
-                  /* @__PURE__ */ jsxs("span", { className: "rg-opt__body", children: [
-                    /* @__PURE__ */ jsx("span", { className: "rg-opt__label", children: opt.label }),
-                    opt.description && /* @__PURE__ */ jsx("span", { className: "rg-opt__desc", children: opt.description })
-                  ] })
-                ]
-              },
-              opt.value
-            );
-          })
-        ]
-      }
-    ),
     /* @__PURE__ */ jsx(Collapse, { open: !!error, fade: true, className: "rg__msg-wrap", children: /* @__PURE__ */ jsxs("div", { className: "rg__msg", children: [
       /* @__PURE__ */ jsx(Icon, { name: "warning-circle", size: "sm", weight: "fill" }),
       error

package/dist/radio-group.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/primitives/radio-group/RadioGroup.tsx"],"names":[],"mappings":"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","file":"radio-group.js","sourcesContent":["'use client';\n\nimport './radio-group.css';\nimport { useId, useRef, useState, type CSSProperties, type FieldsetHTMLAttributes, type ReactNode } from 'react';\nimport { Icon } from '../../internal/icon/Icon';\nimport { IconSlot } from '../../internal/icon/IconSlot';\nimport { Collapse } from '../collapse/Collapse';\nimport { GlidePill, useGlide } from '../../../motion/glide';\nimport { Motion } from '../../../motion/element';\nimport { UIMotion } from '../../../tokens/motion-tokens';\nimport type { DataAttributes } from '../../../dom-props';\nimport { cx } from '../../internal/utils/cx';\nimport type { FieldRequirementProps } from '../input/field-chrome';\n\nconst SM = UIMotion;\nconst LAYOUT_FLIP = { timing: SM.t.layout };\nconst HOVER_FLIP = { scale: false, timing: SM.t.layout };\n\nexport interface RadioOption {\n  /** The stored value - what `onChange` returns and `value` matches. */\n  value: string;\n  /** Visible label (sentence case). */\n  label: ReactNode;\n  /** Optional secondary line (muted) explaining the choice. */\n  description?: ReactNode;\n  /** Leading icon - your own node. CARDS only; ignored for rows. */\n  icon?: ReactNode;\n  /** Disable just this option. */\n  disabled?: boolean;\n}\n\ninterface RadioGroupOwnProps extends FieldRequirementProps {\n  /** Shared radio name - ties the options into one keyboard group. Required. */\n  name: string;\n  /** The selected value (controlled). */\n  value?: string;\n  /** Called with the chosen option's `value`. */\n  onChange?: (value: string) => void;\n  /** Group label / legend (sentence case). */\n  label?: ReactNode;\n  /** Persistent context shown under the legend, before the options. */\n  helper?: ReactNode;\n  /** Group-level error (e.g. required). Sets the error state + reveals the message. */\n  error?: ReactNode;\n  /** Skin: quiet rows (default) or selectable cards. */\n  variant?: 'rows' | 'cards';\n  /** Lay options out in a line instead of a stack. */\n  orientation?: 'vertical' | 'horizontal';\n  /** Control size: sm (dot 16) - md (default, dot 18). */\n  size?: 'sm' | 'md';\n  /** Disable the whole group. */\n  disabled?: boolean;\n  /** The options to choose between. */\n  options: RadioOption[];\n  /** Extra class(es) merged onto the root element. */\n  className?: string;\n  /** Inline styles merged onto the root element. */\n  style?: CSSProperties;\n}\n\nexport interface RadioGroupProps extends RadioGroupOwnProps {\n  /** Standard <fieldset> attributes (aria-*, data-*, ...) forwarded to the root. */\n  htmlProps?: Omit<FieldsetHTMLAttributes<HTMLFieldSetElement>, keyof RadioGroupOwnProps> & DataAttributes;\n}\n\nexport function RadioGroup({\n  name,\n  value,\n  onChange,\n  label,\n  helper,\n  error,\n  required,\n  optional,\n  variant = 'rows',\n  orientation = 'vertical',\n  size = 'md',\n  disabled,\n  options = [],\n  className = '',\n  style,\n  htmlProps,\n}: RadioGroupProps) {\n  const groupId = useId();\n  const [hovered, setHovered] = useState<string | null>(null);\n  const optionsRef = useRef<HTMLDivElement>(null);\n  const glide = useGlide(optionsRef);\n\n  const cls = cx(\n    'rg',\n    variant === 'cards' && 'rg--cards',\n    orientation === 'horizontal' && 'rg--horizontal',\n    size === 'sm' && 'rg--sm',\n    error && 'is-error',\n    className,\n  );\n\n  return (\n    <fieldset className={cls} style={style} aria-invalid={error ? true : undefined} {...htmlProps}>\n      {label && (\n        <div className=\"rg__head\">\n          <legend className=\"rg__label\">\n            {label}\n            {required && (\n              <span className=\"rg__req\" aria-hidden=\"true\">\n                *\n              </span>\n            )}\n            {optional && <span className=\"rg__optional\">(optional)</span>}\n          </legend>\n          {helper && <p className=\"rg__helper\">{helper}</p>}\n        </div>\n      )}\n\n      <div\n        className=\"rg__options\"\n        ref={optionsRef}\n        onPointerLeave={() => {\n          glide.leave();\n          setHovered(null);\n        }}\n      >\n        {variant === 'rows' && <GlidePill className=\"rg__hover\" glide={glide} />}\n        {options.map((opt) => {\n          const selected = opt.value === value;\n          const isDisabled = disabled || opt.disabled;\n          return (\n            <label\n              key={opt.value}\n              className={cx('rg-opt', selected && 'is-selected', isDisabled && 'is-disabled')}\n              onPointerEnter={\n                isDisabled\n                  ? undefined\n                  : variant === 'rows'\n                    ? (e) => glide.enter(e.currentTarget)\n                    : () => setHovered(opt.value)\n              }\n            >\n              <input\n                className=\"rg-opt__input\"\n                type=\"radio\"\n                name={name}\n                value={opt.value}\n                checked={selected}\n                required={required}\n                disabled={isDisabled}\n                onChange={() => onChange && onChange(opt.value)}\n              />\n              {variant === 'cards' && hovered === opt.value && !selected && (\n                <Motion\n                  as=\"span\"\n                  layoutId={groupId + ':card-hover'}\n                  layoutTransition={HOVER_FLIP}\n                  className=\"rg__card-hover\"\n                  aria-hidden=\"true\"\n                />\n              )}\n              {variant === 'cards' && selected && (\n                <Motion\n                  as=\"span\"\n                  layoutId={groupId + ':card-fill'}\n                  layoutTransition={LAYOUT_FLIP}\n                  className=\"rg__card-fill\"\n                  aria-hidden=\"true\"\n                />\n              )}\n              {variant === 'cards' && opt.icon && (\n                <span className=\"rg-opt__icon\">\n                  <IconSlot>{opt.icon}</IconSlot>\n                </span>\n              )}\n              <span className=\"rg-opt__control\">\n                <span className=\"rg-opt__dot\">\n                  {selected && (\n                    <Motion\n                      as=\"span\"\n                      layoutId={groupId + ':marker'}\n                      layoutTransition={LAYOUT_FLIP}\n                      className=\"rg__marker\"\n                      aria-hidden=\"true\"\n                    />\n                  )}\n                </span>\n              </span>\n              <span className=\"rg-opt__body\">\n                <span className=\"rg-opt__label\">{opt.label}</span>\n                {opt.description && <span className=\"rg-opt__desc\">{opt.description}</span>}\n              </span>\n            </label>\n          );\n        })}\n      </div>\n\n      <Collapse open={!!error} fade className=\"rg__msg-wrap\">\n        <div className=\"rg__msg\">\n          <Icon name=\"warning-circle\" size=\"sm\" weight=\"fill\" />\n          {error}\n        </div>\n      </Collapse>\n    </fieldset>\n  );\n}\n"]}
+{"version":3,"sources":["../src/components/primitives/radio-group/RadioGroup.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;AAgBA,IAAM,EAAA,GAAK,QAAA;AACX,IAAM,WAAA,GAAc,EAAE,MAAA,EAAQ,EAAA,CAAG,EAAE,MAAA,EAAO;AAiDnC,SAAS,UAAA,CAAW;AAAA,EACzB,IAAA;AAAA,EACA,KAAA;AAAA,EACA,QAAA;AAAA,EACA,KAAA;AAAA,EACA,MAAA;AAAA,EACA,KAAA;AAAA,EACA,QAAA;AAAA,EACA,QAAA;AAAA,EACA,OAAA,GAAU,MAAA;AAAA,EACV,WAAA,GAAc,UAAA;AAAA,EACd,IAAA,GAAO,IAAA;AAAA,EACP,QAAA;AAAA,EACA,UAAU,EAAC;AAAA,EACX,SAAA,GAAY,EAAA;AAAA,EACZ,KAAA;AAAA,EACA;AACF,CAAA,EAAoB;AAClB,EAAA,MAAM,UAAU,KAAA,EAAM;AACtB,EAAA,MAAM,UAAA,GAAa,OAAuB,IAAI,CAAA;AAC9C,EAAA,MAAM,KAAA,GAAQ,SAAS,UAAU,CAAA;AAEjC,EAAA,MAAM,GAAA,GAAM,EAAA;AAAA,IACV,IAAA;AAAA,IACA,YAAY,OAAA,IAAW,WAAA;AAAA,IACvB,gBAAgB,YAAA,IAAgB,gBAAA;AAAA,IAChC,SAAS,IAAA,IAAQ,QAAA;AAAA,IACjB,KAAA,IAAS,UAAA;AAAA,IACT;AAAA,GACF;AAEA,EAAA,uBACE,IAAA,CAAC,UAAA,EAAA,EAAS,SAAA,EAAW,GAAA,EAAK,KAAA,EAAc,gBAAc,KAAA,GAAQ,IAAA,GAAO,MAAA,EAAY,GAAG,SAAA,EACjF,QAAA,EAAA;AAAA,IAAA,KAAA,oBACC,IAAA,CAAC,QAAA,EAAA,EAAO,SAAA,EAAU,WAAA,EACf,QAAA,EAAA;AAAA,MAAA,KAAA;AAAA,MACA,4BACC,GAAA,CAAC,MAAA,EAAA,EAAK,WAAU,SAAA,EAAU,aAAA,EAAY,QAAO,QAAA,EAAA,GAAA,EAE7C,CAAA;AAAA,MAED,QAAA,oBAAY,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,gBAAe,QAAA,EAAA,YAAA,EAAU;AAAA,KAAA,EACxD,CAAA;AAAA,IAED,SAAS,MAAA,oBAAU,GAAA,CAAC,GAAA,EAAA,EAAE,SAAA,EAAU,cAAc,QAAA,EAAA,MAAA,EAAO,CAAA;AAAA,oBAEtD,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,aAAA,EAAc,GAAA,EAAK,YAAY,cAAA,EAAgB,MAAM,KAAA,CAAM,KAAA,EAAM,EAC7E,QAAA,EAAA;AAAA,MAAA,OAAA,KAAY,MAAA,oBAAU,GAAA,CAAC,SAAA,EAAA,EAAU,SAAA,EAAU,aAAY,KAAA,EAAc,CAAA;AAAA,MACrE,OAAA,CAAQ,GAAA,CAAI,CAAC,GAAA,KAAQ;AACpB,QAAA,MAAM,QAAA,GAAW,IAAI,KAAA,KAAU,KAAA;AAC/B,QAAA,MAAM,UAAA,GAAa,YAAY,GAAA,CAAI,QAAA;AACnC,QAAA,uBACE,IAAA;AAAA,UAAC,OAAA;AAAA,UAAA;AAAA,YAEC,WAAW,EAAA,CAAG,QAAA,EAAU,QAAA,IAAY,aAAA,EAAe,cAAc,aAAa,CAAA;AAAA,YAC9E,cAAA,EAAgB,UAAA,IAAc,OAAA,KAAY,MAAA,GAAS,MAAA,GAAY,CAAC,CAAA,KAAM,KAAA,CAAM,KAAA,CAAM,CAAA,CAAE,aAAa,CAAA;AAAA,YAEjG,QAAA,EAAA;AAAA,8BAAA,GAAA;AAAA,gBAAC,OAAA;AAAA,gBAAA;AAAA,kBACC,SAAA,EAAU,eAAA;AAAA,kBACV,IAAA,EAAK,OAAA;AAAA,kBACL,IAAA;AAAA,kBACA,OAAO,GAAA,CAAI,KAAA;AAAA,kBACX,OAAA,EAAS,QAAA;AAAA,kBACT,QAAA;AAAA,kBACA,QAAA,EAAU,UAAA;AAAA,kBACV,QAAA,EAAU,MAAM,QAAA,IAAY,QAAA,CAAS,IAAI,KAAK;AAAA;AAAA,eAChD;AAAA,cACC,OAAA,KAAY,WAAW,QAAA,oBACtB,GAAA;AAAA,gBAAC,MAAA;AAAA,gBAAA;AAAA,kBACC,EAAA,EAAG,MAAA;AAAA,kBACH,UAAU,OAAA,GAAU,YAAA;AAAA,kBACpB,gBAAA,EAAkB,WAAA;AAAA,kBAClB,SAAA,EAAU,eAAA;AAAA,kBACV,aAAA,EAAY;AAAA;AAAA,eACd;AAAA,cAED,OAAA,KAAY,OAAA,IAAW,GAAA,CAAI,IAAA,oBAC1B,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,cAAA,EACd,QAAA,kBAAA,GAAA,CAAC,QAAA,EAAA,EAAU,QAAA,EAAA,GAAA,CAAI,IAAA,EAAK,CAAA,EACtB,CAAA;AAAA,8BAEF,GAAA,CAAC,UAAK,SAAA,EAAU,iBAAA,EACd,8BAAC,MAAA,EAAA,EAAK,SAAA,EAAU,eACb,QAAA,EAAA,QAAA,oBACC,GAAA;AAAA,gBAAC,MAAA;AAAA,gBAAA;AAAA,kBACC,EAAA,EAAG,MAAA;AAAA,kBACH,UAAU,OAAA,GAAU,SAAA;AAAA,kBACpB,gBAAA,EAAkB,WAAA;AAAA,kBAClB,SAAA,EAAU,YAAA;AAAA,kBACV,aAAA,EAAY;AAAA;AAAA,iBAGlB,CAAA,EACF,CAAA;AAAA,8BACA,IAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,cAAA,EACd,QAAA,EAAA;AAAA,gCAAA,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,eAAA,EAAiB,QAAA,EAAA,GAAA,CAAI,KAAA,EAAM,CAAA;AAAA,gBAC1C,IAAI,WAAA,oBAAe,GAAA,CAAC,UAAK,SAAA,EAAU,cAAA,EAAgB,cAAI,WAAA,EAAY;AAAA,eAAA,EACtE;AAAA;AAAA,WAAA;AAAA,UA5CK,GAAA,CAAI;AAAA,SA6CX;AAAA,MAEJ,CAAC;AAAA,KAAA,EACH,CAAA;AAAA,oBAEA,GAAA,CAAC,QAAA,EAAA,EAAS,IAAA,EAAM,CAAC,CAAC,KAAA,EAAO,IAAA,EAAI,IAAA,EAAC,SAAA,EAAU,cAAA,EACtC,QAAA,kBAAA,IAAA,CAAC,KAAA,EAAA,EAAI,WAAU,SAAA,EACb,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,QAAK,IAAA,EAAK,gBAAA,EAAiB,IAAA,EAAK,IAAA,EAAK,QAAO,MAAA,EAAO,CAAA;AAAA,MACnD;AAAA,KAAA,EACH,CAAA,EACF;AAAA,GAAA,EACF,CAAA;AAEJ","file":"radio-group.js","sourcesContent":["'use client';\n\nimport './radio-group.css';\n\nimport { useId, useRef, type CSSProperties, type FieldsetHTMLAttributes, type ReactNode } from 'react';\n\nimport type { DataAttributes } from '../../../dom-props';\nimport { Motion } from '../../../motion/element';\nimport { GlidePill, useGlide } from '../../../motion/glide';\nimport { UIMotion } from '../../../tokens/motion-tokens';\nimport { Icon } from '../../internal/icon/Icon';\nimport { IconSlot } from '../../internal/icon/IconSlot';\nimport { cx } from '../../internal/utils/cx';\nimport { Collapse } from '../collapse/Collapse';\nimport type { FieldRequirementProps } from '../input/field-chrome';\n\nconst SM = UIMotion;\nconst LAYOUT_FLIP = { timing: SM.t.layout };\n\nexport interface RadioOption {\n  /** The stored value - what `onChange` returns and `value` matches. */\n  value: string;\n  /** Visible label (sentence case). */\n  label: ReactNode;\n  /** Optional secondary line (muted) explaining the choice. */\n  description?: ReactNode;\n  /** Leading icon - your own node. CARDS only; ignored for rows. */\n  icon?: ReactNode;\n  /** Disable just this option. */\n  disabled?: boolean;\n}\n\ninterface RadioGroupOwnProps extends FieldRequirementProps {\n  /** Shared radio name - ties the options into one keyboard group. Required. */\n  name: string;\n  /** The selected value (controlled). */\n  value?: string;\n  /** Called with the chosen option's `value`. */\n  onChange?: (value: string) => void;\n  /** Group label / legend (sentence case). */\n  label?: ReactNode;\n  /** Persistent context shown under the legend, before the options. */\n  helper?: ReactNode;\n  /** Group-level error (e.g. required). Sets the error state + reveals the message. */\n  error?: ReactNode;\n  /** Skin: quiet rows (default) or selectable cards. */\n  variant?: 'rows' | 'cards';\n  /** Lay options out in a line instead of a stack. */\n  orientation?: 'vertical' | 'horizontal';\n  /** Control size: sm (dot 16) - md (default, dot 18). */\n  size?: 'sm' | 'md';\n  /** Disable the whole group. */\n  disabled?: boolean;\n  /** The options to choose between. */\n  options: RadioOption[];\n  /** Extra class(es) merged onto the root element. */\n  className?: string;\n  /** Inline styles merged onto the root element. */\n  style?: CSSProperties;\n}\n\nexport interface RadioGroupProps extends RadioGroupOwnProps {\n  /** Standard <fieldset> attributes (aria-*, data-*, ...) forwarded to the root. */\n  htmlProps?: Omit<FieldsetHTMLAttributes<HTMLFieldSetElement>, keyof RadioGroupOwnProps> & DataAttributes;\n}\n\nexport function RadioGroup({\n  name,\n  value,\n  onChange,\n  label,\n  helper,\n  error,\n  required,\n  optional,\n  variant = 'rows',\n  orientation = 'vertical',\n  size = 'md',\n  disabled,\n  options = [],\n  className = '',\n  style,\n  htmlProps,\n}: RadioGroupProps) {\n  const groupId = useId();\n  const optionsRef = useRef<HTMLDivElement>(null);\n  const glide = useGlide(optionsRef);\n\n  const cls = cx(\n    'rg',\n    variant === 'cards' && 'rg--cards',\n    orientation === 'horizontal' && 'rg--horizontal',\n    size === 'sm' && 'rg--sm',\n    error && 'is-error',\n    className,\n  );\n\n  return (\n    <fieldset className={cls} style={style} aria-invalid={error ? true : undefined} {...htmlProps}>\n      {label && (\n        <legend className=\"rg__label\">\n          {label}\n          {required && (\n            <span className=\"rg__req\" aria-hidden=\"true\">\n              *\n            </span>\n          )}\n          {optional && <span className=\"rg__optional\">(optional)</span>}\n        </legend>\n      )}\n      {label && helper && <p className=\"rg__helper\">{helper}</p>}\n\n      <div className=\"rg__options\" ref={optionsRef} onPointerLeave={() => glide.leave()}>\n        {variant === 'rows' && <GlidePill className=\"rg__hover\" glide={glide} />}\n        {options.map((opt) => {\n          const selected = opt.value === value;\n          const isDisabled = disabled || opt.disabled;\n          return (\n            <label\n              key={opt.value}\n              className={cx('rg-opt', selected && 'is-selected', isDisabled && 'is-disabled')}\n              onPointerEnter={isDisabled || variant !== 'rows' ? undefined : (e) => glide.enter(e.currentTarget)}\n            >\n              <input\n                className=\"rg-opt__input\"\n                type=\"radio\"\n                name={name}\n                value={opt.value}\n                checked={selected}\n                required={required}\n                disabled={isDisabled}\n                onChange={() => onChange && onChange(opt.value)}\n              />\n              {variant === 'cards' && selected && (\n                <Motion\n                  as=\"span\"\n                  layoutId={groupId + ':card-fill'}\n                  layoutTransition={LAYOUT_FLIP}\n                  className=\"rg__card-fill\"\n                  aria-hidden=\"true\"\n                />\n              )}\n              {variant === 'cards' && opt.icon && (\n                <span className=\"rg-opt__icon\">\n                  <IconSlot>{opt.icon}</IconSlot>\n                </span>\n              )}\n              <span className=\"rg-opt__control\">\n                <span className=\"rg-opt__dot\">\n                  {selected && (\n                    <Motion\n                      as=\"span\"\n                      layoutId={groupId + ':marker'}\n                      layoutTransition={LAYOUT_FLIP}\n                      className=\"rg__marker\"\n                      aria-hidden=\"true\"\n                    />\n                  )}\n                </span>\n              </span>\n              <span className=\"rg-opt__body\">\n                <span className=\"rg-opt__label\">{opt.label}</span>\n                {opt.description && <span className=\"rg-opt__desc\">{opt.description}</span>}\n              </span>\n            </label>\n          );\n        })}\n      </div>\n\n      <Collapse open={!!error} fade className=\"rg__msg-wrap\">\n        <div className=\"rg__msg\">\n          <Icon name=\"warning-circle\" size=\"sm\" weight=\"fill\" />\n          {error}\n        </div>\n      </Collapse>\n    </fieldset>\n  );\n}\n"]}