jaci-ui 0.5.0 → 0.6.1

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## 0.6.1
+
+### Patch Changes
+
+- 06fa9ee: Make the compound `Navbar` namespace compatible with Next.js App Router Server Components.
+
+## 0.6.0
+
+### Minor Changes
+
+- 165083c: Improve navigation and overlay dismissal, focus, scroll-lock and responsive behavior, and add the accessible controlled `Stepper` component.
+
 ## 0.5.0
 
 ### Minor Changes

package/README.md

@@ -172,6 +172,37 @@ disabled rows, loading/empty/error states, compact density, alignment and respon
 `List` remains a semantic `ul`/`ol`, and `Command` and `TreeView` expose their keyboard and
 selection state without requiring a data engine.
 
+Navigation overlays keep focus and dismissal behavior in the Base UI primitive. Dialog-like
+surfaces lock page scroll, restore focus to their trigger, and close with Escape or an outside
+press by default. Popovers and menus stay within the viewport and accept the native Base UI
+`initialFocus`, `finalFocus`, `modal` and `disablePointerDismissal` options.
+
+Use `Stepper` for linear or freely navigable workflows. Its public value is a string and it can
+submit the current step through a native hidden field:
+
+```tsx
+<Stepper.Root value={step} onValueChange={setStep} linear name="checkout-step">
+  <Stepper.List>
+    <Stepper.Item value="account">
+      <Stepper.Trigger>
+        <Stepper.Indicator />
+        <Stepper.Title>Account</Stepper.Title>
+      </Stepper.Trigger>
+      <Stepper.Content>Profile details</Stepper.Content>
+    </Stepper.Item>
+    <Stepper.Item value="payment">
+      <Stepper.Trigger>
+        <Stepper.Indicator />
+        <Stepper.Title>Payment</Stepper.Title>
+      </Stepper.Trigger>
+      <Stepper.Content>Billing information</Stepper.Content>
+    </Stepper.Item>
+  </Stepper.List>
+  <Stepper.Previous />
+  <Stepper.Next />
+</Stepper.Root>
+```
+
 Small composition helpers keep common layouts consistent:
 
 ```tsx
@@ -189,14 +220,30 @@ also expose `.Root` aliases for compound composition.
 ## Server rendering and frameworks
 
 Static components are server-safe and interactive modules preserve their `"use client"` boundary.
-In Next.js App Router, render interactive compositions inside a client component and import the
-global stylesheet from `app/layout.tsx`:
+In Next.js App Router, import the global stylesheet from `app/layout.tsx`:
 
 ```tsx
 // app/layout.tsx
 import "jaci-ui/styles.css";
 ```
 
+The compound `Navbar` namespace is safe to use directly from a Server Component; controlled
+navigation state and event handlers should live in a client component as usual:
+
+```tsx
+import { Navbar } from "jaci-ui";
+
+export default function Page() {
+  return (
+    <Navbar.Root>
+      <Navbar.Bar aria-label="Primary navigation">
+        <Navbar.Item href="/docs">Documentation</Navbar.Item>
+      </Navbar.Bar>
+    </Navbar.Root>
+  );
+}
+```
+
 Vite, React Router, Remix and other client entry points can import the stylesheet from their
 application root. Jaci UI does not access `window`, `document`, storage or media APIs during
 module import or server rendering.

package/dist/components/navigation/index.d.cts

@@ -1,2 +1,3 @@
-import { BottomNavigation, BottomNavigationItem, BottomNavigationItemProps, BottomNavigationProps, BottomNavigationRoot, Navbar, NavbarBar, NavbarBarProps, NavbarCenter, NavbarCenterProps, NavbarClose, NavbarCloseProps, NavbarDrawer, NavbarDrawerPortalProps, NavbarDrawerProps, NavbarEnd, NavbarEndProps, NavbarItem, NavbarItemProps, NavbarRoot, NavbarRootProps, NavbarStart, NavbarStartProps, NavbarToggle, NavbarToggleProps } from "./navigation.cjs";
+import { BottomNavigation, BottomNavigationItem, BottomNavigationItemProps, BottomNavigationProps, BottomNavigationRoot, NavbarBar, NavbarBarProps, NavbarCenter, NavbarCenterProps, NavbarClose, NavbarCloseProps, NavbarDrawer, NavbarDrawerPortalProps, NavbarDrawerProps, NavbarEnd, NavbarEndProps, NavbarItem, NavbarItemProps, NavbarRoot, NavbarRootProps, NavbarStart, NavbarStartProps, NavbarToggle, NavbarToggleProps } from "./navigation.cjs";
+import { Navbar } from "./navbar-namespace.cjs";
 export { BottomNavigation, BottomNavigationItem, type BottomNavigationItemProps, type BottomNavigationProps, BottomNavigationRoot, Navbar, NavbarBar, type NavbarBarProps, NavbarCenter, type NavbarCenterProps, NavbarClose, type NavbarCloseProps, NavbarDrawer, type NavbarDrawerPortalProps, type NavbarDrawerProps, NavbarEnd, type NavbarEndProps, NavbarItem, type NavbarItemProps, NavbarRoot, type NavbarRootProps, NavbarStart, type NavbarStartProps, NavbarToggle, type NavbarToggleProps };

package/dist/components/navigation/index.d.ts

@@ -1,2 +1,3 @@
-import { BottomNavigation, BottomNavigationItem, BottomNavigationItemProps, BottomNavigationProps, BottomNavigationRoot, Navbar, NavbarBar, NavbarBarProps, NavbarCenter, NavbarCenterProps, NavbarClose, NavbarCloseProps, NavbarDrawer, NavbarDrawerPortalProps, NavbarDrawerProps, NavbarEnd, NavbarEndProps, NavbarItem, NavbarItemProps, NavbarRoot, NavbarRootProps, NavbarStart, NavbarStartProps, NavbarToggle, NavbarToggleProps } from "./navigation.js";
+import { BottomNavigation, BottomNavigationItem, BottomNavigationItemProps, BottomNavigationProps, BottomNavigationRoot, NavbarBar, NavbarBarProps, NavbarCenter, NavbarCenterProps, NavbarClose, NavbarCloseProps, NavbarDrawer, NavbarDrawerPortalProps, NavbarDrawerProps, NavbarEnd, NavbarEndProps, NavbarItem, NavbarItemProps, NavbarRoot, NavbarRootProps, NavbarStart, NavbarStartProps, NavbarToggle, NavbarToggleProps } from "./navigation.js";
+import { Navbar } from "./navbar-namespace.js";
 export { BottomNavigation, BottomNavigationItem, type BottomNavigationItemProps, type BottomNavigationProps, BottomNavigationRoot, Navbar, NavbarBar, type NavbarBarProps, NavbarCenter, type NavbarCenterProps, NavbarClose, type NavbarCloseProps, NavbarDrawer, type NavbarDrawerPortalProps, type NavbarDrawerProps, NavbarEnd, type NavbarEndProps, NavbarItem, type NavbarItemProps, NavbarRoot, type NavbarRootProps, NavbarStart, type NavbarStartProps, NavbarToggle, type NavbarToggleProps };

package/dist/components/navigation/navbar-namespace.cjs

@@ -0,0 +1,26 @@
+const require_navigation = require("./navigation.cjs");
+//#region src/components/navigation/navbar-namespace.ts
+/**
+* Compound namespace for the responsive navigation bar.
+*
+* This file intentionally stays server-safe. Its values are client component
+* references imported from `navigation.tsx`, which lets Next.js App Router
+* consume `<Navbar.Root>` from a Server Component without losing the nested
+* properties during the RSC transform.
+*/
+const Navbar = {
+	Root: require_navigation.NavbarRoot,
+	Bar: require_navigation.NavbarBar,
+	Start: require_navigation.NavbarStart,
+	Center: require_navigation.NavbarCenter,
+	End: require_navigation.NavbarEnd,
+	Toggle: require_navigation.NavbarToggle,
+	Drawer: require_navigation.NavbarDrawer,
+	Close: require_navigation.NavbarClose,
+	Item: require_navigation.NavbarItem,
+	createHandle: require_navigation.NavbarCreateHandle
+};
+//#endregion
+exports.Navbar = Navbar;
+
+//# sourceMappingURL=navbar-namespace.cjs.map

package/dist/components/navigation/navbar-namespace.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"navbar-namespace.cjs","names":["NavbarRoot","NavbarBar","NavbarStart","NavbarCenter","NavbarEnd","NavbarToggle","NavbarDrawer","NavbarClose","NavbarItem","NavbarCreateHandle"],"sources":["../../../src/components/navigation/navbar-namespace.ts"],"sourcesContent":["import {\n  NavbarBar,\n  NavbarCenter,\n  NavbarClose,\n  NavbarCreateHandle,\n  NavbarDrawer,\n  NavbarEnd,\n  NavbarItem,\n  NavbarRoot,\n  NavbarStart,\n  NavbarToggle,\n} from \"./navigation\";\n\n/**\n * Compound namespace for the responsive navigation bar.\n *\n * This file intentionally stays server-safe. Its values are client component\n * references imported from `navigation.tsx`, which lets Next.js App Router\n * consume `<Navbar.Root>` from a Server Component without losing the nested\n * properties during the RSC transform.\n */\nexport const Navbar: {\n  Root: typeof NavbarRoot;\n  Bar: typeof NavbarBar;\n  Start: typeof NavbarStart;\n  Center: typeof NavbarCenter;\n  End: typeof NavbarEnd;\n  Toggle: typeof NavbarToggle;\n  Drawer: typeof NavbarDrawer;\n  Close: typeof NavbarClose;\n  Item: typeof NavbarItem;\n  createHandle: typeof NavbarCreateHandle;\n} = {\n  Root: NavbarRoot,\n  Bar: NavbarBar,\n  Start: NavbarStart,\n  Center: NavbarCenter,\n  End: NavbarEnd,\n  Toggle: NavbarToggle,\n  Drawer: NavbarDrawer,\n  Close: NavbarClose,\n  Item: NavbarItem,\n  createHandle: NavbarCreateHandle,\n};\n"],"mappings":";;;;;;;;;;AAqBA,MAAa,SAWT;CACF,MAAMA,mBAAAA;CACN,KAAKC,mBAAAA;CACL,OAAOC,mBAAAA;CACP,QAAQC,mBAAAA;CACR,KAAKC,mBAAAA;CACL,QAAQC,mBAAAA;CACR,QAAQC,mBAAAA;CACR,OAAOC,mBAAAA;CACP,MAAMC,mBAAAA;CACN,cAAcC,mBAAAA;AAChB"}

package/dist/components/navigation/navbar-namespace.d.cts

@@ -0,0 +1,25 @@
+import { NavbarBar, NavbarCenter, NavbarClose, NavbarCreateHandle, NavbarDrawer, NavbarEnd, NavbarItem, NavbarRoot, NavbarStart, NavbarToggle } from "./navigation.cjs";
+//#region src/components/navigation/navbar-namespace.d.ts
+/**
+ * Compound namespace for the responsive navigation bar.
+ *
+ * This file intentionally stays server-safe. Its values are client component
+ * references imported from `navigation.tsx`, which lets Next.js App Router
+ * consume `<Navbar.Root>` from a Server Component without losing the nested
+ * properties during the RSC transform.
+ */
+declare const Navbar: {
+  Root: typeof NavbarRoot;
+  Bar: typeof NavbarBar;
+  Start: typeof NavbarStart;
+  Center: typeof NavbarCenter;
+  End: typeof NavbarEnd;
+  Toggle: typeof NavbarToggle;
+  Drawer: typeof NavbarDrawer;
+  Close: typeof NavbarClose;
+  Item: typeof NavbarItem;
+  createHandle: typeof NavbarCreateHandle;
+};
+//#endregion
+export { Navbar };
+//# sourceMappingURL=navbar-namespace.d.cts.map

package/dist/components/navigation/navbar-namespace.d.ts

@@ -0,0 +1,25 @@
+import { NavbarBar, NavbarCenter, NavbarClose, NavbarCreateHandle, NavbarDrawer, NavbarEnd, NavbarItem, NavbarRoot, NavbarStart, NavbarToggle } from "./navigation.js";
+//#region src/components/navigation/navbar-namespace.d.ts
+/**
+ * Compound namespace for the responsive navigation bar.
+ *
+ * This file intentionally stays server-safe. Its values are client component
+ * references imported from `navigation.tsx`, which lets Next.js App Router
+ * consume `<Navbar.Root>` from a Server Component without losing the nested
+ * properties during the RSC transform.
+ */
+declare const Navbar: {
+  Root: typeof NavbarRoot;
+  Bar: typeof NavbarBar;
+  Start: typeof NavbarStart;
+  Center: typeof NavbarCenter;
+  End: typeof NavbarEnd;
+  Toggle: typeof NavbarToggle;
+  Drawer: typeof NavbarDrawer;
+  Close: typeof NavbarClose;
+  Item: typeof NavbarItem;
+  createHandle: typeof NavbarCreateHandle;
+};
+//#endregion
+export { Navbar };
+//# sourceMappingURL=navbar-namespace.d.ts.map

package/dist/components/navigation/navbar-namespace.js

@@ -0,0 +1,26 @@
+import { NavbarBar, NavbarCenter, NavbarClose, NavbarCreateHandle, NavbarDrawer, NavbarEnd, NavbarItem, NavbarRoot, NavbarStart, NavbarToggle } from "./navigation.js";
+//#region src/components/navigation/navbar-namespace.ts
+/**
+* Compound namespace for the responsive navigation bar.
+*
+* This file intentionally stays server-safe. Its values are client component
+* references imported from `navigation.tsx`, which lets Next.js App Router
+* consume `<Navbar.Root>` from a Server Component without losing the nested
+* properties during the RSC transform.
+*/
+const Navbar = {
+	Root: NavbarRoot,
+	Bar: NavbarBar,
+	Start: NavbarStart,
+	Center: NavbarCenter,
+	End: NavbarEnd,
+	Toggle: NavbarToggle,
+	Drawer: NavbarDrawer,
+	Close: NavbarClose,
+	Item: NavbarItem,
+	createHandle: NavbarCreateHandle
+};
+//#endregion
+export { Navbar };
+
+//# sourceMappingURL=navbar-namespace.js.map

package/dist/components/navigation/navbar-namespace.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"navbar-namespace.js","names":[],"sources":["../../../src/components/navigation/navbar-namespace.ts"],"sourcesContent":["import {\n  NavbarBar,\n  NavbarCenter,\n  NavbarClose,\n  NavbarCreateHandle,\n  NavbarDrawer,\n  NavbarEnd,\n  NavbarItem,\n  NavbarRoot,\n  NavbarStart,\n  NavbarToggle,\n} from \"./navigation\";\n\n/**\n * Compound namespace for the responsive navigation bar.\n *\n * This file intentionally stays server-safe. Its values are client component\n * references imported from `navigation.tsx`, which lets Next.js App Router\n * consume `<Navbar.Root>` from a Server Component without losing the nested\n * properties during the RSC transform.\n */\nexport const Navbar: {\n  Root: typeof NavbarRoot;\n  Bar: typeof NavbarBar;\n  Start: typeof NavbarStart;\n  Center: typeof NavbarCenter;\n  End: typeof NavbarEnd;\n  Toggle: typeof NavbarToggle;\n  Drawer: typeof NavbarDrawer;\n  Close: typeof NavbarClose;\n  Item: typeof NavbarItem;\n  createHandle: typeof NavbarCreateHandle;\n} = {\n  Root: NavbarRoot,\n  Bar: NavbarBar,\n  Start: NavbarStart,\n  Center: NavbarCenter,\n  End: NavbarEnd,\n  Toggle: NavbarToggle,\n  Drawer: NavbarDrawer,\n  Close: NavbarClose,\n  Item: NavbarItem,\n  createHandle: NavbarCreateHandle,\n};\n"],"mappings":";;;;;;;;;;AAqBA,MAAa,SAWT;CACF,MAAM;CACN,KAAK;CACL,OAAO;CACP,QAAQ;CACR,KAAK;CACL,QAAQ;CACR,QAAQ;CACR,OAAO;CACP,MAAM;CACN,cAAc;AAChB"}

package/dist/components/navigation/navigation.cjs

@@ -10,6 +10,7 @@ let _base_ui_react_dialog = require("@base-ui/react/dialog");
 function NavbarRoot(props) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_dialog.Dialog.Root, { ...props });
 }
+const NavbarCreateHandle = _base_ui_react_dialog.Dialog.createHandle;
 /** A fixed, translucent zinc navigation surface. */
 const NavbarBar = (0, react.forwardRef)(function NavbarBar({ className, ...props }, ref) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("nav", {
@@ -109,18 +110,6 @@ const NavbarItem = (0, react.forwardRef)(function NavbarItem({ "aria-current": a
 		"data-slot": "navbar-item"
 	});
 });
-const Navbar = {
-	Root: NavbarRoot,
-	Bar: NavbarBar,
-	Start: NavbarStart,
-	Center: NavbarCenter,
-	End: NavbarEnd,
-	Toggle: NavbarToggle,
-	Drawer: NavbarDrawer,
-	Close: NavbarClose,
-	Item: NavbarItem,
-	createHandle: _base_ui_react_dialog.Dialog.createHandle
-};
 /**
 * A compact floating navigation bar for small-screen destinations. It is
 * independent from `Navbar` so it can be used in layouts without a drawer.
@@ -149,10 +138,10 @@ const BottomNavigation = Object.assign(BottomNavigationRoot, { Item: BottomNavig
 exports.BottomNavigation = BottomNavigation;
 exports.BottomNavigationItem = BottomNavigationItem;
 exports.BottomNavigationRoot = BottomNavigationRoot;
-exports.Navbar = Navbar;
 exports.NavbarBar = NavbarBar;
 exports.NavbarCenter = NavbarCenter;
 exports.NavbarClose = NavbarClose;
+exports.NavbarCreateHandle = NavbarCreateHandle;
 exports.NavbarDrawer = NavbarDrawer;
 exports.NavbarEnd = NavbarEnd;
 exports.NavbarItem = NavbarItem;

package/dist/components/navigation/navigation.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"navigation.cjs","names":["BaseDialog","cx","navbar","withRecipeClassName","bottomNavigation"],"sources":["../../../src/components/navigation/navigation.tsx"],"sourcesContent":["\"use client\";\n\nimport { Dialog as BaseDialog } from \"@base-ui/react/dialog\";\nimport { forwardRef } from \"react\";\nimport type { ComponentPropsWithoutRef } from \"react\";\nimport type { DialogRoot as BaseDialogRoot } from \"@base-ui/react/dialog\";\n\nimport { cx } from \"../../styled-system/css\";\nimport { bottomNavigation, navbar } from \"../../styled-system/recipes\";\nimport { withRecipeClassName } from \"../base-ui\";\n\n/**\n * Groups a responsive navigation bar and its mobile drawer. The `open`,\n * `defaultOpen`, and `onOpenChange` props are forwarded to Base UI's Dialog\n * root, which supplies focus management, Escape handling, and backdrop\n * dismissal for `Navbar.Drawer`.\n */\nexport type NavbarRootProps<Payload = unknown> = BaseDialogRoot.Props<Payload>;\n\nexport function NavbarRoot<Payload = unknown>(props: NavbarRootProps<Payload>) {\n  return <BaseDialog.Root {...props} />;\n}\n\nexport type NavbarBarProps = ComponentPropsWithoutRef<\"nav\">;\n\n/** A fixed, translucent zinc navigation surface. */\nexport const NavbarBar = forwardRef<HTMLElement, NavbarBarProps>(function NavbarBar(\n  { className, ...props },\n  ref,\n) {\n  return (\n    <nav\n      {...props}\n      ref={ref}\n      className={cx(navbar().bar, className)}\n      data-jaci-component=\"navbar\"\n      data-slot=\"navbar-bar\"\n    />\n  );\n});\n\nexport type NavbarStartProps = ComponentPropsWithoutRef<\"div\">;\n\nexport const NavbarStart = forwardRef<HTMLDivElement, NavbarStartProps>(function NavbarStart(\n  { className, ...props },\n  ref,\n) {\n  return (\n    <div {...props} ref={ref} className={cx(navbar().start, className)} data-slot=\"navbar-start\" />\n  );\n});\n\nexport type NavbarCenterProps = ComponentPropsWithoutRef<\"div\">;\n\nexport const NavbarCenter = forwardRef<HTMLDivElement, NavbarCenterProps>(function NavbarCenter(\n  { className, ...props },\n  ref,\n) {\n  return (\n    <div\n      {...props}\n      ref={ref}\n      className={cx(navbar().center, className)}\n      data-slot=\"navbar-center\"\n    />\n  );\n});\n\nexport type NavbarEndProps = ComponentPropsWithoutRef<\"div\">;\n\nexport const NavbarEnd = forwardRef<HTMLDivElement, NavbarEndProps>(function NavbarEnd(\n  { className, ...props },\n  ref,\n) {\n  return (\n    <div {...props} ref={ref} className={cx(navbar().end, className)} data-slot=\"navbar-end\" />\n  );\n});\n\nexport type NavbarToggleProps = ComponentPropsWithoutRef<typeof BaseDialog.Trigger>;\n\n/**\n * Opens the responsive drawer. It is hidden at the large breakpoint by\n * default, while still allowing a controlled host to render a drawer anywhere.\n */\nexport const NavbarToggle = forwardRef<HTMLButtonElement, NavbarToggleProps>(function NavbarToggle(\n  { \"aria-label\": ariaLabel, children, className, ...props },\n  ref,\n) {\n  const hasVisibleLabel = children != null;\n\n  return (\n    <BaseDialog.Trigger\n      {...props}\n      aria-label={ariaLabel ?? (hasVisibleLabel ? undefined : \"Open navigation menu\")}\n      ref={ref}\n      className={withRecipeClassName(navbar().toggle, className)}\n      data-slot=\"navbar-toggle\"\n    >\n      {children ?? \"☰\"}\n    </BaseDialog.Trigger>\n  );\n});\n\nexport type NavbarDrawerPortalProps = Omit<\n  ComponentPropsWithoutRef<typeof BaseDialog.Portal>,\n  \"children\"\n>;\n\nexport interface NavbarDrawerProps extends ComponentPropsWithoutRef<typeof BaseDialog.Popup> {\n  /** Optional controls for the underlying Base UI portal. */\n  portalProps?: NavbarDrawerPortalProps;\n}\n\n/**\n * A left-aligned mobile drawer. It intentionally owns the Dialog portal,\n * backdrop, viewport, and popup so consumers cannot accidentally omit the\n * pieces required for focus trapping and Escape/backdrop dismissal.\n */\nexport const NavbarDrawer = forwardRef<HTMLDivElement, NavbarDrawerProps>(function NavbarDrawer(\n  { \"aria-label\": ariaLabel, children, className, portalProps, ...props },\n  ref,\n) {\n  const styles = navbar();\n\n  return (\n    <BaseDialog.Portal {...portalProps}>\n      <BaseDialog.Backdrop\n        className={withRecipeClassName(styles.drawerBackdrop, undefined)}\n        data-slot=\"navbar-drawer-backdrop\"\n      />\n      <BaseDialog.Viewport\n        className={withRecipeClassName(styles.drawerViewport, undefined)}\n        data-slot=\"navbar-drawer-viewport\"\n      >\n        <BaseDialog.Popup\n          {...props}\n          aria-label={ariaLabel ?? \"Navigation menu\"}\n          ref={ref}\n          className={withRecipeClassName(styles.drawer, className)}\n          data-jaci-component=\"navbar\"\n          data-slot=\"navbar-drawer\"\n        >\n          {children}\n        </BaseDialog.Popup>\n      </BaseDialog.Viewport>\n    </BaseDialog.Portal>\n  );\n});\n\nexport type NavbarCloseProps = ComponentPropsWithoutRef<typeof BaseDialog.Close>;\n\n/** A close affordance for use inside `Navbar.Drawer`. */\nexport const NavbarClose = forwardRef<HTMLButtonElement, NavbarCloseProps>(function NavbarClose(\n  { \"aria-label\": ariaLabel, children, className, ...props },\n  ref,\n) {\n  const hasVisibleLabel = children != null;\n\n  return (\n    <BaseDialog.Close\n      {...props}\n      aria-label={ariaLabel ?? (hasVisibleLabel ? undefined : \"Close navigation menu\")}\n      ref={ref}\n      className={withRecipeClassName(navbar().close, className)}\n      data-slot=\"navbar-close\"\n    >\n      {children ?? \"×\"}\n    </BaseDialog.Close>\n  );\n});\n\nexport interface NavbarItemProps extends ComponentPropsWithoutRef<\"a\"> {\n  /** Marks the current navigation destination. */\n  active?: boolean;\n}\n\n/** A semantic navigation link for either the fixed bar or mobile drawer. */\nexport const NavbarItem = forwardRef<HTMLAnchorElement, NavbarItemProps>(function NavbarItem(\n  { \"aria-current\": ariaCurrent, active = false, className, ...props },\n  ref,\n) {\n  return (\n    <a\n      {...props}\n      aria-current={ariaCurrent ?? (active ? \"page\" : undefined)}\n      ref={ref}\n      className={cx(navbar({ active }).item, className)}\n      data-active={active || undefined}\n      data-slot=\"navbar-item\"\n    />\n  );\n});\n\nexport const Navbar = {\n  Root: NavbarRoot,\n  Bar: NavbarBar,\n  Start: NavbarStart,\n  Center: NavbarCenter,\n  End: NavbarEnd,\n  Toggle: NavbarToggle,\n  Drawer: NavbarDrawer,\n  Close: NavbarClose,\n  Item: NavbarItem,\n  createHandle: BaseDialog.createHandle,\n};\n\nexport type BottomNavigationProps = ComponentPropsWithoutRef<\"nav\">;\n\n/**\n * A compact floating navigation bar for small-screen destinations. It is\n * independent from `Navbar` so it can be used in layouts without a drawer.\n */\nexport const BottomNavigationRoot = forwardRef<HTMLElement, BottomNavigationProps>(\n  function BottomNavigationRoot({ className, ...props }, ref) {\n    return (\n      <nav\n        {...props}\n        ref={ref}\n        className={cx(bottomNavigation().root, className)}\n        data-jaci-component=\"bottom-navigation\"\n        data-slot=\"bottom-navigation\"\n      />\n    );\n  },\n);\n\nexport interface BottomNavigationItemProps extends ComponentPropsWithoutRef<\"a\"> {\n  /** Marks the current navigation destination. */\n  active?: boolean;\n}\n\nexport const BottomNavigationItem = forwardRef<HTMLAnchorElement, BottomNavigationItemProps>(\n  function BottomNavigationItem(\n    { \"aria-current\": ariaCurrent, active = false, className, ...props },\n    ref,\n  ) {\n    return (\n      <a\n        {...props}\n        aria-current={ariaCurrent ?? (active ? \"page\" : undefined)}\n        ref={ref}\n        className={cx(bottomNavigation({ active }).item, className)}\n        data-active={active || undefined}\n        data-slot=\"bottom-navigation-item\"\n      />\n    );\n  },\n);\n\nexport const BottomNavigation = Object.assign(BottomNavigationRoot, {\n  Item: BottomNavigationItem,\n});\n"],"mappings":"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"}
+{"version":3,"file":"navigation.cjs","names":["BaseDialog","cx","navbar","withRecipeClassName","bottomNavigation"],"sources":["../../../src/components/navigation/navigation.tsx"],"sourcesContent":["\"use client\";\n\nimport { Dialog as BaseDialog } from \"@base-ui/react/dialog\";\nimport { forwardRef } from \"react\";\nimport type { ComponentPropsWithoutRef } from \"react\";\nimport type { DialogRoot as BaseDialogRoot } from \"@base-ui/react/dialog\";\n\nimport { cx } from \"../../styled-system/css\";\nimport { bottomNavigation, navbar } from \"../../styled-system/recipes\";\nimport { withRecipeClassName } from \"../base-ui\";\n\n/**\n * Groups a responsive navigation bar and its mobile drawer. The `open`,\n * `defaultOpen`, and `onOpenChange` props are forwarded to Base UI's Dialog\n * root, which supplies focus management, Escape handling, and backdrop\n * dismissal for `Navbar.Drawer`.\n */\nexport type NavbarRootProps<Payload = unknown> = BaseDialogRoot.Props<Payload>;\n\nexport function NavbarRoot<Payload = unknown>(props: NavbarRootProps<Payload>) {\n  return <BaseDialog.Root {...props} />;\n}\n\nexport const NavbarCreateHandle = BaseDialog.createHandle;\n\nexport type NavbarBarProps = ComponentPropsWithoutRef<\"nav\">;\n\n/** A fixed, translucent zinc navigation surface. */\nexport const NavbarBar = forwardRef<HTMLElement, NavbarBarProps>(function NavbarBar(\n  { className, ...props },\n  ref,\n) {\n  return (\n    <nav\n      {...props}\n      ref={ref}\n      className={cx(navbar().bar, className)}\n      data-jaci-component=\"navbar\"\n      data-slot=\"navbar-bar\"\n    />\n  );\n});\n\nexport type NavbarStartProps = ComponentPropsWithoutRef<\"div\">;\n\nexport const NavbarStart = forwardRef<HTMLDivElement, NavbarStartProps>(function NavbarStart(\n  { className, ...props },\n  ref,\n) {\n  return (\n    <div {...props} ref={ref} className={cx(navbar().start, className)} data-slot=\"navbar-start\" />\n  );\n});\n\nexport type NavbarCenterProps = ComponentPropsWithoutRef<\"div\">;\n\nexport const NavbarCenter = forwardRef<HTMLDivElement, NavbarCenterProps>(function NavbarCenter(\n  { className, ...props },\n  ref,\n) {\n  return (\n    <div\n      {...props}\n      ref={ref}\n      className={cx(navbar().center, className)}\n      data-slot=\"navbar-center\"\n    />\n  );\n});\n\nexport type NavbarEndProps = ComponentPropsWithoutRef<\"div\">;\n\nexport const NavbarEnd = forwardRef<HTMLDivElement, NavbarEndProps>(function NavbarEnd(\n  { className, ...props },\n  ref,\n) {\n  return (\n    <div {...props} ref={ref} className={cx(navbar().end, className)} data-slot=\"navbar-end\" />\n  );\n});\n\nexport type NavbarToggleProps = ComponentPropsWithoutRef<typeof BaseDialog.Trigger>;\n\n/**\n * Opens the responsive drawer. It is hidden at the large breakpoint by\n * default, while still allowing a controlled host to render a drawer anywhere.\n */\nexport const NavbarToggle = forwardRef<HTMLButtonElement, NavbarToggleProps>(function NavbarToggle(\n  { \"aria-label\": ariaLabel, children, className, ...props },\n  ref,\n) {\n  const hasVisibleLabel = children != null;\n\n  return (\n    <BaseDialog.Trigger\n      {...props}\n      aria-label={ariaLabel ?? (hasVisibleLabel ? undefined : \"Open navigation menu\")}\n      ref={ref}\n      className={withRecipeClassName(navbar().toggle, className)}\n      data-slot=\"navbar-toggle\"\n    >\n      {children ?? \"☰\"}\n    </BaseDialog.Trigger>\n  );\n});\n\nexport type NavbarDrawerPortalProps = Omit<\n  ComponentPropsWithoutRef<typeof BaseDialog.Portal>,\n  \"children\"\n>;\n\nexport interface NavbarDrawerProps extends ComponentPropsWithoutRef<typeof BaseDialog.Popup> {\n  /** Optional controls for the underlying Base UI portal. */\n  portalProps?: NavbarDrawerPortalProps;\n}\n\n/**\n * A left-aligned mobile drawer. It intentionally owns the Dialog portal,\n * backdrop, viewport, and popup so consumers cannot accidentally omit the\n * pieces required for focus trapping and Escape/backdrop dismissal.\n */\nexport const NavbarDrawer = forwardRef<HTMLDivElement, NavbarDrawerProps>(function NavbarDrawer(\n  { \"aria-label\": ariaLabel, children, className, portalProps, ...props },\n  ref,\n) {\n  const styles = navbar();\n\n  return (\n    <BaseDialog.Portal {...portalProps}>\n      <BaseDialog.Backdrop\n        className={withRecipeClassName(styles.drawerBackdrop, undefined)}\n        data-slot=\"navbar-drawer-backdrop\"\n      />\n      <BaseDialog.Viewport\n        className={withRecipeClassName(styles.drawerViewport, undefined)}\n        data-slot=\"navbar-drawer-viewport\"\n      >\n        <BaseDialog.Popup\n          {...props}\n          aria-label={ariaLabel ?? \"Navigation menu\"}\n          ref={ref}\n          className={withRecipeClassName(styles.drawer, className)}\n          data-jaci-component=\"navbar\"\n          data-slot=\"navbar-drawer\"\n        >\n          {children}\n        </BaseDialog.Popup>\n      </BaseDialog.Viewport>\n    </BaseDialog.Portal>\n  );\n});\n\nexport type NavbarCloseProps = ComponentPropsWithoutRef<typeof BaseDialog.Close>;\n\n/** A close affordance for use inside `Navbar.Drawer`. */\nexport const NavbarClose = forwardRef<HTMLButtonElement, NavbarCloseProps>(function NavbarClose(\n  { \"aria-label\": ariaLabel, children, className, ...props },\n  ref,\n) {\n  const hasVisibleLabel = children != null;\n\n  return (\n    <BaseDialog.Close\n      {...props}\n      aria-label={ariaLabel ?? (hasVisibleLabel ? undefined : \"Close navigation menu\")}\n      ref={ref}\n      className={withRecipeClassName(navbar().close, className)}\n      data-slot=\"navbar-close\"\n    >\n      {children ?? \"×\"}\n    </BaseDialog.Close>\n  );\n});\n\nexport interface NavbarItemProps extends ComponentPropsWithoutRef<\"a\"> {\n  /** Marks the current navigation destination. */\n  active?: boolean;\n}\n\n/** A semantic navigation link for either the fixed bar or mobile drawer. */\nexport const NavbarItem = forwardRef<HTMLAnchorElement, NavbarItemProps>(function NavbarItem(\n  { \"aria-current\": ariaCurrent, active = false, className, ...props },\n  ref,\n) {\n  return (\n    <a\n      {...props}\n      aria-current={ariaCurrent ?? (active ? \"page\" : undefined)}\n      ref={ref}\n      className={cx(navbar({ active }).item, className)}\n      data-active={active || undefined}\n      data-slot=\"navbar-item\"\n    />\n  );\n});\n\nexport type BottomNavigationProps = ComponentPropsWithoutRef<\"nav\">;\n\n/**\n * A compact floating navigation bar for small-screen destinations. It is\n * independent from `Navbar` so it can be used in layouts without a drawer.\n */\nexport const BottomNavigationRoot = forwardRef<HTMLElement, BottomNavigationProps>(\n  function BottomNavigationRoot({ className, ...props }, ref) {\n    return (\n      <nav\n        {...props}\n        ref={ref}\n        className={cx(bottomNavigation().root, className)}\n        data-jaci-component=\"bottom-navigation\"\n        data-slot=\"bottom-navigation\"\n      />\n    );\n  },\n);\n\nexport interface BottomNavigationItemProps extends ComponentPropsWithoutRef<\"a\"> {\n  /** Marks the current navigation destination. */\n  active?: boolean;\n}\n\nexport const BottomNavigationItem = forwardRef<HTMLAnchorElement, BottomNavigationItemProps>(\n  function BottomNavigationItem(\n    { \"aria-current\": ariaCurrent, active = false, className, ...props },\n    ref,\n  ) {\n    return (\n      <a\n        {...props}\n        aria-current={ariaCurrent ?? (active ? \"page\" : undefined)}\n        ref={ref}\n        className={cx(bottomNavigation({ active }).item, className)}\n        data-active={active || undefined}\n        data-slot=\"bottom-navigation-item\"\n      />\n    );\n  },\n);\n\nexport const BottomNavigation = Object.assign(BottomNavigationRoot, {\n  Item: BottomNavigationItem,\n});\n"],"mappings":"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"}

package/dist/components/navigation/navigation.d.cts

@@ -9,6 +9,7 @@ import { Dialog, DialogRoot } from "@base-ui/react/dialog";
  */
 type NavbarRootProps<Payload = unknown> = DialogRoot.Props<Payload>;
 declare function NavbarRoot<Payload = unknown>(props: NavbarRootProps<Payload>): import("react").JSX.Element;
+declare const NavbarCreateHandle: typeof Dialog.createHandle;
 type NavbarBarProps = ComponentPropsWithoutRef<"nav">;
 /** A fixed, translucent zinc navigation surface. */
 declare const NavbarBar: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & import("react").RefAttributes<HTMLElement>>;
@@ -44,18 +45,6 @@ interface NavbarItemProps extends ComponentPropsWithoutRef<"a"> {
 }
 /** A semantic navigation link for either the fixed bar or mobile drawer. */
 declare const NavbarItem: import("react").ForwardRefExoticComponent<NavbarItemProps & import("react").RefAttributes<HTMLAnchorElement>>;
-declare const Navbar: {
-  Root: typeof NavbarRoot;
-  Bar: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & import("react").RefAttributes<HTMLElement>>;
-  Start: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-  Center: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-  End: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-  Toggle: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react").DialogTriggerProps<unknown> & import("react").RefAttributes<HTMLElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
-  Drawer: import("react").ForwardRefExoticComponent<NavbarDrawerProps & import("react").RefAttributes<HTMLDivElement>>;
-  Close: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").AlertDialogCloseProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
-  Item: import("react").ForwardRefExoticComponent<NavbarItemProps & import("react").RefAttributes<HTMLAnchorElement>>;
-  createHandle: typeof Dialog.createHandle;
-};
 type BottomNavigationProps = ComponentPropsWithoutRef<"nav">;
 /**
  * A compact floating navigation bar for small-screen destinations. It is
@@ -71,5 +60,5 @@ declare const BottomNavigation: import("react").ForwardRefExoticComponent<Omit<i
   Item: import("react").ForwardRefExoticComponent<BottomNavigationItemProps & import("react").RefAttributes<HTMLAnchorElement>>;
 };
 //#endregion
-export { BottomNavigation, BottomNavigationItem, BottomNavigationItemProps, BottomNavigationProps, BottomNavigationRoot, Navbar, NavbarBar, NavbarBarProps, NavbarCenter, NavbarCenterProps, NavbarClose, NavbarCloseProps, NavbarDrawer, NavbarDrawerPortalProps, NavbarDrawerProps, NavbarEnd, NavbarEndProps, NavbarItem, NavbarItemProps, NavbarRoot, NavbarRootProps, NavbarStart, NavbarStartProps, NavbarToggle, NavbarToggleProps };
+export { BottomNavigation, BottomNavigationItem, BottomNavigationItemProps, BottomNavigationProps, BottomNavigationRoot, NavbarBar, NavbarBarProps, NavbarCenter, NavbarCenterProps, NavbarClose, NavbarCloseProps, NavbarCreateHandle, NavbarDrawer, NavbarDrawerPortalProps, NavbarDrawerProps, NavbarEnd, NavbarEndProps, NavbarItem, NavbarItemProps, NavbarRoot, NavbarRootProps, NavbarStart, NavbarStartProps, NavbarToggle, NavbarToggleProps };
 //# sourceMappingURL=navigation.d.cts.map

package/dist/components/navigation/navigation.d.ts

@@ -9,6 +9,7 @@ import { Dialog, DialogRoot } from "@base-ui/react/dialog";
  */
 type NavbarRootProps<Payload = unknown> = DialogRoot.Props<Payload>;
 declare function NavbarRoot<Payload = unknown>(props: NavbarRootProps<Payload>): import("react").JSX.Element;
+declare const NavbarCreateHandle: typeof Dialog.createHandle;
 type NavbarBarProps = ComponentPropsWithoutRef<"nav">;
 /** A fixed, translucent zinc navigation surface. */
 declare const NavbarBar: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & import("react").RefAttributes<HTMLElement>>;
@@ -44,18 +45,6 @@ interface NavbarItemProps extends ComponentPropsWithoutRef<"a"> {
 }
 /** A semantic navigation link for either the fixed bar or mobile drawer. */
 declare const NavbarItem: import("react").ForwardRefExoticComponent<NavbarItemProps & import("react").RefAttributes<HTMLAnchorElement>>;
-declare const Navbar: {
-  Root: typeof NavbarRoot;
-  Bar: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & import("react").RefAttributes<HTMLElement>>;
-  Start: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-  Center: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-  End: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-  Toggle: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react").DialogTriggerProps<unknown> & import("react").RefAttributes<HTMLElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
-  Drawer: import("react").ForwardRefExoticComponent<NavbarDrawerProps & import("react").RefAttributes<HTMLDivElement>>;
-  Close: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").AlertDialogCloseProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
-  Item: import("react").ForwardRefExoticComponent<NavbarItemProps & import("react").RefAttributes<HTMLAnchorElement>>;
-  createHandle: typeof Dialog.createHandle;
-};
 type BottomNavigationProps = ComponentPropsWithoutRef<"nav">;
 /**
  * A compact floating navigation bar for small-screen destinations. It is
@@ -71,5 +60,5 @@ declare const BottomNavigation: import("react").ForwardRefExoticComponent<Omit<i
   Item: import("react").ForwardRefExoticComponent<BottomNavigationItemProps & import("react").RefAttributes<HTMLAnchorElement>>;
 };
 //#endregion
-export { BottomNavigation, BottomNavigationItem, BottomNavigationItemProps, BottomNavigationProps, BottomNavigationRoot, Navbar, NavbarBar, NavbarBarProps, NavbarCenter, NavbarCenterProps, NavbarClose, NavbarCloseProps, NavbarDrawer, NavbarDrawerPortalProps, NavbarDrawerProps, NavbarEnd, NavbarEndProps, NavbarItem, NavbarItemProps, NavbarRoot, NavbarRootProps, NavbarStart, NavbarStartProps, NavbarToggle, NavbarToggleProps };
+export { BottomNavigation, BottomNavigationItem, BottomNavigationItemProps, BottomNavigationProps, BottomNavigationRoot, NavbarBar, NavbarBarProps, NavbarCenter, NavbarCenterProps, NavbarClose, NavbarCloseProps, NavbarCreateHandle, NavbarDrawer, NavbarDrawerPortalProps, NavbarDrawerProps, NavbarEnd, NavbarEndProps, NavbarItem, NavbarItemProps, NavbarRoot, NavbarRootProps, NavbarStart, NavbarStartProps, NavbarToggle, NavbarToggleProps };
 //# sourceMappingURL=navigation.d.ts.map

package/dist/components/navigation/navigation.js

@@ -10,6 +10,7 @@ import { Dialog } from "@base-ui/react/dialog";
 function NavbarRoot(props) {
 	return /* @__PURE__ */ jsx(Dialog.Root, { ...props });
 }
+const NavbarCreateHandle = Dialog.createHandle;
 /** A fixed, translucent zinc navigation surface. */
 const NavbarBar = forwardRef(function NavbarBar({ className, ...props }, ref) {
 	return /* @__PURE__ */ jsx("nav", {
@@ -109,18 +110,6 @@ const NavbarItem = forwardRef(function NavbarItem({ "aria-current": ariaCurrent,
 		"data-slot": "navbar-item"
 	});
 });
-const Navbar = {
-	Root: NavbarRoot,
-	Bar: NavbarBar,
-	Start: NavbarStart,
-	Center: NavbarCenter,
-	End: NavbarEnd,
-	Toggle: NavbarToggle,
-	Drawer: NavbarDrawer,
-	Close: NavbarClose,
-	Item: NavbarItem,
-	createHandle: Dialog.createHandle
-};
 /**
 * A compact floating navigation bar for small-screen destinations. It is
 * independent from `Navbar` so it can be used in layouts without a drawer.
@@ -146,6 +135,6 @@ const BottomNavigationItem = forwardRef(function BottomNavigationItem({ "aria-cu
 });
 const BottomNavigation = Object.assign(BottomNavigationRoot, { Item: BottomNavigationItem });
 //#endregion
-export { BottomNavigation, BottomNavigationItem, BottomNavigationRoot, Navbar, NavbarBar, NavbarCenter, NavbarClose, NavbarDrawer, NavbarEnd, NavbarItem, NavbarRoot, NavbarStart, NavbarToggle };
+export { BottomNavigation, BottomNavigationItem, BottomNavigationRoot, NavbarBar, NavbarCenter, NavbarClose, NavbarCreateHandle, NavbarDrawer, NavbarEnd, NavbarItem, NavbarRoot, NavbarStart, NavbarToggle };
 
 //# sourceMappingURL=navigation.js.map

package/dist/components/navigation/navigation.js.map

@@ -1 +1 @@
-{"version":3,"file":"navigation.js","names":["BaseDialog"],"sources":["../../../src/components/navigation/navigation.tsx"],"sourcesContent":["\"use client\";\n\nimport { Dialog as BaseDialog } from \"@base-ui/react/dialog\";\nimport { forwardRef } from \"react\";\nimport type { ComponentPropsWithoutRef } from \"react\";\nimport type { DialogRoot as BaseDialogRoot } from \"@base-ui/react/dialog\";\n\nimport { cx } from \"../../styled-system/css\";\nimport { bottomNavigation, navbar } from \"../../styled-system/recipes\";\nimport { withRecipeClassName } from \"../base-ui\";\n\n/**\n * Groups a responsive navigation bar and its mobile drawer. The `open`,\n * `defaultOpen`, and `onOpenChange` props are forwarded to Base UI's Dialog\n * root, which supplies focus management, Escape handling, and backdrop\n * dismissal for `Navbar.Drawer`.\n */\nexport type NavbarRootProps<Payload = unknown> = BaseDialogRoot.Props<Payload>;\n\nexport function NavbarRoot<Payload = unknown>(props: NavbarRootProps<Payload>) {\n  return <BaseDialog.Root {...props} />;\n}\n\nexport type NavbarBarProps = ComponentPropsWithoutRef<\"nav\">;\n\n/** A fixed, translucent zinc navigation surface. */\nexport const NavbarBar = forwardRef<HTMLElement, NavbarBarProps>(function NavbarBar(\n  { className, ...props },\n  ref,\n) {\n  return (\n    <nav\n      {...props}\n      ref={ref}\n      className={cx(navbar().bar, className)}\n      data-jaci-component=\"navbar\"\n      data-slot=\"navbar-bar\"\n    />\n  );\n});\n\nexport type NavbarStartProps = ComponentPropsWithoutRef<\"div\">;\n\nexport const NavbarStart = forwardRef<HTMLDivElement, NavbarStartProps>(function NavbarStart(\n  { className, ...props },\n  ref,\n) {\n  return (\n    <div {...props} ref={ref} className={cx(navbar().start, className)} data-slot=\"navbar-start\" />\n  );\n});\n\nexport type NavbarCenterProps = ComponentPropsWithoutRef<\"div\">;\n\nexport const NavbarCenter = forwardRef<HTMLDivElement, NavbarCenterProps>(function NavbarCenter(\n  { className, ...props },\n  ref,\n) {\n  return (\n    <div\n      {...props}\n      ref={ref}\n      className={cx(navbar().center, className)}\n      data-slot=\"navbar-center\"\n    />\n  );\n});\n\nexport type NavbarEndProps = ComponentPropsWithoutRef<\"div\">;\n\nexport const NavbarEnd = forwardRef<HTMLDivElement, NavbarEndProps>(function NavbarEnd(\n  { className, ...props },\n  ref,\n) {\n  return (\n    <div {...props} ref={ref} className={cx(navbar().end, className)} data-slot=\"navbar-end\" />\n  );\n});\n\nexport type NavbarToggleProps = ComponentPropsWithoutRef<typeof BaseDialog.Trigger>;\n\n/**\n * Opens the responsive drawer. It is hidden at the large breakpoint by\n * default, while still allowing a controlled host to render a drawer anywhere.\n */\nexport const NavbarToggle = forwardRef<HTMLButtonElement, NavbarToggleProps>(function NavbarToggle(\n  { \"aria-label\": ariaLabel, children, className, ...props },\n  ref,\n) {\n  const hasVisibleLabel = children != null;\n\n  return (\n    <BaseDialog.Trigger\n      {...props}\n      aria-label={ariaLabel ?? (hasVisibleLabel ? undefined : \"Open navigation menu\")}\n      ref={ref}\n      className={withRecipeClassName(navbar().toggle, className)}\n      data-slot=\"navbar-toggle\"\n    >\n      {children ?? \"☰\"}\n    </BaseDialog.Trigger>\n  );\n});\n\nexport type NavbarDrawerPortalProps = Omit<\n  ComponentPropsWithoutRef<typeof BaseDialog.Portal>,\n  \"children\"\n>;\n\nexport interface NavbarDrawerProps extends ComponentPropsWithoutRef<typeof BaseDialog.Popup> {\n  /** Optional controls for the underlying Base UI portal. */\n  portalProps?: NavbarDrawerPortalProps;\n}\n\n/**\n * A left-aligned mobile drawer. It intentionally owns the Dialog portal,\n * backdrop, viewport, and popup so consumers cannot accidentally omit the\n * pieces required for focus trapping and Escape/backdrop dismissal.\n */\nexport const NavbarDrawer = forwardRef<HTMLDivElement, NavbarDrawerProps>(function NavbarDrawer(\n  { \"aria-label\": ariaLabel, children, className, portalProps, ...props },\n  ref,\n) {\n  const styles = navbar();\n\n  return (\n    <BaseDialog.Portal {...portalProps}>\n      <BaseDialog.Backdrop\n        className={withRecipeClassName(styles.drawerBackdrop, undefined)}\n        data-slot=\"navbar-drawer-backdrop\"\n      />\n      <BaseDialog.Viewport\n        className={withRecipeClassName(styles.drawerViewport, undefined)}\n        data-slot=\"navbar-drawer-viewport\"\n      >\n        <BaseDialog.Popup\n          {...props}\n          aria-label={ariaLabel ?? \"Navigation menu\"}\n          ref={ref}\n          className={withRecipeClassName(styles.drawer, className)}\n          data-jaci-component=\"navbar\"\n          data-slot=\"navbar-drawer\"\n        >\n          {children}\n        </BaseDialog.Popup>\n      </BaseDialog.Viewport>\n    </BaseDialog.Portal>\n  );\n});\n\nexport type NavbarCloseProps = ComponentPropsWithoutRef<typeof BaseDialog.Close>;\n\n/** A close affordance for use inside `Navbar.Drawer`. */\nexport const NavbarClose = forwardRef<HTMLButtonElement, NavbarCloseProps>(function NavbarClose(\n  { \"aria-label\": ariaLabel, children, className, ...props },\n  ref,\n) {\n  const hasVisibleLabel = children != null;\n\n  return (\n    <BaseDialog.Close\n      {...props}\n      aria-label={ariaLabel ?? (hasVisibleLabel ? undefined : \"Close navigation menu\")}\n      ref={ref}\n      className={withRecipeClassName(navbar().close, className)}\n      data-slot=\"navbar-close\"\n    >\n      {children ?? \"×\"}\n    </BaseDialog.Close>\n  );\n});\n\nexport interface NavbarItemProps extends ComponentPropsWithoutRef<\"a\"> {\n  /** Marks the current navigation destination. */\n  active?: boolean;\n}\n\n/** A semantic navigation link for either the fixed bar or mobile drawer. */\nexport const NavbarItem = forwardRef<HTMLAnchorElement, NavbarItemProps>(function NavbarItem(\n  { \"aria-current\": ariaCurrent, active = false, className, ...props },\n  ref,\n) {\n  return (\n    <a\n      {...props}\n      aria-current={ariaCurrent ?? (active ? \"page\" : undefined)}\n      ref={ref}\n      className={cx(navbar({ active }).item, className)}\n      data-active={active || undefined}\n      data-slot=\"navbar-item\"\n    />\n  );\n});\n\nexport const Navbar = {\n  Root: NavbarRoot,\n  Bar: NavbarBar,\n  Start: NavbarStart,\n  Center: NavbarCenter,\n  End: NavbarEnd,\n  Toggle: NavbarToggle,\n  Drawer: NavbarDrawer,\n  Close: NavbarClose,\n  Item: NavbarItem,\n  createHandle: BaseDialog.createHandle,\n};\n\nexport type BottomNavigationProps = ComponentPropsWithoutRef<\"nav\">;\n\n/**\n * A compact floating navigation bar for small-screen destinations. It is\n * independent from `Navbar` so it can be used in layouts without a drawer.\n */\nexport const BottomNavigationRoot = forwardRef<HTMLElement, BottomNavigationProps>(\n  function BottomNavigationRoot({ className, ...props }, ref) {\n    return (\n      <nav\n        {...props}\n        ref={ref}\n        className={cx(bottomNavigation().root, className)}\n        data-jaci-component=\"bottom-navigation\"\n        data-slot=\"bottom-navigation\"\n      />\n    );\n  },\n);\n\nexport interface BottomNavigationItemProps extends ComponentPropsWithoutRef<\"a\"> {\n  /** Marks the current navigation destination. */\n  active?: boolean;\n}\n\nexport const BottomNavigationItem = forwardRef<HTMLAnchorElement, BottomNavigationItemProps>(\n  function BottomNavigationItem(\n    { \"aria-current\": ariaCurrent, active = false, className, ...props },\n    ref,\n  ) {\n    return (\n      <a\n        {...props}\n        aria-current={ariaCurrent ?? (active ? \"page\" : undefined)}\n        ref={ref}\n        className={cx(bottomNavigation({ active }).item, className)}\n        data-active={active || undefined}\n        data-slot=\"bottom-navigation-item\"\n      />\n    );\n  },\n);\n\nexport const BottomNavigation = Object.assign(BottomNavigationRoot, {\n  Item: BottomNavigationItem,\n});\n"],"mappings":"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"}
+{"version":3,"file":"navigation.js","names":["BaseDialog"],"sources":["../../../src/components/navigation/navigation.tsx"],"sourcesContent":["\"use client\";\n\nimport { Dialog as BaseDialog } from \"@base-ui/react/dialog\";\nimport { forwardRef } from \"react\";\nimport type { ComponentPropsWithoutRef } from \"react\";\nimport type { DialogRoot as BaseDialogRoot } from \"@base-ui/react/dialog\";\n\nimport { cx } from \"../../styled-system/css\";\nimport { bottomNavigation, navbar } from \"../../styled-system/recipes\";\nimport { withRecipeClassName } from \"../base-ui\";\n\n/**\n * Groups a responsive navigation bar and its mobile drawer. The `open`,\n * `defaultOpen`, and `onOpenChange` props are forwarded to Base UI's Dialog\n * root, which supplies focus management, Escape handling, and backdrop\n * dismissal for `Navbar.Drawer`.\n */\nexport type NavbarRootProps<Payload = unknown> = BaseDialogRoot.Props<Payload>;\n\nexport function NavbarRoot<Payload = unknown>(props: NavbarRootProps<Payload>) {\n  return <BaseDialog.Root {...props} />;\n}\n\nexport const NavbarCreateHandle = BaseDialog.createHandle;\n\nexport type NavbarBarProps = ComponentPropsWithoutRef<\"nav\">;\n\n/** A fixed, translucent zinc navigation surface. */\nexport const NavbarBar = forwardRef<HTMLElement, NavbarBarProps>(function NavbarBar(\n  { className, ...props },\n  ref,\n) {\n  return (\n    <nav\n      {...props}\n      ref={ref}\n      className={cx(navbar().bar, className)}\n      data-jaci-component=\"navbar\"\n      data-slot=\"navbar-bar\"\n    />\n  );\n});\n\nexport type NavbarStartProps = ComponentPropsWithoutRef<\"div\">;\n\nexport const NavbarStart = forwardRef<HTMLDivElement, NavbarStartProps>(function NavbarStart(\n  { className, ...props },\n  ref,\n) {\n  return (\n    <div {...props} ref={ref} className={cx(navbar().start, className)} data-slot=\"navbar-start\" />\n  );\n});\n\nexport type NavbarCenterProps = ComponentPropsWithoutRef<\"div\">;\n\nexport const NavbarCenter = forwardRef<HTMLDivElement, NavbarCenterProps>(function NavbarCenter(\n  { className, ...props },\n  ref,\n) {\n  return (\n    <div\n      {...props}\n      ref={ref}\n      className={cx(navbar().center, className)}\n      data-slot=\"navbar-center\"\n    />\n  );\n});\n\nexport type NavbarEndProps = ComponentPropsWithoutRef<\"div\">;\n\nexport const NavbarEnd = forwardRef<HTMLDivElement, NavbarEndProps>(function NavbarEnd(\n  { className, ...props },\n  ref,\n) {\n  return (\n    <div {...props} ref={ref} className={cx(navbar().end, className)} data-slot=\"navbar-end\" />\n  );\n});\n\nexport type NavbarToggleProps = ComponentPropsWithoutRef<typeof BaseDialog.Trigger>;\n\n/**\n * Opens the responsive drawer. It is hidden at the large breakpoint by\n * default, while still allowing a controlled host to render a drawer anywhere.\n */\nexport const NavbarToggle = forwardRef<HTMLButtonElement, NavbarToggleProps>(function NavbarToggle(\n  { \"aria-label\": ariaLabel, children, className, ...props },\n  ref,\n) {\n  const hasVisibleLabel = children != null;\n\n  return (\n    <BaseDialog.Trigger\n      {...props}\n      aria-label={ariaLabel ?? (hasVisibleLabel ? undefined : \"Open navigation menu\")}\n      ref={ref}\n      className={withRecipeClassName(navbar().toggle, className)}\n      data-slot=\"navbar-toggle\"\n    >\n      {children ?? \"☰\"}\n    </BaseDialog.Trigger>\n  );\n});\n\nexport type NavbarDrawerPortalProps = Omit<\n  ComponentPropsWithoutRef<typeof BaseDialog.Portal>,\n  \"children\"\n>;\n\nexport interface NavbarDrawerProps extends ComponentPropsWithoutRef<typeof BaseDialog.Popup> {\n  /** Optional controls for the underlying Base UI portal. */\n  portalProps?: NavbarDrawerPortalProps;\n}\n\n/**\n * A left-aligned mobile drawer. It intentionally owns the Dialog portal,\n * backdrop, viewport, and popup so consumers cannot accidentally omit the\n * pieces required for focus trapping and Escape/backdrop dismissal.\n */\nexport const NavbarDrawer = forwardRef<HTMLDivElement, NavbarDrawerProps>(function NavbarDrawer(\n  { \"aria-label\": ariaLabel, children, className, portalProps, ...props },\n  ref,\n) {\n  const styles = navbar();\n\n  return (\n    <BaseDialog.Portal {...portalProps}>\n      <BaseDialog.Backdrop\n        className={withRecipeClassName(styles.drawerBackdrop, undefined)}\n        data-slot=\"navbar-drawer-backdrop\"\n      />\n      <BaseDialog.Viewport\n        className={withRecipeClassName(styles.drawerViewport, undefined)}\n        data-slot=\"navbar-drawer-viewport\"\n      >\n        <BaseDialog.Popup\n          {...props}\n          aria-label={ariaLabel ?? \"Navigation menu\"}\n          ref={ref}\n          className={withRecipeClassName(styles.drawer, className)}\n          data-jaci-component=\"navbar\"\n          data-slot=\"navbar-drawer\"\n        >\n          {children}\n        </BaseDialog.Popup>\n      </BaseDialog.Viewport>\n    </BaseDialog.Portal>\n  );\n});\n\nexport type NavbarCloseProps = ComponentPropsWithoutRef<typeof BaseDialog.Close>;\n\n/** A close affordance for use inside `Navbar.Drawer`. */\nexport const NavbarClose = forwardRef<HTMLButtonElement, NavbarCloseProps>(function NavbarClose(\n  { \"aria-label\": ariaLabel, children, className, ...props },\n  ref,\n) {\n  const hasVisibleLabel = children != null;\n\n  return (\n    <BaseDialog.Close\n      {...props}\n      aria-label={ariaLabel ?? (hasVisibleLabel ? undefined : \"Close navigation menu\")}\n      ref={ref}\n      className={withRecipeClassName(navbar().close, className)}\n      data-slot=\"navbar-close\"\n    >\n      {children ?? \"×\"}\n    </BaseDialog.Close>\n  );\n});\n\nexport interface NavbarItemProps extends ComponentPropsWithoutRef<\"a\"> {\n  /** Marks the current navigation destination. */\n  active?: boolean;\n}\n\n/** A semantic navigation link for either the fixed bar or mobile drawer. */\nexport const NavbarItem = forwardRef<HTMLAnchorElement, NavbarItemProps>(function NavbarItem(\n  { \"aria-current\": ariaCurrent, active = false, className, ...props },\n  ref,\n) {\n  return (\n    <a\n      {...props}\n      aria-current={ariaCurrent ?? (active ? \"page\" : undefined)}\n      ref={ref}\n      className={cx(navbar({ active }).item, className)}\n      data-active={active || undefined}\n      data-slot=\"navbar-item\"\n    />\n  );\n});\n\nexport type BottomNavigationProps = ComponentPropsWithoutRef<\"nav\">;\n\n/**\n * A compact floating navigation bar for small-screen destinations. It is\n * independent from `Navbar` so it can be used in layouts without a drawer.\n */\nexport const BottomNavigationRoot = forwardRef<HTMLElement, BottomNavigationProps>(\n  function BottomNavigationRoot({ className, ...props }, ref) {\n    return (\n      <nav\n        {...props}\n        ref={ref}\n        className={cx(bottomNavigation().root, className)}\n        data-jaci-component=\"bottom-navigation\"\n        data-slot=\"bottom-navigation\"\n      />\n    );\n  },\n);\n\nexport interface BottomNavigationItemProps extends ComponentPropsWithoutRef<\"a\"> {\n  /** Marks the current navigation destination. */\n  active?: boolean;\n}\n\nexport const BottomNavigationItem = forwardRef<HTMLAnchorElement, BottomNavigationItemProps>(\n  function BottomNavigationItem(\n    { \"aria-current\": ariaCurrent, active = false, className, ...props },\n    ref,\n  ) {\n    return (\n      <a\n        {...props}\n        aria-current={ariaCurrent ?? (active ? \"page\" : undefined)}\n        ref={ref}\n        className={cx(bottomNavigation({ active }).item, className)}\n        data-active={active || undefined}\n        data-slot=\"bottom-navigation-item\"\n      />\n    );\n  },\n);\n\nexport const BottomNavigation = Object.assign(BottomNavigationRoot, {\n  Item: BottomNavigationItem,\n});\n"],"mappings":"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"}

package/dist/components/navigation-menu/navigation-menu.cjs

@@ -23,15 +23,15 @@ const NavigationMenuRoot = (0, react.forwardRef)(function NavigationMenuRoot({ c
 	}, [onValueChange, value]);
 	(0, react.useEffect)(() => {
 		if (resolvedValue === null) return;
-		const handleOutsideClick = (event) => {
+		const handleOutsidePress = (event) => {
 			const target = event.target;
 			if (!(target instanceof Element)) return;
 			if (rootElementRef.current?.contains(target)) return;
 			if (target.closest("[data-slot=\"navigation-menu-content\"], [data-slot=\"navigation-menu-positioner\"], [data-slot=\"navigation-menu-popup\"], [data-slot=\"navigation-menu-viewport\"]")) return;
 			close();
 		};
-		document.addEventListener("click", handleOutsideClick);
-		return () => document.removeEventListener("click", handleOutsideClick);
+		document.addEventListener("click", handleOutsidePress);
+		return () => document.removeEventListener("click", handleOutsidePress);
 	}, [close, resolvedValue]);
 	const setRootRef = (element) => {
 		rootElementRef.current = element;

package/dist/components/navigation-menu/navigation-menu.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"navigation-menu.cjs","names":["navigationMenu","BaseNavigationMenu","withRecipeClassName"],"sources":["../../../src/components/navigation-menu/navigation-menu.tsx"],"sourcesContent":["\"use client\";\n\nimport { NavigationMenu as BaseNavigationMenu } from \"@base-ui/react/navigation-menu\";\nimport {\n  createContext,\n  forwardRef,\n  useCallback,\n  useContext,\n  useEffect,\n  useId,\n  useRef,\n  useState,\n} from \"react\";\nimport type { ComponentPropsWithoutRef, ReactNode } from \"react\";\nimport type { NavigationMenuRoot as BaseNavigationMenuRoot } from \"@base-ui/react/navigation-menu\";\n\nimport { navigationMenu } from \"../../styled-system/recipes\";\nimport { withRecipeClassName } from \"../base-ui\";\n\nexport type NavigationMenuOrientation = \"horizontal\" | \"vertical\";\n\ninterface NavigationMenuContextValue {\n  close: () => void;\n  orientation: NavigationMenuOrientation;\n  styles: ReturnType<typeof navigationMenu>;\n  value: string | null;\n}\n\nconst NavigationMenuContext = createContext<NavigationMenuContextValue | null>(null);\nconst NavigationMenuItemContext = createContext<{ value?: string } | null>(null);\n\nfunction useNavigationMenuContext() {\n  const context = useContext(NavigationMenuContext);\n  if (!context) {\n    throw new Error(\"NavigationMenu parts must be rendered inside NavigationMenu.Root.\");\n  }\n\n  return context;\n}\n\nexport interface NavigationMenuRootProps\n  extends Omit<\n    BaseNavigationMenuRoot.Props<string>,\n    \"children\" | \"className\" | \"onValueChange\" | \"value\" | \"defaultValue\"\n  > {\n  value?: string | null;\n  defaultValue?: string | null;\n  onValueChange?: (value: string | null) => void;\n  orientation?: NavigationMenuOrientation;\n  children?: ReactNode;\n  className?: string;\n}\n\nexport const NavigationMenuRoot = forwardRef<HTMLElement, NavigationMenuRootProps>(\n  function NavigationMenuRoot(\n    {\n      children,\n      className,\n      defaultValue,\n      onValueChange,\n      orientation = \"horizontal\",\n      value,\n      ...props\n    },\n    ref,\n  ) {\n    const [uncontrolledValue, setUncontrolledValue] = useState<string | null>(defaultValue ?? null);\n    const rootElementRef = useRef<HTMLElement | null>(null);\n    // Keep the Base UI primitive controlled by the wrapper state even when the\n    // consumer uses the uncontrolled API. This keeps the viewport and the\n    // primitive in sync when Base UI dismisses a menu (pointer leave, outside\n    // press, Escape or pressing the trigger again).\n    const resolvedValue = value === undefined ? uncontrolledValue : value;\n    const styles = navigationMenu({ orientation });\n    const close = useCallback(() => {\n      if (value === undefined) setUncontrolledValue(null);\n      else onValueChange?.(null);\n    }, [onValueChange, value]);\n\n    useEffect(() => {\n      if (resolvedValue === null) return;\n\n      const handleOutsideClick = (event: MouseEvent) => {\n        const target = event.target;\n        if (!(target instanceof Element)) return;\n        if (rootElementRef.current?.contains(target)) return;\n        if (\n          target.closest(\n            '[data-slot=\"navigation-menu-content\"], [data-slot=\"navigation-menu-positioner\"], [data-slot=\"navigation-menu-popup\"], [data-slot=\"navigation-menu-viewport\"]',\n          )\n        ) {\n          return;\n        }\n        close();\n      };\n\n      document.addEventListener(\"click\", handleOutsideClick);\n      return () => document.removeEventListener(\"click\", handleOutsideClick);\n    }, [close, resolvedValue]);\n\n    const setRootRef = (element: HTMLElement | null) => {\n      rootElementRef.current = element;\n      if (typeof ref === \"function\") ref(element);\n      else if (ref) ref.current = element;\n    };\n\n    return (\n      <NavigationMenuContext.Provider value={{ close, orientation, styles, value: resolvedValue }}>\n        <BaseNavigationMenu.Root\n          {...props}\n          onValueChange={(next) => {\n            if (value === undefined) setUncontrolledValue(next);\n            onValueChange?.(next);\n          }}\n          orientation={orientation}\n          ref={setRootRef}\n          value={resolvedValue}\n          className={withRecipeClassName(styles.root, className)}\n          data-jaci-component=\"navigation-menu\"\n          data-orientation={orientation}\n          data-slot=\"navigation-menu\"\n        >\n          {children}\n        </BaseNavigationMenu.Root>\n      </NavigationMenuContext.Provider>\n    );\n  },\n);\n\nexport type NavigationMenuListProps = ComponentPropsWithoutRef<typeof BaseNavigationMenu.List>;\nexport const NavigationMenuList = forwardRef<HTMLUListElement, NavigationMenuListProps>(\n  function NavigationMenuList({ className, ...props }, ref) {\n    const { styles, orientation } = useNavigationMenuContext();\n    return (\n      <BaseNavigationMenu.List\n        {...props}\n        ref={ref}\n        className={withRecipeClassName(styles.list, className)}\n        data-orientation={orientation}\n        data-slot=\"navigation-menu-list\"\n      />\n    );\n  },\n);\n\nexport type NavigationMenuItemProps = ComponentPropsWithoutRef<typeof BaseNavigationMenu.Item>;\nexport const NavigationMenuItem = forwardRef<HTMLLIElement, NavigationMenuItemProps>(\n  function NavigationMenuItem({ children, className, value, ...props }, ref) {\n    const { styles } = useNavigationMenuContext();\n    const generatedValue = useId();\n    const itemValue = value ?? generatedValue;\n    return (\n      <NavigationMenuItemContext.Provider value={{ value: itemValue }}>\n        <BaseNavigationMenu.Item\n          {...props}\n          ref={ref}\n          value={itemValue}\n          className={withRecipeClassName(styles.item, className)}\n          data-slot=\"navigation-menu-item\"\n        >\n          {children}\n        </BaseNavigationMenu.Item>\n      </NavigationMenuItemContext.Provider>\n    );\n  },\n);\n\nexport type NavigationMenuTriggerProps = ComponentPropsWithoutRef<\n  typeof BaseNavigationMenu.Trigger\n>;\nexport const NavigationMenuTrigger = forwardRef<HTMLButtonElement, NavigationMenuTriggerProps>(\n  function NavigationMenuTrigger({ className, onClick, ...props }, ref) {\n    const { close, styles, value } = useNavigationMenuContext();\n    const item = useContext(NavigationMenuItemContext);\n    return (\n      <BaseNavigationMenu.Trigger\n        {...props}\n        ref={ref}\n        className={withRecipeClassName(styles.trigger, className)}\n        data-slot=\"navigation-menu-trigger\"\n        onClick={(event) => {\n          // Base UI intentionally keeps a hover-opened menu open for a brief\n          // patient-click window. For a component library trigger, a second\n          // click should always be an explicit close action.\n          if (item?.value !== undefined && value === item.value) {\n            event.preventDefault();\n            close();\n          }\n          onClick?.(event);\n        }}\n      />\n    );\n  },\n);\n\nexport type NavigationMenuContentProps = ComponentPropsWithoutRef<\n  typeof BaseNavigationMenu.Content\n>;\nexport const NavigationMenuContent = forwardRef<HTMLDivElement, NavigationMenuContentProps>(\n  function NavigationMenuContent({ className, ...props }, ref) {\n    const { styles } = useNavigationMenuContext();\n    return (\n      <BaseNavigationMenu.Content\n        {...props}\n        ref={ref}\n        className={withRecipeClassName(styles.content, className)}\n        data-slot=\"navigation-menu-content\"\n      />\n    );\n  },\n);\n\nexport type NavigationMenuLinkProps = ComponentPropsWithoutRef<typeof BaseNavigationMenu.Link>;\nexport const NavigationMenuLink = forwardRef<HTMLAnchorElement, NavigationMenuLinkProps>(\n  function NavigationMenuLink({ className, ...props }, ref) {\n    const { styles } = useNavigationMenuContext();\n    return (\n      <BaseNavigationMenu.Link\n        {...props}\n        ref={ref}\n        className={withRecipeClassName(styles.link, className)}\n        data-slot=\"navigation-menu-link\"\n      />\n    );\n  },\n);\n\nexport type NavigationMenuIconProps = ComponentPropsWithoutRef<typeof BaseNavigationMenu.Icon>;\nexport const NavigationMenuIcon = forwardRef<HTMLSpanElement, NavigationMenuIconProps>(\n  function NavigationMenuIcon({ children = \"⌄\", className, ...props }, ref) {\n    const { styles } = useNavigationMenuContext();\n    return (\n      <BaseNavigationMenu.Icon\n        {...props}\n        ref={ref}\n        className={withRecipeClassName(styles.icon, className)}\n        data-slot=\"navigation-menu-icon\"\n      >\n        {children}\n      </BaseNavigationMenu.Icon>\n    );\n  },\n);\n\nexport const NavigationMenuPortal = BaseNavigationMenu.Portal;\n\nexport type NavigationMenuPositionerProps = ComponentPropsWithoutRef<\n  typeof BaseNavigationMenu.Positioner\n>;\nexport const NavigationMenuPositioner = forwardRef<HTMLDivElement, NavigationMenuPositionerProps>(\n  function NavigationMenuPositioner({ className, ...props }, ref) {\n    const { styles } = useNavigationMenuContext();\n    return (\n      <BaseNavigationMenu.Positioner\n        {...props}\n        ref={ref}\n        className={withRecipeClassName(styles.positioner, className)}\n        data-slot=\"navigation-menu-positioner\"\n      />\n    );\n  },\n);\n\nexport type NavigationMenuViewportProps = ComponentPropsWithoutRef<\n  typeof BaseNavigationMenu.Viewport\n>;\nexport const NavigationMenuViewport = forwardRef<HTMLDivElement, NavigationMenuViewportProps>(\n  function NavigationMenuViewport({ className, ...props }, ref) {\n    const { styles, value } = useNavigationMenuContext();\n    return (\n      <BaseNavigationMenu.Viewport\n        {...props}\n        ref={ref}\n        className={withRecipeClassName(styles.viewport, className)}\n        data-open={value !== null ? \"true\" : \"false\"}\n        data-slot=\"navigation-menu-viewport\"\n      />\n    );\n  },\n);\n\nexport type NavigationMenuPopupProps = ComponentPropsWithoutRef<typeof BaseNavigationMenu.Popup>;\nexport const NavigationMenuPopup = forwardRef<HTMLElement, NavigationMenuPopupProps>(\n  function NavigationMenuPopup({ className, ...props }, ref) {\n    const { styles } = useNavigationMenuContext();\n    return (\n      <BaseNavigationMenu.Popup\n        {...props}\n        ref={ref}\n        className={withRecipeClassName(styles.popup, className)}\n        data-slot=\"navigation-menu-popup\"\n      />\n    );\n  },\n);\n\nexport type NavigationMenuBackdropProps = ComponentPropsWithoutRef<\n  typeof BaseNavigationMenu.Backdrop\n>;\nexport const NavigationMenuBackdrop = forwardRef<HTMLDivElement, NavigationMenuBackdropProps>(\n  function NavigationMenuBackdrop({ className, ...props }, ref) {\n    const { styles } = useNavigationMenuContext();\n    return (\n      <BaseNavigationMenu.Backdrop\n        {...props}\n        ref={ref}\n        className={withRecipeClassName(styles.backdrop, className)}\n        data-slot=\"navigation-menu-backdrop\"\n      />\n    );\n  },\n);\n\nexport type NavigationMenuArrowProps = ComponentPropsWithoutRef<typeof BaseNavigationMenu.Arrow>;\nexport const NavigationMenuArrow = forwardRef<HTMLDivElement, NavigationMenuArrowProps>(\n  function NavigationMenuArrow({ className, ...props }, ref) {\n    const { styles } = useNavigationMenuContext();\n    return (\n      <BaseNavigationMenu.Arrow\n        {...props}\n        ref={ref}\n        className={withRecipeClassName(styles.arrow, className)}\n        data-slot=\"navigation-menu-arrow\"\n      />\n    );\n  },\n);\n\nexport const NavigationMenu = {\n  Root: NavigationMenuRoot,\n  List: NavigationMenuList,\n  Item: NavigationMenuItem,\n  Trigger: NavigationMenuTrigger,\n  Content: NavigationMenuContent,\n  Link: NavigationMenuLink,\n  Icon: NavigationMenuIcon,\n  Portal: NavigationMenuPortal,\n  Positioner: NavigationMenuPositioner,\n  Viewport: NavigationMenuViewport,\n  Popup: NavigationMenuPopup,\n  Backdrop: NavigationMenuBackdrop,\n  Arrow: NavigationMenuArrow,\n};\n"],"mappings":"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"}
+{"version":3,"file":"navigation-menu.cjs","names":["navigationMenu","BaseNavigationMenu","withRecipeClassName"],"sources":["../../../src/components/navigation-menu/navigation-menu.tsx"],"sourcesContent":["\"use client\";\n\nimport { NavigationMenu as BaseNavigationMenu } from \"@base-ui/react/navigation-menu\";\nimport {\n  createContext,\n  forwardRef,\n  useCallback,\n  useContext,\n  useEffect,\n  useId,\n  useRef,\n  useState,\n} from \"react\";\nimport type { ComponentPropsWithoutRef, ReactNode } from \"react\";\nimport type { NavigationMenuRoot as BaseNavigationMenuRoot } from \"@base-ui/react/navigation-menu\";\n\nimport { navigationMenu } from \"../../styled-system/recipes\";\nimport { withRecipeClassName } from \"../base-ui\";\n\nexport type NavigationMenuOrientation = \"horizontal\" | \"vertical\";\n\ninterface NavigationMenuContextValue {\n  close: () => void;\n  orientation: NavigationMenuOrientation;\n  styles: ReturnType<typeof navigationMenu>;\n  value: string | null;\n}\n\nconst NavigationMenuContext = createContext<NavigationMenuContextValue | null>(null);\nconst NavigationMenuItemContext = createContext<{ value?: string } | null>(null);\n\nfunction useNavigationMenuContext() {\n  const context = useContext(NavigationMenuContext);\n  if (!context) {\n    throw new Error(\"NavigationMenu parts must be rendered inside NavigationMenu.Root.\");\n  }\n\n  return context;\n}\n\nexport interface NavigationMenuRootProps\n  extends Omit<\n    BaseNavigationMenuRoot.Props<string>,\n    \"children\" | \"className\" | \"onValueChange\" | \"value\" | \"defaultValue\"\n  > {\n  value?: string | null;\n  defaultValue?: string | null;\n  onValueChange?: (value: string | null) => void;\n  orientation?: NavigationMenuOrientation;\n  children?: ReactNode;\n  className?: string;\n}\n\nexport const NavigationMenuRoot = forwardRef<HTMLElement, NavigationMenuRootProps>(\n  function NavigationMenuRoot(\n    {\n      children,\n      className,\n      defaultValue,\n      onValueChange,\n      orientation = \"horizontal\",\n      value,\n      ...props\n    },\n    ref,\n  ) {\n    const [uncontrolledValue, setUncontrolledValue] = useState<string | null>(defaultValue ?? null);\n    const rootElementRef = useRef<HTMLElement | null>(null);\n    // Keep the Base UI primitive controlled by the wrapper state even when the\n    // consumer uses the uncontrolled API. This keeps the viewport and the\n    // primitive in sync when Base UI dismisses a menu (pointer leave, outside\n    // press, Escape or pressing the trigger again).\n    const resolvedValue = value === undefined ? uncontrolledValue : value;\n    const styles = navigationMenu({ orientation });\n    const close = useCallback(() => {\n      if (value === undefined) setUncontrolledValue(null);\n      else onValueChange?.(null);\n    }, [onValueChange, value]);\n\n    useEffect(() => {\n      if (resolvedValue === null) return;\n      const handleOutsidePress = (event: MouseEvent) => {\n        const target = event.target;\n        if (!(target instanceof Element)) return;\n        if (rootElementRef.current?.contains(target)) return;\n        if (\n          target.closest(\n            '[data-slot=\"navigation-menu-content\"], [data-slot=\"navigation-menu-positioner\"], [data-slot=\"navigation-menu-popup\"], [data-slot=\"navigation-menu-viewport\"]',\n          )\n        ) {\n          return;\n        }\n        close();\n      };\n      document.addEventListener(\"click\", handleOutsidePress);\n      return () => document.removeEventListener(\"click\", handleOutsidePress);\n    }, [close, resolvedValue]);\n\n    const setRootRef = (element: HTMLElement | null) => {\n      rootElementRef.current = element;\n      if (typeof ref === \"function\") ref(element);\n      else if (ref) ref.current = element;\n    };\n\n    return (\n      <NavigationMenuContext.Provider value={{ close, orientation, styles, value: resolvedValue }}>\n        <BaseNavigationMenu.Root\n          {...props}\n          onValueChange={(next) => {\n            if (value === undefined) setUncontrolledValue(next);\n            onValueChange?.(next);\n          }}\n          orientation={orientation}\n          ref={setRootRef}\n          value={resolvedValue}\n          className={withRecipeClassName(styles.root, className)}\n          data-jaci-component=\"navigation-menu\"\n          data-orientation={orientation}\n          data-slot=\"navigation-menu\"\n        >\n          {children}\n        </BaseNavigationMenu.Root>\n      </NavigationMenuContext.Provider>\n    );\n  },\n);\n\nexport type NavigationMenuListProps = ComponentPropsWithoutRef<typeof BaseNavigationMenu.List>;\nexport const NavigationMenuList = forwardRef<HTMLUListElement, NavigationMenuListProps>(\n  function NavigationMenuList({ className, ...props }, ref) {\n    const { styles, orientation } = useNavigationMenuContext();\n    return (\n      <BaseNavigationMenu.List\n        {...props}\n        ref={ref}\n        className={withRecipeClassName(styles.list, className)}\n        data-orientation={orientation}\n        data-slot=\"navigation-menu-list\"\n      />\n    );\n  },\n);\n\nexport type NavigationMenuItemProps = ComponentPropsWithoutRef<typeof BaseNavigationMenu.Item>;\nexport const NavigationMenuItem = forwardRef<HTMLLIElement, NavigationMenuItemProps>(\n  function NavigationMenuItem({ children, className, value, ...props }, ref) {\n    const { styles } = useNavigationMenuContext();\n    const generatedValue = useId();\n    const itemValue = value ?? generatedValue;\n    return (\n      <NavigationMenuItemContext.Provider value={{ value: itemValue }}>\n        <BaseNavigationMenu.Item\n          {...props}\n          ref={ref}\n          value={itemValue}\n          className={withRecipeClassName(styles.item, className)}\n          data-slot=\"navigation-menu-item\"\n        >\n          {children}\n        </BaseNavigationMenu.Item>\n      </NavigationMenuItemContext.Provider>\n    );\n  },\n);\n\nexport type NavigationMenuTriggerProps = ComponentPropsWithoutRef<\n  typeof BaseNavigationMenu.Trigger\n>;\nexport const NavigationMenuTrigger = forwardRef<HTMLButtonElement, NavigationMenuTriggerProps>(\n  function NavigationMenuTrigger({ className, onClick, ...props }, ref) {\n    const { close, styles, value } = useNavigationMenuContext();\n    const item = useContext(NavigationMenuItemContext);\n    return (\n      <BaseNavigationMenu.Trigger\n        {...props}\n        ref={ref}\n        className={withRecipeClassName(styles.trigger, className)}\n        data-slot=\"navigation-menu-trigger\"\n        onClick={(event) => {\n          // Base UI intentionally keeps a hover-opened menu open for a brief\n          // patient-click window. For a component library trigger, a second\n          // click should always be an explicit close action.\n          if (item?.value !== undefined && value === item.value) {\n            event.preventDefault();\n            close();\n          }\n          onClick?.(event);\n        }}\n      />\n    );\n  },\n);\n\nexport type NavigationMenuContentProps = ComponentPropsWithoutRef<\n  typeof BaseNavigationMenu.Content\n>;\nexport const NavigationMenuContent = forwardRef<HTMLDivElement, NavigationMenuContentProps>(\n  function NavigationMenuContent({ className, ...props }, ref) {\n    const { styles } = useNavigationMenuContext();\n    return (\n      <BaseNavigationMenu.Content\n        {...props}\n        ref={ref}\n        className={withRecipeClassName(styles.content, className)}\n        data-slot=\"navigation-menu-content\"\n      />\n    );\n  },\n);\n\nexport type NavigationMenuLinkProps = ComponentPropsWithoutRef<typeof BaseNavigationMenu.Link>;\nexport const NavigationMenuLink = forwardRef<HTMLAnchorElement, NavigationMenuLinkProps>(\n  function NavigationMenuLink({ className, ...props }, ref) {\n    const { styles } = useNavigationMenuContext();\n    return (\n      <BaseNavigationMenu.Link\n        {...props}\n        ref={ref}\n        className={withRecipeClassName(styles.link, className)}\n        data-slot=\"navigation-menu-link\"\n      />\n    );\n  },\n);\n\nexport type NavigationMenuIconProps = ComponentPropsWithoutRef<typeof BaseNavigationMenu.Icon>;\nexport const NavigationMenuIcon = forwardRef<HTMLSpanElement, NavigationMenuIconProps>(\n  function NavigationMenuIcon({ children = \"⌄\", className, ...props }, ref) {\n    const { styles } = useNavigationMenuContext();\n    return (\n      <BaseNavigationMenu.Icon\n        {...props}\n        ref={ref}\n        className={withRecipeClassName(styles.icon, className)}\n        data-slot=\"navigation-menu-icon\"\n      >\n        {children}\n      </BaseNavigationMenu.Icon>\n    );\n  },\n);\n\nexport const NavigationMenuPortal = BaseNavigationMenu.Portal;\n\nexport type NavigationMenuPositionerProps = ComponentPropsWithoutRef<\n  typeof BaseNavigationMenu.Positioner\n>;\nexport const NavigationMenuPositioner = forwardRef<HTMLDivElement, NavigationMenuPositionerProps>(\n  function NavigationMenuPositioner({ className, ...props }, ref) {\n    const { styles } = useNavigationMenuContext();\n    return (\n      <BaseNavigationMenu.Positioner\n        {...props}\n        ref={ref}\n        className={withRecipeClassName(styles.positioner, className)}\n        data-slot=\"navigation-menu-positioner\"\n      />\n    );\n  },\n);\n\nexport type NavigationMenuViewportProps = ComponentPropsWithoutRef<\n  typeof BaseNavigationMenu.Viewport\n>;\nexport const NavigationMenuViewport = forwardRef<HTMLDivElement, NavigationMenuViewportProps>(\n  function NavigationMenuViewport({ className, ...props }, ref) {\n    const { styles, value } = useNavigationMenuContext();\n    return (\n      <BaseNavigationMenu.Viewport\n        {...props}\n        ref={ref}\n        className={withRecipeClassName(styles.viewport, className)}\n        data-open={value !== null ? \"true\" : \"false\"}\n        data-slot=\"navigation-menu-viewport\"\n      />\n    );\n  },\n);\n\nexport type NavigationMenuPopupProps = ComponentPropsWithoutRef<typeof BaseNavigationMenu.Popup>;\nexport const NavigationMenuPopup = forwardRef<HTMLElement, NavigationMenuPopupProps>(\n  function NavigationMenuPopup({ className, ...props }, ref) {\n    const { styles } = useNavigationMenuContext();\n    return (\n      <BaseNavigationMenu.Popup\n        {...props}\n        ref={ref}\n        className={withRecipeClassName(styles.popup, className)}\n        data-slot=\"navigation-menu-popup\"\n      />\n    );\n  },\n);\n\nexport type NavigationMenuBackdropProps = ComponentPropsWithoutRef<\n  typeof BaseNavigationMenu.Backdrop\n>;\nexport const NavigationMenuBackdrop = forwardRef<HTMLDivElement, NavigationMenuBackdropProps>(\n  function NavigationMenuBackdrop({ className, ...props }, ref) {\n    const { styles } = useNavigationMenuContext();\n    return (\n      <BaseNavigationMenu.Backdrop\n        {...props}\n        ref={ref}\n        className={withRecipeClassName(styles.backdrop, className)}\n        data-slot=\"navigation-menu-backdrop\"\n      />\n    );\n  },\n);\n\nexport type NavigationMenuArrowProps = ComponentPropsWithoutRef<typeof BaseNavigationMenu.Arrow>;\nexport const NavigationMenuArrow = forwardRef<HTMLDivElement, NavigationMenuArrowProps>(\n  function NavigationMenuArrow({ className, ...props }, ref) {\n    const { styles } = useNavigationMenuContext();\n    return (\n      <BaseNavigationMenu.Arrow\n        {...props}\n        ref={ref}\n        className={withRecipeClassName(styles.arrow, className)}\n        data-slot=\"navigation-menu-arrow\"\n      />\n    );\n  },\n);\n\nexport const NavigationMenu = {\n  Root: NavigationMenuRoot,\n  List: NavigationMenuList,\n  Item: NavigationMenuItem,\n  Trigger: NavigationMenuTrigger,\n  Content: NavigationMenuContent,\n  Link: NavigationMenuLink,\n  Icon: NavigationMenuIcon,\n  Portal: NavigationMenuPortal,\n  Positioner: NavigationMenuPositioner,\n  Viewport: NavigationMenuViewport,\n  Popup: NavigationMenuPopup,\n  Backdrop: NavigationMenuBackdrop,\n  Arrow: NavigationMenuArrow,\n};\n"],"mappings":"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"}

package/dist/components/navigation-menu/navigation-menu.js

@@ -23,15 +23,15 @@ const NavigationMenuRoot$1 = forwardRef(function NavigationMenuRoot({ children,
 	}, [onValueChange, value]);
 	useEffect(() => {
 		if (resolvedValue === null) return;
-		const handleOutsideClick = (event) => {
+		const handleOutsidePress = (event) => {
 			const target = event.target;
 			if (!(target instanceof Element)) return;
 			if (rootElementRef.current?.contains(target)) return;
 			if (target.closest("[data-slot=\"navigation-menu-content\"], [data-slot=\"navigation-menu-positioner\"], [data-slot=\"navigation-menu-popup\"], [data-slot=\"navigation-menu-viewport\"]")) return;
 			close();
 		};
-		document.addEventListener("click", handleOutsideClick);
-		return () => document.removeEventListener("click", handleOutsideClick);
+		document.addEventListener("click", handleOutsidePress);
+		return () => document.removeEventListener("click", handleOutsidePress);
 	}, [close, resolvedValue]);
 	const setRootRef = (element) => {
 		rootElementRef.current = element;