@protonradio/proton-ui 0.11.10 → 0.11.11

package/dist/components/Button/Button.es.js

@@ -0,0 +1,99 @@
+import { j as r } from "../../node_modules/react/jsx-runtime.es.js";
+import { forwardRef as _, useRef as j, useLayoutEffect as h } from "react";
+import { csx as x } from "../../utils/string.es.js";
+import { isUrlExternal as v, handleInternalNavigation as b } from "../../utils/navigation.es.js";
+/* empty css              */
+const U = {
+  primary: "primary",
+  secondary: "secondary",
+  success: "success",
+  danger: "danger",
+  translucent: "translucent"
+}, $ = {
+  small: "small",
+  medium: "medium",
+  large: "large",
+  xlarge: "xlarge",
+  "2xlarge": "2xlarge"
+}, N = _(
+  ({
+    variant: B = "primary",
+    size: c = "medium",
+    fullWidth: i = !1,
+    icon: m,
+    to: n,
+    target: u,
+    onPress: a,
+    type: g = "button",
+    isDisabled: o,
+    "data-testid": y,
+    children: s
+  }, t) => {
+    const l = n && v(n), d = j(null);
+    h(() => {
+      typeof t == "function" ? t(d.current) : t && (t.current = d.current);
+    }, [t]);
+    const p = {
+      className: x(
+        "proton-Button",
+        `proton-Button--${B}`,
+        i && "proton-Button--fullWidth",
+        o && "proton-Button--disabled",
+        c && `proton-Button--${c}`
+      ),
+      "data-testid": y,
+      ...n && { "aria-disabled": o },
+      ...o && { tabIndex: -1 }
+    }, f = /* @__PURE__ */ r.jsxs(r.Fragment, { children: [
+      m && /* @__PURE__ */ r.jsx(
+        "div",
+        {
+          className: x(
+            "proton-Button__icon-decorator",
+            i && "proton-Button__icon-decorator--fullWidth"
+          ),
+          children: m
+        }
+      ),
+      s && /* @__PURE__ */ r.jsx("div", { className: "proton-Button__text", children: s })
+    ] });
+    return n ? /* @__PURE__ */ r.jsx(
+      "a",
+      {
+        ...p,
+        href: n,
+        target: u || (l ? "_blank" : void 0),
+        rel: l || u === "_blank" ? "noopener noreferrer" : void 0,
+        ref: t,
+        onClick: (e) => {
+          if (o) {
+            e.preventDefault();
+            return;
+          }
+          !l && !u && b(e, n), a == null || a(e);
+        },
+        role: "button",
+        children: f
+      }
+    ) : /* @__PURE__ */ r.jsx(
+      "button",
+      {
+        ...p,
+        type: g,
+        disabled: o,
+        ref: t,
+        onClick: (e) => {
+          !o && a && a(e);
+        },
+        children: f
+      }
+    );
+  }
+);
+N.displayName = "ProtonUIButton";
+export {
+  N as Button,
+  $ as ButtonSizes,
+  U as ButtonVariants
+};
+//# sourceMappingURL=Button.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Button.es.js","sources":["../../../src/components/Button/Button.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport {\r\n  forwardRef,\r\n  MouseEvent,\r\n  useLayoutEffect,\r\n  useRef,\r\n} from \"react\";\r\n\r\nimport { csx } from \"../../utils/string\";\r\nimport {\r\n  isUrlExternal,\r\n  handleInternalNavigation,\r\n} from \"../../utils/navigation\";\r\nimport \"./Button.css\";\r\n\r\nexport type ButtonVariant =\r\n  | \"primary\"\r\n  | \"secondary\"\r\n  | \"success\"\r\n  | \"danger\"\r\n  | \"translucent\";\r\n\r\nexport const ButtonVariants: Record<ButtonVariant, ButtonVariant> = {\r\n  primary: \"primary\",\r\n  secondary: \"secondary\",\r\n  success: \"success\",\r\n  danger: \"danger\",\r\n  translucent: \"translucent\",\r\n};\r\n\r\nexport type ButtonSize = \"small\" | \"medium\" | \"large\" | \"xlarge\" | \"2xlarge\";\r\n\r\nexport const ButtonSizes: Record<ButtonSize, ButtonSize> = {\r\n  small: \"small\",\r\n  medium: \"medium\",\r\n  large: \"large\",\r\n  xlarge: \"xlarge\",\r\n  \"2xlarge\": \"2xlarge\",\r\n};\r\n\r\nexport interface ButtonProps {\r\n  /** The button's visual aesthetic\r\n   * - type {@link ButtonVariant}\r\n   */\r\n  variant?: ButtonVariant;\r\n\r\n  /** The size of the button\r\n   * - type {@link ButtonSize}\r\n   * @default \"medium\"\r\n   */\r\n  size?: ButtonSize;\r\n\r\n  /** Should the button be full width?\r\n   * @default false\r\n   */\r\n  fullWidth?: boolean;\r\n\r\n  /** The prefix to display within the button */\r\n  icon?: React.ReactNode;\r\n\r\n  /** Should the button be non-interactive? */\r\n  isDisabled?: boolean;\r\n\r\n  /** The URL that the button should link to. Turns the element into an `a` tag. If the URL is external, you should pass the entire URL to the `to` prop (e.g. `https://example.com`). */\r\n  to?: string;\r\n\r\n  /** The target attribute for the link. Defaults to `_blank` if the URL is external. */\r\n  target?: \"_blank\" | \"_self\" | \"_parent\" | \"_top\" | string;\r\n\r\n  /** Called when the button is pressed (on release, not keydown) */\r\n  onPress?: (e: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void;\r\n\r\n  /** The type of button */\r\n  type?: \"button\" | \"submit\" | \"reset\";\r\n\r\n  /** The test ID for the button */\r\n  \"data-testid\"?: string;\r\n\r\n  /** The content to display within the button */\r\n  children?: React.ReactNode;\r\n}\r\n\r\n/**\r\n * A customizable button component that can render as either a button or anchor element.\r\n *\r\n * API:\r\n *  - {@link ButtonProps}\r\n */\r\nexport const Button = forwardRef<\r\n  HTMLButtonElement | HTMLAnchorElement,\r\n  ButtonProps\r\n>(\r\n  (\r\n    {\r\n      variant = \"primary\",\r\n      size = \"medium\",\r\n      fullWidth = false,\r\n      icon,\r\n      to,\r\n      target,\r\n      onPress,\r\n      type = \"button\",\r\n      isDisabled,\r\n      \"data-testid\": testId,\r\n      children,\r\n    }: ButtonProps,\r\n    ref\r\n  ) => {\r\n    const isExternal = to && isUrlExternal(to);\r\n    const buttonRef = useRef<HTMLButtonElement | HTMLAnchorElement>(null);\r\n\r\n    useLayoutEffect(() => {\r\n      if (typeof ref === \"function\") {\r\n        ref(buttonRef.current);\r\n      } else if (ref) {\r\n        ref.current = buttonRef.current;\r\n      }\r\n    }, [ref]);\r\n\r\n    const commonProps = {\r\n      className: csx(\r\n        \"proton-Button\",\r\n        `proton-Button--${variant}`,\r\n        fullWidth && \"proton-Button--fullWidth\",\r\n        isDisabled && \"proton-Button--disabled\",\r\n        size && `proton-Button--${size}`\r\n      ),\r\n      \"data-testid\": testId,\r\n      ...(to && { \"aria-disabled\": isDisabled }),\r\n      ...(isDisabled && { tabIndex: -1 }),\r\n    };\r\n\r\n    const content = (\r\n      <>\r\n        {icon && (\r\n          <div\r\n            className={csx(\r\n              \"proton-Button__icon-decorator\",\r\n              fullWidth && \"proton-Button__icon-decorator--fullWidth\"\r\n            )}\r\n          >\r\n            {icon}\r\n          </div>\r\n        )}\r\n        {children && <div className=\"proton-Button__text\">{children}</div>}\r\n      </>\r\n    );\r\n\r\n    if (to) {\r\n      return (\r\n        <a\r\n          {...commonProps}\r\n          href={to}\r\n          target={target || (isExternal ? \"_blank\" : undefined)}\r\n          rel={\r\n            isExternal || target === \"_blank\"\r\n              ? \"noopener noreferrer\"\r\n              : undefined\r\n          }\r\n          ref={ref as React.RefObject<HTMLAnchorElement>}\r\n          onClick={(e) => {\r\n            if (isDisabled) {\r\n              e.preventDefault();\r\n              return;\r\n            }\r\n\r\n            if (!isExternal && !target) {\r\n              handleInternalNavigation(e, to);\r\n            }\r\n\r\n            onPress?.(e);\r\n          }}\r\n          role=\"button\"\r\n        >\r\n          {content}\r\n        </a>\r\n      );\r\n    }\r\n\r\n    return (\r\n      <button\r\n        {...commonProps}\r\n        type={type}\r\n        disabled={isDisabled}\r\n        ref={ref as React.RefObject<HTMLButtonElement>}\r\n        onClick={(e) => {\r\n          if (!isDisabled && onPress) {\r\n            onPress(e);\r\n          }\r\n        }}\r\n      >\r\n        {content}\r\n      </button>\r\n    );\r\n  }\r\n);\r\n\r\nButton.displayName = \"ProtonUIButton\";\r\n"],"names":["ButtonVariants","ButtonSizes","Button","forwardRef","variant","size","fullWidth","icon","to","target","onPress","type","isDisabled","testId","children","ref","isExternal","isUrlExternal","buttonRef","useRef","useLayoutEffect","commonProps","csx","content","jsxs","Fragment","jsx","handleInternalNavigation"],"mappings":";;;;;AAuBO,MAAMA,IAAuD;AAAA,EAClE,SAAS;AAAA,EACT,WAAW;AAAA,EACX,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,aAAa;AACf,GAIaC,IAA8C;AAAA,EACzD,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,WAAW;AACb,GAkDaC,IAASC;AAAA,EAIpB,CACE;AAAA,IACE,SAAAC,IAAU;AAAA,IACV,MAAAC,IAAO;AAAA,IACP,WAAAC,IAAY;AAAA,IACZ,MAAAC;AAAA,IACA,IAAAC;AAAA,IACA,QAAAC;AAAA,IACA,SAAAC;AAAA,IACA,MAAAC,IAAO;AAAA,IACP,YAAAC;AAAA,IACA,eAAeC;AAAA,IACf,UAAAC;AAAA,KAEFC,MACG;AACG,UAAAC,IAAaR,KAAMS,EAAcT,CAAE,GACnCU,IAAYC,EAA8C,IAAI;AAEpE,IAAAC,EAAgB,MAAM;AAChB,MAAA,OAAOL,KAAQ,aACjBA,EAAIG,EAAU,OAAO,IACZH,MACTA,EAAI,UAAUG,EAAU;AAAA,IAC1B,GACC,CAACH,CAAG,CAAC;AAER,UAAMM,IAAc;AAAA,MAClB,WAAWC;AAAA,QACT;AAAA,QACA,kBAAkBlB,CAAO;AAAA,QACzBE,KAAa;AAAA,QACbM,KAAc;AAAA,QACdP,KAAQ,kBAAkBA,CAAI;AAAA,MAChC;AAAA,MACA,eAAeQ;AAAA,MACf,GAAIL,KAAM,EAAE,iBAAiBI,EAAW;AAAA,MACxC,GAAIA,KAAc,EAAE,UAAU,GAAG;AAAA,IAAA,GAG7BW,IAEDC,gBAAAA,EAAAA,KAAAC,EAAA,UAAA,EAAA,UAAA;AAAA,MACClB,KAAAmB,gBAAAA,EAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAWJ;AAAA,YACT;AAAA,YACAhB,KAAa;AAAA,UACf;AAAA,UAEC,UAAAC;AAAA,QAAA;AAAA,MACH;AAAA,MAEDO,KAAYY,gBAAAA,EAAA,IAAC,OAAI,EAAA,WAAU,uBAAuB,UAAAZ,GAAS;AAAA,IAC9D,EAAA,CAAA;AAGF,WAAIN,IAEAkB,gBAAAA,EAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACE,GAAGL;AAAA,QACJ,MAAMb;AAAA,QACN,QAAQC,MAAWO,IAAa,WAAW;AAAA,QAC3C,KACEA,KAAcP,MAAW,WACrB,wBACA;AAAA,QAEN,KAAAM;AAAA,QACA,SAAS,CAAC,MAAM;AACd,cAAIH,GAAY;AACd,cAAE,eAAe;AACjB;AAAA,UACF;AAEI,UAAA,CAACI,KAAc,CAACP,KAClBkB,EAAyB,GAAGnB,CAAE,GAGhCE,KAAA,QAAAA,EAAU;AAAA,QACZ;AAAA,QACA,MAAK;AAAA,QAEJ,UAAAa;AAAA,MAAA;AAAA,IAAA,IAMLG,gBAAAA,EAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACE,GAAGL;AAAA,QACJ,MAAAV;AAAA,QACA,UAAUC;AAAA,QACV,KAAAG;AAAA,QACA,SAAS,CAAC,MAAM;AACV,UAAA,CAACH,KAAcF,KACjBA,EAAQ,CAAC;AAAA,QAEb;AAAA,QAEC,UAAAa;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AAEArB,EAAO,cAAc;"}

package/dist/components/ButtonGroup/ButtonGroup.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"),u=require("react"),c=require("../../node_modules/@react-aria/radio/dist/useRadio.cjs.js"),p=require("../../node_modules/@react-aria/radio/dist/useRadioGroup.cjs.js"),x=require("../../node_modules/@react-aria/visually-hidden/dist/VisuallyHidden.cjs.js"),R=require("../../node_modules/@react-stately/radio/dist/useRadioGroupState.cjs.js");;/* empty css                     */const G=require("../../utils/string.cjs.js");let a=u.createContext(null);function s(i){let t={...i,"data-testid":void 0},e=R.useRadioGroupState(t),{radioGroupProps:r}=p.useRadioGroup(t,e);return o.jsxRuntimeExports.jsx("div",{...r,className:"proton-ButtonGroup","data-value":e.selectedValue,"data-testid":i["data-testid"]||void 0,children:o.jsxRuntimeExports.jsx(a.Provider,{value:e,children:i.children})})}s.displayName="ProtonUIButtonGroup";s.Option=function(t){let e={...t,"data-testid":void 0},r=u.useContext(a),n=u.useRef(null),{inputProps:l,isSelected:d}=c.useRadio(e,r,n);return o.jsxRuntimeExports.jsxs("label",{className:G.csx("proton-ButtonGroup__option",d&&"proton-ButtonGroup__option--selected"),"data-selected":d||void 0,"data-testid":t["data-testid"]||void 0,children:[o.jsxRuntimeExports.jsx(x.VisuallyHidden,{children:o.jsxRuntimeExports.jsx("input",{...l,ref:n})}),t.children]})};exports.ButtonGroup=s;
+//# sourceMappingURL=ButtonGroup.cjs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonGroup.cjs.js","sources":["../../../src/components/ButtonGroup/ButtonGroup.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport { createContext, useContext, useRef } from \"react\";\r\nimport { useRadio, useRadioGroup } from \"@react-aria/radio\";\r\nimport { VisuallyHidden } from \"@react-aria/visually-hidden\";\r\nimport { useRadioGroupState } from \"@react-stately/radio\";\r\nimport { csx } from \"../../utils\";\r\n\r\nimport \"./ButtonGroup.css\";\r\n\r\nexport interface ButtonGroupProps {\r\n  /**\r\n   * The value of the currently selected option in the ButtonGroup. Providing\r\n   * this prop causes the component to become controlled.\r\n   */\r\n  value?: string;\r\n\r\n  /**\r\n   * The initially selected value of the ButtonGroup.\r\n   */\r\n  defaultValue?: string;\r\n\r\n  /**\r\n   * Called when the ButtonGroup's selected value changes.\r\n   */\r\n  onChange?: (value: string) => void;\r\n\r\n  /**\r\n   * The ButtonGroup.Option elements to be rendered as the selectable values.\r\n   */\r\n  children?: React.ReactNode;\r\n}\r\n\r\nlet ButtonGroupContext = createContext(null);\r\n\r\n/**\r\n * A radio button group component that allows selection of a single option from multiple choices.\r\n *\r\n * API:\r\n *  - {@link ButtonGroupProps}\r\n */\r\nexport function ButtonGroup(props: ButtonGroupProps) {\r\n  let sanitizedProps = {\r\n    ...props,\r\n    \"data-testid\": undefined,\r\n  };\r\n\r\n  let state = useRadioGroupState(sanitizedProps);\r\n  let { radioGroupProps } = useRadioGroup(sanitizedProps, state);\r\n\r\n  return (\r\n    <div\r\n      {...radioGroupProps}\r\n      className=\"proton-ButtonGroup\"\r\n      data-value={state.selectedValue}\r\n      data-testid={props[\"data-testid\"] || undefined}\r\n    >\r\n      <ButtonGroupContext.Provider value={state}>\r\n        {props.children}\r\n      </ButtonGroupContext.Provider>\r\n    </div>\r\n  );\r\n}\r\n\r\nButtonGroup.displayName = \"ProtonUIButtonGroup\";\r\n\r\nexport interface ButtonGroupOptionProps {\r\n  /**\r\n   * The value of this option. When this option is selected, this value will\r\n   * become the ButtonGroup's new `selectedValue`.\r\n   */\r\n  value: string;\r\n\r\n  /**\r\n   * The text or component to be rendered as this option's content.\r\n   */\r\n  children: React.ReactNode;\r\n}\r\n\r\nButtonGroup.Option = function ButtonGroupOption(props: ButtonGroupOptionProps) {\r\n  let sanitizedProps = {\r\n    ...props,\r\n    \"data-testid\": undefined,\r\n  };\r\n\r\n  let state = useContext(ButtonGroupContext);\r\n  let ref = useRef(null);\r\n  let { inputProps, isSelected } = useRadio(sanitizedProps, state, ref);\r\n\r\n  return (\r\n    <label\r\n      className={csx(\r\n        \"proton-ButtonGroup__option\",\r\n        isSelected && \"proton-ButtonGroup__option--selected\"\r\n      )}\r\n      data-selected={isSelected || undefined}\r\n      data-testid={props[\"data-testid\"] || undefined}\r\n    >\r\n      <VisuallyHidden>\r\n        <input {...inputProps} ref={ref} />\r\n      </VisuallyHidden>\r\n      {props.children}\r\n    </label>\r\n  );\r\n};\r\n"],"names":["ButtonGroupContext","createContext","ButtonGroup","props","sanitizedProps","state","useRadioGroupState","radioGroupProps","useRadioGroup","jsx","useContext","ref","useRef","inputProps","isSelected","useRadio","jsxs","csx","VisuallyHidden"],"mappings":"ijBAiCA,IAAIA,EAAqBC,EAAAA,cAAc,IAAI,EAQpC,SAASC,EAAYC,EAAyB,CACnD,IAAIC,EAAiB,CACnB,GAAGD,EACH,cAAe,MAAA,EAGbE,EAAQC,qBAAmBF,CAAc,EACzC,CAAE,gBAAAG,CAAoB,EAAAC,EAAA,cAAcJ,EAAgBC,CAAK,EAG3D,OAAAI,EAAA,kBAAA,IAAC,MAAA,CACE,GAAGF,EACJ,UAAU,qBACV,aAAYF,EAAM,cAClB,cAAaF,EAAM,aAAa,GAAK,OAErC,iCAACH,EAAmB,SAAnB,CAA4B,MAAOK,EACjC,WAAM,SACT,CAAA,CAAA,CAGN,CAEAH,EAAY,YAAc,sBAe1BA,EAAY,OAAS,SAA2BC,EAA+B,CAC7E,IAAIC,EAAiB,CACnB,GAAGD,EACH,cAAe,MAAA,EAGbE,EAAQK,aAAWV,CAAkB,EACrCW,EAAMC,SAAO,IAAI,EACjB,CAAE,WAAAC,EAAY,WAAAC,GAAeC,EAAS,SAAAX,EAAgBC,EAAOM,CAAG,EAGlE,OAAAK,EAAA,kBAAA,KAAC,QAAA,CACC,UAAWC,EAAA,IACT,6BACAH,GAAc,sCAChB,EACA,gBAAeA,GAAc,OAC7B,cAAaX,EAAM,aAAa,GAAK,OAErC,SAAA,CAAAM,wBAACS,EAAAA,gBACC,SAACT,EAAA,kBAAA,IAAA,QAAA,CAAO,GAAGI,EAAY,IAAAF,CAAU,CAAA,EACnC,EACCR,EAAM,QAAA,CAAA,CAAA,CAGb"}

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

@@ -0,0 +1,51 @@
+import { j as o } from "../../node_modules/react/jsx-runtime.es.js";
+import { createContext as l, useContext as p, useRef as c } from "react";
+import { useRadio as f } from "../../node_modules/@react-aria/radio/dist/useRadio.es.js";
+import { useRadioGroup as m } from "../../node_modules/@react-aria/radio/dist/useRadioGroup.es.js";
+import { VisuallyHidden as x } from "../../node_modules/@react-aria/visually-hidden/dist/VisuallyHidden.es.js";
+import { useRadioGroupState as $ } from "../../node_modules/@react-stately/radio/dist/useRadioGroupState.es.js";
+/* empty css                   */
+import { csx as G } from "../../utils/string.es.js";
+let s = l(null);
+function n(r) {
+  let t = {
+    ...r,
+    "data-testid": void 0
+  }, e = $(t), { radioGroupProps: a } = m(t, e);
+  return /* @__PURE__ */ o.jsx(
+    "div",
+    {
+      ...a,
+      className: "proton-ButtonGroup",
+      "data-value": e.selectedValue,
+      "data-testid": r["data-testid"] || void 0,
+      children: /* @__PURE__ */ o.jsx(s.Provider, { value: e, children: r.children })
+    }
+  );
+}
+n.displayName = "ProtonUIButtonGroup";
+n.Option = function(t) {
+  let e = {
+    ...t,
+    "data-testid": void 0
+  }, a = p(s), d = c(null), { inputProps: u, isSelected: i } = f(e, a, d);
+  return /* @__PURE__ */ o.jsxs(
+    "label",
+    {
+      className: G(
+        "proton-ButtonGroup__option",
+        i && "proton-ButtonGroup__option--selected"
+      ),
+      "data-selected": i || void 0,
+      "data-testid": t["data-testid"] || void 0,
+      children: [
+        /* @__PURE__ */ o.jsx(x, { children: /* @__PURE__ */ o.jsx("input", { ...u, ref: d }) }),
+        t.children
+      ]
+    }
+  );
+};
+export {
+  n as ButtonGroup
+};
+//# sourceMappingURL=ButtonGroup.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonGroup.es.js","sources":["../../../src/components/ButtonGroup/ButtonGroup.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport { createContext, useContext, useRef } from \"react\";\r\nimport { useRadio, useRadioGroup } from \"@react-aria/radio\";\r\nimport { VisuallyHidden } from \"@react-aria/visually-hidden\";\r\nimport { useRadioGroupState } from \"@react-stately/radio\";\r\nimport { csx } from \"../../utils\";\r\n\r\nimport \"./ButtonGroup.css\";\r\n\r\nexport interface ButtonGroupProps {\r\n  /**\r\n   * The value of the currently selected option in the ButtonGroup. Providing\r\n   * this prop causes the component to become controlled.\r\n   */\r\n  value?: string;\r\n\r\n  /**\r\n   * The initially selected value of the ButtonGroup.\r\n   */\r\n  defaultValue?: string;\r\n\r\n  /**\r\n   * Called when the ButtonGroup's selected value changes.\r\n   */\r\n  onChange?: (value: string) => void;\r\n\r\n  /**\r\n   * The ButtonGroup.Option elements to be rendered as the selectable values.\r\n   */\r\n  children?: React.ReactNode;\r\n}\r\n\r\nlet ButtonGroupContext = createContext(null);\r\n\r\n/**\r\n * A radio button group component that allows selection of a single option from multiple choices.\r\n *\r\n * API:\r\n *  - {@link ButtonGroupProps}\r\n */\r\nexport function ButtonGroup(props: ButtonGroupProps) {\r\n  let sanitizedProps = {\r\n    ...props,\r\n    \"data-testid\": undefined,\r\n  };\r\n\r\n  let state = useRadioGroupState(sanitizedProps);\r\n  let { radioGroupProps } = useRadioGroup(sanitizedProps, state);\r\n\r\n  return (\r\n    <div\r\n      {...radioGroupProps}\r\n      className=\"proton-ButtonGroup\"\r\n      data-value={state.selectedValue}\r\n      data-testid={props[\"data-testid\"] || undefined}\r\n    >\r\n      <ButtonGroupContext.Provider value={state}>\r\n        {props.children}\r\n      </ButtonGroupContext.Provider>\r\n    </div>\r\n  );\r\n}\r\n\r\nButtonGroup.displayName = \"ProtonUIButtonGroup\";\r\n\r\nexport interface ButtonGroupOptionProps {\r\n  /**\r\n   * The value of this option. When this option is selected, this value will\r\n   * become the ButtonGroup's new `selectedValue`.\r\n   */\r\n  value: string;\r\n\r\n  /**\r\n   * The text or component to be rendered as this option's content.\r\n   */\r\n  children: React.ReactNode;\r\n}\r\n\r\nButtonGroup.Option = function ButtonGroupOption(props: ButtonGroupOptionProps) {\r\n  let sanitizedProps = {\r\n    ...props,\r\n    \"data-testid\": undefined,\r\n  };\r\n\r\n  let state = useContext(ButtonGroupContext);\r\n  let ref = useRef(null);\r\n  let { inputProps, isSelected } = useRadio(sanitizedProps, state, ref);\r\n\r\n  return (\r\n    <label\r\n      className={csx(\r\n        \"proton-ButtonGroup__option\",\r\n        isSelected && \"proton-ButtonGroup__option--selected\"\r\n      )}\r\n      data-selected={isSelected || undefined}\r\n      data-testid={props[\"data-testid\"] || undefined}\r\n    >\r\n      <VisuallyHidden>\r\n        <input {...inputProps} ref={ref} />\r\n      </VisuallyHidden>\r\n      {props.children}\r\n    </label>\r\n  );\r\n};\r\n"],"names":["ButtonGroupContext","createContext","ButtonGroup","props","sanitizedProps","state","useRadioGroupState","radioGroupProps","useRadioGroup","jsx","useContext","ref","useRef","inputProps","isSelected","useRadio","jsxs","csx","VisuallyHidden"],"mappings":";;;;;;;;AAiCA,IAAIA,IAAqBC,EAAc,IAAI;AAQpC,SAASC,EAAYC,GAAyB;AACnD,MAAIC,IAAiB;AAAA,IACnB,GAAGD;AAAA,IACH,eAAe;AAAA,EAAA,GAGbE,IAAQC,EAAmBF,CAAc,GACzC,EAAE,iBAAAG,EAAoB,IAAAC,EAAcJ,GAAgBC,CAAK;AAG3D,SAAAI,gBAAAA,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAGF;AAAA,MACJ,WAAU;AAAA,MACV,cAAYF,EAAM;AAAA,MAClB,eAAaF,EAAM,aAAa,KAAK;AAAA,MAErC,gCAACH,EAAmB,UAAnB,EAA4B,OAAOK,GACjC,YAAM,UACT;AAAA,IAAA;AAAA,EAAA;AAGN;AAEAH,EAAY,cAAc;AAe1BA,EAAY,SAAS,SAA2BC,GAA+B;AAC7E,MAAIC,IAAiB;AAAA,IACnB,GAAGD;AAAA,IACH,eAAe;AAAA,EAAA,GAGbE,IAAQK,EAAWV,CAAkB,GACrCW,IAAMC,EAAO,IAAI,GACjB,EAAE,YAAAC,GAAY,YAAAC,MAAeC,EAASX,GAAgBC,GAAOM,CAAG;AAGlE,SAAAK,gBAAAA,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC;AAAA,QACT;AAAA,QACAH,KAAc;AAAA,MAChB;AAAA,MACA,iBAAeA,KAAc;AAAA,MAC7B,eAAaX,EAAM,aAAa,KAAK;AAAA,MAErC,UAAA;AAAA,QAAAM,gBAAAA,MAACS,KACC,UAACT,gBAAAA,EAAA,IAAA,SAAA,EAAO,GAAGI,GAAY,KAAAF,EAAU,CAAA,GACnC;AAAA,QACCR,EAAM;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGb;"}

package/dist/components/ButtonWithSelect/ButtonWithSelect.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"),R=require("react"),o=require("../Button/Button.cjs.js"),S=require("../Icon/Icon.cjs.js"),E=require("../Menu/MenuTrigger.cjs.js");;/* empty css                          */const u=44;function c({items:e,defaultValue:s,children:l,onSelectionChange:d,disabledKeys:a,selectedKey:g,icon:j,variant:i,fullWidth:r,onPress:h,...n}){const m=r?u/2:0;return t.jsxRuntimeExports.jsxs("div",{className:"proton-ButtonWithSelect",children:[t.jsxRuntimeExports.jsx("div",{className:"proton-ButtonWithSelect__button",style:{"--proton-button-text-shift":`${m}px`,"--flex":r?1:0},children:t.jsxRuntimeExports.jsx(o.Button,{...n,onPress:h,icon:j,fullWidth:r,variant:i,"data-testid":"ButtonWithSelect-Button",children:l})}),t.jsxRuntimeExports.jsx(E.MenuTrigger,{items:e,disabled:n.isDisabled,disabledKeys:a,onSelectionChange:d,selectedKey:g,renderTrigger:({isOpen:p,setIsOpen:B})=>t.jsxRuntimeExports.jsx(x,{...n,variant:i,onPress:()=>B(!p)})})]})}c.displayName="ProtonUIButtonWithSelect";const x=R.forwardRef((e,s)=>t.jsxRuntimeExports.jsx("div",{className:"proton-ButtonWithSelect__trigger",style:{"--trigger-width":`${u}px`},children:t.jsxRuntimeExports.jsx(o.Button,{...e,"data-testid":"ButtonWithSelect-Trigger",ref:s,children:t.jsxRuntimeExports.jsx("div",{className:"proton-ButtonWithSelect__trigger-content",children:t.jsxRuntimeExports.jsx(S.Icon,{id:"chevron-down",size:16})})})}));x.displayName="ProtonUIButtonWithSelectTrigger";exports.ButtonWithSelect=c;
+//# sourceMappingURL=ButtonWithSelect.cjs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonWithSelect.cjs.js","sources":["../../../src/components/ButtonWithSelect/ButtonWithSelect.tsx"],"sourcesContent":["import React from \"react\";\r\nimport { Button, type ButtonProps } from \"../Button/Button\";\r\nimport { Icon } from \"../Icon/Icon\";\r\nimport { MenuTrigger } from \"../Menu/MenuTrigger\";\r\nimport type { ActionMenuAction } from \"../ActionMenu/ActionMenu\";\r\n\r\nimport \"./ButtonWithSelect.css\";\r\n\r\nconst FIXED_TRIGGER_WIDTH = 44;\r\n\r\ninterface ButtonWithSelectProps extends ButtonProps {\r\n  /**\r\n   * The default value of the select menu.\r\n   */\r\n  defaultValue?: string;\r\n  /**\r\n   * The keys of the disabled items.\r\n   */\r\n  disabledKeys?: string[];\r\n  /**\r\n   * The items to display in the select menu.\r\n   * - type {@link ActionMenuAction}\r\n   */\r\n  items: ActionMenuAction[];\r\n  /**\r\n   * The callback function to call when the selection changes.\r\n   */\r\n  onSelectionChange?: (key: string) => void;\r\n  /**\r\n   * The key of the selected item.\r\n   */\r\n  selectedKey?: string;\r\n}\r\n\r\n/**\r\n * A button with a select menu.\r\n *\r\n * API:\r\n *  - {@link ButtonWithSelectProps}\r\n *  - extends {@link ButtonProps}\r\n */\r\nexport function ButtonWithSelect({\r\n  items,\r\n  defaultValue,\r\n  children,\r\n  onSelectionChange,\r\n  disabledKeys,\r\n  selectedKey,\r\n  icon,\r\n  variant,\r\n  fullWidth,\r\n  onPress,\r\n  ...buttonProps\r\n}: ButtonWithSelectProps) {\r\n  const textShift = fullWidth ? FIXED_TRIGGER_WIDTH / 2 : 0;\r\n\r\n  return (\r\n    <div className=\"proton-ButtonWithSelect\">\r\n      <div\r\n        className=\"proton-ButtonWithSelect__button\"\r\n        style={\r\n          {\r\n            \"--proton-button-text-shift\": `${textShift}px`,\r\n            \"--flex\": fullWidth ? 1 : 0,\r\n          } as React.CSSProperties\r\n        }\r\n      >\r\n        <Button\r\n          {...buttonProps}\r\n          onPress={onPress}\r\n          icon={icon}\r\n          fullWidth={fullWidth}\r\n          variant={variant}\r\n          data-testid=\"ButtonWithSelect-Button\"\r\n        >\r\n          {children}\r\n        </Button>\r\n      </div>\r\n\r\n      <MenuTrigger\r\n        items={items}\r\n        disabled={buttonProps.isDisabled}\r\n        disabledKeys={disabledKeys}\r\n        onSelectionChange={onSelectionChange}\r\n        selectedKey={selectedKey}\r\n        renderTrigger={({ isOpen, setIsOpen }) => {\r\n          return (\r\n            <TriggerButton\r\n              {...buttonProps}\r\n              variant={variant}\r\n              onPress={() => setIsOpen(!isOpen)}\r\n            />\r\n          );\r\n        }}\r\n      />\r\n    </div>\r\n  );\r\n}\r\n\r\nButtonWithSelect.displayName = \"ProtonUIButtonWithSelect\";\r\n\r\nconst TriggerButton = React.forwardRef<\r\n  HTMLButtonElement | HTMLAnchorElement,\r\n  ButtonProps\r\n>((props, ref) => {\r\n  return (\r\n    <div\r\n      className=\"proton-ButtonWithSelect__trigger\"\r\n      style={\r\n        {\r\n          \"--trigger-width\": `${FIXED_TRIGGER_WIDTH}px`,\r\n        } as React.CSSProperties\r\n      }\r\n    >\r\n      <Button {...props} data-testid=\"ButtonWithSelect-Trigger\" ref={ref}>\r\n        <div className=\"proton-ButtonWithSelect__trigger-content\">\r\n          <Icon id=\"chevron-down\" size={16} />\r\n        </div>\r\n      </Button>\r\n    </div>\r\n  );\r\n});\r\n\r\nTriggerButton.displayName = \"ProtonUIButtonWithSelectTrigger\";\r\n"],"names":["FIXED_TRIGGER_WIDTH","ButtonWithSelect","items","defaultValue","children","onSelectionChange","disabledKeys","selectedKey","icon","variant","fullWidth","onPress","buttonProps","textShift","jsxs","jsx","Button","MenuTrigger","isOpen","setIsOpen","TriggerButton","React","props","ref","Icon"],"mappings":"yTAQA,MAAMA,EAAsB,GAiCrB,SAASC,EAAiB,CAC/B,MAAAC,EACA,aAAAC,EACA,SAAAC,EACA,kBAAAC,EACA,aAAAC,EACA,YAAAC,EACA,KAAAC,EACA,QAAAC,EACA,UAAAC,EACA,QAAAC,EACA,GAAGC,CACL,EAA0B,CAClB,MAAAC,EAAYH,EAAYV,EAAsB,EAAI,EAGtD,OAAAc,EAAA,kBAAA,KAAC,MAAI,CAAA,UAAU,0BACb,SAAA,CAAAC,EAAA,kBAAA,IAAC,MAAA,CACC,UAAU,kCACV,MACE,CACE,6BAA8B,GAAGF,CAAS,KAC1C,SAAUH,EAAY,EAAI,CAC5B,EAGF,SAAAK,EAAA,kBAAA,IAACC,EAAA,OAAA,CACE,GAAGJ,EACJ,QAAAD,EACA,KAAAH,EACA,UAAAE,EACA,QAAAD,EACA,cAAY,0BAEX,SAAAL,CAAA,CACH,CAAA,CACF,EAEAW,EAAA,kBAAA,IAACE,EAAA,YAAA,CACC,MAAAf,EACA,SAAUU,EAAY,WACtB,aAAAN,EACA,kBAAAD,EACA,YAAAE,EACA,cAAe,CAAC,CAAE,OAAAW,EAAQ,UAAAC,KAEtBJ,EAAA,kBAAA,IAACK,EAAA,CACE,GAAGR,EACJ,QAAAH,EACA,QAAS,IAAMU,EAAU,CAACD,CAAM,CAAA,CAAA,CAGtC,CACF,CACF,CAAA,CAAA,CAEJ,CAEAjB,EAAiB,YAAc,2BAE/B,MAAMmB,EAAgBC,EAAM,WAG1B,CAACC,EAAOC,IAENR,EAAA,kBAAA,IAAC,MAAA,CACC,UAAU,mCACV,MACE,CACE,kBAAmB,GAAGf,CAAmB,IAC3C,EAGF,iCAACgB,SAAQ,CAAA,GAAGM,EAAO,cAAY,2BAA2B,IAAAC,EACxD,SAACR,EAAAA,kBAAAA,IAAA,MAAA,CAAI,UAAU,2CACb,iCAACS,EAAAA,KAAK,CAAA,GAAG,eAAe,KAAM,GAAI,EACpC,CACF,CAAA,CAAA,CAAA,CAGL,EAEDJ,EAAc,YAAc"}

package/dist/components/ButtonWithSelect/ButtonWithSelect.es.js

@@ -0,0 +1,80 @@
+import { j as t } from "../../node_modules/react/jsx-runtime.es.js";
+import j from "react";
+import { Button as s } from "../Button/Button.es.js";
+import { Icon as S } from "../Icon/Icon.es.js";
+import { MenuTrigger as f } from "../Menu/MenuTrigger.es.js";
+/* empty css                        */
+const c = 44;
+function W({
+  items: e,
+  defaultValue: i,
+  children: l,
+  onSelectionChange: a,
+  disabledKeys: m,
+  selectedKey: u,
+  icon: x,
+  variant: n,
+  fullWidth: r,
+  onPress: g,
+  ...o
+}) {
+  const h = r ? c / 2 : 0;
+  return /* @__PURE__ */ t.jsxs("div", { className: "proton-ButtonWithSelect", children: [
+    /* @__PURE__ */ t.jsx(
+      "div",
+      {
+        className: "proton-ButtonWithSelect__button",
+        style: {
+          "--proton-button-text-shift": `${h}px`,
+          "--flex": r ? 1 : 0
+        },
+        children: /* @__PURE__ */ t.jsx(
+          s,
+          {
+            ...o,
+            onPress: g,
+            icon: x,
+            fullWidth: r,
+            variant: n,
+            "data-testid": "ButtonWithSelect-Button",
+            children: l
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ t.jsx(
+      f,
+      {
+        items: e,
+        disabled: o.isDisabled,
+        disabledKeys: m,
+        onSelectionChange: a,
+        selectedKey: u,
+        renderTrigger: ({ isOpen: p, setIsOpen: B }) => /* @__PURE__ */ t.jsx(
+          d,
+          {
+            ...o,
+            variant: n,
+            onPress: () => B(!p)
+          }
+        )
+      }
+    )
+  ] });
+}
+W.displayName = "ProtonUIButtonWithSelect";
+const d = j.forwardRef((e, i) => /* @__PURE__ */ t.jsx(
+  "div",
+  {
+    className: "proton-ButtonWithSelect__trigger",
+    style: {
+      "--trigger-width": `${c}px`
+    },
+    children: /* @__PURE__ */ t.jsx(s, { ...e, "data-testid": "ButtonWithSelect-Trigger", ref: i, children: /* @__PURE__ */ t.jsx("div", { className: "proton-ButtonWithSelect__trigger-content", children: /* @__PURE__ */ t.jsx(S, { id: "chevron-down", size: 16 }) }) })
+  }
+));
+d.displayName = "ProtonUIButtonWithSelectTrigger";
+export {
+  W as ButtonWithSelect
+};
+//# sourceMappingURL=ButtonWithSelect.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonWithSelect.es.js","sources":["../../../src/components/ButtonWithSelect/ButtonWithSelect.tsx"],"sourcesContent":["import React from \"react\";\r\nimport { Button, type ButtonProps } from \"../Button/Button\";\r\nimport { Icon } from \"../Icon/Icon\";\r\nimport { MenuTrigger } from \"../Menu/MenuTrigger\";\r\nimport type { ActionMenuAction } from \"../ActionMenu/ActionMenu\";\r\n\r\nimport \"./ButtonWithSelect.css\";\r\n\r\nconst FIXED_TRIGGER_WIDTH = 44;\r\n\r\ninterface ButtonWithSelectProps extends ButtonProps {\r\n  /**\r\n   * The default value of the select menu.\r\n   */\r\n  defaultValue?: string;\r\n  /**\r\n   * The keys of the disabled items.\r\n   */\r\n  disabledKeys?: string[];\r\n  /**\r\n   * The items to display in the select menu.\r\n   * - type {@link ActionMenuAction}\r\n   */\r\n  items: ActionMenuAction[];\r\n  /**\r\n   * The callback function to call when the selection changes.\r\n   */\r\n  onSelectionChange?: (key: string) => void;\r\n  /**\r\n   * The key of the selected item.\r\n   */\r\n  selectedKey?: string;\r\n}\r\n\r\n/**\r\n * A button with a select menu.\r\n *\r\n * API:\r\n *  - {@link ButtonWithSelectProps}\r\n *  - extends {@link ButtonProps}\r\n */\r\nexport function ButtonWithSelect({\r\n  items,\r\n  defaultValue,\r\n  children,\r\n  onSelectionChange,\r\n  disabledKeys,\r\n  selectedKey,\r\n  icon,\r\n  variant,\r\n  fullWidth,\r\n  onPress,\r\n  ...buttonProps\r\n}: ButtonWithSelectProps) {\r\n  const textShift = fullWidth ? FIXED_TRIGGER_WIDTH / 2 : 0;\r\n\r\n  return (\r\n    <div className=\"proton-ButtonWithSelect\">\r\n      <div\r\n        className=\"proton-ButtonWithSelect__button\"\r\n        style={\r\n          {\r\n            \"--proton-button-text-shift\": `${textShift}px`,\r\n            \"--flex\": fullWidth ? 1 : 0,\r\n          } as React.CSSProperties\r\n        }\r\n      >\r\n        <Button\r\n          {...buttonProps}\r\n          onPress={onPress}\r\n          icon={icon}\r\n          fullWidth={fullWidth}\r\n          variant={variant}\r\n          data-testid=\"ButtonWithSelect-Button\"\r\n        >\r\n          {children}\r\n        </Button>\r\n      </div>\r\n\r\n      <MenuTrigger\r\n        items={items}\r\n        disabled={buttonProps.isDisabled}\r\n        disabledKeys={disabledKeys}\r\n        onSelectionChange={onSelectionChange}\r\n        selectedKey={selectedKey}\r\n        renderTrigger={({ isOpen, setIsOpen }) => {\r\n          return (\r\n            <TriggerButton\r\n              {...buttonProps}\r\n              variant={variant}\r\n              onPress={() => setIsOpen(!isOpen)}\r\n            />\r\n          );\r\n        }}\r\n      />\r\n    </div>\r\n  );\r\n}\r\n\r\nButtonWithSelect.displayName = \"ProtonUIButtonWithSelect\";\r\n\r\nconst TriggerButton = React.forwardRef<\r\n  HTMLButtonElement | HTMLAnchorElement,\r\n  ButtonProps\r\n>((props, ref) => {\r\n  return (\r\n    <div\r\n      className=\"proton-ButtonWithSelect__trigger\"\r\n      style={\r\n        {\r\n          \"--trigger-width\": `${FIXED_TRIGGER_WIDTH}px`,\r\n        } as React.CSSProperties\r\n      }\r\n    >\r\n      <Button {...props} data-testid=\"ButtonWithSelect-Trigger\" ref={ref}>\r\n        <div className=\"proton-ButtonWithSelect__trigger-content\">\r\n          <Icon id=\"chevron-down\" size={16} />\r\n        </div>\r\n      </Button>\r\n    </div>\r\n  );\r\n});\r\n\r\nTriggerButton.displayName = \"ProtonUIButtonWithSelectTrigger\";\r\n"],"names":["FIXED_TRIGGER_WIDTH","ButtonWithSelect","items","defaultValue","children","onSelectionChange","disabledKeys","selectedKey","icon","variant","fullWidth","onPress","buttonProps","textShift","jsxs","jsx","Button","MenuTrigger","isOpen","setIsOpen","TriggerButton","React","props","ref","Icon"],"mappings":";;;;;;AAQA,MAAMA,IAAsB;AAiCrB,SAASC,EAAiB;AAAA,EAC/B,OAAAC;AAAA,EACA,cAAAC;AAAA,EACA,UAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,cAAAC;AAAA,EACA,aAAAC;AAAA,EACA,MAAAC;AAAA,EACA,SAAAC;AAAA,EACA,WAAAC;AAAA,EACA,SAAAC;AAAA,EACA,GAAGC;AACL,GAA0B;AAClB,QAAAC,IAAYH,IAAYV,IAAsB,IAAI;AAGtD,SAAAc,gBAAAA,EAAA,KAAC,OAAI,EAAA,WAAU,2BACb,UAAA;AAAA,IAAAC,gBAAAA,EAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAU;AAAA,QACV,OACE;AAAA,UACE,8BAA8B,GAAGF,CAAS;AAAA,UAC1C,UAAUH,IAAY,IAAI;AAAA,QAC5B;AAAA,QAGF,UAAAK,gBAAAA,EAAA;AAAA,UAACC;AAAA,UAAA;AAAA,YACE,GAAGJ;AAAA,YACJ,SAAAD;AAAA,YACA,MAAAH;AAAA,YACA,WAAAE;AAAA,YACA,SAAAD;AAAA,YACA,eAAY;AAAA,YAEX,UAAAL;AAAA,UAAA;AAAA,QACH;AAAA,MAAA;AAAA,IACF;AAAA,IAEAW,gBAAAA,EAAA;AAAA,MAACE;AAAA,MAAA;AAAA,QACC,OAAAf;AAAA,QACA,UAAUU,EAAY;AAAA,QACtB,cAAAN;AAAA,QACA,mBAAAD;AAAA,QACA,aAAAE;AAAA,QACA,eAAe,CAAC,EAAE,QAAAW,GAAQ,WAAAC,QAEtBJ,gBAAAA,EAAA;AAAA,UAACK;AAAA,UAAA;AAAA,YACE,GAAGR;AAAA,YACJ,SAAAH;AAAA,YACA,SAAS,MAAMU,EAAU,CAACD,CAAM;AAAA,UAAA;AAAA,QAAA;AAAA,MAGtC;AAAA,IACF;AAAA,EACF,EAAA,CAAA;AAEJ;AAEAjB,EAAiB,cAAc;AAE/B,MAAMmB,IAAgBC,EAAM,WAG1B,CAACC,GAAOC,MAENR,gBAAAA,EAAA;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAU;AAAA,IACV,OACE;AAAA,MACE,mBAAmB,GAAGf,CAAmB;AAAA,IAC3C;AAAA,IAGF,gCAACgB,GAAQ,EAAA,GAAGM,GAAO,eAAY,4BAA2B,KAAAC,GACxD,UAACR,gBAAAA,EAAAA,IAAA,OAAA,EAAI,WAAU,4CACb,gCAACS,GAAK,EAAA,IAAG,gBAAe,MAAM,IAAI,GACpC,EACF,CAAA;AAAA,EAAA;AAAA,CAGL;AAEDJ,EAAc,cAAc;"}

package/dist/components/DataTable/DataTable.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"),D=require("react"),s=require("../Table/Table.cjs.js"),f=require("../Elevation/Elevation.cjs.js"),_=require("../Tombstone/Tombstone.cjs.js"),q=require("../Icon/Icon.cjs.js");;/* empty css                   */function N(r){const{columns:x,data:l=[],loading:j=!1,tombstoneComponent:u,error:a=!1,name:d,onRowClick:m,emptyMessage:T="Data Unavailable",errorMessage:C,loadingRows:y=5,"data-testid":c}=r,g="sortableColumns"in r?r.sortableColumns:[],b="sortedBy"in r?r.sortedBy:void 0,p="sortDirection"in r?r.sortDirection:void 0,h="onSort"in r?r.onSort:void 0,o=D.useMemo(()=>x.filter(e=>!e.hidden),[x]),S=e=>{if(!h)return;const n=b===e.id&&p==="ASC"?"DESC":"ASC";h(e.id,n)},v=e=>b!==e?"none":p==="ASC"?"ascending":"descending";if(a){const e=typeof a=="string"?a:C||"An error occurred";return t.jsxRuntimeExports.jsx(E,{columns:o,message:e,name:d,testId:c,isError:!0})}return j?t.jsxRuntimeExports.jsx("div",{className:"proton-DataTable","data-testid":c,"aria-busy":"true","aria-label":`Loading ${d}...`,children:t.jsxRuntimeExports.jsxs(s.Table,{name:d,children:[t.jsxRuntimeExports.jsx(s.Table.Header,{children:o.map(e=>t.jsxRuntimeExports.jsx(s.Table.Column,{id:e.id,children:e.header},e.id))}),t.jsxRuntimeExports.jsx(s.Table.Body,{children:Array.from({length:y}).map((e,i)=>t.jsxRuntimeExports.jsx(s.Table.Row,{children:o.map(n=>t.jsxRuntimeExports.jsx(s.Table.Cell,{children:u||t.jsxRuntimeExports.jsx(_.Tombstone,{height:"1rem",width:i%3===0?"80%":i%3===1?"60%":"90%"})},n.id))},`loading-${i}`))})]})}):!l||l.length===0?t.jsxRuntimeExports.jsx(E,{columns:o,message:T,name:d,testId:c}):t.jsxRuntimeExports.jsx("div",{className:"proton-DataTable","data-testid":c,children:t.jsxRuntimeExports.jsxs(s.Table,{name:d,children:[t.jsxRuntimeExports.jsx(s.Table.Header,{children:o.map(e=>{const i=g.includes(e.id),n=v(e.id);return t.jsxRuntimeExports.jsx(s.Table.Column,{id:e.id,...i&&{"aria-sort":n},children:t.jsxRuntimeExports.jsxs("span",{className:"proton-DataTable__header-content",children:[e.header,i&&t.jsxRuntimeExports.jsx("button",{className:"proton-DataTable__sort-button",onClick:()=>S(e),"aria-label":`Sort by ${e.header}: ${n}`,type:"button",children:t.jsxRuntimeExports.jsx(q.Icon,{id:"chevron-up",size:12,color:n==="ascending"?"var(--proton-color__primary)":"currentColor"})})]})},e.id)})}),t.jsxRuntimeExports.jsx(s.Table.Body,{children:l.map((e,i)=>{const n=((e==null?void 0:e.id)||(e==null?void 0:e.key))??i;return t.jsxRuntimeExports.jsx(s.Table.Row,{onClick:m?()=>m(e):void 0,children:o.map(R=>t.jsxRuntimeExports.jsx(s.Table.Cell,{children:R.cell(e)},R.id))},n)})})]})})}const E=({columns:r,message:x,name:l,testId:j,isError:u=!1})=>t.jsxRuntimeExports.jsx("div",{className:"proton-DataTable","data-testid":j,children:t.jsxRuntimeExports.jsxs(s.Table,{name:l,children:[t.jsxRuntimeExports.jsx(s.Table.Header,{children:r==null?void 0:r.map(a=>t.jsxRuntimeExports.jsx(s.Table.Column,{id:a.id,children:a.header},a.id))}),t.jsxRuntimeExports.jsx(s.Table.Body,{children:t.jsxRuntimeExports.jsx(s.Table.Row,{children:t.jsxRuntimeExports.jsx(s.Table.Cell,{colSpan:(r==null?void 0:r.length)||1,children:t.jsxRuntimeExports.jsx("div",{className:"proton-DataTable__message-cell",role:u?"alert":"status","aria-live":"polite",children:t.jsxRuntimeExports.jsx(f.Elevation,{children:t.jsxRuntimeExports.jsx("div",{className:"proton-DataTable__empty-cell",children:x})})})})})})]})});exports.DataTable=N;
+//# sourceMappingURL=DataTable.cjs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DataTable.cjs.js","sources":["../../../src/components/DataTable/DataTable.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport { AriaAttributes, ReactNode, useMemo } from \"react\";\r\nimport { Table } from \"../Table/Table\";\r\nimport { Elevation } from \"../Elevation/Elevation\";\r\nimport { Tombstone } from \"../Tombstone/Tombstone\";\r\nimport { Icon } from \"../Icon/Icon\";\r\nimport \"./DataTable.css\";\r\n\r\nexport type SortDirection = \"ASC\" | \"DESC\";\r\n\r\ntype SortingConfig<T> =\r\n  | {\r\n      /** When sorting is enabled, all these props must be provided together. */\r\n      sortableColumns: string[];\r\n      sortedBy: string;\r\n      sortDirection: SortDirection;\r\n      onSort: (columnId: string, direction: SortDirection) => void;\r\n    }\r\n  | {\r\n      /** When no sorting is needed, none of these props should be provided */\r\n      sortableColumns?: never;\r\n      sortedBy?: never;\r\n      sortDirection?: never;\r\n      onSort?: never;\r\n    };\r\n\r\nexport interface DataTableColumn<T> {\r\n  /** id for the column */\r\n  id: string;\r\n  /** Header text or component */\r\n  header: ReactNode;\r\n  /** Function to render cell content from row data */\r\n  cell: (row: T) => ReactNode;\r\n  /** Whether this column should be hidden */\r\n  hidden?: boolean;\r\n}\r\n\r\ninterface BaseDataTableProps<T = any> {\r\n  /** Array of column definitions\r\n   * - {@link DataTableColumn}\r\n   */\r\n  columns: DataTableColumn<T>[];\r\n  /** Array of data objects to display. Can be empty array for loading/empty states */\r\n  data?: T[] | null;\r\n  /** Loading state */\r\n  loading?: boolean;\r\n  /** Tombstone component to use when loading */\r\n  tombstoneComponent?: ReactNode;\r\n  /** Error state */\r\n  error?: boolean | string;\r\n  /** Table name/caption for accessibility. This provides essential context for screen readers. */\r\n  name: string;\r\n  /** Callback when a row is clicked */\r\n  onRowClick?: (row: T) => void;\r\n  /** Custom empty state message */\r\n  emptyMessage?: string;\r\n  /** Custom error message */\r\n  errorMessage?: string;\r\n  /** Number of skeleton rows to show in loading state */\r\n  loadingRows?: number;\r\n  /** Test ID for testing purposes */\r\n  \"data-testid\"?: string;\r\n}\r\n\r\nexport type DataTableProps<T = any> = BaseDataTableProps<T> & SortingConfig<T>;\r\n\r\n/**\r\n * DataTable is a declarative wrapper around the base Table component that provides:\r\n *\r\n * API:\r\n *  - {@link DataTableProps}\r\n *  - {@link SortingConfig}\r\n */\r\nexport function DataTable<T = any>(props: DataTableProps<T>) {\r\n  const {\r\n    columns,\r\n    data = [],\r\n    loading = false,\r\n    tombstoneComponent,\r\n    error = false,\r\n    name,\r\n    onRowClick,\r\n    emptyMessage = \"Data Unavailable\",\r\n    errorMessage,\r\n    loadingRows = 5,\r\n    \"data-testid\": testId,\r\n  } = props;\r\n\r\n  const sortableColumns =\r\n    \"sortableColumns\" in props ? props.sortableColumns : [];\r\n  const sortedBy = \"sortedBy\" in props ? props.sortedBy : undefined;\r\n  const sortDirection =\r\n    \"sortDirection\" in props ? props.sortDirection : undefined;\r\n  const onSort = \"onSort\" in props ? props.onSort : undefined;\r\n\r\n  const visibleColumns = useMemo(\r\n    () => columns.filter((col) => !col.hidden),\r\n    [columns]\r\n  );\r\n\r\n  const handleSortClick = (column: DataTableColumn<T>) => {\r\n    if (!onSort) return;\r\n\r\n    const isCurrentlySorted = sortedBy === column.id;\r\n    const newDirection =\r\n      isCurrentlySorted && sortDirection === \"ASC\" ? \"DESC\" : \"ASC\";\r\n\r\n    onSort(column.id, newDirection);\r\n  };\r\n\r\n  const getSortState = (columnId: string): AriaAttributes[\"aria-sort\"] => {\r\n    if (sortedBy !== columnId) return \"none\";\r\n    return sortDirection === \"ASC\" ? \"ascending\" : \"descending\";\r\n  };\r\n\r\n  if (error) {\r\n    const message =\r\n      typeof error === \"string\" ? error : errorMessage || \"An error occurred\";\r\n    return (\r\n      <EmptyState\r\n        columns={visibleColumns}\r\n        message={message}\r\n        name={name}\r\n        testId={testId}\r\n        isError\r\n      />\r\n    );\r\n  }\r\n\r\n  if (loading) {\r\n    return (\r\n      <div\r\n        className=\"proton-DataTable\"\r\n        data-testid={testId}\r\n        aria-busy=\"true\"\r\n        aria-label={`Loading ${name}...`}\r\n      >\r\n        <Table name={name}>\r\n          <Table.Header>\r\n            {visibleColumns.map((column) => (\r\n              <Table.Column key={column.id} id={column.id}>\r\n                {column.header}\r\n              </Table.Column>\r\n            ))}\r\n          </Table.Header>\r\n          <Table.Body>\r\n            {Array.from({ length: loadingRows }).map((_, index) => (\r\n              <Table.Row key={`loading-${index}`}>\r\n                {visibleColumns.map((column) => (\r\n                  <Table.Cell key={column.id}>\r\n                    {tombstoneComponent || (\r\n                      <Tombstone\r\n                        height=\"1rem\"\r\n                        width={\r\n                          // cascading tombstone widths\r\n                          index % 3 === 0\r\n                            ? \"80%\"\r\n                            : index % 3 === 1\r\n                              ? \"60%\"\r\n                              : \"90%\"\r\n                        }\r\n                      />\r\n                    )}\r\n                  </Table.Cell>\r\n                ))}\r\n              </Table.Row>\r\n            ))}\r\n          </Table.Body>\r\n        </Table>\r\n      </div>\r\n    );\r\n  }\r\n\r\n  if (!data || data.length === 0) {\r\n    return (\r\n      <EmptyState\r\n        columns={visibleColumns}\r\n        message={emptyMessage}\r\n        name={name}\r\n        testId={testId}\r\n      />\r\n    );\r\n  }\r\n\r\n  return (\r\n    <div className=\"proton-DataTable\" data-testid={testId}>\r\n      <Table name={name}>\r\n        <Table.Header>\r\n          {visibleColumns.map((column) => {\r\n            const isSortable = sortableColumns.includes(column.id);\r\n            const sortState = getSortState(column.id);\r\n\r\n            return (\r\n              <Table.Column\r\n                key={column.id}\r\n                id={column.id}\r\n                {...(isSortable && { \"aria-sort\": sortState })}\r\n              >\r\n                <span className=\"proton-DataTable__header-content\">\r\n                  {column.header}\r\n                  {isSortable && (\r\n                    <button\r\n                      className=\"proton-DataTable__sort-button\"\r\n                      onClick={() => handleSortClick(column)}\r\n                      aria-label={`Sort by ${column.header}: ${sortState}`}\r\n                      type=\"button\"\r\n                    >\r\n                      <Icon\r\n                        id={\"chevron-up\"}\r\n                        size={12}\r\n                        color={\r\n                          sortState === \"ascending\"\r\n                            ? \"var(--proton-color__primary)\"\r\n                            : \"currentColor\"\r\n                        }\r\n                      />\r\n                    </button>\r\n                  )}\r\n                </span>\r\n              </Table.Column>\r\n            );\r\n          })}\r\n        </Table.Header>\r\n        <Table.Body>\r\n          {data.map((row, index) => {\r\n            // Generate a key from the row data or use index as fallback\r\n            const rowKey = ((row as any)?.id || (row as any)?.key) ?? index;\r\n\r\n            return (\r\n              <Table.Row\r\n                key={rowKey}\r\n                onClick={onRowClick ? () => onRowClick(row) : undefined}\r\n              >\r\n                {visibleColumns.map((column) => (\r\n                  <Table.Cell key={column.id}>{column.cell(row)}</Table.Cell>\r\n                ))}\r\n              </Table.Row>\r\n            );\r\n          })}\r\n        </Table.Body>\r\n      </Table>\r\n    </div>\r\n  );\r\n}\r\n\r\nconst EmptyState = ({\r\n  columns,\r\n  message,\r\n  name,\r\n  testId,\r\n  isError = false,\r\n}: Partial<DataTableProps> & {\r\n  testId?: string;\r\n  message: string;\r\n  isError?: boolean;\r\n}) => {\r\n  return (\r\n    <div className=\"proton-DataTable\" data-testid={testId}>\r\n      <Table name={name}>\r\n        <Table.Header>\r\n          {columns?.map((column) => (\r\n            <Table.Column key={column.id} id={column.id}>\r\n              {column.header}\r\n            </Table.Column>\r\n          ))}\r\n        </Table.Header>\r\n        <Table.Body>\r\n          <Table.Row>\r\n            <Table.Cell colSpan={columns?.length || 1}>\r\n              <div\r\n                className=\"proton-DataTable__message-cell\"\r\n                role={isError ? \"alert\" : \"status\"}\r\n                aria-live=\"polite\"\r\n              >\r\n                <Elevation>\r\n                  <div className=\"proton-DataTable__empty-cell\">{message}</div>\r\n                </Elevation>\r\n              </div>\r\n            </Table.Cell>\r\n          </Table.Row>\r\n        </Table.Body>\r\n      </Table>\r\n    </div>\r\n  );\r\n};\r\n"],"names":["DataTable","props","columns","data","loading","tombstoneComponent","error","name","onRowClick","emptyMessage","errorMessage","loadingRows","testId","sortableColumns","sortedBy","sortDirection","onSort","visibleColumns","useMemo","col","handleSortClick","column","newDirection","getSortState","columnId","message","jsx","EmptyState","jsxs","Table","_","index","Tombstone","isSortable","sortState","Icon","row","rowKey","isError","Elevation"],"mappings":"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"}

package/dist/components/DataTable/DataTable.es.js

@@ -0,0 +1,137 @@
+import { j as t } from "../../node_modules/react/jsx-runtime.es.js";
+import { useMemo as T } from "react";
+import { Table as r } from "../Table/Table.es.js";
+import { Elevation as N } from "../Elevation/Elevation.es.js";
+import { Tombstone as B } from "../Tombstone/Tombstone.es.js";
+import { Icon as R } from "../Icon/Icon.es.js";
+/* empty css                 */
+function z(i) {
+  const {
+    columns: c,
+    data: d = [],
+    loading: j = !1,
+    tombstoneComponent: m,
+    error: n = !1,
+    name: l,
+    onRowClick: x,
+    emptyMessage: g = "Data Unavailable",
+    errorMessage: S,
+    loadingRows: u = 5,
+    "data-testid": h
+  } = i, v = "sortableColumns" in i ? i.sortableColumns : [], b = "sortedBy" in i ? i.sortedBy : void 0, C = "sortDirection" in i ? i.sortDirection : void 0, p = "onSort" in i ? i.onSort : void 0, o = T(
+    () => c.filter((e) => !e.hidden),
+    [c]
+  ), D = (e) => {
+    if (!p) return;
+    const s = b === e.id && C === "ASC" ? "DESC" : "ASC";
+    p(e.id, s);
+  }, _ = (e) => b !== e ? "none" : C === "ASC" ? "ascending" : "descending";
+  if (n) {
+    const e = typeof n == "string" ? n : S || "An error occurred";
+    return /* @__PURE__ */ t.jsx(
+      f,
+      {
+        columns: o,
+        message: e,
+        name: l,
+        testId: h,
+        isError: !0
+      }
+    );
+  }
+  return j ? /* @__PURE__ */ t.jsx(
+    "div",
+    {
+      className: "proton-DataTable",
+      "data-testid": h,
+      "aria-busy": "true",
+      "aria-label": `Loading ${l}...`,
+      children: /* @__PURE__ */ t.jsxs(r, { name: l, children: [
+        /* @__PURE__ */ t.jsx(r.Header, { children: o.map((e) => /* @__PURE__ */ t.jsx(r.Column, { id: e.id, children: e.header }, e.id)) }),
+        /* @__PURE__ */ t.jsx(r.Body, { children: Array.from({ length: u }).map((e, a) => /* @__PURE__ */ t.jsx(r.Row, { children: o.map((s) => /* @__PURE__ */ t.jsx(r.Cell, { children: m || /* @__PURE__ */ t.jsx(
+          B,
+          {
+            height: "1rem",
+            width: (
+              // cascading tombstone widths
+              a % 3 === 0 ? "80%" : a % 3 === 1 ? "60%" : "90%"
+            )
+          }
+        ) }, s.id)) }, `loading-${a}`)) })
+      ] })
+    }
+  ) : !d || d.length === 0 ? /* @__PURE__ */ t.jsx(
+    f,
+    {
+      columns: o,
+      message: g,
+      name: l,
+      testId: h
+    }
+  ) : /* @__PURE__ */ t.jsx("div", { className: "proton-DataTable", "data-testid": h, children: /* @__PURE__ */ t.jsxs(r, { name: l, children: [
+    /* @__PURE__ */ t.jsx(r.Header, { children: o.map((e) => {
+      const a = v.includes(e.id), s = _(e.id);
+      return /* @__PURE__ */ t.jsx(
+        r.Column,
+        {
+          id: e.id,
+          ...a && { "aria-sort": s },
+          children: /* @__PURE__ */ t.jsxs("span", { className: "proton-DataTable__header-content", children: [
+            e.header,
+            a && /* @__PURE__ */ t.jsx(
+              "button",
+              {
+                className: "proton-DataTable__sort-button",
+                onClick: () => D(e),
+                "aria-label": `Sort by ${e.header}: ${s}`,
+                type: "button",
+                children: /* @__PURE__ */ t.jsx(
+                  R,
+                  {
+                    id: "chevron-up",
+                    size: 12,
+                    color: s === "ascending" ? "var(--proton-color__primary)" : "currentColor"
+                  }
+                )
+              }
+            )
+          ] })
+        },
+        e.id
+      );
+    }) }),
+    /* @__PURE__ */ t.jsx(r.Body, { children: d.map((e, a) => {
+      const s = ((e == null ? void 0 : e.id) || (e == null ? void 0 : e.key)) ?? a;
+      return /* @__PURE__ */ t.jsx(
+        r.Row,
+        {
+          onClick: x ? () => x(e) : void 0,
+          children: o.map((y) => /* @__PURE__ */ t.jsx(r.Cell, { children: y.cell(e) }, y.id))
+        },
+        s
+      );
+    }) })
+  ] }) });
+}
+const f = ({
+  columns: i,
+  message: c,
+  name: d,
+  testId: j,
+  isError: m = !1
+}) => /* @__PURE__ */ t.jsx("div", { className: "proton-DataTable", "data-testid": j, children: /* @__PURE__ */ t.jsxs(r, { name: d, children: [
+  /* @__PURE__ */ t.jsx(r.Header, { children: i == null ? void 0 : i.map((n) => /* @__PURE__ */ t.jsx(r.Column, { id: n.id, children: n.header }, n.id)) }),
+  /* @__PURE__ */ t.jsx(r.Body, { children: /* @__PURE__ */ t.jsx(r.Row, { children: /* @__PURE__ */ t.jsx(r.Cell, { colSpan: (i == null ? void 0 : i.length) || 1, children: /* @__PURE__ */ t.jsx(
+    "div",
+    {
+      className: "proton-DataTable__message-cell",
+      role: m ? "alert" : "status",
+      "aria-live": "polite",
+      children: /* @__PURE__ */ t.jsx(N, { children: /* @__PURE__ */ t.jsx("div", { className: "proton-DataTable__empty-cell", children: c }) })
+    }
+  ) }) }) })
+] }) });
+export {
+  z as DataTable
+};
+//# sourceMappingURL=DataTable.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DataTable.es.js","sources":["../../../src/components/DataTable/DataTable.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport { AriaAttributes, ReactNode, useMemo } from \"react\";\r\nimport { Table } from \"../Table/Table\";\r\nimport { Elevation } from \"../Elevation/Elevation\";\r\nimport { Tombstone } from \"../Tombstone/Tombstone\";\r\nimport { Icon } from \"../Icon/Icon\";\r\nimport \"./DataTable.css\";\r\n\r\nexport type SortDirection = \"ASC\" | \"DESC\";\r\n\r\ntype SortingConfig<T> =\r\n  | {\r\n      /** When sorting is enabled, all these props must be provided together. */\r\n      sortableColumns: string[];\r\n      sortedBy: string;\r\n      sortDirection: SortDirection;\r\n      onSort: (columnId: string, direction: SortDirection) => void;\r\n    }\r\n  | {\r\n      /** When no sorting is needed, none of these props should be provided */\r\n      sortableColumns?: never;\r\n      sortedBy?: never;\r\n      sortDirection?: never;\r\n      onSort?: never;\r\n    };\r\n\r\nexport interface DataTableColumn<T> {\r\n  /** id for the column */\r\n  id: string;\r\n  /** Header text or component */\r\n  header: ReactNode;\r\n  /** Function to render cell content from row data */\r\n  cell: (row: T) => ReactNode;\r\n  /** Whether this column should be hidden */\r\n  hidden?: boolean;\r\n}\r\n\r\ninterface BaseDataTableProps<T = any> {\r\n  /** Array of column definitions\r\n   * - {@link DataTableColumn}\r\n   */\r\n  columns: DataTableColumn<T>[];\r\n  /** Array of data objects to display. Can be empty array for loading/empty states */\r\n  data?: T[] | null;\r\n  /** Loading state */\r\n  loading?: boolean;\r\n  /** Tombstone component to use when loading */\r\n  tombstoneComponent?: ReactNode;\r\n  /** Error state */\r\n  error?: boolean | string;\r\n  /** Table name/caption for accessibility. This provides essential context for screen readers. */\r\n  name: string;\r\n  /** Callback when a row is clicked */\r\n  onRowClick?: (row: T) => void;\r\n  /** Custom empty state message */\r\n  emptyMessage?: string;\r\n  /** Custom error message */\r\n  errorMessage?: string;\r\n  /** Number of skeleton rows to show in loading state */\r\n  loadingRows?: number;\r\n  /** Test ID for testing purposes */\r\n  \"data-testid\"?: string;\r\n}\r\n\r\nexport type DataTableProps<T = any> = BaseDataTableProps<T> & SortingConfig<T>;\r\n\r\n/**\r\n * DataTable is a declarative wrapper around the base Table component that provides:\r\n *\r\n * API:\r\n *  - {@link DataTableProps}\r\n *  - {@link SortingConfig}\r\n */\r\nexport function DataTable<T = any>(props: DataTableProps<T>) {\r\n  const {\r\n    columns,\r\n    data = [],\r\n    loading = false,\r\n    tombstoneComponent,\r\n    error = false,\r\n    name,\r\n    onRowClick,\r\n    emptyMessage = \"Data Unavailable\",\r\n    errorMessage,\r\n    loadingRows = 5,\r\n    \"data-testid\": testId,\r\n  } = props;\r\n\r\n  const sortableColumns =\r\n    \"sortableColumns\" in props ? props.sortableColumns : [];\r\n  const sortedBy = \"sortedBy\" in props ? props.sortedBy : undefined;\r\n  const sortDirection =\r\n    \"sortDirection\" in props ? props.sortDirection : undefined;\r\n  const onSort = \"onSort\" in props ? props.onSort : undefined;\r\n\r\n  const visibleColumns = useMemo(\r\n    () => columns.filter((col) => !col.hidden),\r\n    [columns]\r\n  );\r\n\r\n  const handleSortClick = (column: DataTableColumn<T>) => {\r\n    if (!onSort) return;\r\n\r\n    const isCurrentlySorted = sortedBy === column.id;\r\n    const newDirection =\r\n      isCurrentlySorted && sortDirection === \"ASC\" ? \"DESC\" : \"ASC\";\r\n\r\n    onSort(column.id, newDirection);\r\n  };\r\n\r\n  const getSortState = (columnId: string): AriaAttributes[\"aria-sort\"] => {\r\n    if (sortedBy !== columnId) return \"none\";\r\n    return sortDirection === \"ASC\" ? \"ascending\" : \"descending\";\r\n  };\r\n\r\n  if (error) {\r\n    const message =\r\n      typeof error === \"string\" ? error : errorMessage || \"An error occurred\";\r\n    return (\r\n      <EmptyState\r\n        columns={visibleColumns}\r\n        message={message}\r\n        name={name}\r\n        testId={testId}\r\n        isError\r\n      />\r\n    );\r\n  }\r\n\r\n  if (loading) {\r\n    return (\r\n      <div\r\n        className=\"proton-DataTable\"\r\n        data-testid={testId}\r\n        aria-busy=\"true\"\r\n        aria-label={`Loading ${name}...`}\r\n      >\r\n        <Table name={name}>\r\n          <Table.Header>\r\n            {visibleColumns.map((column) => (\r\n              <Table.Column key={column.id} id={column.id}>\r\n                {column.header}\r\n              </Table.Column>\r\n            ))}\r\n          </Table.Header>\r\n          <Table.Body>\r\n            {Array.from({ length: loadingRows }).map((_, index) => (\r\n              <Table.Row key={`loading-${index}`}>\r\n                {visibleColumns.map((column) => (\r\n                  <Table.Cell key={column.id}>\r\n                    {tombstoneComponent || (\r\n                      <Tombstone\r\n                        height=\"1rem\"\r\n                        width={\r\n                          // cascading tombstone widths\r\n                          index % 3 === 0\r\n                            ? \"80%\"\r\n                            : index % 3 === 1\r\n                              ? \"60%\"\r\n                              : \"90%\"\r\n                        }\r\n                      />\r\n                    )}\r\n                  </Table.Cell>\r\n                ))}\r\n              </Table.Row>\r\n            ))}\r\n          </Table.Body>\r\n        </Table>\r\n      </div>\r\n    );\r\n  }\r\n\r\n  if (!data || data.length === 0) {\r\n    return (\r\n      <EmptyState\r\n        columns={visibleColumns}\r\n        message={emptyMessage}\r\n        name={name}\r\n        testId={testId}\r\n      />\r\n    );\r\n  }\r\n\r\n  return (\r\n    <div className=\"proton-DataTable\" data-testid={testId}>\r\n      <Table name={name}>\r\n        <Table.Header>\r\n          {visibleColumns.map((column) => {\r\n            const isSortable = sortableColumns.includes(column.id);\r\n            const sortState = getSortState(column.id);\r\n\r\n            return (\r\n              <Table.Column\r\n                key={column.id}\r\n                id={column.id}\r\n                {...(isSortable && { \"aria-sort\": sortState })}\r\n              >\r\n                <span className=\"proton-DataTable__header-content\">\r\n                  {column.header}\r\n                  {isSortable && (\r\n                    <button\r\n                      className=\"proton-DataTable__sort-button\"\r\n                      onClick={() => handleSortClick(column)}\r\n                      aria-label={`Sort by ${column.header}: ${sortState}`}\r\n                      type=\"button\"\r\n                    >\r\n                      <Icon\r\n                        id={\"chevron-up\"}\r\n                        size={12}\r\n                        color={\r\n                          sortState === \"ascending\"\r\n                            ? \"var(--proton-color__primary)\"\r\n                            : \"currentColor\"\r\n                        }\r\n                      />\r\n                    </button>\r\n                  )}\r\n                </span>\r\n              </Table.Column>\r\n            );\r\n          })}\r\n        </Table.Header>\r\n        <Table.Body>\r\n          {data.map((row, index) => {\r\n            // Generate a key from the row data or use index as fallback\r\n            const rowKey = ((row as any)?.id || (row as any)?.key) ?? index;\r\n\r\n            return (\r\n              <Table.Row\r\n                key={rowKey}\r\n                onClick={onRowClick ? () => onRowClick(row) : undefined}\r\n              >\r\n                {visibleColumns.map((column) => (\r\n                  <Table.Cell key={column.id}>{column.cell(row)}</Table.Cell>\r\n                ))}\r\n              </Table.Row>\r\n            );\r\n          })}\r\n        </Table.Body>\r\n      </Table>\r\n    </div>\r\n  );\r\n}\r\n\r\nconst EmptyState = ({\r\n  columns,\r\n  message,\r\n  name,\r\n  testId,\r\n  isError = false,\r\n}: Partial<DataTableProps> & {\r\n  testId?: string;\r\n  message: string;\r\n  isError?: boolean;\r\n}) => {\r\n  return (\r\n    <div className=\"proton-DataTable\" data-testid={testId}>\r\n      <Table name={name}>\r\n        <Table.Header>\r\n          {columns?.map((column) => (\r\n            <Table.Column key={column.id} id={column.id}>\r\n              {column.header}\r\n            </Table.Column>\r\n          ))}\r\n        </Table.Header>\r\n        <Table.Body>\r\n          <Table.Row>\r\n            <Table.Cell colSpan={columns?.length || 1}>\r\n              <div\r\n                className=\"proton-DataTable__message-cell\"\r\n                role={isError ? \"alert\" : \"status\"}\r\n                aria-live=\"polite\"\r\n              >\r\n                <Elevation>\r\n                  <div className=\"proton-DataTable__empty-cell\">{message}</div>\r\n                </Elevation>\r\n              </div>\r\n            </Table.Cell>\r\n          </Table.Row>\r\n        </Table.Body>\r\n      </Table>\r\n    </div>\r\n  );\r\n};\r\n"],"names":["DataTable","props","columns","data","loading","tombstoneComponent","error","name","onRowClick","emptyMessage","errorMessage","loadingRows","testId","sortableColumns","sortedBy","sortDirection","onSort","visibleColumns","useMemo","col","handleSortClick","column","newDirection","getSortState","columnId","message","jsx","EmptyState","jsxs","Table","_","index","Tombstone","isSortable","sortState","Icon","row","rowKey","isError","Elevation"],"mappings":"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"}

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

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

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

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

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

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

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

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

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

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

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

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

package/dist/components/Elevation/Elevation.es.js

@@ -0,0 +1,33 @@
+import { j as f } from "../../node_modules/react/jsx-runtime.es.js";
+import { transparentize as t, mix as n } from "../../node_modules/color2k/dist/index.exports.import.es.es.js";
+import { useTheme as u } from "../ThemeProvider.es.js";
+/* empty css                 */
+const E = ({
+  children: s,
+  hasPrimaryGradient: i = !1,
+  "data-testid": l
+}) => {
+  const { hasPalette: c, palette: r, style: m } = u(), e = m["--proton-control__background-color-light"];
+  let a = e, o = t(e, 0.01);
+  if (c && (a = t(e, 0.1), o = t(e, 0.12), i)) {
+    const p = t(r.PRIMARY.MEDIUM_LIGHT, 0.88), d = t(r.PRIMARY.LIGHT, 0.84);
+    a = n(a, p, 0.15), o = n(o, d, 0.15);
+  }
+  return /* @__PURE__ */ f.jsx(
+    "div",
+    {
+      className: "proton-Elevation",
+      "data-testid": l,
+      role: "presentation",
+      "aria-label": "Elevated content area",
+      style: {
+        background: `linear-gradient(to top left, ${a}, ${o})`
+      },
+      children: s
+    }
+  );
+};
+export {
+  E as Elevation
+};
+//# sourceMappingURL=Elevation.es.js.map