@seekalfred/primitives 0.5.1 → 0.7.1

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 { forwardRef, 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 const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(\n  { className, variant, size, startIcon, endIcon, children, ...props },\n  ref,\n) {\n  return (\n    <AriaButton\n      ref={ref}\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,MAAaA,WAAS,WAA2C,SAASA,SACxE,EAAE,WAAW,SAAS,MAAM,WAAW,SAAS,UAAU,GAAG,SAC7D,KACA;CACA,OACE,oBAACC,QAAD;EACO;EACL,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,CAAC"}
+{"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-control 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        // Hover and pressed are their own TOKENS again (primary 400 and 600),\n        // as the design spec (Oct 2026) sets them; an opacity step would make\n        // the label pair depend on whatever sits behind the button. Both pairs\n        // are in the contrast contract (contrast-pairs.json).\n        primary: [\n          \"bg-primary text-primary-foreground shadow-surface\",\n          \"motion-safe:button-motion\",\n          pressScale,\n          // Design spec (Oct 2026): hover primary 400, pressed primary 600.\n          \"data-[hovered]:bg-primary-hover data-[hovered]:shadow-resting\",\n          \"data-[pressed]:bg-primary-pressed\",\n          \"data-[disabled]:opacity-(--opacity-button-disabled)\",\n        ],\n        /*\n         * The AI action (Generate, Seek Alfred). The primary fill with a beam\n         * that runs around its edge in orange, lavender and teal; on hover the\n         * beam speeds up, the button glows and an icon tilts. Disabled stops the\n         * beam. See ai-beam in styles.css.\n         */\n        ai: [\n          \"bg-primary text-primary-foreground shadow-surface\",\n          \"ai-beam\",\n          \"motion-safe:button-motion\",\n          pressScale,\n          \"data-[hovered]:bg-primary-hover\",\n          \"motion-safe:data-[hovered]:[&_svg]:-rotate-12\",\n          \"data-[disabled]:opacity-(--opacity-button-disabled)\",\n        ],\n        /*\n         * Design spec (Oct 2026): Secondary is a white surface with a light\n         * border and dark text -- the same paint as `outlineNeutral` below, kept\n         * under this name so existing call sites need no rename. It used to be\n         * the lavender fill; the lavender `secondary` role still exists for\n         * badges and highlights, just not on a button.\n         */\n        secondary: [\n          \"bg-surface 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\",\n          // A disabled secondary button keeps its shape and mutes its fill and\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-surface 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         * This is the design spec's Secondary button: surface, the light\n         * `border` hairline and body text. The hairline is below 3:1 by UX\n         * decision; the label, hover fill and focus ring carry the boundary.\n         */\n        outlineNeutral: [\n          \"bg-surface 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\",\n          \"data-[disabled]:opacity-100 data-[disabled]:bg-muted data-[disabled]:text-text-disabled\",\n        ],\n        ghost: [\n          \"bg-transparent text-text-secondary\",\n          \"motion-safe:button-motion\",\n          pressScale,\n          \"data-[hovered]:bg-muted data-[hovered]:text-foreground\",\n          \"data-[disabled]:opacity-100 data-[disabled]:text-text-disabled\",\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        // Design spec (Oct 2026): an outlined Danger button, not a red fill.\n        destructive: [\n          \"bg-surface text-destructive-strong border-(length:--border-width) border-border shadow-surface\",\n          \"motion-safe:button-motion\",\n          pressScale,\n          \"data-[hovered]:bg-muted data-[hovered]:border-destructive-strong\",\n          \"data-[pressed]:bg-muted data-[pressed]:border-destructive-strong\",\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-text-link underline-offset-(--underline-offset)\",\n          \"motion-safe:button-motion\",\n          \"data-[disabled]:text-text-disabled\",\n          \"data-[hovered]:underline\",\n          \"data-[pressed]:underline data-[pressed]:opacity-80\",\n          // A trailing arrow moves 3px on hover.\n          \"[&_svg:last-child]:transition-transform motion-safe:data-[hovered]:[&_svg:last-child]:translate-x-0.75 rtl:motion-safe:data-[hovered]:[&_svg:last-child]:-translate-x-0.75\",\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        // Design spec (Oct 2026): 16px padding and 14px label at 36px and 44px.\n        sm: \"h-(--density-control-h-sm) px-4 text-sm\",\n        md: \"h-(--density-control-h-md) px-4 text-sm\",\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":"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"}

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

package/dist/button-group/button-group.js

@@ -0,0 +1,402 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { prefersReducedMotion, useExitBackstop, useIsomorphicLayoutEffect, useLeavingItems, useMorphWidth } from "../lib/motion.js";
+import { Menu as Menu$1, MenuItem as MenuItem$1, MenuTrigger } from "../menu/menu.js";
+import { isValidElement, useCallback, useEffect, useRef, useState } from "react";
+import { Button } from "react-aria-components";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/button-group/button-group.tsx
+/** Key of the chevron segment. Plain text, because the HTML parser rewrites control characters in server-rendered attributes. */
+const MENU = "button-group-menu";
+/** Names the icon element, so swapping Link for Check morphs while a re-render of the same icon stays still. */
+function iconKey(node) {
+	if (!isValidElement(node)) return typeof node === "string" || typeof node === "number" ? String(node) : "";
+	const type = node.type;
+	return typeof type === "string" ? type : type?.displayName ?? type?.name ?? "icon";
+}
+const PHASE = "col-start-1 row-start-1 inline-flex items-center gap-2 whitespace-nowrap group-data-[size=sm]/bg:gap-1.5";
+function LeavingPhase({ id, onDone, children }) {
+	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();
+		},
+		className: cn(PHASE + " motion-safe:animate-label-out motion-reduce:animate-fade-out"),
+		children
+	});
+}
+/**
+* Icon and label of one segment. Every reserved label sits invisibly in the same
+* grid cell, so the segment is as wide as its widest state and a new label
+* crossfades inside a fixed box: it rises in from a soft blur while the old one
+* lifts away. A label nobody reserved still never snaps: the slot springs to its
+* width.
+*/
+function SegmentContent({ item }) {
+	const contentRef = useRef(null);
+	const phaseRef = useRef(null);
+	const key = iconKey(item.icon) + "|" + (item.content !== void 0 ? "\0content" : item.iconOnly ? "" : item.label);
+	useMorphWidth(contentRef, key);
+	const collapsible = item.icon ? "group-data-[compact]/bg:hidden" : "";
+	const node = /* @__PURE__ */ jsxs(Fragment$1, { children: [item.icon ? /* @__PURE__ */ jsx("span", {
+		className: "inline-flex flex-none [&_svg]:size-(--icon-sm)",
+		children: item.icon
+	}) : null, item.content !== void 0 ? /* @__PURE__ */ jsx("span", {
+		className: "inline-flex items-center tabular-nums",
+		children: item.content
+	}) : item.iconOnly ? null : /* @__PURE__ */ jsx("span", {
+		className: cn("inline-block " + collapsible),
+		children: item.label
+	})] });
+	const { leaving, changed, remove } = useLeavingItems(key, node, () => phaseRef.current);
+	const sizers = item.iconOnly || item.content !== void 0 ? [] : [.../* @__PURE__ */ new Set([item.label, ...item.reserve ?? []])];
+	return /* @__PURE__ */ jsx("span", {
+		className: "button-slot [--morph-clip:inset(-50%_calc(var(--spacing)*-3))]",
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ jsxs("span", {
+			ref: contentRef,
+			className: "inline-grid flex-none items-center justify-items-center",
+			children: [
+				sizers.map((text) => /* @__PURE__ */ jsxs("span", {
+					className: cn(PHASE + " pointer-events-none invisible"),
+					children: [item.icon ? /* @__PURE__ */ jsx("span", { className: "inline-block size-4 flex-none" }) : null, /* @__PURE__ */ jsx("span", {
+						className: cn("inline-block " + collapsible),
+						children: text
+					})]
+				}, text)),
+				leaving.map((entry) => /* @__PURE__ */ jsx(LeavingPhase, {
+					id: entry.id,
+					onDone: remove,
+					children: entry.value
+				}, entry.id)),
+				/* @__PURE__ */ jsx("span", {
+					ref: phaseRef,
+					className: cn(PHASE + (changed ? " motion-safe:animate-label-in motion-reduce:animate-fade-in" : "")),
+					children: node
+				}, key)
+			]
+		})
+	});
+}
+const inside = (node, x, y) => {
+	const rect = node.getBoundingClientRect();
+	return x >= rect.left && x < rect.right && y >= rect.top && y < rect.bottom;
+};
+/** Segments are found by their data-key, so the group needs no ref per segment. */
+const segmentsIn = (root) => Array.from(root?.querySelectorAll(":scope > [data-key]") ?? []);
+const segmentIn = (root, key) => key === null ? void 0 : segmentsIn(root).find((node) => node.dataset.key === key);
+/** The segment's box inside the group at sub-pixel precision, undoing any scale an ancestor applies. */
+function boxOf(group, node) {
+	const outer = group.getBoundingClientRect();
+	const inner = node.getBoundingClientRect();
+	const scale = group.offsetWidth && Math.abs(outer.width - group.offsetWidth) > 1 ? outer.width / group.offsetWidth : 1;
+	return [
+		(inner.left - outer.left) / scale - group.clientLeft + group.scrollLeft,
+		(inner.top - outer.top) / scale - group.clientTop + group.scrollTop,
+		inner.width / scale,
+		inner.height / scale
+	];
+}
+const inert = (node) => node.disabled || node.getAttribute("aria-disabled") === "true";
+const TRAVEL = "translate var(--duration-snappy) var(--ease-snappy), width var(--duration-snappy) var(--ease-snappy), height var(--duration-snappy) var(--ease-snappy), opacity var(--duration-quick) var(--ease-settle)";
+const FADE = "opacity var(--duration-quick) var(--ease-settle)";
+const FADE_INSTANT = "opacity var(--duration-instant) var(--ease-settle)";
+const focusRing = "data-[focus-visible]:outline-solid data-[focus-visible]:outline-(length:--focus-ring-width) data-[focus-visible]:outline-offset-(--focus-ring-offset) data-[focus-visible]:outline-(--color-ring) focus-visible:outline-solid focus-visible:outline-(length:--focus-ring-width) focus-visible:outline-offset-(--focus-ring-offset) focus-visible:outline-(--color-ring)";
+/**
+* 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"] }]} />
+*/
+function ButtonGroup({ items, menu, label, variant = "outline", size = "md", orientation = "horizontal", collapseLabels = true, isDisabled = false, className }) {
+	const root = useRef(null);
+	const highlight = useRef(null);
+	const vertical = orientation === "vertical";
+	const [hover, setHover] = useState(null);
+	const [pressed, setPressed] = useState(null);
+	const [focused, setFocused] = useState(null);
+	const [menuOpen, setMenuOpen] = useState(false);
+	const active = hover ?? pressed ?? (menuOpen ? MENU : null) ?? focused;
+	const keys = [...items.map((item) => item.id), ...menu ? [MENU] : []];
+	const activeIndex = active ? keys.indexOf(active) : -1;
+	const inertKey = String(isDisabled) + items.map((item) => item.isDisabled ? 1 : 0).join("");
+	const shown = useRef(null);
+	useIsomorphicLayoutEffect(() => {
+		const el = highlight.current;
+		const group = root.current;
+		if (!el || !group) return;
+		const reduced = prefersReducedMotion();
+		const node = segmentIn(group, active);
+		if (!node || inert(node) && active !== focused) {
+			if (shown.current) {
+				el.style.transition = reduced ? FADE_INSTANT : FADE;
+				el.style.opacity = "0";
+			}
+			shown.current = null;
+			return;
+		}
+		const [x, y, width, height] = boxOf(group, node);
+		const arriving = !shown.current || reduced;
+		el.style.transition = arriving ? reduced ? FADE_INSTANT : FADE : TRAVEL;
+		el.style.translate = x + "px " + y + "px";
+		el.style.width = width + "px";
+		el.style.height = height + "px";
+		el.style.opacity = "1";
+		shown.current = active;
+	}, [
+		active,
+		inertKey,
+		focused
+	]);
+	const keyList = keys.join("\0");
+	useEffect(() => {
+		const group = root.current;
+		const el = highlight.current;
+		if (!group || !el || typeof ResizeObserver === "undefined") return;
+		let frame = 0;
+		const observer = new ResizeObserver(() => {
+			cancelAnimationFrame(frame);
+			frame = requestAnimationFrame(() => {
+				const node = segmentIn(group, shown.current);
+				if (!node) return;
+				const [x, y, width, height] = boxOf(group, node);
+				el.style.transition = FADE;
+				el.style.translate = x + "px " + y + "px";
+				el.style.width = width + "px";
+				el.style.height = height + "px";
+			});
+		});
+		observer.observe(group);
+		segmentsIn(group).forEach((node) => observer.observe(node));
+		return () => {
+			cancelAnimationFrame(frame);
+			observer.disconnect();
+		};
+	}, [keyList]);
+	const [overflowing, setCompact] = useState(false);
+	const fullWidth = useRef(0);
+	const blockedAt = useRef(0);
+	const collapsible = collapseLabels && !vertical && items.some((item) => item.icon && !item.iconOnly && item.content === void 0);
+	const compact = collapsible && overflowing;
+	useEffect(() => {
+		const group = root.current;
+		const parent = group?.parentElement;
+		if (!group || !parent || !collapsible || typeof ResizeObserver === "undefined") return;
+		const check = () => {
+			const box = getComputedStyle(parent);
+			const available = parent.clientWidth - parseFloat(box.paddingLeft) - parseFloat(box.paddingRight);
+			if (group.dataset.compact === void 0) {
+				if (group.scrollWidth > group.clientWidth + 1) {
+					fullWidth.current = group.scrollWidth + 2;
+					blockedAt.current = available;
+					setCompact(true);
+				}
+			} else if (available > blockedAt.current && available >= fullWidth.current) setCompact(false);
+		};
+		let frame = 0;
+		const observer = new ResizeObserver(() => {
+			cancelAnimationFrame(frame);
+			frame = requestAnimationFrame(check);
+		});
+		observer.observe(group);
+		observer.observe(parent);
+		return () => {
+			cancelAnimationFrame(frame);
+			observer.disconnect();
+		};
+	}, [collapsible, keyList]);
+	useEffect(() => {
+		if (!pressed) return;
+		const release = () => setPressed(null);
+		window.addEventListener("pointerup", release);
+		window.addEventListener("pointercancel", release);
+		return () => {
+			window.removeEventListener("pointerup", release);
+			window.removeEventListener("pointercancel", release);
+		};
+	}, [pressed]);
+	const hit = (event) => {
+		for (const node of segmentsIn(root.current)) if (inside(node, event.clientX, event.clientY)) return inert(node) ? null : node.dataset.key ?? null;
+		return null;
+	};
+	const onPointerMove = (event) => {
+		if (event.pointerType !== "touch") setHover(hit(event));
+	};
+	const onPointerLeave = () => setHover(null);
+	const onPointerDown = (event) => {
+		if (event.button === 0) setPressed(hit(event));
+	};
+	const onFocus = (event) => {
+		const target = event.target;
+		const key = target.dataset.key;
+		if (key === void 0) return;
+		let visible = true;
+		try {
+			visible = target.matches(":focus-visible");
+		} catch {}
+		setFocused(visible ? key : null);
+	};
+	const onBlur = (event) => {
+		if (!root.current?.contains(event.relatedTarget)) setFocused(null);
+	};
+	const onKeyDown = (event) => {
+		if (event.defaultPrevented) return;
+		const list = segmentsIn(root.current).filter((node) => !node.disabled);
+		const index = list.findIndex((node) => node === document.activeElement);
+		if (index < 0) return;
+		const rtl = !vertical && getComputedStyle(root.current).direction === "rtl";
+		const forward = vertical ? "ArrowDown" : rtl ? "ArrowLeft" : "ArrowRight";
+		const backward = vertical ? "ArrowUp" : rtl ? "ArrowRight" : "ArrowLeft";
+		const last = list.length - 1;
+		const target = event.key === forward ? index === last ? 0 : index + 1 : event.key === backward ? index === 0 ? last : index - 1 : event.key === "Home" ? 0 : event.key === "End" ? last : -1;
+		if (target < 0) return;
+		event.preventDefault();
+		list[target].focus();
+	};
+	const [announcement, setAnnouncement] = useState("");
+	const labels = useRef(null);
+	const activated = useRef({
+		key: "",
+		at: 0
+	});
+	const labelList = items.map((item) => item.id + "\0" + item.label).join("
");
+	useEffect(() => {
+		const previous = labels.current;
+		labels.current = new Map(items.map((item) => [item.id, item.label]));
+		if (!previous) return;
+		const recent = performance.now() - activated.current.at < 1e3;
+		const changed = items.filter((item) => recent && item.id === activated.current.key && previous.has(item.id) && previous.get(item.id) !== item.label && item.content === void 0);
+		if (changed.length) setAnnouncement(changed.map((item) => item.label).join(", "));
+	}, [labelList]);
+	const select = (item) => {
+		activated.current = {
+			key: item.id,
+			at: performance.now()
+		};
+		item.onSelect?.();
+	};
+	const quiet = (index) => activeIndex >= 0 && (index === activeIndex || index === activeIndex + 1) ? "" : void 0;
+	const segments = items.map((item, index) => {
+		const off = item.isDisabled && !isDisabled;
+		const named = item.iconOnly || item.content !== void 0 || compact && !!item.icon;
+		const common = {
+			className: cn("button-group-segment " + focusRing),
+			"data-key": item.id,
+			"data-quiet": quiet(index),
+			"data-icon-only": item.iconOnly ? "" : void 0,
+			"data-collapsible": item.icon && !item.iconOnly && item.content === void 0 ? "" : void 0,
+			"aria-label": named ? item.label : void 0,
+			title: item.iconOnly || compact && item.icon ? item.label : void 0
+		};
+		const body = /* @__PURE__ */ jsx("span", {
+			className: "button-group-content",
+			children: /* @__PURE__ */ jsx(SegmentContent, { item })
+		});
+		const name = named ? null : /* @__PURE__ */ jsx("span", {
+			className: "sr-only",
+			children: item.label
+		});
+		if (item.href && !off && !isDisabled) return /* @__PURE__ */ jsxs("a", {
+			...common,
+			href: item.href,
+			onClick: () => select(item),
+			children: [body, name]
+		}, item.id);
+		return /* @__PURE__ */ jsxs("button", {
+			...common,
+			type: "button",
+			disabled: isDisabled,
+			"aria-disabled": off || void 0,
+			onClick: off ? void 0 : () => select(item),
+			children: [body, name]
+		}, item.id);
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		ref: root,
+		role: "group",
+		"aria-label": label,
+		"aria-disabled": isDisabled || void 0,
+		"data-orientation": orientation,
+		"data-variant": variant,
+		"data-size": size,
+		"data-compact": compact ? "" : void 0,
+		onPointerMove,
+		onPointerLeave,
+		onPointerDown,
+		onFocus,
+		onBlur,
+		onKeyDown,
+		className: cn("button-group group/bg", className),
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				ref: highlight,
+				"aria-hidden": "true",
+				"data-pressed": pressed && pressed === active ? "" : void 0,
+				className: "button-group-highlight"
+			}),
+			segments,
+			menu ? /* @__PURE__ */ jsxs(MenuTrigger, {
+				onOpenChange: setMenuOpen,
+				children: [/* @__PURE__ */ jsx(Button, {
+					"data-key": MENU,
+					"data-trigger": "",
+					"data-quiet": quiet(items.length),
+					"aria-label": menu.label,
+					isDisabled,
+					className: cn("button-group-segment group/trigger " + focusRing),
+					children: /* @__PURE__ */ jsx("span", {
+						className: "button-group-content",
+						children: /* @__PURE__ */ jsx("svg", {
+							viewBox: "0 0 24 24",
+							fill: "none",
+							stroke: "currentColor",
+							strokeWidth: 1.75,
+							strokeLinecap: "round",
+							strokeLinejoin: "round",
+							"aria-hidden": "true",
+							className: "size-4 motion-safe:transition-[rotate] motion-safe:duration-(--duration-gentle) motion-safe:ease-gentle group-aria-expanded/trigger:rotate-180",
+							children: /* @__PURE__ */ jsx("path", { d: "m6 9 6 6 6-6" })
+						})
+					})
+				}), /* @__PURE__ */ jsx(Menu$1, {
+					placement: vertical ? "bottom start" : "bottom end",
+					offset: 6,
+					shouldFocusWrap: true,
+					children: menu.items.map((action) => /* @__PURE__ */ jsxs(MenuItem$1, {
+						id: action.id,
+						textValue: action.label,
+						href: action.href,
+						isDisabled: action.isDisabled,
+						onAction: action.onSelect,
+						destructive: action.destructive,
+						children: [action.icon ? /* @__PURE__ */ jsx("span", {
+							"aria-hidden": "true",
+							className: action.destructive ? "inline-flex" : "inline-flex text-text-secondary",
+							children: action.icon
+						}) : null, action.label]
+					}, action.id))
+				})]
+			}) : null,
+			/* @__PURE__ */ jsx("span", {
+				className: "sr-only",
+				"aria-live": "polite",
+				children: announcement
+			})
+		]
+	});
+}
+//#endregion
+export { ButtonGroup };
+
+//# sourceMappingURL=button-group.js.map