@umami/react-zen 0.232.0 → 0.234.0

package/README.md

@@ -1,6 +1,6 @@
 # zen
 
-**zen** is a props-driven React component library built for speed. Build polished interfaces without writing HTML, CSS, or thinking about Tailwind classes.
+**Zen** is a props-driven React component library built for speed. Build polished interfaces without writing HTML, CSS, or thinking about Tailwind classes.
 
 - **Props over classes** - Style through component props, not utility classes
 - **Design included** - Complete design system out of the box with dark mode
@@ -43,11 +43,11 @@ export default function Welcome() {
 
 No `className`. No CSS files. Just components and props.
 
-## Why zen?
+## Why Zen?
 
 Building UI is slow. You have to think about markup, CSS organization, responsive breakpoints, accessibility, and design consistency.
 
-zen eliminates that friction:
+Zen eliminates that friction:
 
 | Traditional approach | zen approach |
 |---------------------|--------------|

package/dist/index.d.mts

@@ -117,6 +117,12 @@ type MinWidth = Spacing | Fraction | SizingSpecial | WidthViewport;
 type MaxWidth = Spacing | Fraction | MaxWidthSpecial | WidthViewport;
 type MinHeight = Spacing | Fraction | SizingSpecial | HeightViewport;
 type MaxHeight = Spacing | Fraction | SizingSpecial | HeightViewport;
+interface StateStyles {
+    color?: FontColor;
+    backgroundColor?: BackgroundColor;
+    borderColor?: BorderColor;
+    opacity?: Opacity;
+}
 
 type RenderProp<P = Record<string, unknown>> = ReactElement | ((props: P) => ReactElement);
 /**
@@ -224,6 +230,9 @@ interface BoxProps extends Omit<HTMLAttributes<HTMLElement>, 'color'> {
     order?: number;
     zIndex?: number;
     theme?: string;
+    hover?: StateStyles;
+    focus?: StateStyles;
+    active?: StateStyles;
     as?: string;
     render?: RenderProp<BoxRenderProps>;
 }

package/dist/index.d.ts

@@ -117,6 +117,12 @@ type MinWidth = Spacing | Fraction | SizingSpecial | WidthViewport;
 type MaxWidth = Spacing | Fraction | MaxWidthSpecial | WidthViewport;
 type MinHeight = Spacing | Fraction | SizingSpecial | HeightViewport;
 type MaxHeight = Spacing | Fraction | SizingSpecial | HeightViewport;
+interface StateStyles {
+    color?: FontColor;
+    backgroundColor?: BackgroundColor;
+    borderColor?: BorderColor;
+    opacity?: Opacity;
+}
 
 type RenderProp<P = Record<string, unknown>> = ReactElement | ((props: P) => ReactElement);
 /**
@@ -224,6 +230,9 @@ interface BoxProps extends Omit<HTMLAttributes<HTMLElement>, 'color'> {
     order?: number;
     zIndex?: number;
     theme?: string;
+    hover?: StateStyles;
+    focus?: StateStyles;
+    active?: StateStyles;
     as?: string;
     render?: RenderProp<BoxRenderProps>;
 }

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"
@@ -2284,6 +2282,37 @@ function isMinHeightPreset(value) {
 function isMaxHeightPreset(value) {
   return value in maxHeightMap;
 }
+function addStatePrefix(prefix, className) {
+  if (!className) return "";
+  return className.split(" ").filter(Boolean).map((cls) => `${prefix}:${cls}`).join(" ");
+}
+function mapStateStyles(prefix, styles) {
+  if (!styles) return "";
+  const classes = [];
+  if (styles.color !== void 0) {
+    const colorClass = mapTextColor(
+      typeof styles.color === "boolean" ? "true" : String(styles.color)
+    );
+    if (colorClass) classes.push(addStatePrefix(prefix, colorClass));
+  }
+  if (styles.backgroundColor !== void 0) {
+    const bgClass = mapBackgroundColor(
+      typeof styles.backgroundColor === "boolean" ? "true" : String(styles.backgroundColor)
+    );
+    if (bgClass) classes.push(addStatePrefix(prefix, bgClass));
+  }
+  if (styles.borderColor !== void 0) {
+    const borderClass = mapBorderColor(
+      typeof styles.borderColor === "boolean" ? "true" : String(styles.borderColor)
+    );
+    if (borderClass) classes.push(addStatePrefix(prefix, borderClass));
+  }
+  if (styles.opacity !== void 0) {
+    const opacityClass = mapOpacity(styles.opacity);
+    if (opacityClass) classes.push(addStatePrefix(prefix, opacityClass));
+  }
+  return classes.join(" ");
+}
 var sizeMap = {
   xs: "w-3 h-3",
   sm: "w-4 h-4",
@@ -2499,6 +2528,9 @@ var Box = react.forwardRef(function Box2({
   order,
   zIndex,
   theme,
+  hover,
+  focus,
+  active,
   as = "div",
   render,
   className,
@@ -2553,6 +2585,9 @@ var Box = react.forwardRef(function Box2({
     mapPointerEvents(pointerEvents),
     mapAlignSelf(alignSelf),
     theme && `${theme}-theme`,
+    mapStateStyles("hover", hover),
+    mapStateStyles("focus", focus),
+    mapStateStyles("active", active),
     className
   );
   const widthStyle = getSizingStyle(width, isWidthPreset);
@@ -2759,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 });
@@ -2834,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
@@ -3464,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
       ),
@@ -3751,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",
@@ -4482,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(
@@ -4493,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}%` }
     }
   );
@@ -4519,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",
@@ -4562,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
       ),
@@ -4806,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)`;
@@ -4814,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%)" }
@@ -4830,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 })
       ] });
     } })
@@ -4897,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
       ),
@@ -5063,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