@umami/react-zen 0.232.0 → 0.233.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

@@ -2284,6 +2284,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 +2530,9 @@ var Box = react.forwardRef(function Box2({
   order,
   zIndex,
   theme,
+  hover,
+  focus,
+  active,
   as = "div",
   render,
   className,
@@ -2553,6 +2587,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);