@yomologic/react-ui 0.6.6 → 0.6.7

package/dist/index.js

@@ -4419,6 +4419,13 @@ var Nav = import_react21.default.forwardRef(
       lg: "px-4 py-2.5",
       xl: "px-5 py-3"
     };
+    const mobilePaddingStyles = {
+      xs: "px-3 py-2.5",
+      sm: "px-3 py-3",
+      md: "px-4 py-3",
+      lg: "px-4 py-3.5",
+      xl: "px-5 py-4"
+    };
     const fontSizeStyles = {
       xs: "[font-size:var(--nav-font-size-xs)]",
       sm: "[font-size:var(--nav-font-size-sm)]",
@@ -4427,16 +4434,16 @@ var Nav = import_react21.default.forwardRef(
       xl: "[font-size:var(--nav-font-size-xl)]"
     };
     const variantItemStyles = {
-      primary: "rounded-md hover:bg-(--color-primary)/10 hover:text-(--color-primary) transition-colors duration-150",
-      secondary: "rounded-md hover:bg-(--color-muted) transition-colors duration-150",
-      ghost: "rounded-md hover:bg-(--color-primary)/5 transition-colors duration-150",
-      underline: "relative hover:text-(--color-primary) transition-colors duration-150 after:content-[''] after:absolute after:bottom-0 after:left-0 after:h-0.5 after:bg-(--color-primary) after:w-0 hover:after:w-full after:transition-all after:duration-300"
+      primary: "rounded-md hover:bg-(--color-primary)/10 hover:text-(--color-primary) active:bg-(--color-primary)/20 transition-colors duration-150",
+      secondary: "rounded-md hover:bg-(--color-muted) active:bg-(--color-muted)/80 transition-colors duration-150",
+      ghost: "rounded-md hover:text-(--color-primary) active:text-(--color-primary) transition-colors duration-150",
+      underline: "relative hover:text-(--color-primary) active:text-(--color-primary) transition-colors duration-150 after:content-[''] after:absolute after:bottom-0 after:left-0 after:right-0 after:h-0.5 after:bg-(--color-primary) after:scale-x-0 hover:after:scale-x-100 active:after:scale-x-100 after:transition-transform after:duration-300 after:origin-center"
     };
     const activeItemStyles = {
-      primary: "bg-(--color-primary) text-white hover:bg-(--color-primary) hover:text-white",
-      secondary: "bg-(--color-muted) text-(--color-foreground) font-semibold",
+      primary: "bg-(--color-primary) text-white hover:bg-(--color-primary) hover:text-white active:bg-(--color-primary)/90",
+      secondary: "bg-(--color-muted) text-(--color-foreground) font-semibold active:bg-(--color-muted)/80",
       ghost: "text-(--color-primary) font-medium",
-      underline: "text-(--color-primary) after:content-[''] after:absolute after:bottom-0 after:left-0 after:h-0.5 after:w-full after:bg-(--color-primary)"
+      underline: "text-(--color-primary) after:content-[''] after:absolute after:bottom-0 after:left-0 after:right-0 after:h-0.5 after:scale-x-100 after:bg-(--color-primary)"
     };
     const breakpointClasses = {
       sm: "sm:hidden",
@@ -4484,11 +4491,12 @@ var Nav = import_react21.default.forwardRef(
       const hasChildren = item.children && item.children.length > 0;
       const itemBaseStyles = cn(
         "flex items-center [gap:var(--nav-gap)] font-medium text-(--color-foreground) cursor-pointer select-none",
-        itemPaddingStyles[size],
+        isMobile ? mobilePaddingStyles[size] : itemPaddingStyles[size],
         fontSizeStyles[size],
         variantItemStyles[variant],
         isActive && activeItemStyles[variant],
         orientation === "vertical" && "w-full",
+        isMobile && "w-full",
         item.disabled && "opacity-50 cursor-not-allowed"
       );
       const content = /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_jsx_runtime22.Fragment, { children: [