@tirth_jasoliya/ui 1.0.0

package/dist/index.cjs

@@ -0,0 +1,3133 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  AppMetaProvider: () => AppMetaProvider,
+  DataTable: () => DataTable,
+  DataTableActionBar: () => DataTableActionBar,
+  DataTableActionBarAction: () => DataTableActionBarAction,
+  DataTableActionBarSelection: () => DataTableActionBarSelection,
+  DataTemplate: () => DataTemplate,
+  DataTemplateActionBar: () => DataTemplateActionBar,
+  DataTemplateActionBarAction: () => DataTemplateActionBarAction,
+  DataTemplateActionBarSelection: () => DataTemplateActionBarSelection,
+  GeneralHelper: () => GeneralHelper,
+  createLayoutComponents: () => createLayoutComponents,
+  createPageTemplateHook: () => createPageTemplateHook,
+  createTypedAppMetaContext: () => createTypedAppMetaContext
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/components/data/data-table/data-table.tsx
+var import_react_table = require("@tanstack/react-table");
+var import_lucide_react5 = require("lucide-react");
+
+// src/components/ui/button.tsx
+var import_radix_ui = require("radix-ui");
+var import_class_variance_authority = require("class-variance-authority");
+
+// src/lib/utils.ts
+var import_clsx = require("clsx");
+var import_tailwind_merge = require("tailwind-merge");
+function cn(...inputs) {
+  return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
+}
+
+// src/components/ui/button.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var buttonVariants = (0, import_class_variance_authority.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 shadow-xs hover:bg-primary/90",
+        destructive: "bg-destructive text-white shadow-xs 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 shadow-xs 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",
+        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"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+function Button({
+  className,
+  variant,
+  size,
+  asChild = false,
+  ...props
+}) {
+  const Comp = asChild ? import_radix_ui.Slot.Slot : "button";
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    Comp,
+    {
+      "data-slot": "button",
+      className: cn(buttonVariants({ variant, size, className }), "transition-none"),
+      ...props
+    }
+  );
+}
+
+// src/components/ui/table.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function Table({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "div",
+    {
+      "data-slot": "table-container",
+      className: "relative w-full overflow-auto max-h-full",
+      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        "table",
+        {
+          "data-slot": "table",
+          className: cn("w-full caption-bottom text-sm", className),
+          ...props
+        }
+      )
+    }
+  );
+}
+function TableHeader({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "thead",
+    {
+      "data-slot": "table-header",
+      className: cn("[&_tr]:border-b", className),
+      ...props
+    }
+  );
+}
+function TableBody({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "tbody",
+    {
+      "data-slot": "table-body",
+      className: cn("[&_tr:last-child]:border-0", className),
+      ...props
+    }
+  );
+}
+function TableFooter({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "tfoot",
+    {
+      "data-slot": "table-footer",
+      className: cn(
+        "bg-muted/50 border-t font-medium [&>tr]:last:border-b-0",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function TableRow({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.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__ */ (0, import_jsx_runtime2.jsx)(
+    "th",
+    {
+      "data-slot": "table-head",
+      className: cn(
+        "text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function TableCell({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "td",
+    {
+      "data-slot": "table-cell",
+      className: cn(
+        "p-2 align-middle whitespace-nowrap",
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+// src/components/ui/card.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function Card({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    "div",
+    {
+      "data-slot": "card",
+      className: cn(
+        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function CardContent({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    "div",
+    {
+      "data-slot": "card-content",
+      className: cn("px-6", className),
+      ...props
+    }
+  );
+}
+
+// src/components/ui/tooltip.tsx
+var import_radix_ui2 = require("radix-ui");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function TooltipProvider({
+  delayDuration = 0,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    import_radix_ui2.Tooltip.Provider,
+    {
+      "data-slot": "tooltip-provider",
+      delayDuration,
+      ...props
+    }
+  );
+}
+function Tooltip({
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(TooltipProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_radix_ui2.Tooltip.Root, { "data-slot": "tooltip", ...props }) });
+}
+function TooltipTrigger({
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_radix_ui2.Tooltip.Trigger, { "data-slot": "tooltip-trigger", ...props });
+}
+function TooltipContent({
+  className,
+  sideOffset = 0,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_radix_ui2.Tooltip.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+    import_radix_ui2.Tooltip.Content,
+    {
+      "data-slot": "tooltip-content",
+      sideOffset,
+      className: cn(
+        "bg-primary text-primary-foreground 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__ */ (0, import_jsx_runtime4.jsx)(import_radix_ui2.Tooltip.Arrow, { className: "bg-primary fill-primary z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" })
+      ]
+    }
+  ) });
+}
+
+// src/components/data/data-table/data-table-toolbar.tsx
+var import_lucide_react3 = require("lucide-react");
+
+// src/components/ui/input.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+function Input({ className, type, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    "input",
+    {
+      type,
+      "data-slot": "input",
+      className: cn(
+        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "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",
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+// src/components/ui/select.tsx
+var import_radix_ui3 = require("radix-ui");
+var import_lucide_react = require("lucide-react");
+var import_jsx_runtime6 = require("react/jsx-runtime");
+function Select({
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_radix_ui3.Select.Root, { "data-slot": "select", ...props });
+}
+function SelectValue({
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_radix_ui3.Select.Value, { "data-slot": "select-value", ...props });
+}
+function SelectTrigger({
+  className,
+  size = "default",
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+    import_radix_ui3.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__ */ (0, import_jsx_runtime6.jsx)(import_radix_ui3.Select.Icon, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react.ChevronDownIcon, { className: "size-4 opacity-50" }) })
+      ]
+    }
+  );
+}
+function SelectContent({
+  className,
+  children,
+  position = "popper",
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_radix_ui3.Select.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+    import_radix_ui3.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,
+      ...props,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SelectScrollUpButton, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          import_radix_ui3.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__ */ (0, import_jsx_runtime6.jsx)(SelectScrollDownButton, {})
+      ]
+    }
+  ) });
+}
+function SelectItem({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+    import_radix_ui3.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__ */ (0, import_jsx_runtime6.jsx)("span", { className: "absolute right-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_radix_ui3.Select.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react.CheckIcon, { className: "size-4" }) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_radix_ui3.Select.ItemText, { children })
+      ]
+    }
+  );
+}
+function SelectScrollUpButton({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    import_radix_ui3.Select.ScrollUpButton,
+    {
+      "data-slot": "select-scroll-up-button",
+      className: cn(
+        "flex cursor-default items-center justify-center py-1",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react.ChevronUpIcon, { className: "size-4" })
+    }
+  );
+}
+function SelectScrollDownButton({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    import_radix_ui3.Select.ScrollDownButton,
+    {
+      "data-slot": "select-scroll-down-button",
+      className: cn(
+        "flex cursor-default items-center justify-center py-1",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react.ChevronDownIcon, { className: "size-4" })
+    }
+  );
+}
+
+// src/components/ui/dropdown-menu.tsx
+var import_radix_ui4 = require("radix-ui");
+var import_lucide_react2 = require("lucide-react");
+var import_jsx_runtime7 = require("react/jsx-runtime");
+function DropdownMenu({
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_radix_ui4.DropdownMenu.Root, { "data-slot": "dropdown-menu", ...props });
+}
+function DropdownMenuTrigger({
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    import_radix_ui4.DropdownMenu.Trigger,
+    {
+      "data-slot": "dropdown-menu-trigger",
+      ...props
+    }
+  );
+}
+function DropdownMenuContent({
+  className,
+  sideOffset = 4,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_radix_ui4.DropdownMenu.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    import_radix_ui4.DropdownMenu.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) rounded-md border p-1 shadow-md",
+        className
+      ),
+      ...props
+    }
+  ) });
+}
+function DropdownMenuGroup({
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_radix_ui4.DropdownMenu.Group, { "data-slot": "dropdown-menu-group", ...props });
+}
+function DropdownMenuItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    import_radix_ui4.DropdownMenu.Item,
+    {
+      "data-slot": "dropdown-menu-item",
+      "data-inset": inset,
+      "data-variant": variant,
+      className: cn(
+        "cursor-pointer 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 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 DropdownMenuCheckboxItem({
+  className,
+  children,
+  checked,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+    import_radix_ui4.DropdownMenu.CheckboxItem,
+    {
+      "data-slot": "dropdown-menu-checkbox-item",
+      className: cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      ),
+      checked,
+      ...props,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_radix_ui4.DropdownMenu.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react2.CheckIcon, { className: "size-4" }) }) }),
+        children
+      ]
+    }
+  );
+}
+function DropdownMenuLabel({
+  className,
+  inset,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    import_radix_ui4.DropdownMenu.Label,
+    {
+      "data-slot": "dropdown-menu-label",
+      "data-inset": inset,
+      className: cn(
+        "px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function DropdownMenuSeparator({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    import_radix_ui4.DropdownMenu.Separator,
+    {
+      "data-slot": "dropdown-menu-separator",
+      className: cn("bg-border -mx-1 my-1 h-px", className),
+      ...props
+    }
+  );
+}
+
+// src/components/data/data-table/data-table-toolbar.tsx
+var import_jsx_runtime8 = require("react/jsx-runtime");
+function DataTableToolbar({
+  table,
+  filters = [],
+  globalFilter,
+  onGlobalFilterChange,
+  enableGlobalFilter = true,
+  onExport,
+  onRefresh,
+  loading = false,
+  enableColumnVisibility = true,
+  data,
+  onClearSorting,
+  onClearFilters,
+  enableColumnPinning = false
+}) {
+  const getAllLeafColumns = () => {
+    return table.getAllLeafColumns().filter((column) => column.getCanHide?.() !== false);
+  };
+  const getGroupColumns = () => {
+    return table.getAllColumns().filter(
+      (column) => !table.getAllLeafColumns().includes(column) && column.columns?.length && column.columns.some((col) => col.getCanHide?.() !== false)
+    );
+  };
+  const getUngroupedLeafColumns = () => {
+    const groupedColumnIds = new Set(
+      getGroupColumns().flatMap(
+        (group) => group.columns?.filter((col) => col.getCanHide?.() !== false).map((c) => c.id) || []
+      )
+    );
+    return getAllLeafColumns().filter((column) => !groupedColumnIds.has(column.id));
+  };
+  const getColumnDisplayName = (columnId, groupName) => {
+    if (groupName && columnId.startsWith(`${groupName}.`)) {
+      const cleanId = columnId.replace(`${groupName}.`, "");
+      return cleanId.split("_").map((word) => word.slice(1)).join(" ");
+    }
+    return columnId.split("_").map((word) => word.charAt(0).toUpperCase() + word.slice(1)).join(" ");
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "rounded-xl", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "px-2", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "flex flex-col gap-6", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex items-center justify-between", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "flex items-center gap-3", children: filters.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex items-center gap-3 flex-wrap", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "flex items-center gap-2 text-sm font-medium text-muted-foreground", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react3.Filter, { className: "h-4 w-4" }) }),
+      filters.map((filter) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: cn("relative min-w-[150px]", filter.width), children: filter.type === "select" ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+        Select,
+        {
+          value: table.getColumn(filter.key)?.getFilterValue() ?? "",
+          onValueChange: (value) => table.getColumn(filter.key)?.setFilterValue(value === "all" ? "" : value),
+          children: [
+            filter.icon && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(filter.icon, { className: "size-4 absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground" }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SelectTrigger, { className: cn("h-9 rounded-lg w-full", filter.icon && "pl-9"), children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SelectValue, { placeholder: filter.placeholder }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(SelectContent, { className: "rounded-lg", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SelectItem, { value: "all", children: "All" }),
+              filter.options?.map((option) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SelectItem, { value: option.value, children: option.label }, option.label))
+            ] })
+          ]
+        }
+      ) : /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "relative", children: [
+        filter.icon && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(filter.icon, { className: "size-4 absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          Input,
+          {
+            placeholder: filter.placeholder,
+            value: table.getColumn(filter.key)?.getFilterValue() ?? "",
+            onChange: (event) => table.getColumn(filter.key)?.setFilterValue(event.target.value),
+            className: cn("h-9 rounded-lg", filter.icon && "pl-9"),
+            type: filter.type === "number" ? "number" : filter.type === "date" ? "date" : "text"
+          }
+        )
+      ] }) }, filter.key))
+    ] }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex items-center gap-2", children: [
+      enableGlobalFilter && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "relative", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react3.Search, { className: "absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          Input,
+          {
+            placeholder: "Global search...",
+            value: globalFilter ?? "",
+            onChange: (event) => onGlobalFilterChange(event.target.value),
+            className: "pl-9 max-w-max"
+          }
+        )
+      ] }),
+      onExport && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Button, { variant: "outline", size: "sm", onClick: () => onExport(data), className: "rounded-lg", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react3.Download, { className: "mr-2 h-4 w-4" }),
+        "Export"
+      ] }),
+      enableColumnVisibility && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(DropdownMenu, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Button, { variant: "outline", size: "sm", className: "rounded-lg gap-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { children: "Columns" }),
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react3.ChevronDown, { className: "h-4 w-4 opacity-50" })
+        ] }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(DropdownMenuContent, { align: "end", className: "w-[220px] rounded-lg max-h-[400px] overflow-y-auto", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(DropdownMenuLabel, { className: "px-4 py-2 text-sm font-medium", children: "Toggle Columns" }),
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(DropdownMenuSeparator, {}),
+          getUngroupedLeafColumns().length > 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(DropdownMenuGroup, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(DropdownMenuLabel, { className: "px-4 py-1.5 text-sm font-medium text-muted-foreground", children: "General" }),
+            getUngroupedLeafColumns().map((column) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+              DropdownMenuCheckboxItem,
+              {
+                className: "text-sm",
+                checked: column.getIsVisible(),
+                onCheckedChange: (value) => column.toggleVisibility(!!value),
+                children: getColumnDisplayName(column.id)
+              },
+              column.id
+            ))
+          ] }),
+          getGroupColumns().map((group) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(DropdownMenuGroup, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(DropdownMenuSeparator, {}),
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(DropdownMenuLabel, { className: "px-4 py-1.5 text-sm font-medium text-muted-foreground", children: group.id }),
+            group.columns?.filter((column) => column.getCanHide?.() !== false).map((column) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+              DropdownMenuCheckboxItem,
+              {
+                className: "text-sm",
+                checked: column.getIsVisible(),
+                onCheckedChange: (value) => column.toggleVisibility(!!value),
+                children: getColumnDisplayName(column.id, group.id)
+              },
+              column.id
+            ))
+          ] }, group.id))
+        ] })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(DropdownMenu, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Button, { variant: "outline", size: "sm", className: "rounded-lg", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react3.Settings2, { className: "h-4 w-4" }) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(DropdownMenuContent, { align: "end", className: "w-[200px] rounded-lg", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(DropdownMenuLabel, { children: "Table Settings" }),
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(DropdownMenuSeparator, {}),
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(DropdownMenuItem, { onClick: onClearSorting, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react3.ArrowUpDown, { className: "mr-2 h-4 w-4" }),
+            "Clear All Sorting"
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(DropdownMenuItem, { onClick: onClearFilters, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react3.Filter, { className: "mr-2 h-4 w-4" }),
+            "Clear All Filters"
+          ] }),
+          enableColumnPinning && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(DropdownMenuSeparator, {}),
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(DropdownMenuLabel, { children: "Column Pinning" }),
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+              DropdownMenuItem,
+              {
+                onClick: () => table.setColumnPinning({ left: [], right: [] }),
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react3.PinOff, { className: "mr-2 h-4 w-4" }),
+                  "Reset All Pinning"
+                ]
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+              DropdownMenuItem,
+              {
+                onClick: () => {
+                  const leftColumns = getAllLeafColumns().filter((column) => column.getCanPin?.() !== false).map((column) => column.id);
+                  table.setColumnPinning({ left: leftColumns, right: [] });
+                },
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react3.Pin, { className: "mr-2 h-4 w-4 rotate-90" }),
+                  "Pin All Left"
+                ]
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+              DropdownMenuItem,
+              {
+                onClick: () => {
+                  const rightColumns = getAllLeafColumns().filter((column) => column.getCanPin?.() !== false).map((column) => column.id);
+                  table.setColumnPinning({ left: [], right: rightColumns });
+                },
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react3.Pin, { className: "mr-2 h-4 w-4 -rotate-90" }),
+                  "Pin All Right"
+                ]
+              }
+            )
+          ] })
+        ] })
+      ] }),
+      onRefresh && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Button, { variant: "outline", size: "sm", onClick: onRefresh, disabled: loading, className: "rounded-lg", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react3.RefreshCw, { className: cn("h-4 w-4", loading && "animate-spin") }) })
+    ] })
+  ] }) }) }) });
+}
+
+// src/components/data/data-table/data-table-pagination.tsx
+var import_jsx_runtime9 = require("react/jsx-runtime");
+function DataTablePagination({ table, config }) {
+  if (!config.enabled) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "rounded-xl", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex items-center justify-between", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "flex items-center gap-6 text-sm text-muted-foreground", children: config.showInfo !== false && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { children: [
+      "Showing ",
+      table.getState().pagination.pageIndex * table.getState().pagination.pageSize + 1,
+      " to",
+      " ",
+      Math.min(
+        (table.getState().pagination.pageIndex + 1) * table.getState().pagination.pageSize,
+        table.getFilteredRowModel().rows.length
+      ),
+      " ",
+      "of ",
+      table.getFilteredRowModel().rows.length,
+      " entries"
+    ] }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex items-center gap-4", children: [
+      config.pageSizeOptions && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "text-sm font-medium", children: "Rows per page:" }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+          Select,
+          {
+            value: `${table.getState().pagination.pageSize}`,
+            onValueChange: (value) => table.setPageSize(Number(value)),
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SelectTrigger, { className: "h-9 w-[70px] rounded-lg", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SelectValue, {}) }),
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SelectContent, { side: "top", className: "rounded-lg", children: config.pageSizeOptions.map((pageSize) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SelectItem, { value: `${pageSize}`, children: pageSize }, pageSize)) })
+            ]
+          }
+        )
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          Button,
+          {
+            variant: "outline",
+            size: "sm",
+            onClick: () => table.setPageIndex(0),
+            disabled: !table.getCanPreviousPage(),
+            className: "rounded-lg",
+            children: "First"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          Button,
+          {
+            variant: "outline",
+            size: "sm",
+            onClick: () => table.previousPage(),
+            disabled: !table.getCanPreviousPage(),
+            className: "rounded-lg",
+            children: "Previous"
+          }
+        ),
+        config.showPageNumbers && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "flex items-center gap-1", children: Array.from({ length: Math.min(5, table.getPageCount()) }, (_, i) => {
+          const pageIndex = table.getState().pagination.pageIndex;
+          const pageNumber = pageIndex - 2 + i + 1;
+          if (pageNumber < 1 || pageNumber > table.getPageCount()) return null;
+          return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+            Button,
+            {
+              variant: pageNumber === pageIndex + 1 ? "default" : "outline",
+              size: "sm",
+              className: "size-8 p-0 rounded-lg",
+              onClick: () => table.setPageIndex(pageNumber - 1),
+              children: pageNumber
+            },
+            pageNumber
+          );
+        }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          Button,
+          {
+            variant: "outline",
+            size: "sm",
+            onClick: () => table.nextPage(),
+            disabled: !table.getCanNextPage(),
+            className: "rounded-lg",
+            children: "Next"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          Button,
+          {
+            variant: "outline",
+            size: "sm",
+            onClick: () => table.setPageIndex(table.getPageCount() - 1),
+            disabled: !table.getCanNextPage(),
+            className: "rounded-lg",
+            children: "Last"
+          }
+        )
+      ] })
+    ] })
+  ] }) }) });
+}
+
+// src/components/ui/toggle.tsx
+var import_radix_ui5 = require("radix-ui");
+var import_class_variance_authority2 = require("class-variance-authority");
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var toggleVariants = (0, import_class_variance_authority2.cva)(
+  "inline-flex cursor-pointer items-center justify-center gap-2 rounded-md text-sm font-medium hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none transition-[color,box-shadow] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        outline: "border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground"
+      },
+      size: {
+        sm: "h-7 px-0 min-w-7",
+        default: "h-8 px-1 min-w-8",
+        lg: "h-9 px-2 min-w-10"
+      },
+      bg: {
+        enabled: "data-[state=on]:bg-accent data-[state=on]:text-accent-foreground",
+        disabled: ""
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+      bg: "enabled"
+    }
+  }
+);
+function Toggle({
+  className,
+  variant,
+  size,
+  noBg,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    import_radix_ui5.Toggle.Root,
+    {
+      "data-slot": "toggle",
+      className: cn(toggleVariants({ className, variant, size, bg: noBg ? "disabled" : "enabled" })),
+      ...props
+    }
+  );
+}
+
+// src/components/ui/checkbox.tsx
+var import_radix_ui6 = require("radix-ui");
+var import_lucide_react4 = require("lucide-react");
+var import_jsx_runtime11 = require("react/jsx-runtime");
+function Checkbox({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    import_radix_ui6.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__ */ (0, import_jsx_runtime11.jsx)(
+        import_radix_ui6.Checkbox.Indicator,
+        {
+          "data-slot": "checkbox-indicator",
+          className: "flex items-center justify-center text-current transition-none",
+          children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_lucide_react4.CheckIcon, { className: "size-3.5" })
+        }
+      )
+    }
+  );
+}
+
+// src/components/data/data-table/data-table.tsx
+var import_react = require("react");
+var import_jsx_runtime12 = require("react/jsx-runtime");
+function DataTable({
+  data,
+  columns: initialColumns,
+  filters = [],
+  pagination = { enabled: false },
+  settings = {},
+  header,
+  footer,
+  className = "",
+  maxHeight = "600px",
+  loading = false,
+  error,
+  emptyMessage = "No data available",
+  onRowSelectionChange,
+  onExport,
+  onRefresh,
+  onTableReady,
+  children
+}) {
+  const [sorting, setSorting] = (0, import_react.useState)([]);
+  const [columnFilters, setColumnFilters] = (0, import_react.useState)([]);
+  const [columnVisibility, setColumnVisibility] = (0, import_react.useState)({});
+  const [rowSelection, setRowSelection] = (0, import_react.useState)({});
+  const [globalFilter, setGlobalFilter] = (0, import_react.useState)("");
+  const [columnOrder, setColumnOrder] = (0, import_react.useState)([]);
+  const [columnPinning, setColumnPinning] = (0, import_react.useState)(
+    settings.enableColumnPinning ? { left: [], right: [] } : {}
+  );
+  const {
+    enableSorting = true,
+    enableFiltering = true,
+    enableGlobalFilter = true,
+    enableColumnVisibility = true,
+    enableRowSelection = true,
+    stickyHeader = true,
+    toolbar = false,
+    showSerialNumbers = true,
+    fixedCheckboxColumn = true,
+    striped = true,
+    hoverable = true,
+    compact = true,
+    bordered = true,
+    fullHeight = false,
+    enableColumnResizing = false,
+    enableColumnPinning = true,
+    hideHeader = false
+  } = settings;
+  const columns = (0, import_react.useMemo)(() => {
+    const cols = [...initialColumns];
+    const processColumns = (columns2) => {
+      return columns2.map((col) => {
+        if (col.id === "select" || col.id === "serialNumber") {
+          return col;
+        }
+        const newCol = {
+          ...col,
+          enablePinning: true
+        };
+        if (col.columns) {
+          newCol.columns = processColumns(col.columns);
+        }
+        return newCol;
+      });
+    };
+    const processedCols = processColumns(cols);
+    if (enableRowSelection) {
+      const selectColumn = {
+        id: "select",
+        header: ({ table: table2 }) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          Checkbox,
+          {
+            checked: table2.getIsAllPageRowsSelected() || table2.getIsSomePageRowsSelected() && "indeterminate",
+            onCheckedChange: (value) => table2.toggleAllPageRowsSelected(!!value),
+            "aria-label": "Select all"
+          }
+        ),
+        cell: ({ row }) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: cn("flex items-center justify-center"), children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          Checkbox,
+          {
+            checked: row.getIsSelected(),
+            onCheckedChange: (value) => row.toggleSelected(!!value),
+            "aria-label": "Select row"
+          }
+        ) }),
+        enableSorting: false,
+        enableHiding: false,
+        enablePinning: true,
+        headerAlign: "center",
+        size: 10
+      };
+      processedCols.unshift(selectColumn);
+    }
+    if (showSerialNumbers) {
+      const serialColumn = {
+        id: "serialNumber",
+        header: "No.",
+        cell: ({ row }) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "text-center font-medium text-muted-foreground", children: row.index + 1 }),
+        enableSorting: true,
+        enableHiding: false,
+        enablePinning: true,
+        size: 60,
+        headerAlign: "center"
+      };
+      processedCols.unshift(serialColumn);
+    }
+    return processedCols;
+  }, [initialColumns, showSerialNumbers, enableRowSelection, fixedCheckboxColumn]);
+  const table = (0, import_react_table.useReactTable)({
+    data,
+    columns,
+    onSortingChange: enableSorting ? setSorting : void 0,
+    onColumnFiltersChange: enableFiltering ? setColumnFilters : void 0,
+    onGlobalFilterChange: enableGlobalFilter ? setGlobalFilter : void 0,
+    getCoreRowModel: (0, import_react_table.getCoreRowModel)(),
+    getPaginationRowModel: pagination.enabled ? (0, import_react_table.getPaginationRowModel)() : void 0,
+    getSortedRowModel: enableSorting ? (0, import_react_table.getSortedRowModel)() : void 0,
+    getFilteredRowModel: enableFiltering ? (0, import_react_table.getFilteredRowModel)() : void 0,
+    onColumnVisibilityChange: enableColumnVisibility ? setColumnVisibility : void 0,
+    onRowSelectionChange: enableRowSelection ? setRowSelection : void 0,
+    onColumnOrderChange: setColumnOrder,
+    onColumnPinningChange: enableColumnPinning ? setColumnPinning : void 0,
+    state: {
+      sorting: enableSorting ? sorting : void 0,
+      columnFilters: enableFiltering ? columnFilters : void 0,
+      columnVisibility: enableColumnVisibility ? columnVisibility : void 0,
+      rowSelection: enableRowSelection ? rowSelection : {},
+      globalFilter,
+      columnOrder,
+      columnPinning: enableColumnPinning ? columnPinning : {}
+    },
+    initialState: {
+      pagination: pagination.enabled ? { pageSize: pagination.pageSize || 10 } : void 0,
+      columnPinning: enableColumnPinning ? {
+        left: [
+          ...showSerialNumbers ? ["serialNumber"] : [],
+          ...enableRowSelection ? ["select"] : []
+        ],
+        right: []
+      } : void 0
+    },
+    enableRowSelection,
+    enableColumnResizing,
+    enableColumnPinning,
+    columnResizeMode: "onChange"
+  });
+  (0, import_react.useEffect)(() => {
+    if (onTableReady) {
+      onTableReady(table);
+    }
+  }, [table, onTableReady]);
+  (0, import_react.useEffect)(() => {
+    if (enableRowSelection && onRowSelectionChange) {
+      const selectedRows = table.getFilteredSelectedRowModel().rows.map((row) => row.original);
+      onRowSelectionChange(selectedRows);
+    }
+  }, [rowSelection, enableRowSelection, onRowSelectionChange, table]);
+  const handleClearSorting = (0, import_react.useCallback)(() => {
+    setSorting([]);
+  }, []);
+  const handleClearFilters = (0, import_react.useCallback)(() => {
+    setColumnFilters([]);
+    setGlobalFilter("");
+  }, []);
+  const handlePinColumn = (columnId, side) => {
+    if (!enableColumnPinning) return;
+    const alwaysPinnedLeft = [
+      ...showSerialNumbers ? ["serialNumber"] : [],
+      ...enableRowSelection && fixedCheckboxColumn ? ["select"] : []
+    ];
+    const newPinning = {
+      left: [...(columnPinning.left ?? []).filter((id) => alwaysPinnedLeft.includes(id))],
+      right: [...columnPinning.right ?? []]
+    };
+    if (side === false) {
+      newPinning.left = newPinning.left.filter((id) => id !== columnId);
+      newPinning.right = newPinning.right.filter((id) => id !== columnId);
+    } else if (side === "right") {
+      newPinning.left = newPinning.left.filter((id) => id !== columnId);
+      if (!newPinning.right.includes(columnId)) {
+        newPinning.right.push(columnId);
+      }
+    } else if (side === "left") {
+      newPinning.right = newPinning.right.filter((id) => id !== columnId);
+      if (!newPinning.left.includes(columnId) && !alwaysPinnedLeft.includes(columnId)) {
+        newPinning.left.push(columnId);
+      }
+    }
+    table.setColumnPinning(newPinning);
+  };
+  const renderTableHeader = () => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(TableHeader, { className: cn(
+    stickyHeader && "sticky top-0 bg-sidebar z-20"
+  ), children: table.getHeaderGroups().map((headerGroup, groupIndex) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(TableRow, { className: "hover:bg-transparent", children: headerGroup.headers.map((header2, index) => {
+    const isGroupHeader = header2.depth === 0 && header2.colSpan > 1;
+    const isPinnedLeft = enableColumnPinning && (header2.column.getIsPinned() === "left" || header2.column.id === "serialNumber" || header2.column.id === "select" && enableRowSelection);
+    const isPinnedRight = enableColumnPinning && header2.column.getIsPinned() === "right";
+    const canSort = header2.column.getCanSort();
+    const canPin = enableColumnPinning && header2.column.columnDef.enablePinning !== false;
+    const isSerialNumber = header2.column.id === "serialNumber";
+    const isCheckbox = header2.column.id === "select";
+    const alwaysPinned = isSerialNumber || isCheckbox && fixedCheckboxColumn;
+    const headerAlign = header2.column.columnDef.headerAlign || "left";
+    const flexJustify = {
+      left: "justify-start",
+      center: "justify-center",
+      right: "justify-end"
+    }[headerAlign];
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+      TableHead,
+      {
+        colSpan: header2.colSpan,
+        className: cn(
+          "font-semibold text-foreground bg-sidebar group px-0",
+          !compact && "py-2",
+          bordered && index < headerGroup.headers.length - 1 && "border-r",
+          "relative",
+          isPinnedLeft && "sticky left-0 z-15 bg-sidebar",
+          isPinnedRight && "sticky right-0 z-15 bg-sidebar",
+          (isSerialNumber || isCheckbox) && "sticky left-0 z-15 bg-sidebar",
+          isGroupHeader ? "text-center" : "text-left"
+        ),
+        style: {
+          width: header2.getSize() !== 150 ? header2.getSize() : "auto",
+          minWidth: header2.getSize() !== 150 ? header2.getSize() : "auto",
+          ...isPinnedLeft && {
+            left: isSerialNumber ? 0 : isCheckbox ? showSerialNumbers ? table.getColumn("serialNumber")?.getSize() || 0 : 0 : getLeftOffset(header2.column)
+          },
+          ...isPinnedRight && { right: getRightOffset(header2.column) },
+          ...isSerialNumber && { left: 0 }
+        },
+        children: [
+          isGroupHeader ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "flex items-center justify-center", children: (0, import_react_table.flexRender)(header2.column.columnDef.header, header2.getContext()) }) : /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: cn("relative flex items-center w-full px-2", flexJustify), children: [
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex items-center gap-1", children: [
+              canSort && headerAlign === "right" && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "ml-1 order-2", children: header2.column.getIsSorted() && {
+                asc: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react5.ChevronUp, { className: "h-4 w-4" }),
+                desc: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react5.ChevronDown, { className: "h-4 w-4" })
+              }[header2.column.getIsSorted()] }),
+              header2.isPlaceholder ? null : (0, import_react_table.flexRender)(header2.column.columnDef.header, header2.getContext()),
+              canSort && headerAlign !== "right" && header2.column.getIsSorted() && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "ml-1 order-2", children: header2.column.getIsSorted() && {
+                asc: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react5.ChevronUp, { className: "h-4 w-4" }),
+                desc: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react5.ChevronDown, { className: "h-4 w-4" })
+              }[header2.column.getIsSorted()] })
+            ] }),
+            (canSort || canPin && !alwaysPinned) && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(DropdownMenu, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(DropdownMenuTrigger, { asChild: true, className: cn(
+                "absolute",
+                headerAlign === "left" && "right-1",
+                headerAlign === "center" && "right-1",
+                headerAlign === "right" && "left-1"
+              ), children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                Toggle,
+                {
+                  variant: "default",
+                  size: "sm",
+                  noBg: true,
+                  tabIndex: -1,
+                  className: "opacity-0 group-hover:opacity-70 hover:opacity-100 data-[state=open]:opacity-100",
+                  children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react5.MoreHorizontal, { className: "h-4 w-4" })
+                }
+              ) }),
+              /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(DropdownMenuContent, { align: "end", className: "w-48", children: [
+                canSort && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(DropdownMenuLabel, { children: "Sorting" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+                    DropdownMenuItem,
+                    {
+                      onClick: () => header2.column.toggleSorting(false),
+                      children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react5.ChevronUp, { className: "mr-2 h-4 w-4" }),
+                        "Sort Ascending"
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+                    DropdownMenuItem,
+                    {
+                      onClick: () => header2.column.toggleSorting(true),
+                      children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react5.ChevronDown, { className: "mr-2 h-4 w-4" }),
+                        "Sort Descending"
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+                    DropdownMenuItem,
+                    {
+                      onClick: () => header2.column.clearSorting(),
+                      disabled: !header2.column.getIsSorted(),
+                      children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react5.ChevronsUpDown, { className: "mr-2 h-4 w-4" }),
+                        "Clear Sort"
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(DropdownMenuSeparator, {})
+                ] }),
+                canPin && !alwaysPinned && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(DropdownMenuLabel, { children: "Pin Column" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+                    DropdownMenuItem,
+                    {
+                      onClick: () => handlePinColumn(header2.column.id, "right"),
+                      disabled: header2.column.getIsPinned() === "right",
+                      children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react5.MoveRightIcon, {}),
+                        "Pin Right"
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+                    DropdownMenuItem,
+                    {
+                      onClick: () => handlePinColumn(header2.column.id, false),
+                      disabled: !header2.column.getIsPinned(),
+                      children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react5.PinOffIcon, {}),
+                        "Unpin"
+                      ]
+                    }
+                  )
+                ] })
+              ] })
+            ] })
+          ] }),
+          enableColumnResizing && header2.column.getCanResize() && !isGroupHeader && header2.colSpan === 1 && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+            "div",
+            {
+              className: "absolute right-0 top-0 h-full w-1 bg-border hover:bg-primary cursor-col-resize opacity-0 hover:opacity-100 transition-opacity",
+              onMouseDown: header2.getResizeHandler()
+            }
+          )
+        ]
+      },
+      header2.id
+    );
+  }) }, headerGroup.id)) });
+  const getLeftOffset = (column) => {
+    if (!enableColumnPinning) return void 0;
+    let offset = 0;
+    const pinnedLeftColumns = table.getLeftHeaderGroups()[0]?.headers || [];
+    const alwaysPinnedColumns = [
+      ...showSerialNumbers ? ["serialNumber"] : [],
+      ...enableRowSelection ? ["select"] : []
+    ];
+    for (const col of pinnedLeftColumns) {
+      if (col.id === column.id) break;
+      if (alwaysPinnedColumns.includes(col.id)) {
+        const column2 = table.getColumn(col.id);
+        if (column2) {
+          offset += column2.getSize();
+        }
+      }
+    }
+    return offset;
+  };
+  const getRightOffset = (column) => {
+    if (!enableColumnPinning) return void 0;
+    const pinnedRightIds = table.getState().columnPinning.right || [];
+    const columnIndex = pinnedRightIds.indexOf(column.id);
+    if (columnIndex === -1) return void 0;
+    let offset = 0;
+    for (let i = columnIndex + 1; i < pinnedRightIds.length; i++) {
+      const col = table.getColumn(pinnedRightIds[i]);
+      if (col) {
+        offset += col.getSize();
+      }
+    }
+    return offset;
+  };
+  if (error) {
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Card, { className: "w-full rounded-xl shadow-sm", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(CardContent, { className: "flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "text-center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "text-red-500 mb-3 text-2xl", children: "\u26A0\uFE0F" }),
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "text-sm text-muted-foreground mb-4", children: error }),
+      onRefresh && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(Button, { variant: "outline", size: "sm", onClick: onRefresh, className: "rounded-lg", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react5.Loader2, { className: "mr-2 h-4 w-4" }),
+        "Try Again"
+      ] })
+    ] }) }) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(TooltipProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: cn("w-full space-y-2 flex flex-col h-full", className), children: [
+    header && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Card, { className: "rounded-2xl py-2 sticky top-0 z-20", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(CardContent, { className: "px-2", children: header }) }),
+    toolbar && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+      DataTableToolbar,
+      {
+        table,
+        filters,
+        globalFilter,
+        onGlobalFilterChange: setGlobalFilter,
+        enableGlobalFilter,
+        onExport,
+        onRefresh,
+        loading,
+        enableColumnVisibility,
+        enableColumnPinning,
+        data,
+        onClearSorting: handleClearSorting,
+        onClearFilters: handleClearFilters
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Card, { className: cn("shadow-sm overflow-auto py-0", fullHeight && "flex-1"), children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(CardContent, { className: "p-0 h-full", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "relative flex flex-col h-full justify-between", children: [
+      loading && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "absolute inset-0 bg-background/80 backdrop-blur-sm z-50 flex items-center justify-center rounded-xl", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex items-center gap-3 bg-background/90 px-4 py-3 rounded-lg shadow-sm", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react5.Loader2, { className: "size-5 animate-spin text-primary" }),
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "text-sm font-medium text-muted-foreground", children: "Loading..." })
+      ] }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "relative rounded-t-xl overflow-auto border-b", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(Table, { className: "border-collapse w-full", children: [
+        !hideHeader && renderTableHeader(),
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(TableBody, { children: table.getRowModel().rows?.length ? table.getRowModel().rows.map((row, rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          TableRow,
+          {
+            "data-state": row.getIsSelected() && "selected",
+            className: cn(
+              hoverable && "hover:bg-muted/50",
+              striped && rowIndex % 2 === 0 && "bg-muted/20",
+              row.getIsSelected() && "bg-muted",
+              "border-b last:border-b-0"
+            ),
+            children: row.getVisibleCells().map((cell, cellIndex) => {
+              const isPinnedLeft = enableColumnPinning && (cell.column.getIsPinned() === "left" || cell.column.id === "serialNumber" || cell.column.id === "select" && enableRowSelection);
+              const isPinnedRight = enableColumnPinning && cell.column.getIsPinned() === "right";
+              const isSerialNumber = cell.column.id === "serialNumber";
+              const isCheckbox = cell.column.id === "select";
+              const alwaysPinned = isSerialNumber || isCheckbox && fixedCheckboxColumn;
+              return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                TableCell,
+                {
+                  className: cn(
+                    compact ? "py-2" : "py-4",
+                    bordered && cellIndex < row.getVisibleCells().length && "border-r",
+                    isPinnedLeft && "sticky left-0 z-10 bg-sidebar/97",
+                    isPinnedRight && "sticky right-0 z-10 bg-sidebar/97",
+                    isSerialNumber && "sticky left-0 z-10 bg-sidebar/97",
+                    "p-1"
+                  ),
+                  style: {
+                    width: cell.column.getSize() !== 150 ? cell.column.getSize() : "auto",
+                    minWidth: cell.column.getSize() !== 150 ? cell.column.getSize() : "auto",
+                    ...isPinnedLeft && {
+                      left: isSerialNumber ? 0 : isCheckbox ? showSerialNumbers ? table.getColumn("serialNumber")?.getSize() || 0 : 0 : getLeftOffset(cell.column)
+                    },
+                    ...isPinnedRight && { right: getRightOffset(cell.column) },
+                    ...isSerialNumber && { left: 0 }
+                  },
+                  children: (0, import_react_table.flexRender)(cell.column.columnDef.cell, cell.getContext())
+                },
+                cell.id
+              );
+            })
+          },
+          row.id
+        )) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(TableCell, { colSpan: columns.length, className: "h-32 text-center border-0", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex flex-col items-center gap-3", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "text-muted-foreground text-5xl", children: "\u{1F4CB}" }),
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "text-muted-foreground font-medium", children: emptyMessage })
+        ] }) }) }) })
+      ] }) }),
+      footer && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "sticky bottom-0 bg-sidebar w-full z-20", style: {
+        width: "100%",
+        minWidth: "fit-content"
+      }, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Table, { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(TableFooter, { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(TableRow, { className: "bg-sidebar", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(TableCell, { colSpan: columns.length, className: "p-2", children: footer }) }) }) }) })
+    ] }) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(DataTablePagination, { table, config: pagination }),
+    children && children(table)
+  ] }) });
+}
+
+// src/components/ui/separator.tsx
+var import_radix_ui7 = require("radix-ui");
+var import_jsx_runtime13 = require("react/jsx-runtime");
+function Separator({
+  className,
+  orientation = "horizontal",
+  decorative = true,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    import_radix_ui7.Separator.Root,
+    {
+      "data-slot": "separator-root",
+      decorative,
+      orientation,
+      className: cn(
+        "bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+// src/components/data/data-table/data-table-action-bar.tsx
+var import_lucide_react6 = require("lucide-react");
+var import_framer_motion = require("framer-motion");
+var React = __toESM(require("react"), 1);
+var ReactDOM = __toESM(require("react-dom"), 1);
+var import_jsx_runtime14 = require("react/jsx-runtime");
+function DataTableActionBar({
+  table,
+  visible: visibleProp,
+  container: containerProp,
+  children,
+  className,
+  ...props
+}) {
+  const [mounted, setMounted] = React.useState(false);
+  React.useLayoutEffect(() => {
+    setMounted(true);
+  }, []);
+  React.useEffect(() => {
+    function onKeyDown(event) {
+      if (event.key === "Escape" && table) {
+        table.toggleAllRowsSelected(false);
+      }
+    }
+    window.addEventListener("keydown", onKeyDown);
+    return () => window.removeEventListener("keydown", onKeyDown);
+  }, [table]);
+  const container = containerProp ?? (mounted ? globalThis.document?.body : null);
+  if (!container || !table) return null;
+  const visible = visibleProp ?? table.getFilteredSelectedRowModel().rows.length > 0;
+  return ReactDOM.createPortal(
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_framer_motion.AnimatePresence, { children: visible && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+      import_framer_motion.motion.div,
+      {
+        role: "toolbar",
+        "aria-orientation": "horizontal",
+        initial: { opacity: 0, y: 20 },
+        animate: { opacity: 1, y: 0 },
+        exit: { opacity: 0, y: 20 },
+        transition: { duration: 0.3, ease: "easeInOut" },
+        className: cn(
+          "fixed inset-x-0 bottom-6 z-50 mx-auto flex w-fit flex-wrap items-center justify-center gap-2 rounded-xl border bg-primary/10 backdrop-blur-sm p-3 text-foreground ring-5 ring-primary/5",
+          className
+        ),
+        ...props,
+        children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(TooltipProvider, { children: [
+          "1",
+          children
+        ] })
+      }
+    ) }),
+    container
+  );
+}
+function DataTableActionBarAction({
+  size = "sm",
+  tooltip,
+  isPending,
+  disabled,
+  className,
+  children,
+  ...props
+}) {
+  const trigger = /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+    Button,
+    {
+      variant: "secondary",
+      size,
+      className: cn(
+        "gap-1.5 rounded-lg border border-secondary bg-secondary/50 hover:bg-secondary/70 transition-all duration-200",
+        size === "icon" ? "size-8" : "h-8 px-3",
+        className
+      ),
+      disabled: disabled || isPending,
+      ...props,
+      children: isPending ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react6.Loader, { className: "animate-spin" }) : children
+    }
+  );
+  if (!tooltip) return trigger;
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(Tooltip, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(TooltipTrigger, { asChild: true, children: trigger }),
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+      TooltipContent,
+      {
+        sideOffset: 8,
+        className: "rounded-lg border font-semibold text-foreground bg-secondary [&>span]:hidden",
+        children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("p", { children: tooltip })
+      }
+    )
+  ] });
+}
+function DataTableActionBarSelection({ table }) {
+  const onClearSelection = React.useCallback(() => {
+    if (table) {
+      table.toggleAllRowsSelected(false);
+    }
+  }, [table]);
+  if (!table) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex h-8 items-center rounded-lg border bg-muted/50 pr-1 pl-3", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("span", { className: "whitespace-nowrap text-sm font-medium", children: [
+      table.getFilteredSelectedRowModel().rows.length,
+      " selected"
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Separator, { orientation: "vertical", className: "mr-2 ml-3 data-[orientation=vertical]:h-4" }),
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(Tooltip, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Button, { variant: "ghost", size: "icon", className: "size-6 rounded-md", onClick: onClearSelection, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react6.X, { className: "size-3.5" }) }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+        TooltipContent,
+        {
+          sideOffset: 10,
+          className: "flex items-center gap-2 rounded-lg border px-3 py-2 font-semibold text-foregroun bg-secondary [&>span]:hidden",
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("p", { children: "Clear selection" }),
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("kbd", { className: "select-none rounded border bg-primary/50 px-2 py-1 font-mono font-normal text-[0.7rem] text-foreground shadow-sm", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("abbr", { title: "Escape", className: "no-underline", children: "Esc" }) })
+          ]
+        }
+      )
+    ] })
+  ] });
+}
+
+// src/components/data/data-table/data-table-column-header.tsx
+var import_lucide_react7 = require("lucide-react");
+var import_jsx_runtime15 = require("react/jsx-runtime");
+
+// src/components/data/data-table/data-table-view-options.tsx
+var import_lucide_react8 = require("lucide-react");
+var import_jsx_runtime16 = require("react/jsx-runtime");
+
+// src/components/ui/badge.tsx
+var import_radix_ui8 = require("radix-ui");
+var import_class_variance_authority3 = require("class-variance-authority");
+var import_jsx_runtime17 = require("react/jsx-runtime");
+var badgeVariants = (0, import_class_variance_authority3.cva)(
+  "inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
+  {
+    variants: {
+      variant: {
+        default: "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
+        secondary: "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
+        destructive: "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline: "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+
+// src/components/ui/command.tsx
+var import_cmdk = require("cmdk");
+var import_lucide_react10 = require("lucide-react");
+
+// src/components/ui/dialog.tsx
+var import_radix_ui9 = require("radix-ui");
+var import_lucide_react9 = require("lucide-react");
+var import_jsx_runtime18 = require("react/jsx-runtime");
+
+// src/components/ui/command.tsx
+var import_jsx_runtime19 = require("react/jsx-runtime");
+
+// src/components/ui/popover.tsx
+var import_radix_ui10 = require("radix-ui");
+var import_jsx_runtime20 = require("react/jsx-runtime");
+
+// src/components/data/data-table/data-table-faceted-filter.tsx
+var import_lucide_react11 = require("lucide-react");
+var import_jsx_runtime21 = require("react/jsx-runtime");
+
+// src/components/data/data-template/data-template.tsx
+var import_react2 = require("react");
+var import_lucide_react14 = require("lucide-react");
+
+// src/components/data/data-template/data-template-toolbar.tsx
+var import_lucide_react12 = require("lucide-react");
+var import_jsx_runtime22 = require("react/jsx-runtime");
+function DataTemplateToolbar({
+  fields,
+  filters,
+  globalFilter,
+  onGlobalFilterChange,
+  fieldFilters,
+  onFieldFilterChange,
+  sortField,
+  sortDirection,
+  onSortChange,
+  selectedCount,
+  totalCount,
+  visibleCount,
+  onExport,
+  onRefresh,
+  loading,
+  onClearFilters,
+  onClearSorting
+}) {
+  const sortableFields = fields.filter((field) => field.sortable);
+  const hasActiveFilters = Object.values(fieldFilters).some((value) => value !== void 0 && value !== null && value !== "") || globalFilter !== "";
+  const hasActiveSorting = sortField !== "";
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "rounded-xl p-0.5", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "px-2", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "flex flex-col gap-6", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex items-center justify-between", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "flex items-center gap-3", children: filters.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex items-center gap-3 flex-wrap", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "flex items-center gap-2 text-sm font-medium text-muted-foreground", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_lucide_react12.Filter, { className: "h-4 w-4" }) }),
+      filters.map((filter) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "relative min-w-[150px]", children: filter.type === "select" ? /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+        Select,
+        {
+          value: fieldFilters[filter.key] || "all",
+          onValueChange: (value) => onFieldFilterChange(filter.key, value),
+          children: [
+            filter.icon && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(filter.icon, { className: "size-4 absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground" }),
+            /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(SelectTrigger, { className: cn("h-9 rounded-lg w-full", filter.icon && "pl-9"), children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(SelectValue, { placeholder: filter.placeholder || "Select..." }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(SelectContent, { className: "rounded-lg", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(SelectItem, { value: "all", children: "All" }),
+              filter.options?.map((option) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(SelectItem, { value: option.value, children: option.label }, option.value))
+            ] })
+          ]
+        }
+      ) : /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "relative", children: [
+        filter.icon && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(filter.icon, { className: "size-4 absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground" }),
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+          Input,
+          {
+            type: filter.type,
+            placeholder: filter.placeholder,
+            value: fieldFilters[filter.key] || "",
+            onChange: (e) => onFieldFilterChange(filter.key, e.target.value),
+            className: cn("h-9 rounded-lg", filter.icon && "pl-9")
+          }
+        )
+      ] }) }, String(filter.key)))
+    ] }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "relative", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_lucide_react12.Search, { className: "absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" }),
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+          Input,
+          {
+            placeholder: "Global search...",
+            value: globalFilter,
+            onChange: (e) => onGlobalFilterChange(e.target.value),
+            className: "pl-9 h-9 rounded-lg max-w-max"
+          }
+        )
+      ] }),
+      sortableFields.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(DropdownMenu, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(Button, { variant: "outline", size: "sm", className: "rounded-lg gap-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { children: "Sort" }),
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_lucide_react12.ChevronDown, { className: "h-4 w-4 opacity-50" })
+        ] }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(DropdownMenuContent, { align: "end", className: "w-[200px] rounded-lg", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(DropdownMenuLabel, { children: "Sort By" }),
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(DropdownMenuSeparator, {}),
+          sortableFields.map((field) => /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(DropdownMenuItem, { onClick: () => onSortChange(field.key, "asc"), children: [
+              field.label,
+              " (A-Z)"
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(DropdownMenuItem, { onClick: () => onSortChange(field.key, "desc"), children: [
+              field.label,
+              " (Z-A)"
+            ] })
+          ] }, String(field.key))),
+          hasActiveSorting && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_jsx_runtime22.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(DropdownMenuSeparator, {}),
+            /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(DropdownMenuItem, { onClick: onClearSorting, children: "Clear All Sorting" })
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(DropdownMenu, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Button, { variant: "outline", size: "sm", className: "rounded-lg", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_lucide_react12.Settings2, { className: "h-4 w-4" }) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(DropdownMenuContent, { align: "end", className: "w-[200px] rounded-lg", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(DropdownMenuLabel, { children: "Table Settings" }),
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(DropdownMenuSeparator, {}),
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(DropdownMenuItem, { onClick: onClearSorting, children: "Clear All Sorting" }),
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(DropdownMenuItem, { onClick: onClearFilters, children: "Clear All Filters" })
+        ] })
+      ] }),
+      onExport && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(Button, { variant: "outline", size: "sm", onClick: onExport, className: "rounded-lg", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_lucide_react12.Download, { className: "mr-2 h-4 w-4" }),
+        "Export"
+      ] }),
+      onRefresh && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+        Button,
+        {
+          variant: "outline",
+          size: "sm",
+          onClick: onRefresh,
+          disabled: loading,
+          className: "rounded-lg",
+          children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_lucide_react12.RefreshCw, { className: cn("h-4 w-4", loading && "animate-spin") })
+        }
+      )
+    ] })
+  ] }) }) }) });
+}
+
+// src/components/data/data-template/data-template-pagination.tsx
+var import_lucide_react13 = require("lucide-react");
+var import_jsx_runtime23 = require("react/jsx-runtime");
+function DataTemplatePagination({
+  currentPage,
+  totalPages,
+  pageSize,
+  totalItems,
+  onPageChange,
+  onPageSizeChange,
+  config
+}) {
+  if (!config.enabled) {
+    return null;
+  }
+  const pageSizeOptions = config.pageSizeOptions || [10, 20, 50, 100];
+  const startItem = (currentPage - 1) * pageSize + 1;
+  const endItem = Math.min(currentPage * pageSize, totalItems);
+  const canPreviousPage = currentPage > 1;
+  const canNextPage = currentPage < totalPages;
+  const getPageNumbers = () => {
+    const delta = 2;
+    const range = [];
+    const rangeWithDots = [];
+    for (let i = Math.max(2, currentPage - delta); i <= Math.min(totalPages - 1, currentPage + delta); i++) {
+      range.push(i);
+    }
+    if (currentPage - delta > 2) {
+      rangeWithDots.push(1, "...");
+    } else {
+      rangeWithDots.push(1);
+    }
+    rangeWithDots.push(...range);
+    if (currentPage + delta < totalPages - 1) {
+      rangeWithDots.push("...", totalPages);
+    } else if (totalPages > 1) {
+      rangeWithDots.push(totalPages);
+    }
+    return rangeWithDots;
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "rounded-xl", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex flex-col sm:flex-row items-center justify-between gap-4", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "flex items-center gap-6 text-sm text-muted-foreground", children: config.showInfo !== false && /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("span", { children: [
+      "Showing ",
+      startItem,
+      " to ",
+      endItem,
+      " of ",
+      totalItems,
+      " entries"
+    ] }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex flex-col sm:flex-row items-center gap-4", children: [
+      pageSizeOptions && /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "text-sm font-medium whitespace-nowrap", children: "Page size:" }),
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(Select, { value: `${pageSize}`, onValueChange: (value) => onPageSizeChange(Number(value)), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(SelectTrigger, { className: "h-9 w-[70px] rounded-lg", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(SelectValue, {}) }),
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(SelectContent, { side: "top", className: "rounded-lg", children: pageSizeOptions.map((size) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(SelectItem, { value: `${size}`, children: size }, size)) })
+        ] })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+          Button,
+          {
+            variant: "outline",
+            size: "sm",
+            onClick: () => onPageChange(1),
+            disabled: !canPreviousPage,
+            className: "hidden sm:flex rounded-lg",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react13.ChevronsLeft, { className: "h-4 w-4" }),
+              /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "sr-only", children: "Go to first page" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+          Button,
+          {
+            variant: "outline",
+            size: "sm",
+            onClick: () => onPageChange(currentPage - 1),
+            disabled: !canPreviousPage,
+            className: "rounded-lg",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react13.ChevronLeft, { className: "h-4 w-4 sm:mr-2" }),
+              /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "hidden sm:inline", children: "Previous" }),
+              /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "sr-only sm:hidden", children: "Go to previous page" })
+            ]
+          }
+        ),
+        config.showPageNumbers && totalPages > 1 && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "hidden sm:flex items-center gap-1", children: getPageNumbers().map((pageNumber, index) => {
+          if (pageNumber === "...") {
+            return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "px-2 py-1 text-sm text-muted-foreground", children: "..." }, `dots-${index}`);
+          }
+          const page = pageNumber;
+          return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+            Button,
+            {
+              variant: page === currentPage ? "default" : "outline",
+              size: "sm",
+              className: "w-9 h-9 p-0 rounded-lg",
+              onClick: () => onPageChange(page),
+              children: page
+            },
+            page
+          );
+        }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "sm:hidden flex items-center gap-2 px-3 py-1 text-sm font-medium bg-muted rounded-lg", children: [
+          currentPage,
+          " of ",
+          totalPages
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+          Button,
+          {
+            variant: "outline",
+            size: "sm",
+            onClick: () => onPageChange(currentPage + 1),
+            disabled: !canNextPage,
+            className: "rounded-lg",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "hidden sm:inline", children: "Next" }),
+              /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react13.ChevronRight, { className: "h-4 w-4 sm:ml-2" }),
+              /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "sr-only sm:hidden", children: "Go to next page" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+          Button,
+          {
+            variant: "outline",
+            size: "sm",
+            onClick: () => onPageChange(totalPages),
+            disabled: !canNextPage,
+            className: "hidden sm:flex rounded-lg",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react13.ChevronsRight, { className: "h-4 w-4" }),
+              /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "sr-only", children: "Go to last page" })
+            ]
+          }
+        )
+      ] })
+    ] })
+  ] }) });
+}
+
+// src/components/data/data-template/data-template.tsx
+var import_jsx_runtime24 = require("react/jsx-runtime");
+function DataTemplate({
+  data,
+  template,
+  fields = [],
+  filters = [],
+  pagination = { enabled: false },
+  settings = {},
+  header,
+  footer,
+  className = "",
+  loading = false,
+  error,
+  emptyMessage = "No items found",
+  emptyIcon,
+  onSelectionChange,
+  onExport,
+  onRefresh,
+  onTemplateReady,
+  children
+}) {
+  const {
+    enableSorting = true,
+    enableFiltering = true,
+    enableGlobalSearch = true,
+    enableSelection = false,
+    enableExport = false,
+    toolbar = true,
+    selectionMode = "multiple",
+    gridCols = { default: 3, sm: 1, md: 2, lg: 3, xl: 4, "2xl": 6 },
+    gap = 4,
+    aspectRatio = "auto",
+    minCardWidth = 350,
+    maxCardWidth = 350
+  } = settings;
+  const [globalFilter, setGlobalFilter] = (0, import_react2.useState)("");
+  const [fieldFilters, setFieldFilters] = (0, import_react2.useState)({});
+  const [sortField, setSortField] = (0, import_react2.useState)("");
+  const [sortDirection, setSortDirection] = (0, import_react2.useState)("asc");
+  const [selectedItems, setSelectedItems] = (0, import_react2.useState)(/* @__PURE__ */ new Set());
+  const [currentPage, setCurrentPage] = (0, import_react2.useState)(1);
+  const [pageSize, setPageSize] = (0, import_react2.useState)(pagination.pageSize || 12);
+  const [currentGridCols, setCurrentGridCols] = (0, import_react2.useState)(gridCols.default);
+  const filteredAndSortedData = (0, import_react2.useMemo)(() => {
+    let result = [...data];
+    if (enableGlobalSearch && globalFilter) {
+      const searchableFields = fields.filter((field) => field.searchable !== false);
+      result = result.filter(
+        (item) => searchableFields.some((field) => {
+          const value = item[field.key];
+          return value?.toString().toLowerCase().includes(globalFilter.toLowerCase());
+        })
+      );
+    }
+    if (enableFiltering) {
+      Object.keys(fieldFilters).forEach((key) => {
+        const value = fieldFilters[key];
+        if (value !== void 0 && value !== null && value !== "") {
+          const field = fields.find((f) => f.key === key);
+          if (field) {
+            result = result.filter((item) => {
+              const itemValue = item[key];
+              if (field.type === "boolean") {
+                return itemValue === (value === "true");
+              } else if (field.type === "number") {
+                return itemValue === Number(value);
+              } else {
+                return itemValue?.toString().toLowerCase().includes(String(value).toLowerCase());
+              }
+            });
+          }
+        }
+      });
+    }
+    if (enableSorting && sortField) {
+      const field = fields.find((f) => f.key === sortField);
+      if (field) {
+        result.sort((a, b) => {
+          const aValue = a[sortField];
+          const bValue = b[sortField];
+          if (field.type === "number") {
+            return sortDirection === "asc" ? Number(aValue) - Number(bValue) : Number(bValue) - Number(aValue);
+          } else if (field.type === "date") {
+            const aDate = new Date(aValue);
+            const bDate = new Date(bValue);
+            return sortDirection === "asc" ? aDate.getTime() - bDate.getTime() : bDate.getTime() - aDate.getTime();
+          } else {
+            const aStr = String(aValue).toLowerCase();
+            const bStr = String(bValue).toLowerCase();
+            return sortDirection === "asc" ? aStr.localeCompare(bStr) : bStr.localeCompare(aStr);
+          }
+        });
+      }
+    }
+    return result;
+  }, [
+    data,
+    globalFilter,
+    fieldFilters,
+    sortField,
+    sortDirection,
+    fields,
+    enableGlobalSearch,
+    enableFiltering,
+    enableSorting
+  ]);
+  const paginatedData = (0, import_react2.useMemo)(() => {
+    if (!pagination.enabled) return filteredAndSortedData;
+    const startIndex = (currentPage - 1) * pageSize;
+    const endIndex = startIndex + pageSize;
+    return filteredAndSortedData.slice(startIndex, endIndex);
+  }, [filteredAndSortedData, currentPage, pageSize, pagination.enabled]);
+  const totalPages = Math.ceil(filteredAndSortedData.length / pageSize);
+  const handleToggleSelect = (0, import_react2.useCallback)(
+    (index) => {
+      if (!enableSelection) return;
+      setSelectedItems((prev) => {
+        const newSelection = new Set(prev);
+        if (selectionMode === "single") {
+          newSelection.clear();
+          newSelection.add(index);
+        } else {
+          if (newSelection.has(index)) {
+            newSelection.delete(index);
+          } else {
+            newSelection.add(index);
+          }
+        }
+        return newSelection;
+      });
+    },
+    [enableSelection, selectionMode]
+  );
+  const handleSelectAll = (0, import_react2.useCallback)(() => {
+    if (!enableSelection || selectionMode === "single") return;
+    if (selectedItems.size === filteredAndSortedData.length) {
+      setSelectedItems(/* @__PURE__ */ new Set());
+    } else {
+      setSelectedItems(new Set(filteredAndSortedData.map((_, index) => index)));
+    }
+  }, [enableSelection, selectionMode, selectedItems.size, filteredAndSortedData.length]);
+  const handleFieldFilterChange = (0, import_react2.useCallback)((key, value) => {
+    setFieldFilters((prev) => ({ ...prev, [key]: value }));
+    setCurrentPage(1);
+  }, []);
+  const handleSortChange = (0, import_react2.useCallback)((field, direction) => {
+    setSortField(field);
+    setSortDirection(direction);
+  }, []);
+  const handleClearFilters = (0, import_react2.useCallback)(() => {
+    setGlobalFilter("");
+    setFieldFilters({});
+    setCurrentPage(1);
+  }, []);
+  const handleClearSorting = (0, import_react2.useCallback)(() => {
+    setSortField("");
+    setSortDirection("asc");
+  }, []);
+  const controller = (0, import_react2.useMemo)(
+    () => ({
+      getSelectedItems: () => Array.from(selectedItems).map((index) => filteredAndSortedData[index]),
+      clearSelection: () => setSelectedItems(/* @__PURE__ */ new Set()),
+      selectAll: handleSelectAll,
+      getFilteredData: () => filteredAndSortedData,
+      getTotalCount: () => data.length,
+      getVisibleCount: () => filteredAndSortedData.length,
+      refresh: () => onRefresh?.(),
+      exportData: () => onExport?.(filteredAndSortedData)
+    }),
+    [selectedItems, filteredAndSortedData, data.length, handleSelectAll, onRefresh, onExport]
+  );
+  const controllerRef = (0, import_react2.useRef)(null);
+  controllerRef.current = controller;
+  (0, import_react2.useEffect)(() => {
+    if (onTemplateReady && controllerRef.current) {
+      onTemplateReady(controllerRef.current);
+    }
+  }, []);
+  (0, import_react2.useEffect)(() => {
+    if (enableSelection && onSelectionChange) {
+      const selected = Array.from(selectedItems).map((index) => filteredAndSortedData[index]);
+      onSelectionChange(selected);
+    }
+  }, [selectedItems]);
+  const gridContainerClasses = cn(
+    "w-full",
+    "overflow-hidden",
+    // Prevent any potential overflow issues
+    className
+  );
+  const gridClasses = cn(
+    "grid",
+    `gap-${gap}`,
+    "w-full",
+    // Ensure grid takes full width
+    "mx-auto",
+    // Center the grid if it doesn't take full width
+    "items-start"
+    // Align items to the top
+  );
+  const gridStyle = {
+    // Primary grid definition - choose one of these options:
+    gridTemplateColumns: currentGridCols === 0 ? `repeat(auto-fill, minmax(clamp(${minCardWidth}px, 30%, ${maxCardWidth}px), 1fr))` : `repeat(auto-fill, minmax(clamp(${minCardWidth}px, calc(100%/${currentGridCols} - ${gap * 4}px), ${maxCardWidth}px), 1fr))`,
+    // gridTemplateColumns: `repeat(auto-fill, minmax(clamp(${minCardWidth}px, calc(100%/${Math.min(
+    //   currentGridCols,
+    //   gridCols["2xl"] || 6
+    // )} - ${gap * 4}px), ${maxCardWidth}px))`,
+    // Option 1: Fully fluid grid (recommended)
+    // gridTemplateColumns: `repeat(auto-fill, minmax(clamp(${minCardWidth}px, 30%, ${maxCardWidth}px), 1fr))`,
+    // Option 2: More controlled fluid grid
+    // gridTemplateColumns: `repeat(auto-fit, minmax(clamp(${minCardWidth}px, 25vw, ${maxCardWidth}px), 1fr))`,
+    // Option 3: Fixed maximum columns with fluid width
+    // gridTemplateColumns: `repeat(min(6, auto-fill), minmax(${minCardWidth}px, ${maxCardWidth}px))`,
+    // Additional grid enhancements
+    justifyItems: "center",
+    // Center items horizontally in their grid cells
+    alignItems: "stretch",
+    // Stretch items vertically to fill the grid cell
+    gridAutoRows: "1fr",
+    // Make all rows the same height
+    gridAutoFlow: "dense"
+    // Try to fill holes in the grid
+  };
+  if (error) {
+    return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Card, { className: "w-full", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(CardContent, { className: "flex items-center justify-center py-12", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "text-center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "text-red-500 mb-3 text-2xl", children: "\u26A0\uFE0F" }),
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("p", { className: "text-sm text-muted-foreground mb-4", children: error }),
+      onRefresh && /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(Button, { variant: "outline", size: "sm", onClick: onRefresh, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react14.Loader2, { className: "mr-2 h-4 w-4" }),
+        "Try Again"
+      ] })
+    ] }) }) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: cn("w-full flex gap-2 flex-col h-full", gridContainerClasses), children: [
+    header && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Card, { className: "shadow-sm border-0 bg-gradient-to-r from-background to-muted/20", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(CardContent, { className: "p-6", children: header }) }),
+    toolbar && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+      DataTemplateToolbar,
+      {
+        fields,
+        filters,
+        globalFilter,
+        onGlobalFilterChange: setGlobalFilter,
+        fieldFilters,
+        onFieldFilterChange: handleFieldFilterChange,
+        sortField,
+        sortDirection,
+        onSortChange: handleSortChange,
+        selectedCount: selectedItems.size,
+        totalCount: data.length,
+        visibleCount: filteredAndSortedData.length,
+        onExport: enableExport ? () => onExport?.(filteredAndSortedData) : void 0,
+        onRefresh,
+        loading,
+        onClearFilters: handleClearFilters,
+        onClearSorting: handleClearSorting
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Card, { className: "border-0 overflow-auto shadow-none py-0 p-2 flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(CardContent, { className: "px-0", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "relative", children: [
+      loading && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "absolute inset-0 bg-background/80 backdrop-blur-sm z-50 flex items-center justify-center rounded-lg", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex items-center gap-3 bg-background/90 px-4 py-3 rounded-lg shadow-sm", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react14.Loader2, { className: "size-5 animate-spin text-primary" }),
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "text-sm font-medium text-muted-foreground", children: "Loading..." })
+      ] }) }),
+      paginatedData.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+        "div",
+        {
+          className: cn(gridClasses),
+          style: gridStyle,
+          children: paginatedData.map((item, index) => {
+            const globalIndex = pagination.enabled ? (currentPage - 1) * pageSize + index : index;
+            const isSelected = selectedItems.has(globalIndex);
+            return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+              "div",
+              {
+                className: cn(
+                  "relative h-full w-full flex flex-col",
+                  "transition-all duration-200 overflow-hidden",
+                  "rounded-2xl",
+                  "border border-border/20 hover:border-border/50",
+                  aspectRatio === "square" ? "aspect-square" : "",
+                  aspectRatio === "video" ? "aspect-video" : "",
+                  enableSelection ? "cursor-pointer" : "",
+                  isSelected ? "ring-2 ring-primary" : ""
+                ),
+                onClick: () => enableSelection && handleToggleSelect(globalIndex),
+                children: [
+                  enableSelection && selectionMode === "multiple" && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "absolute top-2 right-2 z-10", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+                    Checkbox,
+                    {
+                      checked: isSelected,
+                      onCheckedChange: () => handleToggleSelect(globalIndex),
+                      className: "bg-background/80 backdrop-blur-sm",
+                      onClick: (e) => e.stopPropagation()
+                    }
+                  ) }),
+                  template(item, index, isSelected, () => handleToggleSelect(globalIndex))
+                ]
+              },
+              globalIndex
+            );
+          })
+        }
+      ) : /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex flex-col items-center justify-center py-12 text-center", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "text-6xl mb-4", children: emptyIcon || "\u{1F4CB}" }),
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("p", { className: "text-lg font-medium text-muted-foreground mb-2", children: emptyMessage }),
+        (globalFilter || Object.values(fieldFilters).some((v) => v)) && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Button, { variant: "outline", onClick: handleClearFilters, children: "Clear Filters" })
+      ] })
+    ] }) }) }),
+    pagination.enabled && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "pb-1", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+      DataTemplatePagination,
+      {
+        currentPage,
+        totalPages,
+        pageSize,
+        totalItems: filteredAndSortedData.length,
+        onPageChange: setCurrentPage,
+        onPageSizeChange: (size) => {
+          setPageSize(size);
+          setCurrentPage(1);
+        },
+        config: pagination
+      }
+    ) }),
+    footer && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "p-2 m-0.5", children: footer }),
+    children && children(controller)
+  ] });
+}
+
+// src/components/data/data-template/data-template-action-bar.tsx
+var import_lucide_react15 = require("lucide-react");
+var import_framer_motion2 = require("framer-motion");
+var React2 = __toESM(require("react"), 1);
+var ReactDOM2 = __toESM(require("react-dom"), 1);
+var import_jsx_runtime25 = require("react/jsx-runtime");
+function DataTemplateActionBar({
+  controller,
+  visible: visibleProp,
+  container: containerProp,
+  children,
+  className,
+  ...props
+}) {
+  const [mounted, setMounted] = React2.useState(false);
+  React2.useLayoutEffect(() => {
+    setMounted(true);
+  }, []);
+  React2.useEffect(() => {
+    function onKeyDown(event) {
+      if (event.key === "Escape" && controller) {
+        controller.clearSelection();
+      }
+    }
+    window.addEventListener("keydown", onKeyDown);
+    return () => window.removeEventListener("keydown", onKeyDown);
+  }, [controller]);
+  const container = containerProp ?? (mounted ? globalThis.document?.body : null);
+  if (!container || !controller) return null;
+  const selectedItems = controller.getSelectedItems();
+  const visible = visibleProp ?? selectedItems.length > 0;
+  return ReactDOM2.createPortal(
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_framer_motion2.AnimatePresence, { children: visible && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+      import_framer_motion2.motion.div,
+      {
+        role: "toolbar",
+        "aria-orientation": "horizontal",
+        initial: { opacity: 0, y: 20 },
+        animate: { opacity: 1, y: 0 },
+        exit: { opacity: 0, y: 20 },
+        transition: { duration: 0.3, ease: "easeInOut" },
+        className: cn(
+          "fixed inset-x-0 bottom-6 z-50 mx-auto flex w-fit flex-wrap items-center justify-center gap-2 rounded-xl border bg-primary/10 backdrop-blur-sm p-3 text-foreground ring-8 ring-primary/5",
+          className
+        ),
+        ...props,
+        children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(TooltipProvider, { children })
+      }
+    ) }),
+    container
+  );
+}
+function DataTemplateActionBarAction({
+  size = "sm",
+  variant = "secondary",
+  tooltip,
+  isPending,
+  disabled,
+  className,
+  children,
+  onClick,
+  ...props
+}) {
+  const trigger = /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+    Button,
+    {
+      variant,
+      size,
+      className: cn(
+        "gap-1.5 rounded-lg border border-secondary bg-secondary/50 hover:bg-secondary/70 transition-all duration-200",
+        size === "icon" ? "size-8" : "h-8 px-3",
+        className
+      ),
+      disabled: disabled || isPending,
+      onClick,
+      ...props,
+      children: isPending ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react15.Loader, { className: "animate-spin" }) : children
+    }
+  );
+  if (!tooltip) return trigger;
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(Tooltip, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(TooltipTrigger, { asChild: true, children: trigger }),
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+      TooltipContent,
+      {
+        sideOffset: 8,
+        className: "rounded-lg border font-semibold text-foreground bg-secondary [&>span]:hidden",
+        children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("p", { children: tooltip })
+      }
+    )
+  ] });
+}
+function DataTemplateActionBarSelection({ controller }) {
+  const onClearSelection = React2.useCallback(() => {
+    if (controller) {
+      controller.clearSelection();
+    }
+  }, [controller]);
+  if (!controller) return null;
+  const selectedItems = controller.getSelectedItems();
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex h-8 items-center rounded-lg border bg-muted/50 pr-1 pl-3", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("span", { className: "whitespace-nowrap text-sm font-medium", children: [
+      selectedItems.length,
+      " selected"
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Separator, { orientation: "vertical", className: "mr-2 ml-3 data-[orientation=vertical]:h-4" }),
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(Tooltip, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Button, { variant: "ghost", size: "icon", className: "size-6 rounded-md", onClick: onClearSelection, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react15.X, { className: "size-3.5" }) }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+        TooltipContent,
+        {
+          sideOffset: 10,
+          className: "flex items-center gap-2 rounded-lg border px-3 py-2 font-semibold text-foreground bg-secondary [&>span]:hidden",
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("p", { children: "Clear selection" }),
+            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("kbd", { className: "select-none rounded border bg-primary/50 px-2 py-1 font-mono font-normal text-[0.7rem] text-foreground shadow-sm", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("abbr", { title: "Escape", className: "no-underline", children: "Esc" }) })
+          ]
+        }
+      )
+    ] })
+  ] });
+}
+
+// src/components/layouts/app-container.tsx
+var import_jsx_runtime26 = require("react/jsx-runtime");
+var spacingClasses = {
+  "none": "gap-0",
+  "tight": "gap-2",
+  "default": "gap-4",
+  "loose": "gap-6",
+  "extra-loose": "gap-8"
+};
+var paddingClasses = {
+  "none": "p-0",
+  "tight": "p-2",
+  "default": "p-4",
+  "loose": "p-6"
+};
+var AppContainer = ({
+  children,
+  className,
+  spacing = "tight",
+  padding = "none"
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: cn(
+    "flex flex-col h-full",
+    spacingClasses[spacing],
+    paddingClasses[padding],
+    className
+  ), children });
+};
+
+// src/components/layouts/app-header.tsx
+var import_lucide_react16 = require("lucide-react");
+var import_jsx_runtime27 = require("react/jsx-runtime");
+var AppHeader = ({
+  className,
+  columns = [],
+  showBackButton = true,
+  meta = { title: "" }
+}) => {
+  const renderBackAction = () => {
+    if (!meta.backAction || !showBackButton) return null;
+    const buttonProps = {
+      variant: "secondary",
+      size: "icon",
+      className: "hover:bg-primary/20 inline-flex"
+    };
+    if (meta.backAction.href) {
+      return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(Button, { ...buttonProps, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_lucide_react16.ArrowLeftIcon, { className: "size-6" }),
+        meta.backAction.content
+      ] });
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(Button, { ...buttonProps, onClick: meta.backAction.onClick, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_lucide_react16.ArrowLeftIcon, { className: "size-6" }),
+      meta.backAction.content
+    ] });
+  };
+  const renderMetadata = () => {
+    if (!meta.metadata || meta.metadata.length === 0) return null;
+    return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "flex gap-4", children: meta.metadata.map((item, index) => item.value && /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "text-sm", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("span", { className: "text-muted-foreground", children: [
+        item.label,
+        " "
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { children: item.value })
+    ] }, index)) });
+  };
+  const renderStatus = () => {
+    if (!meta.status) return null;
+    const colorClasses = {
+      success: "bg-green-100 text-green-800",
+      warning: "bg-yellow-100 text-yellow-800",
+      critical: "bg-red-100 text-red-800",
+      info: "bg-blue-100 text-blue-800",
+      default: "bg-gray-100 text-gray-800"
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: cn(
+      "inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium",
+      colorClasses[meta.status.color]
+    ), children: meta.status.content });
+  };
+  const reservedColumn = {
+    content: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex gap-2 items-center", children: [
+      renderBackAction(),
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex flex-col gap-2 w-max", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("h1", { className: "text-2xl font-bold tracking-tight", children: meta.title }),
+        renderStatus(),
+        meta.description && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("p", { className: "text-muted-foreground", children: meta.description }),
+        renderMetadata(),
+        meta.breadcrumbs && meta.breadcrumbs.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "flex items-center text-sm text-muted-foreground", children: meta.breadcrumbs.map((crumb, index) => /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex items-center", children: [
+          crumb.href ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "hover:text-primary hover:underline", children: crumb.label }) : /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { children: crumb.label }),
+          index < meta.breadcrumbs.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_lucide_react16.ChevronRight, { className: "mx-2 h-4 w-4" })
+        ] }, index)) })
+      ] })
+    ] }),
+    align: "left",
+    width: "fill"
+  };
+  const actionsColumn = {
+    content: meta.primaryActions,
+    align: "right",
+    width: "auto"
+  };
+  const allColumns = [
+    reservedColumn,
+    ...columns.filter((col) => col !== void 0),
+    actionsColumn
+  ];
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: cn("flex items-center w-full gap-4 p-2", className), children: allColumns.map((column, index) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+    "div",
+    {
+      className: cn(
+        "flex items-center h-full",
+        column.className,
+        {
+          "justify-start": column.align === "left",
+          "justify-center": column.align === "center",
+          "justify-end": column.align === "right",
+          "flex-1": column.width === "fill"
+        }
+      ),
+      children: column.content
+    },
+    index
+  )) });
+};
+
+// src/components/layouts/app-content.tsx
+var import_react3 = __toESM(require("react"), 1);
+
+// src/components/ui/sheet.tsx
+var import_radix_ui11 = require("radix-ui");
+var import_lucide_react17 = require("lucide-react");
+var import_jsx_runtime28 = require("react/jsx-runtime");
+function Sheet({ ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_radix_ui11.Dialog.Root, { "data-slot": "sheet", ...props });
+}
+function SheetTrigger({
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_radix_ui11.Dialog.Trigger, { "data-slot": "sheet-trigger", ...props });
+}
+function SheetPortal({
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_radix_ui11.Dialog.Portal, { "data-slot": "sheet-portal", ...props });
+}
+function SheetOverlay({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+    import_radix_ui11.Dialog.Overlay,
+    {
+      "data-slot": "sheet-overlay",
+      className: cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function SheetContent({
+  className,
+  children,
+  side = "right",
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(SheetPortal, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(SheetOverlay, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+      import_radix_ui11.Dialog.Content,
+      {
+        "data-slot": "sheet-content",
+        className: cn(
+          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
+          side === "right" && "data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm",
+          side === "left" && "data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm",
+          side === "top" && "data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b",
+          side === "bottom" && "data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t",
+          className
+        ),
+        ...props,
+        children: [
+          children,
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_radix_ui11.Dialog.Close, { className: "ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_lucide_react17.XIcon, { className: "size-4" }),
+            /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "sr-only", children: "Close" })
+          ] })
+        ]
+      }
+    )
+  ] });
+}
+
+// src/components/layouts/app-content.tsx
+var import_jsx_runtime29 = require("react/jsx-runtime");
+var AppContentContext = (0, import_react3.createContext)(false);
+var splitRatioClasses = {
+  "one-half": ["w-1/2", "w-1/2"],
+  "one-third": ["w-1/3", "w-2/3"],
+  "two-third": ["w-2/3", "w-1/3"],
+  "one-fourth": ["w-1/4", "w-3/4"],
+  "three-fourth": ["w-3/4", "w-1/4"],
+  "one-fifth": ["w-1/5", "w-4/5"],
+  "four-fifth": ["w-4/5", "w-1/5"]
+};
+var paddingClasses2 = {
+  none: "p-0",
+  tight: "p-2",
+  default: "p-4",
+  loose: "p-6"
+};
+var getContainerSheetClasses = (side, width) => {
+  const [contentWidth, sheetWidth] = splitRatioClasses[width];
+  return {
+    container: "inset-y-0 z-50 transition-all duration-500 ease-in-out",
+    content: cn(
+      "h-full bg-background transition-all duration-500 ease-in-out",
+      side === "right" ? "border-l" : "border-r"
+    ),
+    transform: side === "right" ? "translate-x-full" : "-translate-x-full",
+    transformOpen: "translate-x-0",
+    contentPushClass: side === "right" ? contentWidth : sheetWidth,
+    sheetPushClass: side === "right" ? sheetWidth : contentWidth
+  };
+};
+var baseClasses = "flex flex-col overflow-hidden rounded-2xl relative";
+var variantClasses = {
+  default: "bg-background",
+  card: "bg-background shadow-sm border",
+  border: "bg-background border-2",
+  transparent: "bg-transparent"
+};
+var AppContent = (props) => {
+  const {
+    children,
+    className,
+    variant = "default",
+    layout = "full",
+    header,
+    footer,
+    headerClassName,
+    footerClassName,
+    parentContainer = false,
+    padding = parentContainer ? "none" : "tight"
+  } = props;
+  const isNested = (0, import_react3.useContext)(AppContentContext);
+  const [internalSheetOpen, setInternalSheetOpen] = (0, import_react3.useState)(false);
+  const contentWrapper = import_react3.default.useCallback(
+    (content) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: cn(
+      "flex-1 overflow-auto h-full no-scrollbar",
+      parentContainer && "flex",
+      !parentContainer && paddingClasses2[padding]
+    ), children: content }),
+    [padding, parentContainer]
+  );
+  const renderContent = () => {
+    switch (layout) {
+      case "split": {
+        const { splitRatio = "three-fourth", reverse = false } = props;
+        if (!Array.isArray(children) || children.length !== 2) {
+          return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "flex items-center justify-center h-full text-red-500", children: 'Error: AppContent with layout="split" requires exactly 2 children' });
+        }
+        const [leftClass, rightClass] = splitRatioClasses[splitRatio];
+        const [firstChild, secondChild] = reverse ? [children[1], children[0]] : [children[0], children[1]];
+        const [firstClass, secondClass] = reverse ? [rightClass, leftClass] : [leftClass, rightClass];
+        return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex h-full gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: cn(firstClass, "overflow-auto"), children: contentWrapper(firstChild) }),
+          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: cn(secondClass, "overflow-auto"), children: contentWrapper(secondChild) })
+        ] });
+      }
+      case "with-sheet": {
+        const {
+          sheetContent,
+          sheetWidth = "four-fifth",
+          sheetSide = "right",
+          sheetMode = "container",
+          sheetTrigger,
+          sheetClassName,
+          isSheetOpen,
+          onSheetOpenChange,
+          showSheetOverlay = true,
+          disableOverlay = true
+        } = props;
+        const isControlled = isSheetOpen !== void 0;
+        const sheetOpen = isControlled ? isSheetOpen : internalSheetOpen;
+        const setSheetOpen = isControlled ? onSheetOpenChange : setInternalSheetOpen;
+        if (sheetMode === "container") {
+          const sheetClasses = getContainerSheetClasses(sheetSide, sheetWidth);
+          return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: cn(
+            "flex relative flex-1 overflow-hidden",
+            sheetOpen && disableOverlay && ["left", "right"].includes(sheetSide)
+          ), children: [
+            /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: cn(
+              "h-full overflow-auto transition-all duration-500",
+              sheetOpen && disableOverlay && ["left", "right"].includes(sheetSide) ? sheetClasses.contentPushClass : "w-full",
+              sheetOpen && disableOverlay && "overflow-y-auto overflow-x-hidden"
+            ), children: [
+              sheetTrigger && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { onClick: () => setSheetOpen?.(!sheetOpen), children: sheetTrigger }),
+              /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: cn("h-full", !parentContainer && paddingClasses2[padding]), children })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+              "div",
+              {
+                className: cn(
+                  sheetClasses.container,
+                  "transition-all duration-500 ease-in-out",
+                  sheetOpen && disableOverlay && ["left", "right"].includes(sheetSide) ? cn(sheetClasses.sheetPushClass, "overflow-y-auto") : sheetOpen ? sheetClasses.transformOpen : cn(sheetClasses.transform, "hidden"),
+                  "overflow-y-auto"
+                ),
+                children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: cn(sheetClasses.content, sheetClassName, "h-full"), children: sheetContent })
+              }
+            ),
+            sheetOpen && showSheetOverlay && !disableOverlay && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+              "div",
+              {
+                className: cn(
+                  "absolute inset-0 bg-secondary/20 z-40",
+                  "transition-opacity duration-500 ease-in-out",
+                  "opacity-0",
+                  sheetOpen ? "opacity-100" : "opacity-0"
+                ),
+                onClick: () => setSheetOpen?.(false)
+              }
+            )
+          ] });
+        }
+        return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(Sheet, { open: sheetOpen, onOpenChange: setSheetOpen, children: [
+          sheetTrigger && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(SheetTrigger, { asChild: true, children: sheetTrigger }),
+          /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(SheetPortal, { children: [
+            showSheetOverlay && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(SheetOverlay, { className: "fixed inset-0 bg-secondary/50 z-50" }),
+            /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+              SheetContent,
+              {
+                side: sheetSide,
+                className: cn(
+                  "fixed bg-background border",
+                  "transition-all duration-500 ease-in-out",
+                  splitRatioClasses[sheetWidth][1],
+                  sheetClassName
+                ),
+                children: sheetContent
+              }
+            )
+          ] })
+        ] });
+      }
+      default:
+        return contentWrapper(children);
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(AppContentContext.Provider, { value: true, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: cn(
+    baseClasses,
+    variantClasses[variant],
+    paddingClasses2[padding],
+    isNested && "flex-1",
+    parentContainer && "h-full",
+    !parentContainer && "rounded-2xl",
+    className
+  ), children: [
+    header && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+      "div",
+      {
+        className: cn(
+          "border-b",
+          headerClassName,
+          variant === "card" && !parentContainer && "rounded-t-2xl",
+          variant === "border" && "border-b-2",
+          paddingClasses2[padding]
+        ),
+        children: header
+      }
+    ),
+    renderContent(),
+    footer && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+      "div",
+      {
+        className: cn(
+          "border-t",
+          footerClassName,
+          variant === "card" && !parentContainer && "rounded-b-2xl",
+          variant === "border" && "border-t-2",
+          paddingClasses2[padding]
+        ),
+        children: footer
+      }
+    )
+  ] }) });
+};
+
+// src/components/layouts/app-footer.tsx
+var import_jsx_runtime30 = require("react/jsx-runtime");
+var AppFooter = ({
+  className,
+  columns = [],
+  meta = { title: "" }
+}) => {
+  const actionsColumn = {
+    content: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "flex items-center gap-4 p-2", children: meta.secondaryActions }),
+    align: "right",
+    width: "fill"
+  };
+  const allColumns = [
+    ...columns.filter((col) => col !== void 0),
+    actionsColumn
+  ];
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: cn("flex items-center w-full gap-4", className), children: allColumns.map((column, index) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+    "div",
+    {
+      className: cn(
+        "flex items-center h-full",
+        column.className,
+        {
+          "justify-start": column.align === "left",
+          "justify-center": column.align === "center",
+          "justify-end": column.align === "right",
+          "flex-1": column.width === "fill"
+        }
+      ),
+      children: column.content
+    },
+    index
+  )) });
+};
+
+// src/components/layouts/factories.tsx
+var import_jsx_runtime31 = require("react/jsx-runtime");
+function createLayoutComponents({
+  useTypedAppMeta
+}) {
+  const AppHeader2 = (props) => {
+    const { meta } = useTypedAppMeta();
+    return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(AppHeader, { ...props, meta });
+  };
+  const AppFooter2 = (props) => {
+    const { meta } = useTypedAppMeta();
+    return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(AppFooter, { ...props, meta });
+  };
+  const AppContent2 = (props) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(AppContent, { ...props });
+  const AppContainer2 = (props) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(AppContainer, { ...props });
+  return {
+    AppHeader: AppHeader2,
+    AppFooter: AppFooter2,
+    AppContent: AppContent2,
+    AppContainer: AppContainer2
+  };
+}
+
+// src/context/app-meta/context.tsx
+var import_react4 = require("react");
+var import_jsx_runtime32 = require("react/jsx-runtime");
+var AppMetaContext = (0, import_react4.createContext)(void 0);
+var AppMetaProvider = ({ children }) => {
+  const [meta, setMetaState] = (0, import_react4.useState)({
+    title: "",
+    description: "",
+    breadcrumbs: []
+  });
+  const setMeta = (0, import_react4.useCallback)((partialMeta) => {
+    setMetaState((prev) => ({ ...prev, ...partialMeta }));
+  }, []);
+  const resetMeta = (0, import_react4.useCallback)(() => {
+    setMetaState({
+      title: "",
+      description: "",
+      breadcrumbs: []
+    });
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(AppMetaContext.Provider, { value: { meta, setMeta, resetMeta }, children });
+};
+function createTypedAppMetaContext() {
+  const TypedAppMetaContext = (0, import_react4.createContext)(void 0);
+  const TypedAppMetaProvider = ({ children }) => {
+    const [meta, setMetaState] = (0, import_react4.useState)({
+      title: "",
+      description: "",
+      breadcrumbs: []
+    });
+    const setMeta = (0, import_react4.useCallback)((partialMeta) => {
+      setMetaState((prev) => ({ ...prev, ...partialMeta }));
+    }, []);
+    const resetMeta = (0, import_react4.useCallback)(() => {
+      setMetaState({
+        title: "",
+        description: "",
+        breadcrumbs: []
+      });
+    }, []);
+    return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(TypedAppMetaContext.Provider, { value: { meta, setMeta, resetMeta }, children });
+  };
+  const useTypedAppMeta = () => {
+    const context = (0, import_react4.useContext)(TypedAppMetaContext);
+    if (!context) {
+      throw new Error("useTypedAppMeta must be used within a TypedAppMetaProvider");
+    }
+    return context;
+  };
+  return { TypedAppMetaProvider, useTypedAppMeta, TypedAppMetaContext };
+}
+
+// src/context/app-meta/hooks.ts
+var import_react5 = require("react");
+function createPageTemplateHook({
+  useTypedAppMeta
+}) {
+  function usePageTemplate(options) {
+    const { setMeta, resetMeta } = useTypedAppMeta();
+    const memoizedOptions = (0, import_react5.useMemo)(() => options, [
+      options.title,
+      options.description,
+      options.breadcrumbs,
+      options.primaryActions,
+      options.secondaryActions,
+      options.backAction,
+      options.pagination,
+      options.metadata,
+      options.status
+    ]);
+    (0, import_react5.useEffect)(() => {
+      setMeta(memoizedOptions);
+      return () => resetMeta();
+    }, [memoizedOptions, setMeta, resetMeta]);
+  }
+  return { usePageTemplate };
+}
+
+// src/components/general.tsx
+var import_react6 = require("react");
+var import_lucide_react18 = require("lucide-react");
+var import_jsx_runtime33 = require("react/jsx-runtime");
+var GeneralHelper = class {
+  static currencyFormatter = new Intl.NumberFormat("en-IN", {
+    style: "currency",
+    currency: "INR",
+    maximumFractionDigits: 2
+  });
+  static compactFormatter = new Intl.NumberFormat("en-IN", {
+    style: "currency",
+    currency: "INR",
+    notation: "compact",
+    maximumFractionDigits: 1
+  });
+  static MONTH_NAMES_SHORT = [
+    "Jan",
+    "Feb",
+    "Mar",
+    "Apr",
+    "May",
+    "Jun",
+    "Jul",
+    "Aug",
+    "Sep",
+    "Oct",
+    "Nov",
+    "Dec"
+  ];
+  /**
+   * Copies text to clipboard
+   * @param text Text to copy
+   * @returns Promise that resolves when copy is complete
+   */
+  static async copyToClipboard(text) {
+    if (!text) return;
+    try {
+      await navigator.clipboard.writeText(text);
+    } catch (error) {
+      console.error("Failed to copy text:", error);
+      throw error;
+    }
+  }
+  /**
+   * React component for copy to clipboard functionality
+   */
+  static CopyToClipboard = ({
+    text,
+    children,
+    className,
+    size = "icon",
+    variant = "ghost"
+  }) => {
+    const [isCopied, setIsCopied] = (0, import_react6.useState)(false);
+    const [isLoading, setIsLoading] = (0, import_react6.useState)(false);
+    const handleCopy = async () => {
+      if (!text || isLoading) return;
+      setIsLoading(true);
+      try {
+        await this.copyToClipboard(text);
+        setIsCopied(true);
+        setTimeout(() => setIsCopied(false), 2e3);
+      } catch (error) {
+        console.error("Failed to copy text:", error);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(Tooltip, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+        Button,
+        {
+          variant,
+          size,
+          className: cn(
+            size === "icon" && "size-6",
+            className
+          ),
+          onClick: handleCopy,
+          disabled: isLoading || !text,
+          children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_lucide_react18.Loader2Icon, { className: "animate-spin" }) : isCopied ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_lucide_react18.Check, { className: "h-3 w-3" }) : children ? children : /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_lucide_react18.Copy, { className: "h-3 w-3" })
+        }
+      ) }),
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(TooltipContent, { children: isCopied ? "Copied!" : isLoading ? "Copying..." : "Copy to clipboard" })
+    ] });
+  };
+  /**
+   * Formats a number as Indian Rupees (INR)
+   * @param amount Amount to format
+   * @param options Formatting options
+   * @returns Formatted currency string
+   */
+  static formatINR(amount, options = {}) {
+    const { prefix = "", suffix = "", withSymbol = true, compact = false } = options;
+    if (typeof amount !== "number" || isNaN(amount)) {
+      return `${prefix}${withSymbol ? "\u20B9 " : ""}0.00${suffix}`;
+    }
+    const isNegative = amount < 0;
+    const absoluteAmount = Math.abs(amount);
+    const formatter = compact && absoluteAmount >= 1e5 ? this.compactFormatter : this.currencyFormatter;
+    const formatted = formatter.format(absoluteAmount).replace("\u20B9", "");
+    return `${prefix}${isNegative ? "- " : ""}${withSymbol ? "\u20B9 " : ""}${formatted}${suffix}`;
+  }
+  /**
+   * Formats a date according to specified options
+   * @param input Date input (string, number, or Date object)
+   * @param options Formatting options
+   * @returns Formatted date string
+   */
+  static formatDate(input, options = {}) {
+    const { format = "dd-mm-yyyy", separator = "-" } = options;
+    const dateObj = new Date(input);
+    if (isNaN(dateObj.getTime())) return "";
+    const dd = String(dateObj.getDate()).padStart(2, "0");
+    const mm = String(dateObj.getMonth() + 1).padStart(2, "0");
+    const mmm = this.MONTH_NAMES_SHORT[dateObj.getMonth()];
+    const yyyy = dateObj.getFullYear();
+    switch (format) {
+      case "dd-mmm-yyyy":
+        return `${dd}${separator}${mmm}${separator}${yyyy}`;
+      case "iso":
+        return dateObj.toISOString().split("T")[0];
+      case "long":
+        return dateObj.toLocaleDateString("en-IN", {
+          year: "numeric",
+          month: "long",
+          day: "numeric"
+        });
+      case "short":
+        return dateObj.toLocaleDateString("en-IN");
+      default:
+        return `${dd}${separator}${mm}${separator}${yyyy}`;
+    }
+  }
+  static toProperCase(text) {
+    if (!text) return "";
+    return text.toLowerCase().split(" ").map((word) => word.charAt(0).toUpperCase() + word.slice(1)).join(" ");
+  }
+  /**
+   * Advanced proper case conversion that handles hyphenated words and apostrophes
+   * @param text Text to convert
+   * @returns Text in proper case with special handling
+   */
+  static toProperCaseAdvanced(text) {
+    if (!text) return "";
+    return text.toLowerCase().split(/(\s+|['-])/).map((part, index, array) => {
+      if (["-", "'", " "].includes(part) || index > 0 && ["-", "'"].includes(array[index - 1])) {
+        return part;
+      }
+      return part.charAt(0).toUpperCase() + part.slice(1);
+    }).join("");
+  }
+  static StatusBadge = ({
+    status,
+    className,
+    showDot = true,
+    capitalize = true,
+    size = "md",
+    variant = "outline",
+    customColors,
+    icon,
+    trueMessage = "active",
+    falseMessage = "inactive"
+  }) => {
+    const normalizedStatus = typeof status === "boolean" ? status ? trueMessage : falseMessage : typeof status === "number" ? status > 0 ? trueMessage : falseMessage : status.toLowerCase();
+    const statusConfig = {
+      active: {
+        label: "active",
+        solid: {
+          bg: "bg-emerald-500",
+          text: "text-white",
+          border: "border-emerald-600",
+          dot: "bg-white"
+        },
+        outline: {
+          bg: "bg-emerald-50",
+          text: "text-emerald-700",
+          border: "border-emerald-100",
+          dot: "bg-emerald-500"
+        },
+        subtle: {
+          bg: "bg-emerald-50",
+          text: "text-emerald-700",
+          border: "border-transparent",
+          dot: "bg-emerald-500"
+        }
+      },
+      pending: {
+        label: "pending",
+        solid: {
+          bg: "bg-amber-500",
+          text: "text-white",
+          border: "border-amber-600",
+          dot: "bg-white"
+        },
+        outline: {
+          bg: "bg-amber-50",
+          text: "text-amber-700",
+          border: "border-amber-100",
+          dot: "bg-amber-500"
+        },
+        subtle: {
+          bg: "bg-amber-50",
+          text: "text-amber-700",
+          border: "border-transparent",
+          dot: "bg-amber-500"
+        }
+      },
+      inactive: {
+        label: "inactive",
+        solid: {
+          bg: "bg-rose-500",
+          text: "text-white",
+          border: "border-rose-600",
+          dot: "bg-white"
+        },
+        outline: {
+          bg: "bg-rose-50",
+          text: "text-rose-700",
+          border: "border-rose-100",
+          dot: "bg-rose-500"
+        },
+        subtle: {
+          bg: "bg-rose-50",
+          text: "text-rose-700",
+          border: "border-transparent",
+          dot: "bg-rose-500"
+        }
+      },
+      draft: {
+        label: "draft",
+        solid: {
+          bg: "bg-gray-500",
+          text: "text-white",
+          border: "border-gray-600",
+          dot: "bg-white"
+        },
+        outline: {
+          bg: "bg-gray-50",
+          text: "text-gray-700",
+          border: "border-gray-100",
+          dot: "bg-gray-500"
+        },
+        subtle: {
+          bg: "bg-gray-50",
+          text: "text-gray-700",
+          border: "border-transparent",
+          dot: "bg-gray-500"
+        }
+      },
+      completed: {
+        label: "completed",
+        solid: {
+          bg: "bg-indigo-500",
+          text: "text-white",
+          border: "border-indigo-600",
+          dot: "bg-white"
+        },
+        outline: {
+          bg: "bg-indigo-50",
+          text: "text-indigo-700",
+          border: "border-indigo-100",
+          dot: "bg-indigo-500"
+        },
+        subtle: {
+          bg: "bg-indigo-50",
+          text: "text-indigo-700",
+          border: "border-transparent",
+          dot: "bg-indigo-500"
+        }
+      }
+    };
+    const config = statusConfig[normalizedStatus.toLowerCase()] || statusConfig.inactive;
+    const colors = customColors || config[variant];
+    const sizeClasses = {
+      sm: "text-xs px-2 py-0.5",
+      md: "text-xs px-2.5 py-0.5",
+      lg: "text-sm px-3 py-1"
+    };
+    const displayText = capitalize ? normalizedStatus.charAt(0).toUpperCase() + normalizedStatus.slice(1) : normalizedStatus;
+    return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "flex justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
+      "span",
+      {
+        className: cn(
+          "inline-flex items-center gap-1.5 rounded-full border font-medium",
+          colors.bg,
+          colors.text,
+          colors.border,
+          sizeClasses[size],
+          className
+        ),
+        children: [
+          showDot && (icon ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "flex items-center", children: icon }) : /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+            "span",
+            {
+              className: cn("size-2 rounded-full", colors.dot),
+              "aria-hidden": "true"
+            }
+          )),
+          displayText
+        ]
+      }
+    ) });
+  };
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  AppMetaProvider,
+  DataTable,
+  DataTableActionBar,
+  DataTableActionBarAction,
+  DataTableActionBarSelection,
+  DataTemplate,
+  DataTemplateActionBar,
+  DataTemplateActionBarAction,
+  DataTemplateActionBarSelection,
+  GeneralHelper,
+  createLayoutComponents,
+  createPageTemplateHook,
+  createTypedAppMetaContext
+});
+//# sourceMappingURL=index.cjs.map