@protonradio/proton-ui 0.12.0 → 0.12.1

package/dist/components/ButtonGroup/ButtonGroup.cjs.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("../../node_modules/react/jsx-runtime.cjs.js"),m=require("react"),s=require("radix-ui");;/* empty css                     */function u({name:i="ButtonGroup",value:t,defaultValue:e,onChange:o,children:d,"data-testid":p}){const r=t!==void 0,[l,c]=m.useState(()=>e||""),G=r?t||"":l;return a.jsxRuntimeExports.jsx(s.RadioGroup.Root,{name:i,value:r?t:void 0,defaultValue:r?void 0:e,onValueChange:n=>{r||c(n),o==null||o(n)},orientation:"horizontal",className:"proton-ButtonGroup","data-value":G||void 0,"data-testid":p||void 0,children:d})}u.displayName="ProtonUIButtonGroup";u.Option=function({value:t,children:e,"data-testid":o}){return a.jsxRuntimeExports.jsx(s.RadioGroup.Item,{value:t,className:"proton-ButtonGroup__option","data-testid":o||void 0,children:e})};exports.ButtonGroup=u;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("../../node_modules/react/jsx-runtime.cjs.js"),x=require("react"),d=require("radix-ui");;/* empty css                     */function a({name:i="ButtonGroup",value:t,defaultValue:o,onChange:e,children:u,"data-testid":l}){const r=t!==void 0,[p,c]=x.useState(()=>o||""),G=r?t||"":p;return s.jsxRuntimeExports.jsx(d.RadioGroup.Root,{name:i,value:r?t:void 0,defaultValue:r?void 0:o,onValueChange:n=>{r||c(n),e==null||e(n)},orientation:"horizontal",className:"proton-ButtonGroup","data-value":G||void 0,"data-testid":l||void 0,"aria-label":i,children:u})}a.displayName="ProtonUIButtonGroup";a.Option=function({value:t,children:o,"data-testid":e}){const u=typeof o=="string"?o:t;return s.jsxRuntimeExports.jsx(d.RadioGroup.Item,{value:t,className:"proton-ButtonGroup__option","data-testid":e||void 0,"aria-label":u,children:o})};exports.ButtonGroup=a;
 //# sourceMappingURL=ButtonGroup.cjs.js.map

package/dist/components/ButtonGroup/ButtonGroup.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonGroup.cjs.js","sources":["../../../src/components/ButtonGroup/ButtonGroup.tsx"],"sourcesContent":["\"use client\";\n\nimport {  useState } from \"react\";\nimport { RadioGroup as RadixRadioGroup } from \"radix-ui\";\n\nimport \"./ButtonGroup.css\";\n\nexport interface ButtonGroupProps {\n  /**\n   * The name of the ButtonGroup.\n   */\n  name?: string;\n  /**\n   * The value of the currently selected option in the ButtonGroup. Providing\n   * this prop causes the component to become controlled.\n   */\n  value?: string;\n  /**\n   * The initially selected value of the ButtonGroup.\n   */\n  defaultValue?: string;\n  /**\n   * Called when the ButtonGroup's selected value changes.\n   */\n  onChange?: (value: string) => void;\n  /**\n   * The ButtonGroup.Option elements to be rendered as the selectable values.\n   */\n  children?: React.ReactNode;\n  /** The test ID for the button group. */\n  \"data-testid\"?: string;\n}\n\n/**\n * A radio button group component that allows selection of a single option from multiple choices.\n *\n * Uses Radix `RadioGroup` for roving focus, arrow-key navigation, and `radiogroup` semantics.\n *\n * API:\n *  - {@link ButtonGroupProps}\n */\nexport function ButtonGroup({name = \"ButtonGroup\", value, defaultValue, onChange, children, \"data-testid\": testId}: ButtonGroupProps) {\n  const isControlled = value !== undefined;\n  const [uncontrolledValue, setUncontrolledValue] = useState(\n    () => defaultValue || \"\"\n  );\n  const dataValue = isControlled ? (value || \"\") : uncontrolledValue;\n\n  return (\n    <RadixRadioGroup.Root\n      name={name}\n      value={isControlled ? value : undefined}\n      defaultValue={isControlled ? undefined : defaultValue}\n      onValueChange={(v) => {\n        if (!isControlled) setUncontrolledValue(v);\n        onChange?.(v);\n      }}\n      orientation=\"horizontal\"\n      className=\"proton-ButtonGroup\"\n      data-value={dataValue || undefined}\n      data-testid={testId || undefined}\n    >\n      {children}\n    </RadixRadioGroup.Root>\n  );\n}\n\nButtonGroup.displayName = \"ProtonUIButtonGroup\";\n\nexport interface ButtonGroupOptionProps {\n  /**\n   * The value of this option. When this option is selected, this value will\n   * become the ButtonGroup's new `selectedValue`.\n   */\n  value: string;\n  /**\n   * The text or component to be rendered as this option's content.\n   */\n  children: React.ReactNode;\n  /** The test ID for the option. */\n  \"data-testid\"?: string;\n}\n\nButtonGroup.Option = function ButtonGroupOption({value, children, \"data-testid\": testId}: ButtonGroupOptionProps) {\n  return (\n    <RadixRadioGroup.Item\n      value={value}\n      className=\"proton-ButtonGroup__option\"\n      data-testid={testId || undefined}\n    >\n      {children}\n    </RadixRadioGroup.Item>\n  );\n};\n"],"names":["ButtonGroup","name","value","defaultValue","onChange","children","testId","isControlled","uncontrolledValue","setUncontrolledValue","useState","dataValue","jsx","RadixRadioGroup","v"],"mappings":"4NAyCO,SAASA,EAAY,CAAC,KAAAC,EAAO,cAAe,MAAAC,EAAO,aAAAC,EAAc,SAAAC,EAAU,SAAAC,EAAU,cAAeC,GAA2B,CACpI,MAAMC,EAAeL,IAAU,OACzB,CAACM,EAAmBC,CAAoB,EAAIC,EAAAA,SAChD,IAAMP,GAAgB,EAAA,EAElBQ,EAAYJ,EAAgBL,GAAS,GAAMM,EAEjD,OACEI,EAAAA,kBAAAA,IAACC,EAAAA,WAAgB,KAAhB,CACC,KAAAZ,EACA,MAAOM,EAAeL,EAAQ,OAC9B,aAAcK,EAAe,OAAYJ,EACzC,cAAgBW,GAAM,CACfP,GAAcE,EAAqBK,CAAC,EACzCV,GAAA,MAAAA,EAAWU,EACb,EACA,YAAY,aACZ,UAAU,qBACV,aAAYH,GAAa,OACzB,cAAaL,GAAU,OAEtB,SAAAD,CAAA,CAAA,CAGP,CAEAL,EAAY,YAAc,sBAgB1BA,EAAY,OAAS,SAA2B,CAAC,MAAAE,EAAO,SAAAG,EAAU,cAAeC,GAAiC,CAChH,OACEM,EAAAA,kBAAAA,IAACC,EAAAA,WAAgB,KAAhB,CACC,MAAAX,EACA,UAAU,6BACV,cAAaI,GAAU,OAEtB,SAAAD,CAAA,CAAA,CAGP"}
+{"version":3,"file":"ButtonGroup.cjs.js","sources":["../../../src/components/ButtonGroup/ButtonGroup.tsx"],"sourcesContent":["\"use client\";\n\nimport { type ReactNode, useState } from \"react\";\nimport { RadioGroup as RadixRadioGroup } from \"radix-ui\";\n\nimport \"./ButtonGroup.css\";\n\nexport interface ButtonGroupProps {\n  /**\n   * The name of the ButtonGroup.\n   */\n  name?: string;\n  /**\n   * The value of the currently selected option in the ButtonGroup. Providing\n   * this prop causes the component to become controlled.\n   */\n  value?: string;\n  /**\n   * The initially selected value of the ButtonGroup.\n   */\n  defaultValue?: string;\n  /**\n   * Called when the ButtonGroup's selected value changes.\n   */\n  onChange?: (value: string) => void;\n  /**\n   * The ButtonGroup.Option elements to be rendered as the selectable values.\n   */\n  children?: ReactNode;\n  /** The test ID for the component. */\n  \"data-testid\"?: string;\n}\n\n/**\n * A radio button group component that allows selection of a single option from multiple choices.\n *\n * API:\n *  - {@link ButtonGroupProps}\n */\nexport function ButtonGroup({\n  name = \"ButtonGroup\",\n  value,\n  defaultValue,\n  onChange,\n  children,\n  \"data-testid\": testId,\n}: ButtonGroupProps) {\n  const isControlled = value !== undefined;\n  const [uncontrolledValue, setUncontrolledValue] = useState(\n    () => defaultValue || \"\"\n  );\n  const dataValue = isControlled ? (value || \"\") : uncontrolledValue;\n\n  return (\n    <RadixRadioGroup.Root\n      name={name}\n      value={isControlled ? value : undefined}\n      defaultValue={isControlled ? undefined : defaultValue}\n      onValueChange={(v) => {\n        if (!isControlled) setUncontrolledValue(v);\n        onChange?.(v);\n      }}\n      orientation=\"horizontal\"\n      className=\"proton-ButtonGroup\"\n      data-value={dataValue || undefined}\n      data-testid={testId || undefined}\n      aria-label={name}\n    >\n      {children}\n    </RadixRadioGroup.Root>\n  );\n}\n\nButtonGroup.displayName = \"ProtonUIButtonGroup\";\n\nexport interface ButtonGroupOptionProps {\n  /**\n   * The value of this option. When this option is selected, this value will\n   * become the ButtonGroup's new `value`.\n   */\n  value: string;\n  /**\n   * The text or component to be rendered as this option's content.\n   */\n  children: ReactNode;\n  /** The test ID for this option. */\n  \"data-testid\"?: string;\n}\n\n/**\n * A radio button option for the ButtonGroup.\n *\n * API:\n *  - {@link ButtonGroupOptionProps}\n */\nButtonGroup.Option = function ButtonGroupOption({\n  value,\n  children,\n  \"data-testid\": testId,\n}: ButtonGroupOptionProps) {\n  const accessibleLabel = typeof children === \"string\" ? children : value;\n\n  return (\n    <RadixRadioGroup.Item\n      value={value}\n      className=\"proton-ButtonGroup__option\"\n      data-testid={testId || undefined}\n      aria-label={accessibleLabel}\n    >\n      {children}\n    </RadixRadioGroup.Item>\n  );\n};\n"],"names":["ButtonGroup","name","value","defaultValue","onChange","children","testId","isControlled","uncontrolledValue","setUncontrolledValue","useState","dataValue","jsx","RadixRadioGroup","v","accessibleLabel"],"mappings":"4NAuCO,SAASA,EAAY,CAC1B,KAAAC,EAAO,cACP,MAAAC,EACA,aAAAC,EACA,SAAAC,EACA,SAAAC,EACA,cAAeC,CACjB,EAAqB,CACnB,MAAMC,EAAeL,IAAU,OACzB,CAACM,EAAmBC,CAAoB,EAAIC,EAAAA,SAChD,IAAMP,GAAgB,EAAA,EAElBQ,EAAYJ,EAAgBL,GAAS,GAAMM,EAEjD,OACEI,EAAAA,kBAAAA,IAACC,EAAAA,WAAgB,KAAhB,CACC,KAAAZ,EACA,MAAOM,EAAeL,EAAQ,OAC9B,aAAcK,EAAe,OAAYJ,EACzC,cAAgBW,GAAM,CACfP,GAAcE,EAAqBK,CAAC,EACzCV,GAAA,MAAAA,EAAWU,EACb,EACA,YAAY,aACZ,UAAU,qBACV,aAAYH,GAAa,OACzB,cAAaL,GAAU,OACvB,aAAYL,EAEX,SAAAI,CAAA,CAAA,CAGP,CAEAL,EAAY,YAAc,sBAsB1BA,EAAY,OAAS,SAA2B,CAC9C,MAAAE,EACA,SAAAG,EACA,cAAeC,CACjB,EAA2B,CACzB,MAAMS,EAAkB,OAAOV,GAAa,SAAWA,EAAWH,EAElE,OACEU,EAAAA,kBAAAA,IAACC,EAAAA,WAAgB,KAAhB,CACC,MAAAX,EACA,UAAU,6BACV,cAAaI,GAAU,OACvB,aAAYS,EAEX,SAAAV,CAAA,CAAA,CAGP"}

package/dist/components/ButtonGroup/ButtonGroup.es.js

@@ -1,41 +1,55 @@
 import { j as u } from "../../node_modules/react/jsx-runtime.es.js";
-import { useState as G } from "react";
-import { RadioGroup as d } from "radix-ui";
+import { useState as f } from "react";
+import { RadioGroup as e } from "radix-ui";
 /* empty css                   */
-function e({ name: a = "ButtonGroup", value: t, defaultValue: r, onChange: o, children: s, "data-testid": p }) {
-  const i = t !== void 0, [l, m] = G(
-    () => r || ""
+function p({
+  name: r = "ButtonGroup",
+  value: t,
+  defaultValue: o,
+  onChange: a,
+  children: s,
+  "data-testid": d
+}) {
+  const i = t !== void 0, [l, m] = f(
+    () => o || ""
   ), c = i ? t || "" : l;
   return /* @__PURE__ */ u.jsx(
-    d.Root,
+    e.Root,
     {
-      name: a,
+      name: r,
       value: i ? t : void 0,
-      defaultValue: i ? void 0 : r,
+      defaultValue: i ? void 0 : o,
       onValueChange: (n) => {
-        i || m(n), o == null || o(n);
+        i || m(n), a == null || a(n);
       },
       orientation: "horizontal",
       className: "proton-ButtonGroup",
       "data-value": c || void 0,
-      "data-testid": p || void 0,
+      "data-testid": d || void 0,
+      "aria-label": r,
       children: s
     }
   );
 }
-e.displayName = "ProtonUIButtonGroup";
-e.Option = function({ value: t, children: r, "data-testid": o }) {
+p.displayName = "ProtonUIButtonGroup";
+p.Option = function({
+  value: t,
+  children: o,
+  "data-testid": a
+}) {
+  const s = typeof o == "string" ? o : t;
   return /* @__PURE__ */ u.jsx(
-    d.Item,
+    e.Item,
     {
       value: t,
       className: "proton-ButtonGroup__option",
-      "data-testid": o || void 0,
-      children: r
+      "data-testid": a || void 0,
+      "aria-label": s,
+      children: o
     }
   );
 };
 export {
-  e as ButtonGroup
+  p as ButtonGroup
 };
 //# sourceMappingURL=ButtonGroup.es.js.map

package/dist/components/ButtonGroup/ButtonGroup.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonGroup.es.js","sources":["../../../src/components/ButtonGroup/ButtonGroup.tsx"],"sourcesContent":["\"use client\";\n\nimport {  useState } from \"react\";\nimport { RadioGroup as RadixRadioGroup } from \"radix-ui\";\n\nimport \"./ButtonGroup.css\";\n\nexport interface ButtonGroupProps {\n  /**\n   * The name of the ButtonGroup.\n   */\n  name?: string;\n  /**\n   * The value of the currently selected option in the ButtonGroup. Providing\n   * this prop causes the component to become controlled.\n   */\n  value?: string;\n  /**\n   * The initially selected value of the ButtonGroup.\n   */\n  defaultValue?: string;\n  /**\n   * Called when the ButtonGroup's selected value changes.\n   */\n  onChange?: (value: string) => void;\n  /**\n   * The ButtonGroup.Option elements to be rendered as the selectable values.\n   */\n  children?: React.ReactNode;\n  /** The test ID for the button group. */\n  \"data-testid\"?: string;\n}\n\n/**\n * A radio button group component that allows selection of a single option from multiple choices.\n *\n * Uses Radix `RadioGroup` for roving focus, arrow-key navigation, and `radiogroup` semantics.\n *\n * API:\n *  - {@link ButtonGroupProps}\n */\nexport function ButtonGroup({name = \"ButtonGroup\", value, defaultValue, onChange, children, \"data-testid\": testId}: ButtonGroupProps) {\n  const isControlled = value !== undefined;\n  const [uncontrolledValue, setUncontrolledValue] = useState(\n    () => defaultValue || \"\"\n  );\n  const dataValue = isControlled ? (value || \"\") : uncontrolledValue;\n\n  return (\n    <RadixRadioGroup.Root\n      name={name}\n      value={isControlled ? value : undefined}\n      defaultValue={isControlled ? undefined : defaultValue}\n      onValueChange={(v) => {\n        if (!isControlled) setUncontrolledValue(v);\n        onChange?.(v);\n      }}\n      orientation=\"horizontal\"\n      className=\"proton-ButtonGroup\"\n      data-value={dataValue || undefined}\n      data-testid={testId || undefined}\n    >\n      {children}\n    </RadixRadioGroup.Root>\n  );\n}\n\nButtonGroup.displayName = \"ProtonUIButtonGroup\";\n\nexport interface ButtonGroupOptionProps {\n  /**\n   * The value of this option. When this option is selected, this value will\n   * become the ButtonGroup's new `selectedValue`.\n   */\n  value: string;\n  /**\n   * The text or component to be rendered as this option's content.\n   */\n  children: React.ReactNode;\n  /** The test ID for the option. */\n  \"data-testid\"?: string;\n}\n\nButtonGroup.Option = function ButtonGroupOption({value, children, \"data-testid\": testId}: ButtonGroupOptionProps) {\n  return (\n    <RadixRadioGroup.Item\n      value={value}\n      className=\"proton-ButtonGroup__option\"\n      data-testid={testId || undefined}\n    >\n      {children}\n    </RadixRadioGroup.Item>\n  );\n};\n"],"names":["ButtonGroup","name","value","defaultValue","onChange","children","testId","isControlled","uncontrolledValue","setUncontrolledValue","useState","dataValue","jsx","RadixRadioGroup","v"],"mappings":";;;;AAyCO,SAASA,EAAY,EAAC,MAAAC,IAAO,eAAe,OAAAC,GAAO,cAAAC,GAAc,UAAAC,GAAU,UAAAC,GAAU,eAAeC,KAA2B;AACpI,QAAMC,IAAeL,MAAU,QACzB,CAACM,GAAmBC,CAAoB,IAAIC;AAAA,IAChD,MAAMP,KAAgB;AAAA,EAAA,GAElBQ,IAAYJ,IAAgBL,KAAS,KAAMM;AAEjD,SACEI,gBAAAA,EAAAA;AAAAA,IAACC,EAAgB;AAAA,IAAhB;AAAA,MACC,MAAAZ;AAAA,MACA,OAAOM,IAAeL,IAAQ;AAAA,MAC9B,cAAcK,IAAe,SAAYJ;AAAA,MACzC,eAAe,CAACW,MAAM;AACpB,QAAKP,KAAcE,EAAqBK,CAAC,GACzCV,KAAA,QAAAA,EAAWU;AAAA,MACb;AAAA,MACA,aAAY;AAAA,MACZ,WAAU;AAAA,MACV,cAAYH,KAAa;AAAA,MACzB,eAAaL,KAAU;AAAA,MAEtB,UAAAD;AAAA,IAAA;AAAA,EAAA;AAGP;AAEAL,EAAY,cAAc;AAgB1BA,EAAY,SAAS,SAA2B,EAAC,OAAAE,GAAO,UAAAG,GAAU,eAAeC,KAAiC;AAChH,SACEM,gBAAAA,EAAAA;AAAAA,IAACC,EAAgB;AAAA,IAAhB;AAAA,MACC,OAAAX;AAAA,MACA,WAAU;AAAA,MACV,eAAaI,KAAU;AAAA,MAEtB,UAAAD;AAAA,IAAA;AAAA,EAAA;AAGP;"}
+{"version":3,"file":"ButtonGroup.es.js","sources":["../../../src/components/ButtonGroup/ButtonGroup.tsx"],"sourcesContent":["\"use client\";\n\nimport { type ReactNode, useState } from \"react\";\nimport { RadioGroup as RadixRadioGroup } from \"radix-ui\";\n\nimport \"./ButtonGroup.css\";\n\nexport interface ButtonGroupProps {\n  /**\n   * The name of the ButtonGroup.\n   */\n  name?: string;\n  /**\n   * The value of the currently selected option in the ButtonGroup. Providing\n   * this prop causes the component to become controlled.\n   */\n  value?: string;\n  /**\n   * The initially selected value of the ButtonGroup.\n   */\n  defaultValue?: string;\n  /**\n   * Called when the ButtonGroup's selected value changes.\n   */\n  onChange?: (value: string) => void;\n  /**\n   * The ButtonGroup.Option elements to be rendered as the selectable values.\n   */\n  children?: ReactNode;\n  /** The test ID for the component. */\n  \"data-testid\"?: string;\n}\n\n/**\n * A radio button group component that allows selection of a single option from multiple choices.\n *\n * API:\n *  - {@link ButtonGroupProps}\n */\nexport function ButtonGroup({\n  name = \"ButtonGroup\",\n  value,\n  defaultValue,\n  onChange,\n  children,\n  \"data-testid\": testId,\n}: ButtonGroupProps) {\n  const isControlled = value !== undefined;\n  const [uncontrolledValue, setUncontrolledValue] = useState(\n    () => defaultValue || \"\"\n  );\n  const dataValue = isControlled ? (value || \"\") : uncontrolledValue;\n\n  return (\n    <RadixRadioGroup.Root\n      name={name}\n      value={isControlled ? value : undefined}\n      defaultValue={isControlled ? undefined : defaultValue}\n      onValueChange={(v) => {\n        if (!isControlled) setUncontrolledValue(v);\n        onChange?.(v);\n      }}\n      orientation=\"horizontal\"\n      className=\"proton-ButtonGroup\"\n      data-value={dataValue || undefined}\n      data-testid={testId || undefined}\n      aria-label={name}\n    >\n      {children}\n    </RadixRadioGroup.Root>\n  );\n}\n\nButtonGroup.displayName = \"ProtonUIButtonGroup\";\n\nexport interface ButtonGroupOptionProps {\n  /**\n   * The value of this option. When this option is selected, this value will\n   * become the ButtonGroup's new `value`.\n   */\n  value: string;\n  /**\n   * The text or component to be rendered as this option's content.\n   */\n  children: ReactNode;\n  /** The test ID for this option. */\n  \"data-testid\"?: string;\n}\n\n/**\n * A radio button option for the ButtonGroup.\n *\n * API:\n *  - {@link ButtonGroupOptionProps}\n */\nButtonGroup.Option = function ButtonGroupOption({\n  value,\n  children,\n  \"data-testid\": testId,\n}: ButtonGroupOptionProps) {\n  const accessibleLabel = typeof children === \"string\" ? children : value;\n\n  return (\n    <RadixRadioGroup.Item\n      value={value}\n      className=\"proton-ButtonGroup__option\"\n      data-testid={testId || undefined}\n      aria-label={accessibleLabel}\n    >\n      {children}\n    </RadixRadioGroup.Item>\n  );\n};\n"],"names":["ButtonGroup","name","value","defaultValue","onChange","children","testId","isControlled","uncontrolledValue","setUncontrolledValue","useState","dataValue","jsx","RadixRadioGroup","v","accessibleLabel"],"mappings":";;;;AAuCO,SAASA,EAAY;AAAA,EAC1B,MAAAC,IAAO;AAAA,EACP,OAAAC;AAAA,EACA,cAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,eAAeC;AACjB,GAAqB;AACnB,QAAMC,IAAeL,MAAU,QACzB,CAACM,GAAmBC,CAAoB,IAAIC;AAAA,IAChD,MAAMP,KAAgB;AAAA,EAAA,GAElBQ,IAAYJ,IAAgBL,KAAS,KAAMM;AAEjD,SACEI,gBAAAA,EAAAA;AAAAA,IAACC,EAAgB;AAAA,IAAhB;AAAA,MACC,MAAAZ;AAAA,MACA,OAAOM,IAAeL,IAAQ;AAAA,MAC9B,cAAcK,IAAe,SAAYJ;AAAA,MACzC,eAAe,CAACW,MAAM;AACpB,QAAKP,KAAcE,EAAqBK,CAAC,GACzCV,KAAA,QAAAA,EAAWU;AAAA,MACb;AAAA,MACA,aAAY;AAAA,MACZ,WAAU;AAAA,MACV,cAAYH,KAAa;AAAA,MACzB,eAAaL,KAAU;AAAA,MACvB,cAAYL;AAAA,MAEX,UAAAI;AAAA,IAAA;AAAA,EAAA;AAGP;AAEAL,EAAY,cAAc;AAsB1BA,EAAY,SAAS,SAA2B;AAAA,EAC9C,OAAAE;AAAA,EACA,UAAAG;AAAA,EACA,eAAeC;AACjB,GAA2B;AACzB,QAAMS,IAAkB,OAAOV,KAAa,WAAWA,IAAWH;AAElE,SACEU,gBAAAA,EAAAA;AAAAA,IAACC,EAAgB;AAAA,IAAhB;AAAA,MACC,OAAAX;AAAA,MACA,WAAU;AAAA,MACV,eAAaI,KAAU;AAAA,MACvB,cAAYS;AAAA,MAEX,UAAAV;AAAA,IAAA;AAAA,EAAA;AAGP;"}

package/dist/components/Checkbox/CheckboxInput/CheckboxInput.cjs.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../../../node_modules/react/jsx-runtime.cjs.js"),d=require("react"),q=require("../../../hooks/useMergedRef.cjs.js"),N=require("../CheckboxIndicator.cjs.js");;/* empty css                       */const n=require("../../../utils/string.cjs.js"),f=d.forwardRef(({checked:u,defaultChecked:k,onChange:i,name:s,value:I,isDisabled:p=!1,isRequired:l=!1,id:m,"data-testid":R,label:o,description:r,error:t,indeterminate:h=!1,round:c=!1},_)=>{const x=d.useRef(null),v=q.useMergedRef(x,_),C=u!==void 0;d.useEffect(()=>{x.current&&(x.current.indeterminate=h)},[h]);const y=g=>{i==null||i(g.target.checked)},b=m||`${s}-checkbox`,a=typeof t=="string"?`${s}-error`:void 0,j=typeof r=="string"?`${s}-description`:void 0,E=[a,j].filter(Boolean).join(" ")||void 0;return e.jsxRuntimeExports.jsxs("div",{children:[e.jsxRuntimeExports.jsx("div",{className:n.csx(p&&"proton-CheckboxInput--disabled"),children:e.jsxRuntimeExports.jsxs("div",{className:n.csx("proton-CheckboxInput__container",c&&"proton-CheckboxInput__container--round"),children:[typeof o=="string"?e.jsxRuntimeExports.jsx("label",{htmlFor:b,className:"proton-CheckboxInput__label",children:o}):o,e.jsxRuntimeExports.jsxs("span",{className:"proton-CheckboxInput__box",children:[e.jsxRuntimeExports.jsx("input",{ref:v,id:b,name:s,type:"checkbox",...C?{checked:u}:{defaultChecked:k},value:I,disabled:p,required:l,onChange:y,className:n.csx("proton-CheckboxInput__input",t&&"proton-CheckboxInput__input--error",c&&"proton-CheckboxInput__input--round"),"aria-label":o?void 0:s,"aria-invalid":!!t,"aria-errormessage":a,"aria-describedby":E,"data-testid":R}),e.jsxRuntimeExports.jsx(N.CheckboxIndicator,{round:c})]}),typeof r=="string"?e.jsxRuntimeExports.jsxs("div",{id:j,"aria-live":"polite",children:[r,l&&e.jsxRuntimeExports.jsx("span",{"aria-hidden":"true",children:" *"})]}):r]})}),typeof t=="string"?e.jsxRuntimeExports.jsx("div",{role:"alert",className:n.csx("proton-CheckboxInput__error"),id:a,children:t}):t]})});f.displayName="ProtonUICheckboxInput";exports.CheckboxInput=f;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../../../node_modules/react/jsx-runtime.cjs.js"),r=require("react"),N=require("../../../hooks/useMergedRef.cjs.js"),$=require("../CheckboxIndicator.cjs.js");;/* empty css                       */const n=require("../../../utils/string.cjs.js"),k=r.forwardRef(({checked:u,defaultChecked:m,onChange:i,name:p,value:I,isDisabled:l=!1,isRequired:h=!1,id:R,"data-testid":_,label:s,description:o,error:t,indeterminate:b=!1,round:c=!1},v)=>{const x=r.useRef(null),C=N.useMergedRef(x,v),y=u!==void 0,a=r.useId();r.useEffect(()=>{x.current&&(x.current.indeterminate=b)},[b]);const E=q=>{i==null||i(q.target.checked)},j=R||`${a}-checkbox`,d=typeof t=="string"?`${a}-error`:void 0,f=typeof o=="string"?`${a}-description`:void 0,g=[d,f].filter(Boolean).join(" ")||void 0;return e.jsxRuntimeExports.jsxs("div",{children:[e.jsxRuntimeExports.jsx("div",{className:n.csx(l&&"proton-CheckboxInput--disabled"),children:e.jsxRuntimeExports.jsxs("div",{className:n.csx("proton-CheckboxInput__container",c&&"proton-CheckboxInput__container--round"),children:[typeof s=="string"?e.jsxRuntimeExports.jsx("label",{htmlFor:j,className:"proton-CheckboxInput__label",children:s}):s,e.jsxRuntimeExports.jsxs("span",{className:"proton-CheckboxInput__box",children:[e.jsxRuntimeExports.jsx("input",{ref:C,id:j,name:p,type:"checkbox",...y?{checked:u}:{defaultChecked:m},value:I,disabled:l,required:h,onChange:E,className:n.csx("proton-CheckboxInput__input",t&&"proton-CheckboxInput__input--error",c&&"proton-CheckboxInput__input--round"),"aria-label":s?void 0:p,"aria-invalid":!!t,"aria-errormessage":d,"aria-describedby":g,"data-testid":_}),e.jsxRuntimeExports.jsx($.CheckboxIndicator,{round:c})]}),typeof o=="string"?e.jsxRuntimeExports.jsxs("div",{id:f,"aria-live":"polite",children:[o,h&&e.jsxRuntimeExports.jsx("span",{"aria-hidden":"true",children:" *"})]}):o]})}),typeof t=="string"?e.jsxRuntimeExports.jsx("div",{role:"alert",className:n.csx("proton-CheckboxInput__error"),id:d,children:t}):t]})});k.displayName="ProtonUICheckboxInput";exports.CheckboxInput=k;
 //# sourceMappingURL=CheckboxInput.cjs.js.map

package/dist/components/Checkbox/CheckboxInput/CheckboxInput.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"CheckboxInput.cjs.js","sources":["../../../../src/components/Checkbox/CheckboxInput/CheckboxInput.tsx"],"sourcesContent":["\"use client\";\n\nimport { forwardRef, useEffect, useRef, type ForwardedRef, type ReactNode, type ChangeEvent } from \"react\";\n\nimport { useMergedRef } from \"../../../hooks/useMergedRef\";\nimport { csx } from \"../../../utils\";\nimport { CheckboxIndicator } from \"../CheckboxIndicator\";\nimport \"./CheckboxInput.css\";\n\nexport interface CheckboxInputProps {\n  /**\n   * Whether the checkbox is checked (controlled mode).\n   */\n  checked?: boolean;\n\n  /**\n   * Whether the checkbox is checked by default (uncontrolled mode).\n   */\n  defaultChecked?: boolean;\n\n  /** The error attribute of the checkbox input. */\n  error?: ReactNode | string;\n\n  /** The description attribute of the checkbox input. */\n  description?: ReactNode | string;\n\n  /** The test id attribute of the checkbox input. */\n  \"data-testid\"?: string;\n\n  /**\n   * Callback fired when the checkbox state changes.\n   */\n  onChange?: (checked: boolean) => void;\n\n  /**\n   * Whether the checkbox is in an indeterminate state. Used for checkboxes that are neither checked nor unchecked.\n   * @default false\n   * @external https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/indeterminate\n   * @reference @external https://medium.com/indigoag-eng/indeterminate-checkboxes-are-weird-704b246c0f19\n   */\n  indeterminate?: boolean;\n\n  /** The id attribute of the checkbox input. */\n  id?: string;\n\n  /** Whether the checkbox is disabled.\n   * @default false\n   */\n  isDisabled?: boolean;\n\n  /** Whether the checkbox is required.\n   * @default false\n   */\n  isRequired?: boolean;\n\n  /** The name attribute of the checkbox input. */\n  name: string;\n\n  /** The label attribute of the checkbox input. */\n  label?: string | ReactNode;\n\n  /**\n   * The value attribute of the checkbox input (for form submission).\n   * @external https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#value\n   */\n  value?: string;\n\n  /**\n   * Whether the checkbox should be rendered as a round control (with a dot indicator when checked).\n   * @default false\n   */\n  round?: boolean;\n}\n\n/**\n * A checkbox input component with support for labels, descriptions, error states, and controlled/uncontrolled modes.\n *\n * API:\n *  - {@link CheckboxInputProps}\n */\nexport const CheckboxInput = forwardRef<HTMLInputElement, CheckboxInputProps>(\n  (\n    {\n      checked: controlledChecked,\n      defaultChecked,\n      onChange,\n      name,\n      value,\n      isDisabled = false,\n      isRequired = false,\n      id,\n      \"data-testid\": testId,\n      label,\n      description,\n      error,\n      indeterminate = false,\n      round = false,\n    },\n    forwardedRef: ForwardedRef<HTMLInputElement>,\n  ) => {\n    const checkboxRef = useRef<HTMLInputElement>(null);\n    const setRefs = useMergedRef(checkboxRef, forwardedRef);\n    const isControlled = controlledChecked !== undefined;\n\n    // indeterminate state can only be set via JS\n    useEffect(() => {\n      if (checkboxRef.current) {\n        checkboxRef.current.indeterminate = indeterminate;\n      }\n    }, [indeterminate]);\n\n    const handleChange = (e: ChangeEvent<HTMLInputElement>) => {\n      onChange?.(e.target.checked);\n    };\n\n    const checkboxId = id || `${name}-checkbox`;\n    const errorId = typeof error === \"string\" ? `${name}-error` : undefined;\n    const descriptionId =\n      typeof description === \"string\" ? `${name}-description` : undefined;\n    const ariaDescribedBy =\n      [errorId, descriptionId].filter(Boolean).join(\" \") || undefined;\n\n    return (\n      <div>\n        <div className={csx(isDisabled && \"proton-CheckboxInput--disabled\")}>\n          <div\n            className={csx(\n              \"proton-CheckboxInput__container\",\n              round && \"proton-CheckboxInput__container--round\",\n            )}\n          >\n            {typeof label === \"string\" ? (\n              <label\n                htmlFor={checkboxId}\n                className=\"proton-CheckboxInput__label\"\n              >\n                {label}\n              </label>\n            ) : (\n              label\n            )}\n\n            <span className=\"proton-CheckboxInput__box\">\n              <input\n                ref={setRefs}\n                id={checkboxId}\n                name={name}\n                type=\"checkbox\"\n                {...(isControlled\n                  ? { checked: controlledChecked }\n                  : { defaultChecked })}\n                value={value}\n                disabled={isDisabled}\n                required={isRequired}\n                onChange={handleChange}\n                className={csx(\n                  \"proton-CheckboxInput__input\",\n                  error && \"proton-CheckboxInput__input--error\",\n                  round && \"proton-CheckboxInput__input--round\",\n                )}\n                aria-label={!label ? name : undefined}\n                aria-invalid={Boolean(error)}\n                aria-errormessage={errorId}\n                aria-describedby={ariaDescribedBy}\n                data-testid={testId}\n              />\n              <CheckboxIndicator round={round} />\n            </span>\n\n            {typeof description === \"string\" ? (\n              <div id={descriptionId} aria-live=\"polite\">\n                {description}\n                {isRequired && <span aria-hidden=\"true\">&nbsp;*</span>}\n              </div>\n            ) : (\n              description\n            )}\n          </div>\n        </div>\n\n        {typeof error === \"string\" ? (\n          <div\n            role=\"alert\"\n            className={csx(\"proton-CheckboxInput__error\")}\n            id={errorId}\n          >\n            {error}\n          </div>\n        ) : (\n          error\n        )}\n      </div>\n    );\n  },\n);\n\nCheckboxInput.displayName = \"ProtonUICheckboxInput\";\n"],"names":["CheckboxInput","forwardRef","controlledChecked","defaultChecked","onChange","name","value","isDisabled","isRequired","id","testId","label","description","error","indeterminate","round","forwardedRef","checkboxRef","useRef","setRefs","useMergedRef","isControlled","useEffect","handleChange","e","checkboxId","errorId","descriptionId","ariaDescribedBy","jsx","csx","jsxs","CheckboxIndicator"],"mappings":"oVAgFaA,EAAgBC,EAAAA,WAC3B,CACE,CACE,QAASC,EACT,eAAAC,EACA,SAAAC,EACA,KAAAC,EACA,MAAAC,EACA,WAAAC,EAAa,GACb,WAAAC,EAAa,GACb,GAAAC,EACA,cAAeC,EACf,MAAAC,EACA,YAAAC,EACA,MAAAC,EACA,cAAAC,EAAgB,GAChB,MAAAC,EAAQ,EAAA,EAEVC,IACG,CACH,MAAMC,EAAcC,EAAAA,OAAyB,IAAI,EAC3CC,EAAUC,EAAAA,aAAaH,EAAaD,CAAY,EAChDK,EAAenB,IAAsB,OAG3CoB,EAAAA,UAAU,IAAM,CACVL,EAAY,UACdA,EAAY,QAAQ,cAAgBH,EAExC,EAAG,CAACA,CAAa,CAAC,EAElB,MAAMS,EAAgBC,GAAqC,CACzDpB,GAAA,MAAAA,EAAWoB,EAAE,OAAO,QACtB,EAEMC,EAAahB,GAAM,GAAGJ,CAAI,YAC1BqB,EAAU,OAAOb,GAAU,SAAW,GAAGR,CAAI,SAAW,OACxDsB,EACJ,OAAOf,GAAgB,SAAW,GAAGP,CAAI,eAAiB,OACtDuB,EACJ,CAACF,EAASC,CAAa,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,GAAK,OAExD,gCACG,MAAA,CACC,SAAA,CAAAE,wBAAC,MAAA,CAAI,UAAWC,EAAAA,IAAIvB,GAAc,gCAAgC,EAChE,SAAAwB,EAAAA,kBAAAA,KAAC,MAAA,CACC,UAAWD,EAAAA,IACT,kCACAf,GAAS,wCAAA,EAGV,SAAA,CAAA,OAAOJ,GAAU,SAChBkB,EAAAA,kBAAAA,IAAC,QAAA,CACC,QAASJ,EACT,UAAU,8BAET,SAAAd,CAAA,CAAA,EAGHA,EAGFoB,EAAAA,kBAAAA,KAAC,OAAA,CAAK,UAAU,4BACd,SAAA,CAAAF,EAAAA,kBAAAA,IAAC,QAAA,CACC,IAAKV,EACL,GAAIM,EACJ,KAAApB,EACA,KAAK,WACJ,GAAIgB,EACD,CAAE,QAASnB,CAAA,EACX,CAAE,eAAAC,CAAA,EACN,MAAAG,EACA,SAAUC,EACV,SAAUC,EACV,SAAUe,EACV,UAAWO,EAAAA,IACT,8BACAjB,GAAS,qCACTE,GAAS,oCAAA,EAEX,aAAaJ,EAAe,OAAPN,EACrB,eAAc,EAAQQ,EACtB,oBAAmBa,EACnB,mBAAkBE,EAClB,cAAalB,CAAA,CAAA,EAEfmB,wBAACG,EAAAA,mBAAkB,MAAAjB,CAAA,CAAc,CAAA,EACnC,EAEC,OAAOH,GAAgB,SACtBmB,EAAAA,kBAAAA,KAAC,OAAI,GAAIJ,EAAe,YAAU,SAC/B,SAAA,CAAAf,EACAJ,GAAcqB,EAAAA,kBAAAA,IAAC,OAAA,CAAK,cAAY,OAAO,SAAA,IAAA,CAAO,CAAA,CAAA,CACjD,EAEAjB,CAAA,CAAA,CAAA,EAGN,EAEC,OAAOC,GAAU,SAChBgB,EAAAA,kBAAAA,IAAC,MAAA,CACC,KAAK,QACL,UAAWC,EAAAA,IAAI,6BAA6B,EAC5C,GAAIJ,EAEH,SAAAb,CAAA,CAAA,EAGHA,CAAA,EAEJ,CAEJ,CACF,EAEAb,EAAc,YAAc"}
+{"version":3,"file":"CheckboxInput.cjs.js","sources":["../../../../src/components/Checkbox/CheckboxInput/CheckboxInput.tsx"],"sourcesContent":["\"use client\";\n\nimport { forwardRef, useEffect, useId, useRef, type ForwardedRef, type ReactNode, type ChangeEvent } from \"react\";\n\nimport { useMergedRef } from \"../../../hooks/useMergedRef\";\nimport { csx } from \"../../../utils\";\nimport { CheckboxIndicator } from \"../CheckboxIndicator\";\nimport \"./CheckboxInput.css\";\n\nexport interface CheckboxInputProps {\n  /**\n   * Whether the checkbox is checked (controlled mode).\n   */\n  checked?: boolean;\n\n  /**\n   * Whether the checkbox is checked by default (uncontrolled mode).\n   */\n  defaultChecked?: boolean;\n\n  /** The error attribute of the checkbox input. */\n  error?: ReactNode | string;\n\n  /** The description attribute of the checkbox input. */\n  description?: ReactNode | string;\n\n  /** The test id attribute of the checkbox input. */\n  \"data-testid\"?: string;\n\n  /**\n   * Callback fired when the checkbox state changes.\n   */\n  onChange?: (checked: boolean) => void;\n\n  /**\n   * Whether the checkbox is in an indeterminate state. Used for checkboxes that are neither checked nor unchecked.\n   * @default false\n   * @external https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/indeterminate\n   * @reference @external https://medium.com/indigoag-eng/indeterminate-checkboxes-are-weird-704b246c0f19\n   */\n  indeterminate?: boolean;\n\n  /** The id attribute of the checkbox input. */\n  id?: string;\n\n  /** Whether the checkbox is disabled.\n   * @default false\n   */\n  isDisabled?: boolean;\n\n  /** Whether the checkbox is required.\n   * @default false\n   */\n  isRequired?: boolean;\n\n  /** The name attribute of the checkbox input. */\n  name: string;\n\n  /** The label attribute of the checkbox input. */\n  label?: string | ReactNode;\n\n  /**\n   * The value attribute of the checkbox input (for form submission).\n   * @external https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#value\n   */\n  value?: string;\n\n  /**\n   * Whether the checkbox should be rendered as a round control (with a dot indicator when checked).\n   * @default false\n   */\n  round?: boolean;\n}\n\n/**\n * A checkbox input component with support for labels, descriptions, error states, and controlled/uncontrolled modes.\n *\n * API:\n *  - {@link CheckboxInputProps}\n */\nexport const CheckboxInput = forwardRef<HTMLInputElement, CheckboxInputProps>(\n  (\n    {\n      checked: controlledChecked,\n      defaultChecked,\n      onChange,\n      name,\n      value,\n      isDisabled = false,\n      isRequired = false,\n      id,\n      \"data-testid\": testId,\n      label,\n      description,\n      error,\n      indeterminate = false,\n      round = false,\n    },\n    forwardedRef: ForwardedRef<HTMLInputElement>,\n  ) => {\n    const checkboxRef = useRef<HTMLInputElement>(null);\n    const setRefs = useMergedRef(checkboxRef, forwardedRef);\n    const isControlled = controlledChecked !== undefined;\n    const idBase = useId();\n\n    // indeterminate state can only be set via JS\n    useEffect(() => {\n      if (checkboxRef.current) {\n        checkboxRef.current.indeterminate = indeterminate;\n      }\n    }, [indeterminate]);\n\n    const handleChange = (e: ChangeEvent<HTMLInputElement>) => {\n      onChange?.(e.target.checked);\n    };\n\n    const checkboxId = id || `${idBase}-checkbox`;\n    const errorId = typeof error === \"string\" ? `${idBase}-error` : undefined;\n    const descriptionId =\n      typeof description === \"string\" ? `${idBase}-description` : undefined;\n    const ariaDescribedBy =\n      [errorId, descriptionId].filter(Boolean).join(\" \") || undefined;\n\n    return (\n      <div>\n        <div className={csx(isDisabled && \"proton-CheckboxInput--disabled\")}>\n          <div\n            className={csx(\n              \"proton-CheckboxInput__container\",\n              round && \"proton-CheckboxInput__container--round\",\n            )}\n          >\n            {typeof label === \"string\" ? (\n              <label\n                htmlFor={checkboxId}\n                className=\"proton-CheckboxInput__label\"\n              >\n                {label}\n              </label>\n            ) : (\n              label\n            )}\n\n            <span className=\"proton-CheckboxInput__box\">\n              <input\n                ref={setRefs}\n                id={checkboxId}\n                name={name}\n                type=\"checkbox\"\n                {...(isControlled\n                  ? { checked: controlledChecked }\n                  : { defaultChecked })}\n                value={value}\n                disabled={isDisabled}\n                required={isRequired}\n                onChange={handleChange}\n                className={csx(\n                  \"proton-CheckboxInput__input\",\n                  error && \"proton-CheckboxInput__input--error\",\n                  round && \"proton-CheckboxInput__input--round\",\n                )}\n                aria-label={!label ? name : undefined}\n                aria-invalid={Boolean(error)}\n                aria-errormessage={errorId}\n                aria-describedby={ariaDescribedBy}\n                data-testid={testId}\n              />\n              <CheckboxIndicator round={round} />\n            </span>\n\n            {typeof description === \"string\" ? (\n              <div id={descriptionId} aria-live=\"polite\">\n                {description}\n                {isRequired && <span aria-hidden=\"true\">&nbsp;*</span>}\n              </div>\n            ) : (\n              description\n            )}\n          </div>\n        </div>\n\n        {typeof error === \"string\" ? (\n          <div\n            role=\"alert\"\n            className={csx(\"proton-CheckboxInput__error\")}\n            id={errorId}\n          >\n            {error}\n          </div>\n        ) : (\n          error\n        )}\n      </div>\n    );\n  },\n);\n\nCheckboxInput.displayName = \"ProtonUICheckboxInput\";\n"],"names":["CheckboxInput","forwardRef","controlledChecked","defaultChecked","onChange","name","value","isDisabled","isRequired","id","testId","label","description","error","indeterminate","round","forwardedRef","checkboxRef","useRef","setRefs","useMergedRef","isControlled","idBase","useId","useEffect","handleChange","e","checkboxId","errorId","descriptionId","ariaDescribedBy","jsx","csx","jsxs","CheckboxIndicator"],"mappings":"oVAgFaA,EAAgBC,EAAAA,WAC3B,CACE,CACE,QAASC,EACT,eAAAC,EACA,SAAAC,EACA,KAAAC,EACA,MAAAC,EACA,WAAAC,EAAa,GACb,WAAAC,EAAa,GACb,GAAAC,EACA,cAAeC,EACf,MAAAC,EACA,YAAAC,EACA,MAAAC,EACA,cAAAC,EAAgB,GAChB,MAAAC,EAAQ,EAAA,EAEVC,IACG,CACH,MAAMC,EAAcC,EAAAA,OAAyB,IAAI,EAC3CC,EAAUC,EAAAA,aAAaH,EAAaD,CAAY,EAChDK,EAAenB,IAAsB,OACrCoB,EAASC,EAAAA,MAAA,EAGfC,EAAAA,UAAU,IAAM,CACVP,EAAY,UACdA,EAAY,QAAQ,cAAgBH,EAExC,EAAG,CAACA,CAAa,CAAC,EAElB,MAAMW,EAAgBC,GAAqC,CACzDtB,GAAA,MAAAA,EAAWsB,EAAE,OAAO,QACtB,EAEMC,EAAalB,GAAM,GAAGa,CAAM,YAC5BM,EAAU,OAAOf,GAAU,SAAW,GAAGS,CAAM,SAAW,OAC1DO,EACJ,OAAOjB,GAAgB,SAAW,GAAGU,CAAM,eAAiB,OACxDQ,EACJ,CAACF,EAASC,CAAa,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,GAAK,OAExD,gCACG,MAAA,CACC,SAAA,CAAAE,wBAAC,MAAA,CAAI,UAAWC,EAAAA,IAAIzB,GAAc,gCAAgC,EAChE,SAAA0B,EAAAA,kBAAAA,KAAC,MAAA,CACC,UAAWD,EAAAA,IACT,kCACAjB,GAAS,wCAAA,EAGV,SAAA,CAAA,OAAOJ,GAAU,SAChBoB,EAAAA,kBAAAA,IAAC,QAAA,CACC,QAASJ,EACT,UAAU,8BAET,SAAAhB,CAAA,CAAA,EAGHA,EAGFsB,EAAAA,kBAAAA,KAAC,OAAA,CAAK,UAAU,4BACd,SAAA,CAAAF,EAAAA,kBAAAA,IAAC,QAAA,CACC,IAAKZ,EACL,GAAIQ,EACJ,KAAAtB,EACA,KAAK,WACJ,GAAIgB,EACD,CAAE,QAASnB,CAAA,EACX,CAAE,eAAAC,CAAA,EACN,MAAAG,EACA,SAAUC,EACV,SAAUC,EACV,SAAUiB,EACV,UAAWO,EAAAA,IACT,8BACAnB,GAAS,qCACTE,GAAS,oCAAA,EAEX,aAAaJ,EAAe,OAAPN,EACrB,eAAc,EAAQQ,EACtB,oBAAmBe,EACnB,mBAAkBE,EAClB,cAAapB,CAAA,CAAA,EAEfqB,wBAACG,EAAAA,mBAAkB,MAAAnB,CAAA,CAAc,CAAA,EACnC,EAEC,OAAOH,GAAgB,SACtBqB,EAAAA,kBAAAA,KAAC,OAAI,GAAIJ,EAAe,YAAU,SAC/B,SAAA,CAAAjB,EACAJ,GAAcuB,EAAAA,kBAAAA,IAAC,OAAA,CAAK,cAAY,OAAO,SAAA,IAAA,CAAO,CAAA,CAAA,CACjD,EAEAnB,CAAA,CAAA,CAAA,EAGN,EAEC,OAAOC,GAAU,SAChBkB,EAAAA,kBAAAA,IAAC,MAAA,CACC,KAAK,QACL,UAAWC,EAAAA,IAAI,6BAA6B,EAC5C,GAAIJ,EAEH,SAAAf,CAAA,CAAA,EAGHA,CAAA,EAEJ,CAEJ,CACF,EAEAb,EAAc,YAAc"}

package/dist/components/Checkbox/CheckboxInput/CheckboxInput.es.js

@@ -1,81 +1,81 @@
 import { j as e } from "../../../node_modules/react/jsx-runtime.es.js";
-import { forwardRef as g, useRef as R, useEffect as B } from "react";
-import { useMergedRef as $ } from "../../../hooks/useMergedRef.es.js";
-import { CheckboxIndicator as E } from "../CheckboxIndicator.es.js";
+import { forwardRef as R, useRef as B, useId as $, useEffect as E } from "react";
+import { useMergedRef as w } from "../../../hooks/useMergedRef.es.js";
+import { CheckboxIndicator as F } from "../CheckboxIndicator.es.js";
 /* empty css                     */
-import { csx as i } from "../../../utils/string.es.js";
-const w = g(
+import { csx as s } from "../../../utils/string.es.js";
+const M = R(
   ({
     checked: p,
-    defaultChecked: b,
-    onChange: c,
-    name: t,
+    defaultChecked: m,
+    onChange: i,
+    name: l,
     value: k,
-    isDisabled: l = !1,
-    isRequired: x = !1,
-    id: m,
-    "data-testid": I,
-    label: r,
-    description: s,
+    isDisabled: x = !1,
+    isRequired: h = !1,
+    id: I,
+    "data-testid": _,
+    label: t,
+    description: r,
     error: o,
-    indeterminate: h = !1,
+    indeterminate: f = !1,
     round: n = !1
-  }, _) => {
-    const a = R(null), j = $(a, _), v = p !== void 0;
-    B(() => {
-      a.current && (a.current.indeterminate = h);
-    }, [h]);
-    const C = (N) => {
-      c == null || c(N.target.checked);
-    }, f = m || `${t}-checkbox`, d = typeof o == "string" ? `${t}-error` : void 0, u = typeof s == "string" ? `${t}-description` : void 0, y = [d, u].filter(Boolean).join(" ") || void 0;
+  }, j) => {
+    const c = B(null), v = w(c, j), C = p !== void 0, a = $();
+    E(() => {
+      c.current && (c.current.indeterminate = f);
+    }, [f]);
+    const y = (g) => {
+      i == null || i(g.target.checked);
+    }, u = I || `${a}-checkbox`, d = typeof o == "string" ? `${a}-error` : void 0, b = typeof r == "string" ? `${a}-description` : void 0, N = [d, b].filter(Boolean).join(" ") || void 0;
     return /* @__PURE__ */ e.jsxs("div", { children: [
-      /* @__PURE__ */ e.jsx("div", { className: i(l && "proton-CheckboxInput--disabled"), children: /* @__PURE__ */ e.jsxs(
+      /* @__PURE__ */ e.jsx("div", { className: s(x && "proton-CheckboxInput--disabled"), children: /* @__PURE__ */ e.jsxs(
         "div",
         {
-          className: i(
+          className: s(
             "proton-CheckboxInput__container",
             n && "proton-CheckboxInput__container--round"
           ),
           children: [
-            typeof r == "string" ? /* @__PURE__ */ e.jsx(
+            typeof t == "string" ? /* @__PURE__ */ e.jsx(
               "label",
               {
-                htmlFor: f,
+                htmlFor: u,
                 className: "proton-CheckboxInput__label",
-                children: r
+                children: t
               }
-            ) : r,
+            ) : t,
             /* @__PURE__ */ e.jsxs("span", { className: "proton-CheckboxInput__box", children: [
               /* @__PURE__ */ e.jsx(
                 "input",
                 {
-                  ref: j,
-                  id: f,
-                  name: t,
+                  ref: v,
+                  id: u,
+                  name: l,
                   type: "checkbox",
-                  ...v ? { checked: p } : { defaultChecked: b },
+                  ...C ? { checked: p } : { defaultChecked: m },
                   value: k,
-                  disabled: l,
-                  required: x,
-                  onChange: C,
-                  className: i(
+                  disabled: x,
+                  required: h,
+                  onChange: y,
+                  className: s(
                     "proton-CheckboxInput__input",
                     o && "proton-CheckboxInput__input--error",
                     n && "proton-CheckboxInput__input--round"
                   ),
-                  "aria-label": r ? void 0 : t,
+                  "aria-label": t ? void 0 : l,
                   "aria-invalid": !!o,
                   "aria-errormessage": d,
-                  "aria-describedby": y,
-                  "data-testid": I
+                  "aria-describedby": N,
+                  "data-testid": _
                 }
               ),
-              /* @__PURE__ */ e.jsx(E, { round: n })
+              /* @__PURE__ */ e.jsx(F, { round: n })
             ] }),
-            typeof s == "string" ? /* @__PURE__ */ e.jsxs("div", { id: u, "aria-live": "polite", children: [
-              s,
-              x && /* @__PURE__ */ e.jsx("span", { "aria-hidden": "true", children: " *" })
-            ] }) : s
+            typeof r == "string" ? /* @__PURE__ */ e.jsxs("div", { id: b, "aria-live": "polite", children: [
+              r,
+              h && /* @__PURE__ */ e.jsx("span", { "aria-hidden": "true", children: " *" })
+            ] }) : r
           ]
         }
       ) }),
@@ -83,7 +83,7 @@ const w = g(
         "div",
         {
           role: "alert",
-          className: i("proton-CheckboxInput__error"),
+          className: s("proton-CheckboxInput__error"),
           id: d,
           children: o
         }
@@ -91,8 +91,8 @@ const w = g(
     ] });
   }
 );
-w.displayName = "ProtonUICheckboxInput";
+M.displayName = "ProtonUICheckboxInput";
 export {
-  w as CheckboxInput
+  M as CheckboxInput
 };
 //# sourceMappingURL=CheckboxInput.es.js.map

package/dist/components/Checkbox/CheckboxInput/CheckboxInput.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"CheckboxInput.es.js","sources":["../../../../src/components/Checkbox/CheckboxInput/CheckboxInput.tsx"],"sourcesContent":["\"use client\";\n\nimport { forwardRef, useEffect, useRef, type ForwardedRef, type ReactNode, type ChangeEvent } from \"react\";\n\nimport { useMergedRef } from \"../../../hooks/useMergedRef\";\nimport { csx } from \"../../../utils\";\nimport { CheckboxIndicator } from \"../CheckboxIndicator\";\nimport \"./CheckboxInput.css\";\n\nexport interface CheckboxInputProps {\n  /**\n   * Whether the checkbox is checked (controlled mode).\n   */\n  checked?: boolean;\n\n  /**\n   * Whether the checkbox is checked by default (uncontrolled mode).\n   */\n  defaultChecked?: boolean;\n\n  /** The error attribute of the checkbox input. */\n  error?: ReactNode | string;\n\n  /** The description attribute of the checkbox input. */\n  description?: ReactNode | string;\n\n  /** The test id attribute of the checkbox input. */\n  \"data-testid\"?: string;\n\n  /**\n   * Callback fired when the checkbox state changes.\n   */\n  onChange?: (checked: boolean) => void;\n\n  /**\n   * Whether the checkbox is in an indeterminate state. Used for checkboxes that are neither checked nor unchecked.\n   * @default false\n   * @external https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/indeterminate\n   * @reference @external https://medium.com/indigoag-eng/indeterminate-checkboxes-are-weird-704b246c0f19\n   */\n  indeterminate?: boolean;\n\n  /** The id attribute of the checkbox input. */\n  id?: string;\n\n  /** Whether the checkbox is disabled.\n   * @default false\n   */\n  isDisabled?: boolean;\n\n  /** Whether the checkbox is required.\n   * @default false\n   */\n  isRequired?: boolean;\n\n  /** The name attribute of the checkbox input. */\n  name: string;\n\n  /** The label attribute of the checkbox input. */\n  label?: string | ReactNode;\n\n  /**\n   * The value attribute of the checkbox input (for form submission).\n   * @external https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#value\n   */\n  value?: string;\n\n  /**\n   * Whether the checkbox should be rendered as a round control (with a dot indicator when checked).\n   * @default false\n   */\n  round?: boolean;\n}\n\n/**\n * A checkbox input component with support for labels, descriptions, error states, and controlled/uncontrolled modes.\n *\n * API:\n *  - {@link CheckboxInputProps}\n */\nexport const CheckboxInput = forwardRef<HTMLInputElement, CheckboxInputProps>(\n  (\n    {\n      checked: controlledChecked,\n      defaultChecked,\n      onChange,\n      name,\n      value,\n      isDisabled = false,\n      isRequired = false,\n      id,\n      \"data-testid\": testId,\n      label,\n      description,\n      error,\n      indeterminate = false,\n      round = false,\n    },\n    forwardedRef: ForwardedRef<HTMLInputElement>,\n  ) => {\n    const checkboxRef = useRef<HTMLInputElement>(null);\n    const setRefs = useMergedRef(checkboxRef, forwardedRef);\n    const isControlled = controlledChecked !== undefined;\n\n    // indeterminate state can only be set via JS\n    useEffect(() => {\n      if (checkboxRef.current) {\n        checkboxRef.current.indeterminate = indeterminate;\n      }\n    }, [indeterminate]);\n\n    const handleChange = (e: ChangeEvent<HTMLInputElement>) => {\n      onChange?.(e.target.checked);\n    };\n\n    const checkboxId = id || `${name}-checkbox`;\n    const errorId = typeof error === \"string\" ? `${name}-error` : undefined;\n    const descriptionId =\n      typeof description === \"string\" ? `${name}-description` : undefined;\n    const ariaDescribedBy =\n      [errorId, descriptionId].filter(Boolean).join(\" \") || undefined;\n\n    return (\n      <div>\n        <div className={csx(isDisabled && \"proton-CheckboxInput--disabled\")}>\n          <div\n            className={csx(\n              \"proton-CheckboxInput__container\",\n              round && \"proton-CheckboxInput__container--round\",\n            )}\n          >\n            {typeof label === \"string\" ? (\n              <label\n                htmlFor={checkboxId}\n                className=\"proton-CheckboxInput__label\"\n              >\n                {label}\n              </label>\n            ) : (\n              label\n            )}\n\n            <span className=\"proton-CheckboxInput__box\">\n              <input\n                ref={setRefs}\n                id={checkboxId}\n                name={name}\n                type=\"checkbox\"\n                {...(isControlled\n                  ? { checked: controlledChecked }\n                  : { defaultChecked })}\n                value={value}\n                disabled={isDisabled}\n                required={isRequired}\n                onChange={handleChange}\n                className={csx(\n                  \"proton-CheckboxInput__input\",\n                  error && \"proton-CheckboxInput__input--error\",\n                  round && \"proton-CheckboxInput__input--round\",\n                )}\n                aria-label={!label ? name : undefined}\n                aria-invalid={Boolean(error)}\n                aria-errormessage={errorId}\n                aria-describedby={ariaDescribedBy}\n                data-testid={testId}\n              />\n              <CheckboxIndicator round={round} />\n            </span>\n\n            {typeof description === \"string\" ? (\n              <div id={descriptionId} aria-live=\"polite\">\n                {description}\n                {isRequired && <span aria-hidden=\"true\">&nbsp;*</span>}\n              </div>\n            ) : (\n              description\n            )}\n          </div>\n        </div>\n\n        {typeof error === \"string\" ? (\n          <div\n            role=\"alert\"\n            className={csx(\"proton-CheckboxInput__error\")}\n            id={errorId}\n          >\n            {error}\n          </div>\n        ) : (\n          error\n        )}\n      </div>\n    );\n  },\n);\n\nCheckboxInput.displayName = \"ProtonUICheckboxInput\";\n"],"names":["CheckboxInput","forwardRef","controlledChecked","defaultChecked","onChange","name","value","isDisabled","isRequired","id","testId","label","description","error","indeterminate","round","forwardedRef","checkboxRef","useRef","setRefs","useMergedRef","isControlled","useEffect","handleChange","e","checkboxId","errorId","descriptionId","ariaDescribedBy","jsx","csx","jsxs","CheckboxIndicator"],"mappings":";;;;;;AAgFO,MAAMA,IAAgBC;AAAA,EAC3B,CACE;AAAA,IACE,SAASC;AAAA,IACT,gBAAAC;AAAA,IACA,UAAAC;AAAA,IACA,MAAAC;AAAA,IACA,OAAAC;AAAA,IACA,YAAAC,IAAa;AAAA,IACb,YAAAC,IAAa;AAAA,IACb,IAAAC;AAAA,IACA,eAAeC;AAAA,IACf,OAAAC;AAAA,IACA,aAAAC;AAAA,IACA,OAAAC;AAAA,IACA,eAAAC,IAAgB;AAAA,IAChB,OAAAC,IAAQ;AAAA,EAAA,GAEVC,MACG;AACH,UAAMC,IAAcC,EAAyB,IAAI,GAC3CC,IAAUC,EAAaH,GAAaD,CAAY,GAChDK,IAAenB,MAAsB;AAG3C,IAAAoB,EAAU,MAAM;AACd,MAAIL,EAAY,YACdA,EAAY,QAAQ,gBAAgBH;AAAA,IAExC,GAAG,CAACA,CAAa,CAAC;AAElB,UAAMS,IAAe,CAACC,MAAqC;AACzD,MAAApB,KAAA,QAAAA,EAAWoB,EAAE,OAAO;AAAA,IACtB,GAEMC,IAAahB,KAAM,GAAGJ,CAAI,aAC1BqB,IAAU,OAAOb,KAAU,WAAW,GAAGR,CAAI,WAAW,QACxDsB,IACJ,OAAOf,KAAgB,WAAW,GAAGP,CAAI,iBAAiB,QACtDuB,IACJ,CAACF,GAASC,CAAa,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,KAAK;AAExD,kCACG,OAAA,EACC,UAAA;AAAA,MAAAE,gBAAAA,MAAC,OAAA,EAAI,WAAWC,EAAIvB,KAAc,gCAAgC,GAChE,UAAAwB,gBAAAA,EAAAA;AAAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAWD;AAAA,YACT;AAAA,YACAf,KAAS;AAAA,UAAA;AAAA,UAGV,UAAA;AAAA,YAAA,OAAOJ,KAAU,WAChBkB,gBAAAA,EAAAA;AAAAA,cAAC;AAAA,cAAA;AAAA,gBACC,SAASJ;AAAA,gBACT,WAAU;AAAA,gBAET,UAAAd;AAAA,cAAA;AAAA,YAAA,IAGHA;AAAA,YAGFoB,gBAAAA,EAAAA,KAAC,QAAA,EAAK,WAAU,6BACd,UAAA;AAAA,cAAAF,gBAAAA,EAAAA;AAAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,KAAKV;AAAA,kBACL,IAAIM;AAAA,kBACJ,MAAApB;AAAA,kBACA,MAAK;AAAA,kBACJ,GAAIgB,IACD,EAAE,SAASnB,EAAA,IACX,EAAE,gBAAAC,EAAA;AAAA,kBACN,OAAAG;AAAA,kBACA,UAAUC;AAAA,kBACV,UAAUC;AAAA,kBACV,UAAUe;AAAA,kBACV,WAAWO;AAAA,oBACT;AAAA,oBACAjB,KAAS;AAAA,oBACTE,KAAS;AAAA,kBAAA;AAAA,kBAEX,cAAaJ,IAAe,SAAPN;AAAA,kBACrB,gBAAc,EAAQQ;AAAA,kBACtB,qBAAmBa;AAAA,kBACnB,oBAAkBE;AAAA,kBAClB,eAAalB;AAAA,gBAAA;AAAA,cAAA;AAAA,cAEfmB,gBAAAA,MAACG,KAAkB,OAAAjB,EAAA,CAAc;AAAA,YAAA,GACnC;AAAA,YAEC,OAAOH,KAAgB,WACtBmB,gBAAAA,EAAAA,KAAC,SAAI,IAAIJ,GAAe,aAAU,UAC/B,UAAA;AAAA,cAAAf;AAAA,cACAJ,KAAcqB,gBAAAA,EAAAA,IAAC,QAAA,EAAK,eAAY,QAAO,UAAA,KAAA,CAAO;AAAA,YAAA,EAAA,CACjD,IAEAjB;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA,GAGN;AAAA,MAEC,OAAOC,KAAU,WAChBgB,gBAAAA,EAAAA;AAAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,WAAWC,EAAI,6BAA6B;AAAA,UAC5C,IAAIJ;AAAA,UAEH,UAAAb;AAAA,QAAA;AAAA,MAAA,IAGHA;AAAA,IAAA,GAEJ;AAAA,EAEJ;AACF;AAEAb,EAAc,cAAc;"}
+{"version":3,"file":"CheckboxInput.es.js","sources":["../../../../src/components/Checkbox/CheckboxInput/CheckboxInput.tsx"],"sourcesContent":["\"use client\";\n\nimport { forwardRef, useEffect, useId, useRef, type ForwardedRef, type ReactNode, type ChangeEvent } from \"react\";\n\nimport { useMergedRef } from \"../../../hooks/useMergedRef\";\nimport { csx } from \"../../../utils\";\nimport { CheckboxIndicator } from \"../CheckboxIndicator\";\nimport \"./CheckboxInput.css\";\n\nexport interface CheckboxInputProps {\n  /**\n   * Whether the checkbox is checked (controlled mode).\n   */\n  checked?: boolean;\n\n  /**\n   * Whether the checkbox is checked by default (uncontrolled mode).\n   */\n  defaultChecked?: boolean;\n\n  /** The error attribute of the checkbox input. */\n  error?: ReactNode | string;\n\n  /** The description attribute of the checkbox input. */\n  description?: ReactNode | string;\n\n  /** The test id attribute of the checkbox input. */\n  \"data-testid\"?: string;\n\n  /**\n   * Callback fired when the checkbox state changes.\n   */\n  onChange?: (checked: boolean) => void;\n\n  /**\n   * Whether the checkbox is in an indeterminate state. Used for checkboxes that are neither checked nor unchecked.\n   * @default false\n   * @external https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/indeterminate\n   * @reference @external https://medium.com/indigoag-eng/indeterminate-checkboxes-are-weird-704b246c0f19\n   */\n  indeterminate?: boolean;\n\n  /** The id attribute of the checkbox input. */\n  id?: string;\n\n  /** Whether the checkbox is disabled.\n   * @default false\n   */\n  isDisabled?: boolean;\n\n  /** Whether the checkbox is required.\n   * @default false\n   */\n  isRequired?: boolean;\n\n  /** The name attribute of the checkbox input. */\n  name: string;\n\n  /** The label attribute of the checkbox input. */\n  label?: string | ReactNode;\n\n  /**\n   * The value attribute of the checkbox input (for form submission).\n   * @external https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#value\n   */\n  value?: string;\n\n  /**\n   * Whether the checkbox should be rendered as a round control (with a dot indicator when checked).\n   * @default false\n   */\n  round?: boolean;\n}\n\n/**\n * A checkbox input component with support for labels, descriptions, error states, and controlled/uncontrolled modes.\n *\n * API:\n *  - {@link CheckboxInputProps}\n */\nexport const CheckboxInput = forwardRef<HTMLInputElement, CheckboxInputProps>(\n  (\n    {\n      checked: controlledChecked,\n      defaultChecked,\n      onChange,\n      name,\n      value,\n      isDisabled = false,\n      isRequired = false,\n      id,\n      \"data-testid\": testId,\n      label,\n      description,\n      error,\n      indeterminate = false,\n      round = false,\n    },\n    forwardedRef: ForwardedRef<HTMLInputElement>,\n  ) => {\n    const checkboxRef = useRef<HTMLInputElement>(null);\n    const setRefs = useMergedRef(checkboxRef, forwardedRef);\n    const isControlled = controlledChecked !== undefined;\n    const idBase = useId();\n\n    // indeterminate state can only be set via JS\n    useEffect(() => {\n      if (checkboxRef.current) {\n        checkboxRef.current.indeterminate = indeterminate;\n      }\n    }, [indeterminate]);\n\n    const handleChange = (e: ChangeEvent<HTMLInputElement>) => {\n      onChange?.(e.target.checked);\n    };\n\n    const checkboxId = id || `${idBase}-checkbox`;\n    const errorId = typeof error === \"string\" ? `${idBase}-error` : undefined;\n    const descriptionId =\n      typeof description === \"string\" ? `${idBase}-description` : undefined;\n    const ariaDescribedBy =\n      [errorId, descriptionId].filter(Boolean).join(\" \") || undefined;\n\n    return (\n      <div>\n        <div className={csx(isDisabled && \"proton-CheckboxInput--disabled\")}>\n          <div\n            className={csx(\n              \"proton-CheckboxInput__container\",\n              round && \"proton-CheckboxInput__container--round\",\n            )}\n          >\n            {typeof label === \"string\" ? (\n              <label\n                htmlFor={checkboxId}\n                className=\"proton-CheckboxInput__label\"\n              >\n                {label}\n              </label>\n            ) : (\n              label\n            )}\n\n            <span className=\"proton-CheckboxInput__box\">\n              <input\n                ref={setRefs}\n                id={checkboxId}\n                name={name}\n                type=\"checkbox\"\n                {...(isControlled\n                  ? { checked: controlledChecked }\n                  : { defaultChecked })}\n                value={value}\n                disabled={isDisabled}\n                required={isRequired}\n                onChange={handleChange}\n                className={csx(\n                  \"proton-CheckboxInput__input\",\n                  error && \"proton-CheckboxInput__input--error\",\n                  round && \"proton-CheckboxInput__input--round\",\n                )}\n                aria-label={!label ? name : undefined}\n                aria-invalid={Boolean(error)}\n                aria-errormessage={errorId}\n                aria-describedby={ariaDescribedBy}\n                data-testid={testId}\n              />\n              <CheckboxIndicator round={round} />\n            </span>\n\n            {typeof description === \"string\" ? (\n              <div id={descriptionId} aria-live=\"polite\">\n                {description}\n                {isRequired && <span aria-hidden=\"true\">&nbsp;*</span>}\n              </div>\n            ) : (\n              description\n            )}\n          </div>\n        </div>\n\n        {typeof error === \"string\" ? (\n          <div\n            role=\"alert\"\n            className={csx(\"proton-CheckboxInput__error\")}\n            id={errorId}\n          >\n            {error}\n          </div>\n        ) : (\n          error\n        )}\n      </div>\n    );\n  },\n);\n\nCheckboxInput.displayName = \"ProtonUICheckboxInput\";\n"],"names":["CheckboxInput","forwardRef","controlledChecked","defaultChecked","onChange","name","value","isDisabled","isRequired","id","testId","label","description","error","indeterminate","round","forwardedRef","checkboxRef","useRef","setRefs","useMergedRef","isControlled","idBase","useId","useEffect","handleChange","e","checkboxId","errorId","descriptionId","ariaDescribedBy","jsx","csx","jsxs","CheckboxIndicator"],"mappings":"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"}

package/dist/components/Checkbox/CheckboxRadioGroup/CheckboxRadioGroup.cjs.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../../../node_modules/react/jsx-runtime.cjs.js"),I=require("react"),a=require("radix-ui"),m=require("../CheckboxIndicator.cjs.js");;/* empty css                                      */;/* empty css                            */const s=require("../../../utils/string.cjs.js"),u=I.forwardRef(({name:i,items:l,value:b,defaultValue:h,onChange:R,isDisabled:c=!1,isRequired:j=!1,orientation:d="vertical",round:t=!1,error:r,"data-testid":k},C)=>{const p=typeof r=="string"?`${i}-error`:void 0;return e.jsxRuntimeExports.jsxs("div",{children:[e.jsxRuntimeExports.jsx(a.RadioGroup.Root,{ref:C,name:i,value:b,defaultValue:h,onValueChange:R,disabled:c,required:j,orientation:d,className:s.csx("proton-CheckboxRadioGroup",`proton-CheckboxRadioGroup--${d}`),"aria-invalid":!!r,"aria-errormessage":p,"data-testid":k,children:l.map(o=>{const n=`${i}-${o.value}`,_=c||o.isDisabled,x=typeof o.description=="string"?`${n}-description`:void 0;return e.jsxRuntimeExports.jsxs("div",{className:s.csx(_&&"proton-CheckboxInput--disabled"),children:[e.jsxRuntimeExports.jsxs("div",{className:s.csx("proton-CheckboxInput__container",t&&"proton-CheckboxInput__container--round"),children:[e.jsxRuntimeExports.jsx(a.RadioGroup.Item,{id:n,value:o.value,disabled:o.isDisabled,className:s.csx("proton-CheckboxInput__input",t&&"proton-CheckboxInput__input--round",r&&"proton-CheckboxInput__input--error"),"aria-describedby":x,children:e.jsxRuntimeExports.jsx(a.RadioGroup.Indicator,{className:s.csx(!t&&"proton-CheckboxRadioGroup__checkmark"),forceMount:!0,children:e.jsxRuntimeExports.jsx(m.CheckboxIndicator,{round:t})})}),typeof o.label=="string"?e.jsxRuntimeExports.jsx("label",{htmlFor:n,className:"proton-CheckboxInput__label",children:o.label}):o.label]}),typeof o.description=="string"?e.jsxRuntimeExports.jsx("div",{id:x,className:"proton-CheckboxRadioGroup__description",children:o.description}):o.description]},o.value)})}),typeof r=="string"?e.jsxRuntimeExports.jsx("div",{role:"alert",className:"proton-CheckboxInput__error",id:p,children:r}):r]})});u.displayName="ProtonUICheckboxRadioGroup";exports.CheckboxRadioGroup=u;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("../../../node_modules/react/jsx-runtime.cjs.js"),u=require("react"),n=require("radix-ui"),f=require("../CheckboxIndicator.cjs.js");;/* empty css                                      */;/* empty css                            */const s=require("../../../utils/string.cjs.js"),l=u.forwardRef(({name:b,items:h,value:R,defaultValue:j,onChange:k,isDisabled:a=!1,isRequired:m=!1,orientation:c="vertical",round:t=!1,error:r,"data-testid":C},_)=>{const d=u.useId(),p=typeof r=="string"?`${d}-error`:void 0;return o.jsxRuntimeExports.jsxs("div",{children:[o.jsxRuntimeExports.jsx(n.RadioGroup.Root,{ref:_,name:b,value:R,defaultValue:j,onValueChange:k,disabled:a,required:m,orientation:c,className:s.csx("proton-CheckboxRadioGroup",`proton-CheckboxRadioGroup--${c}`),"aria-invalid":!!r,"aria-errormessage":p,"data-testid":C,children:h.map((e,I)=>{const i=`${d}-item-${I}`,v=a||e.isDisabled,x=typeof e.description=="string"?`${i}-description`:void 0;return o.jsxRuntimeExports.jsxs("div",{className:s.csx(v&&"proton-CheckboxInput--disabled"),children:[o.jsxRuntimeExports.jsxs("div",{className:s.csx("proton-CheckboxInput__container",t&&"proton-CheckboxInput__container--round"),children:[o.jsxRuntimeExports.jsx(n.RadioGroup.Item,{id:i,value:e.value,disabled:e.isDisabled,className:s.csx("proton-CheckboxInput__input",t&&"proton-CheckboxInput__input--round",r&&"proton-CheckboxInput__input--error"),"aria-describedby":x,children:o.jsxRuntimeExports.jsx(n.RadioGroup.Indicator,{className:s.csx(!t&&"proton-CheckboxRadioGroup__checkmark"),forceMount:!0,children:o.jsxRuntimeExports.jsx(f.CheckboxIndicator,{round:t})})}),typeof e.label=="string"?o.jsxRuntimeExports.jsx("label",{htmlFor:i,className:"proton-CheckboxInput__label",children:e.label}):e.label]}),typeof e.description=="string"?o.jsxRuntimeExports.jsx("div",{id:x,className:"proton-CheckboxRadioGroup__description",children:e.description}):e.description]},e.value)})}),typeof r=="string"?o.jsxRuntimeExports.jsx("div",{role:"alert",className:"proton-CheckboxInput__error",id:p,children:r}):r]})});l.displayName="ProtonUICheckboxRadioGroup";exports.CheckboxRadioGroup=l;
 //# sourceMappingURL=CheckboxRadioGroup.cjs.js.map

package/dist/components/Checkbox/CheckboxRadioGroup/CheckboxRadioGroup.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"CheckboxRadioGroup.cjs.js","sources":["../../../../src/components/Checkbox/CheckboxRadioGroup/CheckboxRadioGroup.tsx"],"sourcesContent":["\"use client\";\n\nimport { forwardRef, ReactNode } from \"react\";\nimport { RadioGroup as RadixRadioGroup } from \"radix-ui\";\nimport { CheckboxIndicator } from \"../CheckboxIndicator\";\n\nimport { csx } from \"../../../utils\";\nimport \"../CheckboxInput/CheckboxInput.css\";\nimport \"./CheckboxRadioGroup.css\";\n\nexport interface CheckboxRadioGroupItem {\n  /**\n   * Unique value for the radio option.\n   */\n  value: string;\n\n  /**\n   * Label displayed next to the radio button.\n   */\n  label: string | ReactNode;\n\n  /**\n   * Optional description text below the label.\n   */\n  description?: string | ReactNode;\n\n  /**\n   * Whether this specific option is disabled.\n   * @default false\n   */\n  isDisabled?: boolean;\n}\n\nexport interface CheckboxRadioGroupProps {\n  /**\n   * The name attribute for the radio group (for form submission).\n   */\n  name: string;\n\n  /**\n   * Array of radio options.\n   */\n  items: CheckboxRadioGroupItem[];\n\n  /**\n   * Currently selected value (controlled mode).\n   */\n  value?: string;\n\n  /**\n   * Default selected value (uncontrolled mode).\n   */\n  defaultValue?: string;\n\n  /**\n   * Callback when selection changes.\n   */\n  onChange?: (value: string) => void;\n\n  /**\n   * Whether the entire group is disabled.\n   * @default false\n   */\n  isDisabled?: boolean;\n\n  /**\n   * Whether selection is required.\n   * @default false\n   */\n  isRequired?: boolean;\n\n  /**\n   * Error message or element.\n   */\n  error?: ReactNode | string;\n\n  /**\n   * Layout orientation.\n   * @default \"vertical\"\n   */\n  orientation?: \"vertical\" | \"horizontal\";\n\n  /**\n   * Whether radio buttons are round or square.\n   * @default false\n   */\n  round?: boolean;\n\n  /**\n   * Test ID for the group.\n   */\n  \"data-testid\"?: string;\n}\n\n/**\n * A declaritive radio group for single-select lists.\n *\n * API:\n *  - {@link CheckboxRadioGroupProps}\n *  - {@link CheckboxRadioGroupItem}\n */\nexport const CheckboxRadioGroup = forwardRef<\n  HTMLDivElement,\n  CheckboxRadioGroupProps\n>(\n  (\n    {\n      name,\n      items,\n      value,\n      defaultValue,\n      onChange,\n      isDisabled = false,\n      isRequired = false,\n      orientation = \"vertical\",\n      round = false,\n      error,\n      \"data-testid\": testId,\n    },\n    ref,\n  ) => {\n    const errorId = typeof error === \"string\" ? `${name}-error` : undefined;\n\n    return (\n      <div>\n        <RadixRadioGroup.Root\n          ref={ref}\n          name={name}\n          value={value}\n          defaultValue={defaultValue}\n          onValueChange={onChange}\n          disabled={isDisabled}\n          required={isRequired}\n          orientation={orientation}\n          className={csx(\n            \"proton-CheckboxRadioGroup\",\n            `proton-CheckboxRadioGroup--${orientation}`,\n          )}\n          aria-invalid={Boolean(error)}\n          aria-errormessage={errorId}\n          data-testid={testId}\n        >\n          {items.map((item) => {\n            const itemId = `${name}-${item.value}`;\n            const itemDisabled = isDisabled || item.isDisabled;\n            const descriptionId =\n              typeof item.description === \"string\"\n                ? `${itemId}-description`\n                : undefined;\n\n            return (\n              <div\n                key={item.value}\n                className={csx(\n                  itemDisabled && \"proton-CheckboxInput--disabled\",\n                )}\n              >\n                <div\n                  className={csx(\n                    \"proton-CheckboxInput__container\",\n                    round && \"proton-CheckboxInput__container--round\",\n                  )}\n                >\n                  <RadixRadioGroup.Item\n                    id={itemId}\n                    value={item.value}\n                    disabled={item.isDisabled}\n                    className={csx(\n                      \"proton-CheckboxInput__input\",\n                      round && \"proton-CheckboxInput__input--round\",\n                      error && \"proton-CheckboxInput__input--error\",\n                    )}\n                    aria-describedby={descriptionId}\n                  >\n                    <RadixRadioGroup.Indicator\n                      className={csx(\n                        !round && \"proton-CheckboxRadioGroup__checkmark\",\n                      )}\n                      forceMount\n                    >\n                      <CheckboxIndicator round={round} />\n                    </RadixRadioGroup.Indicator>\n                  </RadixRadioGroup.Item>\n\n                  {typeof item.label === \"string\" ? (\n                    <label\n                      htmlFor={itemId}\n                      className=\"proton-CheckboxInput__label\"\n                    >\n                      {item.label}\n                    </label>\n                  ) : (\n                    item.label\n                  )}\n                </div>\n\n                {typeof item.description === \"string\" ? (\n                  <div\n                    id={descriptionId}\n                    className=\"proton-CheckboxRadioGroup__description\"\n                  >\n                    {item.description}\n                  </div>\n                ) : (\n                  item.description\n                )}\n              </div>\n            );\n          })}\n        </RadixRadioGroup.Root>\n\n        {typeof error === \"string\" ? (\n          <div\n            role=\"alert\"\n            className=\"proton-CheckboxInput__error\"\n            id={errorId}\n          >\n            {error}\n          </div>\n        ) : (\n          error\n        )}\n      </div>\n    );\n  },\n);\n\nCheckboxRadioGroup.displayName = \"ProtonUICheckboxRadioGroup\";\n"],"names":["CheckboxRadioGroup","forwardRef","name","items","value","defaultValue","onChange","isDisabled","isRequired","orientation","round","error","testId","ref","errorId","jsx","RadixRadioGroup","csx","item","itemId","itemDisabled","descriptionId","jsxs","CheckboxIndicator"],"mappings":"oXAqGaA,EAAqBC,EAAAA,WAIhC,CACE,CACE,KAAAC,EACA,MAAAC,EACA,MAAAC,EACA,aAAAC,EACA,SAAAC,EACA,WAAAC,EAAa,GACb,WAAAC,EAAa,GACb,YAAAC,EAAc,WACd,MAAAC,EAAQ,GACR,MAAAC,EACA,cAAeC,CAAA,EAEjBC,IACG,CACH,MAAMC,EAAU,OAAOH,GAAU,SAAW,GAAGT,CAAI,SAAW,OAE9D,gCACG,MAAA,CACC,SAAA,CAAAa,EAAAA,kBAAAA,IAACC,EAAAA,WAAgB,KAAhB,CACC,IAAAH,EACA,KAAAX,EACA,MAAAE,EACA,aAAAC,EACA,cAAeC,EACf,SAAUC,EACV,SAAUC,EACV,YAAAC,EACA,UAAWQ,EAAAA,IACT,4BACA,8BAA8BR,CAAW,EAAA,EAE3C,eAAc,EAAQE,EACtB,oBAAmBG,EACnB,cAAaF,EAEZ,SAAAT,EAAM,IAAKe,GAAS,CACnB,MAAMC,EAAS,GAAGjB,CAAI,IAAIgB,EAAK,KAAK,GAC9BE,EAAeb,GAAcW,EAAK,WAClCG,EACJ,OAAOH,EAAK,aAAgB,SACxB,GAAGC,CAAM,eACT,OAEN,OACEG,EAAAA,kBAAAA,KAAC,MAAA,CAEC,UAAWL,EAAAA,IACTG,GAAgB,gCAAA,EAGlB,SAAA,CAAAE,EAAAA,kBAAAA,KAAC,MAAA,CACC,UAAWL,EAAAA,IACT,kCACAP,GAAS,wCAAA,EAGX,SAAA,CAAAK,EAAAA,kBAAAA,IAACC,EAAAA,WAAgB,KAAhB,CACC,GAAIG,EACJ,MAAOD,EAAK,MACZ,SAAUA,EAAK,WACf,UAAWD,EAAAA,IACT,8BACAP,GAAS,qCACTC,GAAS,oCAAA,EAEX,mBAAkBU,EAElB,SAAAN,EAAAA,kBAAAA,IAACC,EAAAA,WAAgB,UAAhB,CACC,UAAWC,EAAAA,IACT,CAACP,GAAS,sCAAA,EAEZ,WAAU,GAEV,SAAAK,EAAAA,kBAAAA,IAACQ,qBAAkB,MAAAb,CAAA,CAAc,CAAA,CAAA,CACnC,CAAA,EAGD,OAAOQ,EAAK,OAAU,SACrBH,EAAAA,kBAAAA,IAAC,QAAA,CACC,QAASI,EACT,UAAU,8BAET,SAAAD,EAAK,KAAA,CAAA,EAGRA,EAAK,KAAA,CAAA,CAAA,EAIR,OAAOA,EAAK,aAAgB,SAC3BH,EAAAA,kBAAAA,IAAC,MAAA,CACC,GAAIM,EACJ,UAAU,yCAET,SAAAH,EAAK,WAAA,CAAA,EAGRA,EAAK,WAAA,CAAA,EApDFA,EAAK,KAAA,CAwDhB,CAAC,CAAA,CAAA,EAGF,OAAOP,GAAU,SAChBI,EAAAA,kBAAAA,IAAC,MAAA,CACC,KAAK,QACL,UAAU,8BACV,GAAID,EAEH,SAAAH,CAAA,CAAA,EAGHA,CAAA,EAEJ,CAEJ,CACF,EAEAX,EAAmB,YAAc"}
+{"version":3,"file":"CheckboxRadioGroup.cjs.js","sources":["../../../../src/components/Checkbox/CheckboxRadioGroup/CheckboxRadioGroup.tsx"],"sourcesContent":["\"use client\";\n\nimport { forwardRef, type ReactNode, useId } from \"react\";\nimport { RadioGroup as RadixRadioGroup } from \"radix-ui\";\nimport { CheckboxIndicator } from \"../CheckboxIndicator\";\n\nimport { csx } from \"../../../utils\";\nimport \"../CheckboxInput/CheckboxInput.css\";\nimport \"./CheckboxRadioGroup.css\";\n\nexport interface CheckboxRadioGroupItem {\n  /**\n   * Unique value for the radio option.\n   */\n  value: string;\n\n  /**\n   * Label displayed next to the radio button.\n   */\n  label: string | ReactNode;\n\n  /**\n   * Optional description text below the label.\n   */\n  description?: string | ReactNode;\n\n  /**\n   * Whether this specific option is disabled.\n   * @default false\n   */\n  isDisabled?: boolean;\n}\n\nexport interface CheckboxRadioGroupProps {\n  /**\n   * The name attribute for the radio group (for form submission).\n   */\n  name: string;\n\n  /**\n   * Array of radio options.\n   */\n  items: CheckboxRadioGroupItem[];\n\n  /**\n   * Currently selected value (controlled mode).\n   */\n  value?: string;\n\n  /**\n   * Default selected value (uncontrolled mode).\n   */\n  defaultValue?: string;\n\n  /**\n   * Callback when selection changes.\n   */\n  onChange?: (value: string) => void;\n\n  /**\n   * Whether the entire group is disabled.\n   * @default false\n   */\n  isDisabled?: boolean;\n\n  /**\n   * Whether selection is required.\n   * @default false\n   */\n  isRequired?: boolean;\n\n  /**\n   * Error message or element.\n   */\n  error?: ReactNode | string;\n\n  /**\n   * Layout orientation.\n   * @default \"vertical\"\n   */\n  orientation?: \"vertical\" | \"horizontal\";\n\n  /**\n   * Whether radio buttons are round or square.\n   * @default false\n   */\n  round?: boolean;\n\n  /**\n   * Test ID for the group.\n   */\n  \"data-testid\"?: string;\n}\n\n/**\n * A declaritive radio group for single-select lists.\n *\n * API:\n *  - {@link CheckboxRadioGroupProps}\n *  - {@link CheckboxRadioGroupItem}\n */\nexport const CheckboxRadioGroup = forwardRef<\n  HTMLDivElement,\n  CheckboxRadioGroupProps\n>(\n  (\n    {\n      name,\n      items,\n      value,\n      defaultValue,\n      onChange,\n      isDisabled = false,\n      isRequired = false,\n      orientation = \"vertical\",\n      round = false,\n      error,\n      \"data-testid\": testId,\n    },\n    ref,\n  ) => {\n    const idBase = useId();\n    const errorId = typeof error === \"string\" ? `${idBase}-error` : undefined;\n\n    return (\n      <div>\n        <RadixRadioGroup.Root\n          ref={ref}\n          name={name}\n          value={value}\n          defaultValue={defaultValue}\n          onValueChange={onChange}\n          disabled={isDisabled}\n          required={isRequired}\n          orientation={orientation}\n          className={csx(\n            \"proton-CheckboxRadioGroup\",\n            `proton-CheckboxRadioGroup--${orientation}`,\n          )}\n          aria-invalid={Boolean(error)}\n          aria-errormessage={errorId}\n          data-testid={testId}\n        >\n          {items.map((item, index) => {\n            const itemId = `${idBase}-item-${index}`;\n            const itemDisabled = isDisabled || item.isDisabled;\n            const descriptionId =\n              typeof item.description === \"string\"\n                ? `${itemId}-description`\n                : undefined;\n\n            return (\n              <div\n                key={item.value}\n                className={csx(\n                  itemDisabled && \"proton-CheckboxInput--disabled\",\n                )}\n              >\n                <div\n                  className={csx(\n                    \"proton-CheckboxInput__container\",\n                    round && \"proton-CheckboxInput__container--round\",\n                  )}\n                >\n                  <RadixRadioGroup.Item\n                    id={itemId}\n                    value={item.value}\n                    disabled={item.isDisabled}\n                    className={csx(\n                      \"proton-CheckboxInput__input\",\n                      round && \"proton-CheckboxInput__input--round\",\n                      error && \"proton-CheckboxInput__input--error\",\n                    )}\n                    aria-describedby={descriptionId}\n                  >\n                    <RadixRadioGroup.Indicator\n                      className={csx(\n                        !round && \"proton-CheckboxRadioGroup__checkmark\",\n                      )}\n                      forceMount\n                    >\n                      <CheckboxIndicator round={round} />\n                    </RadixRadioGroup.Indicator>\n                  </RadixRadioGroup.Item>\n\n                  {typeof item.label === \"string\" ? (\n                    <label\n                      htmlFor={itemId}\n                      className=\"proton-CheckboxInput__label\"\n                    >\n                      {item.label}\n                    </label>\n                  ) : (\n                    item.label\n                  )}\n                </div>\n\n                {typeof item.description === \"string\" ? (\n                  <div\n                    id={descriptionId}\n                    className=\"proton-CheckboxRadioGroup__description\"\n                  >\n                    {item.description}\n                  </div>\n                ) : (\n                  item.description\n                )}\n              </div>\n            );\n          })}\n        </RadixRadioGroup.Root>\n\n        {typeof error === \"string\" ? (\n          <div\n            role=\"alert\"\n            className=\"proton-CheckboxInput__error\"\n            id={errorId}\n          >\n            {error}\n          </div>\n        ) : (\n          error\n        )}\n      </div>\n    );\n  },\n);\n\nCheckboxRadioGroup.displayName = \"ProtonUICheckboxRadioGroup\";\n"],"names":["CheckboxRadioGroup","forwardRef","name","items","value","defaultValue","onChange","isDisabled","isRequired","orientation","round","error","testId","ref","idBase","useId","errorId","jsx","RadixRadioGroup","csx","item","index","itemId","itemDisabled","descriptionId","jsxs","CheckboxIndicator"],"mappings":"oXAqGaA,EAAqBC,EAAAA,WAIhC,CACE,CACE,KAAAC,EACA,MAAAC,EACA,MAAAC,EACA,aAAAC,EACA,SAAAC,EACA,WAAAC,EAAa,GACb,WAAAC,EAAa,GACb,YAAAC,EAAc,WACd,MAAAC,EAAQ,GACR,MAAAC,EACA,cAAeC,CAAA,EAEjBC,IACG,CACH,MAAMC,EAASC,EAAAA,MAAA,EACTC,EAAU,OAAOL,GAAU,SAAW,GAAGG,CAAM,SAAW,OAEhE,gCACG,MAAA,CACC,SAAA,CAAAG,EAAAA,kBAAAA,IAACC,EAAAA,WAAgB,KAAhB,CACC,IAAAL,EACA,KAAAX,EACA,MAAAE,EACA,aAAAC,EACA,cAAeC,EACf,SAAUC,EACV,SAAUC,EACV,YAAAC,EACA,UAAWU,EAAAA,IACT,4BACA,8BAA8BV,CAAW,EAAA,EAE3C,eAAc,EAAQE,EACtB,oBAAmBK,EACnB,cAAaJ,EAEZ,SAAAT,EAAM,IAAI,CAACiB,EAAMC,IAAU,CAC1B,MAAMC,EAAS,GAAGR,CAAM,SAASO,CAAK,GAChCE,EAAehB,GAAca,EAAK,WAClCI,EACJ,OAAOJ,EAAK,aAAgB,SACxB,GAAGE,CAAM,eACT,OAEN,OACEG,EAAAA,kBAAAA,KAAC,MAAA,CAEC,UAAWN,EAAAA,IACTI,GAAgB,gCAAA,EAGlB,SAAA,CAAAE,EAAAA,kBAAAA,KAAC,MAAA,CACC,UAAWN,EAAAA,IACT,kCACAT,GAAS,wCAAA,EAGX,SAAA,CAAAO,EAAAA,kBAAAA,IAACC,EAAAA,WAAgB,KAAhB,CACC,GAAII,EACJ,MAAOF,EAAK,MACZ,SAAUA,EAAK,WACf,UAAWD,EAAAA,IACT,8BACAT,GAAS,qCACTC,GAAS,oCAAA,EAEX,mBAAkBa,EAElB,SAAAP,EAAAA,kBAAAA,IAACC,EAAAA,WAAgB,UAAhB,CACC,UAAWC,EAAAA,IACT,CAACT,GAAS,sCAAA,EAEZ,WAAU,GAEV,SAAAO,EAAAA,kBAAAA,IAACS,qBAAkB,MAAAhB,CAAA,CAAc,CAAA,CAAA,CACnC,CAAA,EAGD,OAAOU,EAAK,OAAU,SACrBH,EAAAA,kBAAAA,IAAC,QAAA,CACC,QAASK,EACT,UAAU,8BAET,SAAAF,EAAK,KAAA,CAAA,EAGRA,EAAK,KAAA,CAAA,CAAA,EAIR,OAAOA,EAAK,aAAgB,SAC3BH,EAAAA,kBAAAA,IAAC,MAAA,CACC,GAAIO,EACJ,UAAU,yCAET,SAAAJ,EAAK,WAAA,CAAA,EAGRA,EAAK,WAAA,CAAA,EApDFA,EAAK,KAAA,CAwDhB,CAAC,CAAA,CAAA,EAGF,OAAOT,GAAU,SAChBM,EAAAA,kBAAAA,IAAC,MAAA,CACC,KAAK,QACL,UAAU,8BACV,GAAID,EAEH,SAAAL,CAAA,CAAA,EAGHA,CAAA,EAEJ,CAEJ,CACF,EAEAX,EAAmB,YAAc"}

package/dist/components/Checkbox/CheckboxRadioGroup/CheckboxRadioGroup.es.js

@@ -1,54 +1,54 @@
-import { j as r } from "../../../node_modules/react/jsx-runtime.es.js";
-import { forwardRef as C } from "react";
-import { RadioGroup as n } from "radix-ui";
-import { CheckboxIndicator as I } from "../CheckboxIndicator.es.js";
+import { j as e } from "../../../node_modules/react/jsx-runtime.es.js";
+import { forwardRef as j, useId as v } from "react";
+import { RadioGroup as a } from "radix-ui";
+import { CheckboxIndicator as R } from "../CheckboxIndicator.es.js";
 /* empty css                                    */
 /* empty css                          */
 import { csx as i } from "../../../utils/string.es.js";
-const v = C(
+const N = j(
   ({
-    name: a,
-    items: x,
-    value: u,
-    defaultValue: b,
-    onChange: h,
-    isDisabled: d = !1,
+    name: x,
+    items: u,
+    value: b,
+    defaultValue: h,
+    onChange: m,
+    isDisabled: n = !1,
     isRequired: _ = !1,
-    orientation: c = "vertical",
+    orientation: d = "vertical",
     round: s = !1,
-    error: e,
+    error: r,
     "data-testid": k
   }, f) => {
-    const p = typeof e == "string" ? `${a}-error` : void 0;
-    return /* @__PURE__ */ r.jsxs("div", { children: [
-      /* @__PURE__ */ r.jsx(
-        n.Root,
+    const c = v(), p = typeof r == "string" ? `${c}-error` : void 0;
+    return /* @__PURE__ */ e.jsxs("div", { children: [
+      /* @__PURE__ */ e.jsx(
+        a.Root,
         {
           ref: f,
-          name: a,
-          value: u,
-          defaultValue: b,
-          onValueChange: h,
-          disabled: d,
+          name: x,
+          value: b,
+          defaultValue: h,
+          onValueChange: m,
+          disabled: n,
           required: _,
-          orientation: c,
+          orientation: d,
           className: i(
             "proton-CheckboxRadioGroup",
-            `proton-CheckboxRadioGroup--${c}`
+            `proton-CheckboxRadioGroup--${d}`
           ),
-          "aria-invalid": !!e,
+          "aria-invalid": !!r,
           "aria-errormessage": p,
           "data-testid": k,
-          children: x.map((o) => {
-            const t = `${a}-${o.value}`, m = d || o.isDisabled, l = typeof o.description == "string" ? `${t}-description` : void 0;
-            return /* @__PURE__ */ r.jsxs(
+          children: u.map((o, C) => {
+            const t = `${c}-item-${C}`, I = n || o.isDisabled, l = typeof o.description == "string" ? `${t}-description` : void 0;
+            return /* @__PURE__ */ e.jsxs(
               "div",
               {
                 className: i(
-                  m && "proton-CheckboxInput--disabled"
+                  I && "proton-CheckboxInput--disabled"
                 ),
                 children: [
-                  /* @__PURE__ */ r.jsxs(
+                  /* @__PURE__ */ e.jsxs(
                     "div",
                     {
                       className: i(
@@ -56,8 +56,8 @@ const v = C(
                         s && "proton-CheckboxInput__container--round"
                       ),
                       children: [
-                        /* @__PURE__ */ r.jsx(
-                          n.Item,
+                        /* @__PURE__ */ e.jsx(
+                          a.Item,
                           {
                             id: t,
                             value: o.value,
@@ -65,22 +65,22 @@ const v = C(
                             className: i(
                               "proton-CheckboxInput__input",
                               s && "proton-CheckboxInput__input--round",
-                              e && "proton-CheckboxInput__input--error"
+                              r && "proton-CheckboxInput__input--error"
                             ),
                             "aria-describedby": l,
-                            children: /* @__PURE__ */ r.jsx(
-                              n.Indicator,
+                            children: /* @__PURE__ */ e.jsx(
+                              a.Indicator,
                               {
                                 className: i(
                                   !s && "proton-CheckboxRadioGroup__checkmark"
                                 ),
                                 forceMount: !0,
-                                children: /* @__PURE__ */ r.jsx(I, { round: s })
+                                children: /* @__PURE__ */ e.jsx(R, { round: s })
                               }
                             )
                           }
                         ),
-                        typeof o.label == "string" ? /* @__PURE__ */ r.jsx(
+                        typeof o.label == "string" ? /* @__PURE__ */ e.jsx(
                           "label",
                           {
                             htmlFor: t,
@@ -91,7 +91,7 @@ const v = C(
                       ]
                     }
                   ),
-                  typeof o.description == "string" ? /* @__PURE__ */ r.jsx(
+                  typeof o.description == "string" ? /* @__PURE__ */ e.jsx(
                     "div",
                     {
                       id: l,
@@ -106,20 +106,20 @@ const v = C(
           })
         }
       ),
-      typeof e == "string" ? /* @__PURE__ */ r.jsx(
+      typeof r == "string" ? /* @__PURE__ */ e.jsx(
         "div",
         {
           role: "alert",
           className: "proton-CheckboxInput__error",
           id: p,
-          children: e
+          children: r
         }
-      ) : e
+      ) : r
     ] });
   }
 );
-v.displayName = "ProtonUICheckboxRadioGroup";
+N.displayName = "ProtonUICheckboxRadioGroup";
 export {
-  v as CheckboxRadioGroup
+  N as CheckboxRadioGroup
 };
 //# sourceMappingURL=CheckboxRadioGroup.es.js.map