vector-prototype-components 0.1.2 → 0.1.3

package/Table/Table.js

@@ -0,0 +1,268 @@
+import { jsxs as d, jsx as i } from "react/jsx-runtime";
+import { useState as ie, useRef as ae, useCallback as re, useEffect as se, useMemo as le } from "react";
+import { Question as oe, SortDescending as de, SortAscending as ce, GearSix as he } from "@phosphor-icons/react";
+import { Icon as w } from "../Icon/Icon.js";
+import { Checkbox as z } from "../Checkbox/Checkbox.js";
+import { Paginator as fe } from "../Paginator/Paginator.js";
+import { Tag as me } from "../Tag/Tag.js";
+import { IconButton as R } from "../IconButton/IconButton.js";
+import { Button as ue } from "../Button/Button.js";
+import { Slot as ge } from "../Slot/Slot.js";
+import { ActionMenu as be } from "../ActionMenu/ActionMenu.js";
+import { Skeleton as C } from "../Skeleton/Skeleton.js";
+import t from "./Table.module.css.js";
+const H = ["72%", "54%", "83%", "46%", "64%", "50%"];
+function pe(f, m, c) {
+  return f !== m || !c || c === "none" ? "asc" : c === "asc" ? "desc" : "none";
+}
+function Ie({
+  data: f,
+  columns: m,
+  rowKey: c,
+  selectable: g = !1,
+  selectedKeys: x,
+  onSelectionChange: b,
+  rowActions: B,
+  rowActionsLabel: E = "Ações",
+  loading: A = !1,
+  loadingRows: _ = 5,
+  sortKey: j,
+  sortDirection: p = "none",
+  onSortChange: W,
+  showFooter: D = !0,
+  footerText: L,
+  showPaginator: G = !0,
+  currentPage: O = 1,
+  totalPages: P = 1,
+  pageSize: U = 10,
+  onPageChange: $,
+  onPageSizeChange: F,
+  showScrollbar: Q = !0,
+  className: q,
+  "aria-label": J,
+  "aria-labelledby": K
+}) {
+  const y = x !== void 0 ? x : /* @__PURE__ */ new Set(), k = typeof B == "function", [o, I] = ie(null), M = ae(null), h = re(() => I(null), []);
+  function V(e, n, r) {
+    if ((o == null ? void 0 : o.key) === n) {
+      h();
+      return;
+    }
+    const a = e.currentTarget.getBoundingClientRect(), l = Math.max(8, Math.min(a.left, window.innerWidth - 220 - 8));
+    I({ key: n, row: r, top: a.bottom + 4, left: l });
+  }
+  se(() => {
+    if (!o) return;
+    const e = (a) => {
+      var l;
+      const s = a.target;
+      (l = M.current) != null && l.contains(s) || s != null && s.closest("[data-table-gear]") || h();
+    }, n = (a) => {
+      a.key === "Escape" && h();
+    }, r = () => h();
+    return document.addEventListener("mousedown", e), document.addEventListener("keydown", n), window.addEventListener("resize", r), window.addEventListener("scroll", r, !0), () => {
+      document.removeEventListener("mousedown", e), document.removeEventListener("keydown", n), window.removeEventListener("resize", r), window.removeEventListener("scroll", r, !0);
+    };
+  }, [o, h]);
+  const v = le(
+    () => f.map((e, n) => c(e, n)),
+    [f, c]
+  ), N = v.length > 0 && v.every((e) => y.has(e)), X = !N && v.some((e) => y.has(e));
+  function Y() {
+    b && b(N ? /* @__PURE__ */ new Set() : new Set(v));
+  }
+  function Z(e) {
+    if (!b) return;
+    const n = new Set(y);
+    n.has(e) ? n.delete(e) : n.add(e), b(n);
+  }
+  function T(e) {
+    !e.sortable || !W || W(e.key, pe(e.key, j, p));
+  }
+  function ee(e, n) {
+    switch (n.type) {
+      case "tag": {
+        if (n.tagConfig) {
+          const { label: a, tagStyle: s, tagType: l, size: u } = n.tagConfig(e);
+          return /* @__PURE__ */ i(me, { tagStyle: s, type: l, size: u, children: a });
+        }
+        break;
+      }
+      case "icon-button": {
+        if (n.iconButtonConfig) {
+          const a = n.iconButtonConfig(e), s = Array.isArray(a) ? a[0] : a;
+          return /* @__PURE__ */ i(R, { ...s });
+        }
+        break;
+      }
+      case "actions": {
+        if (n.iconButtonConfig) {
+          const a = n.iconButtonConfig(e), s = Array.isArray(a) ? a : [a];
+          return /* @__PURE__ */ i("div", { className: t.actionsCell, children: s.map((l, u) => /* @__PURE__ */ i(R, { size: "xsmall", ...l }, u)) });
+        }
+        break;
+      }
+      case "button": {
+        if (n.buttonConfig) {
+          const { label: a, ...s } = n.buttonConfig(e);
+          return /* @__PURE__ */ i(ue, { size: "small", ...s, children: a });
+        }
+        break;
+      }
+      case "slot": {
+        if (n.accessor && typeof n.accessor == "function")
+          return /* @__PURE__ */ i(ge, { children: n.accessor(e) });
+        break;
+      }
+    }
+    if (n.accessor) {
+      if (typeof n.accessor == "function") return n.accessor(e);
+      const a = e[n.accessor];
+      return a == null ? null : String(a);
+    }
+    const r = e[n.key];
+    return r == null ? null : /* @__PURE__ */ i("span", { className: t.cellText, children: String(r) });
+  }
+  function te() {
+    return Array.from({ length: Math.max(0, _) }).map((e, n) => /* @__PURE__ */ d("tr", { className: t.tr, "aria-hidden": "true", children: [
+      g && /* @__PURE__ */ i("td", { className: [t.td, t.tdCheckbox].join(" "), children: /* @__PURE__ */ i(C, { variant: "rect", width: 20, height: 20, radius: 4 }) }),
+      k && /* @__PURE__ */ i("td", { className: [t.td, t.tdActions].join(" "), children: /* @__PURE__ */ i(C, { variant: "circle", width: 32 }) }),
+      m.map((r, a) => {
+        const s = {};
+        r.width && (s.width = r.width), r.minWidth && (s.minWidth = r.minWidth), r.align && (s.textAlign = r.align);
+        const l = r.align === "right" ? { marginLeft: "auto" } : r.align === "center" ? { marginLeft: "auto", marginRight: "auto" } : {};
+        return /* @__PURE__ */ i("td", { className: t.td, style: s, children: /* @__PURE__ */ i(
+          C,
+          {
+            variant: "text",
+            width: H[a % H.length],
+            style: l
+          }
+        ) }, r.key);
+      })
+    ] }, `skeleton-${n}`));
+  }
+  const ne = [t.table, q].filter(Boolean).join(" ");
+  return /* @__PURE__ */ d("div", { className: ne, children: [
+    /* @__PURE__ */ i("div", { className: [t.tableBody, Q ? t.tableBodyScrollbar : ""].filter(Boolean).join(" "), children: /* @__PURE__ */ d(
+      "table",
+      {
+        className: t.tableEl,
+        "aria-label": J,
+        "aria-labelledby": K,
+        "aria-busy": A || void 0,
+        children: [
+          /* @__PURE__ */ i("thead", { className: t.thead, children: /* @__PURE__ */ d("tr", { children: [
+            g && /* @__PURE__ */ i("th", { className: [t.th, t.thCheckbox].join(" "), scope: "col", "aria-label": "Select all rows", children: /* @__PURE__ */ i(
+              z,
+              {
+                checked: N ? !0 : X ? "indeterminate" : !1,
+                onChange: Y,
+                "aria-label": "Select all"
+              }
+            ) }),
+            k && /* @__PURE__ */ i("th", { className: [t.th, t.thActions].join(" "), scope: "col", children: /* @__PURE__ */ i("span", { className: t.actionsHeaderLabel, children: E }) }),
+            m.map((e) => {
+              const n = j === e.key && p !== "none", r = [t.th, e.sortable ? t.thSortable : ""].filter(Boolean).join(" "), a = {};
+              return e.width && (a.width = e.width), e.minWidth && (a.minWidth = e.minWidth), e.align && (a.textAlign = e.align), /* @__PURE__ */ i(
+                "th",
+                {
+                  className: r,
+                  scope: "col",
+                  style: a,
+                  "aria-sort": e.sortable ? n ? p === "asc" ? "ascending" : "descending" : "none" : void 0,
+                  tabIndex: e.sortable ? 0 : void 0,
+                  onClick: e.sortable ? () => T(e) : void 0,
+                  onKeyDown: e.sortable ? (s) => {
+                    (s.key === "Enter" || s.key === " ") && (s.preventDefault(), T(e));
+                  } : void 0,
+                  children: /* @__PURE__ */ d("div", { className: t.thInner, children: [
+                    /* @__PURE__ */ d("div", { className: t.thContent, children: [
+                      e.showHelp && /* @__PURE__ */ i("span", { className: t.thHelpIcon, children: /* @__PURE__ */ i(w, { as: oe, size: 16 }) }),
+                      /* @__PURE__ */ i("span", { className: t.thLabel, children: e.header })
+                    ] }),
+                    e.sortable && /* @__PURE__ */ i("span", { className: t.thSortIcon, "aria-hidden": "true", children: /* @__PURE__ */ i(
+                      w,
+                      {
+                        as: n && p === "desc" ? de : ce,
+                        size: 16
+                      }
+                    ) })
+                  ] })
+                },
+                e.key
+              );
+            })
+          ] }) }),
+          /* @__PURE__ */ i("tbody", { children: A ? te() : f.map((e, n) => {
+            const r = c(e, n), a = y.has(r), s = [t.tr, a ? t.trSelected : ""].filter(Boolean).join(" ");
+            return /* @__PURE__ */ d("tr", { className: s, "aria-selected": g ? a : void 0, children: [
+              g && /* @__PURE__ */ i("td", { className: [t.td, t.tdCheckbox, a ? t.tdSelected : ""].filter(Boolean).join(" "), children: /* @__PURE__ */ i(
+                z,
+                {
+                  checked: a,
+                  onChange: () => Z(r),
+                  "aria-label": `Select row ${n + 1}`
+                }
+              ) }),
+              k && /* @__PURE__ */ i("td", { className: [t.td, t.tdActions, a ? t.tdSelected : ""].filter(Boolean).join(" "), children: /* @__PURE__ */ i(
+                "button",
+                {
+                  type: "button",
+                  "data-table-gear": !0,
+                  className: t.gearButton,
+                  "aria-label": E,
+                  "aria-haspopup": "menu",
+                  "aria-expanded": (o == null ? void 0 : o.key) === r,
+                  onClick: (l) => V(l, r, e),
+                  children: /* @__PURE__ */ i(w, { as: he, size: 16, weight: "fill" })
+                }
+              ) }),
+              m.map((l) => {
+                const u = [t.td, a ? t.tdSelected : ""].filter(Boolean).join(" "), S = {};
+                return l.width && (S.width = l.width), l.minWidth && (S.minWidth = l.minWidth), l.align && (S.textAlign = l.align), /* @__PURE__ */ i("td", { className: u, style: S, children: ee(e, l) }, l.key);
+              })
+            ] }, r);
+          }) })
+        ]
+      }
+    ) }),
+    D && /* @__PURE__ */ i("div", { className: t.footer, children: /* @__PURE__ */ d("div", { className: t.footerInfo, children: [
+      L && /* @__PURE__ */ i("span", { className: t.footerText, children: L }),
+      G && /* @__PURE__ */ i("div", { className: t.footerPaginator, children: /* @__PURE__ */ i(
+        fe,
+        {
+          currentPage: O,
+          totalPages: P,
+          pageSize: U,
+          onPageChange: $,
+          onPageSizeChange: F
+        }
+      ) })
+    ] }) }),
+    o && /* @__PURE__ */ i(
+      "div",
+      {
+        ref: M,
+        className: t.actionMenuFloat,
+        style: { top: o.top, left: o.left },
+        children: /* @__PURE__ */ i(
+          be,
+          {
+            items: B(o.row).map((e) => ({
+              ...e,
+              onClick: (n) => {
+                var r;
+                (r = e.onClick) == null || r.call(e, n), h();
+              }
+            }))
+          }
+        )
+      }
+    )
+  ] });
+}
+export {
+  Ie as Table
+};
+//# sourceMappingURL=Table.js.map

package/Table/Table.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Table.js","sources":["../../src/Table/Table.tsx"],"sourcesContent":["import React, { useMemo, useState, useRef, useEffect, useCallback } from 'react';\nimport type { Icon as PhosphorIcon } from '@phosphor-icons/react';\nimport { SortAscending, SortDescending, Question, GearSix } from '@phosphor-icons/react';\nimport { Icon } from '../Icon/index.js';\nimport { Checkbox } from '../Checkbox/index.js';\nimport { Paginator } from '../Paginator/index.js';\nimport { Tag } from '../Tag/index.js';\nimport { IconButton } from '../IconButton/index.js';\nimport { Button } from '../Button/index.js';\nimport { Slot } from '../Slot/index.js';\nimport { ActionMenu } from '../ActionMenu/index.js';\nimport type { ActionMenuItemConfig } from '../ActionMenu/index.js';\nimport { Skeleton } from '../Skeleton/index.js';\nimport type { TagStyle, TagSize, TagType } from '../Tag/index.js';\nimport type { IconButtonVariant, IconButtonSize } from '../IconButton/index.js';\nimport type { ButtonVariant, ButtonSize } from '../Button/index.js';\nimport styles from './Table.module.css';\n\n// ---------------------------------------------------------------------------\n// Cell type configs\n// ---------------------------------------------------------------------------\n\nexport interface TagCellConfig {\n  label: string;\n  tagStyle?: TagStyle;\n  tagType?: TagType;\n  size?: TagSize;\n}\n\nexport interface IconButtonCellConfig {\n  icon: PhosphorIcon;\n  'aria-label': string;\n  onClick: () => void;\n  disabled?: boolean;\n  variant?: IconButtonVariant;\n  size?: IconButtonSize;\n}\n\nexport interface ButtonCellConfig {\n  label: string;\n  onClick: () => void;\n  variant?: ButtonVariant;\n  size?: ButtonSize;\n  disabled?: boolean;\n}\n\n// ---------------------------------------------------------------------------\n// Column definition\n// ---------------------------------------------------------------------------\n\nexport type TableSortDirection = 'asc' | 'desc' | 'none';\n\nexport type TableColumnType = 'text' | 'tag' | 'icon-button' | 'actions' | 'button' | 'slot' | 'custom';\n\nexport interface TableColumn<T = Record<string, unknown>> {\n  key: string;\n  header: string;\n  sortable?: boolean;\n  showHelp?: boolean;\n  /**\n   * Column cell type. Determines which design system component renders cell content.\n   * - 'text'        → plain text (default)\n   * - 'tag'         → <Tag> component (requires tagConfig)\n   * - 'icon-button' → single <IconButton> (requires iconButtonConfig)\n   * - 'actions'     → one or more <IconButton> in a row (requires iconButtonConfig)\n   * - 'button'      → <Button> (requires buttonConfig)\n   * - 'slot'        → <Slot> (requires accessor returning slot content)\n   * - 'custom'      → any ReactNode via accessor\n   */\n  type?: TableColumnType;\n  /** For type='tag' — returns tag config per row. */\n  tagConfig?: (row: T) => TagCellConfig;\n  /** For type='icon-button' or 'actions' — returns one or more icon button configs. */\n  iconButtonConfig?: (row: T) => IconButtonCellConfig | IconButtonCellConfig[];\n  /** For type='button' — returns button config per row. */\n  buttonConfig?: (row: T) => ButtonCellConfig;\n  /** For type='text', 'slot', or 'custom' — accessor function or key of T. */\n  accessor?: ((row: T) => React.ReactNode) | keyof T;\n  minWidth?: number;\n  width?: number;\n  align?: 'left' | 'center' | 'right';\n}\n\n// ---------------------------------------------------------------------------\n// Props\n// ---------------------------------------------------------------------------\n\nexport interface TableProps<T = Record<string, unknown>> {\n  data: T[];\n  columns: TableColumn<T>[];\n  rowKey: (row: T, index: number) => string | number;\n\n  selectable?: boolean;\n  selectedKeys?: Set<string | number>;\n  onSelectionChange?: (keys: Set<string | number>) => void;\n\n  /**\n   * When provided, renders a leading \"actions\" column: a gear button per row\n   * that opens an <ActionMenu> with the items returned for that row. The column\n   * is placed first, or right after the checkbox column when `selectable`.\n   */\n  rowActions?: (row: T) => ActionMenuItemConfig[];\n  /** Header label for the actions column (default \"Ações\"). */\n  rowActionsLabel?: string;\n\n  /** When true, renders skeleton placeholder rows instead of the data. */\n  loading?: boolean;\n  /** Number of skeleton rows to render while loading (default 5). */\n  loadingRows?: number;\n\n  sortKey?: string;\n  sortDirection?: TableSortDirection;\n  onSortChange?: (key: string, direction: TableSortDirection) => void;\n\n  showFooter?: boolean;\n  footerText?: string;\n  showPaginator?: boolean;\n  currentPage?: number;\n  totalPages?: number;\n  pageSize?: 10 | 20 | 30 | 50 | 100;\n  onPageChange?: (page: number) => void;\n  onPageSizeChange?: (pageSize: 10 | 20 | 30 | 50 | 100) => void;\n\n  showScrollbar?: boolean;\n  className?: string;\n  'aria-label'?: string;\n  'aria-labelledby'?: string;\n}\n\n// ---------------------------------------------------------------------------\n// Helper\n// ---------------------------------------------------------------------------\n\n// Staggered widths so skeleton text rows look natural rather than uniform.\nconst SKELETON_WIDTHS = ['72%', '54%', '83%', '46%', '64%', '50%'];\n\nfunction nextSortDirection(\n  key: string,\n  currentKey: string | undefined,\n  currentDir: TableSortDirection | undefined,\n): TableSortDirection {\n  if (key !== currentKey || !currentDir || currentDir === 'none') return 'asc';\n  if (currentDir === 'asc') return 'desc';\n  return 'none';\n}\n\n// ---------------------------------------------------------------------------\n// Component\n// ---------------------------------------------------------------------------\n\nexport function Table<T = Record<string, unknown>>({\n  data,\n  columns,\n  rowKey,\n  selectable = false,\n  selectedKeys,\n  onSelectionChange,\n  rowActions,\n  rowActionsLabel = 'Ações',\n  loading = false,\n  loadingRows = 5,\n  sortKey,\n  sortDirection = 'none',\n  onSortChange,\n  showFooter = true,\n  footerText,\n  showPaginator = true,\n  currentPage = 1,\n  totalPages = 1,\n  pageSize = 10,\n  onPageChange,\n  onPageSizeChange,\n  showScrollbar = true,\n  className,\n  'aria-label': ariaLabel,\n  'aria-labelledby': ariaLabelledby,\n}: TableProps<T>) {\n  const controlled = selectedKeys !== undefined;\n  const effectiveSelected = controlled ? selectedKeys : new Set<string | number>();\n\n  const hasRowActions = typeof rowActions === 'function';\n\n  // Floating ActionMenu state — anchored to the clicked gear via fixed coords\n  // (the scroll wrapper clips overflow, so we escape it with position: fixed,\n  // matching the Menu tooltip pattern).\n  const [openActions, setOpenActions] = useState<\n    { key: string | number; row: T; top: number; left: number } | null\n  >(null);\n  const actionMenuRef = useRef<HTMLDivElement>(null);\n\n  const closeActions = useCallback(() => setOpenActions(null), []);\n\n  function handleGearClick(\n    e: React.MouseEvent<HTMLButtonElement>,\n    key: string | number,\n    row: T,\n  ) {\n    if (openActions?.key === key) {\n      closeActions();\n      return;\n    }\n    const r = e.currentTarget.getBoundingClientRect();\n    const MENU_WIDTH = 220;\n    const left = Math.max(8, Math.min(r.left, window.innerWidth - MENU_WIDTH - 8));\n    setOpenActions({ key, row, top: r.bottom + 4, left });\n  }\n\n  useEffect(() => {\n    if (!openActions) return;\n    const onDown = (e: MouseEvent) => {\n      const target = e.target as HTMLElement | null;\n      if (actionMenuRef.current?.contains(target)) return;\n      // Clicking a gear button is handled by its own onClick (toggle).\n      if (target?.closest('[data-table-gear]')) return;\n      closeActions();\n    };\n    const onKey = (e: KeyboardEvent) => {\n      if (e.key === 'Escape') closeActions();\n    };\n    // A fixed-positioned menu does not follow scroll, so dismiss it instead.\n    const dismiss = () => closeActions();\n    document.addEventListener('mousedown', onDown);\n    document.addEventListener('keydown', onKey);\n    window.addEventListener('resize', dismiss);\n    window.addEventListener('scroll', dismiss, true);\n    return () => {\n      document.removeEventListener('mousedown', onDown);\n      document.removeEventListener('keydown', onKey);\n      window.removeEventListener('resize', dismiss);\n      window.removeEventListener('scroll', dismiss, true);\n    };\n  }, [openActions, closeActions]);\n\n  const allKeys = useMemo(\n    () => data.map((row, i) => rowKey(row, i)),\n    [data, rowKey],\n  );\n\n  const allSelected = allKeys.length > 0 && allKeys.every((k) => effectiveSelected.has(k));\n  const someSelected = !allSelected && allKeys.some((k) => effectiveSelected.has(k));\n\n  function handleSelectAll() {\n    if (!onSelectionChange) return;\n    onSelectionChange(allSelected ? new Set() : new Set(allKeys));\n  }\n\n  function handleSelectRow(key: string | number) {\n    if (!onSelectionChange) return;\n    const next = new Set(effectiveSelected);\n    if (next.has(key)) { next.delete(key); } else { next.add(key); }\n    onSelectionChange(next);\n  }\n\n  function handleSort(col: TableColumn<T>) {\n    if (!col.sortable || !onSortChange) return;\n    onSortChange(col.key, nextSortDirection(col.key, sortKey, sortDirection));\n  }\n\n  function renderCell(row: T, col: TableColumn<T>): React.ReactNode {\n    switch (col.type) {\n      case 'tag': {\n        if (col.tagConfig) {\n          const { label, tagStyle, tagType, size } = col.tagConfig(row);\n          return <Tag tagStyle={tagStyle} type={tagType} size={size}>{label}</Tag>;\n        }\n        break;\n      }\n      case 'icon-button': {\n        if (col.iconButtonConfig) {\n          const cfg = col.iconButtonConfig(row);\n          const single = Array.isArray(cfg) ? cfg[0] : cfg;\n          return <IconButton {...single} />;\n        }\n        break;\n      }\n      case 'actions': {\n        if (col.iconButtonConfig) {\n          const cfg = col.iconButtonConfig(row);\n          const items = Array.isArray(cfg) ? cfg : [cfg];\n          return (\n            <div className={styles.actionsCell}>\n              {items.map((c, i) => <IconButton key={i} size=\"xsmall\" {...c} />)}\n            </div>\n          );\n        }\n        break;\n      }\n      case 'button': {\n        if (col.buttonConfig) {\n          const { label, ...rest } = col.buttonConfig(row);\n          return <Button size=\"small\" {...rest}>{label}</Button>;\n        }\n        break;\n      }\n      case 'slot': {\n        if (col.accessor && typeof col.accessor === 'function') {\n          return <Slot>{col.accessor(row) as React.ReactNode}</Slot>;\n        }\n        break;\n      }\n    }\n\n    // Default: text or custom\n    if (col.accessor) {\n      if (typeof col.accessor === 'function') return col.accessor(row);\n      const val = row[col.accessor as keyof T];\n      return val == null ? null : String(val);\n    }\n    const val = (row as Record<string, unknown>)[col.key];\n    if (val == null) return null;\n    return <span className={styles.cellText}>{String(val)}</span>;\n  }\n\n  function renderSkeletonRows(): React.ReactNode {\n    return Array.from({ length: Math.max(0, loadingRows) }).map((_, rowIndex) => (\n      <tr key={`skeleton-${rowIndex}`} className={styles.tr} aria-hidden=\"true\">\n        {selectable && (\n          <td className={[styles.td, styles.tdCheckbox].join(' ')}>\n            <Skeleton variant=\"rect\" width={20} height={20} radius={4} />\n          </td>\n        )}\n\n        {hasRowActions && (\n          <td className={[styles.td, styles.tdActions].join(' ')}>\n            <Skeleton variant=\"circle\" width={32} />\n          </td>\n        )}\n\n        {columns.map((col, colIndex) => {\n          const cellStyle: React.CSSProperties = {};\n          if (col.width)    cellStyle.width    = col.width;\n          if (col.minWidth) cellStyle.minWidth = col.minWidth;\n          if (col.align)    cellStyle.textAlign = col.align;\n\n          // Right/center-align the skeleton bar to match the column alignment.\n          const barStyle: React.CSSProperties =\n            col.align === 'right'  ? { marginLeft: 'auto' }\n          : col.align === 'center' ? { marginLeft: 'auto', marginRight: 'auto' }\n          : {};\n\n          return (\n            <td key={col.key} className={styles.td} style={cellStyle}>\n              <Skeleton\n                variant=\"text\"\n                width={SKELETON_WIDTHS[colIndex % SKELETON_WIDTHS.length]}\n                style={barStyle}\n              />\n            </td>\n          );\n        })}\n      </tr>\n    ));\n  }\n\n  const rootCls = [styles.table, className].filter(Boolean).join(' ');\n\n  return (\n    <div className={rootCls}>\n      <div className={[styles.tableBody, showScrollbar ? styles.tableBodyScrollbar : ''].filter(Boolean).join(' ')}>\n        <table\n          className={styles.tableEl}\n          aria-label={ariaLabel}\n          aria-labelledby={ariaLabelledby}\n          aria-busy={loading || undefined}\n        >\n          <thead className={styles.thead}>\n            <tr>\n              {selectable && (\n                <th className={[styles.th, styles.thCheckbox].join(' ')} scope=\"col\" aria-label=\"Select all rows\">\n                  <Checkbox\n                    checked={allSelected ? true : someSelected ? 'indeterminate' : false}\n                    onChange={handleSelectAll}\n                    aria-label=\"Select all\"\n                  />\n                </th>\n              )}\n\n              {hasRowActions && (\n                <th className={[styles.th, styles.thActions].join(' ')} scope=\"col\">\n                  <span className={styles.actionsHeaderLabel}>{rowActionsLabel}</span>\n                </th>\n              )}\n\n              {columns.map((col) => {\n                const isSortActive = sortKey === col.key && sortDirection !== 'none';\n                const thCls = [styles.th, col.sortable ? styles.thSortable : ''].filter(Boolean).join(' ');\n                const colStyle: React.CSSProperties = {};\n                if (col.width)    colStyle.width    = col.width;\n                if (col.minWidth) colStyle.minWidth = col.minWidth;\n                if (col.align)    colStyle.textAlign = col.align;\n\n                return (\n                  <th\n                    key={col.key}\n                    className={thCls}\n                    scope=\"col\"\n                    style={colStyle}\n                    aria-sort={col.sortable ? (isSortActive ? (sortDirection === 'asc' ? 'ascending' : 'descending') : 'none') : undefined}\n                    tabIndex={col.sortable ? 0 : undefined}\n                    onClick={col.sortable ? () => handleSort(col) : undefined}\n                    onKeyDown={col.sortable ? (e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); handleSort(col); } } : undefined}\n                  >\n                    <div className={styles.thInner}>\n                      <div className={styles.thContent}>\n                        {col.showHelp && (\n                          <span className={styles.thHelpIcon}>\n                            <Icon as={Question as PhosphorIcon} size={16} />\n                          </span>\n                        )}\n                        <span className={styles.thLabel}>{col.header}</span>\n                      </div>\n                      {col.sortable && (\n                        <span className={styles.thSortIcon} aria-hidden=\"true\">\n                          <Icon\n                            as={(\n                              isSortActive && sortDirection === 'desc' ? SortDescending : SortAscending\n                            ) as PhosphorIcon}\n                            size={16}\n                          />\n                        </span>\n                      )}\n                    </div>\n                  </th>\n                );\n              })}\n            </tr>\n          </thead>\n\n          <tbody>\n            {loading ? renderSkeletonRows() : data.map((row, rowIndex) => {\n              const key = rowKey(row, rowIndex);\n              const isSelected = effectiveSelected.has(key);\n              const trCls = [styles.tr, isSelected ? styles.trSelected : ''].filter(Boolean).join(' ');\n\n              return (\n                <tr key={key} className={trCls} aria-selected={selectable ? isSelected : undefined}>\n                  {selectable && (\n                    <td className={[styles.td, styles.tdCheckbox, isSelected ? styles.tdSelected : ''].filter(Boolean).join(' ')}>\n                      <Checkbox\n                        checked={isSelected}\n                        onChange={() => handleSelectRow(key)}\n                        aria-label={`Select row ${rowIndex + 1}`}\n                      />\n                    </td>\n                  )}\n\n                  {hasRowActions && (\n                    <td className={[styles.td, styles.tdActions, isSelected ? styles.tdSelected : ''].filter(Boolean).join(' ')}>\n                      <button\n                        type=\"button\"\n                        data-table-gear\n                        className={styles.gearButton}\n                        aria-label={rowActionsLabel}\n                        aria-haspopup=\"menu\"\n                        aria-expanded={openActions?.key === key}\n                        onClick={(e) => handleGearClick(e, key, row)}\n                      >\n                        <Icon as={GearSix as PhosphorIcon} size={16} weight=\"fill\" />\n                      </button>\n                    </td>\n                  )}\n\n                  {columns.map((col) => {\n                    const tdCls = [styles.td, isSelected ? styles.tdSelected : ''].filter(Boolean).join(' ');\n                    const cellStyle: React.CSSProperties = {};\n                    if (col.width)    cellStyle.width    = col.width;\n                    if (col.minWidth) cellStyle.minWidth = col.minWidth;\n                    if (col.align)    cellStyle.textAlign = col.align;\n\n                    return (\n                      <td key={col.key} className={tdCls} style={cellStyle}>\n                        {renderCell(row, col)}\n                      </td>\n                    );\n                  })}\n                </tr>\n              );\n            })}\n          </tbody>\n        </table>\n      </div>\n\n      {showFooter && (\n        <div className={styles.footer}>\n          <div className={styles.footerInfo}>\n            {footerText && <span className={styles.footerText}>{footerText}</span>}\n            {showPaginator && (\n              <div className={styles.footerPaginator}>\n                <Paginator\n                  currentPage={currentPage}\n                  totalPages={totalPages}\n                  pageSize={pageSize}\n                  onPageChange={onPageChange}\n                  onPageSizeChange={onPageSizeChange}\n                />\n              </div>\n            )}\n          </div>\n        </div>\n      )}\n\n      {openActions && (\n        <div\n          ref={actionMenuRef}\n          className={styles.actionMenuFloat}\n          style={{ top: openActions.top, left: openActions.left }}\n        >\n          <ActionMenu\n            items={rowActions!(openActions.row).map((item) => ({\n              ...item,\n              onClick: (ev) => {\n                item.onClick?.(ev);\n                closeActions();\n              },\n            }))}\n          />\n        </div>\n      )}\n    </div>\n  );\n}\n"],"names":["SKELETON_WIDTHS","nextSortDirection","key","currentKey","currentDir","Table","data","columns","rowKey","selectable","selectedKeys","onSelectionChange","rowActions","rowActionsLabel","loading","loadingRows","sortKey","sortDirection","onSortChange","showFooter","footerText","showPaginator","currentPage","totalPages","pageSize","onPageChange","onPageSizeChange","showScrollbar","className","ariaLabel","ariaLabelledby","effectiveSelected","hasRowActions","openActions","setOpenActions","useState","actionMenuRef","useRef","closeActions","useCallback","handleGearClick","row","r","left","useEffect","onDown","e","target","_a","onKey","dismiss","allKeys","useMemo","i","allSelected","k","someSelected","handleSelectAll","handleSelectRow","next","handleSort","col","renderCell","label","tagStyle","tagType","size","Tag","cfg","single","jsx","IconButton","items","styles","c","rest","Button","Slot","val","renderSkeletonRows","_","rowIndex","jsxs","Skeleton","colIndex","cellStyle","barStyle","rootCls","Checkbox","isSortActive","thCls","colStyle","Icon","Question","SortDescending","SortAscending","isSelected","trCls","GearSix","tdCls","Paginator","ActionMenu","item","ev"],"mappings":";;;;;;;;;;;;;AAsIA,MAAMA,IAAkB,CAAC,OAAO,OAAO,OAAO,OAAO,OAAO,KAAK;AAEjE,SAASC,GACPC,GACAC,GACAC,GACoB;AACpB,SAAIF,MAAQC,KAAc,CAACC,KAAcA,MAAe,SAAe,QACnEA,MAAe,QAAc,SAC1B;AACT;AAMO,SAASC,GAAmC;AAAA,EACjD,MAAAC;AAAA,EACA,SAAAC;AAAA,EACA,QAAAC;AAAA,EACA,YAAAC,IAAa;AAAA,EACb,cAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,YAAAC;AAAA,EACA,iBAAAC,IAAkB;AAAA,EAClB,SAAAC,IAAU;AAAA,EACV,aAAAC,IAAc;AAAA,EACd,SAAAC;AAAA,EACA,eAAAC,IAAgB;AAAA,EAChB,cAAAC;AAAA,EACA,YAAAC,IAAa;AAAA,EACb,YAAAC;AAAA,EACA,eAAAC,IAAgB;AAAA,EAChB,aAAAC,IAAc;AAAA,EACd,YAAAC,IAAa;AAAA,EACb,UAAAC,IAAW;AAAA,EACX,cAAAC;AAAA,EACA,kBAAAC;AAAA,EACA,eAAAC,IAAgB;AAAA,EAChB,WAAAC;AAAA,EACA,cAAcC;AAAA,EACd,mBAAmBC;AACrB,GAAkB;AAEhB,QAAMC,IADarB,MAAiB,SACGA,IAAe,oBAAI,IAAA,GAEpDsB,IAAgB,OAAOpB,KAAe,YAKtC,CAACqB,GAAaC,CAAc,IAAIC,GAEpC,IAAI,GACAC,IAAgBC,GAAuB,IAAI,GAE3CC,IAAeC,GAAY,MAAML,EAAe,IAAI,GAAG,CAAA,CAAE;AAE/D,WAASM,EACP,GACAtC,GACAuC,GACA;AACA,SAAIR,KAAA,gBAAAA,EAAa,SAAQ/B,GAAK;AAC5B,MAAAoC,EAAA;AACA;AAAA,IACF;AACA,UAAMI,IAAI,EAAE,cAAc,sBAAA,GAEpBC,IAAO,KAAK,IAAI,GAAG,KAAK,IAAID,EAAE,MAAM,OAAO,aAD9B,MACwD,CAAC,CAAC;AAC7E,IAAAR,EAAe,EAAE,KAAAhC,GAAK,KAAAuC,GAAK,KAAKC,EAAE,SAAS,GAAG,MAAAC,GAAM;AAAA,EACtD;AAEA,EAAAC,GAAU,MAAM;AACd,QAAI,CAACX,EAAa;AAClB,UAAMY,IAAS,CAACC,MAAkB;;AAChC,YAAMC,IAASD,EAAE;AACjB,OAAIE,IAAAZ,EAAc,YAAd,QAAAY,EAAuB,SAASD,MAEhCA,KAAA,QAAAA,EAAQ,QAAQ,wBACpBT,EAAA;AAAA,IACF,GACMW,IAAQ,CAACH,MAAqB;AAClC,MAAIA,EAAE,QAAQ,YAAUR,EAAA;AAAA,IAC1B,GAEMY,IAAU,MAAMZ,EAAA;AACtB,oBAAS,iBAAiB,aAAaO,CAAM,GAC7C,SAAS,iBAAiB,WAAWI,CAAK,GAC1C,OAAO,iBAAiB,UAAUC,CAAO,GACzC,OAAO,iBAAiB,UAAUA,GAAS,EAAI,GACxC,MAAM;AACX,eAAS,oBAAoB,aAAaL,CAAM,GAChD,SAAS,oBAAoB,WAAWI,CAAK,GAC7C,OAAO,oBAAoB,UAAUC,CAAO,GAC5C,OAAO,oBAAoB,UAAUA,GAAS,EAAI;AAAA,IACpD;AAAA,EACF,GAAG,CAACjB,GAAaK,CAAY,CAAC;AAE9B,QAAMa,IAAUC;AAAA,IACd,MAAM9C,EAAK,IAAI,CAACmC,GAAKY,MAAM7C,EAAOiC,GAAKY,CAAC,CAAC;AAAA,IACzC,CAAC/C,GAAME,CAAM;AAAA,EAAA,GAGT8C,IAAcH,EAAQ,SAAS,KAAKA,EAAQ,MAAM,CAACI,MAAMxB,EAAkB,IAAIwB,CAAC,CAAC,GACjFC,IAAe,CAACF,KAAeH,EAAQ,KAAK,CAACI,MAAMxB,EAAkB,IAAIwB,CAAC,CAAC;AAEjF,WAASE,IAAkB;AACzB,IAAK9C,KACLA,EAAkB2C,IAAc,oBAAI,IAAA,IAAQ,IAAI,IAAIH,CAAO,CAAC;AAAA,EAC9D;AAEA,WAASO,EAAgBxD,GAAsB;AAC7C,QAAI,CAACS,EAAmB;AACxB,UAAMgD,IAAO,IAAI,IAAI5B,CAAiB;AACtC,IAAI4B,EAAK,IAAIzD,CAAG,IAAKyD,EAAK,OAAOzD,CAAG,IAAYyD,EAAK,IAAIzD,CAAG,GAC5DS,EAAkBgD,CAAI;AAAA,EACxB;AAEA,WAASC,EAAWC,GAAqB;AACvC,IAAI,CAACA,EAAI,YAAY,CAAC3C,KACtBA,EAAa2C,EAAI,KAAK5D,GAAkB4D,EAAI,KAAK7C,GAASC,CAAa,CAAC;AAAA,EAC1E;AAEA,WAAS6C,GAAWrB,GAAQoB,GAAsC;AAChE,YAAQA,EAAI,MAAA;AAAA,MACV,KAAK,OAAO;AACV,YAAIA,EAAI,WAAW;AACjB,gBAAM,EAAE,OAAAE,GAAO,UAAAC,GAAU,SAAAC,GAAS,MAAAC,MAASL,EAAI,UAAUpB,CAAG;AAC5D,mCAAQ0B,IAAA,EAAI,UAAAH,GAAoB,MAAMC,GAAS,MAAAC,GAAa,UAAAH,GAAM;AAAA,QACpE;AACA;AAAA,MACF;AAAA,MACA,KAAK,eAAe;AAClB,YAAIF,EAAI,kBAAkB;AACxB,gBAAMO,IAAMP,EAAI,iBAAiBpB,CAAG,GAC9B4B,IAAS,MAAM,QAAQD,CAAG,IAAIA,EAAI,CAAC,IAAIA;AAC7C,iBAAO,gBAAAE,EAACC,GAAA,EAAY,GAAGF,EAAA,CAAQ;AAAA,QACjC;AACA;AAAA,MACF;AAAA,MACA,KAAK,WAAW;AACd,YAAIR,EAAI,kBAAkB;AACxB,gBAAMO,IAAMP,EAAI,iBAAiBpB,CAAG,GAC9B+B,IAAQ,MAAM,QAAQJ,CAAG,IAAIA,IAAM,CAACA,CAAG;AAC7C,mCACG,OAAA,EAAI,WAAWK,EAAO,aACpB,UAAAD,EAAM,IAAI,CAACE,GAAGrB,MAAM,gBAAAiB,EAACC,KAAmB,MAAK,UAAU,GAAGG,EAAA,GAArBrB,CAAwB,CAAE,GAClE;AAAA,QAEJ;AACA;AAAA,MACF;AAAA,MACA,KAAK,UAAU;AACb,YAAIQ,EAAI,cAAc;AACpB,gBAAM,EAAE,OAAAE,GAAO,GAAGY,MAASd,EAAI,aAAapB,CAAG;AAC/C,mCAAQmC,IAAA,EAAO,MAAK,SAAS,GAAGD,GAAO,UAAAZ,GAAM;AAAA,QAC/C;AACA;AAAA,MACF;AAAA,MACA,KAAK,QAAQ;AACX,YAAIF,EAAI,YAAY,OAAOA,EAAI,YAAa;AAC1C,iBAAO,gBAAAS,EAACO,IAAA,EAAM,UAAAhB,EAAI,SAASpB,CAAG,GAAqB;AAErD;AAAA,MACF;AAAA,IAAA;AAIF,QAAIoB,EAAI,UAAU;AAChB,UAAI,OAAOA,EAAI,YAAa,WAAY,QAAOA,EAAI,SAASpB,CAAG;AAC/D,YAAMqC,IAAMrC,EAAIoB,EAAI,QAAmB;AACvC,aAAOiB,KAAO,OAAO,OAAO,OAAOA,CAAG;AAAA,IACxC;AACA,UAAMA,IAAOrC,EAAgCoB,EAAI,GAAG;AACpD,WAAIiB,KAAO,OAAa,yBAChB,QAAA,EAAK,WAAWL,EAAO,UAAW,UAAA,OAAOK,CAAG,GAAE;AAAA,EACxD;AAEA,WAASC,KAAsC;AAC7C,WAAO,MAAM,KAAK,EAAE,QAAQ,KAAK,IAAI,GAAGhE,CAAW,EAAA,CAAG,EAAE,IAAI,CAACiE,GAAGC,MAC9D,gBAAAC,EAAC,QAAgC,WAAWT,EAAO,IAAI,eAAY,QAChE,UAAA;AAAA,MAAAhE,KACC,gBAAA6D,EAAC,QAAG,WAAW,CAACG,EAAO,IAAIA,EAAO,UAAU,EAAE,KAAK,GAAG,GACpD,UAAA,gBAAAH,EAACa,GAAA,EAAS,SAAQ,QAAO,OAAO,IAAI,QAAQ,IAAI,QAAQ,EAAA,CAAG,EAAA,CAC7D;AAAA,MAGDnD,KACC,gBAAAsC,EAAC,MAAA,EAAG,WAAW,CAACG,EAAO,IAAIA,EAAO,SAAS,EAAE,KAAK,GAAG,GACnD,UAAA,gBAAAH,EAACa,GAAA,EAAS,SAAQ,UAAS,OAAO,IAAI,GACxC;AAAA,MAGD5E,EAAQ,IAAI,CAACsD,GAAKuB,MAAa;AAC9B,cAAMC,IAAiC,CAAA;AACvC,QAAIxB,EAAI,UAAUwB,EAAU,QAAWxB,EAAI,QACvCA,EAAI,aAAUwB,EAAU,WAAWxB,EAAI,WACvCA,EAAI,UAAUwB,EAAU,YAAYxB,EAAI;AAG5C,cAAMyB,IACJzB,EAAI,UAAU,UAAW,EAAE,YAAY,OAAA,IACvCA,EAAI,UAAU,WAAW,EAAE,YAAY,QAAQ,aAAa,OAAA,IAC5D,CAAA;AAEF,iCACG,MAAA,EAAiB,WAAWY,EAAO,IAAI,OAAOY,GAC7C,UAAA,gBAAAf;AAAA,UAACa;AAAA,UAAA;AAAA,YACC,SAAQ;AAAA,YACR,OAAOnF,EAAgBoF,IAAWpF,EAAgB,MAAM;AAAA,YACxD,OAAOsF;AAAA,UAAA;AAAA,QAAA,EACT,GALOzB,EAAI,GAMb;AAAA,MAEJ,CAAC;AAAA,IAAA,EAAA,GAlCM,YAAYoB,CAAQ,EAmC7B,CACD;AAAA,EACH;AAEA,QAAMM,KAAU,CAACd,EAAO,OAAO7C,CAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAElE,SACE,gBAAAsD,EAAC,OAAA,EAAI,WAAWK,IACd,UAAA;AAAA,IAAA,gBAAAjB,EAAC,OAAA,EAAI,WAAW,CAACG,EAAO,WAAW9C,IAAgB8C,EAAO,qBAAqB,EAAE,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,GACzG,UAAA,gBAAAS;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAWT,EAAO;AAAA,QAClB,cAAY5C;AAAA,QACZ,mBAAiBC;AAAA,QACjB,aAAWhB,KAAW;AAAA,QAEtB,UAAA;AAAA,UAAA,gBAAAwD,EAAC,SAAA,EAAM,WAAWG,EAAO,OACvB,4BAAC,MAAA,EACE,UAAA;AAAA,YAAAhE,KACC,gBAAA6D,EAAC,MAAA,EAAG,WAAW,CAACG,EAAO,IAAIA,EAAO,UAAU,EAAE,KAAK,GAAG,GAAG,OAAM,OAAM,cAAW,mBAC9E,UAAA,gBAAAH;AAAA,cAACkB;AAAA,cAAA;AAAA,gBACC,SAASlC,IAAc,KAAOE,IAAe,kBAAkB;AAAA,gBAC/D,UAAUC;AAAA,gBACV,cAAW;AAAA,cAAA;AAAA,YAAA,GAEf;AAAA,YAGDzB,uBACE,MAAA,EAAG,WAAW,CAACyC,EAAO,IAAIA,EAAO,SAAS,EAAE,KAAK,GAAG,GAAG,OAAM,OAC5D,UAAA,gBAAAH,EAAC,UAAK,WAAWG,EAAO,oBAAqB,UAAA5D,EAAA,CAAgB,EAAA,CAC/D;AAAA,YAGDN,EAAQ,IAAI,CAACsD,MAAQ;AACpB,oBAAM4B,IAAezE,MAAY6C,EAAI,OAAO5C,MAAkB,QACxDyE,IAAQ,CAACjB,EAAO,IAAIZ,EAAI,WAAWY,EAAO,aAAa,EAAE,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,GACnFkB,IAAgC,CAAA;AACtC,qBAAI9B,EAAI,UAAU8B,EAAS,QAAW9B,EAAI,QACtCA,EAAI,aAAU8B,EAAS,WAAW9B,EAAI,WACtCA,EAAI,UAAU8B,EAAS,YAAY9B,EAAI,QAGzC,gBAAAS;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBAEC,WAAWoB;AAAA,kBACX,OAAM;AAAA,kBACN,OAAOC;AAAA,kBACP,aAAW9B,EAAI,WAAY4B,IAAgBxE,MAAkB,QAAQ,cAAc,eAAgB,SAAU;AAAA,kBAC7G,UAAU4C,EAAI,WAAW,IAAI;AAAA,kBAC7B,SAASA,EAAI,WAAW,MAAMD,EAAWC,CAAG,IAAI;AAAA,kBAChD,WAAWA,EAAI,WAAW,CAACf,MAAM;AAAE,qBAAIA,EAAE,QAAQ,WAAWA,EAAE,QAAQ,SAAOA,EAAE,eAAA,GAAkBc,EAAWC,CAAG;AAAA,kBAAK,IAAI;AAAA,kBAExH,UAAA,gBAAAqB,EAAC,OAAA,EAAI,WAAWT,EAAO,SACrB,UAAA;AAAA,oBAAA,gBAAAS,EAAC,OAAA,EAAI,WAAWT,EAAO,WACpB,UAAA;AAAA,sBAAAZ,EAAI,YACH,gBAAAS,EAAC,QAAA,EAAK,WAAWG,EAAO,YACtB,UAAA,gBAAAH,EAACsB,GAAA,EAAK,IAAIC,IAA0B,MAAM,GAAA,CAAI,GAChD;AAAA,wCAED,QAAA,EAAK,WAAWpB,EAAO,SAAU,YAAI,OAAA,CAAO;AAAA,oBAAA,GAC/C;AAAA,oBACCZ,EAAI,YACH,gBAAAS,EAAC,QAAA,EAAK,WAAWG,EAAO,YAAY,eAAY,QAC9C,UAAA,gBAAAH;AAAA,sBAACsB;AAAA,sBAAA;AAAA,wBACC,IACEH,KAAgBxE,MAAkB,SAAS6E,KAAiBC;AAAA,wBAE9D,MAAM;AAAA,sBAAA;AAAA,oBAAA,EACR,CACF;AAAA,kBAAA,EAAA,CAEJ;AAAA,gBAAA;AAAA,gBA5BKlC,EAAI;AAAA,cAAA;AAAA,YA+Bf,CAAC;AAAA,UAAA,EAAA,CACH,EAAA,CACF;AAAA,UAEA,gBAAAS,EAAC,WACE,UAAAxD,IAAUiE,OAAuBzE,EAAK,IAAI,CAACmC,GAAKwC,MAAa;AAC5D,kBAAM/E,IAAMM,EAAOiC,GAAKwC,CAAQ,GAC1Be,IAAajE,EAAkB,IAAI7B,CAAG,GACtC+F,IAAQ,CAACxB,EAAO,IAAIuB,IAAavB,EAAO,aAAa,EAAE,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAEvF,qCACG,MAAA,EAAa,WAAWwB,GAAO,iBAAexF,IAAauF,IAAa,QACtE,UAAA;AAAA,cAAAvF,uBACE,MAAA,EAAG,WAAW,CAACgE,EAAO,IAAIA,EAAO,YAAYuB,IAAavB,EAAO,aAAa,EAAE,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,GACzG,UAAA,gBAAAH;AAAA,gBAACkB;AAAA,gBAAA;AAAA,kBACC,SAASQ;AAAA,kBACT,UAAU,MAAMtC,EAAgBxD,CAAG;AAAA,kBACnC,cAAY,cAAc+E,IAAW,CAAC;AAAA,gBAAA;AAAA,cAAA,GAE1C;AAAA,cAGDjD,KACC,gBAAAsC,EAAC,MAAA,EAAG,WAAW,CAACG,EAAO,IAAIA,EAAO,WAAWuB,IAAavB,EAAO,aAAa,EAAE,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,GACxG,UAAA,gBAAAH;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,MAAK;AAAA,kBACL,mBAAe;AAAA,kBACf,WAAWG,EAAO;AAAA,kBAClB,cAAY5D;AAAA,kBACZ,iBAAc;AAAA,kBACd,kBAAeoB,KAAA,gBAAAA,EAAa,SAAQ/B;AAAA,kBACpC,SAAS,CAAC4C,MAAMN,EAAgBM,GAAG5C,GAAKuC,CAAG;AAAA,kBAE3C,4BAACmD,GAAA,EAAK,IAAIM,IAAyB,MAAM,IAAI,QAAO,OAAA,CAAO;AAAA,gBAAA;AAAA,cAAA,GAE/D;AAAA,cAGD3F,EAAQ,IAAI,CAACsD,MAAQ;AACpB,sBAAMsC,IAAQ,CAAC1B,EAAO,IAAIuB,IAAavB,EAAO,aAAa,EAAE,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,GACjFY,IAAiC,CAAA;AACvC,uBAAIxB,EAAI,UAAUwB,EAAU,QAAWxB,EAAI,QACvCA,EAAI,aAAUwB,EAAU,WAAWxB,EAAI,WACvCA,EAAI,UAAUwB,EAAU,YAAYxB,EAAI,QAG1C,gBAAAS,EAAC,MAAA,EAAiB,WAAW6B,GAAO,OAAOd,GACxC,UAAAvB,GAAWrB,GAAKoB,CAAG,EAAA,GADbA,EAAI,GAEb;AAAA,cAEJ,CAAC;AAAA,YAAA,EAAA,GAvCM3D,CAwCT;AAAA,UAEJ,CAAC,EAAA,CACH;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA,GAEJ;AAAA,IAECiB,KACC,gBAAAmD,EAAC,OAAA,EAAI,WAAWG,EAAO,QACrB,UAAA,gBAAAS,EAAC,OAAA,EAAI,WAAWT,EAAO,YACpB,UAAA;AAAA,MAAArD,KAAc,gBAAAkD,EAAC,QAAA,EAAK,WAAWG,EAAO,YAAa,UAAArD,GAAW;AAAA,MAC9DC,KACC,gBAAAiD,EAAC,OAAA,EAAI,WAAWG,EAAO,iBACrB,UAAA,gBAAAH;AAAA,QAAC8B;AAAA,QAAA;AAAA,UACC,aAAA9E;AAAA,UACA,YAAAC;AAAA,UACA,UAAAC;AAAA,UACA,cAAAC;AAAA,UACA,kBAAAC;AAAA,QAAA;AAAA,MAAA,EACF,CACF;AAAA,IAAA,EAAA,CAEJ,EAAA,CACF;AAAA,IAGDO,KACC,gBAAAqC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAKlC;AAAA,QACL,WAAWqC,EAAO;AAAA,QAClB,OAAO,EAAE,KAAKxC,EAAY,KAAK,MAAMA,EAAY,KAAA;AAAA,QAEjD,UAAA,gBAAAqC;AAAA,UAAC+B;AAAA,UAAA;AAAA,YACC,OAAOzF,EAAYqB,EAAY,GAAG,EAAE,IAAI,CAACqE,OAAU;AAAA,cACjD,GAAGA;AAAA,cACH,SAAS,CAACC,MAAO;;AACf,iBAAAvD,IAAAsD,EAAK,YAAL,QAAAtD,EAAA,KAAAsD,GAAeC,IACfjE,EAAA;AAAA,cACF;AAAA,YAAA,EACA;AAAA,UAAA;AAAA,QAAA;AAAA,MACJ;AAAA,IAAA;AAAA,EACF,GAEJ;AAEJ;"}

package/Table/Table.module.css

@@ -0,0 +1 @@
+._scrollable_1rjtm_9{scrollbar-width:thin;scrollbar-color:var(--color-fill-neutral-muted) transparent}._scrollable_1rjtm_9::-webkit-scrollbar{width:8px;height:8px}._scrollable_1rjtm_9::-webkit-scrollbar-track{background:transparent;border-radius:4px}._scrollable_1rjtm_9::-webkit-scrollbar-thumb{background-color:var(--color-fill-neutral-muted);border-radius:4px}._scrollable_1rjtm_9::-webkit-scrollbar-thumb:hover{background-color:var(--color-fill-neutral-default)}._scrollable_1rjtm_9::-webkit-scrollbar-thumb:active{background-color:var(--color-fill-neutral-strong)}._table_1i91z_2{display:flex;flex-direction:column;align-items:flex-start;overflow:hidden;border-radius:12px;background-color:var(--color-canvas-neutral-white);box-shadow:var(--shadow-layer-md);width:100%;font-family:var(--font-family-base, system-ui, sans-serif)}._tableBody_1i91z_15{display:flex;align-items:flex-start;overflow-x:auto;overflow-y:clip;width:100%;flex-shrink:0;scrollbar-width:none}._tableBody_1i91z_15::-webkit-scrollbar{height:0}._tableBody_1i91z_15._tableBodyScrollbar_1i91z_30{scrollbar-width:thin}._tableBody_1i91z_15._tableBodyScrollbar_1i91z_30::-webkit-scrollbar{height:8px}._tableEl_1i91z_46{width:100%;border-collapse:collapse;table-layout:auto}._th_1i91z_53{box-sizing:border-box;height:48px;padding:8px 16px;background-color:var(--color-fill-neutral-muted);border-bottom:1px solid var(--color-stroke-neutral-default);text-align:left;white-space:nowrap;min-width:80px;cursor:default;transition:background-color .12s ease}._th_1i91z_53:focus-visible{outline:none;box-shadow:var(--shadow-focus)}._thSortable_1i91z_74{cursor:pointer}._thSortable_1i91z_74:hover{background-color:var(--color-fill-interaction-neutral-muted-hover)}._thCheckbox_1i91z_83{width:56px;min-width:56px;padding:8px 16px;text-align:center;line-height:0}._thCheckbox_1i91z_83>*,._tdCheckbox_1i91z_94>*{vertical-align:middle}._thInner_1i91z_99{display:flex;align-items:center;gap:16px}._thContent_1i91z_105{display:flex;align-items:center;gap:4px;flex:1 0 0;min-width:0}._thLabel_1i91z_113{font-size:var(--font-size-14);font-weight:var(--font-weight-semibold);line-height:var(--font-line-height-14);color:var(--color-text-neutral-mudle);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1 0 0;min-width:0}._thSortIcon_1i91z_125{display:flex;align-items:center;flex-shrink:0;color:var(--color-icon-neutral-default)}._thHelpIcon_1i91z_132{display:flex;align-items:center;flex-shrink:0;color:var(--color-icon-neutral-subtle)}._tr_1i91z_140{background-color:var(--color-canvas-neutral-white);transition:background-color .12s ease}._tr_1i91z_140:hover ._td_1i91z_94{background-color:var(--color-fill-interaction-neutral-subtle-hover)}._trSelected_1i91z_149 ._td_1i91z_94,._trSelected_1i91z_149:hover ._td_1i91z_94{background-color:var(--color-fill-brand-subtle)}._td_1i91z_94{box-sizing:border-box;height:56px;padding:8px 16px;border-bottom:1px solid var(--color-stroke-neutral-default);background-color:var(--color-canvas-neutral-white);vertical-align:middle;white-space:nowrap;font-size:var(--font-size-14);font-weight:var(--font-weight-regular);line-height:var(--font-line-height-14);color:var(--color-text-neutral-mudle);transition:background-color .12s ease}._tdSelected_1i91z_173{background-color:var(--color-fill-brand-subtle)}._tdCheckbox_1i91z_94{width:56px;min-width:56px;text-align:center;line-height:0}._cellText_1i91z_188{font-size:var(--font-size-14);font-weight:var(--font-weight-regular);line-height:var(--font-line-height-14);color:var(--color-text-neutral-mudle);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%;display:block}._actionsCell_1i91z_201{display:flex;align-items:center;gap:4px}._thActions_1i91z_208{width:80px;min-width:80px;text-align:center}._actionsHeaderLabel_1i91z_214{font-size:var(--font-size-14);font-weight:var(--font-weight-semibold);line-height:var(--font-line-height-14);color:var(--color-text-neutral-mudle)}._tdActions_1i91z_221{width:80px;min-width:80px;text-align:center}._gearButton_1i91z_227{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:9999px;border:none;background-color:transparent;color:var(--color-icon-brand-default);cursor:pointer;transition:background-color .12s ease}._gearButton_1i91z_227:hover{background-color:var(--color-fill-interaction-neutral-subtle-hover)}._gearButton_1i91z_227:focus-visible{outline:none;box-shadow:var(--shadow-focus)}._actionMenuFloat_1i91z_251{position:fixed;z-index:1000}._footer_1i91z_257{display:flex;flex-direction:column;align-items:flex-start;width:100%;flex-shrink:0;background-color:var(--color-canvas-neutral-white)}._footerInfo_1i91z_266{display:flex;align-items:center;padding:12px 16px;width:100%;background-color:var(--color-canvas-neutral-white);gap:8px}._footerText_1i91z_275{font-size:var(--font-size-14);font-weight:var(--font-weight-regular);line-height:var(--font-line-height-14);color:var(--color-text-neutral-subtle);white-space:nowrap;flex-shrink:0}._footerPaginator_1i91z_284{margin-left:auto}

package/Table/Table.module.css.js

@@ -0,0 +1,64 @@
+import './Table.module.css';const t = "_table_1i91z_2", o = "_tableBody_1i91z_15", e = "_tableBodyScrollbar_1i91z_30 _scrollable_1rjtm_9", _ = "_tableEl_1i91z_46", n = "_thead_1i91z_53", c = "_th_1i91z_53", l = "_thSortable_1i91z_74", a = "_thCheckbox_1i91z_83", i = "_tdCheckbox_1i91z_94", s = "_thInner_1i91z_99", r = "_thContent_1i91z_105", h = "_thLabel_1i91z_113", b = "_thSortIcon_1i91z_125", d = "_thHelpIcon_1i91z_132", z = "_tr_1i91z_140", f = "_td_1i91z_94", S = "_trSelected_1i91z_149", x = "_tdSelected_1i91z_173", C = "_cellText_1i91z_188", I = "_actionsCell_1i91z_201", B = "_thActions_1i91z_208", u = "_actionsHeaderLabel_1i91z_214", y = "_tdActions_1i91z_221", g = "_gearButton_1i91z_227", k = "_actionMenuFloat_1i91z_251", A = "_footer_1i91z_257", H = "_footerInfo_1i91z_266", L = "_footerText_1i91z_275", T = "_footerPaginator_1i91z_284", p = {
+  table: t,
+  tableBody: o,
+  tableBodyScrollbar: e,
+  tableEl: _,
+  thead: n,
+  th: c,
+  thSortable: l,
+  thCheckbox: a,
+  tdCheckbox: i,
+  thInner: s,
+  thContent: r,
+  thLabel: h,
+  thSortIcon: b,
+  thHelpIcon: d,
+  tr: z,
+  td: f,
+  trSelected: S,
+  tdSelected: x,
+  cellText: C,
+  actionsCell: I,
+  thActions: B,
+  actionsHeaderLabel: u,
+  tdActions: y,
+  gearButton: g,
+  actionMenuFloat: k,
+  footer: A,
+  footerInfo: H,
+  footerText: L,
+  footerPaginator: T
+};
+export {
+  k as actionMenuFloat,
+  I as actionsCell,
+  u as actionsHeaderLabel,
+  C as cellText,
+  p as default,
+  A as footer,
+  H as footerInfo,
+  T as footerPaginator,
+  L as footerText,
+  g as gearButton,
+  t as table,
+  o as tableBody,
+  e as tableBodyScrollbar,
+  _ as tableEl,
+  f as td,
+  y as tdActions,
+  i as tdCheckbox,
+  x as tdSelected,
+  c as th,
+  B as thActions,
+  a as thCheckbox,
+  r as thContent,
+  d as thHelpIcon,
+  s as thInner,
+  h as thLabel,
+  b as thSortIcon,
+  l as thSortable,
+  n as thead,
+  z as tr,
+  S as trSelected
+};
+//# sourceMappingURL=Table.module.css.js.map

package/Table/Table.module.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Table.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/TableTree/TableTree.js

@@ -0,0 +1,139 @@
+import { jsxs as i, jsx as t } from "react/jsx-runtime";
+import K, { useState as L } from "react";
+import { SortAscending as O, CaretRight as P } from "@phosphor-icons/react";
+import { Icon as E } from "../Icon/Icon.js";
+import { Paginator as q } from "../Paginator/Paginator.js";
+import e from "./TableTree.module.css.js";
+function z(c) {
+  const o = {};
+  c.forEach((n) => {
+    n.expandedContent != null && (o[n.id] = n.defaultExpanded ?? !1);
+  });
+  const [d, h] = L(o);
+  function p(n) {
+    h((l) => ({ ...l, [n]: !l[n] }));
+  }
+  return [d, p];
+}
+function V({
+  columns: c,
+  rows: o,
+  onSort: d,
+  onToggleExpand: h,
+  onRowClick: p,
+  showFooter: n = !1,
+  totalRecords: l,
+  currentPage: f = 1,
+  totalPages: j = 1,
+  pageSize: x = 10,
+  onPageChange: B,
+  onPageSizeChange: k,
+  className: I,
+  disabled: u = !1
+}) {
+  const [C, g] = z(o), W = [e.tableTree, I, u ? e.disabled : ""].filter(Boolean).join(" ");
+  function $(a) {
+    const s = !C[a.id];
+    g(a.id), h == null || h(a.id, s);
+  }
+  const N = n && l != null, D = N ? (f - 1) * x + 1 : 0, M = N ? Math.min(f * x, l) : 0;
+  return /* @__PURE__ */ i("div", { className: W, "aria-disabled": u || void 0, children: [
+    /* @__PURE__ */ t("div", { className: e.tableBody, children: /* @__PURE__ */ i("table", { className: e.tableEl, role: "treegrid", children: [
+      /* @__PURE__ */ t("thead", { className: e.thead, children: /* @__PURE__ */ i("tr", { children: [
+        /* @__PURE__ */ t("th", { className: [e.th, e.thExpand].join(" "), scope: "col", "aria-label": "Expand" }),
+        c.map((a) => /* @__PURE__ */ t(
+          "th",
+          {
+            scope: "col",
+            className: [
+              e.th,
+              a.sortable ? e.thSortable : ""
+            ].filter(Boolean).join(" "),
+            style: a.minWidth ? { minWidth: a.minWidth } : void 0,
+            onClick: a.sortable ? () => d == null ? void 0 : d(a.key) : void 0,
+            tabIndex: a.sortable ? 0 : void 0,
+            onKeyDown: a.sortable ? (s) => {
+              (s.key === "Enter" || s.key === " ") && (s.preventDefault(), d == null || d(a.key));
+            } : void 0,
+            "aria-sort": a.sortable ? "none" : void 0,
+            children: /* @__PURE__ */ i("div", { className: e.thInner, children: [
+              /* @__PURE__ */ t("div", { className: e.thContent, children: /* @__PURE__ */ t("span", { className: e.thLabel, children: a.header }) }),
+              a.sortable && /* @__PURE__ */ t("span", { className: e.thSortIcon, "aria-hidden": "true", children: /* @__PURE__ */ t(E, { as: O, size: 16, weight: "bold" }) })
+            ] })
+          },
+          a.key
+        ))
+      ] }) }),
+      /* @__PURE__ */ t("tbody", { children: o.map((a, s) => {
+        const m = C[a.id] ?? !1, b = a.selected ?? !1, v = a.expandedContent != null, S = [e.tr, b ? e.trSelected : ""].filter(Boolean).join(" "), T = typeof a.expandedContent == "function" ? a.expandedContent(a.data) : a.expandedContent;
+        return /* @__PURE__ */ i(K.Fragment, { children: [
+          /* @__PURE__ */ i(
+            "tr",
+            {
+              className: S,
+              "aria-selected": b,
+              "aria-expanded": v ? m : void 0,
+              onClick: p ? () => p(a) : void 0,
+              style: p ? { cursor: "pointer" } : void 0,
+              children: [
+                /* @__PURE__ */ t("td", { className: [e.td, e.tdExpand].join(" "), children: v && /* @__PURE__ */ t(
+                  "button",
+                  {
+                    className: e.expandBtn,
+                    "aria-label": m ? "Collapse row" : "Expand row",
+                    "aria-expanded": m,
+                    onClick: (r) => {
+                      r.stopPropagation(), $(a);
+                    },
+                    children: /* @__PURE__ */ t(
+                      "span",
+                      {
+                        className: [
+                          e.expandBtnIcon,
+                          m ? e.expandBtnIconOpen : ""
+                        ].filter(Boolean).join(" "),
+                        children: /* @__PURE__ */ t(E, { as: P, size: 16, weight: "bold" })
+                      }
+                    )
+                  }
+                ) }),
+                c.map((r) => {
+                  const A = [e.td, b ? e.tdSelected : ""].filter(Boolean).join(" "), y = a.data[r.key];
+                  return /* @__PURE__ */ t("td", { className: A, children: r.render ? r.render(a.data, s) : /* @__PURE__ */ t("span", { className: e.cellText, children: y != null ? String(y) : "" }) }, r.key);
+                })
+              ]
+            }
+          ),
+          v && m && /* @__PURE__ */ t("tr", { className: e.trExpanded, children: /* @__PURE__ */ t(
+            "td",
+            {
+              className: [e.td, e.tdExpanded].join(" "),
+              colSpan: c.length + 1,
+              children: /* @__PURE__ */ t("div", { className: e.expandedContainer, children: T })
+            }
+          ) })
+        ] }, a.id);
+      }) })
+    ] }) }),
+    n && /* @__PURE__ */ i("div", { className: e.footer, children: [
+      /* @__PURE__ */ t("div", { className: e.footerScrollWrap }),
+      /* @__PURE__ */ i("div", { className: e.footerInfo, children: [
+        N && /* @__PURE__ */ t("span", { className: e.footerText, children: `Mostrando ${D} até ${M} de ${l} registros` }),
+        /* @__PURE__ */ t("div", { className: e.footerPaginator, children: /* @__PURE__ */ t(
+          q,
+          {
+            currentPage: f,
+            totalPages: j,
+            pageSize: x,
+            onPageChange: B,
+            onPageSizeChange: k
+          }
+        ) })
+      ] })
+    ] })
+  ] });
+}
+export {
+  V as TableTree
+};
+//# sourceMappingURL=TableTree.js.map

package/TableTree/TableTree.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableTree.js","sources":["../../src/TableTree/TableTree.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { CaretRight, SortAscending } from '@phosphor-icons/react';\nimport { Icon } from '../Icon/index.js';\nimport { Paginator } from '../Paginator/index.js';\nimport type { PaginatorPageSize } from '../Paginator/index.js';\nimport styles from './TableTree.module.css';\n\n// ─── Column definition ──────────────────────────────────────────\nexport interface TableTreeColumn<T = Record<string, unknown>> {\n  /** Unique column key. Must match a key on the data row object. */\n  key: string;\n  /** Header label shown in the column head cell. */\n  header: string;\n  /** Minimum column width in px. Defaults to 80. */\n  minWidth?: number;\n  /** Whether the column header should appear sortable. */\n  sortable?: boolean;\n  /** Custom cell renderer. Receives the row data and must return React content. */\n  render?: (row: T, rowIndex: number) => React.ReactNode;\n}\n\n// ─── Row definition ─────────────────────────────────────────────\nexport interface TableTreeRow<T = Record<string, unknown>> {\n  /** Unique row identifier. */\n  id: string | number;\n  /** Row data — keys should correspond to column keys. */\n  data: T;\n  /** Whether this row is selected. */\n  selected?: boolean;\n  /**\n   * Content shown in the expanded area beneath the row.\n   * When provided an expand toggle button is rendered.\n   * Can be a ReactNode (static) or a function receiving the row data (dynamic).\n   */\n  expandedContent?: React.ReactNode | ((data: T) => React.ReactNode);\n  /**\n   * Whether the row starts expanded. Only used for uncontrolled mode.\n   * Defaults to false.\n   */\n  defaultExpanded?: boolean;\n}\n\n// ─── TableTree props ────────────────────────────────────────────\nexport interface TableTreeProps<T = Record<string, unknown>> {\n  /** Column definitions. */\n  columns: TableTreeColumn<T>[];\n  /** Row data with optional expanded content. */\n  rows: TableTreeRow<T>[];\n  /** Called when a column header sort button is clicked. */\n  onSort?: (columnKey: string) => void;\n  /** Called when a row expand toggle is clicked. */\n  onToggleExpand?: (rowId: string | number, expanded: boolean) => void;\n  /** Called when a row is clicked. */\n  onRowClick?: (row: TableTreeRow<T>) => void;\n\n  /* ─── Footer / pagination ───────── */\n  /** Whether to show the footer (paginator + record count). Defaults to false. */\n  showFooter?: boolean;\n  /** Total number of records. Used for the record-count label. */\n  totalRecords?: number;\n  /** Current page (1-based). */\n  currentPage?: number;\n  /** Total number of pages. */\n  totalPages?: number;\n  /** Current page size. */\n  pageSize?: PaginatorPageSize;\n  /** Called when the user navigates to a different page. */\n  onPageChange?: (page: number) => void;\n  /** Called when the user selects a different page size. */\n  onPageSizeChange?: (pageSize: PaginatorPageSize) => void;\n\n  /** Optional extra CSS class for the root element. */\n  className?: string;\n  /** Whether the entire table is disabled. */\n  disabled?: boolean;\n}\n\n// ─── Internal hook for per-row expand state ──────────────────────\nfunction useExpandState(rows: Array<{ id: string | number; expandedContent?: unknown; defaultExpanded?: boolean }>): [\n  Record<string | number, boolean>,\n  (id: string | number) => void,\n] {\n  const initial: Record<string | number, boolean> = {};\n  rows.forEach((r) => {\n    if (r.expandedContent != null) {\n      initial[r.id] = r.defaultExpanded ?? false;\n    }\n  });\n  const [state, setState] = useState(initial);\n\n  function toggle(id: string | number) {\n    setState((prev) => ({ ...prev, [id]: !prev[id] }));\n  }\n\n  return [state, toggle];\n}\n\n// ─── Component ──────────────────────────────────────────────────\nexport function TableTree<T = Record<string, unknown>>({\n  columns,\n  rows,\n  onSort,\n  onToggleExpand,\n  onRowClick,\n  showFooter = false,\n  totalRecords,\n  currentPage = 1,\n  totalPages = 1,\n  pageSize = 10,\n  onPageChange,\n  onPageSizeChange,\n  className,\n  disabled = false,\n}: TableTreeProps<T>) {\n  const [expandState, toggleExpand] = useExpandState(rows);\n\n  const rootCls = [styles.tableTree, className, disabled ? styles.disabled : '']\n    .filter(Boolean)\n    .join(' ');\n\n  function handleToggle(row: { id: string | number }) {\n    const nextExpanded = !expandState[row.id];\n    toggleExpand(row.id);\n    onToggleExpand?.(row.id, nextExpanded);\n  }\n\n  const showRecordCount = showFooter && totalRecords != null;\n  const from = showRecordCount ? (currentPage - 1) * pageSize + 1 : 0;\n  const to = showRecordCount ? Math.min(currentPage * pageSize, totalRecords!) : 0;\n\n  return (\n    <div className={rootCls} aria-disabled={disabled || undefined}>\n      {/* ── Horizontally scrollable body ── */}\n      <div className={styles.tableBody}>\n        <table className={styles.tableEl} role=\"treegrid\">\n          {/* ── Head ── */}\n          <thead className={styles.thead}>\n            <tr>\n              {/* Expand toggle column */}\n              <th className={[styles.th, styles.thExpand].join(' ')} scope=\"col\" aria-label=\"Expand\" />\n\n              {columns.map((col) => (\n                <th\n                  key={col.key}\n                  scope=\"col\"\n                  className={[\n                    styles.th,\n                    col.sortable ? styles.thSortable : '',\n                  ]\n                    .filter(Boolean)\n                    .join(' ')}\n                  style={col.minWidth ? { minWidth: col.minWidth } : undefined}\n                  onClick={col.sortable ? () => onSort?.(col.key) : undefined}\n                  tabIndex={col.sortable ? 0 : undefined}\n                  onKeyDown={\n                    col.sortable\n                      ? (e) => {\n                          if (e.key === 'Enter' || e.key === ' ') {\n                            e.preventDefault();\n                            onSort?.(col.key);\n                          }\n                        }\n                      : undefined\n                  }\n                  aria-sort={col.sortable ? 'none' : undefined}\n                >\n                  <div className={styles.thInner}>\n                    <div className={styles.thContent}>\n                      <span className={styles.thLabel}>{col.header}</span>\n                    </div>\n                    {col.sortable && (\n                      <span className={styles.thSortIcon} aria-hidden=\"true\">\n                        <Icon as={SortAscending} size={16} weight=\"bold\" />\n                      </span>\n                    )}\n                  </div>\n                </th>\n              ))}\n            </tr>\n          </thead>\n\n          {/* ── Body ── */}\n          <tbody>\n            {rows.map((row, rowIndex) => {\n              const isExpanded = expandState[row.id] ?? false;\n              const isSelected = row.selected ?? false;\n              const hasExpanded = row.expandedContent != null;\n\n              const trCls = [styles.tr, isSelected ? styles.trSelected : '']\n                .filter(Boolean)\n                .join(' ');\n\n              const resolvedExpContent =\n                typeof row.expandedContent === 'function'\n                  ? (row.expandedContent as (data: T) => React.ReactNode)(row.data)\n                  : row.expandedContent;\n\n              return (\n                <React.Fragment key={row.id}>\n                  <tr\n                    className={trCls}\n                    aria-selected={isSelected}\n                    aria-expanded={hasExpanded ? isExpanded : undefined}\n                    onClick={onRowClick ? () => onRowClick(row) : undefined}\n                    style={onRowClick ? { cursor: 'pointer' } : undefined}\n                  >\n                    {/* Expand toggle cell */}\n                    <td className={[styles.td, styles.tdExpand].join(' ')}>\n                      {hasExpanded && (\n                        <button\n                          className={styles.expandBtn}\n                          aria-label={isExpanded ? 'Collapse row' : 'Expand row'}\n                          aria-expanded={isExpanded}\n                          onClick={(e) => {\n                            e.stopPropagation();\n                            handleToggle(row);\n                          }}\n                        >\n                          <span\n                            className={[\n                              styles.expandBtnIcon,\n                              isExpanded ? styles.expandBtnIconOpen : '',\n                            ]\n                              .filter(Boolean)\n                              .join(' ')}\n                          >\n                            <Icon as={CaretRight} size={16} weight=\"bold\" />\n                          </span>\n                        </button>\n                      )}\n                    </td>\n\n                    {/* Data cells */}\n                    {columns.map((col) => {\n                      const tdCls = [styles.td, isSelected ? styles.tdSelected : '']\n                        .filter(Boolean)\n                        .join(' ');\n                      const value = (row.data as Record<string, unknown>)[col.key];\n                      return (\n                        <td key={col.key} className={tdCls}>\n                          {col.render ? (\n                            col.render(row.data as T, rowIndex)\n                          ) : (\n                            <span className={styles.cellText}>\n                              {value != null ? String(value) : ''}\n                            </span>\n                          )}\n                        </td>\n                      );\n                    })}\n                  </tr>\n\n                  {/* Expanded content row */}\n                  {hasExpanded && isExpanded && (\n                    <tr className={styles.trExpanded}>\n                      <td\n                        className={[styles.td, styles.tdExpanded].join(' ')}\n                        colSpan={columns.length + 1}\n                      >\n                        <div className={styles.expandedContainer}>\n                          {resolvedExpContent}\n                        </div>\n                      </td>\n                    </tr>\n                  )}\n                </React.Fragment>\n              );\n            })}\n          </tbody>\n        </table>\n      </div>\n\n      {/* ── Footer ── */}\n      {showFooter && (\n        <div className={styles.footer}>\n          <div className={styles.footerScrollWrap} />\n          <div className={styles.footerInfo}>\n            {showRecordCount && (\n              <span className={styles.footerText}>\n                {`Mostrando ${from} até ${to} de ${totalRecords} registros`}\n              </span>\n            )}\n            <div className={styles.footerPaginator}>\n              <Paginator\n                currentPage={currentPage}\n                totalPages={totalPages}\n                pageSize={pageSize}\n                onPageChange={onPageChange}\n                onPageSizeChange={onPageSizeChange}\n              />\n            </div>\n          </div>\n        </div>\n      )}\n    </div>\n  );\n}\n"],"names":["useExpandState","rows","initial","r","state","setState","useState","toggle","id","prev","TableTree","columns","onSort","onToggleExpand","onRowClick","showFooter","totalRecords","currentPage","totalPages","pageSize","onPageChange","onPageSizeChange","className","disabled","expandState","toggleExpand","rootCls","styles","handleToggle","row","nextExpanded","showRecordCount","from","to","jsx","jsxs","col","e","Icon","SortAscending","rowIndex","isExpanded","isSelected","hasExpanded","trCls","resolvedExpContent","React","CaretRight","tdCls","value","Paginator"],"mappings":"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"}

package/TableTree/TableTree.module.css

@@ -0,0 +1 @@
+._scrollable_1rjtm_9{scrollbar-width:thin;scrollbar-color:var(--color-fill-neutral-muted) transparent}._scrollable_1rjtm_9::-webkit-scrollbar{width:8px;height:8px}._scrollable_1rjtm_9::-webkit-scrollbar-track{background:transparent;border-radius:4px}._scrollable_1rjtm_9::-webkit-scrollbar-thumb{background-color:var(--color-fill-neutral-muted);border-radius:4px}._scrollable_1rjtm_9::-webkit-scrollbar-thumb:hover{background-color:var(--color-fill-neutral-default)}._scrollable_1rjtm_9::-webkit-scrollbar-thumb:active{background-color:var(--color-fill-neutral-strong)}._tableTree_13czp_2{display:flex;flex-direction:column;align-items:flex-start;overflow:hidden;border-radius:8px;background-color:var(--color-canvas-neutral-white);box-shadow:var(--shadow-layer-sm);width:100%;font-family:var(--font-family-base, system-ui, sans-serif)}._tableBody_13czp_15{display:flex;align-items:flex-start;overflow-x:auto;overflow-y:clip;width:100%;flex-shrink:0}._tableEl_13czp_26{width:100%;border-collapse:collapse;table-layout:auto}._th_13czp_33{box-sizing:border-box;height:48px;padding:8px 16px;background-color:var(--color-fill-neutral-muted);border-bottom:1px solid var(--color-stroke-neutral-default);text-align:left;white-space:nowrap;min-width:80px;cursor:default;transition:background-color .12s ease}._th_13czp_33:focus-visible{outline:none;box-shadow:var(--shadow-focus)}._thSortable_13czp_54{cursor:pointer}._thSortable_13czp_54:hover{background-color:var(--color-fill-interaction-neutral-muted-hover)}._thCheckbox_13czp_63,._thExpand_13czp_70{width:56px;min-width:56px;padding:8px 16px}._thInner_13czp_77{display:flex;align-items:center;gap:16px}._thContent_13czp_83{display:flex;align-items:center;gap:4px;flex:1 0 0;min-width:0}._thLabel_13czp_91{font-size:var(--font-size-14);font-weight:var(--font-weight-semibold);line-height:var(--font-line-height-14);color:var(--color-text-neutral-mudle);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1 0 0;min-width:0}._thSortIcon_13czp_103{display:flex;align-items:center;flex-shrink:0;color:var(--color-icon-neutral-default)}._thHelpIcon_13czp_110{display:flex;align-items:center;flex-shrink:0;color:var(--color-icon-neutral-subtle)}._tr_13czp_118{background-color:var(--color-canvas-neutral-white);transition:background-color .12s ease}._tr_13czp_118:hover ._td_13czp_123{background-color:var(--color-fill-interaction-neutral-subtle-hover)}._trSelected_13czp_127 ._td_13czp_123,._trSelected_13czp_127:hover ._td_13czp_123{background-color:var(--color-fill-brand-subtle)}._tdExpanded_13czp_138{padding:0;background-color:var(--color-canvas-neutral-white)}._expandedContainer_13czp_143{padding:16px;background-color:var(--color-canvas-neutral-white);border-bottom:1px solid var(--color-stroke-neutral-default)}._td_13czp_123{box-sizing:border-box;height:56px;padding:8px 16px;border-bottom:1px solid var(--color-stroke-neutral-default);background-color:var(--color-canvas-neutral-white);vertical-align:middle;white-space:nowrap;transition:background-color .12s ease}._tdSelected_13czp_161{background-color:var(--color-fill-brand-subtle)}._tdCheckbox_13czp_166,._tdExpand_13czp_138{width:56px;min-width:56px;text-align:center;vertical-align:middle}._expandBtn_13czp_182{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:9999px;border:1px solid var(--color-stroke-neutral-default);background-color:var(--color-canvas-neutral-white);color:var(--color-icon-neutral-default);cursor:pointer;transition:background-color .12s ease,border-color .12s ease,box-shadow .12s ease;flex-shrink:0}._expandBtn_13czp_182:hover{background-color:var(--color-fill-interaction-neutral-subtle-hover)}._expandBtn_13czp_182:focus-visible{outline:none;box-shadow:var(--shadow-focus)}._expandBtnIcon_13czp_209{transition:transform .2s ease}._expandBtnIconOpen_13czp_213{transform:rotate(90deg)}._cellText_13czp_218{font-size:var(--font-size-14);font-weight:var(--font-weight-regular);line-height:var(--font-line-height-14);color:var(--color-text-neutral-mudle);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%;display:block}._footer_13czp_231{display:flex;flex-direction:column;align-items:flex-start;width:100%;flex-shrink:0;background-color:var(--color-canvas-neutral-white)}._footerScrollWrap_13czp_240{display:flex;flex-direction:column;align-items:flex-start;width:100%;background-color:var(--color-canvas-neutral-white)}._footerInfo_13czp_248{display:flex;align-items:center;padding:12px 16px;width:100%;background-color:var(--color-canvas-neutral-white);gap:8px}._footerText_13czp_257{font-size:var(--font-size-14);font-weight:var(--font-weight-regular);line-height:var(--font-line-height-14);color:var(--color-text-neutral-subtle);white-space:nowrap;flex-shrink:0}._footerPaginator_13czp_266{margin-left:auto}