@handled-ai/design-system 0.8.0 → 0.9.1

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

@@ -0,0 +1,231 @@
+"use client"
+
+"use client";
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { useVirtualizer } from "@tanstack/react-virtual";
+import {
+  useReactTable,
+  getCoreRowModel,
+  flexRender
+} from "@tanstack/react-table";
+import { ArrowDown, ArrowUp, ArrowUpDown, SearchX, Loader2 } from "lucide-react";
+import { cn } from "../lib/utils.js";
+function VirtualizedDataTable({
+  columns,
+  data,
+  height = 600,
+  estimateRowHeight = 48,
+  overscan = 8,
+  onRowClick,
+  getRowId,
+  onReachBottom,
+  reachBottomThreshold = 5,
+  hasMore = true,
+  isFetchingMore,
+  sorting,
+  onSortingChange,
+  columnFilters,
+  onColumnFiltersChange,
+  columnVisibility,
+  onColumnVisibilityChange,
+  emptyIcon,
+  emptyMessage = "No rows found",
+  emptyDescription = "Try adjusting your filters",
+  className
+}) {
+  const [internalSorting, setInternalSorting] = React.useState([]);
+  const resolvedSorting = sorting != null ? sorting : internalSorting;
+  const resolvedOnSortingChange = onSortingChange != null ? onSortingChange : setInternalSorting;
+  const [internalColumnFilters, setInternalColumnFilters] = React.useState([]);
+  const resolvedColumnFilters = columnFilters != null ? columnFilters : internalColumnFilters;
+  const resolvedOnColumnFiltersChange = onColumnFiltersChange != null ? onColumnFiltersChange : setInternalColumnFilters;
+  const [internalColumnVisibility, setInternalColumnVisibility] = React.useState({});
+  const resolvedColumnVisibility = columnVisibility != null ? columnVisibility : internalColumnVisibility;
+  const resolvedOnColumnVisibilityChange = onColumnVisibilityChange != null ? onColumnVisibilityChange : setInternalColumnVisibility;
+  const table = useReactTable(__spreadProps(__spreadValues({
+    data,
+    columns
+  }, getRowId ? { getRowId } : {}), {
+    state: {
+      sorting: resolvedSorting,
+      columnFilters: resolvedColumnFilters,
+      columnVisibility: resolvedColumnVisibility
+    },
+    onSortingChange: resolvedOnSortingChange,
+    onColumnFiltersChange: resolvedOnColumnFiltersChange,
+    onColumnVisibilityChange: resolvedOnColumnVisibilityChange,
+    manualSorting: true,
+    manualFiltering: true,
+    manualPagination: true,
+    getCoreRowModel: getCoreRowModel()
+  }));
+  const scrollContainerRef = React.useRef(null);
+  const rows = table.getRowModel().rows;
+  const virtualizer = useVirtualizer({
+    count: rows.length,
+    getScrollElement: () => scrollContainerRef.current,
+    estimateSize: () => estimateRowHeight,
+    overscan,
+    measureElement: (element) => element.getBoundingClientRect().height
+  });
+  const lastTriggeredDataLengthRef = React.useRef(0);
+  const virtualItems = virtualizer.getVirtualItems();
+  const lastVirtualItemIndex = virtualItems.length > 0 ? virtualItems[virtualItems.length - 1].index : -1;
+  React.useEffect(() => {
+    if (!onReachBottom || isFetchingMore || hasMore === false) return;
+    if (lastVirtualItemIndex < 0) return;
+    if (lastVirtualItemIndex < rows.length - reachBottomThreshold) return;
+    if (lastTriggeredDataLengthRef.current === data.length) return;
+    lastTriggeredDataLengthRef.current = data.length;
+    onReachBottom();
+  }, [
+    lastVirtualItemIndex,
+    rows.length,
+    data.length,
+    onReachBottom,
+    isFetchingMore,
+    hasMore,
+    reachBottomThreshold
+  ]);
+  return /* @__PURE__ */ jsx("div", { className: cn("w-full", className), children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: scrollContainerRef,
+      className: "relative overflow-auto",
+      style: {
+        height: typeof height === "number" ? `${height}px` : height,
+        contain: "strict"
+      },
+      role: "table",
+      "aria-rowcount": data.length,
+      "aria-colcount": table.getVisibleLeafColumns().length,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "sticky top-0 z-10 bg-background", role: "rowgroup", children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx(
+          "div",
+          {
+            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(
+                        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
+            ))
+          },
+          headerGroup.id
+        )) }),
+        rows.length > 0 ? /* @__PURE__ */ jsx(
+          "div",
+          {
+            role: "rowgroup",
+            style: {
+              height: virtualizer.getTotalSize(),
+              width: "100%",
+              position: "relative"
+            },
+            children: virtualizer.getVirtualItems().map((virtualRow) => {
+              const row = rows[virtualRow.index];
+              return /* @__PURE__ */ jsx(
+                "div",
+                {
+                  "data-index": virtualRow.index,
+                  ref: virtualizer.measureElement,
+                  className: cn(
+                    "absolute left-0 w-max min-w-full flex group transition-colors",
+                    onRowClick && "cursor-pointer"
+                  ),
+                  style: {
+                    transform: `translateY(${virtualRow.start}px)`
+                  },
+                  role: "row",
+                  "aria-rowindex": virtualRow.index + 2,
+                  onClick: () => onRowClick == null ? void 0 : onRowClick(row.original),
+                  tabIndex: onRowClick ? 0 : void 0,
+                  onKeyDown: onRowClick ? (e) => {
+                    if (e.key === "Enter" || e.key === " ") {
+                      e.preventDefault();
+                      onRowClick(row.original);
+                    }
+                  } : void 0,
+                  children: row.getVisibleCells().map((cell, colIdx) => /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      className: "px-3 py-3 flex items-center whitespace-nowrap group-hover:bg-muted/50",
+                      style: {
+                        width: cell.column.getSize(),
+                        minWidth: cell.column.getSize()
+                      },
+                      role: "cell",
+                      "aria-colindex": colIdx + 1,
+                      children: flexRender(
+                        cell.column.columnDef.cell,
+                        cell.getContext()
+                      )
+                    },
+                    cell.id
+                  ))
+                },
+                row.id
+              );
+            })
+          }
+        ) : /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center gap-1 text-muted-foreground py-20", children: [
+          emptyIcon != null ? emptyIcon : /* @__PURE__ */ jsx(SearchX, { className: "h-7 w-7 opacity-40" }),
+          /* @__PURE__ */ jsx("p", { className: "text-sm font-medium", children: emptyMessage }),
+          /* @__PURE__ */ jsx("p", { className: "text-xs", children: emptyDescription })
+        ] }),
+        isFetchingMore && /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center py-4", children: /* @__PURE__ */ jsx(Loader2, { className: "h-5 w-5 animate-spin text-muted-foreground" }) })
+      ]
+    }
+  ) });
+}
+export {
+  VirtualizedDataTable
+};
+//# sourceMappingURL=virtualized-data-table.js.map

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

@@ -0,0 +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  // Empty state\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  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(\"w-full\", className)}>\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        ) : (\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/hooks/use-mobile.d.ts

@@ -0,0 +1,3 @@
+declare function useIsMobile(): boolean;
+
+export { useIsMobile };

package/dist/hooks/use-mobile.js

@@ -0,0 +1,21 @@
+import * as React from "react";
+const MOBILE_BREAKPOINT = 768;
+function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState(
+    void 0
+  );
+  React.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    };
+    mql.addEventListener("change", onChange);
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    return () => mql.removeEventListener("change", onChange);
+  }, []);
+  return !!isMobile;
+}
+export {
+  useIsMobile
+};
+//# sourceMappingURL=use-mobile.js.map

package/dist/hooks/use-mobile.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/hooks/use-mobile.ts"],"sourcesContent":["import * as React from \"react\";\n\nconst MOBILE_BREAKPOINT = 768;\n\nexport function useIsMobile() {\n  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(\n    undefined,\n  );\n\n  React.useEffect(() => {\n    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);\n    const onChange = () => {\n      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);\n    };\n    mql.addEventListener(\"change\", onChange);\n    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);\n    return () => mql.removeEventListener(\"change\", onChange);\n  }, []);\n\n  return !!isMobile;\n}\n"],"mappings":"AAAA,YAAY,WAAW;AAEvB,MAAM,oBAAoB;AAEnB,SAAS,cAAc;AAC5B,QAAM,CAAC,UAAU,WAAW,IAAI,MAAM;AAAA,IACpC;AAAA,EACF;AAEA,QAAM,UAAU,MAAM;AACpB,UAAM,MAAM,OAAO,WAAW,eAAe,oBAAoB,CAAC,KAAK;AACvE,UAAM,WAAW,MAAM;AACrB,kBAAY,OAAO,aAAa,iBAAiB;AAAA,IACnD;AACA,QAAI,iBAAiB,UAAU,QAAQ;AACvC,gBAAY,OAAO,aAAa,iBAAiB;AACjD,WAAO,MAAM,IAAI,oBAAoB,UAAU,QAAQ;AAAA,EACzD,GAAG,CAAC,CAAC;AAEL,SAAO,CAAC,CAAC;AACX;","names":[]}