@etus/ui 0.4.0-beta.1 → 0.4.0-beta.3

package/dist/chunk-GLEKBJLR.js

@@ -0,0 +1,226 @@
+import { Table, TableHeader, TableRow, TableHead, TableBody, TableCell } from './chunk-65YSTUD2.js';
+import { Checkbox } from './chunk-XETKCF73.js';
+import { SkeletonLoader } from './chunk-QHKOBGLW.js';
+import { cn } from './chunk-HRNDJU7D.js';
+import { useReactTable, getCoreRowModel, flexRender } from '@tanstack/react-table';
+import { useVirtualizer } from '@tanstack/react-virtual';
+import * as React from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var SKELETON_KEYS = [
+  "skeleton-row-1",
+  "skeleton-row-2",
+  "skeleton-row-3",
+  "skeleton-row-4",
+  "skeleton-row-5"
+];
+function VirtualTable({
+  data,
+  columns,
+  rowHeight = 40,
+  overscan = 5,
+  estimateSize,
+  containerHeight = 400,
+  enableRowSelection = false,
+  onRowClick,
+  getRowId,
+  loading = false,
+  loadingComponent,
+  emptyState,
+  className,
+  rowSelection: controlledRowSelection,
+  onRowSelectionChange,
+  onSelectionChange,
+  rowClassName,
+  stickyHeader = true
+}) {
+  const parentRef = React.useRef(null);
+  const [internalRowSelection, setInternalRowSelection] = React.useState({});
+  const rowSelection = controlledRowSelection ?? internalRowSelection;
+  const handleRowSelectionChange = React.useCallback(
+    (updaterOrValue) => {
+      const newValue = typeof updaterOrValue === "function" ? updaterOrValue(rowSelection) : updaterOrValue;
+      if (onRowSelectionChange) {
+        onRowSelectionChange(newValue);
+      } else {
+        setInternalRowSelection(newValue);
+      }
+      if (onSelectionChange) {
+        const selectedIndices = Object.keys(newValue).filter(
+          (key) => newValue[key]
+        );
+        const selectedRows = selectedIndices.map((idx) => data[Number(idx)]).filter(Boolean);
+        onSelectionChange(selectedRows);
+      }
+    },
+    [rowSelection, onRowSelectionChange, onSelectionChange, data]
+  );
+  const tableColumns = React.useMemo(() => {
+    if (!enableRowSelection) return columns;
+    return [
+      {
+        id: "select",
+        header: ({ table: table2 }) => /* @__PURE__ */ jsx(
+          Checkbox,
+          {
+            checked: table2.getIsAllPageRowsSelected() || table2.getIsSomePageRowsSelected() && "indeterminate",
+            "aria-label": "Select all",
+            onCheckedChange: (value) => {
+              table2.toggleAllPageRowsSelected(!!value);
+            }
+          }
+        ),
+        cell: ({ row }) => /* @__PURE__ */ jsx(
+          Checkbox,
+          {
+            "aria-label": "Select row",
+            checked: row.getIsSelected(),
+            onCheckedChange: (value) => {
+              row.toggleSelected(!!value);
+            }
+          }
+        ),
+        enableSorting: false,
+        enableHiding: false,
+        size: 40
+      },
+      ...columns
+    ];
+  }, [columns, enableRowSelection]);
+  const table = useReactTable({
+    data,
+    columns: tableColumns,
+    state: {
+      rowSelection
+    },
+    enableRowSelection,
+    getRowId,
+    getCoreRowModel: getCoreRowModel(),
+    onRowSelectionChange: handleRowSelectionChange
+  });
+  const { rows } = table.getRowModel();
+  const virtualizer = useVirtualizer({
+    count: rows.length,
+    getScrollElement: () => parentRef.current,
+    estimateSize: estimateSize ?? (() => rowHeight),
+    overscan
+  });
+  const virtualItems = virtualizer.getVirtualItems();
+  const totalSize = virtualizer.getTotalSize();
+  const containerStyle = {
+    height: typeof containerHeight === "number" ? `${String(containerHeight)}px` : containerHeight,
+    overflow: "auto",
+    willChange: "transform"
+  };
+  if (loading) {
+    return /* @__PURE__ */ jsx("div", { className: cn("space-y-4", className), "data-slot": "virtual-table", children: loadingComponent ?? /* @__PURE__ */ jsx("div", { className: "space-y-2", "data-slot": "virtual-table-loading", children: SKELETON_KEYS.map((key) => /* @__PURE__ */ jsx(SkeletonLoader, { className: "h-10 w-full" }, key)) }) });
+  }
+  if (data.length === 0) {
+    return /* @__PURE__ */ jsx("div", { className: cn("space-y-4", className), "data-slot": "virtual-table", children: emptyState ?? /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "flex flex-col items-center justify-center py-12 text-center",
+        "data-slot": "virtual-table-empty",
+        children: /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-sm", children: "No data available" })
+      }
+    ) });
+  }
+  const firstItem = virtualItems[0];
+  const lastItem = virtualItems[virtualItems.length - 1];
+  const paddingTop = firstItem ? firstItem.start : 0;
+  const paddingBottom = lastItem ? totalSize - lastItem.end : 0;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn("rounded-md border", className),
+      "data-slot": "virtual-table",
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: parentRef,
+          className: "relative",
+          "data-slot": "virtual-table-container",
+          style: containerStyle,
+          children: /* @__PURE__ */ jsxs(Table, { children: [
+            /* @__PURE__ */ jsx(
+              TableHeader,
+              {
+                className: cn(
+                  stickyHeader && "bg-[color:var(--table-header-bg)] sticky top-0 z-10"
+                ),
+                children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx(TableRow, { children: headerGroup.headers.map((header) => /* @__PURE__ */ jsx(
+                  TableHead,
+                  {
+                    style: {
+                      width: header.getSize() !== 150 ? header.getSize() : void 0
+                    },
+                    children: header.isPlaceholder ? null : flexRender(
+                      header.column.columnDef.header,
+                      header.getContext()
+                    )
+                  },
+                  header.id
+                )) }, headerGroup.id))
+              }
+            ),
+            /* @__PURE__ */ jsxs(TableBody, { children: [
+              paddingTop > 0 && /* @__PURE__ */ jsx("tr", { "aria-hidden": "true", children: /* @__PURE__ */ jsx(
+                "td",
+                {
+                  colSpan: tableColumns.length,
+                  style: { height: `${String(paddingTop)}px`, padding: 0 }
+                }
+              ) }),
+              virtualItems.map((virtualRow) => {
+                const row = rows[virtualRow.index];
+                if (!row) return null;
+                return /* @__PURE__ */ jsx(
+                  TableRow,
+                  {
+                    className: cn(
+                      onRowClick && "cursor-pointer",
+                      rowClassName?.(row)
+                    ),
+                    style: {
+                      height: `${String(virtualRow.size)}px`
+                    },
+                    "aria-rowindex": virtualRow.index + 1,
+                    "data-state": row.getIsSelected() ? "selected" : void 0,
+                    onClick: onRowClick ? () => {
+                      onRowClick(row.original);
+                    } : void 0,
+                    children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx(
+                      TableCell,
+                      {
+                        style: {
+                          width: cell.column.getSize() !== 150 ? cell.column.getSize() : void 0
+                        },
+                        children: flexRender(
+                          cell.column.columnDef.cell,
+                          cell.getContext()
+                        )
+                      },
+                      cell.id
+                    ))
+                  },
+                  row.id
+                );
+              }),
+              paddingBottom > 0 && /* @__PURE__ */ jsx("tr", { "aria-hidden": "true", children: /* @__PURE__ */ jsx(
+                "td",
+                {
+                  colSpan: tableColumns.length,
+                  style: { height: `${String(paddingBottom)}px`, padding: 0 }
+                }
+              ) })
+            ] })
+          ] })
+        }
+      )
+    }
+  );
+}
+
+export { VirtualTable };
+//# sourceMappingURL=chunk-GLEKBJLR.js.map
+//# sourceMappingURL=chunk-GLEKBJLR.js.map

package/dist/chunk-GLEKBJLR.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/VirtualTable/VirtualTable.tsx"],"names":["table"],"mappings":"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","file":"chunk-GLEKBJLR.js","sourcesContent":["import type { VirtualTableProps } from \"./VirtualTable.types\"\nimport type {\n  Table as ReactTable,\n  Row,\n  RowSelectionState,\n} from \"@tanstack/react-table\"\n\nimport {\n  flexRender,\n  getCoreRowModel,\n  useReactTable,\n} from \"@tanstack/react-table\"\nimport { useVirtualizer } from \"@tanstack/react-virtual\"\nimport * as React from \"react\"\n\nimport { cn } from \"../../../lib/utils\"\nimport { Checkbox } from \"../../forms/Checkbox\"\nimport { SkeletonLoader } from \"../../primitives/SkeletonLoader\"\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"../Table\"\n\n// Static keys for skeleton loader to avoid array index as key\nconst SKELETON_KEYS = [\n  \"skeleton-row-1\",\n  \"skeleton-row-2\",\n  \"skeleton-row-3\",\n  \"skeleton-row-4\",\n  \"skeleton-row-5\",\n] as const\n\n/**\n * VirtualTable - High-performance virtualized table for large datasets.\n *\n * Renders only visible rows in the viewport, enabling smooth scrolling\n * with thousands or millions of rows. Built on TanStack Virtual and\n * TanStack Table.\n *\n * @example\n * ```tsx\n * import { VirtualTable } from '@etus/ui'\n * import { ColumnDef } from '@tanstack/react-table'\n *\n * interface LogEntry {\n *   id: string\n *   timestamp: Date\n *   level: 'info' | 'warn' | 'error'\n *   message: string\n * }\n *\n * const columns: ColumnDef<LogEntry>[] = [\n *   { accessorKey: 'timestamp', header: 'Time', size: 150 },\n *   { accessorKey: 'level', header: 'Level', size: 80 },\n *   { accessorKey: 'message', header: 'Message' },\n * ]\n *\n * function LogViewer() {\n *   const { data } = useLogs() // 100k+ entries\n *\n *   return (\n *     <VirtualTable\n *       data={data}\n *       columns={columns}\n *       rowHeight={36}\n *       containerHeight={600}\n *       getRowId={(row) => row.id}\n *     />\n *   )\n * }\n * ```\n */\nfunction VirtualTable<TData>({\n  data,\n  columns,\n  rowHeight = 40,\n  overscan = 5,\n  estimateSize,\n  containerHeight = 400,\n  enableRowSelection = false,\n  onRowClick,\n  getRowId,\n  loading = false,\n  loadingComponent,\n  emptyState,\n  className,\n  rowSelection: controlledRowSelection,\n  onRowSelectionChange,\n  onSelectionChange,\n  rowClassName,\n  stickyHeader = true,\n}: VirtualTableProps<TData>) {\n  const parentRef = React.useRef<HTMLDivElement>(null)\n  const [internalRowSelection, setInternalRowSelection] =\n    React.useState<RowSelectionState>({})\n\n  const rowSelection = controlledRowSelection ?? internalRowSelection\n\n  // Create wrapper for row selection change to also notify onSelectionChange\n  const handleRowSelectionChange = React.useCallback(\n    (\n      updaterOrValue:\n        | ((old: RowSelectionState) => RowSelectionState)\n        | RowSelectionState\n    ) => {\n      const newValue =\n        typeof updaterOrValue === \"function\"\n          ? updaterOrValue(rowSelection)\n          : updaterOrValue\n\n      // Update internal or controlled state\n      if (onRowSelectionChange) {\n        onRowSelectionChange(newValue)\n      } else {\n        setInternalRowSelection(newValue)\n      }\n\n      // Notify parent of selected rows as TData array\n      if (onSelectionChange) {\n        const selectedIndices = Object.keys(newValue).filter(\n          (key) => newValue[key]\n        )\n        const selectedRows = selectedIndices\n          .map((idx) => data[Number(idx)])\n          .filter(Boolean) as TData[]\n        onSelectionChange(selectedRows)\n      }\n    },\n    [rowSelection, onRowSelectionChange, onSelectionChange, data]\n  )\n\n  // Memoize column definitions with selection column\n  const tableColumns = React.useMemo(() => {\n    if (!enableRowSelection) return columns\n\n    return [\n      {\n        id: \"select\",\n        header: ({ table }: { table: ReactTable<TData> }) => (\n          <Checkbox\n            checked={\n              table.getIsAllPageRowsSelected() ||\n              (table.getIsSomePageRowsSelected() && \"indeterminate\")\n            }\n            aria-label=\"Select all\"\n            onCheckedChange={(value) => {\n              table.toggleAllPageRowsSelected(!!value)\n            }}\n          />\n        ),\n        cell: ({ row }: { row: Row<TData> }) => (\n          <Checkbox\n            aria-label=\"Select row\"\n            checked={row.getIsSelected()}\n            onCheckedChange={(value) => {\n              row.toggleSelected(!!value)\n            }}\n          />\n        ),\n        enableSorting: false,\n        enableHiding: false,\n        size: 40,\n      },\n      ...columns,\n    ]\n  }, [columns, enableRowSelection])\n\n  // Initialize table\n  // eslint-disable-next-line react-hooks/incompatible-library -- TanStack Table's API is required here.\n  const table = useReactTable({\n    data,\n    columns: tableColumns,\n    state: {\n      rowSelection,\n    },\n    enableRowSelection,\n    getRowId,\n    getCoreRowModel: getCoreRowModel(),\n    onRowSelectionChange: handleRowSelectionChange,\n  })\n\n  const { rows } = table.getRowModel()\n\n  // Initialize virtualizer\n  const virtualizer = useVirtualizer({\n    count: rows.length,\n    getScrollElement: () => parentRef.current,\n    estimateSize: estimateSize ?? (() => rowHeight),\n    overscan,\n  })\n\n  const virtualItems = virtualizer.getVirtualItems()\n  const totalSize = virtualizer.getTotalSize()\n\n  // Calculate container height style\n  const containerStyle: React.CSSProperties = {\n    height:\n      typeof containerHeight === \"number\"\n        ? `${String(containerHeight)}px`\n        : containerHeight,\n    overflow: \"auto\",\n    willChange: \"transform\",\n  }\n\n  // Render loading state\n  if (loading) {\n    return (\n      <div className={cn(\"space-y-4\", className)} data-slot=\"virtual-table\">\n        {loadingComponent ?? (\n          <div className=\"space-y-2\" data-slot=\"virtual-table-loading\">\n            {SKELETON_KEYS.map((key) => (\n              <SkeletonLoader key={key} className=\"h-10 w-full\" />\n            ))}\n          </div>\n        )}\n      </div>\n    )\n  }\n\n  // Render empty state\n  if (data.length === 0) {\n    return (\n      <div className={cn(\"space-y-4\", className)} data-slot=\"virtual-table\">\n        {emptyState ?? (\n          <div\n            className=\"flex flex-col items-center justify-center py-12 text-center\"\n            data-slot=\"virtual-table-empty\"\n          >\n            <p className=\"text-muted-foreground text-sm\">No data available</p>\n          </div>\n        )}\n      </div>\n    )\n  }\n\n  // Calculate padding for virtual items\n  const firstItem = virtualItems[0]\n  const lastItem = virtualItems[virtualItems.length - 1]\n  const paddingTop = firstItem ? firstItem.start : 0\n  const paddingBottom = lastItem ? totalSize - lastItem.end : 0\n\n  return (\n    <div\n      className={cn(\"rounded-md border\", className)}\n      data-slot=\"virtual-table\"\n    >\n      <div\n        ref={parentRef}\n        className=\"relative\"\n        data-slot=\"virtual-table-container\"\n        style={containerStyle}\n      >\n        <Table>\n          <TableHeader\n            className={cn(\n              stickyHeader && \"bg-[color:var(--table-header-bg)] sticky top-0 z-10\"\n            )}\n          >\n            {table.getHeaderGroups().map((headerGroup) => (\n              <TableRow key={headerGroup.id}>\n                {headerGroup.headers.map((header) => (\n                  <TableHead\n                    key={header.id}\n                    style={{\n                      width: header.getSize() !== 150 ? header.getSize() : undefined,\n                    }}\n                  >\n                    {header.isPlaceholder\n                      ? null\n                      : flexRender(\n                          header.column.columnDef.header,\n                          header.getContext()\n                        )}\n                  </TableHead>\n                ))}\n              </TableRow>\n            ))}\n          </TableHeader>\n          <TableBody>\n            {/* Top padding row */}\n            {paddingTop > 0 && (\n              <tr aria-hidden=\"true\">\n                <td\n                  colSpan={tableColumns.length}\n                  style={{ height: `${String(paddingTop)}px`, padding: 0 }}\n                />\n              </tr>\n            )}\n\n            {/* Virtual rows */}\n            {virtualItems.map((virtualRow) => {\n              const row = rows[virtualRow.index]\n              if (!row) return null\n              return (\n                <TableRow\n                  key={row.id}\n                  className={cn(\n                    onRowClick && \"cursor-pointer\",\n                    rowClassName?.(row)\n                  )}\n                  style={{\n                    height: `${String(virtualRow.size)}px`,\n                  }}\n                  aria-rowindex={virtualRow.index + 1}\n                  data-state={row.getIsSelected() ? \"selected\" : undefined}\n                  onClick={\n                    onRowClick\n                      ? () => {\n                          onRowClick(row.original)\n                        }\n                      : undefined\n                  }\n                >\n                  {row.getVisibleCells().map((cell) => (\n                    <TableCell\n                      key={cell.id}\n                      style={{\n                        width:\n                          cell.column.getSize() !== 150\n                            ? cell.column.getSize()\n                            : undefined,\n                      }}\n                    >\n                      {flexRender(\n                        cell.column.columnDef.cell,\n                        cell.getContext()\n                      )}\n                    </TableCell>\n                  ))}\n                </TableRow>\n              )\n            })}\n\n            {/* Bottom padding row */}\n            {paddingBottom > 0 && (\n              <tr aria-hidden=\"true\">\n                <td\n                  colSpan={tableColumns.length}\n                  style={{ height: `${String(paddingBottom)}px`, padding: 0 }}\n                />\n              </tr>\n            )}\n          </TableBody>\n        </Table>\n      </div>\n    </div>\n  )\n}\n\nexport { VirtualTable }\n"]}

package/dist/chunk-GPW57XOW.js

@@ -0,0 +1,80 @@
+import { TooltipProvider, Tooltip, TooltipTrigger, TooltipContent } from './chunk-7ZJ32KRQ.js';
+import { cn } from './chunk-HRNDJU7D.js';
+import 'react';
+import { cva } from 'class-variance-authority';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var trackerContainerVariants = cva(
+  "flex w-full items-center",
+  {
+    variants: {},
+    defaultVariants: {}
+  }
+);
+var trackerBlockVariants = cva(
+  "h-full flex-1 rounded-xs transition-colors first:rounded-l-md last:rounded-r-md",
+  {
+    variants: {
+      clickable: {
+        true: "cursor-pointer hover:opacity-80",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      clickable: false
+    }
+  }
+);
+function Tracker({
+  className,
+  data,
+  defaultColor = "var(--muted)",
+  gap = 1,
+  onClick,
+  ...props
+}) {
+  const isClickable = Boolean(onClick);
+  const renderBlock = (block, index) => {
+    const blockElement = /* @__PURE__ */ jsx(
+      "div",
+      {
+        "aria-label": typeof block.tooltip === "string" ? block.tooltip : void 0,
+        className: cn(trackerBlockVariants({ clickable: isClickable })),
+        role: isClickable ? "button" : void 0,
+        style: { backgroundColor: block.color ?? defaultColor },
+        tabIndex: isClickable ? 0 : void 0,
+        onClick: isClickable ? () => onClick?.(block, index) : void 0,
+        onKeyDown: isClickable ? (e) => {
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            onClick?.(block, index);
+          }
+        } : void 0
+      },
+      block.key ?? index
+    );
+    if (!block.tooltip) return blockElement;
+    return /* @__PURE__ */ jsxs(Tooltip, { children: [
+      /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: blockElement }),
+      /* @__PURE__ */ jsx(TooltipContent, { children: block.tooltip })
+    ] }, block.key ?? index);
+  };
+  return /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: {
+        gap: `${String(gap)}px`,
+        height: "24px"
+      },
+      className: cn(trackerContainerVariants(), className),
+      "data-slot": "tracker",
+      ...props,
+      children: data.map((block, index) => renderBlock(block, index))
+    }
+  ) });
+}
+Tracker.displayName = "Tracker";
+
+export { Tracker };
+//# sourceMappingURL=chunk-GPW57XOW.js.map
+//# sourceMappingURL=chunk-GPW57XOW.js.map

package/dist/chunk-GPW57XOW.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/Tracker/Tracker.variants.ts","../src/components/data-display/Tracker/Tracker.tsx"],"names":[],"mappings":";;;;;;AAEO,IAAM,wBAAA,GAA2B,GAAA;AAAA,EACtC,0BAAA;AAAA,EACA;AAAA,IACE,UAAU,EAAC;AAAA,IACX,iBAAiB;AAAC;AAEtB,CAAA;AAEO,IAAM,oBAAA,GAAuB,GAAA;AAAA,EAClC,iFAAA;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,SAAA,EAAW;AAAA,QACT,IAAA,EAAM,iCAAA;AAAA,QACN,KAAA,EAAO;AAAA;AACT,KACF;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,SAAA,EAAW;AAAA;AACb;AAEJ,CAAA;ACmBO,SAAS,OAAA,CAAQ;AAAA,EACtB,SAAA;AAAA,EACA,IAAA;AAAA,EACA,YAAA,GAAe,cAAA;AAAA,EACf,GAAA,GAAM,CAAA;AAAA,EACN,OAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAiB;AACf,EAAA,MAAM,WAAA,GAAc,QAAQ,OAAO,CAAA;AAEnC,EAAA,MAAM,WAAA,GAAc,CAAC,KAAA,EAAyB,KAAA,KAAkB;AAC9D,IAAA,MAAM,YAAA,mBACJ,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QAEC,cAAY,OAAO,KAAA,CAAM,OAAA,KAAY,QAAA,GAAW,MAAM,OAAA,GAAU,MAAA;AAAA,QAChE,WAAW,EAAA,CAAG,oBAAA,CAAqB,EAAE,SAAA,EAAW,WAAA,EAAa,CAAC,CAAA;AAAA,QAC9D,IAAA,EAAM,cAAc,QAAA,GAAW,MAAA;AAAA,QAE/B,KAAA,EAAO,EAAE,eAAA,EAAiB,KAAA,CAAM,SAAS,YAAA,EAAa;AAAA,QACtD,QAAA,EAAU,cAAc,CAAA,GAAI,MAAA;AAAA,QAC5B,SAAS,WAAA,GAAc,MAAM,OAAA,GAAU,KAAA,EAAO,KAAK,CAAA,GAAI,MAAA;AAAA,QACvD,SAAA,EACE,WAAA,GACI,CAAC,CAAA,KAAM;AACL,UAAA,IAAI,CAAA,CAAE,GAAA,KAAQ,OAAA,IAAW,CAAA,CAAE,QAAQ,GAAA,EAAK;AACtC,YAAA,CAAA,CAAE,cAAA,EAAe;AACjB,YAAA,OAAA,GAAU,OAAO,KAAK,CAAA;AAAA,UACxB;AAAA,QACF,CAAA,GACA;AAAA,OAAA;AAAA,MAhBD,MAAM,GAAA,IAAO;AAAA,KAkBpB;AAGF,IAAA,IAAI,CAAC,KAAA,CAAM,OAAA,EAAS,OAAO,YAAA;AAE3B,IAAA,4BACG,OAAA,EAAA,EACC,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,cAAA,EAAA,EAAe,OAAA,EAAO,IAAA,EACpB,QAAA,EAAA,YAAA,EACH,CAAA;AAAA,sBACA,GAAA,CAAC,cAAA,EAAA,EAAgB,QAAA,EAAA,KAAA,CAAM,OAAA,EAAQ;AAAA,KAAA,EAAA,EAJnB,KAAA,CAAM,OAAO,KAK3B,CAAA;AAAA,EAEJ,CAAA;AAEA,EAAA,2BACG,eAAA,EAAA,EACC,QAAA,kBAAA,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO;AAAA,QACL,GAAA,EAAK,CAAA,EAAG,MAAA,CAAO,GAAG,CAAC,CAAA,EAAA,CAAA;AAAA,QACnB,MAAA,EAAQ;AAAA,OACV;AAAA,MACA,SAAA,EAAW,EAAA,CAAG,wBAAA,EAAyB,EAAG,SAAS,CAAA;AAAA,MACnD,WAAA,EAAU,SAAA;AAAA,MACT,GAAG,KAAA;AAAA,MAEH,QAAA,EAAA,IAAA,CAAK,IAAI,CAAC,KAAA,EAAO,UAAU,WAAA,CAAY,KAAA,EAAO,KAAK,CAAC;AAAA;AAAA,GACvD,EACF,CAAA;AAEJ;AAEA,OAAA,CAAQ,WAAA,GAAc,SAAA","file":"chunk-GPW57XOW.js","sourcesContent":["import { cva } from \"class-variance-authority\"\n\nexport const trackerContainerVariants = cva(\n  \"flex w-full items-center\",\n  {\n    variants: {},\n    defaultVariants: {},\n  }\n)\n\nexport const trackerBlockVariants = cva(\n  \"h-full flex-1 rounded-xs transition-colors first:rounded-l-md last:rounded-r-md\",\n  {\n    variants: {\n      clickable: {\n        true: \"cursor-pointer hover:opacity-80\",\n        false: \"\",\n      },\n    },\n    defaultVariants: {\n      clickable: false,\n    },\n  }\n)\n","\"use client\"\n\nimport type { TrackerBlockData, TrackerProps } from \"./Tracker.types\"\n\nimport * as React from \"react\"\n\nimport { cn } from \"../../../lib/utils\"\nimport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from \"../../feedback/Tooltip\"\nimport {\n  trackerBlockVariants,\n  trackerContainerVariants,\n} from \"./Tracker.variants\"\n\n/**\n * Tracker - Status visualization component\n *\n * Displays a series of colored blocks to represent status over time.\n * Commonly used for uptime monitoring, availability indicators,\n * or any time-series status data.\n *\n * @example\n * ```tsx\n * const data = [\n *   { color: \"var(--success)\", tooltip: \"Jan 1 - Operational\" },\n *   { color: \"var(--success)\", tooltip: \"Jan 2 - Operational\" },\n *   { color: \"var(--warning)\", tooltip: \"Jan 3 - Degraded\" },\n *   { color: \"var(--success)\", tooltip: \"Jan 4 - Operational\" },\n *   { color: \"var(--destructive)\", tooltip: \"Jan 5 - Outage\" },\n * ]\n *\n * <Tracker data={data} />\n * ```\n *\n * @example\n * ```tsx\n * // With click handler\n * <Tracker\n *   data={data}\n *   onClick={(block, index) => console.log(`Clicked block ${index}`)}\n * />\n * ```\n */\nexport function Tracker({\n  className,\n  data,\n  defaultColor = \"var(--muted)\",\n  gap = 1,\n  onClick,\n  ...props\n}: TrackerProps) {\n  const isClickable = Boolean(onClick)\n\n  const renderBlock = (block: TrackerBlockData, index: number) => {\n    const blockElement = (\n      <div\n        key={block.key ?? index}\n        aria-label={typeof block.tooltip === \"string\" ? block.tooltip : undefined}\n        className={cn(trackerBlockVariants({ clickable: isClickable }))}\n        role={isClickable ? \"button\" : undefined}\n        // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -- Defensive: color is optional in TrackerBlock\n        style={{ backgroundColor: block.color ?? defaultColor }}\n        tabIndex={isClickable ? 0 : undefined}\n        onClick={isClickable ? () => onClick?.(block, index) : undefined}\n        onKeyDown={\n          isClickable\n            ? (e) => {\n                if (e.key === \"Enter\" || e.key === \" \") {\n                  e.preventDefault()\n                  onClick?.(block, index)\n                }\n              }\n            : undefined\n        }\n      />\n    )\n\n    if (!block.tooltip) return blockElement\n\n    return (\n      <Tooltip key={block.key ?? index}>\n        <TooltipTrigger asChild>\n          {blockElement}\n        </TooltipTrigger>\n        <TooltipContent>{block.tooltip}</TooltipContent>\n      </Tooltip>\n    )\n  }\n\n  return (\n    <TooltipProvider>\n      <div\n        style={{\n          gap: `${String(gap)}px`,\n          height: \"24px\",\n        }}\n        className={cn(trackerContainerVariants(), className)}\n        data-slot=\"tracker\"\n        {...props}\n      >\n        {data.map((block, index) => renderBlock(block, index))}\n      </div>\n    </TooltipProvider>\n  )\n}\n\nTracker.displayName = \"Tracker\"\n"]}

package/dist/chunk-H4ANCFZG.js

@@ -0,0 +1,233 @@
+import { TooltipProvider, Tooltip, TooltipTrigger, TooltipContent } from './chunk-7ZJ32KRQ.js';
+import { cn } from './chunk-HRNDJU7D.js';
+import * as React from 'react';
+import { cva } from 'class-variance-authority';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var categoryBarContainerVariants = cva(
+  "w-full",
+  {
+    variants: {},
+    defaultVariants: {}
+  }
+);
+var categoryBarVariants = cva(
+  "relative flex w-full overflow-hidden rounded-full",
+  {
+    variants: {
+      size: {
+        xs: "h-1",
+        sm: "h-2",
+        md: "h-3",
+        lg: "h-4"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);
+var categoryBarSegmentVariants = cva(
+  "transition-all duration-300",
+  {
+    variants: {
+      clickable: {
+        true: "cursor-pointer hover:opacity-80",
+        false: ""
+      },
+      animated: {
+        true: "",
+        false: "!transition-none"
+      }
+    },
+    defaultVariants: {
+      clickable: false,
+      animated: true
+    }
+  }
+);
+var categoryBarLabelsVariants = cva(
+  "mt-2 flex justify-between gap-2",
+  {
+    variants: {},
+    defaultVariants: {}
+  }
+);
+var categoryBarLabelItemVariants = cva(
+  "flex items-center gap-1.5 text-sm",
+  {
+    variants: {
+      clickable: {
+        true: "cursor-pointer hover:opacity-80",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      clickable: false
+    }
+  }
+);
+var categoryBarLabelDotVariants = cva(
+  "h-2 w-2 shrink-0 rounded-full",
+  {
+    variants: {},
+    defaultVariants: {}
+  }
+);
+var categoryBarMarkerVariants = cva(
+  "absolute top-0 h-full w-0.5 bg-foreground",
+  {
+    variants: {},
+    defaultVariants: {}
+  }
+);
+var DEFAULT_COLORS = [
+  "var(--chart-1)",
+  "var(--chart-2)",
+  "var(--chart-3)",
+  "var(--chart-4)",
+  "var(--chart-5)"
+];
+function defaultValueFormatter(value) {
+  return value.toLocaleString();
+}
+function CategoryBar({
+  className,
+  colors = DEFAULT_COLORS,
+  data,
+  markerValue,
+  onClick,
+  showAnimation = true,
+  showLabels = true,
+  showTooltip = true,
+  size = "md",
+  valueFormatter = defaultValueFormatter,
+  ...props
+}) {
+  const total = React.useMemo(
+    () => data.reduce((sum, item) => sum + item.value, 0),
+    [data]
+  );
+  const segments = React.useMemo(() => {
+    let cumulativePercent = 0;
+    return data.map((item, index) => {
+      const percent = total > 0 ? item.value / total * 100 : 0;
+      const segment = {
+        ...item,
+        // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -- Defensive: color is optional in CategoryBarItem
+        color: item.color ?? colors[index % colors.length],
+        percent,
+        startPercent: cumulativePercent
+      };
+      cumulativePercent += percent;
+      return segment;
+    });
+  }, [data, total, colors]);
+  const isClickable = Boolean(onClick);
+  const markerPosition = React.useMemo(() => {
+    if (markerValue === void 0 || total === 0) return;
+    return markerValue / total * 100;
+  }, [markerValue, total]);
+  const renderSegment = (segment, index) => {
+    const segmentElement = /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          categoryBarSegmentVariants({
+            animated: showAnimation,
+            clickable: isClickable
+          })
+        ),
+        style: {
+          backgroundColor: segment.color,
+          width: `${String(segment.percent)}%`
+        },
+        "aria-label": `${segment.name}: ${valueFormatter(segment.value)}`,
+        role: isClickable ? "button" : void 0,
+        tabIndex: isClickable ? 0 : void 0,
+        onClick: isClickable ? () => onClick?.(segment, index) : void 0,
+        onKeyDown: isClickable ? (e) => {
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            onClick?.(segment, index);
+          }
+        } : void 0
+      },
+      segment.key
+    );
+    if (!showTooltip) return segmentElement;
+    return /* @__PURE__ */ jsxs(Tooltip, { children: [
+      /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: segmentElement }),
+      /* @__PURE__ */ jsx(TooltipContent, { children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "h-2 w-2 rounded-full",
+              style: { backgroundColor: segment.color }
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: "font-medium", children: segment.name })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "text-muted-foreground", children: [
+          valueFormatter(segment.value),
+          " (",
+          segment.percent.toFixed(1),
+          "%)"
+        ] })
+      ] }) })
+    ] }, segment.key);
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(categoryBarContainerVariants(), className),
+      "data-slot": "category-bar",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs("div", { className: categoryBarVariants({ size }), children: [
+          segments.map((segment, index) => renderSegment(segment, index)),
+          markerPosition !== void 0 && /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: categoryBarMarkerVariants(),
+              style: { left: `${String(markerPosition)}%` }
+            }
+          )
+        ] }) }),
+        showLabels && /* @__PURE__ */ jsx("div", { className: categoryBarLabelsVariants(), children: segments.map((segment, index) => /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(categoryBarLabelItemVariants({ clickable: isClickable })),
+            role: isClickable ? "button" : void 0,
+            tabIndex: isClickable ? 0 : void 0,
+            onClick: isClickable ? () => onClick?.(segment, index) : void 0,
+            onKeyDown: isClickable ? (e) => {
+              if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                onClick?.(segment, index);
+              }
+            } : void 0,
+            children: [
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: categoryBarLabelDotVariants(),
+                  style: { backgroundColor: segment.color }
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: segment.name }),
+              /* @__PURE__ */ jsx("span", { className: "font-medium", children: valueFormatter(segment.value) })
+            ]
+          },
+          segment.key
+        )) })
+      ]
+    }
+  );
+}
+CategoryBar.displayName = "CategoryBar";
+
+export { CategoryBar };
+//# sourceMappingURL=chunk-H4ANCFZG.js.map
+//# sourceMappingURL=chunk-H4ANCFZG.js.map

package/dist/chunk-H4ANCFZG.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/CategoryBar/CategoryBar.variants.ts","../src/components/data-display/CategoryBar/CategoryBar.tsx"],"names":[],"mappings":"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","file":"chunk-H4ANCFZG.js","sourcesContent":["import { cva } from \"class-variance-authority\"\n\nexport const categoryBarContainerVariants = cva(\n  \"w-full\",\n  {\n    variants: {},\n    defaultVariants: {},\n  }\n)\n\nexport const categoryBarVariants = cva(\n  \"relative flex w-full overflow-hidden rounded-full\",\n  {\n    variants: {\n      size: {\n        xs: \"h-1\",\n        sm: \"h-2\",\n        md: \"h-3\",\n        lg: \"h-4\",\n      },\n    },\n    defaultVariants: {\n      size: \"md\",\n    },\n  }\n)\n\nexport const categoryBarSegmentVariants = cva(\n  \"transition-all duration-300\",\n  {\n    variants: {\n      clickable: {\n        true: \"cursor-pointer hover:opacity-80\",\n        false: \"\",\n      },\n      animated: {\n        true: \"\",\n        false: \"!transition-none\",\n      },\n    },\n    defaultVariants: {\n      clickable: false,\n      animated: true,\n    },\n  }\n)\n\nexport const categoryBarLabelsVariants = cva(\n  \"mt-2 flex justify-between gap-2\",\n  {\n    variants: {},\n    defaultVariants: {},\n  }\n)\n\nexport const categoryBarLabelItemVariants = cva(\n  \"flex items-center gap-1.5 text-sm\",\n  {\n    variants: {\n      clickable: {\n        true: \"cursor-pointer hover:opacity-80\",\n        false: \"\",\n      },\n    },\n    defaultVariants: {\n      clickable: false,\n    },\n  }\n)\n\nexport const categoryBarLabelDotVariants = cva(\n  \"h-2 w-2 shrink-0 rounded-full\",\n  {\n    variants: {},\n    defaultVariants: {},\n  }\n)\n\nexport const categoryBarMarkerVariants = cva(\n  \"absolute top-0 h-full w-0.5 bg-foreground\",\n  {\n    variants: {},\n    defaultVariants: {},\n  }\n)\n","\"use client\"\n\nimport type { CategoryBarDataItem, CategoryBarProps } from \"./CategoryBar.types\"\n\nimport * as React from \"react\"\n\nimport { cn } from \"../../../lib/utils\"\nimport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from \"../../feedback/Tooltip\"\nimport {\n  categoryBarContainerVariants,\n  categoryBarLabelDotVariants,\n  categoryBarLabelItemVariants,\n  categoryBarLabelsVariants,\n  categoryBarMarkerVariants,\n  categoryBarSegmentVariants,\n  categoryBarVariants,\n} from \"./CategoryBar.variants\"\n\n/**\n * Default colors for categories\n */\nconst DEFAULT_COLORS = [\n  \"var(--chart-1)\",\n  \"var(--chart-2)\",\n  \"var(--chart-3)\",\n  \"var(--chart-4)\",\n  \"var(--chart-5)\",\n]\n\n/**\n * Default value formatter\n */\nfunction defaultValueFormatter(value: number): string {\n  return value.toLocaleString()\n}\n\n/**\n * CategoryBar - Segmented bar showing proportional categories\n *\n * Displays categories as horizontal segments proportional to their values.\n * Similar to a pie chart but in a horizontal bar format. Ideal for showing\n * composition or breakdown of a total.\n *\n * @example\n * ```tsx\n * const data = [\n *   { key: \"completed\", name: \"Completed\", value: 45, color: \"var(--chart-1)\" },\n *   { key: \"in-progress\", name: \"In Progress\", value: 30, color: \"var(--chart-2)\" },\n *   { key: \"pending\", name: \"Pending\", value: 25, color: \"var(--chart-3)\" },\n * ]\n *\n * <CategoryBar data={data} />\n * ```\n *\n * @example\n * ```tsx\n * // With marker and custom formatter\n * <CategoryBar\n *   data={data}\n *   markerValue={75}\n *   valueFormatter={(v) => `${v}%`}\n *   size=\"lg\"\n * />\n * ```\n */\nexport function CategoryBar({\n  className,\n  colors = DEFAULT_COLORS,\n  data,\n  markerValue,\n  onClick,\n  showAnimation = true,\n  showLabels = true,\n  showTooltip = true,\n  size = \"md\",\n  valueFormatter = defaultValueFormatter,\n  ...props\n}: CategoryBarProps) {\n  // Calculate total and percentages\n  const total = React.useMemo(\n    () => data.reduce((sum, item) => sum + item.value, 0),\n    [data]\n  )\n\n  const segments = React.useMemo(() => {\n    let cumulativePercent = 0\n    return data.map((item, index) => {\n      const percent = total > 0 ? (item.value / total) * 100 : 0\n      const segment = {\n        ...item,\n        // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -- Defensive: color is optional in CategoryBarItem\n        color: item.color ?? colors[index % colors.length],\n        percent,\n        startPercent: cumulativePercent,\n      }\n      // eslint-disable-next-line react-hooks/immutability -- Safe: building cumulative value within useMemo callback\n      cumulativePercent += percent\n      return segment\n    })\n  }, [data, total, colors])\n\n  const isClickable = Boolean(onClick)\n\n  // Calculate marker position\n  const markerPosition = React.useMemo(() => {\n    if (markerValue === undefined || total === 0) return\n    return (markerValue / total) * 100\n  }, [markerValue, total])\n\n  const renderSegment = (\n    segment: CategoryBarDataItem & { percent: number; startPercent: number },\n    index: number\n  ) => {\n    const segmentElement = (\n      <div\n        key={segment.key}\n        className={cn(\n          categoryBarSegmentVariants({\n            animated: showAnimation,\n            clickable: isClickable,\n          })\n        )}\n        style={{\n          backgroundColor: segment.color,\n          width: `${String(segment.percent)}%`,\n        }}\n        aria-label={`${segment.name}: ${valueFormatter(segment.value)}`}\n        role={isClickable ? \"button\" : undefined}\n        tabIndex={isClickable ? 0 : undefined}\n        onClick={isClickable ? () => onClick?.(segment, index) : undefined}\n        onKeyDown={\n          isClickable\n            ? (e) => {\n                if (e.key === \"Enter\" || e.key === \" \") {\n                  e.preventDefault()\n                  onClick?.(segment, index)\n                }\n              }\n            : undefined\n        }\n      />\n    )\n\n    if (!showTooltip) return segmentElement\n\n    return (\n      <Tooltip key={segment.key}>\n        <TooltipTrigger asChild>\n          {segmentElement}\n        </TooltipTrigger>\n        <TooltipContent>\n          <div className=\"flex flex-col gap-1\">\n            <div className=\"flex items-center gap-2\">\n              <div\n                className=\"h-2 w-2 rounded-full\"\n                style={{ backgroundColor: segment.color }}\n              />\n              <span className=\"font-medium\">{segment.name}</span>\n            </div>\n            <div className=\"text-muted-foreground\">\n              {valueFormatter(segment.value)} ({segment.percent.toFixed(1)}%)\n            </div>\n          </div>\n        </TooltipContent>\n      </Tooltip>\n    )\n  }\n\n  return (\n    <div\n      className={cn(categoryBarContainerVariants(), className)}\n      data-slot=\"category-bar\"\n      {...props}\n    >\n      <TooltipProvider>\n        <div className={categoryBarVariants({ size })}>\n          {segments.map((segment, index) => renderSegment(segment, index))}\n\n          {markerPosition !== undefined && (\n            <div\n              className={categoryBarMarkerVariants()}\n              style={{ left: `${String(markerPosition)}%` }}\n            />\n          )}\n        </div>\n      </TooltipProvider>\n\n      {showLabels && (\n        <div className={categoryBarLabelsVariants()}>\n          {segments.map((segment, index) => (\n            <div\n              key={segment.key}\n              className={cn(categoryBarLabelItemVariants({ clickable: isClickable }))}\n              role={isClickable ? \"button\" : undefined}\n              tabIndex={isClickable ? 0 : undefined}\n              onClick={isClickable ? () => onClick?.(segment, index) : undefined}\n              onKeyDown={\n                isClickable\n                  ? (e) => {\n                      if (e.key === \"Enter\" || e.key === \" \") {\n                        e.preventDefault()\n                        onClick?.(segment, index)\n                      }\n                    }\n                  : undefined\n              }\n            >\n              <div\n                className={categoryBarLabelDotVariants()}\n                style={{ backgroundColor: segment.color }}\n              />\n              <span className=\"text-muted-foreground\">{segment.name}</span>\n              <span className=\"font-medium\">{valueFormatter(segment.value)}</span>\n            </div>\n          ))}\n        </div>\n      )}\n    </div>\n  )\n}\n\nCategoryBar.displayName = \"CategoryBar\"\n"]}