@undevy-org/tablewright 0.1.0

package/dist/es/components/data-table/GroupedColumnToggle.js

@@ -0,0 +1,112 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { TwoPanelMenuBase } from "./TwoPanelMenu.js";
+import { Columns, ChevronDown } from "lucide-react";
+import { Button } from "../ui/button.js";
+import { Checkbox } from "../ui/checkbox.js";
+function CheckboxRightPanel({
+  group,
+  columnVisibility,
+  onColumnToggle,
+  onGroupToggleAll
+}) {
+  const allVisible = group.items.every((item) => columnVisibility[item.id] !== false);
+  const noneVisible = group.items.every((item) => columnVisibility[item.id] === false);
+  const isIndeterminate = !allVisible && !noneVisible;
+  return /* @__PURE__ */ jsxs("div", { style: { padding: 4 }, children: [
+    /* @__PURE__ */ jsxs(
+      "label",
+      {
+        className: "flex w-full items-center gap-2.5 rounded-md px-2 py-2 text-left hover:bg-[var(--bg-hover)] cursor-pointer",
+        style: { fontSize: 12, fontWeight: 500, color: "var(--text-secondary)" },
+        children: [
+          /* @__PURE__ */ jsx(
+            Checkbox,
+            {
+              checked: isIndeterminate ? "indeterminate" : allVisible,
+              onCheckedChange: () => onGroupToggleAll(group.key, !allVisible),
+              className: "h-3.5 w-3.5 rounded-[3px]"
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { children: "All" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: "border-t border-[var(--border-subtle)]", style: { margin: "0 8px 4px 8px" } }),
+    group.items.map((item) => {
+      const isChecked = columnVisibility[item.id] !== false;
+      return /* @__PURE__ */ jsxs(
+        "label",
+        {
+          className: `flex w-full items-center gap-2.5 rounded-md px-2 py-2 text-left hover:bg-[var(--bg-hover)] cursor-pointer ${item.disabled ? "pointer-events-none opacity-50" : ""}`,
+          style: { fontSize: 13 },
+          children: [
+            /* @__PURE__ */ jsx(
+              Checkbox,
+              {
+                checked: isChecked,
+                onCheckedChange: () => onColumnToggle(item.id),
+                disabled: item.disabled,
+                className: "h-3.5 w-3.5 rounded-[3px]"
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { children: item.label })
+          ]
+        },
+        item.id
+      );
+    })
+  ] });
+}
+function GroupedColumnToggle({
+  columnGroups,
+  columnLabels,
+  columnVisibility,
+  onColumnToggle,
+  onGroupToggleAll,
+  open,
+  onOpenChange
+}) {
+  const groups = columnGroups.map((cg) => ({
+    key: cg.key,
+    label: cg.label,
+    items: cg.columnIds.map((columnId) => ({
+      id: columnId,
+      label: columnLabels[columnId] ?? columnId,
+      checked: columnVisibility[columnId] !== false,
+      disabled: false
+    }))
+  }));
+  const activeCountPerGroup = {};
+  for (const cg of columnGroups) {
+    const hiddenCount = cg.columnIds.filter((id) => columnVisibility[id] === false).length;
+    activeCountPerGroup[cg.key] = hiddenCount;
+  }
+  const trigger = /* @__PURE__ */ jsxs(Button, { variant: "secondary", children: [
+    /* @__PURE__ */ jsx(Columns, { size: 14 }),
+    "Columns",
+    /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4 text-[var(--text-tertiary)]" })
+  ] });
+  return /* @__PURE__ */ jsx(
+    TwoPanelMenuBase,
+    {
+      groups,
+      activeCountPerGroup,
+      trigger,
+      width: 380,
+      open,
+      onOpenChange,
+      renderRightPanel: (group) => /* @__PURE__ */ jsx(
+        CheckboxRightPanel,
+        {
+          group,
+          columnVisibility,
+          onColumnToggle,
+          onGroupToggleAll
+        }
+      )
+    }
+  );
+}
+export {
+  GroupedColumnToggle
+};

package/dist/es/components/data-table/RowActionsMenu.js

@@ -0,0 +1,74 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { MoreVertical } from "lucide-react";
+import { Button } from "../ui/button.js";
+import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem } from "../ui/dropdown-menu.js";
+import { cn } from "../../lib/utils.js";
+function RowActionsMenu({
+  actions = [],
+  sections,
+  align = "end",
+  triggerClassName,
+  contentClassName
+}) {
+  const resolvedSections = sections && sections.length > 0 ? sections : actions.length > 0 ? [{ label: "", actions }] : [];
+  const isGrouped = resolvedSections.some((section) => section.label);
+  return /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+    /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "ghost",
+        size: "icon",
+        "aria-label": "Row actions",
+        className: cn(
+          "h-7 w-7 rounded-sm p-0 opacity-0 transition-opacity group-hover:opacity-100 data-[state=open]:opacity-100",
+          triggerClassName
+        ),
+        onClick: (event) => event.stopPropagation(),
+        children: /* @__PURE__ */ jsx(MoreVertical, { className: "h-4 w-4" })
+      }
+    ) }),
+    /* @__PURE__ */ jsx(
+      DropdownMenuContent,
+      {
+        align,
+        className: cn(isGrouped ? "w-[320px] p-1.5" : "w-40", contentClassName),
+        children: resolvedSections.map((section, sectionIndex) => /* @__PURE__ */ jsxs("div", { children: [
+          section.label ? /* @__PURE__ */ jsx("div", { className: "px-2 pb-1 pt-2 text-[10px] font-semibold uppercase tracking-[0.12em] text-[var(--text-tertiary)] first:pt-1", children: section.label }) : null,
+          section.actions.map((action) => /* @__PURE__ */ jsxs(
+            DropdownMenuItem,
+            {
+              disabled: action.disabled,
+              className: cn(
+                "gap-2.5 rounded-md px-2.5 py-2",
+                action.variant === "danger" && "text-[var(--tag-pink-text)]",
+                action.variant === "accent" && "text-[var(--text-primary)]"
+              ),
+              onClick: (event) => {
+                event.stopPropagation();
+                action.onClick(event);
+              },
+              children: [
+                /* @__PURE__ */ jsx(
+                  action.icon,
+                  {
+                    className: cn(
+                      "h-3.5 w-3.5 shrink-0 text-[var(--text-secondary)]",
+                      action.variant === "danger" && "text-[var(--tag-pink-text)]",
+                      action.variant === "accent" && "text-[var(--text-primary)]"
+                    )
+                  }
+                ),
+                /* @__PURE__ */ jsx("span", { className: "truncate", children: action.label })
+              ]
+            },
+            `${section.label}-${action.label}`
+          )),
+          sectionIndex < resolvedSections.length - 1 ? /* @__PURE__ */ jsx("div", { className: "my-1 border-t border-[var(--border-subtle)]" }) : null
+        ] }, section.label || sectionIndex))
+      }
+    )
+  ] });
+}
+export {
+  RowActionsMenu
+};

package/dist/es/components/data-table/RowControlCell.js

@@ -0,0 +1,104 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { GripVertical, Expand } from "lucide-react";
+import { cn } from "../../lib/utils.js";
+import { Checkbox } from "../ui/checkbox.js";
+function RowControlCell({
+  rowNumber,
+  selected,
+  onSelectToggle,
+  onExpandToggle,
+  ariaLabelSelect = "Select row",
+  ariaLabelExpand = "Expand row",
+  forceControlsVisible = false
+}) {
+  const showCheckbox = selected || forceControlsVisible;
+  const showHoverAffordances = forceControlsVisible;
+  return /* @__PURE__ */ jsxs("div", { className: "relative flex h-full w-full items-center justify-center", children: [
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: cn(
+          "text-[11px] tabular-nums text-[var(--text-tertiary)] transition-opacity",
+          showCheckbox ? "opacity-0" : "opacity-100 group-hover:opacity-0"
+        ),
+        children: rowNumber
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "absolute inset-0 flex items-center justify-center transition-opacity",
+          showCheckbox ? "opacity-100" : "pointer-events-none opacity-0 group-hover:pointer-events-auto group-hover:opacity-100"
+        ),
+        children: /* @__PURE__ */ jsx(
+          Checkbox,
+          {
+            checked: selected,
+            onCheckedChange: () => onSelectToggle(),
+            onClick: (e) => {
+              e.stopPropagation();
+            },
+            "aria-label": ariaLabelSelect
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "pointer-events-none absolute inset-y-0 left-0 flex w-5 items-center justify-center transition-opacity",
+          showHoverAffordances ? "opacity-100" : "opacity-0 group-hover:opacity-100"
+        ),
+        children: /* @__PURE__ */ jsx(
+          GripVertical,
+          {
+            className: "h-3.5 w-3.5 shrink-0 text-[var(--text-tertiary)]",
+            "aria-hidden": "true"
+          }
+        )
+      }
+    ),
+    onExpandToggle ? /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "absolute inset-y-0 right-0 flex w-5 items-center justify-center transition-opacity",
+          showHoverAffordances ? "opacity-100" : "pointer-events-none opacity-0 group-hover:pointer-events-auto group-hover:opacity-100"
+        ),
+        children: /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "inline-flex h-5 w-5 items-center justify-center rounded border border-[var(--border-subtle)] text-[var(--text-tertiary)] hover:bg-[var(--bg-hover)]",
+            onClick: (e) => {
+              e.stopPropagation();
+              onExpandToggle(e);
+            },
+            "aria-label": ariaLabelExpand,
+            children: /* @__PURE__ */ jsx(Expand, { className: "h-3 w-3" })
+          }
+        )
+      }
+    ) : null
+  ] });
+}
+function RowControlHeader({
+  checked,
+  onToggle,
+  ariaLabel = "Select all rows on page"
+}) {
+  return /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx(
+    Checkbox,
+    {
+      checked,
+      onCheckedChange: () => onToggle(),
+      "aria-label": ariaLabel
+    }
+  ) });
+}
+export {
+  RowControlCell,
+  RowControlHeader
+};

package/dist/es/components/data-table/SortableHeader.js

@@ -0,0 +1,102 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { ArrowUp, ArrowDown, ArrowUpDown } from "lucide-react";
+import { cn } from "../../lib/utils.js";
+function SortIcon({
+  sorted,
+  hoverClass
+}) {
+  if (sorted === "asc") {
+    return /* @__PURE__ */ jsx(ArrowUp, { className: "h-3 w-3 shrink-0 text-[var(--text-primary)]" });
+  }
+  if (sorted === "desc") {
+    return /* @__PURE__ */ jsx(ArrowDown, { className: "h-3 w-3 shrink-0 text-[var(--text-primary)]" });
+  }
+  return /* @__PURE__ */ jsx(
+    ArrowUpDown,
+    {
+      className: cn(
+        "h-3 w-3 shrink-0 text-[var(--text-tertiary)] opacity-0 transition-opacity",
+        hoverClass
+      )
+    }
+  );
+}
+function SortableHeader({
+  label,
+  primaryLabel,
+  secondaryLabel,
+  mode,
+  sorted,
+  onClick,
+  primarySorted,
+  onPrimaryClick,
+  secondarySorted,
+  onSecondaryClick,
+  className
+}) {
+  const resolvedPrimaryLabel = primaryLabel ?? label ?? "";
+  const resolvedMode = mode ?? (secondaryLabel ? "stacked" : "single");
+  const isStacked = resolvedMode === "stacked";
+  const isDualSort = isStacked && primarySorted !== void 0;
+  if (isDualSort) {
+    return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-0.5", className), children: [
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          className: "group/primary inline-flex cursor-pointer select-none items-center gap-1 text-left",
+          onClick: onPrimaryClick,
+          children: [
+            /* @__PURE__ */ jsx("span", { className: "text-[11px] font-semibold uppercase tracking-[0.08em] text-[var(--text-primary)]", children: resolvedPrimaryLabel }),
+            /* @__PURE__ */ jsx(
+              SortIcon,
+              {
+                sorted: primarySorted,
+                hoverClass: "group-hover/primary:opacity-100"
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          className: "group/secondary inline-flex cursor-pointer select-none items-center gap-1 text-left",
+          onClick: onSecondaryClick,
+          children: [
+            /* @__PURE__ */ jsx("span", { className: "text-[10px] font-medium uppercase tracking-[0.06em] text-[var(--text-tertiary)]", children: secondaryLabel }),
+            /* @__PURE__ */ jsx(
+              SortIcon,
+              {
+                sorted: secondarySorted,
+                hoverClass: "group-hover/secondary:opacity-100"
+              }
+            )
+          ]
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      className: cn(
+        "group/header inline-flex cursor-pointer select-none items-start gap-1.5 text-left",
+        className
+      ),
+      onClick,
+      children: [
+        isStacked ? /* @__PURE__ */ jsxs("span", { className: "flex flex-col leading-none", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-[11px] font-semibold uppercase tracking-[0.08em] text-[var(--text-primary)]", children: resolvedPrimaryLabel }),
+          /* @__PURE__ */ jsx("span", { className: "mt-1 text-[10px] font-medium uppercase tracking-[0.06em] text-[var(--text-tertiary)]", children: secondaryLabel })
+        ] }) : /* @__PURE__ */ jsx("span", { className: "text-[11px] font-semibold uppercase tracking-[0.08em] text-[var(--text-primary)]", children: resolvedPrimaryLabel }),
+        /* @__PURE__ */ jsx(SortIcon, { sorted, hoverClass: "group-hover/header:opacity-100" })
+      ]
+    }
+  );
+}
+export {
+  SortableHeader
+};

package/dist/es/components/data-table/TableFooter.js

@@ -0,0 +1,132 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { Button } from "../ui/button.js";
+import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from "../ui/select.js";
+const defaultRowsPerPageOptions = [15, 30, 60, 100];
+function TableFooter(props) {
+  const {
+    selectedCount,
+    totalCount,
+    onSelectAll,
+    onClearSelection,
+    bulkActions
+  } = props;
+  const summaryLabel = selectedCount > 0 ? `Selected: ${selectedCount}` : `Total: ${totalCount}`;
+  return /* @__PURE__ */ jsxs("div", { className: "flex min-h-[64px] shrink-0 flex-col gap-3 border-t border-[var(--border-subtle)] px-6 py-3 lg:flex-row lg:items-center lg:justify-between", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-3", children: [
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: selectedCount > 0 ? "text-[12px] font-semibold text-[var(--text-primary)]" : "text-[12px] font-medium text-[var(--text-secondary)]",
+          children: summaryLabel
+        }
+      ),
+      selectedCount > 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsxs(
+          Button,
+          {
+            variant: "ghost",
+            size: "sm",
+            className: "h-7 text-[12px]",
+            onClick: onSelectAll,
+            children: [
+              "Select All (",
+              totalCount,
+              ")"
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "ghost",
+            size: "sm",
+            className: "h-7 text-[12px]",
+            onClick: onClearSelection,
+            children: "Clear"
+          }
+        ),
+        bulkActions.map((action) => /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "ghost",
+            size: "sm",
+            className: `h-7 text-[12px]${action.variant === "danger" ? " text-[var(--tag-pink-text)]" : ""}`,
+            onClick: action.onClick,
+            children: action.label
+          },
+          action.label
+        ))
+      ] }) : null
+    ] }),
+    renderPagination(props)
+  ] });
+}
+function renderPagination(props) {
+  if (props.paginationVariant === "perPage") {
+    const rowsPerPageOptions = props.rowsPerPageOptions ?? defaultRowsPerPageOptions;
+    return /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-3 lg:justify-end", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-[12px] text-[var(--text-secondary)]", children: "Rows per page" }),
+        /* @__PURE__ */ jsxs(
+          Select,
+          {
+            value: String(props.rowsPerPage),
+            onValueChange: (value) => props.onRowsPerPageChange(Number(value)),
+            children: [
+              /* @__PURE__ */ jsx(SelectTrigger, { className: "h-[var(--size-control-sm)] w-[var(--size-select-compact)]", children: /* @__PURE__ */ jsx(SelectValue, {}) }),
+              /* @__PURE__ */ jsx(SelectContent, { children: rowsPerPageOptions.map((option) => /* @__PURE__ */ jsx(SelectItem, { value: String(option), children: option }, option)) })
+            ]
+          }
+        )
+      ] }),
+      renderNumericPager(props)
+    ] });
+  }
+  if (props.paginationVariant !== "pages") {
+    return null;
+  }
+  return renderNumericPager(props);
+}
+function renderNumericPager(props) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 lg:justify-end", children: [
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "ghost",
+        size: "icon",
+        "aria-label": "Previous page",
+        className: "h-7 w-7",
+        disabled: props.currentPage === 1,
+        onClick: () => props.onPageChange(props.currentPage - 1),
+        children: /* @__PURE__ */ jsx(ChevronLeft, { className: "h-4 w-4" })
+      }
+    ),
+    props.pageNumbers.map((pageNum) => /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: pageNum === props.currentPage ? "default" : "ghost",
+        size: "sm",
+        className: "h-7 w-7 p-0 text-[12px]",
+        onClick: () => props.onPageChange(pageNum),
+        children: pageNum
+      },
+      pageNum
+    )),
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "ghost",
+        size: "icon",
+        "aria-label": "Next page",
+        className: "h-7 w-7",
+        disabled: props.currentPage === props.totalPages,
+        onClick: () => props.onPageChange(props.currentPage + 1),
+        children: /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4" })
+      }
+    )
+  ] });
+}
+export {
+  TableFooter
+};

package/dist/es/components/data-table/TableLayout.js

@@ -0,0 +1,14 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../lib/utils.js";
+import { useScrollActivity } from "../../hooks/use-scroll-activity.js";
+function TableLayout({ children, className }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("relative flex flex-1 flex-col overflow-hidden", className), children });
+}
+function ScrollArea({ children, className }) {
+  const scrollRef = useScrollActivity();
+  return /* @__PURE__ */ jsx("div", { ref: scrollRef, className: cn("scrollbar-auto-hide flex-1 overflow-auto", className), children });
+}
+TableLayout.ScrollArea = ScrollArea;
+export {
+  TableLayout
+};

package/dist/es/components/data-table/TimestampCell.js

@@ -0,0 +1,16 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+function splitTimestamp(value) {
+  if (!value) return { date: "—", time: "" };
+  const [date, time] = value.split(" ");
+  return { date: date ?? "—", time: time ?? "" };
+}
+function TimestampCell({ value }) {
+  const { date, time } = splitTimestamp(value);
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-1 text-left font-mono", children: [
+    /* @__PURE__ */ jsx("div", { className: "text-[13px] font-medium text-[var(--text-primary)]", children: date }),
+    time ? /* @__PURE__ */ jsx("div", { className: "text-[12px] text-[var(--text-secondary)]", children: time }) : null
+  ] });
+}
+export {
+  TimestampCell
+};

package/dist/es/components/data-table/TwoPanelMenu.js

@@ -0,0 +1,64 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import { Popover, PopoverTrigger, PopoverContent } from "../ui/popover.js";
+function CategoryRow({ group, activeCount, isSelected, onClick }) {
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      onClick,
+      className: `flex w-full cursor-pointer items-center justify-between gap-1 rounded-md px-3 py-2 text-left text-[13px] transition-colors hover:bg-[var(--bg-hover)] ${isSelected ? "bg-[var(--bg-secondary)] font-medium" : "font-normal"}`,
+      children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: `truncate leading-[1.4] ${isSelected ? "text-[var(--text-primary)]" : "text-[var(--text-secondary)]"}`,
+            children: group.label
+          }
+        ),
+        activeCount > 0 && /* @__PURE__ */ jsx("span", { className: "inline-flex h-5 min-w-5 shrink-0 items-center justify-center rounded-full bg-[var(--bg-tertiary)] px-1.5 text-[11px] font-semibold tabular-nums text-[var(--text-utility)]", children: activeCount })
+      ]
+    }
+  );
+}
+function TwoPanelMenuBase({
+  groups,
+  activeCountPerGroup = {},
+  trigger,
+  width = 380,
+  renderRightPanel,
+  open,
+  onOpenChange
+}) {
+  const [selectedGroupKey, setSelectedGroupKey] = useState(groups[0]?.key ?? "");
+  const selectedGroup = groups.find((g) => g.key === selectedGroupKey) ?? groups[0];
+  const handleClose = () => onOpenChange?.(false);
+  return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange, children: [
+    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: trigger }),
+    /* @__PURE__ */ jsxs(
+      PopoverContent,
+      {
+        align: "start",
+        sideOffset: 4,
+        className: "flex max-h-[60vh] overflow-hidden p-0",
+        style: { width: `${width}px` },
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "w-44 shrink-0 overflow-y-auto bg-[var(--bg-surface-muted)] p-1.5", children: groups.map((group) => /* @__PURE__ */ jsx(
+            CategoryRow,
+            {
+              group,
+              activeCount: activeCountPerGroup[group.key] ?? 0,
+              isSelected: group.key === selectedGroupKey,
+              onClick: () => setSelectedGroupKey(group.key)
+            },
+            group.key
+          )) }),
+          /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-y-auto bg-[var(--bg-surface)]", children: selectedGroup ? renderRightPanel(selectedGroup, handleClose) : null })
+        ]
+      }
+    )
+  ] });
+}
+export {
+  TwoPanelMenuBase
+};

package/dist/es/components/data-table/ViewChip.js

@@ -0,0 +1,25 @@
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../lib/utils.js";
+const ViewChip = React.forwardRef(
+  ({ label, active, className, ...rest }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        ref,
+        type: "button",
+        ...rest,
+        className: cn(
+          "inline-flex items-center rounded-full border px-3 py-1 text-[13px] font-medium transition-colors focus:outline-none focus:ring-1 focus:ring-[var(--border-focus)]",
+          active ? "border-[var(--border-brand)] bg-[var(--bg-brand-subtle)] text-[var(--text-brand)]" : "border-[var(--border-subtle)] bg-transparent text-[var(--text-secondary)] hover:bg-[var(--bg-hover)]",
+          className
+        ),
+        children: label
+      }
+    );
+  }
+);
+ViewChip.displayName = "ViewChip";
+export {
+  ViewChip
+};