@protonradio/proton-ui 0.11.33-beta.9 → 0.11.34

package/README.md

@@ -100,7 +100,7 @@ For more advanced theme overrides we utilize the theme class names. The `ThemePr
 
 ```css
 .proton-ui__theme--dark .myComponent[active] {
-  background-color: var(--proton-color__primary-light);
+  background-color: var(--proton-control__interactive-color);
 }
 ```
 

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"),p=require("react"),y=require("../CheckboxIndicator.cjs.js");;/* empty css                       */const c=require("../../../utils/string.cjs.js"),j=p.forwardRef(({checked:k,defaultChecked:f,onChange:i,name:s,value:I,isDisabled:d=!1,isRequired:u=!1,id:m,"data-testid":_,label:o,description:r,error:t,indeterminate:l=!1,round:x=!1},R)=>{const C=p.useRef(null),n=R||C;p.useEffect(()=>{n.current&&(n.current.indeterminate=l)},[l,n]);const v=E=>{i==null||i(E.target.checked)},h=m||`${s}-checkbox`,a=typeof t=="string"?`${s}-error`:void 0,b=typeof r=="string"?`${s}-description`:void 0;return e.jsxRuntimeExports.jsxs("div",{children:[e.jsxRuntimeExports.jsx("div",{className:c.csx(d&&"proton-CheckboxInput--disabled"),children:e.jsxRuntimeExports.jsxs("div",{className:c.csx("proton-CheckboxInput__container",x&&"proton-CheckboxInput__container--round"),children:[typeof o=="string"?e.jsxRuntimeExports.jsx("label",{htmlFor:h,className:"proton-CheckboxInput__label",children:o}):o,e.jsxRuntimeExports.jsxs("span",{className:"proton-CheckboxInput__box",children:[e.jsxRuntimeExports.jsx("input",{ref:n,id:h,name:s,type:"checkbox",checked:k,defaultChecked:f,value:I,disabled:d,required:u,onChange:v,className:c.csx("proton-CheckboxInput__input",t&&"proton-CheckboxInput__input--error",x&&"proton-CheckboxInput__input--round"),"aria-label":o?void 0:s,"aria-invalid":!!t,"aria-errormessage":a,"aria-describedby":[a,b].filter(Boolean).join(" "),"data-testid":_}),e.jsxRuntimeExports.jsx(y.CheckboxIndicator,{round:x})]}),typeof r=="string"?e.jsxRuntimeExports.jsxs("div",{id:b,"aria-live":"polite",children:[r,u&&e.jsxRuntimeExports.jsx("span",{"aria-hidden":"true",children:" *"})]}):r]})}),typeof t=="string"?e.jsxRuntimeExports.jsx("div",{role:"alert",className:c.csx("proton-CheckboxInput__error"),id:a,children:t}):t]})});j.displayName="ProtonUICheckboxInput";exports.CheckboxInput=j;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../../../node_modules/react/jsx-runtime.cjs.js"),x=require("react");;/* empty css                       */const n=require("../../../utils/string.cjs.js"),k=x.forwardRef(({checked:a,defaultChecked:v,onChange:c,name:o,value:I,isDisabled:p=!1,isRequired:u=!1,id:m,"data-testid":_,label:s,description:r,error:t,indeterminate:l=!1,round:h=!1},R)=>{const y=x.useRef(null),i=R||y,b=a!==void 0;x.useEffect(()=>{i.current&&(i.current.indeterminate=l)},[l,i]);const C=g=>{c==null||c(g.target.checked)},f=m||`${o}-checkbox`,d=typeof t=="string"?`${o}-error`:void 0,j=typeof r=="string"?`${o}-description`: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",h&&"proton-CheckboxInput__container--round"),children:[typeof s=="string"?e.jsxRuntimeExports.jsx("label",{htmlFor:f,className:"proton-CheckboxInput__label",children:s}):s,e.jsxRuntimeExports.jsx("input",{ref:i,id:f,name:o,type:"checkbox",checked:b?a:void 0,defaultChecked:b?void 0:v,value:I,disabled:p,required:u,onChange:C,className:n.csx("proton-CheckboxInput__input",t&&"proton-CheckboxInput__input--error",h&&"proton-CheckboxInput__input--round"),"aria-label":s?void 0:o,"aria-invalid":!!t,"aria-errormessage":d,"aria-describedby":[d,j].filter(Boolean).join(" ")||void 0,"data-testid":_}),typeof r=="string"?e.jsxRuntimeExports.jsxs("div",{id:j,"aria-live":"polite",children:[r,u&&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: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 {\n  ChangeEvent,\n  forwardRef,\n  useEffect,\n  useRef,\n  type ReactNode,\n  type RefObject,\n} from \"react\";\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: RefObject<HTMLInputElement>,\n  ) => {\n    const checkboxRef = useRef<HTMLInputElement>(null);\n    const ref = forwardedRef || checkboxRef;\n\n    // indeterminate state can only be set via JS\n    useEffect(() => {\n      if (ref.current) {\n        ref.current.indeterminate = indeterminate;\n      }\n    }, [indeterminate, ref]);\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\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={ref}\n                id={checkboxId}\n                name={name}\n                type=\"checkbox\"\n                checked={controlledChecked}\n                defaultChecked={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={[errorId, descriptionId]\n                  .filter(Boolean)\n                  .join(\" \")}\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","ref","useEffect","handleChange","e","checkboxId","errorId","descriptionId","jsx","csx","jsxs","CheckboxIndicator"],"mappings":"oSAqFaA,EAAgBC,EAAA,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,IAEVC,IACG,CACG,MAAAC,EAAcC,SAAyB,IAAI,EAC3CC,EAAMH,GAAgBC,EAG5BG,EAAAA,UAAU,IAAM,CACVD,EAAI,UACNA,EAAI,QAAQ,cAAgBL,EAC9B,EACC,CAACA,EAAeK,CAAG,CAAC,EAEjB,MAAAE,EAAgBC,GAAqC,CAC9ClB,GAAA,MAAAA,EAAAkB,EAAE,OAAO,QAAO,EAGvBC,EAAad,GAAM,GAAGJ,CAAI,YAC1BmB,EAAU,OAAOX,GAAU,SAAW,GAAGR,CAAI,SAAW,OACxDoB,EACJ,OAAOb,GAAgB,SAAW,GAAGP,CAAI,eAAiB,OAE5D,gCACG,MACC,CAAA,SAAA,CAAAqB,wBAAC,MAAI,CAAA,UAAWC,EAAAA,IAAIpB,GAAc,gCAAgC,EAChE,SAAAqB,EAAA,kBAAA,KAAC,MAAA,CACC,UAAWD,EAAA,IACT,kCACAZ,GAAS,wCACX,EAEC,SAAA,CAAA,OAAOJ,GAAU,SAChBe,EAAA,kBAAA,IAAC,QAAA,CACC,QAASH,EACT,UAAU,8BAET,SAAAZ,CAAA,CAAA,EAGHA,EAGFiB,EAAAA,kBAAAA,KAAC,OAAK,CAAA,UAAU,4BACd,SAAA,CAAAF,EAAA,kBAAA,IAAC,QAAA,CACC,IAAAP,EACA,GAAII,EACJ,KAAAlB,EACA,KAAK,WACL,QAASH,EACT,eAAAC,EACA,MAAAG,EACA,SAAUC,EACV,SAAUC,EACV,SAAUa,EACV,UAAWM,EAAA,IACT,8BACAd,GAAS,qCACTE,GAAS,oCACX,EACA,aAAaJ,EAAe,OAAPN,EACrB,eAAc,EAAQQ,EACtB,oBAAmBW,EACnB,mBAAkB,CAACA,EAASC,CAAa,EACtC,OAAO,OAAO,EACd,KAAK,GAAG,EACX,cAAaf,CAAA,CACf,EACAgB,wBAACG,EAAAA,mBAAkB,MAAAd,EAAc,CAAA,EACnC,EAEC,OAAOH,GAAgB,SACtBgB,EAAAA,kBAAAA,KAAC,OAAI,GAAIH,EAAe,YAAU,SAC/B,SAAA,CAAAb,EACAJ,GAAckB,EAAA,kBAAA,IAAC,OAAK,CAAA,cAAY,OAAO,SAAO,KAAA,CAAA,CAAA,CACjD,EAEAd,CAAA,CAAA,CAAA,EAGN,EAEC,OAAOC,GAAU,SAChBa,EAAA,kBAAA,IAAC,MAAA,CACC,KAAK,QACL,UAAWC,MAAI,6BAA6B,EAC5C,GAAIH,EAEH,SAAAX,CAAA,CAAA,EAGHA,CAEJ,CAAA,CAAA,CAEJ,CACF,EAEAb,EAAc,YAAc"}
+{"version":3,"file":"CheckboxInput.cjs.js","sources":["../../../../src/components/Checkbox/CheckboxInput/CheckboxInput.tsx"],"sourcesContent":["\"use client\";\n\nimport React, { forwardRef, useEffect, useRef } from \"react\";\n\nimport { csx } from \"../../../utils\";\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?: React.ReactNode | string;\n\n  /** The description attribute of the checkbox input. */\n  description?: React.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 | React.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: React.RefObject<HTMLInputElement>,\n  ) => {\n    const checkboxRef = useRef<HTMLInputElement>(null);\n    const ref = forwardedRef || checkboxRef;\n    const isControlled = controlledChecked !== undefined;\n\n    // indeterminate state can only be set via JS\n    useEffect(() => {\n      if (ref.current) {\n        ref.current.indeterminate = indeterminate;\n      }\n    }, [indeterminate, ref]);\n\n    const handleChange = (e: React.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\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            <input\n              ref={ref}\n              id={checkboxId}\n              name={name}\n              type=\"checkbox\"\n              checked={isControlled ? controlledChecked : undefined}\n              defaultChecked={!isControlled ? defaultChecked : undefined}\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={\n                [errorId, descriptionId].filter(Boolean).join(\" \") || undefined\n              }\n              data-testid={testId}\n            />\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","ref","isControlled","useEffect","handleChange","e","checkboxId","errorId","descriptionId","jsx","csx","jsxs"],"mappings":"2PA8EaA,EAAgBC,EAAA,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,IAEVC,IACG,CACG,MAAAC,EAAcC,SAAyB,IAAI,EAC3CC,EAAMH,GAAgBC,EACtBG,EAAelB,IAAsB,OAG3CmB,EAAAA,UAAU,IAAM,CACVF,EAAI,UACNA,EAAI,QAAQ,cAAgBL,EAC9B,EACC,CAACA,EAAeK,CAAG,CAAC,EAEjB,MAAAG,EAAgBC,GAA2C,CACpDnB,GAAA,MAAAA,EAAAmB,EAAE,OAAO,QAAO,EAGvBC,EAAaf,GAAM,GAAGJ,CAAI,YAC1BoB,EAAU,OAAOZ,GAAU,SAAW,GAAGR,CAAI,SAAW,OACxDqB,EACJ,OAAOd,GAAgB,SAAW,GAAGP,CAAI,eAAiB,OAE5D,gCACG,MACC,CAAA,SAAA,CAAAsB,wBAAC,MAAI,CAAA,UAAWC,EAAAA,IAAIrB,GAAc,gCAAgC,EAChE,SAAAsB,EAAA,kBAAA,KAAC,MAAA,CACC,UAAWD,EAAA,IACT,kCACAb,GAAS,wCACX,EAEC,SAAA,CAAA,OAAOJ,GAAU,SAChBgB,EAAA,kBAAA,IAAC,QAAA,CACC,QAASH,EACT,UAAU,8BAET,SAAAb,CAAA,CAAA,EAGHA,EAGFgB,EAAA,kBAAA,IAAC,QAAA,CACC,IAAAR,EACA,GAAIK,EACJ,KAAAnB,EACA,KAAK,WACL,QAASe,EAAelB,EAAoB,OAC5C,eAAiBkB,EAAgC,OAAjBjB,EAChC,MAAAG,EACA,SAAUC,EACV,SAAUC,EACV,SAAUc,EACV,UAAWM,EAAA,IACT,8BACAf,GAAS,qCACTE,GAAS,oCACX,EACA,aAAaJ,EAAe,OAAPN,EACrB,eAAc,EAAQQ,EACtB,oBAAmBY,EACnB,mBACE,CAACA,EAASC,CAAa,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,GAAK,OAExD,cAAahB,CAAA,CACf,EAEC,OAAOE,GAAgB,SACtBiB,EAAAA,kBAAAA,KAAC,OAAI,GAAIH,EAAe,YAAU,SAC/B,SAAA,CAAAd,EACAJ,GAAcmB,EAAA,kBAAA,IAAC,OAAK,CAAA,cAAY,OAAO,SAAO,KAAA,CAAA,CAAA,CACjD,EAEAf,CAAA,CAAA,CAAA,EAGN,EAEC,OAAOC,GAAU,SAChBc,EAAA,kBAAA,IAAC,MAAA,CACC,KAAK,QACL,UAAWC,MAAI,6BAA6B,EAC5C,GAAIH,EAEH,SAAAZ,CAAA,CAAA,EAGHA,CAEJ,CAAA,CAAA,CAEJ,CACF,EAEAb,EAAc,YAAc"}

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

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

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 {\n  ChangeEvent,\n  forwardRef,\n  useEffect,\n  useRef,\n  type ReactNode,\n  type RefObject,\n} from \"react\";\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: RefObject<HTMLInputElement>,\n  ) => {\n    const checkboxRef = useRef<HTMLInputElement>(null);\n    const ref = forwardedRef || checkboxRef;\n\n    // indeterminate state can only be set via JS\n    useEffect(() => {\n      if (ref.current) {\n        ref.current.indeterminate = indeterminate;\n      }\n    }, [indeterminate, ref]);\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\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={ref}\n                id={checkboxId}\n                name={name}\n                type=\"checkbox\"\n                checked={controlledChecked}\n                defaultChecked={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={[errorId, descriptionId]\n                  .filter(Boolean)\n                  .join(\" \")}\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","ref","useEffect","handleChange","e","checkboxId","errorId","descriptionId","jsx","csx","jsxs","CheckboxIndicator"],"mappings":";;;;;AAqFO,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,KAEVC,MACG;AACG,UAAAC,IAAcC,EAAyB,IAAI,GAC3CC,IAAMH,KAAgBC;AAG5B,IAAAG,EAAU,MAAM;AACd,MAAID,EAAI,YACNA,EAAI,QAAQ,gBAAgBL;AAAA,IAC9B,GACC,CAACA,GAAeK,CAAG,CAAC;AAEjB,UAAAE,IAAe,CAACC,MAAqC;AAC9C,MAAAlB,KAAA,QAAAA,EAAAkB,EAAE,OAAO;AAAA,IAAO,GAGvBC,IAAad,KAAM,GAAGJ,CAAI,aAC1BmB,IAAU,OAAOX,KAAU,WAAW,GAAGR,CAAI,WAAW,QACxDoB,IACJ,OAAOb,KAAgB,WAAW,GAAGP,CAAI,iBAAiB;AAE5D,kCACG,OACC,EAAA,UAAA;AAAA,MAAAqB,gBAAAA,MAAC,OAAI,EAAA,WAAWC,EAAIpB,KAAc,gCAAgC,GAChE,UAAAqB,gBAAAA,EAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAWD;AAAA,YACT;AAAA,YACAZ,KAAS;AAAA,UACX;AAAA,UAEC,UAAA;AAAA,YAAA,OAAOJ,KAAU,WAChBe,gBAAAA,EAAA;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,SAASH;AAAA,gBACT,WAAU;AAAA,gBAET,UAAAZ;AAAA,cAAA;AAAA,YAAA,IAGHA;AAAA,YAGFiB,gBAAAA,EAAAA,KAAC,QAAK,EAAA,WAAU,6BACd,UAAA;AAAA,cAAAF,gBAAAA,EAAA;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,KAAAP;AAAA,kBACA,IAAII;AAAA,kBACJ,MAAAlB;AAAA,kBACA,MAAK;AAAA,kBACL,SAASH;AAAA,kBACT,gBAAAC;AAAA,kBACA,OAAAG;AAAA,kBACA,UAAUC;AAAA,kBACV,UAAUC;AAAA,kBACV,UAAUa;AAAA,kBACV,WAAWM;AAAA,oBACT;AAAA,oBACAd,KAAS;AAAA,oBACTE,KAAS;AAAA,kBACX;AAAA,kBACA,cAAaJ,IAAe,SAAPN;AAAA,kBACrB,gBAAc,EAAQQ;AAAA,kBACtB,qBAAmBW;AAAA,kBACnB,oBAAkB,CAACA,GAASC,CAAa,EACtC,OAAO,OAAO,EACd,KAAK,GAAG;AAAA,kBACX,eAAaf;AAAA,gBAAA;AAAA,cACf;AAAA,cACAgB,gBAAAA,MAACG,KAAkB,OAAAd,GAAc;AAAA,YAAA,GACnC;AAAA,YAEC,OAAOH,KAAgB,WACtBgB,gBAAAA,EAAAA,KAAC,SAAI,IAAIH,GAAe,aAAU,UAC/B,UAAA;AAAA,cAAAb;AAAA,cACAJ,KAAckB,gBAAAA,EAAA,IAAC,QAAK,EAAA,eAAY,QAAO,UAAO,MAAA;AAAA,YAAA,EAAA,CACjD,IAEAd;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA,GAGN;AAAA,MAEC,OAAOC,KAAU,WAChBa,gBAAAA,EAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,WAAWC,EAAI,6BAA6B;AAAA,UAC5C,IAAIH;AAAA,UAEH,UAAAX;AAAA,QAAA;AAAA,MAAA,IAGHA;AAAA,IAEJ,EAAA,CAAA;AAAA,EAEJ;AACF;AAEAb,EAAc,cAAc;"}
+{"version":3,"file":"CheckboxInput.es.js","sources":["../../../../src/components/Checkbox/CheckboxInput/CheckboxInput.tsx"],"sourcesContent":["\"use client\";\n\nimport React, { forwardRef, useEffect, useRef } from \"react\";\n\nimport { csx } from \"../../../utils\";\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?: React.ReactNode | string;\n\n  /** The description attribute of the checkbox input. */\n  description?: React.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 | React.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: React.RefObject<HTMLInputElement>,\n  ) => {\n    const checkboxRef = useRef<HTMLInputElement>(null);\n    const ref = forwardedRef || checkboxRef;\n    const isControlled = controlledChecked !== undefined;\n\n    // indeterminate state can only be set via JS\n    useEffect(() => {\n      if (ref.current) {\n        ref.current.indeterminate = indeterminate;\n      }\n    }, [indeterminate, ref]);\n\n    const handleChange = (e: React.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\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            <input\n              ref={ref}\n              id={checkboxId}\n              name={name}\n              type=\"checkbox\"\n              checked={isControlled ? controlledChecked : undefined}\n              defaultChecked={!isControlled ? defaultChecked : undefined}\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={\n                [errorId, descriptionId].filter(Boolean).join(\" \") || undefined\n              }\n              data-testid={testId}\n            />\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","ref","isControlled","useEffect","handleChange","e","checkboxId","errorId","descriptionId","jsx","csx","jsxs"],"mappings":";;;;AA8EO,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,KAEVC,MACG;AACG,UAAAC,IAAcC,EAAyB,IAAI,GAC3CC,IAAMH,KAAgBC,GACtBG,IAAelB,MAAsB;AAG3C,IAAAmB,EAAU,MAAM;AACd,MAAIF,EAAI,YACNA,EAAI,QAAQ,gBAAgBL;AAAA,IAC9B,GACC,CAACA,GAAeK,CAAG,CAAC;AAEjB,UAAAG,IAAe,CAACC,MAA2C;AACpD,MAAAnB,KAAA,QAAAA,EAAAmB,EAAE,OAAO;AAAA,IAAO,GAGvBC,IAAaf,KAAM,GAAGJ,CAAI,aAC1BoB,IAAU,OAAOZ,KAAU,WAAW,GAAGR,CAAI,WAAW,QACxDqB,IACJ,OAAOd,KAAgB,WAAW,GAAGP,CAAI,iBAAiB;AAE5D,kCACG,OACC,EAAA,UAAA;AAAA,MAAAsB,gBAAAA,MAAC,OAAI,EAAA,WAAWC,EAAIrB,KAAc,gCAAgC,GAChE,UAAAsB,gBAAAA,EAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAWD;AAAA,YACT;AAAA,YACAb,KAAS;AAAA,UACX;AAAA,UAEC,UAAA;AAAA,YAAA,OAAOJ,KAAU,WAChBgB,gBAAAA,EAAA;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,SAASH;AAAA,gBACT,WAAU;AAAA,gBAET,UAAAb;AAAA,cAAA;AAAA,YAAA,IAGHA;AAAA,YAGFgB,gBAAAA,EAAA;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,KAAAR;AAAA,gBACA,IAAIK;AAAA,gBACJ,MAAAnB;AAAA,gBACA,MAAK;AAAA,gBACL,SAASe,IAAelB,IAAoB;AAAA,gBAC5C,gBAAiBkB,IAAgC,SAAjBjB;AAAA,gBAChC,OAAAG;AAAA,gBACA,UAAUC;AAAA,gBACV,UAAUC;AAAA,gBACV,UAAUc;AAAA,gBACV,WAAWM;AAAA,kBACT;AAAA,kBACAf,KAAS;AAAA,kBACTE,KAAS;AAAA,gBACX;AAAA,gBACA,cAAaJ,IAAe,SAAPN;AAAA,gBACrB,gBAAc,EAAQQ;AAAA,gBACtB,qBAAmBY;AAAA,gBACnB,oBACE,CAACA,GAASC,CAAa,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,KAAK;AAAA,gBAExD,eAAahB;AAAA,cAAA;AAAA,YACf;AAAA,YAEC,OAAOE,KAAgB,WACtBiB,gBAAAA,EAAAA,KAAC,SAAI,IAAIH,GAAe,aAAU,UAC/B,UAAA;AAAA,cAAAd;AAAA,cACAJ,KAAcmB,gBAAAA,EAAA,IAAC,QAAK,EAAA,eAAY,QAAO,UAAO,MAAA;AAAA,YAAA,EAAA,CACjD,IAEAf;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA,GAGN;AAAA,MAEC,OAAOC,KAAU,WAChBc,gBAAAA,EAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,WAAWC,EAAI,6BAA6B;AAAA,UAC5C,IAAIH;AAAA,UAEH,UAAAZ;AAAA,QAAA;AAAA,MAAA,IAGHA;AAAA,IAEJ,EAAA,CAAA;AAAA,EAEJ;AACF;AAEAb,EAAc,cAAc;"}

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 e=require("../../../node_modules/react/jsx-runtime.cjs.js"),v=require("react"),n=require("radix-ui");;/* empty css                                      */;/* empty css                            */const s=require("../../../utils/string.cjs.js"),u=v.forwardRef(({name:i,items:x,value:b,defaultValue:h,onChange:R,isDisabled:a=!1,isRequired:j=!1,orientation:d="vertical",round:c=!1,error:r,"data-testid":_},C)=>{const p=typeof r=="string"?`${i}-error`:void 0;return e.jsxRuntimeExports.jsxs("div",{children:[e.jsxRuntimeExports.jsx(n.RadioGroup.Root,{ref:C,name:i,value:b,defaultValue:h,onValueChange:R,disabled:a,required:j,orientation:d,className:s.csx("proton-CheckboxRadioGroup",`proton-CheckboxRadioGroup--${d}`),"aria-invalid":!!r,"aria-errormessage":p,"data-testid":_,children:x.map(o=>{const t=`${i}-${o.value}`,k=a||o.isDisabled,l=typeof o.description=="string"?`${t}-description`:void 0;return e.jsxRuntimeExports.jsxs("div",{className:s.csx(k&&"proton-CheckboxInput--disabled"),children:[e.jsxRuntimeExports.jsxs("div",{className:s.csx("proton-CheckboxInput__container",c&&"proton-CheckboxInput__container--round"),children:[e.jsxRuntimeExports.jsx(n.RadioGroup.Item,{id:t,value:o.value,disabled:o.isDisabled,className:s.csx("proton-CheckboxInput__input",c&&"proton-CheckboxInput__input--round",r&&"proton-CheckboxInput__input--error"),"aria-describedby":l,children:e.jsxRuntimeExports.jsx(n.RadioGroup.Indicator,{className:"proton-CheckboxRadioGroup__indicator"})}),typeof o.label=="string"?e.jsxRuntimeExports.jsx("label",{htmlFor:t,className:"proton-CheckboxInput__label",children:o.label}):o.label]}),typeof o.description=="string"?e.jsxRuntimeExports.jsx("div",{id:l,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;
 //# 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,EAAA,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,GAEjBC,IACG,CACH,MAAMC,EAAU,OAAOH,GAAU,SAAW,GAAGT,CAAI,SAAW,OAE9D,gCACG,MACC,CAAA,SAAA,CAAAa,EAAA,kBAAA,IAACC,EAAAA,WAAgB,KAAhB,CACC,IAAAH,EACA,KAAAX,EACA,MAAAE,EACA,aAAAC,EACA,cAAeC,EACf,SAAUC,EACV,SAAUC,EACV,YAAAC,EACA,UAAWQ,EAAA,IACT,4BACA,8BAA8BR,CAAW,EAC3C,EACA,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,OAGJ,OAAAG,EAAA,kBAAA,KAAC,MAAA,CAEC,UAAWL,EAAA,IACTG,GAAgB,gCAClB,EAEA,SAAA,CAAAE,EAAA,kBAAA,KAAC,MAAA,CACC,UAAWL,EAAA,IACT,kCACAP,GAAS,wCACX,EAEA,SAAA,CAAAK,EAAA,kBAAA,IAACC,EAAAA,WAAgB,KAAhB,CACC,GAAIG,EACJ,MAAOD,EAAK,MACZ,SAAUA,EAAK,WACf,UAAWD,EAAA,IACT,8BACAP,GAAS,qCACTC,GAAS,oCACX,EACA,mBAAkBU,EAElB,SAAAN,EAAA,kBAAA,IAACC,EAAAA,WAAgB,UAAhB,CACC,UAAWC,EAAA,IACT,CAACP,GAAS,sCACZ,EACA,WAAU,GAEV,SAAAK,EAAA,kBAAA,IAACQ,qBAAkB,MAAAb,CAAc,CAAA,CAAA,CACnC,CAAA,CACF,EAEC,OAAOQ,EAAK,OAAU,SACrBH,EAAA,kBAAA,IAAC,QAAA,CACC,QAASI,EACT,UAAU,8BAET,SAAKD,EAAA,KAAA,GAGRA,EAAK,KAAA,CAAA,CAET,EAEC,OAAOA,EAAK,aAAgB,SAC3BH,EAAA,kBAAA,IAAC,MAAA,CACC,GAAIM,EACJ,UAAU,yCAET,SAAKH,EAAA,WAAA,GAGRA,EAAK,WAAA,CAAA,EApDFA,EAAK,KAAA,CAsDZ,CAEH,CAAA,CACH,EAEC,OAAOP,GAAU,SAChBI,EAAA,kBAAA,IAAC,MAAA,CACC,KAAK,QACL,UAAU,8BACV,GAAID,EAEH,SAAAH,CAAA,CAAA,EAGHA,CAEJ,CAAA,CAAA,CAEJ,CACF,EAEAX,EAAmB,YAAc"}
+{"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\";\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 className=\"proton-CheckboxRadioGroup__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"],"mappings":"2UAoGaA,EAAqBC,EAAA,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,GAEjBC,IACG,CACH,MAAMC,EAAU,OAAOH,GAAU,SAAW,GAAGT,CAAI,SAAW,OAE9D,gCACG,MACC,CAAA,SAAA,CAAAa,EAAA,kBAAA,IAACC,EAAAA,WAAgB,KAAhB,CACC,IAAAH,EACA,KAAAX,EACA,MAAAE,EACA,aAAAC,EACA,cAAeC,EACf,SAAUC,EACV,SAAUC,EACV,YAAAC,EACA,UAAWQ,EAAA,IACT,4BACA,8BAA8BR,CAAW,EAC3C,EACA,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,OAGJ,OAAAG,EAAA,kBAAA,KAAC,MAAA,CAEC,UAAWL,EAAA,IACTG,GAAgB,gCAClB,EAEA,SAAA,CAAAE,EAAA,kBAAA,KAAC,MAAA,CACC,UAAWL,EAAA,IACT,kCACAP,GAAS,wCACX,EAEA,SAAA,CAAAK,EAAA,kBAAA,IAACC,EAAAA,WAAgB,KAAhB,CACC,GAAIG,EACJ,MAAOD,EAAK,MACZ,SAAUA,EAAK,WACf,UAAWD,EAAA,IACT,8BACAP,GAAS,qCACTC,GAAS,oCACX,EACA,mBAAkBU,EAElB,SAACN,EAAA,kBAAA,IAAAC,EAAA,WAAgB,UAAhB,CAA0B,UAAU,uCAAuC,CAAA,CAC9E,EAEC,OAAOE,EAAK,OAAU,SACrBH,EAAA,kBAAA,IAAC,QAAA,CACC,QAASI,EACT,UAAU,8BAET,SAAKD,EAAA,KAAA,GAGRA,EAAK,KAAA,CAAA,CAET,EAEC,OAAOA,EAAK,aAAgB,SAC3BH,EAAA,kBAAA,IAAC,MAAA,CACC,GAAIM,EACJ,UAAU,yCAET,SAAKH,EAAA,WAAA,GAGRA,EAAK,WAAA,CAAA,EA7CFA,EAAK,KAAA,CA+CZ,CAEH,CAAA,CACH,EAEC,OAAOP,GAAU,SAChBI,EAAA,kBAAA,IAAC,MAAA,CACC,KAAK,QACL,UAAU,8BACV,GAAID,EAEH,SAAAH,CAAA,CAAA,EAGHA,CAEJ,CAAA,CAAA,CAEJ,CACF,EAEAX,EAAmB,YAAc"}

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

@@ -1,51 +1,50 @@
 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 { forwardRef as I } from "react";
+import { RadioGroup as t } from "radix-ui";
 /* empty css                                    */
 /* empty css                          */
 import { csx as i } from "../../../utils/string.es.js";
-const v = C(
+const m = I(
   ({
-    name: a,
-    items: x,
-    value: u,
+    name: s,
+    items: u,
+    value: x,
     defaultValue: b,
     onChange: h,
-    isDisabled: d = !1,
+    isDisabled: n = !1,
     isRequired: _ = !1,
-    orientation: c = "vertical",
-    round: s = !1,
+    orientation: d = "vertical",
+    round: p = !1,
     error: e,
-    "data-testid": k
+    "data-testid": C
   }, f) => {
-    const p = typeof e == "string" ? `${a}-error` : void 0;
+    const c = typeof e == "string" ? `${s}-error` : void 0;
     return /* @__PURE__ */ r.jsxs("div", { children: [
       /* @__PURE__ */ r.jsx(
-        n.Root,
+        t.Root,
         {
           ref: f,
-          name: a,
-          value: u,
+          name: s,
+          value: x,
           defaultValue: b,
           onValueChange: h,
-          disabled: d,
+          disabled: n,
           required: _,
-          orientation: c,
+          orientation: d,
           className: i(
             "proton-CheckboxRadioGroup",
-            `proton-CheckboxRadioGroup--${c}`
+            `proton-CheckboxRadioGroup--${d}`
           ),
           "aria-invalid": !!e,
-          "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;
+          "aria-errormessage": c,
+          "data-testid": C,
+          children: u.map((o) => {
+            const a = `${s}-${o.value}`, k = n || o.isDisabled, l = typeof o.description == "string" ? `${a}-description` : void 0;
             return /* @__PURE__ */ r.jsxs(
               "div",
               {
                 className: i(
-                  m && "proton-CheckboxInput--disabled"
+                  k && "proton-CheckboxInput--disabled"
                 ),
                 children: [
                   /* @__PURE__ */ r.jsxs(
@@ -53,37 +52,28 @@ const v = C(
                     {
                       className: i(
                         "proton-CheckboxInput__container",
-                        s && "proton-CheckboxInput__container--round"
+                        p && "proton-CheckboxInput__container--round"
                       ),
                       children: [
                         /* @__PURE__ */ r.jsx(
-                          n.Item,
+                          t.Item,
                           {
-                            id: t,
+                            id: a,
                             value: o.value,
                             disabled: o.isDisabled,
                             className: i(
                               "proton-CheckboxInput__input",
-                              s && "proton-CheckboxInput__input--round",
+                              p && "proton-CheckboxInput__input--round",
                               e && "proton-CheckboxInput__input--error"
                             ),
                             "aria-describedby": l,
-                            children: /* @__PURE__ */ r.jsx(
-                              n.Indicator,
-                              {
-                                className: i(
-                                  !s && "proton-CheckboxRadioGroup__checkmark"
-                                ),
-                                forceMount: !0,
-                                children: /* @__PURE__ */ r.jsx(I, { round: s })
-                              }
-                            )
+                            children: /* @__PURE__ */ r.jsx(t.Indicator, { className: "proton-CheckboxRadioGroup__indicator" })
                           }
                         ),
                         typeof o.label == "string" ? /* @__PURE__ */ r.jsx(
                           "label",
                           {
-                            htmlFor: t,
+                            htmlFor: a,
                             className: "proton-CheckboxInput__label",
                             children: o.label
                           }
@@ -111,15 +101,15 @@ const v = C(
         {
           role: "alert",
           className: "proton-CheckboxInput__error",
-          id: p,
+          id: c,
           children: e
         }
       ) : e
     ] });
   }
 );
-v.displayName = "ProtonUICheckboxRadioGroup";
+m.displayName = "ProtonUICheckboxRadioGroup";
 export {
-  v as CheckboxRadioGroup
+  m as CheckboxRadioGroup
 };
 //# sourceMappingURL=CheckboxRadioGroup.es.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"CheckboxRadioGroup.es.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":";;;;;;;AAqGO,MAAMA,IAAqBC;AAAA,EAIhC,CACE;AAAA,IACE,MAAAC;AAAA,IACA,OAAAC;AAAA,IACA,OAAAC;AAAA,IACA,cAAAC;AAAA,IACA,UAAAC;AAAA,IACA,YAAAC,IAAa;AAAA,IACb,YAAAC,IAAa;AAAA,IACb,aAAAC,IAAc;AAAA,IACd,OAAAC,IAAQ;AAAA,IACR,OAAAC;AAAA,IACA,eAAeC;AAAA,KAEjBC,MACG;AACH,UAAMC,IAAU,OAAOH,KAAU,WAAW,GAAGT,CAAI,WAAW;AAE9D,kCACG,OACC,EAAA,UAAA;AAAA,MAAAa,gBAAAA,EAAA;AAAA,QAACC,EAAgB;AAAA,QAAhB;AAAA,UACC,KAAAH;AAAA,UACA,MAAAX;AAAA,UACA,OAAAE;AAAA,UACA,cAAAC;AAAA,UACA,eAAeC;AAAA,UACf,UAAUC;AAAA,UACV,UAAUC;AAAA,UACV,aAAAC;AAAA,UACA,WAAWQ;AAAA,YACT;AAAA,YACA,8BAA8BR,CAAW;AAAA,UAC3C;AAAA,UACA,gBAAc,EAAQE;AAAA,UACtB,qBAAmBG;AAAA,UACnB,eAAaF;AAAA,UAEZ,UAAAT,EAAM,IAAI,CAACe,MAAS;AACnB,kBAAMC,IAAS,GAAGjB,CAAI,IAAIgB,EAAK,KAAK,IAC9BE,IAAeb,KAAcW,EAAK,YAClCG,IACJ,OAAOH,EAAK,eAAgB,WACxB,GAAGC,CAAM,iBACT;AAGJ,mBAAAG,gBAAAA,EAAA;AAAA,cAAC;AAAA,cAAA;AAAA,gBAEC,WAAWL;AAAA,kBACTG,KAAgB;AAAA,gBAClB;AAAA,gBAEA,UAAA;AAAA,kBAAAE,gBAAAA,EAAA;AAAA,oBAAC;AAAA,oBAAA;AAAA,sBACC,WAAWL;AAAA,wBACT;AAAA,wBACAP,KAAS;AAAA,sBACX;AAAA,sBAEA,UAAA;AAAA,wBAAAK,gBAAAA,EAAA;AAAA,0BAACC,EAAgB;AAAA,0BAAhB;AAAA,4BACC,IAAIG;AAAA,4BACJ,OAAOD,EAAK;AAAA,4BACZ,UAAUA,EAAK;AAAA,4BACf,WAAWD;AAAA,8BACT;AAAA,8BACAP,KAAS;AAAA,8BACTC,KAAS;AAAA,4BACX;AAAA,4BACA,oBAAkBU;AAAA,4BAElB,UAAAN,gBAAAA,EAAA;AAAA,8BAACC,EAAgB;AAAA,8BAAhB;AAAA,gCACC,WAAWC;AAAA,kCACT,CAACP,KAAS;AAAA,gCACZ;AAAA,gCACA,YAAU;AAAA,gCAEV,UAAAK,gBAAAA,EAAA,IAACQ,KAAkB,OAAAb,EAAc,CAAA;AAAA,8BAAA;AAAA,4BACnC;AAAA,0BAAA;AAAA,wBACF;AAAA,wBAEC,OAAOQ,EAAK,SAAU,WACrBH,gBAAAA,EAAA;AAAA,0BAAC;AAAA,0BAAA;AAAA,4BACC,SAASI;AAAA,4BACT,WAAU;AAAA,4BAET,UAAKD,EAAA;AAAA,0BAAA;AAAA,4BAGRA,EAAK;AAAA,sBAAA;AAAA,oBAAA;AAAA,kBAET;AAAA,kBAEC,OAAOA,EAAK,eAAgB,WAC3BH,gBAAAA,EAAA;AAAA,oBAAC;AAAA,oBAAA;AAAA,sBACC,IAAIM;AAAA,sBACJ,WAAU;AAAA,sBAET,UAAKH,EAAA;AAAA,oBAAA;AAAA,sBAGRA,EAAK;AAAA,gBAAA;AAAA,cAAA;AAAA,cApDFA,EAAK;AAAA,YAAA;AAAA,UAsDZ,CAEH;AAAA,QAAA;AAAA,MACH;AAAA,MAEC,OAAOP,KAAU,WAChBI,gBAAAA,EAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,WAAU;AAAA,UACV,IAAID;AAAA,UAEH,UAAAH;AAAA,QAAA;AAAA,MAAA,IAGHA;AAAA,IAEJ,EAAA,CAAA;AAAA,EAEJ;AACF;AAEAX,EAAmB,cAAc;"}
+{"version":3,"file":"CheckboxRadioGroup.es.js","sources":["../../../../src/components/Checkbox/CheckboxRadioGroup/CheckboxRadioGroup.tsx"],"sourcesContent":["\"use client\";\n\nimport { forwardRef, ReactNode } from \"react\";\nimport { RadioGroup as RadixRadioGroup } from \"radix-ui\";\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 className=\"proton-CheckboxRadioGroup__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"],"mappings":";;;;;;AAoGO,MAAMA,IAAqBC;AAAA,EAIhC,CACE;AAAA,IACE,MAAAC;AAAA,IACA,OAAAC;AAAA,IACA,OAAAC;AAAA,IACA,cAAAC;AAAA,IACA,UAAAC;AAAA,IACA,YAAAC,IAAa;AAAA,IACb,YAAAC,IAAa;AAAA,IACb,aAAAC,IAAc;AAAA,IACd,OAAAC,IAAQ;AAAA,IACR,OAAAC;AAAA,IACA,eAAeC;AAAA,KAEjBC,MACG;AACH,UAAMC,IAAU,OAAOH,KAAU,WAAW,GAAGT,CAAI,WAAW;AAE9D,kCACG,OACC,EAAA,UAAA;AAAA,MAAAa,gBAAAA,EAAA;AAAA,QAACC,EAAgB;AAAA,QAAhB;AAAA,UACC,KAAAH;AAAA,UACA,MAAAX;AAAA,UACA,OAAAE;AAAA,UACA,cAAAC;AAAA,UACA,eAAeC;AAAA,UACf,UAAUC;AAAA,UACV,UAAUC;AAAA,UACV,aAAAC;AAAA,UACA,WAAWQ;AAAA,YACT;AAAA,YACA,8BAA8BR,CAAW;AAAA,UAC3C;AAAA,UACA,gBAAc,EAAQE;AAAA,UACtB,qBAAmBG;AAAA,UACnB,eAAaF;AAAA,UAEZ,UAAAT,EAAM,IAAI,CAACe,MAAS;AACnB,kBAAMC,IAAS,GAAGjB,CAAI,IAAIgB,EAAK,KAAK,IAC9BE,IAAeb,KAAcW,EAAK,YAClCG,IACJ,OAAOH,EAAK,eAAgB,WACxB,GAAGC,CAAM,iBACT;AAGJ,mBAAAG,gBAAAA,EAAA;AAAA,cAAC;AAAA,cAAA;AAAA,gBAEC,WAAWL;AAAA,kBACTG,KAAgB;AAAA,gBAClB;AAAA,gBAEA,UAAA;AAAA,kBAAAE,gBAAAA,EAAA;AAAA,oBAAC;AAAA,oBAAA;AAAA,sBACC,WAAWL;AAAA,wBACT;AAAA,wBACAP,KAAS;AAAA,sBACX;AAAA,sBAEA,UAAA;AAAA,wBAAAK,gBAAAA,EAAA;AAAA,0BAACC,EAAgB;AAAA,0BAAhB;AAAA,4BACC,IAAIG;AAAA,4BACJ,OAAOD,EAAK;AAAA,4BACZ,UAAUA,EAAK;AAAA,4BACf,WAAWD;AAAA,8BACT;AAAA,8BACAP,KAAS;AAAA,8BACTC,KAAS;AAAA,4BACX;AAAA,4BACA,oBAAkBU;AAAA,4BAElB,UAACN,gBAAAA,EAAA,IAAAC,EAAgB,WAAhB,EAA0B,WAAU,wCAAuC;AAAA,0BAAA;AAAA,wBAC9E;AAAA,wBAEC,OAAOE,EAAK,SAAU,WACrBH,gBAAAA,EAAA;AAAA,0BAAC;AAAA,0BAAA;AAAA,4BACC,SAASI;AAAA,4BACT,WAAU;AAAA,4BAET,UAAKD,EAAA;AAAA,0BAAA;AAAA,4BAGRA,EAAK;AAAA,sBAAA;AAAA,oBAAA;AAAA,kBAET;AAAA,kBAEC,OAAOA,EAAK,eAAgB,WAC3BH,gBAAAA,EAAA;AAAA,oBAAC;AAAA,oBAAA;AAAA,sBACC,IAAIM;AAAA,sBACJ,WAAU;AAAA,sBAET,UAAKH,EAAA;AAAA,oBAAA;AAAA,sBAGRA,EAAK;AAAA,gBAAA;AAAA,cAAA;AAAA,cA7CFA,EAAK;AAAA,YAAA;AAAA,UA+CZ,CAEH;AAAA,QAAA;AAAA,MACH;AAAA,MAEC,OAAOP,KAAU,WAChBI,gBAAAA,EAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,WAAU;AAAA,UACV,IAAID;AAAA,UAEH,UAAAH;AAAA,QAAA;AAAA,MAAA,IAGHA;AAAA,IAEJ,EAAA,CAAA;AAAA,EAEJ;AACF;AAEAX,EAAmB,cAAc;"}

package/dist/components/Dialog/Dialog.cjs.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("../../node_modules/react/jsx-runtime.cjs.js"),n=require("react"),u=require("../../node_modules/@react-aria/dialog/dist/useDialog.cjs.js");;/* empty css                */function a({title:e,children:s,...i}){let r=n.useRef(null),{dialogProps:t,titleProps:l}=u.useDialog(i,r);return o.jsxRuntimeExports.jsxs("div",{...t,ref:r,className:"proton-Dialog",children:[e&&o.jsxRuntimeExports.jsx("h3",{...l,className:"proton-Dialog__header",children:e}),s]})}exports.Dialog=a;
+//# sourceMappingURL=Dialog.cjs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Dialog.cjs.js","sources":["../../../src/components/Dialog/Dialog.tsx"],"sourcesContent":["\"use client\";\n\nimport { useRef } from \"react\";\nimport { type AriaDialogProps, useDialog } from \"@react-aria/dialog\";\n\nimport \"./Dialog.css\";\n\ninterface DialogProps extends AriaDialogProps {\n  title?: React.ReactNode;\n  children: React.ReactNode;\n}\n\n/**\n * Intended use in overlay containers such as modals or popovers.\n *\n * API:\n *  - {@link DialogProps}\n *  - extends {@link AriaDialogProps}\n */\nexport function Dialog({ title, children, ...props }: DialogProps) {\n  let ref = useRef(null);\n  let { dialogProps, titleProps } = useDialog(props, ref);\n\n  return (\n    <div {...dialogProps} ref={ref} className=\"proton-Dialog\">\n      {title && (\n        <h3 {...titleProps} className=\"proton-Dialog__header\">\n          {title}\n        </h3>\n      )}\n      {children}\n    </div>\n  );\n}\n"],"names":["Dialog","title","children","props","ref","useRef","dialogProps","titleProps","useDialog"],"mappings":"0QAmBO,SAASA,EAAO,CAAE,MAAAC,EAAO,SAAAC,EAAU,GAAGC,GAAsB,CAC7D,IAAAC,EAAMC,SAAO,IAAI,EACjB,CAAE,YAAAC,EAAa,WAAAC,CAAA,EAAeC,EAAAA,UAAUL,EAAOC,CAAG,EAEtD,gCACG,MAAK,CAAA,GAAGE,EAAa,IAAAF,EAAU,UAAU,gBACvC,SAAA,CAAAH,2BACE,KAAI,CAAA,GAAGM,EAAY,UAAU,wBAC3B,SACHN,EAAA,EAEDC,CACH,CAAA,CAAA,CAEJ"}

package/dist/components/Dialog/Dialog.es.js

@@ -0,0 +1,15 @@
+import { j as r } from "../../node_modules/react/jsx-runtime.es.js";
+import { useRef as a } from "react";
+import { useDialog as p } from "../../node_modules/@react-aria/dialog/dist/useDialog.es.js";
+/* empty css              */
+function u({ title: o, children: s, ...i }) {
+  let e = a(null), { dialogProps: t, titleProps: l } = p(i, e);
+  return /* @__PURE__ */ r.jsxs("div", { ...t, ref: e, className: "proton-Dialog", children: [
+    o && /* @__PURE__ */ r.jsx("h3", { ...l, className: "proton-Dialog__header", children: o }),
+    s
+  ] });
+}
+export {
+  u as Dialog
+};
+//# sourceMappingURL=Dialog.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Dialog.es.js","sources":["../../../src/components/Dialog/Dialog.tsx"],"sourcesContent":["\"use client\";\n\nimport { useRef } from \"react\";\nimport { type AriaDialogProps, useDialog } from \"@react-aria/dialog\";\n\nimport \"./Dialog.css\";\n\ninterface DialogProps extends AriaDialogProps {\n  title?: React.ReactNode;\n  children: React.ReactNode;\n}\n\n/**\n * Intended use in overlay containers such as modals or popovers.\n *\n * API:\n *  - {@link DialogProps}\n *  - extends {@link AriaDialogProps}\n */\nexport function Dialog({ title, children, ...props }: DialogProps) {\n  let ref = useRef(null);\n  let { dialogProps, titleProps } = useDialog(props, ref);\n\n  return (\n    <div {...dialogProps} ref={ref} className=\"proton-Dialog\">\n      {title && (\n        <h3 {...titleProps} className=\"proton-Dialog__header\">\n          {title}\n        </h3>\n      )}\n      {children}\n    </div>\n  );\n}\n"],"names":["Dialog","title","children","props","ref","useRef","dialogProps","titleProps","useDialog"],"mappings":";;;;AAmBO,SAASA,EAAO,EAAE,OAAAC,GAAO,UAAAC,GAAU,GAAGC,KAAsB;AAC7D,MAAAC,IAAMC,EAAO,IAAI,GACjB,EAAE,aAAAC,GAAa,YAAAC,EAAA,IAAeC,EAAUL,GAAOC,CAAG;AAEtD,gCACG,OAAK,EAAA,GAAGE,GAAa,KAAAF,GAAU,WAAU,iBACvC,UAAA;AAAA,IAAAH,2BACE,MAAI,EAAA,GAAGM,GAAY,WAAU,yBAC3B,UACHN,GAAA;AAAA,IAEDC;AAAA,EACH,EAAA,CAAA;AAEJ;"}

package/dist/components/Elevation/Elevation.cjs.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("../../node_modules/react/jsx-runtime.cjs.js"),e=require("../../node_modules/color2k/dist/index.exports.import.es.cjs.js"),m=require("../ThemeProvider.cjs.js");;/* empty css                   */const v=require("../../utils/string.cjs.js"),x=({children:o,hasPrimaryGradient:s=!1,"data-testid":i})=>{const{hasPalette:l,palette:n,style:c}=m.useTheme(),t=c["--proton-control__elevation-color"];let r=t,a=e.transparentize(t,.01);if(l&&(r=e.transparentize(t,.1),a=e.transparentize(t,.12),s)){const p=e.transparentize(n.PRIMARY.MEDIUM_LIGHT,.88),d=e.transparentize(n.PRIMARY.LIGHT,.84);r=e.mix(r,p,.15),a=e.mix(a,d,.15)}return u.jsxRuntimeExports.jsx("div",{className:v.csx("proton-Elevation","proton-Elevation--glass"),"data-testid":i,role:"presentation","aria-label":"Elevated content area",style:{background:`linear-gradient(to top left, ${r}, ${a})`},children:o})};exports.Elevation=x;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("../../node_modules/react/jsx-runtime.cjs.js"),e=require("../../node_modules/color2k/dist/index.exports.import.es.cjs.js"),m=require("../ThemeProvider.cjs.js");;/* empty css                   */const x=({children:o,hasPrimaryGradient:i=!1,"data-testid":s})=>{const{hasPalette:l,palette:n,style:c}=m.useTheme(),t=c["--proton-control__background-color-light"];let r=t,a=e.transparentize(t,.01);if(l&&(r=e.transparentize(t,.1),a=e.transparentize(t,.12),i)){const d=e.transparentize(n.PRIMARY.MEDIUM_LIGHT,.88),p=e.transparentize(n.PRIMARY.LIGHT,.84);r=e.mix(r,d,.15),a=e.mix(a,p,.15)}return u.jsxRuntimeExports.jsx("div",{className:"proton-Elevation","data-testid":s,role:"presentation","aria-label":"Elevated content area",style:{background:`linear-gradient(to top left, ${r}, ${a})`},children:o})};exports.Elevation=x;
 //# sourceMappingURL=Elevation.cjs.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Elevation.cjs.js","sources":["../../../src/components/Elevation/Elevation.tsx"],"sourcesContent":["\"use client\";\n\nimport { ReactNode } from \"react\";\nimport { transparentize, mix } from \"color2k\";\nimport { useTheme } from \"../ThemeProvider\";\nimport \"./Elevation.css\";\nimport { csx } from \"../../utils\";\n\nexport interface ElevationProps {\n  /**\n   * The content to be displayed within the elevation.\n   */\n  children?: ReactNode;\n  /**\n   * The data-testid attribute for testing purposes.\n   */\n  \"data-testid\"?: string;\n  /**\n   * Whether the elevation should have a background gradient.\n   * @important only works in custom dark mode\n   * @default false\n   */\n  hasPrimaryGradient?: boolean;\n}\n\n/**\n * Elevation component creates a visual elevation effect using the theme-aware background color.\n *\n * This component is designed to be used as a visual layer that sits on top of other content\n * to create a sense of depth or hierarchy in the UI. It uses the `--proton-control__background-color-light`\n * CSS variable which is theme-aware and will adapt to light, dark themes.\n *\n * API:\n *  - {@link ElevationProps}\n */\nexport const Elevation = ({\n  children,\n  hasPrimaryGradient = false,\n  \"data-testid\": dataTestId,\n}: ElevationProps) => {\n  const { hasPalette, palette, style } = useTheme();\n\n  const defaultBg = style[\"--proton-control__elevation-color\"];\n  let primaryDark = defaultBg;\n  let secondaryDark = transparentize(defaultBg, 0.01);\n\n  if (hasPalette) {\n    primaryDark = transparentize(defaultBg, 0.1);\n    secondaryDark = transparentize(defaultBg, 0.12);\n    if (hasPrimaryGradient) {\n      const basePrimary = transparentize(palette.PRIMARY.MEDIUM_LIGHT, 0.88);\n      const baseSecondary = transparentize(palette.PRIMARY.LIGHT, 0.84);\n      primaryDark = mix(primaryDark, basePrimary, 0.15);\n      secondaryDark = mix(secondaryDark, baseSecondary, 0.15);\n    }\n  }\n\n  return (\n    <div\n      className={csx(\"proton-Elevation\", \"proton-Elevation--glass\")}\n      data-testid={dataTestId}\n      role=\"presentation\"\n      aria-label=\"Elevated content area\"\n      style={{\n        background: `linear-gradient(to top left, ${primaryDark}, ${secondaryDark})`,\n      }}\n    >\n      {children}\n    </div>\n  );\n};\n"],"names":["Elevation","children","hasPrimaryGradient","dataTestId","hasPalette","palette","style","useTheme","defaultBg","primaryDark","secondaryDark","transparentize","basePrimary","baseSecondary","mix","jsx","csx"],"mappings":"+UAmCaA,EAAY,CAAC,CACxB,SAAAC,EACA,mBAAAC,EAAqB,GACrB,cAAeC,CACjB,IAAsB,CACpB,KAAM,CAAE,WAAAC,EAAY,QAAAC,EAAS,MAAAC,GAAUC,EAAS,SAAA,EAE1CC,EAAYF,EAAM,mCAAmC,EAC3D,IAAIG,EAAcD,EACdE,EAAgBC,EAAAA,eAAeH,EAAW,GAAI,EAElD,GAAIJ,IACYK,EAAAE,EAAA,eAAeH,EAAW,EAAG,EAC3BE,EAAAC,EAAA,eAAeH,EAAW,GAAI,EAC1CN,GAAoB,CACtB,MAAMU,EAAcD,EAAAA,eAAeN,EAAQ,QAAQ,aAAc,GAAI,EAC/DQ,EAAgBF,EAAAA,eAAeN,EAAQ,QAAQ,MAAO,GAAI,EAClDI,EAAAK,EAAAA,IAAIL,EAAaG,EAAa,GAAI,EAChCF,EAAAI,EAAAA,IAAIJ,EAAeG,EAAe,GAAI,CACxD,CAIA,OAAAE,EAAA,kBAAA,IAAC,MAAA,CACC,UAAWC,EAAAA,IAAI,mBAAoB,yBAAyB,EAC5D,cAAab,EACb,KAAK,eACL,aAAW,wBACX,MAAO,CACL,WAAY,gCAAgCM,CAAW,KAAKC,CAAa,GAC3E,EAEC,SAAAT,CAAA,CAAA,CAGP"}
+{"version":3,"file":"Elevation.cjs.js","sources":["../../../src/components/Elevation/Elevation.tsx"],"sourcesContent":["\"use client\";\n\nimport { ReactNode } from \"react\";\nimport { transparentize, mix } from \"color2k\";\nimport { useTheme } from \"../ThemeProvider\";\nimport \"./Elevation.css\";\n\nexport interface ElevationProps {\n  /**\n   * The content to be displayed within the elevation.\n   */\n  children?: ReactNode;\n  /**\n   * The data-testid attribute for testing purposes.\n  */\n \"data-testid\"?: string;\n /**\n  * Whether the elevation should have a background gradient.\n  * @important only works in custom dark mode\n  * @default false\n  */\n hasPrimaryGradient?: boolean;\n}\n\n/**\n * Elevation component creates a visual elevation effect using the theme-aware background color.\n *\n * This component is designed to be used as a visual layer that sits on top of other content\n * to create a sense of depth or hierarchy in the UI. It uses the `--proton-control__background-color-light`\n * CSS variable which is theme-aware and will adapt to light, dark themes.\n *\n * API:\n *  - {@link ElevationProps}\n */\nexport const Elevation = ({\n  children,\n  hasPrimaryGradient = false,\n  \"data-testid\": dataTestId,\n}: ElevationProps) => {\n  const { hasPalette, palette, style } = useTheme();\n\n  const defaultBg = style[\"--proton-control__background-color-light\"];\n  let primaryDark = defaultBg;\n  let secondaryDark = transparentize(defaultBg, 0.01);\n\n  if (hasPalette) {\n    primaryDark = transparentize(defaultBg, 0.1);\n    secondaryDark = transparentize(defaultBg, 0.12);\n    if (hasPrimaryGradient) {\n      const basePrimary = transparentize(palette.PRIMARY.MEDIUM_LIGHT, 0.88);\n      const baseSecondary = transparentize(palette.PRIMARY.LIGHT, 0.84);\n      primaryDark = mix(primaryDark, basePrimary, 0.15);\n      secondaryDark = mix(secondaryDark, baseSecondary, 0.15);\n    }\n  }\n\n  return (\n    <div\n      className=\"proton-Elevation\"\n      data-testid={dataTestId}\n      role=\"presentation\"\n      aria-label=\"Elevated content area\"\n      style={{\n        background: `linear-gradient(to top left, ${primaryDark}, ${secondaryDark})`,\n      }}\n    >\n      {children}\n    </div>\n  );\n};\n"],"names":["Elevation","children","hasPrimaryGradient","dataTestId","hasPalette","palette","style","useTheme","defaultBg","primaryDark","secondaryDark","transparentize","basePrimary","baseSecondary","mix","jsx"],"mappings":"kSAkCO,MAAMA,EAAY,CAAC,CACxB,SAAAC,EACA,mBAAAC,EAAqB,GACrB,cAAeC,CACjB,IAAsB,CACpB,KAAM,CAAE,WAAAC,EAAY,QAAAC,EAAS,MAAAC,GAAUC,EAAS,SAAA,EAE1CC,EAAYF,EAAM,0CAA0C,EAClE,IAAIG,EAAcD,EACdE,EAAgBC,EAAAA,eAAeH,EAAW,GAAI,EAElD,GAAIJ,IACYK,EAAAE,EAAA,eAAeH,EAAW,EAAG,EAC3BE,EAAAC,EAAA,eAAeH,EAAW,GAAI,EAC1CN,GAAoB,CACtB,MAAMU,EAAcD,EAAAA,eAAeN,EAAQ,QAAQ,aAAc,GAAI,EAC/DQ,EAAgBF,EAAAA,eAAeN,EAAQ,QAAQ,MAAO,GAAI,EAClDI,EAAAK,EAAAA,IAAIL,EAAaG,EAAa,GAAI,EAChCF,EAAAI,EAAAA,IAAIJ,EAAeG,EAAe,GAAI,CACxD,CAIA,OAAAE,EAAA,kBAAA,IAAC,MAAA,CACC,UAAU,mBACV,cAAaZ,EACb,KAAK,eACL,aAAW,wBACX,MAAO,CACL,WAAY,gCAAgCM,CAAW,KAAKC,CAAa,GAC3E,EAEC,SAAAT,CAAA,CAAA,CAGP"}