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

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

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

@@ -1,4 +1,4 @@
-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"};
 
 export { styles as default };
 //# sourceMappingURL=navbar.module.css.js.map

package/dist/components/number-field/__tests__/number-field.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=number-field.test.d.ts.map

package/dist/components/number-field/__tests__/number-field.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"number-field.test.d.ts","sourceRoot":"","sources":["../../../../components/number-field/__tests__/number-field.test.tsx"],"names":[],"mappings":""}

package/dist/components/number-field/index.d.ts

@@ -0,0 +1,3 @@
+export type { NumberFieldScrubAreaProps } from './number-field';
+export { NumberField } from './number-field';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/number-field/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../components/number-field/index.tsx"],"names":[],"mappings":"AAAA,YAAY,EAAE,yBAAyB,EAAE,MAAM,gBAAgB,CAAC;AAChE,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC"}

package/dist/components/number-field/number-field.cjs

@@ -0,0 +1,53 @@
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('@base-ui/react');
+var reactIcons = require('@radix-ui/react-icons');
+var classVarianceAuthority = require('class-variance-authority');
+var React = require('react');
+var label = require('../label/label.cjs');
+var numberField_module = require('./number-field.module.css.cjs');
+
+const NumberFieldContext = React.createContext(null);
+function NumberFieldRoot({ className, children, id, ...props }) {
+    const generatedId = React.useId();
+    const fieldId = id ?? generatedId;
+    return (jsxRuntime.jsx(NumberFieldContext, { value: { fieldId }, children: jsxRuntime.jsx(react.NumberField.Root, { className: classVarianceAuthority.cx(numberField_module.default.root, className), id: fieldId, ...props, children: children ?? (jsxRuntime.jsxs(react.NumberField.Group, { className: numberField_module.default.group, children: [jsxRuntime.jsx(NumberFieldDecrement, {}), jsxRuntime.jsx(NumberFieldInput, {}), jsxRuntime.jsx(NumberFieldIncrement, {})] })) }) }));
+}
+NumberFieldRoot.displayName = 'NumberField';
+function NumberFieldGroup({ className, ...props }) {
+    return (jsxRuntime.jsx(react.NumberField.Group, { className: classVarianceAuthority.cx(numberField_module.default.group, className), ...props }));
+}
+NumberFieldGroup.displayName = 'NumberField.Group';
+function NumberFieldInput({ className, ...props }) {
+    return (jsxRuntime.jsx(react.NumberField.Input, { className: classVarianceAuthority.cx(numberField_module.default.input, className), ...props }));
+}
+NumberFieldInput.displayName = 'NumberField.Input';
+function NumberFieldDecrement({ className, children, ...props }) {
+    return (jsxRuntime.jsx(react.NumberField.Decrement, { className: classVarianceAuthority.cx(numberField_module.default.decrement, className), ...props, children: children ?? jsxRuntime.jsx(reactIcons.MinusIcon, { width: 12, height: 12 }) }));
+}
+NumberFieldDecrement.displayName = 'NumberField.Decrement';
+function NumberFieldIncrement({ className, children, ...props }) {
+    return (jsxRuntime.jsx(react.NumberField.Increment, { className: classVarianceAuthority.cx(numberField_module.default.increment, className), ...props, children: children ?? jsxRuntime.jsx(reactIcons.PlusIcon, { width: 12, height: 12 }) }));
+}
+NumberFieldIncrement.displayName = 'NumberField.Increment';
+function NumberFieldScrubArea({ className, label: label$1, ...props }) {
+    const context = React.useContext(NumberFieldContext);
+    return (jsxRuntime.jsxs(react.NumberField.ScrubArea, { className: classVarianceAuthority.cx(numberField_module.default['scrub-area'], className), ...props, children: [jsxRuntime.jsx(label.Label, { className: numberField_module.default['scrub-area-label'], htmlFor: context?.fieldId, children: label$1 }), jsxRuntime.jsx(react.NumberField.ScrubAreaCursor, { className: numberField_module.default['scrub-area-cursor'], children: jsxRuntime.jsx(CursorGrowIcon, {}) })] }));
+}
+NumberFieldScrubArea.displayName = 'NumberField.ScrubArea';
+function CursorGrowIcon(props) {
+    return (jsxRuntime.jsx("svg", { "aria-hidden": 'true', fill: 'black', height: '14', stroke: 'white', viewBox: '0 0 24 14', width: '26', xmlns: 'http://www.w3.org/2000/svg', ...props, children: jsxRuntime.jsx("path", { d: 'M19.5 5.5L6.49737 5.51844V2L1 6.9999L6.5 12L6.49737 8.5L19.5 8.5V12L25 6.9999L19.5 2V5.5Z' }) }));
+}
+const NumberField = Object.assign(NumberFieldRoot, {
+    Group: NumberFieldGroup,
+    Input: NumberFieldInput,
+    Decrement: NumberFieldDecrement,
+    Increment: NumberFieldIncrement,
+    ScrubArea: NumberFieldScrubArea,
+    ScrubAreaCursor: react.NumberField.ScrubAreaCursor
+});
+
+exports.NumberField = NumberField;
+//# sourceMappingURL=number-field.cjs.map

package/dist/components/number-field/number-field.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"number-field.cjs","sources":["../../../components/number-field/number-field.tsx"],"sourcesContent":["'use client';\n\nimport { NumberField as NumberFieldPrimitive } from '@base-ui/react';\nimport { MinusIcon, PlusIcon } from '@radix-ui/react-icons';\nimport { cx } from 'class-variance-authority';\nimport { type ComponentProps, createContext, useContext, useId } from 'react';\nimport { Label } from '../label';\nimport styles from './number-field.module.css';\n\nconst NumberFieldContext = createContext<{ fieldId: string } | null>(null);\n\nfunction NumberFieldRoot({\n  className,\n  children,\n  id,\n  ...props\n}: NumberFieldPrimitive.Root.Props) {\n  const generatedId = useId();\n  const fieldId = id ?? generatedId;\n\n  return (\n    <NumberFieldContext value={{ fieldId }}>\n      <NumberFieldPrimitive.Root\n        className={cx(styles.root, className)}\n        id={fieldId}\n        {...props}\n      >\n        {children ?? (\n          <NumberFieldPrimitive.Group className={styles.group}>\n            <NumberFieldDecrement />\n            <NumberFieldInput />\n            <NumberFieldIncrement />\n          </NumberFieldPrimitive.Group>\n        )}\n      </NumberFieldPrimitive.Root>\n    </NumberFieldContext>\n  );\n}\nNumberFieldRoot.displayName = 'NumberField';\n\nfunction NumberFieldGroup({\n  className,\n  ...props\n}: NumberFieldPrimitive.Group.Props) {\n  return (\n    <NumberFieldPrimitive.Group\n      className={cx(styles.group, className)}\n      {...props}\n    />\n  );\n}\nNumberFieldGroup.displayName = 'NumberField.Group';\n\nfunction NumberFieldInput({\n  className,\n  ...props\n}: NumberFieldPrimitive.Input.Props) {\n  return (\n    <NumberFieldPrimitive.Input\n      className={cx(styles.input, className)}\n      {...props}\n    />\n  );\n}\nNumberFieldInput.displayName = 'NumberField.Input';\n\nfunction NumberFieldDecrement({\n  className,\n  children,\n  ...props\n}: NumberFieldPrimitive.Decrement.Props) {\n  return (\n    <NumberFieldPrimitive.Decrement\n      className={cx(styles.decrement, className)}\n      {...props}\n    >\n      {children ?? <MinusIcon width={12} height={12} />}\n    </NumberFieldPrimitive.Decrement>\n  );\n}\nNumberFieldDecrement.displayName = 'NumberField.Decrement';\n\nfunction NumberFieldIncrement({\n  className,\n  children,\n  ...props\n}: NumberFieldPrimitive.Increment.Props) {\n  return (\n    <NumberFieldPrimitive.Increment\n      className={cx(styles.increment, className)}\n      {...props}\n    >\n      {children ?? <PlusIcon width={12} height={12} />}\n    </NumberFieldPrimitive.Increment>\n  );\n}\nNumberFieldIncrement.displayName = 'NumberField.Increment';\n\nexport interface NumberFieldScrubAreaProps\n  extends NumberFieldPrimitive.ScrubArea.Props {\n  label: string;\n}\n\nfunction NumberFieldScrubArea({\n  className,\n  label,\n  ...props\n}: NumberFieldScrubAreaProps) {\n  const context = useContext(NumberFieldContext);\n\n  return (\n    <NumberFieldPrimitive.ScrubArea\n      className={cx(styles['scrub-area'], className)}\n      {...props}\n    >\n      <Label className={styles['scrub-area-label']} htmlFor={context?.fieldId}>\n        {label}\n      </Label>\n      <NumberFieldPrimitive.ScrubAreaCursor\n        className={styles['scrub-area-cursor']}\n      >\n        <CursorGrowIcon />\n      </NumberFieldPrimitive.ScrubAreaCursor>\n    </NumberFieldPrimitive.ScrubArea>\n  );\n}\nNumberFieldScrubArea.displayName = 'NumberField.ScrubArea';\n\nfunction CursorGrowIcon(props: ComponentProps<'svg'>) {\n  return (\n    <svg\n      aria-hidden='true'\n      fill='black'\n      height='14'\n      stroke='white'\n      viewBox='0 0 24 14'\n      width='26'\n      xmlns='http://www.w3.org/2000/svg'\n      {...props}\n    >\n      <path d='M19.5 5.5L6.49737 5.51844V2L1 6.9999L6.5 12L6.49737 8.5L19.5 8.5V12L25 6.9999L19.5 2V5.5Z' />\n    </svg>\n  );\n}\n\nexport const NumberField = Object.assign(NumberFieldRoot, {\n  Group: NumberFieldGroup,\n  Input: NumberFieldInput,\n  Decrement: NumberFieldDecrement,\n  Increment: NumberFieldIncrement,\n  ScrubArea: NumberFieldScrubArea,\n  ScrubAreaCursor: NumberFieldPrimitive.ScrubAreaCursor\n});\n"],"names":[],"mappings":";;;;;;;;;;;AASA;AAEA;AAME;AACA;AAEA;AAiBF;AACA;AAEA;;AAUA;AACA;AAEA;;AAUA;AACA;AAEA;AAKE;AAQF;AACA;AAEA;AAKE;AAQF;AACA;AAOA;AAKE;;AAiBF;AACA;AAEA;AACE;AAcF;;AAGE;AACA;AACA;AACA;AACA;;AAED;;"}

package/dist/components/number-field/number-field.d.ts

@@ -0,0 +1,38 @@
+import { NumberField as NumberFieldPrimitive } from '@base-ui/react';
+declare function NumberFieldRoot({ className, children, id, ...props }: NumberFieldPrimitive.Root.Props): import("react/jsx-runtime").JSX.Element;
+declare namespace NumberFieldRoot {
+    var displayName: string;
+}
+declare function NumberFieldGroup({ className, ...props }: NumberFieldPrimitive.Group.Props): import("react/jsx-runtime").JSX.Element;
+declare namespace NumberFieldGroup {
+    var displayName: string;
+}
+declare function NumberFieldInput({ className, ...props }: NumberFieldPrimitive.Input.Props): import("react/jsx-runtime").JSX.Element;
+declare namespace NumberFieldInput {
+    var displayName: string;
+}
+declare function NumberFieldDecrement({ className, children, ...props }: NumberFieldPrimitive.Decrement.Props): import("react/jsx-runtime").JSX.Element;
+declare namespace NumberFieldDecrement {
+    var displayName: string;
+}
+declare function NumberFieldIncrement({ className, children, ...props }: NumberFieldPrimitive.Increment.Props): import("react/jsx-runtime").JSX.Element;
+declare namespace NumberFieldIncrement {
+    var displayName: string;
+}
+export interface NumberFieldScrubAreaProps extends NumberFieldPrimitive.ScrubArea.Props {
+    label: string;
+}
+declare function NumberFieldScrubArea({ className, label, ...props }: NumberFieldScrubAreaProps): import("react/jsx-runtime").JSX.Element;
+declare namespace NumberFieldScrubArea {
+    var displayName: string;
+}
+export declare const NumberField: typeof NumberFieldRoot & {
+    Group: typeof NumberFieldGroup;
+    Input: typeof NumberFieldInput;
+    Decrement: typeof NumberFieldDecrement;
+    Increment: typeof NumberFieldIncrement;
+    ScrubArea: typeof NumberFieldScrubArea;
+    ScrubAreaCursor: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react").NumberFieldScrubAreaCursorProps, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+};
+export {};
+//# sourceMappingURL=number-field.d.ts.map

package/dist/components/number-field/number-field.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"number-field.d.ts","sourceRoot":"","sources":["../../../components/number-field/number-field.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,IAAI,oBAAoB,EAAE,MAAM,gBAAgB,CAAC;AASrE,iBAAS,eAAe,CAAC,EACvB,SAAS,EACT,QAAQ,EACR,EAAE,EACF,GAAG,KAAK,EACT,EAAE,oBAAoB,CAAC,IAAI,CAAC,KAAK,2CAqBjC;kBA1BQ,eAAe;;;AA6BxB,iBAAS,gBAAgB,CAAC,EACxB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,oBAAoB,CAAC,KAAK,CAAC,KAAK,2CAOlC;kBAVQ,gBAAgB;;;AAazB,iBAAS,gBAAgB,CAAC,EACxB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,oBAAoB,CAAC,KAAK,CAAC,KAAK,2CAOlC;kBAVQ,gBAAgB;;;AAazB,iBAAS,oBAAoB,CAAC,EAC5B,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,oBAAoB,CAAC,SAAS,CAAC,KAAK,2CAStC;kBAbQ,oBAAoB;;;AAgB7B,iBAAS,oBAAoB,CAAC,EAC5B,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,oBAAoB,CAAC,SAAS,CAAC,KAAK,2CAStC;kBAbQ,oBAAoB;;;AAgB7B,MAAM,WAAW,yBACf,SAAQ,oBAAoB,CAAC,SAAS,CAAC,KAAK;IAC5C,KAAK,EAAE,MAAM,CAAC;CACf;AAED,iBAAS,oBAAoB,CAAC,EAC5B,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACT,EAAE,yBAAyB,2CAkB3B;kBAtBQ,oBAAoB;;;AA0C7B,eAAO,MAAM,WAAW;;;;;;;CAOtB,CAAC"}

package/dist/components/number-field/number-field.js

@@ -0,0 +1,51 @@
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { NumberField as NumberField$1 } from '@base-ui/react';
+import { MinusIcon, PlusIcon } from '@radix-ui/react-icons';
+import { cx } from 'class-variance-authority';
+import { createContext, useId, useContext } from 'react';
+import { Label } from '../label/label.js';
+import styles from './number-field.module.css.js';
+
+const NumberFieldContext = createContext(null);
+function NumberFieldRoot({ className, children, id, ...props }) {
+    const generatedId = useId();
+    const fieldId = id ?? generatedId;
+    return (jsx(NumberFieldContext, { value: { fieldId }, children: jsx(NumberField$1.Root, { className: cx(styles.root, className), id: fieldId, ...props, children: children ?? (jsxs(NumberField$1.Group, { className: styles.group, children: [jsx(NumberFieldDecrement, {}), jsx(NumberFieldInput, {}), jsx(NumberFieldIncrement, {})] })) }) }));
+}
+NumberFieldRoot.displayName = 'NumberField';
+function NumberFieldGroup({ className, ...props }) {
+    return (jsx(NumberField$1.Group, { className: cx(styles.group, className), ...props }));
+}
+NumberFieldGroup.displayName = 'NumberField.Group';
+function NumberFieldInput({ className, ...props }) {
+    return (jsx(NumberField$1.Input, { className: cx(styles.input, className), ...props }));
+}
+NumberFieldInput.displayName = 'NumberField.Input';
+function NumberFieldDecrement({ className, children, ...props }) {
+    return (jsx(NumberField$1.Decrement, { className: cx(styles.decrement, className), ...props, children: children ?? jsx(MinusIcon, { width: 12, height: 12 }) }));
+}
+NumberFieldDecrement.displayName = 'NumberField.Decrement';
+function NumberFieldIncrement({ className, children, ...props }) {
+    return (jsx(NumberField$1.Increment, { className: cx(styles.increment, className), ...props, children: children ?? jsx(PlusIcon, { width: 12, height: 12 }) }));
+}
+NumberFieldIncrement.displayName = 'NumberField.Increment';
+function NumberFieldScrubArea({ className, label, ...props }) {
+    const context = useContext(NumberFieldContext);
+    return (jsxs(NumberField$1.ScrubArea, { className: cx(styles['scrub-area'], className), ...props, children: [jsx(Label, { className: styles['scrub-area-label'], htmlFor: context?.fieldId, children: label }), jsx(NumberField$1.ScrubAreaCursor, { className: styles['scrub-area-cursor'], children: jsx(CursorGrowIcon, {}) })] }));
+}
+NumberFieldScrubArea.displayName = 'NumberField.ScrubArea';
+function CursorGrowIcon(props) {
+    return (jsx("svg", { "aria-hidden": 'true', fill: 'black', height: '14', stroke: 'white', viewBox: '0 0 24 14', width: '26', xmlns: 'http://www.w3.org/2000/svg', ...props, children: jsx("path", { d: 'M19.5 5.5L6.49737 5.51844V2L1 6.9999L6.5 12L6.49737 8.5L19.5 8.5V12L25 6.9999L19.5 2V5.5Z' }) }));
+}
+const NumberField = Object.assign(NumberFieldRoot, {
+    Group: NumberFieldGroup,
+    Input: NumberFieldInput,
+    Decrement: NumberFieldDecrement,
+    Increment: NumberFieldIncrement,
+    ScrubArea: NumberFieldScrubArea,
+    ScrubAreaCursor: NumberField$1.ScrubAreaCursor
+});
+
+export { NumberField };
+//# sourceMappingURL=number-field.js.map

package/dist/components/number-field/number-field.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"number-field.js","sources":["../../../components/number-field/number-field.tsx"],"sourcesContent":["'use client';\n\nimport { NumberField as NumberFieldPrimitive } from '@base-ui/react';\nimport { MinusIcon, PlusIcon } from '@radix-ui/react-icons';\nimport { cx } from 'class-variance-authority';\nimport { type ComponentProps, createContext, useContext, useId } from 'react';\nimport { Label } from '../label';\nimport styles from './number-field.module.css';\n\nconst NumberFieldContext = createContext<{ fieldId: string } | null>(null);\n\nfunction NumberFieldRoot({\n  className,\n  children,\n  id,\n  ...props\n}: NumberFieldPrimitive.Root.Props) {\n  const generatedId = useId();\n  const fieldId = id ?? generatedId;\n\n  return (\n    <NumberFieldContext value={{ fieldId }}>\n      <NumberFieldPrimitive.Root\n        className={cx(styles.root, className)}\n        id={fieldId}\n        {...props}\n      >\n        {children ?? (\n          <NumberFieldPrimitive.Group className={styles.group}>\n            <NumberFieldDecrement />\n            <NumberFieldInput />\n            <NumberFieldIncrement />\n          </NumberFieldPrimitive.Group>\n        )}\n      </NumberFieldPrimitive.Root>\n    </NumberFieldContext>\n  );\n}\nNumberFieldRoot.displayName = 'NumberField';\n\nfunction NumberFieldGroup({\n  className,\n  ...props\n}: NumberFieldPrimitive.Group.Props) {\n  return (\n    <NumberFieldPrimitive.Group\n      className={cx(styles.group, className)}\n      {...props}\n    />\n  );\n}\nNumberFieldGroup.displayName = 'NumberField.Group';\n\nfunction NumberFieldInput({\n  className,\n  ...props\n}: NumberFieldPrimitive.Input.Props) {\n  return (\n    <NumberFieldPrimitive.Input\n      className={cx(styles.input, className)}\n      {...props}\n    />\n  );\n}\nNumberFieldInput.displayName = 'NumberField.Input';\n\nfunction NumberFieldDecrement({\n  className,\n  children,\n  ...props\n}: NumberFieldPrimitive.Decrement.Props) {\n  return (\n    <NumberFieldPrimitive.Decrement\n      className={cx(styles.decrement, className)}\n      {...props}\n    >\n      {children ?? <MinusIcon width={12} height={12} />}\n    </NumberFieldPrimitive.Decrement>\n  );\n}\nNumberFieldDecrement.displayName = 'NumberField.Decrement';\n\nfunction NumberFieldIncrement({\n  className,\n  children,\n  ...props\n}: NumberFieldPrimitive.Increment.Props) {\n  return (\n    <NumberFieldPrimitive.Increment\n      className={cx(styles.increment, className)}\n      {...props}\n    >\n      {children ?? <PlusIcon width={12} height={12} />}\n    </NumberFieldPrimitive.Increment>\n  );\n}\nNumberFieldIncrement.displayName = 'NumberField.Increment';\n\nexport interface NumberFieldScrubAreaProps\n  extends NumberFieldPrimitive.ScrubArea.Props {\n  label: string;\n}\n\nfunction NumberFieldScrubArea({\n  className,\n  label,\n  ...props\n}: NumberFieldScrubAreaProps) {\n  const context = useContext(NumberFieldContext);\n\n  return (\n    <NumberFieldPrimitive.ScrubArea\n      className={cx(styles['scrub-area'], className)}\n      {...props}\n    >\n      <Label className={styles['scrub-area-label']} htmlFor={context?.fieldId}>\n        {label}\n      </Label>\n      <NumberFieldPrimitive.ScrubAreaCursor\n        className={styles['scrub-area-cursor']}\n      >\n        <CursorGrowIcon />\n      </NumberFieldPrimitive.ScrubAreaCursor>\n    </NumberFieldPrimitive.ScrubArea>\n  );\n}\nNumberFieldScrubArea.displayName = 'NumberField.ScrubArea';\n\nfunction CursorGrowIcon(props: ComponentProps<'svg'>) {\n  return (\n    <svg\n      aria-hidden='true'\n      fill='black'\n      height='14'\n      stroke='white'\n      viewBox='0 0 24 14'\n      width='26'\n      xmlns='http://www.w3.org/2000/svg'\n      {...props}\n    >\n      <path d='M19.5 5.5L6.49737 5.51844V2L1 6.9999L6.5 12L6.49737 8.5L19.5 8.5V12L25 6.9999L19.5 2V5.5Z' />\n    </svg>\n  );\n}\n\nexport const NumberField = Object.assign(NumberFieldRoot, {\n  Group: NumberFieldGroup,\n  Input: NumberFieldInput,\n  Decrement: NumberFieldDecrement,\n  Increment: NumberFieldIncrement,\n  ScrubArea: NumberFieldScrubArea,\n  ScrubAreaCursor: NumberFieldPrimitive.ScrubAreaCursor\n});\n"],"names":[],"mappings":";;;;;;;;;AASA;AAEA;AAME;AACA;AAEA;AAiBF;AACA;AAEA;;AAUA;AACA;AAEA;;AAUA;AACA;AAEA;AAKE;AAQF;AACA;AAEA;AAKE;AAQF;AACA;AAOA;AAKE;;AAiBF;AACA;AAEA;AACE;AAcF;;AAGE;AACA;AACA;AACA;AACA;;AAED;;"}

package/dist/components/number-field/number-field.module.css.cjs

@@ -0,0 +1,8 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styles = {"root":"number-field-module_root__VPgTs","group":"number-field-module_group__LmpdK","decrement":"number-field-module_decrement__lddQv","increment":"number-field-module_increment__QKrFf","input":"number-field-module_input__Sl0Jo","scrub-area":"number-field-module_scrub-area__AE1Ei","scrub-area-label":"number-field-module_scrub-area-label__mf1oQ","scrub-area-cursor":"number-field-module_scrub-area-cursor__x5aro","scrub___area":"number-field-module_scrub-area__AE1Ei","scrub___area___label":"number-field-module_scrub-area-label__mf1oQ","scrub___area___cursor":"number-field-module_scrub-area-cursor__x5aro"};
+
+exports.default = styles;
+//# sourceMappingURL=number-field.module.css.cjs.map

package/dist/components/number-field/number-field.module.css.cjs.map

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

package/dist/components/number-field/number-field.module.css.js

@@ -0,0 +1,4 @@
+var styles = {"root":"number-field-module_root__VPgTs","group":"number-field-module_group__LmpdK","decrement":"number-field-module_decrement__lddQv","increment":"number-field-module_increment__QKrFf","input":"number-field-module_input__Sl0Jo","scrub-area":"number-field-module_scrub-area__AE1Ei","scrub-area-label":"number-field-module_scrub-area-label__mf1oQ","scrub-area-cursor":"number-field-module_scrub-area-cursor__x5aro","scrub___area":"number-field-module_scrub-area__AE1Ei","scrub___area___label":"number-field-module_scrub-area-label__mf1oQ","scrub___area___cursor":"number-field-module_scrub-area-cursor__x5aro"};
+
+export { styles as default };
+//# sourceMappingURL=number-field.module.css.js.map

package/dist/components/number-field/number-field.module.css.js.map

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

package/dist/components/popover/popover.cjs

@@ -4,12 +4,11 @@
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('@base-ui/react');
 var classVarianceAuthority = require('class-variance-authority');
-var React = require('react');
 var popover_module = require('./popover.module.css.cjs');
 
-const PopoverContent = React.forwardRef(({ initialFocus, finalFocus, className, style, render, children, ...positionerProps }, ref) => {
+function PopoverContent({ ref, initialFocus, finalFocus, className, style, render, children, ...positionerProps }) {
     return (jsxRuntime.jsx(react.Popover.Portal, { children: jsxRuntime.jsx(react.Popover.Positioner, { sideOffset: 4, collisionPadding: 3, className: popover_module.default.popoverPositioner, ...positionerProps, children: jsxRuntime.jsx(react.Popover.Popup, { ref: ref, className: classVarianceAuthority.cx(popover_module.default.popover, className), render: render, initialFocus: initialFocus, finalFocus: finalFocus, style: style, children: children }) }) }));
-});
+}
 PopoverContent.displayName = 'Popover.Content';
 const Popover = Object.assign(react.Popover.Root, {
     Trigger: react.Popover.Trigger,

package/dist/components/popover/popover.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"popover.cjs","sources":["../../../components/popover/popover.tsx"],"sourcesContent":["'use client';\n\nimport { Popover as PopoverPrimitive } from '@base-ui/react';\nimport { cx } from 'class-variance-authority';\nimport { ElementRef, forwardRef } from 'react';\nimport styles from './popover.module.css';\n\nexport interface PopoverContentProps\n  extends Omit<\n      PopoverPrimitive.Positioner.Props,\n      'render' | 'className' | 'style'\n    >,\n    PopoverPrimitive.Popup.Props {}\n\nconst PopoverContent = forwardRef<\n  ElementRef<typeof PopoverPrimitive.Popup>,\n  PopoverContentProps\n>(\n  (\n    {\n      initialFocus,\n      finalFocus,\n      className,\n      style,\n      render,\n      children,\n      ...positionerProps\n    },\n    ref\n  ) => {\n    return (\n      <PopoverPrimitive.Portal>\n        <PopoverPrimitive.Positioner\n          sideOffset={4}\n          collisionPadding={3}\n          className={styles.popoverPositioner}\n          {...positionerProps}\n        >\n          <PopoverPrimitive.Popup\n            ref={ref}\n            className={cx(styles.popover, className)}\n            render={render}\n            initialFocus={initialFocus}\n            finalFocus={finalFocus}\n            style={style}\n          >\n            {children}\n          </PopoverPrimitive.Popup>\n        </PopoverPrimitive.Positioner>\n      </PopoverPrimitive.Portal>\n    );\n  }\n);\nPopoverContent.displayName = 'Popover.Content';\n\nexport const Popover = Object.assign(PopoverPrimitive.Root, {\n  Trigger: PopoverPrimitive.Trigger,\n  Close: PopoverPrimitive.Close,\n  Content: PopoverContent\n});\n"],"names":[],"mappings":";;;;;;;;;AAcA;AAgBI;AAqBF;AAEF;AAEa;;;AAGX;AACD;;"}
+{"version":3,"file":"popover.cjs","sources":["../../../components/popover/popover.tsx"],"sourcesContent":["'use client';\n\nimport { Popover as PopoverPrimitive } from '@base-ui/react';\nimport { cx } from 'class-variance-authority';\nimport styles from './popover.module.css';\n\nexport interface PopoverContentProps\n  extends Omit<\n      PopoverPrimitive.Positioner.Props,\n      'render' | 'className' | 'style' | 'ref'\n    >,\n    PopoverPrimitive.Popup.Props {}\n\nfunction PopoverContent({\n  ref,\n  initialFocus,\n  finalFocus,\n  className,\n  style,\n  render,\n  children,\n  ...positionerProps\n}: PopoverContentProps) {\n  return (\n    <PopoverPrimitive.Portal>\n      <PopoverPrimitive.Positioner\n        sideOffset={4}\n        collisionPadding={3}\n        className={styles.popoverPositioner}\n        {...positionerProps}\n      >\n        <PopoverPrimitive.Popup\n          ref={ref}\n          className={cx(styles.popover, className)}\n          render={render}\n          initialFocus={initialFocus}\n          finalFocus={finalFocus}\n          style={style}\n        >\n          {children}\n        </PopoverPrimitive.Popup>\n      </PopoverPrimitive.Positioner>\n    </PopoverPrimitive.Portal>\n  );\n}\nPopoverContent.displayName = 'Popover.Content';\n\nexport const Popover = Object.assign(PopoverPrimitive.Root, {\n  Trigger: PopoverPrimitive.Trigger,\n  Close: PopoverPrimitive.Close,\n  Content: PopoverContent\n});\n"],"names":[],"mappings":";;;;;;;;AAaA;AAUE;AAqBF;AACA;AAEa;;;AAGX;AACD;;"}

package/dist/components/popover/popover.d.ts

@@ -1,9 +1,14 @@
 import { Popover as PopoverPrimitive } from '@base-ui/react';
-export interface PopoverContentProps extends Omit<PopoverPrimitive.Positioner.Props, 'render' | 'className' | 'style'>, PopoverPrimitive.Popup.Props {
+export interface PopoverContentProps extends Omit<PopoverPrimitive.Positioner.Props, 'render' | 'className' | 'style' | 'ref'>, PopoverPrimitive.Popup.Props {
+}
+declare function PopoverContent({ ref, initialFocus, finalFocus, className, style, render, children, ...positionerProps }: PopoverContentProps): import("react/jsx-runtime").JSX.Element;
+declare namespace PopoverContent {
+    var displayName: string;
 }
 export declare const Popover: typeof PopoverPrimitive.Root & {
     Trigger: PopoverPrimitive.Trigger;
     Close: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react").PopoverCloseProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
-    Content: import("react").ForwardRefExoticComponent<Omit<PopoverContentProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Content: typeof PopoverContent;
 };
+export {};
 //# sourceMappingURL=popover.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"popover.d.ts","sourceRoot":"","sources":["../../../components/popover/popover.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAK7D,MAAM,WAAW,mBACf,SAAQ,IAAI,CACR,gBAAgB,CAAC,UAAU,CAAC,KAAK,EACjC,QAAQ,GAAG,WAAW,GAAG,OAAO,CACjC,EACD,gBAAgB,CAAC,KAAK,CAAC,KAAK;CAAG;AA2CnC,eAAO,MAAM,OAAO;;;;CAIlB,CAAC"}
+{"version":3,"file":"popover.d.ts","sourceRoot":"","sources":["../../../components/popover/popover.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAI7D,MAAM,WAAW,mBACf,SAAQ,IAAI,CACR,gBAAgB,CAAC,UAAU,CAAC,KAAK,EACjC,QAAQ,GAAG,WAAW,GAAG,OAAO,GAAG,KAAK,CACzC,EACD,gBAAgB,CAAC,KAAK,CAAC,KAAK;CAAG;AAEnC,iBAAS,cAAc,CAAC,EACtB,GAAG,EACH,YAAY,EACZ,UAAU,EACV,SAAS,EACT,KAAK,EACL,MAAM,EACN,QAAQ,EACR,GAAG,eAAe,EACnB,EAAE,mBAAmB,2CAsBrB;kBA/BQ,cAAc;;;AAkCvB,eAAO,MAAM,OAAO;;;;CAIlB,CAAC"}