1d:I[53266,["/_next/static/immutable/chunks/26aurwqmzxm76.js","/_next/static/immutable/chunks/05170pppx2k2h.js","/_next/static/immutable/chunks/39elksblf9txj.js","/_next/static/immutable/chunks/2s6zgp9pxvdhv.js","/_next/static/immutable/chunks/0vrgcfw5ofcpy.js","/_next/static/immutable/chunks/1k909hfpkg-9o.js","/_next/static/immutable/chunks/120_ecefuttit.js","/_next/static/immutable/chunks/17odxrx2h79dx.js"],"DocsPage"] 1e:I[53266,["/_next/static/immutable/chunks/26aurwqmzxm76.js","/_next/static/immutable/chunks/05170pppx2k2h.js","/_next/static/immutable/chunks/39elksblf9txj.js","/_next/static/immutable/chunks/2s6zgp9pxvdhv.js","/_next/static/immutable/chunks/0vrgcfw5ofcpy.js","/_next/static/immutable/chunks/1k909hfpkg-9o.js","/_next/static/immutable/chunks/120_ecefuttit.js","/_next/static/immutable/chunks/17odxrx2h79dx.js"],"DocsTitle"] 1f:I[53266,["/_next/static/immutable/chunks/26aurwqmzxm76.js","/_next/static/immutable/chunks/05170pppx2k2h.js","/_next/static/immutable/chunks/39elksblf9txj.js","/_next/static/immutable/chunks/2s6zgp9pxvdhv.js","/_next/static/immutable/chunks/0vrgcfw5ofcpy.js","/_next/static/immutable/chunks/1k909hfpkg-9o.js","/_next/static/immutable/chunks/120_ecefuttit.js","/_next/static/immutable/chunks/17odxrx2h79dx.js"],"DocsDescription"] 20:I[53266,["/_next/static/immutable/chunks/26aurwqmzxm76.js","/_next/static/immutable/chunks/05170pppx2k2h.js","/_next/static/immutable/chunks/39elksblf9txj.js","/_next/static/immutable/chunks/2s6zgp9pxvdhv.js","/_next/static/immutable/chunks/0vrgcfw5ofcpy.js","/_next/static/immutable/chunks/1k909hfpkg-9o.js","/_next/static/immutable/chunks/120_ecefuttit.js","/_next/static/immutable/chunks/17odxrx2h79dx.js"],"DocsBody"] 21:I[26731,["/_next/static/immutable/chunks/26aurwqmzxm76.js","/_next/static/immutable/chunks/05170pppx2k2h.js","/_next/static/immutable/chunks/39elksblf9txj.js","/_next/static/immutable/chunks/2s6zgp9pxvdhv.js","/_next/static/immutable/chunks/0vrgcfw5ofcpy.js","/_next/static/immutable/chunks/1k909hfpkg-9o.js","/_next/static/immutable/chunks/120_ecefuttit.js","/_next/static/immutable/chunks/17odxrx2h79dx.js"],"ComponentPreview"] 22:I[25325,["/_next/static/immutable/chunks/26aurwqmzxm76.js","/_next/static/immutable/chunks/05170pppx2k2h.js","/_next/static/immutable/chunks/39elksblf9txj.js","/_next/static/immutable/chunks/2s6zgp9pxvdhv.js","/_next/static/immutable/chunks/0vrgcfw5ofcpy.js","/_next/static/immutable/chunks/1k909hfpkg-9o.js","/_next/static/immutable/chunks/120_ecefuttit.js","/_next/static/immutable/chunks/17odxrx2h79dx.js"],"CodeTabs"] 23:T25d8,"use client"; import type { ComponentProps, ElementType, ReactElement, ReactNode } from "react"; import { cn } from "@/registry/tier-2-primitives/lib/cn"; import { focusRing } from "@/registry/tier-2-primitives/lib/cva"; import { Slot } from "@radix-ui/react-slot"; import { ChevronRightGlyph } from "@/registry/tier-2-primitives/glyphs"; import { IconSlot } from "@/registry/tier-2-primitives/icon-slot"; /** * Navigation. * * ROUTING IS THE APP'S JOB, NOT THE DESIGN SYSTEM'S * Every item takes an `as` prop, defaulting to ``. In a Next.js app pass * `as={Link}`; with TanStack Router pass its Link. The design system owns how * a nav item looks and announces itself, and stays out of how it navigates — * which is what keeps the folder copyable into a repo with a different * router. * * The current page is marked `aria-current="page"`, not just coloured. Colour * alone doesn't tell a screen-reader user where they are, and it doesn't * survive greyscale. */ export type NavItem = { label: string; href: string; /** Leading icon as a node: `icon={}`. */ icon?: ReactElement; /** A count or a status dot. Give it its own accessible text. */ badge?: ReactNode; active?: boolean; }; /* --------------------------------------------------------------- skip link */ /** * The first tab stop on every page. * * Invisible until focused, then it appears. Without it, a keyboard user tabs * through the entire header on every single page before reaching the content. */ export function SkipLink({ href = "#main", children = "Skip to content", }: { href?: string; children?: ReactNode; }) { return ( {children} ); } /* ------------------------------------------------------------------ navbar */ export function Navbar({ className, children, ...props }: ComponentProps<"header">) { return (

{children}

); } /** The horizontal set of links inside a Navbar. */ export function NavList({ items, as: LinkComponent = "a", className, }: { items: NavItem[]; as?: ElementType; className?: string; }) { return ( ); } /* -------------------------------------------------------------- side nav -- */ /** * The vertical nav for a dashboard — Seller, Bulk, Admin. * * Grouped with real headings so a screen reader can jump between sections * rather than reading forty links in a row. */ export function SideNav({ groups, as: LinkComponent = "a", className, }: { groups: { label?: string; items: NavItem[] }[]; as?: ElementType; className?: string; }) { return ( ); } /* ------------------------------------------------------------ breadcrumbs - */ /** * Breadcrumb. * * An ordered list, because the order is the meaning. The last item is the * current page and is not a link — linking to the page you are on is a dead * end that screen-reader users have to discover by following it. */ export function Breadcrumb({ items, as: LinkComponent = "a", className, }: { items: { label: string; href?: string }[]; as?: ElementType; className?: string; }) { return ( ); } /* ------------------------------------------- breadcrumb: composition parts */ /** * The shadcn-shaped breadcrumb, for a trail whose crumbs aren't a flat list — * a dropdown of collapsed ancestors, a crumb rendered by the app's router link. * * `Breadcrumb` above takes `items` and is the one to reach for; these exist so * a shadcn call site ports across without being rewritten. Note the naming * collision that follows from that: here `Breadcrumb` is the `

` wrapper, * whereas the array version is the whole trail. */ export function BreadcrumbNav({ className, ...props }: ComponentProps<"nav">) { return

; } export function BreadcrumbList({ className, ...props }: ComponentProps<"ol">) { return (

; } export function BreadcrumbLink({ className, asChild = false, ...props }: ComponentProps<"a"> & { asChild?: boolean }) { const Root = asChild ? Slot : "a"; return ( ); } /** The current page. Not a link — you are already here. */ export function BreadcrumbPage({ className, ...props }: ComponentProps<"span">) { return ( ); } export function BreadcrumbSeparator({ children, className, ...props }: ComponentProps<"li">) { return (
{children ?? }

… More

"use client";

import type { ComponentProps, ElementType, ReactElement, ReactNode } from "react";
import { cn } from "@/registry/tier-2-primitives/lib/cn";
import { focusRing } from "@/registry/tier-2-primitives/lib/cva";
import { Slot } from "@radix-ui/react-slot";
import { ChevronRightGlyph } from "@/registry/tier-2-primitives/glyphs";
import { IconSlot } from "@/registry/tier-2-primitives/icon-slot";

/**
 * Navigation.
 *
 * ROUTING IS THE APP'S JOB, NOT THE DESIGN SYSTEM'S
 *   Every item takes an `as` prop, defaulting to `<a>`. In a Next.js app pass
 *   `as={Link}`; with TanStack Router pass its Link. The design system owns how
 *   a nav item looks and announces itself, and stays out of how it navigates —
 *   which is what keeps the folder copyable into a repo with a different
 *   router.
 *
 * The current page is marked `aria-current="page"`, not just coloured. Colour
 * alone doesn't tell a screen-reader user where they are, and it doesn't
 * survive greyscale.
 */

export type NavItem = {
  label: string;
  href: string;
  /** Leading icon as a node: `icon={<Icon name="house" />}`. */
  icon?: ReactElement;
  /** A count or a status dot. Give it its own accessible text. */
  badge?: ReactNode;
  active?: boolean;
};

/* --------------------------------------------------------------- skip link */

/**
 * The first tab stop on every page.
 *
 * Invisible until focused, then it appears. Without it, a keyboard user tabs
 * through the entire header on every single page before reaching the content.
 */
export function SkipLink({
  href = "#main",
  children = "Skip to content",
}: {
  href?: string;
  children?: ReactNode;
}) {
  return (
    <a
      href={href}
      className={cn(
        "sr-only focus:not-sr-only",
        "focus:fixed focus:top-3 focus:left-3 focus:z-tooltip",
        "focus:rounded-pill focus:bg-surface-inverse focus:px-4 focus:py-2.5",
        "focus:font-ui focus:text-label focus:text-text-inverse",
      )}
    >
      {children}
    </a>
  );
}

/* ------------------------------------------------------------------ navbar */

export function Navbar({ className, children, ...props }: ComponentProps<"header">) {
  return (
    <header
      data-slot="navbar"
      className={cn(
        "sticky top-0 z-sticky w-full border-b border-border-subtle",
        "bg-surface-raised/95 backdrop-blur-sm shadow-hairline",
        className,
      )}
      {...props}
    >
      <div className="woohl-container flex h-16 items-center gap-6">{children}</div>
    </header>
  );
}

/** The horizontal set of links inside a Navbar. */
export function NavList({
  items,
  as: LinkComponent = "a",
  className,
}: {
  items: NavItem[];
  as?: ElementType;
  className?: string;
}) {
  return (
    <nav aria-label="Main" className={cn("hidden md:block", className)}>
      <ul className="flex items-center gap-1">
        {items.map((item) => (
          <li key={item.href}>
            <LinkComponent
              href={item.href}
              aria-current={item.active ? "page" : undefined}
              className={cn(
                "inline-flex items-center gap-2 rounded-pill px-3.5 py-2",
                "font-ui text-body font-semibold transition-colors motion-instant",
                item.active
                  ? "bg-surface-sunken text-text-primary"
                  : "text-text-secondary hover:bg-surface-sunken hover:text-text-primary",
                focusRing,
              )}
            >
              {item.icon && <IconSlot icon={item.icon} size={16} />}
              {item.label}
              {item.badge}
            </LinkComponent>
          </li>
        ))}
      </ul>
    </nav>
  );
}

/* -------------------------------------------------------------- side nav -- */

/**
 * The vertical nav for a dashboard — Seller, Bulk, Admin.
 *
 * Grouped with real headings so a screen reader can jump between sections
 * rather than reading forty links in a row.
 */
export function SideNav({
  groups,
  as: LinkComponent = "a",
  className,
}: {
  groups: { label?: string; items: NavItem[] }[];
  as?: ElementType;
  className?: string;
}) {
  return (
    <nav aria-label="Sections" className={cn("font-ui", className)}>
      {groups.map((group, index) => (
        <div key={group.label ?? index} className={index > 0 ? "mt-6" : undefined}>
          {group.label && (
            <h2 className="eyebrow mb-2 px-3 text-text-muted">{group.label}</h2>
          )}
          <ul className="flex flex-col gap-0.5">
            {group.items.map((item) => (
              <li key={item.href}>
                <LinkComponent
                  href={item.href}
                  aria-current={item.active ? "page" : undefined}
                  className={cn(
                    "flex items-center gap-2.5 rounded-md px-3 py-2",
                    "text-body font-medium transition-colors motion-instant",
                    item.active
                      ? "bg-surface-accent-subtle font-semibold text-text-accent-strong"
                      : "text-text-secondary hover:bg-surface-sunken hover:text-text-primary",
                    focusRing,
                  )}
                >
                  {item.icon && <IconSlot icon={item.icon} size={17} />}
                  <span className="flex-1">{item.label}</span>
                  {item.badge}
                </LinkComponent>
              </li>
            ))}
          </ul>
        </div>
      ))}
    </nav>
  );
}

/* ------------------------------------------------------------ breadcrumbs - */

/**
 * Breadcrumb.
 *
 * An ordered list, because the order is the meaning. The last item is the
 * current page and is not a link — linking to the page you are on is a dead
 * end that screen-reader users have to discover by following it.
 */
export function Breadcrumb({
  items,
  as: LinkComponent = "a",
  className,
}: {
  items: { label: string; href?: string }[];
  as?: ElementType;
  className?: string;
}) {
  return (
    <nav aria-label="Breadcrumb" className={cn("font-ui", className)}>
      <ol className="flex flex-wrap items-center gap-1.5">
        {items.map((item, index) => {
          const last = index === items.length - 1;
          return (
            <li key={item.label} className="flex items-center gap-1.5">
              {last || !item.href ? (
                <span
                  aria-current={last ? "page" : undefined}
                  className={cn(
                    "text-label",
                    last ? "font-bold text-text-primary" : "text-text-muted",
                  )}
                >
                  {item.label}
                </span>
              ) : (
                <LinkComponent
                  href={item.href}
                  className={cn(
                    "rounded-xs text-label font-medium text-text-muted transition-colors motion-instant hover:text-text-primary",
                    focusRing,
                  )}
                >
                  {item.label}
                </LinkComponent>
              )}
              {!last && (
                <ChevronRightGlyph size={13} className="text-text-muted" />
              )}
            </li>
          );
        })}
      </ol>
    </nav>
  );
}

/* ------------------------------------------- breadcrumb: composition parts */

/**
 * The shadcn-shaped breadcrumb, for a trail whose crumbs aren't a flat list —
 * a dropdown of collapsed ancestors, a crumb rendered by the app's router link.
 *
 * `Breadcrumb` above takes `items` and is the one to reach for; these exist so
 * a shadcn call site ports across without being rewritten. Note the naming
 * collision that follows from that: here `Breadcrumb` is the `<nav>` wrapper,
 * whereas the array version is the whole trail.
 */
export function BreadcrumbNav({ className, ...props }: ComponentProps<"nav">) {
  return <nav aria-label="Breadcrumb" className={cn("font-ui", className)} {...props} />;
}

export function BreadcrumbList({ className, ...props }: ComponentProps<"ol">) {
  return (
    <ol
      data-slot="breadcrumb-list"
      className={cn("flex flex-wrap items-center gap-1.5 text-label", className)}
      {...props}
    />
  );
}

export function BreadcrumbItem({ className, ...props }: ComponentProps<"li">) {
  return <li className={cn("inline-flex items-center gap-1.5", className)} {...props} />;
}

export function BreadcrumbLink({
  className,
  asChild = false,
  ...props
}: ComponentProps<"a"> & { asChild?: boolean }) {
  const Root = asChild ? Slot : "a";
  return (
    <Root
      className={cn(
        "text-text-secondary transition-colors hover:text-text-primary",
        focusRing,
        className,
      )}
      {...props}
    />
  );
}

/** The current page. Not a link — you are already here. */
export function BreadcrumbPage({ className, ...props }: ComponentProps<"span">) {
  return (
    <span
      role="link"
      aria-disabled="true"
      aria-current="page"
      className={cn("text-text-primary", className)}
      {...props}
    />
  );
}

export function BreadcrumbSeparator({ children, className, ...props }: ComponentProps<"li">) {
  return (
    <li role="presentation" aria-hidden className={cn("text-text-muted", className)} {...props}>
      {children ?? <ChevronRightGlyph size={13} />}
    </li>
  );
}

export function BreadcrumbEllipsis({ className, ...props }: ComponentProps<"span">) {
  return (
    <span
      role="presentation"
      aria-hidden
      className={cn("flex size-5 items-center justify-center text-text-muted", className)}
      {...props}
    >
      &#8230;
      <span className="sr-only">More</span>
    </span>
  );
}