@opensite/ui 0.4.2 → 0.4.4

package/dist/navbar-search-focused.cjs

@@ -885,6 +885,7 @@ var Section = React__namespace.default.forwardRef(
     patternClassName,
     ...props
   }, ref) => {
+    const effectivePatternOpacity = patternOpacity !== void 0 ? patternOpacity : pattern ? 1 : 0;
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "section",
       {
@@ -904,7 +905,7 @@ var Section = React__namespace.default.forwardRef(
             PatternBackground,
             {
               pattern,
-              opacity: patternOpacity,
+              opacity: effectivePatternOpacity,
               className: patternClassName
             }
           ),
@@ -953,7 +954,7 @@ function NavigationMenuList({
     {
       "data-slot": "navigation-menu-list",
       className: cn(
-        "group flex flex-1 list-none items-center justify-center gap-1",
+        "group flex flex-1 list-none items-center justify-center gap-6",
         className
       ),
       ...props
@@ -974,7 +975,7 @@ function NavigationMenuItem({
   );
 }
 var navigationMenuTriggerStyle = classVarianceAuthority.cva(
-  "group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=open]:hover:bg-accent data-[state=open]:text-accent-foreground data-[state=open]:focus:bg-accent data-[state=open]:bg-accent/50 focus-visible:ring-ring/50 outline-none transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1"
+  "group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium text-foreground/80 hover:bg-muted hover:text-foreground focus:bg-muted focus:text-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=open]:hover:bg-muted data-[state=open]:text-foreground data-[state=open]:focus:bg-muted data-[state=open]:bg-muted/50 focus-visible:ring-ring/50 outline-none transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1"
 );
 function NavigationMenuViewport({
   className,
@@ -1009,7 +1010,7 @@ function NavigationMenuLink({
     {
       "data-slot": "navigation-menu-link",
       className: cn(
-        "data-[active=true]:focus:bg-accent data-[active=true]:hover:bg-accent data-[active=true]:bg-accent/50 data-[active=true]:text-accent-foreground hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus-visible:ring-ring/50 [&_svg:not([class*='text-'])]:text-muted-foreground flex flex-col gap-1 rounded-sm p-2 text-sm transition-all outline-none focus-visible:ring-[3px] focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4",
+        "data-[active=true]:focus:bg-muted data-[active=true]:hover:bg-muted data-[active=true]:bg-muted/50 data-[active=true]:text-foreground hover:bg-muted hover:text-foreground focus:bg-muted focus:text-foreground focus-visible:ring-ring/50 [&_svg:not([class*='text-'])]:text-muted-foreground flex flex-col gap-1 rounded-sm p-2 text-sm transition-all outline-none focus-visible:ring-[3px] focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4",
         className
       ),
       ...props
@@ -1164,7 +1165,15 @@ var NavbarSearchFocused = ({
     if (authActionsSlot) return authActionsSlot;
     if (!authActions || authActions.length === 0) return null;
     return authActions.map((action, index) => {
-      const { label, icon, iconAfter, children, className: actionClassName, "aria-label": ariaLabel, ...pressableProps } = action;
+      const {
+        label,
+        icon,
+        iconAfter,
+        children,
+        className: actionClassName,
+        "aria-label": ariaLabel,
+        ...pressableProps
+      } = action;
       return /* @__PURE__ */ jsxRuntime.jsx(
         Pressable,
         {
@@ -1210,48 +1219,75 @@ var NavbarSearchFocused = ({
       className: cn("border-b", className),
       pattern,
       patternOpacity,
-      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("container", containerClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("nav", { className: cn("flex items-center gap-4 py-3 lg:gap-8", navClassName), children: [
-        renderLogo(),
-        /* @__PURE__ */ jsxRuntime.jsx(NavigationMenu, { className: cn("hidden lg:flex", navigationMenuClassName), children: renderNavigation(navItems?.slice(0, 2) ?? []) }),
-        /* @__PURE__ */ jsxRuntime.jsx(NavigationMenu, { className: cn("hidden lg:flex", navigationMenuClassName), children: renderNavigation(navItems?.slice(2) ?? []) }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("hidden shrink-0 items-center gap-2 lg:flex", actionsClassName), children: renderAuthActions() }),
-        /* @__PURE__ */ jsxRuntime.jsxs(Sheet, { open: isOpen, onOpenChange: setIsOpen, children: [
-          /* @__PURE__ */ jsxRuntime.jsx(SheetTrigger, { asChild: true, className: "lg:hidden", children: /* @__PURE__ */ jsxRuntime.jsxs(
-            Pressable,
-            {
-              variant: "ghost",
-              size: "icon",
-              asButton: true,
-              onClick: () => {
-              },
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/menu", size: 20 }),
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Toggle menu" })
-              ]
-            }
-          ) }),
-          /* @__PURE__ */ jsxRuntime.jsxs(SheetContent, { side: "right", className: "w-[280px]", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(SheetTitle, { className: "sr-only", children: "Navigation Menu" }),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-6 pt-8", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-2", children: navItems?.map((item, index) => /* @__PURE__ */ jsxRuntime.jsxs(
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("container", containerClassName), children: /* @__PURE__ */ jsxRuntime.jsxs(
+        "nav",
+        {
+          className: cn("flex items-center gap-4 py-3 lg:gap-8", navClassName),
+          children: [
+            renderLogo(),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              NavigationMenu,
+              {
+                className: cn("hidden lg:flex", navigationMenuClassName),
+                children: renderNavigation(navItems?.slice(0, 2) ?? [])
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              NavigationMenu,
+              {
+                className: cn("hidden lg:flex", navigationMenuClassName),
+                children: renderNavigation(navItems?.slice(2) ?? [])
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: cn(
+                  "hidden shrink-0 items-center gap-2 lg:flex",
+                  actionsClassName
+                ),
+                children: renderAuthActions()
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsxs(Sheet, { open: isOpen, onOpenChange: setIsOpen, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(SheetTrigger, { asChild: true, className: "lg:hidden", children: /* @__PURE__ */ jsxRuntime.jsxs(
                 Pressable,
                 {
-                  href: item.url,
-                  className: "flex items-center gap-2 rounded-md py-2 text-base font-medium",
-                  onClick: () => setIsOpen(false),
+                  variant: "ghost",
+                  size: "icon",
+                  asButton: true,
+                  onClick: () => {
+                  },
                   children: [
-                    item.icon ?? (item.iconName && /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: item.iconName, size: 16 })),
-                    item.title
+                    /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/menu", size: 20 }),
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Toggle menu" })
                   ]
-                },
-                index
-              )) }),
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-t pt-4", children: renderMobileMenuActions() }),
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-t pt-4", children: /* @__PURE__ */ jsxRuntime.jsx(Pressable, { asButton: true, href: "#", className: "w-full", children: "Sign in" }) })
+                }
+              ) }),
+              /* @__PURE__ */ jsxRuntime.jsxs(SheetContent, { side: "right", className: "w-[280px]", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(SheetTitle, { className: "sr-only", children: "Navigation Menu" }),
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-6 pt-8", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-2", children: navItems?.map((item, index) => /* @__PURE__ */ jsxRuntime.jsxs(
+                    Pressable,
+                    {
+                      href: item.url,
+                      className: "flex items-center gap-2 rounded-md py-2 text-base font-medium",
+                      onClick: () => setIsOpen(false),
+                      children: [
+                        item.icon ?? (item.iconName && /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: item.iconName, size: 16 })),
+                        item.title
+                      ]
+                    },
+                    index
+                  )) }),
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-t pt-4", children: renderMobileMenuActions() }),
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-t pt-4", children: /* @__PURE__ */ jsxRuntime.jsx(Pressable, { asButton: true, href: "#", className: "w-full", children: "Sign in" }) })
+                ] })
+              ] })
             ] })
-          ] })
-        ] })
-      ] }) })
+          ]
+        }
+      ) })
     }
   );
 };

package/dist/navbar-search-focused.d.cts

@@ -1,11 +1,10 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
-import { P as PatternName } from './pattern-background-BXRgbd05.cjs';
+import { P as PatternName } from './pattern-background-a7gKHzHy.cjs';
 import { SectionBackground, SectionSpacing } from './types.cjs';
-import { A as ActionConfig, O as OptixFlowConfig } from './blocks-CJYRLpXR.cjs';
-import './patternSvgs-c5ZNVoTT.cjs';
+import { A as ActionConfig, O as OptixFlowConfig } from './blocks-Cohq4eio.cjs';
 import 'class-variance-authority';
-import './button-variants-DJbzb6lO.cjs';
+import './button-variants-lRElsmTc.cjs';
 import 'class-variance-authority/types';
 
 interface NavItem {
@@ -107,7 +106,7 @@ interface NavbarSearchFocusedProps {
     /**
      * Optional background pattern name or URL
      */
-    pattern?: PatternName | string;
+    pattern?: PatternName | undefined;
     /**
      * Pattern overlay opacity (0-1)
      */

package/dist/navbar-search-focused.d.ts

@@ -1,11 +1,10 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
-import { P as PatternName } from './pattern-background-z0e5HB0v.js';
+import { P as PatternName } from './pattern-background-a7gKHzHy.js';
 import { SectionBackground, SectionSpacing } from './types.js';
-import { A as ActionConfig, O as OptixFlowConfig } from './blocks-BWc_7JNA.js';
-import './patternSvgs-c5ZNVoTT.js';
+import { A as ActionConfig, O as OptixFlowConfig } from './blocks-k17uluAz.js';
 import 'class-variance-authority';
-import './button-variants-DJbzb6lO.js';
+import './button-variants-lRElsmTc.js';
 import 'class-variance-authority/types';
 
 interface NavItem {
@@ -107,7 +106,7 @@ interface NavbarSearchFocusedProps {
     /**
      * Optional background pattern name or URL
      */
-    pattern?: PatternName | string;
+    pattern?: PatternName | undefined;
     /**
      * Pattern overlay opacity (0-1)
      */

package/dist/navbar-search-focused.js

@@ -862,6 +862,7 @@ var Section = React__default.forwardRef(
     patternClassName,
     ...props
   }, ref) => {
+    const effectivePatternOpacity = patternOpacity !== void 0 ? patternOpacity : pattern ? 1 : 0;
     return /* @__PURE__ */ jsxs(
       "section",
       {
@@ -881,7 +882,7 @@ var Section = React__default.forwardRef(
             PatternBackground,
             {
               pattern,
-              opacity: patternOpacity,
+              opacity: effectivePatternOpacity,
               className: patternClassName
             }
           ),
@@ -930,7 +931,7 @@ function NavigationMenuList({
     {
       "data-slot": "navigation-menu-list",
       className: cn(
-        "group flex flex-1 list-none items-center justify-center gap-1",
+        "group flex flex-1 list-none items-center justify-center gap-6",
         className
       ),
       ...props
@@ -951,7 +952,7 @@ function NavigationMenuItem({
   );
 }
 var navigationMenuTriggerStyle = cva(
-  "group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=open]:hover:bg-accent data-[state=open]:text-accent-foreground data-[state=open]:focus:bg-accent data-[state=open]:bg-accent/50 focus-visible:ring-ring/50 outline-none transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1"
+  "group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium text-foreground/80 hover:bg-muted hover:text-foreground focus:bg-muted focus:text-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=open]:hover:bg-muted data-[state=open]:text-foreground data-[state=open]:focus:bg-muted data-[state=open]:bg-muted/50 focus-visible:ring-ring/50 outline-none transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1"
 );
 function NavigationMenuViewport({
   className,
@@ -986,7 +987,7 @@ function NavigationMenuLink({
     {
       "data-slot": "navigation-menu-link",
       className: cn(
-        "data-[active=true]:focus:bg-accent data-[active=true]:hover:bg-accent data-[active=true]:bg-accent/50 data-[active=true]:text-accent-foreground hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus-visible:ring-ring/50 [&_svg:not([class*='text-'])]:text-muted-foreground flex flex-col gap-1 rounded-sm p-2 text-sm transition-all outline-none focus-visible:ring-[3px] focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4",
+        "data-[active=true]:focus:bg-muted data-[active=true]:hover:bg-muted data-[active=true]:bg-muted/50 data-[active=true]:text-foreground hover:bg-muted hover:text-foreground focus:bg-muted focus:text-foreground focus-visible:ring-ring/50 [&_svg:not([class*='text-'])]:text-muted-foreground flex flex-col gap-1 rounded-sm p-2 text-sm transition-all outline-none focus-visible:ring-[3px] focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4",
         className
       ),
       ...props
@@ -1141,7 +1142,15 @@ var NavbarSearchFocused = ({
     if (authActionsSlot) return authActionsSlot;
     if (!authActions || authActions.length === 0) return null;
     return authActions.map((action, index) => {
-      const { label, icon, iconAfter, children, className: actionClassName, "aria-label": ariaLabel, ...pressableProps } = action;
+      const {
+        label,
+        icon,
+        iconAfter,
+        children,
+        className: actionClassName,
+        "aria-label": ariaLabel,
+        ...pressableProps
+      } = action;
       return /* @__PURE__ */ jsx(
         Pressable,
         {
@@ -1187,48 +1196,75 @@ var NavbarSearchFocused = ({
       className: cn("border-b", className),
       pattern,
       patternOpacity,
-      children: /* @__PURE__ */ jsx("div", { className: cn("container", containerClassName), children: /* @__PURE__ */ jsxs("nav", { className: cn("flex items-center gap-4 py-3 lg:gap-8", navClassName), children: [
-        renderLogo(),
-        /* @__PURE__ */ jsx(NavigationMenu, { className: cn("hidden lg:flex", navigationMenuClassName), children: renderNavigation(navItems?.slice(0, 2) ?? []) }),
-        /* @__PURE__ */ jsx(NavigationMenu, { className: cn("hidden lg:flex", navigationMenuClassName), children: renderNavigation(navItems?.slice(2) ?? []) }),
-        /* @__PURE__ */ jsx("div", { className: cn("hidden shrink-0 items-center gap-2 lg:flex", actionsClassName), children: renderAuthActions() }),
-        /* @__PURE__ */ jsxs(Sheet, { open: isOpen, onOpenChange: setIsOpen, children: [
-          /* @__PURE__ */ jsx(SheetTrigger, { asChild: true, className: "lg:hidden", children: /* @__PURE__ */ jsxs(
-            Pressable,
-            {
-              variant: "ghost",
-              size: "icon",
-              asButton: true,
-              onClick: () => {
-              },
-              children: [
-                /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/menu", size: 20 }),
-                /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Toggle menu" })
-              ]
-            }
-          ) }),
-          /* @__PURE__ */ jsxs(SheetContent, { side: "right", className: "w-[280px]", children: [
-            /* @__PURE__ */ jsx(SheetTitle, { className: "sr-only", children: "Navigation Menu" }),
-            /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-6 pt-8", children: [
-              /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2", children: navItems?.map((item, index) => /* @__PURE__ */ jsxs(
+      children: /* @__PURE__ */ jsx("div", { className: cn("container", containerClassName), children: /* @__PURE__ */ jsxs(
+        "nav",
+        {
+          className: cn("flex items-center gap-4 py-3 lg:gap-8", navClassName),
+          children: [
+            renderLogo(),
+            /* @__PURE__ */ jsx(
+              NavigationMenu,
+              {
+                className: cn("hidden lg:flex", navigationMenuClassName),
+                children: renderNavigation(navItems?.slice(0, 2) ?? [])
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              NavigationMenu,
+              {
+                className: cn("hidden lg:flex", navigationMenuClassName),
+                children: renderNavigation(navItems?.slice(2) ?? [])
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: cn(
+                  "hidden shrink-0 items-center gap-2 lg:flex",
+                  actionsClassName
+                ),
+                children: renderAuthActions()
+              }
+            ),
+            /* @__PURE__ */ jsxs(Sheet, { open: isOpen, onOpenChange: setIsOpen, children: [
+              /* @__PURE__ */ jsx(SheetTrigger, { asChild: true, className: "lg:hidden", children: /* @__PURE__ */ jsxs(
                 Pressable,
                 {
-                  href: item.url,
-                  className: "flex items-center gap-2 rounded-md py-2 text-base font-medium",
-                  onClick: () => setIsOpen(false),
+                  variant: "ghost",
+                  size: "icon",
+                  asButton: true,
+                  onClick: () => {
+                  },
                   children: [
-                    item.icon ?? (item.iconName && /* @__PURE__ */ jsx(DynamicIcon, { name: item.iconName, size: 16 })),
-                    item.title
+                    /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/menu", size: 20 }),
+                    /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Toggle menu" })
                   ]
-                },
-                index
-              )) }),
-              /* @__PURE__ */ jsx("div", { className: "border-t pt-4", children: renderMobileMenuActions() }),
-              /* @__PURE__ */ jsx("div", { className: "border-t pt-4", children: /* @__PURE__ */ jsx(Pressable, { asButton: true, href: "#", className: "w-full", children: "Sign in" }) })
+                }
+              ) }),
+              /* @__PURE__ */ jsxs(SheetContent, { side: "right", className: "w-[280px]", children: [
+                /* @__PURE__ */ jsx(SheetTitle, { className: "sr-only", children: "Navigation Menu" }),
+                /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-6 pt-8", children: [
+                  /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2", children: navItems?.map((item, index) => /* @__PURE__ */ jsxs(
+                    Pressable,
+                    {
+                      href: item.url,
+                      className: "flex items-center gap-2 rounded-md py-2 text-base font-medium",
+                      onClick: () => setIsOpen(false),
+                      children: [
+                        item.icon ?? (item.iconName && /* @__PURE__ */ jsx(DynamicIcon, { name: item.iconName, size: 16 })),
+                        item.title
+                      ]
+                    },
+                    index
+                  )) }),
+                  /* @__PURE__ */ jsx("div", { className: "border-t pt-4", children: renderMobileMenuActions() }),
+                  /* @__PURE__ */ jsx("div", { className: "border-t pt-4", children: /* @__PURE__ */ jsx(Pressable, { asButton: true, href: "#", className: "w-full", children: "Sign in" }) })
+                ] })
+              ] })
             ] })
-          ] })
-        ] })
-      ] }) })
+          ]
+        }
+      ) })
     }
   );
 };