@raystack/apsara 1.0.0-rc.0 → 1.0.0-rc.2

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

@@ -0,0 +1,17 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { Meter } from '@base-ui/react';
+import { cx } from 'class-variance-authority';
+import styles from './meter.module.css.js';
+
+function MeterLabel({ className, ...props }) {
+    return (jsx(Meter.Label, { className: cx(styles.label, className), ...props }));
+}
+MeterLabel.displayName = 'Meter.Label';
+function MeterValue({ className, ...props }) {
+    return (jsx(Meter.Value, { className: cx(styles.value, className), ...props }));
+}
+MeterValue.displayName = 'Meter.Value';
+
+export { MeterLabel, MeterValue };
+//# sourceMappingURL=meter-misc.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"meter-misc.js","sources":["../../../components/meter/meter-misc.tsx"],"sourcesContent":["'use client';\n\nimport { Meter as MeterPrimitive } from '@base-ui/react';\nimport { cx } from 'class-variance-authority';\nimport styles from './meter.module.css';\n\nexport function MeterLabel({\n  className,\n  ...props\n}: MeterPrimitive.Label.Props) {\n  return (\n    <MeterPrimitive.Label className={cx(styles.label, className)} {...props} />\n  );\n}\n\nMeterLabel.displayName = 'Meter.Label';\n\nexport function MeterValue({\n  className,\n  ...props\n}: MeterPrimitive.Value.Props) {\n  return (\n    <MeterPrimitive.Value className={cx(styles.value, className)} {...props} />\n  );\n}\n\nMeterValue.displayName = 'Meter.Value';\n"],"names":[],"mappings":";;;;;;AAMM;;AAON;AAEA;AAEM;;AAON;AAEA;;"}

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

@@ -0,0 +1,38 @@
+"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 meterTrack = require('./meter-track.cjs');
+
+const meter = classVarianceAuthority.cva(meter_module.default.meter, {
+    variants: {
+        variant: {
+            linear: '',
+            circular: meter_module.default['meter-variant-circular']
+        }
+    },
+    defaultVariants: {
+        variant: 'linear'
+    }
+});
+const MeterContext = React.createContext({
+    variant: 'linear',
+    value: 0,
+    percentage: 0
+});
+function MeterRoot({ className, style = {}, variant = 'linear', children = jsxRuntime.jsx(meterTrack.MeterTrack, {}), value = 0, min = 0, max = 100, ...props }) {
+    const percentage = ((value - min) * 100) / (max - min);
+    return (jsxRuntime.jsx(MeterContext, { value: { variant: variant ?? 'linear', value, percentage }, children: jsxRuntime.jsx(react.Meter.Root, { className: meter({ variant, className }), style: {
+                ...style,
+                '--rs-meter-percentage': percentage
+            }, value: value, min: min, max: max, ...props, children: children }) }));
+}
+MeterRoot.displayName = 'Meter';
+
+exports.MeterContext = MeterContext;
+exports.MeterRoot = MeterRoot;
+//# sourceMappingURL=meter-root.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"meter-root.cjs","sources":["../../../components/meter/meter-root.tsx"],"sourcesContent":["'use client';\n\nimport { Meter as MeterPrimitive } from '@base-ui/react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { CSSProperties, createContext } from 'react';\nimport styles from './meter.module.css';\nimport { MeterTrack } from './meter-track';\n\nconst meter = cva(styles.meter, {\n  variants: {\n    variant: {\n      linear: '',\n      circular: styles['meter-variant-circular']\n    }\n  },\n  defaultVariants: {\n    variant: 'linear'\n  }\n});\n\nexport interface MeterProps\n  extends MeterPrimitive.Root.Props,\n    VariantProps<typeof meter> {}\n\nexport interface MeterContextValue {\n  variant: 'linear' | 'circular';\n  value: number;\n  percentage: number;\n}\n\nexport const MeterContext = createContext<MeterContextValue>({\n  variant: 'linear',\n  value: 0,\n  percentage: 0\n});\n\nexport function MeterRoot({\n  className,\n  style = {},\n  variant = 'linear',\n  children = <MeterTrack />,\n  value = 0,\n  min = 0,\n  max = 100,\n  ...props\n}: MeterProps) {\n  const percentage = ((value - min) * 100) / (max - min);\n\n  return (\n    <MeterContext value={{ variant: variant ?? 'linear', value, percentage }}>\n      <MeterPrimitive.Root\n        className={meter({ variant, className })}\n        style={\n          {\n            ...style,\n            '--rs-meter-percentage': percentage\n          } as CSSProperties\n        }\n        value={value}\n        min={min}\n        max={max}\n        {...props}\n      >\n        {children}\n      </MeterPrimitive.Root>\n    </MeterContext>\n  );\n}\n\nMeterRoot.displayName = 'Meter';\n"],"names":[],"mappings":";;;;;;;;;;AAQA;AACE;AACE;AACE;AACA;AACD;AACF;AACD;AACE;AACD;AACF;AAYM;AACL;AACA;AACA;AACD;AAEe;AAUd;AAEA;AAMU;AACA;AACgB;AAW5B;AAEA;;;"}

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

@@ -0,0 +1,19 @@
+import { Meter as MeterPrimitive } from '@base-ui/react';
+import { type VariantProps } from 'class-variance-authority';
+declare const meter: (props?: ({
+    variant?: "linear" | "circular" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface MeterProps extends MeterPrimitive.Root.Props, VariantProps<typeof meter> {
+}
+export interface MeterContextValue {
+    variant: 'linear' | 'circular';
+    value: number;
+    percentage: number;
+}
+export declare const MeterContext: import("react").Context<MeterContextValue>;
+export declare function MeterRoot({ className, style, variant, children, value, min, max, ...props }: MeterProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace MeterRoot {
+    var displayName: string;
+}
+export {};
+//# sourceMappingURL=meter-root.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"meter-root.d.ts","sourceRoot":"","sources":["../../../components/meter/meter-root.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,IAAI,cAAc,EAAE,MAAM,gBAAgB,CAAC;AACzD,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAKlE,QAAA,MAAM,KAAK;;8EAUT,CAAC;AAEH,MAAM,WAAW,UACf,SAAQ,cAAc,CAAC,IAAI,CAAC,KAAK,EAC/B,YAAY,CAAC,OAAO,KAAK,CAAC;CAAG;AAEjC,MAAM,WAAW,iBAAiB;IAChC,OAAO,EAAE,QAAQ,GAAG,UAAU,CAAC;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,YAAY,4CAIvB,CAAC;AAEH,wBAAgB,SAAS,CAAC,EACxB,SAAS,EACT,KAAU,EACV,OAAkB,EAClB,QAAyB,EACzB,KAAS,EACT,GAAO,EACP,GAAS,EACT,GAAG,KAAK,EACT,EAAE,UAAU,2CAsBZ;yBA/Be,SAAS"}

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

@@ -0,0 +1,35 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { Meter } from '@base-ui/react';
+import { cva } from 'class-variance-authority';
+import { createContext } from 'react';
+import styles from './meter.module.css.js';
+import { MeterTrack } from './meter-track.js';
+
+const meter = cva(styles.meter, {
+    variants: {
+        variant: {
+            linear: '',
+            circular: styles['meter-variant-circular']
+        }
+    },
+    defaultVariants: {
+        variant: 'linear'
+    }
+});
+const MeterContext = createContext({
+    variant: 'linear',
+    value: 0,
+    percentage: 0
+});
+function MeterRoot({ className, style = {}, variant = 'linear', children = jsx(MeterTrack, {}), value = 0, min = 0, max = 100, ...props }) {
+    const percentage = ((value - min) * 100) / (max - min);
+    return (jsx(MeterContext, { value: { variant: variant ?? 'linear', value, percentage }, children: jsx(Meter.Root, { className: meter({ variant, className }), style: {
+                ...style,
+                '--rs-meter-percentage': percentage
+            }, value: value, min: min, max: max, ...props, children: children }) }));
+}
+MeterRoot.displayName = 'Meter';
+
+export { MeterContext, MeterRoot };
+//# sourceMappingURL=meter-root.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"meter-root.js","sources":["../../../components/meter/meter-root.tsx"],"sourcesContent":["'use client';\n\nimport { Meter as MeterPrimitive } from '@base-ui/react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { CSSProperties, createContext } from 'react';\nimport styles from './meter.module.css';\nimport { MeterTrack } from './meter-track';\n\nconst meter = cva(styles.meter, {\n  variants: {\n    variant: {\n      linear: '',\n      circular: styles['meter-variant-circular']\n    }\n  },\n  defaultVariants: {\n    variant: 'linear'\n  }\n});\n\nexport interface MeterProps\n  extends MeterPrimitive.Root.Props,\n    VariantProps<typeof meter> {}\n\nexport interface MeterContextValue {\n  variant: 'linear' | 'circular';\n  value: number;\n  percentage: number;\n}\n\nexport const MeterContext = createContext<MeterContextValue>({\n  variant: 'linear',\n  value: 0,\n  percentage: 0\n});\n\nexport function MeterRoot({\n  className,\n  style = {},\n  variant = 'linear',\n  children = <MeterTrack />,\n  value = 0,\n  min = 0,\n  max = 100,\n  ...props\n}: MeterProps) {\n  const percentage = ((value - min) * 100) / (max - min);\n\n  return (\n    <MeterContext value={{ variant: variant ?? 'linear', value, percentage }}>\n      <MeterPrimitive.Root\n        className={meter({ variant, className })}\n        style={\n          {\n            ...style,\n            '--rs-meter-percentage': percentage\n          } as CSSProperties\n        }\n        value={value}\n        min={min}\n        max={max}\n        {...props}\n      >\n        {children}\n      </MeterPrimitive.Root>\n    </MeterContext>\n  );\n}\n\nMeterRoot.displayName = 'Meter';\n"],"names":[],"mappings":";;;;;;;;AAQA;AACE;AACE;AACE;AACA;AACD;AACF;AACD;AACE;AACD;AACF;AAYM;AACL;AACA;AACA;AACD;AAEe;AAUd;AAEA;AAMU;AACA;AACgB;AAW5B;AAEA;;"}

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;;;;"}