gridular 2.2.0 → 3.1.0

package/dist/index.mjs

@@ -1,2766 +0,0 @@
-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));
-var __objRest = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
-
-// components/data-grid/data-grid.tsx
-import React15, { useState as useState6, useRef, useEffect as useEffect3, useMemo as useMemo3 } from "react";
-
-// lib/utils.ts
-import { clsx } from "clsx";
-import { twMerge } from "tailwind-merge";
-function cn(...inputs) {
-  return twMerge(clsx(inputs));
-}
-function mergeStyles(tssStyles, tailwindClasses) {
-  const tailwindClassString = Array.isArray(tailwindClasses) ? tailwindClasses.join(" ") : tailwindClasses;
-  if (!tssStyles) {
-    return { className: tailwindClassString };
-  }
-  const _a = tssStyles, { className: tssClassName } = _a, otherStyles = __objRest(_a, ["className"]);
-  const mergedClassName = tssClassName ? cn(tssClassName, tailwindClassString) : tailwindClassString;
-  return __spreadProps(__spreadValues({}, otherStyles), {
-    className: mergedClassName
-  });
-}
-
-// components/data-grid/table-header.tsx
-import React3, { useState as useState3 } from "react";
-
-// components/data-grid/filter-menu.tsx
-import React2, { useState as useState2, useEffect } from "react";
-
-// components/theme-provider/theme-provider.tsx
-import React, { createContext, useContext, useMemo, useState } from "react";
-import { createMakeStyles } from "tss-react";
-var lightTheme = {
-  colors: {
-    primary: "#536976",
-    // Logo slate - sophisticated primary
-    secondary: "#BBD2C5",
-    // Logo sage - elegant accent
-    background: "#fafbfc",
-    // Slightly off-white
-    foreground: "#292E49",
-    // Logo navy - strong text
-    muted: "rgba(187, 210, 197, 0.08)",
-    // Subtle sage tint
-    mutedForeground: "#536976",
-    // Logo slate for muted text
-    border: "rgba(83, 105, 118, 0.2)",
-    // Transparent slate
-    popover: "#ffffff",
-    accent: "#BBD2C5"
-    // Logo sage
-  }
-};
-var darkTheme = {
-  colors: {
-    primary: "#BBD2C5",
-    // Logo sage - glowing primary in dark
-    secondary: "#536976",
-    // Logo slate
-    background: "#0a0b0d",
-    // Deep technical black
-    foreground: "#e8eaed",
-    // Technical pearl
-    muted: "rgba(41, 46, 73, 0.3)",
-    // Logo navy transparency
-    mutedForeground: "#a8abb2",
-    // Technical silver
-    border: "rgba(83, 105, 118, 0.25)",
-    // Transparent slate
-    popover: "rgba(26, 28, 32, 0.95)",
-    // Semi-transparent charcoal
-    accent: "#BBD2C5"
-    // Logo sage
-  }
-};
-var defaultTailwindTheme = {
-  container: "bg-background border border-border/30 rounded-lg overflow-hidden shadow-sm",
-  header: "bg-muted/50 border-b border-border/40 backdrop-blur-sm",
-  headerCell: "text-foreground font-semibold px-4 py-3.5 text-sm font-sans tracking-tight border-r border-border/20 last:border-r-0 relative",
-  row: "border-b border-border/30 hover:bg-primary/5 transition-colors duration-200 group",
-  cell: "px-4 py-3 text-sm font-sans text-foreground/90",
-  pagination: "bg-background/50 border-t border-border/30 px-4 py-3 flex justify-between items-center font-sans text-sm",
-  filterMenu: "bg-popover border border-border/40 shadow-lg rounded-lg backdrop-blur-xl",
-  filterMenuContent: "p-4 space-y-3",
-  filterMenuHeader: "font-semibold mb-3 text-sm font-sans border-b border-border/30 pb-2",
-  filterMenuInput: "font-sans text-sm",
-  filterMenuClearButton: "font-sans text-sm font-medium",
-  filterMenuApplyButton: "font-sans text-sm font-semibold",
-  columnResizeHandle: "w-[3px] bg-border/40 hover:bg-primary cursor-col-resize h-full absolute right-0 top-0 transition-all duration-200 opacity-0 group-hover:opacity-100",
-  columnResizeHandleActive: "bg-primary opacity-100 w-[3px]",
-  sortIcon: "text-muted-foreground transition-all duration-200",
-  sortIconActive: "text-primary"
-};
-var createSpacingFunction = (baseSpacing = 4) => {
-  const spacingFn = (...args) => {
-    if (args.length === 0) return "0";
-    return args.map((factor) => factor === 0 ? "0" : `${factor * baseSpacing}px`).join(" ");
-  };
-  spacingFn.baseSpacing = baseSpacing;
-  return spacingFn;
-};
-var defaultTssTheme = {
-  colors: {
-    primary: "#2563eb",
-    // blue-600
-    secondary: "#6b7280",
-    // gray-500
-    background: "#ffffff",
-    foreground: "#020617",
-    // slate-950
-    muted: "#f1f5f9",
-    // slate-100
-    mutedForeground: "#64748b",
-    // slate-500
-    border: "#e2e8f0"
-    // slate-200
-  },
-  spacing: createSpacingFunction(4)
-};
-var defaultUnifiedTheme = {
-  classes: defaultTailwindTheme,
-  colors: defaultTssTheme.colors,
-  spacing: defaultTssTheme.spacing
-};
-var ThemeContext = createContext({
-  theme: defaultUnifiedTheme,
-  setTailwindTheme: () => {
-  },
-  setTssTheme: () => {
-  },
-  resetTheme: () => {
-  },
-  toggleThemeMode: () => {
-  }
-  // Add default no-op implementation
-});
-var ThemeProvider = ({
-  children,
-  initialTailwindTheme = {},
-  initialTssTheme = {},
-  darkMode = false
-}) => {
-  const baseTheme = darkMode ? darkTheme : lightTheme;
-  const [tailwindTheme, setTailwindThemeState] = useState(initialTailwindTheme);
-  const [tssTheme, setTssThemeState] = useState(() => {
-    const _a = initialTssTheme, { spacing } = _a, rest = __objRest(_a, ["spacing"]);
-    const processedSpacing = spacing !== void 0 ? typeof spacing === "number" ? createSpacingFunction(spacing) : spacing : void 0;
-    return __spreadValues(__spreadValues(__spreadValues({}, baseTheme), rest), processedSpacing && { spacing: processedSpacing });
-  });
-  const setTailwindTheme = (newTheme) => {
-    setTailwindThemeState((prev) => __spreadValues(__spreadValues({}, prev), newTheme));
-  };
-  const setTssTheme = (newTheme) => {
-    setTssThemeState((prev) => {
-      const updatedTheme = __spreadValues({}, prev);
-      if (newTheme.colors) {
-        updatedTheme.colors = __spreadValues(__spreadValues({}, prev.colors || {}), newTheme.colors);
-      }
-      if (newTheme.spacing !== void 0) {
-        if (typeof newTheme.spacing === "number") {
-          updatedTheme.spacing = createSpacingFunction(newTheme.spacing);
-        } else {
-          updatedTheme.spacing = newTheme.spacing;
-        }
-      }
-      const otherKeys = Object.keys(newTheme).filter(
-        (key) => key !== "colors" && key !== "spacing"
-      );
-      otherKeys.forEach((key) => {
-        updatedTheme[key] = newTheme[key];
-      });
-      return updatedTheme;
-    });
-  };
-  const resetTheme = () => {
-    setTailwindThemeState(initialTailwindTheme);
-    setTssThemeState(() => {
-      const _a = initialTssTheme, { spacing } = _a, rest = __objRest(_a, ["spacing"]);
-      const processedSpacing = spacing !== void 0 ? typeof spacing === "number" ? createSpacingFunction(spacing) : spacing : void 0;
-      return __spreadValues(__spreadValues(__spreadValues({}, baseTheme), rest), processedSpacing && { spacing: processedSpacing });
-    });
-  };
-  const toggleThemeMode = () => {
-    setTssThemeState((prev) => {
-      var _a, _b;
-      const isDarkMode = ((_a = prev.colors) == null ? void 0 : _a.background) === ((_b = darkTheme.colors) == null ? void 0 : _b.background);
-      const newBaseTheme = isDarkMode ? lightTheme : darkTheme;
-      return __spreadProps(__spreadValues({}, prev), {
-        colors: __spreadValues(__spreadValues({}, newBaseTheme.colors), Object.fromEntries(
-          Object.entries(prev.colors || {}).filter(
-            ([key]) => !(key in newBaseTheme.colors)
-          )
-        ))
-      });
-    });
-    setTailwindThemeState((prev) => {
-      var _a, _b;
-      const isDarkMode = ((_a = tssTheme.colors) == null ? void 0 : _a.background) === ((_b = darkTheme.colors) == null ? void 0 : _b.background);
-      const rowClass = isDarkMode ? "border-b border-border hover:bg-muted/30 transition-colors" : "border-b border-border hover:bg-muted/50 transition-colors";
-      return __spreadProps(__spreadValues({}, prev), {
-        row: rowClass
-        // Other class adjustments as needed
-      });
-    });
-  };
-  const value = useMemo(() => {
-    const mergedTailwindTheme = Object.keys(defaultTailwindTheme).reduce(
-      (acc, key) => {
-        const k = key;
-        acc[k] = tailwindTheme[k] !== void 0 ? cn(defaultTailwindTheme[k], tailwindTheme[k]) : defaultTailwindTheme[k];
-        return acc;
-      },
-      {}
-    );
-    const mergedTssTheme = {
-      colors: __spreadValues(__spreadValues({}, defaultTssTheme.colors), tssTheme.colors || {}),
-      spacing: tssTheme.spacing || defaultTssTheme.spacing
-    };
-    const otherKeys = Object.keys(tssTheme).filter(
-      (key) => key !== "colors" && key !== "spacing"
-    );
-    const extraProperties = {};
-    otherKeys.forEach((key) => {
-      extraProperties[key] = tssTheme[key];
-    });
-    const unifiedTheme = __spreadValues({
-      classes: mergedTailwindTheme,
-      colors: mergedTssTheme.colors,
-      spacing: mergedTssTheme.spacing
-    }, extraProperties);
-    return {
-      theme: unifiedTheme,
-      setTailwindTheme,
-      setTssTheme,
-      resetTheme,
-      toggleThemeMode
-      // Include the new toggle function
-    };
-  }, [tailwindTheme, tssTheme]);
-  return /* @__PURE__ */ React.createElement(ThemeContext.Provider, { value }, children);
-};
-var useTheme = () => useContext(ThemeContext);
-var useTailwindTheme = () => useTheme().theme.classes;
-var useTssTheme = () => ({
-  colors: useTheme().theme.colors,
-  spacing: useTheme().theme.spacing
-});
-var { makeStyles, useStyles: useTssStyles } = createMakeStyles({
-  useTheme: () => useTssTheme()
-});
-var useStyles = (stylesFn) => {
-  const { css, cx } = useTssStyles();
-  const styles = {};
-  const styleObj = stylesFn(useTssTheme());
-  Object.entries(styleObj).forEach(([key, value]) => {
-    styles[key] = css(value);
-  });
-  return { styles, cx };
-};
-
-// components/data-grid/filter-menu.tsx
-var FilterMenu = ({
-  column,
-  filterValue,
-  setFilterValue,
-  onApplyFilter,
-  onClearFilter,
-  isOpen,
-  onOpenChange,
-  trigger,
-  isActive = false,
-  classes = {},
-  renderHeader,
-  renderCurrentFilter,
-  renderInput,
-  renderButtons,
-  renderCustomContent,
-  totalColumns = 1
-}) => {
-  const { theme } = useTheme();
-  const [localFilterValue, setLocalFilterValue] = useState2(filterValue);
-  const menuRef = React2.useRef(null);
-  useEffect(() => {
-    setLocalFilterValue(filterValue);
-  }, [filterValue]);
-  useEffect(() => {
-    if (isOpen) {
-      setLocalFilterValue(filterValue);
-    }
-  }, [isOpen, filterValue]);
-  const handleApplyFilter = () => {
-    setFilterValue(localFilterValue);
-    onApplyFilter(localFilterValue);
-    onOpenChange(false);
-  };
-  const handleClearFilter = () => {
-    setLocalFilterValue("");
-    onClearFilter();
-    onOpenChange(false);
-  };
-  const handleKeyDown = (e) => {
-    if (e.key === "Enter") {
-      handleApplyFilter();
-    } else if (e.key === "Escape") {
-      onOpenChange(false);
-    }
-  };
-  if (!isOpen) {
-    return /* @__PURE__ */ React2.createElement("div", { className: "relative" }, /* @__PURE__ */ React2.createElement("div", { onClick: () => onOpenChange(true) }, trigger), isActive && /* @__PURE__ */ React2.createElement("div", { className: "absolute -top-1 -right-1 w-3 h-3 bg-primary rounded-full text-[10px] flex items-center justify-center text-primary-foreground" }, "\u2022"));
-  }
-  const menuContent = /* @__PURE__ */ React2.createElement("div", { className: cn("p-4", theme.classes.filterMenuContent) }, /* @__PURE__ */ React2.createElement(
-    "div",
-    {
-      className: cn(
-        "font-semibold mb-3 text-sm text-gray-700 dark:text-gray-200",
-        theme.classes.filterMenuHeader,
-        classes.header
-      )
-    },
-    renderHeader ? renderHeader(column, isActive) : /* @__PURE__ */ React2.createElement("div", { className: "flex items-center justify-between" }, /* @__PURE__ */ React2.createElement("span", null, "Filter: ", column.header), isActive && /* @__PURE__ */ React2.createElement(
-      "span",
-      {
-        className: cn(
-          "ml-2 text-xs px-2 py-0.5 rounded-full bg-blue-100 text-blue-700 dark:bg-blue-900 dark:text-blue-200",
-          classes.activeIndicator
-        )
-      },
-      "Active"
-    ))
-  ), isActive && filterValue && /* @__PURE__ */ React2.createElement("div", { className: "mb-3" }, renderCurrentFilter ? renderCurrentFilter(filterValue) : /* @__PURE__ */ React2.createElement(
-    "div",
-    {
-      className: cn(
-        "text-xs bg-gray-50 dark:bg-gray-800 p-2 rounded border border-gray-200 dark:border-gray-700",
-        classes.currentFilter
-      )
-    },
-    "Current: ",
-    /* @__PURE__ */ React2.createElement("strong", { className: "font-semibold" }, filterValue)
-  )), renderInput ? renderInput({
-    value: localFilterValue,
-    onChange: setLocalFilterValue,
-    onKeyDown: handleKeyDown,
-    isActive
-  }) : /* @__PURE__ */ React2.createElement(
-    "input",
-    {
-      type: "text",
-      value: localFilterValue,
-      onChange: (e) => setLocalFilterValue(e.target.value),
-      onKeyDown: handleKeyDown,
-      className: cn(
-        "w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md",
-        "focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent",
-        "bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100",
-        "placeholder-gray-400 dark:placeholder-gray-500",
-        theme.classes.filterMenuInput,
-        classes.input
-      ),
-      placeholder: "Filter value...",
-      autoFocus: true
-    }
-  ), renderButtons ? renderButtons({
-    onClear: handleClearFilter,
-    onApply: handleApplyFilter,
-    isActive
-  }) : /* @__PURE__ */ React2.createElement(
-    "div",
-    {
-      className: cn(
-        "flex justify-end mt-3 gap-2",
-        classes.buttonContainer
-      )
-    },
-    /* @__PURE__ */ React2.createElement(
-      "button",
-      {
-        onClick: handleClearFilter,
-        className: cn(
-          "px-4 py-2 text-sm font-medium rounded-md border border-gray-300 dark:border-gray-600",
-          "hover:bg-gray-50 dark:hover:bg-gray-800",
-          "text-gray-700 dark:text-gray-200",
-          "transition-colors",
-          theme.classes.filterMenuClearButton,
-          classes.clearButton
-        )
-      },
-      "Clear"
-    ),
-    /* @__PURE__ */ React2.createElement(
-      "button",
-      {
-        onClick: handleApplyFilter,
-        className: cn(
-          "px-4 py-2 text-sm font-medium rounded-md",
-          "bg-blue-600 hover:bg-blue-700 text-white",
-          "transition-colors",
-          theme.classes.filterMenuApplyButton,
-          classes.applyButton
-        )
-      },
-      "Apply"
-    )
-  ));
-  if (renderCustomContent) {
-    return /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement("div", null, trigger), /* @__PURE__ */ React2.createElement(
-      "div",
-      {
-        ref: menuRef,
-        className: cn(
-          "absolute top-full left-0 z-50 mt-2 min-w-[280px]",
-          "bg-white dark:bg-gray-900",
-          "border border-gray-200 dark:border-gray-700",
-          "rounded-lg shadow-xl",
-          "backdrop-blur-sm",
-          theme.classes.filterMenu,
-          classes.container,
-          column.index === totalColumns - 1 && "right-0 left-auto"
-        )
-      },
-      renderCustomContent({
-        column,
-        filterValue: localFilterValue,
-        setFilterValue: setLocalFilterValue,
-        onApply: handleApplyFilter,
-        onClear: handleClearFilter,
-        isActive
-      })
-    ));
-  }
-  return /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement("div", null, trigger), /* @__PURE__ */ React2.createElement(
-    "div",
-    {
-      ref: menuRef,
-      className: cn(
-        "absolute top-full left-0 z-50 mt-2 min-w-[280px]",
-        "bg-white dark:bg-gray-900",
-        "border border-gray-200 dark:border-gray-700",
-        "rounded-lg shadow-xl",
-        "backdrop-blur-sm",
-        theme.classes.filterMenu,
-        classes.container,
-        column.index === totalColumns - 1 && "right-0 left-auto"
-      )
-    },
-    menuContent
-  ));
-};
-
-// components/data-grid/table-header.tsx
-import {
-  ArrowDown,
-  ArrowUp,
-  ChevronDown,
-  ChevronUp,
-  Filter
-} from "lucide-react";
-function TableHeader({
-  columns,
-  sortState,
-  onSortChange,
-  enableSorting,
-  filterState,
-  filterMenuOpen,
-  onFilterMenuToggle,
-  columnWidths,
-  onColumnResize,
-  headerClassName,
-  filterValueRefs,
-  onApplyFilter,
-  onClearFilter,
-  onColumnReorder,
-  renderHeader = void 0,
-  renderSortIcon,
-  renderFilterIcon,
-  sortIconVariant = "arrows",
-  filterMenu,
-  filterMenuRef
-}) {
-  const { theme } = useTheme();
-  const [draggedColumn, setDraggedColumn] = useState3(null);
-  const [dragOverColumn, setDragOverColumn] = useState3(null);
-  const handleColumnResizeStart = (columnId, e) => {
-    e.preventDefault();
-    const startX = e.clientX;
-    const startWidth = columnWidths[columnId] || 150;
-    const handleMouseMove = (moveEvent) => {
-      const deltaX = moveEvent.clientX - startX;
-      const newWidth = Math.max(50, startWidth + deltaX);
-      onColumnResize(columnId, newWidth);
-    };
-    const handleMouseUp = () => {
-      document.removeEventListener("mousemove", handleMouseMove);
-      document.removeEventListener("mouseup", handleMouseUp);
-    };
-    document.addEventListener("mousemove", handleMouseMove);
-    document.addEventListener("mouseup", handleMouseUp);
-  };
-  const handleDragStart = (e, columnId) => {
-    e.dataTransfer.setData("text/plain", columnId);
-    e.dataTransfer.effectAllowed = "move";
-    setDraggedColumn(columnId);
-  };
-  const handleDragOver = (e, columnId) => {
-    e.preventDefault();
-    e.dataTransfer.dropEffect = "move";
-    if (draggedColumn && draggedColumn !== columnId) {
-      setDragOverColumn(columnId);
-    }
-  };
-  const handleDragEnter = (e) => {
-    e.preventDefault();
-  };
-  const handleDragLeave = () => {
-    setDragOverColumn(null);
-  };
-  const handleDrop = (e, targetId) => {
-    e.preventDefault();
-    const sourceId = e.dataTransfer.getData("text/plain");
-    if (sourceId && targetId && sourceId !== targetId) {
-      onColumnReorder(sourceId, targetId);
-    }
-    setDraggedColumn(null);
-    setDragOverColumn(null);
-  };
-  const handleDragEnd = () => {
-    setDraggedColumn(null);
-    setDragOverColumn(null);
-  };
-  const defaultSortIcon = (column, sortDirection) => {
-    if (!sortDirection) return null;
-    if (sortIconVariant === "none") return null;
-    if (sortIconVariant === "chevrons") {
-      return sortDirection === "asc" ? /* @__PURE__ */ React3.createElement(ChevronUp, { className: "ml-1 h-3 w-3 text-primary" }) : /* @__PURE__ */ React3.createElement(ChevronDown, { className: "ml-1 h-3 w-3 text-primary" });
-    }
-    return sortDirection === "asc" ? /* @__PURE__ */ React3.createElement(ArrowUp, { className: "ml-1 h-3 w-3 text-primary" }) : /* @__PURE__ */ React3.createElement(ArrowDown, { className: "ml-1 h-3 w-3 text-primary" });
-  };
-  const defaultFilterIcon = (column, isActive) => {
-    return /* @__PURE__ */ React3.createElement(
-      Filter,
-      {
-        className: cn(
-          "h-3.5 w-3.5 transition-colors",
-          isActive ? "text-blue-500 fill-blue-100" : "text-gray-400 hover:text-gray-600"
-        )
-      }
-    );
-  };
-  console.info(!!renderSortIcon);
-  return /* @__PURE__ */ React3.createElement("thead", null, /* @__PURE__ */ React3.createElement("tr", { className: cn(theme.classes.header, headerClassName) }, columns.map((column, index) => {
-    column = __spreadProps(__spreadValues({}, column), { index });
-    const sortDirection = sortState && sortState.column === column.id ? sortState.direction : null;
-    const hasActiveFilter = !!(filterState == null ? void 0 : filterState[column.id]);
-    const width = columnWidths[column.id] || column.width || 150;
-    return /* @__PURE__ */ React3.createElement(
-      "th",
-      {
-        key: column.id,
-        className: cn(
-          theme.classes.headerCell,
-          column.headerClassName,
-          dragOverColumn === column.id && "bg-primary/10"
-        ),
-        style: {
-          width: `${width}px`,
-          minWidth: `${width}px`,
-          maxWidth: `${width}px`,
-          position: "relative"
-        },
-        draggable: true,
-        onDragStart: (e) => handleDragStart(e, column.id),
-        onDragOver: (e) => handleDragOver(e, column.id),
-        onDragEnter: handleDragEnter,
-        onDragLeave: handleDragLeave,
-        onDrop: (e) => handleDrop(e, column.id),
-        onDragEnd: handleDragEnd,
-        role: "columnheader",
-        "aria-label": column.header
-      },
-      /* @__PURE__ */ React3.createElement("div", { className: "flex items-center justify-between" }, /* @__PURE__ */ React3.createElement(
-        "div",
-        {
-          className: cn(
-            "cursor-pointer flex items-center",
-            enableSorting && column.enableSorting !== false && "hover:text-foreground"
-          ),
-          onClick: () => {
-            if (enableSorting && column.enableSorting !== false) {
-              onSortChange(column.id);
-            }
-          }
-        },
-        renderHeader ? renderHeader(column, sortDirection) : /* @__PURE__ */ React3.createElement(React3.Fragment, null, /* @__PURE__ */ React3.createElement("span", null, column.header), enableSorting && column.enableSorting !== false && /* @__PURE__ */ React3.createElement(React3.Fragment, null, sortDirection && /* @__PURE__ */ React3.createElement("span", { className: "inline-flex ml-1", role: "img" }, renderSortIcon ? renderSortIcon(column, sortDirection) : defaultSortIcon(column, sortDirection))))
-      ), column.enableFiltering !== false && /* @__PURE__ */ React3.createElement(
-        "div",
-        {
-          className: "flex items-center",
-          ref: filterMenuOpen === column.id ? filterMenuRef : null
-        },
-        /* @__PURE__ */ React3.createElement(
-          FilterMenu,
-          __spreadValues({
-            column: __spreadProps(__spreadValues({}, column), { index }),
-            totalColumns: columns.length,
-            filterValue: filterValueRefs.current[column.id] || "",
-            setFilterValue: (value) => {
-              filterValueRefs.current[column.id] = value;
-            },
-            onApplyFilter,
-            onClearFilter,
-            isOpen: filterMenuOpen === column.id,
-            onOpenChange: (open) => {
-              onFilterMenuToggle(open ? column.id : null);
-            },
-            isActive: hasActiveFilter,
-            trigger: /* @__PURE__ */ React3.createElement(
-              "button",
-              {
-                onClick: (e) => {
-                  e.stopPropagation();
-                  onFilterMenuToggle(
-                    filterMenuOpen === column.id ? null : column.id
-                  );
-                },
-                className: "p-1 rounded hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-1"
-              },
-              renderFilterIcon ? renderFilterIcon(column, hasActiveFilter) : defaultFilterIcon(column, hasActiveFilter)
-            )
-          }, filterMenu)
-        )
-      )),
-      column.enableResize !== false && /* @__PURE__ */ React3.createElement(
-        "div",
-        {
-          className: cn(theme.classes.columnResizeHandle),
-          onMouseDown: (e) => handleColumnResizeStart(column.id, e)
-        }
-      )
-    );
-  })));
-}
-
-// components/data-grid/table-body.tsx
-import React9 from "react";
-
-// components/data-grid/group-row.tsx
-import React4 from "react";
-import { ChevronRight, ChevronDown as ChevronDown2 } from "lucide-react";
-function GroupRow({
-  columnId,
-  value,
-  depth,
-  isExpanded,
-  onToggleExpand,
-  count,
-  columns,
-  groupKey,
-  formatter,
-  renderGroupRow,
-  expandIcon,
-  collapseIcon,
-  // Style props
-  className,
-  rowClassName,
-  cellClassName,
-  contentClassName,
-  labelClassName,
-  iconClassName,
-  countClassName,
-  indentSize = 16,
-  // Style objects
-  style,
-  rowStyle,
-  cellStyle,
-  contentStyle
-}) {
-  const formattedValue = formatter ? formatter(value) : value;
-  const displayValue = value === null || value === void 0 ? "(empty)" : formattedValue;
-  if (renderGroupRow) {
-    return /* @__PURE__ */ React4.createElement(
-      "tr",
-      {
-        className: cn("group-row bg-muted/30", rowClassName, className),
-        style: __spreadValues(__spreadValues({}, rowStyle), style)
-      },
-      /* @__PURE__ */ React4.createElement(
-        "td",
-        {
-          colSpan: columns,
-          className: cn("p-2 border-b", cellClassName),
-          onClick: onToggleExpand,
-          style: __spreadValues({ cursor: "pointer" }, cellStyle)
-        },
-        renderGroupRow({
-          groupKey,
-          columnId,
-          value,
-          depth,
-          isExpanded,
-          onToggleExpand,
-          count
-        })
-      )
-    );
-  }
-  return /* @__PURE__ */ React4.createElement(
-    "tr",
-    {
-      className: cn("group-row bg-muted/20", rowClassName, className),
-      style: __spreadValues(__spreadValues({}, rowStyle), style)
-    },
-    /* @__PURE__ */ React4.createElement(
-      "td",
-      {
-        colSpan: columns,
-        className: cn("p-2 border-b", cellClassName),
-        onClick: onToggleExpand,
-        style: __spreadValues({ cursor: "pointer" }, cellStyle)
-      },
-      /* @__PURE__ */ React4.createElement(
-        "div",
-        {
-          className: cn("flex items-center", contentClassName),
-          style: contentStyle
-        },
-        /* @__PURE__ */ React4.createElement(
-          "div",
-          {
-            style: __spreadValues({ marginLeft: `${depth * indentSize}px` }, contentStyle),
-            className: cn("flex items-center text-sm")
-          },
-          /* @__PURE__ */ React4.createElement("button", { className: cn("mr-1 focus:outline-none", iconClassName) }, isExpanded ? collapseIcon || /* @__PURE__ */ React4.createElement(ChevronDown2, { className: "h-3.5 w-3.5" }) : expandIcon || /* @__PURE__ */ React4.createElement(ChevronRight, { className: "h-3.5 w-3.5" })),
-          /* @__PURE__ */ React4.createElement("span", { className: cn(labelClassName) }, displayValue, /* @__PURE__ */ React4.createElement("span", { className: cn(countClassName) }, "(", count, ")"))
-        )
-      )
-    )
-  );
-}
-
-// components/data-grid/table-body.tsx
-import { ChevronDown as ChevronDown3, ChevronRight as ChevronRight2 } from "lucide-react";
-
-// components/data-grid/table-row.tsx
-import React7 from "react";
-
-// components/data-grid/table-cell.tsx
-import React6 from "react";
-
-// components/ui/context-menu.tsx
-import * as React5 from "react";
-import * as ContextMenuPrimitive from "@radix-ui/react-context-menu";
-import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react";
-function ContextMenu(_a) {
-  var props = __objRest(_a, []);
-  return /* @__PURE__ */ React5.createElement(ContextMenuPrimitive.Root, __spreadValues({ "data-slot": "context-menu" }, props));
-}
-function ContextMenuTrigger(_a) {
-  var props = __objRest(_a, []);
-  return /* @__PURE__ */ React5.createElement(ContextMenuPrimitive.Trigger, __spreadValues({ "data-slot": "context-menu-trigger" }, props));
-}
-function ContextMenuGroup(_a) {
-  var props = __objRest(_a, []);
-  return /* @__PURE__ */ React5.createElement(ContextMenuPrimitive.Group, __spreadValues({ "data-slot": "context-menu-group" }, props));
-}
-function ContextMenuPortal(_a) {
-  var props = __objRest(_a, []);
-  return /* @__PURE__ */ React5.createElement(ContextMenuPrimitive.Portal, __spreadValues({ "data-slot": "context-menu-portal" }, props));
-}
-function ContextMenuSub(_a) {
-  var props = __objRest(_a, []);
-  return /* @__PURE__ */ React5.createElement(ContextMenuPrimitive.Sub, __spreadValues({ "data-slot": "context-menu-sub" }, props));
-}
-function ContextMenuRadioGroup(_a) {
-  var props = __objRest(_a, []);
-  return /* @__PURE__ */ React5.createElement(
-    ContextMenuPrimitive.RadioGroup,
-    __spreadValues({
-      "data-slot": "context-menu-radio-group"
-    }, props)
-  );
-}
-function ContextMenuSubTrigger(_a) {
-  var _b = _a, {
-    className,
-    inset,
-    children
-  } = _b, props = __objRest(_b, [
-    "className",
-    "inset",
-    "children"
-  ]);
-  return /* @__PURE__ */ React5.createElement(
-    ContextMenuPrimitive.SubTrigger,
-    __spreadValues({
-      "data-slot": "context-menu-sub-trigger",
-      "data-inset": inset,
-      className: cn(
-        "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className
-      )
-    }, props),
-    children,
-    /* @__PURE__ */ React5.createElement(ChevronRightIcon, { className: "ml-auto" })
-  );
-}
-function ContextMenuSubContent(_a) {
-  var _b = _a, {
-    className
-  } = _b, props = __objRest(_b, [
-    "className"
-  ]);
-  return /* @__PURE__ */ React5.createElement(
-    ContextMenuPrimitive.SubContent,
-    __spreadValues({
-      "data-slot": "context-menu-sub-content",
-      className: cn(
-        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-context-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
-        className
-      )
-    }, props)
-  );
-}
-function ContextMenuContent(_a) {
-  var _b = _a, {
-    className
-  } = _b, props = __objRest(_b, [
-    "className"
-  ]);
-  return /* @__PURE__ */ React5.createElement(ContextMenuPrimitive.Portal, null, /* @__PURE__ */ React5.createElement(
-    ContextMenuPrimitive.Content,
-    __spreadValues({
-      "data-slot": "context-menu-content",
-      className: cn(
-        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-context-menu-content-available-height) min-w-[8rem] origin-(--radix-context-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
-        className
-      )
-    }, props)
-  ));
-}
-function ContextMenuItem(_a) {
-  var _b = _a, {
-    className,
-    inset,
-    variant = "default"
-  } = _b, props = __objRest(_b, [
-    "className",
-    "inset",
-    "variant"
-  ]);
-  return /* @__PURE__ */ React5.createElement(
-    ContextMenuPrimitive.Item,
-    __spreadValues({
-      "data-slot": "context-menu-item",
-      "data-inset": inset,
-      "data-variant": variant,
-      className: cn(
-        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className
-      )
-    }, props)
-  );
-}
-function ContextMenuCheckboxItem(_a) {
-  var _b = _a, {
-    className,
-    children,
-    checked
-  } = _b, props = __objRest(_b, [
-    "className",
-    "children",
-    "checked"
-  ]);
-  return /* @__PURE__ */ React5.createElement(
-    ContextMenuPrimitive.CheckboxItem,
-    __spreadValues({
-      "data-slot": "context-menu-checkbox-item",
-      className: cn(
-        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className
-      ),
-      checked
-    }, props),
-    /* @__PURE__ */ React5.createElement("span", { className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center" }, /* @__PURE__ */ React5.createElement(ContextMenuPrimitive.ItemIndicator, null, /* @__PURE__ */ React5.createElement(CheckIcon, { className: "size-4" }))),
-    children
-  );
-}
-function ContextMenuRadioItem(_a) {
-  var _b = _a, {
-    className,
-    children
-  } = _b, props = __objRest(_b, [
-    "className",
-    "children"
-  ]);
-  return /* @__PURE__ */ React5.createElement(
-    ContextMenuPrimitive.RadioItem,
-    __spreadValues({
-      "data-slot": "context-menu-radio-item",
-      className: cn(
-        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className
-      )
-    }, props),
-    /* @__PURE__ */ React5.createElement("span", { className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center" }, /* @__PURE__ */ React5.createElement(ContextMenuPrimitive.ItemIndicator, null, /* @__PURE__ */ React5.createElement(CircleIcon, { className: "size-2 fill-current" }))),
-    children
-  );
-}
-function ContextMenuLabel(_a) {
-  var _b = _a, {
-    className,
-    inset
-  } = _b, props = __objRest(_b, [
-    "className",
-    "inset"
-  ]);
-  return /* @__PURE__ */ React5.createElement(
-    ContextMenuPrimitive.Label,
-    __spreadValues({
-      "data-slot": "context-menu-label",
-      "data-inset": inset,
-      className: cn(
-        "text-foreground px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
-        className
-      )
-    }, props)
-  );
-}
-function ContextMenuSeparator(_a) {
-  var _b = _a, {
-    className
-  } = _b, props = __objRest(_b, [
-    "className"
-  ]);
-  return /* @__PURE__ */ React5.createElement(
-    ContextMenuPrimitive.Separator,
-    __spreadValues({
-      "data-slot": "context-menu-separator",
-      className: cn("bg-border -mx-1 my-1 h-px", className)
-    }, props)
-  );
-}
-function ContextMenuShortcut(_a) {
-  var _b = _a, {
-    className
-  } = _b, props = __objRest(_b, [
-    "className"
-  ]);
-  return /* @__PURE__ */ React5.createElement(
-    "span",
-    __spreadValues({
-      "data-slot": "context-menu-shortcut",
-      className: cn(
-        "text-muted-foreground ml-auto text-xs tracking-widest",
-        className
-      )
-    }, props)
-  );
-}
-
-// components/data-grid/table-cell.tsx
-var TableCell = ({
-  column,
-  row,
-  cellClassName,
-  isSelected = false,
-  onSelect,
-  contextMenuContent,
-  selectedCellClassName = "ring-2 ring-primary ring-inset",
-  preventRowSelection = true,
-  enableExpandableRows = false,
-  isExpanded = false,
-  onToggleExpand,
-  expandIcon,
-  collapseIcon
-}) => {
-  const themeClasses = useTailwindTheme();
-  const cellContent = column.renderCell ? column.renderCell(row) : column.cell ? column.cell(row) : row[column.id];
-  const content = /* @__PURE__ */ React6.createElement("div", { className: "relative z-0 flex items-center gap-2" }, enableExpandableRows && /* @__PURE__ */ React6.createElement(
-    "button",
-    {
-      onClick: (e) => {
-        e.stopPropagation();
-        onToggleExpand == null ? void 0 : onToggleExpand();
-      },
-      className: "p-1 rounded hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors",
-      "aria-label": isExpanded ? "Collapse row" : "Expand row"
-    },
-    isExpanded ? expandIcon : collapseIcon
-  ), /* @__PURE__ */ React6.createElement("span", { className: "flex-1" }, cellContent));
-  const cell = contextMenuContent ? /* @__PURE__ */ React6.createElement(
-    ContextMenu,
-    {
-      onOpenChange: (open) => {
-        if (onSelect) {
-          if (open) {
-            onSelect(true);
-          } else {
-            onSelect(false);
-          }
-        }
-      }
-    },
-    /* @__PURE__ */ React6.createElement(ContextMenuTrigger, { className: "flex h-full w-full" }, content),
-    contextMenuContent(row, column)
-  ) : content;
-  return /* @__PURE__ */ React6.createElement(
-    "td",
-    {
-      className: cn(
-        themeClasses.cell,
-        // Apply theme cell class
-        column.cellClassName,
-        // Apply column-specific cell class
-        cellClassName,
-        // Apply custom cell class passed as prop
-        // Use an approach that works with border-collapse
-        isSelected ? "relative after:absolute after:inset-0 after:pointer-events-none" : ""
-      ),
-      style: {
-        width: column.width || 150,
-        minWidth: column.width || 150,
-        maxWidth: column.width || 150,
-        cursor: onSelect ? "pointer" : "default"
-      },
-      onClick: (e) => {
-        if (onSelect) {
-          onSelect(!isSelected);
-          if (preventRowSelection) {
-            e.stopPropagation();
-          }
-        }
-      }
-    },
-    cell,
-    isSelected && /* @__PURE__ */ React6.createElement(
-      "div",
-      {
-        className: cn(
-          "absolute inset-0 pointer-events-none z-10",
-          selectedCellClassName
-        ),
-        "aria-hidden": "true"
-      }
-    )
-  );
-};
-
-// components/data-grid/table-row.tsx
-function TableRow({
-  row,
-  columns,
-  rowId,
-  isSelected,
-  onRowSelect,
-  onRowClick,
-  selectedRowClassName,
-  rowClassName,
-  cellClassName,
-  columnWidths,
-  selectedCell,
-  onCellSelect,
-  selectedCellClassName,
-  preventRowSelection,
-  contextMenuContent,
-  enableExpandableRows = false,
-  isExpanded = false,
-  onToggleExpand,
-  expandIcon,
-  collapseIcon
-}) {
-  return /* @__PURE__ */ React7.createElement(
-    "tr",
-    {
-      className: cn(
-        "border-b border-border/30 hover:bg-primary/5 transition-colors duration-200 group",
-        isSelected && (selectedRowClassName || "bg-primary/10"),
-        rowClassName
-      ),
-      onClick: () => {
-        if (onRowSelect) {
-          onRowSelect();
-        }
-        if (onRowClick) {
-          onRowClick(row);
-        }
-      },
-      style: {
-        cursor: onRowSelect || onRowClick ? "pointer" : "default"
-      }
-    },
-    columns.map((column, index) => {
-      const isCellSelected = selectedCell && selectedCell.rowId === rowId && selectedCell.columnId === column.id;
-      return /* @__PURE__ */ React7.createElement(
-        TableCell,
-        {
-          key: `${rowId}-${column.id}`,
-          column: __spreadProps(__spreadValues({}, column), {
-            width: columnWidths[column.id] || column.width
-          }),
-          row,
-          cellClassName,
-          isSelected: !!isCellSelected,
-          selectedCellClassName,
-          onSelect: (selected) => {
-            if (onCellSelect) {
-              if (selected) {
-                onCellSelect(rowId, column.id);
-              } else {
-                onCellSelect("", "");
-              }
-            }
-          },
-          preventRowSelection,
-          contextMenuContent,
-          enableExpandableRows: enableExpandableRows && index === 0,
-          isExpanded,
-          onToggleExpand,
-          expandIcon,
-          collapseIcon
-        }
-      );
-    })
-  );
-}
-
-// components/data-grid/expandable-row.tsx
-import React8 from "react";
-function ExpandableRow({
-  row,
-  rowId,
-  columns,
-  isExpanded,
-  onToggleExpand,
-  renderExpandedContent,
-  expandIcon,
-  collapseIcon,
-  expandButtonClassName
-}) {
-  if (!isExpanded) return null;
-  return /* @__PURE__ */ React8.createElement("tr", { key: `${rowId}-expanded`, className: "border-b bg-gray-50 dark:bg-gray-900" }, /* @__PURE__ */ React8.createElement("td", { colSpan: columns.length, className: "p-0" }, /* @__PURE__ */ React8.createElement("div", { className: "px-4 py-3 bg-white dark:bg-gray-950 border-t" }, renderExpandedContent(row))));
-}
-
-// components/data-grid/table-body.tsx
-var TableBody = ({
-  paginatedData,
-  columns,
-  selectedRows,
-  enableRowSelection,
-  onRowSelect,
-  onRowClick,
-  rowClassName,
-  cellClassName,
-  columnWidths,
-  theme,
-  selectedRowClassName,
-  enableGrouping = false,
-  groupingState,
-  toggleGroupExpanded,
-  renderGroupRow,
-  groupExpandIcon = /* @__PURE__ */ React9.createElement(ChevronDown3, { className: "h-4 w-4" }),
-  groupCollapseIcon = /* @__PURE__ */ React9.createElement(ChevronRight2, { className: "h-4 w-4" }),
-  groupRowProps = {},
-  selectedCell = null,
-  onCellSelect,
-  selectedCellClassName = "ring-2 ring-primary ring-inset",
-  preventRowSelection,
-  contextMenuContent,
-  enableExpandableRows = false,
-  expandedRows = {},
-  onToggleRowExpand,
-  renderExpandedRow,
-  expandIcon = /* @__PURE__ */ React9.createElement(ChevronDown3, { className: "h-4 w-4" }),
-  collapseIcon = /* @__PURE__ */ React9.createElement(ChevronRight2, { className: "h-4 w-4" }),
-  getRowId = (row, index) => row.id || `row-${index}`
-}) => {
-  return /* @__PURE__ */ React9.createElement("tbody", { className: theme.classes.tbody }, paginatedData.map((row, rowIndex) => {
-    if (enableGrouping && row.isGroupRow) {
-      return /* @__PURE__ */ React9.createElement(
-        GroupRow,
-        __spreadValues({
-          key: row.groupKey,
-          columnId: row.columnId,
-          value: row.groupValue,
-          depth: row.depth,
-          isExpanded: (groupingState == null ? void 0 : groupingState.expandedGroups[row.groupKey]) || false,
-          onToggleExpand: () => toggleGroupExpanded == null ? void 0 : toggleGroupExpanded(row.groupKey),
-          count: row.count,
-          columns: columns.length,
-          groupKey: row.groupKey,
-          expandIcon: groupExpandIcon,
-          collapseIcon: groupCollapseIcon,
-          renderGroupRow
-        }, groupRowProps)
-      );
-    }
-    const rowId = getRowId(row, rowIndex);
-    const isSelected = selectedRows[rowId];
-    const isExpanded = expandedRows[rowId] || false;
-    return /* @__PURE__ */ React9.createElement(React9.Fragment, { key: rowId }, /* @__PURE__ */ React9.createElement(
-      TableRow,
-      {
-        row,
-        rowId,
-        columns,
-        isSelected,
-        onRowSelect: enableRowSelection ? () => onRowSelect(rowId) : void 0,
-        onRowClick,
-        selectedRowClassName,
-        rowClassName,
-        cellClassName,
-        columnWidths,
-        selectedCell,
-        onCellSelect,
-        selectedCellClassName,
-        preventRowSelection,
-        contextMenuContent,
-        enableExpandableRows,
-        isExpanded,
-        onToggleExpand: enableExpandableRows && onToggleRowExpand ? () => onToggleRowExpand(rowId) : void 0,
-        expandIcon,
-        collapseIcon
-      }
-    ), enableExpandableRows && isExpanded && renderExpandedRow && /* @__PURE__ */ React9.createElement(
-      ExpandableRow,
-      {
-        row,
-        rowId,
-        columns,
-        isExpanded,
-        onToggleExpand: () => onToggleRowExpand == null ? void 0 : onToggleRowExpand(rowId),
-        renderExpandedContent: renderExpandedRow,
-        expandIcon,
-        collapseIcon
-      }
-    ));
-  }));
-};
-
-// components/data-grid/pagination.tsx
-import React10 from "react";
-var Pagination = ({
-  pageIndex,
-  pageCount,
-  pageSize,
-  totalRows,
-  setPageIndex,
-  setPageSize,
-  pageSizeOptions,
-  processedDataLength,
-  // Custom props
-  className,
-  showFirstLastButtons = true,
-  showPageSizeSelector = true,
-  showPageInfo = true,
-  renderPageSizeSelector,
-  renderPageInfo,
-  renderFirstPageButton,
-  renderPrevPageButton,
-  renderNextPageButton,
-  renderLastPageButton,
-  pageSizeClassName,
-  pageInfoClassName,
-  buttonsClassName,
-  buttonClassName
-}) => {
-  const start = processedDataLength === 0 ? 0 : pageIndex * pageSize + 1;
-  const end = Math.min((pageIndex + 1) * pageSize, totalRows);
-  const isFirstPage = pageIndex === 0;
-  const isLastPage = pageIndex >= pageCount - 1;
-  const handlePageSizeChange = (size) => {
-    setPageSize(size);
-    setPageIndex(0);
-  };
-  const goToFirstPage = () => setPageIndex(0);
-  const goToPrevPage = () => setPageIndex(Math.max(0, pageIndex - 1));
-  const goToNextPage = () => setPageIndex(Math.min(pageCount - 1, pageIndex + 1));
-  const goToLastPage = () => setPageIndex(pageCount - 1);
-  return /* @__PURE__ */ React10.createElement("div", { className: cn("px-4 py-3 flex items-center justify-between border-t border-gray-200 dark:border-gray-700", className) }, showPageSizeSelector && /* @__PURE__ */ React10.createElement("div", { className: cn("flex items-center gap-3", pageSizeClassName) }, renderPageSizeSelector ? renderPageSizeSelector({
-    pageSize,
-    options: pageSizeOptions,
-    onChange: handlePageSizeChange
-  }) : /* @__PURE__ */ React10.createElement(React10.Fragment, null, /* @__PURE__ */ React10.createElement("span", { className: "text-sm text-gray-600 dark:text-gray-400 font-medium" }, "Rows per page:"), /* @__PURE__ */ React10.createElement(
-    "select",
-    {
-      value: pageSize,
-      onChange: (e) => handlePageSizeChange(Number(e.target.value)),
-      className: "border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 px-3 py-1.5 text-sm rounded-md hover:border-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors cursor-pointer"
-    },
-    pageSizeOptions.map((option) => /* @__PURE__ */ React10.createElement("option", { key: option, value: option }, option))
-  ))), /* @__PURE__ */ React10.createElement(
-    "div",
-    {
-      className: cn("flex items-center gap-4", buttonsClassName)
-    },
-    showPageInfo && /* @__PURE__ */ React10.createElement("div", { className: cn("text-sm text-gray-600 dark:text-gray-400", pageInfoClassName) }, renderPageInfo ? renderPageInfo({ start, end, total: totalRows }) : /* @__PURE__ */ React10.createElement("span", null, start, "\u2013", end, " of ", totalRows)),
-    /* @__PURE__ */ React10.createElement("div", { className: "flex items-center gap-1" }, showFirstLastButtons && (renderFirstPageButton ? renderFirstPageButton({
-      onClick: goToFirstPage,
-      disabled: isFirstPage
-    }) : /* @__PURE__ */ React10.createElement(
-      "button",
-      {
-        onClick: goToFirstPage,
-        disabled: isFirstPage,
-        className: cn(
-          "h-8 w-8 rounded-md border border-gray-300 dark:border-gray-600",
-          "bg-white dark:bg-gray-800",
-          "hover:bg-gray-50 dark:hover:bg-gray-700",
-          "text-gray-700 dark:text-gray-300",
-          "disabled:opacity-40 disabled:cursor-not-allowed",
-          "transition-colors",
-          "flex items-center justify-center text-sm",
-          buttonClassName
-        )
-      },
-      "<<"
-    )), renderPrevPageButton ? renderPrevPageButton({
-      onClick: goToPrevPage,
-      disabled: isFirstPage
-    }) : /* @__PURE__ */ React10.createElement(
-      "button",
-      {
-        onClick: goToPrevPage,
-        disabled: isFirstPage,
-        className: cn(
-          "h-8 w-8 rounded-md border border-gray-300 dark:border-gray-600",
-          "bg-white dark:bg-gray-800",
-          "hover:bg-gray-50 dark:hover:bg-gray-700",
-          "text-gray-700 dark:text-gray-300",
-          "disabled:opacity-40 disabled:cursor-not-allowed",
-          "transition-colors",
-          "flex items-center justify-center text-sm",
-          buttonClassName
-        )
-      },
-      "<"
-    ), renderNextPageButton ? renderNextPageButton({
-      onClick: goToNextPage,
-      disabled: isLastPage
-    }) : /* @__PURE__ */ React10.createElement(
-      "button",
-      {
-        onClick: goToNextPage,
-        disabled: isLastPage,
-        className: cn(
-          "h-8 w-8 rounded-md border border-gray-300 dark:border-gray-600",
-          "bg-white dark:bg-gray-800",
-          "hover:bg-gray-50 dark:hover:bg-gray-700",
-          "text-gray-700 dark:text-gray-300",
-          "disabled:opacity-40 disabled:cursor-not-allowed",
-          "transition-colors",
-          "flex items-center justify-center text-sm",
-          buttonClassName
-        )
-      },
-      ">"
-    ), showFirstLastButtons && (renderLastPageButton ? renderLastPageButton({
-      onClick: goToLastPage,
-      disabled: isLastPage
-    }) : /* @__PURE__ */ React10.createElement(
-      "button",
-      {
-        onClick: goToLastPage,
-        disabled: isLastPage,
-        className: cn(
-          "h-8 w-8 rounded-md border border-gray-300 dark:border-gray-600",
-          "bg-white dark:bg-gray-800",
-          "hover:bg-gray-50 dark:hover:bg-gray-700",
-          "text-gray-700 dark:text-gray-300",
-          "disabled:opacity-40 disabled:cursor-not-allowed",
-          "transition-colors",
-          "flex items-center justify-center text-sm",
-          buttonClassName
-        )
-      },
-      ">>"
-    )))
-  ));
-};
-
-// components/data-grid/column-manager.tsx
-import React13 from "react";
-
-// components/ui/dropdown-menu.tsx
-import * as React11 from "react";
-import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
-import { Check, ChevronRight as ChevronRight3, Circle } from "lucide-react";
-var DropdownMenu = DropdownMenuPrimitive.Root;
-var DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
-var DropdownMenuGroup = DropdownMenuPrimitive.Group;
-var DropdownMenuPortal = DropdownMenuPrimitive.Portal;
-var DropdownMenuSub = DropdownMenuPrimitive.Sub;
-var DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
-var DropdownMenuSubTrigger = React11.forwardRef((_a, ref) => {
-  var _b = _a, { className, inset, children } = _b, props = __objRest(_b, ["className", "inset", "children"]);
-  return /* @__PURE__ */ React11.createElement(
-    DropdownMenuPrimitive.SubTrigger,
-    __spreadValues({
-      ref,
-      className: cn(
-        "flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
-        inset && "pl-8",
-        className
-      )
-    }, props),
-    children,
-    /* @__PURE__ */ React11.createElement(ChevronRight3, { className: "ml-auto" })
-  );
-});
-DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;
-var DropdownMenuSubContent = React11.forwardRef((_a, ref) => {
-  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ React11.createElement(
-    DropdownMenuPrimitive.SubContent,
-    __spreadValues({
-      ref,
-      className: cn(
-        "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-        className
-      )
-    }, props)
-  );
-});
-DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;
-var DropdownMenuContent = React11.forwardRef((_a, ref) => {
-  var _b = _a, { className, sideOffset = 4 } = _b, props = __objRest(_b, ["className", "sideOffset"]);
-  return /* @__PURE__ */ React11.createElement(DropdownMenuPrimitive.Portal, null, /* @__PURE__ */ React11.createElement(
-    DropdownMenuPrimitive.Content,
-    __spreadValues({
-      ref,
-      sideOffset,
-      className: cn(
-        "z-50 max-h-[var(--radix-dropdown-menu-content-available-height)] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
-        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-        className
-      )
-    }, props)
-  ));
-});
-DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
-var DropdownMenuItem = React11.forwardRef((_a, ref) => {
-  var _b = _a, { className, inset } = _b, props = __objRest(_b, ["className", "inset"]);
-  return /* @__PURE__ */ React11.createElement(
-    DropdownMenuPrimitive.Item,
-    __spreadValues({
-      ref,
-      className: cn(
-        "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0",
-        inset && "pl-8",
-        className
-      )
-    }, props)
-  );
-});
-DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
-var DropdownMenuCheckboxItem = React11.forwardRef((_a, ref) => {
-  var _b = _a, { className, children, checked } = _b, props = __objRest(_b, ["className", "children", "checked"]);
-  return /* @__PURE__ */ React11.createElement(
-    DropdownMenuPrimitive.CheckboxItem,
-    __spreadValues({
-      ref,
-      className: cn(
-        "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-        className
-      ),
-      checked
-    }, props),
-    /* @__PURE__ */ React11.createElement("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center" }, /* @__PURE__ */ React11.createElement(DropdownMenuPrimitive.ItemIndicator, null, /* @__PURE__ */ React11.createElement(Check, { className: "h-4 w-4" }))),
-    children
-  );
-});
-DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName;
-var DropdownMenuRadioItem = React11.forwardRef((_a, ref) => {
-  var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
-  return /* @__PURE__ */ React11.createElement(
-    DropdownMenuPrimitive.RadioItem,
-    __spreadValues({
-      ref,
-      className: cn(
-        "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-        className
-      )
-    }, props),
-    /* @__PURE__ */ React11.createElement("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center" }, /* @__PURE__ */ React11.createElement(DropdownMenuPrimitive.ItemIndicator, null, /* @__PURE__ */ React11.createElement(Circle, { className: "h-2 w-2 fill-current" }))),
-    children
-  );
-});
-DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
-var DropdownMenuLabel = React11.forwardRef((_a, ref) => {
-  var _b = _a, { className, inset } = _b, props = __objRest(_b, ["className", "inset"]);
-  return /* @__PURE__ */ React11.createElement(
-    DropdownMenuPrimitive.Label,
-    __spreadValues({
-      ref,
-      className: cn(
-        "px-2 py-1.5 text-sm font-semibold",
-        inset && "pl-8",
-        className
-      )
-    }, props)
-  );
-});
-DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
-var DropdownMenuSeparator = React11.forwardRef((_a, ref) => {
-  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ React11.createElement(
-    DropdownMenuPrimitive.Separator,
-    __spreadValues({
-      ref,
-      className: cn("-mx-1 my-1 h-px bg-muted", className)
-    }, props)
-  );
-});
-DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
-var DropdownMenuShortcut = (_a) => {
-  var _b = _a, {
-    className
-  } = _b, props = __objRest(_b, [
-    "className"
-  ]);
-  return /* @__PURE__ */ React11.createElement(
-    "span",
-    __spreadValues({
-      className: cn("ml-auto text-xs tracking-widest opacity-60", className)
-    }, props)
-  );
-};
-DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
-
-// components/ui/button.tsx
-import * as React12 from "react";
-import { Slot } from "@radix-ui/react-slot";
-import { cva } from "class-variance-authority";
-var buttonVariants = cva(
-  "inline-flex items-center justify-center gap-1.5 whitespace-nowrap text-sm font-mono font-bold uppercase tracking-[0.08em] transition-all duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-0 disabled:pointer-events-none disabled:opacity-30 [&_svg]:pointer-events-none [&_svg]:size-3 [&_svg]:shrink-0 relative overflow-hidden",
-  {
-    variants: {
-      variant: {
-        default: "bg-primary text-primary-foreground border-2 border-foreground hover:bg-foreground hover:text-background active:translate-y-[1px] shadow-[3px_3px_0_0_rgba(0,0,0,1)] dark:shadow-[3px_3px_0_0_rgba(255,255,255,0.2)] hover:shadow-[1px_1px_0_0_rgba(0,0,0,1)] dark:hover:shadow-[1px_1px_0_0_rgba(255,255,255,0.2)]",
-        destructive: "bg-destructive text-destructive-foreground border-2 border-foreground hover:bg-destructive/90 active:translate-y-[1px] shadow-[3px_3px_0_0_rgba(0,0,0,1)] dark:shadow-[3px_3px_0_0_rgba(255,255,255,0.2)] hover:shadow-[1px_1px_0_0_rgba(0,0,0,1)] dark:hover:shadow-[1px_1px_0_0_rgba(255,255,255,0.2)]",
-        outline: "border-2 border-foreground bg-background hover:bg-foreground hover:text-background active:translate-y-[1px] shadow-[3px_3px_0_0_rgba(0,0,0,1)] dark:shadow-[3px_3px_0_0_rgba(255,255,255,0.2)] hover:shadow-[1px_1px_0_0_rgba(0,0,0,1)] dark:hover:shadow-[1px_1px_0_0_rgba(255,255,255,0.2)]",
-        secondary: "bg-secondary text-secondary-foreground border-2 border-border hover:bg-secondary/80 active:translate-y-[1px] shadow-[2px_2px_0_0_rgba(0,0,0,0.3)] dark:shadow-[2px_2px_0_0_rgba(255,255,255,0.1)] hover:shadow-[1px_1px_0_0_rgba(0,0,0,0.3)] dark:hover:shadow-[1px_1px_0_0_rgba(255,255,255,0.1)]",
-        ghost: "hover:bg-accent hover:text-accent-foreground border-2 border-transparent hover:border-border",
-        link: "text-primary underline-offset-4 hover:underline border-0 shadow-none"
-      },
-      size: {
-        default: "h-10 px-5 py-2.5 text-xs",
-        sm: "h-8 px-4 text-[10px]",
-        lg: "h-12 px-7 text-sm",
-        icon: "h-10 w-10"
-      }
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default"
-    }
-  }
-);
-var Button = React12.forwardRef(
-  (_a, ref) => {
-    var _b = _a, { className, variant, size, asChild = false } = _b, props = __objRest(_b, ["className", "variant", "size", "asChild"]);
-    const Comp = asChild ? Slot : "button";
-    return /* @__PURE__ */ React12.createElement(
-      Comp,
-      __spreadValues({
-        className: cn(buttonVariants({ variant, size, className })),
-        ref
-      }, props)
-    );
-  }
-);
-Button.displayName = "Button";
-
-// components/data-grid/column-manager.tsx
-import { RotateCcw, Settings } from "lucide-react";
-function ColumnManager({
-  columns,
-  visibleColumns,
-  toggleColumnVisibility,
-  resetGridPreferences,
-  renderTrigger,
-  renderResetButton,
-  renderColumnItem,
-  align = "end",
-  showResetButton = true,
-  className,
-  triggerClassName,
-  contentClassName,
-  itemClassName,
-  resetClassName
-}) {
-  return /* @__PURE__ */ React13.createElement(DropdownMenu, null, /* @__PURE__ */ React13.createElement(DropdownMenuTrigger, { asChild: true, className }, renderTrigger ? renderTrigger({ onClick: () => {
-  } }) : /* @__PURE__ */ React13.createElement(
-    Button,
-    {
-      variant: "outline",
-      size: "sm",
-      className: cn("ml-auto", triggerClassName)
-    },
-    /* @__PURE__ */ React13.createElement(Settings, { className: "h-3 w-3 mr-1.5" }),
-    /* @__PURE__ */ React13.createElement("span", null, "Columns")
-  )), /* @__PURE__ */ React13.createElement(DropdownMenuContent, { align, className: contentClassName }, columns.map((column) => {
-    const isVisible = visibleColumns.includes(column.id);
-    const handleToggle = (checked) => toggleColumnVisibility(column.id, checked);
-    return renderColumnItem ? /* @__PURE__ */ React13.createElement(React13.Fragment, { key: column.id }, renderColumnItem({ column, isVisible, onToggle: handleToggle })) : /* @__PURE__ */ React13.createElement(
-      DropdownMenuCheckboxItem,
-      {
-        key: column.id,
-        checked: isVisible,
-        onCheckedChange: handleToggle,
-        className: itemClassName
-      },
-      column.header
-    );
-  }), showResetButton && /* @__PURE__ */ React13.createElement(React13.Fragment, null, /* @__PURE__ */ React13.createElement(DropdownMenuSeparator, null), renderResetButton ? renderResetButton({ onClick: resetGridPreferences }) : /* @__PURE__ */ React13.createElement(
-    DropdownMenuItem,
-    {
-      onClick: resetGridPreferences,
-      className: cn(
-        "focus:bg-destructive/10 cursor-pointer",
-        resetClassName
-      )
-    },
-    /* @__PURE__ */ React13.createElement(RotateCcw, { className: "h-3 w-3 mr-1.5" }),
-    "Reset all columns"
-  ))));
-}
-
-// components/data-grid/group-manager.tsx
-import React14 from "react";
-import { Layers, X } from "lucide-react";
-function GroupManager({
-  columns,
-  groupByColumns,
-  updateGroupByColumns,
-  removeGroupByColumn,
-  clearGrouping,
-  className,
-  triggerClassName,
-  contentClassName,
-  itemClassName,
-  activeGroupsClassName,
-  renderTrigger,
-  renderActiveGroup,
-  align = "end"
-}) {
-  const groupableColumns = columns.filter(
-    (col) => col.enableGrouping !== false
-  );
-  const toggleColumnGrouping = (columnId) => {
-    if (groupByColumns.includes(columnId)) {
-      updateGroupByColumns(groupByColumns.filter((id) => id !== columnId));
-    } else {
-      updateGroupByColumns([...groupByColumns, columnId]);
-    }
-  };
-  return /* @__PURE__ */ React14.createElement("div", { className: "flex flex-col" }, groupByColumns.length > 0 && /* @__PURE__ */ React14.createElement("div", { className: cn("flex flex-wrap gap-1 mb-2", activeGroupsClassName) }, groupByColumns.map((columnId) => {
-    const column = columns.find((col) => col.id === columnId);
-    if (!column) return null;
-    return renderActiveGroup ? /* @__PURE__ */ React14.createElement(React14.Fragment, { key: columnId }, renderActiveGroup({
-      column,
-      onRemove: () => removeGroupByColumn(columnId)
-    })) : /* @__PURE__ */ React14.createElement(
-      "div",
-      {
-        key: columnId,
-        className: "bg-primary/10 rounded-md px-2 py-1 text-xs flex items-center"
-      },
-      /* @__PURE__ */ React14.createElement("span", { className: "mr-1" }, column.header),
-      /* @__PURE__ */ React14.createElement(
-        "button",
-        {
-          onClick: () => removeGroupByColumn(columnId),
-          className: "hover:text-destructive focus:outline-none"
-        },
-        /* @__PURE__ */ React14.createElement(X, { className: "h-3 w-3" })
-      )
-    );
-  }), /* @__PURE__ */ React14.createElement(
-    Button,
-    {
-      variant: "ghost",
-      size: "sm",
-      onClick: clearGrouping,
-      className: "text-xs h-6"
-    },
-    "Clear All"
-  )), /* @__PURE__ */ React14.createElement(DropdownMenu, null, /* @__PURE__ */ React14.createElement(DropdownMenuTrigger, { asChild: true, className }, renderTrigger ? renderTrigger({ onClick: () => {
-  } }) : /* @__PURE__ */ React14.createElement(
-    Button,
-    {
-      variant: "outline",
-      size: "sm",
-      className: cn(triggerClassName)
-    },
-    /* @__PURE__ */ React14.createElement(Layers, { className: "h-3 w-3 mr-1.5" }),
-    /* @__PURE__ */ React14.createElement("span", null, "Group by")
-  )), /* @__PURE__ */ React14.createElement(DropdownMenuContent, { align, className: contentClassName }, groupableColumns.length > 0 ? groupableColumns.map((column) => {
-    const isGrouped = groupByColumns.includes(column.id);
-    return /* @__PURE__ */ React14.createElement(
-      DropdownMenuCheckboxItem,
-      {
-        key: column.id,
-        checked: isGrouped,
-        onCheckedChange: () => toggleColumnGrouping(column.id),
-        className: itemClassName
-      },
-      column.header
-    );
-  }) : /* @__PURE__ */ React14.createElement(DropdownMenuItem, { disabled: true }, "No groupable columns"), groupByColumns.length > 0 && /* @__PURE__ */ React14.createElement(React14.Fragment, null, /* @__PURE__ */ React14.createElement(DropdownMenuSeparator, null), /* @__PURE__ */ React14.createElement(DropdownMenuItem, { onClick: clearGrouping }, "Clear all groups")))));
-}
-
-// components/data-grid/use-grid-persistence.ts
-import { useState as useState4, useEffect as useEffect2 } from "react";
-function useGridPersistence(gridId, columns, defaultColumnWidth = 150) {
-  const storageKey = `gridular-preferences-${gridId}`;
-  const getDefaultPreferences = () => ({
-    columnWidths: columns.reduce((acc, col) => {
-      acc[col.id] = defaultColumnWidth;
-      return acc;
-    }, {}),
-    columnOrder: columns.map((col) => col.id),
-    hiddenColumns: [],
-    groupByColumns: [],
-    // Initialize with empty array
-    expandedGroups: {}
-    // Initialize with empty object
-  });
-  const loadPreferences = () => {
-    if (typeof window === "undefined") return getDefaultPreferences();
-    try {
-      const stored = localStorage.getItem(storageKey);
-      if (!stored) return getDefaultPreferences();
-      const parsed = JSON.parse(stored);
-      const updated = __spreadProps(__spreadValues({}, parsed), {
-        // Ensure these fields exist
-        groupByColumns: parsed.groupByColumns || [],
-        expandedGroups: parsed.expandedGroups || {}
-      });
-      columns.forEach((col) => {
-        if (!parsed.columnWidths[col.id]) {
-          updated.columnWidths[col.id] = defaultColumnWidth;
-        }
-        if (!parsed.columnOrder.includes(col.id)) {
-          updated.columnOrder.push(col.id);
-        }
-      });
-      return updated;
-    } catch (error) {
-      console.error("Failed to load grid preferences", error);
-      return getDefaultPreferences();
-    }
-  };
-  const [preferences, setPreferences] = useState4(
-    getDefaultPreferences()
-  );
-  useEffect2(() => {
-    setPreferences(loadPreferences());
-  }, []);
-  const savePreferences = (newPreferences) => {
-    if (typeof window === "undefined") return;
-    try {
-      localStorage.setItem(storageKey, JSON.stringify(newPreferences));
-      setPreferences(newPreferences);
-    } catch (error) {
-      console.error("Failed to save grid preferences", error);
-    }
-  };
-  const updateColumnWidth = (columnId, width) => {
-    savePreferences(__spreadProps(__spreadValues({}, preferences), {
-      columnWidths: __spreadProps(__spreadValues({}, preferences.columnWidths), {
-        [columnId]: width
-      })
-    }));
-  };
-  const updateColumnOrder = (newOrder) => {
-    savePreferences(__spreadProps(__spreadValues({}, preferences), {
-      columnOrder: newOrder
-    }));
-  };
-  const toggleColumnVisibility = (columnId, visible) => {
-    const hiddenColumns = [...preferences.hiddenColumns];
-    if (!visible && !hiddenColumns.includes(columnId)) {
-      hiddenColumns.push(columnId);
-    } else if (visible) {
-      const index = hiddenColumns.indexOf(columnId);
-      if (index !== -1) {
-        hiddenColumns.splice(index, 1);
-      }
-    }
-    savePreferences(__spreadProps(__spreadValues({}, preferences), {
-      hiddenColumns
-    }));
-  };
-  const updateGroupByColumns = (groupByColumns) => {
-    savePreferences(__spreadProps(__spreadValues({}, preferences), {
-      groupByColumns
-    }));
-  };
-  const toggleGroupExpanded = (groupKey, expanded) => {
-    savePreferences(__spreadProps(__spreadValues({}, preferences), {
-      expandedGroups: __spreadProps(__spreadValues({}, preferences.expandedGroups), {
-        [groupKey]: expanded
-      })
-    }));
-  };
-  const resetPreferences = () => {
-    savePreferences(getDefaultPreferences());
-  };
-  return {
-    preferences,
-    updateColumnWidth,
-    updateColumnOrder,
-    toggleColumnVisibility,
-    updateGroupByColumns,
-    toggleGroupExpanded,
-    resetPreferences
-  };
-}
-
-// components/data-grid/use-data-grouping.ts
-import { useMemo as useMemo2 } from "react";
-function useDataGrouping(data, groupingState, idAccessor) {
-  const { groupByColumns, expandedGroups } = groupingState;
-  const groupedData = useMemo2(() => {
-    if (!groupByColumns.length) return { rows: data, flattenedRows: data };
-    const createGroupingStructure = (rows, groupBy, depth = 0) => {
-      if (depth >= groupBy.length || groupBy.length === 0) {
-        return rows;
-      }
-      const columnId = groupBy[depth];
-      const groupMap = /* @__PURE__ */ new Map();
-      for (const row of rows) {
-        const value = row[columnId];
-        if (!groupMap.has(value)) {
-          groupMap.set(value, []);
-        }
-        groupMap.get(value).push(row);
-      }
-      const result = [];
-      for (const [value, groupRows] of groupMap.entries()) {
-        const groupKey = `${columnId}:${value}:${depth}`;
-        const groupRow = {
-          isGroupRow: true,
-          groupKey,
-          groupValue: value,
-          columnId,
-          depth,
-          count: groupRows.length,
-          children: createGroupingStructure(groupRows, groupBy, depth + 1)
-        };
-        result.push(groupRow);
-      }
-      return result;
-    };
-    const groupedRows = createGroupingStructure(data, groupByColumns);
-    const flattenRows = (rows, result = [], parentGroupKeys = []) => {
-      for (const row of rows) {
-        if (row.isGroupRow) {
-          const groupRow = row;
-          result.push(groupRow);
-          if (expandedGroups[groupRow.groupKey]) {
-            flattenRows(groupRow.children, result, [
-              ...parentGroupKeys,
-              groupRow.groupKey
-            ]);
-          }
-        } else {
-          const rowWithGroupInfo = __spreadProps(__spreadValues({}, row), {
-            _groupParentKeys: parentGroupKeys
-          });
-          result.push(rowWithGroupInfo);
-        }
-      }
-      return result;
-    };
-    const flattenedRows = flattenRows(groupedRows);
-    return { rows: groupedRows, flattenedRows };
-  }, [data, groupByColumns, expandedGroups]);
-  return groupedData;
-}
-
-// components/data-grid/use-select-cell.tsx
-import { useState as useState5, useCallback } from "react";
-function useSelectCell() {
-  const [selectedCell, setSelectedCell] = useState5(null);
-  const selectCell = useCallback((rowId, columnId) => {
-    setSelectedCell({ rowId, columnId });
-  }, []);
-  const clearSelection = useCallback(() => {
-    setSelectedCell(null);
-  }, []);
-  const isCellSelected = useCallback(
-    (rowId, columnId) => {
-      return selectedCell !== null && selectedCell.rowId === rowId && selectedCell.columnId === columnId;
-    },
-    [selectedCell]
-  );
-  return {
-    selectedCell,
-    selectCell,
-    clearSelection,
-    isCellSelected
-  };
-}
-
-// components/data-grid/data-grid.tsx
-function DataGrid({
-  columns,
-  data,
-  sortState = null,
-  onSortChange,
-  filterState = {},
-  onFilterChange,
-  selectedRows = {},
-  onRowSelectionChange,
-  pageIndex,
-  pageCount,
-  pageSize,
-  onPageChange,
-  onPageSizeChange,
-  onRowClick,
-  enableSorting = true,
-  enableFiltering = true,
-  enableColumnResize = true,
-  enableRowSelection = false,
-  enablePagination = true,
-  enableGrouping = false,
-  enableExpandableRows = false,
-  hideGroupControls = false,
-  hideColumnManager = false,
-  pageSizeOptions = [5, 10, 20, 50, 100],
-  emptyMessage = "No data available",
-  loadingMessage = "Loading data...",
-  isLoading = false,
-  gridId = "default",
-  classes = {},
-  className,
-  renderCell,
-  renderHeader,
-  renderSortIcon,
-  renderFilterIcon,
-  renderGroupRow,
-  sortIconVariant = "arrows",
-  columnManagerProps = {},
-  paginationProps = {},
-  groupManagerProps = {},
-  groupRowProps = {},
-  groupingState,
-  onGroupingChange,
-  groupExpandIcon,
-  groupCollapseIcon,
-  totalRows,
-  filterMenu,
-  selectedCell: propSelectedCell,
-  enableCellSelection = false,
-  onCellSelect,
-  preventRowSelection,
-  contextMenuContent,
-  expandedRows = {},
-  onExpandedRowsChange,
-  renderExpandedRow,
-  expandIcon,
-  collapseIcon,
-  getRowId
-}) {
-  const { theme } = useTheme();
-  const filterValueRefs = useRef(filterState || {});
-  const [filterMenuOpen, setFilterMenuOpen] = useState6(null);
-  const [activeFilterColumn, setActiveFilterColumn] = useState6(null);
-  const filterMenuRef = useRef(null);
-  const effectiveEnablePagination = enableGrouping ? false : enablePagination;
-  const {
-    preferences,
-    updateColumnWidth,
-    updateColumnOrder,
-    toggleColumnVisibility,
-    updateGroupByColumns,
-    toggleGroupExpanded,
-    resetPreferences
-  } = useGridPersistence(gridId, columns);
-  const { selectedCell, selectCell, clearSelection, isCellSelected } = useSelectCell();
-  const handleCellSelect = (rowId, columnId) => {
-    if (enableCellSelection) {
-      selectCell(rowId, columnId);
-      if (onCellSelect) {
-        onCellSelect(rowId, columnId);
-      }
-    }
-  };
-  const [internalGroupingState, setInternalGroupingState] = useState6({
-    groupByColumns: (groupingState == null ? void 0 : groupingState.groupByColumns) || preferences.groupByColumns || [],
-    expandedGroups: (groupingState == null ? void 0 : groupingState.expandedGroups) || preferences.expandedGroups || {}
-  });
-  const effectiveGroupingState = groupingState || internalGroupingState;
-  const visibleColumns = useMemo3(() => {
-    const hiddenIds = new Set(preferences.hiddenColumns);
-    const visible = columns.filter((col) => !hiddenIds.has(col.id)).map((col) => col.id);
-    const orderedIds = preferences.columnOrder.filter(
-      (id) => visible.includes(id)
-    );
-    visible.forEach((id) => {
-      if (!orderedIds.includes(id)) {
-        orderedIds.push(id);
-      }
-    });
-    return orderedIds;
-  }, [columns, preferences.hiddenColumns, preferences.columnOrder]);
-  const orderedColumns = useMemo3(() => {
-    const colMap = new Map(columns.map((col) => [col.id, col]));
-    return visibleColumns.map((id) => colMap.get(id)).filter(Boolean);
-  }, [columns, visibleColumns]);
-  useEffect3(() => {
-    if (filterState) {
-      filterValueRefs.current = __spreadValues({}, filterState);
-    }
-  }, [filterState]);
-  useEffect3(() => {
-    function handleClickOutside(event) {
-      if (filterMenuRef.current && !filterMenuRef.current.contains(event.target)) {
-        setFilterMenuOpen(null);
-      }
-    }
-    document.addEventListener("mousedown", handleClickOutside);
-    return () => {
-      document.removeEventListener("mousedown", handleClickOutside);
-    };
-  }, [filterMenuOpen]);
-  const { flattenedRows } = useDataGrouping(
-    data,
-    enableGrouping ? effectiveGroupingState : { groupByColumns: [], expandedGroups: {} },
-    (row) => row.id || `row-${Math.random()}`
-  );
-  const paginatedData = useMemo3(() => {
-    const displayData = enableGrouping ? flattenedRows : data;
-    if (!effectiveEnablePagination || !pageSize) {
-      return displayData;
-    }
-    const effectivePageIndex = pageIndex != null ? pageIndex : 0;
-    const totalPages = Math.max(1, Math.ceil(displayData.length / pageSize));
-    const safePageIndex = Math.min(effectivePageIndex, totalPages - 1);
-    const start = safePageIndex * pageSize;
-    const end = start + pageSize;
-    const slicedData = displayData.slice(
-      start,
-      Math.min(end, displayData.length)
-    );
-    return slicedData;
-  }, [
-    data,
-    flattenedRows,
-    enableGrouping,
-    effectiveEnablePagination,
-    pageIndex,
-    pageSize
-  ]);
-  const handleFilterMenuToggle = (columnId) => {
-    if (columnId === filterMenuOpen) {
-      setFilterMenuOpen(null);
-      setActiveFilterColumn(null);
-    } else if (columnId) {
-      const column = columns.find((col) => col.id === columnId);
-      if (column) {
-        setFilterMenuOpen(columnId);
-        setActiveFilterColumn(column);
-      }
-    } else {
-      setFilterMenuOpen(null);
-      setActiveFilterColumn(null);
-    }
-  };
-  const handleApplyFilter = (value) => {
-    if (!activeFilterColumn || !onFilterChange) return;
-    const newFilterState = __spreadValues({}, filterState);
-    if (value) {
-      newFilterState[activeFilterColumn.id] = value;
-    } else {
-      delete newFilterState[activeFilterColumn.id];
-    }
-    onFilterChange(newFilterState);
-    setFilterMenuOpen(null);
-  };
-  const handleClearFilter = () => {
-    if (!activeFilterColumn || !onFilterChange) return;
-    const newFilterState = __spreadValues({}, filterState);
-    delete newFilterState[activeFilterColumn.id];
-    onFilterChange(newFilterState);
-    setFilterMenuOpen(null);
-  };
-  const handleColumnReorder = (draggedId, targetId) => {
-    if (draggedId === targetId) return;
-    const currentOrder = [...preferences.columnOrder];
-    const draggedIndex = currentOrder.indexOf(draggedId);
-    const targetIndex = currentOrder.indexOf(targetId);
-    if (draggedIndex !== -1 && targetIndex !== -1) {
-      currentOrder.splice(draggedIndex, 1);
-      currentOrder.splice(targetIndex, 0, draggedId);
-      updateColumnOrder(currentOrder);
-    }
-  };
-  const handleColumnResize = (columnId, width) => {
-    updateColumnWidth(columnId, width);
-  };
-  const handleGroupByColumnsUpdate = (groupByColumns) => {
-    const newGroupingState = __spreadProps(__spreadValues({}, effectiveGroupingState), {
-      groupByColumns
-    });
-    if (onGroupingChange) {
-      onGroupingChange(newGroupingState);
-    } else {
-      setInternalGroupingState(newGroupingState);
-      updateGroupByColumns(groupByColumns);
-    }
-  };
-  const handleRemoveGroupByColumn = (columnId) => {
-    const newGroupByColumns = effectiveGroupingState.groupByColumns.filter(
-      (id) => id !== columnId
-    );
-    handleGroupByColumnsUpdate(newGroupByColumns);
-  };
-  const handleClearGrouping = () => {
-    handleGroupByColumnsUpdate([]);
-  };
-  const handleToggleGroupExpanded = (groupKey) => {
-    const isCurrentlyExpanded = !!effectiveGroupingState.expandedGroups[groupKey];
-    const newExpandedGroups = __spreadProps(__spreadValues({}, effectiveGroupingState.expandedGroups), {
-      [groupKey]: !isCurrentlyExpanded
-    });
-    const newGroupingState = __spreadProps(__spreadValues({}, effectiveGroupingState), {
-      expandedGroups: newExpandedGroups
-    });
-    if (onGroupingChange) {
-      onGroupingChange(newGroupingState);
-    } else {
-      setInternalGroupingState(newGroupingState);
-      toggleGroupExpanded(groupKey, !isCurrentlyExpanded);
-    }
-  };
-  const handleToggleColumnVisibility = (columnId, visible) => {
-    toggleColumnVisibility(columnId, visible);
-  };
-  const handleResetGridPreferences = () => {
-    resetPreferences();
-    setInternalGroupingState({
-      groupByColumns: [],
-      expandedGroups: {}
-    });
-  };
-  if (!isLoading && (!data || data.length === 0)) {
-    return /* @__PURE__ */ React15.createElement(
-      "div",
-      {
-        className: cn(
-          "flex items-center justify-center p-8 border rounded-md",
-          theme.classes.container,
-          classes.emptyState
-        )
-      },
-      emptyMessage
-    );
-  }
-  if (isLoading) {
-    return /* @__PURE__ */ React15.createElement(
-      "div",
-      {
-        className: cn(
-          "flex items-center justify-center p-8 border rounded-md",
-          theme.classes.container,
-          classes.loadingState
-        )
-      },
-      loadingMessage
-    );
-  }
-  const showToolbar = enableGrouping && !hideGroupControls || !hideColumnManager;
-  return /* @__PURE__ */ React15.createElement(
-    "div",
-    {
-      className: cn(
-        "w-full border rounded-md overflow-hidden",
-        theme.classes.container,
-        className,
-        classes.container
-      )
-    },
-    showToolbar ? /* @__PURE__ */ React15.createElement(
-      "div",
-      {
-        className: cn(
-          "p-2 flex items-center justify-end border-b gap-2",
-          classes.columnManager
-        )
-      },
-      enableGrouping && !hideGroupControls ? /* @__PURE__ */ React15.createElement(
-        GroupManager,
-        __spreadValues({
-          columns,
-          groupByColumns: effectiveGroupingState.groupByColumns,
-          updateGroupByColumns: handleGroupByColumnsUpdate,
-          removeGroupByColumn: handleRemoveGroupByColumn,
-          clearGrouping: handleClearGrouping
-        }, groupManagerProps)
-      ) : null,
-      !hideColumnManager ? /* @__PURE__ */ React15.createElement(
-        ColumnManager,
-        __spreadValues({
-          columns,
-          visibleColumns,
-          toggleColumnVisibility: handleToggleColumnVisibility,
-          resetGridPreferences: handleResetGridPreferences
-        }, columnManagerProps)
-      ) : null
-    ) : null,
-    /* @__PURE__ */ React15.createElement("div", { className: "w-full overflow-auto" }, /* @__PURE__ */ React15.createElement("table", { className: "w-full border-separate border-spacing-0" }, /* @__PURE__ */ React15.createElement(
-      TableHeader,
-      {
-        columns: orderedColumns,
-        sortState,
-        onSortChange: (columnId) => {
-          if (!onSortChange || !enableSorting) return;
-          let newSortState = null;
-          if (!sortState || sortState.column !== columnId) {
-            newSortState = { column: columnId, direction: "asc" };
-          } else if (sortState.direction === "asc") {
-            newSortState = { column: columnId, direction: "desc" };
-          }
-          onSortChange(newSortState);
-        },
-        enableSorting,
-        filterState: filterState || {},
-        filterMenuOpen,
-        onFilterMenuToggle: handleFilterMenuToggle,
-        columnWidths: preferences.columnWidths,
-        onColumnResize: handleColumnResize,
-        headerClassName: classes.header,
-        filterValueRefs,
-        onApplyFilter: handleApplyFilter,
-        onClearFilter: handleClearFilter,
-        onColumnReorder: handleColumnReorder,
-        renderHeader: renderHeader ? (column, sortDirection) => renderHeader({ column, sortDirection }) : void 0,
-        renderSortIcon: !!renderSortIcon ? (column, sortDirection) => renderSortIcon({
-          isSorted: sortDirection !== void 0,
-          sortDirection
-        }) : void 0,
-        renderFilterIcon: !!renderFilterIcon ? (column, isActive) => renderFilterIcon({
-          isFiltered: isActive
-        }) : void 0,
-        sortIconVariant,
-        filterMenu,
-        filterMenuRef
-      }
-    ), /* @__PURE__ */ React15.createElement(
-      TableBody,
-      {
-        paginatedData,
-        columns: orderedColumns,
-        selectedRows: selectedRows || {},
-        enableRowSelection,
-        selectedCell,
-        onCellSelect: enableCellSelection ? handleCellSelect : void 0,
-        selectedCellClassName: classes.selectedCell,
-        onRowSelect: (rowId) => {
-          if (enableRowSelection && onRowSelectionChange) {
-            const newSelectedRows = __spreadValues({}, selectedRows);
-            newSelectedRows[rowId] = !newSelectedRows[rowId];
-            onRowSelectionChange(newSelectedRows);
-          }
-        },
-        onRowClick,
-        rowClassName: classes.row,
-        cellClassName: classes.cell,
-        columnWidths: preferences.columnWidths,
-        theme,
-        selectedRowClassName: classes.selectedRow,
-        renderCell: renderCell ? (row, column) => renderCell({
-          value: row[column.id],
-          row,
-          column
-        }) : void 0,
-        enableGrouping,
-        groupingState: effectiveGroupingState,
-        toggleGroupExpanded: handleToggleGroupExpanded,
-        renderGroupRow,
-        groupExpandIcon,
-        groupCollapseIcon,
-        groupRowProps,
-        preventRowSelection,
-        contextMenuContent,
-        enableExpandableRows,
-        expandedRows,
-        onToggleRowExpand: (rowId) => {
-          if (onExpandedRowsChange) {
-            const newExpandedRows = __spreadValues({}, expandedRows);
-            newExpandedRows[rowId] = !newExpandedRows[rowId];
-            onExpandedRowsChange(newExpandedRows);
-          }
-        },
-        renderExpandedRow,
-        expandIcon,
-        collapseIcon,
-        getRowId
-      }
-    ))),
-    effectiveEnablePagination ? /* @__PURE__ */ React15.createElement(
-      Pagination,
-      __spreadValues({
-        pageIndex: pageIndex != null ? pageIndex : 0,
-        pageCount: pageCount || Math.max(
-          1,
-          Math.ceil(
-            (totalRows || (enableGrouping ? flattenedRows.length : data.length)) / (pageSize || 10)
-          )
-        ),
-        pageSize: pageSize || 10,
-        totalRows: totalRows || (enableGrouping ? flattenedRows.length : data.length),
-        setPageIndex: onPageChange || (() => {
-        }),
-        setPageSize: onPageSizeChange || (() => {
-        }),
-        pageSizeOptions,
-        processedDataLength: paginatedData.length,
-        className: classes.pagination
-      }, paginationProps)
-    ) : null
-  );
-}
-
-// components/data-grid/use-column-resize.ts
-import { useState as useState7, useCallback as useCallback2 } from "react";
-var useColumnResize = (enableColumnResize) => {
-  const [columnResizeState, setColumnResizeState] = useState7({});
-  const [isResizing, setIsResizing] = useState7(false);
-  const handleColumnResizeStart = useCallback2(
-    (columnId, startWidth, e) => {
-      if (!enableColumnResize) return;
-      setIsResizing(true);
-      const startX = e.clientX;
-      const handleMouseMove = (moveEvent) => {
-        const deltaX = moveEvent.clientX - startX;
-        const newWidth = Math.max(50, startWidth + deltaX);
-        setColumnResizeState((prev) => __spreadProps(__spreadValues({}, prev), {
-          [columnId]: newWidth
-        }));
-      };
-      const handleMouseUp = () => {
-        document.removeEventListener("mousemove", handleMouseMove);
-        document.removeEventListener("mouseup", handleMouseUp);
-        setIsResizing(false);
-      };
-      document.addEventListener("mousemove", handleMouseMove);
-      document.addEventListener("mouseup", handleMouseUp);
-    },
-    [enableColumnResize]
-  );
-  return {
-    columnResizeState,
-    isResizing,
-    handleColumnResizeStart
-  };
-};
-
-// components/theme-provider/theme-switcher.tsx
-import React16 from "react";
-import { Moon, Sun } from "lucide-react";
-var ThemeSwitcher = ({ className }) => {
-  const { theme, setTssTheme, setTailwindTheme } = useTheme();
-  const isDarkMode = theme.colors.background === "#121314";
-  const toggleTheme = () => {
-    if (isDarkMode) {
-      setTssTheme({
-        colors: {
-          primary: "#2563eb",
-          secondary: "#6b7280",
-          background: "#ffffff",
-          foreground: "#1e1e21",
-          muted: "#f1f5f9",
-          mutedForeground: "#64748b",
-          border: "#e2e8f0",
-          popover: "#ffffff"
-        }
-      });
-      setTailwindTheme({
-        container: "bg-background border border-border text-foreground",
-        cell: "px-4 py-2 text-sm border-border",
-        row: "border-b border-border hover:bg-muted/30"
-      });
-    } else {
-      setTssTheme({
-        colors: {
-          primary: "#3b82f6",
-          secondary: "#9ca3af",
-          background: "#121314",
-          foreground: "#f8fafc",
-          muted: "#1e293b",
-          mutedForeground: "#94a3b8",
-          border: "#334155",
-          popover: "#1a1c1e"
-        }
-      });
-      setTailwindTheme({
-        container: "bg-muted border border-border text-foreground",
-        cell: "px-4 py-2 text-sm border-border",
-        row: "border-b border-border hover:bg-muted/50"
-      });
-    }
-  };
-  return /* @__PURE__ */ React16.createElement(
-    Button,
-    {
-      onClick: toggleTheme,
-      variant: "outline",
-      size: "icon",
-      className,
-      title: isDarkMode ? "Switch to light mode" : "Switch to dark mode"
-    },
-    isDarkMode ? /* @__PURE__ */ React16.createElement(Sun, { className: "h-4 w-4" }) : /* @__PURE__ */ React16.createElement(Moon, { className: "h-4 w-4" })
-  );
-};
-
-// components/theme-provider/theme-wrapper.tsx
-import React17 from "react";
-var ThemeWrapper = ({
-  children,
-  customTheme
-}) => {
-  return /* @__PURE__ */ React17.createElement(
-    ThemeProvider,
-    {
-      initialTssTheme: __spreadValues({}, customTheme || {})
-    },
-    /* @__PURE__ */ React17.createElement("div", null, children)
-  );
-};
-
-// components/ui/badge.tsx
-import * as React18 from "react";
-import { Slot as Slot2 } from "@radix-ui/react-slot";
-import { cva as cva2 } from "class-variance-authority";
-var badgeVariants = cva2(
-  "inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
-  {
-    variants: {
-      variant: {
-        default: "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
-        secondary: "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
-        destructive: "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/70",
-        outline: "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground"
-      }
-    },
-    defaultVariants: {
-      variant: "default"
-    }
-  }
-);
-function Badge(_a) {
-  var _b = _a, {
-    className,
-    variant,
-    asChild = false
-  } = _b, props = __objRest(_b, [
-    "className",
-    "variant",
-    "asChild"
-  ]);
-  const Comp = asChild ? Slot2 : "span";
-  return /* @__PURE__ */ React18.createElement(
-    Comp,
-    __spreadValues({
-      "data-slot": "badge",
-      className: cn(badgeVariants({ variant }), className)
-    }, props)
-  );
-}
-
-// components/ui/checkbox.tsx
-import * as React19 from "react";
-import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
-import { Check as Check2 } from "lucide-react";
-var Checkbox = React19.forwardRef((_a, ref) => {
-  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ React19.createElement(
-    CheckboxPrimitive.Root,
-    __spreadValues({
-      ref,
-      className: cn(
-        "peer h-3.5 w-3.5 shrink-0 border-2 border-border shadow-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary disabled:cursor-not-allowed disabled:opacity-30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[state=checked]:border-foreground",
-        className
-      )
-    }, props),
-    /* @__PURE__ */ React19.createElement(
-      CheckboxPrimitive.Indicator,
-      {
-        className: cn("flex items-center justify-center text-current")
-      },
-      /* @__PURE__ */ React19.createElement(Check2, { className: "h-3 w-3", strokeWidth: 3 })
-    )
-  );
-});
-Checkbox.displayName = CheckboxPrimitive.Root.displayName;
-
-// components/ui/input.tsx
-import * as React20 from "react";
-var Input = React20.forwardRef(
-  (_a, ref) => {
-    var _b = _a, { className, type } = _b, props = __objRest(_b, ["className", "type"]);
-    return /* @__PURE__ */ React20.createElement(
-      "input",
-      __spreadValues({
-        type,
-        className: cn(
-          "flex h-10 w-full border-2 border-border bg-background px-3 py-2 text-sm font-mono font-medium transition-all duration-150 file:border-0 file:bg-transparent file:text-sm file:font-mono file:font-bold file:text-foreground placeholder:text-muted-foreground placeholder:text-xs placeholder:uppercase placeholder:tracking-[0.08em] placeholder:font-bold focus-visible:outline-none focus-visible:border-primary focus-visible:ring-2 focus-visible:ring-primary/20 hover:border-foreground disabled:cursor-not-allowed disabled:opacity-30 disabled:bg-muted shadow-[inset_2px_2px_0_0_rgba(0,0,0,0.1)] dark:shadow-[inset_2px_2px_0_0_rgba(255,255,255,0.05)] focus-visible:shadow-[inset_0_0_0_0_rgba(0,0,0,0)]",
-          className
-        ),
-        ref
-      }, props)
-    );
-  }
-);
-Input.displayName = "Input";
-
-// components/ui/popover.tsx
-import * as React21 from "react";
-import * as PopoverPrimitive from "@radix-ui/react-popover";
-var Popover = PopoverPrimitive.Root;
-var PopoverTrigger = PopoverPrimitive.Trigger;
-var PopoverAnchor = PopoverPrimitive.Anchor;
-var PopoverContent = React21.forwardRef((_a, ref) => {
-  var _b = _a, { className, align = "center", sideOffset = 4 } = _b, props = __objRest(_b, ["className", "align", "sideOffset"]);
-  return /* @__PURE__ */ React21.createElement(PopoverPrimitive.Portal, null, /* @__PURE__ */ React21.createElement(
-    PopoverPrimitive.Content,
-    __spreadValues({
-      ref,
-      align,
-      sideOffset,
-      className: cn(
-        "z-50 w-72 border-2 border-foreground bg-popover p-4 text-popover-foreground shadow-[4px_4px_0_0_rgba(0,0,0,1)] dark:shadow-[4px_4px_0_0_rgba(255,255,255,0.2)] outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-98 data-[state=open]:zoom-in-98",
-        className
-      )
-    }, props)
-  ));
-});
-PopoverContent.displayName = PopoverPrimitive.Content.displayName;
-
-// components/ui/select.tsx
-import * as React22 from "react";
-import * as SelectPrimitive from "@radix-ui/react-select";
-import { Check as Check3, ChevronDown as ChevronDown4, ChevronUp as ChevronUp2 } from "lucide-react";
-var Select = SelectPrimitive.Root;
-var SelectGroup = SelectPrimitive.Group;
-var SelectValue = SelectPrimitive.Value;
-var SelectTrigger = React22.forwardRef((_a, ref) => {
-  var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
-  return /* @__PURE__ */ React22.createElement(
-    SelectPrimitive.Trigger,
-    __spreadValues({
-      ref,
-      className: cn(
-        "flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background data-[placeholder]:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
-        className
-      )
-    }, props),
-    children,
-    /* @__PURE__ */ React22.createElement(SelectPrimitive.Icon, { asChild: true }, /* @__PURE__ */ React22.createElement(ChevronDown4, { className: "h-4 w-4 opacity-50" }))
-  );
-});
-SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
-var SelectScrollUpButton = React22.forwardRef((_a, ref) => {
-  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ React22.createElement(
-    SelectPrimitive.ScrollUpButton,
-    __spreadValues({
-      ref,
-      className: cn(
-        "flex cursor-default items-center justify-center py-1",
-        className
-      )
-    }, props),
-    /* @__PURE__ */ React22.createElement(ChevronUp2, { className: "h-4 w-4" })
-  );
-});
-SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
-var SelectScrollDownButton = React22.forwardRef((_a, ref) => {
-  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ React22.createElement(
-    SelectPrimitive.ScrollDownButton,
-    __spreadValues({
-      ref,
-      className: cn(
-        "flex cursor-default items-center justify-center py-1",
-        className
-      )
-    }, props),
-    /* @__PURE__ */ React22.createElement(ChevronDown4, { className: "h-4 w-4" })
-  );
-});
-SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
-var SelectContent = React22.forwardRef((_a, ref) => {
-  var _b = _a, { className, children, position = "popper" } = _b, props = __objRest(_b, ["className", "children", "position"]);
-  return /* @__PURE__ */ React22.createElement(SelectPrimitive.Portal, null, /* @__PURE__ */ React22.createElement(
-    SelectPrimitive.Content,
-    __spreadValues({
-      ref,
-      className: cn(
-        "relative z-50 max-h-[--radix-select-content-available-height] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-        position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
-        className
-      ),
-      position
-    }, props),
-    /* @__PURE__ */ React22.createElement(SelectScrollUpButton, null),
-    /* @__PURE__ */ React22.createElement(
-      SelectPrimitive.Viewport,
-      {
-        className: cn(
-          "p-1",
-          position === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
-        )
-      },
-      children
-    ),
-    /* @__PURE__ */ React22.createElement(SelectScrollDownButton, null)
-  ));
-});
-SelectContent.displayName = SelectPrimitive.Content.displayName;
-var SelectLabel = React22.forwardRef((_a, ref) => {
-  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ React22.createElement(
-    SelectPrimitive.Label,
-    __spreadValues({
-      ref,
-      className: cn("px-2 py-1.5 text-sm font-semibold", className)
-    }, props)
-  );
-});
-SelectLabel.displayName = SelectPrimitive.Label.displayName;
-var SelectItem = React22.forwardRef((_a, ref) => {
-  var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
-  return /* @__PURE__ */ React22.createElement(
-    SelectPrimitive.Item,
-    __spreadValues({
-      ref,
-      className: cn(
-        "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-        className
-      )
-    }, props),
-    /* @__PURE__ */ React22.createElement("span", { className: "absolute right-2 flex h-3.5 w-3.5 items-center justify-center" }, /* @__PURE__ */ React22.createElement(SelectPrimitive.ItemIndicator, null, /* @__PURE__ */ React22.createElement(Check3, { className: "h-4 w-4" }))),
-    /* @__PURE__ */ React22.createElement(SelectPrimitive.ItemText, null, children)
-  );
-});
-SelectItem.displayName = SelectPrimitive.Item.displayName;
-var SelectSeparator = React22.forwardRef((_a, ref) => {
-  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ React22.createElement(
-    SelectPrimitive.Separator,
-    __spreadValues({
-      ref,
-      className: cn("-mx-1 my-1 h-px bg-muted", className)
-    }, props)
-  );
-});
-SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
-export {
-  Badge,
-  Button,
-  Checkbox,
-  ContextMenu,
-  ContextMenuCheckboxItem,
-  ContextMenuContent,
-  ContextMenuGroup,
-  ContextMenuItem,
-  ContextMenuLabel,
-  ContextMenuPortal,
-  ContextMenuRadioGroup,
-  ContextMenuRadioItem,
-  ContextMenuSeparator,
-  ContextMenuShortcut,
-  ContextMenuSub,
-  ContextMenuSubContent,
-  ContextMenuSubTrigger,
-  ContextMenuTrigger,
-  DataGrid,
-  DropdownMenu,
-  DropdownMenuCheckboxItem,
-  DropdownMenuContent,
-  DropdownMenuGroup,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuPortal,
-  DropdownMenuRadioGroup,
-  DropdownMenuRadioItem,
-  DropdownMenuSeparator,
-  DropdownMenuShortcut,
-  DropdownMenuSub,
-  DropdownMenuSubContent,
-  DropdownMenuSubTrigger,
-  DropdownMenuTrigger,
-  ExpandableRow,
-  FilterMenu,
-  Input,
-  Pagination,
-  Popover,
-  PopoverAnchor,
-  PopoverContent,
-  PopoverTrigger,
-  Select,
-  SelectContent,
-  SelectGroup,
-  SelectItem,
-  SelectLabel,
-  SelectScrollDownButton,
-  SelectScrollUpButton,
-  SelectSeparator,
-  SelectTrigger,
-  SelectValue,
-  TableBody,
-  TableCell,
-  TableHeader,
-  TableRow,
-  ThemeProvider,
-  ThemeSwitcher,
-  ThemeWrapper,
-  badgeVariants,
-  buttonVariants,
-  cn,
-  darkTheme,
-  lightTheme,
-  makeStyles,
-  mergeStyles,
-  useColumnResize,
-  useGridPersistence,
-  useStyles,
-  useTailwindTheme,
-  useTheme,
-  useTssStyles,
-  useTssTheme
-};