@krizaka/ui 2.2.0 → 2.3.0

package/dist/nav-bar.d.ts

@@ -0,0 +1,178 @@
+import * as tailwind_variants from 'tailwind-variants';
+import { NavigationMenu } from 'radix-ui';
+import * as React from 'react';
+
+declare const navBar: tailwind_variants.TVReturnType<{
+    floating: {
+        true: {
+            root: string;
+        };
+        false: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    brand: string;
+    items: string;
+    list: string;
+    item: string;
+    chevron: string;
+    viewport: string;
+    panel: string;
+    menuLink: string;
+    menuIcon: string;
+    menuTitle: string;
+    menuText: string;
+    actions: string;
+    toggle: string;
+    mobile: string;
+    mobileLink: string;
+}, undefined, {
+    floating: {
+        true: {
+            root: string;
+        };
+        false: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    brand: string;
+    items: string;
+    list: string;
+    item: string;
+    chevron: string;
+    viewport: string;
+    panel: string;
+    menuLink: string;
+    menuIcon: string;
+    menuTitle: string;
+    menuText: string;
+    actions: string;
+    toggle: string;
+    mobile: string;
+    mobileLink: string;
+}, tailwind_variants.TVReturnTypeLike<{
+    floating: {
+        true: {
+            root: string;
+        };
+        false: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    brand: string;
+    items: string;
+    list: string;
+    item: string;
+    chevron: string;
+    viewport: string;
+    panel: string;
+    menuLink: string;
+    menuIcon: string;
+    menuTitle: string;
+    menuText: string;
+    actions: string;
+    toggle: string;
+    mobile: string;
+    mobileLink: string;
+}>>;
+type NavBarRootProps = React.ComponentProps<"header"> & {
+    /** The accessible name of the navigation (“Main”) — passed translated. */
+    label: string;
+    /**
+     * Pixels of scroll after which the bar tightens (denser, lower, lifted). `false`: never.
+     * @default 24
+     */
+    compactAfter?: number | false;
+    /**
+     * A floating pill (the Krizaka bar) or a full-width bar with a hairline under it.
+     * @default true
+     */
+    floating?: boolean;
+};
+/** The bar. Place it in a `sticky top-3` (floating) or `sticky top-0` wrapper — or let it scroll. */
+declare function NavBarRoot({ label, compactAfter, floating, className, children, ...props }: NavBarRootProps): React.JSX.Element;
+type NavBarBrandProps = React.ComponentProps<"a"> & {
+    /** Renders your link (a router `<Link>`) with the brand's look. */
+    asChild?: boolean;
+};
+/** The brand: a mark and a name, linking home. */
+declare function NavBarBrand({ asChild, className, ...props }: NavBarBrandProps): React.JSX.Element;
+/** The desktop navigation: links and menus, with the light that glides between them. Hidden below `md` (see `NavBar.Mobile`). */
+declare function NavBarItems({ className, children, ...props }: Omit<React.ComponentProps<typeof NavigationMenu.Root>, "orientation">): React.JSX.Element;
+type NavBarLinkProps = Omit<React.ComponentProps<typeof NavigationMenu.Link>, "active"> & {
+    /** The current page: `aria-current="page"`, and the light rests on it. */
+    active?: boolean;
+};
+/** A link of the bar. `asChild` renders your router's `<Link>`. */
+declare function NavBarLink({ active, className, ...props }: NavBarLinkProps): React.JSX.Element;
+type NavBarMenuProps = Omit<React.ComponentProps<typeof NavigationMenu.Item>, "children"> & {
+    /** The trigger's words (“Products”) — passed translated. */
+    label: string;
+    /** The current page is inside this menu: the light rests on its trigger. */
+    active?: boolean;
+    /** The menu's links (`NavBar.MenuLink`), laid out in a panel; `columns` sets the grid. */
+    children: React.ReactNode;
+    /**
+     * Columns of the panel.
+     * @default 1
+     */
+    columns?: 1 | 2;
+};
+/** A menu of the bar: its trigger, and its links in a panel that opens under the bar. */
+declare function NavBarMenu({ label, active, columns, children, className, ...props }: NavBarMenuProps): React.JSX.Element;
+type NavBarMenuLinkProps = Omit<React.ComponentProps<typeof NavigationMenu.Link>, "title" | "active"> & {
+    /** The link's name — passed translated. */
+    title: string;
+    /** One line under it — passed translated. */
+    description?: string;
+    /** An icon (a signature icon of `@krizaka/icons`: its node lights up on hover). */
+    icon?: React.ReactNode;
+    /** The current page. */
+    active?: boolean;
+};
+/** A link inside a menu: an icon, a name and a line of text. */
+declare function NavBarMenuLink({ title, description, icon, active, href, className, asChild, children, ...props }: NavBarMenuLinkProps): React.JSX.Element;
+/** The right side: search, theme, language, the call to action. */
+declare function NavBarActions({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+type NavBarMobileProps = React.ComponentProps<"nav"> & {
+    /** The toggle's name when closed (“Open the menu”) — passed translated. */
+    openLabel: string;
+    /** The toggle's name when open (“Close the menu”) — passed translated. */
+    closeLabel: string;
+};
+/**
+ * Below `md`: a toggle, and a panel under the bar with its links (`NavBar.MobileLink`). A disclosure: Escape and a click
+ * on a link close it, the focus returns to the toggle.
+ */
+declare function NavBarMobile({ openLabel, closeLabel, className, children, ...props }: NavBarMobileProps): React.JSX.Element;
+type NavBarMobileLinkProps = React.ComponentProps<"a"> & {
+    /** The current page. */
+    active?: boolean;
+    /** Renders your router's `<Link>`. */
+    asChild?: boolean;
+};
+/** A link of the mobile panel. */
+declare function NavBarMobileLink({ active, asChild, className, ...props }: NavBarMobileLinkProps): React.JSX.Element;
+/**
+ * `NavBar.Root/Brand/Items/Link/Menu/MenuLink/Actions/Mobile/MobileLink` — the Krizaka navigation bar: floating, tightening
+ * on scroll, one light gliding between its items, accessible menus, a mobile panel.
+ */
+declare const NavBar: {
+    Root: typeof NavBarRoot;
+    Brand: typeof NavBarBrand;
+    Items: typeof NavBarItems;
+    Link: typeof NavBarLink;
+    Menu: typeof NavBarMenu;
+    MenuLink: typeof NavBarMenuLink;
+    Actions: typeof NavBarActions;
+    Mobile: typeof NavBarMobile;
+    MobileLink: typeof NavBarMobileLink;
+};
+
+export { NavBar, NavBarActions, NavBarBrand, type NavBarBrandProps, NavBarItems, NavBarLink, type NavBarLinkProps, NavBarMenu, NavBarMenuLink, type NavBarMenuLinkProps, type NavBarMenuProps, NavBarMobile, NavBarMobileLink, type NavBarMobileLinkProps, type NavBarMobileProps, NavBarRoot, type NavBarRootProps, navBar };

package/dist/nav-bar.js

@@ -0,0 +1,157 @@
+"use client";
+import {
+  useSlidingIndicator
+} from "./chunk-VDR2EP6K.js";
+import {
+  cn
+} from "./chunk-5AXLA4LK.js";
+
+// src/nav-bar/nav-bar.tsx
+import { NavigationMenu as Nav, Slot } from "radix-ui";
+import * as React from "react";
+import { tv } from "tailwind-variants";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var navBar = tv({
+  slots: {
+    root: "group/nav relative z-40 mx-auto flex h-14 w-full items-center gap-2 border-border-subtle bg-surface-1/75 backdrop-blur-xl backdrop-saturate-150 transition-[height,background-color,border-color,box-shadow] duration-300 motion-reduce:transition-none data-compact:h-12 data-compact:border-border-default data-compact:bg-surface-1/90 data-compact:shadow-lg",
+    brand: "mr-2 inline-flex shrink-0 items-center gap-2 font-display text-[15px] font-bold tracking-tight text-fg no-underline rounded-md focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring",
+    items: "relative hidden md:block",
+    list: "group/list relative isolate flex items-center gap-0.5 before:absolute before:left-0 before:top-0 before:-z-10 before:h-(--kz-ind-h) before:w-(--kz-ind-w) before:translate-x-(--kz-ind-x) before:translate-y-(--kz-ind-y) before:rounded-full before:bg-surface-3 before:opacity-0 before:transition-[translate,width,opacity] before:duration-300 motion-reduce:before:transition-none data-[indicator=on]:before:opacity-100",
+    item: "inline-flex h-9 select-none items-center gap-1 rounded-full px-3.5 text-sm font-medium text-fg-secondary no-underline transition-colors hover:text-fg data-active:text-fg data-[state=open]:text-fg focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring group-not-data-[indicator=on]/list:data-active:bg-surface-3",
+    chevron: "h-3.5 w-3.5 transition-transform duration-300 group-data-[state=open]/trigger:rotate-180 motion-reduce:transition-none",
+    viewport: "kz-pop absolute left-0 top-full mt-2 h-(--radix-navigation-menu-viewport-height) w-(--radix-navigation-menu-viewport-width) origin-top-left overflow-hidden rounded-2xl border border-border-default bg-surface-1 shadow-lg transition-[width,height] duration-300 motion-reduce:transition-none",
+    panel: "grid w-max max-w-[min(92vw,30rem)] gap-1 p-2",
+    menuLink: "group/link flex items-start gap-3 rounded-xl p-3 text-left no-underline outline-hidden transition-colors hover:bg-surface-2 focus-visible:bg-surface-2 focus-visible:ring-2 focus-visible:ring-ring data-active:bg-accent-soft",
+    menuIcon: "mt-0.5 flex h-9 w-9 shrink-0 items-center justify-center rounded-lg border border-border-default bg-surface-2 text-fg-accent transition-[transform,border-color] duration-300 group-hover/link:-translate-y-0.5 group-hover/link:border-accent [&>svg]:h-4.5 [&>svg]:w-4.5 motion-reduce:transform-none",
+    menuTitle: "block text-sm font-semibold text-fg",
+    menuText: "mt-0.5 block text-xs leading-relaxed text-fg-secondary",
+    actions: "ml-auto flex items-center gap-2",
+    toggle: "inline-flex h-9 w-9 items-center justify-center rounded-full border border-border-subtle bg-surface-2/60 text-fg md:hidden focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring",
+    mobile: "kz-pop absolute inset-x-0 top-full mt-2 grid gap-1 rounded-2xl border border-border-default bg-surface-1 p-2 shadow-lg md:hidden",
+    mobileLink: "flex items-center justify-between rounded-xl px-3 py-3 text-[15px] font-medium text-fg no-underline hover:bg-surface-2 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring aria-[current=page]:text-fg-accent"
+  },
+  variants: {
+    floating: {
+      true: { root: "max-w-5xl rounded-full border pl-5 pr-2 data-compact:max-w-4xl" },
+      false: { root: "border-b px-4 md:px-6" }
+    }
+  },
+  defaultVariants: { floating: true }
+});
+var s = navBar();
+var Context = React.createContext(null);
+var useNavBar = () => {
+  const ctx = React.useContext(Context);
+  if (!ctx) throw new Error("NavBar parts must be inside <NavBar.Root>.");
+  return ctx;
+};
+function NavBarRoot({ label, compactAfter = 24, floating = true, className, children, ...props }) {
+  const [compact, setCompact] = React.useState(false);
+  const [open, setOpen] = React.useState(false);
+  const panelId = React.useId();
+  React.useEffect(() => {
+    if (compactAfter === false) return;
+    const onScroll = () => setCompact(window.scrollY > compactAfter);
+    onScroll();
+    window.addEventListener("scroll", onScroll, { passive: true });
+    return () => window.removeEventListener("scroll", onScroll);
+  }, [compactAfter]);
+  const ctx = React.useMemo(() => ({ label, open, setOpen, panelId }), [label, open, panelId]);
+  return /* @__PURE__ */ jsx(Context.Provider, { value: ctx, children: /* @__PURE__ */ jsx("header", { "data-compact": compact ? "" : void 0, "data-floating": floating, className: navBar({ floating }).root({ className }), ...props, children }) });
+}
+function NavBarBrand({ asChild, className, ...props }) {
+  const Comp = asChild ? Slot.Root : "a";
+  return /* @__PURE__ */ jsx(Comp, { className: s.brand({ className }), ...props });
+}
+function NavBarItems({ className, children, ...props }) {
+  const { label } = useNavBar();
+  const { ref, handlers } = useSlidingIndicator({ item: "[data-nav-item]", active: "[data-nav-item][data-active]", follow: true });
+  return /* @__PURE__ */ jsxs(Nav.Root, { "aria-label": label, className: s.items({ className }), delayDuration: 80, ...props, children: [
+    /* @__PURE__ */ jsx(Nav.List, { ref, className: s.list(), ...handlers, children }),
+    /* @__PURE__ */ jsx(Nav.Viewport, { className: s.viewport() })
+  ] });
+}
+function NavBarLink({ active, className, ...props }) {
+  return /* @__PURE__ */ jsx(Nav.Item, { children: /* @__PURE__ */ jsx(Nav.Link, { "data-nav-item": "", "data-active": active ? "" : void 0, active, "aria-current": active ? "page" : void 0, className: s.item({ className }), ...props }) });
+}
+function NavBarMenu({ label, active, columns = 1, children, className, ...props }) {
+  return /* @__PURE__ */ jsxs(Nav.Item, { className, ...props, children: [
+    /* @__PURE__ */ jsxs(Nav.Trigger, { "data-nav-item": "", "data-active": active ? "" : void 0, className: cn(s.item(), "group/trigger"), children: [
+      label,
+      /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", className: s.chevron(), fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", "aria-hidden": true, children: /* @__PURE__ */ jsx("path", { d: "m6 9 6 6 6-6" }) })
+    ] }),
+    /* @__PURE__ */ jsx(Nav.Content, { className: cn(s.panel(), columns === 2 && "md:grid-cols-2"), children })
+  ] });
+}
+function NavBarMenuLink({ title, description, icon, active, href, className, asChild, children, ...props }) {
+  const body = /* @__PURE__ */ jsxs(Fragment, { children: [
+    icon && /* @__PURE__ */ jsx("span", { className: s.menuIcon(), children: icon }),
+    /* @__PURE__ */ jsxs("span", { className: "min-w-0", children: [
+      /* @__PURE__ */ jsx("span", { className: s.menuTitle(), children: title }),
+      description && /* @__PURE__ */ jsx("span", { className: s.menuText(), children: description })
+    ] })
+  ] });
+  return /* @__PURE__ */ jsx(Nav.Link, { asChild, href: asChild ? void 0 : href, active, "aria-current": active ? "page" : void 0, "data-active": active ? "" : void 0, className: s.menuLink({ className }), ...props, children: asChild && React.isValidElement(children) ? React.cloneElement(children, void 0, body) : body });
+}
+function NavBarActions({ className, ...props }) {
+  return /* @__PURE__ */ jsx("div", { className: s.actions({ className }), ...props });
+}
+function NavBarMobile({ openLabel, closeLabel, className, children, ...props }) {
+  const { label, open, setOpen, panelId } = useNavBar();
+  const toggle = React.useRef(null);
+  React.useEffect(() => {
+    if (!open) return;
+    const onKey = (e) => {
+      if (e.key !== "Escape") return;
+      setOpen(false);
+      toggle.current?.focus();
+    };
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, [open, setOpen]);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("button", { ref: toggle, type: "button", "aria-expanded": open, "aria-controls": panelId, "aria-label": open ? closeLabel : openLabel, onClick: () => setOpen(!open), className: s.toggle(), children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", className: "h-4.5 w-4.5", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", "aria-hidden": true, children: open ? /* @__PURE__ */ jsx("path", { d: "M18 6 6 18M6 6l12 12" }) : /* @__PURE__ */ jsx("path", { d: "M4 7h16M4 12h16M4 17h10" }) }) }),
+    open && /* @__PURE__ */ jsx(
+      "nav",
+      {
+        id: panelId,
+        "aria-label": label,
+        className: s.mobile({ className }),
+        onClick: (e) => {
+          if (e.target.closest("a")) setOpen(false);
+        },
+        ...props,
+        children
+      }
+    )
+  ] });
+}
+function NavBarMobileLink({ active, asChild, className, ...props }) {
+  const Comp = asChild ? Slot.Root : "a";
+  return /* @__PURE__ */ jsx(Comp, { "aria-current": active ? "page" : void 0, className: s.mobileLink({ className }), ...props });
+}
+var NavBar = {
+  Root: NavBarRoot,
+  Brand: NavBarBrand,
+  Items: NavBarItems,
+  Link: NavBarLink,
+  Menu: NavBarMenu,
+  MenuLink: NavBarMenuLink,
+  Actions: NavBarActions,
+  Mobile: NavBarMobile,
+  MobileLink: NavBarMobileLink
+};
+export {
+  NavBar,
+  NavBarActions,
+  NavBarBrand,
+  NavBarItems,
+  NavBarLink,
+  NavBarMenu,
+  NavBarMenuLink,
+  NavBarMobile,
+  NavBarMobileLink,
+  NavBarRoot,
+  navBar
+};
+//# sourceMappingURL=nav-bar.js.map

package/dist/nav-bar.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/nav-bar/nav-bar.tsx"],"sourcesContent":["// Client (scroll, a sliding indicator, menus). Radix NavigationMenu does the menus' semantics and keyboard (Enter, Space\n// and ↓ open; ↑ ↓ Home End walk; Escape closes and returns the focus; Tab out closes); this file draws the Krizaka bar:\n// a floating pill that tightens once the page scrolls, one light that glides to the item under the pointer or the\n// focus and rests on the current page, and a mobile panel that is a plain disclosure (no focus trap, Escape closes).\nimport { NavigationMenu as Nav, Slot } from \"radix-ui\";\nimport * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nimport { cn } from \"../cn\";\nimport { useSlidingIndicator } from \"../sliding-indicator\";\n\nexport const navBar = tv({\n  slots: {\n    root:\n      \"group/nav relative z-40 mx-auto flex h-14 w-full items-center gap-2 border-border-subtle bg-surface-1/75 backdrop-blur-xl backdrop-saturate-150 \" +\n      \"transition-[height,background-color,border-color,box-shadow] duration-300 motion-reduce:transition-none \" +\n      \"data-compact:h-12 data-compact:border-border-default data-compact:bg-surface-1/90 data-compact:shadow-lg\",\n    brand:\n      \"mr-2 inline-flex shrink-0 items-center gap-2 font-display text-[15px] font-bold tracking-tight text-fg no-underline \" +\n      \"rounded-md focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring\",\n    items: \"relative hidden md:block\",\n    list:\n      \"group/list relative isolate flex items-center gap-0.5 \" +\n      // The light: under the item that is pointed at or focused, resting on the current page.\n      \"before:absolute before:left-0 before:top-0 before:-z-10 before:h-(--kz-ind-h) before:w-(--kz-ind-w) before:translate-x-(--kz-ind-x) before:translate-y-(--kz-ind-y) \" +\n      \"before:rounded-full before:bg-surface-3 before:opacity-0 before:transition-[translate,width,opacity] before:duration-300 motion-reduce:before:transition-none \" +\n      \"data-[indicator=on]:before:opacity-100\",\n    item:\n      \"inline-flex h-9 select-none items-center gap-1 rounded-full px-3.5 text-sm font-medium text-fg-secondary no-underline transition-colors \" +\n      \"hover:text-fg data-active:text-fg data-[state=open]:text-fg focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring \" +\n      // Before the light is ready (server render), the current page carries its own tint.\n      \"group-not-data-[indicator=on]/list:data-active:bg-surface-3\",\n    chevron: \"h-3.5 w-3.5 transition-transform duration-300 group-data-[state=open]/trigger:rotate-180 motion-reduce:transition-none\",\n    viewport:\n      \"kz-pop absolute left-0 top-full mt-2 h-(--radix-navigation-menu-viewport-height) w-(--radix-navigation-menu-viewport-width) origin-top-left overflow-hidden \" +\n      \"rounded-2xl border border-border-default bg-surface-1 shadow-lg transition-[width,height] duration-300 motion-reduce:transition-none\",\n    panel: \"grid w-max max-w-[min(92vw,30rem)] gap-1 p-2\",\n    menuLink:\n      \"group/link flex items-start gap-3 rounded-xl p-3 text-left no-underline outline-hidden transition-colors \" +\n      \"hover:bg-surface-2 focus-visible:bg-surface-2 focus-visible:ring-2 focus-visible:ring-ring data-active:bg-accent-soft\",\n    menuIcon:\n      \"mt-0.5 flex h-9 w-9 shrink-0 items-center justify-center rounded-lg border border-border-default bg-surface-2 text-fg-accent \" +\n      \"transition-[transform,border-color] duration-300 group-hover/link:-translate-y-0.5 group-hover/link:border-accent [&>svg]:h-4.5 [&>svg]:w-4.5 motion-reduce:transform-none\",\n    menuTitle: \"block text-sm font-semibold text-fg\",\n    menuText: \"mt-0.5 block text-xs leading-relaxed text-fg-secondary\",\n    actions: \"ml-auto flex items-center gap-2\",\n    toggle:\n      \"inline-flex h-9 w-9 items-center justify-center rounded-full border border-border-subtle bg-surface-2/60 text-fg md:hidden \" +\n      \"focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring\",\n    mobile: \"kz-pop absolute inset-x-0 top-full mt-2 grid gap-1 rounded-2xl border border-border-default bg-surface-1 p-2 shadow-lg md:hidden\",\n    mobileLink:\n      \"flex items-center justify-between rounded-xl px-3 py-3 text-[15px] font-medium text-fg no-underline hover:bg-surface-2 \" +\n      \"focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring aria-[current=page]:text-fg-accent\",\n  },\n  variants: {\n    floating: {\n      true: { root: \"max-w-5xl rounded-full border pl-5 pr-2 data-compact:max-w-4xl\" },\n      false: { root: \"border-b px-4 md:px-6\" },\n    },\n  },\n  defaultVariants: { floating: true },\n});\nconst s = navBar();\n\ninterface NavBarContext {\n  label: string;\n  open: boolean;\n  setOpen: (open: boolean) => void;\n  panelId: string;\n}\nconst Context = React.createContext<NavBarContext | null>(null);\nconst useNavBar = () => {\n  const ctx = React.useContext(Context);\n  if (!ctx) throw new Error(\"NavBar parts must be inside <NavBar.Root>.\");\n  return ctx;\n};\n\nexport type NavBarRootProps = React.ComponentProps<\"header\"> & {\n  /** The accessible name of the navigation (“Main”) — passed translated. */\n  label: string;\n  /**\n   * Pixels of scroll after which the bar tightens (denser, lower, lifted). `false`: never.\n   * @default 24\n   */\n  compactAfter?: number | false;\n  /**\n   * A floating pill (the Krizaka bar) or a full-width bar with a hairline under it.\n   * @default true\n   */\n  floating?: boolean;\n};\n\n/** The bar. Place it in a `sticky top-3` (floating) or `sticky top-0` wrapper — or let it scroll. */\nexport function NavBarRoot({ label, compactAfter = 24, floating = true, className, children, ...props }: NavBarRootProps) {\n  const [compact, setCompact] = React.useState(false);\n  const [open, setOpen] = React.useState(false);\n  const panelId = React.useId();\n  React.useEffect(() => {\n    if (compactAfter === false) return;\n    const onScroll = () => setCompact(window.scrollY > compactAfter);\n    onScroll();\n    window.addEventListener(\"scroll\", onScroll, { passive: true });\n    return () => window.removeEventListener(\"scroll\", onScroll);\n  }, [compactAfter]);\n  const ctx = React.useMemo(() => ({ label, open, setOpen, panelId }), [label, open, panelId]);\n  return (\n    <Context.Provider value={ctx}>\n      <header data-compact={compact ? \"\" : undefined} data-floating={floating} className={navBar({ floating }).root({ className })} {...props}>\n        {children}\n      </header>\n    </Context.Provider>\n  );\n}\n\nexport type NavBarBrandProps = React.ComponentProps<\"a\"> & {\n  /** Renders your link (a router `<Link>`) with the brand's look. */\n  asChild?: boolean;\n};\n\n/** The brand: a mark and a name, linking home. */\nexport function NavBarBrand({ asChild, className, ...props }: NavBarBrandProps) {\n  const Comp = asChild ? Slot.Root : \"a\";\n  return <Comp className={s.brand({ className })} {...props} />;\n}\n\n/** The desktop navigation: links and menus, with the light that glides between them. Hidden below `md` (see `NavBar.Mobile`). */\nexport function NavBarItems({ className, children, ...props }: Omit<React.ComponentProps<typeof Nav.Root>, \"orientation\">) {\n  const { label } = useNavBar();\n  const { ref, handlers } = useSlidingIndicator<HTMLUListElement>({ item: \"[data-nav-item]\", active: \"[data-nav-item][data-active]\", follow: true });\n  return (\n    <Nav.Root aria-label={label} className={s.items({ className })} delayDuration={80} {...props}>\n      <Nav.List ref={ref} className={s.list()} {...handlers}>\n        {children}\n      </Nav.List>\n      <Nav.Viewport className={s.viewport()} />\n    </Nav.Root>\n  );\n}\n\nexport type NavBarLinkProps = Omit<React.ComponentProps<typeof Nav.Link>, \"active\"> & {\n  /** The current page: `aria-current=\"page\"`, and the light rests on it. */\n  active?: boolean;\n};\n\n/** A link of the bar. `asChild` renders your router's `<Link>`. */\nexport function NavBarLink({ active, className, ...props }: NavBarLinkProps) {\n  return (\n    <Nav.Item>\n      <Nav.Link data-nav-item=\"\" data-active={active ? \"\" : undefined} active={active} aria-current={active ? \"page\" : undefined} className={s.item({ className })} {...props} />\n    </Nav.Item>\n  );\n}\n\nexport type NavBarMenuProps = Omit<React.ComponentProps<typeof Nav.Item>, \"children\"> & {\n  /** The trigger's words (“Products”) — passed translated. */\n  label: string;\n  /** The current page is inside this menu: the light rests on its trigger. */\n  active?: boolean;\n  /** The menu's links (`NavBar.MenuLink`), laid out in a panel; `columns` sets the grid. */\n  children: React.ReactNode;\n  /**\n   * Columns of the panel.\n   * @default 1\n   */\n  columns?: 1 | 2;\n};\n\n/** A menu of the bar: its trigger, and its links in a panel that opens under the bar. */\nexport function NavBarMenu({ label, active, columns = 1, children, className, ...props }: NavBarMenuProps) {\n  return (\n    <Nav.Item className={className} {...props}>\n      <Nav.Trigger data-nav-item=\"\" data-active={active ? \"\" : undefined} className={cn(s.item(), \"group/trigger\")}>\n        {label}\n        <svg viewBox=\"0 0 24 24\" className={s.chevron()} fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" aria-hidden>\n          <path d=\"m6 9 6 6 6-6\" />\n        </svg>\n      </Nav.Trigger>\n      <Nav.Content className={cn(s.panel(), columns === 2 && \"md:grid-cols-2\")}>{children}</Nav.Content>\n    </Nav.Item>\n  );\n}\n\nexport type NavBarMenuLinkProps = Omit<React.ComponentProps<typeof Nav.Link>, \"title\" | \"active\"> & {\n  /** The link's name — passed translated. */\n  title: string;\n  /** One line under it — passed translated. */\n  description?: string;\n  /** An icon (a signature icon of `@krizaka/icons`: its node lights up on hover). */\n  icon?: React.ReactNode;\n  /** The current page. */\n  active?: boolean;\n};\n\n/** A link inside a menu: an icon, a name and a line of text. */\nexport function NavBarMenuLink({ title, description, icon, active, href, className, asChild, children, ...props }: NavBarMenuLinkProps) {\n  const body = (\n    <>\n      {icon && <span className={s.menuIcon()}>{icon}</span>}\n      <span className=\"min-w-0\">\n        <span className={s.menuTitle()}>{title}</span>\n        {description && <span className={s.menuText()}>{description}</span>}\n      </span>\n    </>\n  );\n  return (\n    <Nav.Link asChild={asChild} href={asChild ? undefined : href} active={active} aria-current={active ? \"page\" : undefined} data-active={active ? \"\" : undefined} className={s.menuLink({ className })} {...props}>\n      {asChild && React.isValidElement<{ children?: React.ReactNode }>(children) ? React.cloneElement(children, undefined, body) : body}\n    </Nav.Link>\n  );\n}\n\n/** The right side: search, theme, language, the call to action. */\nexport function NavBarActions({ className, ...props }: React.ComponentProps<\"div\">) {\n  return <div className={s.actions({ className })} {...props} />;\n}\n\nexport type NavBarMobileProps = React.ComponentProps<\"nav\"> & {\n  /** The toggle's name when closed (“Open the menu”) — passed translated. */\n  openLabel: string;\n  /** The toggle's name when open (“Close the menu”) — passed translated. */\n  closeLabel: string;\n};\n\n/**\n * Below `md`: a toggle, and a panel under the bar with its links (`NavBar.MobileLink`). A disclosure: Escape and a click\n * on a link close it, the focus returns to the toggle.\n */\nexport function NavBarMobile({ openLabel, closeLabel, className, children, ...props }: NavBarMobileProps) {\n  const { label, open, setOpen, panelId } = useNavBar();\n  const toggle = React.useRef<HTMLButtonElement>(null);\n  React.useEffect(() => {\n    if (!open) return;\n    const onKey = (e: KeyboardEvent) => {\n      if (e.key !== \"Escape\") return;\n      setOpen(false);\n      toggle.current?.focus();\n    };\n    document.addEventListener(\"keydown\", onKey);\n    return () => document.removeEventListener(\"keydown\", onKey);\n  }, [open, setOpen]);\n  return (\n    <>\n      <button ref={toggle} type=\"button\" aria-expanded={open} aria-controls={panelId} aria-label={open ? closeLabel : openLabel} onClick={() => setOpen(!open)} className={s.toggle()}>\n        <svg viewBox=\"0 0 24 24\" className=\"h-4.5 w-4.5\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" aria-hidden>\n          {open ? <path d=\"M18 6 6 18M6 6l12 12\" /> : <path d=\"M4 7h16M4 12h16M4 17h10\" />}\n        </svg>\n      </button>\n      {open && (\n        <nav\n          id={panelId}\n          aria-label={label}\n          className={s.mobile({ className })}\n          onClick={(e) => {\n            if ((e.target as Element).closest(\"a\")) setOpen(false);\n          }}\n          {...props}\n        >\n          {children}\n        </nav>\n      )}\n    </>\n  );\n}\n\nexport type NavBarMobileLinkProps = React.ComponentProps<\"a\"> & {\n  /** The current page. */\n  active?: boolean;\n  /** Renders your router's `<Link>`. */\n  asChild?: boolean;\n};\n\n/** A link of the mobile panel. */\nexport function NavBarMobileLink({ active, asChild, className, ...props }: NavBarMobileLinkProps) {\n  const Comp = asChild ? Slot.Root : \"a\";\n  return <Comp aria-current={active ? \"page\" : undefined} className={s.mobileLink({ className })} {...props} />;\n}\n\n/**\n * `NavBar.Root/Brand/Items/Link/Menu/MenuLink/Actions/Mobile/MobileLink` — the Krizaka navigation bar: floating, tightening\n * on scroll, one light gliding between its items, accessible menus, a mobile panel.\n */\nexport const NavBar = {\n  Root: NavBarRoot,\n  Brand: NavBarBrand,\n  Items: NavBarItems,\n  Link: NavBarLink,\n  Menu: NavBarMenu,\n  MenuLink: NavBarMenuLink,\n  Actions: NavBarActions,\n  Mobile: NavBarMobile,\n  MobileLink: NavBarMobileLink,\n};\n"],"mappings":";;;;;;;;;AAIA,SAAS,kBAAkB,KAAK,YAAY;AAC5C,YAAY,WAAW;AACvB,SAAS,UAAU;AAqGb,SAyFF,UAzFE,KAuBF,YAvBE;AAhGC,IAAM,SAAS,GAAG;AAAA,EACvB,OAAO;AAAA,IACL,MACE;AAAA,IAGF,OACE;AAAA,IAEF,OAAO;AAAA,IACP,MACE;AAAA,IAKF,MACE;AAAA,IAIF,SAAS;AAAA,IACT,UACE;AAAA,IAEF,OAAO;AAAA,IACP,UACE;AAAA,IAEF,UACE;AAAA,IAEF,WAAW;AAAA,IACX,UAAU;AAAA,IACV,SAAS;AAAA,IACT,QACE;AAAA,IAEF,QAAQ;AAAA,IACR,YACE;AAAA,EAEJ;AAAA,EACA,UAAU;AAAA,IACR,UAAU;AAAA,MACR,MAAM,EAAE,MAAM,iEAAiE;AAAA,MAC/E,OAAO,EAAE,MAAM,wBAAwB;AAAA,IACzC;AAAA,EACF;AAAA,EACA,iBAAiB,EAAE,UAAU,KAAK;AACpC,CAAC;AACD,IAAM,IAAI,OAAO;AAQjB,IAAM,UAAgB,oBAAoC,IAAI;AAC9D,IAAM,YAAY,MAAM;AACtB,QAAM,MAAY,iBAAW,OAAO;AACpC,MAAI,CAAC,IAAK,OAAM,IAAI,MAAM,4CAA4C;AACtE,SAAO;AACT;AAkBO,SAAS,WAAW,EAAE,OAAO,eAAe,IAAI,WAAW,MAAM,WAAW,UAAU,GAAG,MAAM,GAAoB;AACxH,QAAM,CAAC,SAAS,UAAU,IAAU,eAAS,KAAK;AAClD,QAAM,CAAC,MAAM,OAAO,IAAU,eAAS,KAAK;AAC5C,QAAM,UAAgB,YAAM;AAC5B,EAAM,gBAAU,MAAM;AACpB,QAAI,iBAAiB,MAAO;AAC5B,UAAM,WAAW,MAAM,WAAW,OAAO,UAAU,YAAY;AAC/D,aAAS;AACT,WAAO,iBAAiB,UAAU,UAAU,EAAE,SAAS,KAAK,CAAC;AAC7D,WAAO,MAAM,OAAO,oBAAoB,UAAU,QAAQ;AAAA,EAC5D,GAAG,CAAC,YAAY,CAAC;AACjB,QAAM,MAAY,cAAQ,OAAO,EAAE,OAAO,MAAM,SAAS,QAAQ,IAAI,CAAC,OAAO,MAAM,OAAO,CAAC;AAC3F,SACE,oBAAC,QAAQ,UAAR,EAAiB,OAAO,KACvB,8BAAC,YAAO,gBAAc,UAAU,KAAK,QAAW,iBAAe,UAAU,WAAW,OAAO,EAAE,SAAS,CAAC,EAAE,KAAK,EAAE,UAAU,CAAC,GAAI,GAAG,OAC/H,UACH,GACF;AAEJ;AAQO,SAAS,YAAY,EAAE,SAAS,WAAW,GAAG,MAAM,GAAqB;AAC9E,QAAM,OAAO,UAAU,KAAK,OAAO;AACnC,SAAO,oBAAC,QAAK,WAAW,EAAE,MAAM,EAAE,UAAU,CAAC,GAAI,GAAG,OAAO;AAC7D;AAGO,SAAS,YAAY,EAAE,WAAW,UAAU,GAAG,MAAM,GAA+D;AACzH,QAAM,EAAE,MAAM,IAAI,UAAU;AAC5B,QAAM,EAAE,KAAK,SAAS,IAAI,oBAAsC,EAAE,MAAM,mBAAmB,QAAQ,gCAAgC,QAAQ,KAAK,CAAC;AACjJ,SACE,qBAAC,IAAI,MAAJ,EAAS,cAAY,OAAO,WAAW,EAAE,MAAM,EAAE,UAAU,CAAC,GAAG,eAAe,IAAK,GAAG,OACrF;AAAA,wBAAC,IAAI,MAAJ,EAAS,KAAU,WAAW,EAAE,KAAK,GAAI,GAAG,UAC1C,UACH;AAAA,IACA,oBAAC,IAAI,UAAJ,EAAa,WAAW,EAAE,SAAS,GAAG;AAAA,KACzC;AAEJ;AAQO,SAAS,WAAW,EAAE,QAAQ,WAAW,GAAG,MAAM,GAAoB;AAC3E,SACE,oBAAC,IAAI,MAAJ,EACC,8BAAC,IAAI,MAAJ,EAAS,iBAAc,IAAG,eAAa,SAAS,KAAK,QAAW,QAAgB,gBAAc,SAAS,SAAS,QAAW,WAAW,EAAE,KAAK,EAAE,UAAU,CAAC,GAAI,GAAG,OAAO,GAC3K;AAEJ;AAiBO,SAAS,WAAW,EAAE,OAAO,QAAQ,UAAU,GAAG,UAAU,WAAW,GAAG,MAAM,GAAoB;AACzG,SACE,qBAAC,IAAI,MAAJ,EAAS,WAAuB,GAAG,OAClC;AAAA,yBAAC,IAAI,SAAJ,EAAY,iBAAc,IAAG,eAAa,SAAS,KAAK,QAAW,WAAW,GAAG,EAAE,KAAK,GAAG,eAAe,GACxG;AAAA;AAAA,MACD,oBAAC,SAAI,SAAQ,aAAY,WAAW,EAAE,QAAQ,GAAG,MAAK,QAAO,QAAO,gBAAe,aAAY,KAAI,eAAc,SAAQ,eAAW,MAClI,8BAAC,UAAK,GAAE,gBAAe,GACzB;AAAA,OACF;AAAA,IACA,oBAAC,IAAI,SAAJ,EAAY,WAAW,GAAG,EAAE,MAAM,GAAG,YAAY,KAAK,gBAAgB,GAAI,UAAS;AAAA,KACtF;AAEJ;AAcO,SAAS,eAAe,EAAE,OAAO,aAAa,MAAM,QAAQ,MAAM,WAAW,SAAS,UAAU,GAAG,MAAM,GAAwB;AACtI,QAAM,OACJ,iCACG;AAAA,YAAQ,oBAAC,UAAK,WAAW,EAAE,SAAS,GAAI,gBAAK;AAAA,IAC9C,qBAAC,UAAK,WAAU,WACd;AAAA,0BAAC,UAAK,WAAW,EAAE,UAAU,GAAI,iBAAM;AAAA,MACtC,eAAe,oBAAC,UAAK,WAAW,EAAE,SAAS,GAAI,uBAAY;AAAA,OAC9D;AAAA,KACF;AAEF,SACE,oBAAC,IAAI,MAAJ,EAAS,SAAkB,MAAM,UAAU,SAAY,MAAM,QAAgB,gBAAc,SAAS,SAAS,QAAW,eAAa,SAAS,KAAK,QAAW,WAAW,EAAE,SAAS,EAAE,UAAU,CAAC,GAAI,GAAG,OACtM,qBAAiB,qBAA+C,QAAQ,IAAU,mBAAa,UAAU,QAAW,IAAI,IAAI,MAC/H;AAEJ;AAGO,SAAS,cAAc,EAAE,WAAW,GAAG,MAAM,GAAgC;AAClF,SAAO,oBAAC,SAAI,WAAW,EAAE,QAAQ,EAAE,UAAU,CAAC,GAAI,GAAG,OAAO;AAC9D;AAaO,SAAS,aAAa,EAAE,WAAW,YAAY,WAAW,UAAU,GAAG,MAAM,GAAsB;AACxG,QAAM,EAAE,OAAO,MAAM,SAAS,QAAQ,IAAI,UAAU;AACpD,QAAM,SAAe,aAA0B,IAAI;AACnD,EAAM,gBAAU,MAAM;AACpB,QAAI,CAAC,KAAM;AACX,UAAM,QAAQ,CAAC,MAAqB;AAClC,UAAI,EAAE,QAAQ,SAAU;AACxB,cAAQ,KAAK;AACb,aAAO,SAAS,MAAM;AAAA,IACxB;AACA,aAAS,iBAAiB,WAAW,KAAK;AAC1C,WAAO,MAAM,SAAS,oBAAoB,WAAW,KAAK;AAAA,EAC5D,GAAG,CAAC,MAAM,OAAO,CAAC;AAClB,SACE,iCACE;AAAA,wBAAC,YAAO,KAAK,QAAQ,MAAK,UAAS,iBAAe,MAAM,iBAAe,SAAS,cAAY,OAAO,aAAa,WAAW,SAAS,MAAM,QAAQ,CAAC,IAAI,GAAG,WAAW,EAAE,OAAO,GAC5K,8BAAC,SAAI,SAAQ,aAAY,WAAU,eAAc,MAAK,QAAO,QAAO,gBAAe,aAAY,KAAI,eAAc,SAAQ,eAAW,MACjI,iBAAO,oBAAC,UAAK,GAAE,wBAAuB,IAAK,oBAAC,UAAK,GAAE,2BAA0B,GAChF,GACF;AAAA,IACC,QACC;AAAA,MAAC;AAAA;AAAA,QACC,IAAI;AAAA,QACJ,cAAY;AAAA,QACZ,WAAW,EAAE,OAAO,EAAE,UAAU,CAAC;AAAA,QACjC,SAAS,CAAC,MAAM;AACd,cAAK,EAAE,OAAmB,QAAQ,GAAG,EAAG,SAAQ,KAAK;AAAA,QACvD;AAAA,QACC,GAAG;AAAA,QAEH;AAAA;AAAA,IACH;AAAA,KAEJ;AAEJ;AAUO,SAAS,iBAAiB,EAAE,QAAQ,SAAS,WAAW,GAAG,MAAM,GAA0B;AAChG,QAAM,OAAO,UAAU,KAAK,OAAO;AACnC,SAAO,oBAAC,QAAK,gBAAc,SAAS,SAAS,QAAW,WAAW,EAAE,WAAW,EAAE,UAAU,CAAC,GAAI,GAAG,OAAO;AAC7G;AAMO,IAAM,SAAS;AAAA,EACpB,MAAM;AAAA,EACN,OAAO;AAAA,EACP,OAAO;AAAA,EACP,MAAM;AAAA,EACN,MAAM;AAAA,EACN,UAAU;AAAA,EACV,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,YAAY;AACd;","names":[]}

package/dist/number-ticker.d.ts

@@ -0,0 +1,32 @@
+import * as React from 'react';
+
+interface NumberTickerProps extends Omit<React.ComponentProps<"span">, "children"> {
+    /** The value to show. */
+    value: number;
+    /** The locale of the digits and separators (`"fr"`: 1 204,5) — the app's locale. */
+    locale?: string;
+    /** How to write it (`{ style: "currency", currency: "EUR" }`, `{ maximumFractionDigits: 1 }`…): Intl.NumberFormat options. */
+    format?: Intl.NumberFormatOptions;
+    /**
+     * `view`: climbs from 0 once, the first time it scrolls into view. `change`: each digit rolls to the new value
+     * whenever `value` changes (a live total).
+     * @default "view"
+     */
+    trigger?: "view" | "change";
+    /**
+     * Milliseconds of the climb.
+     * @default 1100
+     */
+    duration?: number;
+    /** Announce each new value politely (`trigger="change"`): a live total the reader should hear. */
+    announce?: boolean;
+    /**
+     * Where the figure sits in the box its final width reserves.
+     * @default "end"
+     */
+    align?: "start" | "end";
+}
+/** A figure that climbs into view, or rolls digit by digit to each new value. */
+declare function NumberTicker({ value, locale, format, trigger, duration, announce, align, className, ...props }: NumberTickerProps): React.JSX.Element;
+
+export { NumberTicker, type NumberTickerProps };

package/dist/number-ticker.js

@@ -0,0 +1,61 @@
+"use client";
+import {
+  cx
+} from "./chunk-6ISW63JI.js";
+
+// src/number-ticker/number-ticker.tsx
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var easeOut = (t) => 1 - Math.pow(1 - t, 4);
+function NumberTicker({ value, locale, format, trigger = "view", duration = 1100, announce, align = "end", className, ...props }) {
+  const formatter = React.useMemo(() => new Intl.NumberFormat(locale, format), [locale, format]);
+  const text = formatter.format(value);
+  const live = React.useRef(null);
+  const [previous, setPrevious] = React.useState(value);
+  const [trend, setTrend] = React.useState(void 0);
+  if (value !== previous) {
+    setPrevious(value);
+    setTrend(value > previous ? "up" : "down");
+  }
+  React.useEffect(() => {
+    const el = live.current;
+    if (trigger !== "view" || !el || window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
+    let first = true;
+    let frame = 0;
+    const io = new IntersectionObserver(
+      ([entry]) => {
+        const wasFirst = first;
+        first = false;
+        if (!entry?.isIntersecting) return;
+        io.disconnect();
+        if (wasFirst) return;
+        const start = performance.now();
+        const tick = (now) => {
+          const p = Math.min(1, (now - start) / duration);
+          el.textContent = formatter.format(value * easeOut(p));
+          if (p < 1) frame = requestAnimationFrame(tick);
+        };
+        el.textContent = formatter.format(0);
+        frame = requestAnimationFrame(tick);
+      },
+      { threshold: 0.6 }
+    );
+    io.observe(el);
+    return () => {
+      io.disconnect();
+      cancelAnimationFrame(frame);
+      el.textContent = formatter.format(value);
+    };
+  }, [trigger, value, duration, formatter]);
+  return /* @__PURE__ */ jsxs("span", { "data-align": align, "data-trend": trigger === "change" ? trend : void 0, className: cx("kz-count", className), ...props, children: [
+    /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "kz-count-ghost", children: text }),
+    trigger === "change" ? /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "kz-count-roll", children: [...text].map(
+      (char, i, all) => /\d/.test(char) ? /* @__PURE__ */ jsx("span", { className: "kz-count-digit", style: { "--kz-digit": char }, children: /* @__PURE__ */ jsx("span", { children: "0123456789".split("").map((d) => /* @__PURE__ */ jsx("span", { children: d }, d)) }) }, all.length - i) : /* @__PURE__ */ jsx("span", { children: char }, all.length - i)
+    ) }) : /* @__PURE__ */ jsx("span", { "aria-hidden": true, ref: live, children: text }),
+    /* @__PURE__ */ jsx("span", { className: "sr-only", "aria-live": announce ? "polite" : void 0, children: text })
+  ] });
+}
+export {
+  NumberTicker
+};
+//# sourceMappingURL=number-ticker.js.map

package/dist/number-ticker.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/number-ticker/number-ticker.tsx"],"sourcesContent":["// Client (an observer, a short count). A figure that climbs — without the faults of the usual counters: the server\n// renders the final value (crawlers, screen readers, no-JS and reduced-motion readers all read it), an invisible copy\n// holds its width from the first paint (no layout shift), a figure already on screen at load does not drop to 0 in\n// front of the reader, the count is a bounded loop (~1 s) that stops for good, and assistive technology reads only the\n// final value. On `trigger=\"change\"` each digit rolls to its new value (a live total: tips, bids) and the change can be\n// announced.\nimport * as React from \"react\";\n\nimport { cx } from \"../cx\";\n\nexport interface NumberTickerProps extends Omit<React.ComponentProps<\"span\">, \"children\"> {\n  /** The value to show. */\n  value: number;\n  /** The locale of the digits and separators (`\"fr\"`: 1 204,5) — the app's locale. */\n  locale?: string;\n  /** How to write it (`{ style: \"currency\", currency: \"EUR\" }`, `{ maximumFractionDigits: 1 }`…): Intl.NumberFormat options. */\n  format?: Intl.NumberFormatOptions;\n  /**\n   * `view`: climbs from 0 once, the first time it scrolls into view. `change`: each digit rolls to the new value\n   * whenever `value` changes (a live total).\n   * @default \"view\"\n   */\n  trigger?: \"view\" | \"change\";\n  /**\n   * Milliseconds of the climb.\n   * @default 1100\n   */\n  duration?: number;\n  /** Announce each new value politely (`trigger=\"change\"`): a live total the reader should hear. */\n  announce?: boolean;\n  /**\n   * Where the figure sits in the box its final width reserves.\n   * @default \"end\"\n   */\n  align?: \"start\" | \"end\";\n}\n\nconst easeOut = (t: number) => 1 - Math.pow(1 - t, 4);\n\n/** A figure that climbs into view, or rolls digit by digit to each new value. */\nexport function NumberTicker({ value, locale, format, trigger = \"view\", duration = 1100, announce, align = \"end\", className, ...props }: NumberTickerProps) {\n  const formatter = React.useMemo(() => new Intl.NumberFormat(locale, format), [locale, format]);\n  const text = formatter.format(value);\n  const live = React.useRef<HTMLSpanElement>(null);\n  // The previous value, kept in state (React's pattern for “adjusting state when a prop changes”): the trend of the last change.\n  const [previous, setPrevious] = React.useState(value);\n  const [trend, setTrend] = React.useState<\"up\" | \"down\" | undefined>(undefined);\n  if (value !== previous) {\n    setPrevious(value);\n    setTrend(value > previous ? \"up\" : \"down\");\n  }\n\n  React.useEffect(() => {\n    const el = live.current;\n    if (trigger !== \"view\" || !el || window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches) return;\n    let first = true;\n    let frame = 0;\n    const io = new IntersectionObserver(\n      ([entry]) => {\n        const wasFirst = first;\n        first = false;\n        if (!entry?.isIntersecting) return;\n        io.disconnect();\n        if (wasFirst) return; // already on screen at load: it stays, nothing drops to 0 in front of the reader\n        const start = performance.now();\n        const tick = (now: number) => {\n          const p = Math.min(1, (now - start) / duration);\n          el.textContent = formatter.format(value * easeOut(p));\n          if (p < 1) frame = requestAnimationFrame(tick);\n        };\n        el.textContent = formatter.format(0);\n        frame = requestAnimationFrame(tick);\n      },\n      { threshold: 0.6 },\n    );\n    io.observe(el);\n    return () => {\n      io.disconnect();\n      cancelAnimationFrame(frame);\n      el.textContent = formatter.format(value);\n    };\n  }, [trigger, value, duration, formatter]);\n\n  return (\n    <span data-align={align} data-trend={trigger === \"change\" ? trend : undefined} className={cx(\"kz-count\", className)} {...props}>\n      <span aria-hidden className=\"kz-count-ghost\">\n        {text}\n      </span>\n      {trigger === \"change\" ? (\n        <span aria-hidden className=\"kz-count-roll\">\n          {/* Keyed from the right: when a digit is added (999 → 1,000), the units stay the units. */}\n          {[...text].map((char, i, all) =>\n            /\\d/.test(char) ? (\n              <span key={all.length - i} className=\"kz-count-digit\" style={{ \"--kz-digit\": char } as React.CSSProperties}>\n                <span>\n                  {\"0123456789\".split(\"\").map((d) => (\n                    <span key={d}>{d}</span>\n                  ))}\n                </span>\n              </span>\n            ) : (\n              <span key={all.length - i}>{char}</span>\n            ),\n          )}\n        </span>\n      ) : (\n        <span aria-hidden ref={live}>\n          {text}\n        </span>\n      )}\n      <span className=\"sr-only\" aria-live={announce ? \"polite\" : undefined}>\n        {text}\n      </span>\n    </span>\n  );\n}\n"],"mappings":";;;;;;AAMA,YAAY,WAAW;AA8EnB,SACE,KADF;AA/CJ,IAAM,UAAU,CAAC,MAAc,IAAI,KAAK,IAAI,IAAI,GAAG,CAAC;AAG7C,SAAS,aAAa,EAAE,OAAO,QAAQ,QAAQ,UAAU,QAAQ,WAAW,MAAM,UAAU,QAAQ,OAAO,WAAW,GAAG,MAAM,GAAsB;AAC1J,QAAM,YAAkB,cAAQ,MAAM,IAAI,KAAK,aAAa,QAAQ,MAAM,GAAG,CAAC,QAAQ,MAAM,CAAC;AAC7F,QAAM,OAAO,UAAU,OAAO,KAAK;AACnC,QAAM,OAAa,aAAwB,IAAI;AAE/C,QAAM,CAAC,UAAU,WAAW,IAAU,eAAS,KAAK;AACpD,QAAM,CAAC,OAAO,QAAQ,IAAU,eAAoC,MAAS;AAC7E,MAAI,UAAU,UAAU;AACtB,gBAAY,KAAK;AACjB,aAAS,QAAQ,WAAW,OAAO,MAAM;AAAA,EAC3C;AAEA,EAAM,gBAAU,MAAM;AACpB,UAAM,KAAK,KAAK;AAChB,QAAI,YAAY,UAAU,CAAC,MAAM,OAAO,WAAW,kCAAkC,EAAE,QAAS;AAChG,QAAI,QAAQ;AACZ,QAAI,QAAQ;AACZ,UAAM,KAAK,IAAI;AAAA,MACb,CAAC,CAAC,KAAK,MAAM;AACX,cAAM,WAAW;AACjB,gBAAQ;AACR,YAAI,CAAC,OAAO,eAAgB;AAC5B,WAAG,WAAW;AACd,YAAI,SAAU;AACd,cAAM,QAAQ,YAAY,IAAI;AAC9B,cAAM,OAAO,CAAC,QAAgB;AAC5B,gBAAM,IAAI,KAAK,IAAI,IAAI,MAAM,SAAS,QAAQ;AAC9C,aAAG,cAAc,UAAU,OAAO,QAAQ,QAAQ,CAAC,CAAC;AACpD,cAAI,IAAI,EAAG,SAAQ,sBAAsB,IAAI;AAAA,QAC/C;AACA,WAAG,cAAc,UAAU,OAAO,CAAC;AACnC,gBAAQ,sBAAsB,IAAI;AAAA,MACpC;AAAA,MACA,EAAE,WAAW,IAAI;AAAA,IACnB;AACA,OAAG,QAAQ,EAAE;AACb,WAAO,MAAM;AACX,SAAG,WAAW;AACd,2BAAqB,KAAK;AAC1B,SAAG,cAAc,UAAU,OAAO,KAAK;AAAA,IACzC;AAAA,EACF,GAAG,CAAC,SAAS,OAAO,UAAU,SAAS,CAAC;AAExC,SACE,qBAAC,UAAK,cAAY,OAAO,cAAY,YAAY,WAAW,QAAQ,QAAW,WAAW,GAAG,YAAY,SAAS,GAAI,GAAG,OACvH;AAAA,wBAAC,UAAK,eAAW,MAAC,WAAU,kBACzB,gBACH;AAAA,IACC,YAAY,WACX,oBAAC,UAAK,eAAW,MAAC,WAAU,iBAEzB,WAAC,GAAG,IAAI,EAAE;AAAA,MAAI,CAAC,MAAM,GAAG,QACvB,KAAK,KAAK,IAAI,IACZ,oBAAC,UAA0B,WAAU,kBAAiB,OAAO,EAAE,cAAc,KAAK,GAChF,8BAAC,UACE,uBAAa,MAAM,EAAE,EAAE,IAAI,CAAC,MAC3B,oBAAC,UAAc,eAAJ,CAAM,CAClB,GACH,KALS,IAAI,SAAS,CAMxB,IAEA,oBAAC,UAA2B,kBAAjB,IAAI,SAAS,CAAS;AAAA,IAErC,GACF,IAEA,oBAAC,UAAK,eAAW,MAAC,KAAK,MACpB,gBACH;AAAA,IAEF,oBAAC,UAAK,WAAU,WAAU,aAAW,WAAW,WAAW,QACxD,gBACH;AAAA,KACF;AAEJ;","names":[]}

package/dist/progress.d.ts

@@ -19,11 +19,25 @@ declare const progress: tailwind_variants.TVReturnType<{
         md: {};
         lg: {};
     };
+    status: {
+        active: {};
+        paused: {
+            indicator: string;
+        };
+        error: {
+            indicator: string;
+        };
+    };
 }, {
     root: string;
     track: string;
     indicator: string;
     center: string;
+    buffer: string;
+    frame: string;
+    header: string;
+    caption: string;
+    figure: string;
 }, undefined, {
     variant: {
         bar: {
@@ -41,11 +55,25 @@ declare const progress: tailwind_variants.TVReturnType<{
         md: {};
         lg: {};
     };
+    status: {
+        active: {};
+        paused: {
+            indicator: string;
+        };
+        error: {
+            indicator: string;
+        };
+    };
 }, {
     root: string;
     track: string;
     indicator: string;
     center: string;
+    buffer: string;
+    frame: string;
+    header: string;
+    caption: string;
+    figure: string;
 }, tailwind_variants.TVReturnTypeLike<{
     variant: {
         bar: {
@@ -63,11 +91,25 @@ declare const progress: tailwind_variants.TVReturnType<{
         md: {};
         lg: {};
     };
+    status: {
+        active: {};
+        paused: {
+            indicator: string;
+        };
+        error: {
+            indicator: string;
+        };
+    };
 }, {
     root: string;
     track: string;
     indicator: string;
     center: string;
+    buffer: string;
+    frame: string;
+    header: string;
+    caption: string;
+    figure: string;
 }>>;
 type ProgressVariants = VariantProps<typeof progress>;
 type ProgressProps = Omit<React.ComponentProps<"div">, "children"> & ProgressVariants & {
@@ -85,8 +127,21 @@ type ProgressProps = Omit<React.ComponentProps<"div">, "children"> & ProgressVar
     valueText?: string;
     /** A ring's centre: an amount, a percentage, an icon. */
     children?: React.ReactNode;
+    /** How far is already available beyond the value (a video buffered ahead), between 0 and `max` — bar only. */
+    buffer?: number;
+    /** Splits the bar or the ring into this many segments: the steps of a task, the parts of a goal. */
+    segments?: number;
+    /**
+     * active · paused (the fill rests, striped: waiting for someone) · error (the fill turns to the danger colour where it stopped).
+     * @default "active"
+     */
+    status?: ProgressVariants["status"];
+    /** Shows the label above the bar, with the percentage (or `valueText`) and `eta` — bar only. */
+    showLabel?: boolean;
+    /** The time left, in words (“About 2 min left”), shown with `showLabel` and read with the value — passed translated. */
+    eta?: string;
 };
 /** A progress bar or ring: `value` / `max`, indeterminate without a value. State: `data-state` (loading · complete · indeterminate). */
-declare function Progress({ variant, size, value, max, label, valueText, className, children, ...props }: ProgressProps): React.JSX.Element;
+declare function Progress({ variant, size, value, max, label, valueText, className, children, buffer, segments, status, showLabel, eta, ...props }: ProgressProps): React.JSX.Element;
 
 export { Progress, type ProgressProps, type ProgressVariants, progress };