@etus/ui 0.3.2 → 0.4.0-beta.10

package/dist/chunk-IRIIK3BU.js

@@ -0,0 +1,215 @@
+import { cn } from './chunk-HRNDJU7D.js';
+import { cva } from 'class-variance-authority';
+import * as React from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var imageVariants = cva(
+  "transition-opacity duration-300 motion-reduce:transition-none",
+  {
+    variants: {
+      variant: {
+        default: "",
+        rounded: "rounded-md",
+        circle: "rounded-full",
+        square: "aspect-square"
+      },
+      size: {
+        xs: "size-8",
+        sm: "size-12",
+        md: "size-16",
+        lg: "size-24",
+        xl: "size-32",
+        full: "w-full"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "full"
+    }
+  }
+);
+function Image(props) {
+  const imageKey = props.src;
+  return /* @__PURE__ */ jsx(ImageInner, { ...props }, imageKey);
+}
+function ImageInner({
+  src,
+  alt,
+  variant,
+  size,
+  fallback,
+  placeholder,
+  aspectRatio = "auto",
+  objectFit = "cover",
+  objectPosition = "center",
+  loading = "lazy",
+  className,
+  onLoad,
+  onError,
+  ref,
+  style,
+  ...props
+}) {
+  const [isLoading, setIsLoading] = React.useState(true);
+  const [hasError, setHasError] = React.useState(false);
+  const normalizedSrc = src.trim();
+  const isMissingSrc = normalizedSrc.length === 0;
+  const handleLoad = React.useCallback(
+    (event) => {
+      setIsLoading(false);
+      setHasError(false);
+      onLoad?.(event);
+    },
+    [onLoad]
+  );
+  const handleError = React.useCallback(
+    (event) => {
+      setIsLoading(false);
+      setHasError(true);
+      onError?.(event);
+    },
+    [onError]
+  );
+  const aspectRatioStyle = React.useMemo(() => {
+    if (aspectRatio === "auto") return;
+    if (aspectRatio === "square") return;
+    if (aspectRatio === "video") return;
+    if (aspectRatio === "portrait") return { aspectRatio: "3/4" };
+    if (typeof aspectRatio === "number") {
+      return { aspectRatio: String(aspectRatio) };
+    }
+    return;
+  }, [aspectRatio]);
+  const objectFitClass = React.useMemo(() => {
+    switch (objectFit) {
+      case "cover":
+        return "object-cover";
+      case "contain":
+        return "object-contain";
+      case "fill":
+        return "object-fill";
+      case "none":
+        return "object-none";
+      default:
+        return "object-cover";
+    }
+  }, [objectFit]);
+  const objectPositionClass = React.useMemo(() => {
+    switch (objectPosition) {
+      case "center":
+        return "object-center";
+      case "top":
+        return "object-top";
+      case "bottom":
+        return "object-bottom";
+      case "left":
+        return "object-left";
+      case "right":
+        return "object-right";
+      default:
+        return;
+    }
+  }, [objectPosition]);
+  const objectPositionStyle = React.useMemo(() => {
+    if (!objectPositionClass && objectPosition !== "center") {
+      return { objectPosition };
+    }
+    return;
+  }, [objectPosition, objectPositionClass]);
+  const aspectRatioClass = React.useMemo(() => {
+    if (aspectRatio === "square") return "aspect-square";
+    if (aspectRatio === "video") return "aspect-video";
+    return;
+  }, [aspectRatio]);
+  const mergedStyle = React.useMemo(() => {
+    if (!aspectRatioStyle && !style) return;
+    return { ...aspectRatioStyle, ...style };
+  }, [aspectRatioStyle, style]);
+  if ((hasError || isMissingSrc) && fallback) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          imageVariants({ variant, size }),
+          aspectRatioClass,
+          "flex items-center justify-center bg-muted",
+          className
+        ),
+        "data-slot": "image-fallback",
+        style: mergedStyle,
+        children: fallback
+      }
+    );
+  }
+  if (isMissingSrc) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "relative inline-block overflow-hidden",
+          imageVariants({ variant, size }),
+          aspectRatioClass,
+          "bg-muted",
+          className
+        ),
+        "data-slot": "image-empty",
+        style: mergedStyle
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "relative inline-block overflow-hidden",
+        imageVariants({ variant, size }),
+        aspectRatioClass,
+        className
+      ),
+      style: mergedStyle,
+      children: [
+        isLoading && placeholder && /* @__PURE__ */ jsx(
+          "div",
+          {
+            "aria-hidden": "true",
+            className: "absolute inset-0 flex items-center justify-center",
+            "data-slot": "image-skeleton",
+            children: placeholder
+          }
+        ),
+        isLoading && !placeholder && /* @__PURE__ */ jsx(
+          "div",
+          {
+            "aria-hidden": "true",
+            className: "absolute inset-0 animate-pulse bg-[color:var(--image-skeleton-bg)] motion-reduce:animate-none",
+            "data-slot": "image-skeleton"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "img",
+          {
+            ref,
+            className: cn(
+              "size-full transition-opacity duration-300 motion-reduce:transition-none",
+              objectFitClass,
+              objectPositionClass,
+              isLoading ? "opacity-0" : "opacity-100"
+            ),
+            alt,
+            "data-slot": "image",
+            loading,
+            src: normalizedSrc,
+            style: objectPositionStyle,
+            onError: handleError,
+            onLoad: handleLoad,
+            ...props
+          }
+        )
+      ]
+    }
+  );
+}
+
+export { Image, imageVariants };
+//# sourceMappingURL=chunk-IRIIK3BU.js.map
+//# sourceMappingURL=chunk-IRIIK3BU.js.map

package/dist/chunk-IRIIK3BU.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/primitives/Image/Image.tsx"],"names":[],"mappings":"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","file":"chunk-IRIIK3BU.js","sourcesContent":["\"use client\"\n\nimport type { ImageProps } from \"./Image.types\"\n\nimport { cva } from \"class-variance-authority\"\nimport * as React from \"react\"\n\nimport { cn } from \"../../../lib/utils\"\n\nconst imageVariants = cva(\n  \"transition-opacity duration-300 motion-reduce:transition-none\",\n  {\n    variants: {\n      variant: {\n        default: \"\",\n        rounded: \"rounded-md\",\n        circle: \"rounded-full\",\n        square: \"aspect-square\",\n      },\n      size: {\n        xs: \"size-8\",\n        sm: \"size-12\",\n        md: \"size-16\",\n        lg: \"size-24\",\n        xl: \"size-32\",\n        full: \"w-full\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"full\",\n    },\n  }\n)\n\n/**\n * Image - A component for displaying images with lazy loading, fallback, and aspect ratio support.\n *\n * Features:\n * - Lazy loading by default\n * - Fallback content on error\n * - Placeholder during loading\n * - Aspect ratio control\n * - Object-fit and position options\n *\n * @example\n * // Basic usage\n * <Image src=\"/photo.jpg\" alt=\"Description\" />\n *\n * @example\n * // With fallback and placeholder\n * <Image\n *   src=\"/photo.jpg\"\n *   alt=\"Product\"\n *   fallback={<div>Failed to load</div>}\n *   placeholder={<div className=\"animate-pulse bg-muted\" />}\n * />\n */\nfunction Image(props: ImageProps) {\n  const imageKey = props.src\n  return <ImageInner key={imageKey} {...props} />\n}\n\nfunction ImageInner({\n  src,\n  alt,\n  variant,\n  size,\n  fallback,\n  placeholder,\n  aspectRatio = \"auto\",\n  objectFit = \"cover\",\n  objectPosition = \"center\",\n  loading = \"lazy\",\n  className,\n  onLoad,\n  onError,\n  ref,\n  style,\n  ...props\n}: ImageProps) {\n  const [isLoading, setIsLoading] = React.useState(true)\n  const [hasError, setHasError] = React.useState(false)\n  const normalizedSrc = src.trim()\n  const isMissingSrc = normalizedSrc.length === 0\n\n  const handleLoad = React.useCallback(\n    (event: React.SyntheticEvent<HTMLImageElement>) => {\n      setIsLoading(false)\n      setHasError(false)\n      onLoad?.(event)\n    },\n    [onLoad]\n  )\n\n  const handleError = React.useCallback(\n    (event: React.SyntheticEvent<HTMLImageElement>) => {\n      setIsLoading(false)\n      setHasError(true)\n      onError?.(event)\n    },\n    [onError]\n  )\n\n  // Compute aspect ratio style\n  const aspectRatioStyle = React.useMemo(() => {\n    if (aspectRatio === \"auto\") return\n    if (aspectRatio === \"square\") return // handled by class\n    if (aspectRatio === \"video\") return // handled by class\n    if (aspectRatio === \"portrait\") return { aspectRatio: \"3/4\" }\n    if (typeof aspectRatio === \"number\") {\n      return { aspectRatio: String(aspectRatio) }\n    }\n    return\n  }, [aspectRatio])\n\n  // Compute object-fit class\n  const objectFitClass = React.useMemo(() => {\n    switch (objectFit) {\n      case \"cover\":\n        return \"object-cover\"\n      case \"contain\":\n        return \"object-contain\"\n      case \"fill\":\n        return \"object-fill\"\n      case \"none\":\n        return \"object-none\"\n      default:\n        return \"object-cover\"\n    }\n  }, [objectFit])\n\n  // Compute object-position class or style\n  const objectPositionClass = React.useMemo(() => {\n    switch (objectPosition) {\n      case \"center\":\n        return \"object-center\"\n      case \"top\":\n        return \"object-top\"\n      case \"bottom\":\n        return \"object-bottom\"\n      case \"left\":\n        return \"object-left\"\n      case \"right\":\n        return \"object-right\"\n      default:\n        return\n    }\n  }, [objectPosition])\n\n  const objectPositionStyle = React.useMemo(() => {\n    if (!objectPositionClass && objectPosition !== \"center\") {\n      return { objectPosition }\n    }\n    return\n  }, [objectPosition, objectPositionClass])\n\n  // Compute aspect ratio classes\n  const aspectRatioClass = React.useMemo(() => {\n    if (aspectRatio === \"square\") return \"aspect-square\"\n    if (aspectRatio === \"video\") return \"aspect-video\"\n    return\n  }, [aspectRatio])\n\n  // Merge styles (must be before any early return to respect hooks rules)\n  const mergedStyle = React.useMemo(() => {\n    if (!aspectRatioStyle && !style) return\n    return { ...aspectRatioStyle, ...style }\n  }, [aspectRatioStyle, style])\n\n  // Show fallback for missing/errored images when content is provided.\n  if ((hasError || isMissingSrc) && fallback) {\n    return (\n      <div\n        className={cn(\n          imageVariants({ variant, size }),\n          aspectRatioClass,\n          \"flex items-center justify-center bg-muted\",\n          className\n        )}\n        data-slot=\"image-fallback\"\n        style={mergedStyle}\n      >\n        {fallback}\n      </div>\n    )\n  }\n\n  if (isMissingSrc) {\n    return (\n      <div\n        className={cn(\n          \"relative inline-block overflow-hidden\",\n          imageVariants({ variant, size }),\n          aspectRatioClass,\n          \"bg-muted\",\n          className\n        )}\n        data-slot=\"image-empty\"\n        style={mergedStyle}\n      />\n    )\n  }\n\n  return (\n    <div\n      className={cn(\n        \"relative inline-block overflow-hidden\",\n        imageVariants({ variant, size }),\n        aspectRatioClass,\n        className\n      )}\n      style={mergedStyle}\n    >\n      {/* Placeholder shown while loading */}\n      {isLoading && placeholder && (\n        <div\n          aria-hidden=\"true\"\n          className=\"absolute inset-0 flex items-center justify-center\"\n          data-slot=\"image-skeleton\"\n        >\n          {placeholder}\n        </div>\n      )}\n\n      {/* Default skeleton if no placeholder provided */}\n      {isLoading && !placeholder && (\n        <div\n          aria-hidden=\"true\"\n          className=\"absolute inset-0 animate-pulse bg-[color:var(--image-skeleton-bg)] motion-reduce:animate-none\"\n          data-slot=\"image-skeleton\"\n        />\n      )}\n\n      {/* The actual image */}\n      <img\n        ref={ref}\n        className={cn(\n          \"size-full transition-opacity duration-300 motion-reduce:transition-none\",\n          objectFitClass,\n          objectPositionClass,\n          isLoading ? \"opacity-0\" : \"opacity-100\"\n        )}\n        alt={alt}\n        data-slot=\"image\"\n        loading={loading}\n        src={normalizedSrc}\n        style={objectPositionStyle}\n        onError={handleError}\n        onLoad={handleLoad}\n        {...props}\n      />\n    </div>\n  )\n}\n\nexport { Image, imageVariants }\n"]}

package/dist/chunk-IXJHHR3Y.js

@@ -0,0 +1,3 @@
+
+//# sourceMappingURL=chunk-IXJHHR3Y.js.map
+//# sourceMappingURL=chunk-IXJHHR3Y.js.map

package/dist/chunk-IXJHHR3Y.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"chunk-IXJHHR3Y.js"}

package/dist/chunk-IZC5YFGO.js

@@ -0,0 +1,226 @@
+import { Table, TableHeader, TableRow, TableHead, TableBody, TableCell } from './chunk-5SUD32RK.js';
+import { SkeletonLoader } from './chunk-QHKOBGLW.js';
+import { Checkbox } from './chunk-XETKCF73.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-IZC5YFGO.js.map
+//# sourceMappingURL=chunk-IZC5YFGO.js.map

package/dist/chunk-IZC5YFGO.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/VirtualTable/VirtualTable.tsx"],"names":["table"],"mappings":"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","file":"chunk-IZC5YFGO.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-JDTAG7KZ.js

@@ -0,0 +1,33 @@
+import { Loader2, OctagonX, TriangleAlert, Info, CircleCheck } from 'lucide-react';
+import { Toaster as Toaster$1 } from 'sonner';
+import { jsx } from 'react/jsx-runtime';
+
+// src/components/feedback/Toast/Toast.tsx
+var Toaster = ({ theme = "system", ...props }) => {
+  const resolvedTheme = theme;
+  return /* @__PURE__ */ jsx(
+    Toaster$1,
+    {
+      icons: {
+        success: /* @__PURE__ */ jsx(CircleCheck, { className: "size-4" }),
+        info: /* @__PURE__ */ jsx(Info, { className: "size-4" }),
+        warning: /* @__PURE__ */ jsx(TriangleAlert, { className: "size-4" }),
+        error: /* @__PURE__ */ jsx(OctagonX, { className: "size-4" }),
+        loading: /* @__PURE__ */ jsx(Loader2, { className: "size-4 animate-spin" })
+      },
+      style: {
+        "--normal-bg": "var(--popover-bg)",
+        "--normal-text": "var(--popover-fg)",
+        "--normal-border": "var(--popover-border)",
+        "--border-radius": "var(--popover-radius)"
+      },
+      className: "toaster group",
+      theme: resolvedTheme,
+      ...props
+    }
+  );
+};
+
+export { Toaster };
+//# sourceMappingURL=chunk-JDTAG7KZ.js.map
+//# sourceMappingURL=chunk-JDTAG7KZ.js.map

package/dist/chunk-JDTAG7KZ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/feedback/Toast/Toast.tsx"],"names":["Sonner"],"mappings":";;;;;AAaA,IAAM,UAAU,CAAC,EAAE,QAAQ,QAAA,EAAU,GAAG,OAAM,KAAoB;AAChE,EAAA,MAAM,aAAA,GAAgB,KAAA;AAEtB,EAAA,uBACE,GAAA;AAAA,IAACA,SAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO;AAAA,QACL,OAAA,kBAAS,GAAA,CAAC,WAAA,EAAA,EAAY,SAAA,EAAU,QAAA,EAAS,CAAA;AAAA,QACzC,IAAA,kBAAM,GAAA,CAAC,IAAA,EAAA,EAAK,SAAA,EAAU,QAAA,EAAS,CAAA;AAAA,QAC/B,OAAA,kBAAS,GAAA,CAAC,aAAA,EAAA,EAAc,SAAA,EAAU,QAAA,EAAS,CAAA;AAAA,QAC3C,KAAA,kBAAO,GAAA,CAAC,QAAA,EAAA,EAAS,SAAA,EAAU,QAAA,EAAS,CAAA;AAAA,QACpC,OAAA,kBAAS,GAAA,CAAC,OAAA,EAAA,EAAQ,SAAA,EAAU,qBAAA,EAAsB;AAAA,OACpD;AAAA,MACA,KAAA,EACE;AAAA,QACE,aAAA,EAAe,mBAAA;AAAA,QACf,eAAA,EAAiB,mBAAA;AAAA,QACjB,iBAAA,EAAmB,uBAAA;AAAA,QACnB,iBAAA,EAAmB;AAAA,OACrB;AAAA,MAEF,SAAA,EAAU,eAAA;AAAA,MACV,KAAA,EAAO,aAAA;AAAA,MACN,GAAG;AAAA;AAAA,GACN;AAEJ","file":"chunk-JDTAG7KZ.js","sourcesContent":["\"use client\"\n\nimport type { ToasterProps } from \"./Toast.types\"\n\nimport {\n  CircleCheck,\n  Info,\n  Loader2,\n  OctagonX,\n  TriangleAlert,\n} from \"lucide-react\"\nimport { Toaster as Sonner } from \"sonner\"\n\nconst Toaster = ({ theme = \"system\", ...props }: ToasterProps) => {\n  const resolvedTheme = theme as NonNullable<ToasterProps[\"theme\"]>\n\n  return (\n    <Sonner\n      icons={{\n        success: <CircleCheck className=\"size-4\" />,\n        info: <Info className=\"size-4\" />,\n        warning: <TriangleAlert className=\"size-4\" />,\n        error: <OctagonX className=\"size-4\" />,\n        loading: <Loader2 className=\"size-4 animate-spin\" />,\n      }}\n      style={\n        {\n          \"--normal-bg\": \"var(--popover-bg)\",\n          \"--normal-text\": \"var(--popover-fg)\",\n          \"--normal-border\": \"var(--popover-border)\",\n          \"--border-radius\": \"var(--popover-radius)\",\n        } as React.CSSProperties\n      }\n      className=\"toaster group\"\n      theme={resolvedTheme}\n      {...props}\n    />\n  )\n}\n\nexport { Toaster }\nexport type { ToasterProps, ToastOptions, ToastPosition, ToastPromiseOptions, ToastTheme } from \"./Toast.types\"\n"]}

package/dist/chunk-JPA2VQRW.js

@@ -0,0 +1,119 @@
+import { TextInput } from './chunk-PWCMCMDN.js';
+import { cn } from './chunk-HRNDJU7D.js';
+import { SearchIcon, XIcon } from 'lucide-react';
+import * as React from 'react';
+import { cva } from 'class-variance-authority';
+import { jsx } from 'react/jsx-runtime';
+
+var searchIconVariants = cva(
+  "flex items-center justify-center text-muted-foreground/80",
+  {
+    variants: {
+      size: {
+        xs: "[&_svg]:size-3",
+        sm: "[&_svg]:size-3.5",
+        md: "[&_svg]:size-4",
+        lg: "[&_svg]:size-4.5",
+        xl: "[&_svg]:size-5"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);
+var searchClearButtonVariants = cva(
+  [
+    "flex items-center justify-center",
+    "text-muted-foreground hover:text-foreground",
+    "transition-colors rounded-sm outline-none focus-visible:ring-2 focus-visible:ring-ring"
+  ],
+  {
+    variants: {
+      size: {
+        xs: "size-4 [&_svg]:size-3",
+        sm: "size-5 [&_svg]:size-3.5",
+        md: "size-6 [&_svg]:size-4",
+        lg: "size-7 [&_svg]:size-4.5",
+        xl: "size-8 [&_svg]:size-5"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);
+function SearchInput({
+  className,
+  size = "md",
+  variant = "default",
+  showClearButton = true,
+  onClear,
+  searchIcon,
+  clearIcon,
+  disabled,
+  value,
+  defaultValue,
+  onChange,
+  ...props
+}) {
+  const [internalValue, setInternalValue] = React.useState(defaultValue ?? "");
+  const isControlled = value !== void 0;
+  const currentValue = isControlled ? value : internalValue;
+  const hasValue = currentValue !== "";
+  const handleChange = React.useCallback(
+    (e) => {
+      if (!isControlled) {
+        setInternalValue(e.target.value);
+      }
+      onChange?.(e);
+    },
+    [isControlled, onChange]
+  );
+  const handleClear = React.useCallback(() => {
+    if (!isControlled) {
+      setInternalValue("");
+    }
+    onClear?.();
+  }, [isControlled, onClear]);
+  const showClear = showClearButton && hasValue;
+  const leading = /* @__PURE__ */ jsx("span", { className: cn(searchIconVariants({ size })), "data-slot": "search-icon", children: searchIcon ?? /* @__PURE__ */ jsx(SearchIcon, { "aria-hidden": "true" }) });
+  const trailing = showClear ? /* @__PURE__ */ jsx(
+    "button",
+    {
+      "aria-label": "Clear search",
+      className: cn(searchClearButtonVariants({ size })),
+      "data-slot": "clear-button",
+      disabled,
+      tabIndex: -1,
+      type: "button",
+      onClick: handleClear,
+      children: clearIcon ?? /* @__PURE__ */ jsx(XIcon, { "aria-hidden": "true" })
+    }
+  ) : void 0;
+  return /* @__PURE__ */ jsx(
+    TextInput,
+    {
+      className: cn(
+        // Hide native search clear button (WebKit)
+        "[&::-webkit-search-cancel-button]:hidden [&::-webkit-search-decoration]:hidden",
+        className
+      ),
+      "data-slot": "search-input",
+      disabled,
+      leadingIcon: leading,
+      size,
+      trailingIcon: trailing,
+      trailingIconInteractive: true,
+      type: "search",
+      value: currentValue,
+      variant,
+      onChange: handleChange,
+      ...props
+    }
+  );
+}
+
+export { SearchInput, searchClearButtonVariants, searchIconVariants };
+//# sourceMappingURL=chunk-JPA2VQRW.js.map
+//# sourceMappingURL=chunk-JPA2VQRW.js.map