@undevy-org/tablewright 0.1.0

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

@@ -0,0 +1,26 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { CopyButton } from "./CopyButton.js";
+import { cn } from "../../lib/utils.js";
+function CopyableText({
+  value,
+  children,
+  className,
+  textClassName,
+  buttonClassName,
+  title = "Copy value"
+}) {
+  return /* @__PURE__ */ jsxs("span", { className: cn("group/copy inline-flex min-w-0 items-center gap-1", className), children: [
+    /* @__PURE__ */ jsx("span", { className: cn("min-w-0 truncate", textClassName), children: children ?? value }),
+    /* @__PURE__ */ jsx(
+      CopyButton,
+      {
+        text: value,
+        title,
+        className: cn("group-hover/copy:opacity-100 group-focus-within/copy:opacity-100", buttonClassName)
+      }
+    )
+  ] });
+}
+export {
+  CopyableText
+};

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

@@ -0,0 +1,145 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { flexRender } from "@tanstack/react-table";
+import { cn } from "../../lib/utils.js";
+import { DrawerShell } from "./DrawerShell.js";
+import { EmptyState } from "./EmptyState.js";
+import { TableLayout } from "./TableLayout.js";
+import { stickyStyle, stickyBorderClass } from "./sticky-utils.js";
+function DataTableShell({
+  table,
+  dense,
+  emptyMessage,
+  columnMeta,
+  columnWidths,
+  onColumnResizeStart,
+  onRowClick,
+  getRowIsActive,
+  rowDrag,
+  footer,
+  drawer,
+  className
+}) {
+  const visibleTableWidth = table.getVisibleLeafColumns().reduce(
+    (sum, column) => sum + (columnWidths[column.id] ?? columnMeta[column.id]?.minW ?? 120),
+    0
+  );
+  return /* @__PURE__ */ jsxs(TableLayout, { className: cn("min-h-0", className), children: [
+    /* @__PURE__ */ jsx(TableLayout.ScrollArea, { className: "[scrollbar-gutter:stable]", children: /* @__PURE__ */ jsxs(
+      "table",
+      {
+        className: "w-full border-collapse",
+        style: { tableLayout: "fixed", minWidth: `${visibleTableWidth}px` },
+        children: [
+          /* @__PURE__ */ jsx("thead", { className: "sticky top-0 z-10 bg-[var(--bg-surface)]", children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx("tr", { children: headerGroup.headers.map((header) => {
+            const columnId = header.column.id;
+            const meta = columnMeta[columnId];
+            const isActionsColumn = meta?.sticky === "right";
+            const isControlColumn = meta?.variant === "control";
+            return /* @__PURE__ */ jsxs(
+              "th",
+              {
+                className: cn(
+                  "group/th relative border-b border-[var(--border-subtle)] bg-[var(--bg-surface)] px-4 text-left text-[12px] font-medium text-[var(--text-secondary)]",
+                  dense ? "py-1.5" : "py-3",
+                  isActionsColumn && "px-3 text-right",
+                  isControlColumn && "px-1 text-center",
+                  stickyBorderClass(meta)
+                ),
+                style: {
+                  width: columnWidths[columnId],
+                  minWidth: meta?.minW ?? 36,
+                  ...stickyStyle(meta, true)
+                },
+                children: [
+                  header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext()),
+                  header.column.columnDef.enableResizing !== false ? /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      className: "absolute bottom-0 right-0 top-0 w-px cursor-col-resize bg-[var(--border-subtle)] opacity-30 transition-[opacity,width,background-color] duration-150 group-hover/th:w-[4px] group-hover/th:bg-[var(--border-focus)] group-hover/th:opacity-50 hover:!opacity-100",
+                      onPointerDown: (event) => onColumnResizeStart(columnId, event)
+                    }
+                  ) : null
+                ]
+              },
+              header.id
+            );
+          }) }, headerGroup.id)) }),
+          /* @__PURE__ */ jsxs("tbody", { children: [
+            table.getRowModel().rows.map((row) => {
+              const isActive = getRowIsActive?.(row.original) ?? false;
+              const dragProps = rowDrag?.getDragProps(row.index);
+              const isDragged = rowDrag?.dragRowIdx === row.index;
+              const isDropTarget = rowDrag != null && rowDrag.dropTargetIdx === row.index && rowDrag.dragRowIdx !== null && rowDrag.dragRowIdx !== row.index;
+              return /* @__PURE__ */ jsx(
+                "tr",
+                {
+                  ...dragProps,
+                  onClick: onRowClick ? () => onRowClick(row.original) : void 0,
+                  className: cn(
+                    "group border-b border-[var(--border-subtle)] transition-colors",
+                    onRowClick && "cursor-pointer hover:bg-[var(--bg-hover)]",
+                    isActive && "bg-[var(--bg-hover)]",
+                    rowDrag && "cursor-grab active:cursor-grabbing",
+                    isDragged && "opacity-40",
+                    isDropTarget && "border-t-2 border-t-[var(--border-focus)]"
+                  ),
+                  children: row.getVisibleCells().map((cell, cellIndex) => {
+                    const meta = columnMeta[cell.column.id];
+                    const isActionsColumn = meta?.sticky === "right";
+                    const isControlColumn = meta?.variant === "control";
+                    return /* @__PURE__ */ jsx(
+                      "td",
+                      {
+                        className: cn(
+                          "overflow-hidden px-4 text-[var(--text-primary)]",
+                          dense ? "py-1 text-xs leading-tight" : "py-4 text-sm",
+                          meta?.sticky && (isActive ? "bg-[var(--bg-hover)]" : "bg-[var(--bg-surface)] group-hover:bg-[var(--bg-hover)]"),
+                          isActionsColumn && "px-3 align-middle text-right",
+                          isControlColumn && "px-1 text-center",
+                          cellIndex === 0 && isActive && "relative before:absolute before:bottom-0 before:left-0 before:top-0 before:w-[3px] before:bg-[var(--accent-primary)] before:content-['']",
+                          stickyBorderClass(meta)
+                        ),
+                        style: {
+                          width: columnWidths[cell.column.id],
+                          minWidth: meta?.minW ?? 36,
+                          maxWidth: columnWidths[cell.column.id],
+                          ...stickyStyle(meta, false)
+                        },
+                        children: flexRender(cell.column.columnDef.cell, cell.getContext())
+                      },
+                      cell.id
+                    );
+                  })
+                },
+                row.id
+              );
+            }),
+            table.getRowModel().rows.length === 0 ? /* @__PURE__ */ jsx(
+              EmptyState,
+              {
+                message: emptyMessage,
+                colSpan: table.getVisibleLeafColumns().length
+              }
+            ) : null
+          ] })
+        ]
+      }
+    ) }),
+    footer,
+    drawer ? /* @__PURE__ */ jsx(
+      DrawerShell,
+      {
+        open: drawer.open,
+        onClose: drawer.onClose,
+        title: drawer.title,
+        subtitle: drawer.subtitle,
+        headerExtra: drawer.headerExtra,
+        mode: drawer.mode,
+        children: drawer.content
+      }
+    ) : null
+  ] });
+}
+export {
+  DataTableShell
+};

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

@@ -0,0 +1,59 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../../lib/utils.js";
+function DrawerActionGroup({ sections, variant, columns }) {
+  if (variant === "flat") {
+    const actions = sections.flatMap((s) => s.actions);
+    return /* @__PURE__ */ jsx("div", { className: cn("grid gap-2", (columns ?? 2) === 4 ? "grid-cols-4" : "grid-cols-2"), children: actions.map((action) => /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: (e) => {
+          e.stopPropagation();
+          action.onClick(e);
+        },
+        disabled: action.disabled,
+        className: "flex items-center gap-2 rounded-lg border border-[var(--border-subtle)] bg-[var(--bg-surface)] px-3 py-2 text-[13px] font-medium text-[var(--text-primary)] transition-colors hover:bg-[var(--bg-hover)] disabled:cursor-not-allowed disabled:opacity-40",
+        children: [
+          /* @__PURE__ */ jsx(action.icon, { className: "h-4 w-4 shrink-0 text-[var(--text-secondary)]" }),
+          action.label
+        ]
+      },
+      action.label
+    )) });
+  }
+  return /* @__PURE__ */ jsx("div", { className: "space-y-3", children: sections.map((section) => /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "rounded-xl border border-[var(--border-subtle)] bg-[var(--bg-secondary)] p-3",
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "mb-2 text-[10px] font-semibold uppercase tracking-[0.12em] text-[var(--text-tertiary)]", children: section.label }),
+        /* @__PURE__ */ jsx("div", { className: cn("grid gap-2", (columns ?? 2) === 4 ? "grid-cols-4" : "grid-cols-2"), children: section.actions.map((action) => /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: (e) => {
+              e.stopPropagation();
+              action.onClick(e);
+            },
+            disabled: action.disabled,
+            className: "flex items-center gap-2 rounded-lg border border-[var(--border-subtle)] bg-[var(--bg-surface)] px-3 py-2 text-[13px] font-medium text-[var(--text-primary)] transition-colors hover:bg-[var(--bg-hover)] disabled:cursor-not-allowed disabled:opacity-40",
+            children: [
+              /* @__PURE__ */ jsx(
+                action.icon,
+                {
+                  className: action.variant === "danger" ? "h-4 w-4 shrink-0 text-[var(--tag-pink-text)]" : action.variant === "accent" ? "h-4 w-4 shrink-0 text-[var(--text-primary)]" : "h-4 w-4 shrink-0 text-[var(--text-secondary)]"
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { children: action.label })
+            ]
+          },
+          action.label
+        )) })
+      ]
+    },
+    section.label
+  )) });
+}
+export {
+  DrawerActionGroup
+};

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

@@ -0,0 +1,21 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { CopyableText } from "./CopyableText.js";
+function DrawerEntityCard({ name, id, children }) {
+  const headerLayout = id ? "grid grid-cols-2 gap-x-4 items-center" : "flex";
+  return /* @__PURE__ */ jsxs("div", { className: "rounded-lg bg-[var(--bg-hover)] p-3.5", children: [
+    /* @__PURE__ */ jsxs("div", { className: `mb-2.5 border-b border-[var(--border-subtle)] pb-2 ${headerLayout}`, children: [
+      /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold text-[var(--text-primary)]", children: name }),
+      id ? /* @__PURE__ */ jsx(
+        CopyableText,
+        {
+          value: id,
+          textClassName: "font-mono text-[11px] text-[var(--text-secondary)]"
+        }
+      ) : null
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-x-4", children })
+  ] });
+}
+export {
+  DrawerEntityCard
+};

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

@@ -0,0 +1,10 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+function DrawerField({ label, value, children }) {
+  return /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-[120px_1fr] items-center text-[13px]", children: [
+    /* @__PURE__ */ jsx("span", { className: "text-[var(--text-secondary)]", children: label }),
+    /* @__PURE__ */ jsx("span", { className: "min-w-0 overflow-hidden text-[var(--text-primary)]", children: children ?? value })
+  ] });
+}
+export {
+  DrawerField
+};

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

@@ -0,0 +1,20 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+function DrawerFlagGrid({ children }) {
+  return /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-x-4 gap-y-3", children });
+}
+function DrawerFlagItem({ label, value }) {
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx("div", { className: "mb-0.5 text-[11px] text-[var(--text-secondary)]", children: label }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: value ? "text-[13px] font-semibold text-[var(--tag-green-text)]" : "text-[13px] font-semibold text-[var(--text-primary)]",
+        children: value ? "Yes" : "No"
+      }
+    )
+  ] });
+}
+export {
+  DrawerFlagGrid,
+  DrawerFlagItem
+};

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

@@ -0,0 +1,26 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { cn } from "../../lib/utils.js";
+function DrawerSection({ title, children, className, card = false }) {
+  if (card) {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "rounded-lg border border-[var(--border-subtle)] bg-[var(--bg-surface)] p-4",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsx("p", { className: "mb-3 text-[10px] font-semibold uppercase tracking-wider text-[var(--text-tertiary)]", children: title }),
+          children
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs("section", { className: className ?? "mb-8", children: [
+    /* @__PURE__ */ jsx("h3", { className: "mb-4 text-[11px] font-semibold uppercase tracking-[0.05em] text-[var(--text-secondary)]", children: title }),
+    /* @__PURE__ */ jsx("div", { className: "grid gap-4", children })
+  ] });
+}
+export {
+  DrawerSection
+};

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

@@ -0,0 +1,141 @@
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { useState, useRef, useEffect } from "react";
+import { Minimize2, Maximize2, X } from "lucide-react";
+import { Button } from "../ui/button.js";
+import { cn } from "../../lib/utils.js";
+import { useScrollActivity } from "../../hooks/use-scroll-activity.js";
+import { DrawerExpandContext } from "../../context/drawer-expand-context.js";
+function DrawerShell({
+  open,
+  onClose,
+  title,
+  subtitle,
+  headerExtra,
+  children,
+  footer,
+  dismissible = false,
+  mode = "side"
+}) {
+  const [expandedState, setExpandedState] = useState(false);
+  const bodyScrollRef = useScrollActivity();
+  const isExpanded = mode === "modal" ? true : mode === "side" ? false : expandedState;
+  const canToggle = mode === "side+modal";
+  const handleClose = () => {
+    setExpandedState(false);
+    onClose();
+  };
+  const closeRef = useRef(handleClose);
+  useEffect(() => {
+    closeRef.current = handleClose;
+  });
+  useEffect(() => {
+    if (!open || !dismissible) return;
+    const onKeyDown = (event) => {
+      if (event.key !== "Escape" || event.defaultPrevented) return;
+      const target = event.target;
+      if (target?.closest?.("[role=dialog],[role=menu]")) return;
+      closeRef.current();
+    };
+    window.addEventListener("keydown", onKeyDown);
+    return () => window.removeEventListener("keydown", onKeyDown);
+  }, [open, dismissible]);
+  const header = /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-start justify-between border-b border-[var(--border-subtle)] px-6 py-6", children: [
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
+        title ? /* @__PURE__ */ jsx("h2", { className: "text-base font-semibold text-[var(--text-primary)]", children: title }) : null,
+        headerExtra
+      ] }),
+      subtitle && /* @__PURE__ */ jsx("div", { className: "mt-1 text-[11px] text-[var(--text-secondary)]", children: subtitle })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+      canToggle && (isExpanded ? /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "ghost",
+          size: "icon",
+          className: "h-8 w-8 rounded-sm",
+          onClick: () => setExpandedState(false),
+          title: "Collapse to panel",
+          children: /* @__PURE__ */ jsx(Minimize2, { className: "h-4 w-4" })
+        }
+      ) : /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "ghost",
+          size: "icon",
+          className: "h-8 w-8 rounded-sm",
+          onClick: () => setExpandedState(true),
+          title: "Expand to full view",
+          children: /* @__PURE__ */ jsx(Maximize2, { className: "h-4 w-4" })
+        }
+      )),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "ghost",
+          size: "icon",
+          "aria-label": "Close",
+          className: "h-8 w-8 rounded-sm",
+          onClick: handleClose,
+          children: /* @__PURE__ */ jsx(X, { className: "h-5 w-5" })
+        }
+      )
+    ] })
+  ] });
+  const body = /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: bodyScrollRef,
+      className: "scrollbar-auto-hide min-h-0 flex-1 overflow-y-auto px-6 py-6",
+      children
+    }
+  );
+  const pinnedFooter = footer ? /* @__PURE__ */ jsx("div", { className: "shrink-0 border-t border-[var(--border-subtle)] px-6 py-4", children: footer }) : null;
+  return /* @__PURE__ */ jsxs(DrawerExpandContext.Provider, { value: isExpanded, children: [
+    !isExpanded && /* @__PURE__ */ jsxs(Fragment, { children: [
+      dismissible && /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn(
+            "absolute inset-0 z-30 bg-[var(--overlay-scrim,rgba(15,23,42,0.28))] transition-opacity duration-300",
+            open ? "opacity-100" : "pointer-events-none opacity-0"
+          ),
+          onClick: handleClose,
+          "aria-hidden": true
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        "aside",
+        {
+          "aria-label": "Details panel",
+          className: cn(
+            "absolute inset-y-0 right-0 z-40 flex w-[var(--size-drawer)] flex-col border-l border-[var(--border-subtle)] bg-[var(--bg-surface)] transition-transform duration-300 ease-[cubic-bezier(0.16,1,0.3,1)]",
+            open ? "translate-x-0 [box-shadow:var(--shadow-drawer)]" : "translate-x-full shadow-none"
+          ),
+          children: [
+            header,
+            body,
+            pinnedFooter
+          ]
+        }
+      )
+    ] }),
+    isExpanded && open && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "fixed inset-0 z-50 bg-black/50 animate-in fade-in-0 duration-200",
+          onClick: handleClose
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "fixed left-1/2 top-[10vh] z-50 flex h-[80vh] w-[min(75vw,1400px)] -translate-x-1/2 flex-col overflow-hidden rounded-xl border border-[var(--border-subtle)] bg-[var(--bg-surface)] shadow-2xl animate-in fade-in-0 zoom-in-95 duration-200", children: [
+        header,
+        body,
+        pinnedFooter
+      ] })
+    ] })
+  ] });
+}
+export {
+  DrawerShell
+};

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

@@ -0,0 +1,11 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+function DrawerSummaryCard({ label, value, sub }) {
+  return /* @__PURE__ */ jsxs("div", { className: "bg-[var(--bg-hover)] rounded-lg p-3", children: [
+    /* @__PURE__ */ jsx("div", { className: "text-xs text-[var(--text-secondary)] mb-1", children: label }),
+    /* @__PURE__ */ jsx("div", { className: "text-lg font-semibold text-[var(--text-primary)]", children: value }),
+    sub !== void 0 && /* @__PURE__ */ jsx("div", { className: "text-xs text-[var(--text-secondary)] mt-0.5", children: sub })
+  ] });
+}
+export {
+  DrawerSummaryCard
+};

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

@@ -0,0 +1,14 @@
+import { jsx } from "react/jsx-runtime";
+function EmptyState({ message, colSpan }) {
+  return /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx(
+    "td",
+    {
+      colSpan,
+      className: "px-6 py-16 text-center text-[13px] text-[var(--text-secondary)]",
+      children: message
+    }
+  ) });
+}
+export {
+  EmptyState
+};

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

@@ -0,0 +1,43 @@
+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 getUrgency(timestampMs) {
+  const diff = timestampMs - Date.now();
+  if (diff <= 0) return "expired";
+  if (diff < 5 * 60 * 1e3) return "danger";
+  if (diff < 30 * 60 * 1e3) return "warning";
+  return "ok";
+}
+function formatRelative(timestampMs) {
+  const diff = timestampMs - Date.now();
+  if (diff <= -864e5) return null;
+  if (diff <= 0) return "Expired";
+  const totalMinutes = Math.ceil(diff / 6e4);
+  if (totalMinutes < 60) return `in ${totalMinutes} min`;
+  const hours = Math.floor(totalMinutes / 60);
+  return `in ${hours} h`;
+}
+const urgencyClass = {
+  expired: "text-red-600",
+  danger: "text-red-600",
+  warning: "text-[var(--tag-orange-text)]",
+  ok: "text-[var(--text-secondary)]"
+};
+function ExpiryTimestampCell({ value, timestampMs }) {
+  const { date, time } = splitTimestamp(value);
+  const showUrgency = timestampMs !== void 0 && timestampMs > 0;
+  const ts = timestampMs ?? 0;
+  const urgency = showUrgency ? getUrgency(ts) : "ok";
+  const relativeLabel = showUrgency ? formatRelative(ts) : null;
+  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,
+    relativeLabel && /* @__PURE__ */ jsx("div", { className: `text-[11px] ${urgencyClass[urgency]}`, children: relativeLabel })
+  ] });
+}
+export {
+  ExpiryTimestampCell
+};

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

@@ -0,0 +1,47 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import * as React from "react";
+import { X } from "lucide-react";
+import { cn } from "../../lib/utils.js";
+const FilterChip = React.forwardRef(
+  ({ label, value, onRemove, active, children, className, ...rest }, ref) => {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        ...rest,
+        className: cn(
+          "flex h-[var(--size-control-md)] items-center rounded-md border border-[var(--border-subtle)] text-[13px] transition-colors",
+          active ? "bg-[var(--bg-secondary)]" : "bg-[var(--bg-surface)]",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "flex h-full items-center pl-2.5 pr-1.5 cursor-pointer", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
+            /* @__PURE__ */ jsx("span", { className: "text-[var(--text-secondary)]", children: label }),
+            value && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx("span", { className: "text-[var(--text-tertiary)]", children: ":" }),
+              /* @__PURE__ */ jsx("span", { className: "text-[var(--text-primary)] font-medium", children: value })
+            ] }),
+            children
+          ] }) }),
+          /* @__PURE__ */ jsx("div", { className: "h-full flex items-center pr-1.5", children: /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: (e) => {
+                e.stopPropagation();
+                onRemove();
+              },
+              className: "flex h-5 w-5 items-center justify-center rounded-sm text-[var(--text-tertiary)] hover:bg-[var(--bg-hover)] hover:text-[var(--text-primary)] focus:outline-none focus:ring-1 focus:ring-[var(--border-focus)]",
+              "aria-label": `Remove ${label} filter`,
+              children: /* @__PURE__ */ jsx(X, { className: "h-3.5 w-3.5" })
+            }
+          ) })
+        ]
+      }
+    );
+  }
+);
+FilterChip.displayName = "FilterChip";
+export {
+  FilterChip
+};