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

package/dist/index.cjs

@@ -66,20 +66,26 @@ var buttonVariants = classVarianceAuthority.cva(
       variant: {
         default: "bg-primary text-primary-foreground border border-transparent hover:opacity-90",
         primary: "bg-primary text-primary-foreground border border-transparent hover:opacity-90",
-        destructive: "bg-destructive text-destructive-foreground border border-transparent hover:opacity-90",
-        outline: "border border-primary/10 text-foreground hover-unified bg-background",
-        secondary: "bg-background border border-primary/10 text-foreground hover:bg-primary/5",
+        // Solid fill uses the emphasis token so white on-color text stays AA in
+        // dark mode (the base token is the readable text color, too light here).
+        // Hover darkens to a deeper shade instead of opacity-90, which would
+        // composite the fill toward the page and drop white text under 4.5:1.
+        destructive: "bg-destructive-solid text-destructive-foreground border border-transparent hover:bg-destructive-700",
+        // border-border (not a faint primary alpha) so the outline is a visible
+        // boundary at the 3:1 UI minimum.
+        outline: "border border-border text-foreground hover-unified bg-background",
+        secondary: "bg-background border border-border text-foreground hover:bg-primary/5",
         ghost: "text-foreground border border-transparent hover-unified",
         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 +126,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: {
@@ -151,7 +157,9 @@ var Textarea = React6.forwardRef(({ className, ...props }, ref) => {
     {
       "data-slot": "textarea",
       className: cn(
-        "flex min-h-[80px] w-full rounded-none border border-input bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground placeholder:opacity-50 transition-all duration-200 focus:border-primary! focus-visible:border-primary! focus:outline-none hover:border-primary/30 disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-primary/5 resize-y",
+        // hover:border-primary (full strength) keeps the hover boundary more
+        // visible than the resting border-input, not a fainter alpha of it.
+        "flex min-h-[80px] w-full rounded-none border border-input bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground placeholder:opacity-50 transition-all duration-200 focus:border-primary! focus-visible:border-primary! focus:outline-none hover:border-primary disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-primary/5 resize-y",
         "aria-invalid:border-destructive aria-invalid:focus:border-destructive!",
         className
       ),
@@ -174,22 +182,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 +271,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!"
       }
     },
@@ -385,15 +412,71 @@ var CardFooter = React6.forwardRef(
   }
 );
 CardFooter.displayName = "CardFooter";
+var GAP = {
+  0: "gap-0",
+  1: "gap-1",
+  2: "gap-2",
+  3: "gap-3",
+  4: "gap-4",
+  6: "gap-6",
+  8: "gap-8"
+};
+var COLS = {
+  1: "grid-cols-1",
+  2: "grid-cols-2",
+  3: "grid-cols-3",
+  4: "grid-cols-4",
+  6: "grid-cols-6"
+};
+var Stack = React6.forwardRef(
+  ({ direction = "col", gap = 4, className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref,
+      className: cn(
+        "flex",
+        direction === "col" ? "flex-col" : "flex-row",
+        GAP[gap],
+        className
+      ),
+      ...props
+    }
+  )
+);
+Stack.displayName = "Stack";
+var Grid = React6.forwardRef(
+  ({ cols = 2, gap = 4, className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref,
+      className: cn("grid", COLS[cols], GAP[gap], className),
+      ...props
+    }
+  )
+);
+Grid.displayName = "Grid";
+var Stat = React6.forwardRef(
+  ({ label, value, className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: cn("flex flex-col gap-1", className), ...props, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-muted-foreground", children: label }),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-2xl font-semibold text-foreground", children: value })
+  ] })
+);
+Stat.displayName = "Stat";
 var alertVariants = classVarianceAuthority.cva(
   "relative flex items-start gap-3 rounded-none  border border-border p-4 text-sm   transition-colors duration-150",
   {
     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"
+        // text-primary is mode-correct (dark ink on light in light mode, light
+        // ink on dark in dark mode); the previous dark text override rendered
+        // dark slate on the dark tint at about 1:1.
+        info: "bg-primary/5 text-primary",
+        // dark:border-l-* re-asserts the strong base accent on the left after
+        // the dark:border-*-900 all-sides rule, so the meaningful accent stays
+        // visible in dark mode instead of collapsing to the faint -900 shade.
+        success: "border-success-200 bg-success-50 text-success-900 border-l-4 border-l-success dark:border-success-900 dark:border-l-success 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:border-l-warning 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:border-l-destructive dark:bg-destructive-950 dark:text-destructive-100"
       }
     },
     defaultVariants: {
@@ -489,7 +572,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 +626,9 @@ 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.
-      // 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",
+      // Resting border uses border-input (a visible 3:1 boundary); the checked
+      // state switches to border-primary below, keeping the two states distinct.
+      "peer relative h-4 w-4 shrink-0 rounded-none border border-input 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,
@@ -582,7 +663,9 @@ var RadioGroupItem = React6.forwardRef(({ className, ...props }, ref) => {
       className: cn(
         // Unchecked outline uses primary/40 (clearly visible) instead of primary/5
         // (~5% opacity, effectively invisible); hover strengthens above the resting state.
-        "peer h-4 w-4 shrink-0 rounded-none border border-primary/40 bg-background cursor-pointer transition-all duration-150 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 hover:border-primary/70 data-[state=checked]:border-primary data-[state=checked]:border-[5px]",
+        // Resting border uses border-input (a visible 3:1 boundary); the checked
+        // state switches to border-primary below, keeping the two states distinct.
+        "peer h-4 w-4 shrink-0 rounded-none border border-input bg-background cursor-pointer transition-all duration-150 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 hover:border-primary/70 data-[state=checked]:border-primary data-[state=checked]:border-[5px]",
         className
       ),
       ...props,
@@ -765,7 +848,7 @@ var TabsTrigger = React6.forwardRef(
       ref,
       "data-slot": "tabs-trigger",
       className: cn(
-        "inline-flex items-center justify-center whitespace-nowrap rounded-none bg-transparent px-4 py-2 text-sm font-medium cursor-pointer transition-all duration-200 border-b-2 relative -mb-0.5 data-[state=active]:border-b-primary! data-[state=active]:text-primary data-[state=inactive]:border-transparent data-[state=inactive]:text-muted-foreground hover:text-primary hover:border-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/20 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 disabled:cursor-not-allowed",
+        "inline-flex items-center justify-center whitespace-nowrap rounded-none bg-transparent px-4 py-2 text-sm font-medium cursor-pointer transition-all duration-200 border-b-2 relative -mb-0.5 data-[state=active]:border-b-primary! data-[state=active]:text-primary data-[state=inactive]:border-transparent data-[state=inactive]:text-muted-foreground hover:text-primary hover:border-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 disabled:cursor-not-allowed",
         className
       ),
       ...props
@@ -780,7 +863,7 @@ var TabsContent = React6.forwardRef(
       ref,
       "data-slot": "tabs-content",
       className: cn(
-        "mt-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/20 focus-visible:ring-offset-2",
+        "mt-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
         className
       ),
       ...props
@@ -788,14 +871,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 +1118,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 +1170,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 +1184,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 +1202,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,
@@ -1181,13 +1261,15 @@ function SelectValue({
   return /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.Value, { "data-slot": "select-value", ...props });
 }
 var selectTriggerVariants = classVarianceAuthority.cva(
-  "flex w-full items-center justify-between gap-2 rounded-none border border-input bg-background px-3 text-sm text-foreground cursor-pointer transition-all duration-150 focus:border-primary! focus-visible:border-primary! focus:outline-none hover:border-primary/30 disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-primary/5 data-[placeholder]:text-muted-foreground aria-[invalid=true]:border-destructive aria-[invalid=true]:focus:border-destructive! [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:size-4",
+  // hover:border-primary (full strength) keeps the hover boundary more visible
+  // than the resting border-input, not a fainter alpha of it.
+  "flex w-full items-center justify-between gap-2 rounded-none border border-input bg-background px-3 text-sm text-foreground cursor-pointer transition-all duration-150 focus:border-primary! focus-visible:border-primary! focus:outline-none hover:border-primary disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-primary/5 data-[placeholder]:text-muted-foreground aria-[invalid=true]:border-destructive aria-[invalid=true]:focus:border-destructive! [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:size-4",
   {
     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 +1752,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
@@ -1792,7 +1874,7 @@ function TableSearch({
         {
           type: "button",
           onClick: onClear,
-          className: "text-muted-foreground/60 hover:text-foreground transition-colors p-0.5 rounded-none hover:bg-primary/5",
+          className: "text-muted-foreground hover:text-foreground transition-colors p-0.5 rounded-none hover:bg-primary/5",
           "aria-label": "Clear search",
           children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "w-3.5 h-3.5" })
         }
@@ -1820,213 +1902,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 +1944,71 @@ 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 statusScale = (base) => ({
+  50: `color-mix(in srgb, var(${base}), white 95%)`,
+  100: `color-mix(in srgb, var(${base}), white 90%)`,
+  200: `color-mix(in srgb, var(${base}), white 70%)`,
+  300: `color-mix(in srgb, var(${base}), white 50%)`,
+  400: `color-mix(in srgb, var(${base}), white 30%)`,
+  500: `var(${base})`,
+  600: `color-mix(in srgb, var(${base}), black 10%)`,
+  700: `color-mix(in srgb, var(${base}), black 30%)`,
+  800: `color-mix(in srgb, var(${base}), black 50%)`,
+  900: `color-mix(in srgb, var(${base}), black 70%)`,
+  950: `color-mix(in srgb, var(${base}), black 85%)`
+});
 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)",
+          // Saturated fill for solid buttons, distinct from the text-tuned base.
+          solid: "var(--nx-destructive-solid)",
+          foreground: "var(--nx-destructive-foreground)",
+          ...statusScale("--nx-destructive")
         },
         success: {
-          DEFAULT: "var(--success)",
-          foreground: "var(--success-foreground)"
+          DEFAULT: "var(--nx-success)",
+          solid: "var(--nx-success-solid)",
+          foreground: "var(--nx-success-foreground)",
+          ...statusScale("--nx-success")
         },
         warning: {
-          DEFAULT: "var(--warning)",
-          foreground: "var(--warning-foreground)"
+          DEFAULT: "var(--nx-warning)",
+          foreground: "var(--nx-warning-foreground)",
+          ...statusScale("--nx-warning")
         },
         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: {
@@ -2381,6 +2108,7 @@ exports.DropdownMenuSubContent = DropdownMenuSubContent;
 exports.DropdownMenuSubTrigger = DropdownMenuSubTrigger;
 exports.DropdownMenuTrigger = DropdownMenuTrigger;
 exports.FormLabelWithTooltip = FormLabelWithTooltip;
+exports.Grid = Grid;
 exports.Input = Input;
 exports.Label = Label;
 exports.Popover = Popover;
@@ -2391,7 +2119,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;
@@ -2415,6 +2142,8 @@ exports.SheetTitle = SheetTitle;
 exports.SheetTrigger = SheetTrigger;
 exports.Skeleton = Skeleton;
 exports.Spinner = Spinner;
+exports.Stack = Stack;
+exports.Stat = Stat;
 exports.Switch = Switch;
 exports.Table = Table;
 exports.TableBody = TableBody;
@@ -2426,7 +2155,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;