@vjdesigns/vjdesigns-ui 0.0.0-stage → 1.5.0

package/dist/components/navigation/Navbar/Navbar.cjs.js

@@ -0,0 +1 @@
+const e=require("../../../types/common.cjs.js"),t=require("../../../hooks/useControllableState.cjs.js"),n=require("../../utilities/LocaleProvider/LocaleProvider.cjs.js"),r=require("../../../hooks/useMergedRef.cjs.js"),i=require("../../../utils/responsive.cjs.js"),a=require("../../../utils/cx.cjs.js"),o=require("../../primitives/Button/Button.cjs.js"),s=require("../../primitives/Icon/icons.cjs.js"),c=require("../../layout/Container/Container.cjs.js"),l=require("../../overlays/Drawer/Drawer.cjs.js"),u=require("./Navbar.module.css.cjs.js");let d=require("react"),f=require("react/jsx-runtime");var p={accent:u.default.activeAccent,primary:u.default.activePrimary,neutral:u.default.activeNeutral},m={surface:u.default.surface,transparent:u.default.transparent,solid:u.default.solid},h={sm:u.default.sm,md:u.default.md,lg:u.default.lg},g={static:u.default.static,sticky:u.default.sticky,fixed:u.default.fixed},_={sm:u.default.collapseSm,md:u.default.collapseMd,lg:u.default.collapseLg},v=(0,d.createContext)(null);function y(e){let t=(0,d.useContext)(v);if(!t)throw Error(`${e} must be used inside <Navbar>.`);return t}var b=(0,d.createContext)(`bar`),x=(0,d.createContext)(!1);function S(e){for(let t=e.parentElement;t&&t!==document.body;t=t.parentElement){let{overflowY:e}=getComputedStyle(t);if(e===`auto`||e===`scroll`||e===`overlay`)return t}return document.documentElement}var C=({children:i,variant:l=`surface`,size:p=`md`,position:y=`sticky`,reserveScrollPadding:b=!0,bordered:x=!1,elevated:C=!1,elevateOnScroll:w=!1,contained:T=!0,maxWidth:E=`xl`,collapseBelow:D=`md`,open:O,defaultOpen:k=!1,onOpenChange:A,menuLabel:j,menuTitle:ee,menuSide:M=`end`,activeTone:N=`accent`,className:P,ref:F,...I})=>{let L=n.useMessages(),R=j??L.navbar.openMenu,z=ee??L.navbar.menu,B=(0,d.useRef)(null),V=r.useMergedRef(B,F);(0,d.useEffect)(()=>{let e=B.current;if(!e||y===`static`||!b)return;let t=y===`fixed`?document.documentElement:S(e),n=t.style.scrollPaddingTop,r=()=>{t.style.scrollPaddingTop=`${e.offsetHeight}px`};r();let i=typeof ResizeObserver>`u`?null:new ResizeObserver(r);return i?.observe(e),()=>{i?.disconnect(),t.style.scrollPaddingTop=n}},[y,b]);let[H,U]=t.useControllableState({value:O,defaultValue:k,onChange:A}),W=`${(0,d.useId)()}-menu`,G=(0,d.useRef)(null),[K,q]=(0,d.useState)(0),[J,Y]=(0,d.useState)(!1),X=(0,d.useCallback)(()=>(q(e=>e+1),()=>q(e=>e-1)),[]),Z=(0,d.useCallback)(e=>U(e),[U]),Q=(0,d.useRef)(!1);(0,d.useEffect)(()=>{if(!H||typeof window>`u`||!window.matchMedia)return;let t=window.matchMedia(`(min-width: ${e.breakpoints[D]}px)`),n=()=>{t.matches&&(Q.current=!0,Z(!1))};return n(),t.addEventListener(`change`,n),()=>t.removeEventListener(`change`,n)},[H,D,Z]),(0,d.useEffect)(()=>{if(H||!Q.current)return;Q.current=!1;let e=document.activeElement;(!e||e===document.body||document.getElementById(W)?.contains(e))&&G.current?.closest(`header`)?.querySelector(`nav a[href], nav button:not([disabled])`)?.focus()},[H,W]),(0,d.useEffect)(()=>{if(!w||typeof window>`u`)return;let e=0,t=()=>{e=0,Y(window.scrollY>0)},n=()=>{e||=window.requestAnimationFrame(t)};return t(),window.addEventListener(`scroll`,n,{passive:!0}),()=>{window.removeEventListener(`scroll`,n),e&&window.cancelAnimationFrame(e)}},[w]);let te=(0,d.useMemo)(()=>({open:H,setOpen:Z,menuId:W,menuTitle:z,menuSide:M,toggleRef:G,registerNav:X,activeTone:N}),[H,Z,W,z,M,X,N]),$=w&&J,ne=K>0;return(0,f.jsx)(v.Provider,{value:te,children:(0,f.jsx)(`header`,{"data-variant":l,...I,ref:V,className:a.cx(u.default.root,m[l],h[p],g[y],_[D],x&&u.default.bordered,(C||$)&&u.default.elevated,$&&u.default.scrolled,P),children:(0,f.jsxs)(c.Container,{size:E,fluid:!T,gutter:`responsive`,className:u.default.inner,children:[i,ne&&(0,f.jsx)(o.IconButton,{ref:G,"aria-label":R,"aria-haspopup":`dialog`,"aria-expanded":H,"aria-controls":H?W:void 0,variant:l===`solid`?`solid`:`ghost`,tone:l===`solid`?`primary`:`neutral`,size:p,className:u.default.toggle,onClick:()=>Z(!H),children:(0,f.jsx)(s.MenuIcon,{})})]})})})};C.displayName=`Navbar`;function w(e){let{as:t,className:n,children:r,...i}=e,o=t!==void 0||i.href!==void 0;return(0,f.jsx)(t??(o?`a`:`div`),{...i,className:a.cx(u.default.brand,o&&u.default.brandLink,n),children:r})}w.displayName=`Navbar.Brand`;var T={start:u.default.alignStart,center:u.default.alignCenter,end:u.default.alignEnd},E=i.responsiveClasses(u.default,`navGap`),D=({children:e,align:t=`start`,gap:r,className:o,style:s,"aria-label":c,"aria-labelledby":p,...m})=>{let h=n.useMessages(),g=c??h.navbar.nav,{open:_,setOpen:v,menuId:x,menuTitle:S,menuSide:C,toggleRef:w,registerNav:D}=y(`Navbar.Nav`);(0,d.useLayoutEffect)(()=>D(),[D]);let O={},k=[];return i.responsiveVars(`navbar-nav-gap`,r,e=>`var(--space-${e})`,E,O,k),(0,f.jsxs)(f.Fragment,{children:[(0,f.jsx)(`nav`,{"aria-label":p?void 0:g,"aria-labelledby":p,...m,className:a.cx(u.default.nav,T[t],...k,o),style:{...O,...s},children:(0,f.jsx)(b.Provider,{value:`bar`,children:(0,f.jsx)(`ul`,{className:u.default.list,children:e})})}),(0,f.jsx)(l.Drawer,{open:_,onOpenChange:v,side:C,size:`sm`,finalFocusRef:w,children:(0,f.jsxs)(l.Drawer.Content,{id:x,children:[(0,f.jsx)(l.Drawer.Header,{children:(0,f.jsx)(l.Drawer.Title,{children:S})}),(0,f.jsx)(l.Drawer.Body,{children:(0,f.jsx)(`nav`,{"aria-label":p?void 0:g,"aria-labelledby":p,children:(0,f.jsx)(b.Provider,{value:`drawer`,children:(0,f.jsx)(`ul`,{className:u.default.drawerList,children:e})})})})]})})]})};D.displayName=`Navbar.Nav`;var O=({className:e,children:t,showIn:n=`both`,ref:r,...i})=>{let o=(0,d.useContext)(b);return n!==`both`&&n!==o?null:(0,f.jsx)(`li`,{...i,ref:o===`drawer`?void 0:r,className:a.cx(u.default.item,o===`drawer`&&u.default.itemDrawer,e),children:(0,f.jsx)(x.Provider,{value:!0,children:t})})};O.displayName=`Navbar.Item`;function k(e){let{as:t,active:n=!1,icon:r,className:i,children:o,onClick:s,"aria-current":c,ref:l,...m}=e,h=(0,d.useContext)(b),g=(0,d.useContext)(x),_=(0,d.useContext)(v),y=t??`a`,S=e=>{s?.(e),h===`drawer`&&_?.setOpen(!1)},C=(0,f.jsxs)(y,{...m,ref:h===`drawer`?void 0:l,"aria-current":n?`page`:c,onClick:S,className:a.cx(u.default.link,h===`drawer`?u.default.linkDrawer:u.default.linkBar,n&&u.default.active,n&&p[_?.activeTone??`accent`],i),children:[r!=null&&(0,f.jsx)(`span`,{className:u.default.linkIcon,"aria-hidden":`true`,children:r}),(0,f.jsx)(`span`,{className:u.default.linkLabel,children:o})]});return g?C:(0,f.jsx)(`li`,{className:a.cx(u.default.item,h===`drawer`&&u.default.itemDrawer),children:C})}k.displayName=`Navbar.Link`;var A=({className:e,children:t,...n})=>(0,f.jsx)(`div`,{...n,className:a.cx(u.default.actions,e),children:t});A.displayName=`Navbar.Actions`;var j=Object.assign(C,{Brand:w,Nav:D,Item:O,Link:k,Actions:A});exports.Navbar=j,exports.NavbarActions=A,exports.NavbarBrand=w,exports.NavbarItem=O,exports.NavbarLink=k,exports.NavbarNav=D;

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

@@ -0,0 +1,245 @@
+import { ComponentPropsWithRef, ElementType, ReactNode } from 'react';
+import { Responsive, Size, Space } from '../../../types/common';
+import { ContainerSize } from '../../layout/Container';
+/**
+ * Visual style of the bar.
+ * - `surface`: the surface color with body text. The default.
+ * - `transparent`: no fill; sits on whatever is behind it (a hero, the page).
+ *   With `elevateOnScroll`, it fills with the surface color once the page scrolls.
+ * - `solid`: a bold primary-blue bar with on-primary text.
+ */
+export type NavbarVariant = "surface" | "transparent" | "solid";
+/** How the bar is positioned. */
+export type NavbarPosition = "static" | "sticky" | "fixed";
+/** Below this breakpoint the nav links collapse into a menu button and drawer. */
+export type NavbarCollapseBreakpoint = "sm" | "md" | "lg";
+/** Edge the mobile menu drawer slides in from. */
+export type NavbarMenuSide = "start" | "end";
+/**
+ * Color of the active link's tinted pill and indicator bar.
+ * - `accent`: the theme's accent (by default a bright shade of the brand; see `Theme accent`).
+ * - `primary`: the brand color, so it follows `Theme brand` (blue, purple, a custom hex, ...).
+ * - `neutral`: gray, for a quieter bar.
+ */
+export type NavbarActiveTone = "accent" | "primary" | "neutral";
+export interface NavbarProps extends ComponentPropsWithRef<"header"> {
+    /** `Navbar.Brand`, `Navbar.Nav`, and `Navbar.Actions`, in that order. */
+    children?: ReactNode;
+    /** Visual style. See `NavbarVariant`. @default "surface" */
+    variant?: NavbarVariant;
+    /** Bar height, link size, and menu button size. sm 56px, md 64px, lg 80px tall. @default "md" */
+    size?: Size;
+    /** `sticky` stays at the top of its scroll container; `fixed` stays at the top of the viewport (add top padding to the page); `static` scrolls away. @default "sticky" */
+    position?: NavbarPosition;
+    /**
+     * Keeps focused and scrolled-to content clear of a `sticky` or `fixed`
+     * bar (WCAG 2.4.11): while mounted, sets `scroll-padding-top` on the bar's
+     * scroll container to the bar's height, and restores it on unmount. Set
+     * `false` to manage it yourself, e.g. `html { scroll-padding-top:
+     * var(--header-height) }` (the md bar's height). Inside the bar,
+     * `--navbar-height` holds its height. @default true
+     */
+    reserveScrollPadding?: boolean;
+    /** Draws a hairline under the bar. @default false */
+    bordered?: boolean;
+    /** Always shows a soft shadow under the bar. @default false */
+    elevated?: boolean;
+    /**
+     * Shows the soft shadow only once the window has scrolled (a passive,
+     * frame-throttled listener). A `transparent` bar also fills with the
+     * surface color so links stay readable over content. @default false
+     */
+    elevateOnScroll?: boolean;
+    /**
+     * Centers the content in a max-width `Container` with responsive gutters.
+     * When `false`, the content spans the full width (gutters are kept). To
+     * compose your own layout instead, set `contained={false}`. @default true
+     */
+    contained?: boolean;
+    /** Max width of the content when `contained`. @default "xl" */
+    maxWidth?: ContainerSize;
+    /**
+     * Below this breakpoint (sm 640px, md 768px, lg 1024px), `Navbar.Nav`
+     * is hidden and a menu button opens the links in a drawer instead.
+     * @default "md"
+     */
+    collapseBelow?: NavbarCollapseBreakpoint;
+    /** Controlled open state of the mobile menu. */
+    open?: boolean;
+    /** Initial open state of the mobile menu when uncontrolled. @default false */
+    defaultOpen?: boolean;
+    /** Called with the next open state whenever the mobile menu opens or closes. */
+    onOpenChange?: (open: boolean) => void;
+    /** Accessible name of the menu button. Localize it here. @default "Open menu" */
+    menuLabel?: string;
+    /** Title of the mobile menu drawer (it names the dialog). @default "Menu" */
+    menuTitle?: ReactNode;
+    /** Edge the mobile menu slides in from. @default "end" */
+    menuSide?: NavbarMenuSide;
+    /**
+     * Color of the active link's pill and indicator bar, in the bar and the
+     * mobile menu: `accent` (the theme's accent), `primary` (the brand color), or
+     * `neutral`. The `solid` variant always marks the active link with the
+     * on-primary color. @default "accent"
+     */
+    activeTone?: NavbarActiveTone;
+}
+interface NavbarBrandOwnProps<C extends ElementType> {
+    /**
+     * Component or element to render. Defaults to `a` when `href` is set,
+     * otherwise `div`. Pass a router link (e.g. React Router or Next.js `Link`)
+     * and its props (such as `to`) are accepted; it must forward `className`
+     * and ARIA props to its `<a>`.
+     */
+    as?: C;
+    /** Logo and/or product name. A logo-only brand link needs an `aria-label` (e.g. "Acme home"). */
+    children?: ReactNode;
+}
+/** Props for `Navbar.Brand`, typed for the component chosen with `as`. */
+export type NavbarBrandProps<C extends ElementType = "a"> = NavbarBrandOwnProps<C> & Omit<ComponentPropsWithRef<C>, keyof NavbarBrandOwnProps<C>>;
+/** The logo or product name at the start of the bar, usually a link home. */
+declare function NavbarBrand<C extends ElementType = "a">(props: NavbarBrandProps<C>): import("react").JSX.Element;
+declare namespace NavbarBrand {
+    var displayName: string;
+}
+/** Where the inline links sit in the space between the brand and the actions. */
+export type NavbarNavAlign = "start" | "center" | "end";
+export interface NavbarNavProps extends ComponentPropsWithRef<"nav"> {
+    /** `Navbar.Link`s (each is wrapped in an `<li>` for you) and/or `Navbar.Item`s. */
+    children?: ReactNode;
+    /**
+     * Where the links sit in the bar, between the brand and the actions:
+     * `start` (next to the brand; left in left-to-right layouts), `center`,
+     * or `end` (next to the actions; right in left-to-right layouts). Logical,
+     * so it flips in right-to-left layouts. The mobile drawer always lists
+     * them vertically. @default "start"
+     */
+    align?: NavbarNavAlign;
+    /**
+     * Space between the links in the bar, as a spacing step (`4` is
+     * `--space-4`, 16px). Accepts one value or one per breakpoint, e.g.
+     * `{ base: 2, xl: 6 }`. The mobile drawer keeps its own vertical spacing.
+     * @default 1
+     */
+    gap?: Responsive<Space>;
+    /** Names the navigation landmark. Give each `<nav>` on a page a distinct name. @default "Main" */
+    "aria-label"?: string;
+}
+/**
+ * The primary links: a `<nav>` landmark around a `<ul>`. Above the
+ * `collapseBelow` breakpoint they sit in the bar; below it they are hidden
+ * (`display: none`) and the same links render vertically in a drawer that the
+ * menu button opens. Only one copy is ever exposed to assistive technology.
+ *
+ * Other props go on the inline `<nav>` only. The drawer copy gets the same
+ * `aria-label` / `aria-labelledby`.
+ */
+declare const NavbarNav: {
+    ({ children, align, gap, className, style, "aria-label": ariaLabelProp, "aria-labelledby": ariaLabelledBy, ...rest }: NavbarNavProps): import("react").JSX.Element;
+    displayName: string;
+};
+/** Where a `Navbar.Item` appears: in the bar, in the mobile drawer, or both. */
+export type NavbarItemShowIn = "both" | "bar" | "drawer";
+export interface NavbarItemProps extends ComponentPropsWithRef<"li"> {
+    /** A `Navbar.Link`, or any other control (e.g. a `Button`) that belongs in the list. */
+    children?: ReactNode;
+    /**
+     * Where the item appears. `Navbar.Nav` renders its children twice (in the
+     * bar and in the drawer), so a stateful child (a Menu, a toggle) is
+     * mounted twice and its drawer copy resets each time the drawer opens.
+     * Show such an item in one place only, or put it in `Navbar.Actions`.
+     * @default "both"
+     */
+    showIn?: NavbarItemShowIn;
+}
+/**
+ * A list item in `Navbar.Nav`. `Navbar.Link` adds its own `<li>`, so you
+ * only need this to wrap something else, to put props on the `<li>`, or to
+ * show an item only in the bar or only in the drawer (`showIn`). A `ref`
+ * attaches to the bar's copy.
+ */
+declare const NavbarItem: {
+    ({ className, children, showIn, ref, ...rest }: NavbarItemProps): import("react").JSX.Element | null;
+    displayName: string;
+};
+interface NavbarLinkOwnProps<C extends ElementType> {
+    /**
+     * Component or element to render. Defaults to `a`. Pass a router link
+     * (e.g. React Router or Next.js `Link`) and its props (such as `to`) are
+     * accepted and typed. It must forward `className`, `onClick`, and ARIA
+     * props to its `<a>`.
+     */
+    as?: C;
+    /**
+     * Marks the link as the current page: sets `aria-current="page"` and shows
+     * a filled pill with an indicator bar, so the state never relies on color
+     * alone. @default false
+     */
+    active?: boolean;
+    /** Decorative icon before the label. Hidden from assistive technology. */
+    icon?: ReactNode;
+    /** The visible label. */
+    children?: ReactNode;
+}
+/** Props for `Navbar.Link`, typed for the component chosen with `as`. */
+export type NavbarLinkProps<C extends ElementType = "a"> = NavbarLinkOwnProps<C> & Omit<ComponentPropsWithRef<C>, keyof NavbarLinkOwnProps<C>>;
+/**
+ * A primary navigation link. Wraps itself in an `<li>` unless it's already
+ * inside `Navbar.Item`. In the mobile drawer, clicking it closes the drawer
+ * (even if a router prevents the default navigation).
+ *
+ * It renders once in the bar and once in the drawer (only one is ever
+ * exposed), so don't give it an `id`. A `ref` attaches to the bar's copy.
+ */
+declare function NavbarLink<C extends ElementType = "a">(props: NavbarLinkProps<C>): import("react").JSX.Element;
+declare namespace NavbarLink {
+    var displayName: string;
+}
+export interface NavbarActionsProps extends ComponentPropsWithRef<"div"> {
+    /** Buttons, an avatar, a theme toggle, a search field. Stays visible at every width, so keep it short on phones. */
+    children?: ReactNode;
+}
+/** The end of the bar: actions that stay visible at every width, before the menu button. */
+declare const NavbarActions: {
+    ({ className, children, ...rest }: NavbarActionsProps): import("react").JSX.Element;
+    displayName: string;
+};
+/**
+ * The top header of an app or site. Renders a `<header>` (a `banner`
+ * landmark when it isn't inside `main`, `article`, `aside`, `nav`, or
+ * `section`) with brand, navigation, and actions. Below `collapseBelow`
+ * the navigation moves into a modal drawer opened by a menu button.
+ *
+ * ```tsx
+ * <Navbar>
+ *   <Navbar.Brand href="/">Hoops</Navbar.Brand>
+ *   <Navbar.Nav>
+ *     <Navbar.Link href="/" active>Home</Navbar.Link>
+ *     <Navbar.Link href="/teams">Teams</Navbar.Link>
+ *   </Navbar.Nav>
+ *   <Navbar.Actions>
+ *     <Button size="sm">Sign in</Button>
+ *   </Navbar.Actions>
+ * </Navbar>
+ * ```
+ */
+export declare const Navbar: {
+    ({ children, variant, size, position, reserveScrollPadding, bordered, elevated, elevateOnScroll, contained, maxWidth, collapseBelow, open: openProp, defaultOpen, onOpenChange, menuLabel: menuLabelProp, menuTitle: menuTitleProp, menuSide, activeTone, className, ref, ...rest }: NavbarProps): import("react").JSX.Element;
+    displayName: string;
+} & {
+    Brand: typeof NavbarBrand;
+    Nav: {
+        ({ children, align, gap, className, style, "aria-label": ariaLabelProp, "aria-labelledby": ariaLabelledBy, ...rest }: NavbarNavProps): import("react").JSX.Element;
+        displayName: string;
+    };
+    Item: {
+        ({ className, children, showIn, ref, ...rest }: NavbarItemProps): import("react").JSX.Element | null;
+        displayName: string;
+    };
+    Link: typeof NavbarLink;
+    Actions: {
+        ({ className, children, ...rest }: NavbarActionsProps): import("react").JSX.Element;
+        displayName: string;
+    };
+};
+export { NavbarActions, NavbarBrand, NavbarItem, NavbarLink, NavbarNav };

package/dist/components/navigation/Navbar/Navbar.mjs

@@ -0,0 +1,249 @@
+import { breakpoints as e } from "../../../types/common.mjs";
+import { useControllableState as t } from "../../../hooks/useControllableState.mjs";
+import { useMessages as n } from "../../utilities/LocaleProvider/LocaleProvider.mjs";
+import { useMergedRef as r } from "../../../hooks/useMergedRef.mjs";
+import { responsiveClasses as i, responsiveVars as a } from "../../../utils/responsive.mjs";
+import { cx as o } from "../../../utils/cx.mjs";
+import { IconButton as s } from "../../primitives/Button/Button.mjs";
+import { MenuIcon as c } from "../../primitives/Icon/icons.mjs";
+import { Container as l } from "../../layout/Container/Container.mjs";
+import { Drawer as u } from "../../overlays/Drawer/Drawer.mjs";
+import d from "./Navbar.module.css.mjs";
+import { createContext as f, useCallback as p, useContext as m, useEffect as h, useId as g, useLayoutEffect as _, useMemo as v, useRef as y, useState as b } from "react";
+import { Fragment as x, jsx as S, jsxs as C } from "react/jsx-runtime";
+//#region src/components/navigation/Navbar/Navbar.tsx
+var w = {
+	accent: d.activeAccent,
+	primary: d.activePrimary,
+	neutral: d.activeNeutral
+}, T = {
+	surface: d.surface,
+	transparent: d.transparent,
+	solid: d.solid
+}, E = {
+	sm: d.sm,
+	md: d.md,
+	lg: d.lg
+}, D = {
+	static: d.static,
+	sticky: d.sticky,
+	fixed: d.fixed
+}, ee = {
+	sm: d.collapseSm,
+	md: d.collapseMd,
+	lg: d.collapseLg
+}, O = f(null);
+function k(e) {
+	let t = m(O);
+	if (!t) throw Error(`${e} must be used inside <Navbar>.`);
+	return t;
+}
+var A = f("bar"), j = f(!1);
+function te(e) {
+	for (let t = e.parentElement; t && t !== document.body; t = t.parentElement) {
+		let { overflowY: e } = getComputedStyle(t);
+		if (e === "auto" || e === "scroll" || e === "overlay") return t;
+	}
+	return document.documentElement;
+}
+var M = ({ children: i, variant: a = "surface", size: u = "md", position: f = "sticky", reserveScrollPadding: m = !0, bordered: _ = !1, elevated: x = !1, elevateOnScroll: w = !1, contained: k = !0, maxWidth: A = "xl", collapseBelow: j = "md", open: M, defaultOpen: N = !1, onOpenChange: P, menuLabel: F, menuTitle: I, menuSide: L = "end", activeTone: R = "accent", className: z, ref: B, ...V }) => {
+	let H = n(), ne = F ?? H.navbar.openMenu, U = I ?? H.navbar.menu, W = y(null), re = r(W, B);
+	h(() => {
+		let e = W.current;
+		if (!e || f === "static" || !m) return;
+		let t = f === "fixed" ? document.documentElement : te(e), n = t.style.scrollPaddingTop, r = () => {
+			t.style.scrollPaddingTop = `${e.offsetHeight}px`;
+		};
+		r();
+		let i = typeof ResizeObserver > "u" ? null : new ResizeObserver(r);
+		return i?.observe(e), () => {
+			i?.disconnect(), t.style.scrollPaddingTop = n;
+		};
+	}, [f, m]);
+	let [G, K] = t({
+		value: M,
+		defaultValue: N,
+		onChange: P
+	}), q = `${g()}-menu`, J = y(null), [ie, Y] = b(0), [ae, oe] = b(!1), X = p(() => (Y((e) => e + 1), () => Y((e) => e - 1)), []), Z = p((e) => K(e), [K]), Q = y(!1);
+	h(() => {
+		if (!G || typeof window > "u" || !window.matchMedia) return;
+		let t = window.matchMedia(`(min-width: ${e[j]}px)`), n = () => {
+			t.matches && (Q.current = !0, Z(!1));
+		};
+		return n(), t.addEventListener("change", n), () => t.removeEventListener("change", n);
+	}, [
+		G,
+		j,
+		Z
+	]), h(() => {
+		if (G || !Q.current) return;
+		Q.current = !1;
+		let e = document.activeElement;
+		(!e || e === document.body || document.getElementById(q)?.contains(e)) && J.current?.closest("header")?.querySelector("nav a[href], nav button:not([disabled])")?.focus();
+	}, [G, q]), h(() => {
+		if (!w || typeof window > "u") return;
+		let e = 0, t = () => {
+			e = 0, oe(window.scrollY > 0);
+		}, n = () => {
+			e ||= window.requestAnimationFrame(t);
+		};
+		return t(), window.addEventListener("scroll", n, { passive: !0 }), () => {
+			window.removeEventListener("scroll", n), e && window.cancelAnimationFrame(e);
+		};
+	}, [w]);
+	let se = v(() => ({
+		open: G,
+		setOpen: Z,
+		menuId: q,
+		menuTitle: U,
+		menuSide: L,
+		toggleRef: J,
+		registerNav: X,
+		activeTone: R
+	}), [
+		G,
+		Z,
+		q,
+		U,
+		L,
+		X,
+		R
+	]), $ = w && ae, ce = ie > 0;
+	return /* @__PURE__ */ S(O.Provider, {
+		value: se,
+		children: /* @__PURE__ */ S("header", {
+			"data-variant": a,
+			...V,
+			ref: re,
+			className: o(d.root, T[a], E[u], D[f], ee[j], _ && d.bordered, (x || $) && d.elevated, $ && d.scrolled, z),
+			children: /* @__PURE__ */ C(l, {
+				size: A,
+				fluid: !k,
+				gutter: "responsive",
+				className: d.inner,
+				children: [i, ce && /* @__PURE__ */ S(s, {
+					ref: J,
+					"aria-label": ne,
+					"aria-haspopup": "dialog",
+					"aria-expanded": G,
+					"aria-controls": G ? q : void 0,
+					variant: a === "solid" ? "solid" : "ghost",
+					tone: a === "solid" ? "primary" : "neutral",
+					size: u,
+					className: d.toggle,
+					onClick: () => Z(!G),
+					children: /* @__PURE__ */ S(c, {})
+				})]
+			})
+		})
+	});
+};
+M.displayName = "Navbar";
+function N(e) {
+	let { as: t, className: n, children: r, ...i } = e, a = t !== void 0 || i.href !== void 0;
+	return /* @__PURE__ */ S(t ?? (a ? "a" : "div"), {
+		...i,
+		className: o(d.brand, a && d.brandLink, n),
+		children: r
+	});
+}
+N.displayName = "Navbar.Brand";
+var P = {
+	start: d.alignStart,
+	center: d.alignCenter,
+	end: d.alignEnd
+}, F = i(d, "navGap"), I = ({ children: e, align: t = "start", gap: r, className: i, style: s, "aria-label": c, "aria-labelledby": l, ...f }) => {
+	let p = n(), m = c ?? p.navbar.nav, { open: h, setOpen: g, menuId: v, menuTitle: y, menuSide: b, toggleRef: w, registerNav: T } = k("Navbar.Nav");
+	_(() => T(), [T]);
+	let E = {}, D = [];
+	return a("navbar-nav-gap", r, (e) => `var(--space-${e})`, F, E, D), /* @__PURE__ */ C(x, { children: [/* @__PURE__ */ S("nav", {
+		"aria-label": l ? void 0 : m,
+		"aria-labelledby": l,
+		...f,
+		className: o(d.nav, P[t], ...D, i),
+		style: {
+			...E,
+			...s
+		},
+		children: /* @__PURE__ */ S(A.Provider, {
+			value: "bar",
+			children: /* @__PURE__ */ S("ul", {
+				className: d.list,
+				children: e
+			})
+		})
+	}), /* @__PURE__ */ S(u, {
+		open: h,
+		onOpenChange: g,
+		side: b,
+		size: "sm",
+		finalFocusRef: w,
+		children: /* @__PURE__ */ C(u.Content, {
+			id: v,
+			children: [/* @__PURE__ */ S(u.Header, { children: /* @__PURE__ */ S(u.Title, { children: y }) }), /* @__PURE__ */ S(u.Body, { children: /* @__PURE__ */ S("nav", {
+				"aria-label": l ? void 0 : m,
+				"aria-labelledby": l,
+				children: /* @__PURE__ */ S(A.Provider, {
+					value: "drawer",
+					children: /* @__PURE__ */ S("ul", {
+						className: d.drawerList,
+						children: e
+					})
+				})
+			}) })]
+		})
+	})] });
+};
+I.displayName = "Navbar.Nav";
+var L = ({ className: e, children: t, showIn: n = "both", ref: r, ...i }) => {
+	let a = m(A);
+	return n !== "both" && n !== a ? null : /* @__PURE__ */ S("li", {
+		...i,
+		ref: a === "drawer" ? void 0 : r,
+		className: o(d.item, a === "drawer" && d.itemDrawer, e),
+		children: /* @__PURE__ */ S(j.Provider, {
+			value: !0,
+			children: t
+		})
+	});
+};
+L.displayName = "Navbar.Item";
+function R(e) {
+	let { as: t, active: n = !1, icon: r, className: i, children: a, onClick: s, "aria-current": c, ref: l, ...u } = e, f = m(A), p = m(j), h = m(O), g = t ?? "a", _ = (e) => {
+		s?.(e), f === "drawer" && h?.setOpen(!1);
+	}, v = /* @__PURE__ */ C(g, {
+		...u,
+		ref: f === "drawer" ? void 0 : l,
+		"aria-current": n ? "page" : c,
+		onClick: _,
+		className: o(d.link, f === "drawer" ? d.linkDrawer : d.linkBar, n && d.active, n && w[h?.activeTone ?? "accent"], i),
+		children: [r != null && /* @__PURE__ */ S("span", {
+			className: d.linkIcon,
+			"aria-hidden": "true",
+			children: r
+		}), /* @__PURE__ */ S("span", {
+			className: d.linkLabel,
+			children: a
+		})]
+	});
+	return p ? v : /* @__PURE__ */ S("li", {
+		className: o(d.item, f === "drawer" && d.itemDrawer),
+		children: v
+	});
+}
+R.displayName = "Navbar.Link";
+var z = ({ className: e, children: t, ...n }) => /* @__PURE__ */ S("div", {
+	...n,
+	className: o(d.actions, e),
+	children: t
+});
+z.displayName = "Navbar.Actions";
+var B = Object.assign(M, {
+	Brand: N,
+	Nav: I,
+	Item: L,
+	Link: R,
+	Actions: z
+});
+//#endregion
+export { B as Navbar, z as NavbarActions, N as NavbarBrand, L as NavbarItem, R as NavbarLink, I as NavbarNav };

package/dist/components/navigation/Navbar/Navbar.module.css.cjs.js

@@ -0,0 +1 @@
+var e=`_root_1oq16_39`,t=`_sm_1oq16_75`,n=`_md_1oq16_93`,r=`_lg_1oq16_109`,i=`_sticky_1oq16_137`,a=`_fixed_1oq16_149`,o=`_surface_1oq16_165`,s=`_transparent_1oq16_175`,c=`_scrolled_1oq16_187`,l=`_solid_1oq16_203`,u=`_bordered_1oq16_219`,d=`_elevated_1oq16_235`,f=`_inner_1oq16_251`,p=`_brand_1oq16_269`,m=`_brandLink_1oq16_311`,h=`_nav_1oq16_347`,g=`_list_1oq16_359`,_=`_item_1oq16_383`,v=`_alignStart_1oq16_397`,y=`_alignCenter_1oq16_403`,b=`_alignEnd_1oq16_409`,x=`_navGapBase_1oq16_425`,S=`_navGapSm_1oq16_433`,C=`_navGapMd_1oq16_443`,w=`_navGapLg_1oq16_453`,T=`_navGapXl_1oq16_463`,E=`_navGap2xl_1oq16_473`,D=`_actions_1oq16_485`,O=`_toggle_1oq16_507`,k=`_collapseSm_1oq16_527`,A=`_collapseMd_1oq16_545`,j=`_collapseLg_1oq16_563`,M=`_link_1oq16_587`,N=`_linkIcon_1oq16_657`,P=`_linkLabel_1oq16_683`,F=`_activeAccent_1oq16_719`,I=`_activePrimary_1oq16_731`,L=`_activeNeutral_1oq16_743`,R=`_active_1oq16_719`,z=`_linkBar_1oq16_797`,B=`_drawerList_1oq16_859`,V=`_itemDrawer_1oq16_877`,H=`_linkDrawer_1oq16_885`,U={root:e,sm:t,md:n,lg:r,static:`_static_1oq16_129`,sticky:i,fixed:a,surface:o,transparent:s,scrolled:c,solid:l,bordered:u,elevated:d,inner:f,brand:p,brandLink:m,nav:h,list:g,item:_,alignStart:v,alignCenter:y,alignEnd:b,navGapBase:x,navGapSm:S,navGapMd:C,navGapLg:w,navGapXl:T,navGap2xl:E,actions:D,toggle:O,collapseSm:k,collapseMd:A,collapseLg:j,link:M,linkIcon:N,linkLabel:P,activeAccent:F,activePrimary:I,activeNeutral:L,active:R,linkBar:z,drawerList:B,itemDrawer:V,linkDrawer:H};exports.actions=D,exports.active=R,exports.activeAccent=F,exports.activeNeutral=L,exports.activePrimary=I,exports.alignCenter=y,exports.alignEnd=b,exports.alignStart=v,exports.bordered=u,exports.brand=p,exports.brandLink=m,exports.collapseLg=j,exports.collapseMd=A,exports.collapseSm=k,exports.default=U,exports.drawerList=B,exports.elevated=d,exports.fixed=a,exports.inner=f,exports.item=_,exports.itemDrawer=V,exports.lg=r,exports.link=M,exports.linkBar=z,exports.linkDrawer=H,exports.linkIcon=N,exports.linkLabel=P,exports.list=g,exports.md=n,exports.nav=h,exports.navGap2xl=E,exports.navGapBase=x,exports.navGapLg=w,exports.navGapMd=C,exports.navGapSm=S,exports.navGapXl=T,exports.root=e,exports.scrolled=c,exports.sm=t,exports.solid=l,exports.sticky=i,exports.surface=o,exports.toggle=O,exports.transparent=s;

package/dist/components/navigation/Navbar/Navbar.module.css.mjs

@@ -0,0 +1,49 @@
+//#region src/components/navigation/Navbar/Navbar.module.css
+var e = "_root_1oq16_39", t = "_sm_1oq16_75", n = "_md_1oq16_93", r = "_lg_1oq16_109", i = "_sticky_1oq16_137", a = "_fixed_1oq16_149", o = "_surface_1oq16_165", s = "_transparent_1oq16_175", c = "_scrolled_1oq16_187", l = "_solid_1oq16_203", u = "_bordered_1oq16_219", d = "_elevated_1oq16_235", f = "_inner_1oq16_251", p = "_brand_1oq16_269", m = "_brandLink_1oq16_311", h = "_nav_1oq16_347", g = "_list_1oq16_359", _ = "_item_1oq16_383", v = "_alignStart_1oq16_397", y = "_alignCenter_1oq16_403", b = "_alignEnd_1oq16_409", x = "_navGapBase_1oq16_425", S = "_navGapSm_1oq16_433", C = "_navGapMd_1oq16_443", w = "_navGapLg_1oq16_453", T = "_navGapXl_1oq16_463", E = "_navGap2xl_1oq16_473", D = "_actions_1oq16_485", O = "_toggle_1oq16_507", k = "_collapseSm_1oq16_527", A = "_collapseMd_1oq16_545", j = "_collapseLg_1oq16_563", M = "_link_1oq16_587", N = "_linkIcon_1oq16_657", P = "_linkLabel_1oq16_683", F = "_activeAccent_1oq16_719", I = "_activePrimary_1oq16_731", L = "_activeNeutral_1oq16_743", R = "_active_1oq16_719", z = "_linkBar_1oq16_797", B = "_drawerList_1oq16_859", V = "_itemDrawer_1oq16_877", H = "_linkDrawer_1oq16_885", U = {
+	root: e,
+	sm: t,
+	md: n,
+	lg: r,
+	static: "_static_1oq16_129",
+	sticky: i,
+	fixed: a,
+	surface: o,
+	transparent: s,
+	scrolled: c,
+	solid: l,
+	bordered: u,
+	elevated: d,
+	inner: f,
+	brand: p,
+	brandLink: m,
+	nav: h,
+	list: g,
+	item: _,
+	alignStart: v,
+	alignCenter: y,
+	alignEnd: b,
+	navGapBase: x,
+	navGapSm: S,
+	navGapMd: C,
+	navGapLg: w,
+	navGapXl: T,
+	navGap2xl: E,
+	actions: D,
+	toggle: O,
+	collapseSm: k,
+	collapseMd: A,
+	collapseLg: j,
+	link: M,
+	linkIcon: N,
+	linkLabel: P,
+	activeAccent: F,
+	activePrimary: I,
+	activeNeutral: L,
+	active: R,
+	linkBar: z,
+	drawerList: B,
+	itemDrawer: V,
+	linkDrawer: H
+};
+//#endregion
+export { D as actions, R as active, F as activeAccent, L as activeNeutral, I as activePrimary, y as alignCenter, b as alignEnd, v as alignStart, u as bordered, p as brand, m as brandLink, j as collapseLg, A as collapseMd, k as collapseSm, U as default, B as drawerList, d as elevated, a as fixed, f as inner, _ as item, V as itemDrawer, r as lg, M as link, z as linkBar, H as linkDrawer, N as linkIcon, P as linkLabel, g as list, n as md, h as nav, E as navGap2xl, x as navGapBase, w as navGapLg, C as navGapMd, S as navGapSm, T as navGapXl, e as root, c as scrolled, t as sm, l as solid, i as sticky, o as surface, O as toggle, s as transparent };

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

@@ -0,0 +1 @@
+export * from './Navbar';

package/dist/components/navigation/Pagination/Pagination.cjs.js

@@ -0,0 +1 @@
+const e=require("../../../hooks/useControllableState.cjs.js"),t=require("../../utilities/LocaleProvider/LocaleProvider.cjs.js"),n=require("../../../utils/cx.cjs.js"),r=require("../../primitives/Button/Button.cjs.js"),i=require("../../primitives/Icon/icons.cjs.js"),a=require("./Pagination.module.css.cjs.js");let o=require("react"),s=require("react/jsx-runtime");var c=(e,t)=>e>t?[]:Array.from({length:t-e+1},(t,n)=>e+n),l=(e,t)=>Math.max(0,Math.floor(Number.isFinite(e)?e:t));function u({page:e,pageCount:t,siblingCount:n=1,boundaryCount:r=1}){let i=l(t,0);if(i===0)return[];let a=l(n,1),o=l(r,1),s=Math.min(Math.max(1,Math.floor(e)||1),i);if(i<=2*o+2*a+3)return c(1,i);let u=c(1,Math.min(o,i)),d=c(Math.max(i-o+1,o+1),i),f=Math.max(Math.min(s-a,i-o-a*2-1),o+2),p=Math.min(Math.max(s+a,o+a*2+2),i-o-1),m=[...u];return f>o+2?m.push(`ellipsis-start`):o+1<i-o&&m.push(o+1),m.push(...c(f,p)),p<i-o-1?m.push(`ellipsis-end`):i-o>o&&m.push(i-o),m.push(...d),m}var d={sm:a.default.sm,md:a.default.md,lg:a.default.lg},f=e=>(t,n,r)=>{switch(t){case`previous`:return e.previous;case`next`:return e.next;case`first`:return e.first;case`last`:return e.last;default:return r?e.currentPage(n):e.goToPage(n)}},p=e=>(t,n)=>(0,s.jsx)(s.Fragment,{children:e.split(/(\{page\}|\{total\})/).map((e,r)=>e===`{page}`?(0,s.jsx)(`strong`,{className:a.default.statusNumber,children:t},r):e===`{total}`?(0,s.jsx)(`strong`,{className:a.default.statusNumber,children:n},r):e)}),m=({pageCount:c,page:m,defaultPage:h=1,onPageChange:g,siblingCount:_=1,boundaryCount:v=1,showFirstLast:y=!1,compact:b=!1,size:x=`md`,variant:S=`ghost`,disabled:C=!1,getHref:w,onLinkClick:T,getItemAriaLabel:E,formatStatus:D,className:O,"aria-label":k,"aria-labelledby":A,...j})=>{let M=t.useMessages(),N=E??f(M.pagination),P=D??p(M.pagination.status),F=l(c,0),[I,L]=e.useControllableState({value:m,defaultValue:h,onChange:g}),R=F===0?1:Math.min(Math.max(1,Math.floor(I)||1),F),z=(0,o.useRef)(null),B=(0,o.useRef)(null);(0,o.useEffect)(()=>{let e=B.current;if(!e)return;B.current=null;let t=z.current;(t?.querySelector(`[aria-current="page"]`)??t?.querySelector(`[data-pagination-item="${e}"]:not([disabled])`)??t?.querySelector(`button:not([disabled]), a[href]`))?.focus()},[R]);let V=R<=1,H=R>=F,U=(e,t)=>{let n=Math.min(Math.max(1,e),Math.max(1,F));n!==R&&(t&&(n===1||n===F)&&(B.current=n===1?`next`:`previous`,requestAnimationFrame(()=>{B.current=null})),L(n))},W=(e,t,n=!1)=>{let r=Math.min(Math.max(1,e),Math.max(1,F));return{...w&&!n&&F>0?{href:w(r)}:{},onClick:e=>{if(!w){U(r,t);return}e.metaKey||e.ctrlKey||e.shiftKey||e.altKey||(T?.(r,e),e.defaultPrevented&&U(r,t))}}},G=(e,t,n,i)=>(0,s.jsx)(`li`,{className:a.default.item,children:(0,s.jsx)(r.IconButton,{...W(t,!0,C||n),variant:S,tone:`neutral`,size:x,disabled:C||n,"aria-label":N(e,t,!1),"data-pagination-item":e,children:i})},e),K=[y&&G(`first`,1,V,(0,s.jsx)(i.ChevronsLeftIcon,{})),G(`previous`,R-1,V,(0,s.jsx)(i.ChevronLeftIcon,{}))],q=[G(`next`,R+1,H,(0,s.jsx)(i.ChevronRightIcon,{})),y&&G(`last`,F,H,(0,s.jsx)(i.ChevronsRightIcon,{}))],J;return J=b?(0,s.jsx)(`li`,{className:n.cx(a.default.item,a.default.statusItem),children:(0,s.jsx)(`span`,{className:a.default.status,"aria-live":`polite`,"aria-atomic":`true`,"aria-disabled":C||void 0,children:F===0?P(0,0):P(R,F)})},`status`):u({page:R,pageCount:F,siblingCount:_,boundaryCount:v}).map(e=>{if(typeof e!=`number`)return(0,s.jsx)(`li`,{className:n.cx(a.default.item,a.default.ellipsis),"aria-hidden":`true`,children:`…`},e);let t=e===R;return(0,s.jsx)(`li`,{className:n.cx(a.default.item,t&&a.default.current),children:(0,s.jsx)(r.Button,{...W(e,!1,C),variant:t?`solid`:S,tone:t?`primary`:`neutral`,size:x,compact:!0,disabled:C,"aria-current":t?`page`:void 0,"aria-label":N(`page`,e,t),"data-pagination-item":`page`,children:e})},`page-${e}`)}),(0,s.jsx)(`nav`,{...j,"aria-label":A?k:k??M.pagination.nav,"aria-labelledby":A,className:n.cx(a.default.root,d[x],b&&a.default.compact,C&&a.default.disabled,O),children:(0,s.jsxs)(`ul`,{ref:z,className:a.default.list,children:[K,J,q]})})};exports.Pagination=m,exports.getPaginationRange=u;