@protonradio/proton-ui 0.11.10 → 0.11.11

package/dist/components/Popover/Popover.es.js

@@ -0,0 +1,54 @@
+import { j as e } from "../../node_modules/react/jsx-runtime.es.js";
+import { Popover as o } from "radix-ui";
+/* empty css               */
+import { useTheme as f } from "../ThemeProvider.es.js";
+import { csx as h } from "../../utils/string.es.js";
+function j({
+  trigger: r,
+  children: s,
+  open: t,
+  defaultOpen: a,
+  onOpenChange: i,
+  side: l = "top",
+  align: m = "center",
+  arrow: n = !1,
+  constrainWidth: p = !1,
+  "data-testid": d
+}) {
+  const { className: c, style: x } = f();
+  return /* @__PURE__ */ e.jsxs(
+    o.Root,
+    {
+      open: t,
+      defaultOpen: a,
+      onOpenChange: i,
+      children: [
+        /* @__PURE__ */ e.jsx(o.Trigger, { asChild: !0, children: /* @__PURE__ */ e.jsx("div", { children: r }) }),
+        /* @__PURE__ */ e.jsx(o.Portal, { children: /* @__PURE__ */ e.jsxs(
+          o.Content,
+          {
+            side: l,
+            sideOffset: 2,
+            align: m,
+            style: x,
+            className: h(
+              "proton-Popover",
+              p && "proton-Popover__constrained",
+              c
+            ),
+            "data-testid": d,
+            children: [
+              n && /* @__PURE__ */ e.jsx(o.Arrow, { className: "arrow" }),
+              s
+            ]
+          }
+        ) })
+      ]
+    }
+  );
+}
+j.displayName = "Popover";
+export {
+  j as Popover
+};
+//# sourceMappingURL=Popover.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Popover.es.js","sources":["../../../src/components/Popover/Popover.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport { Popover as RadixPopover } from \"radix-ui\";\r\nimport React, { CSSProperties } from \"react\";\r\nimport \"./Popover.css\";\r\nimport { useTheme } from \"../ThemeProvider\";\r\nimport { csx } from \"../../utils/string\";\r\n\r\nexport type PopoverSide = \"top\" | \"right\" | \"bottom\" | \"left\";\r\nexport type PopoverAlign = \"start\" | \"center\" | \"end\";\r\n\r\nexport interface PopoverProps {\r\n  /**\r\n   * The trigger element for the popover.\r\n   */\r\n  trigger: React.ReactNode;\r\n  /**\r\n   * The content of the popover.\r\n   */\r\n  children: React.ReactNode;\r\n  /**\r\n   * Constrain the width of the popover to the width of the trigger.\r\n   */\r\n  constrainWidth?: boolean;\r\n  /**\r\n   * Control open state (controlled mode).\r\n   */\r\n  open?: boolean;\r\n  /**\r\n   * Default open state (uncontrolled mode).\r\n   */\r\n  defaultOpen?: boolean;\r\n  /**\r\n   * Callback when open state changes.\r\n   */\r\n  onOpenChange?: (open: boolean) => void;\r\n  /**\r\n   * Popover side placement\r\n   * {@link PopoverSide}\r\n   */\r\n  side?: PopoverSide;\r\n  /**\r\n   * Popover alignment\r\n   * {@link PopoverAlign}\r\n   */\r\n  align?: PopoverAlign;\r\n  /**\r\n   * Show an arrow pointing to the trigger.\r\n   */\r\n  arrow?: boolean;\r\n  /**\r\n   * Test id for the popover content.\r\n   */\r\n  \"data-testid\"?: string;\r\n}\r\n\r\n/**\r\n * A popover component that handles positioning and supports controlled and uncontrolled modes.\r\n *\r\n * A popover displays interactive content in context with a trigger element.\r\n * A tooltip displays a description of an element on hover or focus.\r\n *\r\n * API:\r\n *  - {@link PopoverProps}\r\n */\r\nexport function Popover({\r\n  trigger,\r\n  children,\r\n  open,\r\n  defaultOpen,\r\n  onOpenChange,\r\n  side = \"top\",\r\n  align = \"center\",\r\n  arrow = false,\r\n  constrainWidth = false,\r\n  \"data-testid\": testId,\r\n}: PopoverProps) {\r\n  const { className: themeClass, style: themeStyle } = useTheme();\r\n\r\n  return (\r\n    <RadixPopover.Root\r\n      open={open}\r\n      defaultOpen={defaultOpen}\r\n      onOpenChange={onOpenChange}\r\n    >\r\n      <RadixPopover.Trigger asChild>\r\n        <div>{trigger}</div>\r\n      </RadixPopover.Trigger>\r\n\r\n      <RadixPopover.Portal>\r\n        <RadixPopover.Content\r\n          side={side}\r\n          sideOffset={2}\r\n          align={align}\r\n          style={themeStyle as CSSProperties}\r\n          className={csx(\r\n            \"proton-Popover\",\r\n            constrainWidth && \"proton-Popover__constrained\",\r\n            themeClass\r\n          )}\r\n          data-testid={testId}\r\n        >\r\n          {arrow && <RadixPopover.Arrow className=\"arrow\" />}\r\n          {children}\r\n        </RadixPopover.Content>\r\n      </RadixPopover.Portal>\r\n    </RadixPopover.Root>\r\n  );\r\n}\r\n\r\nPopover.displayName = \"Popover\";\r\n"],"names":["Popover","trigger","children","open","defaultOpen","onOpenChange","side","align","arrow","constrainWidth","testId","themeClass","themeStyle","useTheme","jsxs","RadixPopover","jsx","csx"],"mappings":";;;;;AAiEO,SAASA,EAAQ;AAAA,EACtB,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,MAAAC;AAAA,EACA,aAAAC;AAAA,EACA,cAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,OAAAC,IAAQ;AAAA,EACR,OAAAC,IAAQ;AAAA,EACR,gBAAAC,IAAiB;AAAA,EACjB,eAAeC;AACjB,GAAiB;AACf,QAAM,EAAE,WAAWC,GAAY,OAAOC,EAAA,IAAeC;AAGnD,SAAAC,gBAAAA,EAAA;AAAA,IAACC,EAAa;AAAA,IAAb;AAAA,MACC,MAAAZ;AAAA,MACA,aAAAC;AAAA,MACA,cAAAC;AAAA,MAEA,UAAA;AAAA,QAACW,gBAAAA,EAAAA,IAAAD,EAAa,SAAb,EAAqB,SAAO,IAC3B,UAACC,gBAAAA,EAAA,IAAA,OAAA,EAAK,aAAQ,EAChB,CAAA;AAAA,QAEAA,gBAAAA,EAAAA,IAACD,EAAa,QAAb,EACC,UAAAD,gBAAAA,EAAA;AAAA,UAACC,EAAa;AAAA,UAAb;AAAA,YACC,MAAAT;AAAA,YACA,YAAY;AAAA,YACZ,OAAAC;AAAA,YACA,OAAOK;AAAA,YACP,WAAWK;AAAA,cACT;AAAA,cACAR,KAAkB;AAAA,cAClBE;AAAA,YACF;AAAA,YACA,eAAaD;AAAA,YAEZ,UAAA;AAAA,cAAAF,KAAUQ,gBAAAA,EAAA,IAAAD,EAAa,OAAb,EAAmB,WAAU,SAAQ;AAAA,cAC/Cb;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA,GAEL;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;AAEAF,EAAQ,cAAc;"}

package/dist/components/ScreenOverlay/ScreenOverlay.cjs.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("../../node_modules/react/jsx-runtime.cjs.js"),n=require("react");;/* empty css                       */const m=require("radix-ui"),a=require("../ThemeProvider.cjs.js"),y=require("../../utils/string.cjs.js"),i=n.forwardRef(({fadeIn:o=!1,onClose:e,children:c},s)=>{const{theme:d,palette:u}=a.useTheme();return n.useEffect(()=>{if(!e)return;const r=l=>{l.key==="Escape"&&e()};return document.addEventListener("keydown",r),()=>{document.removeEventListener("keydown",r)}},[e]),t.jsxRuntimeExports.jsx(m.Portal.Root,{children:t.jsxRuntimeExports.jsx(a.ThemeProvider,{theme:d,palette:u,children:t.jsxRuntimeExports.jsx("div",{ref:s,id:"background","aria-label":"Background overlay",role:"dialog","aria-modal":"true","data-testid":"screen-overlay",className:y.csx("proton-ScreenOverlay__background","proton-ScreenOverlay__z-index",o&&"proton-ScreenOverlay__fade-in"),onClick:r=>{e&&r.target===r.currentTarget&&e()},children:c})})})});i.displayName="ProtonUIScreenOverlay";exports.ScreenOverlay=i;
+//# sourceMappingURL=ScreenOverlay.cjs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ScreenOverlay.cjs.js","sources":["../../../src/components/ScreenOverlay/ScreenOverlay.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport { forwardRef, useEffect } from \"react\";\r\nimport \"./ScreenOverlay.css\";\r\nimport { csx } from \"../../utils\";\r\nimport { Portal } from \"radix-ui\";\r\nimport { useTheme, ThemeProvider } from \"../ThemeProvider\";\r\n\r\ninterface ScreenOverlayProps {\r\n  /**\r\n   * Children to render inside the overlay.\r\n   */\r\n  children?: React.ReactNode;\r\n\r\n  /**\r\n   * Whether to fade in the overlay.\r\n   */\r\n  fadeIn?: boolean;\r\n\r\n  /**\r\n   * Callback function to handle events (click or ESC key).\r\n   */\r\n  onClose?: () => void;\r\n\r\n  /**\r\n   * Ref to the overlay element.\r\n   */\r\n  ref?: React.RefObject<HTMLDivElement>;\r\n}\r\n\r\n/**\r\n * Base Overlay component for creating modal-like backgrounds.\r\n *\r\n * API:\r\n *  - {@link ScreenOverlayProps}\r\n */\r\nexport const ScreenOverlay = forwardRef<HTMLDivElement, ScreenOverlayProps>(\r\n  ({ fadeIn = false, onClose, children }, ref) => {\r\n    const { theme, palette } = useTheme();\r\n\r\n    useEffect(() => {\r\n      if (!onClose) return;\r\n\r\n      const handleEscKey = (event: KeyboardEvent) => {\r\n        if (event.key === \"Escape\") onClose();\r\n      };\r\n\r\n      document.addEventListener(\"keydown\", handleEscKey);\r\n      return () => {\r\n        document.removeEventListener(\"keydown\", handleEscKey);\r\n      };\r\n    }, [onClose]);\r\n\r\n    return (\r\n      <Portal.Root>\r\n        <ThemeProvider theme={theme} palette={palette}>\r\n          <div\r\n            ref={ref}\r\n            id=\"background\"\r\n            aria-label=\"Background overlay\"\r\n            role=\"dialog\"\r\n            aria-modal=\"true\"\r\n            data-testid=\"screen-overlay\"\r\n            className={csx(\r\n              \"proton-ScreenOverlay__background\",\r\n              \"proton-ScreenOverlay__z-index\",\r\n              fadeIn && \"proton-ScreenOverlay__fade-in\"\r\n            )}\r\n            onClick={(event: React.MouseEvent) => {\r\n              if (!onClose) return;\r\n\r\n              // Only trigger onClose if the click was directly on the background element\r\n              if (event.target === event.currentTarget) {\r\n                onClose();\r\n              }\r\n            }}\r\n          >\r\n            {children}\r\n          </div>\r\n        </ThemeProvider>\r\n      </Portal.Root>\r\n    );\r\n  }\r\n);\r\n\r\nScreenOverlay.displayName = \"ProtonUIScreenOverlay\";\r\n"],"names":["ScreenOverlay","forwardRef","fadeIn","onClose","children","ref","theme","palette","useTheme","useEffect","handleEscKey","event","Portal","jsx","ThemeProvider","csx"],"mappings":"gTAoCaA,EAAgBC,EAAA,WAC3B,CAAC,CAAE,OAAAC,EAAS,GAAO,QAAAC,EAAS,SAAAC,CAAA,EAAYC,IAAQ,CAC9C,KAAM,CAAE,MAAAC,EAAO,QAAAC,CAAQ,EAAIC,EAAS,SAAA,EAEpCC,OAAAA,EAAAA,UAAU,IAAM,CACd,GAAI,CAACN,EAAS,OAER,MAAAO,EAAgBC,GAAyB,CACzCA,EAAM,MAAQ,UAAkBR,EAAA,CAAA,EAG7B,gBAAA,iBAAiB,UAAWO,CAAY,EAC1C,IAAM,CACF,SAAA,oBAAoB,UAAWA,CAAY,CAAA,CACtD,EACC,CAACP,CAAO,CAAC,0BAGTS,EAAAA,OAAO,KAAP,CACC,SAACC,wBAAAC,EAAAA,cAAA,CAAc,MAAAR,EAAc,QAAAC,EAC3B,SAAAM,EAAA,kBAAA,IAAC,MAAA,CACC,IAAAR,EACA,GAAG,aACH,aAAW,qBACX,KAAK,SACL,aAAW,OACX,cAAY,iBACZ,UAAWU,EAAA,IACT,mCACA,gCACAb,GAAU,+BACZ,EACA,QAAUS,GAA4B,CAC/BR,GAGDQ,EAAM,SAAWA,EAAM,eACjBR,GAEZ,EAEC,SAAAC,CAAA,CAAA,CAEL,CAAA,CACF,CAAA,CAEJ,CACF,EAEAJ,EAAc,YAAc"}

package/dist/components/ScreenOverlay/ScreenOverlay.es.js

@@ -0,0 +1,44 @@
+import { j as t } from "../../node_modules/react/jsx-runtime.es.js";
+import { forwardRef as m, useEffect as s } from "react";
+/* empty css                     */
+import { Portal as l } from "radix-ui";
+import { useTheme as f, ThemeProvider as p } from "../ThemeProvider.es.js";
+import { csx as u } from "../../utils/string.es.js";
+const y = m(
+  ({ fadeIn: o = !1, onClose: e, children: a }, n) => {
+    const { theme: i, palette: c } = f();
+    return s(() => {
+      if (!e) return;
+      const r = (d) => {
+        d.key === "Escape" && e();
+      };
+      return document.addEventListener("keydown", r), () => {
+        document.removeEventListener("keydown", r);
+      };
+    }, [e]), /* @__PURE__ */ t.jsx(l.Root, { children: /* @__PURE__ */ t.jsx(p, { theme: i, palette: c, children: /* @__PURE__ */ t.jsx(
+      "div",
+      {
+        ref: n,
+        id: "background",
+        "aria-label": "Background overlay",
+        role: "dialog",
+        "aria-modal": "true",
+        "data-testid": "screen-overlay",
+        className: u(
+          "proton-ScreenOverlay__background",
+          "proton-ScreenOverlay__z-index",
+          o && "proton-ScreenOverlay__fade-in"
+        ),
+        onClick: (r) => {
+          e && r.target === r.currentTarget && e();
+        },
+        children: a
+      }
+    ) }) });
+  }
+);
+y.displayName = "ProtonUIScreenOverlay";
+export {
+  y as ScreenOverlay
+};
+//# sourceMappingURL=ScreenOverlay.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ScreenOverlay.es.js","sources":["../../../src/components/ScreenOverlay/ScreenOverlay.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport { forwardRef, useEffect } from \"react\";\r\nimport \"./ScreenOverlay.css\";\r\nimport { csx } from \"../../utils\";\r\nimport { Portal } from \"radix-ui\";\r\nimport { useTheme, ThemeProvider } from \"../ThemeProvider\";\r\n\r\ninterface ScreenOverlayProps {\r\n  /**\r\n   * Children to render inside the overlay.\r\n   */\r\n  children?: React.ReactNode;\r\n\r\n  /**\r\n   * Whether to fade in the overlay.\r\n   */\r\n  fadeIn?: boolean;\r\n\r\n  /**\r\n   * Callback function to handle events (click or ESC key).\r\n   */\r\n  onClose?: () => void;\r\n\r\n  /**\r\n   * Ref to the overlay element.\r\n   */\r\n  ref?: React.RefObject<HTMLDivElement>;\r\n}\r\n\r\n/**\r\n * Base Overlay component for creating modal-like backgrounds.\r\n *\r\n * API:\r\n *  - {@link ScreenOverlayProps}\r\n */\r\nexport const ScreenOverlay = forwardRef<HTMLDivElement, ScreenOverlayProps>(\r\n  ({ fadeIn = false, onClose, children }, ref) => {\r\n    const { theme, palette } = useTheme();\r\n\r\n    useEffect(() => {\r\n      if (!onClose) return;\r\n\r\n      const handleEscKey = (event: KeyboardEvent) => {\r\n        if (event.key === \"Escape\") onClose();\r\n      };\r\n\r\n      document.addEventListener(\"keydown\", handleEscKey);\r\n      return () => {\r\n        document.removeEventListener(\"keydown\", handleEscKey);\r\n      };\r\n    }, [onClose]);\r\n\r\n    return (\r\n      <Portal.Root>\r\n        <ThemeProvider theme={theme} palette={palette}>\r\n          <div\r\n            ref={ref}\r\n            id=\"background\"\r\n            aria-label=\"Background overlay\"\r\n            role=\"dialog\"\r\n            aria-modal=\"true\"\r\n            data-testid=\"screen-overlay\"\r\n            className={csx(\r\n              \"proton-ScreenOverlay__background\",\r\n              \"proton-ScreenOverlay__z-index\",\r\n              fadeIn && \"proton-ScreenOverlay__fade-in\"\r\n            )}\r\n            onClick={(event: React.MouseEvent) => {\r\n              if (!onClose) return;\r\n\r\n              // Only trigger onClose if the click was directly on the background element\r\n              if (event.target === event.currentTarget) {\r\n                onClose();\r\n              }\r\n            }}\r\n          >\r\n            {children}\r\n          </div>\r\n        </ThemeProvider>\r\n      </Portal.Root>\r\n    );\r\n  }\r\n);\r\n\r\nScreenOverlay.displayName = \"ProtonUIScreenOverlay\";\r\n"],"names":["ScreenOverlay","forwardRef","fadeIn","onClose","children","ref","theme","palette","useTheme","useEffect","handleEscKey","event","Portal","jsx","ThemeProvider","csx"],"mappings":";;;;;;AAoCO,MAAMA,IAAgBC;AAAA,EAC3B,CAAC,EAAE,QAAAC,IAAS,IAAO,SAAAC,GAAS,UAAAC,EAAA,GAAYC,MAAQ;AAC9C,UAAM,EAAE,OAAAC,GAAO,SAAAC,EAAQ,IAAIC,EAAS;AAEpC,WAAAC,EAAU,MAAM;AACd,UAAI,CAACN,EAAS;AAER,YAAAO,IAAe,CAACC,MAAyB;AACzC,QAAAA,EAAM,QAAQ,YAAkBR,EAAA;AAAA,MAAA;AAG7B,sBAAA,iBAAiB,WAAWO,CAAY,GAC1C,MAAM;AACF,iBAAA,oBAAoB,WAAWA,CAAY;AAAA,MAAA;AAAA,IACtD,GACC,CAACP,CAAO,CAAC,yBAGTS,EAAO,MAAP,EACC,UAACC,gBAAAA,MAAAC,GAAA,EAAc,OAAAR,GAAc,SAAAC,GAC3B,UAAAM,gBAAAA,EAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAAR;AAAA,QACA,IAAG;AAAA,QACH,cAAW;AAAA,QACX,MAAK;AAAA,QACL,cAAW;AAAA,QACX,eAAY;AAAA,QACZ,WAAWU;AAAA,UACT;AAAA,UACA;AAAA,UACAb,KAAU;AAAA,QACZ;AAAA,QACA,SAAS,CAACS,MAA4B;AACpC,UAAKR,KAGDQ,EAAM,WAAWA,EAAM,iBACjBR;QAEZ;AAAA,QAEC,UAAAC;AAAA,MAAA;AAAA,IAAA,EAEL,CAAA,EACF,CAAA;AAAA,EAEJ;AACF;AAEAJ,EAAc,cAAc;"}

package/dist/components/Select/Select.cjs.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../../node_modules/react/jsx-runtime.cjs.js"),a=require("react"),n=require("radix-ui"),T=require("../../hooks/useBreakpoint.cjs.js"),P=require("../ActionMenu/ActionMenu.cjs.js");;/* empty css                */;/* empty css                    */const A=require("../ThemeProvider.cjs.js"),m=require("../../utils/string.cjs.js"),C=require("../../constants/breakpoint.cjs.js"),E=a.forwardRef(({disabled:r,isOpen:i,children:o,onClick:l,isRounded:s,...x},h)=>e.jsxRuntimeExports.jsx("button",{...x,ref:h,disabled:r,onClick:l,className:m.csx("proton-Select__trigger",r&&"proton-Select__trigger--disabled",!i&&"proton-Select__trigger--closed",i&&"proton-Select__trigger--opened",s&&"proton-Select__trigger--rounded"),children:o}));E.displayName="ProtonUISelectButton";function k({label:r,name:i,isDisabled:o,disabledKeys:l,selectedKey:s,onSelectionChange:x,defaultSelectedKey:h,onOpen:S,onClose:R,items:_,isRounded:g=!1,"data-testid":f}){const[c,p]=a.useState(!1),[I,v]=a.useState(s||h||""),{className:M,style:q}=A.useTheme(),w=T.useBreakpoint(C.BREAKPOINTS.MEDIUM),N=a.useRef(null),u=a.useRef(null),d=s!==void 0?s:I,j=_.find(t=>t.key===d),b=t=>{s===void 0&&v(t),x==null||x(t),u.current&&(u.current.value=t,u.current.dispatchEvent(new Event("change",{bubbles:!0})))},y=t=>{p(t),t?S==null||S():R==null||R()};a.useEffect(()=>{s!==void 0&&v(s)},[s]);const B=_.map(t=>({key:t.key,label:t.label,to:t.to,onAction:()=>{b(t.key),p(!1)}}));return w?e.jsxRuntimeExports.jsxs("div",{className:"proton-Select","aria-label":r||i,"aria-disabled":o,children:[r&&e.jsxRuntimeExports.jsx("div",{className:"proton-Select__label","data-testid":"select-label",children:r}),e.jsxRuntimeExports.jsx("input",{ref:u,type:"hidden",name:i,value:d,"data-testid":"hidden-select-container"}),e.jsxRuntimeExports.jsxs(E,{isOpen:c,isRounded:g,ref:N,disabled:o,"data-testid":f,onClick:()=>p(!0),children:[e.jsxRuntimeExports.jsx("div",{className:"proton-Select__value",children:j?j.label:"Select an option"}),e.jsxRuntimeExports.jsx("div",{className:m.csx("proton-Select__trigger_icon",c&&"proton-Select__trigger_icon--flipped"),"aria-hidden":"true",children:e.jsxRuntimeExports.jsxs("svg",{id:"caret-down",viewBox:"0 0 512 512",children:[e.jsxRuntimeExports.jsx("title",{children:c?"caret down":"caret up"}),e.jsxRuntimeExports.jsx("path",{fill:"currentColor",d:"M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7L86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z"})]})})]}),e.jsxRuntimeExports.jsx(P.ActionMenu,{isOpen:c,onClose:()=>p(!1),actions:B,selectedKeys:[d],disabledKeys:l})]}):e.jsxRuntimeExports.jsxs("div",{className:"proton-Select","aria-label":r||i,"aria-disabled":o,children:[r&&e.jsxRuntimeExports.jsx("div",{className:"proton-Select__label","data-testid":"select-label",children:r}),e.jsxRuntimeExports.jsx("input",{ref:u,type:"hidden",name:i,value:d,"data-testid":"hidden-select-container"}),e.jsxRuntimeExports.jsxs(n.Select.Root,{value:d,onValueChange:b,onOpenChange:y,disabled:o,children:[e.jsxRuntimeExports.jsx(n.Select.Trigger,{asChild:!0,children:e.jsxRuntimeExports.jsxs(E,{isRounded:g,isOpen:c,ref:N,disabled:o,"data-testid":f,children:[e.jsxRuntimeExports.jsx(n.Select.Value,{className:"proton-Select__value",placeholder:"Select an option",children:j?j.label:"Select an option"}),e.jsxRuntimeExports.jsx(n.Select.Icon,{asChild:!0,children:e.jsxRuntimeExports.jsx("div",{className:m.csx("proton-Select__trigger_icon",c&&"proton-Select__trigger_icon--flipped"),"aria-hidden":"true",children:e.jsxRuntimeExports.jsxs("svg",{id:"caret-down",viewBox:"0 0 512 512",children:[e.jsxRuntimeExports.jsx("title",{children:c?"caret down":"caret up"}),e.jsxRuntimeExports.jsx("path",{fill:"currentColor",d:"M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7L86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z"})]})})})]})}),e.jsxRuntimeExports.jsx(n.Select.Portal,{children:e.jsxRuntimeExports.jsx(n.Select.Content,{className:m.csx("proton-Menu","proton-MenuTrigger__menu",M),style:q,position:"popper",children:e.jsxRuntimeExports.jsx(n.Select.Viewport,{children:_.map(t=>e.jsxRuntimeExports.jsx(n.Select.Item,{value:t.key,disabled:l==null?void 0:l.includes(t.key),className:"proton-Menu__item",children:e.jsxRuntimeExports.jsx(n.Select.ItemText,{children:t.label})},t.key))})})})]})]})}k.displayName="ProtonUISelect";exports.Select=k;
+//# sourceMappingURL=Select.cjs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Select.cjs.js","sources":["../../../src/components/Select/Select.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport {\r\n  forwardRef,\r\n  ReactNode,\r\n  RefObject,\r\n  useEffect,\r\n  useRef,\r\n  useState,\r\n} from \"react\";\r\nimport { Select as RadixSelect } from \"radix-ui\";\r\n\r\nimport { BREAKPOINTS } from \"../../constants\";\r\nimport { useBreakpoint } from \"../../hooks/useBreakpoint\";\r\nimport { csx } from \"../../utils\";\r\nimport { ActionMenu, ActionMenuAction } from \"../ActionMenu/ActionMenu\";\r\n\r\nimport \"./Select.css\";\r\nimport \"../Menu/Menu.css\";\r\nimport { useTheme } from \"../ThemeProvider\";\r\n\r\ninterface SelectButtonProps {\r\n  disabled?: boolean;\r\n  isOpen?: boolean;\r\n  children?: ReactNode;\r\n  onClick?: () => void;\r\n  isRounded?: boolean;\r\n}\r\n\r\nconst SelectButton = forwardRef<HTMLButtonElement, SelectButtonProps>(\r\n  (\r\n    { disabled, isOpen, children, onClick, isRounded, ...props },\r\n    ref: RefObject<HTMLButtonElement>\r\n  ) => {\r\n    return (\r\n      <button\r\n        {...props}\r\n        ref={ref}\r\n        disabled={disabled}\r\n        onClick={onClick}\r\n        className={csx(\r\n          \"proton-Select__trigger\",\r\n          disabled && \"proton-Select__trigger--disabled\",\r\n          !isOpen && \"proton-Select__trigger--closed\",\r\n          isOpen && \"proton-Select__trigger--opened\",\r\n          isRounded && \"proton-Select__trigger--rounded\"\r\n        )}\r\n      >\r\n        {children}\r\n      </button>\r\n    );\r\n  }\r\n);\r\nSelectButton.displayName = \"ProtonUISelectButton\";\r\n\r\nexport interface SelectItem {\r\n  /** The label to display for the item */\r\n  label: string;\r\n\r\n  /** The key of the item */\r\n  key: string;\r\n\r\n  /** The URL to navigate to when the item is clicked, turns item into an a tag */\r\n  to?: string;\r\n}\r\n\r\nexport interface SelectProps {\r\n  /** Array of keys that should be disabled\r\n   * @example [\"Thing 1\", \"Thing 2\"]\r\n   */\r\n  disabledKeys?: string[];\r\n\r\n  /** The key of the default selected item */\r\n  defaultSelectedKey?: string;\r\n\r\n  /** Test ID for the select */\r\n  \"data-testid\"?: string;\r\n\r\n  /** Whether the select is disabled */\r\n  isDisabled?: boolean;\r\n\r\n  /** Array of items to display\r\n   * @example [{ key: \"thing-1\", label: \"Thing 1\" }, { key: \"thing-2\", label: \"Thing 2\" }]\r\n   * @see {@link SelectItem}\r\n   */\r\n  items: SelectItem[];\r\n\r\n  /** Whether the select button is rounded\r\n   * @default false\r\n   */\r\n  isRounded?: boolean;\r\n\r\n  /** Label to display above the select\r\n   * @external https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label#text\r\n   */\r\n  label?: string;\r\n\r\n  /** The name of the select field */\r\n  name: string;\r\n\r\n  /** Callback fired when the menu closes */\r\n  onClose?: () => void;\r\n\r\n  /** Callback fired when the menu opens */\r\n  onOpen?: () => void;\r\n\r\n  /** Callback fired when selection changes */\r\n  onSelectionChange?: (key: string) => void;\r\n\r\n  /** Currently selected key */\r\n  selectedKey?: string;\r\n}\r\n\r\n/**\r\n * A dropdown select menu that opens a popover on desktop and an action menu on mobile.\r\n * Supports controlled and uncontrolled modes.\r\n *\r\n * API:\r\n *  - {@link SelectProps}\r\n */\r\nexport function Select({\r\n  label,\r\n  name,\r\n  isDisabled,\r\n  disabledKeys,\r\n  selectedKey,\r\n  onSelectionChange,\r\n  defaultSelectedKey,\r\n  onOpen,   \r\n  onClose,\r\n  items,\r\n  isRounded = false,\r\n  \"data-testid\": testId,\r\n}: SelectProps) {\r\n  const [isOpen, setIsOpen] = useState(false);\r\n  const [internalSelectedKey, setInternalSelectedKey] = useState(\r\n    selectedKey || defaultSelectedKey || \"\"\r\n  );\r\n  const { className: themeClass, style: themeStyle } = useTheme();\r\n  const isMobile = useBreakpoint(BREAKPOINTS.MEDIUM);\r\n  const triggerRef = useRef<HTMLButtonElement>(null);\r\n  const hiddenInputRef = useRef<HTMLInputElement>(null);\r\n\r\n  // Handle controlled vs uncontrolled state\r\n  const currentSelectedKey =\r\n    selectedKey !== undefined ? selectedKey : internalSelectedKey;\r\n  const selectedItem = items.find((item) => item.key === currentSelectedKey);\r\n\r\n  const handleValueChange = (value: string) => {\r\n    if (selectedKey === undefined) {\r\n      setInternalSelectedKey(value);\r\n    }\r\n    onSelectionChange?.(value);\r\n\r\n    // Update hidden input for form submission\r\n    if (hiddenInputRef.current) {\r\n      hiddenInputRef.current.value = value;\r\n      hiddenInputRef.current.dispatchEvent(\r\n        new Event(\"change\", { bubbles: true })\r\n      );\r\n    }\r\n  };\r\n\r\n  const handleOpenChange = (open: boolean) => {\r\n    setIsOpen(open);\r\n    if (open) {\r\n      onOpen?.();\r\n    } else {\r\n      onClose?.();\r\n    }\r\n  };\r\n\r\n  // Update internal state when controlled selectedKey changes\r\n  useEffect(() => {\r\n    if (selectedKey !== undefined) {\r\n      setInternalSelectedKey(selectedKey);\r\n    }\r\n  }, [selectedKey]);\r\n\r\n  const actionItems: ActionMenuAction[] = items.map((item) => ({\r\n    key: item.key,\r\n    label: item.label,\r\n    to: item.to,\r\n    onAction: () => {\r\n      handleValueChange(item.key);\r\n      setIsOpen(false);\r\n    },\r\n  }));\r\n\r\n  if (isMobile) {\r\n    return (\r\n      <div\r\n        className=\"proton-Select\"\r\n        aria-label={label || name}\r\n        aria-disabled={isDisabled}\r\n      >\r\n        {label && (\r\n          <div className=\"proton-Select__label\" data-testid=\"select-label\">\r\n            {label}\r\n          </div>\r\n        )}\r\n\r\n        {/* Hidden input for form submission */}\r\n        <input\r\n          ref={hiddenInputRef}\r\n          type=\"hidden\"\r\n          name={name}\r\n          value={currentSelectedKey}\r\n          data-testid=\"hidden-select-container\"\r\n        />\r\n\r\n        <SelectButton\r\n          isOpen={isOpen}\r\n          isRounded={isRounded}\r\n          ref={triggerRef}\r\n          disabled={isDisabled}\r\n          data-testid={testId}\r\n          onClick={() => setIsOpen(true)}\r\n        >\r\n          <div className=\"proton-Select__value\">\r\n            {selectedItem ? selectedItem.label : \"Select an option\"}\r\n          </div>\r\n          <div\r\n            className={csx(\r\n              \"proton-Select__trigger_icon\",\r\n              isOpen && \"proton-Select__trigger_icon--flipped\"\r\n            )}\r\n            aria-hidden=\"true\"\r\n          >\r\n            <svg id=\"caret-down\" viewBox=\"0 0 512 512\">\r\n              <title>{isOpen ? \"caret down\" : \"caret up\"}</title>\r\n              <path\r\n                fill=\"currentColor\"\r\n                d=\"M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7L86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z\"\r\n              />\r\n            </svg>\r\n          </div>\r\n        </SelectButton>\r\n\r\n        <ActionMenu\r\n          isOpen={isOpen}\r\n          onClose={() => setIsOpen(false)}\r\n          actions={actionItems}\r\n          selectedKeys={[currentSelectedKey]}\r\n          disabledKeys={disabledKeys}\r\n        />\r\n      </div>\r\n    );\r\n  }\r\n\r\n  return (\r\n    <div\r\n      className=\"proton-Select\"\r\n      aria-label={label || name}\r\n      aria-disabled={isDisabled}\r\n    >\r\n      {label && (\r\n        <div className=\"proton-Select__label\" data-testid=\"select-label\">\r\n          {label}\r\n        </div>\r\n      )}\r\n\r\n      {/* Hidden input for form submission */}\r\n      <input\r\n        ref={hiddenInputRef}\r\n        type=\"hidden\"\r\n        name={name}\r\n        value={currentSelectedKey}\r\n        data-testid=\"hidden-select-container\"\r\n      />\r\n\r\n      <RadixSelect.Root\r\n        value={currentSelectedKey}\r\n        onValueChange={handleValueChange}\r\n        onOpenChange={handleOpenChange}\r\n        disabled={isDisabled}\r\n      >\r\n        <RadixSelect.Trigger asChild>\r\n          <SelectButton\r\n            isRounded={isRounded}\r\n            isOpen={isOpen}\r\n            ref={triggerRef}\r\n            disabled={isDisabled}\r\n            data-testid={testId}\r\n          >\r\n            <RadixSelect.Value\r\n              className=\"proton-Select__value\"\r\n              placeholder=\"Select an option\"\r\n            >\r\n              {selectedItem ? selectedItem.label : \"Select an option\"}\r\n            </RadixSelect.Value>\r\n            <RadixSelect.Icon asChild>\r\n              <div\r\n                className={csx(\r\n                  \"proton-Select__trigger_icon\",\r\n                  isOpen && \"proton-Select__trigger_icon--flipped\"\r\n                )}\r\n                aria-hidden=\"true\"\r\n              >\r\n                <svg id=\"caret-down\" viewBox=\"0 0 512 512\">\r\n                  <title>{isOpen ? \"caret down\" : \"caret up\"}</title>\r\n                  <path\r\n                    fill=\"currentColor\"\r\n                    d=\"M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7L86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z\"\r\n                  />\r\n                </svg>\r\n              </div>\r\n            </RadixSelect.Icon>\r\n          </SelectButton>\r\n        </RadixSelect.Trigger>\r\n\r\n        <RadixSelect.Portal>\r\n          <RadixSelect.Content\r\n            className={csx(\r\n              \"proton-Menu\",\r\n              \"proton-MenuTrigger__menu\",\r\n              themeClass\r\n            )}\r\n            style={themeStyle as React.CSSProperties}\r\n            position=\"popper\"\r\n          >\r\n            <RadixSelect.Viewport>\r\n              {items.map((item) => (\r\n                <RadixSelect.Item\r\n                  key={item.key}\r\n                  value={item.key}\r\n                  disabled={disabledKeys?.includes(item.key)}\r\n                  className=\"proton-Menu__item\"\r\n                >\r\n                  <RadixSelect.ItemText>{item.label}</RadixSelect.ItemText>\r\n                </RadixSelect.Item>\r\n              ))}\r\n            </RadixSelect.Viewport>\r\n          </RadixSelect.Content>\r\n        </RadixSelect.Portal>\r\n      </RadixSelect.Root>\r\n    </div>\r\n  );\r\n}\r\n\r\nSelect.displayName = \"ProtonUISelect\";\r\n"],"names":["SelectButton","forwardRef","disabled","isOpen","children","onClick","isRounded","props","ref","jsx","csx","Select","label","name","isDisabled","disabledKeys","selectedKey","onSelectionChange","defaultSelectedKey","onOpen","onClose","items","testId","setIsOpen","useState","internalSelectedKey","setInternalSelectedKey","themeClass","themeStyle","useTheme","isMobile","useBreakpoint","BREAKPOINTS","triggerRef","useRef","hiddenInputRef","currentSelectedKey","selectedItem","item","handleValueChange","value","handleOpenChange","open","useEffect","actionItems","jsxs","ActionMenu","RadixSelect"],"mappings":"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"}

package/dist/components/Select/Select.es.js

@@ -0,0 +1,228 @@
+import { j as e } from "../../node_modules/react/jsx-runtime.es.js";
+import { forwardRef as C, useState as w, useRef as M, useEffect as L } from "react";
+import { Select as n } from "radix-ui";
+import { useBreakpoint as P } from "../../hooks/useBreakpoint.es.js";
+import { ActionMenu as V } from "../ActionMenu/ActionMenu.es.js";
+/* empty css              */
+/* empty css                  */
+import { useTheme as A } from "../ThemeProvider.es.js";
+import { csx as x } from "../../utils/string.es.js";
+import { BREAKPOINTS as U } from "../../constants/breakpoint.es.js";
+const g = C(
+  ({ disabled: r, isOpen: c, children: o, onClick: s, isRounded: l, ...a }, f) => /* @__PURE__ */ e.jsx(
+    "button",
+    {
+      ...a,
+      ref: f,
+      disabled: r,
+      onClick: s,
+      className: x(
+        "proton-Select__trigger",
+        r && "proton-Select__trigger--disabled",
+        !c && "proton-Select__trigger--closed",
+        c && "proton-Select__trigger--opened",
+        l && "proton-Select__trigger--rounded"
+      ),
+      children: o
+    }
+  )
+);
+g.displayName = "ProtonUISelectButton";
+function z({
+  label: r,
+  name: c,
+  isDisabled: o,
+  disabledKeys: s,
+  selectedKey: l,
+  onSelectionChange: a,
+  defaultSelectedKey: f,
+  onOpen: _,
+  onClose: m,
+  items: j,
+  isRounded: S = !1,
+  "data-testid": v
+}) {
+  const [i, u] = w(!1), [b, N] = w(
+    l || f || ""
+  ), { className: y, style: B } = A(), E = P(U.MEDIUM), I = M(null), d = M(null), p = l !== void 0 ? l : b, h = j.find((t) => t.key === p), k = (t) => {
+    l === void 0 && N(t), a == null || a(t), d.current && (d.current.value = t, d.current.dispatchEvent(
+      new Event("change", { bubbles: !0 })
+    ));
+  }, R = (t) => {
+    u(t), t ? _ == null || _() : m == null || m();
+  };
+  L(() => {
+    l !== void 0 && N(l);
+  }, [l]);
+  const T = j.map((t) => ({
+    key: t.key,
+    label: t.label,
+    to: t.to,
+    onAction: () => {
+      k(t.key), u(!1);
+    }
+  }));
+  return E ? /* @__PURE__ */ e.jsxs(
+    "div",
+    {
+      className: "proton-Select",
+      "aria-label": r || c,
+      "aria-disabled": o,
+      children: [
+        r && /* @__PURE__ */ e.jsx("div", { className: "proton-Select__label", "data-testid": "select-label", children: r }),
+        /* @__PURE__ */ e.jsx(
+          "input",
+          {
+            ref: d,
+            type: "hidden",
+            name: c,
+            value: p,
+            "data-testid": "hidden-select-container"
+          }
+        ),
+        /* @__PURE__ */ e.jsxs(
+          g,
+          {
+            isOpen: i,
+            isRounded: S,
+            ref: I,
+            disabled: o,
+            "data-testid": v,
+            onClick: () => u(!0),
+            children: [
+              /* @__PURE__ */ e.jsx("div", { className: "proton-Select__value", children: h ? h.label : "Select an option" }),
+              /* @__PURE__ */ e.jsx(
+                "div",
+                {
+                  className: x(
+                    "proton-Select__trigger_icon",
+                    i && "proton-Select__trigger_icon--flipped"
+                  ),
+                  "aria-hidden": "true",
+                  children: /* @__PURE__ */ e.jsxs("svg", { id: "caret-down", viewBox: "0 0 512 512", children: [
+                    /* @__PURE__ */ e.jsx("title", { children: i ? "caret down" : "caret up" }),
+                    /* @__PURE__ */ e.jsx(
+                      "path",
+                      {
+                        fill: "currentColor",
+                        d: "M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7L86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z"
+                      }
+                    )
+                  ] })
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ e.jsx(
+          V,
+          {
+            isOpen: i,
+            onClose: () => u(!1),
+            actions: T,
+            selectedKeys: [p],
+            disabledKeys: s
+          }
+        )
+      ]
+    }
+  ) : /* @__PURE__ */ e.jsxs(
+    "div",
+    {
+      className: "proton-Select",
+      "aria-label": r || c,
+      "aria-disabled": o,
+      children: [
+        r && /* @__PURE__ */ e.jsx("div", { className: "proton-Select__label", "data-testid": "select-label", children: r }),
+        /* @__PURE__ */ e.jsx(
+          "input",
+          {
+            ref: d,
+            type: "hidden",
+            name: c,
+            value: p,
+            "data-testid": "hidden-select-container"
+          }
+        ),
+        /* @__PURE__ */ e.jsxs(
+          n.Root,
+          {
+            value: p,
+            onValueChange: k,
+            onOpenChange: R,
+            disabled: o,
+            children: [
+              /* @__PURE__ */ e.jsx(n.Trigger, { asChild: !0, children: /* @__PURE__ */ e.jsxs(
+                g,
+                {
+                  isRounded: S,
+                  isOpen: i,
+                  ref: I,
+                  disabled: o,
+                  "data-testid": v,
+                  children: [
+                    /* @__PURE__ */ e.jsx(
+                      n.Value,
+                      {
+                        className: "proton-Select__value",
+                        placeholder: "Select an option",
+                        children: h ? h.label : "Select an option"
+                      }
+                    ),
+                    /* @__PURE__ */ e.jsx(n.Icon, { asChild: !0, children: /* @__PURE__ */ e.jsx(
+                      "div",
+                      {
+                        className: x(
+                          "proton-Select__trigger_icon",
+                          i && "proton-Select__trigger_icon--flipped"
+                        ),
+                        "aria-hidden": "true",
+                        children: /* @__PURE__ */ e.jsxs("svg", { id: "caret-down", viewBox: "0 0 512 512", children: [
+                          /* @__PURE__ */ e.jsx("title", { children: i ? "caret down" : "caret up" }),
+                          /* @__PURE__ */ e.jsx(
+                            "path",
+                            {
+                              fill: "currentColor",
+                              d: "M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7L86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z"
+                            }
+                          )
+                        ] })
+                      }
+                    ) })
+                  ]
+                }
+              ) }),
+              /* @__PURE__ */ e.jsx(n.Portal, { children: /* @__PURE__ */ e.jsx(
+                n.Content,
+                {
+                  className: x(
+                    "proton-Menu",
+                    "proton-MenuTrigger__menu",
+                    y
+                  ),
+                  style: B,
+                  position: "popper",
+                  children: /* @__PURE__ */ e.jsx(n.Viewport, { children: j.map((t) => /* @__PURE__ */ e.jsx(
+                    n.Item,
+                    {
+                      value: t.key,
+                      disabled: s == null ? void 0 : s.includes(t.key),
+                      className: "proton-Menu__item",
+                      children: /* @__PURE__ */ e.jsx(n.ItemText, { children: t.label })
+                    },
+                    t.key
+                  )) })
+                }
+              ) })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+z.displayName = "ProtonUISelect";
+export {
+  z as Select
+};
+//# sourceMappingURL=Select.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Select.es.js","sources":["../../../src/components/Select/Select.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport {\r\n  forwardRef,\r\n  ReactNode,\r\n  RefObject,\r\n  useEffect,\r\n  useRef,\r\n  useState,\r\n} from \"react\";\r\nimport { Select as RadixSelect } from \"radix-ui\";\r\n\r\nimport { BREAKPOINTS } from \"../../constants\";\r\nimport { useBreakpoint } from \"../../hooks/useBreakpoint\";\r\nimport { csx } from \"../../utils\";\r\nimport { ActionMenu, ActionMenuAction } from \"../ActionMenu/ActionMenu\";\r\n\r\nimport \"./Select.css\";\r\nimport \"../Menu/Menu.css\";\r\nimport { useTheme } from \"../ThemeProvider\";\r\n\r\ninterface SelectButtonProps {\r\n  disabled?: boolean;\r\n  isOpen?: boolean;\r\n  children?: ReactNode;\r\n  onClick?: () => void;\r\n  isRounded?: boolean;\r\n}\r\n\r\nconst SelectButton = forwardRef<HTMLButtonElement, SelectButtonProps>(\r\n  (\r\n    { disabled, isOpen, children, onClick, isRounded, ...props },\r\n    ref: RefObject<HTMLButtonElement>\r\n  ) => {\r\n    return (\r\n      <button\r\n        {...props}\r\n        ref={ref}\r\n        disabled={disabled}\r\n        onClick={onClick}\r\n        className={csx(\r\n          \"proton-Select__trigger\",\r\n          disabled && \"proton-Select__trigger--disabled\",\r\n          !isOpen && \"proton-Select__trigger--closed\",\r\n          isOpen && \"proton-Select__trigger--opened\",\r\n          isRounded && \"proton-Select__trigger--rounded\"\r\n        )}\r\n      >\r\n        {children}\r\n      </button>\r\n    );\r\n  }\r\n);\r\nSelectButton.displayName = \"ProtonUISelectButton\";\r\n\r\nexport interface SelectItem {\r\n  /** The label to display for the item */\r\n  label: string;\r\n\r\n  /** The key of the item */\r\n  key: string;\r\n\r\n  /** The URL to navigate to when the item is clicked, turns item into an a tag */\r\n  to?: string;\r\n}\r\n\r\nexport interface SelectProps {\r\n  /** Array of keys that should be disabled\r\n   * @example [\"Thing 1\", \"Thing 2\"]\r\n   */\r\n  disabledKeys?: string[];\r\n\r\n  /** The key of the default selected item */\r\n  defaultSelectedKey?: string;\r\n\r\n  /** Test ID for the select */\r\n  \"data-testid\"?: string;\r\n\r\n  /** Whether the select is disabled */\r\n  isDisabled?: boolean;\r\n\r\n  /** Array of items to display\r\n   * @example [{ key: \"thing-1\", label: \"Thing 1\" }, { key: \"thing-2\", label: \"Thing 2\" }]\r\n   * @see {@link SelectItem}\r\n   */\r\n  items: SelectItem[];\r\n\r\n  /** Whether the select button is rounded\r\n   * @default false\r\n   */\r\n  isRounded?: boolean;\r\n\r\n  /** Label to display above the select\r\n   * @external https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label#text\r\n   */\r\n  label?: string;\r\n\r\n  /** The name of the select field */\r\n  name: string;\r\n\r\n  /** Callback fired when the menu closes */\r\n  onClose?: () => void;\r\n\r\n  /** Callback fired when the menu opens */\r\n  onOpen?: () => void;\r\n\r\n  /** Callback fired when selection changes */\r\n  onSelectionChange?: (key: string) => void;\r\n\r\n  /** Currently selected key */\r\n  selectedKey?: string;\r\n}\r\n\r\n/**\r\n * A dropdown select menu that opens a popover on desktop and an action menu on mobile.\r\n * Supports controlled and uncontrolled modes.\r\n *\r\n * API:\r\n *  - {@link SelectProps}\r\n */\r\nexport function Select({\r\n  label,\r\n  name,\r\n  isDisabled,\r\n  disabledKeys,\r\n  selectedKey,\r\n  onSelectionChange,\r\n  defaultSelectedKey,\r\n  onOpen,   \r\n  onClose,\r\n  items,\r\n  isRounded = false,\r\n  \"data-testid\": testId,\r\n}: SelectProps) {\r\n  const [isOpen, setIsOpen] = useState(false);\r\n  const [internalSelectedKey, setInternalSelectedKey] = useState(\r\n    selectedKey || defaultSelectedKey || \"\"\r\n  );\r\n  const { className: themeClass, style: themeStyle } = useTheme();\r\n  const isMobile = useBreakpoint(BREAKPOINTS.MEDIUM);\r\n  const triggerRef = useRef<HTMLButtonElement>(null);\r\n  const hiddenInputRef = useRef<HTMLInputElement>(null);\r\n\r\n  // Handle controlled vs uncontrolled state\r\n  const currentSelectedKey =\r\n    selectedKey !== undefined ? selectedKey : internalSelectedKey;\r\n  const selectedItem = items.find((item) => item.key === currentSelectedKey);\r\n\r\n  const handleValueChange = (value: string) => {\r\n    if (selectedKey === undefined) {\r\n      setInternalSelectedKey(value);\r\n    }\r\n    onSelectionChange?.(value);\r\n\r\n    // Update hidden input for form submission\r\n    if (hiddenInputRef.current) {\r\n      hiddenInputRef.current.value = value;\r\n      hiddenInputRef.current.dispatchEvent(\r\n        new Event(\"change\", { bubbles: true })\r\n      );\r\n    }\r\n  };\r\n\r\n  const handleOpenChange = (open: boolean) => {\r\n    setIsOpen(open);\r\n    if (open) {\r\n      onOpen?.();\r\n    } else {\r\n      onClose?.();\r\n    }\r\n  };\r\n\r\n  // Update internal state when controlled selectedKey changes\r\n  useEffect(() => {\r\n    if (selectedKey !== undefined) {\r\n      setInternalSelectedKey(selectedKey);\r\n    }\r\n  }, [selectedKey]);\r\n\r\n  const actionItems: ActionMenuAction[] = items.map((item) => ({\r\n    key: item.key,\r\n    label: item.label,\r\n    to: item.to,\r\n    onAction: () => {\r\n      handleValueChange(item.key);\r\n      setIsOpen(false);\r\n    },\r\n  }));\r\n\r\n  if (isMobile) {\r\n    return (\r\n      <div\r\n        className=\"proton-Select\"\r\n        aria-label={label || name}\r\n        aria-disabled={isDisabled}\r\n      >\r\n        {label && (\r\n          <div className=\"proton-Select__label\" data-testid=\"select-label\">\r\n            {label}\r\n          </div>\r\n        )}\r\n\r\n        {/* Hidden input for form submission */}\r\n        <input\r\n          ref={hiddenInputRef}\r\n          type=\"hidden\"\r\n          name={name}\r\n          value={currentSelectedKey}\r\n          data-testid=\"hidden-select-container\"\r\n        />\r\n\r\n        <SelectButton\r\n          isOpen={isOpen}\r\n          isRounded={isRounded}\r\n          ref={triggerRef}\r\n          disabled={isDisabled}\r\n          data-testid={testId}\r\n          onClick={() => setIsOpen(true)}\r\n        >\r\n          <div className=\"proton-Select__value\">\r\n            {selectedItem ? selectedItem.label : \"Select an option\"}\r\n          </div>\r\n          <div\r\n            className={csx(\r\n              \"proton-Select__trigger_icon\",\r\n              isOpen && \"proton-Select__trigger_icon--flipped\"\r\n            )}\r\n            aria-hidden=\"true\"\r\n          >\r\n            <svg id=\"caret-down\" viewBox=\"0 0 512 512\">\r\n              <title>{isOpen ? \"caret down\" : \"caret up\"}</title>\r\n              <path\r\n                fill=\"currentColor\"\r\n                d=\"M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7L86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z\"\r\n              />\r\n            </svg>\r\n          </div>\r\n        </SelectButton>\r\n\r\n        <ActionMenu\r\n          isOpen={isOpen}\r\n          onClose={() => setIsOpen(false)}\r\n          actions={actionItems}\r\n          selectedKeys={[currentSelectedKey]}\r\n          disabledKeys={disabledKeys}\r\n        />\r\n      </div>\r\n    );\r\n  }\r\n\r\n  return (\r\n    <div\r\n      className=\"proton-Select\"\r\n      aria-label={label || name}\r\n      aria-disabled={isDisabled}\r\n    >\r\n      {label && (\r\n        <div className=\"proton-Select__label\" data-testid=\"select-label\">\r\n          {label}\r\n        </div>\r\n      )}\r\n\r\n      {/* Hidden input for form submission */}\r\n      <input\r\n        ref={hiddenInputRef}\r\n        type=\"hidden\"\r\n        name={name}\r\n        value={currentSelectedKey}\r\n        data-testid=\"hidden-select-container\"\r\n      />\r\n\r\n      <RadixSelect.Root\r\n        value={currentSelectedKey}\r\n        onValueChange={handleValueChange}\r\n        onOpenChange={handleOpenChange}\r\n        disabled={isDisabled}\r\n      >\r\n        <RadixSelect.Trigger asChild>\r\n          <SelectButton\r\n            isRounded={isRounded}\r\n            isOpen={isOpen}\r\n            ref={triggerRef}\r\n            disabled={isDisabled}\r\n            data-testid={testId}\r\n          >\r\n            <RadixSelect.Value\r\n              className=\"proton-Select__value\"\r\n              placeholder=\"Select an option\"\r\n            >\r\n              {selectedItem ? selectedItem.label : \"Select an option\"}\r\n            </RadixSelect.Value>\r\n            <RadixSelect.Icon asChild>\r\n              <div\r\n                className={csx(\r\n                  \"proton-Select__trigger_icon\",\r\n                  isOpen && \"proton-Select__trigger_icon--flipped\"\r\n                )}\r\n                aria-hidden=\"true\"\r\n              >\r\n                <svg id=\"caret-down\" viewBox=\"0 0 512 512\">\r\n                  <title>{isOpen ? \"caret down\" : \"caret up\"}</title>\r\n                  <path\r\n                    fill=\"currentColor\"\r\n                    d=\"M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7L86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z\"\r\n                  />\r\n                </svg>\r\n              </div>\r\n            </RadixSelect.Icon>\r\n          </SelectButton>\r\n        </RadixSelect.Trigger>\r\n\r\n        <RadixSelect.Portal>\r\n          <RadixSelect.Content\r\n            className={csx(\r\n              \"proton-Menu\",\r\n              \"proton-MenuTrigger__menu\",\r\n              themeClass\r\n            )}\r\n            style={themeStyle as React.CSSProperties}\r\n            position=\"popper\"\r\n          >\r\n            <RadixSelect.Viewport>\r\n              {items.map((item) => (\r\n                <RadixSelect.Item\r\n                  key={item.key}\r\n                  value={item.key}\r\n                  disabled={disabledKeys?.includes(item.key)}\r\n                  className=\"proton-Menu__item\"\r\n                >\r\n                  <RadixSelect.ItemText>{item.label}</RadixSelect.ItemText>\r\n                </RadixSelect.Item>\r\n              ))}\r\n            </RadixSelect.Viewport>\r\n          </RadixSelect.Content>\r\n        </RadixSelect.Portal>\r\n      </RadixSelect.Root>\r\n    </div>\r\n  );\r\n}\r\n\r\nSelect.displayName = \"ProtonUISelect\";\r\n"],"names":["SelectButton","forwardRef","disabled","isOpen","children","onClick","isRounded","props","ref","jsx","csx","Select","label","name","isDisabled","disabledKeys","selectedKey","onSelectionChange","defaultSelectedKey","onOpen","onClose","items","testId","setIsOpen","useState","internalSelectedKey","setInternalSelectedKey","themeClass","themeStyle","useTheme","isMobile","useBreakpoint","BREAKPOINTS","triggerRef","useRef","hiddenInputRef","currentSelectedKey","selectedItem","item","handleValueChange","value","handleOpenChange","open","useEffect","actionItems","jsxs","ActionMenu","RadixSelect"],"mappings":"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"}

package/dist/components/Switch/Switch.cjs.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("../../node_modules/react/jsx-runtime.cjs.js"),a=require("react"),d=require("../../node_modules/@react-aria/switch/dist/useSwitch.cjs.js"),r=require("../../node_modules/@react-aria/visually-hidden/dist/VisuallyHidden.cjs.js"),c=require("../../node_modules/@react-stately/toggle/dist/useToggleState.cjs.js");;/* empty css                */const o=require("../../utils/string.cjs.js");function u(e){let s={...e,isSelected:e.isOn,"data-testid":void 0},l=a.useRef(null),i=c.useToggleState(s),{inputProps:n}=d.useSwitch(s,i,l);return t.jsxRuntimeExports.jsxs("label",{className:o.csx("proton-Switch",e.isDisabled&&"proton-Switch--disabled",i.isSelected&&"proton-Switch--on"),"data-on":i.isSelected||void 0,"data-disabled":e.isDisabled||void 0,"data-testid":e["data-testid"]||void 0,"aria-label":e.label||void 0,children:[t.jsxRuntimeExports.jsx(r.VisuallyHidden,{children:t.jsxRuntimeExports.jsx("input",{...n,ref:l})}),e.label&&t.jsxRuntimeExports.jsx("div",{className:"proton-Switch__label",children:e.label}),t.jsxRuntimeExports.jsxs("div",{className:"proton-Switch__wrapper",children:[t.jsxRuntimeExports.jsx("div",{className:"proton-Switch__toggle",children:t.jsxRuntimeExports.jsx("div",{className:"proton-Switch__slider"})}),e.children&&t.jsxRuntimeExports.jsx("div",{className:"proton-Switch__description",children:e.children})]})]})}exports.Switch=u;
+//# sourceMappingURL=Switch.cjs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Switch.cjs.js","sources":["../../../src/components/Switch/Switch.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport { useRef } from \"react\";\r\nimport { useSwitch } from \"@react-aria/switch\";\r\nimport { VisuallyHidden } from \"@react-aria/visually-hidden\";\r\nimport { useToggleState } from \"@react-stately/toggle\";\r\n\r\nimport { csx } from \"../../utils\";\r\n\r\nimport \"./Switch.css\";\r\n\r\nexport interface SwitchProps {\r\n  /**\r\n   * Whether the Switch is in the 'on' state (uncontrolled).\r\n   */\r\n  defaultOn?: boolean;\r\n\r\n  /**\r\n   * Whether the Switch is in the 'on' state. Providing this prop causes the\r\n   * component to become controlled.\r\n   */\r\n  isOn?: boolean;\r\n\r\n  /**\r\n   * Should the input be non-interactive?\r\n   */\r\n  isDisabled?: boolean;\r\n\r\n  /**\r\n   * Called when the Switch's on state changes.\r\n   */\r\n  onChange?: (isOn: boolean) => void;\r\n\r\n  /**\r\n   * The string used for the input label. Forwarded to `aria-label`.\r\n   */\r\n  label?: string;\r\n\r\n  /**\r\n   * The text or component to be rendered as the Switch's description.\r\n   */\r\n  children?: React.ReactNode;\r\n}\r\n\r\n/**\r\n * A toggle switch component for boolean state control with support for controlled and uncontrolled modes.\r\n *\r\n * API:\r\n *  - {@link SwitchProps}\r\n */\r\nexport function Switch(props: SwitchProps) {\r\n  let sanitizedProps = {\r\n    ...props,\r\n    isSelected: props.isOn,\r\n    \"data-testid\": undefined,\r\n  };\r\n\r\n  let ref = useRef(null);\r\n\r\n  let state = useToggleState(sanitizedProps);\r\n  let { inputProps } = useSwitch(sanitizedProps, state, ref);\r\n\r\n  return (\r\n    <label\r\n      className={csx(\r\n        \"proton-Switch\",\r\n        props.isDisabled && \"proton-Switch--disabled\",\r\n        state.isSelected && \"proton-Switch--on\"\r\n      )}\r\n      data-on={state.isSelected || undefined}\r\n      data-disabled={props.isDisabled || undefined}\r\n      data-testid={props[\"data-testid\"] || undefined}\r\n      aria-label={props.label || undefined}\r\n    >\r\n      <VisuallyHidden>\r\n        <input {...inputProps} ref={ref} />\r\n      </VisuallyHidden>\r\n      {props.label && <div className=\"proton-Switch__label\">{props.label}</div>}\r\n      <div className=\"proton-Switch__wrapper\">\r\n        <div className=\"proton-Switch__toggle\">\r\n          <div className=\"proton-Switch__slider\"></div>\r\n        </div>\r\n        {props.children && (\r\n          <div className=\"proton-Switch__description\">{props.children}</div>\r\n        )}\r\n      </div>\r\n    </label>\r\n  );\r\n}\r\n"],"names":["Switch","props","sanitizedProps","ref","useRef","state","useToggleState","inputProps","useSwitch","jsxs","csx","jsx","VisuallyHidden"],"mappings":"+dAkDO,SAASA,EAAOC,EAAoB,CACzC,IAAIC,EAAiB,CACnB,GAAGD,EACH,WAAYA,EAAM,KAClB,cAAe,MAAA,EAGbE,EAAMC,SAAO,IAAI,EAEjBC,EAAQC,iBAAeJ,CAAc,EACrC,CAAE,WAAAK,CAAW,EAAIC,EAAAA,UAAUN,EAAgBG,EAAOF,CAAG,EAGvD,OAAAM,EAAA,kBAAA,KAAC,QAAA,CACC,UAAWC,EAAA,IACT,gBACAT,EAAM,YAAc,0BACpBI,EAAM,YAAc,mBACtB,EACA,UAASA,EAAM,YAAc,OAC7B,gBAAeJ,EAAM,YAAc,OACnC,cAAaA,EAAM,aAAa,GAAK,OACrC,aAAYA,EAAM,OAAS,OAE3B,SAAA,CAAAU,wBAACC,EAAAA,gBACC,SAACD,EAAA,kBAAA,IAAA,QAAA,CAAO,GAAGJ,EAAY,IAAAJ,CAAU,CAAA,EACnC,EACCF,EAAM,OAASU,EAAA,kBAAA,IAAC,OAAI,UAAU,uBAAwB,WAAM,MAAM,EACnEF,EAAAA,kBAAAA,KAAC,MAAI,CAAA,UAAU,yBACb,SAAA,CAAAE,EAAAA,kBAAAA,IAAC,OAAI,UAAU,wBACb,iCAAC,MAAI,CAAA,UAAU,wBAAwB,CACzC,CAAA,EACCV,EAAM,UACLU,EAAA,kBAAA,IAAC,OAAI,UAAU,6BAA8B,WAAM,SAAS,CAAA,EAEhE,CAAA,CAAA,CAAA,CAGN"}

package/dist/components/Switch/Switch.es.js

@@ -0,0 +1,40 @@
+import { j as i } from "../../node_modules/react/jsx-runtime.es.js";
+import { useRef as s } from "react";
+import { useSwitch as c } from "../../node_modules/@react-aria/switch/dist/useSwitch.es.js";
+import { VisuallyHidden as o } from "../../node_modules/@react-aria/visually-hidden/dist/VisuallyHidden.es.js";
+import { useToggleState as r } from "../../node_modules/@react-stately/toggle/dist/useToggleState.es.js";
+/* empty css              */
+import { csx as n } from "../../utils/string.es.js";
+function j(e) {
+  let a = {
+    ...e,
+    isSelected: e.isOn,
+    "data-testid": void 0
+  }, d = s(null), t = r(a), { inputProps: l } = c(a, t, d);
+  return /* @__PURE__ */ i.jsxs(
+    "label",
+    {
+      className: n(
+        "proton-Switch",
+        e.isDisabled && "proton-Switch--disabled",
+        t.isSelected && "proton-Switch--on"
+      ),
+      "data-on": t.isSelected || void 0,
+      "data-disabled": e.isDisabled || void 0,
+      "data-testid": e["data-testid"] || void 0,
+      "aria-label": e.label || void 0,
+      children: [
+        /* @__PURE__ */ i.jsx(o, { children: /* @__PURE__ */ i.jsx("input", { ...l, ref: d }) }),
+        e.label && /* @__PURE__ */ i.jsx("div", { className: "proton-Switch__label", children: e.label }),
+        /* @__PURE__ */ i.jsxs("div", { className: "proton-Switch__wrapper", children: [
+          /* @__PURE__ */ i.jsx("div", { className: "proton-Switch__toggle", children: /* @__PURE__ */ i.jsx("div", { className: "proton-Switch__slider" }) }),
+          e.children && /* @__PURE__ */ i.jsx("div", { className: "proton-Switch__description", children: e.children })
+        ] })
+      ]
+    }
+  );
+}
+export {
+  j as Switch
+};
+//# sourceMappingURL=Switch.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Switch.es.js","sources":["../../../src/components/Switch/Switch.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport { useRef } from \"react\";\r\nimport { useSwitch } from \"@react-aria/switch\";\r\nimport { VisuallyHidden } from \"@react-aria/visually-hidden\";\r\nimport { useToggleState } from \"@react-stately/toggle\";\r\n\r\nimport { csx } from \"../../utils\";\r\n\r\nimport \"./Switch.css\";\r\n\r\nexport interface SwitchProps {\r\n  /**\r\n   * Whether the Switch is in the 'on' state (uncontrolled).\r\n   */\r\n  defaultOn?: boolean;\r\n\r\n  /**\r\n   * Whether the Switch is in the 'on' state. Providing this prop causes the\r\n   * component to become controlled.\r\n   */\r\n  isOn?: boolean;\r\n\r\n  /**\r\n   * Should the input be non-interactive?\r\n   */\r\n  isDisabled?: boolean;\r\n\r\n  /**\r\n   * Called when the Switch's on state changes.\r\n   */\r\n  onChange?: (isOn: boolean) => void;\r\n\r\n  /**\r\n   * The string used for the input label. Forwarded to `aria-label`.\r\n   */\r\n  label?: string;\r\n\r\n  /**\r\n   * The text or component to be rendered as the Switch's description.\r\n   */\r\n  children?: React.ReactNode;\r\n}\r\n\r\n/**\r\n * A toggle switch component for boolean state control with support for controlled and uncontrolled modes.\r\n *\r\n * API:\r\n *  - {@link SwitchProps}\r\n */\r\nexport function Switch(props: SwitchProps) {\r\n  let sanitizedProps = {\r\n    ...props,\r\n    isSelected: props.isOn,\r\n    \"data-testid\": undefined,\r\n  };\r\n\r\n  let ref = useRef(null);\r\n\r\n  let state = useToggleState(sanitizedProps);\r\n  let { inputProps } = useSwitch(sanitizedProps, state, ref);\r\n\r\n  return (\r\n    <label\r\n      className={csx(\r\n        \"proton-Switch\",\r\n        props.isDisabled && \"proton-Switch--disabled\",\r\n        state.isSelected && \"proton-Switch--on\"\r\n      )}\r\n      data-on={state.isSelected || undefined}\r\n      data-disabled={props.isDisabled || undefined}\r\n      data-testid={props[\"data-testid\"] || undefined}\r\n      aria-label={props.label || undefined}\r\n    >\r\n      <VisuallyHidden>\r\n        <input {...inputProps} ref={ref} />\r\n      </VisuallyHidden>\r\n      {props.label && <div className=\"proton-Switch__label\">{props.label}</div>}\r\n      <div className=\"proton-Switch__wrapper\">\r\n        <div className=\"proton-Switch__toggle\">\r\n          <div className=\"proton-Switch__slider\"></div>\r\n        </div>\r\n        {props.children && (\r\n          <div className=\"proton-Switch__description\">{props.children}</div>\r\n        )}\r\n      </div>\r\n    </label>\r\n  );\r\n}\r\n"],"names":["Switch","props","sanitizedProps","ref","useRef","state","useToggleState","inputProps","useSwitch","jsxs","csx","jsx","VisuallyHidden"],"mappings":";;;;;;;AAkDO,SAASA,EAAOC,GAAoB;AACzC,MAAIC,IAAiB;AAAA,IACnB,GAAGD;AAAA,IACH,YAAYA,EAAM;AAAA,IAClB,eAAe;AAAA,EAAA,GAGbE,IAAMC,EAAO,IAAI,GAEjBC,IAAQC,EAAeJ,CAAc,GACrC,EAAE,YAAAK,EAAW,IAAIC,EAAUN,GAAgBG,GAAOF,CAAG;AAGvD,SAAAM,gBAAAA,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC;AAAA,QACT;AAAA,QACAT,EAAM,cAAc;AAAA,QACpBI,EAAM,cAAc;AAAA,MACtB;AAAA,MACA,WAASA,EAAM,cAAc;AAAA,MAC7B,iBAAeJ,EAAM,cAAc;AAAA,MACnC,eAAaA,EAAM,aAAa,KAAK;AAAA,MACrC,cAAYA,EAAM,SAAS;AAAA,MAE3B,UAAA;AAAA,QAAAU,gBAAAA,MAACC,KACC,UAACD,gBAAAA,EAAA,IAAA,SAAA,EAAO,GAAGJ,GAAY,KAAAJ,EAAU,CAAA,GACnC;AAAA,QACCF,EAAM,SAASU,gBAAAA,EAAA,IAAC,SAAI,WAAU,wBAAwB,YAAM,OAAM;AAAA,QACnEF,gBAAAA,EAAAA,KAAC,OAAI,EAAA,WAAU,0BACb,UAAA;AAAA,UAAAE,gBAAAA,EAAAA,IAAC,SAAI,WAAU,yBACb,gCAAC,OAAI,EAAA,WAAU,yBAAwB,EACzC,CAAA;AAAA,UACCV,EAAM,YACLU,gBAAAA,EAAA,IAAC,SAAI,WAAU,8BAA8B,YAAM,UAAS;AAAA,QAAA,GAEhE;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/dist/components/Table/Collection/CompoundComponents.cjs.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=({...l})=>null,r=({...l})=>null,o=({...l})=>null,n=({...l})=>null,t=({...l})=>null;exports.TableBody=o;exports.TableCell=t;exports.TableColumn=r;exports.TableHeader=e;exports.TableRow=n;
+//# sourceMappingURL=CompoundComponents.cjs.js.map

package/dist/components/Table/Collection/CompoundComponents.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CompoundComponents.cjs.js","sources":["../../../../src/components/Table/Collection/CompoundComponents.tsx"],"sourcesContent":["import { AriaAttributes, ReactElement, ReactNode } from \"react\";\r\n\r\n/*\r\n  Compound reference components used to build the table collection.\r\n  They are not rendered, but used to parse the table structure.\r\n*/\r\n\r\ntype TableColumnElement = ReactElement<TableColumnProps, typeof TableColumn>;\r\ntype TableRowElement = ReactElement<TableRowProps, typeof TableRow>;\r\ntype TableCellElement = ReactElement<TableCellProps, typeof TableCell>;\r\n\r\nexport interface TableHeaderProps {\r\n  children: TableColumnElement | TableColumnElement[];\r\n  isHidden?: boolean;\r\n}\r\n\r\nexport interface TableColumnProps {\r\n  id: string;\r\n  children: ReactNode;\r\n  \"aria-sort\"?: AriaAttributes[\"aria-sort\"];\r\n}\r\n\r\nexport interface TableBodyProps {\r\n  children: TableRowElement | TableRowElement[];\r\n}\r\n\r\nexport interface TableRowProps {\r\n  key?: string | number;\r\n  children: TableCellElement | TableCellElement[];\r\n  onClick?: () => void;\r\n}\r\n\r\nexport interface TableCellProps {\r\n  columnKey?: string;\r\n  children?: ReactNode;\r\n  colSpan?: number;\r\n}\r\n\r\n// Type-safe component definitions that enforce proper children\r\nexport const TableHeader = ({ ...props }: TableHeaderProps) => {\r\n  return null; // This is just a marker component for parsing\r\n};\r\n\r\nexport const TableColumn = ({ ...props }: TableColumnProps) => {\r\n  return null; // This is just a marker component for parsing\r\n};\r\n\r\nexport const TableBody = ({ ...props }: TableBodyProps) => {\r\n  return null; // This is just a marker component for parsing\r\n};\r\n\r\nexport const TableRow = ({ ...props }: TableRowProps) => {\r\n  return null; // This is just a marker component for parsing\r\n};\r\n\r\nexport const TableCell = ({ ...props }: TableCellProps) => {\r\n  return null; // This is just a marker component for parsing\r\n};\r\n"],"names":["TableHeader","props","TableColumn","TableBody","TableRow","TableCell"],"mappings":"gFAuCO,MAAMA,EAAc,CAAC,CAAE,GAAGC,KACxB,KAGIC,EAAc,CAAC,CAAE,GAAGD,KACxB,KAGIE,EAAY,CAAC,CAAE,GAAGF,KACtB,KAGIG,EAAW,CAAC,CAAE,GAAGH,KACrB,KAGII,EAAY,CAAC,CAAE,GAAGJ,KACtB"}

package/dist/components/Table/Collection/CompoundComponents.es.js

@@ -0,0 +1,9 @@
+const r = ({ ...l }) => null, n = ({ ...l }) => null, e = ({ ...l }) => null, o = ({ ...l }) => null, p = ({ ...l }) => null;
+export {
+  e as TableBody,
+  p as TableCell,
+  n as TableColumn,
+  r as TableHeader,
+  o as TableRow
+};
+//# sourceMappingURL=CompoundComponents.es.js.map

package/dist/components/Table/Collection/CompoundComponents.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CompoundComponents.es.js","sources":["../../../../src/components/Table/Collection/CompoundComponents.tsx"],"sourcesContent":["import { AriaAttributes, ReactElement, ReactNode } from \"react\";\r\n\r\n/*\r\n  Compound reference components used to build the table collection.\r\n  They are not rendered, but used to parse the table structure.\r\n*/\r\n\r\ntype TableColumnElement = ReactElement<TableColumnProps, typeof TableColumn>;\r\ntype TableRowElement = ReactElement<TableRowProps, typeof TableRow>;\r\ntype TableCellElement = ReactElement<TableCellProps, typeof TableCell>;\r\n\r\nexport interface TableHeaderProps {\r\n  children: TableColumnElement | TableColumnElement[];\r\n  isHidden?: boolean;\r\n}\r\n\r\nexport interface TableColumnProps {\r\n  id: string;\r\n  children: ReactNode;\r\n  \"aria-sort\"?: AriaAttributes[\"aria-sort\"];\r\n}\r\n\r\nexport interface TableBodyProps {\r\n  children: TableRowElement | TableRowElement[];\r\n}\r\n\r\nexport interface TableRowProps {\r\n  key?: string | number;\r\n  children: TableCellElement | TableCellElement[];\r\n  onClick?: () => void;\r\n}\r\n\r\nexport interface TableCellProps {\r\n  columnKey?: string;\r\n  children?: ReactNode;\r\n  colSpan?: number;\r\n}\r\n\r\n// Type-safe component definitions that enforce proper children\r\nexport const TableHeader = ({ ...props }: TableHeaderProps) => {\r\n  return null; // This is just a marker component for parsing\r\n};\r\n\r\nexport const TableColumn = ({ ...props }: TableColumnProps) => {\r\n  return null; // This is just a marker component for parsing\r\n};\r\n\r\nexport const TableBody = ({ ...props }: TableBodyProps) => {\r\n  return null; // This is just a marker component for parsing\r\n};\r\n\r\nexport const TableRow = ({ ...props }: TableRowProps) => {\r\n  return null; // This is just a marker component for parsing\r\n};\r\n\r\nexport const TableCell = ({ ...props }: TableCellProps) => {\r\n  return null; // This is just a marker component for parsing\r\n};\r\n"],"names":["TableHeader","props","TableColumn","TableBody","TableRow","TableCell"],"mappings":"AAuCO,MAAMA,IAAc,CAAC,EAAE,GAAGC,QACxB,MAGIC,IAAc,CAAC,EAAE,GAAGD,QACxB,MAGIE,IAAY,CAAC,EAAE,GAAGF,QACtB,MAGIG,IAAW,CAAC,EAAE,GAAGH,QACrB,MAGII,IAAY,CAAC,EAAE,GAAGJ,QACtB;"}

package/dist/components/Table/Collection/collectionParser.cjs.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react"),t=require("./CompoundComponents.cjs.js");function i(a,o){return a.type===o}function m(a){const o=[],c=[];return n.Children.forEach(a,s=>{if(n.isValidElement(s)){if(i(s,t.TableHeader)){const l=s.props;n.Children.forEach(l.children,e=>{if(n.isValidElement(e)&&i(e,t.TableColumn)){const r=e.props;o.push({key:r.id,header:r.children,isHidden:l.isHidden||!1,ariaSort:r["aria-sort"]})}})}if(i(s,t.TableBody)){const l=s.props;n.Children.forEach(l.children,e=>{if(n.isValidElement(e)&&i(e,t.TableRow)){const r=e.props,u=[];let f=0;n.Children.forEach(r.children,p=>{var y;if(n.isValidElement(p)&&i(p,t.TableCell)){const d=p.props,b=d.columnKey||((y=o[f])==null?void 0:y.key);b&&u.push({columnKey:b,value:d.children,colSpan:d.colSpan}),f++}}),c.push({key:e.key||r.key||String(c.length),cells:u,onClick:r.onClick})}})}}}),{columns:o,rows:c}}exports.parseTableChildren=m;
+//# sourceMappingURL=collectionParser.cjs.js.map

package/dist/components/Table/Collection/collectionParser.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"collectionParser.cjs.js","sources":["../../../../src/components/Table/Collection/collectionParser.ts"],"sourcesContent":["import {\r\n  Children,\r\n  isValidElement,\r\n  ReactElement,\r\n  ReactNode,\r\n  ComponentType,\r\n} from \"react\";\r\n\r\nimport {\r\n  TableHeader,\r\n  TableColumn as TableColumnComp,\r\n  TableBody,\r\n  TableRow as TableRowComp,\r\n  TableCell as TableCellComp,\r\n  type TableHeaderProps,\r\n  type TableColumnProps,\r\n  type TableBodyProps,\r\n  type TableRowProps,\r\n  type TableCellProps,\r\n} from \"./CompoundComponents\";\r\nimport type {\r\n  TableColumnData,\r\n  TableData,\r\n  TableRowData,\r\n  TableCellData,\r\n} from \"../types\";\r\n\r\nfunction isComponentType(\r\n  element: ReactElement,\r\n  componentType: ComponentType<any>\r\n): boolean {\r\n  return element.type === componentType;\r\n}\r\n\r\n/**\r\n * Parses JSX table structure into collection data format\r\n */\r\nexport function parseTableChildren(children: ReactNode): TableData {\r\n  const columns: TableColumnData[] = [];\r\n  const rows: TableRowData[] = [];\r\n\r\n  Children.forEach(children, (child) => {\r\n    if (!isValidElement(child)) return;\r\n\r\n    // Parse columns from header\r\n    if (isComponentType(child, TableHeader)) {\r\n      const headerProps = child.props as TableHeaderProps;\r\n\r\n      Children.forEach(headerProps.children, (columnChild) => {\r\n        if (\r\n          isValidElement(columnChild) &&\r\n          isComponentType(columnChild, TableColumnComp)\r\n        ) {\r\n          const columnProps = columnChild.props as TableColumnProps;\r\n          columns.push({\r\n            key: columnProps.id,\r\n            header: columnProps.children,\r\n            isHidden: headerProps.isHidden || false,\r\n            ariaSort: columnProps[\"aria-sort\"],\r\n          });\r\n        }\r\n      });\r\n    }\r\n\r\n    // Parse rows from body\r\n    if (isComponentType(child, TableBody)) {\r\n      const bodyProps = child.props as TableBodyProps;\r\n      Children.forEach(bodyProps.children, (rowChild) => {\r\n        if (\r\n          isValidElement(rowChild) &&\r\n          isComponentType(rowChild, TableRowComp)\r\n        ) {\r\n          const rowProps = rowChild.props as TableRowProps;\r\n          const cells: TableCellData[] = [];\r\n\r\n          let cellIndex = 0;\r\n          Children.forEach(rowProps.children, (cellChild) => {\r\n            if (\r\n              isValidElement(cellChild) &&\r\n              isComponentType(cellChild, TableCellComp)\r\n            ) {\r\n              const cellProps = cellChild.props as TableCellProps;\r\n\r\n              // Map cell to column by index if no explicit columnKey\r\n              const columnKey = cellProps.columnKey || columns[cellIndex]?.key;\r\n\r\n              if (columnKey) {\r\n                cells.push({\r\n                  columnKey,\r\n                  value: cellProps.children,\r\n                  colSpan: cellProps.colSpan,\r\n                });\r\n              }\r\n              cellIndex++;\r\n            }\r\n          });\r\n\r\n          rows.push({\r\n            key:\r\n              (rowChild.key as string) || rowProps.key || String(rows.length),\r\n            cells,\r\n            onClick: rowProps.onClick,\r\n          });\r\n        }\r\n      });\r\n    }\r\n  });\r\n\r\n  return { columns, rows };\r\n}\r\n"],"names":["isComponentType","element","componentType","parseTableChildren","children","columns","rows","Children","child","isValidElement","TableHeader","headerProps","columnChild","TableColumnComp","columnProps","TableBody","bodyProps","rowChild","TableRowComp","rowProps","cells","cellIndex","cellChild","TableCellComp","cellProps","columnKey","_a"],"mappings":"kJA2BA,SAASA,EACPC,EACAC,EACS,CACT,OAAOD,EAAQ,OAASC,CAC1B,CAKO,SAASC,EAAmBC,EAAgC,CACjE,MAAMC,EAA6B,CAAA,EAC7BC,EAAuB,CAAA,EAEpBC,OAAAA,EAAAA,SAAA,QAAQH,EAAWI,GAAU,CAChC,GAACC,EAAAA,eAAeD,CAAK,EAGrB,IAAAR,EAAgBQ,EAAOE,EAAAA,WAAW,EAAG,CACvC,MAAMC,EAAcH,EAAM,MAE1BD,EAAAA,SAAS,QAAQI,EAAY,SAAWC,GAAgB,CACtD,GACEH,EAAAA,eAAeG,CAAW,GAC1BZ,EAAgBY,EAAaC,EAAe,WAAA,EAC5C,CACA,MAAMC,EAAcF,EAAY,MAChCP,EAAQ,KAAK,CACX,IAAKS,EAAY,GACjB,OAAQA,EAAY,SACpB,SAAUH,EAAY,UAAY,GAClC,SAAUG,EAAY,WAAW,CAAA,CAClC,CACH,CAAA,CACD,CACH,CAGI,GAAAd,EAAgBQ,EAAOO,EAAAA,SAAS,EAAG,CACrC,MAAMC,EAAYR,EAAM,MACxBD,EAAAA,SAAS,QAAQS,EAAU,SAAWC,GAAa,CACjD,GACER,EAAAA,eAAeQ,CAAQ,GACvBjB,EAAgBiB,EAAUC,EAAY,QAAA,EACtC,CACA,MAAMC,EAAWF,EAAS,MACpBG,EAAyB,CAAA,EAE/B,IAAIC,EAAY,EAChBd,EAAAA,SAAS,QAAQY,EAAS,SAAWG,GAAc,OACjD,GACEb,EAAAA,eAAea,CAAS,GACxBtB,EAAgBsB,EAAWC,EAAa,SAAA,EACxC,CACA,MAAMC,EAAYF,EAAU,MAGtBG,EAAYD,EAAU,aAAaE,EAAArB,EAAQgB,CAAS,IAAjB,YAAAK,EAAoB,KAEzDD,GACFL,EAAM,KAAK,CACT,UAAAK,EACA,MAAOD,EAAU,SACjB,QAASA,EAAU,OAAA,CACpB,EAEHH,GACF,CAAA,CACD,EAEDf,EAAK,KAAK,CACR,IACGW,EAAS,KAAkBE,EAAS,KAAO,OAAOb,EAAK,MAAM,EAChE,MAAAc,EACA,QAASD,EAAS,OAAA,CACnB,CACH,CAAA,CACD,CACH,EAAA,CACD,EAEM,CAAE,QAAAd,EAAS,KAAAC,EACpB"}