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

package/dist/index.cjs

@@ -66,9 +66,15 @@ 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"
       },
@@ -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
       ),
@@ -404,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-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"
+        // 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: {
@@ -562,22 +626,9 @@ var Checkbox = React6.forwardRef(({ className, indeterminate, ...props }, ref) =
     ref,
     "data-slot": "checkbox",
     className: cn(
-      // 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.
-      //
-      // 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",
+      // 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,
@@ -612,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,
@@ -795,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
@@ -810,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
@@ -1208,7 +1261,9 @@ 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: {
@@ -1819,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" })
         }
@@ -1891,6 +1946,19 @@ var TableSkeleton = ({
 TableSkeleton.displayName = "TableSkeleton";
 
 // 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: {
@@ -1910,15 +1978,21 @@ var uiPreset = {
         },
         destructive: {
           DEFAULT: "var(--nx-destructive)",
-          foreground: "var(--nx-destructive-foreground)"
+          // 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(--nx-success)",
-          foreground: "var(--nx-success-foreground)"
+          solid: "var(--nx-success-solid)",
+          foreground: "var(--nx-success-foreground)",
+          ...statusScale("--nx-success")
         },
         warning: {
           DEFAULT: "var(--nx-warning)",
-          foreground: "var(--nx-warning-foreground)"
+          foreground: "var(--nx-warning-foreground)",
+          ...statusScale("--nx-warning")
         },
         muted: {
           DEFAULT: "var(--nx-muted)",
@@ -2034,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;
@@ -2067,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;