@avenue-ticketing/ui 0.4.0 → 0.5.0

package/dist/react/table.js

@@ -0,0 +1,414 @@
+import { GripVertical, ArrowDown, ArrowUp } from 'lucide-react';
+import * as React from 'react';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var defaultTableConfig = {
+  sortableColumnIds: /* @__PURE__ */ new Set(),
+  enableColumnSort: true,
+  enableColumnReorder: false,
+  enableColumnResize: false,
+  columnDragState: null
+};
+var TableConfigContext = React.createContext(null);
+TableConfigContext.displayName = "TableConfigContext";
+function setColumnDragPreview(e, options) {
+  if (!e.dataTransfer) return;
+  e.dataTransfer.effectAllowed = "move";
+  const width = options.width ?? 80;
+  const height = options.height ?? 100;
+  const el = document.createElement("div");
+  el.setAttribute("data-table-drag-preview", "");
+  const dark = typeof window !== "undefined" && window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches;
+  const bg = dark ? "rgba(24,24,26,0.95)" : "rgba(255,255,255,0.96)";
+  const fg = dark ? "rgba(250,250,250,0.95)" : "rgba(10,10,10,0.92)";
+  const border = dark ? "1px solid rgba(255,255,255,0.12)" : "1px solid rgba(0,0,0,0.1)";
+  const shadow = "0 12px 32px rgba(0,0,0,0.2),0 0 0 1px rgba(0,0,0,0.04)";
+  el.style.cssText = [
+    "position:fixed",
+    "left:0",
+    "top:0",
+    "z-index:100000",
+    "pointer-events:none",
+    "box-sizing:border-box",
+    `width:${width}px`,
+    `min-height:${height}px`,
+    "display:flex",
+    "flex-direction:column",
+    "align-items:center",
+    "justify-content:flex-start",
+    "gap:8px",
+    `padding:10px 8px 12px`,
+    `color:${fg}`,
+    `background:${bg}`,
+    `border:${border}`,
+    "border-radius:8px",
+    `box-shadow:${shadow}`
+  ].join(";");
+  const bar = document.createElement("div");
+  bar.style.cssText = `width:3px;flex:1;min-height:32px;border-radius:2px;background:${dark ? "rgba(80,200,150,0.4)" : "rgba(20,80,200,0.2)"};align-self:stretch;`;
+  const t = document.createElement("div");
+  t.textContent = options.title;
+  t.style.cssText = "font:600 11px/1.2 system-ui,-apple-system,sans-serif;text-align:center;word-break:break-word;max-width:100%;";
+  el.appendChild(t);
+  el.appendChild(bar);
+  el.style.minHeight = `${height}px`;
+  document.body.appendChild(el);
+  void el.offsetWidth;
+  e.dataTransfer.setDragImage(
+    el,
+    options.hotspotX ?? width / 2,
+    options.hotspotY ?? 28
+  );
+  requestAnimationFrame(() => {
+    if (el.parentNode) el.parentNode.removeChild(el);
+  });
+}
+var COLUMN_DRAG_TH_STRIP = "relative z-20 box-border overflow-hidden rounded-t-lg border border-primary/20 bg-primary/8 opacity-70 shadow-sm";
+var COLUMN_DRAG_TD_STRIP = "overflow-hidden border-x border-primary/15 bg-primary/5 opacity-70";
+var columnDragThClasses = (config, columnId) => {
+  if (!config.enableColumnReorder || !config.columnDragState) return void 0;
+  const d = config.columnDragState;
+  const isSource = d.draggingId === columnId;
+  const isDrop = d.dropTargetId === columnId && d.draggingId != null && d.draggingId !== columnId;
+  if (isSource || isDrop) {
+    return COLUMN_DRAG_TH_STRIP;
+  }
+  return void 0;
+};
+var columnDragTdClasses = (config, columnId) => {
+  if (!config.enableColumnReorder || !config.columnDragState) return void 0;
+  const d = config.columnDragState;
+  const isSource = d.draggingId === columnId;
+  const isDrop = d.dropTargetId === columnId && d.draggingId != null && d.draggingId !== columnId;
+  if (isSource || isDrop) {
+    return COLUMN_DRAG_TD_STRIP;
+  }
+  return void 0;
+};
+var Table = React.forwardRef(
+  ({
+    className,
+    containerClassName,
+    sortableColumns,
+    enableColumnSort: enableColumnSortFromProps,
+    enableColumnReorder: enableColumnReorderFromProps,
+    enableColumnResize: enableColumnResizeFromProps,
+    columnDragState: columnDragStateFromProps,
+    ...props
+  }, ref) => {
+    const config = React.useMemo(() => {
+      const sortableColumnIds = new Set(sortableColumns ?? []);
+      return {
+        sortableColumnIds,
+        enableColumnSort: enableColumnSortFromProps ?? true,
+        enableColumnReorder: enableColumnReorderFromProps ?? false,
+        enableColumnResize: enableColumnResizeFromProps ?? false,
+        columnDragState: columnDragStateFromProps ?? null
+      };
+    }, [
+      sortableColumns,
+      enableColumnSortFromProps,
+      enableColumnReorderFromProps,
+      enableColumnResizeFromProps,
+      columnDragStateFromProps
+    ]);
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        "data-slot": "table-container",
+        "data-table-sort": config.enableColumnSort ? "on" : "off",
+        "data-table-reorder": config.enableColumnReorder ? "on" : "off",
+        "data-table-resize": config.enableColumnResize ? "on" : "off",
+        className: cn("relative w-full overflow-x-auto", containerClassName),
+        children: /* @__PURE__ */ jsx(TableConfigContext.Provider, { value: config, children: /* @__PURE__ */ jsx(
+          "table",
+          {
+            ref,
+            "data-slot": "table",
+            className: cn(
+              "min-w-full w-max caption-bottom text-sm",
+              className
+            ),
+            ...props
+          }
+        ) })
+      }
+    );
+  }
+);
+Table.displayName = "Table";
+var TableHeader = React.forwardRef(({ className, ...props }, ref) => {
+  const config = React.useContext(TableConfigContext) ?? defaultTableConfig;
+  const hasSortableColumns = config.enableColumnSort && config.sortableColumnIds.size > 0;
+  return /* @__PURE__ */ jsx(
+    "thead",
+    {
+      ref,
+      "data-slot": "table-header",
+      className: cn(
+        hasSortableColumns && "[&_tr:hover]:bg-transparent!",
+        className
+      ),
+      ...props
+    }
+  );
+});
+TableHeader.displayName = "TableHeader";
+var TableBody = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "tbody",
+  {
+    ref,
+    "data-slot": "table-body",
+    className: cn(
+      "[&>tr:last-child>td:not([data-table-column-drag-strip])]:border-b-0",
+      className
+    ),
+    ...props
+  }
+));
+TableBody.displayName = "TableBody";
+var TableFooter = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "tfoot",
+  {
+    ref,
+    "data-slot": "table-footer",
+    className: cn(
+      "border-t border-primary/10 bg-primary/5 font-medium",
+      className
+    ),
+    ...props
+  }
+));
+TableFooter.displayName = "TableFooter";
+var TableRow = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "tr",
+  {
+    ref,
+    "data-slot": "table-row",
+    className: cn(
+      "transition-colors duration-0 hover:bg-primary/3 data-[state=selected]:bg-primary/10",
+      className
+    ),
+    ...props
+  }
+));
+TableRow.displayName = "TableRow";
+var columnDragHandleIconClass = cn(
+  "text-primary/55 hover:text-primary/80",
+  "cursor-grab active:cursor-grabbing touch-none",
+  "shrink-0"
+);
+var TableColumnDragHandle = React.forwardRef(function TableColumnDragHandle2({ columnId, previewLabel, className, onDragStart, onDragEnd, title, ...rest }, ref) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      ref,
+      className: cn(
+        "inline-flex select-none items-center justify-center",
+        columnDragHandleIconClass,
+        className
+      ),
+      title: title ?? "Drag to reorder this column",
+      tabIndex: -1,
+      "aria-label": "Drag to reorder this column",
+      draggable: true,
+      onDragStart: (e) => {
+        e.dataTransfer.setData("text/plain", columnId);
+        setColumnDragPreview(e, { title: previewLabel ?? "Column" });
+        onDragStart?.(e);
+      },
+      onDragEnd,
+      onClick: (ev) => ev.stopPropagation(),
+      onKeyDown: (ev) => {
+        if (ev.key === " " || ev.key === "Enter") {
+          ev.preventDefault();
+        }
+        ev.stopPropagation();
+      },
+      "data-slot": "table-column-drag-handle",
+      ...rest,
+      children: /* @__PURE__ */ jsx(
+        GripVertical,
+        {
+          className: "size-4 pointer-events-none",
+          strokeWidth: 2.25,
+          "aria-hidden": true
+        }
+      )
+    }
+  );
+});
+TableColumnDragHandle.displayName = "TableColumnDragHandle";
+function TableHeaderSortControl({
+  activeSort,
+  onRequest,
+  className
+}) {
+  const isActiveSort = activeSort === "asc" || activeSort === "desc";
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn("inline-flex shrink-0 items-stretch pl-0", className),
+      children: onRequest ? /* @__PURE__ */ jsx("span", { className: "flex shrink-0 items-stretch", children: /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "text-primary/90 hover:text-primary/95 inline-flex min-h-10 w-8 min-w-8 touch-manipulation items-center justify-center self-center rounded p-0 md:min-h-12",
+          onClick: (e) => {
+            e.stopPropagation();
+            onRequest(e);
+          },
+          title: "Change sort",
+          "aria-label": "Change sort order",
+          children: isActiveSort ? activeSort === "desc" ? /* @__PURE__ */ jsx(
+            ArrowDown,
+            {
+              className: "size-3.5 shrink-0",
+              strokeWidth: 2.25,
+              "aria-hidden": true
+            }
+          ) : /* @__PURE__ */ jsx(
+            ArrowUp,
+            {
+              className: "size-3.5 shrink-0",
+              strokeWidth: 2.25,
+              "aria-hidden": true
+            }
+          ) : /* @__PURE__ */ jsx(
+            ArrowUp,
+            {
+              className: "text-primary/85 size-3.5 shrink-0 opacity-0 transition-opacity duration-150 group-hover:opacity-100 group-focus-within:opacity-100",
+              strokeWidth: 2.25,
+              "aria-hidden": true
+            }
+          )
+        }
+      ) }) : isActiveSort ? /* @__PURE__ */ jsx("span", { className: "inline-flex shrink-0 items-center", children: activeSort === "desc" ? /* @__PURE__ */ jsx(
+        ArrowDown,
+        {
+          className: "size-3.5 shrink-0 self-center text-primary/90",
+          strokeWidth: 2.25,
+          "aria-hidden": true
+        }
+      ) : /* @__PURE__ */ jsx(
+        ArrowUp,
+        {
+          className: "size-3.5 shrink-0 self-center text-primary/90",
+          strokeWidth: 2.25,
+          "aria-hidden": true
+        }
+      ) }) : /* @__PURE__ */ jsx("span", { className: "inline-flex shrink-0 items-center", children: /* @__PURE__ */ jsx(
+        ArrowUp,
+        {
+          className: "text-primary/85 size-3.5 shrink-0 self-center opacity-0 transition-opacity duration-150 group-hover:opacity-100 group-focus-within:opacity-100",
+          strokeWidth: 2.25,
+          "aria-hidden": true
+        }
+      ) })
+    }
+  );
+}
+var TableHead = React.forwardRef(
+  ({
+    className,
+    columnId,
+    children,
+    activeSort,
+    onColumnResizeStart,
+    isColumnResizing,
+    style,
+    headerEnd,
+    ...props
+  }, ref) => {
+    const config = React.useContext(TableConfigContext) ?? defaultTableConfig;
+    const showSortUI = config.enableColumnSort && columnId !== void 0 && config.sortableColumnIds.has(columnId);
+    const isActiveSort = showSortUI && (activeSort === "asc" || activeSort === "desc");
+    const hasHeaderEnd = headerEnd != null && headerEnd !== false;
+    const showResizer = config.enableColumnResize && typeof onColumnResizeStart === "function";
+    const drag = columnId ? columnDragThClasses(config, columnId) : void 0;
+    return /* @__PURE__ */ jsxs(
+      "th",
+      {
+        ref,
+        "data-resizing": isColumnResizing ? 1 : void 0,
+        "data-slot": "table-head",
+        "data-column-id": columnId,
+        "data-sortable": showSortUI ? "true" : void 0,
+        "data-sorted": isActiveSort ? activeSort ?? void 0 : void 0,
+        "aria-sort": isActiveSort && activeSort ? activeSort === "desc" ? "descending" : "ascending" : showSortUI ? "none" : void 0,
+        className: cn(
+          "h-10 min-w-0 px-3 text-left align-middle text-sm font-bold text-primary transition-colors duration-0 md:h-12 md:px-4 [&:has([role=checkbox])]:pr-0",
+          !drag && "border-b border-primary/10",
+          showResizer && "relative",
+          // th cursor-pointer is often overridden by child button default cursor
+          (showSortUI || hasHeaderEnd) && "group hover:bg-primary/5 [&_button]:cursor-pointer",
+          drag,
+          isColumnResizing && "opacity-100",
+          className
+        ),
+        style,
+        ...props,
+        children: [
+          showSortUI ? /* @__PURE__ */ jsxs("span", { className: "inline-flex h-full w-full min-h-0 min-w-0 max-w-full items-center justify-start gap-0.5", children: [
+            /* @__PURE__ */ jsx("span", { className: "min-h-0 min-w-0 flex-1 text-left [&_[data-slot=table-column-drag-handle]]:cursor-grab [&_[data-slot=table-column-drag-handle]]:active:cursor-grabbing", children }),
+            hasHeaderEnd ? /* @__PURE__ */ jsx("span", { className: "inline-flex min-h-0 min-w-0 shrink-0 items-center", children: headerEnd }) : null
+          ] }) : hasHeaderEnd ? /* @__PURE__ */ jsxs("span", { className: "inline-flex h-full w-full min-h-0 min-w-0 max-w-full items-center justify-start gap-0.5", children: [
+            /* @__PURE__ */ jsx("span", { className: "min-h-0 min-w-0 flex-1 text-left [&_[data-slot=table-column-drag-handle]]:cursor-grab [&_[data-slot=table-column-drag-handle]]:active:cursor-grabbing", children }),
+            /* @__PURE__ */ jsx("span", { className: "inline-flex min-h-0 min-w-0 shrink-0 items-center", children: headerEnd })
+          ] }) : children,
+          showResizer && /* @__PURE__ */ jsx(
+            "div",
+            {
+              role: "separator",
+              title: "Drag to resize",
+              onMouseDown: onColumnResizeStart,
+              onTouchStart: onColumnResizeStart,
+              className: cn(
+                // keep handle inside this th — negative right overlapped the next cell (bad with sticky/pinned columns)
+                "absolute top-0 right-0 z-1 h-full w-2.5 min-w-2.5 max-w-2.5 touch-none",
+                "cursor-col-resize select-none",
+                isColumnResizing ? "bg-primary/35" : "bg-primary/0 hover:bg-primary/25"
+              ),
+              "data-slot": "table-column-resize-handle",
+              "aria-hidden": true
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+TableHead.displayName = "TableHead";
+var TableCell = React.forwardRef(
+  ({ className, style, columnId, ...props }, ref) => {
+    const config = React.useContext(TableConfigContext) ?? defaultTableConfig;
+    const drag = columnId ? columnDragTdClasses(config, columnId) : void 0;
+    const columnDragStrip = Boolean(drag);
+    return /* @__PURE__ */ jsx(
+      "td",
+      {
+        ref,
+        "data-slot": "table-cell",
+        "data-table-column-drag-strip": columnDragStrip ? "" : void 0,
+        className: cn(
+          "min-w-0 border-b border-primary/10 p-3 align-middle text-sm text-primary/90 md:p-4 [&:has([role=checkbox])]:pr-0",
+          drag,
+          className
+        ),
+        style,
+        "data-column-id": columnId,
+        ...props
+      }
+    );
+  }
+);
+TableCell.displayName = "TableCell";
+
+export { Table, TableBody, TableCell, TableColumnDragHandle, TableFooter, TableHead, TableHeader, TableHeaderSortControl, TableRow, setColumnDragPreview };
+//# sourceMappingURL=table.js.map
+//# sourceMappingURL=table.js.map

package/dist/react/table.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/lib/utils.ts","../../src/react/table.tsx"],"names":["TableColumnDragHandle"],"mappings":";;;;;;AAGO,SAAS,MAAM,MAAA,EAAsB;AAC1C,EAAA,OAAO,OAAA,CAAQ,IAAA,CAAK,MAAM,CAAC,CAAA;AAC7B;ACqBA,IAAM,kBAAA,GAAuC;AAAA,EAC3C,iBAAA,sBAAuB,GAAA,EAAI;AAAA,EAC3B,gBAAA,EAAkB,IAAA;AAAA,EAClB,mBAAA,EAAqB,KAAA;AAAA,EACrB,kBAAA,EAAoB,KAAA;AAAA,EACpB,eAAA,EAAiB;AACnB,CAAA;AAEA,IAAM,kBAAA,GAA2B,oBAAuC,IAAI,CAAA;AAC5E,kBAAA,CAAmB,WAAA,GAAc,oBAAA;AAM1B,SAAS,oBAAA,CACd,GACA,OAAA,EACA;AACA,EAAA,IAAI,CAAC,EAAE,YAAA,EAAc;AACrB,EAAA,CAAA,CAAE,aAAa,aAAA,GAAgB,MAAA;AAC/B,EAAA,MAAM,KAAA,GAAQ,QAAQ,KAAA,IAAS,EAAA;AAC/B,EAAA,MAAM,MAAA,GAAS,QAAQ,MAAA,IAAU,GAAA;AACjC,EAAA,MAAM,EAAA,GAAK,QAAA,CAAS,aAAA,CAAc,KAAK,CAAA;AACvC,EAAA,EAAA,CAAG,YAAA,CAAa,2BAA2B,EAAE,CAAA;AAC7C,EAAA,MAAM,IAAA,GACJ,OAAO,MAAA,KAAW,WAAA,IAClB,OAAO,UAAA,IACP,MAAA,CAAO,UAAA,CAAW,8BAA8B,CAAA,CAAE,OAAA;AACpD,EAAA,MAAM,EAAA,GAAK,OAAO,qBAAA,GAAwB,wBAAA;AAC1C,EAAA,MAAM,EAAA,GAAK,OAAO,wBAAA,GAA2B,qBAAA;AAC7C,EAAA,MAAM,MAAA,GAAS,OACX,kCAAA,GACA,2BAAA;AACJ,EAAA,MAAM,MAAA,GAAS,wDAAA;AACf,EAAA,EAAA,CAAG,MAAM,OAAA,GAAU;AAAA,IACjB,gBAAA;AAAA,IACA,QAAA;AAAA,IACA,OAAA;AAAA,IACA,gBAAA;AAAA,IACA,qBAAA;AAAA,IACA,uBAAA;AAAA,IACA,SAAS,KAAK,CAAA,EAAA,CAAA;AAAA,IACd,cAAc,MAAM,CAAA,EAAA,CAAA;AAAA,IACpB,cAAA;AAAA,IACA,uBAAA;AAAA,IACA,oBAAA;AAAA,IACA,4BAAA;AAAA,IACA,SAAA;AAAA,IACA,CAAA,qBAAA,CAAA;AAAA,IACA,SAAS,EAAE,CAAA,CAAA;AAAA,IACX,cAAc,EAAE,CAAA,CAAA;AAAA,IAChB,UAAU,MAAM,CAAA,CAAA;AAAA,IAChB,mBAAA;AAAA,IACA,cAAc,MAAM,CAAA;AAAA,GACtB,CAAE,KAAK,GAAG,CAAA;AACV,EAAA,MAAM,GAAA,GAAM,QAAA,CAAS,aAAA,CAAc,KAAK,CAAA;AACxC,EAAA,GAAA,CAAI,KAAA,CAAM,OAAA,GAAU,CAAA,8DAAA,EAClB,IAAA,GAAO,yBAAyB,qBAClC,CAAA,oBAAA,CAAA;AACA,EAAA,MAAM,CAAA,GAAI,QAAA,CAAS,aAAA,CAAc,KAAK,CAAA;AACtC,EAAA,CAAA,CAAE,cAAc,OAAA,CAAQ,KAAA;AACxB,EAAA,CAAA,CAAE,MAAM,OAAA,GACN,8GAAA;AACF,EAAA,EAAA,CAAG,YAAY,CAAC,CAAA;AAChB,EAAA,EAAA,CAAG,YAAY,GAAG,CAAA;AAClB,EAAA,EAAA,CAAG,KAAA,CAAM,SAAA,GAAY,CAAA,EAAG,MAAM,CAAA,EAAA,CAAA;AAC9B,EAAA,QAAA,CAAS,IAAA,CAAK,YAAY,EAAE,CAAA;AAC5B,EAAA,KAAK,EAAA,CAAG,WAAA;AACR,EAAA,CAAA,CAAE,YAAA,CAAa,YAAA;AAAA,IACb,EAAA;AAAA,IACA,OAAA,CAAQ,YAAY,KAAA,GAAQ,CAAA;AAAA,IAC5B,QAAQ,QAAA,IAAY;AAAA,GACtB;AACA,EAAA,qBAAA,CAAsB,MAAM;AAC1B,IAAA,IAAI,EAAA,CAAG,UAAA,EAAY,EAAA,CAAG,UAAA,CAAW,YAAY,EAAE,CAAA;AAAA,EACjD,CAAC,CAAA;AACH;AAGA,IAAM,oBAAA,GACJ,kHAAA;AACF,IAAM,oBAAA,GACJ,oEAAA;AAEF,IAAM,mBAAA,GAAsB,CAAC,MAAA,EAA0B,QAAA,KAAqB;AAC1E,EAAA,IAAI,CAAC,MAAA,CAAO,mBAAA,IAAuB,CAAC,MAAA,CAAO,iBAAiB,OAAO,MAAA;AACnE,EAAA,MAAM,IAAI,MAAA,CAAO,eAAA;AACjB,EAAA,MAAM,QAAA,GAAW,EAAE,UAAA,KAAe,QAAA;AAClC,EAAA,MAAM,MAAA,GACJ,EAAE,YAAA,KAAiB,QAAA,IACnB,EAAE,UAAA,IAAc,IAAA,IAChB,EAAE,UAAA,KAAe,QAAA;AACnB,EAAA,IAAI,YAAY,MAAA,EAAQ;AACtB,IAAA,OAAO,oBAAA;AAAA,EACT;AACA,EAAA,OAAO,MAAA;AACT,CAAA;AAEA,IAAM,mBAAA,GAAsB,CAAC,MAAA,EAA0B,QAAA,KAAqB;AAC1E,EAAA,IAAI,CAAC,MAAA,CAAO,mBAAA,IAAuB,CAAC,MAAA,CAAO,iBAAiB,OAAO,MAAA;AACnE,EAAA,MAAM,IAAI,MAAA,CAAO,eAAA;AACjB,EAAA,MAAM,QAAA,GAAW,EAAE,UAAA,KAAe,QAAA;AAClC,EAAA,MAAM,MAAA,GACJ,EAAE,YAAA,KAAiB,QAAA,IACnB,EAAE,UAAA,IAAc,IAAA,IAChB,EAAE,UAAA,KAAe,QAAA;AACnB,EAAA,IAAI,YAAY,MAAA,EAAQ;AACtB,IAAA,OAAO,oBAAA;AAAA,EACT;AACA,EAAA,OAAO,MAAA;AACT,CAAA;AAYA,IAAM,KAAA,GAAc,KAAA,CAAA,UAAA;AAAA,EAIlB,CACE;AAAA,IACE,SAAA;AAAA,IACA,kBAAA;AAAA,IACA,eAAA;AAAA,IACA,gBAAA,EAAkB,yBAAA;AAAA,IAClB,mBAAA,EAAqB,4BAAA;AAAA,IACrB,kBAAA,EAAoB,2BAAA;AAAA,IACpB,eAAA,EAAiB,wBAAA;AAAA,IACjB,GAAG;AAAA,KAEL,GAAA,KACG;AACH,IAAA,MAAM,MAAA,GAAe,cAA0B,MAAM;AACnD,MAAA,MAAM,iBAAA,GAAoB,IAAI,GAAA,CAAI,eAAA,IAAmB,EAAE,CAAA;AACvD,MAAA,OAAO;AAAA,QACL,iBAAA;AAAA,QACA,kBAAkB,yBAAA,IAA6B,IAAA;AAAA,QAC/C,qBAAqB,4BAAA,IAAgC,KAAA;AAAA,QACrD,oBAAoB,2BAAA,IAA+B,KAAA;AAAA,QACnD,iBAAiB,wBAAA,IAA4B;AAAA,OAC/C;AAAA,IACF,CAAA,EAAG;AAAA,MACD,eAAA;AAAA,MACA,yBAAA;AAAA,MACA,4BAAA;AAAA,MACA,2BAAA;AAAA,MACA;AAAA,KACD,CAAA;AAED,IAAA,uBACE,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,WAAA,EAAU,iBAAA;AAAA,QACV,iBAAA,EAAiB,MAAA,CAAO,gBAAA,GAAmB,IAAA,GAAO,KAAA;AAAA,QAClD,oBAAA,EAAoB,MAAA,CAAO,mBAAA,GAAsB,IAAA,GAAO,KAAA;AAAA,QACxD,mBAAA,EAAmB,MAAA,CAAO,kBAAA,GAAqB,IAAA,GAAO,KAAA;AAAA,QACtD,SAAA,EAAW,EAAA,CAAG,iCAAA,EAAmC,kBAAkB,CAAA;AAAA,QAEnE,QAAA,kBAAA,GAAA,CAAC,kBAAA,CAAmB,QAAA,EAAnB,EAA4B,OAAO,MAAA,EAClC,QAAA,kBAAA,GAAA;AAAA,UAAC,OAAA;AAAA,UAAA;AAAA,YACC,GAAA;AAAA,YACA,WAAA,EAAU,OAAA;AAAA,YACV,SAAA,EAAW,EAAA;AAAA,cACT,yCAAA;AAAA,cACA;AAAA,aACF;AAAA,YACC,GAAG;AAAA;AAAA,SACN,EACF;AAAA;AAAA,KACF;AAAA,EAEJ;AACF;AACA,KAAA,CAAM,WAAA,GAAc,OAAA;AAEpB,IAAM,WAAA,GAAoB,iBAGxB,CAAC,EAAE,WAAW,GAAG,KAAA,IAAS,GAAA,KAAQ;AAClC,EAAA,MAAM,MAAA,GAAe,KAAA,CAAA,UAAA,CAAW,kBAAkB,CAAA,IAAK,kBAAA;AACvD,EAAA,MAAM,kBAAA,GACJ,MAAA,CAAO,gBAAA,IAAoB,MAAA,CAAO,kBAAkB,IAAA,GAAO,CAAA;AAE7D,EAAA,uBACE,GAAA;AAAA,IAAC,OAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,WAAA,EAAU,cAAA;AAAA,MACV,SAAA,EAAW,EAAA;AAAA,QACT,kBAAA,IAAsB,8BAAA;AAAA,QACtB;AAAA,OACF;AAAA,MACC,GAAG;AAAA;AAAA,GACN;AAEJ,CAAC;AACD,WAAA,CAAY,WAAA,GAAc,aAAA;AAE1B,IAAM,SAAA,GAAkB,iBAGtB,CAAC,EAAE,WAAW,GAAG,KAAA,IAAS,GAAA,qBAC1B,GAAA;AAAA,EAAC,OAAA;AAAA,EAAA;AAAA,IACC,GAAA;AAAA,IACA,WAAA,EAAU,YAAA;AAAA,IACV,SAAA,EAAW,EAAA;AAAA,MACT,qEAAA;AAAA,MACA;AAAA,KACF;AAAA,IACC,GAAG;AAAA;AACN,CACD;AACD,SAAA,CAAU,WAAA,GAAc,WAAA;AAExB,IAAM,WAAA,GAAoB,iBAGxB,CAAC,EAAE,WAAW,GAAG,KAAA,IAAS,GAAA,qBAC1B,GAAA;AAAA,EAAC,OAAA;AAAA,EAAA;AAAA,IACC,GAAA;AAAA,IACA,WAAA,EAAU,cAAA;AAAA,IACV,SAAA,EAAW,EAAA;AAAA,MACT,qDAAA;AAAA,MACA;AAAA,KACF;AAAA,IACC,GAAG;AAAA;AACN,CACD;AACD,WAAA,CAAY,WAAA,GAAc,aAAA;AAE1B,IAAM,QAAA,GAAiB,iBAGrB,CAAC,EAAE,WAAW,GAAG,KAAA,IAAS,GAAA,qBAC1B,GAAA;AAAA,EAAC,IAAA;AAAA,EAAA;AAAA,IACC,GAAA;AAAA,IACA,WAAA,EAAU,WAAA;AAAA,IACV,SAAA,EAAW,EAAA;AAAA,MACT,qFAAA;AAAA,MACA;AAAA,KACF;AAAA,IACC,GAAG;AAAA;AACN,CACD;AACD,QAAA,CAAS,WAAA,GAAc,UAAA;AAGvB,IAAM,yBAAA,GAA4B,EAAA;AAAA,EAChC,uCAAA;AAAA,EACA,+CAAA;AAAA,EACA;AACF,CAAA;AAiBA,IAAM,qBAAA,GAA8B,KAAA,CAAA,UAAA,CAGlC,SAASA,sBAAAA,CACT,EAAE,QAAA,EAAU,YAAA,EAAc,SAAA,EAAW,WAAA,EAAa,SAAA,EAAW,KAAA,EAAO,GAAG,IAAA,IACvE,GAAA,EACA;AACA,EAAA,uBACE,GAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,SAAA,EAAW,EAAA;AAAA,QACT,qDAAA;AAAA,QACA,yBAAA;AAAA,QACA;AAAA,OACF;AAAA,MACA,OAAO,KAAA,IAAS,6BAAA;AAAA,MAChB,QAAA,EAAU,EAAA;AAAA,MACV,YAAA,EAAW,6BAAA;AAAA,MACX,SAAA,EAAS,IAAA;AAAA,MACT,WAAA,EAAa,CAAC,CAAA,KAAM;AAClB,QAAA,CAAA,CAAE,YAAA,CAAa,OAAA,CAAQ,YAAA,EAAc,QAAQ,CAAA;AAC7C,QAAA,oBAAA,CAAqB,CAAA,EAAG,EAAE,KAAA,EAAO,YAAA,IAAgB,UAAU,CAAA;AAC3D,QAAA,WAAA,GAAc,CAAC,CAAA;AAAA,MACjB,CAAA;AAAA,MACA,SAAA;AAAA,MACA,OAAA,EAAS,CAAC,EAAA,KAAO,EAAA,CAAG,eAAA,EAAgB;AAAA,MACpC,SAAA,EAAW,CAAC,EAAA,KAAO;AACjB,QAAA,IAAI,EAAA,CAAG,GAAA,KAAQ,GAAA,IAAO,EAAA,CAAG,QAAQ,OAAA,EAAS;AACxC,UAAA,EAAA,CAAG,cAAA,EAAe;AAAA,QACpB;AACA,QAAA,EAAA,CAAG,eAAA,EAAgB;AAAA,MACrB,CAAA;AAAA,MACA,WAAA,EAAU,0BAAA;AAAA,MACT,GAAG,IAAA;AAAA,MAEJ,QAAA,kBAAA,GAAA;AAAA,QAAC,YAAA;AAAA,QAAA;AAAA,UACC,SAAA,EAAU,4BAAA;AAAA,UACV,WAAA,EAAa,IAAA;AAAA,UACb,aAAA,EAAW;AAAA;AAAA;AACb;AAAA,GACF;AAEJ,CAAC;AACD,qBAAA,CAAsB,WAAA,GAAc,uBAAA;AAS7B,SAAS,sBAAA,CAAuB;AAAA,EACrC,UAAA;AAAA,EACA,SAAA;AAAA,EACA;AACF,CAAA,EAAgC;AAC9B,EAAA,MAAM,YAAA,GAAe,UAAA,KAAe,KAAA,IAAS,UAAA,KAAe,MAAA;AAC5D,EAAA,uBACE,GAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,EAAA,CAAG,yCAAA,EAA2C,SAAS,CAAA;AAAA,MAEjE,QAAA,EAAA,SAAA,mBACC,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,6BAAA,EACd,QAAA,kBAAA,GAAA;AAAA,QAAC,QAAA;AAAA,QAAA;AAAA,UACC,IAAA,EAAK,QAAA;AAAA,UACL,SAAA,EAAU,2JAAA;AAAA,UACV,OAAA,EAAS,CAAC,CAAA,KAAM;AACd,YAAA,CAAA,CAAE,eAAA,EAAgB;AAClB,YAAA,SAAA,CAAU,CAAC,CAAA;AAAA,UACb,CAAA;AAAA,UACA,KAAA,EAAM,aAAA;AAAA,UACN,YAAA,EAAW,mBAAA;AAAA,UAEV,QAAA,EAAA,YAAA,GACC,eAAe,MAAA,mBACb,GAAA;AAAA,YAAC,SAAA;AAAA,YAAA;AAAA,cACC,SAAA,EAAU,mBAAA;AAAA,cACV,WAAA,EAAa,IAAA;AAAA,cACb,aAAA,EAAW;AAAA;AAAA,WACb,mBAEA,GAAA;AAAA,YAAC,OAAA;AAAA,YAAA;AAAA,cACC,SAAA,EAAU,mBAAA;AAAA,cACV,WAAA,EAAa,IAAA;AAAA,cACb,aAAA,EAAW;AAAA;AAAA,WACb,mBAGF,GAAA;AAAA,YAAC,OAAA;AAAA,YAAA;AAAA,cACC,SAAA,EAAU,oIAAA;AAAA,cACV,WAAA,EAAa,IAAA;AAAA,cACb,aAAA,EAAW;AAAA;AAAA;AACb;AAAA,OAEJ,EACF,IACE,YAAA,mBACF,GAAA,CAAC,UAAK,SAAA,EAAU,mCAAA,EACb,yBAAe,MAAA,mBACd,GAAA;AAAA,QAAC,SAAA;AAAA,QAAA;AAAA,UACC,SAAA,EAAU,+CAAA;AAAA,UACV,WAAA,EAAa,IAAA;AAAA,UACb,aAAA,EAAW;AAAA;AAAA,OACb,mBAEA,GAAA;AAAA,QAAC,OAAA;AAAA,QAAA;AAAA,UACC,SAAA,EAAU,+CAAA;AAAA,UACV,WAAA,EAAa,IAAA;AAAA,UACb,aAAA,EAAW;AAAA;AAAA,OACb,EAEJ,CAAA,mBAEA,GAAA,CAAC,MAAA,EAAA,EAAK,WAAU,mCAAA,EACd,QAAA,kBAAA,GAAA;AAAA,QAAC,OAAA;AAAA,QAAA;AAAA,UACC,SAAA,EAAU,gJAAA;AAAA,UACV,WAAA,EAAa,IAAA;AAAA,UACb,aAAA,EAAW;AAAA;AAAA,OACb,EACF;AAAA;AAAA,GAEJ;AAEJ;AAgBA,IAAM,SAAA,GAAkB,KAAA,CAAA,UAAA;AAAA,EACtB,CACE;AAAA,IACE,SAAA;AAAA,IACA,QAAA;AAAA,IACA,QAAA;AAAA,IACA,UAAA;AAAA,IACA,mBAAA;AAAA,IACA,gBAAA;AAAA,IACA,KAAA;AAAA,IACA,SAAA;AAAA,IACA,GAAG;AAAA,KAEL,GAAA,KACG;AACH,IAAA,MAAM,MAAA,GAAe,KAAA,CAAA,UAAA,CAAW,kBAAkB,CAAA,IAAK,kBAAA;AACvD,IAAA,MAAM,UAAA,GACJ,OAAO,gBAAA,IACP,QAAA,KAAa,UACb,MAAA,CAAO,iBAAA,CAAkB,IAAI,QAAQ,CAAA;AACvC,IAAA,MAAM,YAAA,GACJ,UAAA,KAAe,UAAA,KAAe,KAAA,IAAS,UAAA,KAAe,MAAA,CAAA;AACxD,IAAA,MAAM,YAAA,GAAe,SAAA,IAAa,IAAA,IAAQ,SAAA,KAAc,KAAA;AACxD,IAAA,MAAM,WAAA,GACJ,MAAA,CAAO,kBAAA,IAAsB,OAAO,mBAAA,KAAwB,UAAA;AAC9D,IAAA,MAAM,IAAA,GAAO,QAAA,GAAW,mBAAA,CAAoB,MAAA,EAAQ,QAAQ,CAAA,GAAI,MAAA;AAEhE,IAAA,uBACE,IAAA;AAAA,MAAC,IAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,eAAA,EAAe,mBAAmB,CAAA,GAAI,MAAA;AAAA,QACtC,WAAA,EAAU,YAAA;AAAA,QACV,gBAAA,EAAgB,QAAA;AAAA,QAChB,eAAA,EAAe,aAAa,MAAA,GAAS,MAAA;AAAA,QACrC,aAAA,EAAa,YAAA,GAAgB,UAAA,IAAc,MAAA,GAAa,MAAA;AAAA,QACxD,WAAA,EACE,gBAAgB,UAAA,GACZ,UAAA,KAAe,SACb,YAAA,GACA,WAAA,GACF,aACE,MAAA,GACA,MAAA;AAAA,QAER,SAAA,EAAW,EAAA;AAAA,UACT,oJAAA;AAAA,UACA,CAAC,IAAA,IAAQ,4BAAA;AAAA,UACT,WAAA,IAAe,UAAA;AAAA;AAAA,UAAA,CAEd,cAAc,YAAA,KACb,oDAAA;AAAA,UACF,IAAA;AAAA,UACA,gBAAA,IAAoB,aAAA;AAAA,UACpB;AAAA,SACF;AAAA,QACA,KAAA;AAAA,QACC,GAAG,KAAA;AAAA,QAEH,QAAA,EAAA;AAAA,UAAA,UAAA,mBACC,IAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,yFAAA,EACd,QAAA,EAAA;AAAA,4BAAA,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,uJAAA,EACb,QAAA,EACH,CAAA;AAAA,YACC,+BACC,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,mDAAA,EACb,qBACH,CAAA,GACE;AAAA,WAAA,EACN,CAAA,GACE,YAAA,mBACF,IAAA,CAAC,MAAA,EAAA,EAAK,WAAU,yFAAA,EACd,QAAA,EAAA;AAAA,4BAAA,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,uJAAA,EACb,QAAA,EACH,CAAA;AAAA,4BACA,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,mDAAA,EACb,QAAA,EAAA,SAAA,EACH;AAAA,WAAA,EACF,CAAA,GAEA,QAAA;AAAA,UAED,WAAA,oBACC,GAAA;AAAA,YAAC,KAAA;AAAA,YAAA;AAAA,cACC,IAAA,EAAK,WAAA;AAAA,cACL,KAAA,EAAM,gBAAA;AAAA,cACN,WAAA,EAAa,mBAAA;AAAA,cACb,YAAA,EAAc,mBAAA;AAAA,cACd,SAAA,EAAW,EAAA;AAAA;AAAA,gBAET,wEAAA;AAAA,gBACA,+BAAA;AAAA,gBACA,mBACI,eAAA,GACA;AAAA,eACN;AAAA,cACA,WAAA,EAAU,4BAAA;AAAA,cACV,aAAA,EAAW;AAAA;AAAA;AACb;AAAA;AAAA,KAEJ;AAAA,EAEJ;AACF;AACA,SAAA,CAAU,WAAA,GAAc,WAAA;AAUxB,IAAM,SAAA,GAAkB,KAAA,CAAA,UAAA;AAAA,EACtB,CAAC,EAAE,SAAA,EAAW,KAAA,EAAO,UAAU,GAAG,KAAA,IAAS,GAAA,KAAQ;AACjD,IAAA,MAAM,MAAA,GAAe,KAAA,CAAA,UAAA,CAAW,kBAAkB,CAAA,IAAK,kBAAA;AACvD,IAAA,MAAM,IAAA,GAAO,QAAA,GAAW,mBAAA,CAAoB,MAAA,EAAQ,QAAQ,CAAA,GAAI,MAAA;AAChE,IAAA,MAAM,eAAA,GAAkB,QAAQ,IAAI,CAAA;AAEpC,IAAA,uBACE,GAAA;AAAA,MAAC,IAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,WAAA,EAAU,YAAA;AAAA,QACV,8BAAA,EAA8B,kBAAkB,EAAA,GAAK,MAAA;AAAA,QACrD,SAAA,EAAW,EAAA;AAAA,UACT,kHAAA;AAAA,UACA,IAAA;AAAA,UACA;AAAA,SACF;AAAA,QACA,KAAA;AAAA,QACA,gBAAA,EAAgB,QAAA;AAAA,QACf,GAAG;AAAA;AAAA,KACN;AAAA,EAEJ;AACF;AACA,SAAA,CAAU,WAAA,GAAc,WAAA","file":"table.js","sourcesContent":["import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n","\"use client\";\n\nimport { ArrowDown, ArrowUp, GripVertical } from \"lucide-react\";\nimport * as React from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\nexport type TableColumnDragState = {\n  /** column id you are currently dragging, or `null` */\n  draggingId: string | null;\n  /** id of the th under the cursor, or `null` */\n  dropTargetId: string | null;\n};\n\nexport type TableConfigValue = {\n  sortableColumnIds: ReadonlySet<string>;\n  enableColumnSort: boolean;\n  enableColumnReorder: boolean;\n  enableColumnResize: boolean;\n  /**\n   * when set (usually from host table state), `TableHead` / `TableCell` with\n   * matching `columnId` get consistent column-drag visuals\n   */\n  columnDragState: TableColumnDragState | null;\n};\n\nconst defaultTableConfig: TableConfigValue = {\n  sortableColumnIds: new Set(),\n  enableColumnSort: true,\n  enableColumnReorder: false,\n  enableColumnResize: false,\n  columnDragState: null,\n};\n\nconst TableConfigContext = React.createContext<TableConfigValue | null>(null);\nTableConfigContext.displayName = \"TableConfigContext\";\n\n/**\n * a compact card under the cursor so a column grab feels like moving the column, not\n * a tiny icon. call from `onDragStart` of {@link TableColumnDragHandle} or your handle.\n */\nexport function setColumnDragPreview(\n  e: React.DragEvent,\n  options: { title: string; width?: number; height?: number; hotspotX?: number; hotspotY?: number },\n) {\n  if (!e.dataTransfer) return;\n  e.dataTransfer.effectAllowed = \"move\";\n  const width = options.width ?? 80;\n  const height = options.height ?? 100;\n  const el = document.createElement(\"div\");\n  el.setAttribute(\"data-table-drag-preview\", \"\");\n  const dark =\n    typeof window !== \"undefined\" &&\n    window.matchMedia &&\n    window.matchMedia(\"(prefers-color-scheme: dark)\").matches;\n  const bg = dark ? \"rgba(24,24,26,0.95)\" : \"rgba(255,255,255,0.96)\";\n  const fg = dark ? \"rgba(250,250,250,0.95)\" : \"rgba(10,10,10,0.92)\";\n  const border = dark\n    ? \"1px solid rgba(255,255,255,0.12)\"\n    : \"1px solid rgba(0,0,0,0.1)\";\n  const shadow = \"0 12px 32px rgba(0,0,0,0.2),0 0 0 1px rgba(0,0,0,0.04)\";\n  el.style.cssText = [\n    \"position:fixed\",\n    \"left:0\",\n    \"top:0\",\n    \"z-index:100000\",\n    \"pointer-events:none\",\n    \"box-sizing:border-box\",\n    `width:${width}px`,\n    `min-height:${height}px`,\n    \"display:flex\",\n    \"flex-direction:column\",\n    \"align-items:center\",\n    \"justify-content:flex-start\",\n    \"gap:8px\",\n    `padding:10px 8px 12px`,\n    `color:${fg}`,\n    `background:${bg}`,\n    `border:${border}`,\n    \"border-radius:8px\",\n    `box-shadow:${shadow}`,\n  ].join(\";\");\n  const bar = document.createElement(\"div\");\n  bar.style.cssText = `width:3px;flex:1;min-height:32px;border-radius:2px;background:${\n    dark ? \"rgba(80,200,150,0.4)\" : \"rgba(20,80,200,0.2)\"\n  };align-self:stretch;`;\n  const t = document.createElement(\"div\");\n  t.textContent = options.title;\n  t.style.cssText =\n    \"font:600 11px/1.2 system-ui,-apple-system,sans-serif;text-align:center;word-break:break-word;max-width:100%;\";\n  el.appendChild(t);\n  el.appendChild(bar);\n  el.style.minHeight = `${height}px`;\n  document.body.appendChild(el);\n  void el.offsetWidth;\n  e.dataTransfer.setDragImage(\n    el,\n    options.hotspotX ?? width / 2,\n    options.hotspotY ?? 28,\n  );\n  requestAnimationFrame(() => {\n    if (el.parentNode) el.parentNode.removeChild(el);\n  });\n}\n\n/** source column (being dragged) and drop target use the same strip treatment */\nconst COLUMN_DRAG_TH_STRIP =\n  \"relative z-20 box-border overflow-hidden rounded-t-lg border border-primary/20 bg-primary/8 opacity-70 shadow-sm\";\nconst COLUMN_DRAG_TD_STRIP =\n  \"overflow-hidden border-x border-primary/15 bg-primary/5 opacity-70\";\n\nconst columnDragThClasses = (config: TableConfigValue, columnId: string) => {\n  if (!config.enableColumnReorder || !config.columnDragState) return undefined;\n  const d = config.columnDragState;\n  const isSource = d.draggingId === columnId;\n  const isDrop =\n    d.dropTargetId === columnId &&\n    d.draggingId != null &&\n    d.draggingId !== columnId;\n  if (isSource || isDrop) {\n    return COLUMN_DRAG_TH_STRIP;\n  }\n  return undefined;\n};\n\nconst columnDragTdClasses = (config: TableConfigValue, columnId: string) => {\n  if (!config.enableColumnReorder || !config.columnDragState) return undefined;\n  const d = config.columnDragState;\n  const isSource = d.draggingId === columnId;\n  const isDrop =\n    d.dropTargetId === columnId &&\n    d.draggingId != null &&\n    d.draggingId !== columnId;\n  if (isSource || isDrop) {\n    return COLUMN_DRAG_TD_STRIP;\n  }\n  return undefined;\n};\n\nexport type TableLayoutProps = {\n  containerClassName?: string;\n  sortableColumns?: readonly string[];\n  enableColumnSort?: boolean;\n  enableColumnReorder?: boolean;\n  enableColumnResize?: boolean;\n  /** pass `columnDragState` from the host (e.g. which column is being reordered) */\n  columnDragState?: TableColumnDragState | null;\n};\n\nconst Table = React.forwardRef<\n  HTMLTableElement,\n  React.ComponentProps<\"table\"> & TableLayoutProps\n>(\n  (\n    {\n      className,\n      containerClassName,\n      sortableColumns,\n      enableColumnSort: enableColumnSortFromProps,\n      enableColumnReorder: enableColumnReorderFromProps,\n      enableColumnResize: enableColumnResizeFromProps,\n      columnDragState: columnDragStateFromProps,\n      ...props\n    },\n    ref,\n  ) => {\n    const config = React.useMemo<TableConfigValue>(() => {\n      const sortableColumnIds = new Set(sortableColumns ?? []);\n      return {\n        sortableColumnIds,\n        enableColumnSort: enableColumnSortFromProps ?? true,\n        enableColumnReorder: enableColumnReorderFromProps ?? false,\n        enableColumnResize: enableColumnResizeFromProps ?? false,\n        columnDragState: columnDragStateFromProps ?? null,\n      };\n    }, [\n      sortableColumns,\n      enableColumnSortFromProps,\n      enableColumnReorderFromProps,\n      enableColumnResizeFromProps,\n      columnDragStateFromProps,\n    ]);\n\n    return (\n      <div\n        data-slot=\"table-container\"\n        data-table-sort={config.enableColumnSort ? \"on\" : \"off\"}\n        data-table-reorder={config.enableColumnReorder ? \"on\" : \"off\"}\n        data-table-resize={config.enableColumnResize ? \"on\" : \"off\"}\n        className={cn(\"relative w-full overflow-x-auto\", containerClassName)}\n      >\n        <TableConfigContext.Provider value={config}>\n          <table\n            ref={ref}\n            data-slot=\"table\"\n            className={cn(\n              \"min-w-full w-max caption-bottom text-sm\",\n              className,\n            )}\n            {...props}\n          />\n        </TableConfigContext.Provider>\n      </div>\n    );\n  },\n);\nTable.displayName = \"Table\";\n\nconst TableHeader = React.forwardRef<\n  HTMLTableSectionElement,\n  React.ComponentProps<\"thead\">\n>(({ className, ...props }, ref) => {\n  const config = React.useContext(TableConfigContext) ?? defaultTableConfig;\n  const hasSortableColumns =\n    config.enableColumnSort && config.sortableColumnIds.size > 0;\n\n  return (\n    <thead\n      ref={ref}\n      data-slot=\"table-header\"\n      className={cn(\n        hasSortableColumns && \"[&_tr:hover]:bg-transparent!\",\n        className,\n      )}\n      {...props}\n    />\n  );\n});\nTableHeader.displayName = \"TableHeader\";\n\nconst TableBody = React.forwardRef<\n  HTMLTableSectionElement,\n  React.ComponentProps<\"tbody\">\n>(({ className, ...props }, ref) => (\n  <tbody\n    ref={ref}\n    data-slot=\"table-body\"\n    className={cn(\n      \"[&>tr:last-child>td:not([data-table-column-drag-strip])]:border-b-0\",\n      className,\n    )}\n    {...props}\n  />\n));\nTableBody.displayName = \"TableBody\";\n\nconst TableFooter = React.forwardRef<\n  HTMLTableSectionElement,\n  React.ComponentProps<\"tfoot\">\n>(({ className, ...props }, ref) => (\n  <tfoot\n    ref={ref}\n    data-slot=\"table-footer\"\n    className={cn(\n      \"border-t border-primary/10 bg-primary/5 font-medium\",\n      className,\n    )}\n    {...props}\n  />\n));\nTableFooter.displayName = \"TableFooter\";\n\nconst TableRow = React.forwardRef<\n  HTMLTableRowElement,\n  React.ComponentProps<\"tr\">\n>(({ className, ...props }, ref) => (\n  <tr\n    ref={ref}\n    data-slot=\"table-row\"\n    className={cn(\n      \"transition-colors duration-0 hover:bg-primary/3 data-[state=selected]:bg-primary/10\",\n      className,\n    )}\n    {...props}\n  />\n));\nTableRow.displayName = \"TableRow\";\n\n/** same idea as sort chevrons: icon only, slightly larger than the 3.5 sort arrows */\nconst columnDragHandleIconClass = cn(\n  \"text-primary/55 hover:text-primary/80\",\n  \"cursor-grab active:cursor-grabbing touch-none\",\n  \"shrink-0\",\n);\n\nexport type TableColumnDragHandleProps = Omit<\n  React.ComponentProps<\"span\">,\n  \"onDragStart\" | \"onDragEnd\"\n> & {\n  /** must match the column & `dataTransfer` / tanstack `columnId` */\n  columnId: string;\n  onDragStart?: (e: React.DragEvent<HTMLSpanElement>) => void;\n  onDragEnd?: (e: React.DragEvent<HTMLSpanElement>) => void;\n  /**\n   * label on the custom drag “card” under the cursor; omit for a default “Column”\n   * placeholder (still more readable than the default browser ghost)\n   */\n  previewLabel?: string;\n};\n\nconst TableColumnDragHandle = React.forwardRef<\n  HTMLSpanElement,\n  TableColumnDragHandleProps\n>(function TableColumnDragHandle(\n  { columnId, previewLabel, className, onDragStart, onDragEnd, title, ...rest },\n  ref,\n) {\n  return (\n    <span\n      ref={ref}\n      className={cn(\n        \"inline-flex select-none items-center justify-center\",\n        columnDragHandleIconClass,\n        className,\n      )}\n      title={title ?? \"Drag to reorder this column\"}\n      tabIndex={-1}\n      aria-label=\"Drag to reorder this column\"\n      draggable\n      onDragStart={(e) => {\n        e.dataTransfer.setData(\"text/plain\", columnId);\n        setColumnDragPreview(e, { title: previewLabel ?? \"Column\" });\n        onDragStart?.(e);\n      }}\n      onDragEnd={onDragEnd}\n      onClick={(ev) => ev.stopPropagation()}\n      onKeyDown={(ev) => {\n        if (ev.key === \" \" || ev.key === \"Enter\") {\n          ev.preventDefault();\n        }\n        ev.stopPropagation();\n      }}\n      data-slot=\"table-column-drag-handle\"\n      {...rest}\n    >\n      <GripVertical\n        className=\"size-4 pointer-events-none\"\n        strokeWidth={2.25}\n        aria-hidden\n      />\n    </span>\n  );\n});\nTableColumnDragHandle.displayName = \"TableColumnDragHandle\";\n\nexport type TableHeaderSortControlProps = {\n  activeSort?: \"asc\" | \"desc\" | null;\n  onRequest?: (e: React.MouseEvent) => void;\n  className?: string;\n};\n\n/** chevron / sort control — place in the same row as the title (e.g. inside a narrow `inline-flex` with `gap-1`) */\nexport function TableHeaderSortControl({\n  activeSort,\n  onRequest,\n  className,\n}: TableHeaderSortControlProps) {\n  const isActiveSort = activeSort === \"asc\" || activeSort === \"desc\";\n  return (\n    <span\n      className={cn(\"inline-flex shrink-0 items-stretch pl-0\", className)}\n    >\n      {onRequest ? (\n        <span className=\"flex shrink-0 items-stretch\">\n          <button\n            type=\"button\"\n            className=\"text-primary/90 hover:text-primary/95 inline-flex min-h-10 w-8 min-w-8 touch-manipulation items-center justify-center self-center rounded p-0 md:min-h-12\"\n            onClick={(e) => {\n              e.stopPropagation();\n              onRequest(e);\n            }}\n            title=\"Change sort\"\n            aria-label=\"Change sort order\"\n          >\n            {isActiveSort ? (\n              activeSort === \"desc\" ? (\n                <ArrowDown\n                  className=\"size-3.5 shrink-0\"\n                  strokeWidth={2.25}\n                  aria-hidden\n                />\n              ) : (\n                <ArrowUp\n                  className=\"size-3.5 shrink-0\"\n                  strokeWidth={2.25}\n                  aria-hidden\n                />\n              )\n            ) : (\n              <ArrowUp\n                className=\"text-primary/85 size-3.5 shrink-0 opacity-0 transition-opacity duration-150 group-hover:opacity-100 group-focus-within:opacity-100\"\n                strokeWidth={2.25}\n                aria-hidden\n              />\n            )}\n          </button>\n        </span>\n      ) : isActiveSort ? (\n        <span className=\"inline-flex shrink-0 items-center\">\n          {activeSort === \"desc\" ? (\n            <ArrowDown\n              className=\"size-3.5 shrink-0 self-center text-primary/90\"\n              strokeWidth={2.25}\n              aria-hidden\n            />\n          ) : (\n            <ArrowUp\n              className=\"size-3.5 shrink-0 self-center text-primary/90\"\n              strokeWidth={2.25}\n              aria-hidden\n            />\n          )}\n        </span>\n      ) : (\n        <span className=\"inline-flex shrink-0 items-center\">\n          <ArrowUp\n            className=\"text-primary/85 size-3.5 shrink-0 self-center opacity-0 transition-opacity duration-150 group-hover:opacity-100 group-focus-within:opacity-100\"\n            strokeWidth={2.25}\n            aria-hidden\n          />\n        </span>\n      )}\n    </span>\n  );\n}\n\nexport type TableHeadProps = React.ComponentProps<\"th\"> & {\n  columnId?: string;\n  activeSort?: \"asc\" | \"desc\" | null;\n  onColumnResizeStart?: (\n    e: React.MouseEvent | React.TouchEvent | HTMLDivElement,\n  ) => void;\n  isColumnResizing?: boolean;\n  /**\n   * rendered at the far right of the head (e.g. column menu), after the label\n   * and sort chevrons\n   */\n  headerEnd?: React.ReactNode;\n};\n\nconst TableHead = React.forwardRef<HTMLTableCellElement, TableHeadProps>(\n  (\n    {\n      className,\n      columnId,\n      children,\n      activeSort,\n      onColumnResizeStart,\n      isColumnResizing,\n      style,\n      headerEnd,\n      ...props\n    },\n    ref,\n  ) => {\n    const config = React.useContext(TableConfigContext) ?? defaultTableConfig;\n    const showSortUI =\n      config.enableColumnSort &&\n      columnId !== undefined &&\n      config.sortableColumnIds.has(columnId);\n    const isActiveSort =\n      showSortUI && (activeSort === \"asc\" || activeSort === \"desc\");\n    const hasHeaderEnd = headerEnd != null && headerEnd !== false;\n    const showResizer =\n      config.enableColumnResize && typeof onColumnResizeStart === \"function\";\n    const drag = columnId ? columnDragThClasses(config, columnId) : undefined;\n\n    return (\n      <th\n        ref={ref}\n        data-resizing={isColumnResizing ? 1 : undefined}\n        data-slot=\"table-head\"\n        data-column-id={columnId}\n        data-sortable={showSortUI ? \"true\" : undefined}\n        data-sorted={isActiveSort ? (activeSort ?? undefined) : undefined}\n        aria-sort={\n          isActiveSort && activeSort\n            ? activeSort === \"desc\"\n              ? \"descending\"\n              : \"ascending\"\n            : showSortUI\n              ? \"none\"\n              : undefined\n        }\n        className={cn(\n          \"h-10 min-w-0 px-3 text-left align-middle text-sm font-bold text-primary transition-colors duration-0 md:h-12 md:px-4 [&:has([role=checkbox])]:pr-0\",\n          !drag && \"border-b border-primary/10\",\n          showResizer && \"relative\",\n          // th cursor-pointer is often overridden by child button default cursor\n          (showSortUI || hasHeaderEnd) &&\n            \"group hover:bg-primary/5 [&_button]:cursor-pointer\",\n          drag,\n          isColumnResizing && \"opacity-100\",\n          className,\n        )}\n        style={style}\n        {...props}\n      >\n        {showSortUI ? (\n          <span className=\"inline-flex h-full w-full min-h-0 min-w-0 max-w-full items-center justify-start gap-0.5\">\n            <span className=\"min-h-0 min-w-0 flex-1 text-left [&_[data-slot=table-column-drag-handle]]:cursor-grab [&_[data-slot=table-column-drag-handle]]:active:cursor-grabbing\">\n              {children}\n            </span>\n            {hasHeaderEnd ? (\n              <span className=\"inline-flex min-h-0 min-w-0 shrink-0 items-center\">\n                {headerEnd}\n              </span>\n            ) : null}\n          </span>\n        ) : hasHeaderEnd ? (\n          <span className=\"inline-flex h-full w-full min-h-0 min-w-0 max-w-full items-center justify-start gap-0.5\">\n            <span className=\"min-h-0 min-w-0 flex-1 text-left [&_[data-slot=table-column-drag-handle]]:cursor-grab [&_[data-slot=table-column-drag-handle]]:active:cursor-grabbing\">\n              {children}\n            </span>\n            <span className=\"inline-flex min-h-0 min-w-0 shrink-0 items-center\">\n              {headerEnd}\n            </span>\n          </span>\n        ) : (\n          children\n        )}\n        {showResizer && (\n          <div\n            role=\"separator\"\n            title=\"Drag to resize\"\n            onMouseDown={onColumnResizeStart as React.MouseEventHandler}\n            onTouchStart={onColumnResizeStart as React.TouchEventHandler}\n            className={cn(\n              // keep handle inside this th — negative right overlapped the next cell (bad with sticky/pinned columns)\n              \"absolute top-0 right-0 z-1 h-full w-2.5 min-w-2.5 max-w-2.5 touch-none\",\n              \"cursor-col-resize select-none\",\n              isColumnResizing\n                ? \"bg-primary/35\"\n                : \"bg-primary/0 hover:bg-primary/25\",\n            )}\n            data-slot=\"table-column-resize-handle\"\n            aria-hidden\n          />\n        )}\n      </th>\n    );\n  },\n);\nTableHead.displayName = \"TableHead\";\n\nexport type TableCellProps = React.ComponentProps<\"td\"> & {\n  /**\n   * same `columnId` as `TableHead` in that column so body cells pick up\n   * {@link TableConfigValue.columnDragState} styling\n   */\n  columnId?: string;\n};\n\nconst TableCell = React.forwardRef<HTMLTableCellElement, TableCellProps>(\n  ({ className, style, columnId, ...props }, ref) => {\n    const config = React.useContext(TableConfigContext) ?? defaultTableConfig;\n    const drag = columnId ? columnDragTdClasses(config, columnId) : undefined;\n    const columnDragStrip = Boolean(drag);\n\n    return (\n      <td\n        ref={ref}\n        data-slot=\"table-cell\"\n        data-table-column-drag-strip={columnDragStrip ? \"\" : undefined}\n        className={cn(\n          \"min-w-0 border-b border-primary/10 p-3 align-middle text-sm text-primary/90 md:p-4 [&:has([role=checkbox])]:pr-0\",\n          drag,\n          className,\n        )}\n        style={style}\n        data-column-id={columnId}\n        {...props}\n      />\n    );\n  },\n);\nTableCell.displayName = \"TableCell\";\n\nexport {\n  Table,\n  TableHeader,\n  TableBody,\n  TableFooter,\n  TableRow,\n  TableColumnDragHandle,\n  TableHead,\n  TableCell,\n};\n\nexport type { TableLayoutProps as TableProps };"]}

package/dist/react/tabs.d.ts

@@ -1,12 +1,16 @@
 import * as React from 'react';
 
-type TabsVariant = "pill" | "underline";
+type TabsVariant = "pill" | "underline" | "box";
+type TabsAlignment = "horizontal" | "vertical";
+type TabsTriggerLayout = "row" | "stacked";
 interface TabsProps extends React.HTMLAttributes<HTMLDivElement> {
     defaultValue?: string;
     value?: string;
     onValueChange?: (value: string) => void;
-    /** `pill` — segmented control with sliding primary fill (default). `underline` — bottom border row + clip-path sliding primary underline. */
+    /** `pill` — compact pill track (default). `box` — larger padding, `rounded-xl` sliding fill. `underline` — border row + clip-path bar. */
     variant?: TabsVariant;
+    /** Tab list layout: row (default) or stacked sidebar with panel beside it from `md` up; below `md`, vertical is shown as horizontal. */
+    alignment?: TabsAlignment;
     children: React.ReactNode;
 }
 declare const Tabs: React.FC<TabsProps>;
@@ -17,6 +21,8 @@ interface TabsTriggerProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonEle
     value?: string;
     icon?: React.ReactNode;
     iconPosition?: "left" | "right";
+    /** `stacked` — icon above label (needs `icon`). `row` — default inline row. */
+    layout?: TabsTriggerLayout;
     onClick?: React.MouseEventHandler<HTMLButtonElement>;
 }
 declare const TabsTrigger: React.FC<TabsTriggerProps>;
@@ -25,4 +31,4 @@ interface TabsContentProps extends React.HTMLAttributes<HTMLDivElement> {
 }
 declare const TabsContent: React.FC<TabsContentProps>;
 
-export { Tabs, TabsContent, TabsList, TabsTrigger, type TabsVariant };
+export { Tabs, type TabsAlignment, TabsContent, TabsList, TabsTrigger, type TabsTriggerLayout, type TabsVariant };