@raystack/apsara 0.56.7 → 1.0.0-rc.1

package/dist/components/meter/meter-track.cjs

@@ -0,0 +1,21 @@
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('@base-ui/react');
+var classVarianceAuthority = require('class-variance-authority');
+var React = require('react');
+var meter_module = require('./meter.module.css.cjs');
+var meterRoot = require('./meter-root.cjs');
+
+function MeterTrack({ className, children, ...props }) {
+    const { variant } = React.useContext(meterRoot.MeterContext);
+    if (variant === 'circular') {
+        return (jsxRuntime.jsxs(react.Meter.Track, { className: classVarianceAuthority.cx(meter_module.default.circularSvg, className), ...props, render: ({ children: trackChildren, ...trackProps }) => (jsxRuntime.jsxs("svg", { viewBox: '0 0 72 72', ...trackProps, children: [jsxRuntime.jsx("circle", { className: meter_module.default.circularTrackCircle }), trackChildren] })), children: [jsxRuntime.jsx(react.Meter.Indicator, { render: () => jsxRuntime.jsx("circle", { className: meter_module.default.circularIndicatorCircle }) }), children] }));
+    }
+    return (jsxRuntime.jsxs(react.Meter.Track, { className: classVarianceAuthority.cx(meter_module.default.track, className), ...props, children: [jsxRuntime.jsx(react.Meter.Indicator, { className: meter_module.default.indicator }), children] }));
+}
+MeterTrack.displayName = 'Meter.Track';
+
+exports.MeterTrack = MeterTrack;
+//# sourceMappingURL=meter-track.cjs.map

package/dist/components/meter/meter-track.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"meter-track.cjs","sources":["../../../components/meter/meter-track.tsx"],"sourcesContent":["'use client';\n\nimport { Meter as MeterPrimitive } from '@base-ui/react';\nimport { cx } from 'class-variance-authority';\nimport { useContext } from 'react';\nimport styles from './meter.module.css';\nimport { MeterContext } from './meter-root';\n\nexport function MeterTrack({\n  className,\n  children,\n  ...props\n}: MeterPrimitive.Track.Props) {\n  const { variant } = useContext(MeterContext);\n\n  if (variant === 'circular') {\n    return (\n      <MeterPrimitive.Track\n        className={cx(styles.circularSvg, className)}\n        {...props}\n        render={({ children: trackChildren, ...trackProps }) => (\n          <svg viewBox='0 0 72 72' {...trackProps}>\n            <circle className={styles.circularTrackCircle} />\n            {trackChildren}\n          </svg>\n        )}\n      >\n        <MeterPrimitive.Indicator\n          render={() => <circle className={styles.circularIndicatorCircle} />}\n        />\n        {children}\n      </MeterPrimitive.Track>\n    );\n  }\n\n  return (\n    <MeterPrimitive.Track className={cx(styles.track, className)} {...props}>\n      <MeterPrimitive.Indicator className={styles.indicator} />\n      {children}\n    </MeterPrimitive.Track>\n  );\n}\n\nMeterTrack.displayName = 'Meter.Track';\n"],"names":[],"mappings":";;;;;;;;;;AAQM;;AAOJ;AACE;;AAmBF;AAMF;AAEA;;"}

package/dist/components/meter/meter-track.d.ts

@@ -0,0 +1,6 @@
+import { Meter as MeterPrimitive } from '@base-ui/react';
+export declare function MeterTrack({ className, children, ...props }: MeterPrimitive.Track.Props): import("react/jsx-runtime").JSX.Element;
+export declare namespace MeterTrack {
+    var displayName: string;
+}
+//# sourceMappingURL=meter-track.d.ts.map

package/dist/components/meter/meter-track.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"meter-track.d.ts","sourceRoot":"","sources":["../../../components/meter/meter-track.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,IAAI,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAMzD,wBAAgB,UAAU,CAAC,EACzB,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,KAAK,CAAC,KAAK,2CA6B5B;yBAjCe,UAAU"}

package/dist/components/meter/meter-track.js

@@ -0,0 +1,19 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Meter } from '@base-ui/react';
+import { cx } from 'class-variance-authority';
+import { useContext } from 'react';
+import styles from './meter.module.css.js';
+import { MeterContext } from './meter-root.js';
+
+function MeterTrack({ className, children, ...props }) {
+    const { variant } = useContext(MeterContext);
+    if (variant === 'circular') {
+        return (jsxs(Meter.Track, { className: cx(styles.circularSvg, className), ...props, render: ({ children: trackChildren, ...trackProps }) => (jsxs("svg", { viewBox: '0 0 72 72', ...trackProps, children: [jsx("circle", { className: styles.circularTrackCircle }), trackChildren] })), children: [jsx(Meter.Indicator, { render: () => jsx("circle", { className: styles.circularIndicatorCircle }) }), children] }));
+    }
+    return (jsxs(Meter.Track, { className: cx(styles.track, className), ...props, children: [jsx(Meter.Indicator, { className: styles.indicator }), children] }));
+}
+MeterTrack.displayName = 'Meter.Track';
+
+export { MeterTrack };
+//# sourceMappingURL=meter-track.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"meter-track.js","sources":["../../../components/meter/meter-track.tsx"],"sourcesContent":["'use client';\n\nimport { Meter as MeterPrimitive } from '@base-ui/react';\nimport { cx } from 'class-variance-authority';\nimport { useContext } from 'react';\nimport styles from './meter.module.css';\nimport { MeterContext } from './meter-root';\n\nexport function MeterTrack({\n  className,\n  children,\n  ...props\n}: MeterPrimitive.Track.Props) {\n  const { variant } = useContext(MeterContext);\n\n  if (variant === 'circular') {\n    return (\n      <MeterPrimitive.Track\n        className={cx(styles.circularSvg, className)}\n        {...props}\n        render={({ children: trackChildren, ...trackProps }) => (\n          <svg viewBox='0 0 72 72' {...trackProps}>\n            <circle className={styles.circularTrackCircle} />\n            {trackChildren}\n          </svg>\n        )}\n      >\n        <MeterPrimitive.Indicator\n          render={() => <circle className={styles.circularIndicatorCircle} />}\n        />\n        {children}\n      </MeterPrimitive.Track>\n    );\n  }\n\n  return (\n    <MeterPrimitive.Track className={cx(styles.track, className)} {...props}>\n      <MeterPrimitive.Indicator className={styles.indicator} />\n      {children}\n    </MeterPrimitive.Track>\n  );\n}\n\nMeterTrack.displayName = 'Meter.Track';\n"],"names":[],"mappings":";;;;;;;;AAQM;;AAOJ;AACE;;AAmBF;AAMF;AAEA;;"}

package/dist/components/meter/meter.cjs

@@ -0,0 +1,14 @@
+'use strict';
+
+var meterMisc = require('./meter-misc.cjs');
+var meterRoot = require('./meter-root.cjs');
+var meterTrack = require('./meter-track.cjs');
+
+const Meter = Object.assign(meterRoot.MeterRoot, {
+    Label: meterMisc.MeterLabel,
+    Value: meterMisc.MeterValue,
+    Track: meterTrack.MeterTrack
+});
+
+exports.Meter = Meter;
+//# sourceMappingURL=meter.cjs.map

package/dist/components/meter/meter.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"meter.cjs","sources":["../../../components/meter/meter.tsx"],"sourcesContent":["import { MeterLabel, MeterValue } from './meter-misc';\nimport { MeterRoot } from './meter-root';\nimport { MeterTrack } from './meter-track';\n\nexport const Meter = Object.assign(MeterRoot, {\n  Label: MeterLabel,\n  Value: MeterValue,\n  Track: MeterTrack\n});\n"],"names":["MeterRoot","MeterLabel","MeterValue","MeterTrack"],"mappings":";;;;;;MAIa,KAAK,GAAG,MAAM,CAAC,MAAM,CAACA,mBAAS,EAAE;AAC5C,IAAA,KAAK,EAAEC,oBAAU;AACjB,IAAA,KAAK,EAAEC,oBAAU;AACjB,IAAA,KAAK,EAAEC,qBAAU;AAClB,CAAA;;;;"}

package/dist/components/meter/meter.d.ts

@@ -0,0 +1,9 @@
+import { MeterLabel, MeterValue } from './meter-misc';
+import { MeterRoot } from './meter-root';
+import { MeterTrack } from './meter-track';
+export declare const Meter: typeof MeterRoot & {
+    Label: typeof MeterLabel;
+    Value: typeof MeterValue;
+    Track: typeof MeterTrack;
+};
+//# sourceMappingURL=meter.d.ts.map

package/dist/components/meter/meter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"meter.d.ts","sourceRoot":"","sources":["../../../components/meter/meter.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AACtD,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAE3C,eAAO,MAAM,KAAK;;;;CAIhB,CAAC"}

package/dist/components/meter/meter.js

@@ -0,0 +1,12 @@
+import { MeterLabel, MeterValue } from './meter-misc.js';
+import { MeterRoot } from './meter-root.js';
+import { MeterTrack } from './meter-track.js';
+
+const Meter = Object.assign(MeterRoot, {
+    Label: MeterLabel,
+    Value: MeterValue,
+    Track: MeterTrack
+});
+
+export { Meter };
+//# sourceMappingURL=meter.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"meter.js","sources":["../../../components/meter/meter.tsx"],"sourcesContent":["import { MeterLabel, MeterValue } from './meter-misc';\nimport { MeterRoot } from './meter-root';\nimport { MeterTrack } from './meter-track';\n\nexport const Meter = Object.assign(MeterRoot, {\n  Label: MeterLabel,\n  Value: MeterValue,\n  Track: MeterTrack\n});\n"],"names":[],"mappings":";;;;MAIa,KAAK,GAAG,MAAM,CAAC,MAAM,CAAC,SAAS,EAAE;AAC5C,IAAA,KAAK,EAAE,UAAU;AACjB,IAAA,KAAK,EAAE,UAAU;AACjB,IAAA,KAAK,EAAE,UAAU;AAClB,CAAA;;;;"}

package/dist/components/meter/meter.module.css.cjs

@@ -0,0 +1,8 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styles = {"meter":"meter-module_meter__-ZWh0","header":"meter-module_header__oTw9s","label":"meter-module_label__YCqxd","value":"meter-module_value__tvMfK","track":"meter-module_track__Wfsrs","indicator":"meter-module_indicator__pxlr3","meter-variant-circular":"meter-module_meter-variant-circular__Q9jBU","circularSvg":"meter-module_circularSvg__6R94x","circularTrackCircle":"meter-module_circularTrackCircle__0QXii","circularIndicatorCircle":"meter-module_circularIndicatorCircle__NtKy0","meter___variant___circular":"meter-module_meter-variant-circular__Q9jBU"};
+
+exports.default = styles;
+//# sourceMappingURL=meter.module.css.cjs.map

package/dist/components/meter/meter.module.css.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"meter.module.css.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}

package/dist/components/meter/meter.module.css.js

@@ -0,0 +1,4 @@
+var styles = {"meter":"meter-module_meter__-ZWh0","header":"meter-module_header__oTw9s","label":"meter-module_label__YCqxd","value":"meter-module_value__tvMfK","track":"meter-module_track__Wfsrs","indicator":"meter-module_indicator__pxlr3","meter-variant-circular":"meter-module_meter-variant-circular__Q9jBU","circularSvg":"meter-module_circularSvg__6R94x","circularTrackCircle":"meter-module_circularTrackCircle__0QXii","circularIndicatorCircle":"meter-module_circularIndicatorCircle__NtKy0","meter___variant___circular":"meter-module_meter-variant-circular__Q9jBU"};
+
+export { styles as default };
+//# sourceMappingURL=meter.module.css.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"meter.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/dist/components/navbar/navbar-root.cjs

@@ -2,14 +2,98 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
+var useMergedRefs = require('@base-ui/utils/useMergedRefs');
 var classVarianceAuthority = require('class-variance-authority');
 var React = require('react');
-var flex = require('../flex/flex.cjs');
 var navbar_module = require('./navbar.module.css.cjs');
 
-const NavbarRoot = React.forwardRef(({ className, sticky = false, children, ...props }, ref) => {
-    return (jsxRuntime.jsx("nav", { ref: ref, className: classVarianceAuthority.cx(navbar_module.default.root, className), "data-sticky": sticky, role: 'navigation', ...props, children: jsxRuntime.jsx(flex.Flex, { align: 'center', justify: 'between', className: navbar_module.default.container, children: children }) }));
-});
+/** Px to accumulate in one scroll direction before hiding (down) or showing (up) the navbar */
+const SCROLL_THRESHOLD = 5;
+/** When scroll position is at or above this from top, always show the navbar */
+const SHOW_AT_TOP_THRESHOLD = 20;
+/**
+ * Finds the nearest scrollable ancestor of el.
+ * Returns null if none found (so the window is the scroll container).
+ */
+function getScrollParent(el) {
+    if (!el)
+        return null;
+    let parent = el.parentElement;
+    while (parent) {
+        const { overflowY, overflow } = getComputedStyle(parent);
+        const scrollable = overflowY === 'auto' ||
+            overflowY === 'scroll' ||
+            overflowY === 'overlay' ||
+            overflow === 'auto' ||
+            overflow === 'scroll' ||
+            overflow === 'overlay';
+        if (scrollable && parent.scrollHeight > parent.clientHeight)
+            return parent;
+        parent = parent.parentElement;
+    }
+    return null;
+}
+const NavbarRoot = ({ className, sticky = false, hideOnScroll = false, scrollContainerRef, children, ref, ...props }) => {
+    // Last scroll position at which we updated data-hidden; only updated when we show/hide or are at top
+    const lastScrollY = React.useRef(0);
+    // Nav DOM node; used to find scroll container, attach listeners, and set data-hidden
+    const navRef = React.useRef(null);
+    React.useEffect(() => {
+        if (!hideOnScroll)
+            return;
+        const el = navRef.current;
+        if (!el)
+            return;
+        // Use custom ref if provided and set; else detect scroll parent; else window
+        const scrollContainer = scrollContainerRef?.current ?? getScrollParent(el);
+        const isWindow = scrollContainer === null;
+        if (isWindow && typeof window === 'undefined')
+            return;
+        const target = isWindow
+            ? window
+            : scrollContainer;
+        // Throttle scroll work to one update per frame
+        let ticking = false;
+        const getScrollTop = () => target === window
+            ? (window.scrollY ?? document.documentElement.scrollTop)
+            : target.scrollTop;
+        const handleScroll = () => {
+            if (ticking)
+                return;
+            ticking = true;
+            requestAnimationFrame(() => {
+                const scrollY = getScrollTop();
+                const nav = navRef.current;
+                if (!nav) {
+                    ticking = false;
+                    return;
+                }
+                if (scrollY <= SHOW_AT_TOP_THRESHOLD) {
+                    nav.setAttribute('data-hidden', 'false');
+                    lastScrollY.current = scrollY;
+                }
+                else if (scrollY > lastScrollY.current + SCROLL_THRESHOLD) {
+                    nav.setAttribute('data-hidden', 'true');
+                    lastScrollY.current = scrollY;
+                }
+                else if (scrollY < lastScrollY.current - SCROLL_THRESHOLD) {
+                    nav.setAttribute('data-hidden', 'false');
+                    lastScrollY.current = scrollY;
+                }
+                ticking = false;
+            });
+        };
+        lastScrollY.current = getScrollTop();
+        el.setAttribute('data-hidden', 'false');
+        target.addEventListener('scroll', handleScroll, { passive: true });
+        return () => {
+            target.removeEventListener('scroll', handleScroll);
+            el.removeAttribute('data-hidden');
+        };
+    }, [hideOnScroll]);
+    const mergedRef = useMergedRefs.useMergedRefs(navRef, ref);
+    return (jsxRuntime.jsx("nav", { ref: mergedRef, className: classVarianceAuthority.cx(navbar_module.default.root, className), "data-sticky": sticky, role: 'navigation', ...props, children: jsxRuntime.jsx("div", { className: navbar_module.default.container, children: children }) }));
+};
 NavbarRoot.displayName = 'Navbar';
 
 exports.NavbarRoot = NavbarRoot;

package/dist/components/navbar/navbar-root.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"navbar-root.cjs","sources":["../../../components/navbar/navbar-root.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'class-variance-authority';\nimport { ComponentPropsWithoutRef, ComponentRef, forwardRef } from 'react';\nimport { Flex } from '../flex';\nimport styles from './navbar.module.css';\n\nexport interface NavbarRootProps extends ComponentPropsWithoutRef<'nav'> {\n  sticky?: boolean;\n}\n\nexport const NavbarRoot = forwardRef<ComponentRef<'nav'>, NavbarRootProps>(\n  ({ className, sticky = false, children, ...props }, ref) => {\n    return (\n      <nav\n        ref={ref}\n        className={cx(styles.root, className)}\n        data-sticky={sticky}\n        role='navigation'\n        {...props}\n      >\n        <Flex align='center' justify='between' className={styles.container}>\n          {children}\n        </Flex>\n      </nav>\n    );\n  }\n);\n\nNavbarRoot.displayName = 'Navbar';\n"],"names":[],"mappings":";;;;;;;;;;;AA0BE;AAGF;;"}
+{"version":3,"file":"navbar-root.cjs","sources":["../../../components/navbar/navbar-root.tsx"],"sourcesContent":["'use client';\n\nimport { useMergedRefs } from '@base-ui/utils/useMergedRefs';\nimport { cx } from 'class-variance-authority';\nimport { type ComponentProps, type RefObject, useEffect, useRef } from 'react';\nimport styles from './navbar.module.css';\n\n/** Px to accumulate in one scroll direction before hiding (down) or showing (up) the navbar */\nconst SCROLL_THRESHOLD = 5;\n/** When scroll position is at or above this from top, always show the navbar */\nconst SHOW_AT_TOP_THRESHOLD = 20;\n\n/**\n * Finds the nearest scrollable ancestor of el.\n * Returns null if none found (so the window is the scroll container).\n */\nfunction getScrollParent(el: HTMLElement | null): HTMLElement | null {\n  if (!el) return null;\n  let parent = el.parentElement;\n  while (parent) {\n    const { overflowY, overflow } = getComputedStyle(parent);\n    const scrollable =\n      overflowY === 'auto' ||\n      overflowY === 'scroll' ||\n      overflowY === 'overlay' ||\n      overflow === 'auto' ||\n      overflow === 'scroll' ||\n      overflow === 'overlay';\n    if (scrollable && parent.scrollHeight > parent.clientHeight) return parent;\n    parent = parent.parentElement;\n  }\n  return null;\n}\n\nexport interface NavbarRootProps extends ComponentProps<'nav'> {\n  /** Stick navbar to top of viewport (or scroll container) while scrolling */\n  sticky?: boolean;\n  /** Hide navbar when scrolling down, show when scrolling up or near top */\n  hideOnScroll?: boolean;\n  /** Ref to the scroll container. When provided (and current is set), used for hide-on-scroll instead of auto-detection. Otherwise the nearest scrollable ancestor or window is used. */\n  scrollContainerRef?: RefObject<HTMLElement | null>;\n}\n\nexport const NavbarRoot = ({\n  className,\n  sticky = false,\n  hideOnScroll = false,\n  scrollContainerRef,\n  children,\n  ref,\n  ...props\n}: NavbarRootProps) => {\n  // Last scroll position at which we updated data-hidden; only updated when we show/hide or are at top\n  const lastScrollY = useRef(0);\n  // Nav DOM node; used to find scroll container, attach listeners, and set data-hidden\n  const navRef = useRef<HTMLElement>(null);\n\n  useEffect(() => {\n    if (!hideOnScroll) return;\n\n    const el = navRef.current;\n    if (!el) return;\n\n    // Use custom ref if provided and set; else detect scroll parent; else window\n    const scrollContainer: HTMLElement | null =\n      scrollContainerRef?.current ?? getScrollParent(el);\n    const isWindow = scrollContainer === null;\n\n    if (isWindow && typeof window === 'undefined') return;\n\n    const target: Window | HTMLElement = isWindow\n      ? window\n      : (scrollContainer as HTMLElement);\n\n    // Throttle scroll work to one update per frame\n    let ticking = false;\n    const getScrollTop = () =>\n      target === window\n        ? (window.scrollY ?? document.documentElement.scrollTop)\n        : (target as HTMLElement).scrollTop;\n\n    const handleScroll = () => {\n      if (ticking) return;\n      ticking = true;\n      requestAnimationFrame(() => {\n        const scrollY = getScrollTop();\n        const nav = navRef.current;\n        if (!nav) {\n          ticking = false;\n          return;\n        }\n\n        if (scrollY <= SHOW_AT_TOP_THRESHOLD) {\n          nav.setAttribute('data-hidden', 'false');\n          lastScrollY.current = scrollY;\n        } else if (scrollY > lastScrollY.current + SCROLL_THRESHOLD) {\n          nav.setAttribute('data-hidden', 'true');\n          lastScrollY.current = scrollY;\n        } else if (scrollY < lastScrollY.current - SCROLL_THRESHOLD) {\n          nav.setAttribute('data-hidden', 'false');\n          lastScrollY.current = scrollY;\n        }\n        ticking = false;\n      });\n    };\n\n    lastScrollY.current = getScrollTop();\n    el.setAttribute('data-hidden', 'false');\n    target.addEventListener('scroll', handleScroll, { passive: true });\n    return () => {\n      target.removeEventListener('scroll', handleScroll);\n      el.removeAttribute('data-hidden');\n    };\n  }, [hideOnScroll]);\n\n  const mergedRef = useMergedRefs(navRef, ref);\n\n  return (\n    <nav\n      ref={mergedRef}\n      className={cx(styles.root, className)}\n      data-sticky={sticky}\n      role='navigation'\n      {...props}\n    >\n      <div className={styles.container}>{children}</div>\n    </nav>\n  );\n};\n\nNavbarRoot.displayName = 'Navbar';\n"],"names":[],"mappings":";;;;;;;;;AAOA;AACA;AACA;AACA;AAEA;;;AAGG;AACH;AACE;AAAS;AACT;;;AAGE;AAEE;AACA;AACA;AACA;;;AAE2D;AAC7D;;AAEF;AACF;AAWa;;AAUX;;AAEA;;AAGE;;AAEA;AACA;;;;AAKA;AAEA;;;AAGE;;;;AAKF;;AAGI;;AAGF;;;;AAGE;AACA;;;;;AAMA;AACE;AACA;;;AAEA;AACA;;;AAEA;AACA;;;AAGJ;AACF;AAEA;AACA;AACA;AACA;AACE;AACA;AACF;AACF;;AAIA;AAWF;AAEA;;"}

package/dist/components/navbar/navbar-root.d.ts

@@ -1,6 +1,14 @@
-import { ComponentPropsWithoutRef } from 'react';
-export interface NavbarRootProps extends ComponentPropsWithoutRef<'nav'> {
+import { type ComponentProps, type RefObject } from 'react';
+export interface NavbarRootProps extends ComponentProps<'nav'> {
+    /** Stick navbar to top of viewport (or scroll container) while scrolling */
     sticky?: boolean;
+    /** Hide navbar when scrolling down, show when scrolling up or near top */
+    hideOnScroll?: boolean;
+    /** Ref to the scroll container. When provided (and current is set), used for hide-on-scroll instead of auto-detection. Otherwise the nearest scrollable ancestor or window is used. */
+    scrollContainerRef?: RefObject<HTMLElement | null>;
 }
-export declare const NavbarRoot: import("react").ForwardRefExoticComponent<NavbarRootProps & import("react").RefAttributes<HTMLElement>>;
+export declare const NavbarRoot: {
+    ({ className, sticky, hideOnScroll, scrollContainerRef, children, ref, ...props }: NavbarRootProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 //# sourceMappingURL=navbar-root.d.ts.map

package/dist/components/navbar/navbar-root.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"navbar-root.d.ts","sourceRoot":"","sources":["../../../components/navbar/navbar-root.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,wBAAwB,EAA4B,MAAM,OAAO,CAAC;AAI3E,MAAM,WAAW,eAAgB,SAAQ,wBAAwB,CAAC,KAAK,CAAC;IACtE,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,eAAO,MAAM,UAAU,yGAgBtB,CAAC"}
+{"version":3,"file":"navbar-root.d.ts","sourceRoot":"","sources":["../../../components/navbar/navbar-root.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,cAAc,EAAE,KAAK,SAAS,EAAqB,MAAM,OAAO,CAAC;AA8B/E,MAAM,WAAW,eAAgB,SAAQ,cAAc,CAAC,KAAK,CAAC;IAC5D,4EAA4E;IAC5E,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,0EAA0E;IAC1E,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,uLAAuL;IACvL,kBAAkB,CAAC,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;CACpD;AAED,eAAO,MAAM,UAAU;uFAQpB,eAAe;;CA6EjB,CAAC"}

package/dist/components/navbar/navbar-root.js

@@ -1,13 +1,97 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
+import { useMergedRefs } from '@base-ui/utils/useMergedRefs';
 import { cx } from 'class-variance-authority';
-import { forwardRef } from 'react';
-import { Flex } from '../flex/flex.js';
+import { useRef, useEffect } from 'react';
 import styles from './navbar.module.css.js';
 
-const NavbarRoot = forwardRef(({ className, sticky = false, children, ...props }, ref) => {
-    return (jsx("nav", { ref: ref, className: cx(styles.root, className), "data-sticky": sticky, role: 'navigation', ...props, children: jsx(Flex, { align: 'center', justify: 'between', className: styles.container, children: children }) }));
-});
+/** Px to accumulate in one scroll direction before hiding (down) or showing (up) the navbar */
+const SCROLL_THRESHOLD = 5;
+/** When scroll position is at or above this from top, always show the navbar */
+const SHOW_AT_TOP_THRESHOLD = 20;
+/**
+ * Finds the nearest scrollable ancestor of el.
+ * Returns null if none found (so the window is the scroll container).
+ */
+function getScrollParent(el) {
+    if (!el)
+        return null;
+    let parent = el.parentElement;
+    while (parent) {
+        const { overflowY, overflow } = getComputedStyle(parent);
+        const scrollable = overflowY === 'auto' ||
+            overflowY === 'scroll' ||
+            overflowY === 'overlay' ||
+            overflow === 'auto' ||
+            overflow === 'scroll' ||
+            overflow === 'overlay';
+        if (scrollable && parent.scrollHeight > parent.clientHeight)
+            return parent;
+        parent = parent.parentElement;
+    }
+    return null;
+}
+const NavbarRoot = ({ className, sticky = false, hideOnScroll = false, scrollContainerRef, children, ref, ...props }) => {
+    // Last scroll position at which we updated data-hidden; only updated when we show/hide or are at top
+    const lastScrollY = useRef(0);
+    // Nav DOM node; used to find scroll container, attach listeners, and set data-hidden
+    const navRef = useRef(null);
+    useEffect(() => {
+        if (!hideOnScroll)
+            return;
+        const el = navRef.current;
+        if (!el)
+            return;
+        // Use custom ref if provided and set; else detect scroll parent; else window
+        const scrollContainer = scrollContainerRef?.current ?? getScrollParent(el);
+        const isWindow = scrollContainer === null;
+        if (isWindow && typeof window === 'undefined')
+            return;
+        const target = isWindow
+            ? window
+            : scrollContainer;
+        // Throttle scroll work to one update per frame
+        let ticking = false;
+        const getScrollTop = () => target === window
+            ? (window.scrollY ?? document.documentElement.scrollTop)
+            : target.scrollTop;
+        const handleScroll = () => {
+            if (ticking)
+                return;
+            ticking = true;
+            requestAnimationFrame(() => {
+                const scrollY = getScrollTop();
+                const nav = navRef.current;
+                if (!nav) {
+                    ticking = false;
+                    return;
+                }
+                if (scrollY <= SHOW_AT_TOP_THRESHOLD) {
+                    nav.setAttribute('data-hidden', 'false');
+                    lastScrollY.current = scrollY;
+                }
+                else if (scrollY > lastScrollY.current + SCROLL_THRESHOLD) {
+                    nav.setAttribute('data-hidden', 'true');
+                    lastScrollY.current = scrollY;
+                }
+                else if (scrollY < lastScrollY.current - SCROLL_THRESHOLD) {
+                    nav.setAttribute('data-hidden', 'false');
+                    lastScrollY.current = scrollY;
+                }
+                ticking = false;
+            });
+        };
+        lastScrollY.current = getScrollTop();
+        el.setAttribute('data-hidden', 'false');
+        target.addEventListener('scroll', handleScroll, { passive: true });
+        return () => {
+            target.removeEventListener('scroll', handleScroll);
+            el.removeAttribute('data-hidden');
+        };
+    }, [hideOnScroll]);
+    const mergedRef = useMergedRefs(navRef, ref);
+    return (jsx("nav", { ref: mergedRef, className: cx(styles.root, className), "data-sticky": sticky, role: 'navigation', ...props, children: jsx("div", { className: styles.container, children: children }) }));
+};
 NavbarRoot.displayName = 'Navbar';
 
 export { NavbarRoot };

package/dist/components/navbar/navbar-root.js.map

@@ -1 +1 @@
-{"version":3,"file":"navbar-root.js","sources":["../../../components/navbar/navbar-root.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'class-variance-authority';\nimport { ComponentPropsWithoutRef, ComponentRef, forwardRef } from 'react';\nimport { Flex } from '../flex';\nimport styles from './navbar.module.css';\n\nexport interface NavbarRootProps extends ComponentPropsWithoutRef<'nav'> {\n  sticky?: boolean;\n}\n\nexport const NavbarRoot = forwardRef<ComponentRef<'nav'>, NavbarRootProps>(\n  ({ className, sticky = false, children, ...props }, ref) => {\n    return (\n      <nav\n        ref={ref}\n        className={cx(styles.root, className)}\n        data-sticky={sticky}\n        role='navigation'\n        {...props}\n      >\n        <Flex align='center' justify='between' className={styles.container}>\n          {children}\n        </Flex>\n      </nav>\n    );\n  }\n);\n\nNavbarRoot.displayName = 'Navbar';\n"],"names":[],"mappings":";;;;;;;;;AA0BE;AAGF;;"}
+{"version":3,"file":"navbar-root.js","sources":["../../../components/navbar/navbar-root.tsx"],"sourcesContent":["'use client';\n\nimport { useMergedRefs } from '@base-ui/utils/useMergedRefs';\nimport { cx } from 'class-variance-authority';\nimport { type ComponentProps, type RefObject, useEffect, useRef } from 'react';\nimport styles from './navbar.module.css';\n\n/** Px to accumulate in one scroll direction before hiding (down) or showing (up) the navbar */\nconst SCROLL_THRESHOLD = 5;\n/** When scroll position is at or above this from top, always show the navbar */\nconst SHOW_AT_TOP_THRESHOLD = 20;\n\n/**\n * Finds the nearest scrollable ancestor of el.\n * Returns null if none found (so the window is the scroll container).\n */\nfunction getScrollParent(el: HTMLElement | null): HTMLElement | null {\n  if (!el) return null;\n  let parent = el.parentElement;\n  while (parent) {\n    const { overflowY, overflow } = getComputedStyle(parent);\n    const scrollable =\n      overflowY === 'auto' ||\n      overflowY === 'scroll' ||\n      overflowY === 'overlay' ||\n      overflow === 'auto' ||\n      overflow === 'scroll' ||\n      overflow === 'overlay';\n    if (scrollable && parent.scrollHeight > parent.clientHeight) return parent;\n    parent = parent.parentElement;\n  }\n  return null;\n}\n\nexport interface NavbarRootProps extends ComponentProps<'nav'> {\n  /** Stick navbar to top of viewport (or scroll container) while scrolling */\n  sticky?: boolean;\n  /** Hide navbar when scrolling down, show when scrolling up or near top */\n  hideOnScroll?: boolean;\n  /** Ref to the scroll container. When provided (and current is set), used for hide-on-scroll instead of auto-detection. Otherwise the nearest scrollable ancestor or window is used. */\n  scrollContainerRef?: RefObject<HTMLElement | null>;\n}\n\nexport const NavbarRoot = ({\n  className,\n  sticky = false,\n  hideOnScroll = false,\n  scrollContainerRef,\n  children,\n  ref,\n  ...props\n}: NavbarRootProps) => {\n  // Last scroll position at which we updated data-hidden; only updated when we show/hide or are at top\n  const lastScrollY = useRef(0);\n  // Nav DOM node; used to find scroll container, attach listeners, and set data-hidden\n  const navRef = useRef<HTMLElement>(null);\n\n  useEffect(() => {\n    if (!hideOnScroll) return;\n\n    const el = navRef.current;\n    if (!el) return;\n\n    // Use custom ref if provided and set; else detect scroll parent; else window\n    const scrollContainer: HTMLElement | null =\n      scrollContainerRef?.current ?? getScrollParent(el);\n    const isWindow = scrollContainer === null;\n\n    if (isWindow && typeof window === 'undefined') return;\n\n    const target: Window | HTMLElement = isWindow\n      ? window\n      : (scrollContainer as HTMLElement);\n\n    // Throttle scroll work to one update per frame\n    let ticking = false;\n    const getScrollTop = () =>\n      target === window\n        ? (window.scrollY ?? document.documentElement.scrollTop)\n        : (target as HTMLElement).scrollTop;\n\n    const handleScroll = () => {\n      if (ticking) return;\n      ticking = true;\n      requestAnimationFrame(() => {\n        const scrollY = getScrollTop();\n        const nav = navRef.current;\n        if (!nav) {\n          ticking = false;\n          return;\n        }\n\n        if (scrollY <= SHOW_AT_TOP_THRESHOLD) {\n          nav.setAttribute('data-hidden', 'false');\n          lastScrollY.current = scrollY;\n        } else if (scrollY > lastScrollY.current + SCROLL_THRESHOLD) {\n          nav.setAttribute('data-hidden', 'true');\n          lastScrollY.current = scrollY;\n        } else if (scrollY < lastScrollY.current - SCROLL_THRESHOLD) {\n          nav.setAttribute('data-hidden', 'false');\n          lastScrollY.current = scrollY;\n        }\n        ticking = false;\n      });\n    };\n\n    lastScrollY.current = getScrollTop();\n    el.setAttribute('data-hidden', 'false');\n    target.addEventListener('scroll', handleScroll, { passive: true });\n    return () => {\n      target.removeEventListener('scroll', handleScroll);\n      el.removeAttribute('data-hidden');\n    };\n  }, [hideOnScroll]);\n\n  const mergedRef = useMergedRefs(navRef, ref);\n\n  return (\n    <nav\n      ref={mergedRef}\n      className={cx(styles.root, className)}\n      data-sticky={sticky}\n      role='navigation'\n      {...props}\n    >\n      <div className={styles.container}>{children}</div>\n    </nav>\n  );\n};\n\nNavbarRoot.displayName = 'Navbar';\n"],"names":[],"mappings":";;;;;;;AAOA;AACA;AACA;AACA;AAEA;;;AAGG;AACH;AACE;AAAS;AACT;;;AAGE;AAEE;AACA;AACA;AACA;;;AAE2D;AAC7D;;AAEF;AACF;AAWa;;AAUX;;AAEA;;AAGE;;AAEA;AACA;;;;AAKA;AAEA;;;AAGE;;;;AAKF;;AAGI;;AAGF;;;;AAGE;AACA;;;;;AAMA;AACE;AACA;;;AAEA;AACA;;;AAEA;AACA;;;AAGJ;AACF;AAEA;AACA;AACA;AACA;AACE;AACA;AACF;AACF;;AAIA;AAWF;AAEA;;"}

package/dist/components/navbar/navbar-sections.cjs

@@ -3,15 +3,23 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var classVarianceAuthority = require('class-variance-authority');
-var React = require('react');
 var flex = require('../flex/flex.cjs');
 var navbar_module = require('./navbar.module.css.cjs');
 
-const NavbarStart = React.forwardRef(({ className, children, 'aria-label': ariaLabel, ...props }, ref) => (jsxRuntime.jsx(flex.Flex, { ref: ref, align: 'center', gap: 5, className: classVarianceAuthority.cx(navbar_module.default.start, className), role: ariaLabel ? 'group' : undefined, "aria-label": ariaLabel, ...props, children: children })));
+const NavbarStart = ({ className, children, 'aria-label': ariaLabel, align = 'center', gap = 5, ...props }) => {
+    return (jsxRuntime.jsx(flex.Flex, { align: align, gap: gap, className: classVarianceAuthority.cx(navbar_module.default.start, className), "aria-label": ariaLabel, ...props, role: 'group', children: children }));
+};
 NavbarStart.displayName = 'Navbar.Start';
-const NavbarEnd = React.forwardRef(({ className, children, 'aria-label': ariaLabel, ...props }, ref) => (jsxRuntime.jsx(flex.Flex, { ref: ref, align: 'center', gap: 5, className: classVarianceAuthority.cx(navbar_module.default.end, className), role: ariaLabel ? 'group' : undefined, "aria-label": ariaLabel, ...props, children: children })));
+const NavbarCenter = ({ className, children, 'aria-label': ariaLabel, align = 'center', gap = 5, ...props }) => {
+    return (jsxRuntime.jsx(flex.Flex, { align: align, gap: gap, className: classVarianceAuthority.cx(navbar_module.default.center, className), "aria-label": ariaLabel, ...props, role: 'group', children: children }));
+};
+NavbarCenter.displayName = 'Navbar.Center';
+const NavbarEnd = ({ className, children, 'aria-label': ariaLabel, align = 'center', gap = 5, ...props }) => {
+    return (jsxRuntime.jsx(flex.Flex, { align: align, gap: gap, className: classVarianceAuthority.cx(navbar_module.default.end, className), "aria-label": ariaLabel, ...props, role: 'group', children: children }));
+};
 NavbarEnd.displayName = 'Navbar.End';
 
+exports.NavbarCenter = NavbarCenter;
 exports.NavbarEnd = NavbarEnd;
 exports.NavbarStart = NavbarStart;
 //# sourceMappingURL=navbar-sections.cjs.map

package/dist/components/navbar/navbar-sections.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"navbar-sections.cjs","sources":["../../../components/navbar/navbar-sections.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'class-variance-authority';\nimport { ComponentPropsWithoutRef, forwardRef } from 'react';\nimport { Flex } from '../flex';\nimport styles from './navbar.module.css';\n\nexport interface NavbarStartProps\n  extends ComponentPropsWithoutRef<typeof Flex> {}\n\nexport const NavbarStart = forwardRef<HTMLDivElement, NavbarStartProps>(\n  ({ className, children, 'aria-label': ariaLabel, ...props }, ref) => (\n    <Flex\n      ref={ref}\n      align='center'\n      gap={5}\n      className={cx(styles.start, className)}\n      role={ariaLabel ? 'group' : undefined}\n      aria-label={ariaLabel}\n      {...props}\n    >\n      {children}\n    </Flex>\n  )\n);\n\nNavbarStart.displayName = 'Navbar.Start';\n\nexport interface NavbarEndProps extends ComponentPropsWithoutRef<typeof Flex> {}\n\nexport const NavbarEnd = forwardRef<HTMLDivElement, NavbarEndProps>(\n  ({ className, children, 'aria-label': ariaLabel, ...props }, ref) => (\n    <Flex\n      ref={ref}\n      align='center'\n      gap={5}\n      className={cx(styles.end, className)}\n      role={ariaLabel ? 'group' : undefined}\n      aria-label={ariaLabel}\n      {...props}\n    >\n      {children}\n    </Flex>\n  )\n);\n\nNavbarEnd.displayName = 'Navbar.End';\n"],"names":[],"mappings":";;;;;;;;;AAUO;AAgBP;AAIO;AAgBP;;;"}
+{"version":3,"file":"navbar-sections.cjs","sources":["../../../components/navbar/navbar-sections.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'class-variance-authority';\nimport { ComponentProps } from 'react';\nimport { Flex } from '../flex';\nimport styles from './navbar.module.css';\n\nexport interface NavbarStartProps extends ComponentProps<typeof Flex> {}\n\nexport const NavbarStart = ({\n  className,\n  children,\n  'aria-label': ariaLabel,\n  align = 'center',\n  gap = 5,\n  ...props\n}: NavbarStartProps) => {\n  return (\n    <Flex\n      align={align}\n      gap={gap}\n      className={cx(styles.start, className)}\n      aria-label={ariaLabel}\n      {...props}\n      role='group'\n    >\n      {children}\n    </Flex>\n  );\n};\n\nNavbarStart.displayName = 'Navbar.Start';\n\nexport interface NavbarCenterProps extends ComponentProps<typeof Flex> {}\n\nexport const NavbarCenter = ({\n  className,\n  children,\n  'aria-label': ariaLabel,\n  align = 'center',\n  gap = 5,\n  ...props\n}: NavbarCenterProps) => {\n  return (\n    <Flex\n      align={align}\n      gap={gap}\n      className={cx(styles.center, className)}\n      aria-label={ariaLabel}\n      {...props}\n      role='group'\n    >\n      {children}\n    </Flex>\n  );\n};\n\nNavbarCenter.displayName = 'Navbar.Center';\n\nexport interface NavbarEndProps extends ComponentProps<typeof Flex> {}\n\nexport const NavbarEnd = ({\n  className,\n  children,\n  'aria-label': ariaLabel,\n  align = 'center',\n  gap = 5,\n  ...props\n}: NavbarEndProps) => {\n  return (\n    <Flex\n      align={align}\n      gap={gap}\n      className={cx(styles.end, className)}\n      aria-label={ariaLabel}\n      {...props}\n      role='group'\n    >\n      {children}\n    </Flex>\n  );\n};\n\nNavbarEnd.displayName = 'Navbar.End';\n"],"names":[],"mappings":";;;;;;;;AASa;AAQX;AAYF;AAEA;AAIa;AAQX;AAYF;AAEA;AAIa;AAQX;AAYF;AAEA;;;;"}

package/dist/components/navbar/navbar-sections.d.ts

@@ -1,9 +1,21 @@
-import { ComponentPropsWithoutRef } from 'react';
+import { ComponentProps } from 'react';
 import { Flex } from '../flex';
-export interface NavbarStartProps extends ComponentPropsWithoutRef<typeof Flex> {
+export interface NavbarStartProps extends ComponentProps<typeof Flex> {
 }
-export declare const NavbarStart: import("react").ForwardRefExoticComponent<NavbarStartProps & import("react").RefAttributes<HTMLDivElement>>;
-export interface NavbarEndProps extends ComponentPropsWithoutRef<typeof Flex> {
+export declare const NavbarStart: {
+    ({ className, children, "aria-label": ariaLabel, align, gap, ...props }: NavbarStartProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export interface NavbarCenterProps extends ComponentProps<typeof Flex> {
 }
-export declare const NavbarEnd: import("react").ForwardRefExoticComponent<NavbarEndProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const NavbarCenter: {
+    ({ className, children, "aria-label": ariaLabel, align, gap, ...props }: NavbarCenterProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export interface NavbarEndProps extends ComponentProps<typeof Flex> {
+}
+export declare const NavbarEnd: {
+    ({ className, children, "aria-label": ariaLabel, align, gap, ...props }: NavbarEndProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 //# sourceMappingURL=navbar-sections.d.ts.map

package/dist/components/navbar/navbar-sections.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"navbar-sections.d.ts","sourceRoot":"","sources":["../../../components/navbar/navbar-sections.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,wBAAwB,EAAc,MAAM,OAAO,CAAC;AAC7D,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAG/B,MAAM,WAAW,gBACf,SAAQ,wBAAwB,CAAC,OAAO,IAAI,CAAC;CAAG;AAElD,eAAO,MAAM,WAAW,6GAcvB,CAAC;AAIF,MAAM,WAAW,cAAe,SAAQ,wBAAwB,CAAC,OAAO,IAAI,CAAC;CAAG;AAEhF,eAAO,MAAM,SAAS,2GAcrB,CAAC"}
+{"version":3,"file":"navbar-sections.d.ts","sourceRoot":"","sources":["../../../components/navbar/navbar-sections.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAG/B,MAAM,WAAW,gBAAiB,SAAQ,cAAc,CAAC,OAAO,IAAI,CAAC;CAAG;AAExE,eAAO,MAAM,WAAW;6EAOrB,gBAAgB;;CAalB,CAAC;AAIF,MAAM,WAAW,iBAAkB,SAAQ,cAAc,CAAC,OAAO,IAAI,CAAC;CAAG;AAEzE,eAAO,MAAM,YAAY;6EAOtB,iBAAiB;;CAanB,CAAC;AAIF,MAAM,WAAW,cAAe,SAAQ,cAAc,CAAC,OAAO,IAAI,CAAC;CAAG;AAEtE,eAAO,MAAM,SAAS;6EAOnB,cAAc;;CAahB,CAAC"}

package/dist/components/navbar/navbar-sections.js

@@ -1,14 +1,21 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
 import { cx } from 'class-variance-authority';
-import { forwardRef } from 'react';
 import { Flex } from '../flex/flex.js';
 import styles from './navbar.module.css.js';
 
-const NavbarStart = forwardRef(({ className, children, 'aria-label': ariaLabel, ...props }, ref) => (jsx(Flex, { ref: ref, align: 'center', gap: 5, className: cx(styles.start, className), role: ariaLabel ? 'group' : undefined, "aria-label": ariaLabel, ...props, children: children })));
+const NavbarStart = ({ className, children, 'aria-label': ariaLabel, align = 'center', gap = 5, ...props }) => {
+    return (jsx(Flex, { align: align, gap: gap, className: cx(styles.start, className), "aria-label": ariaLabel, ...props, role: 'group', children: children }));
+};
 NavbarStart.displayName = 'Navbar.Start';
-const NavbarEnd = forwardRef(({ className, children, 'aria-label': ariaLabel, ...props }, ref) => (jsx(Flex, { ref: ref, align: 'center', gap: 5, className: cx(styles.end, className), role: ariaLabel ? 'group' : undefined, "aria-label": ariaLabel, ...props, children: children })));
+const NavbarCenter = ({ className, children, 'aria-label': ariaLabel, align = 'center', gap = 5, ...props }) => {
+    return (jsx(Flex, { align: align, gap: gap, className: cx(styles.center, className), "aria-label": ariaLabel, ...props, role: 'group', children: children }));
+};
+NavbarCenter.displayName = 'Navbar.Center';
+const NavbarEnd = ({ className, children, 'aria-label': ariaLabel, align = 'center', gap = 5, ...props }) => {
+    return (jsx(Flex, { align: align, gap: gap, className: cx(styles.end, className), "aria-label": ariaLabel, ...props, role: 'group', children: children }));
+};
 NavbarEnd.displayName = 'Navbar.End';
 
-export { NavbarEnd, NavbarStart };
+export { NavbarCenter, NavbarEnd, NavbarStart };
 //# sourceMappingURL=navbar-sections.js.map

package/dist/components/navbar/navbar-sections.js.map

@@ -1 +1 @@
-{"version":3,"file":"navbar-sections.js","sources":["../../../components/navbar/navbar-sections.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'class-variance-authority';\nimport { ComponentPropsWithoutRef, forwardRef } from 'react';\nimport { Flex } from '../flex';\nimport styles from './navbar.module.css';\n\nexport interface NavbarStartProps\n  extends ComponentPropsWithoutRef<typeof Flex> {}\n\nexport const NavbarStart = forwardRef<HTMLDivElement, NavbarStartProps>(\n  ({ className, children, 'aria-label': ariaLabel, ...props }, ref) => (\n    <Flex\n      ref={ref}\n      align='center'\n      gap={5}\n      className={cx(styles.start, className)}\n      role={ariaLabel ? 'group' : undefined}\n      aria-label={ariaLabel}\n      {...props}\n    >\n      {children}\n    </Flex>\n  )\n);\n\nNavbarStart.displayName = 'Navbar.Start';\n\nexport interface NavbarEndProps extends ComponentPropsWithoutRef<typeof Flex> {}\n\nexport const NavbarEnd = forwardRef<HTMLDivElement, NavbarEndProps>(\n  ({ className, children, 'aria-label': ariaLabel, ...props }, ref) => (\n    <Flex\n      ref={ref}\n      align='center'\n      gap={5}\n      className={cx(styles.end, className)}\n      role={ariaLabel ? 'group' : undefined}\n      aria-label={ariaLabel}\n      {...props}\n    >\n      {children}\n    </Flex>\n  )\n);\n\nNavbarEnd.displayName = 'Navbar.End';\n"],"names":[],"mappings":";;;;;;;AAUO;AAgBP;AAIO;AAgBP;;"}
+{"version":3,"file":"navbar-sections.js","sources":["../../../components/navbar/navbar-sections.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'class-variance-authority';\nimport { ComponentProps } from 'react';\nimport { Flex } from '../flex';\nimport styles from './navbar.module.css';\n\nexport interface NavbarStartProps extends ComponentProps<typeof Flex> {}\n\nexport const NavbarStart = ({\n  className,\n  children,\n  'aria-label': ariaLabel,\n  align = 'center',\n  gap = 5,\n  ...props\n}: NavbarStartProps) => {\n  return (\n    <Flex\n      align={align}\n      gap={gap}\n      className={cx(styles.start, className)}\n      aria-label={ariaLabel}\n      {...props}\n      role='group'\n    >\n      {children}\n    </Flex>\n  );\n};\n\nNavbarStart.displayName = 'Navbar.Start';\n\nexport interface NavbarCenterProps extends ComponentProps<typeof Flex> {}\n\nexport const NavbarCenter = ({\n  className,\n  children,\n  'aria-label': ariaLabel,\n  align = 'center',\n  gap = 5,\n  ...props\n}: NavbarCenterProps) => {\n  return (\n    <Flex\n      align={align}\n      gap={gap}\n      className={cx(styles.center, className)}\n      aria-label={ariaLabel}\n      {...props}\n      role='group'\n    >\n      {children}\n    </Flex>\n  );\n};\n\nNavbarCenter.displayName = 'Navbar.Center';\n\nexport interface NavbarEndProps extends ComponentProps<typeof Flex> {}\n\nexport const NavbarEnd = ({\n  className,\n  children,\n  'aria-label': ariaLabel,\n  align = 'center',\n  gap = 5,\n  ...props\n}: NavbarEndProps) => {\n  return (\n    <Flex\n      align={align}\n      gap={gap}\n      className={cx(styles.end, className)}\n      aria-label={ariaLabel}\n      {...props}\n      role='group'\n    >\n      {children}\n    </Flex>\n  );\n};\n\nNavbarEnd.displayName = 'Navbar.End';\n"],"names":[],"mappings":";;;;;;AASa;AAQX;AAYF;AAEA;AAIa;AAQX;AAYF;AAEA;AAIa;AAQX;AAYF;AAEA;;"}

package/dist/components/navbar/navbar.cjs

@@ -6,6 +6,7 @@ var navbarSections = require('./navbar-sections.cjs');
 
 const Navbar = Object.assign(navbarRoot.NavbarRoot, {
     Start: navbarSections.NavbarStart,
+    Center: navbarSections.NavbarCenter,
     End: navbarSections.NavbarEnd
 });
 

package/dist/components/navbar/navbar.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"navbar.cjs","sources":["../../../components/navbar/navbar.tsx"],"sourcesContent":["'use client';\n\nimport { NavbarRoot } from './navbar-root';\nimport { NavbarEnd, NavbarStart } from './navbar-sections';\n\nexport const Navbar = Object.assign(NavbarRoot, {\n  Start: NavbarStart,\n  End: NavbarEnd\n});\n"],"names":[],"mappings":";;;;;;;AAME;AACA;AACD;;"}
+{"version":3,"file":"navbar.cjs","sources":["../../../components/navbar/navbar.tsx"],"sourcesContent":["'use client';\n\nimport { NavbarRoot } from './navbar-root';\nimport { NavbarCenter, NavbarEnd, NavbarStart } from './navbar-sections';\n\nexport const Navbar = Object.assign(NavbarRoot, {\n  Start: NavbarStart,\n  Center: NavbarCenter,\n  End: NavbarEnd\n});\n"],"names":[],"mappings":";;;;;;;AAME;AACA;AACA;AACD;;"}

package/dist/components/navbar/navbar.d.ts

@@ -1,5 +1,18 @@
-export declare const Navbar: import("react").ForwardRefExoticComponent<import("./navbar-root").NavbarRootProps & import("react").RefAttributes<HTMLElement>> & {
-    Start: import("react").ForwardRefExoticComponent<import("./navbar-sections").NavbarStartProps & import("react").RefAttributes<HTMLDivElement>>;
-    End: import("react").ForwardRefExoticComponent<import("./navbar-sections").NavbarEndProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const Navbar: {
+    ({ className, sticky, hideOnScroll, scrollContainerRef, children, ref, ...props }: import("./navbar-root").NavbarRootProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+} & {
+    Start: {
+        ({ className, children, "aria-label": ariaLabel, align, gap, ...props }: import("./navbar-sections").NavbarStartProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Center: {
+        ({ className, children, "aria-label": ariaLabel, align, gap, ...props }: import("./navbar-sections").NavbarCenterProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    End: {
+        ({ className, children, "aria-label": ariaLabel, align, gap, ...props }: import("./navbar-sections").NavbarEndProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
 };
 //# sourceMappingURL=navbar.d.ts.map

package/dist/components/navbar/navbar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"navbar.d.ts","sourceRoot":"","sources":["../../../components/navbar/navbar.tsx"],"names":[],"mappings":"AAKA,eAAO,MAAM,MAAM;;;CAGjB,CAAC"}
+{"version":3,"file":"navbar.d.ts","sourceRoot":"","sources":["../../../components/navbar/navbar.tsx"],"names":[],"mappings":"AAKA,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;CAIjB,CAAC"}

package/dist/components/navbar/navbar.js

@@ -1,9 +1,10 @@
 "use client";
 import { NavbarRoot } from './navbar-root.js';
-import { NavbarStart, NavbarEnd } from './navbar-sections.js';
+import { NavbarStart, NavbarCenter, NavbarEnd } from './navbar-sections.js';
 
 const Navbar = Object.assign(NavbarRoot, {
     Start: NavbarStart,
+    Center: NavbarCenter,
     End: NavbarEnd
 });
 

package/dist/components/navbar/navbar.js.map

@@ -1 +1 @@
-{"version":3,"file":"navbar.js","sources":["../../../components/navbar/navbar.tsx"],"sourcesContent":["'use client';\n\nimport { NavbarRoot } from './navbar-root';\nimport { NavbarEnd, NavbarStart } from './navbar-sections';\n\nexport const Navbar = Object.assign(NavbarRoot, {\n  Start: NavbarStart,\n  End: NavbarEnd\n});\n"],"names":[],"mappings":";;;;;AAME;AACA;AACD;;"}
+{"version":3,"file":"navbar.js","sources":["../../../components/navbar/navbar.tsx"],"sourcesContent":["'use client';\n\nimport { NavbarRoot } from './navbar-root';\nimport { NavbarCenter, NavbarEnd, NavbarStart } from './navbar-sections';\n\nexport const Navbar = Object.assign(NavbarRoot, {\n  Start: NavbarStart,\n  Center: NavbarCenter,\n  End: NavbarEnd\n});\n"],"names":[],"mappings":";;;;;AAME;AACA;AACA;AACD;;"}

package/dist/components/navbar/navbar.module.css.cjs

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var styles = {"root":"navbar-module_root__XZ3GF","container":"navbar-module_container__JZtMH","start":"navbar-module_start__Q6oQh","end":"navbar-module_end__RTpXl"};
+var styles = {"root":"navbar-module_root__XZ3GF","container":"navbar-module_container__JZtMH","start":"navbar-module_start__Q6oQh","center":"navbar-module_center__4AjcR","end":"navbar-module_end__RTpXl"};
 
 exports.default = styles;
 //# sourceMappingURL=navbar.module.css.cjs.map