@krizaka/ui 3.22.0 → 3.23.0

package/dist/nav-bar.js

@@ -11,7 +11,7 @@ import {
 import "./chunk-YCIBJ6OQ.js";
 import {
   cn
-} from "./chunk-2FRWNSRO.js";
+} from "./chunk-NSLXEDIS.js";
 
 // src/nav-bar/nav-bar.tsx
 import { NavigationMenu as Nav, Slot } from "radix-ui";

package/dist/page-hero.js

@@ -1,18 +1,18 @@
+import {
+  Page
+} from "./chunk-LZNZLCOE.js";
 import {
   BlockLink
 } from "./chunk-2AGSO3WH.js";
 import {
-  Page
-} from "./chunk-DGQMDJXK.js";
+  ArrowGlyph
+} from "./chunk-XCBVFMNV.js";
 import {
   SectionBackdrop
 } from "./chunk-XVLWVTQA.js";
-import {
-  ArrowGlyph
-} from "./chunk-XCBVFMNV.js";
 import {
   cn
-} from "./chunk-4LOMIQVX.js";
+} from "./chunk-W675RFOA.js";
 
 // src/page-hero/page-hero.tsx
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/page.js

@@ -4,9 +4,9 @@ import {
   Section,
   SectionHeading,
   Ticks
-} from "./chunk-DGQMDJXK.js";
+} from "./chunk-LZNZLCOE.js";
 import "./chunk-XVLWVTQA.js";
-import "./chunk-4LOMIQVX.js";
+import "./chunk-W675RFOA.js";
 export {
   Facts,
   Page,

package/dist/popover.js

@@ -4,7 +4,7 @@ import {
 } from "./chunk-J3NC6ER4.js";
 import {
   cn
-} from "./chunk-2FRWNSRO.js";
+} from "./chunk-NSLXEDIS.js";
 
 // src/popover/popover.tsx
 import { Popover as PopoverPrimitive } from "radix-ui";

package/dist/pricing-page.js

@@ -1,6 +1,6 @@
 import {
   cn
-} from "./chunk-ZNMFG62E.js";
+} from "./chunk-KH3JOEPY.js";
 
 // src/pricing-page/pricing-page.tsx
 import { Section } from "@krizaka/ui/page";

package/dist/product-page.js

@@ -1,6 +1,6 @@
 import {
   cn
-} from "./chunk-ZNMFG62E.js";
+} from "./chunk-KH3JOEPY.js";
 
 // src/product-page/product-page.tsx
 import { ArgumentCard } from "@krizaka/ui/argument-card";

package/dist/profile-card.js

@@ -2,7 +2,7 @@ import {
   brandClass,
   cn,
   storyVariantClass
-} from "./chunk-IZ7MV6HM.js";
+} from "./chunk-XVFQZ3ZG.js";
 
 // src/profile-card/stat-gauge.tsx
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/promise-card.js

@@ -2,7 +2,7 @@ import {
   brandClass,
   cn,
   storyVariantClass
-} from "./chunk-IZ7MV6HM.js";
+} from "./chunk-XVFQZ3ZG.js";
 
 // src/promise-card/promise-card.tsx
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/radio-group.js

@@ -7,8 +7,8 @@ import {
 } from "./chunk-4QN5YJ3D.js";
 import {
   tv
-} from "./chunk-C2BRIFJG.js";
-import "./chunk-2FRWNSRO.js";
+} from "./chunk-HJFRHYCI.js";
+import "./chunk-NSLXEDIS.js";
 
 // src/radio-group/radio-group.tsx
 import { RadioGroup as RadioGroupPrimitive } from "radix-ui";

package/dist/rail-nav.d.ts

@@ -0,0 +1,149 @@
+import * as tailwind_variants from 'tailwind-variants';
+import * as React from 'react';
+
+type BrandId = "krizaka" | "orazaka" | "orochia" | "yasakia" | "yororis" | "yomizaka" | "kachizaka" | "akinaza";
+
+declare const railNav: tailwind_variants.TVReturnType<{
+    [key: string]: {
+        [key: string]: tailwind_variants.ClassValue | {
+            body?: tailwind_variants.ClassValue;
+            label?: tailwind_variants.ClassValue;
+            main?: tailwind_variants.ClassValue;
+            mark?: tailwind_variants.ClassValue;
+            group?: tailwind_variants.ClassValue;
+            toggle?: tailwind_variants.ClassValue;
+            shell?: tailwind_variants.ClassValue;
+            foot?: tailwind_variants.ClassValue;
+            icon?: tailwind_variants.ClassValue;
+            badge?: tailwind_variants.ClassValue;
+            root?: tailwind_variants.ClassValue;
+            item?: tailwind_variants.ClassValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: tailwind_variants.ClassValue | {
+            body?: tailwind_variants.ClassValue;
+            label?: tailwind_variants.ClassValue;
+            main?: tailwind_variants.ClassValue;
+            mark?: tailwind_variants.ClassValue;
+            group?: tailwind_variants.ClassValue;
+            toggle?: tailwind_variants.ClassValue;
+            shell?: tailwind_variants.ClassValue;
+            foot?: tailwind_variants.ClassValue;
+            icon?: tailwind_variants.ClassValue;
+            badge?: tailwind_variants.ClassValue;
+            root?: tailwind_variants.ClassValue;
+            item?: tailwind_variants.ClassValue;
+        };
+    };
+} | {}, {
+    shell: string;
+    root: string;
+    mark: string;
+    group: string;
+    main: string;
+    foot: string;
+    item: string;
+    icon: string;
+    label: string;
+    badge: string;
+    toggle: string;
+    body: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: tailwind_variants.ClassValue | {
+            body?: tailwind_variants.ClassValue;
+            label?: tailwind_variants.ClassValue;
+            main?: tailwind_variants.ClassValue;
+            mark?: tailwind_variants.ClassValue;
+            group?: tailwind_variants.ClassValue;
+            toggle?: tailwind_variants.ClassValue;
+            shell?: tailwind_variants.ClassValue;
+            foot?: tailwind_variants.ClassValue;
+            icon?: tailwind_variants.ClassValue;
+            badge?: tailwind_variants.ClassValue;
+            root?: tailwind_variants.ClassValue;
+            item?: tailwind_variants.ClassValue;
+        };
+    };
+} | {}, {
+    shell: string;
+    root: string;
+    mark: string;
+    group: string;
+    main: string;
+    foot: string;
+    item: string;
+    icon: string;
+    label: string;
+    badge: string;
+    toggle: string;
+    body: string;
+}, tailwind_variants.TVReturnTypeLike<unknown, {
+    shell: string;
+    root: string;
+    mark: string;
+    group: string;
+    main: string;
+    foot: string;
+    item: string;
+    icon: string;
+    label: string;
+    badge: string;
+    toggle: string;
+    body: string;
+}>>;
+/** The frame of the page: the rail, then `RailNav.Body` (the header and the content). A row on a desktop. */
+declare function RailNavShell({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+/** The column beside the rail: the `AppHeader`, then the content. On a phone it keeps clear of the tab bar. */
+declare function RailNavBody({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+type RailNavRootProps = Omit<React.ComponentProps<"nav">, "children"> & {
+    /** The navigation's accessible name (`Orazaka`, `Studio`). */
+    label: string;
+    /** The product's mark on top of the rail, as a link home (`<Link href="/"><ProductLogo id="orazaka" /></Link>`); named by the app (its `aria-label`). Hidden on a phone: `AppHeader` shows it there. */
+    mark?: React.ReactNode;
+    /** The product's brand: scopes its colours (`brand-orazaka`…) over the rail, so the accent follows. Omit it inside a page that already wears the brand. */
+    accent?: BrandId;
+    /** The main destinations: `RailNav.Item`, the ones you work in. Five at most so that they fit a phone's tab bar. */
+    children: React.ReactNode;
+    /** At the foot of the rail (settings, account), after the main items; on a phone they follow them in the same bar. `RailNav.Item`s or a control with `data-rail-item`. */
+    footer?: React.ReactNode;
+    /** Adds a button that widens the rail to show the words (desktop only). Needs `expandLabels`. */
+    expandable?: boolean;
+    /** Controlled width (pair with `onExpandedChange` to keep the choice). */
+    expanded?: boolean;
+    /** The starting width when uncontrolled. */
+    defaultExpanded?: boolean;
+    /** Called when the toggle widens or narrows the rail. */
+    onExpandedChange?: (expanded: boolean) => void;
+    /** The toggle's words, `[expand, collapse]`. */
+    expandLabels?: readonly [string, string];
+};
+/** The rail: a vertical column of icons on a desktop, a bottom tab bar on a phone. */
+declare function RailNavRoot({ label, mark, accent, children, footer, expandable, expanded: controlled, defaultExpanded, onExpandedChange, expandLabels, className, onKeyDown, ...props }: RailNavRootProps): React.JSX.Element;
+type RailNavItemProps = Omit<React.ComponentProps<"a">, "children"> & {
+    /** The item's icon (a signature icon of `@krizaka/icons`): all that shows on a desktop rail. */
+    icon: React.ReactNode;
+    /** Its words: the accessible name, the tooltip, the tab's caption on a phone, the row's text when the rail is expanded. */
+    label: string;
+    /** This is the section the user is in: `aria-current="page"`, the accent bar and the accent colour. */
+    current?: boolean;
+    /** A count (unread, pending) on the icon. Say it in words with `badgeLabel`. */
+    badge?: React.ReactNode;
+    /** The count in words (« 3 unread »), appended to the accessible name. */
+    badgeLabel?: string;
+    /** Renders your router's link with the item's look: pass it as the only child. */
+    asChild?: boolean;
+    children?: React.ReactElement;
+};
+/** A destination of the rail. */
+declare function RailNavItem({ icon, label, current, badge, badgeLabel, asChild, children, className, ...props }: RailNavItemProps): React.JSX.Element;
+declare const RailNav: {
+    Shell: typeof RailNavShell;
+    Root: typeof RailNavRoot;
+    Item: typeof RailNavItem;
+    Body: typeof RailNavBody;
+};
+
+export { RailNav, RailNavBody, RailNavItem, type RailNavItemProps, RailNavRoot, type RailNavRootProps, RailNavShell, railNav };

package/dist/rail-nav.js

@@ -0,0 +1,177 @@
+"use client";
+import {
+  ChevronGlyph
+} from "./chunk-AFY35UCB.js";
+import {
+  cn
+} from "./chunk-WU4VLSEA.js";
+
+// src/tooltip/tooltip.tsx
+import { Tooltip as TooltipPrimitive } from "radix-ui";
+
+// src/floating.ts
+var floating = "kz-pop z-50 rounded-lg border border-border-default bg-surface-2 text-fg shadow-lg outline-hidden";
+
+// src/tooltip/tooltip.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var TooltipProvider = TooltipPrimitive.Provider;
+function Tooltip({
+  content,
+  children,
+  open,
+  defaultOpen,
+  onOpenChange,
+  delayDuration = 300,
+  container,
+  sideOffset = 6,
+  collisionPadding = 8,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(TooltipPrimitive.Provider, { delayDuration, children: /* @__PURE__ */ jsxs(TooltipPrimitive.Root, { open, defaultOpen, onOpenChange, children: [
+    /* @__PURE__ */ jsx(TooltipPrimitive.Trigger, { asChild: true, children }),
+    /* @__PURE__ */ jsx(TooltipPrimitive.Portal, { container, children: /* @__PURE__ */ jsx(
+      TooltipPrimitive.Content,
+      {
+        sideOffset,
+        collisionPadding,
+        className: cn(floating, "max-w-xs px-2.5 py-1.5 text-xs font-medium origin-(--radix-tooltip-content-transform-origin)", className),
+        ...props,
+        children: content
+      }
+    ) })
+  ] }) });
+}
+
+// src/rail-nav/rail-nav.tsx
+import { Slot } from "radix-ui";
+import * as React from "react";
+import { tv } from "tailwind-variants";
+import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var railNav = tv({
+  slots: {
+    shell: "flex min-h-dvh w-full bg-surface-0 text-fg",
+    root: (
+      // Phone: a bottom tab bar, clear of the home indicator. Desktop: a sticky column that is only as wide as its icons.
+      "fixed inset-x-0 bottom-0 z-40 flex h-[calc(3.5rem+env(safe-area-inset-bottom))] flex-row border-t border-border-subtle bg-surface-1/95 pb-[env(safe-area-inset-bottom)] backdrop-blur-xl md:sticky md:inset-auto md:top-0 md:bottom-auto md:z-auto md:h-dvh md:w-14 md:shrink-0 md:flex-col md:border-t-0 md:border-r md:bg-surface-1 md:pb-0 md:backdrop-blur-none md:transition-[width] md:duration-300 motion-reduce:md:transition-none md:data-expanded:w-56"
+    ),
+    // The mark is the rail's on a desktop; hidden on a phone (the header carries it there).
+    mark: "hidden h-14 w-full shrink-0 items-center justify-center md:flex md:group-data-expanded/rail:justify-start md:group-data-expanded/rail:px-4",
+    group: "flex min-w-0 flex-row items-stretch md:flex-col md:items-center md:gap-1 md:px-1.5 md:group-data-expanded/rail:items-stretch",
+    main: "max-md:grow-(--rail-n) md:flex-1 md:py-2",
+    foot: "max-md:grow-(--rail-n) md:border-t md:border-border-subtle md:py-2",
+    item: "group/item relative flex min-w-0 flex-1 flex-col items-center justify-center gap-0.5 px-1 text-[11px] font-medium text-fg-secondary no-underline transition-colors hover:bg-surface-2 hover:text-fg focus-visible:outline-hidden focus-visible:focus-ring-inset aria-[current=page]:bg-accent-soft aria-[current=page]:text-fg-accent before:absolute before:inset-x-3 before:top-0 before:h-[3px] before:rounded-b-full before:bg-accent before:opacity-0 before:transition-opacity aria-[current=page]:before:opacity-100 md:h-10 md:w-full md:flex-none md:flex-row md:justify-center md:gap-3 md:rounded-none md:px-0 md:text-sm md:before:inset-x-auto md:before:inset-y-2 md:before:left-0 md:before:top-2 md:before:h-auto md:before:w-[3px] md:before:rounded-r-full md:before:rounded-b-none md:group-data-expanded/rail:justify-start md:group-data-expanded/rail:px-3.5 [&>svg]:h-5 [&>svg]:w-5 [&>svg]:shrink-0",
+    icon: "relative inline-flex shrink-0 items-center justify-center [&>svg]:h-5 [&>svg]:w-5",
+    label: "max-w-full truncate leading-none md:sr-only md:text-sm md:leading-normal md:group-data-expanded/rail:not-sr-only",
+    badge: "absolute -right-2 -top-1.5 inline-flex min-w-4 items-center justify-center rounded-full bg-accent px-1 text-[10px] font-bold leading-4 text-on-accent after:content-[attr(data-count)]",
+    toggle: "hidden h-10 w-full items-center justify-center gap-3 text-xs font-medium text-fg-secondary hover:bg-surface-2 hover:text-fg focus-visible:outline-hidden focus-visible:focus-ring-inset md:flex md:group-data-expanded/rail:justify-start md:group-data-expanded/rail:px-3.5",
+    body: "flex min-w-0 flex-1 flex-col max-md:pb-[calc(3.5rem+env(safe-area-inset-bottom))]"
+  }
+});
+var s = railNav();
+var RailContext = React.createContext(null);
+var useRail = () => {
+  const ctx = React.useContext(RailContext);
+  if (!ctx) throw new Error("RailNav parts must be inside <RailNav.Root>");
+  return ctx;
+};
+function RailNavShell({ className, ...props }) {
+  return /* @__PURE__ */ jsx2("div", { className: s.shell({ className }), ...props });
+}
+function RailNavBody({ className, ...props }) {
+  return /* @__PURE__ */ jsx2("div", { className: s.body({ className }), ...props });
+}
+var count = (node) => React.Children.toArray(node).length;
+function moveFocus(event) {
+  const keys = { ArrowDown: 1, ArrowRight: 1, ArrowUp: -1, ArrowLeft: -1 };
+  const step = keys[event.key];
+  if (step === void 0 && event.key !== "Home" && event.key !== "End") return;
+  const items = [...event.currentTarget.querySelectorAll("[data-rail-item]")];
+  if (items.length === 0) return;
+  const here = items.findIndex((el) => el === document.activeElement || el.contains(document.activeElement));
+  let next;
+  if (event.key === "Home") next = 0;
+  else if (event.key === "End") next = items.length - 1;
+  else if (here < 0) next = step > 0 ? 0 : items.length - 1;
+  else next = (here + step + items.length) % items.length;
+  event.preventDefault();
+  items[next]?.focus();
+}
+function RailNavRoot({
+  label,
+  mark,
+  accent,
+  children,
+  footer,
+  expandable,
+  expanded: controlled,
+  defaultExpanded = false,
+  onExpandedChange,
+  expandLabels,
+  className,
+  onKeyDown,
+  ...props
+}) {
+  const [own, setOwn] = React.useState(defaultExpanded);
+  const expanded = expandable ? controlled ?? own : false;
+  const toggle = () => {
+    if (controlled === void 0) setOwn(!expanded);
+    onExpandedChange?.(!expanded);
+  };
+  const value = React.useMemo(() => ({ expanded }), [expanded]);
+  return /* @__PURE__ */ jsx2(RailContext.Provider, { value, children: /* @__PURE__ */ jsxs2(
+    "nav",
+    {
+      "aria-label": label,
+      "data-expanded": expanded ? "" : void 0,
+      className: cn("group/rail", accent && "brand-" + accent, s.root({ className })),
+      onKeyDown: (e) => {
+        onKeyDown?.(e);
+        if (!e.defaultPrevented) moveFocus(e);
+      },
+      ...props,
+      children: [
+        mark && /* @__PURE__ */ jsx2("div", { "data-brand-mark": true, className: s.mark(), children: mark }),
+        /* @__PURE__ */ jsx2("div", { className: s.group({ className: s.main() }), style: { ["--rail-n"]: Math.max(count(children), 1) }, children }),
+        (footer || expandable) && /* @__PURE__ */ jsxs2("div", { className: s.group({ className: s.foot() }), style: { ["--rail-n"]: Math.max(count(footer), 1) }, children: [
+          footer,
+          expandable && expandLabels && /* @__PURE__ */ jsxs2("button", { type: "button", "data-rail-item": true, className: s.toggle(), "aria-expanded": expanded, onClick: toggle, children: [
+            /* @__PURE__ */ jsx2(ChevronGlyph, { direction: expanded ? "left" : "right", className: "h-4 w-4 shrink-0" }),
+            /* @__PURE__ */ jsx2("span", { className: expanded ? void 0 : "sr-only", children: expanded ? expandLabels[1] : expandLabels[0] })
+          ] })
+        ] })
+      ]
+    }
+  ) });
+}
+function RailNavItem({ icon, label, current, badge, badgeLabel, asChild, children, className, ...props }) {
+  const { expanded } = useRail();
+  const Comp = asChild ? Slot.Root : "a";
+  const inner = /* @__PURE__ */ jsxs2(Fragment, { children: [
+    /* @__PURE__ */ jsxs2("span", { className: s.icon(), children: [
+      icon,
+      badge != null && (typeof badge === "string" || typeof badge === "number") ? (
+        // Drawn by CSS, so the count is no text of the link: the visible text stays the label, which the name `Chat, 2 unread` contains.
+        /* @__PURE__ */ jsx2("span", { className: s.badge(), "data-count": badge, "aria-hidden": true })
+      ) : badge != null && /* @__PURE__ */ jsx2("span", { className: s.badge(), "aria-hidden": true, children: badge })
+    ] }),
+    /* @__PURE__ */ jsx2("span", { className: s.label(), children: label })
+  ] });
+  const link = /* @__PURE__ */ jsx2(Comp, { "data-rail-item": true, "aria-label": badgeLabel ? `${label}, ${badgeLabel}` : label, "aria-current": current ? "page" : void 0, className: s.item({ className }), ...props, children: asChild && children ? React.cloneElement(children, void 0, inner) : inner });
+  return expanded ? link : /* @__PURE__ */ jsx2(Tooltip, { content: label, side: "right", children: link });
+}
+var RailNav = {
+  Shell: RailNavShell,
+  Root: RailNavRoot,
+  Item: RailNavItem,
+  Body: RailNavBody
+};
+export {
+  RailNav,
+  RailNavBody,
+  RailNavItem,
+  RailNavRoot,
+  RailNavShell,
+  railNav
+};
+//# sourceMappingURL=rail-nav.js.map

package/dist/rail-nav.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/tooltip/tooltip.tsx","../src/floating.ts","../src/rail-nav/rail-nav.tsx"],"sourcesContent":["// Client (a portal). A short label for a control, on hover after `delayDuration` and on keyboard focus at once;\n// Escape dismisses it. It names nothing: the control keeps its own accessible name (an IconButton's `label`).\nimport { Tooltip as TooltipPrimitive } from \"radix-ui\";\nimport type * as React from \"react\";\n\nimport { cn } from \"../cn\";\nimport { floating } from \"../floating\";\n\n/** Optional, once near the root: shares `delayDuration` and the skip delay between tooltips. */\nexport const TooltipProvider = TooltipPrimitive.Provider;\n\nexport type TooltipProps = Omit<React.ComponentProps<typeof TooltipPrimitive.Content>, \"content\" | \"children\"> & {\n  /** What the tooltip says — passed translated. */\n  content: React.ReactNode;\n  /** The trigger, rendered as is (`asChild`): a focusable element. */\n  children: React.ReactNode;\n  /** Open or closed (controlled), with `onOpenChange`. */\n  open?: boolean;\n  /** Open at first, uncontrolled. */\n  defaultOpen?: boolean;\n  /** Called when it opens or closes. */\n  onOpenChange?: (open: boolean) => void;\n  /** Hover delay in ms before it opens (300 by default). */\n  delayDuration?: number;\n  /** The element the portal renders into (default: document.body). */\n  container?: HTMLElement | null;\n};\n\nexport function Tooltip({\n  content,\n  children,\n  open,\n  defaultOpen,\n  onOpenChange,\n  delayDuration = 300,\n  container,\n  sideOffset = 6,\n  collisionPadding = 8,\n  className,\n  ...props\n}: TooltipProps) {\n  return (\n    <TooltipPrimitive.Provider delayDuration={delayDuration}>\n      <TooltipPrimitive.Root open={open} defaultOpen={defaultOpen} onOpenChange={onOpenChange}>\n        <TooltipPrimitive.Trigger asChild>{children}</TooltipPrimitive.Trigger>\n        <TooltipPrimitive.Portal container={container}>\n          <TooltipPrimitive.Content\n            sideOffset={sideOffset}\n            collisionPadding={collisionPadding}\n            className={cn(floating, \"max-w-xs px-2.5 py-1.5 text-xs font-medium origin-(--radix-tooltip-content-transform-origin)\", className)}\n            {...props}\n          >\n            {content}\n          </TooltipPrimitive.Content>\n        </TooltipPrimitive.Portal>\n      </TooltipPrimitive.Root>\n    </TooltipPrimitive.Provider>\n  );\n}\n","// The one surface of everything that floats next to its trigger (popover, menu, tooltip): a raised surface, a border,\n// the large shadow and the `kz-pop` entrance from the side Radix measured (`--radix-*-transform-origin`).\nexport const floating =\n  \"kz-pop z-50 rounded-lg border border-border-default bg-surface-2 text-fg shadow-lg outline-hidden\";\n","// Client (the expand state, the arrow keys, the tooltip). The compact navigation of an application, read from Orazaka's\n// web client: a vertical rail of icons on a desktop — the product's mark on top, a tooltip on each icon, the current one\n// marked by an accent bar on its left edge, a footer for settings and the account — that becomes a bottom tab bar on a\n// phone. The same nodes in both: only the layout changes, so the items, their order and their words are written once.\n// The mark lives in the rail on a desktop; on a phone, where the rail has no room for it, `AppHeader` shows it (the rule\n// « one mark visible at every width »). Brand-aware through the tokens: `accent` scopes `.brand-<id>`.\nimport { Tooltip } from \"@krizaka/ui/tooltip\";\nimport { Slot } from \"radix-ui\";\nimport * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nimport { cn } from \"../cn\";\nimport { ChevronGlyph } from \"../glyphs\";\nimport type { BrandId } from \"../marks/ProductLogo\";\n\nexport const railNav = tv({\n  slots: {\n    shell: \"flex min-h-dvh w-full bg-surface-0 text-fg\",\n    root:\n      // Phone: a bottom tab bar, clear of the home indicator. Desktop: a sticky column that is only as wide as its icons.\n      \"fixed inset-x-0 bottom-0 z-40 flex h-[calc(3.5rem+env(safe-area-inset-bottom))] flex-row border-t border-border-subtle bg-surface-1/95 pb-[env(safe-area-inset-bottom)] backdrop-blur-xl \" +\n      \"md:sticky md:inset-auto md:top-0 md:bottom-auto md:z-auto md:h-dvh md:w-14 md:shrink-0 md:flex-col md:border-t-0 md:border-r md:bg-surface-1 md:pb-0 md:backdrop-blur-none \" +\n      \"md:transition-[width] md:duration-300 motion-reduce:md:transition-none md:data-expanded:w-56\",\n    // The mark is the rail's on a desktop; hidden on a phone (the header carries it there).\n    mark: \"hidden h-14 w-full shrink-0 items-center justify-center md:flex md:group-data-expanded/rail:justify-start md:group-data-expanded/rail:px-4\",\n    group: \"flex min-w-0 flex-row items-stretch md:flex-col md:items-center md:gap-1 md:px-1.5 md:group-data-expanded/rail:items-stretch\",\n    main: \"max-md:grow-(--rail-n) md:flex-1 md:py-2\",\n    foot: \"max-md:grow-(--rail-n) md:border-t md:border-border-subtle md:py-2\",\n    item:\n      \"group/item relative flex min-w-0 flex-1 flex-col items-center justify-center gap-0.5 px-1 text-[11px] font-medium text-fg-secondary no-underline transition-colors \" +\n      \"hover:bg-surface-2 hover:text-fg focus-visible:outline-hidden focus-visible:focus-ring-inset \" +\n      \"aria-[current=page]:bg-accent-soft aria-[current=page]:text-fg-accent \" +\n      // The accent bar: on the top edge of a tab, on the left edge of a rail item.\n      \"before:absolute before:inset-x-3 before:top-0 before:h-[3px] before:rounded-b-full before:bg-accent before:opacity-0 before:transition-opacity aria-[current=page]:before:opacity-100 \" +\n      \"md:h-10 md:w-full md:flex-none md:flex-row md:justify-center md:gap-3 md:rounded-none md:px-0 md:text-sm \" +\n      \"md:before:inset-x-auto md:before:inset-y-2 md:before:left-0 md:before:top-2 md:before:h-auto md:before:w-[3px] md:before:rounded-r-full md:before:rounded-b-none \" +\n      \"md:group-data-expanded/rail:justify-start md:group-data-expanded/rail:px-3.5 [&>svg]:h-5 [&>svg]:w-5 [&>svg]:shrink-0\",\n    icon: \"relative inline-flex shrink-0 items-center justify-center [&>svg]:h-5 [&>svg]:w-5\",\n    label: \"max-w-full truncate leading-none md:sr-only md:text-sm md:leading-normal md:group-data-expanded/rail:not-sr-only\",\n    badge:\n      \"absolute -right-2 -top-1.5 inline-flex min-w-4 items-center justify-center rounded-full bg-accent px-1 text-[10px] font-bold leading-4 text-on-accent after:content-[attr(data-count)]\",\n    toggle:\n      \"hidden h-10 w-full items-center justify-center gap-3 text-xs font-medium text-fg-secondary hover:bg-surface-2 hover:text-fg focus-visible:outline-hidden focus-visible:focus-ring-inset md:flex \" +\n      \"md:group-data-expanded/rail:justify-start md:group-data-expanded/rail:px-3.5\",\n    body: \"flex min-w-0 flex-1 flex-col max-md:pb-[calc(3.5rem+env(safe-area-inset-bottom))]\",\n  },\n});\nconst s = railNav();\n\ninterface RailState {\n  expanded: boolean;\n}\nconst RailContext = React.createContext<RailState | null>(null);\nconst useRail = () => {\n  const ctx = React.useContext(RailContext);\n  if (!ctx) throw new Error(\"RailNav parts must be inside <RailNav.Root>\");\n  return ctx;\n};\n\n/** The frame of the page: the rail, then `RailNav.Body` (the header and the content). A row on a desktop. */\nexport function RailNavShell({ className, ...props }: React.ComponentProps<\"div\">) {\n  return <div className={s.shell({ className })} {...props} />;\n}\n\n/** The column beside the rail: the `AppHeader`, then the content. On a phone it keeps clear of the tab bar. */\nexport function RailNavBody({ className, ...props }: React.ComponentProps<\"div\">) {\n  return <div className={s.body({ className })} {...props} />;\n}\n\nexport type RailNavRootProps = Omit<React.ComponentProps<\"nav\">, \"children\"> & {\n  /** The navigation's accessible name (`Orazaka`, `Studio`). */\n  label: string;\n  /** The product's mark on top of the rail, as a link home (`<Link href=\"/\"><ProductLogo id=\"orazaka\" /></Link>`); named by the app (its `aria-label`). Hidden on a phone: `AppHeader` shows it there. */\n  mark?: React.ReactNode;\n  /** The product's brand: scopes its colours (`brand-orazaka`…) over the rail, so the accent follows. Omit it inside a page that already wears the brand. */\n  accent?: BrandId;\n  /** The main destinations: `RailNav.Item`, the ones you work in. Five at most so that they fit a phone's tab bar. */\n  children: React.ReactNode;\n  /** At the foot of the rail (settings, account), after the main items; on a phone they follow them in the same bar. `RailNav.Item`s or a control with `data-rail-item`. */\n  footer?: React.ReactNode;\n  /** Adds a button that widens the rail to show the words (desktop only). Needs `expandLabels`. */\n  expandable?: boolean;\n  /** Controlled width (pair with `onExpandedChange` to keep the choice). */\n  expanded?: boolean;\n  /** The starting width when uncontrolled. */\n  defaultExpanded?: boolean;\n  /** Called when the toggle widens or narrows the rail. */\n  onExpandedChange?: (expanded: boolean) => void;\n  /** The toggle's words, `[expand, collapse]`. */\n  expandLabels?: readonly [string, string];\n};\n\nconst count = (node: React.ReactNode) => React.Children.toArray(node).length;\n\n/** Moves the focus along the rail's items with the arrows (↑ ↓ on the rail, ← → on the tab bar; both always work), Home and End. */\nfunction moveFocus(event: React.KeyboardEvent<HTMLElement>) {\n  const keys: Record<string, number> = { ArrowDown: 1, ArrowRight: 1, ArrowUp: -1, ArrowLeft: -1 };\n  const step = keys[event.key];\n  if (step === undefined && event.key !== \"Home\" && event.key !== \"End\") return;\n  const items = [...event.currentTarget.querySelectorAll<HTMLElement>(\"[data-rail-item]\")];\n  if (items.length === 0) return;\n  const here = items.findIndex((el) => el === document.activeElement || el.contains(document.activeElement));\n  let next: number;\n  if (event.key === \"Home\") next = 0;\n  else if (event.key === \"End\") next = items.length - 1;\n  else if (here < 0) next = step > 0 ? 0 : items.length - 1;\n  else next = (here + step + items.length) % items.length;\n  event.preventDefault();\n  items[next]?.focus();\n}\n\n/** The rail: a vertical column of icons on a desktop, a bottom tab bar on a phone. */\nexport function RailNavRoot({\n  label, mark, accent, children, footer, expandable, expanded: controlled, defaultExpanded = false, onExpandedChange, expandLabels, className, onKeyDown, ...props\n}: RailNavRootProps) {\n  const [own, setOwn] = React.useState(defaultExpanded);\n  const expanded = expandable ? (controlled ?? own) : false;\n  const toggle = () => {\n    if (controlled === undefined) setOwn(!expanded);\n    onExpandedChange?.(!expanded);\n  };\n  const value = React.useMemo(() => ({ expanded }), [expanded]);\n  return (\n    <RailContext.Provider value={value}>\n      <nav\n        aria-label={label}\n        data-expanded={expanded ? \"\" : undefined}\n        className={cn(\"group/rail\", accent && \"brand-\" + accent, s.root({ className }))}\n        onKeyDown={(e) => {\n          onKeyDown?.(e);\n          if (!e.defaultPrevented) moveFocus(e);\n        }}\n        {...props}\n      >\n        {mark && (\n          <div data-brand-mark className={s.mark()}>\n            {mark}\n          </div>\n        )}\n        <div className={s.group({ className: s.main() })} style={{ [\"--rail-n\" as string]: Math.max(count(children), 1) }}>\n          {children}\n        </div>\n        {(footer || expandable) && (\n          <div className={s.group({ className: s.foot() })} style={{ [\"--rail-n\" as string]: Math.max(count(footer), 1) }}>\n            {footer}\n            {expandable && expandLabels && (\n              <button type=\"button\" data-rail-item className={s.toggle()} aria-expanded={expanded} onClick={toggle}>\n                <ChevronGlyph direction={expanded ? \"left\" : \"right\"} className=\"h-4 w-4 shrink-0\" />\n                <span className={expanded ? undefined : \"sr-only\"}>{expanded ? expandLabels[1] : expandLabels[0]}</span>\n              </button>\n            )}\n          </div>\n        )}\n      </nav>\n    </RailContext.Provider>\n  );\n}\n\nexport type RailNavItemProps = Omit<React.ComponentProps<\"a\">, \"children\"> & {\n  /** The item's icon (a signature icon of `@krizaka/icons`): all that shows on a desktop rail. */\n  icon: React.ReactNode;\n  /** Its words: the accessible name, the tooltip, the tab's caption on a phone, the row's text when the rail is expanded. */\n  label: string;\n  /** This is the section the user is in: `aria-current=\"page\"`, the accent bar and the accent colour. */\n  current?: boolean;\n  /** A count (unread, pending) on the icon. Say it in words with `badgeLabel`. */\n  badge?: React.ReactNode;\n  /** The count in words (« 3 unread »), appended to the accessible name. */\n  badgeLabel?: string;\n  /** Renders your router's link with the item's look: pass it as the only child. */\n  asChild?: boolean;\n  children?: React.ReactElement;\n};\n\n/** A destination of the rail. */\nexport function RailNavItem({ icon, label, current, badge, badgeLabel, asChild, children, className, ...props }: RailNavItemProps) {\n  const { expanded } = useRail();\n  const Comp = asChild ? Slot.Root : \"a\";\n  const inner = (\n    <>\n      <span className={s.icon()}>\n        {icon}\n        {badge != null && (typeof badge === \"string\" || typeof badge === \"number\") ? (\n          // Drawn by CSS, so the count is no text of the link: the visible text stays the label, which the name `Chat, 2 unread` contains.\n          <span className={s.badge()} data-count={badge} aria-hidden />\n        ) : (\n          badge != null && <span className={s.badge()} aria-hidden>{badge}</span>\n        )}\n      </span>\n      <span className={s.label()}>{label}</span>\n    </>\n  );\n  const link = (\n    <Comp data-rail-item aria-label={badgeLabel ? `${label}, ${badgeLabel}` : label} aria-current={current ? \"page\" : undefined} className={s.item({ className })} {...props}>\n      {asChild && children ? React.cloneElement(children, undefined, inner) : inner}\n    </Comp>\n  );\n  // Expanded, the words are on the row; collapsed, the tooltip says them (Escape dismisses it, the keyboard focus shows it).\n  return expanded ? link : <Tooltip content={label} side=\"right\">{link}</Tooltip>;\n}\n\nexport const RailNav = {\n  Shell: RailNavShell,\n  Root: RailNavRoot,\n  Item: RailNavItem,\n  Body: RailNavBody,\n};\n"],"mappings":"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","names":["jsx","jsxs"]}

package/dist/scroll-stage.js

@@ -5,7 +5,7 @@ import {
 } from "./chunk-555LWYIN.js";
 import {
   cn
-} from "./chunk-G3ETON2A.js";
+} from "./chunk-WU4VLSEA.js";
 
 // src/scroll-stage/scroll-stage.tsx
 import * as React from "react";