@onesaz/ui 0.3.0 → 0.3.2

package/dist/index.js

@@ -1671,7 +1671,7 @@ var DialogOverlay = React19.forwardRef(({ className, ...props }, ref) => /* @__P
   }
 ));
 DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
-var DialogContent = React19.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs7(DialogPortal, { children: [
+var DialogContent = React19.forwardRef(({ className, children, hideCloseButton = false, ...props }, ref) => /* @__PURE__ */ jsxs7(DialogPortal, { children: [
   /* @__PURE__ */ jsx19(DialogOverlay, {}),
   /* @__PURE__ */ jsxs7(
     DialogPrimitive.Content,
@@ -1688,7 +1688,7 @@ var DialogContent = React19.forwardRef(({ className, children, ...props }, ref)
       ...props,
       children: [
         children,
-        /* @__PURE__ */ jsxs7(DialogPrimitive.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground", children: [
+        !hideCloseButton && /* @__PURE__ */ jsxs7(DialogPrimitive.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground", children: [
           /* @__PURE__ */ jsxs7(
             "svg",
             {
@@ -2188,35 +2188,1106 @@ var Combobox = React23.forwardRef(
 );
 Combobox.displayName = "Combobox";
 
-// src/playground.tsx
+// src/components/data-grid/index.tsx
 import * as React24 from "react";
+import {
+  useReactTable,
+  getCoreRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  getFilteredRowModel,
+  flexRender
+} from "@tanstack/react-table";
+import { useVirtualizer } from "@tanstack/react-virtual";
 import { jsx as jsx24, jsxs as jsxs10 } from "react/jsx-runtime";
-var Section = ({ title, children }) => /* @__PURE__ */ jsxs10("div", { className: "mb-8", children: [
-  /* @__PURE__ */ jsx24("h2", { className: "text-xl font-semibold mb-4 text-foreground", children: title }),
-  /* @__PURE__ */ jsx24("div", { className: "p-4 border border-border rounded-lg bg-background", children })
+function convertColumns(columns, checkboxSelection) {
+  const tanstackColumns = [];
+  if (checkboxSelection) {
+    tanstackColumns.push({
+      id: "__select__",
+      header: ({ table }) => /* @__PURE__ */ jsx24("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx24(
+        Checkbox,
+        {
+          checked: table.getIsAllPageRowsSelected(),
+          onChange: (e) => table.toggleAllPageRowsSelected(e.target.checked),
+          "aria-label": "Select all"
+        }
+      ) }),
+      cell: ({ row }) => /* @__PURE__ */ jsx24("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx24(
+        Checkbox,
+        {
+          checked: row.getIsSelected(),
+          onChange: (e) => row.toggleSelected(e.target.checked),
+          "aria-label": "Select row"
+        }
+      ) }),
+      size: 50,
+      enableSorting: false,
+      enableColumnFilter: false,
+      enableHiding: false
+    });
+  }
+  columns.forEach((col) => {
+    if (col.hide) return;
+    const tanstackCol = {
+      id: col.field,
+      accessorFn: (row) => {
+        if (col.valueGetter) {
+          return col.valueGetter({ row, field: col.field });
+        }
+        return row[col.field];
+      },
+      header: col.renderHeader ? () => col.renderHeader({ field: col.field, colDef: col }) : col.headerName || col.field,
+      cell: ({ row, getValue }) => {
+        const value = getValue();
+        if (col.renderCell) {
+          return col.renderCell({
+            row: row.original,
+            value,
+            field: col.field,
+            rowIndex: row.index
+          });
+        }
+        if (col.valueFormatter) {
+          return col.valueFormatter({ value });
+        }
+        return value;
+      },
+      enableSorting: col.sortable !== false,
+      enableHiding: col.hideable !== false,
+      size: col.width,
+      minSize: col.minWidth,
+      maxSize: col.maxWidth,
+      meta: {
+        align: col.align,
+        headerAlign: col.headerAlign,
+        flex: col.flex,
+        headerName: col.headerName || col.field,
+        wrapText: col.wrapText,
+        cellClassName: col.cellClassName
+      }
+    };
+    tanstackColumns.push(tanstackCol);
+  });
+  return tanstackColumns;
+}
+var densityRowHeights = {
+  compact: 36,
+  standard: 52,
+  comfortable: 68
+};
+function calculateInitialColumnWidths(columns, containerWidth, checkboxSelection, columnSizing) {
+  const widthMap = /* @__PURE__ */ new Map();
+  if (containerWidth <= 0) return widthMap;
+  let remainingWidth = containerWidth;
+  if (checkboxSelection) {
+    widthMap.set("__select__", { id: "__select__", width: 50, minWidth: 50, maxWidth: 50 });
+    remainingWidth -= 50;
+  }
+  const flexColumns = [];
+  let totalFlex = 0;
+  columns.forEach((col) => {
+    if (col.hide) return;
+    const minWidth = col.minWidth || 50;
+    const maxWidth = col.maxWidth || 9999;
+    if (columnSizing[col.field]) {
+      const resizedWidth = columnSizing[col.field];
+      widthMap.set(col.field, {
+        id: col.field,
+        width: resizedWidth,
+        minWidth,
+        maxWidth
+      });
+      remainingWidth -= resizedWidth;
+      return;
+    }
+    if (col.flex && col.flex > 0) {
+      flexColumns.push({ col, flex: col.flex, minWidth, maxWidth });
+      totalFlex += col.flex;
+      remainingWidth -= minWidth;
+    } else {
+      const width = col.width || 100;
+      const finalWidth = Math.max(minWidth, Math.min(width, maxWidth));
+      widthMap.set(col.field, {
+        id: col.field,
+        width: finalWidth,
+        minWidth,
+        maxWidth
+      });
+      remainingWidth -= finalWidth;
+    }
+  });
+  if (flexColumns.length > 0 && totalFlex > 0) {
+    const extraWidth = Math.max(0, remainingWidth);
+    flexColumns.forEach(({ col, flex, minWidth, maxWidth }) => {
+      const proportionalExtra = flex / totalFlex * extraWidth;
+      const calculatedWidth = minWidth + proportionalExtra;
+      const finalWidth = Math.max(minWidth, Math.min(calculatedWidth, maxWidth));
+      widthMap.set(col.field, {
+        id: col.field,
+        width: finalWidth,
+        minWidth,
+        maxWidth,
+        flex
+      });
+    });
+  }
+  return widthMap;
+}
+function useColumnWidths(columns, containerWidth, checkboxSelection, columnSizing) {
+  return React24.useMemo(
+    () => calculateInitialColumnWidths(columns, containerWidth, checkboxSelection, columnSizing),
+    [columns, containerWidth, checkboxSelection, columnSizing]
+  );
+}
+var ColumnResizeHandle = ({
+  header,
+  isResizing
+}) => {
+  return /* @__PURE__ */ jsx24(
+    "div",
+    {
+      className: cn(
+        // Wider hit area (8px) for easier clicking, but visually narrow
+        "absolute right-0 top-0 h-full w-2 cursor-col-resize select-none touch-none z-10",
+        // Visual indicator using pseudo-element
+        "after:absolute after:right-0 after:top-0 after:h-full after:w-[2px]",
+        "hover:after:bg-primary-500",
+        isResizing && "after:bg-primary-500"
+      ),
+      onMouseDown: header.getResizeHandler(),
+      onTouchStart: header.getResizeHandler(),
+      onClick: (e) => e.stopPropagation()
+    }
+  );
+};
+var SortIcon = ({ direction }) => {
+  if (!direction) {
+    return /* @__PURE__ */ jsx24("svg", { className: "ml-1 h-4 w-4 text-muted-foreground/50", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx24("path", { d: "M7 15l5 5 5-5M7 9l5-5 5 5" }) });
+  }
+  return /* @__PURE__ */ jsx24("svg", { className: "ml-1 h-4 w-4", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: direction === "asc" ? /* @__PURE__ */ jsx24("path", { d: "M7 14l5-5 5 5" }) : /* @__PURE__ */ jsx24("path", { d: "M7 10l5 5 5-5" }) });
+};
+var ColumnVisibilityDropdown = ({
+  table
+}) => {
+  const [open, setOpen] = React24.useState(false);
+  const dropdownRef = React24.useRef(null);
+  React24.useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+        setOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+  const allColumns = table.getAllLeafColumns().filter((col) => col.id !== "__select__");
+  return /* @__PURE__ */ jsxs10("div", { className: "relative", ref: dropdownRef, children: [
+    /* @__PURE__ */ jsxs10(
+      Button,
+      {
+        variant: "outline",
+        size: "sm",
+        onClick: () => setOpen(!open),
+        className: "h-9 gap-2",
+        children: [
+          /* @__PURE__ */ jsxs10("svg", { className: "h-4 w-4", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+            /* @__PURE__ */ jsx24("path", { d: "M12 3v18M3 12h18" }),
+            /* @__PURE__ */ jsx24("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2" }),
+            /* @__PURE__ */ jsx24("path", { d: "M3 9h18M3 15h18M9 3v18M15 3v18" })
+          ] }),
+          "Columns"
+        ]
+      }
+    ),
+    open && /* @__PURE__ */ jsxs10("div", { className: "absolute right-0 top-full mt-1 z-50 min-w-[180px] rounded-md border border-border bg-popover p-2 shadow-md", children: [
+      /* @__PURE__ */ jsx24("div", { className: "text-sm font-medium text-foreground mb-2 px-2", children: "Show/Hide Columns" }),
+      /* @__PURE__ */ jsx24("div", { className: "max-h-[300px] overflow-auto", children: allColumns.map((column) => {
+        const meta = column.columnDef.meta;
+        const headerName = meta?.headerName || column.id;
+        return /* @__PURE__ */ jsxs10(
+          "label",
+          {
+            className: "flex items-center gap-2 px-2 py-1.5 hover:bg-muted rounded cursor-pointer",
+            children: [
+              /* @__PURE__ */ jsx24(
+                Checkbox,
+                {
+                  checked: column.getIsVisible(),
+                  onChange: (e) => column.toggleVisibility(e.target.checked)
+                }
+              ),
+              /* @__PURE__ */ jsx24("span", { className: "text-sm", children: headerName })
+            ]
+          },
+          column.id
+        );
+      }) }),
+      /* @__PURE__ */ jsxs10("div", { className: "border-t border-border mt-2 pt-2 flex gap-2 px-2", children: [
+        /* @__PURE__ */ jsx24(
+          Button,
+          {
+            variant: "ghost",
+            size: "sm",
+            className: "flex-1 h-7 text-xs",
+            onClick: () => table.toggleAllColumnsVisible(true),
+            children: "Show All"
+          }
+        ),
+        /* @__PURE__ */ jsx24(
+          Button,
+          {
+            variant: "ghost",
+            size: "sm",
+            className: "flex-1 h-7 text-xs",
+            onClick: () => table.toggleAllColumnsVisible(false),
+            children: "Hide All"
+          }
+        )
+      ] })
+    ] })
+  ] });
+};
+var DataGridPagination = ({
+  table,
+  pageSizeOptions = [10, 25, 50, 100],
+  rowCount,
+  paginationMode
+}) => {
+  const pageCount = paginationMode === "server" && rowCount ? Math.ceil(rowCount / table.getState().pagination.pageSize) : table.getPageCount();
+  const currentPage = table.getState().pagination.pageIndex;
+  const totalRows = paginationMode === "server" && rowCount ? rowCount : table.getFilteredRowModel().rows.length;
+  const pageSize = table.getState().pagination.pageSize;
+  const getPageNumbers = () => {
+    const pages = [];
+    const maxVisible = 5;
+    if (pageCount <= maxVisible) {
+      for (let i = 0; i < pageCount; i++) pages.push(i);
+    } else {
+      pages.push(0);
+      if (currentPage > 2) {
+        pages.push("ellipsis");
+      }
+      const start = Math.max(1, currentPage - 1);
+      const end = Math.min(pageCount - 2, currentPage + 1);
+      for (let i = start; i <= end; i++) {
+        if (!pages.includes(i)) pages.push(i);
+      }
+      if (currentPage < pageCount - 3) {
+        pages.push("ellipsis");
+      }
+      if (!pages.includes(pageCount - 1)) {
+        pages.push(pageCount - 1);
+      }
+    }
+    return pages;
+  };
+  const startRow = currentPage * pageSize + 1;
+  const endRow = Math.min((currentPage + 1) * pageSize, totalRows);
+  return /* @__PURE__ */ jsxs10("div", { className: "flex items-center justify-end gap-4 px-4 py-3 border-t border-border bg-background", children: [
+    /* @__PURE__ */ jsxs10("div", { className: "flex items-center gap-2 text-sm text-muted-foreground whitespace-nowrap", children: [
+      /* @__PURE__ */ jsx24("span", { children: "Rows per page:" }),
+      /* @__PURE__ */ jsx24(
+        "select",
+        {
+          value: pageSize,
+          onChange: (e) => table.setPageSize(Number(e.target.value)),
+          className: "h-8 rounded-md border border-border bg-background px-2 text-sm text-foreground focus:outline-none focus:ring-2 focus:ring-ring",
+          children: pageSizeOptions.map((size) => /* @__PURE__ */ jsx24("option", { value: size, children: size }, size))
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs10("span", { className: "text-sm text-muted-foreground whitespace-nowrap", children: [
+      startRow,
+      "-",
+      endRow,
+      " of ",
+      totalRows
+    ] }),
+    /* @__PURE__ */ jsx24(PaginationNamespace, { className: "mx-0 w-auto", children: /* @__PURE__ */ jsxs10(PaginationContent, { children: [
+      /* @__PURE__ */ jsx24(PaginationItem, { children: /* @__PURE__ */ jsx24(
+        Button,
+        {
+          variant: "outline",
+          size: "icon",
+          className: "h-8 w-8",
+          onClick: () => table.setPageIndex(0),
+          disabled: !table.getCanPreviousPage(),
+          children: /* @__PURE__ */ jsx24("svg", { className: "h-4 w-4", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx24("path", { d: "M11 17l-5-5 5-5M18 17l-5-5 5-5" }) })
+        }
+      ) }),
+      /* @__PURE__ */ jsx24(PaginationItem, { children: /* @__PURE__ */ jsx24(
+        Button,
+        {
+          variant: "outline",
+          size: "icon",
+          className: "h-8 w-8",
+          onClick: () => table.previousPage(),
+          disabled: !table.getCanPreviousPage(),
+          children: /* @__PURE__ */ jsx24("svg", { className: "h-4 w-4", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx24("path", { d: "M15 18l-6-6 6-6" }) })
+        }
+      ) }),
+      getPageNumbers().map(
+        (page, idx) => page === "ellipsis" ? /* @__PURE__ */ jsx24(PaginationItem, { children: /* @__PURE__ */ jsx24(PaginationEllipsis, {}) }, `ellipsis-${idx}`) : /* @__PURE__ */ jsx24(PaginationItem, { children: /* @__PURE__ */ jsx24(
+          PaginationLink,
+          {
+            isActive: page === currentPage,
+            onClick: () => table.setPageIndex(page),
+            children: page + 1
+          }
+        ) }, page)
+      ),
+      /* @__PURE__ */ jsx24(PaginationItem, { children: /* @__PURE__ */ jsx24(
+        Button,
+        {
+          variant: "outline",
+          size: "icon",
+          className: "h-8 w-8",
+          onClick: () => table.nextPage(),
+          disabled: !table.getCanNextPage(),
+          children: /* @__PURE__ */ jsx24("svg", { className: "h-4 w-4", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx24("path", { d: "M9 18l6-6-6-6" }) })
+        }
+      ) }),
+      /* @__PURE__ */ jsx24(PaginationItem, { children: /* @__PURE__ */ jsx24(
+        Button,
+        {
+          variant: "outline",
+          size: "icon",
+          className: "h-8 w-8",
+          onClick: () => table.setPageIndex(pageCount - 1),
+          disabled: !table.getCanNextPage(),
+          children: /* @__PURE__ */ jsx24("svg", { className: "h-4 w-4", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx24("path", { d: "M13 17l5-5-5-5M6 17l5-5-5-5" }) })
+        }
+      ) })
+    ] }) })
+  ] });
+};
+var ExportDropdown = ({
+  onExport,
+  rows,
+  columns,
+  fileName = "data-export"
+}) => {
+  const [open, setOpen] = React24.useState(false);
+  const dropdownRef = React24.useRef(null);
+  React24.useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+        setOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+  const exportToCSV = () => {
+    const visibleColumns = columns.filter((col) => !col.hide);
+    const headers = visibleColumns.map((col) => col.headerName || col.field);
+    const csvRows = [headers.join(",")];
+    rows.forEach((row) => {
+      const values = visibleColumns.map((col) => {
+        const value = row[col.field];
+        const stringValue = String(value ?? "");
+        if (stringValue.includes(",") || stringValue.includes('"')) {
+          return `"${stringValue.replace(/"/g, '""')}"`;
+        }
+        return stringValue;
+      });
+      csvRows.push(values.join(","));
+    });
+    const csvContent = csvRows.join("\n");
+    const blob = new Blob([csvContent], { type: "text/csv;charset=utf-8;" });
+    const link = document.createElement("a");
+    link.href = URL.createObjectURL(blob);
+    link.download = `${fileName}.csv`;
+    link.click();
+    URL.revokeObjectURL(link.href);
+    setOpen(false);
+  };
+  const exportToJSON = () => {
+    const visibleColumns = columns.filter((col) => !col.hide);
+    const data = rows.map((row) => {
+      const obj = {};
+      visibleColumns.forEach((col) => {
+        obj[col.field] = row[col.field];
+      });
+      return obj;
+    });
+    const jsonContent = JSON.stringify(data, null, 2);
+    const blob = new Blob([jsonContent], { type: "application/json" });
+    const link = document.createElement("a");
+    link.href = URL.createObjectURL(blob);
+    link.download = `${fileName}.json`;
+    link.click();
+    URL.revokeObjectURL(link.href);
+    setOpen(false);
+  };
+  const handleCustomExport = () => {
+    if (onExport) {
+      onExport(rows, columns);
+    }
+    setOpen(false);
+  };
+  return /* @__PURE__ */ jsxs10("div", { className: "relative", ref: dropdownRef, children: [
+    /* @__PURE__ */ jsxs10(
+      Button,
+      {
+        variant: "outline",
+        size: "sm",
+        onClick: () => setOpen(!open),
+        className: "h-9 gap-2",
+        children: [
+          /* @__PURE__ */ jsxs10("svg", { className: "h-4 w-4", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+            /* @__PURE__ */ jsx24("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }),
+            /* @__PURE__ */ jsx24("polyline", { points: "7 10 12 15 17 10" }),
+            /* @__PURE__ */ jsx24("line", { x1: "12", y1: "15", x2: "12", y2: "3" })
+          ] }),
+          "Export"
+        ]
+      }
+    ),
+    open && /* @__PURE__ */ jsxs10("div", { className: "absolute right-0 top-full mt-1 z-50 min-w-[140px] rounded-md border border-border bg-popover p-1 shadow-md", children: [
+      /* @__PURE__ */ jsxs10(
+        "button",
+        {
+          className: "flex w-full items-center gap-2 rounded px-3 py-2 text-sm hover:bg-muted",
+          onClick: exportToCSV,
+          children: [
+            /* @__PURE__ */ jsxs10("svg", { className: "h-4 w-4", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+              /* @__PURE__ */ jsx24("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" }),
+              /* @__PURE__ */ jsx24("polyline", { points: "14 2 14 8 20 8" })
+            ] }),
+            "Export CSV"
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs10(
+        "button",
+        {
+          className: "flex w-full items-center gap-2 rounded px-3 py-2 text-sm hover:bg-muted",
+          onClick: exportToJSON,
+          children: [
+            /* @__PURE__ */ jsxs10("svg", { className: "h-4 w-4", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+              /* @__PURE__ */ jsx24("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" }),
+              /* @__PURE__ */ jsx24("polyline", { points: "14 2 14 8 20 8" })
+            ] }),
+            "Export JSON"
+          ]
+        }
+      ),
+      onExport && /* @__PURE__ */ jsxs10(
+        "button",
+        {
+          className: "flex w-full items-center gap-2 rounded px-3 py-2 text-sm hover:bg-muted",
+          onClick: handleCustomExport,
+          children: [
+            /* @__PURE__ */ jsxs10("svg", { className: "h-4 w-4", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+              /* @__PURE__ */ jsx24("circle", { cx: "12", cy: "12", r: "3" }),
+              /* @__PURE__ */ jsx24("path", { d: "M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z" })
+            ] }),
+            "Custom Export"
+          ]
+        }
+      )
+    ] })
+  ] });
+};
+var MoreOptionsDropdown = ({
+  options
+}) => {
+  const [open, setOpen] = React24.useState(false);
+  const dropdownRef = React24.useRef(null);
+  React24.useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+        setOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+  if (options.length === 0) return null;
+  return /* @__PURE__ */ jsxs10("div", { className: "relative", ref: dropdownRef, children: [
+    /* @__PURE__ */ jsx24(
+      Button,
+      {
+        variant: "outline",
+        size: "icon",
+        onClick: () => setOpen(!open),
+        className: "h-9 w-9",
+        children: /* @__PURE__ */ jsxs10("svg", { className: "h-4 w-4", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+          /* @__PURE__ */ jsx24("circle", { cx: "12", cy: "12", r: "1" }),
+          /* @__PURE__ */ jsx24("circle", { cx: "12", cy: "5", r: "1" }),
+          /* @__PURE__ */ jsx24("circle", { cx: "12", cy: "19", r: "1" })
+        ] })
+      }
+    ),
+    open && /* @__PURE__ */ jsx24("div", { className: "absolute right-0 top-full mt-1 z-50 min-w-[160px] rounded-md border border-border bg-popover p-1 shadow-md", children: options.map((option, index) => /* @__PURE__ */ jsxs10(
+      "button",
+      {
+        className: "flex w-full items-center gap-2 rounded px-3 py-2 text-sm hover:bg-muted",
+        onClick: () => {
+          option.onClick();
+          setOpen(false);
+        },
+        children: [
+          option.icon,
+          option.label
+        ]
+      },
+      index
+    )) })
+  ] });
+};
+var DataGridToolbar = ({
+  title,
+  globalFilter,
+  setGlobalFilter,
+  showQuickFilter = true,
+  showColumnSelector = true,
+  showExport = true,
+  table,
+  rows,
+  columns,
+  onExport,
+  exportFileName,
+  customButtons,
+  moreOptions = []
+}) => {
+  return /* @__PURE__ */ jsxs10("div", { className: "flex items-center justify-between px-4 py-3 border-b border-border bg-background", children: [
+    title && /* @__PURE__ */ jsx24("h3", { className: "text-lg font-semibold text-foreground", children: title }),
+    /* @__PURE__ */ jsxs10("div", { className: "flex items-center gap-2 ml-auto", children: [
+      showQuickFilter && /* @__PURE__ */ jsx24(
+        Input,
+        {
+          placeholder: "Search...",
+          value: globalFilter ?? "",
+          onChange: (e) => setGlobalFilter(e.target.value),
+          className: "h-9 w-64"
+        }
+      ),
+      showColumnSelector && /* @__PURE__ */ jsx24(ColumnVisibilityDropdown, { table }),
+      showExport && /* @__PURE__ */ jsx24(
+        ExportDropdown,
+        {
+          onExport,
+          rows,
+          columns,
+          fileName: exportFileName
+        }
+      ),
+      customButtons,
+      moreOptions.length > 0 && /* @__PURE__ */ jsx24(MoreOptionsDropdown, { options: moreOptions })
+    ] })
+  ] });
+};
+var RowRenderer = ({
+  row,
+  rowIndex,
+  rowHeight,
+  showCellVerticalBorder,
+  checkboxSelection,
+  disableRowSelectionOnClick,
+  getRowClassName,
+  style,
+  globalWrapText = false,
+  columnWidths
+}) => {
+  const customClassName = getRowClassName?.({ row: row.original, rowIndex });
+  return /* @__PURE__ */ jsx24(
+    "tr",
+    {
+      className: cn(
+        "border-b border-border transition-colors hover:bg-muted/50",
+        row.getIsSelected() && "bg-accent/10",
+        customClassName
+      ),
+      "data-state": row.getIsSelected() ? "selected" : void 0,
+      style,
+      onClick: () => {
+        if (!disableRowSelectionOnClick && checkboxSelection) {
+          row.toggleSelected();
+        }
+      },
+      children: row.getVisibleCells().map((cell) => {
+        const meta = cell.column.columnDef.meta;
+        const align = meta?.align || "left";
+        const wrapText = meta?.wrapText !== void 0 ? meta.wrapText : globalWrapText;
+        const cellClassName = meta?.cellClassName;
+        const colWidth = columnWidths.get(cell.column.id);
+        const width = colWidth?.width || cell.column.getSize();
+        return /* @__PURE__ */ jsx24(
+          "td",
+          {
+            className: cn(
+              "px-4 overflow-hidden",
+              showCellVerticalBorder && "border-r last:border-r-0 border-border"
+            ),
+            style: {
+              height: wrapText ? "auto" : rowHeight,
+              minHeight: rowHeight,
+              textAlign: align,
+              width,
+              maxWidth: colWidth?.maxWidth || width,
+              minWidth: colWidth?.minWidth || cell.column.columnDef.minSize
+            },
+            children: /* @__PURE__ */ jsx24(
+              "div",
+              {
+                className: cn(
+                  wrapText ? "whitespace-normal break-words" : "truncate",
+                  cellClassName
+                ),
+                title: (
+                  // Show tooltip for truncated simple text values
+                  !wrapText && (typeof cell.getValue() === "string" || typeof cell.getValue() === "number") ? String(cell.getValue()) : void 0
+                ),
+                children: flexRender(cell.column.columnDef.cell, cell.getContext())
+              }
+            )
+          },
+          cell.id
+        );
+      })
+    },
+    row.id
+  );
+};
+var VirtualizedTableBody = ({
+  table,
+  rowHeight,
+  showCellVerticalBorder,
+  checkboxSelection,
+  disableRowSelectionOnClick,
+  getRowClassName,
+  overscan,
+  parentRef,
+  globalWrapText = false,
+  columnWidths
+}) => {
+  const rows = table.getRowModel().rows;
+  const virtualizer = useVirtualizer({
+    count: rows.length,
+    getScrollElement: () => parentRef.current,
+    estimateSize: () => rowHeight,
+    overscan
+  });
+  const virtualRows = virtualizer.getVirtualItems();
+  if (rows.length === 0) {
+    return /* @__PURE__ */ jsx24("tbody", { children: /* @__PURE__ */ jsx24("tr", { children: /* @__PURE__ */ jsx24(
+      "td",
+      {
+        colSpan: table.getVisibleLeafColumns().length,
+        className: "h-32 text-center text-muted-foreground",
+        children: "No data available"
+      }
+    ) }) });
+  }
+  const paddingTop = virtualRows.length > 0 ? virtualRows[0].start : 0;
+  const paddingBottom = virtualRows.length > 0 ? virtualizer.getTotalSize() - virtualRows[virtualRows.length - 1].end : 0;
+  return /* @__PURE__ */ jsxs10("tbody", { children: [
+    paddingTop > 0 && /* @__PURE__ */ jsx24("tr", { children: /* @__PURE__ */ jsx24(
+      "td",
+      {
+        colSpan: table.getVisibleLeafColumns().length,
+        style: { height: paddingTop, padding: 0, border: "none" }
+      }
+    ) }),
+    virtualRows.map((virtualRow) => {
+      const row = rows[virtualRow.index];
+      return /* @__PURE__ */ jsx24(
+        RowRenderer,
+        {
+          row,
+          rowIndex: virtualRow.index,
+          rowHeight,
+          showCellVerticalBorder,
+          checkboxSelection,
+          disableRowSelectionOnClick,
+          getRowClassName,
+          globalWrapText,
+          columnWidths
+        },
+        row.id
+      );
+    }),
+    paddingBottom > 0 && /* @__PURE__ */ jsx24("tr", { children: /* @__PURE__ */ jsx24(
+      "td",
+      {
+        colSpan: table.getVisibleLeafColumns().length,
+        style: { height: paddingBottom, padding: 0, border: "none" }
+      }
+    ) })
+  ] });
+};
+var StandardTableBody = ({
+  table,
+  rowHeight,
+  showCellVerticalBorder,
+  checkboxSelection,
+  disableRowSelectionOnClick,
+  getRowClassName,
+  globalWrapText = false,
+  columnWidths
+}) => {
+  const rows = table.getRowModel().rows;
+  if (rows.length === 0) {
+    return /* @__PURE__ */ jsx24("tbody", { children: /* @__PURE__ */ jsx24("tr", { children: /* @__PURE__ */ jsx24(
+      "td",
+      {
+        colSpan: table.getVisibleLeafColumns().length,
+        className: "h-32 text-center text-muted-foreground",
+        children: "No data available"
+      }
+    ) }) });
+  }
+  return /* @__PURE__ */ jsx24("tbody", { children: rows.map((row, rowIndex) => /* @__PURE__ */ jsx24(
+    RowRenderer,
+    {
+      row,
+      rowIndex,
+      rowHeight,
+      showCellVerticalBorder,
+      checkboxSelection,
+      disableRowSelectionOnClick,
+      getRowClassName,
+      globalWrapText,
+      columnWidths
+    },
+    row.id
+  )) });
+};
+function DataGrid({
+  rows,
+  columns,
+  getRowId,
+  loading = false,
+  title,
+  toolBar = false,
+  checkboxSelection = false,
+  rowSelectionModel,
+  onRowSelectionModelChange,
+  disableRowSelectionOnClick = false,
+  columnVisibilityModel,
+  onColumnVisibilityModelChange,
+  paginationMode = "client",
+  paginationModel,
+  onPaginationModelChange,
+  rowCount,
+  pageSizeOptions = [10, 25, 50, 100],
+  sortingMode = "client",
+  filterMode = "client",
+  height = 400,
+  minHeight,
+  maxHeight,
+  density = "standard",
+  showCellVerticalBorder = false,
+  showColumnVerticalBorder = false,
+  hideFooter = false,
+  hideFooterPagination = false,
+  virtualized = false,
+  overscan = 5,
+  wrapText = false,
+  getRowClassName,
+  slotProps,
+  className,
+  sx,
+  autoHeight = false,
+  disableColumnSelector = false,
+  onExport,
+  exportFileName = "data-export",
+  resizableColumns = false,
+  onColumnResize
+}) {
+  const tableContainerRef = React24.useRef(null);
+  const [sorting, setSorting] = React24.useState([]);
+  const [globalFilter, setGlobalFilter] = React24.useState("");
+  const [rowSelection, setRowSelection] = React24.useState(
+    rowSelectionModel || {}
+  );
+  const [pagination, setPagination] = React24.useState({
+    pageIndex: paginationModel?.page || 0,
+    pageSize: paginationModel?.pageSize || 10
+  });
+  const [columnVisibility, setColumnVisibility] = React24.useState(
+    columnVisibilityModel || {}
+  );
+  const [containerWidth, setContainerWidth] = React24.useState(0);
+  const [columnSizing, setColumnSizing] = React24.useState({});
+  React24.useEffect(() => {
+    const container = tableContainerRef.current;
+    if (!container) return;
+    const resizeObserver = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        setContainerWidth(entry.contentRect.width);
+      }
+    });
+    resizeObserver.observe(container);
+    setContainerWidth(container.clientWidth);
+    return () => resizeObserver.disconnect();
+  }, []);
+  const columnWidths = useColumnWidths(columns, containerWidth, checkboxSelection, columnSizing);
+  const tanstackColumns = React24.useMemo(
+    () => convertColumns(columns, checkboxSelection),
+    [columns, checkboxSelection]
+  );
+  React24.useEffect(() => {
+    if (paginationModel) {
+      setPagination({
+        pageIndex: paginationModel.page,
+        pageSize: paginationModel.pageSize
+      });
+    }
+  }, [paginationModel?.page, paginationModel?.pageSize]);
+  React24.useEffect(() => {
+    if (rowSelectionModel) {
+      setRowSelection(rowSelectionModel);
+    }
+  }, [rowSelectionModel]);
+  React24.useEffect(() => {
+    if (columnVisibilityModel) {
+      setColumnVisibility(columnVisibilityModel);
+    }
+  }, [columnVisibilityModel]);
+  const table = useReactTable({
+    data: rows,
+    columns: tanstackColumns,
+    getCoreRowModel: getCoreRowModel(),
+    getPaginationRowModel: virtualized ? void 0 : paginationMode === "client" ? getPaginationRowModel() : void 0,
+    getSortedRowModel: sortingMode === "client" ? getSortedRowModel() : void 0,
+    getFilteredRowModel: filterMode === "client" ? getFilteredRowModel() : void 0,
+    getRowId: getRowId ? (row) => String(getRowId(row)) : void 0,
+    state: {
+      sorting,
+      globalFilter,
+      rowSelection,
+      pagination: virtualized ? void 0 : pagination,
+      columnVisibility,
+      columnSizing
+    },
+    onSortingChange: setSorting,
+    onGlobalFilterChange: setGlobalFilter,
+    onRowSelectionChange: (updater) => {
+      const newValue = typeof updater === "function" ? updater(rowSelection) : updater;
+      setRowSelection(newValue);
+      onRowSelectionModelChange?.(newValue);
+    },
+    onPaginationChange: virtualized ? void 0 : (updater) => {
+      const newValue = typeof updater === "function" ? updater(pagination) : updater;
+      setPagination(newValue);
+      onPaginationModelChange?.({ page: newValue.pageIndex, pageSize: newValue.pageSize });
+    },
+    onColumnVisibilityChange: (updater) => {
+      const newValue = typeof updater === "function" ? updater(columnVisibility) : updater;
+      setColumnVisibility(newValue);
+      onColumnVisibilityModelChange?.(newValue);
+    },
+    // Column resizing - use TanStack Table's built-in handling
+    enableColumnResizing: resizableColumns,
+    columnResizeMode: "onChange",
+    // Real-time resize (vs 'onEnd' which only updates on mouse up)
+    onColumnSizingChange: (updater) => {
+      const newValue = typeof updater === "function" ? updater(columnSizing) : updater;
+      setColumnSizing(newValue);
+      if (onColumnResize) {
+        Object.entries(newValue).forEach(([columnId, width]) => {
+          if (columnSizing[columnId] !== width) {
+            onColumnResize(columnId, width);
+          }
+        });
+      }
+    },
+    enableRowSelection: checkboxSelection,
+    manualPagination: virtualized ? true : paginationMode === "server",
+    manualSorting: sortingMode === "server",
+    manualFiltering: filterMode === "server",
+    pageCount: virtualized ? void 0 : paginationMode === "server" && rowCount ? Math.ceil(rowCount / pagination.pageSize) : void 0
+  });
+  const rowHeight = densityRowHeights[density];
+  const showQuickFilter = slotProps?.toolbar?.showQuickFilter !== false;
+  const showColumnSelector = !disableColumnSelector && slotProps?.toolbar?.showColumnSelector !== false;
+  const showExport = slotProps?.toolbar?.showExport !== false;
+  const customButtons = slotProps?.toolbar?.customButtons;
+  const moreOptions = slotProps?.toolbar?.moreOptions || [];
+  const containerStyle = {
+    ...sx
+  };
+  if (!autoHeight) {
+    containerStyle.height = height;
+    if (minHeight) containerStyle.minHeight = minHeight;
+    if (maxHeight) containerStyle.maxHeight = maxHeight;
+  }
+  return /* @__PURE__ */ jsxs10(
+    "div",
+    {
+      className: cn(
+        "rounded-lg border border-border bg-background overflow-hidden flex flex-col",
+        className
+      ),
+      style: containerStyle,
+      children: [
+        toolBar && /* @__PURE__ */ jsx24(
+          DataGridToolbar,
+          {
+            title,
+            globalFilter,
+            setGlobalFilter,
+            showQuickFilter,
+            showColumnSelector,
+            showExport,
+            table,
+            rows,
+            columns,
+            onExport,
+            exportFileName,
+            customButtons,
+            moreOptions
+          }
+        ),
+        /* @__PURE__ */ jsxs10(
+          "div",
+          {
+            ref: tableContainerRef,
+            className: "relative flex-1 overflow-auto",
+            children: [
+              loading && /* @__PURE__ */ jsx24("div", { className: "absolute inset-0 bg-background/80 flex items-center justify-center z-10", children: /* @__PURE__ */ jsx24(Spinner, { size: "lg" }) }),
+              /* @__PURE__ */ jsxs10("table", { className: "w-full border-collapse table-fixed", children: [
+                /* @__PURE__ */ jsx24("colgroup", { children: table.getVisibleLeafColumns().map((column) => {
+                  const colWidth = columnWidths.get(column.id);
+                  return /* @__PURE__ */ jsx24(
+                    "col",
+                    {
+                      style: {
+                        width: colWidth?.width || column.getSize(),
+                        minWidth: colWidth?.minWidth || column.columnDef.minSize,
+                        maxWidth: colWidth?.maxWidth || column.columnDef.maxSize
+                      }
+                    },
+                    column.id
+                  );
+                }) }),
+                /* @__PURE__ */ jsx24("thead", { className: "sticky top-0 z-[1]", children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx24("tr", { className: "bg-muted", children: headerGroup.headers.map((header) => {
+                  const meta = header.column.columnDef.meta;
+                  const align = meta?.headerAlign || meta?.align || "left";
+                  const colWidth = columnWidths.get(header.column.id);
+                  const effectiveWidth = colWidth?.width || header.getSize();
+                  return /* @__PURE__ */ jsxs10(
+                    "th",
+                    {
+                      className: cn(
+                        "px-4 text-left font-medium text-muted-foreground border-b border-border bg-muted overflow-hidden relative",
+                        showColumnVerticalBorder && "border-r last:border-r-0",
+                        header.column.getCanSort() && "cursor-pointer select-none hover:bg-muted/80",
+                        // Add cursor class when resizing
+                        header.column.getIsResizing() && "cursor-col-resize"
+                      ),
+                      style: {
+                        height: rowHeight,
+                        width: effectiveWidth,
+                        minWidth: colWidth?.minWidth || header.column.columnDef.minSize,
+                        maxWidth: colWidth?.maxWidth || header.column.columnDef.maxSize,
+                        textAlign: align
+                      },
+                      onClick: header.column.getToggleSortingHandler(),
+                      children: [
+                        /* @__PURE__ */ jsxs10("div", { className: cn(
+                          "flex items-center gap-1 truncate",
+                          align === "center" && "justify-center",
+                          align === "right" && "justify-end"
+                        ), children: [
+                          header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext()),
+                          header.column.getCanSort() && /* @__PURE__ */ jsx24(SortIcon, { direction: header.column.getIsSorted() })
+                        ] }),
+                        resizableColumns && header.column.id !== "__select__" && /* @__PURE__ */ jsx24(
+                          ColumnResizeHandle,
+                          {
+                            header,
+                            isResizing: header.column.getIsResizing()
+                          }
+                        )
+                      ]
+                    },
+                    header.id
+                  );
+                }) }, headerGroup.id)) }),
+                virtualized ? /* @__PURE__ */ jsx24(
+                  VirtualizedTableBody,
+                  {
+                    table,
+                    rowHeight,
+                    showCellVerticalBorder,
+                    checkboxSelection,
+                    disableRowSelectionOnClick,
+                    getRowClassName,
+                    overscan,
+                    parentRef: tableContainerRef,
+                    globalWrapText: wrapText,
+                    columnWidths
+                  }
+                ) : /* @__PURE__ */ jsx24(
+                  StandardTableBody,
+                  {
+                    table,
+                    rowHeight,
+                    showCellVerticalBorder,
+                    checkboxSelection,
+                    disableRowSelectionOnClick,
+                    getRowClassName,
+                    globalWrapText: wrapText,
+                    columnWidths
+                  }
+                )
+              ] })
+            ]
+          }
+        ),
+        !virtualized && !hideFooter && !hideFooterPagination && /* @__PURE__ */ jsx24(
+          DataGridPagination,
+          {
+            table,
+            pageSizeOptions,
+            rowCount,
+            paginationMode
+          }
+        ),
+        virtualized && !hideFooter && /* @__PURE__ */ jsx24("div", { className: "flex items-center justify-end gap-4 px-4 py-3 border-t border-border bg-background", children: /* @__PURE__ */ jsxs10("span", { className: "text-sm text-muted-foreground whitespace-nowrap", children: [
+          table.getFilteredRowModel().rows.length,
+          " total rows (virtualized)"
+        ] }) })
+      ]
+    }
+  );
+}
+DataGrid.displayName = "DataGrid";
+
+// src/playground.tsx
+import * as React25 from "react";
+import { jsx as jsx25, jsxs as jsxs11 } from "react/jsx-runtime";
+var Section = ({ title, children }) => /* @__PURE__ */ jsxs11("div", { className: "mb-8", children: [
+  /* @__PURE__ */ jsx25("h2", { className: "text-xl font-semibold mb-4 text-foreground", children: title }),
+  /* @__PURE__ */ jsx25("div", { className: "p-4 border border-border rounded-lg bg-background", children })
 ] });
 var ThemeToggle = () => {
   const { theme, setTheme } = useTheme();
-  return /* @__PURE__ */ jsxs10("div", { className: "flex items-center gap-2", children: [
-    /* @__PURE__ */ jsx24(Label, { children: "Theme:" }),
-    /* @__PURE__ */ jsxs10(SelectNamespace, { value: theme, onValueChange: (value) => setTheme(value), children: [
-      /* @__PURE__ */ jsx24(SelectTrigger, { className: "w-32", children: /* @__PURE__ */ jsx24(SelectValue, { placeholder: "Select theme" }) }),
-      /* @__PURE__ */ jsxs10(SelectContent, { children: [
-        /* @__PURE__ */ jsx24(SelectItem, { value: "light", children: "Light" }),
-        /* @__PURE__ */ jsx24(SelectItem, { value: "dark", children: "Dark" }),
-        /* @__PURE__ */ jsx24(SelectItem, { value: "system", children: "System" })
+  return /* @__PURE__ */ jsxs11("div", { className: "flex items-center gap-2", children: [
+    /* @__PURE__ */ jsx25(Label, { children: "Theme:" }),
+    /* @__PURE__ */ jsxs11(SelectNamespace, { value: theme, onValueChange: (value) => setTheme(value), children: [
+      /* @__PURE__ */ jsx25(SelectTrigger, { className: "w-32", children: /* @__PURE__ */ jsx25(SelectValue, { placeholder: "Select theme" }) }),
+      /* @__PURE__ */ jsxs11(SelectContent, { children: [
+        /* @__PURE__ */ jsx25(SelectItem, { value: "light", children: "Light" }),
+        /* @__PURE__ */ jsx25(SelectItem, { value: "dark", children: "Dark" }),
+        /* @__PURE__ */ jsx25(SelectItem, { value: "system", children: "System" })
       ] })
     ] })
   ] });
 };
 var PlaygroundContent = () => {
-  const [dialogOpen, setDialogOpen] = React24.useState(false);
-  const [checkboxChecked, setCheckboxChecked] = React24.useState(false);
-  const [switchChecked, setSwitchChecked] = React24.useState(false);
-  const [inputValue, setInputValue] = React24.useState("");
-  const [textareaValue, setTextareaValue] = React24.useState("");
-  const [selectValue, setSelectValue] = React24.useState("");
-  const [comboboxValue, setComboboxValue] = React24.useState("");
+  const [dialogOpen, setDialogOpen] = React25.useState(false);
+  const [checkboxChecked, setCheckboxChecked] = React25.useState(false);
+  const [switchChecked, setSwitchChecked] = React25.useState(false);
+  const [inputValue, setInputValue] = React25.useState("");
+  const [textareaValue, setTextareaValue] = React25.useState("");
+  const [selectValue, setSelectValue] = React25.useState("");
+  const [comboboxValue, setComboboxValue] = React25.useState("");
   const comboboxOptions = [
     { value: "react", label: "React" },
     { value: "vue", label: "Vue" },
@@ -2224,35 +3295,35 @@ var PlaygroundContent = () => {
     { value: "svelte", label: "Svelte" },
     { value: "solid", label: "SolidJS" }
   ];
-  return /* @__PURE__ */ jsx24("div", { className: "min-h-screen bg-background p-8", children: /* @__PURE__ */ jsxs10("div", { className: "max-w-4xl mx-auto", children: [
-    /* @__PURE__ */ jsxs10("div", { className: "flex items-center justify-between mb-8", children: [
-      /* @__PURE__ */ jsx24("h1", { className: "text-3xl font-bold text-foreground", children: "@onesaz/ui Playground" }),
-      /* @__PURE__ */ jsx24(ThemeToggle, {})
+  return /* @__PURE__ */ jsx25("div", { className: "min-h-screen bg-background p-8", children: /* @__PURE__ */ jsxs11("div", { className: "max-w-4xl mx-auto", children: [
+    /* @__PURE__ */ jsxs11("div", { className: "flex items-center justify-between mb-8", children: [
+      /* @__PURE__ */ jsx25("h1", { className: "text-3xl font-bold text-foreground", children: "@onesaz/ui Playground" }),
+      /* @__PURE__ */ jsx25(ThemeToggle, {})
     ] }),
-    /* @__PURE__ */ jsxs10(Section, { title: "Button", children: [
-      /* @__PURE__ */ jsxs10("div", { className: "flex flex-wrap gap-4", children: [
-        /* @__PURE__ */ jsx24(Button, { variant: "default", children: "Default" }),
-        /* @__PURE__ */ jsx24(Button, { variant: "destructive", children: "Destructive" }),
-        /* @__PURE__ */ jsx24(Button, { variant: "outline", children: "Outline" }),
-        /* @__PURE__ */ jsx24(Button, { variant: "secondary", children: "Secondary" }),
-        /* @__PURE__ */ jsx24(Button, { variant: "ghost", children: "Ghost" }),
-        /* @__PURE__ */ jsx24(Button, { variant: "link", children: "Link" })
+    /* @__PURE__ */ jsxs11(Section, { title: "Button", children: [
+      /* @__PURE__ */ jsxs11("div", { className: "flex flex-wrap gap-4", children: [
+        /* @__PURE__ */ jsx25(Button, { variant: "default", children: "Default" }),
+        /* @__PURE__ */ jsx25(Button, { variant: "destructive", children: "Destructive" }),
+        /* @__PURE__ */ jsx25(Button, { variant: "outline", children: "Outline" }),
+        /* @__PURE__ */ jsx25(Button, { variant: "secondary", children: "Secondary" }),
+        /* @__PURE__ */ jsx25(Button, { variant: "ghost", children: "Ghost" }),
+        /* @__PURE__ */ jsx25(Button, { variant: "link", children: "Link" })
       ] }),
-      /* @__PURE__ */ jsxs10("div", { className: "flex flex-wrap gap-4 mt-4", children: [
-        /* @__PURE__ */ jsx24(Button, { size: "sm", children: "Small" }),
-        /* @__PURE__ */ jsx24(Button, { size: "default", children: "Default" }),
-        /* @__PURE__ */ jsx24(Button, { size: "lg", children: "Large" }),
-        /* @__PURE__ */ jsx24(Button, { size: "icon", children: "\u{1F514}" })
+      /* @__PURE__ */ jsxs11("div", { className: "flex flex-wrap gap-4 mt-4", children: [
+        /* @__PURE__ */ jsx25(Button, { size: "sm", children: "Small" }),
+        /* @__PURE__ */ jsx25(Button, { size: "default", children: "Default" }),
+        /* @__PURE__ */ jsx25(Button, { size: "lg", children: "Large" }),
+        /* @__PURE__ */ jsx25(Button, { size: "icon", children: "\u{1F514}" })
       ] }),
-      /* @__PURE__ */ jsxs10("div", { className: "flex flex-wrap gap-4 mt-4", children: [
-        /* @__PURE__ */ jsx24(Button, { disabled: true, children: "Disabled" }),
-        /* @__PURE__ */ jsx24(Button, { variant: "outline", disabled: true, children: "Disabled Outline" })
+      /* @__PURE__ */ jsxs11("div", { className: "flex flex-wrap gap-4 mt-4", children: [
+        /* @__PURE__ */ jsx25(Button, { disabled: true, children: "Disabled" }),
+        /* @__PURE__ */ jsx25(Button, { variant: "outline", disabled: true, children: "Disabled Outline" })
       ] })
     ] }),
-    /* @__PURE__ */ jsx24(Section, { title: "Input", children: /* @__PURE__ */ jsxs10("div", { className: "space-y-4 max-w-md", children: [
-      /* @__PURE__ */ jsxs10("div", { children: [
-        /* @__PURE__ */ jsx24(Label, { htmlFor: "input-default", children: "Default Input" }),
-        /* @__PURE__ */ jsx24(
+    /* @__PURE__ */ jsx25(Section, { title: "Input", children: /* @__PURE__ */ jsxs11("div", { className: "space-y-4 max-w-md", children: [
+      /* @__PURE__ */ jsxs11("div", { children: [
+        /* @__PURE__ */ jsx25(Label, { htmlFor: "input-default", children: "Default Input" }),
+        /* @__PURE__ */ jsx25(
           Input,
           {
             id: "input-default",
@@ -2262,19 +3333,19 @@ var PlaygroundContent = () => {
           }
         )
       ] }),
-      /* @__PURE__ */ jsxs10("div", { children: [
-        /* @__PURE__ */ jsx24(Label, { htmlFor: "input-disabled", children: "Disabled Input" }),
-        /* @__PURE__ */ jsx24(Input, { id: "input-disabled", placeholder: "Disabled...", disabled: true })
+      /* @__PURE__ */ jsxs11("div", { children: [
+        /* @__PURE__ */ jsx25(Label, { htmlFor: "input-disabled", children: "Disabled Input" }),
+        /* @__PURE__ */ jsx25(Input, { id: "input-disabled", placeholder: "Disabled...", disabled: true })
       ] }),
-      /* @__PURE__ */ jsxs10("div", { children: [
-        /* @__PURE__ */ jsx24(Label, { htmlFor: "input-type", children: "Email Input" }),
-        /* @__PURE__ */ jsx24(Input, { id: "input-type", type: "email", placeholder: "email@example.com" })
+      /* @__PURE__ */ jsxs11("div", { children: [
+        /* @__PURE__ */ jsx25(Label, { htmlFor: "input-type", children: "Email Input" }),
+        /* @__PURE__ */ jsx25(Input, { id: "input-type", type: "email", placeholder: "email@example.com" })
       ] })
     ] }) }),
-    /* @__PURE__ */ jsx24(Section, { title: "Textarea", children: /* @__PURE__ */ jsxs10("div", { className: "space-y-4 max-w-md", children: [
-      /* @__PURE__ */ jsxs10("div", { children: [
-        /* @__PURE__ */ jsx24(Label, { htmlFor: "textarea-default", children: "Default Textarea" }),
-        /* @__PURE__ */ jsx24(
+    /* @__PURE__ */ jsx25(Section, { title: "Textarea", children: /* @__PURE__ */ jsxs11("div", { className: "space-y-4 max-w-md", children: [
+      /* @__PURE__ */ jsxs11("div", { children: [
+        /* @__PURE__ */ jsx25(Label, { htmlFor: "textarea-default", children: "Default Textarea" }),
+        /* @__PURE__ */ jsx25(
           Textarea,
           {
             id: "textarea-default",
@@ -2284,52 +3355,52 @@ var PlaygroundContent = () => {
           }
         )
       ] }),
-      /* @__PURE__ */ jsxs10("div", { children: [
-        /* @__PURE__ */ jsx24(Label, { htmlFor: "textarea-disabled", children: "Disabled Textarea" }),
-        /* @__PURE__ */ jsx24(Textarea, { id: "textarea-disabled", placeholder: "Disabled...", disabled: true })
+      /* @__PURE__ */ jsxs11("div", { children: [
+        /* @__PURE__ */ jsx25(Label, { htmlFor: "textarea-disabled", children: "Disabled Textarea" }),
+        /* @__PURE__ */ jsx25(Textarea, { id: "textarea-disabled", placeholder: "Disabled...", disabled: true })
       ] })
     ] }) }),
-    /* @__PURE__ */ jsx24(Section, { title: "Select", children: /* @__PURE__ */ jsxs10("div", { className: "space-y-4 max-w-md", children: [
-      /* @__PURE__ */ jsxs10("div", { children: [
-        /* @__PURE__ */ jsx24(Label, { children: "Default Select" }),
-        /* @__PURE__ */ jsxs10(SelectNamespace, { value: selectValue, onValueChange: setSelectValue, children: [
-          /* @__PURE__ */ jsx24(SelectTrigger, { className: "w-full", children: /* @__PURE__ */ jsx24(SelectValue, { placeholder: "Select an option..." }) }),
-          /* @__PURE__ */ jsxs10(SelectContent, { children: [
-            /* @__PURE__ */ jsx24(SelectItem, { value: "option1", children: "Option 1" }),
-            /* @__PURE__ */ jsx24(SelectItem, { value: "option2", children: "Option 2" }),
-            /* @__PURE__ */ jsx24(SelectItem, { value: "option3", children: "Option 3" })
+    /* @__PURE__ */ jsx25(Section, { title: "Select", children: /* @__PURE__ */ jsxs11("div", { className: "space-y-4 max-w-md", children: [
+      /* @__PURE__ */ jsxs11("div", { children: [
+        /* @__PURE__ */ jsx25(Label, { children: "Default Select" }),
+        /* @__PURE__ */ jsxs11(SelectNamespace, { value: selectValue, onValueChange: setSelectValue, children: [
+          /* @__PURE__ */ jsx25(SelectTrigger, { className: "w-full", children: /* @__PURE__ */ jsx25(SelectValue, { placeholder: "Select an option..." }) }),
+          /* @__PURE__ */ jsxs11(SelectContent, { children: [
+            /* @__PURE__ */ jsx25(SelectItem, { value: "option1", children: "Option 1" }),
+            /* @__PURE__ */ jsx25(SelectItem, { value: "option2", children: "Option 2" }),
+            /* @__PURE__ */ jsx25(SelectItem, { value: "option3", children: "Option 3" })
           ] })
         ] })
       ] }),
-      /* @__PURE__ */ jsxs10("div", { children: [
-        /* @__PURE__ */ jsx24(Label, { children: "Grouped Select" }),
-        /* @__PURE__ */ jsxs10(SelectNamespace, { children: [
-          /* @__PURE__ */ jsx24(SelectTrigger, { className: "w-full", children: /* @__PURE__ */ jsx24(SelectValue, { placeholder: "Select a food..." }) }),
-          /* @__PURE__ */ jsxs10(SelectContent, { children: [
-            /* @__PURE__ */ jsxs10(SelectGroup, { children: [
-              /* @__PURE__ */ jsx24(SelectLabel, { children: "Fruits" }),
-              /* @__PURE__ */ jsx24(SelectItem, { value: "apple", children: "Apple" }),
-              /* @__PURE__ */ jsx24(SelectItem, { value: "banana", children: "Banana" })
+      /* @__PURE__ */ jsxs11("div", { children: [
+        /* @__PURE__ */ jsx25(Label, { children: "Grouped Select" }),
+        /* @__PURE__ */ jsxs11(SelectNamespace, { children: [
+          /* @__PURE__ */ jsx25(SelectTrigger, { className: "w-full", children: /* @__PURE__ */ jsx25(SelectValue, { placeholder: "Select a food..." }) }),
+          /* @__PURE__ */ jsxs11(SelectContent, { children: [
+            /* @__PURE__ */ jsxs11(SelectGroup, { children: [
+              /* @__PURE__ */ jsx25(SelectLabel, { children: "Fruits" }),
+              /* @__PURE__ */ jsx25(SelectItem, { value: "apple", children: "Apple" }),
+              /* @__PURE__ */ jsx25(SelectItem, { value: "banana", children: "Banana" })
             ] }),
-            /* @__PURE__ */ jsxs10(SelectGroup, { children: [
-              /* @__PURE__ */ jsx24(SelectLabel, { children: "Vegetables" }),
-              /* @__PURE__ */ jsx24(SelectItem, { value: "carrot", children: "Carrot" }),
-              /* @__PURE__ */ jsx24(SelectItem, { value: "potato", children: "Potato" })
+            /* @__PURE__ */ jsxs11(SelectGroup, { children: [
+              /* @__PURE__ */ jsx25(SelectLabel, { children: "Vegetables" }),
+              /* @__PURE__ */ jsx25(SelectItem, { value: "carrot", children: "Carrot" }),
+              /* @__PURE__ */ jsx25(SelectItem, { value: "potato", children: "Potato" })
             ] })
           ] })
         ] })
       ] }),
-      /* @__PURE__ */ jsxs10("div", { children: [
-        /* @__PURE__ */ jsx24(Label, { children: "Disabled Select" }),
-        /* @__PURE__ */ jsxs10(SelectNamespace, { disabled: true, children: [
-          /* @__PURE__ */ jsx24(SelectTrigger, { className: "w-full", children: /* @__PURE__ */ jsx24(SelectValue, { placeholder: "Disabled..." }) }),
-          /* @__PURE__ */ jsx24(SelectContent, { children: /* @__PURE__ */ jsx24(SelectItem, { value: "none", children: "None" }) })
+      /* @__PURE__ */ jsxs11("div", { children: [
+        /* @__PURE__ */ jsx25(Label, { children: "Disabled Select" }),
+        /* @__PURE__ */ jsxs11(SelectNamespace, { disabled: true, children: [
+          /* @__PURE__ */ jsx25(SelectTrigger, { className: "w-full", children: /* @__PURE__ */ jsx25(SelectValue, { placeholder: "Disabled..." }) }),
+          /* @__PURE__ */ jsx25(SelectContent, { children: /* @__PURE__ */ jsx25(SelectItem, { value: "none", children: "None" }) })
         ] })
       ] })
     ] }) }),
-    /* @__PURE__ */ jsx24(Section, { title: "Combobox (Searchable Select)", children: /* @__PURE__ */ jsx24("div", { className: "space-y-4 max-w-md", children: /* @__PURE__ */ jsxs10("div", { children: [
-      /* @__PURE__ */ jsx24(Label, { children: "Framework" }),
-      /* @__PURE__ */ jsx24(
+    /* @__PURE__ */ jsx25(Section, { title: "Combobox (Searchable Select)", children: /* @__PURE__ */ jsx25("div", { className: "space-y-4 max-w-md", children: /* @__PURE__ */ jsxs11("div", { children: [
+      /* @__PURE__ */ jsx25(Label, { children: "Framework" }),
+      /* @__PURE__ */ jsx25(
         Combobox,
         {
           options: comboboxOptions,
@@ -2339,9 +3410,9 @@ var PlaygroundContent = () => {
         }
       )
     ] }) }) }),
-    /* @__PURE__ */ jsx24(Section, { title: "Checkbox & Switch", children: /* @__PURE__ */ jsxs10("div", { className: "space-y-4", children: [
-      /* @__PURE__ */ jsxs10("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsx24(
+    /* @__PURE__ */ jsx25(Section, { title: "Checkbox & Switch", children: /* @__PURE__ */ jsxs11("div", { className: "space-y-4", children: [
+      /* @__PURE__ */ jsxs11("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx25(
           Checkbox,
           {
             id: "checkbox",
@@ -2349,15 +3420,15 @@ var PlaygroundContent = () => {
             onChange: (e) => setCheckboxChecked(e.target.checked)
           }
         ),
-        /* @__PURE__ */ jsx24(Label, { htmlFor: "checkbox", children: "Accept terms and conditions" })
+        /* @__PURE__ */ jsx25(Label, { htmlFor: "checkbox", children: "Accept terms and conditions" })
       ] }),
-      /* @__PURE__ */ jsxs10("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsx24(Checkbox, { id: "checkbox-disabled", disabled: true }),
-        /* @__PURE__ */ jsx24(Label, { htmlFor: "checkbox-disabled", children: "Disabled checkbox" })
+      /* @__PURE__ */ jsxs11("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx25(Checkbox, { id: "checkbox-disabled", disabled: true }),
+        /* @__PURE__ */ jsx25(Label, { htmlFor: "checkbox-disabled", children: "Disabled checkbox" })
       ] }),
-      /* @__PURE__ */ jsx24(Separator, {}),
-      /* @__PURE__ */ jsxs10("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsx24(
+      /* @__PURE__ */ jsx25(Separator, {}),
+      /* @__PURE__ */ jsxs11("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx25(
           Switch,
           {
             id: "switch",
@@ -2365,160 +3436,160 @@ var PlaygroundContent = () => {
             onChange: (e) => setSwitchChecked(e.target.checked)
           }
         ),
-        /* @__PURE__ */ jsx24(Label, { htmlFor: "switch", children: "Enable notifications" })
+        /* @__PURE__ */ jsx25(Label, { htmlFor: "switch", children: "Enable notifications" })
       ] }),
-      /* @__PURE__ */ jsxs10("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsx24(Switch, { id: "switch-disabled", disabled: true }),
-        /* @__PURE__ */ jsx24(Label, { htmlFor: "switch-disabled", children: "Disabled switch" })
+      /* @__PURE__ */ jsxs11("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx25(Switch, { id: "switch-disabled", disabled: true }),
+        /* @__PURE__ */ jsx25(Label, { htmlFor: "switch-disabled", children: "Disabled switch" })
       ] })
     ] }) }),
-    /* @__PURE__ */ jsx24(Section, { title: "Badge", children: /* @__PURE__ */ jsxs10("div", { className: "flex flex-wrap gap-4", children: [
-      /* @__PURE__ */ jsx24(Badge, { children: "Default" }),
-      /* @__PURE__ */ jsx24(Badge, { variant: "secondary", children: "Secondary" }),
-      /* @__PURE__ */ jsx24(Badge, { variant: "destructive", children: "Destructive" }),
-      /* @__PURE__ */ jsx24(Badge, { variant: "outline", children: "Outline" })
+    /* @__PURE__ */ jsx25(Section, { title: "Badge", children: /* @__PURE__ */ jsxs11("div", { className: "flex flex-wrap gap-4", children: [
+      /* @__PURE__ */ jsx25(Badge, { children: "Default" }),
+      /* @__PURE__ */ jsx25(Badge, { variant: "secondary", children: "Secondary" }),
+      /* @__PURE__ */ jsx25(Badge, { variant: "destructive", children: "Destructive" }),
+      /* @__PURE__ */ jsx25(Badge, { variant: "outline", children: "Outline" })
     ] }) }),
-    /* @__PURE__ */ jsx24(Section, { title: "Card", children: /* @__PURE__ */ jsxs10("div", { className: "grid gap-4 md:grid-cols-2", children: [
-      /* @__PURE__ */ jsxs10(Card, { children: [
-        /* @__PURE__ */ jsxs10(CardHeader, { children: [
-          /* @__PURE__ */ jsx24(CardTitle, { children: "Card Title" }),
-          /* @__PURE__ */ jsx24(CardDescription, { children: "Card description goes here" })
+    /* @__PURE__ */ jsx25(Section, { title: "Card", children: /* @__PURE__ */ jsxs11("div", { className: "grid gap-4 md:grid-cols-2", children: [
+      /* @__PURE__ */ jsxs11(Card, { children: [
+        /* @__PURE__ */ jsxs11(CardHeader, { children: [
+          /* @__PURE__ */ jsx25(CardTitle, { children: "Card Title" }),
+          /* @__PURE__ */ jsx25(CardDescription, { children: "Card description goes here" })
         ] }),
-        /* @__PURE__ */ jsx24(CardContent, { children: /* @__PURE__ */ jsx24("p", { className: "text-foreground", children: "This is the card content area." }) }),
-        /* @__PURE__ */ jsxs10(CardFooter, { children: [
-          /* @__PURE__ */ jsx24(Button, { variant: "outline", className: "mr-2", children: "Cancel" }),
-          /* @__PURE__ */ jsx24(Button, { children: "Submit" })
+        /* @__PURE__ */ jsx25(CardContent, { children: /* @__PURE__ */ jsx25("p", { className: "text-foreground", children: "This is the card content area." }) }),
+        /* @__PURE__ */ jsxs11(CardFooter, { children: [
+          /* @__PURE__ */ jsx25(Button, { variant: "outline", className: "mr-2", children: "Cancel" }),
+          /* @__PURE__ */ jsx25(Button, { children: "Submit" })
         ] })
       ] }),
-      /* @__PURE__ */ jsxs10(Card, { children: [
-        /* @__PURE__ */ jsxs10(CardHeader, { children: [
-          /* @__PURE__ */ jsx24(CardTitle, { children: "Another Card" }),
-          /* @__PURE__ */ jsx24(CardDescription, { children: "With different content" })
+      /* @__PURE__ */ jsxs11(Card, { children: [
+        /* @__PURE__ */ jsxs11(CardHeader, { children: [
+          /* @__PURE__ */ jsx25(CardTitle, { children: "Another Card" }),
+          /* @__PURE__ */ jsx25(CardDescription, { children: "With different content" })
         ] }),
-        /* @__PURE__ */ jsx24(CardContent, { children: /* @__PURE__ */ jsxs10("div", { className: "space-y-2", children: [
-          /* @__PURE__ */ jsx24(Label, { htmlFor: "card-input", children: "Name" }),
-          /* @__PURE__ */ jsx24(Input, { id: "card-input", placeholder: "Enter name..." })
+        /* @__PURE__ */ jsx25(CardContent, { children: /* @__PURE__ */ jsxs11("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ jsx25(Label, { htmlFor: "card-input", children: "Name" }),
+          /* @__PURE__ */ jsx25(Input, { id: "card-input", placeholder: "Enter name..." })
         ] }) }),
-        /* @__PURE__ */ jsx24(CardFooter, { children: /* @__PURE__ */ jsx24(Button, { className: "w-full", children: "Save" }) })
+        /* @__PURE__ */ jsx25(CardFooter, { children: /* @__PURE__ */ jsx25(Button, { className: "w-full", children: "Save" }) })
       ] })
     ] }) }),
-    /* @__PURE__ */ jsxs10(Section, { title: "Dialog", children: [
-      /* @__PURE__ */ jsx24(Button, { onClick: () => setDialogOpen(true), children: "Open Dialog" }),
-      /* @__PURE__ */ jsx24(DialogNamespace, { open: dialogOpen, onOpenChange: setDialogOpen, children: /* @__PURE__ */ jsxs10(DialogContent, { children: [
-        /* @__PURE__ */ jsxs10(DialogHeader, { children: [
-          /* @__PURE__ */ jsx24(DialogTitle, { children: "Create New Zone" }),
-          /* @__PURE__ */ jsx24(DialogDescription, { children: "Fill in the details below to create a new zone." })
+    /* @__PURE__ */ jsxs11(Section, { title: "Dialog", children: [
+      /* @__PURE__ */ jsx25(Button, { onClick: () => setDialogOpen(true), children: "Open Dialog" }),
+      /* @__PURE__ */ jsx25(DialogNamespace, { open: dialogOpen, onOpenChange: setDialogOpen, children: /* @__PURE__ */ jsxs11(DialogContent, { children: [
+        /* @__PURE__ */ jsxs11(DialogHeader, { children: [
+          /* @__PURE__ */ jsx25(DialogTitle, { children: "Create New Zone" }),
+          /* @__PURE__ */ jsx25(DialogDescription, { children: "Fill in the details below to create a new zone." })
         ] }),
-        /* @__PURE__ */ jsxs10("div", { className: "space-y-4 py-4", children: [
-          /* @__PURE__ */ jsxs10("div", { className: "grid grid-cols-2 gap-4", children: [
-            /* @__PURE__ */ jsxs10("div", { children: [
-              /* @__PURE__ */ jsx24(Label, { htmlFor: "zone-name", children: "Zone Name *" }),
-              /* @__PURE__ */ jsx24(Input, { id: "zone-name", placeholder: "eg:hyderabad" })
+        /* @__PURE__ */ jsxs11("div", { className: "space-y-4 py-4", children: [
+          /* @__PURE__ */ jsxs11("div", { className: "grid grid-cols-2 gap-4", children: [
+            /* @__PURE__ */ jsxs11("div", { children: [
+              /* @__PURE__ */ jsx25(Label, { htmlFor: "zone-name", children: "Zone Name *" }),
+              /* @__PURE__ */ jsx25(Input, { id: "zone-name", placeholder: "eg:hyderabad" })
             ] }),
-            /* @__PURE__ */ jsxs10("div", { children: [
-              /* @__PURE__ */ jsx24(Label, { htmlFor: "zone-code", children: "Zone Code *" }),
-              /* @__PURE__ */ jsx24(Input, { id: "zone-code", placeholder: "eg :hyd022" })
+            /* @__PURE__ */ jsxs11("div", { children: [
+              /* @__PURE__ */ jsx25(Label, { htmlFor: "zone-code", children: "Zone Code *" }),
+              /* @__PURE__ */ jsx25(Input, { id: "zone-code", placeholder: "eg :hyd022" })
             ] })
           ] }),
-          /* @__PURE__ */ jsxs10("div", { className: "grid grid-cols-2 gap-4", children: [
-            /* @__PURE__ */ jsxs10("div", { children: [
-              /* @__PURE__ */ jsx24(Label, { children: "State *" }),
-              /* @__PURE__ */ jsxs10(SelectNamespace, { children: [
-                /* @__PURE__ */ jsx24(SelectTrigger, { className: "w-full", children: /* @__PURE__ */ jsx24(SelectValue, { placeholder: "Select state" }) }),
-                /* @__PURE__ */ jsxs10(SelectContent, { children: [
-                  /* @__PURE__ */ jsx24(SelectItem, { value: "telangana", children: "TELANGANA" }),
-                  /* @__PURE__ */ jsx24(SelectItem, { value: "andhra", children: "ANDHRA PRADESH" })
+          /* @__PURE__ */ jsxs11("div", { className: "grid grid-cols-2 gap-4", children: [
+            /* @__PURE__ */ jsxs11("div", { children: [
+              /* @__PURE__ */ jsx25(Label, { children: "State *" }),
+              /* @__PURE__ */ jsxs11(SelectNamespace, { children: [
+                /* @__PURE__ */ jsx25(SelectTrigger, { className: "w-full", children: /* @__PURE__ */ jsx25(SelectValue, { placeholder: "Select state" }) }),
+                /* @__PURE__ */ jsxs11(SelectContent, { children: [
+                  /* @__PURE__ */ jsx25(SelectItem, { value: "telangana", children: "TELANGANA" }),
+                  /* @__PURE__ */ jsx25(SelectItem, { value: "andhra", children: "ANDHRA PRADESH" })
                 ] })
               ] })
             ] }),
-            /* @__PURE__ */ jsxs10("div", { children: [
-              /* @__PURE__ */ jsx24(Label, { children: "District *" }),
-              /* @__PURE__ */ jsxs10(SelectNamespace, { children: [
-                /* @__PURE__ */ jsx24(SelectTrigger, { className: "w-full", children: /* @__PURE__ */ jsx24(SelectValue, { placeholder: "Select District" }) }),
-                /* @__PURE__ */ jsxs10(SelectContent, { children: [
-                  /* @__PURE__ */ jsx24(SelectItem, { value: "hyderabad", children: "HYDERABAD" }),
-                  /* @__PURE__ */ jsx24(SelectItem, { value: "rangareddy", children: "RANGAREDDY" })
+            /* @__PURE__ */ jsxs11("div", { children: [
+              /* @__PURE__ */ jsx25(Label, { children: "District *" }),
+              /* @__PURE__ */ jsxs11(SelectNamespace, { children: [
+                /* @__PURE__ */ jsx25(SelectTrigger, { className: "w-full", children: /* @__PURE__ */ jsx25(SelectValue, { placeholder: "Select District" }) }),
+                /* @__PURE__ */ jsxs11(SelectContent, { children: [
+                  /* @__PURE__ */ jsx25(SelectItem, { value: "hyderabad", children: "HYDERABAD" }),
+                  /* @__PURE__ */ jsx25(SelectItem, { value: "rangareddy", children: "RANGAREDDY" })
                 ] })
               ] })
             ] })
           ] })
         ] }),
-        /* @__PURE__ */ jsxs10(DialogFooter, { children: [
-          /* @__PURE__ */ jsx24(Button, { variant: "outline", onClick: () => setDialogOpen(false), children: "CANCEL" }),
-          /* @__PURE__ */ jsx24(Button, { onClick: () => setDialogOpen(false), children: "Create" })
+        /* @__PURE__ */ jsxs11(DialogFooter, { children: [
+          /* @__PURE__ */ jsx25(Button, { variant: "outline", onClick: () => setDialogOpen(false), children: "CANCEL" }),
+          /* @__PURE__ */ jsx25(Button, { onClick: () => setDialogOpen(false), children: "Create" })
         ] })
       ] }) })
     ] }),
-    /* @__PURE__ */ jsx24(Section, { title: "Table", children: /* @__PURE__ */ jsxs10(TableNamespace, { children: [
-      /* @__PURE__ */ jsx24(TableCaption, { children: "A list of recent invoices" }),
-      /* @__PURE__ */ jsx24(TableHeader, { children: /* @__PURE__ */ jsxs10(TableRow, { children: [
-        /* @__PURE__ */ jsx24(TableHead, { children: "Invoice" }),
-        /* @__PURE__ */ jsx24(TableHead, { children: "Status" }),
-        /* @__PURE__ */ jsx24(TableHead, { children: "Method" }),
-        /* @__PURE__ */ jsx24(TableHead, { className: "text-right", children: "Amount" })
+    /* @__PURE__ */ jsx25(Section, { title: "Table", children: /* @__PURE__ */ jsxs11(TableNamespace, { children: [
+      /* @__PURE__ */ jsx25(TableCaption, { children: "A list of recent invoices" }),
+      /* @__PURE__ */ jsx25(TableHeader, { children: /* @__PURE__ */ jsxs11(TableRow, { children: [
+        /* @__PURE__ */ jsx25(TableHead, { children: "Invoice" }),
+        /* @__PURE__ */ jsx25(TableHead, { children: "Status" }),
+        /* @__PURE__ */ jsx25(TableHead, { children: "Method" }),
+        /* @__PURE__ */ jsx25(TableHead, { className: "text-right", children: "Amount" })
       ] }) }),
-      /* @__PURE__ */ jsxs10(TableBody, { children: [
-        /* @__PURE__ */ jsxs10(TableRow, { children: [
-          /* @__PURE__ */ jsx24(TableCell, { children: "INV001" }),
-          /* @__PURE__ */ jsx24(TableCell, { children: /* @__PURE__ */ jsx24(Badge, { children: "Paid" }) }),
-          /* @__PURE__ */ jsx24(TableCell, { children: "Credit Card" }),
-          /* @__PURE__ */ jsx24(TableCell, { className: "text-right", children: "$250.00" })
+      /* @__PURE__ */ jsxs11(TableBody, { children: [
+        /* @__PURE__ */ jsxs11(TableRow, { children: [
+          /* @__PURE__ */ jsx25(TableCell, { children: "INV001" }),
+          /* @__PURE__ */ jsx25(TableCell, { children: /* @__PURE__ */ jsx25(Badge, { children: "Paid" }) }),
+          /* @__PURE__ */ jsx25(TableCell, { children: "Credit Card" }),
+          /* @__PURE__ */ jsx25(TableCell, { className: "text-right", children: "$250.00" })
         ] }),
-        /* @__PURE__ */ jsxs10(TableRow, { children: [
-          /* @__PURE__ */ jsx24(TableCell, { children: "INV002" }),
-          /* @__PURE__ */ jsx24(TableCell, { children: /* @__PURE__ */ jsx24(Badge, { variant: "secondary", children: "Pending" }) }),
-          /* @__PURE__ */ jsx24(TableCell, { children: "PayPal" }),
-          /* @__PURE__ */ jsx24(TableCell, { className: "text-right", children: "$150.00" })
+        /* @__PURE__ */ jsxs11(TableRow, { children: [
+          /* @__PURE__ */ jsx25(TableCell, { children: "INV002" }),
+          /* @__PURE__ */ jsx25(TableCell, { children: /* @__PURE__ */ jsx25(Badge, { variant: "secondary", children: "Pending" }) }),
+          /* @__PURE__ */ jsx25(TableCell, { children: "PayPal" }),
+          /* @__PURE__ */ jsx25(TableCell, { className: "text-right", children: "$150.00" })
         ] }),
-        /* @__PURE__ */ jsxs10(TableRow, { children: [
-          /* @__PURE__ */ jsx24(TableCell, { children: "INV003" }),
-          /* @__PURE__ */ jsx24(TableCell, { children: /* @__PURE__ */ jsx24(Badge, { variant: "destructive", children: "Failed" }) }),
-          /* @__PURE__ */ jsx24(TableCell, { children: "Bank Transfer" }),
-          /* @__PURE__ */ jsx24(TableCell, { className: "text-right", children: "$350.00" })
+        /* @__PURE__ */ jsxs11(TableRow, { children: [
+          /* @__PURE__ */ jsx25(TableCell, { children: "INV003" }),
+          /* @__PURE__ */ jsx25(TableCell, { children: /* @__PURE__ */ jsx25(Badge, { variant: "destructive", children: "Failed" }) }),
+          /* @__PURE__ */ jsx25(TableCell, { children: "Bank Transfer" }),
+          /* @__PURE__ */ jsx25(TableCell, { className: "text-right", children: "$350.00" })
         ] })
       ] })
     ] }) }),
-    /* @__PURE__ */ jsx24(Section, { title: "Pagination", children: /* @__PURE__ */ jsx24(PaginationNamespace, { children: /* @__PURE__ */ jsxs10(PaginationContent, { children: [
-      /* @__PURE__ */ jsx24(PaginationItem, { children: /* @__PURE__ */ jsx24(PaginationPrevious, { onClick: () => console.log("Previous") }) }),
-      /* @__PURE__ */ jsx24(PaginationItem, { children: /* @__PURE__ */ jsx24(PaginationLink, { isActive: true, children: "1" }) }),
-      /* @__PURE__ */ jsx24(PaginationItem, { children: /* @__PURE__ */ jsx24(PaginationLink, { children: "2" }) }),
-      /* @__PURE__ */ jsx24(PaginationItem, { children: /* @__PURE__ */ jsx24(PaginationLink, { children: "3" }) }),
-      /* @__PURE__ */ jsx24(PaginationItem, { children: /* @__PURE__ */ jsx24(PaginationEllipsis, {}) }),
-      /* @__PURE__ */ jsx24(PaginationItem, { children: /* @__PURE__ */ jsx24(PaginationNext, { onClick: () => console.log("Next") }) })
+    /* @__PURE__ */ jsx25(Section, { title: "Pagination", children: /* @__PURE__ */ jsx25(PaginationNamespace, { children: /* @__PURE__ */ jsxs11(PaginationContent, { children: [
+      /* @__PURE__ */ jsx25(PaginationItem, { children: /* @__PURE__ */ jsx25(PaginationPrevious, { onClick: () => console.log("Previous") }) }),
+      /* @__PURE__ */ jsx25(PaginationItem, { children: /* @__PURE__ */ jsx25(PaginationLink, { isActive: true, children: "1" }) }),
+      /* @__PURE__ */ jsx25(PaginationItem, { children: /* @__PURE__ */ jsx25(PaginationLink, { children: "2" }) }),
+      /* @__PURE__ */ jsx25(PaginationItem, { children: /* @__PURE__ */ jsx25(PaginationLink, { children: "3" }) }),
+      /* @__PURE__ */ jsx25(PaginationItem, { children: /* @__PURE__ */ jsx25(PaginationEllipsis, {}) }),
+      /* @__PURE__ */ jsx25(PaginationItem, { children: /* @__PURE__ */ jsx25(PaginationNext, { onClick: () => console.log("Next") }) })
     ] }) }) }),
-    /* @__PURE__ */ jsx24(Section, { title: "Spinner", children: /* @__PURE__ */ jsxs10("div", { className: "flex items-center gap-8", children: [
-      /* @__PURE__ */ jsxs10("div", { className: "text-center", children: [
-        /* @__PURE__ */ jsx24(Spinner, { size: "sm" }),
-        /* @__PURE__ */ jsx24("p", { className: "text-sm text-muted-foreground mt-2", children: "Small" })
+    /* @__PURE__ */ jsx25(Section, { title: "Spinner", children: /* @__PURE__ */ jsxs11("div", { className: "flex items-center gap-8", children: [
+      /* @__PURE__ */ jsxs11("div", { className: "text-center", children: [
+        /* @__PURE__ */ jsx25(Spinner, { size: "sm" }),
+        /* @__PURE__ */ jsx25("p", { className: "text-sm text-muted-foreground mt-2", children: "Small" })
       ] }),
-      /* @__PURE__ */ jsxs10("div", { className: "text-center", children: [
-        /* @__PURE__ */ jsx24(Spinner, { size: "default" }),
-        /* @__PURE__ */ jsx24("p", { className: "text-sm text-muted-foreground mt-2", children: "Default" })
+      /* @__PURE__ */ jsxs11("div", { className: "text-center", children: [
+        /* @__PURE__ */ jsx25(Spinner, { size: "default" }),
+        /* @__PURE__ */ jsx25("p", { className: "text-sm text-muted-foreground mt-2", children: "Default" })
       ] }),
-      /* @__PURE__ */ jsxs10("div", { className: "text-center", children: [
-        /* @__PURE__ */ jsx24(Spinner, { size: "lg" }),
-        /* @__PURE__ */ jsx24("p", { className: "text-sm text-muted-foreground mt-2", children: "Large" })
+      /* @__PURE__ */ jsxs11("div", { className: "text-center", children: [
+        /* @__PURE__ */ jsx25(Spinner, { size: "lg" }),
+        /* @__PURE__ */ jsx25("p", { className: "text-sm text-muted-foreground mt-2", children: "Large" })
       ] })
     ] }) }),
-    /* @__PURE__ */ jsx24(Section, { title: "Separator", children: /* @__PURE__ */ jsxs10("div", { className: "space-y-4", children: [
-      /* @__PURE__ */ jsx24("p", { className: "text-foreground", children: "Content above separator" }),
-      /* @__PURE__ */ jsx24(Separator, {}),
-      /* @__PURE__ */ jsx24("p", { className: "text-foreground", children: "Content below separator" }),
-      /* @__PURE__ */ jsxs10("div", { className: "flex items-center h-10", children: [
-        /* @__PURE__ */ jsx24("span", { className: "text-foreground", children: "Left" }),
-        /* @__PURE__ */ jsx24(Separator, { orientation: "vertical", className: "mx-4" }),
-        /* @__PURE__ */ jsx24("span", { className: "text-foreground", children: "Right" })
+    /* @__PURE__ */ jsx25(Section, { title: "Separator", children: /* @__PURE__ */ jsxs11("div", { className: "space-y-4", children: [
+      /* @__PURE__ */ jsx25("p", { className: "text-foreground", children: "Content above separator" }),
+      /* @__PURE__ */ jsx25(Separator, {}),
+      /* @__PURE__ */ jsx25("p", { className: "text-foreground", children: "Content below separator" }),
+      /* @__PURE__ */ jsxs11("div", { className: "flex items-center h-10", children: [
+        /* @__PURE__ */ jsx25("span", { className: "text-foreground", children: "Left" }),
+        /* @__PURE__ */ jsx25(Separator, { orientation: "vertical", className: "mx-4" }),
+        /* @__PURE__ */ jsx25("span", { className: "text-foreground", children: "Right" })
       ] })
     ] }) }),
-    /* @__PURE__ */ jsx24(Section, { title: "Typography & Colors", children: /* @__PURE__ */ jsxs10("div", { className: "space-y-2", children: [
-      /* @__PURE__ */ jsx24("p", { className: "text-foreground", children: "text-foreground - Primary text color" }),
-      /* @__PURE__ */ jsx24("p", { className: "text-muted-foreground", children: "text-muted-foreground - Muted text color" }),
-      /* @__PURE__ */ jsx24("p", { className: "text-accent", children: "text-accent - Accent color" }),
-      /* @__PURE__ */ jsx24("p", { className: "text-destructive", children: "text-destructive - Destructive color" })
+    /* @__PURE__ */ jsx25(Section, { title: "Typography & Colors", children: /* @__PURE__ */ jsxs11("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ jsx25("p", { className: "text-foreground", children: "text-foreground - Primary text color" }),
+      /* @__PURE__ */ jsx25("p", { className: "text-muted-foreground", children: "text-muted-foreground - Muted text color" }),
+      /* @__PURE__ */ jsx25("p", { className: "text-accent", children: "text-accent - Accent color" }),
+      /* @__PURE__ */ jsx25("p", { className: "text-destructive", children: "text-destructive - Destructive color" })
     ] }) })
   ] }) });
 };
-var Playground = () => /* @__PURE__ */ jsx24(ThemeProvider, { defaultTheme: "light", children: /* @__PURE__ */ jsx24(PlaygroundContent, {}) });
+var Playground = () => /* @__PURE__ */ jsx25(ThemeProvider, { defaultTheme: "light", children: /* @__PURE__ */ jsx25(PlaygroundContent, {}) });
 export {
   Badge,
   Box,
@@ -2532,6 +3603,8 @@ export {
   CardTitle,
   Checkbox,
   Combobox,
+  DataGrid,
+  DataGrid as DataGridV0,
   DialogNamespace as Dialog,
   DialogClose,
   DialogContent,