@saasflare/ui 3.1.0 → 3.1.2

package/dist/{chunk-WPOOC2FX.mjs → chunk-56PMDC5F.mjs}

@@ -19,11 +19,11 @@ var buttonVariants = cva(
     variants: {
       variant: {
         solid: "bg-[var(--intent)] text-[var(--intent-fg)] shadow-xs hover:brightness-110 dark:hover:brightness-125",
-        soft: "bg-[var(--intent)]/15 text-[var(--intent)] hover:bg-[var(--intent)]/25 dark:bg-[var(--intent)]/20 dark:hover:bg-[var(--intent)]/30",
-        outline: "border border-[var(--intent)]/30 text-[var(--intent)] shadow-xs hover:bg-[var(--intent)]/10 dark:border-[var(--intent)]/40 dark:hover:bg-[var(--intent)]/15",
-        ghost: "text-[var(--intent)] hover:bg-[var(--intent)]/10 dark:hover:bg-[var(--intent)]/15",
-        link: "text-[var(--intent)] underline-offset-4 hover:underline",
-        glass: "bg-[var(--glass-bg)] text-[var(--intent)] border border-[var(--glass-border)] backdrop-blur-lg shadow-[var(--glass-shadow)] hover:bg-[var(--glass-bg-hover)] hover:border-[var(--glass-border-hover)]",
+        soft: "bg-[var(--intent)]/15 text-[var(--intent-text)] hover:bg-[var(--intent)]/25 dark:bg-[var(--intent)]/20 dark:hover:bg-[var(--intent)]/30",
+        outline: "border border-[var(--intent-text)]/30 text-[var(--intent-text)] shadow-xs hover:bg-[var(--intent-text)]/10 dark:border-[var(--intent-text)]/40 dark:hover:bg-[var(--intent-text)]/15",
+        ghost: "text-[var(--intent-text)] hover:bg-[var(--intent-text)]/10 dark:hover:bg-[var(--intent-text)]/15",
+        link: "text-[var(--intent-text)] underline-offset-4 hover:underline",
+        glass: "bg-[var(--glass-bg)] text-[var(--intent-text)] border border-[var(--glass-border)] backdrop-blur-lg shadow-[var(--glass-shadow)] hover:bg-[var(--glass-bg-hover)] hover:border-[var(--glass-border-hover)]",
         shadow: "bg-[var(--intent)] text-[var(--intent-fg)] shadow-[var(--btn-shadow)] hover:shadow-[var(--btn-shadow-hover)] hover:brightness-110 dark:hover:brightness-125"
       },
       size: {

package/dist/{chunk-DNLCSV5M.js → chunk-NPNSPYTX.js}

@@ -41,11 +41,11 @@ var buttonVariants = classVarianceAuthority.cva(
     variants: {
       variant: {
         solid: "bg-[var(--intent)] text-[var(--intent-fg)] shadow-xs hover:brightness-110 dark:hover:brightness-125",
-        soft: "bg-[var(--intent)]/15 text-[var(--intent)] hover:bg-[var(--intent)]/25 dark:bg-[var(--intent)]/20 dark:hover:bg-[var(--intent)]/30",
-        outline: "border border-[var(--intent)]/30 text-[var(--intent)] shadow-xs hover:bg-[var(--intent)]/10 dark:border-[var(--intent)]/40 dark:hover:bg-[var(--intent)]/15",
-        ghost: "text-[var(--intent)] hover:bg-[var(--intent)]/10 dark:hover:bg-[var(--intent)]/15",
-        link: "text-[var(--intent)] underline-offset-4 hover:underline",
-        glass: "bg-[var(--glass-bg)] text-[var(--intent)] border border-[var(--glass-border)] backdrop-blur-lg shadow-[var(--glass-shadow)] hover:bg-[var(--glass-bg-hover)] hover:border-[var(--glass-border-hover)]",
+        soft: "bg-[var(--intent)]/15 text-[var(--intent-text)] hover:bg-[var(--intent)]/25 dark:bg-[var(--intent)]/20 dark:hover:bg-[var(--intent)]/30",
+        outline: "border border-[var(--intent-text)]/30 text-[var(--intent-text)] shadow-xs hover:bg-[var(--intent-text)]/10 dark:border-[var(--intent-text)]/40 dark:hover:bg-[var(--intent-text)]/15",
+        ghost: "text-[var(--intent-text)] hover:bg-[var(--intent-text)]/10 dark:hover:bg-[var(--intent-text)]/15",
+        link: "text-[var(--intent-text)] underline-offset-4 hover:underline",
+        glass: "bg-[var(--glass-bg)] text-[var(--intent-text)] border border-[var(--glass-border)] backdrop-blur-lg shadow-[var(--glass-shadow)] hover:bg-[var(--glass-bg-hover)] hover:border-[var(--glass-border-hover)]",
         shadow: "bg-[var(--intent)] text-[var(--intent-fg)] shadow-[var(--btn-shadow)] hover:shadow-[var(--btn-shadow-hover)] hover:brightness-110 dark:hover:brightness-125"
       },
       size: {

package/dist/entries/calendar.js

@@ -1,7 +1,7 @@
 "use client";
 'use strict';
 
-var chunkDNLCSV5M_js = require('../chunk-DNLCSV5M.js');
+var chunkNPNSPYTX_js = require('../chunk-NPNSPYTX.js');
 require('../chunk-FT66KYRN.js');
 var chunkD5LKWKG7_js = require('../chunk-D5LKWKG7.js');
 var React = require('react');
@@ -75,12 +75,12 @@ function Calendar({
           defaultClassNames.nav
         ),
         button_previous: chunkD5LKWKG7_js.cn(
-          chunkDNLCSV5M_js.buttonVariants({ variant: buttonVariant }),
+          chunkNPNSPYTX_js.buttonVariants({ variant: buttonVariant }),
           "size-(--cell-size) p-0 select-none aria-disabled:opacity-50",
           defaultClassNames.button_previous
         ),
         button_next: chunkD5LKWKG7_js.cn(
-          chunkDNLCSV5M_js.buttonVariants({ variant: buttonVariant }),
+          chunkNPNSPYTX_js.buttonVariants({ variant: buttonVariant }),
           "size-(--cell-size) p-0 select-none aria-disabled:opacity-50",
           defaultClassNames.button_next
         ),
@@ -195,7 +195,7 @@ function CalendarDayButton({
     if (modifiers.focused) ref.current?.focus();
   }, [modifiers.focused]);
   return /* @__PURE__ */ jsxRuntime.jsx(
-    chunkDNLCSV5M_js.Button,
+    chunkNPNSPYTX_js.Button,
     {
       ref,
       variant: "ghost",

package/dist/entries/calendar.mjs

@@ -1,5 +1,5 @@
 "use client";
-import { buttonVariants, Button } from '../chunk-WPOOC2FX.mjs';
+import { buttonVariants, Button } from '../chunk-56PMDC5F.mjs';
 import '../chunk-EJHYM2HP.mjs';
 import { useSaasflareProps, cn } from '../chunk-WRONFPRI.mjs';
 import * as React from 'react';

package/dist/entries/carousel.js

@@ -1,7 +1,7 @@
 "use client";
 'use strict';
 
-var chunkDNLCSV5M_js = require('../chunk-DNLCSV5M.js');
+var chunkNPNSPYTX_js = require('../chunk-NPNSPYTX.js');
 require('../chunk-FT66KYRN.js');
 var chunkD5LKWKG7_js = require('../chunk-D5LKWKG7.js');
 var React = require('react');
@@ -176,7 +176,7 @@ function CarouselPrevious({
 }) {
   const { orientation, scrollPrev, canScrollPrev } = useCarousel();
   return /* @__PURE__ */ jsxRuntime.jsxs(
-    chunkDNLCSV5M_js.Button,
+    chunkNPNSPYTX_js.Button,
     {
       "data-slot": "carousel-previous",
       variant,
@@ -204,7 +204,7 @@ function CarouselNext({
 }) {
   const { orientation, scrollNext, canScrollNext } = useCarousel();
   return /* @__PURE__ */ jsxRuntime.jsxs(
-    chunkDNLCSV5M_js.Button,
+    chunkNPNSPYTX_js.Button,
     {
       "data-slot": "carousel-next",
       variant,

package/dist/entries/carousel.mjs

@@ -1,5 +1,5 @@
 "use client";
-import { Button } from '../chunk-WPOOC2FX.mjs';
+import { Button } from '../chunk-56PMDC5F.mjs';
 import '../chunk-EJHYM2HP.mjs';
 import { useSaasflareProps, cn } from '../chunk-WRONFPRI.mjs';
 import * as React from 'react';

package/dist/index.js

@@ -1,7 +1,7 @@
 "use client";
 'use strict';
 
-var chunkDNLCSV5M_js = require('./chunk-DNLCSV5M.js');
+var chunkNPNSPYTX_js = require('./chunk-NPNSPYTX.js');
 var chunk4BOMMZEY_js = require('./chunk-4BOMMZEY.js');
 var chunkFT66KYRN_js = require('./chunk-FT66KYRN.js');
 var chunkD5LKWKG7_js = require('./chunk-D5LKWKG7.js');
@@ -436,7 +436,7 @@ function AlertDialogAction({
     AlertDialogPrimitive__namespace.Action,
     {
       "data-intent": "primary",
-      className: chunkD5LKWKG7_js.cn(chunkDNLCSV5M_js.buttonVariants({ variant: "solid" }), className),
+      className: chunkD5LKWKG7_js.cn(chunkNPNSPYTX_js.buttonVariants({ variant: "solid" }), className),
       ...props
     }
   );
@@ -449,7 +449,7 @@ function AlertDialogCancel({
     AlertDialogPrimitive__namespace.Cancel,
     {
       "data-intent": "neutral",
-      className: chunkD5LKWKG7_js.cn(chunkDNLCSV5M_js.buttonVariants({ variant: "outline" }), className),
+      className: chunkD5LKWKG7_js.cn(chunkNPNSPYTX_js.buttonVariants({ variant: "outline" }), className),
       ...props
     }
   );
@@ -861,8 +861,8 @@ var badgeVariants = classVarianceAuthority.cva(
     variants: {
       variant: {
         solid: "bg-[var(--intent)] text-[var(--intent-fg)] [a&]:hover:brightness-110",
-        soft: "bg-[var(--intent)]/15 text-[var(--intent)] [a&]:hover:bg-[var(--intent)]/25 dark:bg-[var(--intent)]/20 dark:hover:bg-[var(--intent)]/30",
-        outline: "border-[var(--intent)]/30 text-[var(--intent)] [a&]:hover:bg-[var(--intent)]/10"
+        soft: "bg-[var(--intent)]/15 text-[var(--intent-text)] [a&]:hover:bg-[var(--intent)]/25 dark:bg-[var(--intent)]/20 dark:hover:bg-[var(--intent)]/30",
+        outline: "border-[var(--intent-text)]/30 text-[var(--intent-text)] [a&]:hover:bg-[var(--intent-text)]/10"
       },
       size: {
         sm: "px-1.5 py-px text-[10px]",
@@ -4807,7 +4807,7 @@ function InputGroupButton({
   ...props
 }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
-    chunkDNLCSV5M_js.Button,
+    chunkNPNSPYTX_js.Button,
     {
       type,
       "data-size": size,
@@ -5161,7 +5161,7 @@ function PaginationLink({
       "data-slot": "pagination-link",
       "data-active": isActive,
       className: chunkD5LKWKG7_js.cn(
-        chunkDNLCSV5M_js.buttonVariants({
+        chunkNPNSPYTX_js.buttonVariants({
           variant: isActive ? "outline" : "ghost",
           size
         }),
@@ -5560,7 +5560,7 @@ function SidebarTrigger({
 }) {
   const { toggleSidebar } = useSidebar();
   return /* @__PURE__ */ jsxRuntime.jsxs(
-    chunkDNLCSV5M_js.Button,
+    chunkNPNSPYTX_js.Button,
     {
       "data-sidebar": "trigger",
       "data-slot": "sidebar-trigger",
@@ -6529,9 +6529,10 @@ function ThemeModeToggle({
     setTheme(theme === "dark" ? "light" : "dark");
   };
   return /* @__PURE__ */ jsxRuntime.jsxs(
-    chunkDNLCSV5M_js.Button,
+    chunkNPNSPYTX_js.Button,
     {
       variant: "ghost",
+      intent: "neutral",
       size: showText ? "sm" : "icon",
       className: chunkD5LKWKG7_js.cn("cursor-pointer", className),
       onClick: toggleTheme,
@@ -6684,11 +6685,11 @@ function UserAvatar({ src, name, initials, size = "md", className }) {
 
 Object.defineProperty(exports, "Button", {
   enumerable: true,
-  get: function () { return chunkDNLCSV5M_js.Button; }
+  get: function () { return chunkNPNSPYTX_js.Button; }
 });
 Object.defineProperty(exports, "buttonVariants", {
   enumerable: true,
-  get: function () { return chunkDNLCSV5M_js.buttonVariants; }
+  get: function () { return chunkNPNSPYTX_js.buttonVariants; }
 });
 Object.defineProperty(exports, "Dialog", {
   enumerable: true,

package/dist/index.mjs

@@ -1,6 +1,6 @@
 "use client";
-import { buttonVariants, Button } from './chunk-WPOOC2FX.mjs';
-export { Button, buttonVariants } from './chunk-WPOOC2FX.mjs';
+import { buttonVariants, Button } from './chunk-56PMDC5F.mjs';
+export { Button, buttonVariants } from './chunk-56PMDC5F.mjs';
 export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger } from './chunk-RW2S3KNB.mjs';
 import { useSaasflareMotion, springGentle, springBouncy, spring } from './chunk-EJHYM2HP.mjs';
 export { fadeIn, noMotion, scaleIn, slideDown, slideUp, spring, springBouncy, springGentle, springStiff, useSaasflareMotion } from './chunk-EJHYM2HP.mjs';
@@ -812,8 +812,8 @@ var badgeVariants = cva(
     variants: {
       variant: {
         solid: "bg-[var(--intent)] text-[var(--intent-fg)] [a&]:hover:brightness-110",
-        soft: "bg-[var(--intent)]/15 text-[var(--intent)] [a&]:hover:bg-[var(--intent)]/25 dark:bg-[var(--intent)]/20 dark:hover:bg-[var(--intent)]/30",
-        outline: "border-[var(--intent)]/30 text-[var(--intent)] [a&]:hover:bg-[var(--intent)]/10"
+        soft: "bg-[var(--intent)]/15 text-[var(--intent-text)] [a&]:hover:bg-[var(--intent)]/25 dark:bg-[var(--intent)]/20 dark:hover:bg-[var(--intent)]/30",
+        outline: "border-[var(--intent-text)]/30 text-[var(--intent-text)] [a&]:hover:bg-[var(--intent-text)]/10"
       },
       size: {
         sm: "px-1.5 py-px text-[10px]",
@@ -6483,6 +6483,7 @@ function ThemeModeToggle({
     Button,
     {
       variant: "ghost",
+      intent: "neutral",
       size: showText ? "sm" : "icon",
       className: cn("cursor-pointer", className),
       onClick: toggleTheme,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saasflare/ui",
-  "version": "3.1.0",
+  "version": "3.1.2",
   "private": false,
   "license": "MIT",
   "description": "The Next.js UI library — App Router-aware Radix primitives with Tailwind v4 and Motion, animated by default.",

package/styles/palettes.css

@@ -122,6 +122,10 @@
 :root[data-palette="teal"]      { --primary-h: 185; --primary-c: 0.15; --primary-l: 0.60; }
 :root[data-palette="teal"].dark { --primary-l: 0.70; }
 
+/* ─── Sage (dusty teal, Saasflare alt-brand) ────── */
+:root[data-palette="sage"]      { --primary-h: 169.28; --primary-c: 0.082; --primary-l: 0.586; }
+:root[data-palette="sage"].dark { --primary-l: 0.70; }
+
 /* ─── Iris ──────────────────────────────────────── */
 :root[data-palette="iris"]      { --primary-h: 255; --primary-c: 0.16; --primary-l: 0.60; }
 :root[data-palette="iris"].dark { --primary-l: 0.70; }

package/styles/theme.css

@@ -70,7 +70,7 @@
     --primary-foreground: oklch(1 0 0);
 
     /* ── Secondary / Accent / Muted (from neutral axis) ── */
-    --secondary: oklch(0.965 var(--neutral-c) var(--neutral-h));
+    --secondary: oklch(0.92 calc(var(--neutral-c) * 1.5) var(--neutral-h));
     --secondary-foreground: oklch(0.24 calc(var(--neutral-c) * 2) var(--neutral-h));
 
     --accent: oklch(0.95 calc(var(--neutral-c) * 1.6) var(--neutral-h));
@@ -91,13 +91,13 @@
     --ring: oklch(var(--primary-l) var(--primary-c) var(--primary-h));
 
     /* ── Semantic (fixed hues, brand-independent) ── */
-    --destructive: oklch(0.577 0.245 27.325);
+    --destructive: oklch(0.583 0.239 28.476);
     --destructive-foreground: oklch(1 0 0);
-    --success: oklch(0.59 0.17 149);
-    --success-foreground: oklch(1 0 0);
-    --warning: oklch(0.75 0.17 65);
-    --warning-foreground: oklch(0.22 0.05 65);
-    --info: oklch(0.68 0.15 230);
+    --success: oklch(0.750 0.146 161.279);
+    --success-foreground: oklch(0.22 0.05 161);
+    --warning: oklch(0.849 0.144 93.533);
+    --warning-foreground: oklch(0.22 0.05 93);
+    --info: oklch(0.590 0.133 254.001);
     --info-foreground: oklch(1 0 0);
 
     /* ── Charts (offsets from primary hue) ── */
@@ -149,14 +149,14 @@
     --input: oklch(1 0 0 / 0.15);
     --ring: oklch(var(--primary-l) var(--primary-c) var(--primary-h));
 
-    --destructive: oklch(0.704 0.191 22.216);
-    --destructive-foreground: oklch(0.15 0.03 27);
-    --success: oklch(0.68 0.19 149);
-    --success-foreground: oklch(0.15 0.03 149);
-    --warning: oklch(0.8 0.17 65);
-    --warning-foreground: oklch(0.2 0.04 65);
-    --info: oklch(0.72 0.15 230);
-    --info-foreground: oklch(0.15 0.03 230);
+    --destructive: oklch(0.700 0.200 28.476);
+    --destructive-foreground: oklch(1 0 0);
+    --success: oklch(0.770 0.146 161.279);
+    --success-foreground: oklch(0.22 0.05 161);
+    --warning: oklch(0.830 0.150 93.533);
+    --warning-foreground: oklch(0.22 0.05 93);
+    --info: oklch(0.680 0.140 254.001);
+    --info-foreground: oklch(1 0 0);
 
     --chart-1: oklch(var(--primary-l) var(--primary-c) var(--primary-h));
     --chart-2: oklch(0.68 0.19 calc(var(--primary-h) - 110));
@@ -341,7 +341,7 @@ textarea,
  * and wins by specificity — intentional escape hatch.
  * ============================================ */
 :root[data-radius="sharp"]   { --radius: 0;        }
-:root[data-radius="soft"]    { --radius: 0.25rem;  }
+:root[data-radius="soft"]    { --radius: 0.35rem;  }
 :root[data-radius="rounded"] { --radius: 0.625rem; }
 :root[data-radius="pill"] {
     --radius: 9999px;
@@ -355,33 +355,49 @@ textarea,
  * Intent color system — components set
  * data-intent="primary|success|warning|…" to
  * activate intent-aware coloring via --intent.
+ *
+ * Three tokens per intent:
+ *   --intent       fill color (used as background in solid/shadow variants)
+ *   --intent-fg    paired text color readable on top of --intent
+ *   --intent-text  text color when rendered without a fill (transparent bg)
+ *
+ * For colored intents --intent-text === --intent (the saturated brand color
+ * is itself readable as text on a page background). For neutral, --intent
+ * is a light surface, so --intent-text falls back to --secondary-foreground
+ * (dark gray) so soft/outline/ghost/link/glass variants stay legible.
  * ============================================ */
 [data-intent="primary"] {
     --intent: var(--primary);
     --intent-fg: var(--primary-foreground);
+    --intent-text: var(--primary);
 }
 
 [data-intent="neutral"] {
     --intent: var(--secondary);
     --intent-fg: var(--secondary-foreground);
+    --intent-text: var(--secondary-foreground);
 }
 
 [data-intent="success"] {
     --intent: var(--success);
     --intent-fg: var(--success-foreground);
+    --intent-text: var(--success);
 }
 
 [data-intent="warning"] {
     --intent: var(--warning);
     --intent-fg: var(--warning-foreground);
+    --intent-text: var(--warning);
 }
 
 [data-intent="danger"] {
     --intent: var(--destructive);
     --intent-fg: var(--destructive-foreground);
+    --intent-text: var(--destructive);
 }
 
 [data-intent="info"] {
     --intent: var(--info);
     --intent-fg: var(--info-foreground);
+    --intent-text: var(--info);
 }