@umami/react-zen 0.232.0 → 0.233.0

package/dist/index.mjs

@@ -2263,6 +2263,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",
@@ -2478,6 +2509,9 @@ var Box = forwardRef(function Box2({
   order,
   zIndex,
   theme,
+  hover,
+  focus,
+  active,
   as = "div",
   render,
   className,
@@ -2532,6 +2566,9 @@ var Box = 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);