@umami/react-zen 0.233.0 → 0.234.0

package/dist/index.js

@@ -84,7 +84,7 @@ var button = tailwindVariants.tv({
         "pressed:bg-interactive-pressed"
       ],
       primary: [
-        "bg-interactive-selected text-interactive-text-selected",
+        "bg-primary text-primary-foreground",
         "hover:opacity-90",
         "pressed:opacity-80",
         "disabled:opacity-50"
@@ -215,7 +215,7 @@ tailwindVariants.tv({
 });
 var tooltip = tailwindVariants.tv({
   base: [
-    "bg-surface-inverted text-foreground-inverted text-base px-2 py-1 rounded",
+    "bg-surface-inverted text-primary-foreground text-base px-2 py-1 rounded",
     "entering:animate-popover-in",
     "exiting:animate-popover-out"
   ]
@@ -231,7 +231,7 @@ var checkbox = tailwindVariants.tv({
       "flex items-center justify-center",
       "w-5 h-5 rounded border border-edge bg-surface-base",
       "shadow-sm transition-colors",
-      "group-selected:bg-interactive-selected group-selected:border-interactive-selected group-selected:text-interactive-text-selected",
+      "group-selected:bg-primary group-selected:border-primary group-selected:text-primary-foreground",
       "group-indeterminate:bg-surface-base group-indeterminate:text-foreground-primary",
       "group-disabled:bg-surface-disabled",
       "group-focus-visible:ring-2 group-focus-visible:ring-focus-ring group-focus-visible:ring-offset-1"
@@ -253,9 +253,9 @@ var switchVariant = tailwindVariants.tv({
     ],
     track: [
       "flex items-center w-10 h-6 px-1 rounded-full",
-      "bg-track",
+      "bg-interactive",
       "transition-colors",
-      "group-selected:bg-interactive-selected",
+      "group-selected:bg-primary",
       "group-focus-visible:ring-2 group-focus-visible:ring-focus-ring group-focus-visible:ring-offset-1"
     ],
     thumb: [
@@ -272,10 +272,10 @@ tailwindVariants.tv({
     list: ["flex gap-1 border-b border-edge-muted"],
     tab: [
       "px-4 py-2 text-base font-medium cursor-pointer",
-      "text-foreground-secondary outline-none",
+      "text-foreground-muted outline-none",
       "border-b-2 border-transparent -mb-px",
       "hovered:text-foreground-primary",
-      "selected:text-foreground-primary selected:border-edge-inverted",
+      "selected:text-foreground-primary selected:border-primary",
       "disabled:text-foreground-disabled disabled:cursor-default",
       "focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-offset-2"
     ],
@@ -1108,10 +1108,9 @@ var shadowMap = {
   true: "shadow-[var(--shadow-default)]"
 };
 var semanticColorMap = {
-  primary: { text: "text-foreground-primary", bg: "bg-interactive-selected" },
-  secondary: { text: "text-foreground-secondary", bg: "bg-surface-raised" },
+  primary: { text: "text-foreground-primary", bg: "bg-primary" },
   muted: { text: "text-foreground-muted", bg: "bg-surface-raised" },
-  inverted: { text: "text-foreground-inverted", bg: "bg-surface-inverted" },
+  inverted: { text: "text-primary-foreground", bg: "bg-surface-inverted" },
   disabled: { text: "text-foreground-disabled", bg: "bg-surface-disabled" },
   transparent: { text: "text-transparent", bg: "bg-transparent" },
   true: { text: "text-foreground-primary", bg: "bg-interactive" },
@@ -1443,8 +1442,7 @@ var borderMap = {
 var semanticBorderColorMap = {
   true: "border-edge",
   transparent: "border-transparent",
-  primary: "border-edge-inverted",
-  inverted: "border-edge-inverted",
+  primary: "border-primary",
   muted: "border-edge-muted",
   strong: "border-edge-strong",
   disabled: "border-edge-muted"
@@ -2796,15 +2794,7 @@ function AlertDialog({
   } });
 }
 function Blockquote({ className, children, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    Text,
-    {
-      ...props,
-      as: "blockquote",
-      className: cn("border-l-2 border-edge-inverted pl-5", className),
-      children
-    }
-  );
+  return /* @__PURE__ */ jsxRuntime.jsx(Text, { ...props, as: "blockquote", className: cn("border-l-2 border-primary pl-5", className), children });
 }
 function Breadcrumbs({ children, className, ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.Breadcrumbs, { ...props, className: cn("flex items-center gap-3", className), children });
@@ -2871,7 +2861,7 @@ function Calendar({
                 "hover:bg-interactive",
                 "data-[outside-month]:hidden",
                 "data-[focus-visible]:outline-2 data-[focus-visible]:outline-focus-ring data-[focus-visible]:outline-offset-2",
-                "data-[selected]:text-interactive-text-selected data-[selected]:bg-interactive-selected",
+                "data-[selected]:text-primary-foreground data-[selected]:bg-primary",
                 "data-[disabled]:text-foreground-disabled"
               ),
               date
@@ -3501,7 +3491,7 @@ function TableCell({ children, className, align, ...props }) {
       className: cn(
         "flex p-2 flex-1 first:pl-0 last:pr-0",
         "[&_a]:font-medium [&_a]:underline [&_a]:decoration-edge [&_a]:underline-offset-4",
-        "[&_a:hover]:decoration-edge-inverted",
+        "[&_a:hover]:decoration-primary",
         align && alignClasses2[align],
         className
       ),
@@ -3788,13 +3778,13 @@ function Spinner(props) {
       ...domProps,
       className: cn("relative inline-flex justify-center items-center", sizeMap3[size], className),
       children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { viewBox: "25 25 50 50", className: "zen-spinner-svg w-full h-full", children: [
-        !quiet && /* @__PURE__ */ jsxRuntime.jsx("circle", { className: "zen-spinner-track stroke-track", cx: "50", cy: "50", r: "20" }),
+        !quiet && /* @__PURE__ */ jsxRuntime.jsx("circle", { className: "zen-spinner-track stroke-interactive", cx: "50", cy: "50", r: "20" }),
         /* @__PURE__ */ jsxRuntime.jsx(
           "circle",
           {
             className: cn(
               "zen-spinner-fill",
-              isDisabled ? "stroke-content-disabled" : "stroke-track-fill"
+              isDisabled ? "stroke-content-disabled" : "stroke-primary"
             ),
             cx: "50",
             cy: "50",
@@ -4519,7 +4509,16 @@ function PasswordField({ label, className, ...props }) {
   ] });
 }
 function Track({ children }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(Box, { position: "relative", borderRadius: "full", overflow: "hidden", className: "w-full h-2 bg-track", children });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Box,
+    {
+      position: "relative",
+      borderRadius: "full",
+      overflow: "hidden",
+      className: "w-full h-2 bg-interactive",
+      children
+    }
+  );
 }
 function Fill({ percentage }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -4530,7 +4529,7 @@ function Fill({ percentage }) {
       bottom: "0",
       left: "0",
       borderRadius: "full",
-      className: "bg-track-fill transition-all",
+      className: "bg-primary transition-all",
       style: { width: `${percentage}%` }
     }
   );
@@ -4556,11 +4555,11 @@ function ProgressCircle({ className, showPercentage, ...props }) {
           xmlns: "http://www.w3.org/2000/svg",
           className: "fill-none stroke-[8px] -rotate-90 w-24 h-24",
           children: [
-            /* @__PURE__ */ jsxRuntime.jsx("circle", { className: "stroke-track", cx: "50", cy: "50", r: "45" }),
+            /* @__PURE__ */ jsxRuntime.jsx("circle", { className: "stroke-interactive", cx: "50", cy: "50", r: "45" }),
             /* @__PURE__ */ jsxRuntime.jsx(
               "circle",
               {
-                className: "stroke-track-fill",
+                className: "stroke-primary",
                 cx: "50",
                 cy: "50",
                 r: "45",
@@ -4599,7 +4598,7 @@ function Radio({ children, className, ...props }) {
         "radio group flex items-center gap-3 cursor-pointer text-base",
         "before:content-[''] before:block before:w-5 before:h-5 before:box-border before:rounded-full",
         "before:border before:border-edge-strong before:bg-surface-base before:transition-all before:duration-200",
-        "data-[selected]:before:border-[6px] data-[selected]:before:border-interactive-selected",
+        "data-[selected]:before:border-[6px] data-[selected]:before:border-primary",
         "data-[disabled]:opacity-50 data-[disabled]:cursor-not-allowed",
         className
       ),
@@ -4843,7 +4842,7 @@ function SidebarItem({
 }
 function Fill2({ percentage }) {
   const width = `calc(10px + ${percentage}% - ${percentage * 0.2}px)`;
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-y-0 left-0 rounded-full bg-track-fill", style: { width } });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-y-0 left-0 rounded-full bg-primary", style: { width } });
 }
 function Thumb({ percentage }) {
   const left = `calc(${percentage}% - ${percentage * 0.2}px)`;
@@ -4851,7 +4850,7 @@ function Thumb({ percentage }) {
     reactAriaComponents.SliderThumb,
     {
       className: cn(
-        "absolute w-5 h-5 rounded-full bg-surface-base border-2 border-edge-inverted shadow",
+        "absolute w-5 h-5 rounded-full bg-surface-base border-2 border-primary shadow",
         "focus:outline-none focus:ring-2 focus:ring-focus-ring focus:ring-offset-2"
       ),
       style: { top: "50%", left, transform: "translateY(-50%)" }
@@ -4867,7 +4866,7 @@ function Slider({ className, showValue = true, label, ...props }) {
     /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.SliderTrack, { className: "relative h-5 w-full", children: ({ state }) => {
       const percentage = state.getThumbPercent(0) * 100;
       return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-x-0 top-1/2 -translate-y-1/2 h-1 rounded-full bg-track overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx(Fill2, { percentage }) }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-x-0 top-1/2 -translate-y-1/2 h-2 rounded-full bg-interactive overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx(Fill2, { percentage }) }),
         /* @__PURE__ */ jsxRuntime.jsx(Thumb, { percentage })
       ] });
     } })
@@ -4934,7 +4933,7 @@ function Tab({ children, className, ...props }) {
       className: cn(
         "tab flex items-center justify-center text-base text-foreground-muted py-2 border-b-2 border-transparent select-none -mb-[2px] cursor-pointer outline-none",
         "data-[hovered]:text-foreground-primary",
-        "data-[selected]:text-foreground-primary data-[selected]:border-b-edge-inverted",
+        "data-[selected]:text-foreground-primary data-[selected]:border-b-primary",
         "data-[disabled]:text-foreground-disabled data-[disabled]:cursor-default",
         className
       ),
@@ -5100,7 +5099,7 @@ function Toggle({ label, children, className, ...props }) {
           "flex items-center justify-center whitespace-nowrap gap-3 font-medium bg-interactive border border-transparent rounded p-2 relative cursor-pointer",
           "hover:bg-interactive-hover",
           "pressed:bg-interactive-pressed",
-          "data-[selected]:text-interactive-text-selected data-[selected]:bg-interactive-selected",
+          "data-[selected]:text-primary-foreground data-[selected]:bg-primary",
           className
         ),
         children