@seekalfred/primitives 0.5.0 → 0.6.0

package/dist/dialog/dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"dialog.js","names":["Dialog","AriaModalOverlay","AriaModal","AriaDialog","AriaHeading","AriaText","AriaButton"],"sources":["../../src/dialog/dialog.tsx"],"sourcesContent":["\"use client\";\n\nimport { cva } from \"class-variance-authority\";\nimport type { ReactNode } from \"react\";\nimport {\n  Button as AriaButton,\n  Dialog as AriaDialog,\n  Heading as AriaHeading,\n  Modal as AriaModal,\n  ModalOverlay as AriaModalOverlay,\n  Text as AriaText,\n  type ModalOverlayProps as AriaModalOverlayProps,\n} from \"react-aria-components\";\n\nimport { cn } from \"../lib/cn.js\";\n\n/**\n * Dialog, ported from the legacy shadcn/Radix component onto React Aria's\n * Modal primitives.\n *\n * FOUR LEGACY PARTS COLLAPSE INTO TWO PROPS. The census (9 importing files,\n * but only **7** that render anything -- header.tsx and PollQuizCreator.tsx\n * import the parts and use none) reads: DialogContent 9, DialogTitle 8,\n * DialogHeader 7, DialogDescription 2. Those four always appear in the same\n * shape, so `title` and `description` are props of the dialog itself.\n *\n * That is not tidying. `title` is REQUIRED, which makes an unnamed dialog\n * impossible to write -- and the legacy shipped one: LiveQAOverlay.tsx\n * renders a DialogContent with no DialogTitle, so its `aria-labelledby`\n * points at an id that matches no element and the dialog is announced with\n * no name.\n *\n * It also fixes the dangling-description defect for free. Radix set\n * `aria-describedby` unconditionally from a `useId`, so seven of the nine\n * legacy dialogs referenced an id that did not exist. React Aria wires it\n * only when a description slot is actually rendered.\n *\n * `DialogPortal` and `DialogOverlay` are not ported: zero external call\n * sites, and React Aria's ModalOverlay does both jobs.\n *\n * NOT PORTED, and deliberately: the enter/exit animation. The legacy leans\n * on tailwindcss-animate's `animate-in` / `zoom-in-95` utilities, which this\n * repo does not ship, and the motion tokens are a separate task. React Aria\n * exposes `data-entering` / `data-exiting` for whoever adds them.\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.\n */\nexport const dialogOverlayVariants = cva([\n  // Centring by flex, not by `top-1/2 left-1/2 -translate-1/2`. The legacy's\n  // translate pair is a bracket value that check:hardcoding rejects, and\n  // flex centring needs no transform to undo.\n  \"fixed inset-0 z-50 flex items-center justify-center\",\n  // The inset that keeps a full-width panel off the viewport edge. The\n  // legacy did this with max-w-[calc(100%-2rem)] -- also a bracket value.\n  \"p-4\",\n  \"bg-scrim\",\n]);\n\nexport const dialogPanelVariants = cva([\n  // max-w-128 (32rem), NOT max-w-lg. `--container-lg` does not exist in this\n  // repo -- the container scale holds only page-shell widths (max 75rem,\n  // wide 90rem) -- so `max-w-lg` compiles to NOTHING and the panel spans the\n  // viewport. It emitted no rule at all, tsc and ESLint were both blind to\n  // it, and a screenshot is what caught it. 128 spacing units is 32rem,\n  // exactly the legacy sm:max-w-lg.\n  \"relative w-full max-w-128\",\n  \"rounded-xl border-(length:--border-width) border-border p-6\",\n  // bg-card, not bg-background: a dialog is a raised surface, and card is\n  // the role that already steps up the ink ramp on dark, where a shadow made\n  // of ink is invisible. Its contrast pairs are in the contract already.\n  \"bg-card text-card-foreground shadow-modal\",\n  \"flex flex-col gap-4\",\n  // The reset in @seekalfred/styles is OPT-IN, so a consumer may load none:\n  // content-box would add the 24px padding to max-w-lg, and an unstyled\n  // document renders text in a serif. The Accordion shipped its panel that\n  // way and the Alert overflowed by 46px.\n  \"box-border font-sans\",\n  // React Aria gives the dialog tabindex=-1 and focuses it when nothing\n  // inside is autofocused, so it can receive a visible focus ring it does\n  // not want.\n  \"outline-none\",\n  // A dialog taller than the viewport has to scroll, or its footer is\n  // unreachable. max-h is on the panel rather than the overlay so the\n  // padding above stays visible.\n  \"max-h-full overflow-y-auto\",\n]);\n\nexport const dialogTitleVariants = cva([\n  // leading-* AFTER text-*: tailwind-merge treats a later text-* as owning\n  // line-height and silently strips a leading-* that precedes it.\n  \"text-lg leading-(--leading-tight) font-semibold\",\n  // The user-agent <h2> ships a 1em block margin. The legacy was inside a\n  // Preflight'd app and never met it.\n  \"m-0\",\n]);\n\nexport const dialogDescriptionVariants = cva([\n  \"text-sm leading-(--leading-normal) text-muted-foreground\",\n  // Same: the user-agent <p> block margin.\n  \"m-0\",\n]);\n\nexport const dialogFooterVariants = cva([\n  // NOT flex-col-reverse. The legacy reversed the footer below `sm`, so a\n  // DOM order of Cancel-then-Confirm rendered Confirm-then-Cancel on a\n  // phone -- WCAG 1.3.2 Meaningful Sequence, and both alert-dialog call\n  // sites hit it. Wrapping keeps narrow viewports working without lying\n  // about the order.\n  \"flex flex-wrap items-center justify-end gap-2\",\n]);\n\nconst dialogCloseVariants = cva([\n  \"absolute end-4 top-4 inline-flex size-6 items-center justify-center\",\n  \"rounded-2xs box-border cursor-pointer\",\n  \"border-(length:--border-width) border-transparent bg-transparent\",\n  \"text-muted-foreground\",\n  \"motion-safe:transition-colors motion-safe:duration-(--duration-fast) motion-safe:ease-standard\",\n  // The legacy sat at opacity-70 until hover, dimming the only close\n  // affordance below its already-marginal contrast. A token that is legible\n  // at rest does the same job without that.\n  \"data-[hovered]:text-foreground\",\n  // outline-solid is load-bearing: outline-none sets --tw-outline-style:none,\n  // and the width utility resolves its style from that variable, so a focus\n  // rule can apply a width and a colour and paint nothing. Button shipped\n  // exactly that.\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  \"[&_svg]:pointer-events-none [&_svg]:size-4\",\n]);\n\n/**\n * A modal dialog.\n *\n * @example\n * <Dialog isOpen={open} onOpenChange={setOpen} title=\"Delete user\"\n *         description=\"This cannot be undone.\">\n *   <DialogFooter>\n *     <Button slot=\"close\" variant=\"ghost\">Cancel</Button>\n *     <Button variant=\"destructive\" onPress={remove}>Delete</Button>\n *   </DialogFooter>\n * </Dialog>\n */\nexport interface DialogProps\n  extends Omit<AriaModalOverlayProps, \"className\" | \"style\" | \"children\"> {\n  /**\n   * The dialog's heading, and its accessible name.\n   *\n   * **Required.** The legacy allowed a dialog with no title and one call\n   * site shipped that, producing an `aria-labelledby` pointing at nothing.\n   * Making it a required prop turns that into something you cannot express.\n   */\n  title: ReactNode;\n  /**\n   * Rendered ABOVE the heading, inside the panel.\n   *\n   * Exists for Sheet's back control. A panel that replaces its own contents\n   * rather than stacking a second modal needs a way back, and that control\n   * cannot live in `title`: React Aria wires aria-labelledby to the heading,\n   * so a button inside it becomes part of the dialog's accessible name --\n   * \"Back Campaign details\" instead of \"Campaign details\".\n   */\n  beforeTitle?: ReactNode;\n  /** Optional supporting text, wired to `aria-describedby` when present. */\n  description?: ReactNode;\n  /** The dialog body. */\n  children?: ReactNode;\n  /** Extra classes for the panel. Merged last, so they win conflicts. */\n  className?: string;\n  /**\n   * Extra classes for the scrim, merged last.\n   *\n   * A centred modal never needs this. A Sheet does: it has to replace the\n   * overlay's centring with an edge alignment, and it is the only way to\n   * do that without a second copy of the whole overlay.\n   */\n  overlayClassName?: string;\n  /**\n   * Whether to render the corner close button.\n   *\n   * `true` by default. An `alertdialog` sets it `false`: a confirmation must\n   * be answered, not dismissed silently.\n   */\n  closeButton?: boolean;\n  /**\n   * Accessible name for the close button.\n   *\n   * A prop because the legacy hard-coded the English string `Close` in an\n   * `sr-only` span with no way to override it, which makes the component\n   * unlocalisable.\n   *\n   * @default \"Close\"\n   */\n  closeLabel?: string;\n  /** `alertdialog` for a destructive confirmation. @default \"dialog\" */\n  role?: \"dialog\" | \"alertdialog\";\n  /**\n   * Whether clicking outside closes the dialog.\n   *\n   * `true`, which is NOT React Aria's default. React Aria ships\n   * `isDismissable = false` (useOverlay.mjs:26); Radix, which the legacy\n   * component wraps, closes on outside click unless told otherwise. Taking\n   * the headless default here would have silently changed the behaviour of\n   * all seven legacy call sites, and nothing in the suite would have\n   * noticed.\n   *\n   * An `alertdialog` should set this `false`: a confirmation must be\n   * answered, not clicked away.\n   *\n   * @default true\n   */\n  isDismissable?: boolean;\n}\n\nexport function Dialog({\n  title,\n  beforeTitle,\n  description,\n  children,\n  className,\n  closeButton = true,\n  closeLabel = \"Close\",\n  role = \"dialog\",\n  isDismissable = true,\n  overlayClassName,\n  ...props\n}: DialogProps) {\n  return (\n    // ModalOverlay explicitly, not a bare <Modal>. A bare Modal still renders\n    // an overlay div, but className lands on the INNER element -- so the\n    // scrim would be unstyleable and would paint nothing at all.\n    <AriaModalOverlay\n      {...props}\n      isDismissable={isDismissable}\n      data-slot=\"dialog-overlay\"\n      className={cn(dialogOverlayVariants(), overlayClassName)}\n    >\n      <AriaModal className=\"contents\">\n        <AriaDialog\n          role={role}\n          data-slot=\"dialog\"\n          className={cn(dialogPanelVariants(), className)}\n        >\n          {/*\n            Above the heading, not inside it. Sheet's back control lives here:\n            folding it into `title` would put a button inside the <h2> React\n            Aria wires aria-labelledby to, so the dialog's accessible name\n            would become \"Back Campaign details\".\n          */}\n          {beforeTitle}\n          {/*\n            slot=\"title\" is what React Aria wires aria-labelledby to. A plain\n            <h2> here would render identically and leave the dialog unnamed.\n          */}\n          <AriaHeading slot=\"title\" data-slot=\"dialog-title\" className={dialogTitleVariants()}>\n            {title}\n          </AriaHeading>\n          {description == null ? null : (\n            <AriaText\n              slot=\"description\"\n              data-slot=\"dialog-description\"\n              className={dialogDescriptionVariants()}\n            >\n              {description}\n            </AriaText>\n          )}\n          {children}\n          {closeButton ? (\n            // slot=\"close\" is React Aria's own dismiss wiring; an onPress\n            // that called onOpenChange by hand would not work inside an\n            // uncontrolled DialogTrigger.\n            <AriaButton slot=\"close\" aria-label={closeLabel} className={dialogCloseVariants()}>\n              <svg\n                aria-hidden=\"true\"\n                viewBox=\"0 0 16 16\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                strokeWidth=\"1.75\"\n                strokeLinecap=\"round\"\n              >\n                <path d=\"m4 4 8 8M12 4l-8 8\" />\n              </svg>\n            </AriaButton>\n          ) : null}\n        </AriaDialog>\n      </AriaModal>\n    </AriaModalOverlay>\n  );\n}\n\n/**\n * Actions at the foot of a dialog.\n *\n * @example\n * <DialogFooter>\n *   <Button slot=\"close\" variant=\"ghost\">Cancel</Button>\n *   <Button variant=\"destructive\" onPress={remove}>Delete</Button>\n * </DialogFooter>\n */\nexport interface DialogFooterProps {\n  children?: ReactNode;\n  className?: string;\n}\n\nexport function DialogFooter({ children, className }: DialogFooterProps) {\n  return (\n    <div data-slot=\"dialog-footer\" className={cn(dialogFooterVariants(), className)}>\n      {children}\n    </div>\n  );\n}\n\n/**\n * Pairs a trigger with a dialog and owns the open state.\n *\n * Re-exported from React Aria unchanged. Only 3 of the 9 legacy call sites\n * use a trigger at all -- the rest drive `isOpen` themselves -- so wrapping\n * it would add a layer with nothing to do.\n */\nexport { DialogTrigger } from \"react-aria-components\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiDA,MAAa,wBAAwB,IAAI;CAIvC;CAGA;CACA;AACF,CAAC;AAED,MAAa,sBAAsB,IAAI;CAOrC;CACA;CAIA;CACA;CAKA;CAIA;CAIA;AACF,CAAC;AAED,MAAa,sBAAsB,IAAI,CAGrC,mDAGA,KACF,CAAC;AAED,MAAa,4BAA4B,IAAI,CAC3C,4DAEA,KACF,CAAC;AAED,MAAa,uBAAuB,IAAI,CAMtC,+CACF,CAAC;AAED,MAAM,sBAAsB,IAAI;CAC9B;CACA;CACA;CACA;CACA;CAIA;CAKA;CACA;CACA;CACA;CACA;CACA;AACF,CAAC;AAqFD,SAAgBA,SAAO,EACrB,OACA,aACA,aACA,UACA,WACA,cAAc,MACd,aAAa,SACb,OAAO,UACP,gBAAgB,MAChB,kBACA,GAAG,SACW;CACd,OAIE,oBAACC,cAAD;EACE,GAAI;EACW;EACf,aAAU;EACV,WAAW,GAAG,sBAAsB,GAAG,gBAAgB;EAEvD,UAAA,oBAACC,OAAD;GAAW,WAAU;GACnB,UAAA,qBAACC,QAAD;IACQ;IACN,aAAU;IACV,WAAW,GAAG,oBAAoB,GAAG,SAAS;IAHhD,UAAA;KAWG;KAKD,oBAACC,SAAD;MAAa,MAAK;MAAQ,aAAU;MAAe,WAAW,oBAAoB;MAC/E,UAAA;KACU,CAAA;KACZ,eAAe,OAAO,OACrB,oBAACC,MAAD;MACE,MAAK;MACL,aAAU;MACV,WAAW,0BAA0B;MAEpC,UAAA;KACO,CAAA;KAEX;KACA,cAIC,oBAACC,QAAD;MAAY,MAAK;MAAQ,cAAY;MAAY,WAAW,oBAAoB;MAC9E,UAAA,oBAAC,OAAD;OACE,eAAY;OACZ,SAAQ;OACR,MAAK;OACL,QAAO;OACP,aAAY;OACZ,eAAc;OAEd,UAAA,oBAAC,QAAD,EAAM,GAAE,qBAAsB,CAAA;MAC3B,CAAA;KACK,CAAA,IACV;IACM;;EACH,CAAA;CACK,CAAA;AAEtB;AAgBA,SAAgB,aAAa,EAAE,UAAU,aAAgC;CACvE,OACE,oBAAC,OAAD;EAAK,aAAU;EAAgB,WAAW,GAAG,qBAAqB,GAAG,SAAS;EAC3E;CACE,CAAA;AAET"}
+{"version":3,"file":"dialog.js","names":["Dialog","AriaModalOverlay","AriaModal","AriaDialog","AriaHeading","AriaText","AriaButton"],"sources":["../../src/dialog/dialog.tsx"],"sourcesContent":["\"use client\";\n\nimport { cva } from \"class-variance-authority\";\nimport { forwardRef, type ReactNode } from \"react\";\nimport {\n  Button as AriaButton,\n  Dialog as AriaDialog,\n  Heading as AriaHeading,\n  Modal as AriaModal,\n  ModalOverlay as AriaModalOverlay,\n  Text as AriaText,\n  type ModalOverlayProps as AriaModalOverlayProps,\n} from \"react-aria-components\";\n\nimport { cn, cnAll } from \"../lib/cn.js\";\nimport { SwapText } from \"../lib/swap-text.js\";\n\n/**\n * Dialog, ported from the legacy shadcn/Radix component onto React Aria's\n * Modal primitives.\n *\n * FOUR LEGACY PARTS COLLAPSE INTO TWO PROPS. The census (9 importing files,\n * but only **7** that render anything -- header.tsx and PollQuizCreator.tsx\n * import the parts and use none) reads: DialogContent 9, DialogTitle 8,\n * DialogHeader 7, DialogDescription 2. Those four always appear in the same\n * shape, so `title` and `description` are props of the dialog itself.\n *\n * That is not tidying. `title` is REQUIRED, which makes an unnamed dialog\n * impossible to write -- and the legacy shipped one: LiveQAOverlay.tsx\n * renders a DialogContent with no DialogTitle, so its `aria-labelledby`\n * points at an id that matches no element and the dialog is announced with\n * no name.\n *\n * It also fixes the dangling-description defect for free. Radix set\n * `aria-describedby` unconditionally from a `useId`, so seven of the nine\n * legacy dialogs referenced an id that did not exist. React Aria wires it\n * only when a description slot is actually rendered.\n *\n * `DialogPortal` and `DialogOverlay` are not ported: zero external call\n * sites, and React Aria's ModalOverlay does both jobs.\n *\n * NOT PORTED, and deliberately: the enter/exit animation. The legacy leans\n * on tailwindcss-animate's `animate-in` / `zoom-in-95` utilities, which this\n * repo does not ship, and the motion tokens are a separate task. React Aria\n * exposes `data-entering` / `data-exiting` for whoever adds them.\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.\n */\nexport const dialogOverlayVariants = cva([\n  // Centring by flex, not by `top-1/2 left-1/2 -translate-1/2`. The legacy's\n  // translate pair is a bracket value that check:hardcoding rejects, and\n  // flex centring needs no transform to undo.\n  \"fixed inset-0 z-50 flex items-center justify-center\",\n  // The inset that keeps a full-width panel off the viewport edge. The\n  // legacy did this with max-w-[calc(100%-2rem)] -- also a bracket value.\n  \"p-4\",\n  \"bg-scrim\",\n]);\n\nexport const dialogPanelVariants = cva([\n  // max-w-128 (32rem), NOT max-w-lg. `--container-lg` does not exist in this\n  // repo -- the container scale holds only page-shell widths (max 75rem,\n  // wide 90rem) -- so `max-w-lg` compiles to NOTHING and the panel spans the\n  // viewport. It emitted no rule at all, tsc and ESLint were both blind to\n  // it, and a screenshot is what caught it. 128 spacing units is 32rem,\n  // exactly the legacy sm:max-w-lg.\n  \"relative w-full max-w-128\",\n  \"rounded-xl border-(length:--border-width) border-border p-6\",\n  // bg-card, not bg-background: a dialog is a raised surface, and card is\n  // the role that already steps up the ink ramp on dark, where a shadow made\n  // of ink is invisible. Its contrast pairs are in the contract already.\n  \"bg-card text-card-foreground shadow-modal\",\n  \"flex flex-col gap-4\",\n  // The reset in @seekalfred/styles is OPT-IN, so a consumer may load none:\n  // content-box would add the 24px padding to max-w-lg, and an unstyled\n  // document renders text in a serif. The Accordion shipped its panel that\n  // way and the Alert overflowed by 46px.\n  \"box-border font-sans\",\n  // React Aria gives the dialog tabindex=-1 and focuses it when nothing\n  // inside is autofocused, so it can receive a visible focus ring it does\n  // not want.\n  \"outline-none\",\n  // A dialog taller than the viewport has to scroll, or its footer is\n  // unreachable. max-h is on the panel rather than the overlay so the\n  // padding above stays visible.\n  \"max-h-full overflow-y-auto\",\n]);\n\nexport const dialogTitleVariants = cva([\n  // leading-* AFTER text-*: tailwind-merge treats a later text-* as owning\n  // line-height and silently strips a leading-* that precedes it.\n  \"text-lg leading-(--leading-tight) font-semibold\",\n  // The user-agent <h2> ships a 1em block margin. The legacy was inside a\n  // Preflight'd app and never met it.\n  \"m-0\",\n]);\n\nexport const dialogDescriptionVariants = cva([\n  \"text-sm leading-(--leading-normal) text-muted-foreground\",\n  // Same: the user-agent <p> block margin.\n  \"m-0\",\n]);\n\nexport const dialogFooterVariants = cva([\n  // NOT flex-col-reverse. The legacy reversed the footer below `sm`, so a\n  // DOM order of Cancel-then-Confirm rendered Confirm-then-Cancel on a\n  // phone -- WCAG 1.3.2 Meaningful Sequence, and both alert-dialog call\n  // sites hit it. Wrapping keeps narrow viewports working without lying\n  // about the order.\n  \"flex flex-wrap items-center justify-end gap-2\",\n]);\n\nconst dialogCloseVariants = cva([\n  \"absolute end-4 top-4 inline-flex size-6 items-center justify-center\",\n  \"rounded-2xs box-border cursor-pointer\",\n  \"border-(length:--border-width) border-transparent bg-transparent\",\n  \"text-muted-foreground\",\n  // Fill on hover, a quick press to .96 and a spring release (see calendar-nav-motion).\n  \"calendar-nav-motion\",\n  // The legacy sat at opacity-70 until hover, dimming the only close\n  // affordance below its already-marginal contrast. A token that is legible\n  // at rest does the same job without that.\n  \"data-[hovered]:bg-muted data-[hovered]:text-foreground\",\n  // outline-solid is load-bearing: outline-none sets --tw-outline-style:none,\n  // and the width utility resolves its style from that variable, so a focus\n  // rule can apply a width and a colour and paint nothing. Button shipped\n  // exactly that.\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  \"[&_svg]:pointer-events-none [&_svg]:size-4\",\n]);\n\n/**\n * A modal dialog.\n *\n * @example\n * <Dialog isOpen={open} onOpenChange={setOpen} title=\"Delete user\"\n *         description=\"This cannot be undone.\">\n *   <DialogFooter>\n *     <Button slot=\"close\" variant=\"ghost\">Cancel</Button>\n *     <Button variant=\"destructive\" onPress={remove}>Delete</Button>\n *   </DialogFooter>\n * </Dialog>\n */\n/** A string title or description swaps as a whole when its text changes while the dialog is open. */\nfunction Swappable({ value, children }: { value: ReactNode; children: ReactNode }) {\n  if (typeof value !== \"string\") return <>{children}</>;\n  return (\n    <SwapText swapKey={value} className=\"block\">\n      {children}\n    </SwapText>\n  );\n}\n\nexport interface DialogProps\n  extends Omit<AriaModalOverlayProps, \"className\" | \"style\" | \"children\"> {\n  /**\n   * The dialog's heading, and its accessible name.\n   *\n   * **Required.** The legacy allowed a dialog with no title and one call\n   * site shipped that, producing an `aria-labelledby` pointing at nothing.\n   * Making it a required prop turns that into something you cannot express.\n   */\n  title: ReactNode;\n  /**\n   * Rendered ABOVE the heading, inside the panel.\n   *\n   * Exists for Sheet's back control. A panel that replaces its own contents\n   * rather than stacking a second modal needs a way back, and that control\n   * cannot live in `title`: React Aria wires aria-labelledby to the heading,\n   * so a button inside it becomes part of the dialog's accessible name --\n   * \"Back Campaign details\" instead of \"Campaign details\".\n   */\n  beforeTitle?: ReactNode;\n  /** Optional supporting text, wired to `aria-describedby` when present. */\n  description?: ReactNode;\n  /** The dialog body. */\n  children?: ReactNode;\n  /** Extra classes for the panel. Merged last, so they win conflicts. */\n  className?: string;\n  /**\n   * Extra classes for the scrim, merged last.\n   *\n   * A centred modal never needs this. A Sheet does: it has to replace the\n   * overlay's centring with an edge alignment, and it is the only way to\n   * do that without a second copy of the whole overlay.\n   */\n  overlayClassName?: string;\n  /**\n   * Whether to render the corner close button.\n   *\n   * `true` by default. An `alertdialog` sets it `false`: a confirmation must\n   * be answered, not dismissed silently.\n   */\n  closeButton?: boolean;\n  /**\n   * Accessible name for the close button.\n   *\n   * A prop because the legacy hard-coded the English string `Close` in an\n   * `sr-only` span with no way to override it, which makes the component\n   * unlocalisable.\n   *\n   * @default \"Close\"\n   */\n  closeLabel?: string;\n  /** `alertdialog` for a destructive confirmation. @default \"dialog\" */\n  role?: \"dialog\" | \"alertdialog\";\n  /**\n   * Whether clicking outside closes the dialog.\n   *\n   * `true`, which is NOT React Aria's default. React Aria ships\n   * `isDismissable = false` (useOverlay.mjs:26); Radix, which the legacy\n   * component wraps, closes on outside click unless told otherwise. Taking\n   * the headless default here would have silently changed the behaviour of\n   * all seven legacy call sites, and nothing in the suite would have\n   * noticed.\n   *\n   * An `alertdialog` should set this `false`: a confirmation must be\n   * answered, not clicked away.\n   *\n   * @default true\n   */\n  isDismissable?: boolean;\n  /**\n   * How the dialog comes in: `rise` fades the overlay (blurring the page) and lifts\n   * the panel in on a spring; `none` leaves the entrance to the caller, as an\n   * edge-anchored preset (Sheet) does.\n   *\n   * @default \"rise\"\n   */\n  entrance?: \"rise\" | \"none\";\n}\n\nexport const Dialog = forwardRef<HTMLElement, DialogProps>(function Dialog(\n  {\n    title,\n    beforeTitle,\n    description,\n    children,\n    className,\n    closeButton = true,\n    closeLabel = \"Close\",\n    role = \"dialog\",\n    isDismissable = true,\n    overlayClassName,\n    entrance = \"rise\",\n    ...props\n  },\n  ref,\n) {\n  return (\n    // ModalOverlay explicitly, not a bare <Modal>. A bare Modal still renders\n    // an overlay div, but className lands on the INNER element -- so the\n    // scrim would be unstyleable and would paint nothing at all.\n    <AriaModalOverlay\n      {...props}\n      isDismissable={isDismissable}\n      data-slot=\"dialog-overlay\"\n      className={cnAll(\n        dialogOverlayVariants(),\n        entrance === \"rise\" && \"dialog-overlay-motion\",\n        overlayClassName,\n      )}\n    >\n      <AriaModal className=\"contents\">\n        <AriaDialog\n          // Modal is a transparent pass-through (className=\"contents\", no\n          // box of its own) and ModalOverlay is the scrim -- AriaDialog is\n          // the only one of the three that is the visible panel, so the ref\n          // goes here and not on either ancestor.\n          ref={ref}\n          role={role}\n          data-slot=\"dialog\"\n          className={cnAll(dialogPanelVariants(), entrance === \"rise\" && \"dialog-panel-motion\", className)}\n        >\n          {/*\n            Above the heading, not inside it. Sheet's back control lives here:\n            folding it into `title` would put a button inside the <h2> React\n            Aria wires aria-labelledby to, so the dialog's accessible name\n            would become \"Back Campaign details\".\n          */}\n          {beforeTitle}\n          {/*\n            slot=\"title\" is what React Aria wires aria-labelledby to. A plain\n            <h2> here would render identically and leave the dialog unnamed.\n          */}\n          <AriaHeading slot=\"title\" data-slot=\"dialog-title\" className={dialogTitleVariants()}>\n            <Swappable value={title}>{title}</Swappable>\n          </AriaHeading>\n          {description == null ? null : (\n            <AriaText\n              slot=\"description\"\n              data-slot=\"dialog-description\"\n              className={dialogDescriptionVariants()}\n            >\n              <Swappable value={description}>{description}</Swappable>\n            </AriaText>\n          )}\n          {children}\n          {closeButton ? (\n            // slot=\"close\" is React Aria's own dismiss wiring; an onPress\n            // that called onOpenChange by hand would not work inside an\n            // uncontrolled DialogTrigger.\n            <AriaButton slot=\"close\" aria-label={closeLabel} className={dialogCloseVariants()}>\n              <svg\n                aria-hidden=\"true\"\n                viewBox=\"0 0 16 16\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                strokeWidth=\"1.75\"\n                strokeLinecap=\"round\"\n              >\n                <path d=\"m4 4 8 8M12 4l-8 8\" />\n              </svg>\n            </AriaButton>\n          ) : null}\n        </AriaDialog>\n      </AriaModal>\n    </AriaModalOverlay>\n  );\n});\n\n/**\n * Actions at the foot of a dialog.\n *\n * @example\n * <DialogFooter>\n *   <Button slot=\"close\" variant=\"ghost\">Cancel</Button>\n *   <Button variant=\"destructive\" onPress={remove}>Delete</Button>\n * </DialogFooter>\n */\nexport interface DialogFooterProps {\n  children?: ReactNode;\n  className?: string;\n}\n\nexport const DialogFooter = forwardRef<HTMLDivElement, DialogFooterProps>(function DialogFooter(\n  { children, className },\n  ref,\n) {\n  return (\n    <div ref={ref} data-slot=\"dialog-footer\" className={cn(dialogFooterVariants(), className)}>\n      {children}\n    </div>\n  );\n});\n\n/**\n * Pairs a trigger with a dialog and owns the open state.\n *\n * Re-exported from React Aria unchanged. Only 3 of the 9 legacy call sites\n * use a trigger at all -- the rest drive `isOpen` themselves -- so wrapping\n * it would add a layer with nothing to do.\n */\nexport { DialogTrigger } from \"react-aria-components\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkDA,MAAa,wBAAwB,IAAI;CAIvC;CAGA;CACA;AACF,CAAC;AAED,MAAa,sBAAsB,IAAI;CAOrC;CACA;CAIA;CACA;CAKA;CAIA;CAIA;AACF,CAAC;AAED,MAAa,sBAAsB,IAAI,CAGrC,mDAGA,KACF,CAAC;AAED,MAAa,4BAA4B,IAAI,CAC3C,4DAEA,KACF,CAAC;AAED,MAAa,uBAAuB,IAAI,CAMtC,+CACF,CAAC;AAED,MAAM,sBAAsB,IAAI;CAC9B;CACA;CACA;CACA;CAEA;CAIA;CAKA;CACA;CACA;CACA;CACA;CACA;AACF,CAAC;;;;;;;;;;;;;;AAeD,SAAS,UAAU,EAAE,OAAO,YAAuD;CACjF,IAAI,OAAO,UAAU,UAAU,OAAO,oBAAA,YAAA,EAAG,SAAW,CAAA;CACpD,OACE,oBAAC,UAAD;EAAU,SAAS;EAAO,WAAU;EACjC;CACO,CAAA;AAEd;AAiFA,MAAaA,WAAS,WAAqC,SAASA,SAClE,EACE,OACA,aACA,aACA,UACA,WACA,cAAc,MACd,aAAa,SACb,OAAO,UACP,gBAAgB,MAChB,kBACA,WAAW,QACX,GAAG,SAEL,KACA;CACA,OAIE,oBAACC,cAAD;EACE,GAAI;EACW;EACf,aAAU;EACV,WAAW,MACT,sBAAsB,GACtB,aAAa,UAAU,yBACvB,gBACF;EAEA,UAAA,oBAACC,OAAD;GAAW,WAAU;GACnB,UAAA,qBAACC,QAAD;IAKO;IACC;IACN,aAAU;IACV,WAAW,MAAM,oBAAoB,GAAG,aAAa,UAAU,uBAAuB,SAAS;IARjG,UAAA;KAgBG;KAKD,oBAACC,SAAD;MAAa,MAAK;MAAQ,aAAU;MAAe,WAAW,oBAAoB;MAChF,UAAA,oBAAC,WAAD;OAAW,OAAO;OAAQ,UAAA;MAAiB,CAAA;KAChC,CAAA;KACZ,eAAe,OAAO,OACrB,oBAACC,MAAD;MACE,MAAK;MACL,aAAU;MACV,WAAW,0BAA0B;MAErC,UAAA,oBAAC,WAAD;OAAW,OAAO;OAAc,UAAA;MAAuB,CAAA;KAC/C,CAAA;KAEX;KACA,cAIC,oBAACC,QAAD;MAAY,MAAK;MAAQ,cAAY;MAAY,WAAW,oBAAoB;MAC9E,UAAA,oBAAC,OAAD;OACE,eAAY;OACZ,SAAQ;OACR,MAAK;OACL,QAAO;OACP,aAAY;OACZ,eAAc;OAEd,UAAA,oBAAC,QAAD,EAAM,GAAE,qBAAsB,CAAA;MAC3B,CAAA;KACK,CAAA,IACV;IACM;;EACH,CAAA;CACK,CAAA;AAEtB,CAAC;AAgBD,MAAa,eAAe,WAA8C,SAAS,aACjF,EAAE,UAAU,aACZ,KACA;CACA,OACE,oBAAC,OAAD;EAAU;EAAK,aAAU;EAAgB,WAAW,GAAG,qBAAqB,GAAG,SAAS;EACrF;CACE,CAAA;AAET,CAAC"}

package/dist/empty-state/empty-state.d.ts

@@ -0,0 +1,44 @@
+import { ComponentPropsWithoutRef, ReactNode } from "react";
+//#region src/empty-state/empty-state.d.ts
+/**
+ * EmptyState: what a list shows when it has nothing to show. One line of
+ * muted text, centred in a bordered box the width of the list, with an
+ * optional next step under it.
+ *
+ * Presentational, so there is no React Aria base. It exists because every
+ * list has an empty case, and without a shared component each screen picks its
+ * own padding, border and alignment, so "nothing here" looks different on
+ * every page.
+ *
+ * Every string in the cva blocks below is a STATIC literal. Tailwind scans
+ * source text, so a class assembled at runtime is invisible to it and would
+ * simply never be emitted.
+ */
+export declare const emptyStateVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const emptyStateTextVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const emptyStateActionVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+/**
+ * An empty list's message.
+ *
+ * @example
+ * <EmptyState action={<Button size="sm">Clear filters</Button>}>
+ *   Nothing matches these filters.
+ * </EmptyState>
+ */
+export interface EmptyStateProps extends ComponentPropsWithoutRef<"div"> {
+  /** Why the list is empty, in one short statement. */
+  children: ReactNode;
+  /**
+   * A glyph above the message. It settles in once when the state first appears
+   * (small and transparent to rest over 480ms); a different icon component later
+   * swaps in place, and the same one re-rendering stays still. Mark it `aria-hidden`.
+   */
+  icon?: ReactNode;
+  /** A next step under the text: a button or a link. Omitted from the DOM when absent. */
+  action?: ReactNode;
+  /** Extra classes for the box. Merged last, so they win conflicts with ours. */
+  className?: string;
+}
+export declare const EmptyState: import("react").ForwardRefExoticComponent<EmptyStateProps & import("react").RefAttributes<HTMLDivElement>>;
+//#endregion
+//# sourceMappingURL=empty-state.d.ts.map

package/dist/empty-state/empty-state.js

@@ -0,0 +1,83 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { SwapText } from "../lib/swap-text.js";
+import { useHeightFollow } from "../lib/height-follow.js";
+import { cva } from "class-variance-authority";
+import { forwardRef, isValidElement, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/empty-state/empty-state.tsx
+/**
+* EmptyState: what a list shows when it has nothing to show. One line of
+* muted text, centred in a bordered box the width of the list, with an
+* optional next step under it.
+*
+* Presentational, so there is no React Aria base. It exists because every
+* list has an empty case, and without a shared component each screen picks its
+* own padding, border and alignment, so "nothing here" looks different on
+* every page.
+*
+* Every string in the cva blocks below is a STATIC literal. Tailwind scans
+* source text, so a class assembled at runtime is invisible to it and would
+* simply never be emitted.
+*/
+const emptyStateVariants = cva([
+	"block px-4 py-8 text-center",
+	"rounded-md border-(length:--border-width) border-solid border-border",
+	"box-border font-sans"
+]);
+const emptyStateTextVariants = cva("m-0 text-sm leading-(--leading-normal) text-muted-foreground");
+const emptyStateActionVariants = cva("mt-3 flex justify-center gap-2");
+/** The name an icon swaps under: a different component swaps; the same one re-rendering does not. */
+function iconKey(icon) {
+	if (!isValidElement(icon)) return "icon";
+	const type = icon.type;
+	return typeof type === "string" ? type : type.displayName ?? type.name ?? "icon";
+}
+const EmptyState = forwardRef(function EmptyState({ children, icon, action, className, ...props }, ref) {
+	const frame = useRef(null);
+	const text = useRef(null);
+	useHeightFollow(frame, text, typeof children === "string" ? children : "");
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		...props,
+		"data-slot": "empty-state",
+		className: cn(emptyStateVariants(), className),
+		children: [
+			icon === void 0 || icon === null ? null : /* @__PURE__ */ jsx("div", {
+				"data-slot": "empty-state-icon",
+				"aria-hidden": "true",
+				className: "mx-auto mb-3 grid size-10 place-items-center rounded-md border-(length:--border-width) border-border bg-muted text-muted-foreground motion-safe:animate-empty-state-icon [&_svg]:size-5",
+				children: /* @__PURE__ */ jsx(SwapText, {
+					swapKey: iconKey(icon),
+					motion: "glyph",
+					className: "grid place-items-center",
+					children: icon
+				})
+			}),
+			/* @__PURE__ */ jsx("div", {
+				ref: frame,
+				"data-slot": "empty-state-copy",
+				className: "height-follow",
+				children: /* @__PURE__ */ jsx("p", {
+					ref: text,
+					"data-slot": "empty-state-text",
+					className: emptyStateTextVariants(),
+					children: typeof children === "string" ? /* @__PURE__ */ jsx(SwapText, {
+						swapKey: children,
+						className: "block",
+						children
+					}) : children
+				})
+			}),
+			action == null ? null : /* @__PURE__ */ jsx("div", {
+				"data-slot": "empty-state-action",
+				className: emptyStateActionVariants(),
+				children: action
+			})
+		]
+	});
+});
+//#endregion
+export { EmptyState, emptyStateActionVariants, emptyStateTextVariants, emptyStateVariants };
+
+//# sourceMappingURL=empty-state.js.map

package/dist/empty-state/empty-state.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"empty-state.js","names":[],"sources":["../../src/empty-state/empty-state.tsx"],"sourcesContent":["\"use client\";\n\nimport { cva } from \"class-variance-authority\";\nimport {\n  forwardRef,\n  isValidElement,\n  useRef,\n  type ComponentPropsWithoutRef,\n  type ReactNode,\n} from \"react\";\n\nimport { cn } from \"../lib/cn.js\";\nimport { useHeightFollow } from \"../lib/height-follow.js\";\nimport { SwapText } from \"../lib/swap-text.js\";\n\n/**\n * EmptyState: what a list shows when it has nothing to show. One line of\n * muted text, centred in a bordered box the width of the list, with an\n * optional next step under it.\n *\n * Presentational, so there is no React Aria base. It exists because every\n * list has an empty case, and without a shared component each screen picks its\n * own padding, border and alignment, so \"nothing here\" looks different on\n * every page.\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.\n */\nexport const emptyStateVariants = cva([\n  \"block px-4 py-8 text-center\",\n  \"rounded-md border-(length:--border-width) border-solid border-border\",\n  // The reset in @seekalfred/styles is opt-in, so a consumer may load none.\n  \"box-border font-sans\",\n]);\n\nexport const emptyStateTextVariants = cva(\n  \"m-0 text-sm leading-(--leading-normal) text-muted-foreground\",\n);\n\nexport const emptyStateActionVariants = cva(\"mt-3 flex justify-center gap-2\");\n\n/**\n * An empty list's message.\n *\n * @example\n * <EmptyState action={<Button size=\"sm\">Clear filters</Button>}>\n *   Nothing matches these filters.\n * </EmptyState>\n */\nexport interface EmptyStateProps extends ComponentPropsWithoutRef<\"div\"> {\n  /** Why the list is empty, in one short statement. */\n  children: ReactNode;\n  /**\n   * A glyph above the message. It settles in once when the state first appears\n   * (small and transparent to rest over 480ms); a different icon component later\n   * swaps in place, and the same one re-rendering stays still. Mark it `aria-hidden`.\n   */\n  icon?: ReactNode;\n  /** A next step under the text: a button or a link. Omitted from the DOM when absent. */\n  action?: ReactNode;\n  /** Extra classes for the box. Merged last, so they win conflicts with ours. */\n  className?: string;\n}\n\n/** The name an icon swaps under: a different component swaps; the same one re-rendering does not. */\nfunction iconKey(icon: ReactNode) {\n  if (!isValidElement(icon)) return \"icon\";\n  const type = icon.type as string | { displayName?: string; name?: string };\n  return typeof type === \"string\" ? type : (type.displayName ?? type.name ?? \"icon\");\n}\n\nexport const EmptyState = forwardRef<HTMLDivElement, EmptyStateProps>(function EmptyState(\n  { children, icon, action, className, ...props },\n  ref,\n) {\n  const frame = useRef<HTMLDivElement>(null);\n  const text = useRef<HTMLParagraphElement>(null);\n  // The message column follows its height when the message changes.\n  useHeightFollow(frame, text, typeof children === \"string\" ? children : \"\");\n  return (\n    <div\n      ref={ref}\n      {...props}\n      data-slot=\"empty-state\"\n      className={cn(emptyStateVariants(), className)}\n    >\n      {icon === undefined || icon === null ? null : (\n        <div\n          data-slot=\"empty-state-icon\"\n          aria-hidden=\"true\"\n          className=\"mx-auto mb-3 grid size-10 place-items-center rounded-md border-(length:--border-width) border-border bg-muted text-muted-foreground motion-safe:animate-empty-state-icon [&_svg]:size-5\"\n        >\n          <SwapText swapKey={iconKey(icon)} motion=\"glyph\" className=\"grid place-items-center\">\n            {icon}\n          </SwapText>\n        </div>\n      )}\n      <div ref={frame} data-slot=\"empty-state-copy\" className=\"height-follow\">\n        <p ref={text} data-slot=\"empty-state-text\" className={emptyStateTextVariants()}>\n          {typeof children === \"string\" ? (\n            <SwapText swapKey={children} className=\"block\">\n              {children}\n            </SwapText>\n          ) : (\n            children\n          )}\n        </p>\n      </div>\n      {action == null ? null : (\n        <div data-slot=\"empty-state-action\" className={emptyStateActionVariants()}>\n          {action}\n        </div>\n      )}\n    </div>\n  );\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AA6BA,MAAa,qBAAqB,IAAI;CACpC;CACA;CAEA;AACF,CAAC;AAED,MAAa,yBAAyB,IACpC,8DACF;AAEA,MAAa,2BAA2B,IAAI,gCAAgC;;AA0B5E,SAAS,QAAQ,MAAiB;CAChC,IAAI,CAAC,eAAe,IAAI,GAAG,OAAO;CAClC,MAAM,OAAO,KAAK;CAClB,OAAO,OAAO,SAAS,WAAW,OAAQ,KAAK,eAAe,KAAK,QAAQ;AAC7E;AAEA,MAAa,aAAa,WAA4C,SAAS,WAC7E,EAAE,UAAU,MAAM,QAAQ,WAAW,GAAG,SACxC,KACA;CACA,MAAM,QAAQ,OAAuB,IAAI;CACzC,MAAM,OAAO,OAA6B,IAAI;CAE9C,gBAAgB,OAAO,MAAM,OAAO,aAAa,WAAW,WAAW,EAAE;CACzE,OACE,qBAAC,OAAD;EACO;EACL,GAAI;EACJ,aAAU;EACV,WAAW,GAAG,mBAAmB,GAAG,SAAS;EAJ/C,UAAA;GAMG,SAAS,KAAA,KAAa,SAAS,OAAO,OACrC,oBAAC,OAAD;IACE,aAAU;IACV,eAAY;IACZ,WAAU;IAEV,UAAA,oBAAC,UAAD;KAAU,SAAS,QAAQ,IAAI;KAAG,QAAO;KAAQ,WAAU;KACxD,UAAA;IACO,CAAA;GACP,CAAA;GAEP,oBAAC,OAAD;IAAK,KAAK;IAAO,aAAU;IAAmB,WAAU;IACtD,UAAA,oBAAC,KAAD;KAAG,KAAK;KAAM,aAAU;KAAmB,WAAW,uBAAuB;KAC1E,UAAA,OAAO,aAAa,WACnB,oBAAC,UAAD;MAAU,SAAS;MAAU,WAAU;MACpC;KACO,CAAA,IAEV;IAED,CAAA;GACA,CAAA;GACJ,UAAU,OAAO,OAChB,oBAAC,OAAD;IAAK,aAAU;IAAqB,WAAW,yBAAyB;IACrE,UAAA;GACE,CAAA;EAEJ;;AAET,CAAC"}

package/dist/empty-state/index.d.ts

@@ -0,0 +1,2 @@
+import { EmptyState, EmptyStateProps, emptyStateActionVariants, emptyStateTextVariants, emptyStateVariants } from "./empty-state.js";
+export { EmptyState, type EmptyStateProps, emptyStateActionVariants, emptyStateTextVariants, emptyStateVariants };

package/dist/empty-state/index.js

@@ -0,0 +1,2 @@
+import { EmptyState, emptyStateActionVariants, emptyStateTextVariants, emptyStateVariants } from "./empty-state.js";
+export { EmptyState, emptyStateActionVariants, emptyStateTextVariants, emptyStateVariants };

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

@@ -0,0 +1,54 @@
+import { ReactNode } from "react";
+//#region src/expanding-button-group/expanding-button-group.d.ts
+export type ExpandingButtonGroupSize = "sm" | "md";
+export type ExpandingButtonGroupTone = "neutral" | "danger";
+export interface ExpandingButtonGroupItem {
+  /** Stable key for the action. Also the value passed to onAction. */
+  id: string;
+  /** Visible label once the button expands, and its accessible name at all times. Use a short verb, such as "Archive". */
+  label: string;
+  /** Icon shown while collapsed. A 16px icon fits; it is sized by the group. Mark it `aria-hidden`. */
+  icon: ReactNode;
+  /** Runs the action. Return false, or reject, to skip the confirmation. A promise keeps the button busy until it settles. */
+  onSelect?: () => void | boolean | Promise<void | boolean>;
+  /** Past tense word shown in place after the action, such as "Archived". The icon becomes a check for confirmDuration. Omit for actions that open something. */
+  doneLabel?: string;
+  /** `danger` colours the expanded state with the destructive token, for destructive actions such as Delete. */
+  tone?: ExpandingButtonGroupTone;
+  /** Dimmed and inert. Stays focusable and still reveals its label, so people can learn what it would do. */
+  isDisabled?: boolean;
+}
+export interface ExpandingButtonGroupProps {
+  items: readonly ExpandingButtonGroupItem[];
+  /** Accessible name of the toolbar, such as "Message actions". */
+  label: string;
+  /** @default "md" */
+  size?: ExpandingButtonGroupSize;
+  /**
+   * Id of the action whose label shows at rest, usually the primary one. Defaults to the first enabled action: one action is always
+   * expanded. Pointing at or focusing another moves the expansion there, and it returns here when the pointer and focus leave.
+   */
+  defaultExpanded?: string | null;
+  /** Called with the item id whenever an action runs, before its own onSelect. */
+  onAction?: (id: string) => void;
+  /** How long the confirmation stays, in milliseconds. @default 1400 */
+  confirmDuration?: number;
+  /** Extra classes. Merged last, so they win conflicts with ours. */
+  className?: string;
+}
+/**
+ * A compact pill of icon buttons for actions. One action always shows its label;
+ * the one you point at or focus takes over the label while its neighbours slide
+ * aside, and an action can confirm in place: the icon draws a check and the label
+ * becomes a past tense word. On touch, the first tap reveals the label and a
+ * second tap runs the action.
+ *
+ * Arrow keys move focus, Home and End jump to the ends. A disabled action stays
+ * focusable and still reveals its label, so people can learn what it would do.
+ *
+ * @example
+ * <ExpandingButtonGroup label="Message actions" items={[{ id: "archive", label: "Archive", doneLabel: "Archived", icon: <ArchiveIcon aria-hidden /> }]} />
+ */
+export declare function ExpandingButtonGroup({ items, label, size, defaultExpanded, onAction, confirmDuration, className }: ExpandingButtonGroupProps): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=expanding-button-group.d.ts.map

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

@@ -0,0 +1,350 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { useExitBackstop, useIsomorphicLayoutEffect, useLeavingItems } from "../lib/motion.js";
+import { IconSwap } from "../lib/icon-swap.js";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/expanding-button-group/expanding-button-group.tsx
+/** Geometry per size. The icon keeps the same left inset collapsed and expanded, so it never moves while the label is revealed. */
+const metrics = {
+	sm: {
+		height: 28,
+		icon: 14,
+		start: 7,
+		gap: 5,
+		end: 11
+	},
+	md: {
+		height: 36,
+		icon: 16,
+		start: 10,
+		gap: 7,
+		end: 14
+	}
+};
+/** Pixels the pointer must travel into a neighbouring action before the expansion moves to it. */
+const hysteresis = 4;
+/** The confirmation tick draws itself from its short stroke. */
+function DrawnCheck() {
+	return /* @__PURE__ */ jsx("svg", {
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: 2,
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ jsx("path", {
+			d: "M4 12.5l5 5L20 6.5",
+			pathLength: 1,
+			className: "[stroke-dasharray:1] motion-safe:animate-check-draw-quick"
+		})
+	});
+}
+function LeavingWord({ 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: "col-start-1 row-start-1 whitespace-nowrap motion-safe:animate-word-out motion-reduce:animate-fade-out",
+		children
+	});
+}
+function Item({ item, size, expanded, done, busy, tabStop, onPointerDown, onClick, onFocus }) {
+	const m = metrics[size];
+	const labelRef = useRef(null);
+	const doneRef = useRef(null);
+	const wordRef = useRef(null);
+	const [text, setText] = useState(0);
+	useIsomorphicLayoutEffect(() => {
+		const measure = () => {
+			const next = Math.max(labelRef.current?.getBoundingClientRect().width ?? 0, doneRef.current?.getBoundingClientRect().width ?? 0);
+			setText((current) => Math.abs(current - next) < .5 ? current : next);
+		};
+		measure();
+		if (typeof ResizeObserver === "undefined") return;
+		let frame = 0;
+		const observer = new ResizeObserver(() => {
+			cancelAnimationFrame(frame);
+			frame = requestAnimationFrame(measure);
+		});
+		if (labelRef.current) observer.observe(labelRef.current);
+		if (doneRef.current) observer.observe(doneRef.current);
+		return () => {
+			cancelAnimationFrame(frame);
+			observer.disconnect();
+		};
+	}, [
+		item.label,
+		item.doneLabel,
+		size
+	]);
+	const showDone = done && !!item.doneLabel;
+	const measured = text > 0;
+	const target = expanded && measured ? m.start + m.icon + m.gap + text + m.end : m.height;
+	const word = showDone ? item.doneLabel : item.label;
+	const { leaving, changed, remove } = useLeavingItems(word, word, () => wordRef.current);
+	return /* @__PURE__ */ jsxs("button", {
+		type: "button",
+		style: { width: target },
+		"data-ebg-item": "",
+		"data-id": item.id,
+		"data-tone": item.tone ?? "neutral",
+		"data-state": showDone ? "done" : "idle",
+		"data-expanded": expanded || void 0,
+		"data-unmeasured": measured ? void 0 : "",
+		"aria-label": item.label,
+		"aria-disabled": item.isDisabled || void 0,
+		"aria-busy": busy || void 0,
+		tabIndex: tabStop ? 0 : -1,
+		onPointerDown: (event) => onPointerDown(item, event),
+		onClick: () => onClick(item),
+		onFocus: (event) => onFocus(item, event),
+		className: "expanding-group-item focus-visible:outline-solid focus-visible:outline-(length:--focus-ring-width) focus-visible:outline-offset-(--focus-ring-offset) focus-visible:outline-(--color-ring)",
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "expanding-group-icon",
+			"aria-hidden": "true",
+			children: /* @__PURE__ */ jsx(IconSwap, {
+				iconKey: showDone ? "done" : "icon",
+				tight: true,
+				fill: true,
+				className: "size-full",
+				children: showDone ? /* @__PURE__ */ jsx(DrawnCheck, {}) : item.icon
+			})
+		}), /* @__PURE__ */ jsxs("span", {
+			className: "expanding-group-label",
+			"aria-hidden": "true",
+			children: [
+				leaving.map((entry) => /* @__PURE__ */ jsx(LeavingWord, {
+					id: entry.id,
+					onDone: remove,
+					children: entry.value
+				}, entry.id)),
+				/* @__PURE__ */ jsx("span", {
+					ref: wordRef,
+					className: cn("col-start-1 row-start-1 whitespace-nowrap" + (changed ? " motion-safe:animate-word-in motion-reduce:animate-fade-in" : "")),
+					children: word
+				}, word),
+				/* @__PURE__ */ jsx("span", {
+					ref: labelRef,
+					className: "pointer-events-none invisible col-start-1 row-start-1 whitespace-nowrap",
+					children: item.label
+				}),
+				item.doneLabel ? /* @__PURE__ */ jsx("span", {
+					ref: doneRef,
+					className: "pointer-events-none invisible col-start-1 row-start-1 whitespace-nowrap",
+					children: item.doneLabel
+				}) : null
+			]
+		})]
+	});
+}
+/**
+* A compact pill of icon buttons for actions. One action always shows its label;
+* the one you point at or focus takes over the label while its neighbours slide
+* aside, and an action can confirm in place: the icon draws a check and the label
+* becomes a past tense word. On touch, the first tap reveals the label and a
+* second tap runs the action.
+*
+* Arrow keys move focus, Home and End jump to the ends. A disabled action stays
+* focusable and still reveals its label, so people can learn what it would do.
+*
+* @example
+* <ExpandingButtonGroup label="Message actions" items={[{ id: "archive", label: "Archive", doneLabel: "Archived", icon: <ArchiveIcon aria-hidden /> }]} />
+*/
+function ExpandingButtonGroup({ items, label, size = "md", defaultExpanded = null, onAction, confirmDuration = 1400, className }) {
+	const root = useRef(null);
+	const [intent, setIntent] = useState(null);
+	const [done, setDone] = useState(null);
+	const [busy, setBusy] = useState(null);
+	const [announcement, setAnnouncement] = useState("");
+	const [focused, setFocused] = useState(null);
+	const [settled, setSettled] = useState(false);
+	const pointerOver = useRef(null);
+	const pointerAt = useRef(null);
+	const keyFocus = useRef(null);
+	const touchOpen = useRef(null);
+	const press = useRef(null);
+	const doneRef = useRef(null);
+	const timer = useRef(null);
+	const mounted = useRef(true);
+	const seq = useRef(0);
+	useEffect(() => {
+		mounted.current = true;
+		const frames = requestAnimationFrame(() => requestAnimationFrame(() => setSettled(true)));
+		return () => {
+			mounted.current = false;
+			cancelAnimationFrame(frames);
+			if (timer.current) clearTimeout(timer.current);
+		};
+	}, []);
+	const has = (id) => !!id && items.some((item) => item.id === id);
+	const firstEnabled = items.find((item) => !item.isDisabled)?.id ?? items[0]?.id ?? null;
+	const restId = has(defaultExpanded) ? defaultExpanded : firstEnabled;
+	const expandedId = has(intent) ? intent : restId;
+	const tabStop = has(focused) ? focused : restId;
+	useEffect(() => {
+		if (!intent || touchOpen.current !== intent) return;
+		const onDown = (event) => {
+			if (root.current?.contains(event.target)) return;
+			touchOpen.current = null;
+			setIntent(doneRef.current ?? keyFocus.current);
+		};
+		document.addEventListener("pointerdown", onDown, true);
+		return () => document.removeEventListener("pointerdown", onDown, true);
+	}, [intent]);
+	const confirm = useCallback((item) => {
+		if (timer.current) clearTimeout(timer.current);
+		seq.current += 1;
+		doneRef.current = item.id;
+		setDone({
+			id: item.id,
+			seq: seq.current
+		});
+		setAnnouncement((item.doneLabel ?? "") + (seq.current % 2 ? "" : "​"));
+		timer.current = setTimeout(() => {
+			doneRef.current = null;
+			setDone(null);
+			if (pointerOver.current !== item.id && keyFocus.current !== item.id) {
+				if (touchOpen.current === item.id) touchOpen.current = null;
+				setIntent((current) => current === item.id ? pointerOver.current ?? keyFocus.current : current);
+			}
+		}, confirmDuration);
+	}, [confirmDuration]);
+	const activate = useCallback(async (item) => {
+		if (item.isDisabled || busy === item.id || doneRef.current === item.id) return;
+		setIntent(item.id);
+		onAction?.(item.id);
+		let result;
+		try {
+			const pending = item.onSelect?.();
+			if (pending instanceof Promise) {
+				setBusy(item.id);
+				result = await pending;
+			} else result = pending;
+		} catch {
+			result = false;
+		} finally {
+			if (mounted.current) setBusy((current) => current === item.id ? null : current);
+		}
+		if (!mounted.current || result === false || !item.doneLabel) return;
+		confirm(item);
+	}, [
+		busy,
+		confirm,
+		onAction
+	]);
+	const onItemPointerDown = (item, event) => {
+		press.current = {
+			id: item.id,
+			kind: event.pointerType,
+			wasExpanded: expandedId === item.id
+		};
+	};
+	const onItemClick = (item) => {
+		const last = press.current;
+		press.current = null;
+		if (last && last.id === item.id && last.kind === "touch" && !last.wasExpanded) {
+			touchOpen.current = item.id;
+			setIntent(item.id);
+			return;
+		}
+		if (last?.kind === "touch") touchOpen.current = item.id;
+		activate(item);
+	};
+	const onItemFocus = (item, event) => {
+		setFocused(item.id);
+		let visible = true;
+		try {
+			visible = event.currentTarget.matches(":focus-visible");
+		} catch {}
+		if (!visible) return;
+		keyFocus.current = item.id;
+		setIntent(item.id);
+	};
+	const onBlur = (event) => {
+		if (root.current?.contains(event.relatedTarget)) return;
+		keyFocus.current = null;
+		touchOpen.current = null;
+		setIntent(pointerOver.current ?? doneRef.current);
+	};
+	const onPointerMove = (event) => {
+		if (event.pointerType !== "mouse") return;
+		const at = pointerAt.current;
+		if (at && Math.abs(at.x - event.clientX) < 1 && Math.abs(at.y - event.clientY) < 1) return;
+		pointerAt.current = {
+			x: event.clientX,
+			y: event.clientY
+		};
+		const button = event.target.closest("[data-ebg-item]");
+		const id = button?.dataset.id;
+		if (!button || !id || id === pointerOver.current) return;
+		if (pointerOver.current) {
+			const box = button.getBoundingClientRect();
+			if (event.clientX < box.left + hysteresis || event.clientX > box.right - hysteresis) return;
+		}
+		pointerOver.current = id;
+		setIntent(id);
+	};
+	const onPointerLeave = (event) => {
+		if (event.pointerType !== "mouse") return;
+		pointerAt.current = null;
+		pointerOver.current = null;
+		setIntent(doneRef.current ?? keyFocus.current);
+	};
+	const onKeyDown = (event) => {
+		const list = Array.from(root.current?.querySelectorAll("[data-ebg-item]") ?? []);
+		const index = list.findIndex((button) => button === document.activeElement);
+		if (index < 0) return;
+		const last = list.length - 1;
+		const target = event.key === "ArrowRight" ? index === last ? 0 : index + 1 : event.key === "ArrowLeft" ? index === 0 ? last : index - 1 : event.key === "Home" ? 0 : event.key === "End" ? last : -1;
+		if (target < 0) return;
+		event.preventDefault();
+		list[target].focus();
+	};
+	const m = metrics[size];
+	const vars = {
+		"--ebg-h": m.height + "px",
+		"--ebg-icon": m.icon + "px",
+		"--ebg-start": m.start + "px",
+		"--ebg-gap": m.gap + "px",
+		"--ebg-end": m.end + "px"
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		ref: root,
+		role: "toolbar",
+		"aria-label": label,
+		"aria-orientation": "horizontal",
+		"data-size": size,
+		"data-settled": settled ? "" : void 0,
+		style: vars,
+		onKeyDown,
+		onBlur,
+		onPointerMove,
+		onPointerLeave,
+		className: cn("expanding-group", className),
+		children: [items.map((item) => /* @__PURE__ */ jsx(Item, {
+			item,
+			size,
+			expanded: expandedId === item.id,
+			done: done?.id === item.id,
+			busy: busy === item.id,
+			tabStop: tabStop === item.id,
+			onPointerDown: onItemPointerDown,
+			onClick: onItemClick,
+			onFocus: onItemFocus
+		}, item.id)), /* @__PURE__ */ jsx("span", {
+			className: "sr-only",
+			role: "status",
+			"aria-live": "polite",
+			children: announcement
+		})]
+	});
+}
+//#endregion
+export { ExpandingButtonGroup };
+
+//# sourceMappingURL=expanding-button-group.js.map