@opensite/ui 1.0.9 → 1.1.1

package/dist/navbar-search-focused.cjs

@@ -992,6 +992,22 @@ var NavbarLogo = ({
     }
   );
 };
+function Input({ className, type, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "input",
+    {
+      type,
+      "data-slot": "input",
+      className: cn(
+        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+        "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+        className
+      ),
+      ...props
+    }
+  );
+}
 function NavigationMenu({
   className,
   children,
@@ -1093,6 +1109,8 @@ var NavbarMobileMenu = ({
   children,
   className,
   contentClassName,
+  closeContainerClassName,
+  closeIconClassName,
   title = "Mobile Navigation"
 }) => {
   React__namespace.useEffect(() => {
@@ -1117,18 +1135,27 @@ var NavbarMobileMenu = ({
       "data-state": open ? "open" : "closed",
       children: [
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sr-only", children: /* @__PURE__ */ jsxRuntime.jsx("h2", { children: title }) }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-0 left-0 right-0 p-4 bg-background flex justify-end items-center z-10 w-screen", children: /* @__PURE__ */ jsxRuntime.jsxs(
-          "button",
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
           {
-            onClick: onClose,
-            className: "flex size-10 items-center justify-center rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none",
-            "aria-label": "Close mobile menu",
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/x", className: "size-4" }),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Close" })
-            ]
+            className: cn(
+              "absolute top-0 left-0 right-0 p-4 bg-background flex justify-end items-center z-10 w-screen",
+              closeContainerClassName
+            ),
+            children: /* @__PURE__ */ jsxRuntime.jsxs(
+              "button",
+              {
+                onClick: onClose,
+                className: "flex size-10 items-center justify-center rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none",
+                "aria-label": "Close mobile menu",
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/x", className: cn("size-4", closeIconClassName) }),
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Close" })
+                ]
+              }
+            )
           }
-        ) }),
+        ),
         /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
@@ -1205,6 +1232,11 @@ var NavbarSearchFocused = ({
   optixFlowConfig
 }) => {
   const [isOpen, setIsOpen] = React.useState(false);
+  const [searchQuery, setSearchQuery] = React.useState("");
+  const handleSearchSubmit = (e) => {
+    e.preventDefault();
+    onSearch?.(searchQuery);
+  };
   const renderNavigation = (items) => {
     if (navigationSlot) return navigationSlot;
     if (!items || items.length === 0) return null;
@@ -1250,7 +1282,7 @@ var NavbarSearchFocused = ({
       );
     });
   }, [authActionsSlot, authActions]);
-  const renderMobileMenuActions = React.useMemo(() => {
+  React.useMemo(() => {
     if (mobileMenuActionsSlot) return mobileMenuActionsSlot;
     if (!mobileMenuActions || mobileMenuActions.length === 0) return null;
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-2", children: mobileMenuActions.map((action, index) => {
@@ -1279,100 +1311,157 @@ var NavbarSearchFocused = ({
     sectionContainerMaxWidth,
     spacingOverride
   } = getNavbarLayoutClasses(layoutVariant, { className, containerClassName });
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    Section,
-    {
-      background,
-      spacing: spacingOverride ?? spacing,
-      className: sectionClasses,
-      pattern,
-      patternOpacity,
-      containerClassName: sectionContainerClassName,
-      containerMaxWidth: sectionContainerMaxWidth,
-      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: containerWrapperClasses, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: navWrapperClasses, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: innerContainerClasses, children: /* @__PURE__ */ jsxRuntime.jsxs(
-        "nav",
-        {
-          className: cn(
-            "flex items-center gap-4 py-3 lg:gap-8",
-            navClassName
-          ),
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              NavbarLogo,
-              {
-                logo,
-                logoSlot,
-                logoClassName,
-                optixFlowConfig
-              }
-            ),
-            /* @__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) ?? [])
-              }
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Section,
+      {
+        background,
+        spacing: spacingOverride ?? spacing,
+        className: sectionClasses,
+        pattern,
+        patternOpacity,
+        containerClassName: sectionContainerClassName,
+        containerMaxWidth: sectionContainerMaxWidth,
+        children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: containerWrapperClasses, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: navWrapperClasses, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: innerContainerClasses, children: /* @__PURE__ */ jsxRuntime.jsxs(
+          "nav",
+          {
+            className: cn(
+              "flex items-center justify-between gap-4 py-3 lg:gap-6",
+              navClassName
             ),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "div",
-              {
-                className: cn(
-                  "hidden shrink-0 items-center gap-2 lg:flex",
-                  actionsClassName
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                NavbarLogo,
+                {
+                  logo,
+                  logoSlot,
+                  logoClassName,
+                  optixFlowConfig
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                NavigationMenu,
+                {
+                  className: cn("hidden lg:flex", navigationMenuClassName),
+                  children: renderNavigation(navItems ?? [])
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden flex-1 max-w-md lg:block", children: searchSlot ?? /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit: handleSearchSubmit, className: "relative", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  DynamicIcon,
+                  {
+                    name: "lucide/search",
+                    size: 16,
+                    className: "absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground"
+                  }
                 ),
-                children: renderAuthActions
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsxs(
-              Pressable,
-              {
-                variant: "ghost",
-                size: "icon",
-                asButton: true,
-                className: "lg:hidden",
-                onClick: () => setIsOpen(!isOpen),
-                children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/menu", size: 20 }),
-                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Toggle menu" })
-                ]
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              NavbarMobileMenu,
-              {
-                open: isOpen,
-                onClose: () => setIsOpen(false),
-                title: "Navigation Menu",
-                children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "max-w-screen-sm mx-auto", 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 mt-6", children: renderMobileMenuActions })
-                ] })
-              }
-            )
-          ]
-        }
-      ) }) }) })
-    }
-  );
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  Input,
+                  {
+                    type: "search",
+                    placeholder: typeof searchPlaceholder === "string" ? searchPlaceholder : "Search...",
+                    value: searchQuery,
+                    onChange: (e) => setSearchQuery(e.target.value),
+                    className: "pl-9 pr-4"
+                  }
+                )
+              ] }) }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: cn(
+                    "hidden shrink-0 items-center gap-2 lg:flex",
+                    actionsClassName
+                  ),
+                  children: renderAuthActions
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                Pressable,
+                {
+                  variant: "ghost",
+                  size: "icon",
+                  asButton: true,
+                  className: "lg:hidden",
+                  onClick: () => setIsOpen(!isOpen),
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/menu", size: 20 }),
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Toggle menu" })
+                  ]
+                }
+              )
+            ]
+          }
+        ) }) }) })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      MobileNavigationMenu,
+      {
+        open: isOpen,
+        setOpen: setIsOpen,
+        navItems: navItems ?? [],
+        navigationSlot,
+        mobileMenuActions: mobileMenuActions ?? authActions,
+        mobileMenuActionsSlot: mobileMenuActionsSlot ?? authActionsSlot
+      }
+    )
+  ] });
+};
+var MobileNavigationMenu = ({
+  open,
+  setOpen,
+  navItems,
+  navigationSlot,
+  mobileMenuActions,
+  mobileMenuActionsSlot
+}) => {
+  const handleClose = () => setOpen(false);
+  const renderMobileActions = React.useMemo(() => {
+    if (mobileMenuActionsSlot) return mobileMenuActionsSlot;
+    if (!mobileMenuActions || mobileMenuActions.length === 0) return null;
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-6 flex flex-col gap-4", children: mobileMenuActions.map((action, index) => {
+      const {
+        label,
+        icon,
+        iconAfter,
+        children,
+        className: actionClassName,
+        ...pressableProps
+      } = action;
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        Pressable,
+        {
+          asButton: true,
+          className: cn("w-full", actionClassName),
+          onClick: handleClose,
+          ...pressableProps,
+          children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            icon,
+            label,
+            iconAfter
+          ] })
+        },
+        index
+      );
+    }) });
+  }, [mobileMenuActionsSlot, mobileMenuActions]);
+  return /* @__PURE__ */ jsxRuntime.jsx(NavbarMobileMenu, { open, onClose: handleClose, title: "Navigation Menu", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-w-screen-sm mx-auto", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-6", children: [
+    navigationSlot ?? /* @__PURE__ */ jsxRuntime.jsx("nav", { className: "flex flex-col", children: navItems.map((item, index) => /* @__PURE__ */ jsxRuntime.jsxs(
+      Pressable,
+      {
+        href: item.url,
+        className: "flex h-15 items-center gap-2 rounded-md px-4 text-left text-base leading-[3.75] font-normal text-muted-foreground ring-ring/10 outline-ring/50 transition-all hover:bg-muted focus-visible:ring-4 focus-visible:outline-1",
+        onClick: handleClose,
+        children: [
+          item.icon ?? (item.iconName && /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: item.iconName, size: 16 })),
+          item.title
+        ]
+      },
+      `nav-link-${index}`
+    )) }),
+    renderMobileActions
+  ] }) }) });
 };
 
 exports.NavbarSearchFocused = NavbarSearchFocused;