shadcn-datagrid 0.1.0

package/dist/index.cjs

@@ -0,0 +1,1599 @@
+'use strict';
+
+var react = require('react');
+var lucideReact = require('lucide-react');
+var radixUi = require('radix-ui');
+var clsx = require('clsx');
+var tailwindMerge = require('tailwind-merge');
+var jsxRuntime = require('react/jsx-runtime');
+var TooltipPrimitive = require('@radix-ui/react-tooltip');
+var reactSlot = require('@radix-ui/react-slot');
+var classVarianceAuthority = require('class-variance-authority');
+var DropdownMenuPrimitive = require('@radix-ui/react-dropdown-menu');
+var dateFns = require('date-fns');
+var server = require('react-dom/server');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var TooltipPrimitive__namespace = /*#__PURE__*/_interopNamespace(TooltipPrimitive);
+var DropdownMenuPrimitive__namespace = /*#__PURE__*/_interopNamespace(DropdownMenuPrimitive);
+
+// src/components/DataGrid/index.tsx
+function cn(...inputs) {
+  return tailwindMerge.twMerge(clsx.clsx(inputs));
+}
+function Checkbox({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    radixUi.Checkbox.Root,
+    {
+      "data-slot": "checkbox",
+      className: cn(
+        "peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        radixUi.Checkbox.Indicator,
+        {
+          "data-slot": "checkbox-indicator",
+          className: "grid place-content-center text-current transition-none",
+          children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CheckIcon, { className: "size-3.5" })
+        }
+      )
+    }
+  );
+}
+function Table({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-slot": "table-container", className: "relative w-full overflow-x-auto", children: /* @__PURE__ */ jsxRuntime.jsx("table", { "data-slot": "table", className: cn("w-full caption-bottom text-sm", className), ...props }) });
+}
+function TableHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("thead", { "data-slot": "table-header", className: cn("[&_tr]:border-b", className), ...props });
+}
+function TableBody({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "tbody",
+    {
+      "data-slot": "table-body",
+      className: cn("[&_tr:last-child]:border-0", className),
+      ...props
+    }
+  );
+}
+function TableRow({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "tr",
+    {
+      "data-slot": "table-row",
+      className: cn(
+        "hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function TableHead({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "th",
+    {
+      "data-slot": "table-head",
+      className: cn(
+        "text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function TableCell({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "td",
+    {
+      "data-slot": "table-cell",
+      className: cn(
+        "p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function TooltipProvider({
+  delayDuration = 0,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    TooltipPrimitive__namespace.Provider,
+    {
+      "data-slot": "tooltip-provider",
+      delayDuration,
+      ...props
+    }
+  );
+}
+function Tooltip({ ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(TooltipProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(TooltipPrimitive__namespace.Root, { "data-slot": "tooltip", ...props }) });
+}
+function TooltipTrigger({ ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(TooltipPrimitive__namespace.Trigger, { "data-slot": "tooltip-trigger", ...props });
+}
+function TooltipContent({
+  className,
+  sideOffset = 0,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(TooltipPrimitive__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsxs(
+    TooltipPrimitive__namespace.Content,
+    {
+      "data-slot": "tooltip-content",
+      sideOffset,
+      className: cn(
+        "bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-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 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsxRuntime.jsx(TooltipPrimitive__namespace.Arrow, { className: "bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" })
+      ]
+    }
+  ) });
+}
+var buttonVariants = classVarianceAuthority.cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-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",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive: "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline: "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        link: "text-primary underline-offset-4 hover:underline"
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        xs: "h-6 gap-1 rounded-md px-2 text-xs has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3",
+        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9",
+        "icon-xs": "size-6 rounded-md [&_svg:not([class*='size-'])]:size-3",
+        "icon-sm": "size-8",
+        "icon-lg": "size-10"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+function Button({
+  className,
+  variant = "default",
+  size = "default",
+  asChild = false,
+  ...props
+}) {
+  const Comp = asChild ? reactSlot.Slot : "button";
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Comp,
+    {
+      "data-slot": "button",
+      "data-variant": variant,
+      "data-size": size,
+      className: cn(buttonVariants({ variant, size, className })),
+      ...props
+    }
+  );
+}
+function DropdownMenu({ ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuPrimitive__namespace.Root, { "data-slot": "dropdown-menu", ...props });
+}
+function DropdownMenuTrigger({
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuPrimitive__namespace.Trigger, { "data-slot": "dropdown-menu-trigger", ...props });
+}
+function DropdownMenuContent({
+  className,
+  sideOffset = 4,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuPrimitive__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
+    DropdownMenuPrimitive__namespace.Content,
+    {
+      "data-slot": "dropdown-menu-content",
+      sideOffset,
+      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-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
+        className
+      ),
+      ...props
+    }
+  ) });
+}
+function DropdownMenuItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    DropdownMenuPrimitive__namespace.Item,
+    {
+      "data-slot": "dropdown-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 DropdownMenuSeparator({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    DropdownMenuPrimitive__namespace.Separator,
+    {
+      "data-slot": "dropdown-menu-separator",
+      className: cn("bg-border -mx-1 my-1 h-px", className),
+      ...props
+    }
+  );
+}
+function ActionIconButton({ action, data }) {
+  const isDisabled = action.disabled?.(data) ?? false;
+  return /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+      Button,
+      {
+        variant: "ghost",
+        size: "icon",
+        disabled: isDisabled,
+        className: `dg-action-btn h-7 w-7 ${action.variant === "destructive" ? "hover:text-destructive" : ""}`,
+        onClick: (e) => {
+          e.stopPropagation();
+          action.onClick(data);
+        },
+        children: action.icon
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { children: /* @__PURE__ */ jsxRuntime.jsx("p", { children: action.label }) })
+  ] });
+}
+function DataGridActions({ config, data, isHovered = true }) {
+  const { mode, showOnHover, actions } = config;
+  const visibleActions = actions.filter((action) => !action.hidden || !action.hidden(data));
+  if (visibleActions.length === 0) return null;
+  if (mode === "dropdown") {
+    const shouldShow = !showOnHover || isHovered;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: "dg-actions dg-actions--dropdown flex justify-end",
+        style: { opacity: shouldShow ? 1 : 0, transition: "opacity 0.15s" },
+        children: /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenu, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "ghost", size: "icon", className: "dg-actions__trigger h-8 w-8 p-0", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MoreHorizontal, { className: "h-4 w-4" }) }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuContent, { align: "end", className: "dg-actions__content", children: visibleActions.map((action, index) => {
+            const isDisabled = action.disabled?.(data) ?? false;
+            return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+              index > 0 && visibleActions[index - 1]?.variant !== action.variant && action.variant === "destructive" && /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuSeparator, {}),
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                DropdownMenuItem,
+                {
+                  disabled: isDisabled,
+                  onClick: () => action.onClick(data),
+                  className: action.variant === "destructive" ? "text-destructive focus:text-destructive" : "",
+                  children: [
+                    action.icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mr-2", children: action.icon }),
+                    action.label
+                  ]
+                }
+              )
+            ] }, action.label);
+          }) })
+        ] })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(TooltipProvider, { children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "dg-actions dg-actions--icons flex justify-end gap-1", children: visibleActions.map((action) => /* @__PURE__ */ jsxRuntime.jsx(ActionIconButton, { action, data }, action.label)) }) });
+}
+function formatCurrency(value, locale = "en-US", currency = "USD") {
+  const num = typeof value === "number" ? value : parseFloat(String(value));
+  if (Number.isNaN(num)) return "-";
+  return new Intl.NumberFormat(locale, {
+    style: "currency",
+    currency,
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2
+  }).format(num);
+}
+function formatNumber(value, locale = "en-US") {
+  const num = typeof value === "number" ? value : parseFloat(String(value));
+  if (Number.isNaN(num)) return "-";
+  return new Intl.NumberFormat(locale, {
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2
+  }).format(num);
+}
+function formatDateValue(value, dateFormat = "dd MMM yyyy") {
+  if (!value) return "-";
+  try {
+    const date = typeof value === "string" ? dateFns.parseISO(value) : value;
+    return dateFns.format(date, dateFormat);
+  } catch {
+    return String(value);
+  }
+}
+function formatValue(value, formatType, type) {
+  if (value === null || value === void 0) return "-";
+  if (type === "date" || formatType?.includes("MMM") || formatType?.includes("yyyy")) {
+    return formatDateValue(value, formatType || "dd MMM yyyy");
+  }
+  if (formatType === "C2") return formatCurrency(value);
+  if (formatType === "N2") return formatNumber(value);
+  if (type === "boolean") return value ? "Yes" : "No";
+  return String(value);
+}
+function asyncReducer(_state, action) {
+  switch (action.type) {
+    case "FETCH_START":
+      return { data: null, isLoading: true, error: null };
+    case "FETCH_SUCCESS":
+      return { data: action.data, isLoading: false, error: null };
+    case "FETCH_ERROR":
+      return { data: null, isLoading: false, error: action.error };
+  }
+}
+function DataGridChildRow({
+  parentRow,
+  config,
+  parentColSpan,
+  className
+}) {
+  const [asyncState, dispatch] = react.useReducer(asyncReducer, {
+    data: null,
+    isLoading: false,
+    error: null
+  });
+  const { childColumns, getChildData, fetchChildData, childKeyField = "id" } = config;
+  const inlineData = getChildData?.(parentRow);
+  react.useEffect(() => {
+    if (!inlineData && fetchChildData) {
+      dispatch({ type: "FETCH_START" });
+      fetchChildData(parentRow).then((result) => dispatch({ type: "FETCH_SUCCESS", data: result })).catch(() => dispatch({ type: "FETCH_ERROR", error: "Failed to load child data" }));
+    }
+  }, [parentRow, fetchChildData, inlineData]);
+  const childData = inlineData ?? asyncState.data;
+  const columns = childColumns ?? [];
+  if (asyncState.isLoading) {
+    return /* @__PURE__ */ jsxRuntime.jsx(TableRow, { className: cn("dg-child-row dg-child-row--loading hover:bg-transparent", className), children: /* @__PURE__ */ jsxRuntime.jsx(TableCell, { colSpan: parentColSpan, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 py-4 px-8 text-muted-foreground", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "h-4 w-4 animate-spin" }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm", children: "Loading..." })
+    ] }) }) });
+  }
+  if (asyncState.error) {
+    return /* @__PURE__ */ jsxRuntime.jsx(TableRow, { className: cn("dg-child-row dg-child-row--error hover:bg-transparent", className), children: /* @__PURE__ */ jsxRuntime.jsx(TableCell, { colSpan: parentColSpan, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "py-4 px-8 text-sm text-destructive", children: asyncState.error }) }) });
+  }
+  if (!childData || childData.length === 0) {
+    return /* @__PURE__ */ jsxRuntime.jsx(TableRow, { className: cn("dg-child-row dg-child-row--empty hover:bg-transparent", className), children: /* @__PURE__ */ jsxRuntime.jsx(TableCell, { colSpan: parentColSpan, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "py-4 px-8 text-sm text-muted-foreground italic", children: "No child records" }) }) });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(TableRow, { className: cn("dg-child-row hover:bg-transparent", className), children: /* @__PURE__ */ jsxRuntime.jsx(TableCell, { colSpan: parentColSpan, className: "p-0", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "dg-child-row__container ml-10 mr-4 my-2", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-md border border-border/50 overflow-hidden shadow-[0_1px_3px_rgba(0,0,0,0.04)] bg-muted/30", children: /* @__PURE__ */ jsxRuntime.jsxs(Table, { className: "dg-child-row__table", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(TableHeader, { children: /* @__PURE__ */ jsxRuntime.jsx(TableRow, { className: "dg-child-row__header-row bg-muted/80 hover:bg-muted/80 border-b border-border", children: columns.map((col) => /* @__PURE__ */ jsxRuntime.jsx(
+      TableHead,
+      {
+        className: "dg-child-row__header-cell text-[11px] font-bold text-muted-foreground/90 uppercase tracking-wider h-8",
+        style: {
+          width: typeof col.width === "number" ? `${col.width}px` : col.width,
+          minWidth: col.minWidth,
+          maxWidth: col.maxWidth
+        },
+        children: col.headerText
+      },
+      String(col.field)
+    )) }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(TableBody, { children: childData.map(
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      (childRow, childIndex) => /* @__PURE__ */ jsxRuntime.jsx(
+        TableRow,
+        {
+          className: cn("dg-child-row__row", childIndex % 2 === 1 && "bg-muted/20"),
+          children: columns.map((col) => {
+            const value = childRow[col.field];
+            return /* @__PURE__ */ jsxRuntime.jsx(
+              TableCell,
+              {
+                className: "dg-child-row__cell text-xs py-2",
+                style: {
+                  width: typeof col.width === "number" ? `${col.width}px` : col.width,
+                  minWidth: col.minWidth,
+                  maxWidth: col.maxWidth
+                },
+                children: col.template ? col.template(childRow, childIndex) : formatValue(value, col.format, col.type)
+              },
+              String(col.field)
+            );
+          })
+        },
+        childRow[childKeyField] != null ? String(childRow[childKeyField]) : childIndex
+      )
+    ) })
+  ] }) }) }) }) });
+}
+function DataGridExpander({ isExpanded, onToggle, className }) {
+  const handleClick = react.useCallback(
+    (e) => {
+      e.stopPropagation();
+      onToggle();
+    },
+    [onToggle]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      type: "button",
+      className: cn(
+        "dg-expander inline-flex items-center justify-center h-6 w-6 rounded-sm hover:bg-muted transition-transform duration-200",
+        className
+      ),
+      onClick: handleClick,
+      "aria-label": isExpanded ? "Collapse row" : "Expand row",
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        lucideReact.ChevronRight,
+        {
+          className: cn("h-4 w-4 transition-transform duration-200", isExpanded && "rotate-90")
+        }
+      )
+    }
+  );
+}
+function ContextMenu({ ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(radixUi.ContextMenu.Root, { "data-slot": "context-menu", ...props });
+}
+function ContextMenuTrigger({
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(radixUi.ContextMenu.Trigger, { "data-slot": "context-menu-trigger", ...props });
+}
+function ContextMenuContent({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(radixUi.ContextMenu.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
+    radixUi.ContextMenu.Content,
+    {
+      "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({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    radixUi.ContextMenu.Item,
+    {
+      "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 ContextMenuLabel({
+  className,
+  inset,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    radixUi.ContextMenu.Label,
+    {
+      "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({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    radixUi.ContextMenu.Separator,
+    {
+      "data-slot": "context-menu-separator",
+      className: cn("bg-border -mx-1 my-1 h-px", className),
+      ...props
+    }
+  );
+}
+function DataGridContextMenu({
+  items,
+  data,
+  children,
+  className
+}) {
+  if (items.length === 0) return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
+  const processedItems = items.map((item, index) => {
+    if (item.type === "separator" || item.type === "label") {
+      return { item, index, isVisible: true };
+    }
+    const isHidden = item.hidden?.(data) ?? false;
+    return { item, index, isVisible: !isHidden };
+  });
+  const visibleItems = processedItems.filter((processedItem, idx) => {
+    const { item, isVisible } = processedItem;
+    if (item.type !== "separator") return isVisible;
+    const hasVisibleItemsAfter = processedItems.slice(idx + 1).some((pi) => pi.item.type !== "separator" && pi.isVisible);
+    const hasVisibleItemsBefore = processedItems.slice(0, idx).some((pi) => pi.item.type !== "separator" && pi.isVisible);
+    return hasVisibleItemsAfter && hasVisibleItemsBefore;
+  });
+  return /* @__PURE__ */ jsxRuntime.jsxs(ContextMenu, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(ContextMenuTrigger, { asChild: true, children }),
+    /* @__PURE__ */ jsxRuntime.jsx(ContextMenuContent, { className: cn("dg-context-menu w-56", className), children: visibleItems.map(({ item, index }) => {
+      if (item.type === "separator") {
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          ContextMenuSeparator,
+          {
+            className: "dg-context-menu__separator"
+          },
+          `sep-${String(index)}`
+        );
+      }
+      if (item.type === "label") {
+        return /* @__PURE__ */ jsxRuntime.jsx(ContextMenuLabel, { className: "dg-context-menu__label", children: item.label }, `label-${String(index)}`);
+      }
+      const isDisabled = item.disabled?.(data) ?? false;
+      return /* @__PURE__ */ jsxRuntime.jsxs(
+        ContextMenuItem,
+        {
+          disabled: isDisabled,
+          onClick: () => item.onClick(data),
+          className: cn(
+            "dg-context-menu__item",
+            item.variant === "destructive" && "text-destructive focus:text-destructive"
+          ),
+          children: [
+            item.icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "dg-context-menu__item-icon mr-2", children: item.icon }),
+            item.label
+          ]
+        },
+        `item-${item.label}`
+      );
+    }) })
+  ] });
+}
+function Select({ ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(radixUi.Select.Root, { "data-slot": "select", ...props });
+}
+function SelectValue({ ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(radixUi.Select.Value, { "data-slot": "select-value", ...props });
+}
+function SelectTrigger({
+  className,
+  size = "default",
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    radixUi.Select.Trigger,
+    {
+      "data-slot": "select-trigger",
+      "data-size": size,
+      className: cn(
+        "border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsxRuntime.jsx(radixUi.Select.Icon, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDownIcon, { className: "size-4 opacity-50" }) })
+      ]
+    }
+  );
+}
+function SelectScrollUpButton({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    radixUi.Select.ScrollUpButton,
+    {
+      "data-slot": "select-scroll-up-button",
+      className: cn("flex cursor-default items-center justify-center py-1", className),
+      ...props,
+      children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronUpIcon, { className: "size-4" })
+    }
+  );
+}
+function SelectScrollDownButton({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    radixUi.Select.ScrollDownButton,
+    {
+      "data-slot": "select-scroll-down-button",
+      className: cn("flex cursor-default items-center justify-center py-1", className),
+      ...props,
+      children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDownIcon, { className: "size-4" })
+    }
+  );
+}
+function SelectContent({
+  className,
+  children,
+  position = "item-aligned",
+  align = "center",
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(radixUi.Select.Portal, { children: /* @__PURE__ */ jsxRuntime.jsxs(
+    radixUi.Select.Content,
+    {
+      "data-slot": "select-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 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md",
+        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,
+      align,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(SelectScrollUpButton, {}),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          radixUi.Select.Viewport,
+          {
+            className: cn(
+              "p-1",
+              position === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1"
+            ),
+            children
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(SelectScrollDownButton, {})
+      ]
+    }
+  ) });
+}
+function SelectItem({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    radixUi.Select.Item,
+    {
+      "data-slot": "select-item",
+      className: cn(
+        "focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 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 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            "data-slot": "select-item-indicator",
+            className: "absolute right-2 flex size-3.5 items-center justify-center",
+            children: /* @__PURE__ */ jsxRuntime.jsx(radixUi.Select.ItemIndicator, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CheckIcon, { className: "size-4" }) })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(radixUi.Select.ItemText, { children })
+      ]
+    }
+  );
+}
+function getLayout(width) {
+  if (width >= 600) return "full";
+  if (width >= 400) return "compact";
+  return "minimal";
+}
+function DataGridPagination({ config, className }) {
+  const {
+    page,
+    pageSize,
+    total,
+    pageSizeOptions = [5, 10, 15, 20, 25],
+    onPageChange,
+    onPageSizeChange
+  } = config;
+  const totalPages = Math.ceil(total / pageSize) || 1;
+  const containerRef = react.useRef(null);
+  const [layout, setLayout] = react.useState("full");
+  const updateLayout = react.useCallback(() => {
+    if (containerRef.current) {
+      setLayout(getLayout(containerRef.current.offsetWidth));
+    }
+  }, []);
+  react.useEffect(() => {
+    updateLayout();
+    const observer = new ResizeObserver(updateLayout);
+    if (containerRef.current) observer.observe(containerRef.current);
+    return () => observer.disconnect();
+  }, [updateLayout]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref: containerRef,
+      className: cn(
+        "dg-pagination flex flex-wrap items-center gap-4 mt-4 pb-2 px-2",
+        layout === "minimal" ? "justify-center" : "justify-between",
+        className
+      ),
+      children: [
+        layout !== "minimal" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "dg-pagination__page-size flex items-center gap-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-muted-foreground whitespace-nowrap", children: layout === "full" ? "Rows per page:" : "Rows:" }),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            Select,
+            {
+              value: pageSize.toString(),
+              onValueChange: (value) => {
+                onPageSizeChange(Number(value));
+                onPageChange(1);
+              },
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(SelectTrigger, { className: "dg-pagination__page-size-trigger w-[80px] h-8", children: /* @__PURE__ */ jsxRuntime.jsx(SelectValue, {}) }),
+                /* @__PURE__ */ jsxRuntime.jsx(SelectContent, { children: pageSizeOptions.map((size) => /* @__PURE__ */ jsxRuntime.jsx(SelectItem, { value: size.toString(), children: size }, size)) })
+              ]
+            }
+          )
+        ] }),
+        layout !== "minimal" && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "dg-pagination__info flex items-center gap-2", children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-sm text-muted-foreground whitespace-nowrap", children: [
+          (page - 1) * pageSize + 1,
+          "\u2013",
+          Math.min(page * pageSize, total),
+          " of ",
+          total
+        ] }) }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "dg-pagination__nav flex items-center gap-1", children: [
+          layout === "full" && /* @__PURE__ */ jsxRuntime.jsx(
+            Button,
+            {
+              variant: "outline",
+              size: "icon",
+              className: "dg-pagination__btn h-8 w-8",
+              onClick: () => onPageChange(1),
+              disabled: page === 1,
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronsLeft, { className: "h-4 w-4" })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Button,
+            {
+              variant: "outline",
+              size: "icon",
+              className: "dg-pagination__btn h-8 w-8",
+              onClick: () => onPageChange(Math.max(page - 1, 1)),
+              disabled: page === 1,
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronLeft, { className: "h-4 w-4" })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "dg-pagination__page-info text-sm px-2 whitespace-nowrap", children: layout === "full" ? `Page ${String(page)} of ${String(totalPages)}` : `${String(page)}/${String(totalPages)}` }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Button,
+            {
+              variant: "outline",
+              size: "icon",
+              className: "dg-pagination__btn h-8 w-8",
+              onClick: () => onPageChange(Math.min(page + 1, totalPages)),
+              disabled: page === totalPages,
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { className: "h-4 w-4" })
+            }
+          ),
+          layout === "full" && /* @__PURE__ */ jsxRuntime.jsx(
+            Button,
+            {
+              variant: "outline",
+              size: "icon",
+              className: "dg-pagination__btn h-8 w-8",
+              onClick: () => onPageChange(totalPages),
+              disabled: page === totalPages,
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronsRight, { className: "h-4 w-4" })
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+function Skeleton({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-slot": "skeleton",
+      className: cn("bg-accent animate-pulse rounded-md", className),
+      ...props
+    }
+  );
+}
+function DataGridSkeleton({
+  columns,
+  rowCount = 5,
+  showCheckbox = false,
+  showActions = false,
+  showExpander = false
+}) {
+  const visibleColumns = columns.filter((col) => col.visible !== false);
+  const skeletonWidths = react.useMemo(
+    () => Array.from(
+      { length: rowCount },
+      (_, rowIdx) => visibleColumns.map((_2, colIdx) => `${((rowIdx + 1) * 37 + (colIdx + 1) * 53) % 40 + 50}%`)
+    ),
+    [rowCount, visibleColumns]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: Array.from({ length: rowCount }).map((_, rowIndex) => /* @__PURE__ */ jsxRuntime.jsxs(
+    TableRow,
+    {
+      className: "dg-row dg-row--skeleton hover:bg-transparent",
+      children: [
+        showExpander && /* @__PURE__ */ jsxRuntime.jsx(TableCell, { className: "dg-cell dg-cell--expander w-[40px]", children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { className: "h-4 w-4" }) }),
+        showCheckbox && /* @__PURE__ */ jsxRuntime.jsx(TableCell, { className: "dg-cell dg-cell--checkbox w-[40px]", children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { className: "h-4 w-4" }) }),
+        visibleColumns.map((column, colIndex) => {
+          const width = typeof column.width === "number" ? `${column.width}px` : column.width;
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            TableCell,
+            {
+              className: "dg-cell",
+              style: { width, minWidth: column.minWidth, maxWidth: column.maxWidth },
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                Skeleton,
+                {
+                  className: "h-4",
+                  style: { width: skeletonWidths[rowIndex]?.[colIndex] ?? "60%" }
+                }
+              )
+            },
+            `skeleton-cell-${String(column.field)}`
+          );
+        }),
+        showActions && /* @__PURE__ */ jsxRuntime.jsx(TableCell, { className: "dg-cell dg-cell--actions w-[80px]", children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { className: "h-6 w-6 ml-auto" }) })
+      ]
+    },
+    `skeleton-row-${String(rowIndex)}`
+  )) });
+}
+function stripHtml(html) {
+  const doc = new DOMParser().parseFromString(html, "text/html");
+  return doc.body.textContent?.trim() ?? "";
+}
+function reactNodeToText(node) {
+  if (node === null || node === void 0) return "";
+  if (typeof node === "string") return node;
+  if (typeof node === "number" || typeof node === "boolean") return String(node);
+  if (react.isValidElement(node)) {
+    try {
+      return stripHtml(server.renderToStaticMarkup(node));
+    } catch {
+      return "";
+    }
+  }
+  return String(node);
+}
+function getCellExportValue(row, col, rowIndex) {
+  if (col.exportFormatter) return col.exportFormatter(row);
+  if (col.template) {
+    const rendered = col.template(row, rowIndex);
+    return reactNodeToText(rendered);
+  }
+  const value = row[col.field];
+  return String(formatValue(value, col.format, col.type));
+}
+function exportToCsv(data, columns, fileName) {
+  const visibleColumns = columns.filter((col) => col.visible !== false);
+  const headerRow = visibleColumns.map((col) => `"${col.headerText}"`).join(",");
+  const dataRows = data.map(
+    (row, rowIndex) => visibleColumns.map((col) => {
+      const formatted = getCellExportValue(row, col, rowIndex);
+      return `"${formatted.replace(/"/g, '""')}"`;
+    }).join(",")
+  );
+  const csv = [headerRow, ...dataRows].join("\n");
+  const blob = new Blob([csv], { type: "text/csv;charset=utf-8;" });
+  const url = URL.createObjectURL(blob);
+  const link = document.createElement("a");
+  link.href = url;
+  link.download = `${fileName}.csv`;
+  link.click();
+  URL.revokeObjectURL(url);
+}
+function exportToPrint(data, columns) {
+  const visibleColumns = columns.filter((col) => col.visible !== false);
+  const tableHtml = `
+    <!DOCTYPE html>
+    <html>
+    <head>
+      <title>Print</title>
+      <style>
+        body { font-family: Inter, Arial, sans-serif; padding: 20px; }
+        table { border-collapse: collapse; width: 100%; font-size: 12px; }
+        th, td { border: 1px solid #ddd; padding: 8px 12px; text-align: left; }
+        th { background-color: #f5f5f5; font-weight: 600; }
+        tr:nth-child(even) { background-color: #fafafa; }
+        @media print {
+          body { padding: 0; }
+          th { background-color: #f5f5f5 !important; -webkit-print-color-adjust: exact; }
+        }
+      </style>
+    </head>
+    <body>
+      <table>
+        <thead>
+          <tr>${visibleColumns.map((col) => `<th>${col.headerText}</th>`).join("")}</tr>
+        </thead>
+        <tbody>
+          ${data.map(
+    (row, rowIndex) => `
+            <tr>
+              ${visibleColumns.map((col) => `<td>${getCellExportValue(row, col, rowIndex)}</td>`).join("")}
+            </tr>
+          `
+  ).join("")}
+        </tbody>
+      </table>
+    </body>
+    </html>
+  `;
+  const iframe = document.createElement("iframe");
+  iframe.style.cssText = "position:fixed;width:0;height:0;border:none;opacity:0";
+  document.body.appendChild(iframe);
+  const iframeDoc = iframe.contentDocument ?? iframe.contentWindow?.document;
+  if (!iframeDoc) {
+    document.body.removeChild(iframe);
+    return;
+  }
+  iframeDoc.open();
+  iframeDoc.write(tableHtml);
+  iframeDoc.close();
+  iframe.onload = () => {
+    iframe.contentWindow?.print();
+    setTimeout(() => document.body.removeChild(iframe), 1e3);
+  };
+}
+function getExportIcon(format) {
+  switch (format) {
+    case "csv":
+      return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.FileSpreadsheet, { className: "h-4 w-4" });
+    case "print":
+      return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Printer, { className: "h-4 w-4" });
+    default:
+      return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Download, { className: "h-4 w-4" });
+  }
+}
+function getExportLabel(format) {
+  switch (format) {
+    case "csv":
+      return "Export as CSV";
+    case "print":
+      return "Print";
+    default:
+      return `Export as ${format.toUpperCase()}`;
+  }
+}
+function DataGridExport({
+  config,
+  data,
+  columns,
+  className
+}) {
+  const { formats = ["csv", "print"], fileName = "export" } = config;
+  const handleExport = react.useCallback(
+    (format) => {
+      switch (format) {
+        case "csv":
+          exportToCsv(data, columns, fileName);
+          break;
+        case "print":
+          exportToPrint(data, columns);
+          break;
+        default:
+          config.onCustomExport?.(format, data, columns);
+          break;
+      }
+    },
+    [data, columns, fileName, config]
+  );
+  if (formats.length === 1) {
+    const format = formats[0];
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      Button,
+      {
+        variant: "outline",
+        size: "sm",
+        className: cn("dg-export__btn gap-2", className),
+        onClick: () => handleExport(format),
+        children: [
+          getExportIcon(format),
+          getExportLabel(format)
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenu, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(Button, { variant: "outline", size: "sm", className: cn("dg-export__btn gap-2", className), children: [
+      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Download, { className: "h-4 w-4" }),
+      "Export"
+    ] }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuContent, { align: "end", className: "dg-export__content", children: formats.map((format) => /* @__PURE__ */ jsxRuntime.jsxs(
+      DropdownMenuItem,
+      {
+        onClick: () => handleExport(format),
+        className: "dg-export__item gap-2",
+        children: [
+          getExportIcon(format),
+          getExportLabel(format)
+        ]
+      },
+      format
+    )) })
+  ] });
+}
+function DataGridToolbar({
+  showExport,
+  showBulkActions,
+  selectedCount,
+  bulkActionConfig,
+  exportConfig,
+  data,
+  columns,
+  getSelectedData,
+  classNames = {}
+}) {
+  if (!showExport && !(showBulkActions && selectedCount > 0)) return null;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("dg-toolbar flex items-center justify-between gap-2", classNames.toolbar), children: [
+    showBulkActions && selectedCount > 0 && bulkActionConfig && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "dg-toolbar__bulk flex items-center gap-2 p-2 bg-muted/50 rounded-md flex-1", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-sm text-muted-foreground", children: [
+        selectedCount,
+        " item(s) selected"
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex gap-2 ml-auto", children: bulkActionConfig.actions.map((action) => /* @__PURE__ */ jsxRuntime.jsxs(
+        "button",
+        {
+          type: "button",
+          className: cn(
+            "dg-toolbar__bulk-btn inline-flex items-center gap-1 px-3 py-1.5 text-sm rounded-md transition-colors",
+            action.variant === "destructive" ? "bg-destructive text-destructive-foreground hover:bg-destructive/90" : "bg-primary text-primary-foreground hover:bg-primary/90"
+          ),
+          onClick: () => action.onClick(getSelectedData()),
+          children: [
+            action.icon,
+            action.label
+          ]
+        },
+        action.label
+      )) })
+    ] }),
+    showExport && exportConfig && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("dg-toolbar__export ml-auto", classNames.exportToolbar), children: /* @__PURE__ */ jsxRuntime.jsx(DataGridExport, { config: exportConfig, data, columns }) })
+  ] });
+}
+function getTextAlign(align) {
+  switch (align) {
+    case "Right":
+      return "right";
+    case "Center":
+      return "center";
+    default:
+      return "left";
+  }
+}
+function getJustifyContent(align) {
+  switch (align) {
+    case "Right":
+      return "flex-end";
+    case "Center":
+      return "center";
+    default:
+      return "flex-start";
+  }
+}
+function DataGridCellContentInner({
+  row,
+  column,
+  children
+}) {
+  const tooltipCfg = column.tooltip;
+  if (!tooltipCfg || tooltipCfg === true) {
+    return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "block truncate", children });
+  }
+  const config = tooltipCfg;
+  return /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "block truncate", children }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { side: config.side ?? "top", className: config.className, children: config.content ? config.content(row) : children })
+  ] });
+}
+function DataGrid({
+  columns,
+  data,
+  isLoading = false,
+  skeletonRowCount = 5,
+  pagination,
+  actionConfig,
+  bulkActionConfig,
+  contextMenuItems,
+  exportConfig,
+  childRowConfig,
+  emptyMessage = "No data found",
+  emptyComponent,
+  onRowClick,
+  className,
+  classNames = {},
+  keyField = "id",
+  sortConfig: externalSortConfig,
+  onSort,
+  tableContainerRef: externalContainerRef,
+  stickyHeader = false,
+  rowHeight,
+  maxBodyHeight,
+  alternatingRows = true,
+  enableColumnResize = false,
+  showHeaderBorder = false
+}) {
+  const [internalSortConfig, setInternalSortConfig] = react.useState({
+    field: "",
+    direction: null
+  });
+  const sortConfig = externalSortConfig ?? internalSortConfig;
+  const [selectedRows, setSelectedRows] = react.useState(/* @__PURE__ */ new Set());
+  const [hoveredRow, setHoveredRow] = react.useState(null);
+  const [expandedRows, setExpandedRows] = react.useState(/* @__PURE__ */ new Set());
+  const [columnWidths, setColumnWidths] = react.useState({});
+  const [resizingColumn, setResizingColumn] = react.useState(null);
+  const resizeStartX = react.useRef(0);
+  const resizeStartWidth = react.useRef(0);
+  const justResized = react.useRef(false);
+  const internalContainerRef = react.useRef(null);
+  const tableContainerRef = externalContainerRef ?? internalContainerRef;
+  const sortedData = react.useMemo(() => {
+    if (onSort || !sortConfig.field || !sortConfig.direction) return data;
+    return [...data].sort((a, b) => {
+      const field = sortConfig.field;
+      const aVal = a[field];
+      const bVal = b[field];
+      if (aVal == null || bVal == null) return 0;
+      let cmp = 0;
+      if (aVal < bVal) cmp = -1;
+      else if (aVal > bVal) cmp = 1;
+      return sortConfig.direction === "desc" ? -cmp : cmp;
+    });
+  }, [data, sortConfig, onSort]);
+  const visibleColumns = react.useMemo(() => columns.filter((col) => col.visible !== false), [columns]);
+  const showBulkActions = bulkActionConfig?.enabled ?? false;
+  const showActionColumn = !!actionConfig && actionConfig.actions.length > 0;
+  const showExpanderColumn = childRowConfig?.enabled ?? false;
+  const showContextMenu = !!contextMenuItems && contextMenuItems.length > 0;
+  const showExport = exportConfig?.enabled ?? false;
+  const totalColSpan = visibleColumns.length + (showBulkActions ? 1 : 0) + (showActionColumn ? 1 : 0) + (showExpanderColumn ? 1 : 0);
+  const columnsToRender = visibleColumns.map((column, index) => ({ column, index }));
+  const handleSort = react.useCallback(
+    (field, allowSorting) => {
+      if (allowSorting === false) return;
+      setExpandedRows(/* @__PURE__ */ new Set());
+      let nextSortConfig;
+      if (sortConfig.field !== field) {
+        nextSortConfig = { field, direction: "asc" };
+      } else if (sortConfig.direction === "asc") {
+        nextSortConfig = { field, direction: "desc" };
+      } else {
+        nextSortConfig = { field: "", direction: null };
+      }
+      if (onSort) {
+        if (!nextSortConfig.field || !nextSortConfig.direction) {
+          onSort(null);
+        } else {
+          const ordering = nextSortConfig.direction === "desc" ? `-${nextSortConfig.field}` : nextSortConfig.field;
+          onSort(ordering);
+        }
+      } else {
+        setInternalSortConfig(nextSortConfig);
+      }
+    },
+    [sortConfig, onSort]
+  );
+  const handleSelectAll = react.useCallback(() => {
+    if (selectedRows.size === data.length) {
+      setSelectedRows(/* @__PURE__ */ new Set());
+    } else {
+      const allKeys = data.map((row) => row[keyField]);
+      setSelectedRows(new Set(allKeys));
+    }
+  }, [data, keyField, selectedRows.size]);
+  const handleSelectRow = react.useCallback((key) => {
+    setSelectedRows((prev) => {
+      const next = new Set(prev);
+      if (next.has(key)) next.delete(key);
+      else next.add(key);
+      return next;
+    });
+  }, []);
+  const handleToggleExpand = react.useCallback((key) => {
+    setExpandedRows((prev) => {
+      const next = new Set(prev);
+      if (next.has(key)) next.delete(key);
+      else next.add(key);
+      return next;
+    });
+  }, []);
+  const getSelectedData = react.useCallback(
+    () => data.filter((row) => selectedRows.has(row[keyField])),
+    [data, keyField, selectedRows]
+  );
+  const getColumnWidth = react.useCallback(
+    (column) => {
+      const field = String(column.field);
+      if (columnWidths[field] !== void 0) return columnWidths[field];
+      if (typeof column.width === "number") return column.width;
+      if (typeof column.width === "string") {
+        const parsed = parseInt(column.width, 10);
+        return isNaN(parsed) ? 150 : parsed;
+      }
+      return 150;
+    },
+    [columnWidths]
+  );
+  const handleResizeStart = react.useCallback(
+    (e, column) => {
+      e.preventDefault();
+      e.stopPropagation();
+      const field = String(column.field);
+      const currentWidth = getColumnWidth(column);
+      resizeStartX.current = e.clientX;
+      resizeStartWidth.current = currentWidth;
+      setResizingColumn(field);
+      const handleMouseMove = (moveEvent) => {
+        const diff = moveEvent.clientX - resizeStartX.current;
+        const minW = column.minWidth ?? 20;
+        const newWidth = Math.max(minW, resizeStartWidth.current + diff);
+        setColumnWidths((prev) => ({ ...prev, [field]: newWidth }));
+      };
+      const handleMouseUp = () => {
+        setResizingColumn(null);
+        justResized.current = true;
+        requestAnimationFrame(() => {
+          justResized.current = false;
+        });
+        document.removeEventListener("mousemove", handleMouseMove);
+        document.removeEventListener("mouseup", handleMouseUp);
+      };
+      document.addEventListener("mousemove", handleMouseMove);
+      document.addEventListener("mouseup", handleMouseUp);
+    },
+    [getColumnWidth]
+  );
+  react.useEffect(() => {
+    const root = document.documentElement;
+    if (resizingColumn) root.classList.add("dg-resizing");
+    else root.classList.remove("dg-resizing");
+    return () => root.classList.remove("dg-resizing");
+  }, [resizingColumn]);
+  const getColumnWidthStr = (column) => {
+    if (enableColumnResize) return `${getColumnWidth(column)}px`;
+    if (typeof column.width === "number") return `${column.width}px`;
+    if (typeof column.width === "string") return column.width;
+    return void 0;
+  };
+  const renderSortIcon = (column) => {
+    if (column.allowSorting === false) return null;
+    const field = String(column.field);
+    if (sortConfig.field !== field) {
+      return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronsUpDown, { className: "dg-sort-icon ml-1 h-3.5 w-3.5 opacity-30", strokeWidth: 2.5 });
+    }
+    if (sortConfig.direction === "asc") {
+      return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronUp, { className: "dg-sort-icon ml-1 h-3.5 w-3.5 text-primary", strokeWidth: 2.5 });
+    }
+    if (sortConfig.direction === "desc") {
+      return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: "dg-sort-icon ml-1 h-3.5 w-3.5 text-primary", strokeWidth: 2.5 });
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronsUpDown, { className: "dg-sort-icon ml-1 h-3.5 w-3.5 opacity-30", strokeWidth: 2.5 });
+  };
+  const renderCellValue = (row, column, rowIndex) => {
+    if (column.template) return column.template(row, rowIndex);
+    const value = row[column.field];
+    const formatted = formatValue(value, column.format, column.type);
+    return /* @__PURE__ */ jsxRuntime.jsx(DataGridCellContentInner, { row, column, children: formatted });
+  };
+  const renderRow = (row, rowIndex) => {
+    const rowKey = row[keyField] ?? rowIndex;
+    const isSelected = selectedRows.has(rowKey);
+    const isHovered = hoveredRow === rowKey;
+    const isExpanded = expandedRows.has(rowKey);
+    const tableRowElement = /* @__PURE__ */ jsxRuntime.jsxs(
+      TableRow,
+      {
+        className: cn(
+          "dg-row transition-colors",
+          isSelected && "dg-row--selected bg-muted",
+          isExpanded && "dg-row--expanded",
+          onRowClick && "cursor-pointer",
+          classNames.row,
+          isSelected && classNames.rowSelected,
+          isExpanded && classNames.rowExpanded
+        ),
+        "data-state": isSelected ? "selected" : void 0,
+        onClick: () => onRowClick?.(row),
+        onMouseEnter: () => setHoveredRow(rowKey),
+        onMouseLeave: () => setHoveredRow(null),
+        style: rowHeight ? { height: rowHeight } : void 0,
+        children: [
+          showExpanderColumn && /* @__PURE__ */ jsxRuntime.jsx(TableCell, { className: cn("dg-cell dg-cell--expander w-[40px]", classNames.cellExpander), children: /* @__PURE__ */ jsxRuntime.jsx(DataGridExpander, { isExpanded, onToggle: () => handleToggleExpand(rowKey) }) }),
+          showBulkActions && /* @__PURE__ */ jsxRuntime.jsx(TableCell, { className: cn("dg-cell dg-cell--checkbox w-[40px]", classNames.cellCheckbox), children: /* @__PURE__ */ jsxRuntime.jsx(
+            Checkbox,
+            {
+              checked: isSelected,
+              onCheckedChange: () => handleSelectRow(rowKey),
+              onClick: (e) => e.stopPropagation(),
+              "aria-label": `Select row ${rowIndex + 1}`
+            }
+          ) }),
+          columnsToRender.map(({ column, index: colIndex }) => {
+            const widthStr = getColumnWidthStr(column);
+            return /* @__PURE__ */ jsxRuntime.jsx(
+              TableCell,
+              {
+                className: cn("dg-cell", column.className, classNames.cell),
+                style: {
+                  width: widthStr,
+                  minWidth: column.minWidth,
+                  maxWidth: column.maxWidth,
+                  textAlign: getTextAlign(column.textAlign)
+                },
+                "data-column": String(column.field),
+                "data-col-index": colIndex,
+                children: renderCellValue(row, column, rowIndex)
+              },
+              String(column.field)
+            );
+          }),
+          showActionColumn && actionConfig && /* @__PURE__ */ jsxRuntime.jsx(
+            TableCell,
+            {
+              className: cn("dg-cell dg-cell--actions", classNames.cellActions),
+              style: { width: actionConfig.width || 80 },
+              onClick: (e) => e.stopPropagation(),
+              children: /* @__PURE__ */ jsxRuntime.jsx(DataGridActions, { config: actionConfig, data: row, isHovered })
+            }
+          )
+        ]
+      },
+      rowKey
+    );
+    const wrappedRow = showContextMenu && contextMenuItems ? /* @__PURE__ */ jsxRuntime.jsx(
+      DataGridContextMenu,
+      {
+        items: contextMenuItems,
+        data: row,
+        className: classNames.contextMenu,
+        children: tableRowElement
+      },
+      rowKey
+    ) : tableRowElement;
+    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      wrappedRow,
+      showExpanderColumn && isExpanded && childRowConfig && /* @__PURE__ */ jsxRuntime.jsx(
+        DataGridChildRow,
+        {
+          parentRow: row,
+          config: childRowConfig,
+          parentColSpan: totalColSpan,
+          className: classNames.childRow
+        }
+      )
+    ] });
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: cn(
+        "dg-root h-full flex flex-col gap-4 w-full min-w-0 overflow-hidden",
+        classNames.root,
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          DataGridToolbar,
+          {
+            showExport,
+            showBulkActions,
+            selectedCount: selectedRows.size,
+            bulkActionConfig,
+            exportConfig,
+            data,
+            columns,
+            getSelectedData,
+            classNames
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            ref: tableContainerRef,
+            className: cn(
+              "dg-table-container custom-scrollbar relative overflow-auto rounded-md border flex-1 min-h-0 [&_[data-slot=table-container]]:overflow-visible",
+              classNames.tableContainer
+            ),
+            style: {
+              width: 0,
+              minWidth: "100%",
+              ...maxBodyHeight ? { maxHeight: maxBodyHeight } : {}
+            },
+            children: /* @__PURE__ */ jsxRuntime.jsxs(Table, { className: cn("dg-table", classNames.table), children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                TableHeader,
+                {
+                  className: cn(
+                    "dg-header",
+                    stickyHeader && "sticky top-0 z-10 bg-background",
+                    classNames.header
+                  ),
+                  children: /* @__PURE__ */ jsxRuntime.jsxs(
+                    TableRow,
+                    {
+                      className: cn(
+                        "dg-header-row bg-muted/50",
+                        showHeaderBorder && "dg-header-bordered",
+                        classNames.headerRow
+                      ),
+                      children: [
+                        showExpanderColumn && /* @__PURE__ */ jsxRuntime.jsx(TableHead, { className: "dg-header-cell dg-header-cell--expander w-[40px]" }),
+                        showBulkActions && /* @__PURE__ */ jsxRuntime.jsx(TableHead, { className: "dg-header-cell dg-header-cell--checkbox w-[40px]", children: /* @__PURE__ */ jsxRuntime.jsx(
+                          Checkbox,
+                          {
+                            checked: data.length > 0 && selectedRows.size === data.length,
+                            onCheckedChange: handleSelectAll,
+                            "aria-label": "Select all"
+                          }
+                        ) }),
+                        columnsToRender.map(({ column }) => {
+                          const widthStr = getColumnWidthStr(column);
+                          const canResize = enableColumnResize && column.allowResizing !== false;
+                          return /* @__PURE__ */ jsxRuntime.jsxs(
+                            TableHead,
+                            {
+                              className: cn(
+                                "dg-header-cell select-none",
+                                column.headerClassName,
+                                classNames.headerCell
+                              ),
+                              style: {
+                                width: widthStr,
+                                minWidth: column.minWidth,
+                                maxWidth: column.maxWidth,
+                                textAlign: getTextAlign(column.textAlign)
+                              },
+                              "data-column": String(column.field),
+                              children: [
+                                column.headerTemplate ? column.headerTemplate() : /* @__PURE__ */ jsxRuntime.jsxs(
+                                  "div",
+                                  {
+                                    className: cn(
+                                      "flex items-center",
+                                      column.allowSorting !== false && "cursor-pointer"
+                                    ),
+                                    style: { justifyContent: getJustifyContent(column.textAlign) },
+                                    role: "button",
+                                    tabIndex: 0,
+                                    onClick: () => handleSort(String(column.field), column.allowSorting),
+                                    onKeyDown: (e) => {
+                                      if (e.key === "Enter" || e.key === " ") {
+                                        e.preventDefault();
+                                        handleSort(String(column.field), column.allowSorting);
+                                      }
+                                    },
+                                    children: [
+                                      column.headerText,
+                                      renderSortIcon(column)
+                                    ]
+                                  }
+                                ),
+                                canResize && /* @__PURE__ */ jsxRuntime.jsx(
+                                  "div",
+                                  {
+                                    className: cn(
+                                      "dg-resize-handle",
+                                      resizingColumn === String(column.field) && "dg-resize-handle--active"
+                                    ),
+                                    onMouseDown: (e) => handleResizeStart(e, column),
+                                    role: "separator",
+                                    "aria-orientation": "vertical"
+                                  }
+                                )
+                              ]
+                            },
+                            String(column.field)
+                          );
+                        }),
+                        showActionColumn && actionConfig && /* @__PURE__ */ jsxRuntime.jsx(
+                          TableHead,
+                          {
+                            className: "dg-header-cell dg-header-cell--actions text-right",
+                            style: { width: actionConfig.width || 80 },
+                            children: actionConfig.showHeader !== false ? actionConfig.headerText || "Actions" : ""
+                          }
+                        )
+                      ]
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                TableBody,
+                {
+                  className: cn("dg-body", alternatingRows && "dg-alternating", classNames.body),
+                  children: [
+                    isLoading && /* @__PURE__ */ jsxRuntime.jsx(
+                      DataGridSkeleton,
+                      {
+                        columns,
+                        rowCount: skeletonRowCount,
+                        showCheckbox: showBulkActions,
+                        showActions: showActionColumn,
+                        showExpander: showExpanderColumn
+                      }
+                    ),
+                    !isLoading && data.length === 0 && /* @__PURE__ */ jsxRuntime.jsx(TableRow, { className: "dg-row dg-row--empty", children: /* @__PURE__ */ jsxRuntime.jsx(
+                      TableCell,
+                      {
+                        colSpan: totalColSpan,
+                        className: cn("dg-cell dg-cell--empty h-24 text-center", classNames.empty),
+                        children: emptyComponent || /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: emptyMessage })
+                      }
+                    ) }),
+                    !isLoading && sortedData.map((row, rowIndex) => renderRow(row, rowIndex))
+                  ]
+                }
+              )
+            ] })
+          }
+        ),
+        pagination && /* @__PURE__ */ jsxRuntime.jsx(DataGridPagination, { config: pagination, className: classNames.pagination })
+      ]
+    }
+  );
+}
+
+exports.DataGrid = DataGrid;
+exports.exportToCsv = exportToCsv;
+exports.exportToPrint = exportToPrint;
+exports.formatCurrency = formatCurrency;
+exports.formatDateValue = formatDateValue;
+exports.formatNumber = formatNumber;
+exports.formatValue = formatValue;
+exports.getCellExportValue = getCellExportValue;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map