@handled-ai/design-system 0.14.8 → 0.15.1

package/dist/components/data-table-filter.d.ts

@@ -17,7 +17,9 @@ interface DataTableFilterProps {
     selectedFilters: Record<string, string[]>;
     onToggleFilter: (categoryId: string, option: string) => void;
     className?: string;
+    /** Minimum number of options before showing the sub-menu search input. Defaults to 8. */
+    optionSearchThreshold?: number;
 }
-declare function DataTableFilter({ categories, selectedFilters, onToggleFilter, className, }: DataTableFilterProps): React.JSX.Element;
+declare function DataTableFilter({ categories, selectedFilters, onToggleFilter, className, optionSearchThreshold, }: DataTableFilterProps): React.JSX.Element;
 
 export { DataTableFilter, type DataTableFilterCategory, type FilterOption };

package/dist/components/data-table-filter.js

@@ -44,7 +44,8 @@ function DataTableFilter({
   categories,
   selectedFilters,
   onToggleFilter,
-  className
+  className,
+  optionSearchThreshold = 8
 }) {
   const [query, setQuery] = React.useState("");
   const [subQueries, setSubQueries] = React.useState({});
@@ -126,7 +127,7 @@ function DataTableFilter({
                   category.label
                 ] }),
                 /* @__PURE__ */ jsxs(DropdownMenuSubContent, { className: "max-h-[320px] w-52 overflow-y-auto p-1", children: [
-                  category.options.length > 7 && /* @__PURE__ */ jsx("div", { className: "sticky top-0 z-10 border-b border-border bg-popover p-1.5", children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+                  category.options.length > optionSearchThreshold && /* @__PURE__ */ jsx("div", { className: "sticky top-0 z-10 border-b border-border bg-popover p-1.5", children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
                     /* @__PURE__ */ jsx(Search, { className: "absolute left-2 top-1/2 h-3 w-3 -translate-y-1/2 text-muted-foreground" }),
                     /* @__PURE__ */ jsx(
                       "input",
@@ -136,7 +137,12 @@ function DataTableFilter({
                         value: (_b = subQueries[category.id]) != null ? _b : "",
                         onChange: (e) => setSubQueries((prev) => __spreadProps(__spreadValues({}, prev), { [category.id]: e.target.value })),
                         onClick: (e) => e.stopPropagation(),
-                        onKeyDown: (e) => e.stopPropagation()
+                        onKeyDown: (e) => {
+                          const navKeys = ["ArrowDown", "ArrowUp", "Enter", "Escape", "Tab"];
+                          if (!navKeys.includes(e.key)) {
+                            e.stopPropagation();
+                          }
+                        }
                       }
                     )
                   ] }) }),

package/dist/components/data-table-filter.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/data-table-filter.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { ListFilter, Search } from \"lucide-react\"\n\nimport { cn } from \"../lib/utils\"\nimport { Button } from \"./button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"./dropdown-menu\"\n\nexport interface FilterOption {\n  label: string\n  value: string\n}\n\nexport interface DataTableFilterCategory {\n  id: string\n  label: string\n  icon: React.ComponentType<{ className?: string }>\n  options: (string | FilterOption)[]\n}\n\nfunction getOptionValue(option: string | FilterOption): string {\n  return typeof option === \"string\" ? option : option.value\n}\nfunction getOptionLabel(option: string | FilterOption): string {\n  return typeof option === \"string\" ? option : option.label\n}\n\ninterface DataTableFilterProps {\n  categories: DataTableFilterCategory[]\n  selectedFilters: Record<string, string[]>\n  onToggleFilter: (categoryId: string, option: string) => void\n  className?: string\n}\n\nexport function DataTableFilter({\n  categories,\n  selectedFilters,\n  onToggleFilter,\n  className,\n}: DataTableFilterProps) {\n  const [query, setQuery] = React.useState(\"\")\n  const [subQueries, setSubQueries] = React.useState<Record<string, string>>({})\n\n  const visibleCategories = React.useMemo(() => {\n    const normalized = query.trim().toLowerCase()\n    if (!normalized) {\n      return categories\n    }\n\n    return categories.filter((category) => {\n      if (category.label.toLowerCase().includes(normalized)) {\n        return true\n      }\n\n      return category.options.some((option) =>\n        getOptionLabel(option).toLowerCase().includes(normalized)\n      )\n    })\n  }, [categories, query])\n\n  const activeCount = React.useMemo(\n    () =>\n      Object.values(selectedFilters).reduce(\n        (count, selected) => count + selected.length,\n        0\n      ),\n    [selectedFilters]\n  )\n\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger asChild>\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          className={cn(\n            \"h-8 gap-2 rounded-md border-border/60 bg-background text-xs font-normal shadow-none hover:bg-muted/50\",\n            className\n          )}\n        >\n          <ListFilter className=\"h-3.5 w-3.5\" />\n          Filter\n          {activeCount > 0 ? (\n            <span className=\"rounded bg-muted px-1.5 py-0 text-[10px] font-semibold\">\n              {activeCount}\n            </span>\n          ) : null}\n        </Button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent align=\"start\" className=\"w-[240px] p-0\">\n        <div className=\"sticky top-0 z-10 border-b border-border bg-popover p-2\">\n          <div className=\"relative\">\n            <Search className=\"absolute left-2 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground\" />\n            <input\n              className=\"h-8 w-full rounded-md bg-muted/50 py-1 pr-2 pl-7 text-xs outline-none transition-colors placeholder:text-muted-foreground/70 focus:bg-muted\"\n              placeholder=\"Search filters...\"\n              value={query}\n              onChange={(event) => setQuery(event.target.value)}\n              onClick={(event) => event.stopPropagation()}\n              onKeyDown={(event) => event.stopPropagation()}\n            />\n          </div>\n        </div>\n\n        <div className=\"max-h-[320px] overflow-y-auto p-1\">\n          {visibleCategories.map((category) => {\n            const subQuery = (subQueries[category.id] ?? \"\").trim().toLowerCase()\n            const filteredOptions = subQuery\n              ? category.options.filter((opt) =>\n                  getOptionLabel(opt).toLowerCase().includes(subQuery)\n                )\n              : category.options\n\n            return (\n              <DropdownMenuSub\n                key={category.id}\n                onOpenChange={(open) => {\n                  if (!open) {\n                    setSubQueries((prev) => {\n                      const next = { ...prev }\n                      delete next[category.id]\n                      return next\n                    })\n                  }\n                }}\n              >\n                <DropdownMenuSubTrigger className=\"cursor-pointer py-1.5 text-xs\">\n                  <category.icon className=\"mr-2 h-3.5 w-3.5 text-muted-foreground\" />\n                  {category.label}\n                </DropdownMenuSubTrigger>\n                <DropdownMenuSubContent className=\"max-h-[320px] w-52 overflow-y-auto p-1\">\n                  {/* Submenu search — only for categories with many options */}\n                  {category.options.length > 7 && (\n                    <div className=\"sticky top-0 z-10 border-b border-border bg-popover p-1.5\">\n                      <div className=\"relative\">\n                        <Search className=\"absolute left-2 top-1/2 h-3 w-3 -translate-y-1/2 text-muted-foreground\" />\n                        <input\n                          className=\"h-7 w-full rounded-md bg-muted/50 py-1 pr-2 pl-7 text-xs outline-none transition-colors placeholder:text-muted-foreground/70 focus:bg-muted\"\n                          placeholder=\"Search...\"\n                          value={subQueries[category.id] ?? \"\"}\n                          onChange={(e) =>\n                            setSubQueries((prev) => ({ ...prev, [category.id]: e.target.value }))\n                          }\n                          onClick={(e) => e.stopPropagation()}\n                          onKeyDown={(e) => e.stopPropagation()}\n                        />\n                      </div>\n                    </div>\n                  )}\n                  {/* Filtered options */}\n                  {filteredOptions.map((option) => {\n                    const value = getOptionValue(option)\n                    const label = getOptionLabel(option)\n                    const selected = selectedFilters[category.id]?.includes(value) ?? false\n                    return (\n                      <DropdownMenuItem\n                        key={value}\n                        className=\"cursor-pointer justify-between text-xs\"\n                        onSelect={(event) => {\n                          event.preventDefault()\n                          onToggleFilter(category.id, value)\n                        }}\n                      >\n                        {label}\n                        {selected ? (\n                          <span className=\"text-[10px] font-semibold text-brand-purple\">\n                            Applied\n                          </span>\n                        ) : null}\n                      </DropdownMenuItem>\n                    )\n                  })}\n                  {filteredOptions.length === 0 && category.options.length > 0 && (\n                    <div className=\"p-2 text-center text-xs text-muted-foreground\">\n                      No matches\n                    </div>\n                  )}\n                </DropdownMenuSubContent>\n              </DropdownMenuSub>\n            )\n          })}\n\n          {visibleCategories.length === 0 ? (\n            <div className=\"p-2 text-center text-xs text-muted-foreground\">\n              No filters found\n            </div>\n          ) : null}\n        </div>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  )\n}\n"],"mappings":"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","names":["_a","_b"]}
+{"version":3,"sources":["../../src/components/data-table-filter.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { ListFilter, Search } from \"lucide-react\"\n\nimport { cn } from \"../lib/utils\"\nimport { Button } from \"./button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"./dropdown-menu\"\n\nexport interface FilterOption {\n  label: string\n  value: string\n}\n\nexport interface DataTableFilterCategory {\n  id: string\n  label: string\n  icon: React.ComponentType<{ className?: string }>\n  options: (string | FilterOption)[]\n}\n\nfunction getOptionValue(option: string | FilterOption): string {\n  return typeof option === \"string\" ? option : option.value\n}\nfunction getOptionLabel(option: string | FilterOption): string {\n  return typeof option === \"string\" ? option : option.label\n}\n\ninterface DataTableFilterProps {\n  categories: DataTableFilterCategory[]\n  selectedFilters: Record<string, string[]>\n  onToggleFilter: (categoryId: string, option: string) => void\n  className?: string\n  /** Minimum number of options before showing the sub-menu search input. Defaults to 8. */\n  optionSearchThreshold?: number\n}\n\nexport function DataTableFilter({\n  categories,\n  selectedFilters,\n  onToggleFilter,\n  className,\n  optionSearchThreshold = 8,\n}: DataTableFilterProps) {\n  const [query, setQuery] = React.useState(\"\")\n  const [subQueries, setSubQueries] = React.useState<Record<string, string>>({})\n\n  const visibleCategories = React.useMemo(() => {\n    const normalized = query.trim().toLowerCase()\n    if (!normalized) {\n      return categories\n    }\n\n    return categories.filter((category) => {\n      if (category.label.toLowerCase().includes(normalized)) {\n        return true\n      }\n\n      return category.options.some((option) =>\n        getOptionLabel(option).toLowerCase().includes(normalized)\n      )\n    })\n  }, [categories, query])\n\n  const activeCount = React.useMemo(\n    () =>\n      Object.values(selectedFilters).reduce(\n        (count, selected) => count + selected.length,\n        0\n      ),\n    [selectedFilters]\n  )\n\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger asChild>\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          className={cn(\n            \"h-8 gap-2 rounded-md border-border/60 bg-background text-xs font-normal shadow-none hover:bg-muted/50\",\n            className\n          )}\n        >\n          <ListFilter className=\"h-3.5 w-3.5\" />\n          Filter\n          {activeCount > 0 ? (\n            <span className=\"rounded bg-muted px-1.5 py-0 text-[10px] font-semibold\">\n              {activeCount}\n            </span>\n          ) : null}\n        </Button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent align=\"start\" className=\"w-[240px] p-0\">\n        <div className=\"sticky top-0 z-10 border-b border-border bg-popover p-2\">\n          <div className=\"relative\">\n            <Search className=\"absolute left-2 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground\" />\n            <input\n              className=\"h-8 w-full rounded-md bg-muted/50 py-1 pr-2 pl-7 text-xs outline-none transition-colors placeholder:text-muted-foreground/70 focus:bg-muted\"\n              placeholder=\"Search filters...\"\n              value={query}\n              onChange={(event) => setQuery(event.target.value)}\n              onClick={(event) => event.stopPropagation()}\n              onKeyDown={(event) => event.stopPropagation()}\n            />\n          </div>\n        </div>\n\n        <div className=\"max-h-[320px] overflow-y-auto p-1\">\n          {visibleCategories.map((category) => {\n            const subQuery = (subQueries[category.id] ?? \"\").trim().toLowerCase()\n            const filteredOptions = subQuery\n              ? category.options.filter((opt) =>\n                  getOptionLabel(opt).toLowerCase().includes(subQuery)\n                )\n              : category.options\n\n            return (\n              <DropdownMenuSub\n                key={category.id}\n                onOpenChange={(open) => {\n                  if (!open) {\n                    setSubQueries((prev) => {\n                      const next = { ...prev }\n                      delete next[category.id]\n                      return next\n                    })\n                  }\n                }}\n              >\n                <DropdownMenuSubTrigger className=\"cursor-pointer py-1.5 text-xs\">\n                  <category.icon className=\"mr-2 h-3.5 w-3.5 text-muted-foreground\" />\n                  {category.label}\n                </DropdownMenuSubTrigger>\n                <DropdownMenuSubContent className=\"max-h-[320px] w-52 overflow-y-auto p-1\">\n                  {/* Submenu search — only for categories with many options */}\n                  {category.options.length > optionSearchThreshold && (\n                    <div className=\"sticky top-0 z-10 border-b border-border bg-popover p-1.5\">\n                      <div className=\"relative\">\n                        <Search className=\"absolute left-2 top-1/2 h-3 w-3 -translate-y-1/2 text-muted-foreground\" />\n                        <input\n                          className=\"h-7 w-full rounded-md bg-muted/50 py-1 pr-2 pl-7 text-xs outline-none transition-colors placeholder:text-muted-foreground/70 focus:bg-muted\"\n                          placeholder=\"Search...\"\n                          value={subQueries[category.id] ?? \"\"}\n                          onChange={(e) =>\n                            setSubQueries((prev) => ({ ...prev, [category.id]: e.target.value }))\n                          }\n                          onClick={(e) => e.stopPropagation()}\n                          onKeyDown={(e) => {\n                            // Allow navigation keys to propagate to Radix menu handling\n                            // so keyboard users can move to and select filtered options.\n                            const navKeys = [\"ArrowDown\", \"ArrowUp\", \"Enter\", \"Escape\", \"Tab\"]\n                            if (!navKeys.includes(e.key)) {\n                              e.stopPropagation()\n                            }\n                          }}\n                        />\n                      </div>\n                    </div>\n                  )}\n                  {/* Filtered options */}\n                  {filteredOptions.map((option) => {\n                    const value = getOptionValue(option)\n                    const label = getOptionLabel(option)\n                    const selected = selectedFilters[category.id]?.includes(value) ?? false\n                    return (\n                      <DropdownMenuItem\n                        key={value}\n                        className=\"cursor-pointer justify-between text-xs\"\n                        onSelect={(event) => {\n                          event.preventDefault()\n                          onToggleFilter(category.id, value)\n                        }}\n                      >\n                        {label}\n                        {selected ? (\n                          <span className=\"text-[10px] font-semibold text-brand-purple\">\n                            Applied\n                          </span>\n                        ) : null}\n                      </DropdownMenuItem>\n                    )\n                  })}\n                  {filteredOptions.length === 0 && category.options.length > 0 && (\n                    <div className=\"p-2 text-center text-xs text-muted-foreground\">\n                      No matches\n                    </div>\n                  )}\n                </DropdownMenuSubContent>\n              </DropdownMenuSub>\n            )\n          })}\n\n          {visibleCategories.length === 0 ? (\n            <div className=\"p-2 text-center text-xs text-muted-foreground\">\n              No filters found\n            </div>\n          ) : null}\n        </div>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  )\n}\n"],"mappings":"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","names":["_a","_b"]}

package/dist/components/virtualized-data-table.d.ts

@@ -1,6 +1,12 @@
 import * as React from 'react';
-import { ColumnDef, SortingState, OnChangeFn, ColumnFiltersState, VisibilityState } from '@tanstack/react-table';
+import { RowData, ColumnDef, ColumnSizingState, OnChangeFn, SortingState, ColumnFiltersState, VisibilityState } from '@tanstack/react-table';
 
+declare module "@tanstack/react-table" {
+    interface ColumnMeta<TData extends RowData, TValue> {
+        /** Server-side sort key for this column. Enables sort in the header menu when onColumnSort is also provided. */
+        sortKey?: string;
+    }
+}
 interface VirtualizedDataTableProps<TData> {
     columns: ColumnDef<TData, any>[];
     data: TData[];
@@ -13,6 +19,10 @@ interface VirtualizedDataTableProps<TData> {
     reachBottomThreshold?: number;
     hasMore?: boolean;
     isFetchingMore?: boolean;
+    enableColumnResizing?: boolean;
+    columnResizeMode?: "onChange" | "onEnd";
+    columnSizing?: ColumnSizingState;
+    onColumnSizingChange?: OnChangeFn<ColumnSizingState>;
     sorting?: SortingState;
     onSortingChange?: OnChangeFn<SortingState>;
     columnFilters?: ColumnFiltersState;
@@ -23,8 +33,16 @@ interface VirtualizedDataTableProps<TData> {
     emptyIcon?: React.ReactNode;
     emptyMessage?: string;
     emptyDescription?: string;
+    /** Called when user requests sorting from column header. columnId is the column's meta.sortKey. */
+    onColumnSort?: (columnId: string, direction: "asc" | "desc") => void;
+    /** Called when user hides a column from the header menu. */
+    onColumnHide?: (columnId: string) => void;
+    /** The currently active sort column ID — matches a column's meta.sortKey. Used for visual indicators and aria-sort. */
+    activeSortColumn?: string | null;
+    /** The current sort direction. Used for visual indicators and aria-sort. */
+    activeSortDirection?: "asc" | "desc";
     className?: string;
 }
-declare function VirtualizedDataTable<TData>({ columns, data, height, estimateRowHeight, overscan, onRowClick, getRowId, onReachBottom, reachBottomThreshold, hasMore, isFetchingMore, sorting, onSortingChange, columnFilters, onColumnFiltersChange, columnVisibility, onColumnVisibilityChange, isLoading, emptyIcon, emptyMessage, emptyDescription, className, }: VirtualizedDataTableProps<TData>): React.JSX.Element;
+declare function VirtualizedDataTable<TData>({ columns, data, height, estimateRowHeight, overscan, onRowClick, getRowId, onReachBottom, reachBottomThreshold, hasMore, isFetchingMore, enableColumnResizing, columnResizeMode, columnSizing, onColumnSizingChange, sorting, onSortingChange, columnFilters, onColumnFiltersChange, columnVisibility, onColumnVisibilityChange, onColumnSort, onColumnHide, activeSortColumn, activeSortDirection, isLoading, emptyIcon, emptyMessage, emptyDescription, className, }: VirtualizedDataTableProps<TData>): React.JSX.Element;
 
 export { VirtualizedDataTable, type VirtualizedDataTableProps };

package/dist/components/virtualized-data-table.js

@@ -20,7 +20,7 @@ var __spreadValues = (a, b) => {
   return a;
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { useVirtualizer } from "@tanstack/react-virtual";
 import {
@@ -28,7 +28,14 @@ import {
   getCoreRowModel,
   flexRender
 } from "@tanstack/react-table";
-import { ArrowDown, ArrowUp, ArrowUpDown, SearchX, Loader2 } from "lucide-react";
+import { ArrowDown, ArrowUp, ArrowUpDown, ChevronDown, EyeOff, Check, SearchX, Loader2 } from "lucide-react";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuTrigger,
+  DropdownMenuItem,
+  DropdownMenuSeparator
+} from "./dropdown-menu.js";
 import { cn } from "../lib/utils.js";
 function VirtualizedDataTable({
   columns,
@@ -42,12 +49,20 @@ function VirtualizedDataTable({
   reachBottomThreshold = 5,
   hasMore = true,
   isFetchingMore,
+  enableColumnResizing = false,
+  columnResizeMode = "onEnd",
+  columnSizing,
+  onColumnSizingChange,
   sorting,
   onSortingChange,
   columnFilters,
   onColumnFiltersChange,
   columnVisibility,
   onColumnVisibilityChange,
+  onColumnSort,
+  onColumnHide,
+  activeSortColumn,
+  activeSortDirection,
   isLoading,
   emptyIcon,
   emptyMessage = "No rows found",
@@ -63,6 +78,9 @@ function VirtualizedDataTable({
   const [internalColumnVisibility, setInternalColumnVisibility] = React.useState({});
   const resolvedColumnVisibility = columnVisibility != null ? columnVisibility : internalColumnVisibility;
   const resolvedOnColumnVisibilityChange = onColumnVisibilityChange != null ? onColumnVisibilityChange : setInternalColumnVisibility;
+  const [internalColumnSizing, setInternalColumnSizing] = React.useState({});
+  const resolvedColumnSizing = columnSizing != null ? columnSizing : internalColumnSizing;
+  const resolvedOnColumnSizingChange = onColumnSizingChange != null ? onColumnSizingChange : setInternalColumnSizing;
   const table = useReactTable(__spreadProps(__spreadValues({
     data,
     columns
@@ -70,11 +88,15 @@ function VirtualizedDataTable({
     state: {
       sorting: resolvedSorting,
       columnFilters: resolvedColumnFilters,
-      columnVisibility: resolvedColumnVisibility
+      columnVisibility: resolvedColumnVisibility,
+      columnSizing: resolvedColumnSizing
     },
     onSortingChange: resolvedOnSortingChange,
     onColumnFiltersChange: resolvedOnColumnFiltersChange,
     onColumnVisibilityChange: resolvedOnColumnVisibilityChange,
+    onColumnSizingChange: resolvedOnColumnSizingChange,
+    enableColumnResizing,
+    columnResizeMode,
     manualSorting: true,
     manualFiltering: true,
     manualPagination: true,
@@ -130,38 +152,148 @@ function VirtualizedDataTable({
           {
             className: "flex w-max min-w-full border-b border-border/50",
             role: "row",
-            children: headerGroup.headers.map((header, colIdx) => /* @__PURE__ */ jsx(
-              "div",
-              {
-                className: "h-9 px-3 flex items-center text-xs font-medium text-muted-foreground whitespace-nowrap",
-                style: {
-                  width: header.getSize(),
-                  minWidth: header.getSize()
-                },
-                role: "columnheader",
-                "aria-colindex": colIdx + 1,
-                "aria-sort": header.column.getIsSorted() === "asc" ? "ascending" : header.column.getIsSorted() === "desc" ? "descending" : header.column.getCanSort() ? "none" : void 0,
-                children: header.isPlaceholder ? null : header.column.getCanSort() ? /* @__PURE__ */ jsxs(
-                  "button",
-                  {
-                    type: "button",
-                    className: "inline-flex items-center gap-1 hover:text-foreground transition-colors",
-                    onClick: header.column.getToggleSortingHandler(),
-                    children: [
-                      flexRender(
+            children: headerGroup.headers.map((header, colIdx) => {
+              var _a;
+              const sortKey = (_a = header.column.columnDef.meta) == null ? void 0 : _a.sortKey;
+              const canServerSort = Boolean(sortKey && onColumnSort);
+              const resolvedAriaSort = (() => {
+                if (activeSortColumn !== void 0) {
+                  if (!sortKey) return void 0;
+                  if (activeSortColumn === sortKey) return activeSortDirection === "asc" ? "ascending" : "descending";
+                  return "none";
+                }
+                const sorted = header.column.getIsSorted();
+                if (sorted === "asc") return "ascending";
+                if (sorted === "desc") return "descending";
+                if (header.column.getCanSort()) return "none";
+                return void 0;
+              })();
+              const sortIcon = (() => {
+                if (!canServerSort) return null;
+                if (activeSortColumn === sortKey && activeSortDirection === "asc") return /* @__PURE__ */ jsx(ArrowUp, { className: "w-3 h-3" });
+                if (activeSortColumn === sortKey && activeSortDirection === "desc") return /* @__PURE__ */ jsx(ArrowDown, { className: "w-3 h-3" });
+                return /* @__PURE__ */ jsx(ArrowUpDown, { className: "w-3 h-3 opacity-40" });
+              })();
+              const handleHeaderClick = canServerSort ? () => {
+                const newDir = activeSortColumn === sortKey ? activeSortDirection === "asc" ? "desc" : "asc" : "asc";
+                onColumnSort(sortKey, newDir);
+              } : void 0;
+              return /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: cn(
+                    "group/header h-9 px-3 flex items-center text-xs font-medium text-muted-foreground whitespace-nowrap relative",
+                    header.column.getCanResize() && "pr-4"
+                  ),
+                  style: {
+                    width: header.getSize(),
+                    minWidth: header.getSize()
+                  },
+                  role: "columnheader",
+                  "aria-colindex": colIdx + 1,
+                  "aria-sort": resolvedAriaSort,
+                  children: [
+                    header.isPlaceholder ? null : /* @__PURE__ */ jsxs(Fragment, { children: [
+                      canServerSort ? /* @__PURE__ */ jsxs(
+                        "button",
+                        {
+                          type: "button",
+                          className: "inline-flex items-center gap-1 hover:text-foreground transition-colors",
+                          onClick: handleHeaderClick,
+                          children: [
+                            flexRender(header.column.columnDef.header, header.getContext()),
+                            sortIcon
+                          ]
+                        }
+                      ) : header.column.getCanSort() ? /* @__PURE__ */ jsxs(
+                        "button",
+                        {
+                          type: "button",
+                          className: "inline-flex items-center gap-1 hover:text-foreground transition-colors",
+                          onClick: header.column.getToggleSortingHandler(),
+                          children: [
+                            flexRender(
+                              header.column.columnDef.header,
+                              header.getContext()
+                            ),
+                            header.column.getIsSorted() === "asc" ? /* @__PURE__ */ jsx(ArrowUp, { className: "w-3 h-3" }) : header.column.getIsSorted() === "desc" ? /* @__PURE__ */ jsx(ArrowDown, { className: "w-3 h-3" }) : /* @__PURE__ */ jsx(ArrowUpDown, { className: "w-3 h-3 opacity-40" })
+                          ]
+                        }
+                      ) : flexRender(
                         header.column.columnDef.header,
                         header.getContext()
                       ),
-                      header.column.getIsSorted() === "asc" ? /* @__PURE__ */ jsx(ArrowUp, { className: "w-3 h-3" }) : header.column.getIsSorted() === "desc" ? /* @__PURE__ */ jsx(ArrowDown, { className: "w-3 h-3" }) : /* @__PURE__ */ jsx(ArrowUpDown, { className: "w-3 h-3 opacity-40" })
-                    ]
-                  }
-                ) : flexRender(
-                  header.column.columnDef.header,
-                  header.getContext()
-                )
-              },
-              header.id
-            ))
+                      (canServerSort || header.column.getCanSort() || header.column.getCanHide()) && /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+                        /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+                          "button",
+                          {
+                            type: "button",
+                            className: "ml-1 inline-flex items-center hover:text-foreground transition-all opacity-0 group-hover/header:opacity-100",
+                            "aria-label": "Column actions",
+                            children: /* @__PURE__ */ jsx(ChevronDown, { className: "w-3 h-3" })
+                          }
+                        ) }),
+                        /* @__PURE__ */ jsxs(DropdownMenuContent, { align: "start", className: "w-48", children: [
+                          /* @__PURE__ */ jsxs(
+                            DropdownMenuItem,
+                            {
+                              disabled: !canServerSort,
+                              onClick: () => canServerSort && onColumnSort(sortKey, "asc"),
+                              children: [
+                                /* @__PURE__ */ jsx(ArrowUp, { className: "w-3.5 h-3.5 mr-2" }),
+                                "Sort ascending",
+                                activeSortColumn === sortKey && activeSortDirection === "asc" && /* @__PURE__ */ jsx(Check, { className: "w-3.5 h-3.5 ml-auto" })
+                              ]
+                            }
+                          ),
+                          /* @__PURE__ */ jsxs(
+                            DropdownMenuItem,
+                            {
+                              disabled: !canServerSort,
+                              onClick: () => canServerSort && onColumnSort(sortKey, "desc"),
+                              children: [
+                                /* @__PURE__ */ jsx(ArrowDown, { className: "w-3.5 h-3.5 mr-2" }),
+                                "Sort descending",
+                                activeSortColumn === sortKey && activeSortDirection === "desc" && /* @__PURE__ */ jsx(Check, { className: "w-3.5 h-3.5 ml-auto" })
+                              ]
+                            }
+                          ),
+                          header.column.getCanHide() && /* @__PURE__ */ jsxs(Fragment, { children: [
+                            /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+                            /* @__PURE__ */ jsxs(
+                              DropdownMenuItem,
+                              {
+                                onClick: () => onColumnHide ? onColumnHide(header.column.id) : header.column.toggleVisibility(false),
+                                children: [
+                                  /* @__PURE__ */ jsx(EyeOff, { className: "w-3.5 h-3.5 mr-2" }),
+                                  "Hide column"
+                                ]
+                              }
+                            )
+                          ] })
+                        ] })
+                      ] })
+                    ] }),
+                    header.column.getCanResize() && /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        onMouseDown: header.getResizeHandler(),
+                        onTouchStart: header.getResizeHandler(),
+                        className: cn(
+                          "absolute right-0 top-0 h-full w-3 -mr-1.5 cursor-col-resize select-none touch-none",
+                          "after:absolute after:right-1.5 after:top-0 after:h-full after:w-px",
+                          "after:bg-transparent hover:after:bg-primary/30",
+                          header.column.getIsResizing() && "after:bg-primary/50"
+                        ),
+                        role: "separator",
+                        "aria-orientation": "vertical"
+                      }
+                    )
+                  ]
+                },
+                header.id
+              );
+            })
           },
           headerGroup.id
         )) }),

package/dist/components/virtualized-data-table.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/virtualized-data-table.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { useVirtualizer } from \"@tanstack/react-virtual\"\nimport {\n  useReactTable,\n  getCoreRowModel,\n  flexRender,\n  type ColumnDef,\n  type SortingState,\n  type ColumnFiltersState,\n  type VisibilityState,\n  type OnChangeFn,\n} from \"@tanstack/react-table\"\nimport { ArrowDown, ArrowUp, ArrowUpDown, SearchX, Loader2 } from \"lucide-react\"\n\nimport { cn } from \"../lib/utils\"\n\nexport interface VirtualizedDataTableProps<TData> {\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  columns: ColumnDef<TData, any>[]\n  data: TData[]\n\n  // Virtualization\n  height?: number | string\n  estimateRowHeight?: number\n  overscan?: number\n\n  // Row interaction\n  onRowClick?: (row: TData) => void\n  getRowId?: (original: TData, index: number) => string\n\n  // Infinite scroll\n  onReachBottom?: () => void\n  reachBottomThreshold?: number\n  hasMore?: boolean\n  isFetchingMore?: boolean\n\n  // Server-driven state (controlled) — omit for internal state\n  sorting?: SortingState\n  onSortingChange?: OnChangeFn<SortingState>\n  columnFilters?: ColumnFiltersState\n  onColumnFiltersChange?: OnChangeFn<ColumnFiltersState>\n  columnVisibility?: VisibilityState\n  onColumnVisibilityChange?: OnChangeFn<VisibilityState>\n\n  // Loading / Empty state\n  isLoading?: boolean\n  emptyIcon?: React.ReactNode\n  emptyMessage?: string\n  emptyDescription?: string\n\n  // Styling\n  className?: string\n}\n\nexport function VirtualizedDataTable<TData>({\n  columns,\n  data,\n  height = 600,\n  estimateRowHeight = 48,\n  overscan = 8,\n  onRowClick,\n  getRowId,\n  onReachBottom,\n  reachBottomThreshold = 5,\n  hasMore = true,\n  isFetchingMore,\n  sorting,\n  onSortingChange,\n  columnFilters,\n  onColumnFiltersChange,\n  columnVisibility,\n  onColumnVisibilityChange,\n  isLoading,\n  emptyIcon,\n  emptyMessage = \"No rows found\",\n  emptyDescription = \"Try adjusting your filters\",\n  className,\n}: VirtualizedDataTableProps<TData>) {\n  // Controlled/uncontrolled state for sorting\n  const [internalSorting, setInternalSorting] = React.useState<SortingState>([])\n  const resolvedSorting = sorting ?? internalSorting\n  const resolvedOnSortingChange = onSortingChange ?? setInternalSorting\n\n  // Controlled/uncontrolled state for column filters\n  const [internalColumnFilters, setInternalColumnFilters] =\n    React.useState<ColumnFiltersState>([])\n  const resolvedColumnFilters = columnFilters ?? internalColumnFilters\n  const resolvedOnColumnFiltersChange =\n    onColumnFiltersChange ?? setInternalColumnFilters\n\n  // Controlled/uncontrolled state for column visibility\n  const [internalColumnVisibility, setInternalColumnVisibility] =\n    React.useState<VisibilityState>({})\n  const resolvedColumnVisibility = columnVisibility ?? internalColumnVisibility\n  const resolvedOnColumnVisibilityChange =\n    onColumnVisibilityChange ?? setInternalColumnVisibility\n\n  // TanStack Table setup\n  const table = useReactTable({\n    data,\n    columns,\n    ...(getRowId ? { getRowId } : {}),\n    state: {\n      sorting: resolvedSorting,\n      columnFilters: resolvedColumnFilters,\n      columnVisibility: resolvedColumnVisibility,\n    },\n    onSortingChange: resolvedOnSortingChange,\n    onColumnFiltersChange: resolvedOnColumnFiltersChange,\n    onColumnVisibilityChange: resolvedOnColumnVisibilityChange,\n    manualSorting: true,\n    manualFiltering: true,\n    manualPagination: true,\n    getCoreRowModel: getCoreRowModel(),\n  })\n\n  // Virtualizer setup\n  const scrollContainerRef = React.useRef<HTMLDivElement>(null)\n  const rows = table.getRowModel().rows\n\n  const virtualizer = useVirtualizer({\n    count: rows.length,\n    getScrollElement: () => scrollContainerRef.current,\n    estimateSize: () => estimateRowHeight,\n    overscan,\n    measureElement: (element) => element.getBoundingClientRect().height,\n  })\n\n  // Infinite scroll detection\n  const lastTriggeredDataLengthRef = React.useRef<number>(0)\n\n  // Derive a stable primitive for the last visible virtual-item index so the\n  // effect below doesn't re-run on every render (getVirtualItems() returns a\n  // new array reference each call).\n  const virtualItems = virtualizer.getVirtualItems()\n  const lastVirtualItemIndex =\n    virtualItems.length > 0\n      ? virtualItems[virtualItems.length - 1].index\n      : -1\n\n  React.useEffect(() => {\n    if (!onReachBottom || isFetchingMore || hasMore === false) return\n    if (lastVirtualItemIndex < 0) return\n    if (lastVirtualItemIndex < rows.length - reachBottomThreshold) return\n\n    // Prevent re-firing until data.length changes (i.e. new page loaded).\n    if (lastTriggeredDataLengthRef.current === data.length) return\n    lastTriggeredDataLengthRef.current = data.length\n\n    onReachBottom()\n  }, [\n    lastVirtualItemIndex,\n    rows.length,\n    data.length,\n    onReachBottom,\n    isFetchingMore,\n    hasMore,\n    reachBottomThreshold,\n  ])\n\n  return (\n    <div className={cn(\n      \"w-full\",\n      typeof height === \"string\" && height.trim().endsWith(\"%\") && \"h-full\",\n      className,\n    )}>\n      <div\n        ref={scrollContainerRef}\n        className=\"relative overflow-auto\"\n        style={{\n          height: typeof height === \"number\" ? `${height}px` : height,\n          contain: \"strict\",\n        }}\n        role=\"table\"\n        aria-rowcount={data.length}\n        aria-colcount={table.getVisibleLeafColumns().length}\n      >\n        {/* Sticky header */}\n        <div className=\"sticky top-0 z-10 bg-background\" role=\"rowgroup\">\n          {table.getHeaderGroups().map((headerGroup) => (\n            <div\n              key={headerGroup.id}\n              className=\"flex w-max min-w-full border-b border-border/50\"\n              role=\"row\"\n            >\n              {headerGroup.headers.map((header, colIdx) => (\n                <div\n                  key={header.id}\n                  className=\"h-9 px-3 flex items-center text-xs font-medium text-muted-foreground whitespace-nowrap\"\n                  style={{\n                    width: header.getSize(),\n                    minWidth: header.getSize(),\n                  }}\n                  role=\"columnheader\"\n                  aria-colindex={colIdx + 1}\n                  aria-sort={\n                    header.column.getIsSorted() === \"asc\"\n                      ? \"ascending\"\n                      : header.column.getIsSorted() === \"desc\"\n                        ? \"descending\"\n                        : header.column.getCanSort()\n                          ? \"none\"\n                          : undefined\n                  }\n                >\n                  {header.isPlaceholder ? null : header.column.getCanSort() ? (\n                    <button\n                      type=\"button\"\n                      className=\"inline-flex items-center gap-1 hover:text-foreground transition-colors\"\n                      onClick={header.column.getToggleSortingHandler()}\n                    >\n                      {flexRender(\n                        header.column.columnDef.header,\n                        header.getContext(),\n                      )}\n                      {header.column.getIsSorted() === \"asc\" ? (\n                        <ArrowUp className=\"w-3 h-3\" />\n                      ) : header.column.getIsSorted() === \"desc\" ? (\n                        <ArrowDown className=\"w-3 h-3\" />\n                      ) : (\n                        <ArrowUpDown className=\"w-3 h-3 opacity-40\" />\n                      )}\n                    </button>\n                  ) : (\n                    flexRender(\n                      header.column.columnDef.header,\n                      header.getContext(),\n                    )\n                  )}\n                </div>\n              ))}\n            </div>\n          ))}\n        </div>\n\n        {/* Virtualized body or empty state */}\n        {rows.length > 0 ? (\n          <div\n            role=\"rowgroup\"\n            style={{\n              height: virtualizer.getTotalSize(),\n              width: \"100%\",\n              position: \"relative\",\n            }}\n          >\n            {virtualizer.getVirtualItems().map((virtualRow) => {\n              const row = rows[virtualRow.index]\n              return (\n                <div\n                  key={row.id}\n                  data-index={virtualRow.index}\n                  ref={virtualizer.measureElement}\n                  className={cn(\n                    \"absolute left-0 w-max min-w-full flex group transition-colors\",\n                    onRowClick && \"cursor-pointer\",\n                  )}\n                  style={{\n                    transform: `translateY(${virtualRow.start}px)`,\n                  }}\n                  role=\"row\"\n                  aria-rowindex={virtualRow.index + 2}\n                  onClick={() => onRowClick?.(row.original)}\n                  tabIndex={onRowClick ? 0 : undefined}\n                  onKeyDown={\n                    onRowClick\n                      ? (e: React.KeyboardEvent) => {\n                          if (e.key === \"Enter\" || e.key === \" \") {\n                            e.preventDefault()\n                            onRowClick(row.original)\n                          }\n                        }\n                      : undefined\n                  }\n                >\n                  {row.getVisibleCells().map((cell, colIdx) => (\n                    <div\n                      key={cell.id}\n                      className=\"px-3 py-3 flex items-center whitespace-nowrap group-hover:bg-muted/50\"\n                      style={{\n                        width: cell.column.getSize(),\n                        minWidth: cell.column.getSize(),\n                      }}\n                      role=\"cell\"\n                      aria-colindex={colIdx + 1}\n                    >\n                      {flexRender(\n                        cell.column.columnDef.cell,\n                        cell.getContext(),\n                      )}\n                    </div>\n                  ))}\n                </div>\n              )\n            })}\n          </div>\n        ) : isLoading ? (\n          <div className=\"flex flex-col items-center justify-center gap-2 text-muted-foreground py-20\">\n            <Loader2 className=\"h-7 w-7 animate-spin opacity-60\" />\n            <p className=\"text-sm font-medium\">Loading...</p>\n          </div>\n        ) : (\n          <div className=\"flex flex-col items-center justify-center gap-1 text-muted-foreground py-20\">\n            {emptyIcon ?? <SearchX className=\"h-7 w-7 opacity-40\" />}\n            <p className=\"text-sm font-medium\">{emptyMessage}</p>\n            <p className=\"text-xs\">{emptyDescription}</p>\n          </div>\n        )}\n\n        {/* Loading indicator */}\n        {isFetchingMore && (\n          <div className=\"flex items-center justify-center py-4\">\n            <Loader2 className=\"h-5 w-5 animate-spin text-muted-foreground\" />\n          </div>\n        )}\n      </div>\n    </div>\n  )\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/virtualized-data-table.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { useVirtualizer } from \"@tanstack/react-virtual\"\nimport {\n  useReactTable,\n  getCoreRowModel,\n  flexRender,\n  type ColumnDef,\n  type SortingState,\n  type ColumnFiltersState,\n  type VisibilityState,\n  type ColumnSizingState,\n  type OnChangeFn,\n} from \"@tanstack/react-table\"\nimport type { RowData } from \"@tanstack/react-table\"\nimport { ArrowDown, ArrowUp, ArrowUpDown, ChevronDown, EyeOff, Check, SearchX, Loader2 } from \"lucide-react\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuTrigger,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n} from \"./dropdown-menu\"\n\nimport { cn } from \"../lib/utils\"\n\ndeclare module \"@tanstack/react-table\" {\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  interface ColumnMeta<TData extends RowData, TValue> {\n    /** Server-side sort key for this column. Enables sort in the header menu when onColumnSort is also provided. */\n    sortKey?: string\n  }\n}\n\nexport interface VirtualizedDataTableProps<TData> {\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  columns: ColumnDef<TData, any>[]\n  data: TData[]\n\n  // Virtualization\n  height?: number | string\n  estimateRowHeight?: number\n  overscan?: number\n\n  // Row interaction\n  onRowClick?: (row: TData) => void\n  getRowId?: (original: TData, index: number) => string\n\n  // Infinite scroll\n  onReachBottom?: () => void\n  reachBottomThreshold?: number\n  hasMore?: boolean\n  isFetchingMore?: boolean\n\n  // Column resizing\n  enableColumnResizing?: boolean\n  columnResizeMode?: \"onChange\" | \"onEnd\"\n  columnSizing?: ColumnSizingState\n  onColumnSizingChange?: OnChangeFn<ColumnSizingState>\n\n  // Server-driven state (controlled) — omit for internal state\n  sorting?: SortingState\n  onSortingChange?: OnChangeFn<SortingState>\n  columnFilters?: ColumnFiltersState\n  onColumnFiltersChange?: OnChangeFn<ColumnFiltersState>\n  columnVisibility?: VisibilityState\n  onColumnVisibilityChange?: OnChangeFn<VisibilityState>\n\n  // Loading / Empty state\n  isLoading?: boolean\n  emptyIcon?: React.ReactNode\n  emptyMessage?: string\n  emptyDescription?: string\n\n  // Column header menu\n  /** Called when user requests sorting from column header. columnId is the column's meta.sortKey. */\n  onColumnSort?: (columnId: string, direction: \"asc\" | \"desc\") => void\n  /** Called when user hides a column from the header menu. */\n  onColumnHide?: (columnId: string) => void\n  /** The currently active sort column ID — matches a column's meta.sortKey. Used for visual indicators and aria-sort. */\n  activeSortColumn?: string | null\n  /** The current sort direction. Used for visual indicators and aria-sort. */\n  activeSortDirection?: \"asc\" | \"desc\"\n\n  // Styling\n  className?: string\n}\n\nexport function VirtualizedDataTable<TData>({\n  columns,\n  data,\n  height = 600,\n  estimateRowHeight = 48,\n  overscan = 8,\n  onRowClick,\n  getRowId,\n  onReachBottom,\n  reachBottomThreshold = 5,\n  hasMore = true,\n  isFetchingMore,\n  enableColumnResizing = false,\n  columnResizeMode = \"onEnd\",\n  columnSizing,\n  onColumnSizingChange,\n  sorting,\n  onSortingChange,\n  columnFilters,\n  onColumnFiltersChange,\n  columnVisibility,\n  onColumnVisibilityChange,\n  onColumnSort,\n  onColumnHide,\n  activeSortColumn,\n  activeSortDirection,\n  isLoading,\n  emptyIcon,\n  emptyMessage = \"No rows found\",\n  emptyDescription = \"Try adjusting your filters\",\n  className,\n}: VirtualizedDataTableProps<TData>) {\n  // Controlled/uncontrolled state for sorting\n  const [internalSorting, setInternalSorting] = React.useState<SortingState>([])\n  const resolvedSorting = sorting ?? internalSorting\n  const resolvedOnSortingChange = onSortingChange ?? setInternalSorting\n\n  // Controlled/uncontrolled state for column filters\n  const [internalColumnFilters, setInternalColumnFilters] =\n    React.useState<ColumnFiltersState>([])\n  const resolvedColumnFilters = columnFilters ?? internalColumnFilters\n  const resolvedOnColumnFiltersChange =\n    onColumnFiltersChange ?? setInternalColumnFilters\n\n  // Controlled/uncontrolled state for column visibility\n  const [internalColumnVisibility, setInternalColumnVisibility] =\n    React.useState<VisibilityState>({})\n  const resolvedColumnVisibility = columnVisibility ?? internalColumnVisibility\n  const resolvedOnColumnVisibilityChange =\n    onColumnVisibilityChange ?? setInternalColumnVisibility\n\n  // Controlled/uncontrolled state for column sizing\n  const [internalColumnSizing, setInternalColumnSizing] =\n    React.useState<ColumnSizingState>({})\n  const resolvedColumnSizing = columnSizing ?? internalColumnSizing\n  const resolvedOnColumnSizingChange =\n    onColumnSizingChange ?? setInternalColumnSizing\n\n  // TanStack Table setup\n  const table = useReactTable({\n    data,\n    columns,\n    ...(getRowId ? { getRowId } : {}),\n    state: {\n      sorting: resolvedSorting,\n      columnFilters: resolvedColumnFilters,\n      columnVisibility: resolvedColumnVisibility,\n      columnSizing: resolvedColumnSizing,\n    },\n    onSortingChange: resolvedOnSortingChange,\n    onColumnFiltersChange: resolvedOnColumnFiltersChange,\n    onColumnVisibilityChange: resolvedOnColumnVisibilityChange,\n    onColumnSizingChange: resolvedOnColumnSizingChange,\n    enableColumnResizing,\n    columnResizeMode,\n    manualSorting: true,\n    manualFiltering: true,\n    manualPagination: true,\n    getCoreRowModel: getCoreRowModel(),\n  })\n\n  // Virtualizer setup\n  const scrollContainerRef = React.useRef<HTMLDivElement>(null)\n  const rows = table.getRowModel().rows\n\n  const virtualizer = useVirtualizer({\n    count: rows.length,\n    getScrollElement: () => scrollContainerRef.current,\n    estimateSize: () => estimateRowHeight,\n    overscan,\n    measureElement: (element) => element.getBoundingClientRect().height,\n  })\n\n  // Infinite scroll detection\n  const lastTriggeredDataLengthRef = React.useRef<number>(0)\n\n  // Derive a stable primitive for the last visible virtual-item index so the\n  // effect below doesn't re-run on every render (getVirtualItems() returns a\n  // new array reference each call).\n  const virtualItems = virtualizer.getVirtualItems()\n  const lastVirtualItemIndex =\n    virtualItems.length > 0\n      ? virtualItems[virtualItems.length - 1].index\n      : -1\n\n  React.useEffect(() => {\n    if (!onReachBottom || isFetchingMore || hasMore === false) return\n    if (lastVirtualItemIndex < 0) return\n    if (lastVirtualItemIndex < rows.length - reachBottomThreshold) return\n\n    // Prevent re-firing until data.length changes (i.e. new page loaded).\n    if (lastTriggeredDataLengthRef.current === data.length) return\n    lastTriggeredDataLengthRef.current = data.length\n\n    onReachBottom()\n  }, [\n    lastVirtualItemIndex,\n    rows.length,\n    data.length,\n    onReachBottom,\n    isFetchingMore,\n    hasMore,\n    reachBottomThreshold,\n  ])\n\n  return (\n    <div className={cn(\n      \"w-full\",\n      typeof height === \"string\" && height.trim().endsWith(\"%\") && \"h-full\",\n      className,\n    )}>\n      <div\n        ref={scrollContainerRef}\n        className=\"relative overflow-auto\"\n        style={{\n          height: typeof height === \"number\" ? `${height}px` : height,\n          contain: \"strict\",\n        }}\n        role=\"table\"\n        aria-rowcount={data.length}\n        aria-colcount={table.getVisibleLeafColumns().length}\n      >\n        {/* Sticky header */}\n        <div className=\"sticky top-0 z-10 bg-background\" role=\"rowgroup\">\n          {table.getHeaderGroups().map((headerGroup) => (\n            <div\n              key={headerGroup.id}\n              className=\"flex w-max min-w-full border-b border-border/50\"\n              role=\"row\"\n            >\n              {headerGroup.headers.map((header, colIdx) => {\n                const sortKey = header.column.columnDef.meta?.sortKey\n                const canServerSort = Boolean(sortKey && onColumnSort)\n\n                const resolvedAriaSort = (() => {\n                  if (activeSortColumn !== undefined) {\n                    // Server-driven\n                    if (!sortKey) return undefined\n                    if (activeSortColumn === sortKey) return activeSortDirection === \"asc\" ? \"ascending\" as const : \"descending\" as const\n                    return \"none\" as const\n                  }\n                  // Fallback to TanStack state\n                  const sorted = header.column.getIsSorted()\n                  if (sorted === \"asc\") return \"ascending\" as const\n                  if (sorted === \"desc\") return \"descending\" as const\n                  if (header.column.getCanSort()) return \"none\" as const\n                  return undefined\n                })()\n\n                const sortIcon = (() => {\n                  if (!canServerSort) return null\n                  if (activeSortColumn === sortKey && activeSortDirection === \"asc\") return <ArrowUp className=\"w-3 h-3\" />\n                  if (activeSortColumn === sortKey && activeSortDirection === \"desc\") return <ArrowDown className=\"w-3 h-3\" />\n                  return <ArrowUpDown className=\"w-3 h-3 opacity-40\" />\n                })()\n\n                const handleHeaderClick = canServerSort ? () => {\n                  const newDir = activeSortColumn === sortKey\n                    ? (activeSortDirection === \"asc\" ? \"desc\" : \"asc\")\n                    : \"asc\"\n                  onColumnSort!(sortKey!, newDir)\n                } : undefined\n\n                return (\n                  <div\n                    key={header.id}\n                    className={cn(\n                      \"group/header h-9 px-3 flex items-center text-xs font-medium text-muted-foreground whitespace-nowrap relative\",\n                      header.column.getCanResize() && \"pr-4\",\n                    )}\n                    style={{\n                      width: header.getSize(),\n                      minWidth: header.getSize(),\n                    }}\n                    role=\"columnheader\"\n                    aria-colindex={colIdx + 1}\n                    aria-sort={resolvedAriaSort}\n                  >\n                    {header.isPlaceholder ? null : (\n                      <>\n                        {canServerSort ? (\n                          <button\n                            type=\"button\"\n                            className=\"inline-flex items-center gap-1 hover:text-foreground transition-colors\"\n                            onClick={handleHeaderClick}\n                          >\n                            {flexRender(header.column.columnDef.header, header.getContext())}\n                            {sortIcon}\n                          </button>\n                        ) : header.column.getCanSort() ? (\n                          <button\n                            type=\"button\"\n                            className=\"inline-flex items-center gap-1 hover:text-foreground transition-colors\"\n                            onClick={header.column.getToggleSortingHandler()}\n                          >\n                            {flexRender(\n                              header.column.columnDef.header,\n                              header.getContext(),\n                            )}\n                            {header.column.getIsSorted() === \"asc\" ? (\n                              <ArrowUp className=\"w-3 h-3\" />\n                            ) : header.column.getIsSorted() === \"desc\" ? (\n                              <ArrowDown className=\"w-3 h-3\" />\n                            ) : (\n                              <ArrowUpDown className=\"w-3 h-3 opacity-40\" />\n                            )}\n                          </button>\n                        ) : (\n                          flexRender(\n                            header.column.columnDef.header,\n                            header.getContext(),\n                          )\n                        )}\n                        {(canServerSort || header.column.getCanSort() || header.column.getCanHide()) && (\n                          <DropdownMenu>\n                            <DropdownMenuTrigger asChild>\n                              <button\n                                type=\"button\"\n                                className=\"ml-1 inline-flex items-center hover:text-foreground transition-all opacity-0 group-hover/header:opacity-100\"\n                                aria-label=\"Column actions\"\n                              >\n                                <ChevronDown className=\"w-3 h-3\" />\n                              </button>\n                            </DropdownMenuTrigger>\n                            <DropdownMenuContent align=\"start\" className=\"w-48\">\n                              <DropdownMenuItem\n                                disabled={!canServerSort}\n                                onClick={() => canServerSort && onColumnSort!(sortKey!, \"asc\")}\n                              >\n                                <ArrowUp className=\"w-3.5 h-3.5 mr-2\" />\n                                Sort ascending\n                                {activeSortColumn === sortKey && activeSortDirection === \"asc\" && <Check className=\"w-3.5 h-3.5 ml-auto\" />}\n                              </DropdownMenuItem>\n                              <DropdownMenuItem\n                                disabled={!canServerSort}\n                                onClick={() => canServerSort && onColumnSort!(sortKey!, \"desc\")}\n                              >\n                                <ArrowDown className=\"w-3.5 h-3.5 mr-2\" />\n                                Sort descending\n                                {activeSortColumn === sortKey && activeSortDirection === \"desc\" && <Check className=\"w-3.5 h-3.5 ml-auto\" />}\n                              </DropdownMenuItem>\n                              {header.column.getCanHide() && (\n                                <>\n                                  <DropdownMenuSeparator />\n                                  <DropdownMenuItem\n                                    onClick={() => onColumnHide ? onColumnHide(header.column.id) : header.column.toggleVisibility(false)}\n                                  >\n                                    <EyeOff className=\"w-3.5 h-3.5 mr-2\" />\n                                    Hide column\n                                  </DropdownMenuItem>\n                                </>\n                              )}\n                            </DropdownMenuContent>\n                          </DropdownMenu>\n                        )}\n                      </>\n                    )}\n                    {header.column.getCanResize() && (\n                      <div\n                        onMouseDown={header.getResizeHandler()}\n                        onTouchStart={header.getResizeHandler()}\n                        className={cn(\n                          \"absolute right-0 top-0 h-full w-3 -mr-1.5 cursor-col-resize select-none touch-none\",\n                          \"after:absolute after:right-1.5 after:top-0 after:h-full after:w-px\",\n                          \"after:bg-transparent hover:after:bg-primary/30\",\n                          header.column.getIsResizing() && \"after:bg-primary/50\",\n                        )}\n                        role=\"separator\"\n                        aria-orientation=\"vertical\"\n                      />\n                    )}\n                  </div>\n                )\n              })}\n            </div>\n          ))}\n        </div>\n\n        {/* Virtualized body or empty state */}\n        {rows.length > 0 ? (\n          <div\n            role=\"rowgroup\"\n            style={{\n              height: virtualizer.getTotalSize(),\n              width: \"100%\",\n              position: \"relative\",\n            }}\n          >\n            {virtualizer.getVirtualItems().map((virtualRow) => {\n              const row = rows[virtualRow.index]\n              return (\n                <div\n                  key={row.id}\n                  data-index={virtualRow.index}\n                  ref={virtualizer.measureElement}\n                  className={cn(\n                    \"absolute left-0 w-max min-w-full flex group transition-colors\",\n                    onRowClick && \"cursor-pointer\",\n                  )}\n                  style={{\n                    transform: `translateY(${virtualRow.start}px)`,\n                  }}\n                  role=\"row\"\n                  aria-rowindex={virtualRow.index + 2}\n                  onClick={() => onRowClick?.(row.original)}\n                  tabIndex={onRowClick ? 0 : undefined}\n                  onKeyDown={\n                    onRowClick\n                      ? (e: React.KeyboardEvent) => {\n                          if (e.key === \"Enter\" || e.key === \" \") {\n                            e.preventDefault()\n                            onRowClick(row.original)\n                          }\n                        }\n                      : undefined\n                  }\n                >\n                  {row.getVisibleCells().map((cell, colIdx) => (\n                    <div\n                      key={cell.id}\n                      className=\"px-3 py-3 flex items-center whitespace-nowrap group-hover:bg-muted/50\"\n                      style={{\n                        width: cell.column.getSize(),\n                        minWidth: cell.column.getSize(),\n                      }}\n                      role=\"cell\"\n                      aria-colindex={colIdx + 1}\n                    >\n                      {flexRender(\n                        cell.column.columnDef.cell,\n                        cell.getContext(),\n                      )}\n                    </div>\n                  ))}\n                </div>\n              )\n            })}\n          </div>\n        ) : isLoading ? (\n          <div className=\"flex flex-col items-center justify-center gap-2 text-muted-foreground py-20\">\n            <Loader2 className=\"h-7 w-7 animate-spin opacity-60\" />\n            <p className=\"text-sm font-medium\">Loading...</p>\n          </div>\n        ) : (\n          <div className=\"flex flex-col items-center justify-center gap-1 text-muted-foreground py-20\">\n            {emptyIcon ?? <SearchX className=\"h-7 w-7 opacity-40\" />}\n            <p className=\"text-sm font-medium\">{emptyMessage}</p>\n            <p className=\"text-xs\">{emptyDescription}</p>\n          </div>\n        )}\n\n        {/* Loading indicator */}\n        {isFetchingMore && (\n          <div className=\"flex items-center justify-center py-4\">\n            <Loader2 className=\"h-5 w-5 animate-spin text-muted-foreground\" />\n          </div>\n        )}\n      </div>\n    </div>\n  )\n}\n"],"mappings":"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","names":[]}

package/dist/index.d.ts

@@ -74,6 +74,7 @@ export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from './comp
 export { VariableAutocomplete, VariableAutocompleteProps, VariableDef, VariableGroup } from './components/variable-autocomplete.js';
 export { ViewMode, ViewModeToggle, ViewModeToggleProps } from './components/view-mode-toggle.js';
 export { VirtualizedDataTable, VirtualizedDataTableProps } from './components/virtualized-data-table.js';
+export { ColumnSizingState } from '@tanstack/react-table';
 export { ChartConfig, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent } from './charts/chart.js';
 export { CHART_CURSOR_STYLE, CHART_TOOLTIP_STYLE, ChartTooltipEntry, SimpleChartTooltip, SimpleChartTooltipProps } from './charts/chart-tooltip.js';
 export { BarChartComponent, BarChartComponentProps, BarSeries } from './charts/bar-chart-component.js';
@@ -95,6 +96,5 @@ import 'react';
 import 'radix-ui';
 import 'class-variance-authority/types';
 import 'class-variance-authority';
-import '@tanstack/react-table';
 import 'recharts';
 import 'lucide-react';

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts"],"sourcesContent":["/**\n * @handled-ai/design-system\n * UI components and utilities (shadcn-style, New York)\n */\n\n// Utilities\nexport { cn } from \"./lib/utils\"\nexport { BRAND_ICONS, BRAND_GRAPHICS } from \"./lib/icons\"\n\n// Hooks\nexport { useIsMobile } from \"./hooks/use-mobile\"\n\n// Components (light — no recharts/nivo/three transitive deps)\nexport * from \"./components/activity-detail\"\nexport * from \"./components/activity-log\"\nexport * from \"./components/agent-popover\"\nexport * from \"./components/agent-widget\"\nexport * from \"./components/avatar\"\nexport * from \"./components/badge\"\nexport * from \"./components/button\"\nexport * from \"./components/card\"\nexport * from \"./components/compliance-badge\"\nexport * from \"./components/contact-chip\"\nexport * from \"./components/contact-list\"\nexport * from \"./components/dashboard-cards\"\nexport * from \"./components/data-table\"\nexport * from \"./components/data-table-display\"\nexport * from \"./components/data-table-filter\"\nexport * from \"./components/data-table-quick-views\"\nexport * from \"./components/data-table-toolbar\"\nexport * from \"./components/detail-view\"\nexport * from \"./components/dialog\"\nexport * from \"./components/dropdown-menu\"\nexport * from \"./components/empty-state\"\nexport * from \"./components/entity-panel\"\nexport * from \"./components/filter-chip\"\nexport * from \"./components/inbox-row\"\nexport * from \"./components/inbox-toolbar\"\nexport * from \"./components/inline-banner\"\nexport * from \"./components/input\"\nexport * from \"./components/insights-filter-bar\"\nexport * from \"./components/item-list\"\nexport * from \"./components/item-list-display\"\nexport * from \"./components/item-list-filter\"\nexport * from \"./components/item-list-toolbar\"\nexport * from \"./components/kbd-hint\"\nexport * from \"./components/label\"\nexport * from \"./components/message\"\nexport * from \"./components/metric-card\"\nexport * from \"./components/performance-metrics-table\"\nexport * from \"./components/preview-list\"\nexport * from \"./components/progress\"\nexport * from \"./components/quick-action-chat-area\"\nexport {\n  QuickActionModal,\n  type QuickActionPriority,\n  type QuickActionTaskDraft,\n  type QuickActionTemplate,\n} from \"./components/quick-action-modal\"\nexport * from \"./components/quick-action-sidebar-nav\"\nexport * from \"./components/recommended-actions-section\"\nexport * from \"./components/report-card\"\nexport * from \"./components/rich-text-toolbar\"\nexport * from \"./components/score-analysis-modal\"\nexport * from \"./components/score-breakdown\"\nexport * from \"./components/score-feedback\"\nexport * from \"./components/score-ring\"\nexport * from \"./components/scroll-area\"\nexport * from \"./components/select\"\nexport * from \"./components/separator\"\nexport * from \"./components/sheet\"\nexport * from \"./components/sidebar\"\nexport * from \"./components/signal-feedback-inline\"\nexport * from \"./components/simple-data-table\"\nexport * from \"./components/skeleton\"\nexport * from \"./components/status-badge\"\nexport * from \"./components/step-timeline\"\nexport * from \"./components/sticky-action-bar\"\nexport * from \"./components/styled-bar-list\"\nexport { DraftFeedbackInline } from \"./components/draft-feedback-inline\"\nexport type { DraftFeedbackInlineProps } from \"./components/draft-feedback-inline\"\nexport { AccountContactsPopover, BrandIcon } from \"./components/account-contacts-popover\"\nexport type { AccountContactsPopoverProps } from \"./components/account-contacts-popover\"\nexport * from \"./components/suggested-actions\"\nexport * from \"./components/switch\"\nexport * from \"./components/table\"\nexport * from \"./components/tabs\"\nexport * from \"./components/textarea\"\nexport * from \"./components/timeline-activity\"\nexport * from \"./components/tooltip\"\nexport * from \"./components/variable-autocomplete\"\nexport * from \"./components/view-mode-toggle\"\nexport * from \"./components/virtualized-data-table\"\n\n// Charts (re-exported for backward compatibility with root imports)\nexport * from \"./charts/index\"\n\n// Prototype template system (re-exported for backward compatibility)\nexport * from \"./prototype/prototype-config\"\nexport * from \"./prototype/prototype-shell\"\nexport * from \"./prototype/prototype-inbox-view\"\nexport * from \"./prototype/prototype-insights-view\"\nexport * from \"./prototype/prototype-accounts-view\"\nexport * from \"./prototype/prototype-admin-view\"\nexport * from \"./prototype/prototype-work-queue-view\"\n"],"mappings":"AAMA,SAAS,UAAU;AACnB,SAAS,aAAa,sBAAsB;AAG5C,SAAS,mBAAmB;AAG5B,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd;AAAA,EACE;AAAA,OAIK;AACP,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,SAAS,2BAA2B;AAEpC,SAAS,wBAAwB,iBAAiB;AAElD,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AAGd,cAAc;AAGd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;","names":[]}
+{"version":3,"sources":["../src/index.ts"],"sourcesContent":["/**\n * @handled-ai/design-system\n * UI components and utilities (shadcn-style, New York)\n */\n\n// Utilities\nexport { cn } from \"./lib/utils\"\nexport { BRAND_ICONS, BRAND_GRAPHICS } from \"./lib/icons\"\n\n// Hooks\nexport { useIsMobile } from \"./hooks/use-mobile\"\n\n// Components (light — no recharts/nivo/three transitive deps)\nexport * from \"./components/activity-detail\"\nexport * from \"./components/activity-log\"\nexport * from \"./components/agent-popover\"\nexport * from \"./components/agent-widget\"\nexport * from \"./components/avatar\"\nexport * from \"./components/badge\"\nexport * from \"./components/button\"\nexport * from \"./components/card\"\nexport * from \"./components/compliance-badge\"\nexport * from \"./components/contact-chip\"\nexport * from \"./components/contact-list\"\nexport * from \"./components/dashboard-cards\"\nexport * from \"./components/data-table\"\nexport * from \"./components/data-table-display\"\nexport * from \"./components/data-table-filter\"\nexport * from \"./components/data-table-quick-views\"\nexport * from \"./components/data-table-toolbar\"\nexport * from \"./components/detail-view\"\nexport * from \"./components/dialog\"\nexport * from \"./components/dropdown-menu\"\nexport * from \"./components/empty-state\"\nexport * from \"./components/entity-panel\"\nexport * from \"./components/filter-chip\"\nexport * from \"./components/inbox-row\"\nexport * from \"./components/inbox-toolbar\"\nexport * from \"./components/inline-banner\"\nexport * from \"./components/input\"\nexport * from \"./components/insights-filter-bar\"\nexport * from \"./components/item-list\"\nexport * from \"./components/item-list-display\"\nexport * from \"./components/item-list-filter\"\nexport * from \"./components/item-list-toolbar\"\nexport * from \"./components/kbd-hint\"\nexport * from \"./components/label\"\nexport * from \"./components/message\"\nexport * from \"./components/metric-card\"\nexport * from \"./components/performance-metrics-table\"\nexport * from \"./components/preview-list\"\nexport * from \"./components/progress\"\nexport * from \"./components/quick-action-chat-area\"\nexport {\n  QuickActionModal,\n  type QuickActionPriority,\n  type QuickActionTaskDraft,\n  type QuickActionTemplate,\n} from \"./components/quick-action-modal\"\nexport * from \"./components/quick-action-sidebar-nav\"\nexport * from \"./components/recommended-actions-section\"\nexport * from \"./components/report-card\"\nexport * from \"./components/rich-text-toolbar\"\nexport * from \"./components/score-analysis-modal\"\nexport * from \"./components/score-breakdown\"\nexport * from \"./components/score-feedback\"\nexport * from \"./components/score-ring\"\nexport * from \"./components/scroll-area\"\nexport * from \"./components/select\"\nexport * from \"./components/separator\"\nexport * from \"./components/sheet\"\nexport * from \"./components/sidebar\"\nexport * from \"./components/signal-feedback-inline\"\nexport * from \"./components/simple-data-table\"\nexport * from \"./components/skeleton\"\nexport * from \"./components/status-badge\"\nexport * from \"./components/step-timeline\"\nexport * from \"./components/sticky-action-bar\"\nexport * from \"./components/styled-bar-list\"\nexport { DraftFeedbackInline } from \"./components/draft-feedback-inline\"\nexport type { DraftFeedbackInlineProps } from \"./components/draft-feedback-inline\"\nexport { AccountContactsPopover, BrandIcon } from \"./components/account-contacts-popover\"\nexport type { AccountContactsPopoverProps } from \"./components/account-contacts-popover\"\nexport * from \"./components/suggested-actions\"\nexport * from \"./components/switch\"\nexport * from \"./components/table\"\nexport * from \"./components/tabs\"\nexport * from \"./components/textarea\"\nexport * from \"./components/timeline-activity\"\nexport * from \"./components/tooltip\"\nexport * from \"./components/variable-autocomplete\"\nexport * from \"./components/view-mode-toggle\"\nexport * from \"./components/virtualized-data-table\"\nexport type { ColumnSizingState } from \"@tanstack/react-table\"\n\n// Charts (re-exported for backward compatibility with root imports)\nexport * from \"./charts/index\"\n\n// Prototype template system (re-exported for backward compatibility)\nexport * from \"./prototype/prototype-config\"\nexport * from \"./prototype/prototype-shell\"\nexport * from \"./prototype/prototype-inbox-view\"\nexport * from \"./prototype/prototype-insights-view\"\nexport * from \"./prototype/prototype-accounts-view\"\nexport * from \"./prototype/prototype-admin-view\"\nexport * from \"./prototype/prototype-work-queue-view\"\n"],"mappings":"AAMA,SAAS,UAAU;AACnB,SAAS,aAAa,sBAAsB;AAG5C,SAAS,mBAAmB;AAG5B,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd;AAAA,EACE;AAAA,OAIK;AACP,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,SAAS,2BAA2B;AAEpC,SAAS,wBAAwB,iBAAiB;AAElD,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AAId,cAAc;AAGd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;","names":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@handled-ai/design-system",
-  "version": "0.14.8",
+  "version": "0.15.1",
   "description": "Handled UI component library (shadcn-style, New York)",
   "type": "module",
   "packageManager": "pnpm@9.12.0",