@apipass/design-system 1.17.0 → 1.18.0

package/dist/lib/ui/components/Breadcrumb/Breadcrumb.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("../../../vendor/clsx/dist/clsx.cjs");;/* empty css                 */const s=require("../../layout/Flex/Flex.cjs"),o=require("../../utils/AnchorOrButton.cjs");function d({items:a,className:l}){const u=a.length-1;return e.jsx("nav",{"aria-label":"Breadcrumb",className:t.clsx(l,"breadcrumb"),children:e.jsx(s.Flex,{alignSecondary:"center",gap:"100",children:a.map((r,n)=>{const c=n===u;return e.jsxs(s.Flex,{alignSecondary:"center",gap:"100",children:[c?e.jsx("span",{className:"breadcrumb-current","aria-current":"page",children:r.label}):e.jsx(o.AnchorOrButton,{...r.href?{href:r.href}:{},onPress:r.onPress,className:"breadcrumb-link",children:r.label}),!c&&e.jsx("span",{className:"breadcrumb-separator","aria-hidden":"true",children:"/"})]},`${r.label}-${n}`)})})})}exports.Breadcrumb=d;
+//# sourceMappingURL=Breadcrumb.cjs.map

package/dist/lib/ui/components/Breadcrumb/Breadcrumb.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Breadcrumb.cjs","sources":["../../../../../src/ui/components/Breadcrumb/Breadcrumb.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { Flex } from \"layout\";\nimport { AnchorOrButton } from \"utils\";\nimport \"./breadcrumb.css\";\n\nexport interface BreadcrumbItem {\n  label: string;\n  href?: string;\n  onPress?: () => void;\n}\n\nexport interface BreadcrumbProps {\n  items: BreadcrumbItem[];\n  className?: string;\n}\n\nexport function Breadcrumb({ items, className }: BreadcrumbProps) {\n  const lastIndex = items.length - 1;\n  return (\n    <nav aria-label=\"Breadcrumb\" className={clsx(className, \"breadcrumb\")}>\n      <Flex alignSecondary=\"center\" gap=\"100\">\n        {items.map((item, index) => {\n          const isCurrentPage = index === lastIndex;\n          return (\n            <Flex\n              key={`${item.label}-${index}`}\n              alignSecondary=\"center\"\n              gap=\"100\"\n            >\n              {isCurrentPage ? (\n                <span className=\"breadcrumb-current\" aria-current=\"page\">\n                  {item.label}\n                </span>\n              ) : (\n                <AnchorOrButton\n                  {...(item.href ? { href: item.href } : {})}\n                  onPress={item.onPress}\n                  className=\"breadcrumb-link\"\n                >\n                  {item.label}\n                </AnchorOrButton>\n              )}\n              {!isCurrentPage && (\n                <span className=\"breadcrumb-separator\" aria-hidden=\"true\">\n                  /\n                </span>\n              )}\n            </Flex>\n          );\n        })}\n      </Flex>\n    </nav>\n  );\n}\n"],"names":["Breadcrumb","items","className","lastIndex","clsx","Flex","item","index","isCurrentPage","jsxs","jsx","AnchorOrButton"],"mappings":"+RAgBO,SAASA,EAAW,CAAE,MAAAC,EAAO,UAAAC,GAA8B,CAChE,MAAMC,EAAYF,EAAM,OAAS,EACjC,aACG,MAAA,CAAI,aAAW,aAAa,UAAWG,EAAAA,KAAKF,EAAW,YAAY,EAClE,eAACG,EAAAA,KAAA,CAAK,eAAe,SAAS,IAAI,MAC/B,WAAM,IAAI,CAACC,EAAMC,IAAU,CAC1B,MAAMC,EAAgBD,IAAUJ,EAChC,OACEM,EAAAA,KAACJ,EAAAA,KAAA,CAEC,eAAe,SACf,IAAI,MAEH,SAAA,CAAAG,EACCE,EAAAA,IAAC,QAAK,UAAU,qBAAqB,eAAa,OAC/C,SAAAJ,EAAK,MACR,EAEAI,EAAAA,IAACC,EAAAA,eAAA,CACE,GAAIL,EAAK,KAAO,CAAE,KAAMA,EAAK,IAAA,EAAS,CAAA,EACvC,QAASA,EAAK,QACd,UAAU,kBAET,SAAAA,EAAK,KAAA,CAAA,EAGT,CAACE,GACAE,MAAC,OAAA,CAAK,UAAU,uBAAuB,cAAY,OAAO,SAAA,GAAA,CAE1D,CAAA,CAAA,EApBG,GAAGJ,EAAK,KAAK,IAAIC,CAAK,EAAA,CAwBjC,CAAC,EACH,EACF,CAEJ"}

package/dist/lib/ui/components/Breadcrumb/Breadcrumb.js

@@ -0,0 +1,35 @@
+import { jsx as a, jsxs as d } from "react/jsx-runtime";
+import { clsx as t } from "../../../vendor/clsx/dist/clsx.js";
+/* empty css               */
+import { Flex as l } from "../../layout/Flex/Flex.js";
+import { AnchorOrButton as b } from "../../utils/AnchorOrButton.js";
+function f({ items: e, className: s }) {
+  const o = e.length - 1;
+  return /* @__PURE__ */ a("nav", { "aria-label": "Breadcrumb", className: t(s, "breadcrumb"), children: /* @__PURE__ */ a(l, { alignSecondary: "center", gap: "100", children: e.map((r, n) => {
+    const c = n === o;
+    return /* @__PURE__ */ d(
+      l,
+      {
+        alignSecondary: "center",
+        gap: "100",
+        children: [
+          c ? /* @__PURE__ */ a("span", { className: "breadcrumb-current", "aria-current": "page", children: r.label }) : /* @__PURE__ */ a(
+            b,
+            {
+              ...r.href ? { href: r.href } : {},
+              onPress: r.onPress,
+              className: "breadcrumb-link",
+              children: r.label
+            }
+          ),
+          !c && /* @__PURE__ */ a("span", { className: "breadcrumb-separator", "aria-hidden": "true", children: "/" })
+        ]
+      },
+      `${r.label}-${n}`
+    );
+  }) }) });
+}
+export {
+  f as Breadcrumb
+};
+//# sourceMappingURL=Breadcrumb.js.map

package/dist/lib/ui/components/Breadcrumb/Breadcrumb.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Breadcrumb.js","sources":["../../../../../src/ui/components/Breadcrumb/Breadcrumb.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { Flex } from \"layout\";\nimport { AnchorOrButton } from \"utils\";\nimport \"./breadcrumb.css\";\n\nexport interface BreadcrumbItem {\n  label: string;\n  href?: string;\n  onPress?: () => void;\n}\n\nexport interface BreadcrumbProps {\n  items: BreadcrumbItem[];\n  className?: string;\n}\n\nexport function Breadcrumb({ items, className }: BreadcrumbProps) {\n  const lastIndex = items.length - 1;\n  return (\n    <nav aria-label=\"Breadcrumb\" className={clsx(className, \"breadcrumb\")}>\n      <Flex alignSecondary=\"center\" gap=\"100\">\n        {items.map((item, index) => {\n          const isCurrentPage = index === lastIndex;\n          return (\n            <Flex\n              key={`${item.label}-${index}`}\n              alignSecondary=\"center\"\n              gap=\"100\"\n            >\n              {isCurrentPage ? (\n                <span className=\"breadcrumb-current\" aria-current=\"page\">\n                  {item.label}\n                </span>\n              ) : (\n                <AnchorOrButton\n                  {...(item.href ? { href: item.href } : {})}\n                  onPress={item.onPress}\n                  className=\"breadcrumb-link\"\n                >\n                  {item.label}\n                </AnchorOrButton>\n              )}\n              {!isCurrentPage && (\n                <span className=\"breadcrumb-separator\" aria-hidden=\"true\">\n                  /\n                </span>\n              )}\n            </Flex>\n          );\n        })}\n      </Flex>\n    </nav>\n  );\n}\n"],"names":["Breadcrumb","items","className","lastIndex","clsx","Flex","item","index","isCurrentPage","jsxs","jsx","AnchorOrButton"],"mappings":";;;;;AAgBO,SAASA,EAAW,EAAE,OAAAC,GAAO,WAAAC,KAA8B;AAChE,QAAMC,IAAYF,EAAM,SAAS;AACjC,2BACG,OAAA,EAAI,cAAW,cAAa,WAAWG,EAAKF,GAAW,YAAY,GAClE,4BAACG,GAAA,EAAK,gBAAe,UAAS,KAAI,OAC/B,YAAM,IAAI,CAACC,GAAMC,MAAU;AAC1B,UAAMC,IAAgBD,MAAUJ;AAChC,WACE,gBAAAM;AAAA,MAACJ;AAAA,MAAA;AAAA,QAEC,gBAAe;AAAA,QACf,KAAI;AAAA,QAEH,UAAA;AAAA,UAAAG,IACC,gBAAAE,EAAC,UAAK,WAAU,sBAAqB,gBAAa,QAC/C,UAAAJ,EAAK,OACR,IAEA,gBAAAI;AAAA,YAACC;AAAA,YAAA;AAAA,cACE,GAAIL,EAAK,OAAO,EAAE,MAAMA,EAAK,KAAA,IAAS,CAAA;AAAA,cACvC,SAASA,EAAK;AAAA,cACd,WAAU;AAAA,cAET,UAAAA,EAAK;AAAA,YAAA;AAAA,UAAA;AAAA,UAGT,CAACE,KACA,gBAAAE,EAAC,QAAA,EAAK,WAAU,wBAAuB,eAAY,QAAO,UAAA,IAAA,CAE1D;AAAA,QAAA;AAAA,MAAA;AAAA,MApBG,GAAGJ,EAAK,KAAK,IAAIC,CAAK;AAAA,IAAA;AAAA,EAwBjC,CAAC,GACH,GACF;AAEJ;"}

package/dist/lib/ui/components/Card/Card.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),n=require("../../../vendor/clsx/dist/clsx.cjs");;/* empty css           */function l({title:r,headerIcon:s,children:a,bodyPadding:i="24px",className:c,style:d}){return e.jsxs("div",{className:n.clsx("info-card",c),style:d,children:[e.jsxs("div",{className:"info-card-header",children:[e.jsx("span",{className:"info-card-header-title",children:r}),s&&e.jsx("span",{className:"info-card-header-icon",children:s})]}),e.jsx("div",{className:"info-card-body",style:{padding:i},children:a})]})}exports.Card=l;
+//# sourceMappingURL=Card.cjs.map

package/dist/lib/ui/components/Card/Card.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card.cjs","sources":["../../../../../src/ui/components/Card/Card.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { type CSSProperties, type ReactNode } from \"react\";\nimport \"./card.css\";\n\nexport interface CardProps {\n  title: string;\n  headerIcon?: ReactNode;\n  children: ReactNode;\n  bodyPadding?: string | number;\n  className?: string;\n  style?: CSSProperties;\n}\n\nexport function Card({ title, headerIcon, children, bodyPadding = \"24px\", className, style }: CardProps) {\n  return (\n    <div className={clsx(\"info-card\", className)} style={style}>\n      <div className=\"info-card-header\">\n        <span className=\"info-card-header-title\">{title}</span>\n        {headerIcon && <span className=\"info-card-header-icon\">{headerIcon}</span>}\n      </div>\n      <div className=\"info-card-body\" style={{ padding: bodyPadding }}>\n        {children}\n      </div>\n    </div>\n  );\n}\n"],"names":["Card","title","headerIcon","children","bodyPadding","className","style","clsx","jsxs","jsx"],"mappings":"+LAaO,SAASA,EAAK,CAAE,MAAAC,EAAO,WAAAC,EAAY,SAAAC,EAAU,YAAAC,EAAc,OAAQ,UAAAC,EAAW,MAAAC,GAAoB,CACvG,cACG,MAAA,CAAI,UAAWC,EAAAA,KAAK,YAAaF,CAAS,EAAG,MAAAC,EAC5C,SAAA,CAAAE,EAAAA,KAAC,MAAA,CAAI,UAAU,mBACb,SAAA,CAAAC,EAAAA,IAAC,OAAA,CAAK,UAAU,yBAA0B,SAAAR,EAAM,EAC/CC,GAAcO,EAAAA,IAAC,OAAA,CAAK,UAAU,wBAAyB,SAAAP,CAAA,CAAW,CAAA,EACrE,EACAO,MAAC,OAAI,UAAU,iBAAiB,MAAO,CAAE,QAASL,CAAA,EAC/C,SAAAD,CAAA,CACH,CAAA,EACF,CAEJ"}

package/dist/lib/ui/components/Card/Card.js

@@ -0,0 +1,16 @@
+import { jsxs as i, jsx as a } from "react/jsx-runtime";
+import { clsx as o } from "../../../vendor/clsx/dist/clsx.js";
+/* empty css         */
+function f({ title: d, headerIcon: r, children: e, bodyPadding: s = "24px", className: c, style: n }) {
+  return /* @__PURE__ */ i("div", { className: o("info-card", c), style: n, children: [
+    /* @__PURE__ */ i("div", { className: "info-card-header", children: [
+      /* @__PURE__ */ a("span", { className: "info-card-header-title", children: d }),
+      r && /* @__PURE__ */ a("span", { className: "info-card-header-icon", children: r })
+    ] }),
+    /* @__PURE__ */ a("div", { className: "info-card-body", style: { padding: s }, children: e })
+  ] });
+}
+export {
+  f as Card
+};
+//# sourceMappingURL=Card.js.map

package/dist/lib/ui/components/Card/Card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card.js","sources":["../../../../../src/ui/components/Card/Card.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { type CSSProperties, type ReactNode } from \"react\";\nimport \"./card.css\";\n\nexport interface CardProps {\n  title: string;\n  headerIcon?: ReactNode;\n  children: ReactNode;\n  bodyPadding?: string | number;\n  className?: string;\n  style?: CSSProperties;\n}\n\nexport function Card({ title, headerIcon, children, bodyPadding = \"24px\", className, style }: CardProps) {\n  return (\n    <div className={clsx(\"info-card\", className)} style={style}>\n      <div className=\"info-card-header\">\n        <span className=\"info-card-header-title\">{title}</span>\n        {headerIcon && <span className=\"info-card-header-icon\">{headerIcon}</span>}\n      </div>\n      <div className=\"info-card-body\" style={{ padding: bodyPadding }}>\n        {children}\n      </div>\n    </div>\n  );\n}\n"],"names":["Card","title","headerIcon","children","bodyPadding","className","style","clsx","jsxs","jsx"],"mappings":";;;AAaO,SAASA,EAAK,EAAE,OAAAC,GAAO,YAAAC,GAAY,UAAAC,GAAU,aAAAC,IAAc,QAAQ,WAAAC,GAAW,OAAAC,KAAoB;AACvG,2BACG,OAAA,EAAI,WAAWC,EAAK,aAAaF,CAAS,GAAG,OAAAC,GAC5C,UAAA;AAAA,IAAA,gBAAAE,EAAC,OAAA,EAAI,WAAU,oBACb,UAAA;AAAA,MAAA,gBAAAC,EAAC,QAAA,EAAK,WAAU,0BAA0B,UAAAR,GAAM;AAAA,MAC/CC,KAAc,gBAAAO,EAAC,QAAA,EAAK,WAAU,yBAAyB,UAAAP,EAAA,CAAW;AAAA,IAAA,GACrE;AAAA,IACA,gBAAAO,EAAC,SAAI,WAAU,kBAAiB,OAAO,EAAE,SAASL,EAAA,GAC/C,UAAAD,EAAA,CACH;AAAA,EAAA,GACF;AAEJ;"}

package/dist/lib/ui/components/ConfirmDialog/ConfirmDialog.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),C=require("react");;/* empty css                    */const n=require("../../primitives/Dialog/Dialog.cjs"),q=require("../../primitives/Input/Input.cjs"),x=require("../../layout/Flex/Flex.cjs"),o=require("../../primitives/Button/Button.cjs");function P({isOpen:a,title:h,message:c,confirmValue:i,confirmValueLabel:j,confirmLabel:u="Confirm",cancelLabel:f="Cancel",isDanger:m=!1,isLoading:r=!1,onConfirm:D,onClose:y}){const[d,t]=C.useState(""),s=i?d===i:!0;function l(){t(""),y()}function g(){s&&(t(""),D())}return a?e.jsx(n.DialogModal,{isOpen:a,onOpenChange:p=>!p&&l(),children:e.jsxs(n.Dialog,{children:[e.jsxs(x.Flex,{direction:"row",alignPrimary:"space-between",alignSecondary:"center",children:[e.jsx(n.DialogTitle,{children:h}),e.jsx(n.DialogClose,{onPress:l})]}),e.jsxs(n.DialogBody,{children:[c&&e.jsx("p",{className:"confirm-dialog-message",dangerouslySetInnerHTML:{__html:c}}),i&&e.jsx(q.InputField,{label:j,value:d,onChange:t,isRequired:!0})]}),e.jsxs(x.Flex,{direction:"row",gap:"200",alignPrimary:"end",className:"confirm-dialog-footer",children:[e.jsx(o.Button,{variant:"neutral",onPress:l,isDisabled:r,children:f}),m?e.jsx(o.ButtonDanger,{variant:"danger-primary",onPress:g,isDisabled:!s||r,children:r?"...":u}):e.jsx(o.Button,{variant:"primary",onPress:g,isDisabled:!s||r,children:r?"...":u})]})]})}):null}exports.ConfirmDialog=P;
+//# sourceMappingURL=ConfirmDialog.cjs.map

package/dist/lib/ui/components/ConfirmDialog/ConfirmDialog.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConfirmDialog.cjs","sources":["../../../../../src/ui/components/ConfirmDialog/ConfirmDialog.tsx"],"sourcesContent":["import {\n  Button,\n  ButtonDanger,\n  Dialog,\n  DialogBody,\n  DialogClose,\n  DialogModal,\n  DialogTitle,\n  InputField,\n} from \"primitives\";\nimport { Flex } from \"layout\";\nimport { useState } from \"react\";\nimport \"./confirmdialog.css\";\n\nexport interface ConfirmDialogProps {\n  isOpen: boolean;\n  title: string;\n  message?: string;\n  /** If set, user must type this value to enable the confirm button */\n  confirmValue?: string;\n  confirmValueLabel?: string;\n  confirmLabel?: string;\n  cancelLabel?: string;\n  isDanger?: boolean;\n  isLoading?: boolean;\n  onConfirm: () => void;\n  onClose: () => void;\n}\n\nexport function ConfirmDialog({\n  isOpen,\n  title,\n  message,\n  confirmValue,\n  confirmValueLabel,\n  confirmLabel = \"Confirm\",\n  cancelLabel = \"Cancel\",\n  isDanger = false,\n  isLoading = false,\n  onConfirm,\n  onClose,\n}: ConfirmDialogProps) {\n  const [typed, setTyped] = useState(\"\");\n\n  const canConfirm = confirmValue ? typed === confirmValue : true;\n\n  function handleClose() {\n    setTyped(\"\");\n    onClose();\n  }\n\n  function handleConfirm() {\n    if (!canConfirm) return;\n    setTyped(\"\");\n    onConfirm();\n  }\n\n  if (!isOpen) return null;\n\n  return (\n    <DialogModal isOpen={isOpen} onOpenChange={(open) => !open && handleClose()}>\n      <Dialog>\n        <Flex direction=\"row\" alignPrimary=\"space-between\" alignSecondary=\"center\">\n          <DialogTitle>{title}</DialogTitle>\n          <DialogClose onPress={handleClose} />\n        </Flex>\n        <DialogBody>\n          {message && (\n            <p\n              className=\"confirm-dialog-message\"\n              dangerouslySetInnerHTML={{ __html: message }}\n            />\n          )}\n          {confirmValue && (\n            <InputField\n              label={confirmValueLabel}\n              value={typed}\n              onChange={setTyped}\n              isRequired\n            />\n          )}\n        </DialogBody>\n        <Flex\n          direction=\"row\"\n          gap=\"200\"\n          alignPrimary=\"end\"\n          className=\"confirm-dialog-footer\"\n        >\n          <Button variant=\"neutral\" onPress={handleClose} isDisabled={isLoading}>\n            {cancelLabel}\n          </Button>\n          {isDanger ? (\n            <ButtonDanger\n              variant=\"danger-primary\"\n              onPress={handleConfirm}\n              isDisabled={!canConfirm || isLoading}\n            >\n              {isLoading ? \"...\" : confirmLabel}\n            </ButtonDanger>\n          ) : (\n            <Button\n              variant=\"primary\"\n              onPress={handleConfirm}\n              isDisabled={!canConfirm || isLoading}\n            >\n              {isLoading ? \"...\" : confirmLabel}\n            </Button>\n          )}\n        </Flex>\n      </Dialog>\n    </DialogModal>\n  );\n}\n"],"names":["ConfirmDialog","isOpen","title","message","confirmValue","confirmValueLabel","confirmLabel","cancelLabel","isDanger","isLoading","onConfirm","onClose","typed","setTyped","useState","canConfirm","handleClose","handleConfirm","jsx","DialogModal","open","jsxs","Dialog","Flex","DialogTitle","DialogClose","DialogBody","InputField","Button","ButtonDanger"],"mappings":"uWA6BO,SAASA,EAAc,CAC5B,OAAAC,EACA,MAAAC,EACA,QAAAC,EACA,aAAAC,EACA,kBAAAC,EACA,aAAAC,EAAe,UACf,YAAAC,EAAc,SACd,SAAAC,EAAW,GACX,UAAAC,EAAY,GACZ,UAAAC,EACA,QAAAC,CACF,EAAuB,CACrB,KAAM,CAACC,EAAOC,CAAQ,EAAIC,EAAAA,SAAS,EAAE,EAE/BC,EAAaX,EAAeQ,IAAUR,EAAe,GAE3D,SAASY,GAAc,CACrBH,EAAS,EAAE,EACXF,EAAA,CACF,CAEA,SAASM,GAAgB,CAClBF,IACLF,EAAS,EAAE,EACXH,EAAA,EACF,CAEA,OAAKT,EAGHiB,EAAAA,IAACC,EAAAA,YAAA,CAAY,OAAAlB,EAAgB,aAAemB,GAAS,CAACA,GAAQJ,EAAA,EAC5D,SAAAK,EAAAA,KAACC,EAAAA,OAAA,CACC,SAAA,CAAAD,OAACE,EAAAA,MAAK,UAAU,MAAM,aAAa,gBAAgB,eAAe,SAChE,SAAA,CAAAL,EAAAA,IAACM,EAAAA,aAAa,SAAAtB,CAAA,CAAM,EACpBgB,EAAAA,IAACO,EAAAA,YAAA,CAAY,QAAST,CAAA,CAAa,CAAA,EACrC,SACCU,EAAAA,WAAA,CACE,SAAA,CAAAvB,GACCe,EAAAA,IAAC,IAAA,CACC,UAAU,yBACV,wBAAyB,CAAE,OAAQf,CAAA,CAAQ,CAAA,EAG9CC,GACCc,EAAAA,IAACS,EAAAA,WAAA,CACC,MAAOtB,EACP,MAAOO,EACP,SAAUC,EACV,WAAU,EAAA,CAAA,CACZ,EAEJ,EACAQ,EAAAA,KAACE,EAAAA,KAAA,CACC,UAAU,MACV,IAAI,MACJ,aAAa,MACb,UAAU,wBAEV,SAAA,CAAAL,EAAAA,IAACU,EAAAA,QAAO,QAAQ,UAAU,QAASZ,EAAa,WAAYP,EACzD,SAAAF,CAAA,CACH,EACCC,EACCU,EAAAA,IAACW,EAAAA,aAAA,CACC,QAAQ,iBACR,QAASZ,EACT,WAAY,CAACF,GAAcN,EAE1B,WAAY,MAAQH,CAAA,CAAA,EAGvBY,EAAAA,IAACU,EAAAA,OAAA,CACC,QAAQ,UACR,QAASX,EACT,WAAY,CAACF,GAAcN,EAE1B,WAAY,MAAQH,CAAA,CAAA,CACvB,CAAA,CAAA,CAEJ,CAAA,CACF,CAAA,CACF,EArDkB,IAuDtB"}

package/dist/lib/ui/components/ConfirmDialog/ConfirmDialog.js

@@ -0,0 +1,85 @@
+import { jsx as r, jsxs as n } from "react/jsx-runtime";
+import { useState as b } from "react";
+/* empty css                  */
+import { DialogModal as v, Dialog as x, DialogTitle as w, DialogClose as B, DialogBody as S } from "../../primitives/Dialog/Dialog.js";
+import { InputField as T } from "../../primitives/Input/Input.js";
+import { Flex as f } from "../../layout/Flex/Flex.js";
+import { Button as p, ButtonDanger as j } from "../../primitives/Button/Button.js";
+function R({
+  isOpen: t,
+  title: u,
+  message: s,
+  confirmValue: i,
+  confirmValueLabel: h,
+  confirmLabel: d = "Confirm",
+  cancelLabel: g = "Cancel",
+  isDanger: D = !1,
+  isLoading: e = !1,
+  onConfirm: y,
+  onClose: C
+}) {
+  const [m, o] = b(""), l = i ? m === i : !0;
+  function a() {
+    o(""), C();
+  }
+  function c() {
+    l && (o(""), y());
+  }
+  return t ? /* @__PURE__ */ r(v, { isOpen: t, onOpenChange: (P) => !P && a(), children: /* @__PURE__ */ n(x, { children: [
+    /* @__PURE__ */ n(f, { direction: "row", alignPrimary: "space-between", alignSecondary: "center", children: [
+      /* @__PURE__ */ r(w, { children: u }),
+      /* @__PURE__ */ r(B, { onPress: a })
+    ] }),
+    /* @__PURE__ */ n(S, { children: [
+      s && /* @__PURE__ */ r(
+        "p",
+        {
+          className: "confirm-dialog-message",
+          dangerouslySetInnerHTML: { __html: s }
+        }
+      ),
+      i && /* @__PURE__ */ r(
+        T,
+        {
+          label: h,
+          value: m,
+          onChange: o,
+          isRequired: !0
+        }
+      )
+    ] }),
+    /* @__PURE__ */ n(
+      f,
+      {
+        direction: "row",
+        gap: "200",
+        alignPrimary: "end",
+        className: "confirm-dialog-footer",
+        children: [
+          /* @__PURE__ */ r(p, { variant: "neutral", onPress: a, isDisabled: e, children: g }),
+          D ? /* @__PURE__ */ r(
+            j,
+            {
+              variant: "danger-primary",
+              onPress: c,
+              isDisabled: !l || e,
+              children: e ? "..." : d
+            }
+          ) : /* @__PURE__ */ r(
+            p,
+            {
+              variant: "primary",
+              onPress: c,
+              isDisabled: !l || e,
+              children: e ? "..." : d
+            }
+          )
+        ]
+      }
+    )
+  ] }) }) : null;
+}
+export {
+  R as ConfirmDialog
+};
+//# sourceMappingURL=ConfirmDialog.js.map

package/dist/lib/ui/components/ConfirmDialog/ConfirmDialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConfirmDialog.js","sources":["../../../../../src/ui/components/ConfirmDialog/ConfirmDialog.tsx"],"sourcesContent":["import {\n  Button,\n  ButtonDanger,\n  Dialog,\n  DialogBody,\n  DialogClose,\n  DialogModal,\n  DialogTitle,\n  InputField,\n} from \"primitives\";\nimport { Flex } from \"layout\";\nimport { useState } from \"react\";\nimport \"./confirmdialog.css\";\n\nexport interface ConfirmDialogProps {\n  isOpen: boolean;\n  title: string;\n  message?: string;\n  /** If set, user must type this value to enable the confirm button */\n  confirmValue?: string;\n  confirmValueLabel?: string;\n  confirmLabel?: string;\n  cancelLabel?: string;\n  isDanger?: boolean;\n  isLoading?: boolean;\n  onConfirm: () => void;\n  onClose: () => void;\n}\n\nexport function ConfirmDialog({\n  isOpen,\n  title,\n  message,\n  confirmValue,\n  confirmValueLabel,\n  confirmLabel = \"Confirm\",\n  cancelLabel = \"Cancel\",\n  isDanger = false,\n  isLoading = false,\n  onConfirm,\n  onClose,\n}: ConfirmDialogProps) {\n  const [typed, setTyped] = useState(\"\");\n\n  const canConfirm = confirmValue ? typed === confirmValue : true;\n\n  function handleClose() {\n    setTyped(\"\");\n    onClose();\n  }\n\n  function handleConfirm() {\n    if (!canConfirm) return;\n    setTyped(\"\");\n    onConfirm();\n  }\n\n  if (!isOpen) return null;\n\n  return (\n    <DialogModal isOpen={isOpen} onOpenChange={(open) => !open && handleClose()}>\n      <Dialog>\n        <Flex direction=\"row\" alignPrimary=\"space-between\" alignSecondary=\"center\">\n          <DialogTitle>{title}</DialogTitle>\n          <DialogClose onPress={handleClose} />\n        </Flex>\n        <DialogBody>\n          {message && (\n            <p\n              className=\"confirm-dialog-message\"\n              dangerouslySetInnerHTML={{ __html: message }}\n            />\n          )}\n          {confirmValue && (\n            <InputField\n              label={confirmValueLabel}\n              value={typed}\n              onChange={setTyped}\n              isRequired\n            />\n          )}\n        </DialogBody>\n        <Flex\n          direction=\"row\"\n          gap=\"200\"\n          alignPrimary=\"end\"\n          className=\"confirm-dialog-footer\"\n        >\n          <Button variant=\"neutral\" onPress={handleClose} isDisabled={isLoading}>\n            {cancelLabel}\n          </Button>\n          {isDanger ? (\n            <ButtonDanger\n              variant=\"danger-primary\"\n              onPress={handleConfirm}\n              isDisabled={!canConfirm || isLoading}\n            >\n              {isLoading ? \"...\" : confirmLabel}\n            </ButtonDanger>\n          ) : (\n            <Button\n              variant=\"primary\"\n              onPress={handleConfirm}\n              isDisabled={!canConfirm || isLoading}\n            >\n              {isLoading ? \"...\" : confirmLabel}\n            </Button>\n          )}\n        </Flex>\n      </Dialog>\n    </DialogModal>\n  );\n}\n"],"names":["ConfirmDialog","isOpen","title","message","confirmValue","confirmValueLabel","confirmLabel","cancelLabel","isDanger","isLoading","onConfirm","onClose","typed","setTyped","useState","canConfirm","handleClose","handleConfirm","jsx","DialogModal","open","jsxs","Dialog","Flex","DialogTitle","DialogClose","DialogBody","InputField","Button","ButtonDanger"],"mappings":";;;;;;;AA6BO,SAASA,EAAc;AAAA,EAC5B,QAAAC;AAAA,EACA,OAAAC;AAAA,EACA,SAAAC;AAAA,EACA,cAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,cAAAC,IAAe;AAAA,EACf,aAAAC,IAAc;AAAA,EACd,UAAAC,IAAW;AAAA,EACX,WAAAC,IAAY;AAAA,EACZ,WAAAC;AAAA,EACA,SAAAC;AACF,GAAuB;AACrB,QAAM,CAACC,GAAOC,CAAQ,IAAIC,EAAS,EAAE,GAE/BC,IAAaX,IAAeQ,MAAUR,IAAe;AAE3D,WAASY,IAAc;AACrB,IAAAH,EAAS,EAAE,GACXF,EAAA;AAAA,EACF;AAEA,WAASM,IAAgB;AACvB,IAAKF,MACLF,EAAS,EAAE,GACXH,EAAA;AAAA,EACF;AAEA,SAAKT,IAGH,gBAAAiB,EAACC,GAAA,EAAY,QAAAlB,GAAgB,cAAc,CAACmB,MAAS,CAACA,KAAQJ,EAAA,GAC5D,UAAA,gBAAAK,EAACC,GAAA,EACC,UAAA;AAAA,IAAA,gBAAAD,EAACE,KAAK,WAAU,OAAM,cAAa,iBAAgB,gBAAe,UAChE,UAAA;AAAA,MAAA,gBAAAL,EAACM,KAAa,UAAAtB,EAAA,CAAM;AAAA,MACpB,gBAAAgB,EAACO,GAAA,EAAY,SAAST,EAAA,CAAa;AAAA,IAAA,GACrC;AAAA,sBACCU,GAAA,EACE,UAAA;AAAA,MAAAvB,KACC,gBAAAe;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,yBAAyB,EAAE,QAAQf,EAAA;AAAA,QAAQ;AAAA,MAAA;AAAA,MAG9CC,KACC,gBAAAc;AAAA,QAACS;AAAA,QAAA;AAAA,UACC,OAAOtB;AAAA,UACP,OAAOO;AAAA,UACP,UAAUC;AAAA,UACV,YAAU;AAAA,QAAA;AAAA,MAAA;AAAA,IACZ,GAEJ;AAAA,IACA,gBAAAQ;AAAA,MAACE;AAAA,MAAA;AAAA,QACC,WAAU;AAAA,QACV,KAAI;AAAA,QACJ,cAAa;AAAA,QACb,WAAU;AAAA,QAEV,UAAA;AAAA,UAAA,gBAAAL,EAACU,KAAO,SAAQ,WAAU,SAASZ,GAAa,YAAYP,GACzD,UAAAF,EAAA,CACH;AAAA,UACCC,IACC,gBAAAU;AAAA,YAACW;AAAA,YAAA;AAAA,cACC,SAAQ;AAAA,cACR,SAASZ;AAAA,cACT,YAAY,CAACF,KAAcN;AAAA,cAE1B,cAAY,QAAQH;AAAA,YAAA;AAAA,UAAA,IAGvB,gBAAAY;AAAA,YAACU;AAAA,YAAA;AAAA,cACC,SAAQ;AAAA,cACR,SAASX;AAAA,cACT,YAAY,CAACF,KAAcN;AAAA,cAE1B,cAAY,QAAQH;AAAA,YAAA;AAAA,UAAA;AAAA,QACvB;AAAA,MAAA;AAAA,IAAA;AAAA,EAEJ,EAAA,CACF,EAAA,CACF,IArDkB;AAuDtB;"}

package/dist/lib/ui/components/DataTable/DataTable.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),g=require("react");;/* empty css                */const X=require("../../primitives/Search/Search.cjs"),i=require("../../primitives/Table/Table.cjs"),Y=require("../../icons/IconChevronDown.cjs"),Z=require("../../icons/IconChevronRight.cjs"),K=require("../../primitives/PermissionGate/PermissionGate.cjs"),ee=require("../../icons/IconArrowLeft.cjs"),ae=require("../../icons/IconArrowRight.cjs"),se=require("../../layout/Flex/Flex.cjs");function te(s,l){if(l<=6)return Array.from({length:l},(h,u)=>u+1);const n=[1,2,3],r=[l-1,l];return s<=4?[...n,"...",...r]:s>=l-3?[1,2,"...",l-2,l-1,l]:[1,"...",s-1,s,s+1,"...",l]}function le({currentPage:s,totalPages:l,onPageChange:n,previousLabel:r,nextLabel:h}){const u=te(s,l);return e.jsxs("div",{className:"data-table-pagination",children:[e.jsxs("button",{onClick:()=>n(Math.max(1,s-1)),disabled:s===1,className:"data-table-page-btn data-table-page-nav","aria-label":r,children:[e.jsx(ee.IconArrowLeft,{size:"16"}),r]}),e.jsx("div",{className:"data-table-page-numbers",children:u.map((o,f)=>o==="..."?e.jsx("span",{className:"data-table-page-ellipsis",children:"..."},`ellipsis-${f}`):e.jsx("button",{onClick:()=>n(o),className:`data-table-page-btn${o===s?" data-table-page-btn-active":""}`,children:o},o))}),e.jsxs("button",{onClick:()=>n(Math.min(l,s+1)),disabled:s===l,className:"data-table-page-btn data-table-page-nav","aria-label":h,children:[h,e.jsx(ae.IconArrowRight,{size:"16"})]})]})}function ne({action:s,item:l}){const n=s.isAllowed!==!1,r=e.jsx("button",{className:"data-table-row-action-btn","aria-label":s.label,disabled:!n,onClick:n?()=>s.onPress(l):void 0,children:s.icon});return n?r:e.jsx(K.PermissionGate,{isAllowed:!1,noAccessLabel:s.noAccessLabel??"",children:r})}function L({columns:s,data:l,actions:n,rowActions:r,rowActionsLabel:h="",searchPlaceholder:u="Search...",searchKeys:o=[],isLoading:f=!1,loadingMessage:M="Loading...",emptyMessage:$="No records found",previousLabel:A="Previous",nextLabel:D="Next",pageSize:j=10,nestedColumns:q,getNestedData:y,nestedLoadingMessage:P="Loading...",nestedEmptyMessage:B="No records found",nestedSearchKeys:E,nestedSearchPlaceholder:z,nestedActions:m,nestedPageSize:F}){const[w,G]=g.useState(""),[H,R]=g.useState(1),[O,Q]=g.useState(new Set),[k,N]=g.useState(new Map),I=!!y&&!!q,C=!!r;function _(a){const t=a.id;Q(c=>{const b=new Set(c);if(b.has(t))b.delete(t);else if(b.add(t),!k.has(t)){const d=y(a);d instanceof Promise?(N(x=>new Map(x).set(t,{status:"loading",data:[]})),d.then(x=>{N(W=>new Map(W).set(t,{status:"loaded",data:x}))})):N(x=>new Map(x).set(t,{status:"loaded",data:d}))}return b})}const p=o.length>0,J=p||!!n,v=g.useMemo(()=>{if(!w.trim()||!p)return l;const a=w.toLowerCase();return l.filter(t=>o.some(c=>String(t[c]??"").toLowerCase().includes(a)))},[l,w,o,p]),T=Math.max(1,Math.ceil(v.length/j)),S=Math.min(H,T),U=v.slice((S-1)*j,S*j);function V(a,t){return t.render?t.render(a):String(a[t.key]??"")}return e.jsxs(se.Flex,{direction:"column",gap:"300",className:"data-table",children:[J&&e.jsxs("div",{className:"data-table-toolbar",children:[p&&e.jsx(X.Search,{placeholder:u,onSearch:a=>{G(a),R(1)},className:"data-table-search"}),n&&e.jsx("div",{className:"data-table-actions",children:n})]}),f?e.jsx("div",{role:"status","aria-live":"polite","aria-label":M,className:"data-table-status",children:M}):v.length===0?e.jsx("div",{role:"status",className:"data-table-status data-table-empty",children:$}):e.jsxs(i.Table,{grid:!0,children:[e.jsxs(i.TableHead,{children:[I&&e.jsx(i.TableColumn,{className:"data-table-expand-col"}),s.map((a,t)=>e.jsx(i.TableColumn,{align:a.align,isRowHeader:t===0,children:a.label},String(a.key))),C&&e.jsx(i.TableColumn,{align:"right",className:"data-table-row-actions-col",children:h})]}),e.jsx(i.TableBody,{children:U.flatMap(a=>{const t=O.has(a.id),c=k.get(a.id),b=[e.jsxs(i.TableRow,{id:a.id,children:[I&&e.jsx(i.TableCell,{className:"data-table-expand-cell",children:e.jsx("button",{className:"data-table-expand-btn","aria-label":t?"Collapse row":"Expand row","aria-expanded":t,onClick:()=>_(a),children:t?e.jsx(Y.IconChevronDown,{size:"16"}):e.jsx(Z.IconChevronRight,{size:"16"})})}),s.map(d=>e.jsx(i.TableCell,{align:d.align,children:V(a,d)},String(d.key))),C&&e.jsx(i.TableCell,{align:"right",className:"data-table-row-actions-cell",children:e.jsx("div",{className:"data-table-row-actions",children:(typeof r=="function"?r(a):r).map(d=>e.jsx(ne,{action:d,item:a},d.key))})})]},a.id)];return t&&b.push(e.jsx(i.TableRow,{id:`${a.id}-nested`,className:"data-table-nested-row",children:e.jsx(i.TableCell,{colSpan:s.length+1+(C?1:0),className:"data-table-nested-cell",children:e.jsx(L,{columns:q,data:(c==null?void 0:c.data)??[],isLoading:!c||c.status==="loading",loadingMessage:P,emptyMessage:B,searchKeys:E,searchPlaceholder:z,actions:m==null?void 0:m(a),pageSize:F??j})})},`${a.id}-nested`)),b})})]}),T>1&&e.jsx(le,{currentPage:S,totalPages:T,onPageChange:R,previousLabel:A,nextLabel:D})]})}exports.DataTable=L;
+//# sourceMappingURL=DataTable.cjs.map

package/dist/lib/ui/components/DataTable/DataTable.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTable.cjs","sources":["../../../../../src/ui/components/DataTable/DataTable.tsx"],"sourcesContent":["import {\n  PermissionGate,\n  Search,\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHead,\n  TableRow,\n} from \"primitives\";\nimport { Flex } from \"layout\";\nimport { IconArrowLeft, IconArrowRight, IconChevronDown, IconChevronRight } from \"icons\";\nimport type { ReactNode } from \"react\";\nimport { useMemo, useState } from \"react\";\nimport \"./datatable.css\";\n\nfunction buildPages(current: number, total: number): (number | \"...\")[] {\n  if (total <= 6) return Array.from({ length: total }, (_, i) => i + 1);\n  const head = [1, 2, 3];\n  const tail = [total - 1, total];\n  if (current <= 4) return [...head, \"...\", ...tail];\n  if (current >= total - 3) return [1, 2, \"...\", total - 2, total - 1, total];\n  return [1, \"...\", current - 1, current, current + 1, \"...\", total];\n}\n\ninterface PaginationProps {\n  currentPage: number;\n  totalPages: number;\n  onPageChange: (page: number) => void;\n  previousLabel: string;\n  nextLabel: string;\n}\n\nfunction Pagination({\n  currentPage,\n  totalPages,\n  onPageChange,\n  previousLabel,\n  nextLabel,\n}: PaginationProps) {\n  const pages = buildPages(currentPage, totalPages);\n  return (\n    <div className=\"data-table-pagination\">\n      <button\n        onClick={() => onPageChange(Math.max(1, currentPage - 1))}\n        disabled={currentPage === 1}\n        className=\"data-table-page-btn data-table-page-nav\"\n        aria-label={previousLabel}\n      >\n        <IconArrowLeft size=\"16\" />\n        {previousLabel}\n      </button>\n      <div className=\"data-table-page-numbers\">\n        {pages.map((p, i) =>\n          p === \"...\" ? (\n            <span key={`ellipsis-${i}`} className=\"data-table-page-ellipsis\">\n              ...\n            </span>\n          ) : (\n            <button\n              key={p}\n              onClick={() => onPageChange(p as number)}\n              className={`data-table-page-btn${p === currentPage ? \" data-table-page-btn-active\" : \"\"}`}\n            >\n              {p}\n            </button>\n          ),\n        )}\n      </div>\n      <button\n        onClick={() => onPageChange(Math.min(totalPages, currentPage + 1))}\n        disabled={currentPage === totalPages}\n        className=\"data-table-page-btn data-table-page-nav\"\n        aria-label={nextLabel}\n      >\n        {nextLabel}\n        <IconArrowRight size=\"16\" />\n      </button>\n    </div>\n  );\n}\n\nexport interface Column<T> {\n  key: keyof T | string;\n  label: string;\n  align?: \"start\" | \"center\" | \"right\";\n  render?: (item: T) => ReactNode;\n}\n\nexport interface RowActionDef<T> {\n  /** Unique key for this action. */\n  key: string;\n  /** aria-label for the button. */\n  label: string;\n  /** Icon element rendered inside the button. */\n  icon: ReactNode;\n  /** When false, button is disabled and a tooltip with `noAccessLabel` is shown. Default: true. */\n  isAllowed?: boolean;\n  /** Tooltip text shown when `isAllowed` is false. */\n  noAccessLabel?: string;\n  /** Called with the row item when the button is pressed. */\n  onPress: (item: T) => void;\n}\n\nfunction RowActionButton<T>({\n  action,\n  item,\n}: {\n  action: RowActionDef<T>;\n  item: T;\n}) {\n  const allowed = action.isAllowed !== false;\n  const btn = (\n    <button\n      className=\"data-table-row-action-btn\"\n      aria-label={action.label}\n      disabled={!allowed}\n      onClick={allowed ? () => action.onPress(item) : undefined}\n    >\n      {action.icon}\n    </button>\n  );\n  if (allowed) return btn;\n  return (\n    <PermissionGate isAllowed={false} noAccessLabel={action.noAccessLabel ?? \"\"}>\n      {btn}\n    </PermissionGate>\n  );\n}\n\ntype NestedStatus = { status: \"loading\"; data: never[] } | { status: \"loaded\"; data: any[] };\n\nexport interface DataTableProps<T extends { id: string }> {\n  columns: Column<T>[];\n  data: T[];\n  actions?: ReactNode;\n  /** Per-row action buttons rendered in a dedicated last column. */\n  rowActions?: RowActionDef<T>[] | ((item: T) => RowActionDef<T>[]);\n  /** Label for the row actions column header. Defaults to empty string. */\n  rowActionsLabel?: string;\n  searchPlaceholder?: string;\n  searchKeys?: (keyof T)[];\n  isLoading?: boolean;\n  loadingMessage?: string;\n  emptyMessage?: string;\n  previousLabel?: string;\n  nextLabel?: string;\n  pageSize?: number;\n  nestedColumns?: Column<any>[];\n  getNestedData?: (item: T) => any[] | Promise<any[]>;\n  nestedLoadingMessage?: string;\n  nestedEmptyMessage?: string;\n  nestedSearchKeys?: (keyof any)[];\n  nestedSearchPlaceholder?: string;\n  nestedActions?: (item: T) => ReactNode;\n  nestedPageSize?: number;\n}\n\nexport function DataTable<T extends { id: string }>({\n  columns,\n  data,\n  actions,\n  rowActions,\n  rowActionsLabel = \"\",\n  searchPlaceholder = \"Search...\",\n  searchKeys = [],\n  isLoading = false,\n  loadingMessage = \"Loading...\",\n  emptyMessage = \"No records found\",\n  previousLabel = \"Previous\",\n  nextLabel = \"Next\",\n  pageSize = 10,\n  nestedColumns,\n  getNestedData,\n  nestedLoadingMessage = \"Loading...\",\n  nestedEmptyMessage = \"No records found\",\n  nestedSearchKeys,\n  nestedSearchPlaceholder,\n  nestedActions,\n  nestedPageSize,\n}: DataTableProps<T>) {\n  const [query, setQuery] = useState(\"\");\n  const [page, setPage] = useState(1);\n  const [expanded, setExpanded] = useState<Set<string>>(new Set());\n  const [nestedCache, setNestedCache] = useState<Map<string, NestedStatus>>(new Map());\n\n  const hasNested = !!getNestedData && !!nestedColumns;\n  const hasRowActions = !!rowActions;\n\n  function toggleRow(item: T) {\n    const id = item.id;\n    setExpanded((prev) => {\n      const next = new Set(prev);\n      if (next.has(id)) {\n        next.delete(id);\n      } else {\n        next.add(id);\n        if (!nestedCache.has(id)) {\n          const result = getNestedData!(item);\n          if (result instanceof Promise) {\n            setNestedCache((c) => new Map(c).set(id, { status: \"loading\", data: [] }));\n            result.then((rows) => {\n              setNestedCache((c) => new Map(c).set(id, { status: \"loaded\", data: rows }));\n            });\n          } else {\n            setNestedCache((c) => new Map(c).set(id, { status: \"loaded\", data: result }));\n          }\n        }\n      }\n      return next;\n    });\n  }\n\n  const hasSearch = searchKeys.length > 0;\n  const hasToolbar = hasSearch || !!actions;\n\n  const filtered = useMemo(() => {\n    if (!query.trim() || !hasSearch) return data;\n    const lower = query.toLowerCase();\n    return data.filter((item) =>\n      searchKeys.some((k) =>\n        String(item[k] ?? \"\")\n          .toLowerCase()\n          .includes(lower),\n      ),\n    );\n  }, [data, query, searchKeys, hasSearch]);\n\n  const totalPages = Math.max(1, Math.ceil(filtered.length / pageSize));\n  const currentPage = Math.min(page, totalPages);\n  const pageData = filtered.slice(\n    (currentPage - 1) * pageSize,\n    currentPage * pageSize,\n  );\n\n  function getCell(item: T, col: Column<T>): ReactNode {\n    if (col.render) return col.render(item);\n    return String((item as Record<string, unknown>)[col.key as string] ?? \"\");\n  }\n\n  return (\n    <Flex direction=\"column\" gap=\"300\" className=\"data-table\">\n      {hasToolbar && (\n        <div className=\"data-table-toolbar\">\n          {hasSearch && (\n            <Search\n              placeholder={searchPlaceholder}\n              onSearch={(v) => {\n                setQuery(v);\n                setPage(1);\n              }}\n              className=\"data-table-search\"\n            />\n          )}\n          {actions && <div className=\"data-table-actions\">{actions}</div>}\n        </div>\n      )}\n\n      {isLoading ? (\n        <div\n          role=\"status\"\n          aria-live=\"polite\"\n          aria-label={loadingMessage}\n          className=\"data-table-status\"\n        >\n          {loadingMessage}\n        </div>\n      ) : filtered.length === 0 ? (\n        <div role=\"status\" className=\"data-table-status data-table-empty\">\n          {emptyMessage}\n        </div>\n      ) : (\n        <Table grid>\n          <TableHead>\n            {hasNested && <TableColumn className=\"data-table-expand-col\" />}\n            {columns.map((col, idx) => (\n              <TableColumn\n                key={String(col.key)}\n                align={col.align}\n                isRowHeader={idx === 0}\n              >\n                {col.label}\n              </TableColumn>\n            ))}\n            {hasRowActions && (\n              <TableColumn align=\"right\" className=\"data-table-row-actions-col\">\n                {rowActionsLabel}\n              </TableColumn>\n            )}\n          </TableHead>\n          <TableBody>\n            {pageData.flatMap((item) => {\n              const isExpanded = expanded.has(item.id);\n              const cached = nestedCache.get(item.id);\n              const rows: ReactNode[] = [\n                <TableRow key={item.id} id={item.id}>\n                  {hasNested && (\n                    <TableCell className=\"data-table-expand-cell\">\n                      <button\n                        className=\"data-table-expand-btn\"\n                        aria-label={isExpanded ? \"Collapse row\" : \"Expand row\"}\n                        aria-expanded={isExpanded}\n                        onClick={() => toggleRow(item)}\n                      >\n                        {isExpanded ? (\n                          <IconChevronDown size=\"16\" />\n                        ) : (\n                          <IconChevronRight size=\"16\" />\n                        )}\n                      </button>\n                    </TableCell>\n                  )}\n                  {columns.map((col) => (\n                    <TableCell key={String(col.key)} align={col.align}>\n                      {getCell(item, col)}\n                    </TableCell>\n                  ))}\n                  {hasRowActions && (\n                    <TableCell align=\"right\" className=\"data-table-row-actions-cell\">\n                      <div className=\"data-table-row-actions\">\n                        {(typeof rowActions === \"function\"\n                          ? rowActions(item)\n                          : rowActions!\n                        ).map((action) => (\n                          <RowActionButton key={action.key} action={action} item={item} />\n                        ))}\n                      </div>\n                    </TableCell>\n                  )}\n                </TableRow>,\n              ];\n              if (isExpanded) {\n                rows.push(\n                  <TableRow key={`${item.id}-nested`} id={`${item.id}-nested`} className=\"data-table-nested-row\">\n                    <TableCell\n                      colSpan={columns.length + 1 + (hasRowActions ? 1 : 0)}\n                      className=\"data-table-nested-cell\"\n                    >\n                      <DataTable\n                        columns={nestedColumns!}\n                        data={cached?.data ?? []}\n                        isLoading={!cached || cached.status === \"loading\"}\n                        loadingMessage={nestedLoadingMessage}\n                        emptyMessage={nestedEmptyMessage}\n                        searchKeys={nestedSearchKeys}\n                        searchPlaceholder={nestedSearchPlaceholder}\n                        actions={nestedActions?.(item)}\n                        pageSize={nestedPageSize ?? pageSize}\n                      />\n                    </TableCell>\n                  </TableRow>,\n                );\n              }\n              return rows;\n            })}\n          </TableBody>\n        </Table>\n      )}\n\n      {totalPages > 1 && (\n        <Pagination\n          currentPage={currentPage}\n          totalPages={totalPages}\n          onPageChange={setPage}\n          previousLabel={previousLabel}\n          nextLabel={nextLabel}\n        />\n      )}\n    </Flex>\n  );\n}\n"],"names":["buildPages","current","total","_","i","head","tail","Pagination","currentPage","totalPages","onPageChange","previousLabel","nextLabel","pages","jsxs","jsx","IconArrowLeft","p","IconArrowRight","RowActionButton","action","item","allowed","btn","PermissionGate","DataTable","columns","data","actions","rowActions","rowActionsLabel","searchPlaceholder","searchKeys","isLoading","loadingMessage","emptyMessage","pageSize","nestedColumns","getNestedData","nestedLoadingMessage","nestedEmptyMessage","nestedSearchKeys","nestedSearchPlaceholder","nestedActions","nestedPageSize","query","setQuery","useState","page","setPage","expanded","setExpanded","nestedCache","setNestedCache","hasNested","hasRowActions","toggleRow","id","prev","next","result","c","rows","hasSearch","hasToolbar","filtered","useMemo","lower","k","pageData","getCell","col","Flex","Search","v","Table","TableHead","TableColumn","idx","TableBody","isExpanded","cached","TableRow","TableCell","IconChevronDown","IconChevronRight"],"mappings":"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"}

package/dist/lib/ui/components/DataTable/DataTable.js

@@ -0,0 +1,229 @@
+import { jsxs as c, jsx as a } from "react/jsx-runtime";
+import { useState as g, useMemo as Z } from "react";
+/* empty css              */
+import { Search as K } from "../../primitives/Search/Search.js";
+import { Table as aa, TableHead as ea, TableColumn as T, TableBody as ta, TableRow as z, TableCell as w } from "../../primitives/Table/Table.js";
+import { IconChevronDown as la } from "../../icons/IconChevronDown.js";
+import { IconChevronRight as na } from "../../icons/IconChevronRight.js";
+import { PermissionGate as sa } from "../../primitives/PermissionGate/PermissionGate.js";
+import { IconArrowLeft as ia } from "../../icons/IconArrowLeft.js";
+import { IconArrowRight as ra } from "../../icons/IconArrowRight.js";
+import { Flex as da } from "../../layout/Flex/Flex.js";
+function oa(t, n) {
+  if (n <= 6) return Array.from({ length: n }, (b, m) => m + 1);
+  const s = [1, 2, 3], i = [n - 1, n];
+  return t <= 4 ? [...s, "...", ...i] : t >= n - 3 ? [1, 2, "...", n - 2, n - 1, n] : [1, "...", t - 1, t, t + 1, "...", n];
+}
+function ca({
+  currentPage: t,
+  totalPages: n,
+  onPageChange: s,
+  previousLabel: i,
+  nextLabel: b
+}) {
+  const m = oa(t, n);
+  return /* @__PURE__ */ c("div", { className: "data-table-pagination", children: [
+    /* @__PURE__ */ c(
+      "button",
+      {
+        onClick: () => s(Math.max(1, t - 1)),
+        disabled: t === 1,
+        className: "data-table-page-btn data-table-page-nav",
+        "aria-label": i,
+        children: [
+          /* @__PURE__ */ a(ia, { size: "16" }),
+          i
+        ]
+      }
+    ),
+    /* @__PURE__ */ a("div", { className: "data-table-page-numbers", children: m.map(
+      (d, N) => d === "..." ? /* @__PURE__ */ a("span", { className: "data-table-page-ellipsis", children: "..." }, `ellipsis-${N}`) : /* @__PURE__ */ a(
+        "button",
+        {
+          onClick: () => s(d),
+          className: `data-table-page-btn${d === t ? " data-table-page-btn-active" : ""}`,
+          children: d
+        },
+        d
+      )
+    ) }),
+    /* @__PURE__ */ c(
+      "button",
+      {
+        onClick: () => s(Math.min(n, t + 1)),
+        disabled: t === n,
+        className: "data-table-page-btn data-table-page-nav",
+        "aria-label": b,
+        children: [
+          b,
+          /* @__PURE__ */ a(ra, { size: "16" })
+        ]
+      }
+    )
+  ] });
+}
+function ha({
+  action: t,
+  item: n
+}) {
+  const s = t.isAllowed !== !1, i = /* @__PURE__ */ a(
+    "button",
+    {
+      className: "data-table-row-action-btn",
+      "aria-label": t.label,
+      disabled: !s,
+      onClick: s ? () => t.onPress(n) : void 0,
+      children: t.icon
+    }
+  );
+  return s ? i : /* @__PURE__ */ a(sa, { isAllowed: !1, noAccessLabel: t.noAccessLabel ?? "", children: i });
+}
+function ba({
+  columns: t,
+  data: n,
+  actions: s,
+  rowActions: i,
+  rowActionsLabel: b = "",
+  searchPlaceholder: m = "Search...",
+  searchKeys: d = [],
+  isLoading: N = !1,
+  loadingMessage: R = "Loading...",
+  emptyMessage: A = "No records found",
+  previousLabel: B = "Previous",
+  nextLabel: D = "Next",
+  pageSize: f = 10,
+  nestedColumns: L,
+  getNestedData: I,
+  nestedLoadingMessage: H = "Loading...",
+  nestedEmptyMessage: P = "No records found",
+  nestedSearchKeys: q,
+  nestedSearchPlaceholder: F,
+  nestedActions: x,
+  nestedPageSize: G
+}) {
+  const [v, Q] = g(""), [_, $] = g(1), [J, O] = g(/* @__PURE__ */ new Set()), [E, C] = g(/* @__PURE__ */ new Map()), j = !!I && !!L, M = !!i;
+  function U(e) {
+    const l = e.id;
+    O((o) => {
+      const h = new Set(o);
+      if (h.has(l))
+        h.delete(l);
+      else if (h.add(l), !E.has(l)) {
+        const r = I(e);
+        r instanceof Promise ? (C((p) => new Map(p).set(l, { status: "loading", data: [] })), r.then((p) => {
+          C((Y) => new Map(Y).set(l, { status: "loaded", data: p }));
+        })) : C((p) => new Map(p).set(l, { status: "loaded", data: r }));
+      }
+      return h;
+    });
+  }
+  const u = d.length > 0, V = u || !!s, y = Z(() => {
+    if (!v.trim() || !u) return n;
+    const e = v.toLowerCase();
+    return n.filter(
+      (l) => d.some(
+        (o) => String(l[o] ?? "").toLowerCase().includes(e)
+      )
+    );
+  }, [n, v, d, u]), S = Math.max(1, Math.ceil(y.length / f)), k = Math.min(_, S), W = y.slice(
+    (k - 1) * f,
+    k * f
+  );
+  function X(e, l) {
+    return l.render ? l.render(e) : String(e[l.key] ?? "");
+  }
+  return /* @__PURE__ */ c(da, { direction: "column", gap: "300", className: "data-table", children: [
+    V && /* @__PURE__ */ c("div", { className: "data-table-toolbar", children: [
+      u && /* @__PURE__ */ a(
+        K,
+        {
+          placeholder: m,
+          onSearch: (e) => {
+            Q(e), $(1);
+          },
+          className: "data-table-search"
+        }
+      ),
+      s && /* @__PURE__ */ a("div", { className: "data-table-actions", children: s })
+    ] }),
+    N ? /* @__PURE__ */ a(
+      "div",
+      {
+        role: "status",
+        "aria-live": "polite",
+        "aria-label": R,
+        className: "data-table-status",
+        children: R
+      }
+    ) : y.length === 0 ? /* @__PURE__ */ a("div", { role: "status", className: "data-table-status data-table-empty", children: A }) : /* @__PURE__ */ c(aa, { grid: !0, children: [
+      /* @__PURE__ */ c(ea, { children: [
+        j && /* @__PURE__ */ a(T, { className: "data-table-expand-col" }),
+        t.map((e, l) => /* @__PURE__ */ a(
+          T,
+          {
+            align: e.align,
+            isRowHeader: l === 0,
+            children: e.label
+          },
+          String(e.key)
+        )),
+        M && /* @__PURE__ */ a(T, { align: "right", className: "data-table-row-actions-col", children: b })
+      ] }),
+      /* @__PURE__ */ a(ta, { children: W.flatMap((e) => {
+        const l = J.has(e.id), o = E.get(e.id), h = [
+          /* @__PURE__ */ c(z, { id: e.id, children: [
+            j && /* @__PURE__ */ a(w, { className: "data-table-expand-cell", children: /* @__PURE__ */ a(
+              "button",
+              {
+                className: "data-table-expand-btn",
+                "aria-label": l ? "Collapse row" : "Expand row",
+                "aria-expanded": l,
+                onClick: () => U(e),
+                children: l ? /* @__PURE__ */ a(la, { size: "16" }) : /* @__PURE__ */ a(na, { size: "16" })
+              }
+            ) }),
+            t.map((r) => /* @__PURE__ */ a(w, { align: r.align, children: X(e, r) }, String(r.key))),
+            M && /* @__PURE__ */ a(w, { align: "right", className: "data-table-row-actions-cell", children: /* @__PURE__ */ a("div", { className: "data-table-row-actions", children: (typeof i == "function" ? i(e) : i).map((r) => /* @__PURE__ */ a(ha, { action: r, item: e }, r.key)) }) })
+          ] }, e.id)
+        ];
+        return l && h.push(
+          /* @__PURE__ */ a(z, { id: `${e.id}-nested`, className: "data-table-nested-row", children: /* @__PURE__ */ a(
+            w,
+            {
+              colSpan: t.length + 1 + (M ? 1 : 0),
+              className: "data-table-nested-cell",
+              children: /* @__PURE__ */ a(
+                ba,
+                {
+                  columns: L,
+                  data: (o == null ? void 0 : o.data) ?? [],
+                  isLoading: !o || o.status === "loading",
+                  loadingMessage: H,
+                  emptyMessage: P,
+                  searchKeys: q,
+                  searchPlaceholder: F,
+                  actions: x == null ? void 0 : x(e),
+                  pageSize: G ?? f
+                }
+              )
+            }
+          ) }, `${e.id}-nested`)
+        ), h;
+      }) })
+    ] }),
+    S > 1 && /* @__PURE__ */ a(
+      ca,
+      {
+        currentPage: k,
+        totalPages: S,
+        onPageChange: $,
+        previousLabel: B,
+        nextLabel: D
+      }
+    )
+  ] });
+}
+export {
+  ba as DataTable
+};
+//# sourceMappingURL=DataTable.js.map

package/dist/lib/ui/components/DataTable/DataTable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTable.js","sources":["../../../../../src/ui/components/DataTable/DataTable.tsx"],"sourcesContent":["import {\n  PermissionGate,\n  Search,\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHead,\n  TableRow,\n} from \"primitives\";\nimport { Flex } from \"layout\";\nimport { IconArrowLeft, IconArrowRight, IconChevronDown, IconChevronRight } from \"icons\";\nimport type { ReactNode } from \"react\";\nimport { useMemo, useState } from \"react\";\nimport \"./datatable.css\";\n\nfunction buildPages(current: number, total: number): (number | \"...\")[] {\n  if (total <= 6) return Array.from({ length: total }, (_, i) => i + 1);\n  const head = [1, 2, 3];\n  const tail = [total - 1, total];\n  if (current <= 4) return [...head, \"...\", ...tail];\n  if (current >= total - 3) return [1, 2, \"...\", total - 2, total - 1, total];\n  return [1, \"...\", current - 1, current, current + 1, \"...\", total];\n}\n\ninterface PaginationProps {\n  currentPage: number;\n  totalPages: number;\n  onPageChange: (page: number) => void;\n  previousLabel: string;\n  nextLabel: string;\n}\n\nfunction Pagination({\n  currentPage,\n  totalPages,\n  onPageChange,\n  previousLabel,\n  nextLabel,\n}: PaginationProps) {\n  const pages = buildPages(currentPage, totalPages);\n  return (\n    <div className=\"data-table-pagination\">\n      <button\n        onClick={() => onPageChange(Math.max(1, currentPage - 1))}\n        disabled={currentPage === 1}\n        className=\"data-table-page-btn data-table-page-nav\"\n        aria-label={previousLabel}\n      >\n        <IconArrowLeft size=\"16\" />\n        {previousLabel}\n      </button>\n      <div className=\"data-table-page-numbers\">\n        {pages.map((p, i) =>\n          p === \"...\" ? (\n            <span key={`ellipsis-${i}`} className=\"data-table-page-ellipsis\">\n              ...\n            </span>\n          ) : (\n            <button\n              key={p}\n              onClick={() => onPageChange(p as number)}\n              className={`data-table-page-btn${p === currentPage ? \" data-table-page-btn-active\" : \"\"}`}\n            >\n              {p}\n            </button>\n          ),\n        )}\n      </div>\n      <button\n        onClick={() => onPageChange(Math.min(totalPages, currentPage + 1))}\n        disabled={currentPage === totalPages}\n        className=\"data-table-page-btn data-table-page-nav\"\n        aria-label={nextLabel}\n      >\n        {nextLabel}\n        <IconArrowRight size=\"16\" />\n      </button>\n    </div>\n  );\n}\n\nexport interface Column<T> {\n  key: keyof T | string;\n  label: string;\n  align?: \"start\" | \"center\" | \"right\";\n  render?: (item: T) => ReactNode;\n}\n\nexport interface RowActionDef<T> {\n  /** Unique key for this action. */\n  key: string;\n  /** aria-label for the button. */\n  label: string;\n  /** Icon element rendered inside the button. */\n  icon: ReactNode;\n  /** When false, button is disabled and a tooltip with `noAccessLabel` is shown. Default: true. */\n  isAllowed?: boolean;\n  /** Tooltip text shown when `isAllowed` is false. */\n  noAccessLabel?: string;\n  /** Called with the row item when the button is pressed. */\n  onPress: (item: T) => void;\n}\n\nfunction RowActionButton<T>({\n  action,\n  item,\n}: {\n  action: RowActionDef<T>;\n  item: T;\n}) {\n  const allowed = action.isAllowed !== false;\n  const btn = (\n    <button\n      className=\"data-table-row-action-btn\"\n      aria-label={action.label}\n      disabled={!allowed}\n      onClick={allowed ? () => action.onPress(item) : undefined}\n    >\n      {action.icon}\n    </button>\n  );\n  if (allowed) return btn;\n  return (\n    <PermissionGate isAllowed={false} noAccessLabel={action.noAccessLabel ?? \"\"}>\n      {btn}\n    </PermissionGate>\n  );\n}\n\ntype NestedStatus = { status: \"loading\"; data: never[] } | { status: \"loaded\"; data: any[] };\n\nexport interface DataTableProps<T extends { id: string }> {\n  columns: Column<T>[];\n  data: T[];\n  actions?: ReactNode;\n  /** Per-row action buttons rendered in a dedicated last column. */\n  rowActions?: RowActionDef<T>[] | ((item: T) => RowActionDef<T>[]);\n  /** Label for the row actions column header. Defaults to empty string. */\n  rowActionsLabel?: string;\n  searchPlaceholder?: string;\n  searchKeys?: (keyof T)[];\n  isLoading?: boolean;\n  loadingMessage?: string;\n  emptyMessage?: string;\n  previousLabel?: string;\n  nextLabel?: string;\n  pageSize?: number;\n  nestedColumns?: Column<any>[];\n  getNestedData?: (item: T) => any[] | Promise<any[]>;\n  nestedLoadingMessage?: string;\n  nestedEmptyMessage?: string;\n  nestedSearchKeys?: (keyof any)[];\n  nestedSearchPlaceholder?: string;\n  nestedActions?: (item: T) => ReactNode;\n  nestedPageSize?: number;\n}\n\nexport function DataTable<T extends { id: string }>({\n  columns,\n  data,\n  actions,\n  rowActions,\n  rowActionsLabel = \"\",\n  searchPlaceholder = \"Search...\",\n  searchKeys = [],\n  isLoading = false,\n  loadingMessage = \"Loading...\",\n  emptyMessage = \"No records found\",\n  previousLabel = \"Previous\",\n  nextLabel = \"Next\",\n  pageSize = 10,\n  nestedColumns,\n  getNestedData,\n  nestedLoadingMessage = \"Loading...\",\n  nestedEmptyMessage = \"No records found\",\n  nestedSearchKeys,\n  nestedSearchPlaceholder,\n  nestedActions,\n  nestedPageSize,\n}: DataTableProps<T>) {\n  const [query, setQuery] = useState(\"\");\n  const [page, setPage] = useState(1);\n  const [expanded, setExpanded] = useState<Set<string>>(new Set());\n  const [nestedCache, setNestedCache] = useState<Map<string, NestedStatus>>(new Map());\n\n  const hasNested = !!getNestedData && !!nestedColumns;\n  const hasRowActions = !!rowActions;\n\n  function toggleRow(item: T) {\n    const id = item.id;\n    setExpanded((prev) => {\n      const next = new Set(prev);\n      if (next.has(id)) {\n        next.delete(id);\n      } else {\n        next.add(id);\n        if (!nestedCache.has(id)) {\n          const result = getNestedData!(item);\n          if (result instanceof Promise) {\n            setNestedCache((c) => new Map(c).set(id, { status: \"loading\", data: [] }));\n            result.then((rows) => {\n              setNestedCache((c) => new Map(c).set(id, { status: \"loaded\", data: rows }));\n            });\n          } else {\n            setNestedCache((c) => new Map(c).set(id, { status: \"loaded\", data: result }));\n          }\n        }\n      }\n      return next;\n    });\n  }\n\n  const hasSearch = searchKeys.length > 0;\n  const hasToolbar = hasSearch || !!actions;\n\n  const filtered = useMemo(() => {\n    if (!query.trim() || !hasSearch) return data;\n    const lower = query.toLowerCase();\n    return data.filter((item) =>\n      searchKeys.some((k) =>\n        String(item[k] ?? \"\")\n          .toLowerCase()\n          .includes(lower),\n      ),\n    );\n  }, [data, query, searchKeys, hasSearch]);\n\n  const totalPages = Math.max(1, Math.ceil(filtered.length / pageSize));\n  const currentPage = Math.min(page, totalPages);\n  const pageData = filtered.slice(\n    (currentPage - 1) * pageSize,\n    currentPage * pageSize,\n  );\n\n  function getCell(item: T, col: Column<T>): ReactNode {\n    if (col.render) return col.render(item);\n    return String((item as Record<string, unknown>)[col.key as string] ?? \"\");\n  }\n\n  return (\n    <Flex direction=\"column\" gap=\"300\" className=\"data-table\">\n      {hasToolbar && (\n        <div className=\"data-table-toolbar\">\n          {hasSearch && (\n            <Search\n              placeholder={searchPlaceholder}\n              onSearch={(v) => {\n                setQuery(v);\n                setPage(1);\n              }}\n              className=\"data-table-search\"\n            />\n          )}\n          {actions && <div className=\"data-table-actions\">{actions}</div>}\n        </div>\n      )}\n\n      {isLoading ? (\n        <div\n          role=\"status\"\n          aria-live=\"polite\"\n          aria-label={loadingMessage}\n          className=\"data-table-status\"\n        >\n          {loadingMessage}\n        </div>\n      ) : filtered.length === 0 ? (\n        <div role=\"status\" className=\"data-table-status data-table-empty\">\n          {emptyMessage}\n        </div>\n      ) : (\n        <Table grid>\n          <TableHead>\n            {hasNested && <TableColumn className=\"data-table-expand-col\" />}\n            {columns.map((col, idx) => (\n              <TableColumn\n                key={String(col.key)}\n                align={col.align}\n                isRowHeader={idx === 0}\n              >\n                {col.label}\n              </TableColumn>\n            ))}\n            {hasRowActions && (\n              <TableColumn align=\"right\" className=\"data-table-row-actions-col\">\n                {rowActionsLabel}\n              </TableColumn>\n            )}\n          </TableHead>\n          <TableBody>\n            {pageData.flatMap((item) => {\n              const isExpanded = expanded.has(item.id);\n              const cached = nestedCache.get(item.id);\n              const rows: ReactNode[] = [\n                <TableRow key={item.id} id={item.id}>\n                  {hasNested && (\n                    <TableCell className=\"data-table-expand-cell\">\n                      <button\n                        className=\"data-table-expand-btn\"\n                        aria-label={isExpanded ? \"Collapse row\" : \"Expand row\"}\n                        aria-expanded={isExpanded}\n                        onClick={() => toggleRow(item)}\n                      >\n                        {isExpanded ? (\n                          <IconChevronDown size=\"16\" />\n                        ) : (\n                          <IconChevronRight size=\"16\" />\n                        )}\n                      </button>\n                    </TableCell>\n                  )}\n                  {columns.map((col) => (\n                    <TableCell key={String(col.key)} align={col.align}>\n                      {getCell(item, col)}\n                    </TableCell>\n                  ))}\n                  {hasRowActions && (\n                    <TableCell align=\"right\" className=\"data-table-row-actions-cell\">\n                      <div className=\"data-table-row-actions\">\n                        {(typeof rowActions === \"function\"\n                          ? rowActions(item)\n                          : rowActions!\n                        ).map((action) => (\n                          <RowActionButton key={action.key} action={action} item={item} />\n                        ))}\n                      </div>\n                    </TableCell>\n                  )}\n                </TableRow>,\n              ];\n              if (isExpanded) {\n                rows.push(\n                  <TableRow key={`${item.id}-nested`} id={`${item.id}-nested`} className=\"data-table-nested-row\">\n                    <TableCell\n                      colSpan={columns.length + 1 + (hasRowActions ? 1 : 0)}\n                      className=\"data-table-nested-cell\"\n                    >\n                      <DataTable\n                        columns={nestedColumns!}\n                        data={cached?.data ?? []}\n                        isLoading={!cached || cached.status === \"loading\"}\n                        loadingMessage={nestedLoadingMessage}\n                        emptyMessage={nestedEmptyMessage}\n                        searchKeys={nestedSearchKeys}\n                        searchPlaceholder={nestedSearchPlaceholder}\n                        actions={nestedActions?.(item)}\n                        pageSize={nestedPageSize ?? pageSize}\n                      />\n                    </TableCell>\n                  </TableRow>,\n                );\n              }\n              return rows;\n            })}\n          </TableBody>\n        </Table>\n      )}\n\n      {totalPages > 1 && (\n        <Pagination\n          currentPage={currentPage}\n          totalPages={totalPages}\n          onPageChange={setPage}\n          previousLabel={previousLabel}\n          nextLabel={nextLabel}\n        />\n      )}\n    </Flex>\n  );\n}\n"],"names":["buildPages","current","total","_","i","head","tail","Pagination","currentPage","totalPages","onPageChange","previousLabel","nextLabel","pages","jsxs","jsx","IconArrowLeft","p","IconArrowRight","RowActionButton","action","item","allowed","btn","PermissionGate","DataTable","columns","data","actions","rowActions","rowActionsLabel","searchPlaceholder","searchKeys","isLoading","loadingMessage","emptyMessage","pageSize","nestedColumns","getNestedData","nestedLoadingMessage","nestedEmptyMessage","nestedSearchKeys","nestedSearchPlaceholder","nestedActions","nestedPageSize","query","setQuery","useState","page","setPage","expanded","setExpanded","nestedCache","setNestedCache","hasNested","hasRowActions","toggleRow","id","prev","next","result","c","rows","hasSearch","hasToolbar","filtered","useMemo","lower","k","pageData","getCell","col","Flex","Search","v","Table","TableHead","TableColumn","idx","TableBody","isExpanded","cached","TableRow","TableCell","IconChevronDown","IconChevronRight"],"mappings":"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"}

package/dist/lib/ui/components/FormModal/FormModal.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),j=require("../../../vendor/clsx/dist/clsx.cjs");;/* empty css                */const r=require("../../primitives/Dialog/Dialog.cjs"),n=require("../../layout/Flex/Flex.cjs"),a=require("../../primitives/Button/Button.cjs");function f({isOpen:o,title:s,submitLabel:t="Save",cancelLabel:c="Cancel",isLoading:l=!1,isSubmitDisabled:d=!1,size:u="medium",onSubmit:m,onClose:i,children:x}){return o?e.jsx(r.DialogModal,{isOpen:o,onOpenChange:g=>!g&&i(),children:e.jsxs(r.Dialog,{className:j.clsx("form-modal",`form-modal--${u}`),children:[e.jsxs(n.Flex,{direction:"row",alignPrimary:"space-between",alignSecondary:"center",children:[e.jsx(r.DialogTitle,{children:s}),e.jsx(r.DialogClose,{onPress:i})]}),e.jsx(r.DialogBody,{children:e.jsx(n.Flex,{direction:"column",gap:"300",children:x})}),e.jsxs(n.Flex,{direction:"row",gap:"200",alignPrimary:"end",className:"form-modal-footer",children:[e.jsx(a.Button,{variant:"neutral",onPress:i,isDisabled:l,children:c}),e.jsx(a.Button,{variant:"primary",onPress:m,isDisabled:d||l,children:l?"...":t})]})]})}):null}exports.FormModal=f;
+//# sourceMappingURL=FormModal.cjs.map

package/dist/lib/ui/components/FormModal/FormModal.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormModal.cjs","sources":["../../../../../src/ui/components/FormModal/FormModal.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport {\n  Button,\n  Dialog,\n  DialogBody,\n  DialogClose,\n  DialogModal,\n  DialogTitle,\n} from \"primitives\";\nimport { Flex } from \"layout\";\nimport type { ReactNode } from \"react\";\nimport \"./formmodal.css\";\n\nexport type FormModalSize = \"medium\" | \"large\" | \"xlarge\";\n\nexport interface FormModalProps {\n  isOpen: boolean;\n  title: string;\n  submitLabel?: string;\n  cancelLabel?: string;\n  isLoading?: boolean;\n  isSubmitDisabled?: boolean;\n  /**\n   * Maximum width of the dialog. Defaults to `\"medium\"`, which preserves the\n   * previous fixed width. Use `\"large\"`/`\"xlarge\"` for forms that embed wide\n   * content such as tables.\n   */\n  size?: FormModalSize;\n  onSubmit: () => void;\n  onClose: () => void;\n  children: ReactNode;\n}\n\nexport function FormModal({\n  isOpen,\n  title,\n  submitLabel = \"Save\",\n  cancelLabel = \"Cancel\",\n  isLoading = false,\n  isSubmitDisabled = false,\n  size = \"medium\",\n  onSubmit,\n  onClose,\n  children,\n}: FormModalProps) {\n  if (!isOpen) return null;\n\n  return (\n    <DialogModal isOpen={isOpen} onOpenChange={(open) => !open && onClose()}>\n      <Dialog className={clsx(\"form-modal\", `form-modal--${size}`)}>\n        <Flex direction=\"row\" alignPrimary=\"space-between\" alignSecondary=\"center\">\n          <DialogTitle>{title}</DialogTitle>\n          <DialogClose onPress={onClose} />\n        </Flex>\n        <DialogBody>\n          <Flex direction=\"column\" gap=\"300\">\n            {children}\n          </Flex>\n        </DialogBody>\n        <Flex\n          direction=\"row\"\n          gap=\"200\"\n          alignPrimary=\"end\"\n          className=\"form-modal-footer\"\n        >\n          <Button variant=\"neutral\" onPress={onClose} isDisabled={isLoading}>\n            {cancelLabel}\n          </Button>\n          <Button\n            variant=\"primary\"\n            onPress={onSubmit}\n            isDisabled={isSubmitDisabled || isLoading}\n          >\n            {isLoading ? \"...\" : submitLabel}\n          </Button>\n        </Flex>\n      </Dialog>\n    </DialogModal>\n  );\n}\n"],"names":["FormModal","isOpen","title","submitLabel","cancelLabel","isLoading","isSubmitDisabled","size","onSubmit","onClose","children","DialogModal","open","jsxs","Dialog","clsx","Flex","jsx","DialogTitle","DialogClose","DialogBody","Button"],"mappings":"kVAiCO,SAASA,EAAU,CACxB,OAAAC,EACA,MAAAC,EACA,YAAAC,EAAc,OACd,YAAAC,EAAc,SACd,UAAAC,EAAY,GACZ,iBAAAC,EAAmB,GACnB,KAAAC,EAAO,SACP,SAAAC,EACA,QAAAC,EACA,SAAAC,CACF,EAAmB,CACjB,OAAKT,QAGFU,cAAA,CAAY,OAAAV,EAAgB,aAAeW,GAAS,CAACA,GAAQH,IAC5D,SAAAI,EAAAA,KAACC,EAAAA,QAAO,UAAWC,OAAK,aAAc,eAAeR,CAAI,EAAE,EACzD,SAAA,CAAAM,OAACG,EAAAA,MAAK,UAAU,MAAM,aAAa,gBAAgB,eAAe,SAChE,SAAA,CAAAC,EAAAA,IAACC,EAAAA,aAAa,SAAAhB,CAAA,CAAM,EACpBe,EAAAA,IAACE,EAAAA,YAAA,CAAY,QAASV,CAAA,CAAS,CAAA,EACjC,EACAQ,EAAAA,IAACG,EAAAA,YACC,SAAAH,EAAAA,IAACD,EAAAA,KAAA,CAAK,UAAU,SAAS,IAAI,MAC1B,SAAAN,CAAA,CACH,CAAA,CACF,EACAG,EAAAA,KAACG,EAAAA,KAAA,CACC,UAAU,MACV,IAAI,MACJ,aAAa,MACb,UAAU,oBAEV,SAAA,CAAAC,EAAAA,IAACI,EAAAA,QAAO,QAAQ,UAAU,QAASZ,EAAS,WAAYJ,EACrD,SAAAD,CAAA,CACH,EACAa,EAAAA,IAACI,EAAAA,OAAA,CACC,QAAQ,UACR,QAASb,EACT,WAAYF,GAAoBD,EAE/B,WAAY,MAAQF,CAAA,CAAA,CACvB,CAAA,CAAA,CACF,CAAA,CACF,CAAA,CACF,EAhCkB,IAkCtB"}