@seekalfred/primitives 0.5.0 → 0.6.0

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 type { ReactNode } 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 } from \"../lib/cn.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 */\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-fast) motion-safe:ease-standard\",\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 function Breadcrumbs({\n  className,\n  children,\n  \"aria-label\": ariaLabel = \"Breadcrumb\",\n  ...props\n}: BreadcrumbsProps) {\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        {...props}\n        aria-label={ariaLabel}\n        data-slot=\"breadcrumb-list\"\n        className={cn(breadcrumbsVariants(), className)}\n      >\n        {children}\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 function BreadcrumbItem({\n  className,\n  children,\n  href,\n  target,\n  rel,\n  \"aria-label\": ariaLabel,\n  ...props\n}: BreadcrumbItemProps) {\n  return (\n    <AriaBreadcrumb\n      {...props}\n      data-slot=\"breadcrumb-item\"\n      className={cn(breadcrumbItemVariants(), className)}\n    >\n      <AriaLink\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"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyCA,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,SAAgBA,cAAY,EAC1B,WACA,UACA,cAAc,YAAY,cAC1B,GAAG,SACgB;CACnB,OAOE,oBAAC,OAAD;EAAK,cAAY;EAAW,aAAU;EACpC,UAAA,oBAACC,aAAD;GACE,GAAI;GACJ,cAAY;GACZ,aAAU;GACV,WAAW,GAAG,oBAAoB,GAAG,SAAS;GAE7C;EACc,CAAA;CACd,CAAA;AAET;AA4BA,SAAgB,eAAe,EAC7B,WACA,UACA,MACA,QACA,KACA,cAAc,WACd,GAAG,SACmB;CACtB,OACE,qBAACC,YAAD;EACE,GAAI;EACJ,aAAU;EACV,WAAW,GAAG,uBAAuB,GAAG,SAAS;EAHnD,UAAA,CAKE,oBAACC,MAAD;GACQ;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"}
+{"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"}

package/dist/button/button.d.ts

@@ -1,27 +1,9 @@
 import { VariantProps } from "class-variance-authority";
-import { ButtonProps } from "react-aria-components";
 import { ReactNode } from "react";
+import { ButtonProps, LinkProps } from "react-aria-components";
 //#region src/button/button.d.ts
-/**
- * Variant classes, exported so a consumer can reuse the exact classes we ship
- * rather than guessing at them. This is also the supported answer for the
- * link-shaped cases React Aria's Button cannot cover: it never renders an
- * anchor, so `<a className={buttonVariants({ variant: "outline" })}>` is how a
- * real navigation target gets button styling until the Link primitive lands.
- *
- * Ported from the legacy shadcn Button. The variant and size vocabulary is
- * deliberately identical so existing call sites migrate by rename, with six
- * corrections that the Alfred contracts require -- each marked below.
- *
- * Every string here is a STATIC literal. Tailwind scans source text, so a class
- * assembled at runtime is invisible to it and would simply never be emitted.
- *
- * State comes from React Aria data attributes rather than pseudo-classes:
- * data-[focus-visible] is keyboard focus only, and data-[pressed] covers mouse,
- * touch and keyboard uniformly. The original had no pressed state at all.
- */
 export declare const buttonVariants: (props?: ({
-  variant?: "primary" | "secondary" | "outline" | "outlineNeutral" | "ghost" | "destructive" | "link" | null | undefined;
+  variant?: "link" | "destructive" | "primary" | "secondary" | "outline" | "outlineNeutral" | "ghost" | null | undefined;
   size?: "sm" | "md" | "lg" | "icon" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 /**
@@ -30,8 +12,8 @@ export declare const buttonVariants: (props?: ({
  * CORRECTION 6 -- the legacy Button was a plain `<button>`, so it took
  * `onClick`, `disabled` and Radix's `asChild`. React Aria's Button has none of
  * those: `ButtonProps` explicitly omits `onClick` and `href`. The replacements
- * are `onPress`, `isDisabled`, and `buttonVariants()` on the consumer's own
- * element. See the migration table in the package README.
+ * are `onPress`, `isDisabled`, and `href` -- which renders React Aria's Link in
+ * place of its Button. See the migration table in the package README.
  *
  * Deliberately NOT intersected with ComponentPropsWithoutRef<"button">: that
  * would advertise disabled, tabIndex and role, which React Aria does not
@@ -59,10 +41,40 @@ interface ButtonProps$1 extends Omit<ButtonProps, "className" | "style">, Varian
   startIcon?: ReactNode;
   /** Icon rendered after the label. Same rules as {@link ButtonProps.startIcon}. */
   endIcon?: ReactNode;
+  /**
+   * Makes the button a link. It renders React Aria's `Link` -- a real `<a>`,
+   * announced as a link -- with exactly the classes a button of the same
+   * `variant` and `size` gets, and the same hover, press and focus-ring states.
+   *
+   * Use it whenever activating the control navigates. A button that navigates
+   * cannot be opened in a new tab, is announced as the wrong role, and is
+   * skipped by a screen reader's list of links.
+   *
+   * Client-side routing needs React Aria's `RouterProvider` mounted once above
+   * it; without one, an `href` is an ordinary page load, which is also what an
+   * external or download link wants.
+   *
+   * Button-only props have nothing to act on here: `type`, `form*` and
+   * `isPending` are ignored, and the `ref` receives the `<a>`.
+   */
+  href?: LinkProps["href"];
+  /** With `href` only: where to open it, e.g. `"_blank"`. */
+  target?: LinkProps["target"];
+  /** With `href` only. Give `"noreferrer"` alongside `target="_blank"` to an external site. */
+  rel?: LinkProps["rel"];
+  /** With `href` only: download the target instead of opening it, optionally under this file name. */
+  download?: LinkProps["download"];
 }
 /**
  * A button.
  *
+ * A label that changes (a different text, or a different icon) crossfades, and
+ * the button's width springs to fit it. While that runs, the OUTGOING label is
+ * still in the DOM for about 200ms, `aria-hidden` and out of flow, so read a
+ * button's text after the change settles, and do not put `id`s, inputs or
+ * anything stateful inside a label that changes. Text that changes constantly,
+ * such as a live counter, crossfades every time it does.
+ *
  * `size="icon"` renders a square button with no visible text, so it **must**
  * carry an `aria-label` -- otherwise it has no accessible name and fails axe's
  * `button-name` rule. The IconOnly story is the guard on that.
@@ -72,8 +84,9 @@ interface ButtonProps$1 extends Omit<ButtonProps, "className" | "style">, Varian
  * <Button startIcon={<SaveIcon aria-hidden />}>Save changes</Button>
  * <Button endIcon={<ChevronIcon aria-hidden />}>Continue</Button>
  * <Button variant="outline" size="icon" aria-label="Close"><XIcon /></Button>
+ * <Button href="/reports" variant="outlineNeutral">View reports</Button>
  */
-declare function Button$1({ className, variant, size, startIcon, endIcon, children, ...props }: ButtonProps$1): import("react").JSX.Element;
+declare const Button$1: import("react").ForwardRefExoticComponent<ButtonProps$1 & import("react").RefAttributes<HTMLButtonElement>>;
 //#endregion
 export { Button$1 as Button, ButtonProps$1 as ButtonProps };
 //# sourceMappingURL=button.d.ts.map

package/dist/button/button.js

@@ -1,15 +1,20 @@
 "use client";
 import { cn } from "../lib/cn.js";
+import { mergeRefs } from "../lib/merge-refs.js";
+import { anchorsLayer, pressScaleFor, useAriaBusy, useExitBackstop, useLeavingItems, useMorphWidth } from "../lib/motion.js";
 import { cva } from "class-variance-authority";
-import { Button } from "react-aria-components";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef, isValidElement, useCallback, useRef, useState } from "react";
+import { Button, Link } from "react-aria-components";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/button/button.tsx
 /**
 * Variant classes, exported so a consumer can reuse the exact classes we ship
-* rather than guessing at them. This is also the supported answer for the
-* link-shaped cases React Aria's Button cannot cover: it never renders an
-* anchor, so `<a className={buttonVariants({ variant: "outline" })}>` is how a
-* real navigation target gets button styling until the Link primitive lands.
+* rather than guessing at them.
+*
+* NOT the answer for a link-shaped button any more: pass `href` to Button. On a
+* consumer's own <a> these classes get none of their states -- hover, press and
+* the focus ring all key on React Aria data attributes that a plain anchor never
+* receives, and the base sets outline-none, so keyboard focus was invisible.
 *
 * Ported from the legacy shadcn Button. The variant and size vocabulary is
 * deliberately identical so existing call sites migrate by rename, with six
@@ -22,6 +27,7 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 * data-[focus-visible] is keyboard focus only, and data-[pressed] covers mouse,
 * touch and keyboard uniformly. The original had no pressed state at all.
 */
+const pressScale = "motion-safe:data-[pressed]:scale-(--press-scale) [&:is([aria-haspopup]:not([aria-haspopup=false]),[data-state],[role=combobox])]:scale-none!";
 const buttonVariants = cva([
 	"inline-flex items-center justify-center gap-(--density-control-gap) shrink-0 whitespace-nowrap",
 	"rounded-md font-sans font-medium",
@@ -34,49 +40,64 @@ const buttonVariants = cva([
 	"data-[focus-visible]:outline-(length:--focus-ring-width)",
 	"data-[focus-visible]:outline-offset-(--focus-ring-offset)",
 	"data-[focus-visible]:outline-(--color-ring)",
-	"data-[disabled]:cursor-not-allowed data-[disabled]:opacity-(--opacity-disabled)",
+	"data-[disabled]:cursor-not-allowed",
+	"[-webkit-tap-highlight-color:transparent]",
 	"data-[pending]:cursor-progress"
 ], {
 	variants: {
 		variant: {
 			primary: [
 				"bg-primary text-primary-foreground shadow-surface",
-				"motion-safe:transition-colors motion-safe:duration-(--duration-fast) motion-safe:ease-standard",
-				"data-[hovered]:bg-primary-hover",
-				"data-[pressed]:bg-primary-pressed"
+				"motion-safe:button-motion",
+				pressScale,
+				"data-[hovered]:opacity-91 data-[hovered]:shadow-resting",
+				"data-[pressed]:opacity-84",
+				"data-[disabled]:opacity-(--opacity-button-disabled)"
 			],
 			secondary: [
 				"bg-secondary text-secondary-foreground shadow-surface",
-				"motion-safe:transition-colors",
-				"data-[hovered]:bg-secondary-hover",
-				"data-[pressed]:bg-secondary-pressed"
+				"motion-safe:button-motion",
+				pressScale,
+				"data-[hovered]:bg-secondary-hover data-[hovered]:shadow-resting",
+				"data-[pressed]:bg-secondary-pressed",
+				"data-[disabled]:opacity-100 data-[disabled]:bg-muted data-[disabled]:text-muted-foreground data-[disabled]:border-border"
 			],
 			outline: [
 				"bg-background text-primary-strong border-(length:--border-width) border-primary-strong shadow-surface",
-				"motion-safe:transition-colors",
-				"data-[hovered]:bg-muted",
-				"data-[pressed]:bg-muted data-[pressed]:border-foreground"
+				"motion-safe:button-motion",
+				pressScale,
+				"data-[hovered]:bg-muted data-[hovered]:shadow-resting",
+				"data-[pressed]:bg-muted data-[pressed]:border-foreground",
+				"data-[disabled]:opacity-100 data-[disabled]:bg-muted data-[disabled]:text-muted-foreground data-[disabled]:border-border"
 			],
 			outlineNeutral: [
 				"bg-background text-foreground border-(length:--border-width) border-border shadow-surface",
-				"motion-safe:transition-colors",
-				"data-[hovered]:bg-muted",
-				"data-[pressed]:bg-muted data-[pressed]:border-foreground"
+				"motion-safe:button-motion",
+				pressScale,
+				"data-[hovered]:bg-muted data-[hovered]:shadow-resting",
+				"data-[pressed]:bg-muted data-[pressed]:border-foreground",
+				"data-[disabled]:opacity-100 data-[disabled]:bg-muted data-[disabled]:text-muted-foreground"
 			],
 			ghost: [
 				"bg-transparent text-primary-strong",
-				"motion-safe:transition-colors",
+				"motion-safe:button-motion",
+				pressScale,
 				"data-[hovered]:bg-muted",
+				"data-[disabled]:opacity-100 data-[disabled]:text-muted-foreground",
 				"data-[pressed]:bg-muted data-[pressed]:border-primary-strong"
 			],
 			destructive: [
 				"bg-destructive text-destructive-foreground shadow-surface",
-				"motion-safe:transition-colors",
+				"motion-safe:button-motion",
+				pressScale,
 				"data-[hovered]:bg-destructive-hover",
-				"data-[pressed]:bg-destructive-pressed"
+				"data-[pressed]:bg-destructive-pressed",
+				"data-[disabled]:opacity-100 data-[disabled]:bg-muted data-[disabled]:border-border data-[disabled]:text-[color-mix(in_oklab,var(--color-destructive)_55%,var(--color-muted))]"
 			],
 			link: [
 				"bg-transparent text-primary-strong underline-offset-(--underline-offset)",
+				"motion-safe:button-motion",
+				"data-[disabled]:opacity-(--opacity-button-disabled)",
 				"data-[hovered]:underline",
 				"data-[pressed]:underline"
 			]
@@ -93,9 +114,101 @@ const buttonVariants = cva([
 		size: "md"
 	}
 });
+/** A key for the label content: text plus element names, so a new label or icon crossfades while prop-only updates stay in place. */
+function labelKey(node) {
+	if (node == null || typeof node === "boolean") return "";
+	if (typeof node === "string" || typeof node === "number" || typeof node === "bigint") return String(node);
+	if (Array.isArray(node)) return node.map(labelKey).join("");
+	if (!isValidElement(node)) return "";
+	const type = node.type;
+	return "<" + (typeof type === "string" ? type : type?.displayName ?? type?.name ?? "") + ">" + labelKey(node.props.children);
+}
+/** A label with no text once element names are stripped is an icon, which scales instead of rising. */
+const isIconKey = (key) => !/\S/.test(key.replace(/<[^>]*>/g, ""));
+function LeavingPhase({ phase, onDone }) {
+	const { id } = phase;
+	const remove = useCallback(() => onDone(id), [onDone, id]);
+	useExitBackstop(true, remove);
+	return /* @__PURE__ */ jsx("span", {
+		"aria-hidden": "true",
+		onAnimationEnd: (event) => {
+			if (event.target === event.currentTarget) remove();
+		},
+		style: phase.rect,
+		className: cn("absolute inline-flex items-center justify-center gap-(--density-control-gap) whitespace-nowrap [&_svg]:shrink-0", phase.icon ? "motion-safe:animate-glyph-out motion-reduce:animate-fade-out" : "motion-safe:animate-label-out motion-reduce:animate-fade-out"),
+		children: phase.node
+	});
+}
+/** The loading spinner: it scales in on the snappy spring, and out smaller with a little blur. Nothing animates if it is there on first mount. */
+function Loader({ show }) {
+	const [initial] = useState(show);
+	const [rendered, setRendered] = useState(show);
+	const [animated, setAnimated] = useState(false);
+	const leaving = rendered && !show;
+	if (show && !rendered) setRendered(true);
+	if (!animated && show !== initial) setAnimated(true);
+	const unmount = useCallback(() => setRendered(false), []);
+	useExitBackstop(leaving, unmount);
+	if (!rendered) return null;
+	return /* @__PURE__ */ jsx("span", {
+		"aria-hidden": "true",
+		onAnimationEnd: (event) => {
+			if (leaving && event.target === event.currentTarget) unmount();
+		},
+		className: cn("absolute top-1/2 left-1/2 -m-2 grid size-4", leaving ? "motion-safe:animate-loader-out motion-reduce:animate-fade-out" : animated && "motion-safe:animate-loader-in motion-reduce:animate-fade-in"),
+		children: /* @__PURE__ */ jsx("span", { className: "rounded-circle border-(length:--border-width-spinner) border-current border-r-transparent motion-safe:animate-spin-fast" })
+	});
+}
+/**
+* The button's inside: a loader, and a slot that holds the current label.
+*
+* A new label (a different text, or a different icon) mounts under a new key and
+* rises in while the old one is popped out of flow where it was and lifts away.
+* Nothing animates on first mount, and a prop-only update (same key) stays in
+* place.
+*/
+function ButtonContent({ children, pending }) {
+	const key = labelKey(children);
+	const icon = isIconKey(key);
+	const contentRef = useRef(null);
+	const phaseRef = useRef(null);
+	useMorphWidth(contentRef, key);
+	const { leaving, changed, remove } = useLeavingItems(key, {
+		node: children,
+		icon
+	}, () => phaseRef.current);
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Loader, { show: pending }), /* @__PURE__ */ jsx("span", {
+		className: cn("button-slot", pending && "opacity-0"),
+		children: /* @__PURE__ */ jsxs("span", {
+			ref: contentRef,
+			className: "inline-flex flex-none items-center",
+			children: [leaving.map((item) => /* @__PURE__ */ jsx(LeavingPhase, {
+				phase: {
+					id: item.id,
+					node: item.value.node,
+					icon: item.value.icon,
+					rect: item.rect
+				},
+				onDone: remove
+			}, item.id)), /* @__PURE__ */ jsx("span", {
+				ref: phaseRef,
+				"data-slot": "button-label",
+				className: cn("inline-flex items-center justify-center gap-(--density-control-gap) whitespace-nowrap [&_svg]:shrink-0", changed && (icon ? "motion-safe:animate-glyph-in motion-reduce:animate-fade-in" : "motion-safe:animate-label-in motion-reduce:animate-fade-in")),
+				children
+			}, key)]
+		})
+	})] });
+}
 /**
 * A button.
 *
+* A label that changes (a different text, or a different icon) crossfades, and
+* the button's width springs to fit it. While that runs, the OUTGOING label is
+* still in the DOM for about 200ms, `aria-hidden` and out of flow, so read a
+* button's text after the change settles, and do not put `id`s, inputs or
+* anything stateful inside a label that changes. Text that changes constantly,
+* such as a live counter, crossfades every time it does.
+*
 * `size="icon"` renders a square button with no visible text, so it **must**
 * carry an `aria-label` -- otherwise it has no accessible name and fails axe's
 * `button-name` rule. The IconOnly story is the guard on that.
@@ -105,22 +218,54 @@ const buttonVariants = cva([
 * <Button startIcon={<SaveIcon aria-hidden />}>Save changes</Button>
 * <Button endIcon={<ChevronIcon aria-hidden />}>Continue</Button>
 * <Button variant="outline" size="icon" aria-label="Close"><XIcon /></Button>
+* <Button href="/reports" variant="outlineNeutral">View reports</Button>
 */
-function Button$1({ className, variant, size, startIcon, endIcon, children, ...props }) {
-	return /* @__PURE__ */ jsx(Button, {
-		...props,
-		"data-slot": "button",
-		className: cn(buttonVariants({
-			variant,
-			size
-		}), className),
-		children: startIcon === void 0 && endIcon === void 0 ? children : (renderProps) => /* @__PURE__ */ jsxs(Fragment, { children: [
+const Button$1 = forwardRef(function Button$2({ className, variant, size, startIcon, endIcon, children, href, target, rel, download, ...props }, ref) {
+	const classes = cn(buttonVariants({
+		variant,
+		size
+	}), className);
+	const button = useAriaBusy(props.isPending === true);
+	const content = (renderProps) => /* @__PURE__ */ jsxs(ButtonContent, {
+		pending: renderProps.isPending,
+		children: [
 			startIcon,
 			typeof children === "function" ? children(renderProps) : children,
 			endIcon
-		] })
+		]
 	});
-}
+	const { onPressStart } = props;
+	const pressStart = (event) => {
+		if (!anchorsLayer(props)) {
+			const target = event.target;
+			target.style.setProperty("--press-scale", pressScaleFor(target.offsetWidth));
+		}
+		onPressStart?.(event);
+	};
+	if (href !== void 0) return /* @__PURE__ */ jsx(Link, {
+		ref,
+		...props,
+		onPressStart: pressStart,
+		href,
+		target,
+		rel,
+		download,
+		"data-slot": "button",
+		className: classes,
+		children: (renderProps) => content({
+			...renderProps,
+			isPending: false
+		})
+	});
+	return /* @__PURE__ */ jsx(Button, {
+		ref: mergeRefs(ref, button),
+		...props,
+		onPressStart: pressStart,
+		"data-slot": "button",
+		className: classes,
+		children: content
+	});
+});
 //#endregion
 export { Button$1 as Button, buttonVariants };
 

package/dist/button/button.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.js","names":["Button","AriaButton"],"sources":["../../src/button/button.tsx"],"sourcesContent":["\"use client\";\n\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport type { ReactNode } from \"react\";\nimport { Button as AriaButton, type ButtonProps as AriaButtonProps } from \"react-aria-components\";\n\nimport { cn } from \"../lib/cn.js\";\n\n/**\n * Variant classes, exported so a consumer can reuse the exact classes we ship\n * rather than guessing at them. This is also the supported answer for the\n * link-shaped cases React Aria's Button cannot cover: it never renders an\n * anchor, so `<a className={buttonVariants({ variant: \"outline\" })}>` is how a\n * real navigation target gets button styling until the Link primitive lands.\n *\n * Ported from the legacy shadcn Button. The variant and size vocabulary is\n * deliberately identical so existing call sites migrate by rename, with six\n * corrections that the Alfred contracts require -- each marked below.\n *\n * Every string here is a STATIC literal. Tailwind scans source text, so a class\n * assembled at runtime is invisible to it and would simply never be emitted.\n *\n * State comes from React Aria data attributes rather than pseudo-classes:\n * data-[focus-visible] is keyboard focus only, and data-[pressed] covers mouse,\n * touch and keyboard uniformly. The original had no pressed state at all.\n */\nexport const buttonVariants = cva(\n  [\n    \"inline-flex items-center justify-center gap-(--density-control-gap) shrink-0 whitespace-nowrap\",\n    // No leading-* here on purpose. tailwind-merge treats a later text-* class\n    // as owning line-height (a Tailwind v3 assumption, where text-base carried\n    // one), so a leading-* in the base string is silently STRIPPED by cn() once\n    // a size variant adds text-base. It is not needed either: the control has a\n    // fixed height and centres with flex, so line-height cannot overflow it.\n    // A component with auto height must put leading-* AFTER its text-* class.\n    \"rounded-md font-sans font-medium\",\n    \"cursor-pointer select-none\",\n\n    // font-sans above is part of the same problem: a <button> does not inherit\n    // the page font, so without a reset it renders in the user-agent face\n    // (Arial in Chromium) rather than the design system's. The same applies to\n    // bg-transparent: an unstyled <button> paints the user-agent ButtonFace\n    // grey -- which is what surfaces the moment a fill class fails to resolve,\n    // and is why the paint stories compare against tokens rather than checking\n    // for transparency.\n    //\n    // The reset in @seekalfred/styles is OPT-IN, so a consumer may never load\n    // one. A bare <button> then keeps its user-agent border (2px, black, in\n    // Chromium) and inline padding, which is a black box around every variant\n    // that does not set a border of its own. The original inherited a zeroed\n    // border from Tailwind Preflight in the app; a library component cannot\n    // assume the consumer supplied one.\n    \"border-(length:--border-width) border-transparent bg-transparent\",\n\n    // Icon handling, ported verbatim: an svg child is sized unless the caller\n    // already said otherwise, and never swallows the press.\n    \"[&_svg]:pointer-events-none [&_svg]:shrink-0\",\n    \"[&_svg:not([class*='size-'])]:size-(--icon-sm)\",\n\n    // CORRECTION 1 -- the original focused with `ring-[3px]`, which is a\n    // box-shadow. Box-shadows are discarded under forced-colors, taking the\n    // only focus indication with them, and axe has no rule that would catch it\n    // (ARCHITECTURE section 5, rule 6). A real outline survives.\n    //\n    // outline-solid on the focus variant is load-bearing, not decoration.\n    // `outline-none` sets BOTH outline-style:none and --tw-outline-style:none,\n    // and Tailwind's outline-width utility resolves its style from that same\n    // variable -- so the focus variant applied a width and a colour while\n    // faithfully re-applying style:none, and painted nothing. The button was\n    // keyboard-focusable with no visible ring. axe has no focus-indicator\n    // rule, so every automated gate stayed green; the KeyboardFocus story now\n    // asserts outlineStyle directly.\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    // CORRECTION 2 -- `disabled:pointer-events-none` also kills the cursor, so\n    // the control reads as inert rather than as unavailable. React Aria already\n    // blocks activation; this only has to say so.\n    \"data-[disabled]:cursor-not-allowed data-[disabled]:opacity-(--opacity-disabled)\",\n\n    // React Aria's own pending state. The original had no equivalent.\n    \"data-[pending]:cursor-progress\",\n  ],\n  {\n    variants: {\n      variant: {\n        // CORRECTION 3 -- the legacy button filled this variant with the brand\n        // gradient. It is flat here, because the brand system caps\n        // --gradient-brand at one intentional element per view and keeps that\n        // budget for the logo and progress bars: \"a gradient on every button\n        // spends that budget everywhere. Ours is the flat primary.\"\n        //\n        // CORRECTION 4 -- the label is ink, not white. Brand orange #FF8431\n        // carries white at 2.44:1; ink clears it at 8.35:1, which is the brand\n        // system's own --text-on-orange rule. Its Button ships white only as a\n        // dated, individually signed-off exception, and this library's contrast\n        // contract is build-failing with no exemption mechanism to inherit it.\n        //\n        // CORRECTION 7 -- hover and pressed are their own TOKENS, not opacity\n        // modifiers on the fill. `bg-primary/90` lightened the button toward the\n        // page, which reads as receding rather than interactive and was nearly\n        // invisible; it also made the label pair unmeasurable, because an alpha\n        // composite depends on whatever happens to sit behind it. The brand system\n        // steps DOWN its ramp instead -- 500 rest, 600 hover, 700 pressed -- and\n        // every one of those fills is now in the contrast contract.\n        primary: [\n          \"bg-primary text-primary-foreground shadow-surface\",\n          \"motion-safe:transition-colors motion-safe:duration-(--duration-fast) motion-safe:ease-standard\",\n          \"data-[hovered]:bg-primary-hover\",\n          \"data-[pressed]:bg-primary-pressed\",\n        ],\n        secondary: [\n          \"bg-secondary text-secondary-foreground shadow-surface\",\n          \"motion-safe:transition-colors\",\n          \"data-[hovered]:bg-secondary-hover\",\n          \"data-[pressed]:bg-secondary-pressed\",\n        ],\n        // primary-strong, never primary: the brand orange is 2.44:1 on the page\n        // and cannot legally be a label OR a border. That is the whole reason\n        // the token exists.\n        outline: [\n          \"bg-background text-primary-strong border-(length:--border-width) border-primary-strong shadow-surface\",\n          \"motion-safe:transition-colors\",\n          \"data-[hovered]:bg-muted\",\n          \"data-[pressed]:bg-muted data-[pressed]:border-foreground\",\n        ],\n        /*\n         * The NEUTRAL outline, and the product's single most-used button:\n         * 99 call sites against 32 for the brand-coloured one.\n         *\n         * It exists because `outline` above is brand-toned -- orange border,\n         * orange label -- which is what the product calls `secondaryOutline`.\n         * Its plain `outline` is this: a grey border and ordinary body text,\n         * for a button that must not compete with the primary action next to\n         * it. One name could not cover both, and renaming `outline` would have\n         * silently repainted every existing call site of ours instead.\n         *\n         * `border` rather than `primary-strong`: --color-border is the token\n         * already held to the 3:1 non-text floor of WCAG 1.4.11, which is what\n         * a border separating a control from the page has to clear.\n         */\n        outlineNeutral: [\n          \"bg-background text-foreground border-(length:--border-width) border-border shadow-surface\",\n          \"motion-safe:transition-colors\",\n          \"data-[hovered]:bg-muted\",\n          \"data-[pressed]:bg-muted data-[pressed]:border-foreground\",\n        ],\n        ghost: [\n          \"bg-transparent text-primary-strong\",\n          \"motion-safe:transition-colors\",\n          \"data-[hovered]:bg-muted\",\n          // CORRECTION 5 -- pressed must not be background-only. A ghost button\n          // has no border at rest, so the pressed border is the non-colour cue\n          // that survives forced-colors (rule 6 again).\n          \"data-[pressed]:bg-muted data-[pressed]:border-primary-strong\",\n        ],\n        destructive: [\n          \"bg-destructive text-destructive-foreground shadow-surface\",\n          \"motion-safe:transition-colors\",\n          \"data-[hovered]:bg-destructive-hover\",\n          \"data-[pressed]:bg-destructive-pressed\",\n        ],\n        link: [\n          \"bg-transparent text-primary-strong underline-offset-(--underline-offset)\",\n          \"data-[hovered]:underline\",\n          \"data-[pressed]:underline\",\n        ],\n      },\n      size: {\n        // Height, padding and label size all come from the control scale, so\n        // data-density moves them together. The icon-only variant is square at\n        // the md height. The legacy shadcn rule that tightened padding when a\n        // child was an icon is gone: it needed three more magic numbers, the\n        // brand system has no equivalent, and the gap token now owns icon\n        // spacing.\n        sm: \"h-(--density-control-h-sm) px-(--density-control-pad-sm) text-sm\",\n        md: \"h-(--density-control-h-md) px-(--density-control-pad-md) text-base\",\n        lg: \"h-(--density-control-h-lg) px-(--density-control-pad-lg) text-lg\",\n        // text-base even though there is no visible label: without it the\n        // user-agent default (13.33px in Chromium) leaks in and sizes any\n        // em-based child against the wrong root.\n        icon: \"size-(--density-control-h-md) px-0 text-base\",\n      },\n    },\n    defaultVariants: {\n      variant: \"primary\",\n      size: \"md\",\n    },\n  },\n);\n\n/**\n * Props.\n *\n * CORRECTION 6 -- the legacy Button was a plain `<button>`, so it took\n * `onClick`, `disabled` and Radix's `asChild`. React Aria's Button has none of\n * those: `ButtonProps` explicitly omits `onClick` and `href`. The replacements\n * are `onPress`, `isDisabled`, and `buttonVariants()` on the consumer's own\n * element. See the migration table in the package README.\n *\n * Deliberately NOT intersected with ComponentPropsWithoutRef<\"button\">: that\n * would advertise disabled, tabIndex and role, which React Aria does not\n * implement and silently ignores. React Aria already forwards the native event\n * surface, so nothing is lost.\n */\nexport interface ButtonProps\n  extends Omit<AriaButtonProps, \"className\" | \"style\">, VariantProps<typeof buttonVariants> {\n  /** Extra classes. Merged last, so they win conflicts with ours. */\n  className?: string;\n  /**\n   * Icon rendered before the label.\n   *\n   * Mark the glyph `aria-hidden` -- the label is the accessible name, and a\n   * second name source only makes the button announce twice. It is sized by the\n   * base `[&_svg]` rule at `--icon-sm` unless it carries a `size-*` class of\n   * its own, and spaced by `--density-control-gap`.\n   *\n   * Two named slots rather than one `icon` plus a position prop: a button can\n   * legitimately carry a leading glyph AND a trailing affordance, which one\n   * icon and a position cannot express.\n   *\n   * NOT the route for `size=\"icon\"`. An icon-only button passes its glyph as\n   * `children`, which is what gives it its single centred child.\n   */\n  startIcon?: ReactNode;\n  /** Icon rendered after the label. Same rules as {@link ButtonProps.startIcon}. */\n  endIcon?: ReactNode;\n}\n\n/**\n * A button.\n *\n * `size=\"icon\"` renders a square button with no visible text, so it **must**\n * carry an `aria-label` -- otherwise it has no accessible name and fails axe's\n * `button-name` rule. The IconOnly story is the guard on that.\n *\n * @example\n * <Button onPress={save}>Save changes</Button>\n * <Button startIcon={<SaveIcon aria-hidden />}>Save changes</Button>\n * <Button endIcon={<ChevronIcon aria-hidden />}>Continue</Button>\n * <Button variant=\"outline\" size=\"icon\" aria-label=\"Close\"><XIcon /></Button>\n */\nexport function Button({\n  className,\n  variant,\n  size,\n  startIcon,\n  endIcon,\n  children,\n  ...props\n}: ButtonProps) {\n  return (\n    <AriaButton\n      {...props}\n      data-slot=\"button\"\n      className={cn(buttonVariants({ variant, size }), className)}\n    >\n      {/*\n       * children passes through UNTOUCHED when neither slot is used, so a\n       * button with no icon renders byte-identical DOM to before this prop\n       * existed. That is what keeps this an additive change rather than a\n       * structural one -- and the childOrder assertions in the stories are what\n       * hold it true, since they read the button's direct children.\n       *\n       * The slot branch has to be a render function because React Aria's\n       * children are ChildrenOrFunction<ButtonRenderProps>: a consumer may pass\n       * a function to read isPressed or isPending, and wrapping the node\n       * directly would silently render that function as nothing. The fragment\n       * adds no element of its own.\n       */}\n      {startIcon === undefined && endIcon === undefined\n        ? children\n        : (renderProps) => (\n            <>\n              {startIcon}\n              {typeof children === \"function\" ? children(renderProps) : children}\n              {endIcon}\n            </>\n          )}\n    </AriaButton>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AA0BA,MAAa,iBAAiB,IAC5B;CACE;CAOA;CACA;CAgBA;CAIA;CACA;CAeA;CACA;CACA;CACA;CACA;CAKA;CAGA;AACF,GACA;CACE,UAAU;EACR,SAAS;GAoBP,SAAS;IACP;IACA;IACA;IACA;GACF;GACA,WAAW;IACT;IACA;IACA;IACA;GACF;GAIA,SAAS;IACP;IACA;IACA;IACA;GACF;GAgBA,gBAAgB;IACd;IACA;IACA;IACA;GACF;GACA,OAAO;IACL;IACA;IACA;IAIA;GACF;GACA,aAAa;IACX;IACA;IACA;IACA;GACF;GACA,MAAM;IACJ;IACA;IACA;GACF;EACF;EACA,MAAM;GAOJ,IAAI;GACJ,IAAI;GACJ,IAAI;GAIJ,MAAM;EACR;CACF;CACA,iBAAiB;EACf,SAAS;EACT,MAAM;CACR;AACF,CACF;;;;;;;;;;;;;;AAqDA,SAAgBA,SAAO,EACrB,WACA,SACA,MACA,WACA,SACA,UACA,GAAG,SACW;CACd,OACE,oBAACC,QAAD;EACE,GAAI;EACJ,aAAU;EACV,WAAW,GAAG,eAAe;GAAE;GAAS;EAAK,CAAC,GAAG,SAAS;EAezD,UAAA,cAAc,KAAA,KAAa,YAAY,KAAA,IACpC,YACC,gBACC,qBAAA,UAAA,EAAA,UAAA;GACG;GACA,OAAO,aAAa,aAAa,SAAS,WAAW,IAAI;GACzD;EACD,EAAA,CAAA;CAEE,CAAA;AAEhB"}
+{"version":3,"file":"button.js","names":["Button","AriaLink","AriaButton"],"sources":["../../src/button/button.tsx"],"sourcesContent":["\"use client\";\n\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport {\n  forwardRef,\n  isValidElement,\n  useCallback,\n  useRef,\n  useState,\n  type ForwardedRef,\n  type ReactNode,\n  type RefObject,\n} from \"react\";\nimport {\n  Button as AriaButton,\n  Link as AriaLink,\n  type ButtonProps as AriaButtonProps,\n  type ButtonRenderProps,\n  type LinkProps as AriaLinkProps,\n  type PressEvent,\n} from \"react-aria-components\";\n\nimport { cn } from \"../lib/cn.js\";\nimport { mergeRefs } from \"../lib/merge-refs.js\";\nimport {\n  anchorsLayer,\n  pressScaleFor,\n  useAriaBusy,\n  useExitBackstop,\n  useLeavingItems,\n  useMorphWidth,\n  type Rect,\n} from \"../lib/motion.js\";\n\n/**\n * Variant classes, exported so a consumer can reuse the exact classes we ship\n * rather than guessing at them.\n *\n * NOT the answer for a link-shaped button any more: pass `href` to Button. On a\n * consumer's own <a> these classes get none of their states -- hover, press and\n * the focus ring all key on React Aria data attributes that a plain anchor never\n * receives, and the base sets outline-none, so keyboard focus was invisible.\n *\n * Ported from the legacy shadcn Button. The variant and size vocabulary is\n * deliberately identical so existing call sites migrate by rename, with six\n * corrections that the Alfred contracts require -- each marked below.\n *\n * Every string here is a STATIC literal. Tailwind scans source text, so a class\n * assembled at runtime is invisible to it and would simply never be emitted.\n *\n * State comes from React Aria data attributes rather than pseudo-classes:\n * data-[focus-visible] is keyboard focus only, and data-[pressed] covers mouse,\n * touch and keyboard uniformly. The original had no pressed state at all.\n */\n/*\n * The press: the button scales down while pressed (see onPressStart for the\n * scale, which depends on width) and springs back on release. Anchors of\n * floating layers never scale: a menu that opens on pointerdown would measure a\n * shrunken trigger.\n */\nconst pressScale =\n  \"motion-safe:data-[pressed]:scale-(--press-scale) [&:is([aria-haspopup]:not([aria-haspopup=false]),[data-state],[role=combobox])]:scale-none!\";\n\nexport const buttonVariants = cva(\n  [\n    \"inline-flex items-center justify-center gap-(--density-control-gap) shrink-0 whitespace-nowrap\",\n    // No leading-* here on purpose. tailwind-merge treats a later text-* class\n    // as owning line-height (a Tailwind v3 assumption, where text-base carried\n    // one), so a leading-* in the base string is silently STRIPPED by cn() once\n    // a size variant adds text-base. It is not needed either: the control has a\n    // fixed height and centres with flex, so line-height cannot overflow it.\n    // A component with auto height must put leading-* AFTER its text-* class.\n    \"rounded-md font-sans font-medium\",\n    \"cursor-pointer select-none\",\n\n    // font-sans above is part of the same problem: a <button> does not inherit\n    // the page font, so without a reset it renders in the user-agent face\n    // (Arial in Chromium) rather than the design system's. The same applies to\n    // bg-transparent: an unstyled <button> paints the user-agent ButtonFace\n    // grey -- which is what surfaces the moment a fill class fails to resolve,\n    // and is why the paint stories compare against tokens rather than checking\n    // for transparency.\n    //\n    // The reset in @seekalfred/styles is OPT-IN, so a consumer may never load\n    // one. A bare <button> then keeps its user-agent border (2px, black, in\n    // Chromium) and inline padding, which is a black box around every variant\n    // that does not set a border of its own. The original inherited a zeroed\n    // border from Tailwind Preflight in the app; a library component cannot\n    // assume the consumer supplied one.\n    \"border-(length:--border-width) border-transparent bg-transparent\",\n\n    // Icon handling, ported verbatim: an svg child is sized unless the caller\n    // already said otherwise, and never swallows the press.\n    \"[&_svg]:pointer-events-none [&_svg]:shrink-0\",\n    \"[&_svg:not([class*='size-'])]:size-(--icon-sm)\",\n\n    // CORRECTION 1 -- the original focused with `ring-[3px]`, which is a\n    // box-shadow. Box-shadows are discarded under forced-colors, taking the\n    // only focus indication with them, and axe has no rule that would catch it\n    // (ARCHITECTURE section 5, rule 6). A real outline survives.\n    //\n    // outline-solid on the focus variant is load-bearing, not decoration.\n    // `outline-none` sets BOTH outline-style:none and --tw-outline-style:none,\n    // and Tailwind's outline-width utility resolves its style from that same\n    // variable -- so the focus variant applied a width and a colour while\n    // faithfully re-applying style:none, and painted nothing. The button was\n    // keyboard-focusable with no visible ring. axe has no focus-indicator\n    // rule, so every automated gate stayed green; the KeyboardFocus story now\n    // asserts outlineStyle directly.\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    // CORRECTION 2 -- `disabled:pointer-events-none` also kills the cursor, so\n    // the control reads as inert rather than as unavailable. React Aria already\n    // blocks activation; this only has to say so.\n    // The opacity half of the disabled look moved into each variant: the\n    // outlined and ghost buttons stay fully opaque and mute their colours\n    // instead, which a single base opacity cannot express.\n    \"data-[disabled]:cursor-not-allowed\",\n    \"[-webkit-tap-highlight-color:transparent]\",\n\n    // React Aria's own pending state. The original had no equivalent.\n    \"data-[pending]:cursor-progress\",\n  ],\n  {\n    variants: {\n      variant: {\n        // CORRECTION 3 -- the legacy button filled this variant with the brand\n        // gradient. It is flat here, because the brand system caps\n        // --gradient-brand at one intentional element per view and keeps that\n        // budget for the logo and progress bars: \"a gradient on every button\n        // spends that budget everywhere. Ours is the flat primary.\"\n        //\n        // CORRECTION 4 -- the label is ink, not white. Brand orange #FF8431\n        // carries white at 2.44:1; ink clears it at 8.35:1, which is the brand\n        // system's own --text-on-orange rule. Its Button ships white only as a\n        // dated, individually signed-off exception, and this library's contrast\n        // contract is build-failing with no exemption mechanism to inherit it.\n        //\n        // CORRECTION 7 (reversed by decision) -- hover and pressed used to be\n        // their own TOKENS (500 rest, 600 hover, 700 pressed), because an\n        // opacity modifier lightens the button toward the page, which reads as\n        // receding, and makes the label pair unmeasurable: an alpha composite\n        // depends on whatever sits behind it. They are now opacity steps (.91,\n        // .84) plus the resting shadow, by explicit decision, so the hover and\n        // pressed fills are no longer used here. The contrast contract still\n        // lists them (contrast-pairs.json) but cannot express an alpha, so the\n        // faded states were measured by hand: ink on orange, both faded over\n        // the page, is 6.54:1 at .84 on the light page and 6.08:1 on the dark\n        // one (8.35:1 at rest), all above the 4.5:1 floor.\n        primary: [\n          \"bg-primary text-primary-foreground shadow-surface\",\n          \"motion-safe:button-motion\",\n          pressScale,\n          \"data-[hovered]:opacity-91 data-[hovered]:shadow-resting\",\n          \"data-[pressed]:opacity-84\",\n          \"data-[disabled]:opacity-(--opacity-button-disabled)\",\n        ],\n        secondary: [\n          \"bg-secondary text-secondary-foreground shadow-surface\",\n          \"motion-safe:button-motion\",\n          pressScale,\n          \"data-[hovered]:bg-secondary-hover data-[hovered]:shadow-resting\",\n          \"data-[pressed]:bg-secondary-pressed\",\n          // A disabled outlined button keeps its shape and mutes its\n          // label, so it reads as a button that is off, not as plain text.\n          \"data-[disabled]:opacity-100 data-[disabled]:bg-muted data-[disabled]:text-muted-foreground data-[disabled]:border-border\",\n        ],\n        // primary-strong, never primary: the brand orange is 2.44:1 on the page\n        // and cannot legally be a label OR a border. That is the whole reason\n        // the token exists.\n        outline: [\n          \"bg-background text-primary-strong border-(length:--border-width) border-primary-strong shadow-surface\",\n          \"motion-safe:button-motion\",\n          pressScale,\n          \"data-[hovered]:bg-muted data-[hovered]:shadow-resting\",\n          \"data-[pressed]:bg-muted data-[pressed]:border-foreground\",\n          \"data-[disabled]:opacity-100 data-[disabled]:bg-muted data-[disabled]:text-muted-foreground data-[disabled]:border-border\",\n        ],\n        /*\n         * The NEUTRAL outline, and the product's single most-used button:\n         * 99 call sites against 32 for the brand-coloured one.\n         *\n         * It exists because `outline` above is brand-toned -- orange border,\n         * orange label -- which is what the product calls `secondaryOutline`.\n         * Its plain `outline` is this: a grey border and ordinary body text,\n         * for a button that must not compete with the primary action next to\n         * it. One name could not cover both, and renaming `outline` would have\n         * silently repainted every existing call site of ours instead.\n         *\n         * `border` rather than `primary-strong`: --color-border is the token\n         * already held to the 3:1 non-text floor of WCAG 1.4.11, which is what\n         * a border separating a control from the page has to clear.\n         */\n        outlineNeutral: [\n          \"bg-background text-foreground border-(length:--border-width) border-border shadow-surface\",\n          \"motion-safe:button-motion\",\n          pressScale,\n          \"data-[hovered]:bg-muted data-[hovered]:shadow-resting\",\n          \"data-[pressed]:bg-muted data-[pressed]:border-foreground\",\n          \"data-[disabled]:opacity-100 data-[disabled]:bg-muted data-[disabled]:text-muted-foreground\",\n        ],\n        ghost: [\n          \"bg-transparent text-primary-strong\",\n          \"motion-safe:button-motion\",\n          pressScale,\n          \"data-[hovered]:bg-muted\",\n          \"data-[disabled]:opacity-100 data-[disabled]:text-muted-foreground\",\n          // CORRECTION 5 -- pressed must not be background-only. A ghost button\n          // has no border at rest, so the pressed border is the non-colour cue\n          // that survives forced-colors (rule 6 again).\n          \"data-[pressed]:bg-muted data-[pressed]:border-primary-strong\",\n        ],\n        destructive: [\n          \"bg-destructive text-destructive-foreground shadow-surface\",\n          \"motion-safe:button-motion\",\n          pressScale,\n          \"data-[hovered]:bg-destructive-hover\",\n          \"data-[pressed]:bg-destructive-pressed\",\n          // Muted fill, label tinted toward destructive.\n          \"data-[disabled]:opacity-100 data-[disabled]:bg-muted data-[disabled]:border-border data-[disabled]:text-[color-mix(in_oklab,var(--color-destructive)_55%,var(--color-muted))]\",\n        ],\n        link: [\n          \"bg-transparent text-primary-strong underline-offset-(--underline-offset)\",\n          \"motion-safe:button-motion\",\n          \"data-[disabled]:opacity-(--opacity-button-disabled)\",\n          \"data-[hovered]:underline\",\n          \"data-[pressed]:underline\",\n        ],\n      },\n      size: {\n        // Height, padding and label size all come from the control scale, so\n        // data-density moves them together. The icon-only variant is square at\n        // the md height. The legacy shadcn rule that tightened padding when a\n        // child was an icon is gone: it needed three more magic numbers, the\n        // brand system has no equivalent, and the gap token now owns icon\n        // spacing.\n        sm: \"h-(--density-control-h-sm) px-(--density-control-pad-sm) text-sm\",\n        md: \"h-(--density-control-h-md) px-(--density-control-pad-md) text-base\",\n        lg: \"h-(--density-control-h-lg) px-(--density-control-pad-lg) text-lg\",\n        // text-base even though there is no visible label: without it the\n        // user-agent default (13.33px in Chromium) leaks in and sizes any\n        // em-based child against the wrong root.\n        icon: \"size-(--density-control-h-md) px-0 text-base\",\n      },\n    },\n    defaultVariants: {\n      variant: \"primary\",\n      size: \"md\",\n    },\n  },\n);\n\n/*\n * The label motion, without an animation library.\n *\n * A presence library would keep the outgoing label mounted for the crossfade\n * and drive a motion value for the width morph. CSS cannot keep an outgoing\n * label mounted or observe its own content width, so those two jobs are the\n * plain React below; every animation itself is a CSS keyframe or transition\n * (@seekalfred/styles motion.css, the button-* utilities in styles.css, the\n * --animate-* tokens).\n */\n\n/** A key for the label content: text plus element names, so a new label or icon crossfades while prop-only updates stay in place. */\nfunction labelKey(node: ReactNode): string {\n  if (node == null || typeof node === \"boolean\") return \"\";\n  if (typeof node === \"string\" || typeof node === \"number\" || typeof node === \"bigint\") return String(node);\n  if (Array.isArray(node)) return node.map(labelKey).join(\"\");\n  if (!isValidElement(node)) return \"\";\n  const type = node.type as string | { displayName?: string; name?: string };\n  return \"<\" + (typeof type === \"string\" ? type : (type?.displayName ?? type?.name ?? \"\")) + \">\" + labelKey((node.props as { children?: ReactNode }).children);\n}\n\n/** A label with no text once element names are stripped is an icon, which scales instead of rising. */\nconst isIconKey = (key: string) => !/\\S/.test(key.replace(/<[^>]*>/g, \"\"));\n\ninterface LeavingLabel {\n  id: number;\n  node: ReactNode;\n  icon: boolean;\n  rect: Rect;\n}\n\nfunction LeavingPhase({ phase, onDone }: { phase: LeavingLabel; onDone: (id: number) => void }) {\n  const { id } = phase;\n  const remove = useCallback(() => onDone(id), [onDone, id]);\n  useExitBackstop(true, remove);\n  return (\n    <span\n      aria-hidden=\"true\"\n      onAnimationEnd={(event) => {\n        if (event.target === event.currentTarget) remove();\n      }}\n      style={phase.rect}\n      className={cn(\n        \"absolute inline-flex items-center justify-center gap-(--density-control-gap) whitespace-nowrap [&_svg]:shrink-0\",\n        phase.icon\n          ? \"motion-safe:animate-glyph-out motion-reduce:animate-fade-out\"\n          : \"motion-safe:animate-label-out motion-reduce:animate-fade-out\",\n      )}\n    >\n      {phase.node}\n    </span>\n  );\n}\n\n/** The loading spinner: it scales in on the snappy spring, and out smaller with a little blur. Nothing animates if it is there on first mount. */\nfunction Loader({ show }: { show: boolean }) {\n  const [initial] = useState(show);\n  const [rendered, setRendered] = useState(show);\n  const [animated, setAnimated] = useState(false);\n  const leaving = rendered && !show;\n  if (show && !rendered) setRendered(true);\n  if (!animated && show !== initial) setAnimated(true);\n  const unmount = useCallback(() => setRendered(false), []);\n  useExitBackstop(leaving, unmount);\n  if (!rendered) return null;\n  return (\n    <span\n      aria-hidden=\"true\"\n      onAnimationEnd={(event) => {\n        if (leaving && event.target === event.currentTarget) unmount();\n      }}\n      className={cn(\n        \"absolute top-1/2 left-1/2 -m-2 grid size-4\",\n        leaving\n          ? \"motion-safe:animate-loader-out motion-reduce:animate-fade-out\"\n          : animated && \"motion-safe:animate-loader-in motion-reduce:animate-fade-in\",\n      )}\n    >\n      <span className=\"rounded-circle border-(length:--border-width-spinner) border-current border-r-transparent motion-safe:animate-spin-fast\" />\n    </span>\n  );\n}\n\n/**\n * The button's inside: a loader, and a slot that holds the current label.\n *\n * A new label (a different text, or a different icon) mounts under a new key and\n * rises in while the old one is popped out of flow where it was and lifts away.\n * Nothing animates on first mount, and a prop-only update (same key) stays in\n * place.\n */\nfunction ButtonContent({ children, pending }: { children: ReactNode; pending: boolean }) {\n  const key = labelKey(children);\n  const icon = isIconKey(key);\n  const contentRef = useRef<HTMLSpanElement>(null);\n  const phaseRef = useRef<HTMLSpanElement>(null);\n\n  useMorphWidth(contentRef, key);\n  const { leaving, changed, remove } = useLeavingItems(key, { node: children, icon }, () => phaseRef.current);\n\n  return (\n    <>\n      <Loader show={pending} />\n      <span className={cn(\"button-slot\", pending && \"opacity-0\")}>\n        <span ref={contentRef} className=\"inline-flex flex-none items-center\">\n          {leaving.map((item) => (\n            <LeavingPhase key={item.id} phase={{ id: item.id, node: item.value.node, icon: item.value.icon, rect: item.rect }} onDone={remove} />\n          ))}\n          <span\n            key={key}\n            ref={phaseRef}\n            data-slot=\"button-label\"\n            className={cn(\n              \"inline-flex items-center justify-center gap-(--density-control-gap) whitespace-nowrap [&_svg]:shrink-0\",\n              changed &&\n                (icon\n                  ? \"motion-safe:animate-glyph-in motion-reduce:animate-fade-in\"\n                  : \"motion-safe:animate-label-in motion-reduce:animate-fade-in\"),\n            )}\n          >\n            {children}\n          </span>\n        </span>\n      </span>\n    </>\n  );\n}\n\n/**\n * Props.\n *\n * CORRECTION 6 -- the legacy Button was a plain `<button>`, so it took\n * `onClick`, `disabled` and Radix's `asChild`. React Aria's Button has none of\n * those: `ButtonProps` explicitly omits `onClick` and `href`. The replacements\n * are `onPress`, `isDisabled`, and `href` -- which renders React Aria's Link in\n * place of its Button. See the migration table in the package README.\n *\n * Deliberately NOT intersected with ComponentPropsWithoutRef<\"button\">: that\n * would advertise disabled, tabIndex and role, which React Aria does not\n * implement and silently ignores. React Aria already forwards the native event\n * surface, so nothing is lost.\n */\nexport interface ButtonProps\n  extends Omit<AriaButtonProps, \"className\" | \"style\">, VariantProps<typeof buttonVariants> {\n  /** Extra classes. Merged last, so they win conflicts with ours. */\n  className?: string;\n  /**\n   * Icon rendered before the label.\n   *\n   * Mark the glyph `aria-hidden` -- the label is the accessible name, and a\n   * second name source only makes the button announce twice. It is sized by the\n   * base `[&_svg]` rule at `--icon-sm` unless it carries a `size-*` class of\n   * its own, and spaced by `--density-control-gap`.\n   *\n   * Two named slots rather than one `icon` plus a position prop: a button can\n   * legitimately carry a leading glyph AND a trailing affordance, which one\n   * icon and a position cannot express.\n   *\n   * NOT the route for `size=\"icon\"`. An icon-only button passes its glyph as\n   * `children`, which is what gives it its single centred child.\n   */\n  startIcon?: ReactNode;\n  /** Icon rendered after the label. Same rules as {@link ButtonProps.startIcon}. */\n  endIcon?: ReactNode;\n  /**\n   * Makes the button a link. It renders React Aria's `Link` -- a real `<a>`,\n   * announced as a link -- with exactly the classes a button of the same\n   * `variant` and `size` gets, and the same hover, press and focus-ring states.\n   *\n   * Use it whenever activating the control navigates. A button that navigates\n   * cannot be opened in a new tab, is announced as the wrong role, and is\n   * skipped by a screen reader's list of links.\n   *\n   * Client-side routing needs React Aria's `RouterProvider` mounted once above\n   * it; without one, an `href` is an ordinary page load, which is also what an\n   * external or download link wants.\n   *\n   * Button-only props have nothing to act on here: `type`, `form*` and\n   * `isPending` are ignored, and the `ref` receives the `<a>`.\n   */\n  href?: AriaLinkProps[\"href\"];\n  /** With `href` only: where to open it, e.g. `\"_blank\"`. */\n  target?: AriaLinkProps[\"target\"];\n  /** With `href` only. Give `\"noreferrer\"` alongside `target=\"_blank\"` to an external site. */\n  rel?: AriaLinkProps[\"rel\"];\n  /** With `href` only: download the target instead of opening it, optionally under this file name. */\n  download?: AriaLinkProps[\"download\"];\n}\n\n/**\n * A button.\n *\n * A label that changes (a different text, or a different icon) crossfades, and\n * the button's width springs to fit it. While that runs, the OUTGOING label is\n * still in the DOM for about 200ms, `aria-hidden` and out of flow, so read a\n * button's text after the change settles, and do not put `id`s, inputs or\n * anything stateful inside a label that changes. Text that changes constantly,\n * such as a live counter, crossfades every time it does.\n *\n * `size=\"icon\"` renders a square button with no visible text, so it **must**\n * carry an `aria-label` -- otherwise it has no accessible name and fails axe's\n * `button-name` rule. The IconOnly story is the guard on that.\n *\n * @example\n * <Button onPress={save}>Save changes</Button>\n * <Button startIcon={<SaveIcon aria-hidden />}>Save changes</Button>\n * <Button endIcon={<ChevronIcon aria-hidden />}>Continue</Button>\n * <Button variant=\"outline\" size=\"icon\" aria-label=\"Close\"><XIcon /></Button>\n * <Button href=\"/reports\" variant=\"outlineNeutral\">View reports</Button>\n */\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(\n  { className, variant, size, startIcon, endIcon, children, href, target, rel, download, ...props },\n  ref,\n) {\n  const classes = cn(buttonVariants({ variant, size }), className);\n\n  const button = useAriaBusy(props.isPending === true);\n\n  /*\n   * children passes through UNTOUCHED when neither slot is used, so a button\n   * with no icon renders byte-identical DOM to before this prop existed. That is\n   * what keeps this an additive change rather than a structural one -- and the\n   * childOrder assertions in the stories are what hold it true, since they read\n   * the button's direct children.\n   *\n   * The slot branch has to be a render function because React Aria's children\n   * are ChildrenOrFunction<ButtonRenderProps>: a consumer may pass a function to\n   * read isPressed or isPending, and wrapping the node directly would silently\n   * render that function as nothing. The fragment adds no element of its own.\n   */\n  const content = (renderProps: ButtonRenderProps & { defaultChildren: ReactNode | undefined }) => (\n    <ButtonContent pending={renderProps.isPending}>\n      {startIcon}\n      {typeof children === \"function\" ? children(renderProps) : children}\n      {endIcon}\n    </ButtonContent>\n  );\n\n  const { onPressStart } = props;\n  const pressStart = (event: PressEvent) => {\n    if (!anchorsLayer(props)) {\n      const target = event.target as HTMLElement;\n      target.style.setProperty(\"--press-scale\", pressScaleFor(target.offsetWidth));\n    }\n    onPressStart?.(event);\n  };\n\n  if (href !== undefined) {\n    /*\n     * The same classes on React Aria's Link. It sets data-hovered,\n     * data-pressed and data-focus-visible on the <a>, which is what every\n     * state class above keys on -- nothing here is re-implemented.\n     *\n     * Button-only props need no stripping: Link runs its props through\n     * filterDOMProps, so `type` never reaches the <a>, and `isPending` is not a\n     * DOM prop. A link has no pending state, so a render-function child is told\n     * it is not pending rather than handed an object missing the field. The ref\n     * is typed for the button this usually is; with href it receives the <a>,\n     * which the TSDoc on `href` says.\n     */\n    return (\n      <AriaLink\n        ref={ref as unknown as ForwardedRef<HTMLAnchorElement>}\n        {...(props as Omit<AriaLinkProps, \"className\" | \"children\">)}\n        onPressStart={pressStart}\n        href={href}\n        target={target}\n        rel={rel}\n        download={download}\n        data-slot=\"button\"\n        className={classes}\n      >\n        {(renderProps) => content({ ...renderProps, isPending: false })}\n      </AriaLink>\n    );\n  }\n\n  return (\n    <AriaButton ref={mergeRefs(ref, button as RefObject<HTMLButtonElement | null>)} {...props} onPressStart={pressStart} data-slot=\"button\" className={classes}>\n      {content}\n    </AriaButton>\n  );\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4DA,MAAM,aACJ;AAEF,MAAa,iBAAiB,IAC5B;CACE;CAOA;CACA;CAgBA;CAIA;CACA;CAeA;CACA;CACA;CACA;CACA;CAQA;CACA;CAGA;AACF,GACA;CACE,UAAU;EACR,SAAS;GAwBP,SAAS;IACP;IACA;IACA;IACA;IACA;IACA;GACF;GACA,WAAW;IACT;IACA;IACA;IACA;IACA;IAGA;GACF;GAIA,SAAS;IACP;IACA;IACA;IACA;IACA;IACA;GACF;GAgBA,gBAAgB;IACd;IACA;IACA;IACA;IACA;IACA;GACF;GACA,OAAO;IACL;IACA;IACA;IACA;IACA;IAIA;GACF;GACA,aAAa;IACX;IACA;IACA;IACA;IACA;IAEA;GACF;GACA,MAAM;IACJ;IACA;IACA;IACA;IACA;GACF;EACF;EACA,MAAM;GAOJ,IAAI;GACJ,IAAI;GACJ,IAAI;GAIJ,MAAM;EACR;CACF;CACA,iBAAiB;EACf,SAAS;EACT,MAAM;CACR;AACF,CACF;;AAcA,SAAS,SAAS,MAAyB;CACzC,IAAI,QAAQ,QAAQ,OAAO,SAAS,WAAW,OAAO;CACtD,IAAI,OAAO,SAAS,YAAY,OAAO,SAAS,YAAY,OAAO,SAAS,UAAU,OAAO,OAAO,IAAI;CACxG,IAAI,MAAM,QAAQ,IAAI,GAAG,OAAO,KAAK,IAAI,QAAQ,CAAC,CAAC,KAAK,EAAE;CAC1D,IAAI,CAAC,eAAe,IAAI,GAAG,OAAO;CAClC,MAAM,OAAO,KAAK;CAClB,OAAO,OAAO,OAAO,SAAS,WAAW,OAAQ,MAAM,eAAe,MAAM,QAAQ,MAAO,MAAM,SAAU,KAAK,MAAmC,QAAQ;AAC7J;;AAGA,MAAM,aAAa,QAAgB,CAAC,KAAK,KAAK,IAAI,QAAQ,YAAY,EAAE,CAAC;AASzE,SAAS,aAAa,EAAE,OAAO,UAAiE;CAC9F,MAAM,EAAE,OAAO;CACf,MAAM,SAAS,kBAAkB,OAAO,EAAE,GAAG,CAAC,QAAQ,EAAE,CAAC;CACzD,gBAAgB,MAAM,MAAM;CAC5B,OACE,oBAAC,QAAD;EACE,eAAY;EACZ,iBAAiB,UAAU;GACzB,IAAI,MAAM,WAAW,MAAM,eAAe,OAAO;EACnD;EACA,OAAO,MAAM;EACb,WAAW,GACT,mHACA,MAAM,OACF,iEACA,8DACN;EAEC,UAAA,MAAM;CACH,CAAA;AAEV;;AAGA,SAAS,OAAO,EAAE,QAA2B;CAC3C,MAAM,CAAC,WAAW,SAAS,IAAI;CAC/B,MAAM,CAAC,UAAU,eAAe,SAAS,IAAI;CAC7C,MAAM,CAAC,UAAU,eAAe,SAAS,KAAK;CAC9C,MAAM,UAAU,YAAY,CAAC;CAC7B,IAAI,QAAQ,CAAC,UAAU,YAAY,IAAI;CACvC,IAAI,CAAC,YAAY,SAAS,SAAS,YAAY,IAAI;CACnD,MAAM,UAAU,kBAAkB,YAAY,KAAK,GAAG,CAAC,CAAC;CACxD,gBAAgB,SAAS,OAAO;CAChC,IAAI,CAAC,UAAU,OAAO;CACtB,OACE,oBAAC,QAAD;EACE,eAAY;EACZ,iBAAiB,UAAU;GACzB,IAAI,WAAW,MAAM,WAAW,MAAM,eAAe,QAAQ;EAC/D;EACA,WAAW,GACT,8CACA,UACI,kEACA,YAAY,6DAClB;EAEA,UAAA,oBAAC,QAAD,EAAM,WAAU,0HAA2H,CAAA;CACvI,CAAA;AAEV;;;;;;;;;AAUA,SAAS,cAAc,EAAE,UAAU,WAAsD;CACvF,MAAM,MAAM,SAAS,QAAQ;CAC7B,MAAM,OAAO,UAAU,GAAG;CAC1B,MAAM,aAAa,OAAwB,IAAI;CAC/C,MAAM,WAAW,OAAwB,IAAI;CAE7C,cAAc,YAAY,GAAG;CAC7B,MAAM,EAAE,SAAS,SAAS,WAAW,gBAAgB,KAAK;EAAE,MAAM;EAAU;CAAK,SAAS,SAAS,OAAO;CAE1G,OACE,qBAAA,YAAA,EAAA,UAAA,CACE,oBAAC,QAAD,EAAQ,MAAM,QAAU,CAAA,GACxB,oBAAC,QAAD;EAAM,WAAW,GAAG,eAAe,WAAW,WAAW;EACvD,UAAA,qBAAC,QAAD;GAAM,KAAK;GAAY,WAAU;GAAjC,UAAA,CACG,QAAQ,KAAK,SACZ,oBAAC,cAAD;IAA4B,OAAO;KAAE,IAAI,KAAK;KAAI,MAAM,KAAK,MAAM;KAAM,MAAM,KAAK,MAAM;KAAM,MAAM,KAAK;IAAK;IAAG,QAAQ;GAAS,GAAjH,KAAK,EAA4G,CACrI,GACD,oBAAC,QAAD;IAEE,KAAK;IACL,aAAU;IACV,WAAW,GACT,0GACA,YACG,OACG,+DACA,6DACR;IAEC;GACG,GAZC,GAYD,CACF;;CACF,CAAA,CACN,EAAA,CAAA;AAEN;;;;;;;;;;;;;;;;;;;;;;AAoFA,MAAaA,WAAS,WAA2C,SAASA,SACxE,EAAE,WAAW,SAAS,MAAM,WAAW,SAAS,UAAU,MAAM,QAAQ,KAAK,UAAU,GAAG,SAC1F,KACA;CACA,MAAM,UAAU,GAAG,eAAe;EAAE;EAAS;CAAK,CAAC,GAAG,SAAS;CAE/D,MAAM,SAAS,YAAY,MAAM,cAAc,IAAI;CAcnD,MAAM,WAAW,gBACf,qBAAC,eAAD;EAAe,SAAS,YAAY;EAApC,UAAA;GACG;GACA,OAAO,aAAa,aAAa,SAAS,WAAW,IAAI;GACzD;EACY;;CAGjB,MAAM,EAAE,iBAAiB;CACzB,MAAM,cAAc,UAAsB;EACxC,IAAI,CAAC,aAAa,KAAK,GAAG;GACxB,MAAM,SAAS,MAAM;GACrB,OAAO,MAAM,YAAY,iBAAiB,cAAc,OAAO,WAAW,CAAC;EAC7E;EACA,eAAe,KAAK;CACtB;CAEA,IAAI,SAAS,KAAA,GAaX,OACE,oBAACC,MAAD;EACO;EACL,GAAK;EACL,cAAc;EACR;EACE;EACH;EACK;EACV,aAAU;EACV,WAAW;EAET,WAAA,gBAAgB,QAAQ;GAAE,GAAG;GAAa,WAAW;EAAM,CAAC;CACtD,CAAA;CAId,OACE,oBAACC,QAAD;EAAY,KAAK,UAAU,KAAK,MAA6C;EAAG,GAAI;EAAO,cAAc;EAAY,aAAU;EAAS,WAAW;EAChJ,UAAA;CACS,CAAA;AAEhB,CAAC"}

package/dist/button-group/button-group.d.ts

@@ -0,0 +1,76 @@
+import { ReactNode } from "react";
+//#region src/button-group/button-group.d.ts
+export type ButtonGroupVariant = "outline" | "solid";
+export type ButtonGroupSize = "sm" | "md";
+export type ButtonGroupOrientation = "horizontal" | "vertical";
+export interface ButtonGroupItem {
+  /** Stable key for the segment. */
+  id: string;
+  /** Visible text and the accessible name. Changing it crossfades in place, so "Share" can answer "Copied". */
+  label: string;
+  /** Every other label this segment can show, such as ["Copied"]. The segment sizes to the widest, so a label change never resizes it. */
+  reserve?: string[];
+  /** An icon before the label. Swapping it for another morphs; re-rendering the same icon does not. Mark it `aria-hidden`. */
+  icon?: ReactNode;
+  /** Shows only the icon; the label becomes the accessible name and the tooltip. */
+  iconOnly?: boolean;
+  /** Visible content in place of the label, such as a live value. The label stays the accessible name. */
+  content?: ReactNode;
+  onSelect?: () => void;
+  /** Renders the segment as a link. */
+  href?: string;
+  isDisabled?: boolean;
+}
+export interface ButtonGroupMenuItem {
+  id: string;
+  label: string;
+  /** An icon before the label. Mark it `aria-hidden`. */
+  icon?: ReactNode;
+  onSelect?: () => void;
+  href?: string;
+  isDisabled?: boolean;
+  /** Colours the item as a destructive action. */
+  destructive?: boolean;
+}
+export interface ButtonGroupMenu {
+  /** Accessible name and tooltip of the chevron segment, such as "More actions". */
+  label: string;
+  items: ButtonGroupMenuItem[];
+}
+export interface ButtonGroupProps {
+  items: ButtonGroupItem[];
+  /** Adds a trailing chevron segment that opens these actions in a menu aligned to the group's edge. */
+  menu?: ButtonGroupMenu;
+  /** Accessible name of the group, such as "Document actions". */
+  label: string;
+  /** @default "outline" */
+  variant?: ButtonGroupVariant;
+  /** @default "md" */
+  size?: ButtonGroupSize;
+  /** @default "horizontal" */
+  orientation?: ButtonGroupOrientation;
+  /** When the row does not fit its container, segments with an icon drop their label and keep the icon. Horizontal only. @default true */
+  collapseLabels?: boolean;
+  /** Disables every segment and the menu. */
+  isDisabled?: boolean;
+  /** Extra classes. Merged last, so they win conflicts with ours. */
+  className?: string;
+}
+/**
+ * Related actions joined into one surface: a shared border and radius, hairline
+ * dividers, no gaps. One soft highlight glides between segments under the
+ * pointer or keyboard focus, the pressed segment answers in place, and an
+ * optional chevron segment opens more actions in a menu aligned to the group's
+ * edge.
+ *
+ * Tab visits every segment in order; the arrow keys along the orientation, Home
+ * and End also move between them. A segment's label can change in place ("Share"
+ * answers "Copied") without resizing it, and a label that changes right after its
+ * segment is pressed is announced once.
+ *
+ * @example
+ * <ButtonGroup label="Document actions" items={[{ id: "edit", label: "Edit" }, { id: "share", label: "Share", reserve: ["Copied"] }]} />
+ */
+export declare function ButtonGroup({ items, menu, label, variant, size, orientation, collapseLabels, isDisabled, className }: ButtonGroupProps): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=button-group.d.ts.map