@bricks-toolkit/toolkit 0.1.1 → 0.1.2

package/dist/chunk-OEU5VG3D.cjs

@@ -0,0 +1,362 @@
+'use strict';
+
+var chunkL5VQZZVR_cjs = require('./chunk-L5VQZZVR.cjs');
+var react = require('react');
+var solid = require('@heroicons/react/20/solid');
+var outline = require('@heroicons/react/24/outline');
+var jsxRuntime = require('react/jsx-runtime');
+
+var DEFAULT_PAGE_SIZES = [10, 20, 50];
+function Pagination({
+  total,
+  page,
+  pageSize,
+  totalPages: propTotalPages,
+  hasNextPage: propHasNextPage,
+  hasPrevPage: propHasPrevPage,
+  onPageChange,
+  onPageSizeChange,
+  pageSizeOptions = DEFAULT_PAGE_SIZES,
+  showSizeChanger,
+  className
+}) {
+  const totalPages = propTotalPages ?? Math.max(1, Math.ceil(total / pageSize));
+  const canPrev = propHasPrevPage ?? page > 1;
+  const canNext = propHasNextPage ?? page < totalPages;
+  const pageNumbers = buildPageNumbers(page, totalPages);
+  const from = Math.min((page - 1) * pageSize + 1, total);
+  const to = Math.min(page * pageSize, total);
+  const showPicker = showSizeChanger ?? onPageSizeChange != null;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: chunkL5VQZZVR_cjs.cn(
+        "flex flex-col sm:flex-row items-center justify-between gap-3 py-3 px-4 border-t border-border bg-surface-secondary/50 rounded-b-xl text-sm",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-text-secondary shrink-0", children: total === 0 ? "No items" : `${String(from)}\u2013${String(to)} of ${String(total)} items` }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 flex-wrap justify-center", children: [
+          showPicker && onPageSizeChange != null && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-text-muted", children: "Rows:" }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "select",
+              {
+                value: pageSize,
+                "aria-label": "Rows per page",
+                onChange: (e) => {
+                  onPageSizeChange(Number(e.target.value));
+                },
+                className: "border border-border rounded-sm py-1 pl-2 pr-6 text-sm text-text bg-surface focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary cursor-pointer transition-all duration-normal",
+                children: pageSizeOptions.map((s) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: s, children: s }, s))
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("nav", { "aria-label": "Pagination", className: "flex items-center gap-1", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              PageButton,
+              {
+                onClick: () => {
+                  onPageChange(1);
+                },
+                disabled: !canPrev,
+                "aria-label": "First page",
+                children: /* @__PURE__ */ jsxRuntime.jsx(outline.ChevronDoubleLeftIcon, { className: "w-3.5 h-3.5" })
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              PageButton,
+              {
+                onClick: () => {
+                  onPageChange(page - 1);
+                },
+                disabled: !canPrev,
+                "aria-label": "Previous page",
+                children: /* @__PURE__ */ jsxRuntime.jsx(outline.ChevronLeftIcon, { className: "w-3.5 h-3.5" })
+              }
+            ),
+            pageNumbers.map(
+              (num, idx) => num === "\u2026" ? /* @__PURE__ */ jsxRuntime.jsx(
+                "span",
+                {
+                  className: "w-8 text-center text-text-muted/60 select-none",
+                  "aria-hidden": "true",
+                  children: "\u2026"
+                },
+                `ellipsis-${String(idx)}`
+              ) : /* @__PURE__ */ jsxRuntime.jsx(
+                PageButton,
+                {
+                  onClick: () => {
+                    onPageChange(num);
+                  },
+                  active: num === page,
+                  "aria-label": `Page ${String(num)}`,
+                  "aria-current": num === page ? "page" : void 0,
+                  children: num
+                },
+                num
+              )
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              PageButton,
+              {
+                onClick: () => {
+                  onPageChange(page + 1);
+                },
+                disabled: !canNext,
+                "aria-label": "Next page",
+                children: /* @__PURE__ */ jsxRuntime.jsx(outline.ChevronRightIcon, { className: "w-3.5 h-3.5" })
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              PageButton,
+              {
+                onClick: () => {
+                  onPageChange(totalPages);
+                },
+                disabled: !canNext,
+                "aria-label": "Last page",
+                children: /* @__PURE__ */ jsxRuntime.jsx(outline.ChevronDoubleRightIcon, { className: "w-3.5 h-3.5" })
+              }
+            )
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+function PageButton({
+  children,
+  active = false,
+  disabled = false,
+  className,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      type: "button",
+      disabled,
+      className: chunkL5VQZZVR_cjs.cn(
+        "min-w-[32px] h-8 px-2 rounded-sm font-medium transition-all duration-normal text-sm flex items-center justify-center",
+        active ? "bg-primary text-text-inverse shadow-sm" : "text-text-secondary hover:bg-hover active:bg-active",
+        disabled && "opacity-40 cursor-not-allowed pointer-events-none",
+        className
+      ),
+      ...rest,
+      children
+    }
+  );
+}
+function buildPageNumbers(current, total) {
+  if (total <= 7) return Array.from({ length: total }, (_, i) => i + 1);
+  const pages = [1];
+  if (current > 3) pages.push("\u2026");
+  const start = Math.max(2, current - 1);
+  const end = Math.min(total - 1, current + 1);
+  for (let i = start; i <= end; i++) pages.push(i);
+  if (current < total - 2) pages.push("\u2026");
+  pages.push(total);
+  return pages;
+}
+var cellPadding = {
+  sm: "px-3 py-1.5 text-xs",
+  md: "px-4 py-3 text-sm",
+  lg: "px-5 py-4 text-base"
+};
+var headerPadding = {
+  sm: "px-3 py-2 text-xs",
+  md: "px-4 py-3 text-sm",
+  lg: "px-5 py-4 text-base"
+};
+function SortIcon({ direction }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("span", { "aria-hidden": "true", className: "inline-flex flex-col ml-1 -space-y-1.5", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      solid.ChevronUpIcon,
+      {
+        className: chunkL5VQZZVR_cjs.cn(
+          "w-3.5 h-3.5 transition-all duration-normal",
+          direction === "asc" ? "text-primary" : "text-text-muted/30"
+        )
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      solid.ChevronDownIcon,
+      {
+        className: chunkL5VQZZVR_cjs.cn(
+          "w-3.5 h-3.5 transition-all duration-normal",
+          direction === "desc" ? "text-primary" : "text-text-muted/30"
+        )
+      }
+    )
+  ] });
+}
+function SkeletonRows({ cols, size }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: Array.from({ length: 5 }).map((_, ri) => /* @__PURE__ */ jsxRuntime.jsx("tr", { children: Array.from({ length: cols }).map((__, ci) => /* @__PURE__ */ jsxRuntime.jsx("td", { className: cellPadding[size], children: /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: "h-4 bg-surface-secondary rounded-sm animate-pulse",
+      style: { width: `${String(Math.floor(60 + Math.random() * 30))}%` }
+    }
+  ) }, ci)) }, ri)) });
+}
+function Table({
+  data,
+  columns,
+  rowKey,
+  loading = false,
+  emptyMessage = "No data",
+  striped = false,
+  bordered = false,
+  hoverable = true,
+  stickyHeader = false,
+  size = "md",
+  sortState: externalSort,
+  onSortChange,
+  className,
+  tableClassName,
+  pagination,
+  headerVariant = "light"
+}) {
+  const [internalSort, setInternalSort] = react.useState(null);
+  const activeSort = externalSort ?? internalSort;
+  const handleHeaderClick = react.useCallback(
+    (col) => {
+      if (!col.sortable) return;
+      const next = {
+        key: col.key,
+        direction: activeSort?.key === col.key && activeSort.direction === "asc" ? "desc" : "asc"
+      };
+      if (onSortChange) {
+        onSortChange(next);
+      } else {
+        setInternalSort(next);
+      }
+    },
+    [activeSort, onSortChange]
+  );
+  const sortedData = react.useMemo(() => {
+    if (!activeSort || onSortChange) return data;
+    return [...data].sort((a, b) => {
+      const aVal = a[activeSort.key];
+      const bVal = b[activeSort.key];
+      const cmp = typeof aVal === "string" && typeof bVal === "string" ? aVal.localeCompare(bVal) : String(aVal).localeCompare(String(bVal));
+      return activeSort.direction === "asc" ? cmp : -cmp;
+    });
+  }, [data, activeSort, onSortChange]);
+  const isEmpty = !loading && sortedData.length === 0;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: chunkL5VQZZVR_cjs.cn(
+        "w-full overflow-hidden rounded-xl border border-border bg-surface shadow-sm transition-colors duration-normal",
+        bordered && "border",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-x-auto", children: /* @__PURE__ */ jsxRuntime.jsxs("table", { className: chunkL5VQZZVR_cjs.cn("w-full border-collapse", tableClassName), children: [
+          /* @__PURE__ */ jsxRuntime.jsx("thead", { className: chunkL5VQZZVR_cjs.cn(stickyHeader && "sticky top-0 z-dropdown"), children: /* @__PURE__ */ jsxRuntime.jsx(
+            "tr",
+            {
+              className: chunkL5VQZZVR_cjs.cn(
+                "border-b border-border transition-colors duration-normal",
+                headerVariant === "light" ? "bg-surface-secondary" : "bg-black"
+              ),
+              children: columns.map((col) => {
+                const isSorted = activeSort?.key === col.key;
+                const dir = isSorted ? activeSort.direction : null;
+                return /* @__PURE__ */ jsxRuntime.jsx(
+                  "th",
+                  {
+                    scope: "col",
+                    style: { width: col.width },
+                    "aria-sort": isSorted ? dir === "asc" ? "ascending" : "descending" : col.sortable ? "none" : void 0,
+                    className: chunkL5VQZZVR_cjs.cn(
+                      headerPadding[size],
+                      "font-black tracking-widest uppercase whitespace-nowrap select-none transition-all duration-normal",
+                      headerVariant === "light" ? "text-text-secondary" : "text-white",
+                      col.align === "center" && "text-center",
+                      col.align === "right" && "text-right",
+                      col.sortable && "cursor-pointer hover:bg-hover",
+                      headerVariant === "dark" && col.sortable && "hover:bg-white/10",
+                      bordered && "border border-border",
+                      col.headerClassName
+                    ),
+                    onClick: col.sortable ? () => {
+                      handleHeaderClick(col);
+                    } : void 0,
+                    onKeyDown: col.sortable ? (e) => {
+                      if (e.key === "Enter" || e.key === " ") {
+                        e.preventDefault();
+                        handleHeaderClick(col);
+                      }
+                    } : void 0,
+                    tabIndex: col.sortable ? 0 : void 0,
+                    children: /* @__PURE__ */ jsxRuntime.jsxs(
+                      "span",
+                      {
+                        className: chunkL5VQZZVR_cjs.cn(
+                          "flex items-center gap-1",
+                          col.align === "center" && "justify-center",
+                          col.align === "right" && "justify-end"
+                        ),
+                        children: [
+                          col.header,
+                          col.sortable && /* @__PURE__ */ jsxRuntime.jsx(SortIcon, { direction: dir })
+                        ]
+                      }
+                    )
+                  },
+                  col.key
+                );
+              })
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: loading ? /* @__PURE__ */ jsxRuntime.jsx(SkeletonRows, { cols: columns.length, size }) : isEmpty ? /* @__PURE__ */ jsxRuntime.jsx("tr", { children: /* @__PURE__ */ jsxRuntime.jsx(
+            "td",
+            {
+              colSpan: columns.length,
+              className: "py-16 text-center text-text-muted text-sm font-medium",
+              children: emptyMessage
+            }
+          ) }) : sortedData.map((row, ri) => /* @__PURE__ */ jsxRuntime.jsx(
+            "tr",
+            {
+              className: chunkL5VQZZVR_cjs.cn(
+                "border-b border-border-light last:border-0 transition-colors duration-fast",
+                striped && ri % 2 !== 0 && "bg-surface-secondary/40",
+                hoverable && "hover:bg-hover/60"
+              ),
+              children: columns.map((col) => /* @__PURE__ */ jsxRuntime.jsx(
+                "td",
+                {
+                  className: chunkL5VQZZVR_cjs.cn(
+                    cellPadding[size],
+                    "text-text font-medium",
+                    col.align === "center" && "text-center",
+                    col.align === "right" && "text-right",
+                    bordered && "border border-border",
+                    col.cellClassName
+                  ),
+                  children: col.render ? col.render(row, ri) : (() => {
+                    const v = row[col.key];
+                    if (v === null || v === void 0) return "";
+                    if (typeof v === "object") return JSON.stringify(v);
+                    return String(v);
+                  })()
+                },
+                col.key
+              ))
+            },
+            rowKey(row)
+          )) })
+        ] }) }),
+        pagination && /* @__PURE__ */ jsxRuntime.jsx(Pagination, { ...pagination })
+      ]
+    }
+  );
+}
+
+exports.Pagination = Pagination;
+exports.Table = Table;

package/dist/chunk-OPOCCRJG.cjs

@@ -0,0 +1,193 @@
+'use strict';
+
+var chunkL5VQZZVR_cjs = require('./chunk-L5VQZZVR.cjs');
+var react = require('react');
+var outline = require('@heroicons/react/24/outline');
+var reactDom = require('react-dom');
+var jsxRuntime = require('react/jsx-runtime');
+
+var sizeClasses = {
+  xs: "max-w-xs",
+  sm: "max-w-sm",
+  md: "max-w-md",
+  lg: "max-w-lg",
+  xl: "max-w-xl",
+  "2xl": "max-w-2xl",
+  "3xl": "max-w-3xl",
+  "4xl": "max-w-4xl",
+  "5xl": "max-w-5xl",
+  "6xl": "max-w-6xl",
+  "7xl": "max-w-7xl",
+  full: "max-w-full m-0 rounded-none h-full"
+};
+function Dialog({
+  isOpen,
+  onClose,
+  children,
+  size = "md",
+  isCentered = false,
+  closeOnOverlayClick = true,
+  closeOnEsc = true,
+  trapFocus = true,
+  lockScroll = true,
+  contentClassName,
+  overlayClassName,
+  showBackdrop = true,
+  isModal = true,
+  ariaLabel,
+  ariaLabelledby,
+  ariaDescribedby
+}) {
+  const dialogRef = react.useRef(null);
+  const previousFocusRef = react.useRef(null);
+  const handleClose = react.useCallback(() => {
+    onClose();
+  }, [onClose]);
+  react.useEffect(() => {
+    if (isOpen) {
+      previousFocusRef.current = document.activeElement;
+      if (isModal && lockScroll) {
+        document.body.style.overflow = "hidden";
+      }
+      const handleKeyDown = (e) => {
+        if (closeOnEsc && e.key === "Escape") {
+          handleClose();
+          return;
+        }
+        if (isModal && trapFocus && e.key === "Tab") {
+          const focusableElements = dialogRef.current?.querySelectorAll(
+            'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+          );
+          if (!focusableElements || focusableElements.length === 0) return;
+          const firstElement = focusableElements[0];
+          const lastElement = focusableElements[focusableElements.length - 1];
+          if (e.shiftKey) {
+            if (document.activeElement === firstElement) {
+              lastElement.focus();
+              e.preventDefault();
+            }
+          } else {
+            if (document.activeElement === lastElement) {
+              firstElement.focus();
+              e.preventDefault();
+            }
+          }
+        }
+      };
+      document.addEventListener("keydown", handleKeyDown);
+      if (isModal) {
+        setTimeout(() => {
+          const firstFocusable = dialogRef.current?.querySelector(
+            'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+          );
+          if (firstFocusable != null) {
+            firstFocusable.focus();
+          } else {
+            dialogRef.current?.focus();
+          }
+        }, 0);
+      }
+      return () => {
+        document.removeEventListener("keydown", handleKeyDown);
+        if (isModal && lockScroll) {
+          document.body.style.overflow = "";
+        }
+        previousFocusRef.current?.focus();
+      };
+    }
+    return void 0;
+  }, [isOpen, closeOnEsc, handleClose, lockScroll, trapFocus, isModal]);
+  if (!isOpen) return null;
+  return reactDom.createPortal(
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        role: "presentation",
+        className: chunkL5VQZZVR_cjs.cn(
+          "fixed inset-0 z-50 flex items-start justify-center p-4 sm:p-6 overflow-y-auto transition-opacity duration-300",
+          showBackdrop && "bg-black/60 backdrop-blur-sm",
+          !isModal && "pointer-events-none",
+          isCentered && "items-center",
+          overlayClassName
+        ),
+        onClick: (e) => {
+          if (closeOnOverlayClick && e.target === e.currentTarget) {
+            handleClose();
+          }
+        },
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            ref: dialogRef,
+            role: "dialog",
+            tabIndex: -1,
+            "aria-modal": isModal ? "true" : "false",
+            "aria-label": ariaLabel,
+            "aria-labelledby": ariaLabelledby,
+            "aria-describedby": ariaDescribedby,
+            className: chunkL5VQZZVR_cjs.cn(
+              "relative w-full mx-auto bg-surface rounded-xl shadow-lg border border-border transition-all duration-300 transform scale-100 opacity-100 flex flex-col",
+              size !== "full" && "max-h-[90vh]",
+              !isModal && "pointer-events-auto",
+              sizeClasses[size],
+              contentClassName
+            ),
+            children
+          }
+        )
+      }
+    ),
+    document.body
+  );
+}
+function DialogHeader({ children, className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: chunkL5VQZZVR_cjs.cn("px-6 py-5 border-b border-border/60", className), children: /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-xl font-bold text-text uppercase tracking-wider", children }) });
+}
+function DialogBody({ children, className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: chunkL5VQZZVR_cjs.cn(
+        "px-6 py-6 overflow-y-auto flex-1 text-text-secondary leading-relaxed font-medium",
+        className
+      ),
+      children
+    }
+  );
+}
+function DialogFooter({ children, className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: chunkL5VQZZVR_cjs.cn(
+        "px-6 py-4 bg-surface-secondary border-t border-border flex items-center justify-end gap-3 rounded-b-xl",
+        className
+      ),
+      children
+    }
+  );
+}
+function DialogCloseButton({
+  onClick,
+  className
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      type: "button",
+      onClick,
+      className: chunkL5VQZZVR_cjs.cn(
+        "absolute top-4 right-4 p-2 text-text-muted hover:text-text hover:bg-hover rounded-lg transition-all duration-fast",
+        className
+      ),
+      "aria-label": "Close dialog",
+      children: /* @__PURE__ */ jsxRuntime.jsx(outline.XMarkIcon, { className: "w-5 h-5" })
+    }
+  );
+}
+
+exports.Dialog = Dialog;
+exports.DialogBody = DialogBody;
+exports.DialogCloseButton = DialogCloseButton;
+exports.DialogFooter = DialogFooter;
+exports.DialogHeader = DialogHeader;