@nextlyhq/ui 0.0.2-alpha.34 → 0.0.2-alpha.35

package/dist/index.cjs

@@ -73,13 +73,13 @@ var buttonVariants = classVarianceAuthority.cva(
         link: "text-primary border border-transparent underline-offset-4 hover:underline"
       },
       size: {
-        default: "h-[var(--control-height)] px-6 py-2",
-        sm: "h-[var(--control-height-md)] px-4 text-[13px]",
-        md: "h-[var(--control-height)] px-6 text-sm",
-        lg: "h-[var(--control-height-lg)] px-8 text-base",
-        icon: "h-[var(--control-height)] w-[var(--control-height)] p-0",
-        "icon-sm": "h-[var(--control-height-md)] w-[var(--control-height-md)] p-0",
-        "icon-lg": "h-[var(--control-height-lg)] w-[var(--control-height-lg)] p-0"
+        default: "h-[var(--nx-control-height)] px-6 py-2",
+        sm: "h-[var(--nx-control-height-md)] px-4 text-[13px]",
+        md: "h-[var(--nx-control-height)] px-6 text-sm",
+        lg: "h-[var(--nx-control-height-lg)] px-8 text-base",
+        icon: "h-[var(--nx-control-height)] w-[var(--nx-control-height)] p-0",
+        "icon-sm": "h-[var(--nx-control-height-md)] w-[var(--nx-control-height-md)] p-0",
+        "icon-lg": "h-[var(--nx-control-height-lg)] w-[var(--nx-control-height-lg)] p-0"
       }
     },
     defaultVariants: {
@@ -120,9 +120,9 @@ var inputVariants = classVarianceAuthority.cva(
   {
     variants: {
       size: {
-        sm: "h-[var(--control-height-sm)] px-2.5 py-2 text-sm",
-        default: "h-[var(--control-height)] px-3 py-2.5 text-sm",
-        lg: "h-[var(--control-height-lg)] px-4 py-3 text-base"
+        sm: "h-[var(--nx-control-height-sm)] px-2.5 py-2 text-sm",
+        default: "h-[var(--nx-control-height)] px-3 py-2.5 text-sm",
+        lg: "h-[var(--nx-control-height-lg)] px-4 py-3 text-base"
       }
     },
     defaultVariants: {
@@ -174,22 +174,41 @@ function Label({ className, ...props }) {
     }
   );
 }
+var PortalContext = React6.createContext({ container: null });
+function PortalProvider({ container, children }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(PortalContext.Provider, { value: { container }, children });
+}
+function usePortalContainer() {
+  const { container } = React6.useContext(PortalContext);
+  return container ?? void 0;
+}
 var TooltipProvider = reactTooltip.Provider;
 var Tooltip = reactTooltip.Root;
 var TooltipTrigger = reactTooltip.Trigger;
-var TooltipContent = React6.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
-  reactTooltip.Content,
-  {
-    ref,
-    sideOffset,
-    "data-slot": "tooltip-content",
-    className: cn(
-      "z-50 overflow-hidden rounded-none px-3 py-1.5 text-xs shadow-lg  border border-border bg-popover text-popover-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",
-      className
-    ),
-    ...props
-  }
-));
+var TooltipContent = React6.forwardRef(({ className, sideOffset = 4, ...props }, ref) => {
+  const portalContainer = usePortalContainer();
+  return (
+    // Portalled for the same reason as every other overlay here, plus one
+    // specific to the tooltip: the positioner measures against the nearest
+    // containing block, and it counts `container-type` as one while the
+    // browser does not. Left inline under a `@container` element, the content
+    // is offset by that element's own position. Portalling lifts it out of any
+    // such ancestor, so the two agree again.
+    /* @__PURE__ */ jsxRuntime.jsx(reactTooltip.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
+      reactTooltip.Content,
+      {
+        ref,
+        sideOffset,
+        "data-slot": "tooltip-content",
+        className: cn(
+          "z-50 overflow-hidden rounded-none px-3 py-1.5 text-xs shadow-lg  border border-border bg-popover text-popover-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",
+          className
+        ),
+        ...props
+      }
+    ) })
+  );
+});
 TooltipContent.displayName = reactTooltip.Content.displayName;
 var FormLabelWithTooltip = React6__namespace.forwardRef(
   ({
@@ -244,9 +263,9 @@ var badgeVariants = classVarianceAuthority.cva(
         // which was nearly invisible on dark backgrounds).
         default: "bg-muted text-foreground",
         primary: "bg-primary/10 text-primary dark:bg-primary/20",
-        success: "bg-green-100 text-green-700 dark:bg-green-900 dark:text-green-100",
-        warning: "bg-amber-100 text-amber-700 dark:bg-amber-900 dark:text-amber-100",
-        destructive: "bg-red-100 text-red-700 dark:bg-red-900 dark:text-red-100",
+        success: "bg-success-100 text-success-700 dark:bg-success-900 dark:text-success-100",
+        warning: "bg-warning-100 text-warning-700 dark:bg-warning-900 dark:text-warning-100",
+        destructive: "bg-destructive-100 text-destructive-700 dark:bg-destructive-900 dark:text-destructive-100",
         outline: "border border-border! bg-transparent text-foreground dark:text-muted-foreground dark:border-border!"
       }
     },
@@ -391,9 +410,9 @@ var alertVariants = classVarianceAuthority.cva(
     variants: {
       variant: {
         info: "border-border bg-primary/5 text-primary dark:border-primary/30 dark:bg-primary/5 dark:text-primary-foreground/90",
-        success: "border-green-200 bg-green-50 text-green-900 border-l-4 border-l-success dark:border-green-900 dark:bg-green-950 dark:text-green-100",
-        warning: "border-amber-200 bg-amber-50 text-amber-900 border-l-4 border-l-warning dark:border-amber-900 dark:bg-amber-950 dark:text-amber-100",
-        destructive: "border-red-200 bg-red-50 text-red-900 border-l-4 border-l-destructive dark:border-red-900 dark:bg-red-950 dark:text-red-100"
+        success: "border-success-200 bg-success-50 text-success-900 border-l-4 border-l-success dark:border-success-900 dark:bg-success-950 dark:text-success-100",
+        warning: "border-warning-200 bg-warning-50 text-warning-900 border-l-4 border-l-warning dark:border-warning-900 dark:bg-warning-950 dark:text-warning-100",
+        destructive: "border-destructive-200 bg-destructive-50 text-destructive-900 border-l-4 border-l-destructive dark:border-destructive-900 dark:bg-destructive-950 dark:text-destructive-100"
       }
     },
     defaultVariants: {
@@ -489,7 +508,7 @@ var progressVariants = classVarianceAuthority.cva("h-full rounded-none transitio
   variants: {
     variant: {
       default: "bg-primary-500",
-      success: "bg-green-500",
+      success: "bg-success-500",
       error: "bg-destructive"
     }
   },
@@ -543,11 +562,22 @@ var Checkbox = React6.forwardRef(({ className, indeterminate, ...props }, ref) =
     ref,
     "data-slot": "checkbox",
     className: cn(
-      // Unchecked outline uses primary/40 (clearly visible, monochrome) instead of
-      // primary/5, which rendered at ~5% opacity and was effectively invisible.
+      // Unchecked outline uses primary/50: measured 3.95:1 on the light row and
+      // 5.32:1 on the dark one. WCAG 1.4.11 asks 3:1 of a control's boundary and
+      // the earlier values did not reach it — primary/40 came out at 2.85, close
+      // enough to look deliberate and still short. Callers must not override the
+      // border: passing `border-border` puts the divider token here, which
+      // measured 1.35:1 and 1.14:1, and a divider is meant to go unnoticed.
       // Checked and indeterminate share the filled appearance; declaring both
       // here keeps the control self-sufficient without host overrides.
-      "peer h-4 w-4 shrink-0 rounded-none border border-primary/40 ring-offset-background focus:border-primary! focus-visible:border-primary! focus:outline-none focus-visible:outline-none aria-invalid:border-destructive aria-invalid:focus:border-destructive! aria-invalid:focus-visible:border-destructive! disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[state=checked]:border-primary data-[state=indeterminate]:bg-primary data-[state=indeterminate]:text-primary-foreground data-[state=indeterminate]:border-primary transition-all duration-200",
+      //
+      // The box stays 16px and the target does not: `before` stretches an
+      // invisible 24px square from the centre, which is WCAG 2.5.8's floor.
+      // The exemption for a bare browser checkbox does not cover a styled one,
+      // and this is styled. Growing the box instead would make every dense
+      // table heavier for a rule about pointers, so the box and the thing you
+      // can hit are allowed to differ.
+      "peer relative h-4 w-4 shrink-0 rounded-none border border-primary/50 ring-offset-background before:absolute before:left-1/2 before:top-1/2 before:h-6 before:w-6 before:-translate-x-1/2 before:-translate-y-1/2 before:content-[''] focus:border-primary! focus-visible:border-primary! focus:outline-none focus-visible:outline-none aria-invalid:border-destructive aria-invalid:focus:border-destructive! aria-invalid:focus-visible:border-destructive! disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[state=checked]:border-primary data-[state=indeterminate]:bg-primary data-[state=indeterminate]:text-primary-foreground data-[state=indeterminate]:border-primary transition-all duration-200",
       className
     ),
     ...props,
@@ -788,14 +818,6 @@ var TabsContent = React6.forwardRef(
   )
 );
 TabsContent.displayName = reactTabs.Content.displayName;
-var PortalContext = React6.createContext({ container: null });
-function PortalProvider({ container, children }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(PortalContext.Provider, { value: { container }, children });
-}
-function usePortalContainer() {
-  const { container } = React6.useContext(PortalContext);
-  return container ?? void 0;
-}
 var Popover = PopoverPrimitive__namespace.Root;
 var PopoverTrigger = PopoverPrimitive__namespace.Trigger;
 var PopoverAnchor = PopoverPrimitive__namespace.Anchor;
@@ -1043,12 +1065,14 @@ var DropdownMenuGroup = DropdownMenuPrimitive__namespace.Group;
 var DropdownMenuPortal = DropdownMenuPrimitive__namespace.Portal;
 var DropdownMenuSub = DropdownMenuPrimitive__namespace.Sub;
 var DropdownMenuRadioGroup = DropdownMenuPrimitive__namespace.RadioGroup;
+var menuItemBase = "cursor-pointer transition-colors data-[highlighted]:bg-muted data-[highlighted]:text-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50";
 var DropdownMenuSubTrigger = React6__namespace.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
   DropdownMenuPrimitive__namespace.SubTrigger,
   {
     ref,
     className: cn(
-      "flex cursor-default select-none items-center gap-2 rounded-none px-2 py-1.5 text-sm outline-none hover-unified focus:bg-primary/5 focus:text-primary data-[state=open]:bg-primary/5 data-[state=open]:text-primary [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+      "flex select-none items-center gap-2 rounded-none px-2 py-1.5 text-sm outline-none data-[state=open]:bg-muted data-[state=open]:text-foreground [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+      menuItemBase,
       inset && "pl-8",
       className
     ),
@@ -1093,7 +1117,8 @@ var DropdownMenuItem = React6__namespace.forwardRef(({ className, inset, ...prop
   {
     ref,
     className: cn(
-      "relative flex cursor-pointer select-none items-center gap-2 rounded-none px-2 py-1.5 text-sm outline-none transition-colors hover-unified focus:bg-primary/5 focus:text-primary data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+      "relative flex select-none items-center gap-2 rounded-none px-2 py-1.5 text-sm outline-none [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+      menuItemBase,
       inset && "pl-8",
       className
     ),
@@ -1106,7 +1131,8 @@ var DropdownMenuCheckboxItem = React6__namespace.forwardRef(({ className, childr
   {
     ref,
     className: cn(
-      "relative flex cursor-default select-none items-center rounded-none py-1.5 pl-8 pr-2 text-sm outline-none transition-colors hover-primary-light focus:bg-primary/5 focus:text-primary data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex select-none items-center rounded-none py-1.5 pl-8 pr-2 text-sm outline-none",
+      menuItemBase,
       className
     ),
     checked,
@@ -1123,7 +1149,8 @@ var DropdownMenuRadioItem = React6__namespace.forwardRef(({ className, children,
   {
     ref,
     className: cn(
-      "relative flex cursor-default select-none items-center rounded-none py-1.5 pl-8 pr-2 text-sm outline-none transition-colors hover-primary-light focus:bg-primary/5 focus:text-primary data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex select-none items-center rounded-none py-1.5 pl-8 pr-2 text-sm outline-none",
+      menuItemBase,
       className
     ),
     ...props,
@@ -1185,9 +1212,9 @@ var selectTriggerVariants = classVarianceAuthority.cva(
   {
     variants: {
       size: {
-        sm: "h-[var(--control-height-sm)] text-sm",
-        default: "h-[var(--control-height)] text-sm",
-        lg: "h-[var(--control-height-lg)] text-base"
+        sm: "h-[var(--nx-control-height-sm)] text-sm",
+        default: "h-[var(--nx-control-height)] text-sm",
+        lg: "h-[var(--nx-control-height-lg)] text-base"
       }
     },
     defaultVariants: {
@@ -1670,9 +1697,9 @@ function Toaster({ theme = "system", ...props }) {
         loading: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "h-4 w-4 animate-spin" })
       },
       style: {
-        "--normal-bg": "var(--popover)",
-        "--normal-text": "var(--popover-foreground)",
-        "--normal-border": "var(--border)",
+        "--normal-bg": "var(--nx-popover)",
+        "--normal-text": "var(--nx-popover-foreground)",
+        "--normal-border": "var(--nx-border)",
         "--border-radius": "0px"
       },
       ...props
@@ -1820,213 +1847,6 @@ function TableEmpty({ message = "No records found" }) {
     /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium", children: message })
   ] });
 }
-function renderPageNumbers(currentPage, totalPages, maxVisiblePages, onPageChange) {
-  const getBtnClass = (active) => `flex h-8 w-8 items-center justify-center  border-y border-border  border-r border-border text-xs z-10 -ml-px transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring ${active ? "bg-primary! text-primary-foreground! border-primary! z-20" : "bg-background! border-border! hover-muted disabled:opacity-50"}`;
-  if (totalPages <= maxVisiblePages) {
-    return Array.from({ length: totalPages }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsx(
-      "button",
-      {
-        onClick: () => onPageChange(i),
-        "aria-label": `Go to page ${i + 1}`,
-        "aria-current": currentPage === i ? "page" : void 0,
-        className: getBtnClass(currentPage === i),
-        children: i + 1
-      },
-      `page-${i}`
-    ));
-  }
-  const pages = [];
-  const startPage = Math.max(0, currentPage - Math.floor(maxVisiblePages / 2));
-  const endPage = Math.min(totalPages - 1, startPage + maxVisiblePages - 1);
-  if (startPage > 0) {
-    pages.push(
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "button",
-        {
-          onClick: () => onPageChange(0),
-          "aria-label": "Go to page 1",
-          className: getBtnClass(currentPage === 0),
-          children: "1"
-        },
-        "page-0"
-      )
-    );
-    if (startPage > 1) {
-      pages.push(
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "span",
-          {
-            className: "flex h-8 w-8 items-center justify-center  border-y border-border  border-r border-border border-border! bg-background! text-muted-foreground text-xs -ml-px",
-            "aria-hidden": "true",
-            children: "..."
-          },
-          "ellipsis-start"
-        )
-      );
-    }
-  }
-  for (let i = startPage; i <= endPage; i++) {
-    pages.push(
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "button",
-        {
-          onClick: () => onPageChange(i),
-          "aria-label": `Go to page ${i + 1}`,
-          "aria-current": currentPage === i ? "page" : void 0,
-          className: getBtnClass(currentPage === i),
-          children: i + 1
-        },
-        i
-      )
-    );
-  }
-  if (endPage < totalPages - 1) {
-    if (endPage < totalPages - 2) {
-      pages.push(
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "span",
-          {
-            className: "flex h-8 w-8 items-center justify-center  border-y border-border  border-r border-border border-border! bg-background! text-muted-foreground text-xs -ml-px",
-            "aria-hidden": "true",
-            children: "..."
-          },
-          "ellipsis-end"
-        )
-      );
-    }
-    pages.push(
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "button",
-        {
-          onClick: () => onPageChange(totalPages - 1),
-          "aria-label": `Go to page ${totalPages}`,
-          className: getBtnClass(currentPage === totalPages - 1),
-          children: totalPages
-        },
-        totalPages - 1
-      )
-    );
-  }
-  return pages;
-}
-function TablePagination({
-  meta,
-  onPageChange,
-  onPageSizeChange,
-  config,
-  isLoading = false
-}) {
-  const {
-    showPageSizeSelector = true,
-    pageSizeOptions = [10, 20, 30, 50],
-    maxVisiblePages = 5
-  } = config || {};
-  const pageIndex = meta.page - 1;
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col sm:flex-row w-full items-center justify-between gap-4 text-xs sm:text-sm text-muted-foreground p-4 border-t border-border", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "whitespace-nowrap order-2 sm:order-1", children: [
-      "Showing ",
-      (meta.page - 1) * meta.limit + 1,
-      "-",
-      Math.min(meta.page * meta.limit, meta.total),
-      " of ",
-      meta.total,
-      " entries"
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center justify-center gap-4 sm:gap-6 lg:gap-8 order-1 sm:order-2", children: [
-      showPageSizeSelector && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center space-x-2", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "whitespace-nowrap hidden sm:inline-block", children: "Rows per page" }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "select",
-            {
-              id: "pageSize",
-              value: meta.limit,
-              onChange: (e) => {
-                const newPageSize = Number(e.target.value);
-                onPageSizeChange(newPageSize);
-              },
-              className: "h-8 w-[70px] appearance-none rounded-none  border border-border bg-background px-2 py-1 text-sm font-medium focus-visible:outline-none focus:ring-1 focus:ring-ring disabled:opacity-50 hover-muted cursor-pointer",
-              disabled: isLoading,
-              children: pageSizeOptions.map((size) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: size, children: size }, size))
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-muted-foreground", children: /* @__PURE__ */ jsxRuntime.jsx(
-            "svg",
-            {
-              className: "h-3 w-3",
-              fill: "none",
-              viewBox: "0 0 24 24",
-              stroke: "currentColor",
-              children: /* @__PURE__ */ jsxRuntime.jsx(
-                "path",
-                {
-                  strokeLinecap: "round",
-                  strokeLinejoin: "round",
-                  strokeWidth: 2,
-                  d: "M19 9l-7 7-7-7"
-                }
-              )
-            }
-          ) })
-        ] })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center -space-x-px", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "button",
-          {
-            onClick: () => onPageChange(0),
-            disabled: pageIndex === 0 || isLoading,
-            className: "hidden sm:flex h-8 w-8 items-center justify-center rounded-none  border border-border bg-background hover-muted disabled:opacity-50 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring z-10",
-            "aria-label": "First page",
-            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronsLeft, { className: "h-4 w-4" })
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "button",
-          {
-            onClick: () => onPageChange(pageIndex - 1),
-            disabled: pageIndex === 0 || isLoading,
-            className: "flex h-8 w-8 items-center justify-center rounded-none sm:rounded-none  border border-border bg-background hover-muted disabled:opacity-50 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring z-10",
-            "aria-label": "Previous page",
-            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronLeft, { className: "h-4 w-4" })
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex", children: renderPageNumbers(
-          pageIndex,
-          meta.totalPages,
-          maxVisiblePages,
-          onPageChange
-        ) }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "button",
-          {
-            onClick: () => onPageChange(pageIndex + 1),
-            disabled: pageIndex >= meta.totalPages - 1 || isLoading,
-            className: "flex h-8 w-8 items-center justify-center rounded-none sm:rounded-none  border-y border-border  border-x border-border sm:border-r border-border bg-background hover-muted disabled:opacity-50 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring z-10",
-            "aria-label": "Next page",
-            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { className: "h-4 w-4" })
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "button",
-          {
-            onClick: () => onPageChange(meta.totalPages - 1),
-            disabled: pageIndex >= meta.totalPages - 1 || isLoading,
-            className: "hidden sm:flex h-8 w-8 items-center justify-center rounded-none  border border-border bg-background hover-muted disabled:opacity-50 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring z-10",
-            "aria-label": "Last page",
-            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronsRight, { className: "h-4 w-4" })
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "whitespace-nowrap hidden sm:block", children: [
-        "Page ",
-        meta.page,
-        " of ",
-        meta.totalPages
-      ] })
-    ] })
-  ] });
-}
 var GrayBar = ({ className }) => /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { className });
 var TableSkeleton = ({
   columns = 5,
@@ -2069,219 +1889,52 @@ var TableSkeleton = ({
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "table-wrapper rounded-none  border border-border bg-card overflow-hidden", children: content });
 };
 TableSkeleton.displayName = "TableSkeleton";
-function ResponsiveTableInner({
-  data,
-  columns,
-  onRowClick,
-  renderMobileCard,
-  className,
-  emptyMessage = "No results found.",
-  ariaLabel,
-  tableWrapperClassName,
-  footer
-}, ref) {
-  const visibleMobileColumns = React6__namespace.useMemo(
-    () => columns.filter((col) => !col.hideOnMobile),
-    [columns]
-  );
-  const primaryColumn = React6__namespace.useMemo(() => {
-    return visibleMobileColumns.find(
-      (col) => col.key !== "select" && col.key !== "actions"
-    ) || visibleMobileColumns[0];
-  }, [visibleMobileColumns]);
-  const secondaryColumns = React6__namespace.useMemo(
-    () => visibleMobileColumns.filter((col) => col.key !== primaryColumn?.key),
-    [visibleMobileColumns, primaryColumn]
-  );
-  React6__namespace.useEffect(() => {
-    const isDev = typeof globalThis !== "undefined" && globalThis.process && globalThis.process.env?.NODE_ENV === "development";
-    if (isDev && visibleMobileColumns.length === 0) {
-      console.warn(
-        "ResponsiveTable: All columns are hidden on mobile (hideOnMobile: true). Consider showing at least one column for better mobile UX. Users will see empty card borders on mobile devices."
-      );
-    }
-  }, [visibleMobileColumns.length]);
-  const handleItemClick = React6__namespace.useCallback(
-    (item, e) => {
-      if (!onRowClick) return;
-      if (e) {
-        const target = e.target;
-        if (target.closest('[role="checkbox"]') || target.closest("button") || target.closest("a") || target.closest('[role^="menuitem"]') || target.closest("[data-actions]")) {
-          return;
-        }
-      }
-      onRowClick(item);
-    },
-    [onRowClick]
-  );
-  const handleCardKeyDown = React6__namespace.useCallback(
-    (item) => (e) => {
-      if (onRowClick && (e.key === "Enter" || e.key === " ")) {
-        e.preventDefault();
-        handleItemClick(item, e);
-      }
-    },
-    [handleItemClick, onRowClick]
-  );
-  if (data.length === 0) {
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("p-8 text-center", className), children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: emptyMessage }) });
-  }
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: cn("w-full", className), children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-4 md:hidden", children: data.map((item) => {
-      const primaryValue = primaryColumn ? String(item[primaryColumn.key]) : String(item.id);
-      if (renderMobileCard) {
-        return /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
-          {
-            onClick: (e) => handleItemClick(item, e),
-            role: onRowClick ? "button" : void 0,
-            tabIndex: onRowClick ? 0 : void 0,
-            onKeyDown: onRowClick ? handleCardKeyDown(item) : void 0,
-            className: onRowClick ? "cursor-pointer" : void 0,
-            "aria-label": onRowClick ? `View details for ${primaryValue}` : void 0,
-            children: renderMobileCard(item, visibleMobileColumns)
-          },
-          item.id
-        );
-      }
-      return /* @__PURE__ */ jsxRuntime.jsxs(
-        Card,
-        {
-          variant: onRowClick ? "interactive" : "default",
-          className: cn(
-            onRowClick && "cursor-pointer",
-            "transition-all duration-150"
-          ),
-          onClick: (e) => handleItemClick(item, e),
-          role: onRowClick ? "button" : void 0,
-          tabIndex: onRowClick ? 0 : void 0,
-          onKeyDown: onRowClick ? handleCardKeyDown(item) : void 0,
-          "aria-label": onRowClick ? `View details for ${primaryValue}` : void 0,
-          children: [
-            primaryColumn ? /* @__PURE__ */ jsxRuntime.jsx(CardHeader, { className: "pb-3", children: /* @__PURE__ */ jsxRuntime.jsx(CardTitle, { className: "text-base", children: primaryColumn.render ? primaryColumn.render(item[primaryColumn.key], item) : String(item[primaryColumn.key]) }) }) : null,
-            secondaryColumns.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(CardContent, { className: "pb-3", children: /* @__PURE__ */ jsxRuntime.jsx("dl", { className: "flex flex-col gap-2", children: secondaryColumns.map((column) => /* @__PURE__ */ jsxRuntime.jsxs(
-              "div",
-              {
-                className: "flex items-start justify-between gap-4 text-sm",
-                children: [
-                  !column.hideLabelOnMobile && /* @__PURE__ */ jsxRuntime.jsxs("dt", { className: "text-muted-foreground min-w-[80px] shrink-0", children: [
-                    column.label,
-                    ":"
-                  ] }),
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    "dd",
-                    {
-                      className: cn(
-                        "font-medium flex-1",
-                        !column.hideLabelOnMobile ? "text-right" : "text-left"
-                      ),
-                      children: column.render ? column.render(item[column.key], item) : String(item[column.key])
-                    }
-                  )
-                ]
-              },
-              String(column.key)
-            )) }) })
-          ]
-        },
-        item.id
-      );
-    }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        className: cn(
-          "table-wrapper hidden md:block overflow-hidden rounded-none  border border-border",
-          tableWrapperClassName
-        ),
-        children: /* @__PURE__ */ jsxRuntime.jsxs(Table, { "aria-label": ariaLabel || "Data table", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(TableHeader, { className: "bg-[var(--table-header-bg)]", children: /* @__PURE__ */ jsxRuntime.jsx(TableRow, { children: columns.map((column) => /* @__PURE__ */ jsxRuntime.jsx(
-            TableHead,
-            {
-              className: column.headerClassName,
-              children: column.label
-            },
-            String(column.key)
-          )) }) }),
-          /* @__PURE__ */ jsxRuntime.jsx(TableBody, { children: data.map((item) => {
-            const primaryValue = primaryColumn ? String(item[primaryColumn.key]) : String(item.id);
-            return /* @__PURE__ */ jsxRuntime.jsx(
-              TableRow,
-              {
-                className: cn(
-                  "hover-unified-table-row",
-                  onRowClick && "cursor-pointer"
-                ),
-                onClick: (e) => handleItemClick(item, e),
-                role: onRowClick ? "button" : void 0,
-                tabIndex: onRowClick ? 0 : void 0,
-                onKeyDown: onRowClick ? handleCardKeyDown(item) : void 0,
-                "aria-label": onRowClick ? `View details for ${primaryValue}` : void 0,
-                children: columns.map((column) => /* @__PURE__ */ jsxRuntime.jsx(
-                  TableCell,
-                  {
-                    className: column.cellClassName,
-                    children: column.render ? column.render(item[column.key], item) : String(item[column.key])
-                  },
-                  String(column.key)
-                ))
-              },
-              item.id
-            );
-          }) })
-        ] })
-      }
-    ),
-    footer && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "table-footer border-t border-border bg-[var(--table-header-bg)]", children: footer })
-  ] });
-}
-var ResponsiveTable = React6__namespace.forwardRef(ResponsiveTableInner);
 
 // src/tailwind-preset.ts
 var uiPreset = {
   theme: {
     extend: {
       colors: {
-        border: "var(--border)",
-        input: "var(--input)",
-        ring: "var(--ring)",
-        background: "var(--background)",
-        foreground: "var(--foreground)",
+        border: "var(--nx-border)",
+        input: "var(--nx-input)",
+        ring: "var(--nx-ring)",
+        background: "var(--nx-background)",
+        foreground: "var(--nx-foreground)",
         primary: {
-          DEFAULT: "var(--primary)",
-          foreground: "var(--primary-foreground)"
+          DEFAULT: "var(--nx-primary)",
+          foreground: "var(--nx-primary-foreground)"
         },
         secondary: {
-          DEFAULT: "var(--secondary)",
-          foreground: "var(--secondary-foreground)"
+          DEFAULT: "var(--nx-secondary)",
+          foreground: "var(--nx-secondary-foreground)"
         },
         destructive: {
-          DEFAULT: "var(--destructive)",
-          foreground: "var(--destructive-foreground)"
+          DEFAULT: "var(--nx-destructive)",
+          foreground: "var(--nx-destructive-foreground)"
         },
         success: {
-          DEFAULT: "var(--success)",
-          foreground: "var(--success-foreground)"
+          DEFAULT: "var(--nx-success)",
+          foreground: "var(--nx-success-foreground)"
         },
         warning: {
-          DEFAULT: "var(--warning)",
-          foreground: "var(--warning-foreground)"
+          DEFAULT: "var(--nx-warning)",
+          foreground: "var(--nx-warning-foreground)"
         },
         muted: {
-          DEFAULT: "var(--muted)",
-          foreground: "var(--muted-foreground)"
+          DEFAULT: "var(--nx-muted)",
+          foreground: "var(--nx-muted-foreground)"
         },
         accent: {
-          DEFAULT: "var(--accent)",
-          foreground: "var(--accent-foreground)"
+          DEFAULT: "var(--nx-accent)",
+          foreground: "var(--nx-accent-foreground)"
         },
         popover: {
-          DEFAULT: "var(--popover)",
-          foreground: "var(--popover-foreground)"
+          DEFAULT: "var(--nx-popover)",
+          foreground: "var(--nx-popover-foreground)"
         },
         card: {
-          DEFAULT: "var(--card)",
-          foreground: "var(--card-foreground)"
+          DEFAULT: "var(--nx-card)",
+          foreground: "var(--nx-card-foreground)"
         }
       },
       borderRadius: {
@@ -2391,7 +2044,6 @@ exports.PortalProvider = PortalProvider;
 exports.Progress = Progress;
 exports.RadioGroup = RadioGroup;
 exports.RadioGroupItem = RadioGroupItem;
-exports.ResponsiveTable = ResponsiveTable;
 exports.Select = Select;
 exports.SelectContent = SelectContent;
 exports.SelectGroup = SelectGroup;
@@ -2426,7 +2078,6 @@ exports.TableFooter = TableFooter;
 exports.TableHead = TableHead;
 exports.TableHeader = TableHeader;
 exports.TableLoading = TableLoading;
-exports.TablePagination = TablePagination;
 exports.TableRow = TableRow;
 exports.TableSearch = TableSearch;
 exports.TableSkeleton = TableSkeleton;