@protonradio/proton-ui 0.11.4 → 0.11.5-beta.2

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"),l=require("react"),P=require("../../node_modules/@react-aria/select/dist/useSelect.cjs.js"),B=require("../../node_modules/@react-aria/select/dist/HiddenSelect.cjs.js"),O=require("../../node_modules/@react-aria/button/dist/useButton.cjs.js"),N=require("../../node_modules/@react-stately/select/dist/useSelectState.cjs.js"),I=require("../../node_modules/@react-stately/collections/dist/Item.cjs.js"),k=require("../../hooks/useBreakpoint.cjs.js"),M=require("../ActionMenu/ActionMenu.cjs.js"),w=require("../ListBox/ListBox.cjs.js"),A=require("../Popover/Popover.cjs.js");;/* empty css                */const S=require("../../utils/string.cjs.js"),L=require("../../constants/breakpoint.cjs.js"),R=l.forwardRef((s,n)=>{let{buttonProps:i}=O.useButton({...s,isDisabled:s.disabled},n);return e.jsxRuntimeExports.jsx("button",{...i,ref:n,className:S.csx("proton-Select__trigger",s.disabled&&"proton-Select__trigger--disabled",!s.isOpen&&"proton-Select__trigger--closed",s.isOpen&&"proton-Select__trigger--opened"),children:s.children})});R.displayName="ProtonUISelectButton";function g({label:s,name:n,isDisabled:i,disabledKeys:a,selectedKey:h,onSelectionChange:E,defaultSelectedKey:_,onOpen:u,onClose:d,items:x,"data-testid":p}){const j={label:s,isDisabled:i,disabledKeys:a,selectedKey:h,defaultSelectedKey:_,onSelectionChange:E,onOpenChange:r=>{r?u==null||u():d==null||d()},"data-testid":p,children:x.map(r=>e.jsxRuntimeExports.jsx(I.Item,{textValue:r.label,children:r.label},r.key))},t=N.useSelectState(j),f=k.useBreakpoint(L.BREAKPOINTS.MEDIUM),o=l.useRef(null),c=l.useRef(null),{labelProps:m,triggerProps:v,valueProps:b,menuProps:q}=P.useSelect({...j,label:s||n},t,o);l.useEffect(()=>{t.isOpen&&c.current&&o.current&&!c.current.style.minWidth&&(c.current.style.minWidth=`${o.current.offsetWidth}px`)},[t.isOpen]);const y=x.map(r=>({key:r.key,label:r.label,to:r.to,onAction:()=>{t.setSelectedKey(r.key),t.close()}}));return e.jsxRuntimeExports.jsxs("div",{className:"proton-Select","aria-label":s||n,"aria-disabled":i,children:[s?e.jsxRuntimeExports.jsx("div",{...m,className:"proton-Select__label","data-testid":"select-label",children:s}):e.jsxRuntimeExports.jsx("div",{...m}),e.jsxRuntimeExports.jsx(B.HiddenSelect,{isDisabled:i,state:t,triggerRef:o,label:s||n,name:n,"data-testid":"hidden-select-container"}),e.jsxRuntimeExports.jsxs(R,{...v,isOpen:t.isOpen,ref:o,disabled:i,"data-testid":p,children:[e.jsxRuntimeExports.jsx("div",{...b,className:"proton-Select__value",children:t.selectedItem?t.selectedItem.rendered:"Select an option"}),e.jsxRuntimeExports.jsx("div",{className:S.csx("proton-Select__trigger_icon",t.isOpen&&"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:t.isOpen?"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"})]})})]}),t.isOpen&&e.jsxRuntimeExports.jsx(e.jsxRuntimeExports.Fragment,{children:f?e.jsxRuntimeExports.jsx(M.ActionMenu,{isOpen:t.isOpen,onClose:()=>t.close(),actions:y,selectedKeys:[t.selectedKey.toString()],disabledKeys:a}):e.jsxRuntimeExports.jsx("div",{className:"proton-Select__popover",children:e.jsxRuntimeExports.jsx(A.Popover,{state:t,triggerRef:o,popoverRef:c,placement:"bottom start","data-testid":"select-popover",children:e.jsxRuntimeExports.jsx(w.ListBox,{...q,state:t})})})})]})}g.displayName="ProtonUISelect";exports.Select=g;
+//# 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 { forwardRef, ReactNode, RefObject, useEffect, useRef } from \"react\";\r\nimport { HiddenSelect, useSelect } from \"@react-aria/select\";\r\nimport { useButton } from \"@react-aria/button\";\r\nimport { useSelectState } from \"@react-stately/select\";\r\nimport { Item } from \"@react-stately/collections\";\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\nimport { ListBox } from \"../ListBox/ListBox\";\r\nimport { Popover } from \"../Popover/Popover\";\r\n\r\nimport \"./Select.css\";\r\n\r\ninterface SelectButtonProps {\r\n  disabled?: boolean;\r\n  isOpen?: boolean;\r\n  children?: ReactNode;\r\n}\r\n\r\nconst SelectButton = forwardRef<HTMLButtonElement, SelectButtonProps>(\r\n  (props, ref: RefObject<HTMLButtonElement>) => {\r\n    let { buttonProps } = useButton(\r\n      {\r\n        ...props,\r\n        isDisabled: props.disabled,\r\n      },\r\n      ref\r\n    );\r\n\r\n    return (\r\n      <button\r\n        {...buttonProps}\r\n        ref={ref}\r\n        className={csx(\r\n          \"proton-Select__trigger\",\r\n          props.disabled && \"proton-Select__trigger--disabled\",\r\n          !props.isOpen && \"proton-Select__trigger--closed\",\r\n          props.isOpen && \"proton-Select__trigger--opened\"\r\n        )}\r\n      >\r\n        {props.children}\r\n      </button>\r\n    );\r\n  }\r\n);\r\nSelectButton.displayName = \"ProtonUISelectButton\";\r\n\r\ninterface SelectItem {\r\n  label: string;\r\n  key: string;\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   */\r\n  items: SelectItem[];\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  \"data-testid\": testId,\r\n}: SelectProps) {\r\n  const selectProps = {\r\n    label,\r\n    isDisabled,\r\n    disabledKeys,\r\n    selectedKey,\r\n    defaultSelectedKey,\r\n    onSelectionChange,\r\n    onOpenChange: (isOpen: boolean) => {\r\n      if (isOpen) {\r\n        onOpen?.();\r\n      } else {\r\n        onClose?.();\r\n      }\r\n    },\r\n    \"data-testid\": testId,\r\n    children: items.map((item) => (\r\n      <Item key={item.key} textValue={item.label}>\r\n        {item.label}\r\n      </Item>\r\n    )),\r\n  };\r\n\r\n  const state = useSelectState(selectProps);\r\n  const isMobile = useBreakpoint(BREAKPOINTS.MEDIUM);\r\n  const triggerRef = useRef<HTMLButtonElement>(null);\r\n  const popoverRef = useRef<HTMLDivElement>(null);\r\n  const { labelProps, triggerProps, valueProps, menuProps } = useSelect(\r\n    { ...selectProps, label: label || name },\r\n    state,\r\n    triggerRef\r\n  );\r\n\r\n  useEffect(() => {\r\n    if (\r\n      state.isOpen &&\r\n      popoverRef.current &&\r\n      triggerRef.current &&\r\n      !popoverRef.current.style.minWidth\r\n    ) {\r\n      // Adjust the popover width to be at least the width of the trigger\r\n      popoverRef.current.style.minWidth = `${triggerRef.current.offsetWidth}px`;\r\n    }\r\n  }, [state.isOpen]);\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      state.setSelectedKey(item.key);\r\n      state.close();\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\r\n          {...labelProps}\r\n          className=\"proton-Select__label\"\r\n          data-testid=\"select-label\"\r\n        >\r\n          {label}\r\n        </div>\r\n      ) : (\r\n        // If no label is provided, render an invisible label for a11y\r\n        <div {...labelProps} />\r\n      )}\r\n\r\n      <HiddenSelect\r\n        isDisabled={isDisabled}\r\n        state={state}\r\n        triggerRef={triggerRef}\r\n        label={label || name}\r\n        name={name}\r\n        data-testid=\"hidden-select-container\"\r\n      />\r\n\r\n      <SelectButton\r\n        {...triggerProps}\r\n        isOpen={state.isOpen}\r\n        ref={triggerRef}\r\n        disabled={isDisabled}\r\n        data-testid={testId}\r\n      >\r\n        <div {...valueProps} className=\"proton-Select__value\">\r\n          {state.selectedItem\r\n            ? state.selectedItem.rendered\r\n            : \"Select an option\"}\r\n        </div>\r\n        <div\r\n          className={csx(\r\n            \"proton-Select__trigger_icon\",\r\n            state.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>{state.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      {state.isOpen && (\r\n        <>\r\n          {!isMobile ? (\r\n            <div className=\"proton-Select__popover\">\r\n              <Popover\r\n                state={state}\r\n                triggerRef={triggerRef}\r\n                popoverRef={popoverRef}\r\n                placement=\"bottom start\"\r\n                data-testid=\"select-popover\"\r\n              >\r\n                <ListBox {...menuProps} state={state} />\r\n              </Popover>\r\n            </div>\r\n          ) : (\r\n            <ActionMenu\r\n              isOpen={state.isOpen}\r\n              onClose={() => state.close()}\r\n              actions={actionItems}\r\n              selectedKeys={[state.selectedKey.toString()]}\r\n              disabledKeys={disabledKeys}\r\n            />\r\n          )}\r\n        </>\r\n      )}\r\n    </div>\r\n  );\r\n}\r\n\r\nSelect.displayName = \"ProtonUISelect\";\r\n"],"names":["SelectButton","forwardRef","props","ref","buttonProps","useButton","jsx","csx","Select","label","name","isDisabled","disabledKeys","selectedKey","onSelectionChange","defaultSelectedKey","onOpen","onClose","items","testId","selectProps","isOpen","item","Item","state","useSelectState","isMobile","useBreakpoint","BREAKPOINTS","triggerRef","useRef","popoverRef","labelProps","triggerProps","valueProps","menuProps","useSelect","useEffect","actionItems","jsxs","HiddenSelect","Fragment","ActionMenu","Popover","ListBox"],"mappings":"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"}

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

@@ -0,0 +1,173 @@
+import { j as e } from "../../node_modules/react/jsx-runtime.es.js";
+import { forwardRef as N, useRef as x, useEffect as O } from "react";
+import { useSelect as B } from "../../node_modules/@react-aria/select/dist/useSelect.es.js";
+import { HiddenSelect as I } from "../../node_modules/@react-aria/select/dist/HiddenSelect.es.js";
+import { useButton as R } from "../../node_modules/@react-aria/button/dist/useButton.es.js";
+import { useSelectState as k } from "../../node_modules/@react-stately/select/dist/useSelectState.es.js";
+import { Item as M } from "../../node_modules/@react-stately/collections/dist/Item.es.js";
+import { useBreakpoint as w } from "../../hooks/useBreakpoint.es.js";
+import { ActionMenu as E } from "../ActionMenu/ActionMenu.es.js";
+import { ListBox as A } from "../ListBox/ListBox.es.js";
+import { Popover as K } from "../Popover/Popover.es.js";
+/* empty css              */
+import { csx as S } from "../../utils/string.es.js";
+import { BREAKPOINTS as L } from "../../constants/breakpoint.es.js";
+const b = N(
+  (r, s) => {
+    let { buttonProps: c } = R(
+      {
+        ...r,
+        isDisabled: r.disabled
+      },
+      s
+    );
+    return /* @__PURE__ */ e.jsx(
+      "button",
+      {
+        ...c,
+        ref: s,
+        className: S(
+          "proton-Select__trigger",
+          r.disabled && "proton-Select__trigger--disabled",
+          !r.isOpen && "proton-Select__trigger--closed",
+          r.isOpen && "proton-Select__trigger--opened"
+        ),
+        children: r.children
+      }
+    );
+  }
+);
+b.displayName = "ProtonUISelectButton";
+function U({
+  label: r,
+  name: s,
+  isDisabled: c,
+  disabledKeys: d,
+  selectedKey: h,
+  onSelectionChange: g,
+  defaultSelectedKey: _,
+  onOpen: n,
+  onClose: a,
+  items: p,
+  "data-testid": m
+}) {
+  const f = {
+    label: r,
+    isDisabled: c,
+    disabledKeys: d,
+    selectedKey: h,
+    defaultSelectedKey: _,
+    onSelectionChange: g,
+    onOpenChange: (o) => {
+      o ? n == null || n() : a == null || a();
+    },
+    "data-testid": m,
+    children: p.map((o) => /* @__PURE__ */ e.jsx(M, { textValue: o.label, children: o.label }, o.key))
+  }, t = k(f), j = w(L.MEDIUM), i = x(null), l = x(null), { labelProps: u, triggerProps: $, valueProps: v, menuProps: y } = B(
+    { ...f, label: r || s },
+    t,
+    i
+  );
+  O(() => {
+    t.isOpen && l.current && i.current && !l.current.style.minWidth && (l.current.style.minWidth = `${i.current.offsetWidth}px`);
+  }, [t.isOpen]);
+  const P = p.map((o) => ({
+    key: o.key,
+    label: o.label,
+    to: o.to,
+    onAction: () => {
+      t.setSelectedKey(o.key), t.close();
+    }
+  }));
+  return /* @__PURE__ */ e.jsxs(
+    "div",
+    {
+      className: "proton-Select",
+      "aria-label": r || s,
+      "aria-disabled": c,
+      children: [
+        r ? /* @__PURE__ */ e.jsx(
+          "div",
+          {
+            ...u,
+            className: "proton-Select__label",
+            "data-testid": "select-label",
+            children: r
+          }
+        ) : (
+          // If no label is provided, render an invisible label for a11y
+          /* @__PURE__ */ e.jsx("div", { ...u })
+        ),
+        /* @__PURE__ */ e.jsx(
+          I,
+          {
+            isDisabled: c,
+            state: t,
+            triggerRef: i,
+            label: r || s,
+            name: s,
+            "data-testid": "hidden-select-container"
+          }
+        ),
+        /* @__PURE__ */ e.jsxs(
+          b,
+          {
+            ...$,
+            isOpen: t.isOpen,
+            ref: i,
+            disabled: c,
+            "data-testid": m,
+            children: [
+              /* @__PURE__ */ e.jsx("div", { ...v, className: "proton-Select__value", children: t.selectedItem ? t.selectedItem.rendered : "Select an option" }),
+              /* @__PURE__ */ e.jsx(
+                "div",
+                {
+                  className: S(
+                    "proton-Select__trigger_icon",
+                    t.isOpen && "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: t.isOpen ? "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"
+                      }
+                    )
+                  ] })
+                }
+              )
+            ]
+          }
+        ),
+        t.isOpen && /* @__PURE__ */ e.jsx(e.Fragment, { children: j ? /* @__PURE__ */ e.jsx(
+          E,
+          {
+            isOpen: t.isOpen,
+            onClose: () => t.close(),
+            actions: P,
+            selectedKeys: [t.selectedKey.toString()],
+            disabledKeys: d
+          }
+        ) : /* @__PURE__ */ e.jsx("div", { className: "proton-Select__popover", children: /* @__PURE__ */ e.jsx(
+          K,
+          {
+            state: t,
+            triggerRef: i,
+            popoverRef: l,
+            placement: "bottom start",
+            "data-testid": "select-popover",
+            children: /* @__PURE__ */ e.jsx(A, { ...y, state: t })
+          }
+        ) }) })
+      ]
+    }
+  );
+}
+U.displayName = "ProtonUISelect";
+export {
+  U 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 { forwardRef, ReactNode, RefObject, useEffect, useRef } from \"react\";\r\nimport { HiddenSelect, useSelect } from \"@react-aria/select\";\r\nimport { useButton } from \"@react-aria/button\";\r\nimport { useSelectState } from \"@react-stately/select\";\r\nimport { Item } from \"@react-stately/collections\";\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\nimport { ListBox } from \"../ListBox/ListBox\";\r\nimport { Popover } from \"../Popover/Popover\";\r\n\r\nimport \"./Select.css\";\r\n\r\ninterface SelectButtonProps {\r\n  disabled?: boolean;\r\n  isOpen?: boolean;\r\n  children?: ReactNode;\r\n}\r\n\r\nconst SelectButton = forwardRef<HTMLButtonElement, SelectButtonProps>(\r\n  (props, ref: RefObject<HTMLButtonElement>) => {\r\n    let { buttonProps } = useButton(\r\n      {\r\n        ...props,\r\n        isDisabled: props.disabled,\r\n      },\r\n      ref\r\n    );\r\n\r\n    return (\r\n      <button\r\n        {...buttonProps}\r\n        ref={ref}\r\n        className={csx(\r\n          \"proton-Select__trigger\",\r\n          props.disabled && \"proton-Select__trigger--disabled\",\r\n          !props.isOpen && \"proton-Select__trigger--closed\",\r\n          props.isOpen && \"proton-Select__trigger--opened\"\r\n        )}\r\n      >\r\n        {props.children}\r\n      </button>\r\n    );\r\n  }\r\n);\r\nSelectButton.displayName = \"ProtonUISelectButton\";\r\n\r\ninterface SelectItem {\r\n  label: string;\r\n  key: string;\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   */\r\n  items: SelectItem[];\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  \"data-testid\": testId,\r\n}: SelectProps) {\r\n  const selectProps = {\r\n    label,\r\n    isDisabled,\r\n    disabledKeys,\r\n    selectedKey,\r\n    defaultSelectedKey,\r\n    onSelectionChange,\r\n    onOpenChange: (isOpen: boolean) => {\r\n      if (isOpen) {\r\n        onOpen?.();\r\n      } else {\r\n        onClose?.();\r\n      }\r\n    },\r\n    \"data-testid\": testId,\r\n    children: items.map((item) => (\r\n      <Item key={item.key} textValue={item.label}>\r\n        {item.label}\r\n      </Item>\r\n    )),\r\n  };\r\n\r\n  const state = useSelectState(selectProps);\r\n  const isMobile = useBreakpoint(BREAKPOINTS.MEDIUM);\r\n  const triggerRef = useRef<HTMLButtonElement>(null);\r\n  const popoverRef = useRef<HTMLDivElement>(null);\r\n  const { labelProps, triggerProps, valueProps, menuProps } = useSelect(\r\n    { ...selectProps, label: label || name },\r\n    state,\r\n    triggerRef\r\n  );\r\n\r\n  useEffect(() => {\r\n    if (\r\n      state.isOpen &&\r\n      popoverRef.current &&\r\n      triggerRef.current &&\r\n      !popoverRef.current.style.minWidth\r\n    ) {\r\n      // Adjust the popover width to be at least the width of the trigger\r\n      popoverRef.current.style.minWidth = `${triggerRef.current.offsetWidth}px`;\r\n    }\r\n  }, [state.isOpen]);\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      state.setSelectedKey(item.key);\r\n      state.close();\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\r\n          {...labelProps}\r\n          className=\"proton-Select__label\"\r\n          data-testid=\"select-label\"\r\n        >\r\n          {label}\r\n        </div>\r\n      ) : (\r\n        // If no label is provided, render an invisible label for a11y\r\n        <div {...labelProps} />\r\n      )}\r\n\r\n      <HiddenSelect\r\n        isDisabled={isDisabled}\r\n        state={state}\r\n        triggerRef={triggerRef}\r\n        label={label || name}\r\n        name={name}\r\n        data-testid=\"hidden-select-container\"\r\n      />\r\n\r\n      <SelectButton\r\n        {...triggerProps}\r\n        isOpen={state.isOpen}\r\n        ref={triggerRef}\r\n        disabled={isDisabled}\r\n        data-testid={testId}\r\n      >\r\n        <div {...valueProps} className=\"proton-Select__value\">\r\n          {state.selectedItem\r\n            ? state.selectedItem.rendered\r\n            : \"Select an option\"}\r\n        </div>\r\n        <div\r\n          className={csx(\r\n            \"proton-Select__trigger_icon\",\r\n            state.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>{state.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      {state.isOpen && (\r\n        <>\r\n          {!isMobile ? (\r\n            <div className=\"proton-Select__popover\">\r\n              <Popover\r\n                state={state}\r\n                triggerRef={triggerRef}\r\n                popoverRef={popoverRef}\r\n                placement=\"bottom start\"\r\n                data-testid=\"select-popover\"\r\n              >\r\n                <ListBox {...menuProps} state={state} />\r\n              </Popover>\r\n            </div>\r\n          ) : (\r\n            <ActionMenu\r\n              isOpen={state.isOpen}\r\n              onClose={() => state.close()}\r\n              actions={actionItems}\r\n              selectedKeys={[state.selectedKey.toString()]}\r\n              disabledKeys={disabledKeys}\r\n            />\r\n          )}\r\n        </>\r\n      )}\r\n    </div>\r\n  );\r\n}\r\n\r\nSelect.displayName = \"ProtonUISelect\";\r\n"],"names":["SelectButton","forwardRef","props","ref","buttonProps","useButton","jsx","csx","Select","label","name","isDisabled","disabledKeys","selectedKey","onSelectionChange","defaultSelectedKey","onOpen","onClose","items","testId","selectProps","isOpen","item","Item","state","useSelectState","isMobile","useBreakpoint","BREAKPOINTS","triggerRef","useRef","popoverRef","labelProps","triggerProps","valueProps","menuProps","useSelect","useEffect","actionItems","jsxs","HiddenSelect","Fragment","ActionMenu","Popover","ListBox"],"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"}

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

@@ -0,0 +1,54 @@
+import { Children as t, isValidElement as a } from "react";
+import { TableHeader as b, TableColumn as k, TableBody as T, TableRow as h, TableCell as E } from "./CompoundComponents.es.js";
+function s(c, r) {
+  return c.type === r;
+}
+function H(c) {
+  const r = [], i = [];
+  return t.forEach(c, (n) => {
+    if (a(n)) {
+      if (s(n, b)) {
+        const p = n.props;
+        t.forEach(p.children, (e) => {
+          if (a(e) && s(e, k)) {
+            const o = e.props;
+            r.push({
+              key: o.id,
+              header: o.children,
+              isHidden: p.isHidden || !1,
+              ariaSort: o["aria-sort"]
+            });
+          }
+        });
+      }
+      if (s(n, T)) {
+        const p = n.props;
+        t.forEach(p.children, (e) => {
+          if (a(e) && s(e, h)) {
+            const o = e.props, u = [];
+            let y = 0;
+            t.forEach(o.children, (l) => {
+              var m;
+              if (a(l) && s(l, E)) {
+                const f = l.props, d = f.columnKey || ((m = r[y]) == null ? void 0 : m.key);
+                d && u.push({
+                  columnKey: d,
+                  value: f.children,
+                  colSpan: f.colSpan
+                }), y++;
+              }
+            }), i.push({
+              key: e.key || o.key || String(i.length),
+              cells: u,
+              onClick: o.onClick
+            });
+          }
+        });
+      }
+    }
+  }), { columns: r, rows: i };
+}
+export {
+  H as parseTableChildren
+};
+//# sourceMappingURL=collectionParser.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"collectionParser.es.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":";;AA2BA,SAASA,EACPC,GACAC,GACS;AACT,SAAOD,EAAQ,SAASC;AAC1B;AAKO,SAASC,EAAmBC,GAAgC;AACjE,QAAMC,IAA6B,CAAA,GAC7BC,IAAuB,CAAA;AAEpB,SAAAC,EAAA,QAAQH,GAAU,CAACI,MAAU;AAChC,QAACC,EAAeD,CAAK,GAGrB;AAAA,UAAAR,EAAgBQ,GAAOE,CAAW,GAAG;AACvC,cAAMC,IAAcH,EAAM;AAE1B,QAAAD,EAAS,QAAQI,EAAY,UAAU,CAACC,MAAgB;AACtD,cACEH,EAAeG,CAAW,KAC1BZ,EAAgBY,GAAaC,CAAe,GAC5C;AACA,kBAAMC,IAAcF,EAAY;AAChC,YAAAP,EAAQ,KAAK;AAAA,cACX,KAAKS,EAAY;AAAA,cACjB,QAAQA,EAAY;AAAA,cACpB,UAAUH,EAAY,YAAY;AAAA,cAClC,UAAUG,EAAY,WAAW;AAAA,YAAA,CAClC;AAAA,UACH;AAAA,QAAA,CACD;AAAA,MACH;AAGI,UAAAd,EAAgBQ,GAAOO,CAAS,GAAG;AACrC,cAAMC,IAAYR,EAAM;AACxB,QAAAD,EAAS,QAAQS,EAAU,UAAU,CAACC,MAAa;AACjD,cACER,EAAeQ,CAAQ,KACvBjB,EAAgBiB,GAAUC,CAAY,GACtC;AACA,kBAAMC,IAAWF,EAAS,OACpBG,IAAyB,CAAA;AAE/B,gBAAIC,IAAY;AAChB,YAAAd,EAAS,QAAQY,EAAS,UAAU,CAACG,MAAc;;AACjD,kBACEb,EAAea,CAAS,KACxBtB,EAAgBsB,GAAWC,CAAa,GACxC;AACA,sBAAMC,IAAYF,EAAU,OAGtBG,IAAYD,EAAU,eAAaE,IAAArB,EAAQgB,CAAS,MAAjB,gBAAAK,EAAoB;AAE7D,gBAAID,KACFL,EAAM,KAAK;AAAA,kBACT,WAAAK;AAAA,kBACA,OAAOD,EAAU;AAAA,kBACjB,SAASA,EAAU;AAAA,gBAAA,CACpB,GAEHH;AAAA,cACF;AAAA,YAAA,CACD,GAEDf,EAAK,KAAK;AAAA,cACR,KACGW,EAAS,OAAkBE,EAAS,OAAO,OAAOb,EAAK,MAAM;AAAA,cAChE,OAAAc;AAAA,cACA,SAASD,EAAS;AAAA,YAAA,CACnB;AAAA,UACH;AAAA,QAAA,CACD;AAAA,MACH;AAAA;AAAA,EAAA,CACD,GAEM,EAAE,SAAAd,GAAS,MAAAC;AACpB;"}

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

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react");function y(e){var c;const r=n.useMemo(()=>{const o=new Map;return e.rows.forEach((s,x)=>{o.set(s.key,x)}),o},[e.rows]),i=n.useMemo(()=>o=>{const s=r.get(o);return s===void 0?null:e.rows[s]},[e.rows,r]),m=n.useMemo(()=>o=>{const s=r.get(o);return s===void 0||s>=e.rows.length-1?null:e.rows[s+1]},[e.rows,r]),w=n.useMemo(()=>o=>{const s=r.get(o);return s===void 0||s<=0?null:e.rows[s-1]},[e.rows,r]),g=n.useMemo(()=>o=>r.get(o)??-1,[r]),M=n.useMemo(()=>e.rows[0]||null,[e.rows]),f=n.useMemo(()=>e.rows[e.rows.length-1]||null,[e.rows]),u=e.rows.length,l=((c=e.columns[0])==null?void 0:c.isHidden)||!1,t=!l,I=n.useMemo(()=>u+(t?1:0),[u,t]),b=n.useMemo(()=>o=>o+(t?2:1),[t]);return{columns:e.columns,rows:e.rows,size:u,firstItem:M,lastItem:f,isHeaderHidden:l,hasVisibleHeader:t,getTotalRowCount:I,getRowAriaIndex:b,getItemByKey:i,getItemAfter:m,getItemBefore:w,getItemIndex:g}}exports.useTableCollection=y;
+//# sourceMappingURL=useTableCollection.cjs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useTableCollection.cjs.js","sources":["../../../../src/components/Table/Collection/useTableCollection.tsx"],"sourcesContent":["import { useMemo } from \"react\";\r\nimport type { TableData, TableRowData } from \"../types\";\r\n\r\n/**\r\n * Hook for managing table data structure and providing navigation methods\r\n */\r\nexport function useTableCollection(data: TableData) {\r\n  const keyToIndexMap = useMemo(() => {\r\n    const map = new Map<string | number, number>();\r\n    data.rows.forEach((row, index) => {\r\n      map.set(row.key, index);\r\n    });\r\n    return map;\r\n  }, [data.rows]);\r\n\r\n  const getItemByKey = useMemo(\r\n    () =>\r\n      (key: string | number): TableRowData | null => {\r\n        const index = keyToIndexMap.get(key);\r\n        if (index === undefined) return null;\r\n        return data.rows[index];\r\n      },\r\n    [data.rows, keyToIndexMap]\r\n  );\r\n\r\n  const getItemAfter = useMemo(\r\n    () =>\r\n      (key: string | number): TableRowData | null => {\r\n        const index = keyToIndexMap.get(key);\r\n        if (index === undefined || index >= data.rows.length - 1) return null;\r\n        return data.rows[index + 1];\r\n      },\r\n    [data.rows, keyToIndexMap]\r\n  );\r\n\r\n  const getItemBefore = useMemo(\r\n    () =>\r\n      (key: string | number): TableRowData | null => {\r\n        const index = keyToIndexMap.get(key);\r\n        if (index === undefined || index <= 0) return null;\r\n        return data.rows[index - 1];\r\n      },\r\n    [data.rows, keyToIndexMap]\r\n  );\r\n\r\n  const getItemIndex = useMemo(\r\n    () =>\r\n      (key: string | number): number => {\r\n        return keyToIndexMap.get(key) ?? -1;\r\n      },\r\n    [keyToIndexMap]\r\n  );\r\n\r\n  // Computed values\r\n  const firstItem = useMemo(() => data.rows[0] || null, [data.rows]);\r\n  const lastItem = useMemo(\r\n    () => data.rows[data.rows.length - 1] || null,\r\n    [data.rows]\r\n  );\r\n  const size = data.rows.length;\r\n\r\n  // ARIA helpers\r\n  const isHeaderHidden = data.columns[0]?.isHidden || false;\r\n  const hasVisibleHeader = !isHeaderHidden;\r\n\r\n  const getTotalRowCount = useMemo(() => {\r\n    return size + (hasVisibleHeader ? 1 : 0);\r\n  }, [size, hasVisibleHeader]);\r\n\r\n  const getRowAriaIndex = useMemo(\r\n    () => (rowIndex: number) => {\r\n      return rowIndex + (hasVisibleHeader ? 2 : 1); // +2 if header exists and visible, +1 if not\r\n    },\r\n    [hasVisibleHeader]\r\n  );\r\n\r\n  return {\r\n    // Data\r\n    columns: data.columns,\r\n    rows: data.rows,\r\n    size,\r\n    firstItem,\r\n    lastItem,\r\n\r\n    // ARIA helpers\r\n    isHeaderHidden,\r\n    hasVisibleHeader,\r\n    getTotalRowCount,\r\n    getRowAriaIndex,\r\n\r\n    // Navigation functions\r\n    getItemByKey,\r\n    getItemAfter,\r\n    getItemBefore,\r\n    getItemIndex,\r\n  };\r\n}\r\n\r\nexport type TableCollection = ReturnType<typeof useTableCollection>;\r\n"],"names":["useTableCollection","data","keyToIndexMap","useMemo","map","row","index","getItemByKey","key","getItemAfter","getItemBefore","getItemIndex","firstItem","lastItem","size","isHeaderHidden","_a","hasVisibleHeader","getTotalRowCount","getRowAriaIndex","rowIndex"],"mappings":"yGAMO,SAASA,EAAmBC,EAAiB,OAC5C,MAAAC,EAAgBC,EAAAA,QAAQ,IAAM,CAC5B,MAAAC,MAAU,IAChB,OAAAH,EAAK,KAAK,QAAQ,CAACI,EAAKC,IAAU,CAC5BF,EAAA,IAAIC,EAAI,IAAKC,CAAK,CAAA,CACvB,EACMF,CAAA,EACN,CAACH,EAAK,IAAI,CAAC,EAERM,EAAeJ,EAAA,QACnB,IACGK,GAA8C,CACvC,MAAAF,EAAQJ,EAAc,IAAIM,CAAG,EAC/B,OAAAF,IAAU,OAAkB,KACzBL,EAAK,KAAKK,CAAK,CACxB,EACF,CAACL,EAAK,KAAMC,CAAa,CAAA,EAGrBO,EAAeN,EAAA,QACnB,IACGK,GAA8C,CACvC,MAAAF,EAAQJ,EAAc,IAAIM,CAAG,EACnC,OAAIF,IAAU,QAAaA,GAASL,EAAK,KAAK,OAAS,EAAU,KAC1DA,EAAK,KAAKK,EAAQ,CAAC,CAC5B,EACF,CAACL,EAAK,KAAMC,CAAa,CAAA,EAGrBQ,EAAgBP,EAAA,QACpB,IACGK,GAA8C,CACvC,MAAAF,EAAQJ,EAAc,IAAIM,CAAG,EACnC,OAAIF,IAAU,QAAaA,GAAS,EAAU,KACvCL,EAAK,KAAKK,EAAQ,CAAC,CAC5B,EACF,CAACL,EAAK,KAAMC,CAAa,CAAA,EAGrBS,EAAeR,EAAA,QACnB,IACGK,GACQN,EAAc,IAAIM,CAAG,GAAK,GAErC,CAACN,CAAa,CAAA,EAIVU,EAAYT,EAAAA,QAAQ,IAAMF,EAAK,KAAK,CAAC,GAAK,KAAM,CAACA,EAAK,IAAI,CAAC,EAC3DY,EAAWV,EAAA,QACf,IAAMF,EAAK,KAAKA,EAAK,KAAK,OAAS,CAAC,GAAK,KACzC,CAACA,EAAK,IAAI,CAAA,EAENa,EAAOb,EAAK,KAAK,OAGjBc,IAAiBC,EAAAf,EAAK,QAAQ,CAAC,IAAd,YAAAe,EAAiB,WAAY,GAC9CC,EAAmB,CAACF,EAEpBG,EAAmBf,EAAAA,QAAQ,IACxBW,GAAQG,EAAmB,EAAI,GACrC,CAACH,EAAMG,CAAgB,CAAC,EAErBE,EAAkBhB,EAAA,QACtB,IAAOiB,GACEA,GAAYH,EAAmB,EAAI,GAE5C,CAACA,CAAgB,CAAA,EAGZ,MAAA,CAEL,QAAShB,EAAK,QACd,KAAMA,EAAK,KACX,KAAAa,EACA,UAAAF,EACA,SAAAC,EAGA,eAAAE,EACA,iBAAAE,EACA,iBAAAC,EACA,gBAAAC,EAGA,aAAAZ,EACA,aAAAE,EACA,cAAAC,EACA,aAAAC,CAAA,CAEJ"}

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

@@ -0,0 +1,59 @@
+import { useMemo as r } from "react";
+function H(e) {
+  var c;
+  const s = r(() => {
+    const o = /* @__PURE__ */ new Map();
+    return e.rows.forEach((n, p) => {
+      o.set(n.key, p);
+    }), o;
+  }, [e.rows]), i = r(
+    () => (o) => {
+      const n = s.get(o);
+      return n === void 0 ? null : e.rows[n];
+    },
+    [e.rows, s]
+  ), w = r(
+    () => (o) => {
+      const n = s.get(o);
+      return n === void 0 || n >= e.rows.length - 1 ? null : e.rows[n + 1];
+    },
+    [e.rows, s]
+  ), g = r(
+    () => (o) => {
+      const n = s.get(o);
+      return n === void 0 || n <= 0 ? null : e.rows[n - 1];
+    },
+    [e.rows, s]
+  ), m = r(
+    () => (o) => s.get(o) ?? -1,
+    [s]
+  ), f = r(() => e.rows[0] || null, [e.rows]), I = r(
+    () => e.rows[e.rows.length - 1] || null,
+    [e.rows]
+  ), l = e.rows.length, u = ((c = e.columns[0]) == null ? void 0 : c.isHidden) || !1, t = !u, x = r(() => l + (t ? 1 : 0), [l, t]), h = r(
+    () => (o) => o + (t ? 2 : 1),
+    [t]
+  );
+  return {
+    // Data
+    columns: e.columns,
+    rows: e.rows,
+    size: l,
+    firstItem: f,
+    lastItem: I,
+    // ARIA helpers
+    isHeaderHidden: u,
+    hasVisibleHeader: t,
+    getTotalRowCount: x,
+    getRowAriaIndex: h,
+    // Navigation functions
+    getItemByKey: i,
+    getItemAfter: w,
+    getItemBefore: g,
+    getItemIndex: m
+  };
+}
+export {
+  H as useTableCollection
+};
+//# sourceMappingURL=useTableCollection.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useTableCollection.es.js","sources":["../../../../src/components/Table/Collection/useTableCollection.tsx"],"sourcesContent":["import { useMemo } from \"react\";\r\nimport type { TableData, TableRowData } from \"../types\";\r\n\r\n/**\r\n * Hook for managing table data structure and providing navigation methods\r\n */\r\nexport function useTableCollection(data: TableData) {\r\n  const keyToIndexMap = useMemo(() => {\r\n    const map = new Map<string | number, number>();\r\n    data.rows.forEach((row, index) => {\r\n      map.set(row.key, index);\r\n    });\r\n    return map;\r\n  }, [data.rows]);\r\n\r\n  const getItemByKey = useMemo(\r\n    () =>\r\n      (key: string | number): TableRowData | null => {\r\n        const index = keyToIndexMap.get(key);\r\n        if (index === undefined) return null;\r\n        return data.rows[index];\r\n      },\r\n    [data.rows, keyToIndexMap]\r\n  );\r\n\r\n  const getItemAfter = useMemo(\r\n    () =>\r\n      (key: string | number): TableRowData | null => {\r\n        const index = keyToIndexMap.get(key);\r\n        if (index === undefined || index >= data.rows.length - 1) return null;\r\n        return data.rows[index + 1];\r\n      },\r\n    [data.rows, keyToIndexMap]\r\n  );\r\n\r\n  const getItemBefore = useMemo(\r\n    () =>\r\n      (key: string | number): TableRowData | null => {\r\n        const index = keyToIndexMap.get(key);\r\n        if (index === undefined || index <= 0) return null;\r\n        return data.rows[index - 1];\r\n      },\r\n    [data.rows, keyToIndexMap]\r\n  );\r\n\r\n  const getItemIndex = useMemo(\r\n    () =>\r\n      (key: string | number): number => {\r\n        return keyToIndexMap.get(key) ?? -1;\r\n      },\r\n    [keyToIndexMap]\r\n  );\r\n\r\n  // Computed values\r\n  const firstItem = useMemo(() => data.rows[0] || null, [data.rows]);\r\n  const lastItem = useMemo(\r\n    () => data.rows[data.rows.length - 1] || null,\r\n    [data.rows]\r\n  );\r\n  const size = data.rows.length;\r\n\r\n  // ARIA helpers\r\n  const isHeaderHidden = data.columns[0]?.isHidden || false;\r\n  const hasVisibleHeader = !isHeaderHidden;\r\n\r\n  const getTotalRowCount = useMemo(() => {\r\n    return size + (hasVisibleHeader ? 1 : 0);\r\n  }, [size, hasVisibleHeader]);\r\n\r\n  const getRowAriaIndex = useMemo(\r\n    () => (rowIndex: number) => {\r\n      return rowIndex + (hasVisibleHeader ? 2 : 1); // +2 if header exists and visible, +1 if not\r\n    },\r\n    [hasVisibleHeader]\r\n  );\r\n\r\n  return {\r\n    // Data\r\n    columns: data.columns,\r\n    rows: data.rows,\r\n    size,\r\n    firstItem,\r\n    lastItem,\r\n\r\n    // ARIA helpers\r\n    isHeaderHidden,\r\n    hasVisibleHeader,\r\n    getTotalRowCount,\r\n    getRowAriaIndex,\r\n\r\n    // Navigation functions\r\n    getItemByKey,\r\n    getItemAfter,\r\n    getItemBefore,\r\n    getItemIndex,\r\n  };\r\n}\r\n\r\nexport type TableCollection = ReturnType<typeof useTableCollection>;\r\n"],"names":["useTableCollection","data","keyToIndexMap","useMemo","map","row","index","getItemByKey","key","getItemAfter","getItemBefore","getItemIndex","firstItem","lastItem","size","isHeaderHidden","_a","hasVisibleHeader","getTotalRowCount","getRowAriaIndex","rowIndex"],"mappings":";AAMO,SAASA,EAAmBC,GAAiB;;AAC5C,QAAAC,IAAgBC,EAAQ,MAAM;AAC5B,UAAAC,wBAAU;AAChB,WAAAH,EAAK,KAAK,QAAQ,CAACI,GAAKC,MAAU;AAC5B,MAAAF,EAAA,IAAIC,EAAI,KAAKC,CAAK;AAAA,IAAA,CACvB,GACMF;AAAA,EAAA,GACN,CAACH,EAAK,IAAI,CAAC,GAERM,IAAeJ;AAAA,IACnB,MACE,CAACK,MAA8C;AACvC,YAAAF,IAAQJ,EAAc,IAAIM,CAAG;AAC/B,aAAAF,MAAU,SAAkB,OACzBL,EAAK,KAAKK,CAAK;AAAA,IACxB;AAAA,IACF,CAACL,EAAK,MAAMC,CAAa;AAAA,EAAA,GAGrBO,IAAeN;AAAA,IACnB,MACE,CAACK,MAA8C;AACvC,YAAAF,IAAQJ,EAAc,IAAIM,CAAG;AACnC,aAAIF,MAAU,UAAaA,KAASL,EAAK,KAAK,SAAS,IAAU,OAC1DA,EAAK,KAAKK,IAAQ,CAAC;AAAA,IAC5B;AAAA,IACF,CAACL,EAAK,MAAMC,CAAa;AAAA,EAAA,GAGrBQ,IAAgBP;AAAA,IACpB,MACE,CAACK,MAA8C;AACvC,YAAAF,IAAQJ,EAAc,IAAIM,CAAG;AACnC,aAAIF,MAAU,UAAaA,KAAS,IAAU,OACvCL,EAAK,KAAKK,IAAQ,CAAC;AAAA,IAC5B;AAAA,IACF,CAACL,EAAK,MAAMC,CAAa;AAAA,EAAA,GAGrBS,IAAeR;AAAA,IACnB,MACE,CAACK,MACQN,EAAc,IAAIM,CAAG,KAAK;AAAA,IAErC,CAACN,CAAa;AAAA,EAAA,GAIVU,IAAYT,EAAQ,MAAMF,EAAK,KAAK,CAAC,KAAK,MAAM,CAACA,EAAK,IAAI,CAAC,GAC3DY,IAAWV;AAAA,IACf,MAAMF,EAAK,KAAKA,EAAK,KAAK,SAAS,CAAC,KAAK;AAAA,IACzC,CAACA,EAAK,IAAI;AAAA,EAAA,GAENa,IAAOb,EAAK,KAAK,QAGjBc,MAAiBC,IAAAf,EAAK,QAAQ,CAAC,MAAd,gBAAAe,EAAiB,aAAY,IAC9CC,IAAmB,CAACF,GAEpBG,IAAmBf,EAAQ,MACxBW,KAAQG,IAAmB,IAAI,IACrC,CAACH,GAAMG,CAAgB,CAAC,GAErBE,IAAkBhB;AAAA,IACtB,MAAM,CAACiB,MACEA,KAAYH,IAAmB,IAAI;AAAA,IAE5C,CAACA,CAAgB;AAAA,EAAA;AAGZ,SAAA;AAAA;AAAA,IAEL,SAAShB,EAAK;AAAA,IACd,MAAMA,EAAK;AAAA,IACX,MAAAa;AAAA,IACA,WAAAF;AAAA,IACA,UAAAC;AAAA;AAAA,IAGA,gBAAAE;AAAA,IACA,kBAAAE;AAAA,IACA,kBAAAC;AAAA,IACA,iBAAAC;AAAA;AAAA,IAGA,cAAAZ;AAAA,IACA,cAAAE;AAAA,IACA,eAAAC;AAAA,IACA,cAAAC;AAAA,EAAA;AAEJ;"}

package/dist/components/Table/Table.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"),p=require("react"),x=require("./Collection/collectionParser.cjs.js"),t=require("./Collection/CompoundComponents.cjs.js"),b=require("./Collection/useTableCollection.cjs.js");;/* empty css               */const m=({children:i,name:c})=>{const d=p.useMemo(()=>x.parseTableChildren(i),[i]),a=b.useTableCollection(d);return o.jsxRuntimeExports.jsxs("table",{className:"proton-Table",role:"table","aria-rowcount":a.getTotalRowCount,"aria-colcount":a.columns.length,"aria-label":c,children:[o.jsxRuntimeExports.jsx("caption",{className:"proton-Table__caption",children:c}),o.jsxRuntimeExports.jsx("thead",{className:"proton-Table__rowGroup--header",role:"rowgroup",style:a.isHeaderHidden?{display:"none"}:void 0,children:o.jsxRuntimeExports.jsx("tr",{className:"proton-Table__header-row",role:"row","aria-rowindex":1,children:a.columns.map((e,s)=>o.jsxRuntimeExports.jsx("th",{className:"proton-Table__header",role:"columnheader",scope:"col","aria-colindex":s+1,"aria-sort":e.ariaSort,children:e.header},e.key))})}),o.jsxRuntimeExports.jsx("tbody",{className:"proton-Table__body",role:"rowgroup",children:a.rows.map((e,s)=>o.jsxRuntimeExports.jsx("tr",{className:"proton-Table__row",role:"row","aria-rowindex":a.getRowAriaIndex(s),onClick:e==null?void 0:e.onClick,tabIndex:e!=null&&e.onClick?0:void 0,onKeyDown:e!=null&&e.onClick?l=>{var r;(l.key==="Enter"||l.key===" ")&&(l.preventDefault(),(r=e.onClick)==null||r.call(e))}:void 0,children:a.columns.map((l,r)=>{const n=e.cells.find(u=>u.columnKey===l.key);return o.jsxRuntimeExports.jsx("td",{className:"proton-Table__cell",role:"cell","aria-colindex":r+1,colSpan:n==null?void 0:n.colSpan,children:(n==null?void 0:n.value)||""},l.key)})},e.key))})]})},T=Object.assign(m,{Header:t.TableHeader,Column:t.TableColumn,Body:t.TableBody,Row:t.TableRow,Cell:t.TableCell});exports.Table=T;
+//# sourceMappingURL=Table.cjs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Table.cjs.js","sources":["../../../src/components/Table/Table.tsx"],"sourcesContent":["import { ReactElement, useMemo } from \"react\";\r\nimport { parseTableChildren } from \"./Collection/collectionParser\";\r\nimport {\r\n  TableHeader,\r\n  TableColumn,\r\n  TableBody,\r\n  TableRow,\r\n  TableCell,\r\n  TableHeaderProps,\r\n  TableColumnProps,\r\n  TableBodyProps,\r\n  TableRowProps,\r\n  TableCellProps,\r\n} from \"./Collection/CompoundComponents\";\r\nimport { useTableCollection } from \"./Collection/useTableCollection\";\r\nimport type {\r\n  TableData,\r\n  TableColumnData,\r\n  TableRowData,\r\n  TableCellData,\r\n} from \"./types\";\r\nimport \"./Table.css\";\r\n\r\nexport type { TableColumnData, TableCellData, TableRowData, TableData };\r\n\r\nexport interface TableProps {\r\n  children: [ReactElement<TableHeaderProps>, ReactElement<TableBodyProps>];\r\n  /** Table name/caption for accessibility. Provides essential context for screen readers about table content. */\r\n  name: string;\r\n}\r\n\r\nconst TableComponent = ({ children, name }: TableProps) => {\r\n  const tableData: TableData = useMemo(\r\n    () => parseTableChildren(children),\r\n    [children]\r\n  );\r\n  const collection = useTableCollection(tableData);\r\n\r\n  return (\r\n    <table\r\n      className=\"proton-Table\"\r\n      role=\"table\"\r\n      aria-rowcount={collection.getTotalRowCount}\r\n      aria-colcount={collection.columns.length}\r\n      aria-label={name}\r\n    >\r\n      <caption className=\"proton-Table__caption\">{name}</caption>\r\n\r\n      {/* Header */}\r\n      <thead\r\n        className=\"proton-Table__rowGroup--header\"\r\n        role=\"rowgroup\"\r\n        style={collection.isHeaderHidden ? { display: \"none\" } : undefined}\r\n      >\r\n        <tr className=\"proton-Table__header-row\" role=\"row\" aria-rowindex={1}>\r\n          {collection.columns.map((column, index) => (\r\n            <th\r\n              key={column.key}\r\n              className=\"proton-Table__header\"\r\n              role=\"columnheader\"\r\n              scope=\"col\"\r\n              aria-colindex={index + 1}\r\n              aria-sort={column.ariaSort}\r\n            >\r\n              {column.header}\r\n            </th>\r\n          ))}\r\n        </tr>\r\n      </thead>\r\n\r\n      {/* Body */}\r\n      <tbody className=\"proton-Table__body\" role=\"rowgroup\">\r\n        {collection.rows.map((row, rowIndex) => (\r\n          <tr\r\n            key={row.key}\r\n            className=\"proton-Table__row\"\r\n            role=\"row\"\r\n            aria-rowindex={collection.getRowAriaIndex(rowIndex)}\r\n            onClick={row?.onClick}\r\n            tabIndex={row?.onClick ? 0 : undefined}\r\n            onKeyDown={\r\n              row?.onClick\r\n                ? (e) => {\r\n                    if (e.key === \"Enter\" || e.key === \" \") {\r\n                      // Enable keyboard navigation\r\n                      e.preventDefault();\r\n                      row.onClick?.();\r\n                    }\r\n                  }\r\n                : undefined\r\n            }\r\n          >\r\n            {collection.columns.map((column, colIndex) => {\r\n              const cell = row.cells.find((c) => c.columnKey === column.key);\r\n              return (\r\n                <td\r\n                  key={column.key}\r\n                  className=\"proton-Table__cell\"\r\n                  role=\"cell\"\r\n                  aria-colindex={colIndex + 1}\r\n                  colSpan={cell?.colSpan}\r\n                >\r\n                  {cell?.value || \"\"}\r\n                </td>\r\n              );\r\n            })}\r\n          </tr>\r\n        ))}\r\n      </tbody>\r\n    </table>\r\n  );\r\n};\r\n\r\n/**\r\n * Base Table component that renders data in rows and columns using collections.\r\n *\r\n * - Built-in keyboard navigation for interactive rows.\r\n * - Full ARIA table semantics with proper roles, labels, and indices.\r\n *\r\n * API:\r\n *  - {@link TableProps}\r\n *\r\n * @example\r\n * ```tsx\r\n * <Table caption=\"Employee Directory\">\r\n *   <Table.Header>\r\n *     <Table.Column id=\"name\">Name</Table.Column>\r\n *   </Table.Header>\r\n *   <Table.Body>\r\n *     <Table.Row key=\"1\">\r\n *       <Table.Cell>Joe</Table.Cell>\r\n *     </Table.Row>\r\n *   </Table.Body>\r\n * </Table>\r\n * ```\r\n */\r\nconst Table = Object.assign(TableComponent, {\r\n  /** Table header: {@link TableHeaderProps} */\r\n  Header: TableHeader,\r\n  /** Table column: {@link TableColumnProps} */\r\n  Column: TableColumn,\r\n  /** Table body: {@link TableBodyProps} */\r\n  Body: TableBody,\r\n  /** Table row: {@link TableRowProps} */\r\n  Row: TableRow,\r\n  /** Table cell: {@link TableCellProps} */\r\n  Cell: TableCell,\r\n});\r\n\r\nexport { Table };\r\nexport type {\r\n  TableHeaderProps,\r\n  TableColumnProps,\r\n  TableBodyProps,\r\n  TableRowProps,\r\n  TableCellProps,\r\n};\r\n"],"names":["TableComponent","children","name","tableData","useMemo","parseTableChildren","collection","useTableCollection","jsxs","jsx","column","index","row","rowIndex","e","_a","colIndex","cell","c","Table","TableHeader","TableColumn","TableBody","TableRow","TableCell"],"mappings":"0VA+BA,MAAMA,EAAiB,CAAC,CAAE,SAAAC,EAAU,KAAAC,KAAuB,CACzD,MAAMC,EAAuBC,EAAA,QAC3B,IAAMC,EAAAA,mBAAmBJ,CAAQ,EACjC,CAACA,CAAQ,CAAA,EAELK,EAAaC,qBAAmBJ,CAAS,EAG7C,OAAAK,EAAA,kBAAA,KAAC,QAAA,CACC,UAAU,eACV,KAAK,QACL,gBAAeF,EAAW,iBAC1B,gBAAeA,EAAW,QAAQ,OAClC,aAAYJ,EAEZ,SAAA,CAACO,EAAA,kBAAA,IAAA,UAAA,CAAQ,UAAU,wBAAyB,SAAKP,EAAA,EAGjDO,EAAA,kBAAA,IAAC,QAAA,CACC,UAAU,iCACV,KAAK,WACL,MAAOH,EAAW,eAAiB,CAAE,QAAS,MAAW,EAAA,OAEzD,SAACG,EAAA,kBAAA,IAAA,KAAA,CAAG,UAAU,2BAA2B,KAAK,MAAM,gBAAe,EAChE,SAAWH,EAAA,QAAQ,IAAI,CAACI,EAAQC,IAC/BF,EAAA,kBAAA,IAAC,KAAA,CAEC,UAAU,uBACV,KAAK,eACL,MAAM,MACN,gBAAeE,EAAQ,EACvB,YAAWD,EAAO,SAEjB,SAAOA,EAAA,MAAA,EAPHA,EAAO,GASf,CAAA,EACH,CAAA,CACF,EAGAD,EAAAA,kBAAAA,IAAC,QAAM,CAAA,UAAU,qBAAqB,KAAK,WACxC,SAAAH,EAAW,KAAK,IAAI,CAACM,EAAKC,IACzBJ,EAAA,kBAAA,IAAC,KAAA,CAEC,UAAU,oBACV,KAAK,MACL,gBAAeH,EAAW,gBAAgBO,CAAQ,EAClD,QAASD,GAAA,YAAAA,EAAK,QACd,SAAUA,GAAA,MAAAA,EAAK,QAAU,EAAI,OAC7B,UACEA,GAAA,MAAAA,EAAK,QACAE,GAAM,QACDA,EAAE,MAAQ,SAAWA,EAAE,MAAQ,OAEjCA,EAAE,eAAe,GACjBC,EAAAH,EAAI,UAAJ,MAAAG,EAAA,KAAAH,GAGJ,EAAA,OAGL,SAAWN,EAAA,QAAQ,IAAI,CAACI,EAAQM,IAAa,CACtC,MAAAC,EAAOL,EAAI,MAAM,KAAMM,GAAMA,EAAE,YAAcR,EAAO,GAAG,EAE3D,OAAAD,EAAA,kBAAA,IAAC,KAAA,CAEC,UAAU,qBACV,KAAK,OACL,gBAAeO,EAAW,EAC1B,QAASC,GAAA,YAAAA,EAAM,QAEd,2BAAM,QAAS,EAAA,EANXP,EAAO,GAAA,CAOd,CAEH,CAAA,EA/BIE,EAAI,GAiCZ,CAAA,EACH,CAAA,CAAA,CAAA,CAGN,EAyBMO,EAAQ,OAAO,OAAOnB,EAAgB,CAE1C,OAAQoB,EAAA,YAER,OAAQC,EAAA,YAER,KAAMC,EAAA,UAEN,IAAKC,EAAA,SAEL,KAAMC,EAAA,SACR,CAAC"}