jaci-ui 0.1.0

package/dist/components/meter/meter.js

@@ -0,0 +1,86 @@
+import { withRecipeClassName } from "../base-ui.js";
+import { meter } from "../../styled-system/recipes/meter.js";
+import { createContext, forwardRef, useContext } from "react";
+import { jsx } from "react/jsx-runtime";
+import { Meter } from "@base-ui/react/meter";
+//#region src/components/meter/meter.tsx
+const MeterContext = createContext(null);
+function useMeterContext() {
+	const context = useContext(MeterContext);
+	if (!context) throw new Error("Meter parts must be rendered inside Meter.Root.");
+	return context;
+}
+const MeterRoot = forwardRef(function MeterRoot({ children, className, size = "md", tone = "accent", value, min = 0, max = 100, ...props }, ref) {
+	const styles = meter({
+		size,
+		tone
+	});
+	const safeMax = Number.isFinite(max) && max > min ? max : min + 1;
+	const safeValue = Number.isFinite(value) ? Math.min(Math.max(value, min), safeMax) : min;
+	const percentage = (safeValue - min) / (safeMax - min) * 100;
+	return /* @__PURE__ */ jsx(MeterContext.Provider, {
+		value: { styles },
+		children: /* @__PURE__ */ jsx(Meter.Root, {
+			...props,
+			ref,
+			max: safeMax,
+			min,
+			value: safeValue,
+			className: withRecipeClassName(styles.root, className),
+			"data-jaci-component": "meter",
+			"data-slot": "meter",
+			style: {
+				"--meter-value": `${percentage}%`,
+				...props.style
+			},
+			children
+		})
+	});
+});
+const MeterLabel = forwardRef(function MeterLabel({ className, ...props }, ref) {
+	const { styles } = useMeterContext();
+	return /* @__PURE__ */ jsx(Meter.Label, {
+		...props,
+		ref,
+		className: withRecipeClassName(styles.label, className),
+		"data-slot": "meter-label"
+	});
+});
+const MeterTrack = forwardRef(function MeterTrack({ className, ...props }, ref) {
+	const { styles } = useMeterContext();
+	return /* @__PURE__ */ jsx(Meter.Track, {
+		...props,
+		ref,
+		className: withRecipeClassName(styles.track, className),
+		"data-slot": "meter-track"
+	});
+});
+const MeterIndicator = forwardRef(function MeterIndicator({ className, ...props }, ref) {
+	const { styles } = useMeterContext();
+	return /* @__PURE__ */ jsx(Meter.Indicator, {
+		...props,
+		ref,
+		className: withRecipeClassName(styles.indicator, className),
+		"data-slot": "meter-indicator"
+	});
+});
+const MeterValue = forwardRef(function MeterValue({ className, ...props }, ref) {
+	const { styles } = useMeterContext();
+	return /* @__PURE__ */ jsx(Meter.Value, {
+		...props,
+		ref,
+		className: withRecipeClassName(styles.value, className),
+		"data-slot": "meter-value"
+	});
+});
+const Meter$1 = {
+	Root: MeterRoot,
+	Label: MeterLabel,
+	Track: MeterTrack,
+	Indicator: MeterIndicator,
+	Value: MeterValue
+};
+//#endregion
+export { Meter$1 as Meter, MeterIndicator, MeterLabel, MeterRoot, MeterTrack, MeterValue };
+
+//# sourceMappingURL=meter.js.map

package/dist/components/meter/meter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"meter.js","names":["BaseMeter","Meter"],"sources":["../../../src/components/meter/meter.tsx"],"sourcesContent":["import { Meter as BaseMeter } from \"@base-ui/react/meter\";\nimport { createContext, forwardRef, useContext } from \"react\";\nimport type { CSSProperties, ComponentPropsWithoutRef, ReactNode } from \"react\";\n\nimport { meter } from \"../../styled-system/recipes\";\nimport { withRecipeClassName } from \"../base-ui\";\n\nexport type MeterSize = \"sm\" | \"md\" | \"lg\";\nexport type MeterTone = \"neutral\" | \"accent\" | \"success\" | \"warning\" | \"danger\";\n\ninterface MeterContextValue {\n  styles: ReturnType<typeof meter>;\n}\n\nconst MeterContext = createContext<MeterContextValue | null>(null);\n\nfunction useMeterContext() {\n  const context = useContext(MeterContext);\n  if (!context) {\n    throw new Error(\"Meter parts must be rendered inside Meter.Root.\");\n  }\n\n  return context;\n}\n\nexport interface MeterRootProps extends Omit<BaseMeter.Root.Props, \"children\" | \"className\"> {\n  size?: MeterSize;\n  tone?: MeterTone;\n  children?: ReactNode;\n  className?: string;\n}\n\nexport const MeterRoot = forwardRef<HTMLDivElement, MeterRootProps>(function MeterRoot(\n  { children, className, size = \"md\", tone = \"accent\", value, min = 0, max = 100, ...props },\n  ref,\n) {\n  const styles = meter({ size, tone });\n  const safeMax = Number.isFinite(max) && max > min ? max : min + 1;\n  const safeValue = Number.isFinite(value) ? Math.min(Math.max(value, min), safeMax) : min;\n  const percentage = ((safeValue - min) / (safeMax - min)) * 100;\n\n  return (\n    <MeterContext.Provider value={{ styles }}>\n      <BaseMeter.Root\n        {...props}\n        ref={ref}\n        max={safeMax}\n        min={min}\n        value={safeValue}\n        className={withRecipeClassName(styles.root, className)}\n        data-jaci-component=\"meter\"\n        data-slot=\"meter\"\n        style={{ \"--meter-value\": `${percentage}%`, ...props.style } as unknown as CSSProperties}\n      >\n        {children}\n      </BaseMeter.Root>\n    </MeterContext.Provider>\n  );\n});\n\nexport type MeterLabelProps = ComponentPropsWithoutRef<typeof BaseMeter.Label>;\nexport const MeterLabel = forwardRef<HTMLSpanElement, MeterLabelProps>(function MeterLabel(\n  { className, ...props },\n  ref,\n) {\n  const { styles } = useMeterContext();\n  return (\n    <BaseMeter.Label\n      {...props}\n      ref={ref}\n      className={withRecipeClassName(styles.label, className)}\n      data-slot=\"meter-label\"\n    />\n  );\n});\n\nexport type MeterTrackProps = ComponentPropsWithoutRef<typeof BaseMeter.Track>;\nexport const MeterTrack = forwardRef<HTMLDivElement, MeterTrackProps>(function MeterTrack(\n  { className, ...props },\n  ref,\n) {\n  const { styles } = useMeterContext();\n  return (\n    <BaseMeter.Track\n      {...props}\n      ref={ref}\n      className={withRecipeClassName(styles.track, className)}\n      data-slot=\"meter-track\"\n    />\n  );\n});\n\nexport type MeterIndicatorProps = ComponentPropsWithoutRef<typeof BaseMeter.Indicator>;\nexport const MeterIndicator = forwardRef<HTMLDivElement, MeterIndicatorProps>(\n  function MeterIndicator({ className, ...props }, ref) {\n    const { styles } = useMeterContext();\n    return (\n      <BaseMeter.Indicator\n        {...props}\n        ref={ref}\n        className={withRecipeClassName(styles.indicator, className)}\n        data-slot=\"meter-indicator\"\n      />\n    );\n  },\n);\n\nexport type MeterValueProps = ComponentPropsWithoutRef<typeof BaseMeter.Value>;\nexport const MeterValue = forwardRef<HTMLSpanElement, MeterValueProps>(function MeterValue(\n  { className, ...props },\n  ref,\n) {\n  const { styles } = useMeterContext();\n  return (\n    <BaseMeter.Value\n      {...props}\n      ref={ref}\n      className={withRecipeClassName(styles.value, className)}\n      data-slot=\"meter-value\"\n    />\n  );\n});\n\nexport const Meter = {\n  Root: MeterRoot,\n  Label: MeterLabel,\n  Track: MeterTrack,\n  Indicator: MeterIndicator,\n  Value: MeterValue,\n};\n"],"mappings":";;;;;;AAcA,MAAM,eAAe,cAAwC,IAAI;AAEjE,SAAS,kBAAkB;CACzB,MAAM,UAAU,WAAW,YAAY;CACvC,IAAI,CAAC,SACH,MAAM,IAAI,MAAM,iDAAiD;CAGnE,OAAO;AACT;AASA,MAAa,YAAY,WAA2C,SAAS,UAC3E,EAAE,UAAU,WAAW,OAAO,MAAM,OAAO,UAAU,OAAO,MAAM,GAAG,MAAM,KAAK,GAAG,SACnF,KACA;CACA,MAAM,SAAS,MAAM;EAAE;EAAM;CAAK,CAAC;CACnC,MAAM,UAAU,OAAO,SAAS,GAAG,KAAK,MAAM,MAAM,MAAM,MAAM;CAChE,MAAM,YAAY,OAAO,SAAS,KAAK,IAAI,KAAK,IAAI,KAAK,IAAI,OAAO,GAAG,GAAG,OAAO,IAAI;CACrF,MAAM,cAAe,YAAY,QAAQ,UAAU,OAAQ;CAE3D,OACE,oBAAC,aAAa,UAAd;EAAuB,OAAO,EAAE,OAAO;YACrC,oBAACA,MAAU,MAAX;GACE,GAAI;GACC;GACL,KAAK;GACA;GACL,OAAO;GACP,WAAW,oBAAoB,OAAO,MAAM,SAAS;GACrD,uBAAoB;GACpB,aAAU;GACV,OAAO;IAAE,iBAAiB,GAAG,WAAW;IAAI,GAAG,MAAM;GAAM;GAE1D;EACa,CAAA;CACK,CAAA;AAE3B,CAAC;AAGD,MAAa,aAAa,WAA6C,SAAS,WAC9E,EAAE,WAAW,GAAG,SAChB,KACA;CACA,MAAM,EAAE,WAAW,gBAAgB;CACnC,OACE,oBAACA,MAAU,OAAX;EACE,GAAI;EACC;EACL,WAAW,oBAAoB,OAAO,OAAO,SAAS;EACtD,aAAU;CACX,CAAA;AAEL,CAAC;AAGD,MAAa,aAAa,WAA4C,SAAS,WAC7E,EAAE,WAAW,GAAG,SAChB,KACA;CACA,MAAM,EAAE,WAAW,gBAAgB;CACnC,OACE,oBAACA,MAAU,OAAX;EACE,GAAI;EACC;EACL,WAAW,oBAAoB,OAAO,OAAO,SAAS;EACtD,aAAU;CACX,CAAA;AAEL,CAAC;AAGD,MAAa,iBAAiB,WAC5B,SAAS,eAAe,EAAE,WAAW,GAAG,SAAS,KAAK;CACpD,MAAM,EAAE,WAAW,gBAAgB;CACnC,OACE,oBAACA,MAAU,WAAX;EACE,GAAI;EACC;EACL,WAAW,oBAAoB,OAAO,WAAW,SAAS;EAC1D,aAAU;CACX,CAAA;AAEL,CACF;AAGA,MAAa,aAAa,WAA6C,SAAS,WAC9E,EAAE,WAAW,GAAG,SAChB,KACA;CACA,MAAM,EAAE,WAAW,gBAAgB;CACnC,OACE,oBAACA,MAAU,OAAX;EACE,GAAI;EACC;EACL,WAAW,oBAAoB,OAAO,OAAO,SAAS;EACtD,aAAU;CACX,CAAA;AAEL,CAAC;AAED,MAAaC,UAAQ;CACnB,MAAM;CACN,OAAO;CACP,OAAO;CACP,WAAW;CACX,OAAO;AACT"}

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

@@ -0,0 +1,2 @@
+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";
+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

@@ -0,0 +1,2 @@
+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";
+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/navigation.cjs

@@ -0,0 +1,163 @@
+"use client";
+const require_cx = require("../../styled-system/css/cx.cjs");
+const require_base_ui = require("../base-ui.cjs");
+const require_navbar = require("../../styled-system/recipes/navbar.cjs");
+const require_bottom_navigation = require("../../styled-system/recipes/bottom-navigation.cjs");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let _base_ui_react_dialog = require("@base-ui/react/dialog");
+//#region src/components/navigation/navigation.tsx
+function NavbarRoot(props) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_dialog.Dialog.Root, { ...props });
+}
+/** A fixed, translucent zinc navigation surface. */
+const NavbarBar = (0, react.forwardRef)(function NavbarBar({ className, ...props }, ref) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("nav", {
+		...props,
+		ref,
+		className: require_cx.cx(require_navbar.navbar().bar, className),
+		"data-jaci-component": "navbar",
+		"data-slot": "navbar-bar"
+	});
+});
+const NavbarStart = (0, react.forwardRef)(function NavbarStart({ className, ...props }, ref) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		...props,
+		ref,
+		className: require_cx.cx(require_navbar.navbar().start, className),
+		"data-slot": "navbar-start"
+	});
+});
+const NavbarCenter = (0, react.forwardRef)(function NavbarCenter({ className, ...props }, ref) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		...props,
+		ref,
+		className: require_cx.cx(require_navbar.navbar().center, className),
+		"data-slot": "navbar-center"
+	});
+});
+const NavbarEnd = (0, react.forwardRef)(function NavbarEnd({ className, ...props }, ref) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		...props,
+		ref,
+		className: require_cx.cx(require_navbar.navbar().end, className),
+		"data-slot": "navbar-end"
+	});
+});
+/**
+* Opens the responsive drawer. It is hidden at the large breakpoint by
+* default, while still allowing a controlled host to render a drawer anywhere.
+*/
+const NavbarToggle = (0, react.forwardRef)(function NavbarToggle({ "aria-label": ariaLabel, children, className, ...props }, ref) {
+	const hasVisibleLabel = children != null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_dialog.Dialog.Trigger, {
+		...props,
+		"aria-label": ariaLabel ?? (hasVisibleLabel ? void 0 : "Open navigation menu"),
+		ref,
+		className: require_base_ui.withRecipeClassName(require_navbar.navbar().toggle, className),
+		"data-slot": "navbar-toggle",
+		children: children ?? "☰"
+	});
+});
+/**
+* A left-aligned mobile drawer. It intentionally owns the Dialog portal,
+* backdrop, viewport, and popup so consumers cannot accidentally omit the
+* pieces required for focus trapping and Escape/backdrop dismissal.
+*/
+const NavbarDrawer = (0, react.forwardRef)(function NavbarDrawer({ "aria-label": ariaLabel, children, className, portalProps, ...props }, ref) {
+	const styles = require_navbar.navbar();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_base_ui_react_dialog.Dialog.Portal, {
+		...portalProps,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_dialog.Dialog.Backdrop, {
+			className: require_base_ui.withRecipeClassName(styles.drawerBackdrop, void 0),
+			"data-slot": "navbar-drawer-backdrop"
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_dialog.Dialog.Viewport, {
+			className: require_base_ui.withRecipeClassName(styles.drawerViewport, void 0),
+			"data-slot": "navbar-drawer-viewport",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_dialog.Dialog.Popup, {
+				...props,
+				"aria-label": ariaLabel ?? "Navigation menu",
+				ref,
+				className: require_base_ui.withRecipeClassName(styles.drawer, className),
+				"data-jaci-component": "navbar",
+				"data-slot": "navbar-drawer",
+				children
+			})
+		})]
+	});
+});
+/** A close affordance for use inside `Navbar.Drawer`. */
+const NavbarClose = (0, react.forwardRef)(function NavbarClose({ "aria-label": ariaLabel, children, className, ...props }, ref) {
+	const hasVisibleLabel = children != null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_dialog.Dialog.Close, {
+		...props,
+		"aria-label": ariaLabel ?? (hasVisibleLabel ? void 0 : "Close navigation menu"),
+		ref,
+		className: require_base_ui.withRecipeClassName(require_navbar.navbar().close, className),
+		"data-slot": "navbar-close",
+		children: children ?? "×"
+	});
+});
+/** A semantic navigation link for either the fixed bar or mobile drawer. */
+const NavbarItem = (0, react.forwardRef)(function NavbarItem({ "aria-current": ariaCurrent, active = false, className, ...props }, ref) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
+		...props,
+		"aria-current": ariaCurrent ?? (active ? "page" : void 0),
+		ref,
+		className: require_cx.cx(require_navbar.navbar({ active }).item, className),
+		"data-active": active || void 0,
+		"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.
+*/
+const BottomNavigationRoot = (0, react.forwardRef)(function BottomNavigationRoot({ className, ...props }, ref) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("nav", {
+		...props,
+		ref,
+		className: require_cx.cx(require_bottom_navigation.bottomNavigation().root, className),
+		"data-jaci-component": "bottom-navigation",
+		"data-slot": "bottom-navigation"
+	});
+});
+const BottomNavigationItem = (0, react.forwardRef)(function BottomNavigationItem({ "aria-current": ariaCurrent, active = false, className, ...props }, ref) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
+		...props,
+		"aria-current": ariaCurrent ?? (active ? "page" : void 0),
+		ref,
+		className: require_cx.cx(require_bottom_navigation.bottomNavigation({ active }).item, className),
+		"data-active": active || void 0,
+		"data-slot": "bottom-navigation-item"
+	});
+});
+const BottomNavigation = Object.assign(BottomNavigationRoot, { Item: BottomNavigationItem });
+//#endregion
+exports.BottomNavigation = BottomNavigation;
+exports.BottomNavigationItem = BottomNavigationItem;
+exports.BottomNavigationRoot = BottomNavigationRoot;
+exports.Navbar = Navbar;
+exports.NavbarBar = NavbarBar;
+exports.NavbarCenter = NavbarCenter;
+exports.NavbarClose = NavbarClose;
+exports.NavbarDrawer = NavbarDrawer;
+exports.NavbarEnd = NavbarEnd;
+exports.NavbarItem = NavbarItem;
+exports.NavbarRoot = NavbarRoot;
+exports.NavbarStart = NavbarStart;
+exports.NavbarToggle = NavbarToggle;
+
+//# sourceMappingURL=navigation.cjs.map

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

@@ -0,0 +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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"}

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

@@ -0,0 +1,75 @@
+import { ComponentPropsWithoutRef } from "react";
+import { Dialog, DialogRoot } from "@base-ui/react/dialog";
+//#region src/components/navigation/navigation.d.ts
+/**
+ * Groups a responsive navigation bar and its mobile drawer. The `open`,
+ * `defaultOpen`, and `onOpenChange` props are forwarded to Base UI's Dialog
+ * root, which supplies focus management, Escape handling, and backdrop
+ * dismissal for `Navbar.Drawer`.
+ */
+type NavbarRootProps<Payload = unknown> = DialogRoot.Props<Payload>;
+declare function NavbarRoot<Payload = unknown>(props: NavbarRootProps<Payload>): import("react").JSX.Element;
+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>>;
+type NavbarStartProps = ComponentPropsWithoutRef<"div">;
+declare const NavbarStart: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+type NavbarCenterProps = ComponentPropsWithoutRef<"div">;
+declare const NavbarCenter: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+type NavbarEndProps = ComponentPropsWithoutRef<"div">;
+declare const NavbarEnd: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+type NavbarToggleProps = ComponentPropsWithoutRef<typeof Dialog.Trigger>;
+/**
+ * Opens the responsive drawer. It is hidden at the large breakpoint by
+ * default, while still allowing a controlled host to render a drawer anywhere.
+ */
+declare const NavbarToggle: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react").DialogTriggerProps<unknown> & import("react").RefAttributes<HTMLElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+type NavbarDrawerPortalProps = Omit<ComponentPropsWithoutRef<typeof Dialog.Portal>, "children">;
+interface NavbarDrawerProps extends ComponentPropsWithoutRef<typeof Dialog.Popup> {
+  /** Optional controls for the underlying Base UI portal. */
+  portalProps?: NavbarDrawerPortalProps;
+}
+/**
+ * A left-aligned mobile drawer. It intentionally owns the Dialog portal,
+ * backdrop, viewport, and popup so consumers cannot accidentally omit the
+ * pieces required for focus trapping and Escape/backdrop dismissal.
+ */
+declare const NavbarDrawer: import("react").ForwardRefExoticComponent<NavbarDrawerProps & import("react").RefAttributes<HTMLDivElement>>;
+type NavbarCloseProps = ComponentPropsWithoutRef<typeof Dialog.Close>;
+/** A close affordance for use inside `Navbar.Drawer`. */
+declare const NavbarClose: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").AlertDialogCloseProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+interface NavbarItemProps extends ComponentPropsWithoutRef<"a"> {
+  /** Marks the current navigation destination. */
+  active?: boolean;
+}
+/** 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
+ * independent from `Navbar` so it can be used in layouts without a drawer.
+ */
+declare const BottomNavigationRoot: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & import("react").RefAttributes<HTMLElement>>;
+interface BottomNavigationItemProps extends ComponentPropsWithoutRef<"a"> {
+  /** Marks the current navigation destination. */
+  active?: boolean;
+}
+declare const BottomNavigationItem: import("react").ForwardRefExoticComponent<BottomNavigationItemProps & import("react").RefAttributes<HTMLAnchorElement>>;
+declare const BottomNavigation: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & import("react").RefAttributes<HTMLElement>> & {
+  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 };
+//# sourceMappingURL=navigation.d.cts.map

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

@@ -0,0 +1,75 @@
+import { ComponentPropsWithoutRef } from "react";
+import { Dialog, DialogRoot } from "@base-ui/react/dialog";
+//#region src/components/navigation/navigation.d.ts
+/**
+ * Groups a responsive navigation bar and its mobile drawer. The `open`,
+ * `defaultOpen`, and `onOpenChange` props are forwarded to Base UI's Dialog
+ * root, which supplies focus management, Escape handling, and backdrop
+ * dismissal for `Navbar.Drawer`.
+ */
+type NavbarRootProps<Payload = unknown> = DialogRoot.Props<Payload>;
+declare function NavbarRoot<Payload = unknown>(props: NavbarRootProps<Payload>): import("react").JSX.Element;
+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>>;
+type NavbarStartProps = ComponentPropsWithoutRef<"div">;
+declare const NavbarStart: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+type NavbarCenterProps = ComponentPropsWithoutRef<"div">;
+declare const NavbarCenter: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+type NavbarEndProps = ComponentPropsWithoutRef<"div">;
+declare const NavbarEnd: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+type NavbarToggleProps = ComponentPropsWithoutRef<typeof Dialog.Trigger>;
+/**
+ * Opens the responsive drawer. It is hidden at the large breakpoint by
+ * default, while still allowing a controlled host to render a drawer anywhere.
+ */
+declare const NavbarToggle: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react").DialogTriggerProps<unknown> & import("react").RefAttributes<HTMLElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+type NavbarDrawerPortalProps = Omit<ComponentPropsWithoutRef<typeof Dialog.Portal>, "children">;
+interface NavbarDrawerProps extends ComponentPropsWithoutRef<typeof Dialog.Popup> {
+  /** Optional controls for the underlying Base UI portal. */
+  portalProps?: NavbarDrawerPortalProps;
+}
+/**
+ * A left-aligned mobile drawer. It intentionally owns the Dialog portal,
+ * backdrop, viewport, and popup so consumers cannot accidentally omit the
+ * pieces required for focus trapping and Escape/backdrop dismissal.
+ */
+declare const NavbarDrawer: import("react").ForwardRefExoticComponent<NavbarDrawerProps & import("react").RefAttributes<HTMLDivElement>>;
+type NavbarCloseProps = ComponentPropsWithoutRef<typeof Dialog.Close>;
+/** A close affordance for use inside `Navbar.Drawer`. */
+declare const NavbarClose: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").AlertDialogCloseProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+interface NavbarItemProps extends ComponentPropsWithoutRef<"a"> {
+  /** Marks the current navigation destination. */
+  active?: boolean;
+}
+/** 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
+ * independent from `Navbar` so it can be used in layouts without a drawer.
+ */
+declare const BottomNavigationRoot: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & import("react").RefAttributes<HTMLElement>>;
+interface BottomNavigationItemProps extends ComponentPropsWithoutRef<"a"> {
+  /** Marks the current navigation destination. */
+  active?: boolean;
+}
+declare const BottomNavigationItem: import("react").ForwardRefExoticComponent<BottomNavigationItemProps & import("react").RefAttributes<HTMLAnchorElement>>;
+declare const BottomNavigation: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & import("react").RefAttributes<HTMLElement>> & {
+  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 };
+//# sourceMappingURL=navigation.d.ts.map

package/dist/components/navigation/navigation.js

@@ -0,0 +1,151 @@
+"use client";
+import { cx } from "../../styled-system/css/cx.js";
+import { withRecipeClassName } from "../base-ui.js";
+import { navbar } from "../../styled-system/recipes/navbar.js";
+import { bottomNavigation } from "../../styled-system/recipes/bottom-navigation.js";
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Dialog } from "@base-ui/react/dialog";
+//#region src/components/navigation/navigation.tsx
+function NavbarRoot(props) {
+	return /* @__PURE__ */ jsx(Dialog.Root, { ...props });
+}
+/** A fixed, translucent zinc navigation surface. */
+const NavbarBar = forwardRef(function NavbarBar({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx("nav", {
+		...props,
+		ref,
+		className: cx(navbar().bar, className),
+		"data-jaci-component": "navbar",
+		"data-slot": "navbar-bar"
+	});
+});
+const NavbarStart = forwardRef(function NavbarStart({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		ref,
+		className: cx(navbar().start, className),
+		"data-slot": "navbar-start"
+	});
+});
+const NavbarCenter = forwardRef(function NavbarCenter({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		ref,
+		className: cx(navbar().center, className),
+		"data-slot": "navbar-center"
+	});
+});
+const NavbarEnd = forwardRef(function NavbarEnd({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		ref,
+		className: cx(navbar().end, className),
+		"data-slot": "navbar-end"
+	});
+});
+/**
+* Opens the responsive drawer. It is hidden at the large breakpoint by
+* default, while still allowing a controlled host to render a drawer anywhere.
+*/
+const NavbarToggle = forwardRef(function NavbarToggle({ "aria-label": ariaLabel, children, className, ...props }, ref) {
+	const hasVisibleLabel = children != null;
+	return /* @__PURE__ */ jsx(Dialog.Trigger, {
+		...props,
+		"aria-label": ariaLabel ?? (hasVisibleLabel ? void 0 : "Open navigation menu"),
+		ref,
+		className: withRecipeClassName(navbar().toggle, className),
+		"data-slot": "navbar-toggle",
+		children: children ?? "☰"
+	});
+});
+/**
+* A left-aligned mobile drawer. It intentionally owns the Dialog portal,
+* backdrop, viewport, and popup so consumers cannot accidentally omit the
+* pieces required for focus trapping and Escape/backdrop dismissal.
+*/
+const NavbarDrawer = forwardRef(function NavbarDrawer({ "aria-label": ariaLabel, children, className, portalProps, ...props }, ref) {
+	const styles = navbar();
+	return /* @__PURE__ */ jsxs(Dialog.Portal, {
+		...portalProps,
+		children: [/* @__PURE__ */ jsx(Dialog.Backdrop, {
+			className: withRecipeClassName(styles.drawerBackdrop, void 0),
+			"data-slot": "navbar-drawer-backdrop"
+		}), /* @__PURE__ */ jsx(Dialog.Viewport, {
+			className: withRecipeClassName(styles.drawerViewport, void 0),
+			"data-slot": "navbar-drawer-viewport",
+			children: /* @__PURE__ */ jsx(Dialog.Popup, {
+				...props,
+				"aria-label": ariaLabel ?? "Navigation menu",
+				ref,
+				className: withRecipeClassName(styles.drawer, className),
+				"data-jaci-component": "navbar",
+				"data-slot": "navbar-drawer",
+				children
+			})
+		})]
+	});
+});
+/** A close affordance for use inside `Navbar.Drawer`. */
+const NavbarClose = forwardRef(function NavbarClose({ "aria-label": ariaLabel, children, className, ...props }, ref) {
+	const hasVisibleLabel = children != null;
+	return /* @__PURE__ */ jsx(Dialog.Close, {
+		...props,
+		"aria-label": ariaLabel ?? (hasVisibleLabel ? void 0 : "Close navigation menu"),
+		ref,
+		className: withRecipeClassName(navbar().close, className),
+		"data-slot": "navbar-close",
+		children: children ?? "×"
+	});
+});
+/** A semantic navigation link for either the fixed bar or mobile drawer. */
+const NavbarItem = forwardRef(function NavbarItem({ "aria-current": ariaCurrent, active = false, className, ...props }, ref) {
+	return /* @__PURE__ */ jsx("a", {
+		...props,
+		"aria-current": ariaCurrent ?? (active ? "page" : void 0),
+		ref,
+		className: cx(navbar({ active }).item, className),
+		"data-active": active || void 0,
+		"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.
+*/
+const BottomNavigationRoot = forwardRef(function BottomNavigationRoot({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx("nav", {
+		...props,
+		ref,
+		className: cx(bottomNavigation().root, className),
+		"data-jaci-component": "bottom-navigation",
+		"data-slot": "bottom-navigation"
+	});
+});
+const BottomNavigationItem = forwardRef(function BottomNavigationItem({ "aria-current": ariaCurrent, active = false, className, ...props }, ref) {
+	return /* @__PURE__ */ jsx("a", {
+		...props,
+		"aria-current": ariaCurrent ?? (active ? "page" : void 0),
+		ref,
+		className: cx(bottomNavigation({ active }).item, className),
+		"data-active": active || void 0,
+		"data-slot": "bottom-navigation-item"
+	});
+});
+const BottomNavigation = Object.assign(BottomNavigationRoot, { Item: BottomNavigationItem });
+//#endregion
+export { BottomNavigation, BottomNavigationItem, BottomNavigationRoot, Navbar, NavbarBar, NavbarCenter, NavbarClose, NavbarDrawer, NavbarEnd, NavbarItem, NavbarRoot, NavbarStart, NavbarToggle };
+
+//# sourceMappingURL=navigation.js.map

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

@@ -0,0 +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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"}