@ktnpm_devops/react-component 0.3.0 → 0.4.1

package/dist/index23.js

@@ -1,42 +1,135 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { createPortal } from "react-dom";
-import { clsx } from "./index36.js";
-import { useEscapeKey } from "./index5.js";
-import styles from "./index41.js";
-const Modal = ({
-  open,
-  title,
-  onClose,
-  children,
-  footer,
-  portalTarget,
-  className,
-  bodyClassName,
-  style,
-  closeLabel = "×"
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useRef, useEffect, useCallback } from "react";
+import { clsx } from "./index38.js";
+import { MIN_COLUMN_WIDTH } from "./index45.js";
+import styles from "./index49.js";
+const SKELETON_ROWS = 5;
+const FULL_PERCENT = 100;
+const LiveExplorerTable = ({
+  rows,
+  columns,
+  sortState = null,
+  onSortChange,
+  isLoading = false,
+  hasMore = false,
+  isFetchingNext = false,
+  onLoadMore,
+  onColumnResize,
+  onRowClick,
+  selectedRowKey = null,
+  scrollToSelectedRow = false,
+  maxHeight,
+  className
 }) => {
-  useEscapeKey(onClose, open);
-  if (!open) return null;
-  const modalContent = /* @__PURE__ */ jsx("div", { className: styles.overlay, role: "dialog", "aria-modal": "true", children: /* @__PURE__ */ jsxs("div", { className: clsx(styles.root, className), style, children: [
-    /* @__PURE__ */ jsxs("div", { className: styles.header, children: [
-      title ? /* @__PURE__ */ jsx("h2", { className: styles.title, children: title }) : /* @__PURE__ */ jsx("span", {}),
-      /* @__PURE__ */ jsx(
-        "button",
+  const selectedRef = useRef(null);
+  useEffect(() => {
+    if (scrollToSelectedRow && selectedRef.current) {
+      selectedRef.current.scrollIntoView({ block: "nearest", behavior: "smooth" });
+    }
+  }, [scrollToSelectedRow, selectedRowKey]);
+  const handleSort = useCallback(
+    (columnKey) => {
+      if (!onSortChange) return;
+      const newDirection = (sortState == null ? void 0 : sortState.column) === columnKey && sortState.direction === "asc" ? "desc" : "asc";
+      onSortChange({ column: columnKey, direction: newDirection });
+    },
+    [onSortChange, sortState]
+  );
+  const handleResizeStart = useCallback(
+    (columnKey, startX, startWidth) => {
+      if (!onColumnResize) return;
+      const col = columns.find((c) => c.key === columnKey);
+      const minW = (col == null ? void 0 : col.minWidth) ?? MIN_COLUMN_WIDTH;
+      const onMouseMove = (e) => {
+        const newWidth = Math.max(minW, startWidth + e.clientX - startX);
+        onColumnResize(columnKey, newWidth);
+      };
+      const onMouseUp = () => {
+        document.removeEventListener("mousemove", onMouseMove);
+        document.removeEventListener("mouseup", onMouseUp);
+        document.body.style.cursor = "";
+        document.body.style.userSelect = "";
+      };
+      document.addEventListener("mousemove", onMouseMove);
+      document.addEventListener("mouseup", onMouseUp);
+      document.body.style.cursor = "col-resize";
+      document.body.style.userSelect = "none";
+    },
+    [onColumnResize, columns]
+  );
+  const getSortAria = (key) => {
+    if ((sortState == null ? void 0 : sortState.column) !== key) return "none";
+    return sortState.direction === "asc" ? "ascending" : "descending";
+  };
+  const renderCell = (col, row) => {
+    const value = row[col.key];
+    if (col.render) return col.render(value, row);
+    return String(value ?? "");
+  };
+  const containerStyle = maxHeight ? { maxHeight: typeof maxHeight === "number" ? `${maxHeight}px` : maxHeight } : void 0;
+  return /* @__PURE__ */ jsxs("div", { className: clsx(styles.root, className), children: [
+    /* @__PURE__ */ jsx("div", { className: styles.tableContainer, style: containerStyle, children: /* @__PURE__ */ jsxs("table", { className: styles.table, children: [
+      /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { children: columns.map((col) => /* @__PURE__ */ jsxs(
+        "th",
         {
-          type: "button",
-          onClick: onClose,
-          className: styles.closeBtn,
-          "aria-label": "Close modal",
-          children: closeLabel
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsx("div", { className: clsx(styles.body, bodyClassName), children }),
-    footer && /* @__PURE__ */ jsx("div", { className: styles.footer, children: footer })
-  ] }) });
-  return createPortal(modalContent, portalTarget ?? document.body);
+          scope: "col",
+          className: clsx(styles.th, { [styles.sortable]: col.sortable }),
+          style: col.width ? { width: `${col.width}px` } : void 0,
+          "aria-sort": col.sortable ? getSortAria(col.key) : void 0,
+          onClick: col.sortable ? () => handleSort(col.key) : void 0,
+          children: [
+            /* @__PURE__ */ jsxs("span", { className: styles.thContent, children: [
+              col.label,
+              col.sortable && (sortState == null ? void 0 : sortState.column) === col.key && /* @__PURE__ */ jsx("span", { className: styles.sortIndicator, "aria-hidden": "true", children: sortState.direction === "asc" ? "▲" : "▼" })
+            ] }),
+            onColumnResize && /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: styles.resizeHandle,
+                role: "separator",
+                "aria-orientation": "vertical",
+                onMouseDown: (e) => {
+                  e.preventDefault();
+                  e.stopPropagation();
+                  const th = e.target.closest("th");
+                  handleResizeStart(col.key, e.clientX, (th == null ? void 0 : th.offsetWidth) ?? FULL_PERCENT);
+                }
+              }
+            )
+          ]
+        },
+        col.key
+      )) }) }),
+      /* @__PURE__ */ jsx("tbody", { children: isLoading && rows.length === 0 ? Array.from({ length: SKELETON_ROWS }, (_, i) => /* @__PURE__ */ jsx("tr", { className: styles.skeletonRow, children: columns.map((col) => /* @__PURE__ */ jsx("td", { children: /* @__PURE__ */ jsx("div", { className: styles.skeleton }) }, col.key)) }, `skeleton-${i}`)) : rows.map((row) => /* @__PURE__ */ jsx(
+        "tr",
+        {
+          ref: row.id === selectedRowKey ? selectedRef : void 0,
+          className: clsx(styles.row, {
+            [styles.rowSelected]: row.id === selectedRowKey,
+            [styles.rowClickable]: !!onRowClick
+          }),
+          "aria-selected": row.id === selectedRowKey || void 0,
+          onClick: onRowClick ? () => onRowClick(row) : void 0,
+          children: columns.map((col) => /* @__PURE__ */ jsx("td", { className: styles.td, children: renderCell(col, row) }, col.key))
+        },
+        row.id
+      )) })
+    ] }) }),
+    rows.length === 0 && !isLoading && /* @__PURE__ */ jsx("div", { className: styles.empty, children: "No data available" }),
+    hasMore && onLoadMore && /* @__PURE__ */ jsx("div", { className: styles.loadMore, children: /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: styles.loadMoreButton,
+        onClick: onLoadMore,
+        disabled: isFetchingNext,
+        children: isFetchingNext ? "Loading..." : "Load more"
+      }
+    ) })
+  ] });
 };
+LiveExplorerTable.displayName = "LiveExplorerTable";
 export {
-  Modal
+  LiveExplorerTable
 };
 //# sourceMappingURL=index23.js.map

package/dist/index23.js.map

@@ -1 +1 @@
-{"version":3,"file":"index23.js","sources":["../src/primitives/Modal/Modal.tsx"],"sourcesContent":["import { type CSSProperties, type ReactNode } from 'react';\nimport { createPortal } from 'react-dom';\nimport clsx from 'clsx';\nimport { useEscapeKey } from '../../hooks/useEscapeKey';\nimport styles from './Modal.module.css';\n\nexport interface ModalProps {\n  open: boolean;\n  title?: ReactNode;\n  onClose: () => void;\n  children: ReactNode;\n  footer?: ReactNode;\n  portalTarget?: HTMLElement;\n  className?: string;\n  bodyClassName?: string;\n  style?: CSSProperties;\n  closeLabel?: ReactNode;\n}\n\nexport const Modal = ({\n  open,\n  title,\n  onClose,\n  children,\n  footer,\n  portalTarget,\n  className,\n  bodyClassName,\n  style,\n  closeLabel = '\\u00D7',\n}: ModalProps) => {\n  useEscapeKey(onClose, open);\n\n  if (!open) return null;\n\n  const modalContent = (\n    <div className={styles.overlay} role=\"dialog\" aria-modal=\"true\">\n      <div className={clsx(styles.root, className)} style={style}>\n        <div className={styles.header}>\n          {title ? <h2 className={styles.title}>{title}</h2> : <span />}\n          <button\n            type=\"button\"\n            onClick={onClose}\n            className={styles.closeBtn}\n            aria-label=\"Close modal\"\n          >\n            {closeLabel}\n          </button>\n        </div>\n        <div className={clsx(styles.body, bodyClassName)}>{children}</div>\n        {footer && <div className={styles.footer}>{footer}</div>}\n      </div>\n    </div>\n  );\n\n  return createPortal(modalContent, portalTarget ?? document.body);\n};\n"],"names":[],"mappings":";;;;;AAmBO,MAAM,QAAQ,CAAC;AAAA,EACpB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,aAAa;AACf,MAAkB;AAChB,eAAa,SAAS,IAAI;AAE1B,MAAI,CAAC,KAAM,QAAO;AAElB,QAAM,eACJ,oBAAC,OAAA,EAAI,WAAW,OAAO,SAAS,MAAK,UAAS,cAAW,QACvD,UAAA,qBAAC,SAAI,WAAW,KAAK,OAAO,MAAM,SAAS,GAAG,OAC5C,UAAA;AAAA,IAAA,qBAAC,OAAA,EAAI,WAAW,OAAO,QACpB,UAAA;AAAA,MAAA,QAAQ,oBAAC,QAAG,WAAW,OAAO,OAAQ,UAAA,MAAA,CAAM,wBAAS,QAAA,CAAA,CAAK;AAAA,MAC3D;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,SAAS;AAAA,UACT,WAAW,OAAO;AAAA,UAClB,cAAW;AAAA,UAEV,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IACH,GACF;AAAA,IACA,oBAAC,SAAI,WAAW,KAAK,OAAO,MAAM,aAAa,GAAI,UAAS;AAAA,IAC3D,UAAU,oBAAC,OAAA,EAAI,WAAW,OAAO,QAAS,UAAA,OAAA,CAAO;AAAA,EAAA,EAAA,CACpD,EAAA,CACF;AAGF,SAAO,aAAa,cAAc,gBAAgB,SAAS,IAAI;AACjE;"}
+{"version":3,"file":"index23.js","sources":["../src/data/LiveExplorerTable/LiveExplorerTable.tsx"],"sourcesContent":["import { useCallback, useEffect, useRef } from 'react';\nimport clsx from 'clsx';\nimport { MIN_COLUMN_WIDTH } from '../../constants';\nimport type {\n  LiveExplorerTableProps,\n  LiveExplorerRow,\n} from './LiveExplorerTable.types';\nimport styles from './LiveExplorerTable.module.css';\n\nconst SKELETON_ROWS = 5;\nconst FULL_PERCENT = 100;\n\nexport const LiveExplorerTable = ({\n  rows,\n  columns,\n  sortState = null,\n  onSortChange,\n  isLoading = false,\n  hasMore = false,\n  isFetchingNext = false,\n  onLoadMore,\n  onColumnResize,\n  onRowClick,\n  selectedRowKey = null,\n  scrollToSelectedRow = false,\n  maxHeight,\n  className,\n}: LiveExplorerTableProps) => {\n  const selectedRef = useRef<HTMLTableRowElement>(null);\n\n  useEffect(() => {\n    if (scrollToSelectedRow && selectedRef.current) {\n      selectedRef.current.scrollIntoView({ block: 'nearest', behavior: 'smooth' });\n    }\n  }, [scrollToSelectedRow, selectedRowKey]);\n\n  const handleSort = useCallback(\n    (columnKey: string) => {\n      if (!onSortChange) return;\n      const newDirection: 'asc' | 'desc' =\n        sortState?.column === columnKey && sortState.direction === 'asc' ? 'desc' : 'asc';\n      onSortChange({ column: columnKey, direction: newDirection });\n    },\n    [onSortChange, sortState],\n  );\n\n  const handleResizeStart = useCallback(\n    (columnKey: string, startX: number, startWidth: number) => {\n      if (!onColumnResize) return;\n      const col = columns.find((c) => c.key === columnKey);\n      const minW = col?.minWidth ?? MIN_COLUMN_WIDTH;\n\n      const onMouseMove = (e: MouseEvent) => {\n        const newWidth = Math.max(minW, startWidth + e.clientX - startX);\n        onColumnResize(columnKey, newWidth);\n      };\n\n      const onMouseUp = () => {\n        document.removeEventListener('mousemove', onMouseMove);\n        document.removeEventListener('mouseup', onMouseUp);\n        document.body.style.cursor = '';\n        document.body.style.userSelect = '';\n      };\n\n      document.addEventListener('mousemove', onMouseMove);\n      document.addEventListener('mouseup', onMouseUp);\n      document.body.style.cursor = 'col-resize';\n      document.body.style.userSelect = 'none';\n    },\n    [onColumnResize, columns],\n  );\n\n  const getSortAria = (key: string): 'ascending' | 'descending' | 'none' => {\n    if (sortState?.column !== key) return 'none';\n    return sortState.direction === 'asc' ? 'ascending' : 'descending';\n  };\n\n  const renderCell = (col: (typeof columns)[number], row: LiveExplorerRow) => {\n    const value = row[col.key];\n    if (col.render) return col.render(value, row);\n    return String(value ?? '');\n  };\n\n  const containerStyle = maxHeight\n    ? { maxHeight: typeof maxHeight === 'number' ? `${maxHeight}px` : maxHeight }\n    : undefined;\n\n  return (\n    <div className={clsx(styles.root, className)}>\n      <div className={styles.tableContainer} style={containerStyle}>\n        <table className={styles.table}>\n          <thead>\n            <tr>\n              {columns.map((col) => (\n                <th\n                  key={col.key}\n                  scope=\"col\"\n                  className={clsx(styles.th, { [styles.sortable]: col.sortable })}\n                  style={col.width ? { width: `${col.width}px` } : undefined}\n                  aria-sort={col.sortable ? getSortAria(col.key) : undefined}\n                  onClick={col.sortable ? () => handleSort(col.key) : undefined}\n                >\n                  <span className={styles.thContent}>\n                    {col.label}\n                    {col.sortable && sortState?.column === col.key && (\n                      <span className={styles.sortIndicator} aria-hidden=\"true\">\n                        {sortState.direction === 'asc' ? '▲' : '▼'}\n                      </span>\n                    )}\n                  </span>\n                  {onColumnResize && (\n                    <span\n                      className={styles.resizeHandle}\n                      role=\"separator\"\n                      aria-orientation=\"vertical\"\n                      onMouseDown={(e) => {\n                        e.preventDefault();\n                        e.stopPropagation();\n                        const th = (e.target as HTMLElement).closest('th');\n                        handleResizeStart(col.key, e.clientX, th?.offsetWidth ?? FULL_PERCENT);\n                      }}\n                    />\n                  )}\n                </th>\n              ))}\n            </tr>\n          </thead>\n          <tbody>\n            {isLoading && rows.length === 0\n              ? Array.from({ length: SKELETON_ROWS }, (_, i) => (\n                  <tr key={`skeleton-${i}`} className={styles.skeletonRow}>\n                    {columns.map((col) => (\n                      <td key={col.key}>\n                        <div className={styles.skeleton} />\n                      </td>\n                    ))}\n                  </tr>\n                ))\n              : rows.map((row) => (\n                  <tr\n                    key={row.id}\n                    ref={row.id === selectedRowKey ? selectedRef : undefined}\n                    className={clsx(styles.row, {\n                      [styles.rowSelected]: row.id === selectedRowKey,\n                      [styles.rowClickable]: !!onRowClick,\n                    })}\n                    aria-selected={row.id === selectedRowKey || undefined}\n                    onClick={onRowClick ? () => onRowClick(row) : undefined}\n                  >\n                    {columns.map((col) => (\n                      <td key={col.key} className={styles.td}>\n                        {renderCell(col, row)}\n                      </td>\n                    ))}\n                  </tr>\n                ))}\n          </tbody>\n        </table>\n      </div>\n\n      {rows.length === 0 && !isLoading && (\n        <div className={styles.empty}>No data available</div>\n      )}\n\n      {hasMore && onLoadMore && (\n        <div className={styles.loadMore}>\n          <button\n            type=\"button\"\n            className={styles.loadMoreButton}\n            onClick={onLoadMore}\n            disabled={isFetchingNext}\n          >\n            {isFetchingNext ? 'Loading...' : 'Load more'}\n          </button>\n        </div>\n      )}\n    </div>\n  );\n};\n\nLiveExplorerTable.displayName = 'LiveExplorerTable';\n"],"names":[],"mappings":";;;;;AASA,MAAM,gBAAgB;AACtB,MAAM,eAAe;AAEd,MAAM,oBAAoB,CAAC;AAAA,EAChC;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ;AAAA,EACA,YAAY;AAAA,EACZ,UAAU;AAAA,EACV,iBAAiB;AAAA,EACjB;AAAA,EACA;AAAA,EACA;AAAA,EACA,iBAAiB;AAAA,EACjB,sBAAsB;AAAA,EACtB;AAAA,EACA;AACF,MAA8B;AAC5B,QAAM,cAAc,OAA4B,IAAI;AAEpD,YAAU,MAAM;AACd,QAAI,uBAAuB,YAAY,SAAS;AAC9C,kBAAY,QAAQ,eAAe,EAAE,OAAO,WAAW,UAAU,UAAU;AAAA,IAC7E;AAAA,EACF,GAAG,CAAC,qBAAqB,cAAc,CAAC;AAExC,QAAM,aAAa;AAAA,IACjB,CAAC,cAAsB;AACrB,UAAI,CAAC,aAAc;AACnB,YAAM,gBACJ,uCAAW,YAAW,aAAa,UAAU,cAAc,QAAQ,SAAS;AAC9E,mBAAa,EAAE,QAAQ,WAAW,WAAW,cAAc;AAAA,IAC7D;AAAA,IACA,CAAC,cAAc,SAAS;AAAA,EAAA;AAG1B,QAAM,oBAAoB;AAAA,IACxB,CAAC,WAAmB,QAAgB,eAAuB;AACzD,UAAI,CAAC,eAAgB;AACrB,YAAM,MAAM,QAAQ,KAAK,CAAC,MAAM,EAAE,QAAQ,SAAS;AACnD,YAAM,QAAO,2BAAK,aAAY;AAE9B,YAAM,cAAc,CAAC,MAAkB;AACrC,cAAM,WAAW,KAAK,IAAI,MAAM,aAAa,EAAE,UAAU,MAAM;AAC/D,uBAAe,WAAW,QAAQ;AAAA,MACpC;AAEA,YAAM,YAAY,MAAM;AACtB,iBAAS,oBAAoB,aAAa,WAAW;AACrD,iBAAS,oBAAoB,WAAW,SAAS;AACjD,iBAAS,KAAK,MAAM,SAAS;AAC7B,iBAAS,KAAK,MAAM,aAAa;AAAA,MACnC;AAEA,eAAS,iBAAiB,aAAa,WAAW;AAClD,eAAS,iBAAiB,WAAW,SAAS;AAC9C,eAAS,KAAK,MAAM,SAAS;AAC7B,eAAS,KAAK,MAAM,aAAa;AAAA,IACnC;AAAA,IACA,CAAC,gBAAgB,OAAO;AAAA,EAAA;AAG1B,QAAM,cAAc,CAAC,QAAqD;AACxE,SAAI,uCAAW,YAAW,IAAK,QAAO;AACtC,WAAO,UAAU,cAAc,QAAQ,cAAc;AAAA,EACvD;AAEA,QAAM,aAAa,CAAC,KAA+B,QAAyB;AAC1E,UAAM,QAAQ,IAAI,IAAI,GAAG;AACzB,QAAI,IAAI,OAAQ,QAAO,IAAI,OAAO,OAAO,GAAG;AAC5C,WAAO,OAAO,SAAS,EAAE;AAAA,EAC3B;AAEA,QAAM,iBAAiB,YACnB,EAAE,WAAW,OAAO,cAAc,WAAW,GAAG,SAAS,OAAO,UAAA,IAChE;AAEJ,8BACG,OAAA,EAAI,WAAW,KAAK,OAAO,MAAM,SAAS,GACzC,UAAA;AAAA,IAAA,oBAAC,OAAA,EAAI,WAAW,OAAO,gBAAgB,OAAO,gBAC5C,UAAA,qBAAC,SAAA,EAAM,WAAW,OAAO,OACvB,UAAA;AAAA,MAAA,oBAAC,WACC,UAAA,oBAAC,MAAA,EACE,UAAA,QAAQ,IAAI,CAAC,QACZ;AAAA,QAAC;AAAA,QAAA;AAAA,UAEC,OAAM;AAAA,UACN,WAAW,KAAK,OAAO,IAAI,EAAE,CAAC,OAAO,QAAQ,GAAG,IAAI,UAAU;AAAA,UAC9D,OAAO,IAAI,QAAQ,EAAE,OAAO,GAAG,IAAI,KAAK,KAAA,IAAS;AAAA,UACjD,aAAW,IAAI,WAAW,YAAY,IAAI,GAAG,IAAI;AAAA,UACjD,SAAS,IAAI,WAAW,MAAM,WAAW,IAAI,GAAG,IAAI;AAAA,UAEpD,UAAA;AAAA,YAAA,qBAAC,QAAA,EAAK,WAAW,OAAO,WACrB,UAAA;AAAA,cAAA,IAAI;AAAA,cACJ,IAAI,aAAY,uCAAW,YAAW,IAAI,OACzC,oBAAC,QAAA,EAAK,WAAW,OAAO,eAAe,eAAY,QAChD,oBAAU,cAAc,QAAQ,MAAM,IAAA,CACzC;AAAA,YAAA,GAEJ;AAAA,YACC,kBACC;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,WAAW,OAAO;AAAA,gBAClB,MAAK;AAAA,gBACL,oBAAiB;AAAA,gBACjB,aAAa,CAAC,MAAM;AAClB,oBAAE,eAAA;AACF,oBAAE,gBAAA;AACF,wBAAM,KAAM,EAAE,OAAuB,QAAQ,IAAI;AACjD,oCAAkB,IAAI,KAAK,EAAE,UAAS,yBAAI,gBAAe,YAAY;AAAA,gBACvE;AAAA,cAAA;AAAA,YAAA;AAAA,UACF;AAAA,QAAA;AAAA,QA1BG,IAAI;AAAA,MAAA,CA6BZ,GACH,EAAA,CACF;AAAA,MACA,oBAAC,WACE,UAAA,aAAa,KAAK,WAAW,IAC1B,MAAM,KAAK,EAAE,QAAQ,iBAAiB,CAAC,GAAG,MACxC,oBAAC,QAAyB,WAAW,OAAO,aACzC,UAAA,QAAQ,IAAI,CAAC,QACZ,oBAAC,QACC,UAAA,oBAAC,OAAA,EAAI,WAAW,OAAO,SAAA,CAAU,KAD1B,IAAI,GAEb,CACD,EAAA,GALM,YAAY,CAAC,EAMtB,CACD,IACD,KAAK,IAAI,CAAC,QACR;AAAA,QAAC;AAAA,QAAA;AAAA,UAEC,KAAK,IAAI,OAAO,iBAAiB,cAAc;AAAA,UAC/C,WAAW,KAAK,OAAO,KAAK;AAAA,YAC1B,CAAC,OAAO,WAAW,GAAG,IAAI,OAAO;AAAA,YACjC,CAAC,OAAO,YAAY,GAAG,CAAC,CAAC;AAAA,UAAA,CAC1B;AAAA,UACD,iBAAe,IAAI,OAAO,kBAAkB;AAAA,UAC5C,SAAS,aAAa,MAAM,WAAW,GAAG,IAAI;AAAA,UAE7C,UAAA,QAAQ,IAAI,CAAC,4BACX,MAAA,EAAiB,WAAW,OAAO,IACjC,qBAAW,KAAK,GAAG,EAAA,GADb,IAAI,GAEb,CACD;AAAA,QAAA;AAAA,QAbI,IAAI;AAAA,MAAA,CAeZ,EAAA,CACP;AAAA,IAAA,EAAA,CACF,EAAA,CACF;AAAA,IAEC,KAAK,WAAW,KAAK,CAAC,iCACpB,OAAA,EAAI,WAAW,OAAO,OAAO,UAAA,oBAAA,CAAiB;AAAA,IAGhD,WAAW,cACV,oBAAC,OAAA,EAAI,WAAW,OAAO,UACrB,UAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,WAAW,OAAO;AAAA,QAClB,SAAS;AAAA,QACT,UAAU;AAAA,QAET,2BAAiB,eAAe;AAAA,MAAA;AAAA,IAAA,EACnC,CACF;AAAA,EAAA,GAEJ;AAEJ;AAEA,kBAAkB,cAAc;"}

package/dist/index24.cjs

@@ -1,228 +1,42 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
-const react = require("react");
-const clsx = require("./index36.cjs");
-const useClickOutside = require("./index4.cjs");
-const constants = require("./index39.cjs");
-const MultiSelectDropdown_module = require("./index61.cjs");
-const arraysMatch = (a, b) => {
-  if (a.length !== b.length) return false;
-  const set = new Set(b);
-  return a.every((v) => set.has(v));
-};
-const MultiSelectDropdown = ({
-  label,
-  options,
-  selected,
-  onApply,
-  isLoading = false,
-  error = null,
-  allowCustomValues = false,
-  customTriggerLabel,
-  selectionMode
+const reactDom = require("react-dom");
+const clsx = require("./index38.cjs");
+const useEscapeKey = require("./index5.cjs");
+const Modal_module = require("./index56.cjs");
+const Modal = ({
+  open,
+  title,
+  onClose,
+  children,
+  footer,
+  portalTarget,
+  className,
+  bodyClassName,
+  style,
+  closeLabel = "×"
 }) => {
-  const [isOpen, setIsOpen] = react.useState(false);
-  const [searchTerm, setSearchTerm] = react.useState("");
-  const containerRef = react.useRef(null);
-  const normalizedOptions = react.useMemo(() => {
-    const map = /* @__PURE__ */ new Map();
-    options.forEach((opt) => map.set(opt.value, opt));
-    if (Array.isArray(selected)) {
-      selected.forEach((v) => {
-        if (v && !map.has(v)) map.set(v, { value: v });
-      });
-    }
-    return Array.from(map.values());
-  }, [options, selected]);
-  const filteredOptions = react.useMemo(() => {
-    if (!searchTerm.trim()) return normalizedOptions;
-    const term = searchTerm.trim().toLowerCase();
-    return normalizedOptions.filter((opt) => {
-      const lbl = opt.label ?? opt.value;
-      return lbl.toLowerCase().includes(term) || opt.value.toLowerCase().includes(term);
-    });
-  }, [normalizedOptions, searchTerm]);
-  const allOptionValues = react.useMemo(() => normalizedOptions.map((o) => o.value), [normalizedOptions]);
-  const initialSelection = react.useMemo(
-    () => Array.isArray(selected) && selected.length ? Array.from(new Set(selected)) : allOptionValues,
-    [selected, allOptionValues]
-  );
-  const [pendingSelection, setPendingSelection] = react.useState(initialSelection);
-  const closeAndReset = react.useCallback(() => {
-    setIsOpen(false);
-    setPendingSelection(initialSelection);
-    setSearchTerm("");
-  }, [initialSelection]);
-  useClickOutside.useClickOutside(containerRef, closeAndReset);
-  react.useEffect(() => {
-    if (isOpen) {
-      setPendingSelection(initialSelection);
-      setSearchTerm("");
-    }
-  }, [isOpen, initialSelection]);
-  react.useEffect(() => {
-    if (!isOpen) setPendingSelection(initialSelection);
-  }, [initialSelection, isOpen]);
-  const handleToggleOption = (value) => {
-    setPendingSelection((prev) => {
-      const unique = Array.from(new Set(prev));
-      return unique.includes(value) ? unique.filter((v) => v !== value) : [...unique, value];
-    });
-  };
-  const handleSelectAll = () => {
-    if (filteredOptions.length === 0) {
-      setPendingSelection([]);
-      return;
-    }
-    setPendingSelection(filteredOptions.map((o) => o.value));
-  };
-  const handleClearAll = () => setPendingSelection([]);
-  const handleApply = () => {
-    const unique = Array.from(new Set(pendingSelection));
-    const mode = unique.length === 0 || unique.length === normalizedOptions.length ? "all" : "custom";
-    onApply(unique, { selectionMode: mode });
-    setIsOpen(false);
-  };
-  const handleCancel = () => {
-    setPendingSelection(Array.from(new Set(Array.isArray(selected) ? selected : [])));
-    setIsOpen(false);
-  };
-  const pendingSet = react.useMemo(() => new Set(pendingSelection), [pendingSelection]);
-  const selectedSet = react.useMemo(() => new Set(Array.isArray(selected) ? selected : []), [selected]);
-  const hasChanges = !arraysMatch(Array.from(pendingSet), Array.from(selectedSet));
-  const totalOptions = normalizedOptions.length;
-  const selectedSize = selectedSet.size;
-  const pendingSize = pendingSet.size;
-  const isSelectedAll = selectedSize === 0 || selectedSize === totalOptions;
-  const isPendingAll = pendingSize === 0 || pendingSize === totalOptions;
-  const selectedCountValue = isSelectedAll ? totalOptions : selectedSize;
-  const pendingCountValue = isPendingAll ? totalOptions : pendingSize;
-  const isActiveFilter = selectionMode !== void 0 ? selectionMode === "custom" : !isSelectedAll;
-  const getSelectedLabel = () => {
-    if (isSelectedAll) return "All";
-    if (selectedSize === 1) {
-      const val = Array.from(selectedSet)[0];
-      const opt = normalizedOptions.find((o) => o.value === val);
-      return (opt == null ? void 0 : opt.label) || (opt == null ? void 0 : opt.value) || String(selectedCountValue);
-    }
-    return String(selectedCountValue);
-  };
-  const shouldDisableControls = isLoading || options.length === 0;
-  const normalizedSearch = searchTerm.trim();
-  const canCreateCustom = allowCustomValues && normalizedSearch.length > 0 && !normalizedOptions.some((o) => o.value.toLowerCase() === normalizedSearch.toLowerCase());
-  const handleCreateCustom = () => {
-    if (!normalizedSearch) return;
-    setPendingSelection((prev) => Array.from(/* @__PURE__ */ new Set([...prev, normalizedSearch])));
-    setSearchTerm("");
-  };
-  const handleClearFilter = (e) => {
-    e.preventDefault();
-    e.stopPropagation();
-    onApply([], { selectionMode: "all" });
-  };
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: MultiSelectDropdown_module.default.root, ref: containerRef, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "button",
-      {
-        type: "button",
-        className: clsx.clsx(MultiSelectDropdown_module.default.trigger, { [MultiSelectDropdown_module.default.active]: isOpen }),
-        onClick: () => setIsOpen((prev) => !prev),
-        "aria-expanded": isOpen,
-        "aria-haspopup": "listbox",
-        children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: MultiSelectDropdown_module.default.triggerContent, children: [
-          /* @__PURE__ */ jsxRuntime.jsx("svg", { className: MultiSelectDropdown_module.default.chevron, width: constants.ICON_SIZE.MD, height: constants.ICON_SIZE.MD, viewBox: constants.SVG_VIEWBOX, fill: "none", stroke: "currentColor", strokeWidth: constants.SVG_STROKE_WIDTH, strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "6 9 12 15 18 9" }) }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: MultiSelectDropdown_module.default.label, children: label }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: MultiSelectDropdown_module.default.valueGroup, children: [
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: MultiSelectDropdown_module.default.value, children: customTriggerLabel || getSelectedLabel() }),
-            isActiveFilter && /* @__PURE__ */ jsxRuntime.jsx("span", { className: MultiSelectDropdown_module.default.badge, children: selectedCountValue }),
-            isActiveFilter && /* @__PURE__ */ jsxRuntime.jsx(
-              "div",
-              {
-                role: "button",
-                tabIndex: 0,
-                className: MultiSelectDropdown_module.default.clear,
-                onClick: handleClearFilter,
-                onKeyDown: (e) => {
-                  if (e.key === "Enter" || e.key === " ") {
-                    e.preventDefault();
-                    handleClearFilter(e);
-                  }
-                },
-                "aria-label": `Clear ${label} filter`,
-                children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: constants.ICON_SIZE.SM, height: constants.ICON_SIZE.SM, viewBox: constants.SVG_VIEWBOX, fill: "none", stroke: "currentColor", strokeWidth: constants.SVG_STROKE_WIDTH, strokeLinecap: "round", strokeLinejoin: "round", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
-                  /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
-                ] })
-              }
-            )
-          ] })
-        ] })
-      }
-    ),
-    isOpen && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: MultiSelectDropdown_module.default.panel, role: "dialog", "aria-label": `${label} filter`, children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: MultiSelectDropdown_module.default.header, children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "input",
-          {
-            type: "search",
-            className: MultiSelectDropdown_module.default.search,
-            placeholder: `Search ${label.toLowerCase()}`,
-            value: searchTerm,
-            onChange: (e) => setSearchTerm(e.target.value),
-            disabled: shouldDisableControls
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: MultiSelectDropdown_module.default.headerActions, children: [
-          /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: MultiSelectDropdown_module.default.chip, onClick: handleSelectAll, disabled: shouldDisableControls, children: "Select all" }),
-          /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: clsx.clsx(MultiSelectDropdown_module.default.chip, MultiSelectDropdown_module.default.chipGhost), onClick: handleClearAll, disabled: pendingSize === 0, children: "Deselect all" })
-        ] })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: MultiSelectDropdown_module.default.list, role: "listbox", children: [
-        isLoading && /* @__PURE__ */ jsxRuntime.jsx("p", { className: MultiSelectDropdown_module.default.status, children: "Loading options..." }),
-        !isLoading && error && /* @__PURE__ */ jsxRuntime.jsx("p", { className: clsx.clsx(MultiSelectDropdown_module.default.status, MultiSelectDropdown_module.default.statusError), children: error }),
-        !isLoading && !error && filteredOptions.length === 0 && /* @__PURE__ */ jsxRuntime.jsx("p", { className: MultiSelectDropdown_module.default.status, children: "No matches" }),
-        !isLoading && !error && filteredOptions.map((opt) => {
-          const checked = pendingSet.has(opt.value);
-          return /* @__PURE__ */ jsxRuntime.jsxs("label", { className: MultiSelectDropdown_module.default.option, children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "input",
-              {
-                type: "checkbox",
-                checked,
-                onChange: () => handleToggleOption(opt.value),
-                "aria-checked": checked
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: MultiSelectDropdown_module.default.optionLabel, children: [
-              opt.label ?? opt.value,
-              opt.count !== void 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: MultiSelectDropdown_module.default.optionCount, children: opt.count })
-            ] })
-          ] }, opt.value);
-        }),
-        !isLoading && !error && canCreateCustom && /* @__PURE__ */ jsxRuntime.jsxs("button", { type: "button", className: MultiSelectDropdown_module.default.create, onClick: handleCreateCustom, children: [
-          'Use "',
-          normalizedSearch,
-          '"'
-        ] })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: MultiSelectDropdown_module.default.footer, children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: MultiSelectDropdown_module.default.selection, children: [
-          isPendingAll ? "All selected" : `${pendingCountValue} selected`,
-          hasChanges && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: MultiSelectDropdown_module.default.selectionDelta, children: [
-            "(",
-            pendingCountValue - selectedCountValue >= 0 ? "+" : "",
-            pendingCountValue - selectedCountValue,
-            ")"
-          ] })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: MultiSelectDropdown_module.default.footerActions, children: [
-          /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: clsx.clsx(MultiSelectDropdown_module.default.chip, MultiSelectDropdown_module.default.chipGhost), onClick: handleCancel, children: "Cancel" }),
-          /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: MultiSelectDropdown_module.default.chip, onClick: handleApply, disabled: !hasChanges, children: "Apply" })
-        ] })
-      ] })
-    ] })
-  ] });
+  useEscapeKey.useEscapeKey(onClose, open);
+  if (!open) return null;
+  const modalContent = /* @__PURE__ */ jsxRuntime.jsx("div", { className: Modal_module.default.overlay, role: "dialog", "aria-modal": "true", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx.clsx(Modal_module.default.root, className), style, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: Modal_module.default.header, children: [
+      title ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: Modal_module.default.title, children: title }) : /* @__PURE__ */ jsxRuntime.jsx("span", {}),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          onClick: onClose,
+          className: Modal_module.default.closeBtn,
+          "aria-label": "Close modal",
+          children: closeLabel
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx.clsx(Modal_module.default.body, bodyClassName), children }),
+    footer && /* @__PURE__ */ jsxRuntime.jsx("div", { className: Modal_module.default.footer, children: footer })
+  ] }) });
+  return reactDom.createPortal(modalContent, portalTarget ?? document.body);
 };
-exports.MultiSelectDropdown = MultiSelectDropdown;
+exports.Modal = Modal;
 //# sourceMappingURL=index24.cjs.map

package/dist/index24.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index24.cjs","sources":["../src/composites/MultiSelectDropdown/MultiSelectDropdown.tsx"],"sourcesContent":["import { useState, useRef, useEffect, useMemo, useCallback } from 'react';\nimport clsx from 'clsx';\nimport { useClickOutside } from '../../hooks/useClickOutside';\nimport { ICON_SIZE, SVG_VIEWBOX, SVG_STROKE_WIDTH } from '../../constants';\nimport styles from './MultiSelectDropdown.module.css';\n\nexport interface MultiSelectOption {\n  value: string;\n  label?: string;\n  count?: number;\n}\n\nexport interface MultiSelectDropdownProps {\n  /** Label displayed on the trigger button. */\n  label: string;\n  /** Available options. */\n  options: MultiSelectOption[];\n  /** Currently selected values (controlled). */\n  selected: string[];\n  /** Called when the user applies a new selection. */\n  onApply: (values: string[], metadata: { selectionMode: 'all' | 'custom' }) => void;\n  /** Show loading indicator and disable controls. */\n  isLoading?: boolean;\n  /** Error message to display in the option list. */\n  error?: string | null;\n  /** Allow creating options from the search term. */\n  allowCustomValues?: boolean;\n  /** Override the trigger value label. */\n  customTriggerLabel?: string;\n  /** Explicit selection mode override. */\n  selectionMode?: 'all' | 'custom';\n}\n\nconst arraysMatch = (a: string[], b: string[]): boolean => {\n  if (a.length !== b.length) return false;\n  const set = new Set(b);\n  return a.every((v) => set.has(v));\n};\n\nexport const MultiSelectDropdown = ({\n  label,\n  options,\n  selected,\n  onApply,\n  isLoading = false,\n  error = null,\n  allowCustomValues = false,\n  customTriggerLabel,\n  selectionMode,\n}: MultiSelectDropdownProps) => {\n  const [isOpen, setIsOpen] = useState(false);\n  const [searchTerm, setSearchTerm] = useState('');\n  const containerRef = useRef<HTMLDivElement>(null);\n\n  const normalizedOptions = useMemo<MultiSelectOption[]>(() => {\n    const map = new Map<string, MultiSelectOption>();\n    options.forEach((opt) => map.set(opt.value, opt));\n    if (Array.isArray(selected)) {\n      selected.forEach((v) => {\n        if (v && !map.has(v)) map.set(v, { value: v });\n      });\n    }\n    return Array.from(map.values());\n  }, [options, selected]);\n\n  const filteredOptions = useMemo<MultiSelectOption[]>(() => {\n    if (!searchTerm.trim()) return normalizedOptions;\n    const term = searchTerm.trim().toLowerCase();\n    return normalizedOptions.filter((opt) => {\n      const lbl = opt.label ?? opt.value;\n      return lbl.toLowerCase().includes(term) || opt.value.toLowerCase().includes(term);\n    });\n  }, [normalizedOptions, searchTerm]);\n\n  const allOptionValues = useMemo(() => normalizedOptions.map((o) => o.value), [normalizedOptions]);\n\n  const initialSelection = useMemo(\n    () => (Array.isArray(selected) && selected.length ? Array.from(new Set(selected)) : allOptionValues),\n    [selected, allOptionValues],\n  );\n\n  const [pendingSelection, setPendingSelection] = useState<string[]>(initialSelection);\n\n  const closeAndReset = useCallback(() => {\n    setIsOpen(false);\n    setPendingSelection(initialSelection);\n    setSearchTerm('');\n  }, [initialSelection]);\n\n  useClickOutside(containerRef, closeAndReset);\n\n  useEffect(() => {\n    if (isOpen) {\n      setPendingSelection(initialSelection);\n      setSearchTerm('');\n    }\n  }, [isOpen, initialSelection]);\n\n  useEffect(() => {\n    if (!isOpen) setPendingSelection(initialSelection);\n  }, [initialSelection, isOpen]);\n\n  const handleToggleOption = (value: string) => {\n    setPendingSelection((prev) => {\n      const unique = Array.from(new Set(prev));\n      return unique.includes(value) ? unique.filter((v) => v !== value) : [...unique, value];\n    });\n  };\n\n  const handleSelectAll = () => {\n    if (filteredOptions.length === 0) {\n      setPendingSelection([]);\n      return;\n    }\n    setPendingSelection(filteredOptions.map((o) => o.value));\n  };\n\n  const handleClearAll = () => setPendingSelection([]);\n\n  const handleApply = () => {\n    const unique = Array.from(new Set(pendingSelection));\n    const mode: 'all' | 'custom' =\n      unique.length === 0 || unique.length === normalizedOptions.length ? 'all' : 'custom';\n    onApply(unique, { selectionMode: mode });\n    setIsOpen(false);\n  };\n\n  const handleCancel = () => {\n    setPendingSelection(Array.from(new Set(Array.isArray(selected) ? selected : [])));\n    setIsOpen(false);\n  };\n\n  const pendingSet = useMemo(() => new Set(pendingSelection), [pendingSelection]);\n  const selectedSet = useMemo(() => new Set(Array.isArray(selected) ? selected : []), [selected]);\n  const hasChanges = !arraysMatch(Array.from(pendingSet), Array.from(selectedSet));\n\n  const totalOptions = normalizedOptions.length;\n  const selectedSize = selectedSet.size;\n  const pendingSize = pendingSet.size;\n  const isSelectedAll = selectedSize === 0 || selectedSize === totalOptions;\n  const isPendingAll = pendingSize === 0 || pendingSize === totalOptions;\n  const selectedCountValue = isSelectedAll ? totalOptions : selectedSize;\n  const pendingCountValue = isPendingAll ? totalOptions : pendingSize;\n\n  const isActiveFilter = selectionMode !== undefined ? selectionMode === 'custom' : !isSelectedAll;\n\n  const getSelectedLabel = (): string => {\n    if (isSelectedAll) return 'All';\n    if (selectedSize === 1) {\n      const val = Array.from(selectedSet)[0];\n      const opt = normalizedOptions.find((o) => o.value === val);\n      return opt?.label || opt?.value || String(selectedCountValue);\n    }\n    return String(selectedCountValue);\n  };\n\n  const shouldDisableControls = isLoading || options.length === 0;\n\n  const normalizedSearch = searchTerm.trim();\n  const canCreateCustom =\n    allowCustomValues &&\n    normalizedSearch.length > 0 &&\n    !normalizedOptions.some((o) => o.value.toLowerCase() === normalizedSearch.toLowerCase());\n\n  const handleCreateCustom = () => {\n    if (!normalizedSearch) return;\n    setPendingSelection((prev) => Array.from(new Set([...prev, normalizedSearch])));\n    setSearchTerm('');\n  };\n\n  const handleClearFilter = (e: React.MouseEvent) => {\n    e.preventDefault();\n    e.stopPropagation();\n    onApply([], { selectionMode: 'all' });\n  };\n\n  return (\n    <div className={styles.root} ref={containerRef}>\n      <button\n        type=\"button\"\n        className={clsx(styles.trigger, { [styles.active]: isOpen })}\n        onClick={() => setIsOpen((prev) => !prev)}\n        aria-expanded={isOpen}\n        aria-haspopup=\"listbox\"\n      >\n        <div className={styles.triggerContent}>\n          <svg className={styles.chevron} width={ICON_SIZE.MD} height={ICON_SIZE.MD} viewBox={SVG_VIEWBOX} fill=\"none\" stroke=\"currentColor\" strokeWidth={SVG_STROKE_WIDTH} strokeLinecap=\"round\" strokeLinejoin=\"round\">\n            <polyline points=\"6 9 12 15 18 9\" />\n          </svg>\n          <span className={styles.label}>{label}</span>\n          <div className={styles.valueGroup}>\n            <span className={styles.value}>{customTriggerLabel || getSelectedLabel()}</span>\n            {isActiveFilter && (\n              <span className={styles.badge}>{selectedCountValue}</span>\n            )}\n            {isActiveFilter && (\n              <div\n                role=\"button\"\n                tabIndex={0}\n                className={styles.clear}\n                onClick={handleClearFilter}\n                onKeyDown={(e) => {\n                  if (e.key === 'Enter' || e.key === ' ') {\n                    e.preventDefault();\n                    handleClearFilter(e as unknown as React.MouseEvent);\n                  }\n                }}\n                aria-label={`Clear ${label} filter`}\n              >\n                <svg width={ICON_SIZE.SM} height={ICON_SIZE.SM} viewBox={SVG_VIEWBOX} fill=\"none\" stroke=\"currentColor\" strokeWidth={SVG_STROKE_WIDTH} strokeLinecap=\"round\" strokeLinejoin=\"round\">\n                  <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\" />\n                  <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\" />\n                </svg>\n              </div>\n            )}\n          </div>\n        </div>\n      </button>\n\n      {isOpen && (\n        <div className={styles.panel} role=\"dialog\" aria-label={`${label} filter`}>\n          <div className={styles.header}>\n            <input\n              type=\"search\"\n              className={styles.search}\n              placeholder={`Search ${label.toLowerCase()}`}\n              value={searchTerm}\n              onChange={(e) => setSearchTerm(e.target.value)}\n              disabled={shouldDisableControls}\n            />\n            <div className={styles.headerActions}>\n              <button type=\"button\" className={styles.chip} onClick={handleSelectAll} disabled={shouldDisableControls}>\n                Select all\n              </button>\n              <button type=\"button\" className={clsx(styles.chip, styles.chipGhost)} onClick={handleClearAll} disabled={pendingSize === 0}>\n                Deselect all\n              </button>\n            </div>\n          </div>\n\n          <div className={styles.list} role=\"listbox\">\n            {isLoading && <p className={styles.status}>Loading options...</p>}\n            {!isLoading && error && <p className={clsx(styles.status, styles.statusError)}>{error}</p>}\n            {!isLoading && !error && filteredOptions.length === 0 && (\n              <p className={styles.status}>No matches</p>\n            )}\n            {!isLoading &&\n              !error &&\n              filteredOptions.map((opt) => {\n                const checked = pendingSet.has(opt.value);\n                return (\n                  <label key={opt.value} className={styles.option}>\n                    <input\n                      type=\"checkbox\"\n                      checked={checked}\n                      onChange={() => handleToggleOption(opt.value)}\n                      aria-checked={checked}\n                    />\n                    <span className={styles.optionLabel}>\n                      {opt.label ?? opt.value}\n                      {opt.count !== undefined && (\n                        <span className={styles.optionCount}>{opt.count}</span>\n                      )}\n                    </span>\n                  </label>\n                );\n              })}\n            {!isLoading && !error && canCreateCustom && (\n              <button type=\"button\" className={styles.create} onClick={handleCreateCustom}>\n                Use &quot;{normalizedSearch}&quot;\n              </button>\n            )}\n          </div>\n\n          <div className={styles.footer}>\n            <span className={styles.selection}>\n              {isPendingAll ? 'All selected' : `${pendingCountValue} selected`}\n              {hasChanges && (\n                <span className={styles.selectionDelta}>\n                  ({pendingCountValue - selectedCountValue >= 0 ? '+' : ''}\n                  {pendingCountValue - selectedCountValue})\n                </span>\n              )}\n            </span>\n            <div className={styles.footerActions}>\n              <button type=\"button\" className={clsx(styles.chip, styles.chipGhost)} onClick={handleCancel}>\n                Cancel\n              </button>\n              <button type=\"button\" className={styles.chip} onClick={handleApply} disabled={!hasChanges}>\n                Apply\n              </button>\n            </div>\n          </div>\n        </div>\n      )}\n    </div>\n  );\n};\n"],"names":["useState","useRef","useMemo","useCallback","useClickOutside","useEffect","styles","jsx","clsx","jsxs","ICON_SIZE","SVG_VIEWBOX","SVG_STROKE_WIDTH"],"mappings":"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"}
+{"version":3,"file":"index24.cjs","sources":["../src/primitives/Modal/Modal.tsx"],"sourcesContent":["import { type CSSProperties, type ReactNode } from 'react';\nimport { createPortal } from 'react-dom';\nimport clsx from 'clsx';\nimport { useEscapeKey } from '../../hooks/useEscapeKey';\nimport styles from './Modal.module.css';\n\nexport interface ModalProps {\n  open: boolean;\n  title?: ReactNode;\n  onClose: () => void;\n  children: ReactNode;\n  footer?: ReactNode;\n  portalTarget?: HTMLElement;\n  className?: string;\n  bodyClassName?: string;\n  style?: CSSProperties;\n  closeLabel?: ReactNode;\n}\n\nexport const Modal = ({\n  open,\n  title,\n  onClose,\n  children,\n  footer,\n  portalTarget,\n  className,\n  bodyClassName,\n  style,\n  closeLabel = '\\u00D7',\n}: ModalProps) => {\n  useEscapeKey(onClose, open);\n\n  if (!open) return null;\n\n  const modalContent = (\n    <div className={styles.overlay} role=\"dialog\" aria-modal=\"true\">\n      <div className={clsx(styles.root, className)} style={style}>\n        <div className={styles.header}>\n          {title ? <h2 className={styles.title}>{title}</h2> : <span />}\n          <button\n            type=\"button\"\n            onClick={onClose}\n            className={styles.closeBtn}\n            aria-label=\"Close modal\"\n          >\n            {closeLabel}\n          </button>\n        </div>\n        <div className={clsx(styles.body, bodyClassName)}>{children}</div>\n        {footer && <div className={styles.footer}>{footer}</div>}\n      </div>\n    </div>\n  );\n\n  return createPortal(modalContent, portalTarget ?? document.body);\n};\n"],"names":["useEscapeKey","jsx","styles","jsxs","clsx","createPortal"],"mappings":";;;;;;;AAmBO,MAAM,QAAQ,CAAC;AAAA,EACpB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,aAAa;AACf,MAAkB;AAChBA,eAAAA,aAAa,SAAS,IAAI;AAE1B,MAAI,CAAC,KAAM,QAAO;AAElB,QAAM,eACJC,+BAAC,OAAA,EAAI,WAAWC,aAAAA,QAAO,SAAS,MAAK,UAAS,cAAW,QACvD,UAAAC,gCAAC,SAAI,WAAWC,KAAAA,KAAKF,qBAAO,MAAM,SAAS,GAAG,OAC5C,UAAA;AAAA,IAAAC,2BAAAA,KAAC,OAAA,EAAI,WAAWD,aAAAA,QAAO,QACpB,UAAA;AAAA,MAAA,QAAQD,2BAAAA,IAAC,QAAG,WAAWC,aAAAA,QAAO,OAAQ,UAAA,MAAA,CAAM,mCAAS,QAAA,CAAA,CAAK;AAAA,MAC3DD,2BAAAA;AAAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,SAAS;AAAA,UACT,WAAWC,aAAAA,QAAO;AAAA,UAClB,cAAW;AAAA,UAEV,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IACH,GACF;AAAA,IACAD,+BAAC,SAAI,WAAWG,KAAAA,KAAKF,aAAAA,QAAO,MAAM,aAAa,GAAI,UAAS;AAAA,IAC3D,UAAUD,2BAAAA,IAAC,OAAA,EAAI,WAAWC,aAAAA,QAAO,QAAS,UAAA,OAAA,CAAO;AAAA,EAAA,EAAA,CACpD,EAAA,CACF;AAGF,SAAOG,SAAAA,aAAa,cAAc,gBAAgB,SAAS,IAAI;AACjE;;"}