@seekalfred/primitives 0.6.0 → 0.7.3

package/dist/breadcrumb/breadcrumb.js

@@ -54,7 +54,7 @@ const breadcrumbLinkVariants = cva([
 	"data-[focus-visible]:outline-(length:--focus-ring-width)",
 	"data-[focus-visible]:outline-offset-(--focus-ring-offset)",
 	"data-[focus-visible]:outline-(--color-ring)",
-	"data-[current]:text-foreground data-[current]:font-normal data-[current]:cursor-default",
+	"data-[current]:text-foreground data-[current]:font-semibold data-[current]:cursor-default",
 	"[&_svg]:pointer-events-none [&_svg]:shrink-0",
 	"[&_svg:not([class*='size-'])]:size-(--icon-sm)"
 ]);
@@ -99,8 +99,17 @@ const BreadcrumbItem = forwardRef(function BreadcrumbItem({ className, children,
 		}), /* @__PURE__ */ jsx("span", {
 			"aria-hidden": "true",
 			"data-slot": "breadcrumb-separator",
-			className: "shrink-0 select-none group-data-[current]:hidden",
-			children: "/"
+			className: "inline-flex shrink-0 items-center select-none group-data-[current]:hidden",
+			children: /* @__PURE__ */ jsx("svg", {
+				viewBox: "0 0 16 16",
+				fill: "none",
+				stroke: "currentColor",
+				strokeWidth: "1.5",
+				strokeLinecap: "round",
+				strokeLinejoin: "round",
+				className: "block size-3.5 rtl:-scale-x-100",
+				children: /* @__PURE__ */ jsx("path", { d: "m6 3.5 4.5 4.5L6 12.5" })
+			})
 		})]
 	});
 });

package/dist/breadcrumb/breadcrumb.js.map

@@ -1 +1 @@
-{"version":3,"file":"breadcrumb.js","names":["Breadcrumbs","AriaBreadcrumbs","AriaBreadcrumb","AriaLink"],"sources":["../../src/breadcrumb/breadcrumb.tsx"],"sourcesContent":["\"use client\";\n\nimport { cva } from \"class-variance-authority\";\nimport {\n  Children,\n  createContext,\n  forwardRef,\n  useContext,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n  type ReactNode,\n} from \"react\";\nimport {\n  Breadcrumb as AriaBreadcrumb,\n  Breadcrumbs as AriaBreadcrumbs,\n  Link as AriaLink,\n  type BreadcrumbProps as AriaBreadcrumbProps,\n  type BreadcrumbsProps as AriaBreadcrumbsProps,\n} from \"react-aria-components\";\n\nimport { cn, cnAll } from \"../lib/cn.js\";\nimport { useFlip } from \"../lib/flip.js\";\nimport { mergeRefs } from \"../lib/merge-refs.js\";\n\n/**\n * Breadcrumbs, ported from the legacy shadcn/Radix component onto React\n * Aria's Breadcrumbs collection.\n *\n * SIX LEGACY PARTS COLLAPSE TO TWO, and not for tidiness -- React Aria's\n * `Breadcrumbs` is a real collection, so it knows which item is last:\n *\n * | legacy              | uses | fate                                        |\n * | ------------------- | ---- | ------------------------------------------- |\n * | Breadcrumb          |    2 | -> `Breadcrumbs` (nav + ol)                 |\n * | BreadcrumbList      |    2 | dropped -- `Breadcrumbs` IS the `<ol>`      |\n * | BreadcrumbItem      |    6 | -> `BreadcrumbItem`                         |\n * | BreadcrumbLink      |    4 | merged into `BreadcrumbItem` as `href`      |\n * | BreadcrumbPage      |    2 | dropped -- the last crumb is auto-current   |\n * | BreadcrumbSeparator |    4 | dropped -- every non-last crumb draws one   |\n * | BreadcrumbEllipsis  |    0 | dropped -- zero call sites                  |\n *\n * The collection is also why the separator CANNOT stay a component: RAC\n * builds its item list from the children, so a `<BreadcrumbSeparator/>`\n * sibling would be a non-item node inside a collection and there is nowhere\n * legal to put it.\n *\n * Every string in the cva blocks below is a STATIC literal. Tailwind scans\n * source text, so a class assembled at runtime is invisible to it and would\n * simply never be emitted -- the component would render unstyled with no\n * error anywhere.\n */\n/** True once the first render is done: a crumb that mounts after that slides in; the ones that were there at first are still. */\nconst TrailReady = createContext(false);\n\nexport const breadcrumbsVariants = cva([\n  \"flex flex-wrap items-center gap-2\",\n\n  // The user-agent `<ol>`: decimal markers, a 40px inline padding and a 1em\n  // block margin. The reset in @seekalfred/styles is OPT-IN, so a consumer\n  // may load none -- unreset, the trail renders as a numbered, indented\n  // list. The Accordion shipped its panel in the browser's serif for exactly\n  // this family of reason.\n  \"m-0 list-none p-0\",\n\n  // leading-* AFTER text-*: tailwind-merge treats a later text-* as owning\n  // line-height and silently strips a leading-* that precedes it.\n  \"font-sans text-sm leading-(--leading-normal) text-muted-foreground\",\n\n  // box-border: content-box would add any padding a consumer sets on top of\n  // a constrained width. The Alert shipped overflowing by 46px that way.\n  \"box-border break-words\",\n]);\n\nexport const breadcrumbItemVariants = cva([\n  // `group` is load-bearing: the separator hides itself from the current\n  // crumb via group-data-[current], and RAC puts data-current on the <li>,\n  // which CSS cannot look upward to from the span.\n  \"group inline-flex items-center gap-2\",\n]);\n\nexport const breadcrumbLinkVariants = cva([\n  \"inline-flex items-center gap-1.5\",\n\n  // The user-agent `<a>`: -webkit-link blue and a permanent underline. Left\n  // alone, every crumb is blue, and the hover underline below stops being a\n  // state cue at all because it is already on.\n  \"font-sans text-muted-foreground no-underline\",\n  \"rounded-sm cursor-pointer\",\n  \"motion-safe:transition-colors motion-safe:duration-(--duration-quick) motion-safe:ease-settle\",\n\n  // Hover is NOT colour-only. The legacy component moved muted-foreground to\n  // foreground and nothing else; under forced-colors the user's palette\n  // overrides both and the cue vanishes entirely (WCAG 1.4.1, and\n  // ARCHITECTURE section 5 rule 6). The underline survives any colour mode.\n  \"data-[hovered]:text-foreground data-[hovered]:underline\",\n\n  // outline-solid is load-bearing, not decoration. `outline-none` sets BOTH\n  // outline-style:none and --tw-outline-style:none, and the width utility\n  // resolves its style from that same variable -- so a focus variant can\n  // apply a width and a colour while faithfully re-applying style:none and\n  // painting nothing. Button shipped exactly that: keyboard-focusable with\n  // no visible ring, and every gate stayed green because axe has no\n  // focus-indicator rule.\n  \"outline-none\",\n  \"data-[focus-visible]:outline-solid\",\n  \"data-[focus-visible]:outline-(length:--focus-ring-width)\",\n  \"data-[focus-visible]:outline-offset-(--focus-ring-offset)\",\n  \"data-[focus-visible]:outline-(--color-ring)\",\n\n  // The current crumb. RAC forces isDisabled on it, so React Aria renders a\n  // <span role=\"link\" aria-disabled=\"true\" aria-current=\"page\"> with no\n  // tabIndex -- byte for byte the legacy BreadcrumbPage, minus the chance of\n  // hand-writing it onto the wrong item.\n  \"data-[current]:text-foreground data-[current]:font-normal data-[current]:cursor-default\",\n\n  \"[&_svg]:pointer-events-none [&_svg]:shrink-0\",\n  \"[&_svg:not([class*='size-'])]:size-(--icon-sm)\",\n]);\n\n/**\n * A navigation trail.\n *\n * The last child is the current page: give it no `href`, and React Aria\n * marks it `aria-current=\"page\"` and takes it out of the tab order.\n *\n * @example\n * <Breadcrumbs>\n *   <BreadcrumbItem href=\"/\">Home</BreadcrumbItem>\n *   <BreadcrumbItem href=\"/design-thinking\">Design Thinking</BreadcrumbItem>\n *   <BreadcrumbItem>User Personas</BreadcrumbItem>\n * </Breadcrumbs>\n */\nexport interface BreadcrumbsProps\n  extends Omit<\n    AriaBreadcrumbsProps<object>,\n    \"className\" | \"style\" | \"children\" | \"items\" | \"dependencies\"\n  > {\n  /**\n   * `BreadcrumbItem` elements. Static children only: `items` and the render\n   * function are not exposed, because no call site builds a trail from data\n   * and the generic they require leaks into every consumer's types.\n   */\n  children?: ReactNode;\n  /**\n   * Extra classes, merged last so they win conflicts with ours.\n   *\n   * They land on the `<ol>`, where our own classes are, so `tailwind-merge`\n   * can actually resolve a conflict. The `<nav>` is an unstyled landmark\n   * wrapper.\n   */\n  className?: string;\n  /**\n   * Accessible name for the navigation landmark. Only worth changing when a\n   * page has more than one trail.\n   *\n   * @default \"Breadcrumb\"\n   */\n  \"aria-label\"?: string;\n}\n\nexport const Breadcrumbs = forwardRef<HTMLOListElement, BreadcrumbsProps>(function Breadcrumbs(\n  { className, children, \"aria-label\": ariaLabel = \"Breadcrumb\", ...props },\n  ref,\n) {\n  const list = useRef<HTMLOListElement | null>(null);\n  const refs = useMemo(() => mergeRefs(ref, list), [ref]);\n  const [ready, setReady] = useState(false);\n  useEffect(() => setReady(true), []);\n  // When the trail changes, the crumbs that stay slide to their new place.\n  useFlip(list, Children.toArray(children).map((child) => (child as { key?: string }).key).join(\"/\"));\n  return (\n    // RAC renders the <ol> and puts its aria-label there; it does NOT render\n    // a landmark. Dropping the <nav> would silently remove the thing screen\n    // reader users actually navigate by, so it is added back here. Both\n    // carry the same name deliberately -- RAC falls back to a localized\n    // \"Breadcrumbs\" when aria-label is absent, so the <ol> is named either\n    // way and letting the two names diverge would be the worse outcome.\n    <nav aria-label={ariaLabel} data-slot=\"breadcrumb\">\n      <AriaBreadcrumbs\n        // The ref goes on the <ol>, not the <nav>: the nav is this\n        // component's OWN added landmark wrapper, not something React Aria\n        // renders, so the real list element is one level in.\n        ref={refs}\n        {...props}\n        aria-label={ariaLabel}\n        data-slot=\"breadcrumb-list\"\n        className={cn(breadcrumbsVariants(), className)}\n      >\n        <TrailReady.Provider value={ready}>{children}</TrailReady.Provider>\n      </AriaBreadcrumbs>\n    </nav>\n  );\n});\n\n/**\n * One crumb.\n *\n * @example\n * <BreadcrumbItem href=\"/reports\">Reports</BreadcrumbItem>\n */\nexport interface BreadcrumbItemProps\n  extends Omit<AriaBreadcrumbProps, \"className\" | \"style\" | \"children\"> {\n  /**\n   * The crumb's label.\n   *\n   * An icon-only crumb has no accessible name, which is an axe `link-name`\n   * violation -- both legacy call sites ship one. Pass `aria-label` when the\n   * only child is a glyph.\n   */\n  children?: ReactNode;\n  /** Extra classes for the `<li>`, merged last. */\n  className?: string;\n  /** Destination. Omit it on the last crumb: that one is the current page. */\n  href?: string;\n  /** Anchor target, forwarded when `href` is set. */\n  target?: string;\n  /** Anchor rel, forwarded when `href` is set. */\n  rel?: string;\n}\n\nexport const BreadcrumbItem = forwardRef<HTMLAnchorElement, BreadcrumbItemProps>(\n  function BreadcrumbItem(\n    { className, children, href, target, rel, \"aria-label\": ariaLabel, ...props },\n    ref,\n  ) {\n    // Decided once, at this crumb's own mount.\n    const [arrivedLater] = useState(useContext(TrailReady));\n    return (\n      <AriaBreadcrumb\n        {...props}\n        data-slot=\"breadcrumb-item\"\n        data-flip=\"\"\n        className={cnAll(\n          breadcrumbItemVariants(),\n          arrivedLater && \"motion-safe:animate-crumb-in\",\n          className,\n        )}\n      >\n        <AriaLink\n          // The ref goes on the anchor, not the <li> RAC wraps it in: the list\n          // item is the collection's own item container, not the interactive\n          // element -- the link is what a call site actually needs to focus.\n          ref={ref}\n          href={href}\n          target={target}\n          rel={rel}\n          aria-label={ariaLabel}\n          data-slot=\"breadcrumb-link\"\n          className={breadcrumbLinkVariants()}\n        >\n          {children}\n        </AriaLink>\n        {/*\n          A real element, not a ::after. Generated content is announced by some\n          screen readers, and it cannot be read back from the DOM at all -- a\n          separator that stopped rendering would be invisible to the suite.\n\n          \"/\" rather than the legacy lucide ChevronRight: this library ships no\n          icon dependency, all four legacy separators are the default, and a\n          chevron glyph does not mirror in RTL while a slash needs no mirroring\n          at all.\n        */}\n        <span\n          aria-hidden=\"true\"\n          data-slot=\"breadcrumb-separator\"\n          className=\"shrink-0 select-none group-data-[current]:hidden\"\n        >\n          /\n        </span>\n      </AriaBreadcrumb>\n    );\n  },\n);\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsDA,MAAM,aAAa,cAAc,KAAK;AAEtC,MAAa,sBAAsB,IAAI;CACrC;CAOA;CAIA;CAIA;AACF,CAAC;AAED,MAAa,yBAAyB,IAAI,CAIxC,sCACF,CAAC;AAED,MAAa,yBAAyB,IAAI;CACxC;CAKA;CACA;CACA;CAMA;CASA;CACA;CACA;CACA;CACA;CAMA;CAEA;CACA;AACF,CAAC;AA2CD,MAAaA,gBAAc,WAA+C,SAASA,cACjF,EAAE,WAAW,UAAU,cAAc,YAAY,cAAc,GAAG,SAClE,KACA;CACA,MAAM,OAAO,OAAgC,IAAI;CACjD,MAAM,OAAO,cAAc,UAAU,KAAK,IAAI,GAAG,CAAC,GAAG,CAAC;CACtD,MAAM,CAAC,OAAO,YAAY,SAAS,KAAK;CACxC,gBAAgB,SAAS,IAAI,GAAG,CAAC,CAAC;CAElC,QAAQ,MAAM,SAAS,QAAQ,QAAQ,CAAC,CAAC,KAAK,UAAW,MAA2B,GAAG,CAAC,CAAC,KAAK,GAAG,CAAC;CAClG,OAOE,oBAAC,OAAD;EAAK,cAAY;EAAW,aAAU;EACpC,UAAA,oBAACC,aAAD;GAIE,KAAK;GACL,GAAI;GACJ,cAAY;GACZ,aAAU;GACV,WAAW,GAAG,oBAAoB,GAAG,SAAS;GAE9C,UAAA,oBAAC,WAAW,UAAZ;IAAqB,OAAO;IAAQ;GAA8B,CAAA;EACnD,CAAA;CACd,CAAA;AAET,CAAC;AA4BD,MAAa,iBAAiB,WAC5B,SAAS,eACP,EAAE,WAAW,UAAU,MAAM,QAAQ,KAAK,cAAc,WAAW,GAAG,SACtE,KACA;CAEA,MAAM,CAAC,gBAAgB,SAAS,WAAW,UAAU,CAAC;CACtD,OACE,qBAACC,YAAD;EACE,GAAI;EACJ,aAAU;EACV,aAAU;EACV,WAAW,MACT,uBAAuB,GACvB,gBAAgB,gCAChB,SACF;EARF,UAAA,CAUE,oBAACC,MAAD;GAIO;GACC;GACE;GACH;GACL,cAAY;GACZ,aAAU;GACV,WAAW,uBAAuB;GAEjC;EACO,CAAA,GAWV,oBAAC,QAAD;GACE,eAAY;GACZ,aAAU;GACV,WAAU;GACX,UAAA;EAEK,CAAA,CACQ;;AAEpB,CACF"}
+{"version":3,"file":"breadcrumb.js","names":["Breadcrumbs","AriaBreadcrumbs","AriaBreadcrumb","AriaLink"],"sources":["../../src/breadcrumb/breadcrumb.tsx"],"sourcesContent":["\"use client\";\n\nimport { cva } from \"class-variance-authority\";\nimport {\n  Children,\n  createContext,\n  forwardRef,\n  useContext,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n  type ReactNode,\n} from \"react\";\nimport {\n  Breadcrumb as AriaBreadcrumb,\n  Breadcrumbs as AriaBreadcrumbs,\n  Link as AriaLink,\n  type BreadcrumbProps as AriaBreadcrumbProps,\n  type BreadcrumbsProps as AriaBreadcrumbsProps,\n} from \"react-aria-components\";\n\nimport { cn, cnAll } from \"../lib/cn.js\";\nimport { useFlip } from \"../lib/flip.js\";\nimport { mergeRefs } from \"../lib/merge-refs.js\";\n\n/**\n * Breadcrumbs, ported from the legacy shadcn/Radix component onto React\n * Aria's Breadcrumbs collection.\n *\n * SIX LEGACY PARTS COLLAPSE TO TWO, and not for tidiness -- React Aria's\n * `Breadcrumbs` is a real collection, so it knows which item is last:\n *\n * | legacy              | uses | fate                                        |\n * | ------------------- | ---- | ------------------------------------------- |\n * | Breadcrumb          |    2 | -> `Breadcrumbs` (nav + ol)                 |\n * | BreadcrumbList      |    2 | dropped -- `Breadcrumbs` IS the `<ol>`      |\n * | BreadcrumbItem      |    6 | -> `BreadcrumbItem`                         |\n * | BreadcrumbLink      |    4 | merged into `BreadcrumbItem` as `href`      |\n * | BreadcrumbPage      |    2 | dropped -- the last crumb is auto-current   |\n * | BreadcrumbSeparator |    4 | dropped -- every non-last crumb draws one   |\n * | BreadcrumbEllipsis  |    0 | dropped -- zero call sites                  |\n *\n * The collection is also why the separator CANNOT stay a component: RAC\n * builds its item list from the children, so a `<BreadcrumbSeparator/>`\n * sibling would be a non-item node inside a collection and there is nowhere\n * legal to put it.\n *\n * Every string in the cva blocks below is a STATIC literal. Tailwind scans\n * source text, so a class assembled at runtime is invisible to it and would\n * simply never be emitted -- the component would render unstyled with no\n * error anywhere.\n */\n/** True once the first render is done: a crumb that mounts after that slides in; the ones that were there at first are still. */\nconst TrailReady = createContext(false);\n\nexport const breadcrumbsVariants = cva([\n  \"flex flex-wrap items-center gap-2\",\n\n  // The user-agent `<ol>`: decimal markers, a 40px inline padding and a 1em\n  // block margin. The reset in @seekalfred/styles is OPT-IN, so a consumer\n  // may load none -- unreset, the trail renders as a numbered, indented\n  // list. The Accordion shipped its panel in the browser's serif for exactly\n  // this family of reason.\n  \"m-0 list-none p-0\",\n\n  // leading-* AFTER text-*: tailwind-merge treats a later text-* as owning\n  // line-height and silently strips a leading-* that precedes it.\n  \"font-sans text-sm leading-(--leading-normal) text-muted-foreground\",\n\n  // box-border: content-box would add any padding a consumer sets on top of\n  // a constrained width. The Alert shipped overflowing by 46px that way.\n  \"box-border break-words\",\n]);\n\nexport const breadcrumbItemVariants = cva([\n  // `group` is load-bearing: the separator hides itself from the current\n  // crumb via group-data-[current], and RAC puts data-current on the <li>,\n  // which CSS cannot look upward to from the span.\n  \"group inline-flex items-center gap-2\",\n]);\n\nexport const breadcrumbLinkVariants = cva([\n  \"inline-flex items-center gap-1.5\",\n\n  // The user-agent `<a>`: -webkit-link blue and a permanent underline. Left\n  // alone, every crumb is blue, and the hover underline below stops being a\n  // state cue at all because it is already on.\n  \"font-sans text-muted-foreground no-underline\",\n  \"rounded-sm cursor-pointer\",\n  \"motion-safe:transition-colors motion-safe:duration-(--duration-quick) motion-safe:ease-settle\",\n\n  // Hover is NOT colour-only. The legacy component moved muted-foreground to\n  // foreground and nothing else; under forced-colors the user's palette\n  // overrides both and the cue vanishes entirely (WCAG 1.4.1, and\n  // ARCHITECTURE section 5 rule 6). The underline survives any colour mode.\n  \"data-[hovered]:text-foreground data-[hovered]:underline\",\n\n  // outline-solid is load-bearing, not decoration. `outline-none` sets BOTH\n  // outline-style:none and --tw-outline-style:none, and the width utility\n  // resolves its style from that same variable -- so a focus variant can\n  // apply a width and a colour while faithfully re-applying style:none and\n  // painting nothing. Button shipped exactly that: keyboard-focusable with\n  // no visible ring, and every gate stayed green because axe has no\n  // focus-indicator rule.\n  \"outline-none\",\n  \"data-[focus-visible]:outline-solid\",\n  \"data-[focus-visible]:outline-(length:--focus-ring-width)\",\n  \"data-[focus-visible]:outline-offset-(--focus-ring-offset)\",\n  \"data-[focus-visible]:outline-(--color-ring)\",\n\n  // The current crumb. RAC forces isDisabled on it, so React Aria renders a\n  // <span role=\"link\" aria-disabled=\"true\" aria-current=\"page\"> with no\n  // tabIndex -- byte for byte the legacy BreadcrumbPage, minus the chance of\n  // hand-writing it onto the wrong item.\n  \"data-[current]:text-foreground data-[current]:font-semibold data-[current]:cursor-default\",\n\n  \"[&_svg]:pointer-events-none [&_svg]:shrink-0\",\n  \"[&_svg:not([class*='size-'])]:size-(--icon-sm)\",\n]);\n\n/**\n * A navigation trail.\n *\n * The last child is the current page: give it no `href`, and React Aria\n * marks it `aria-current=\"page\"` and takes it out of the tab order.\n *\n * @example\n * <Breadcrumbs>\n *   <BreadcrumbItem href=\"/\">Home</BreadcrumbItem>\n *   <BreadcrumbItem href=\"/design-thinking\">Design thinking</BreadcrumbItem>\n *   <BreadcrumbItem>User personas</BreadcrumbItem>\n * </Breadcrumbs>\n */\nexport interface BreadcrumbsProps\n  extends Omit<\n    AriaBreadcrumbsProps<object>,\n    \"className\" | \"style\" | \"children\" | \"items\" | \"dependencies\"\n  > {\n  /**\n   * `BreadcrumbItem` elements. Static children only: `items` and the render\n   * function are not exposed, because no call site builds a trail from data\n   * and the generic they require leaks into every consumer's types.\n   */\n  children?: ReactNode;\n  /**\n   * Extra classes, merged last so they win conflicts with ours.\n   *\n   * They land on the `<ol>`, where our own classes are, so `tailwind-merge`\n   * can actually resolve a conflict. The `<nav>` is an unstyled landmark\n   * wrapper.\n   */\n  className?: string;\n  /**\n   * Accessible name for the navigation landmark. Only worth changing when a\n   * page has more than one trail.\n   *\n   * @default \"Breadcrumb\"\n   */\n  \"aria-label\"?: string;\n}\n\nexport const Breadcrumbs = forwardRef<HTMLOListElement, BreadcrumbsProps>(function Breadcrumbs(\n  { className, children, \"aria-label\": ariaLabel = \"Breadcrumb\", ...props },\n  ref,\n) {\n  const list = useRef<HTMLOListElement | null>(null);\n  const refs = useMemo(() => mergeRefs(ref, list), [ref]);\n  const [ready, setReady] = useState(false);\n  useEffect(() => setReady(true), []);\n  // When the trail changes, the crumbs that stay slide to their new place.\n  useFlip(list, Children.toArray(children).map((child) => (child as { key?: string }).key).join(\"/\"));\n  return (\n    // RAC renders the <ol> and puts its aria-label there; it does NOT render\n    // a landmark. Dropping the <nav> would silently remove the thing screen\n    // reader users actually navigate by, so it is added back here. Both\n    // carry the same name deliberately -- RAC falls back to a localized\n    // \"Breadcrumbs\" when aria-label is absent, so the <ol> is named either\n    // way and letting the two names diverge would be the worse outcome.\n    <nav aria-label={ariaLabel} data-slot=\"breadcrumb\">\n      <AriaBreadcrumbs\n        // The ref goes on the <ol>, not the <nav>: the nav is this\n        // component's OWN added landmark wrapper, not something React Aria\n        // renders, so the real list element is one level in.\n        ref={refs}\n        {...props}\n        aria-label={ariaLabel}\n        data-slot=\"breadcrumb-list\"\n        className={cn(breadcrumbsVariants(), className)}\n      >\n        <TrailReady.Provider value={ready}>{children}</TrailReady.Provider>\n      </AriaBreadcrumbs>\n    </nav>\n  );\n});\n\n/**\n * One crumb.\n *\n * @example\n * <BreadcrumbItem href=\"/reports\">Reports</BreadcrumbItem>\n */\nexport interface BreadcrumbItemProps\n  extends Omit<AriaBreadcrumbProps, \"className\" | \"style\" | \"children\"> {\n  /**\n   * The crumb's label.\n   *\n   * An icon-only crumb has no accessible name, which is an axe `link-name`\n   * violation -- both legacy call sites ship one. Pass `aria-label` when the\n   * only child is a glyph.\n   */\n  children?: ReactNode;\n  /** Extra classes for the `<li>`, merged last. */\n  className?: string;\n  /** Destination. Omit it on the last crumb: that one is the current page. */\n  href?: string;\n  /** Anchor target, forwarded when `href` is set. */\n  target?: string;\n  /** Anchor rel, forwarded when `href` is set. */\n  rel?: string;\n}\n\nexport const BreadcrumbItem = forwardRef<HTMLAnchorElement, BreadcrumbItemProps>(\n  function BreadcrumbItem(\n    { className, children, href, target, rel, \"aria-label\": ariaLabel, ...props },\n    ref,\n  ) {\n    // Decided once, at this crumb's own mount.\n    const [arrivedLater] = useState(useContext(TrailReady));\n    return (\n      <AriaBreadcrumb\n        {...props}\n        data-slot=\"breadcrumb-item\"\n        data-flip=\"\"\n        className={cnAll(\n          breadcrumbItemVariants(),\n          arrivedLater && \"motion-safe:animate-crumb-in\",\n          className,\n        )}\n      >\n        <AriaLink\n          // The ref goes on the anchor, not the <li> RAC wraps it in: the list\n          // item is the collection's own item container, not the interactive\n          // element -- the link is what a call site actually needs to focus.\n          ref={ref}\n          href={href}\n          target={target}\n          rel={rel}\n          aria-label={ariaLabel}\n          data-slot=\"breadcrumb-link\"\n          className={breadcrumbLinkVariants()}\n        >\n          {children}\n        </AriaLink>\n        {/*\n          A real element, not a ::after. Generated content is announced by some\n          screen readers, and it cannot be read back from the DOM at all -- a\n          separator that stopped rendering would be invisible to the suite.\n\n          A small inline chevron: this library ships no icon dependency, and the\n          chevron is flipped in RTL so it keeps pointing along the reading direction.\n        */}\n        <span\n          aria-hidden=\"true\"\n          data-slot=\"breadcrumb-separator\"\n          className=\"inline-flex shrink-0 items-center select-none group-data-[current]:hidden\"\n        >\n          <svg\n            viewBox=\"0 0 16 16\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            strokeWidth=\"1.5\"\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n            className=\"block size-3.5 rtl:-scale-x-100\"\n          >\n            <path d=\"m6 3.5 4.5 4.5L6 12.5\" />\n          </svg>\n        </span>\n      </AriaBreadcrumb>\n    );\n  },\n);\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsDA,MAAM,aAAa,cAAc,KAAK;AAEtC,MAAa,sBAAsB,IAAI;CACrC;CAOA;CAIA;CAIA;AACF,CAAC;AAED,MAAa,yBAAyB,IAAI,CAIxC,sCACF,CAAC;AAED,MAAa,yBAAyB,IAAI;CACxC;CAKA;CACA;CACA;CAMA;CASA;CACA;CACA;CACA;CACA;CAMA;CAEA;CACA;AACF,CAAC;AA2CD,MAAaA,gBAAc,WAA+C,SAASA,cACjF,EAAE,WAAW,UAAU,cAAc,YAAY,cAAc,GAAG,SAClE,KACA;CACA,MAAM,OAAO,OAAgC,IAAI;CACjD,MAAM,OAAO,cAAc,UAAU,KAAK,IAAI,GAAG,CAAC,GAAG,CAAC;CACtD,MAAM,CAAC,OAAO,YAAY,SAAS,KAAK;CACxC,gBAAgB,SAAS,IAAI,GAAG,CAAC,CAAC;CAElC,QAAQ,MAAM,SAAS,QAAQ,QAAQ,CAAC,CAAC,KAAK,UAAW,MAA2B,GAAG,CAAC,CAAC,KAAK,GAAG,CAAC;CAClG,OAOE,oBAAC,OAAD;EAAK,cAAY;EAAW,aAAU;EACpC,UAAA,oBAACC,aAAD;GAIE,KAAK;GACL,GAAI;GACJ,cAAY;GACZ,aAAU;GACV,WAAW,GAAG,oBAAoB,GAAG,SAAS;GAE9C,UAAA,oBAAC,WAAW,UAAZ;IAAqB,OAAO;IAAQ;GAA8B,CAAA;EACnD,CAAA;CACd,CAAA;AAET,CAAC;AA4BD,MAAa,iBAAiB,WAC5B,SAAS,eACP,EAAE,WAAW,UAAU,MAAM,QAAQ,KAAK,cAAc,WAAW,GAAG,SACtE,KACA;CAEA,MAAM,CAAC,gBAAgB,SAAS,WAAW,UAAU,CAAC;CACtD,OACE,qBAACC,YAAD;EACE,GAAI;EACJ,aAAU;EACV,aAAU;EACV,WAAW,MACT,uBAAuB,GACvB,gBAAgB,gCAChB,SACF;EARF,UAAA,CAUE,oBAACC,MAAD;GAIO;GACC;GACE;GACH;GACL,cAAY;GACZ,aAAU;GACV,WAAW,uBAAuB;GAEjC;EACO,CAAA,GASV,oBAAC,QAAD;GACE,eAAY;GACZ,aAAU;GACV,WAAU;GAEV,UAAA,oBAAC,OAAD;IACE,SAAQ;IACR,MAAK;IACL,QAAO;IACP,aAAY;IACZ,eAAc;IACd,gBAAe;IACf,WAAU;IAEV,UAAA,oBAAC,QAAD,EAAM,GAAE,wBAAyB,CAAA;GAC9B,CAAA;EACD,CAAA,CACQ;;AAEpB,CACF"}

package/dist/brush-chart/brush-chart.d.ts

@@ -0,0 +1,64 @@
+//#region src/brush-chart/brush-chart.d.ts
+/**
+ * BrushChart: a long, dense time series, when people need the whole history
+ * and a close look at any stretch of it.
+ *
+ * A main plot shows the window; an overview strip under it shows everything.
+ * Drag the window to pan, drag an edge to resize it, drag empty track to draw
+ * a new window, tap to recentre, double tap (or Escape) to show it all. Zoomed
+ * out, a seven point average and its low to high band replace the raw line so
+ * dense weeks read as texture; zoomed in, the raw line fades in. The value
+ * axis springs to the tallest point in view. Hover, drag or the arrow keys
+ * scrub the plot: a crosshair and a tooltip with the day, the value and the
+ * change against a week earlier. Annotations mark events on both charts.
+ *
+ * Plain SVG and CSS. The window, every path and the markers are written
+ * straight to the DOM as the window moves, so a drag never re-renders the
+ * chart. The plot and the window, and each edge, are sliders; a visually
+ * hidden table carries every point in the window.
+ */
+export interface BrushChartDatum {
+  /** A point in time, as a Date or epoch milliseconds. Points must be in ascending order. */
+  date: Date | number;
+  value: number;
+}
+export interface BrushChartAnnotation {
+  date: Date | number;
+  /** Short label printed beside the marker, such as "v2 launch". */
+  label: string;
+  /** Longer note for the tooltip and screen readers. */
+  description?: string;
+}
+export interface BrushChartProps {
+  data: BrushChartDatum[];
+  /** What is measured, such as "Daily active users". Names the chart for assistive technology. */
+  label: string;
+  /** Unit after each value, such as "users". */
+  unit?: string;
+  formatValue?: (value: number) => string;
+  /** Formats the value axis. Defaults to a compact number, such as 12K. */
+  formatTick?: (value: number) => string;
+  /** Formats a date in the tooltip and announcements. */
+  formatDate?: (date: Date) => string;
+  /** Events drawn as markers on both charts. */
+  annotations?: BrushChartAnnotation[];
+  /** Controlled window as [start, end] epoch milliseconds. A new value glides the window there. */
+  range?: [number, number];
+  /** Initial window when uncontrolled. Defaults to the whole series. */
+  defaultRange?: [number, number];
+  /** Called while the window is dragged, resized, stepped, or reset. */
+  onRangeChange?: (range: [number, number]) => void;
+  /** Smallest window in milliseconds. @default seven days */
+  minSpan?: number;
+  /** Main plot height in pixels. @default 240 */
+  height?: number;
+  /** Overview strip height in pixels. @default 52 */
+  overviewHeight?: number;
+  /** @default "No data yet" */
+  emptyLabel?: string;
+  /** Extra classes for the root. Merged last. */
+  className?: string;
+}
+export declare const BrushChart: import("react").ForwardRefExoticComponent<BrushChartProps & import("react").RefAttributes<HTMLElement>>;
+//#endregion
+//# sourceMappingURL=brush-chart.d.ts.map