@seekalfred/primitives 0.7.3 → 0.8.0

package/dist/button/button.js.map

@@ -1 +1 @@
-{"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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"}
+{"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: every generative action, and nothing else (Madhuri,\n         * 2026-11-01). An orange GRADIENT fill (--gradient-ai, primary 400 to\n         * 600), an ink label and a wand icon, which Button supplies itself.\n         *\n         * This is the ONE sanctioned exception to CORRECTION 3 above: primary\n         * stays flat, and the gradient belongs to `ai` alone. Do not flatten it,\n         * and do not copy it to another variant.\n         *\n         * The fill is a background-image over bg-primary, so a browser that\n         * drops the gradient still paints brand orange under the ink label.\n         * Hover and pressed swap the image for their own tokens (an opacity step\n         * would make the label pair depend on what is behind the button), and\n         * every stop of all three is graded for the ink label in\n         * gradient-ai.test.ts.\n         *\n         * Disabled drops the gradient entirely (bg-none) for the muted fill, so\n         * it reads as off, not as a dimmed AI button.\n         *\n         * Focus: the control's OWN 1px border turns ink and no ring is drawn\n         * (approved, 2026-11-01). The outline is removed only here. Under\n         * forced-colors a border colour is replaced by a system colour, so the\n         * change would vanish: there the outline comes back, for the same\n         * reason as CORRECTION 1.\n         *\n         * The old turning colour beam (ai-beam) is gone: it does not belong to\n         * the confirmed look, and its ring would have sat on top of the focus\n         * border.\n         */\n        ai: [\n          \"bg-primary bg-(image:--gradient-ai) text-primary-foreground shadow-surface\",\n          \"motion-safe:button-motion\",\n          pressScale,\n          \"data-[hovered]:bg-(image:--gradient-ai-hover) data-[hovered]:shadow-resting\",\n          \"data-[pressed]:bg-(image:--gradient-ai-pressed)\",\n          \"motion-safe:data-[hovered]:[&_svg]:-rotate-12\",\n          \"data-[focus-visible]:outline-0 data-[focus-visible]:border-primary-foreground\",\n          \"forced-colors:data-[focus-visible]:outline-(length:--focus-ring-width)\",\n          \"data-[disabled]:opacity-100 data-[disabled]:bg-none data-[disabled]:bg-muted data-[disabled]:text-muted-foreground data-[disabled]:border-border data-[disabled]:shadow-none\",\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        // The compact icon-only button: a 24px square (the WCAG 2.5.8 target\n        // minimum) for a glyph that sits beside text, such as an info trigger\n        // next to a heading. It is NOT on the density scale: it is a fixed\n        // minimum target, so it does not grow with data-density. Same rules as\n        // `icon`: the glyph is `children` and it must carry an `aria-label`. The\n        // glyph is 14px unless it carries a size-* class of its own.\n        \"icon-sm\": \"size-6 px-0 text-base [&_svg:not([class*='size-'])]:size-3.5\",\n      },\n      // Opt-in wrapping, for a button whose label is long, user-authored text (a\n      // prompt in a list, a name in a cell). The base is one unbreakable line at a\n      // fixed height; wrap lets the label break across lines, the box grow from\n      // the size's height as a minimum, the text start at the leading edge, and\n      // the button shrink to its container. Our later classes beat the base's\n      // whitespace-nowrap, h-* and shrink-0 by merge order (cn runs tailwind-merge\n      // over our own classes), and the inner label spans follow the `wrap` prop.\n      wrap: {\n        true: \"h-auto max-w-full min-w-0 shrink whitespace-normal break-words text-start\",\n        false: \"\",\n      },\n    },\n    compoundVariants: [\n      { size: \"sm\", wrap: true, class: \"min-h-(--density-control-h-sm) py-1.5\" },\n      { size: \"md\", wrap: true, class: \"min-h-(--density-control-h-md) py-2\" },\n      { size: \"lg\", wrap: true, class: \"min-h-(--density-control-h-lg) py-2.5\" },\n    ],\n    defaultVariants: {\n      variant: \"primary\",\n      size: \"md\",\n      wrap: false,\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, wrap }: { children: ReactNode; pending: boolean; wrap: 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  // A wrapping label has no single width to spring to: the morph measures the unwrapped line.\n  useMorphWidth(contentRef, key, !wrap);\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={wrap ? \"inline-flex min-w-0 items-center\" : \"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              [\n                \"inline-flex items-center justify-center gap-(--density-control-gap) [&_svg]:shrink-0\",\n                wrap ? \"min-w-0 whitespace-normal\" : \"whitespace-nowrap\",\n              ],\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 * The AI button's wand: a 24px outline glyph in the same stroke style as the\n * library's other inline icons (the package ships no icon dependency). Drawn\n * after lucide's \"wand-sparkles\", which is what the app's `Wand2` is.\n */\nfunction WandIcon() {\n  return (\n    <svg\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"1.75\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      aria-hidden=\"true\"\n      data-slot=\"button-wand\"\n    >\n      <path d=\"m21.64 3.64-1.28-1.28a1.21 1.21 0 0 0-1.72 0L2.36 18.64a1.21 1.21 0 0 0 0 1.72l1.28 1.28a1.2 1.2 0 0 0 1.72 0L21.64 5.36a1.2 1.2 0 0 0 0-1.72\" />\n      <path d=\"m14 7 3 3M5 6v4M19 14v4M10 2v2M7 8H3M21 16h-4M11 3H9\" />\n    </svg>\n  );\n}\nWandIcon.displayName = \"WandIcon\";\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   * `variant=\"ai\"` supplies a wand here when this is `undefined`. Pass your own\n   * node to replace it, or `false` (or `null`) for no icon at all. The wand is\n   * not added to `size=\"icon\"`, whose glyph is `children`.\n   */\n  startIcon?: ReactNode;\n  /** Icon rendered after the label. Same rules as {@link ButtonProps.startIcon}. */\n  endIcon?: ReactNode;\n  /**\n   * Let the label wrap onto more lines. For a button whose text is long and\n   * not ours (a prompt, a name): it shrinks to its container, breaks the label\n   * (even a long word with no spaces), starts the text at the leading edge, and\n   * grows taller than `size`'s height, which becomes its minimum. Off by\n   * default, and then a button is one line at a fixed height exactly as before.\n   * Pass `className=\"justify-start\"` to start a link-style button at the\n   * leading edge of its row. A wrapping button's width does not spring when its\n   * label changes.\n   *\n   * Not for `size=\"icon\"` or `\"icon-sm\"`, which have no label.\n   *\n   * @default false\n   */\n  wrap?: boolean;\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 variant=\"ghost\" size=\"icon-sm\" aria-label=\"More information\"><InfoIcon /></Button>\n * <Button variant=\"link\" wrap className=\"justify-start\">A long prompt that may run over several lines</Button>\n * <Button href=\"/reports\" variant=\"outlineNeutral\">View reports</Button>\n */\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(\n  { className, variant, size, wrap, startIcon, endIcon, children, href, target, rel, download, ...props },\n  ref,\n) {\n  const classes = cn(buttonVariants({ variant, size, wrap }), className);\n  // The AI button brings its own wand; startIcon={false|null} opts out and a node replaces it.\n  const leadingIcon = startIcon === undefined && variant === \"ai\" && size !== \"icon\" ? <WandIcon /> : startIcon;\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} wrap={wrap === true}>\n      {leadingIcon}\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/card/card.js

@@ -94,7 +94,7 @@ const cardVariants = cva([
 * `p-6` on the shell would make impossible.
 */
 const cardHeaderVariants = cva("flex flex-col gap-1.5 px-6 py-(--card-section-py)");
-const cardTitleVariants = cva(["text-base leading-(--leading-none) font-semibold", "m-0"]);
+const cardTitleVariants = cva(["font-display text-base leading-(--leading-none) font-semibold", "m-0"]);
 const cardDescriptionVariants = cva(["text-sm leading-(--leading-normal) text-muted-foreground"]);
 const cardContentVariants = cva("px-6");
 const cardFooterVariants = cva("flex items-center px-6 py-(--card-section-py)");

package/dist/card/card.js.map

@@ -1 +1 @@
-{"version":3,"file":"card.js","names":[],"sources":["../../src/card/card.tsx"],"sourcesContent":["\"use client\";\n\nimport { cva } from \"class-variance-authority\";\nimport { forwardRef, useState, type ComponentPropsWithoutRef } from \"react\";\n\nimport { cn, cnAll } from \"../lib/cn.js\";\n\n/**\n * Card, ported from the legacy shadcn component.\n *\n * Presentational, so there is no React Aria base -- React Aria ships no card,\n * and a container that is not focusable, selectable or interactive needs no\n * behaviour to inherit.\n *\n * Five parts, from six. The census (24 consumer files, the most-used\n * container in the app) reads: Card 55, CardContent 40, CardHeader 21,\n * CardTitle 19, CardDescription 8, CardFooter 2, **CardAction 0**.\n *\n * Dropping `CardAction` takes three things with it, which is most of the\n * legacy header's complexity: the `grid`, the `grid-rows-[auto_auto]`, and\n * the `has-data-[slot=card-action]:grid-cols-[1fr_auto]` rule that existed\n * only to reserve a column for it. With no action to place, a header is a\n * stack.\n *\n * Two more legacy rules are gone. `[.border-b]:pb-6` and `[.border-t]:pt-6`\n * added padding when the CONSUMER happened to add a border class -- clever,\n * but action at a distance through a class name we do not own, and the census\n * found zero application call sites relying on it (one call site passes\n * `border-b-0`, which removes a border it never had). `@container/card-header`\n * named a container nothing queried.\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 cardVariants = cva(\n  [\n    \"flex flex-col\",\n    \"rounded-panel border-(length:--border-width) border-border\",\n    \"bg-card text-card-foreground shadow-surface\",\n\n    // box-border and font-sans are not boilerplate. The reset in\n    // @seekalfred/styles is OPT-IN, so a consumer may load none: content-box\n    // would add the padding to any width they set (the Alert shipped\n    // overflowing its container by 46px), and an unstyled document renders\n    // text in a serif (the Accordion shipped its panel that way). Declaring\n    // the family HERE rather than on each part means one declaration covers\n    // the whole subtree by inheritance.\n    \"box-border font-sans\",\n  ],\n  {\n    variants: {\n      /**\n       * The block padding and the gap live here, not in the base, so `flush`\n       * REPLACES them rather than relying on a merge to drop them: the\n       * exported `cardVariants({ flush: true })` is correct on its own.\n       *\n       * Flush keeps the outline, radius, surface and shadow, and clips its\n       * content to the inside of the rounded border: without the clip a filled\n       * child (a table header, a chart) shows square corners over the curve and\n       * covers the left and right hairline. `overflow: clip`, not `hidden`, so\n       * the card does not become a scroll container and a sticky table header\n       * inside it still sticks to the page. The sections keep their inline\n       * padding, so text and a section's fill stay clear of the corner curve\n       * (the fill still meets the side edges: background paints the padding).\n       *\n       * The header and footer hold text, so under flush they keep the 24px\n       * block inset the shell gave up. Without it the title and the footer line\n       * sat against the top and bottom borders, inside the corner curve, and\n       * the clip cut their first glyphs. The inset is a custom property both\n       * sections read, set per variant (never left undefined), so a nested\n       * default card resets it, and a section's own `py-*` still wins by merge.\n       * CardContent stays block-flush: a table or chart meets the edges.\n       */\n      flush: {\n        false: \"gap-6 py-6 [--card-section-py:--spacing(0)]\",\n        true: \"gap-0 py-0 overflow-clip [--card-section-py:--spacing(6)]\",\n      },\n      /**\n       * A featured card: the hairline is replaced by a brand gradient edge,\n       * painted by the `card-highlighted` utility in styles.css. The border\n       * stays (transparent), so a highlighted card has exactly the box of a\n       * plain one and a list of mixed cards does not shift.\n       */\n      highlighted: {\n        false: \"\",\n        true: \"card-highlighted border-transparent\",\n      },\n    },\n    compoundVariants: [\n      // The flush clip would cut away the gradient edge, which is painted in\n      // the border area outside the padding box. See card-highlighted-flush.\n      { flush: true, highlighted: true, class: \"card-highlighted-flush\" },\n    ],\n    defaultVariants: { flush: false, highlighted: false },\n  },\n);\n\n/**\n * Padding is inline-only on the sections and block-only on the shell.\n *\n * That split is load-bearing rather than stylistic: it is what lets a\n * consumer run a divider or a full-bleed image edge to edge, which a single\n * `p-6` on the shell would make impossible.\n */\nexport const cardHeaderVariants = cva(\"flex flex-col gap-1.5 px-6 py-(--card-section-py)\");\n\nexport const cardTitleVariants = 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-base leading-(--leading-none) font-semibold\",\n  // The user-agent <h3> ships a 1em block margin and font-size 1.17em. The\n  // legacy component was a <div> and never met either.\n  \"m-0\",\n]);\n\nexport const cardDescriptionVariants = cva([\n  \"text-sm leading-(--leading-normal) text-muted-foreground\",\n]);\n\nexport const cardContentVariants = cva(\"px-6\");\n\nexport const cardFooterVariants = cva(\"flex items-center px-6 py-(--card-section-py)\");\n\n/**\n * A content container.\n *\n * @example\n * <Card>\n *   <CardHeader>\n *     <CardTitle>Learning Progress</CardTitle>\n *     <CardDescription>Across all active courses.</CardDescription>\n *   </CardHeader>\n *   <CardContent>Twelve of eighteen modules complete.</CardContent>\n * </Card>\n */\nexport interface CardProps extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * Make the card respond to a pointer: it floats 2px on a spring while it is pointed\n   * at, its border darkens and its shadow deepens. Mouse and pen only; touch never lifts.\n   * Leave it off for a card that is not a target: a static card should not move.\n   */\n  interactive?: boolean;\n  /**\n   * A featured card: a brand gradient edge in place of the hairline. Use it for the\n   * one card a view wants the eye to land on (a recommended action, the suggested\n   * plan), never for several at once. The edge is decoration, so say WHY the card\n   * is featured in its content too: colour alone does not reach a screen reader.\n   * @default false\n   */\n  highlighted?: boolean;\n  /**\n   * Edge-to-edge content: no shell padding and no gap between the parts, and the\n   * content is clipped to the rounded border. The outline, radius, surface and\n   * shadow stay. For a table, list or full-bleed chart that must meet the card's\n   * top and bottom. The header and footer keep a 24px block inset so their text\n   * clears the corner curve, and every section keeps its inline padding: a\n   * section's fill already reaches the side edges.\n   * @default false\n   */\n  flush?: boolean;\n}\n\nexport const Card = forwardRef<HTMLDivElement, CardProps>(function Card(\n  {\n    className,\n    interactive = false,\n    highlighted = false,\n    flush = false,\n    onPointerEnter,\n    onPointerLeave,\n    ...props\n  },\n  ref,\n) {\n  // Pointed at by a mouse or pen. Touch never lifts, so it is read from the pointer, not :hover (which a tap leaves stuck).\n  const [pointed, setPointed] = useState(false);\n  return (\n    <div\n      ref={ref}\n      {...props}\n      data-slot=\"card\"\n      data-interactive={interactive || undefined}\n      data-highlighted={highlighted || undefined}\n      data-flush={flush || undefined}\n      data-pointed={(interactive && pointed) || undefined}\n      onPointerEnter={(event) => {\n        onPointerEnter?.(event);\n        if (interactive && event.pointerType !== \"touch\") setPointed(true);\n      }}\n      onPointerLeave={(event) => {\n        onPointerLeave?.(event);\n        setPointed(false);\n      }}\n      className={cnAll(cardVariants({ flush, highlighted }), interactive && \"card-lift\", className)}\n    />\n  );\n});\n\n/** Title and description, stacked. */\nexport type CardHeaderProps = ComponentPropsWithoutRef<\"div\">;\n\nexport const CardHeader = forwardRef<HTMLDivElement, CardHeaderProps>(function CardHeader(\n  { className, ...props },\n  ref,\n) {\n  return (\n    <div\n      ref={ref}\n      {...props}\n      data-slot=\"card-header\"\n      className={cn(cardHeaderVariants(), className)}\n    />\n  );\n});\n\n/**\n * The card's heading.\n *\n * A REAL heading, unlike the legacy `<div class=\"font-semibold\">`. None of\n * the 19 legacy call sites wrapped one, so 19 card titles were invisible to\n * screen-reader heading navigation -- the same shape of finding as the Avatar\n * port's missing `alt`, and the migration is when it gets answered.\n */\nexport interface CardTitleProps extends ComponentPropsWithoutRef<\"h3\"> {\n  /**\n   * Heading level.\n   *\n   * `3` by default, because a card almost always sits under a section\n   * heading. It is a prop rather than a constant because the correct level\n   * is a fact about the PAGE, and a fixed one would be wrong somewhere; the\n   * level changes semantics only, never the rendered size.\n   *\n   * @default 3\n   */\n  level?: 1 | 2 | 3 | 4 | 5 | 6;\n}\n\nexport const CardTitle = forwardRef<HTMLHeadingElement, CardTitleProps>(function CardTitle(\n  { className, level = 3, ...props },\n  ref,\n) {\n  // Static union, not a template literal: `h${level}` is a string React\n  // accepts but TypeScript cannot narrow to an intrinsic element, and the\n  // cast that silences it would also accept `h7`.\n  const Heading = ({ 1: \"h1\", 2: \"h2\", 3: \"h3\", 4: \"h4\", 5: \"h5\", 6: \"h6\" } as const)[level];\n\n  return (\n    <Heading\n      ref={ref}\n      {...props}\n      data-slot=\"card-title\"\n      className={cn(cardTitleVariants(), className)}\n    />\n  );\n});\n\n/** Secondary text under the title. */\nexport type CardDescriptionProps = ComponentPropsWithoutRef<\"div\">;\n\nexport const CardDescription = forwardRef<HTMLDivElement, CardDescriptionProps>(\n  function CardDescription({ className, ...props }, ref) {\n    return (\n      <div\n        ref={ref}\n        {...props}\n        data-slot=\"card-description\"\n        className={cn(cardDescriptionVariants(), className)}\n      />\n    );\n  },\n);\n\n/** The card's body. */\nexport type CardContentProps = ComponentPropsWithoutRef<\"div\">;\n\nexport const CardContent = forwardRef<HTMLDivElement, CardContentProps>(function CardContent(\n  { className, ...props },\n  ref,\n) {\n  return (\n    <div\n      ref={ref}\n      {...props}\n      data-slot=\"card-content\"\n      className={cn(cardContentVariants(), className)}\n    />\n  );\n});\n\n/** Actions or metadata at the foot of the card. */\nexport type CardFooterProps = ComponentPropsWithoutRef<\"div\">;\n\nexport const CardFooter = forwardRef<HTMLDivElement, CardFooterProps>(function CardFooter(\n  { className, ...props },\n  ref,\n) {\n  return (\n    <div\n      ref={ref}\n      {...props}\n      data-slot=\"card-footer\"\n      className={cn(cardFooterVariants(), className)}\n    />\n  );\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmCA,MAAa,eAAe,IAC1B;CACE;CACA;CACA;CASA;AACF,GACA;CACE,UAAU;;;;;;;;;;;;;;;;;;;;;;;EAuBR,OAAO;GACL,OAAO;GACP,MAAM;EACR;;;;;;;EAOA,aAAa;GACX,OAAO;GACP,MAAM;EACR;CACF;CACA,kBAAkB,CAGhB;EAAE,OAAO;EAAM,aAAa;EAAM,OAAO;CAAyB,CACpE;CACA,iBAAiB;EAAE,OAAO;EAAO,aAAa;CAAM;AACtD,CACF;;;;;;;;AASA,MAAa,qBAAqB,IAAI,mDAAmD;AAEzF,MAAa,oBAAoB,IAAI,CAGnC,oDAGA,KACF,CAAC;AAED,MAAa,0BAA0B,IAAI,CACzC,0DACF,CAAC;AAED,MAAa,sBAAsB,IAAI,MAAM;AAE7C,MAAa,qBAAqB,IAAI,+CAA+C;AAyCrF,MAAa,OAAO,WAAsC,SAAS,KACjE,EACE,WACA,cAAc,OACd,cAAc,OACd,QAAQ,OACR,gBACA,gBACA,GAAG,SAEL,KACA;CAEA,MAAM,CAAC,SAAS,cAAc,SAAS,KAAK;CAC5C,OACE,oBAAC,OAAD;EACO;EACL,GAAI;EACJ,aAAU;EACV,oBAAkB,eAAe,KAAA;EACjC,oBAAkB,eAAe,KAAA;EACjC,cAAY,SAAS,KAAA;EACrB,gBAAe,eAAe,WAAY,KAAA;EAC1C,iBAAiB,UAAU;GACzB,iBAAiB,KAAK;GACtB,IAAI,eAAe,MAAM,gBAAgB,SAAS,WAAW,IAAI;EACnE;EACA,iBAAiB,UAAU;GACzB,iBAAiB,KAAK;GACtB,WAAW,KAAK;EAClB;EACA,WAAW,MAAM,aAAa;GAAE;GAAO;EAAY,CAAC,GAAG,eAAe,aAAa,SAAS;CAC7F,CAAA;AAEL,CAAC;AAKD,MAAa,aAAa,WAA4C,SAAS,WAC7E,EAAE,WAAW,GAAG,SAChB,KACA;CACA,OACE,oBAAC,OAAD;EACO;EACL,GAAI;EACJ,aAAU;EACV,WAAW,GAAG,mBAAmB,GAAG,SAAS;CAC9C,CAAA;AAEL,CAAC;AAwBD,MAAa,YAAY,WAA+C,SAAS,UAC/E,EAAE,WAAW,QAAQ,GAAG,GAAG,SAC3B,KACA;CAIA,MAAM,UAAW;EAAE,GAAG;EAAM,GAAG;EAAM,GAAG;EAAM,GAAG;EAAM,GAAG;EAAM,GAAG;CAAK,EAAY;CAEpF,OACE,oBAAC,SAAD;EACO;EACL,GAAI;EACJ,aAAU;EACV,WAAW,GAAG,kBAAkB,GAAG,SAAS;CAC7C,CAAA;AAEL,CAAC;AAKD,MAAa,kBAAkB,WAC7B,SAAS,gBAAgB,EAAE,WAAW,GAAG,SAAS,KAAK;CACrD,OACE,oBAAC,OAAD;EACO;EACL,GAAI;EACJ,aAAU;EACV,WAAW,GAAG,wBAAwB,GAAG,SAAS;CACnD,CAAA;AAEL,CACF;AAKA,MAAa,cAAc,WAA6C,SAAS,YAC/E,EAAE,WAAW,GAAG,SAChB,KACA;CACA,OACE,oBAAC,OAAD;EACO;EACL,GAAI;EACJ,aAAU;EACV,WAAW,GAAG,oBAAoB,GAAG,SAAS;CAC/C,CAAA;AAEL,CAAC;AAKD,MAAa,aAAa,WAA4C,SAAS,WAC7E,EAAE,WAAW,GAAG,SAChB,KACA;CACA,OACE,oBAAC,OAAD;EACO;EACL,GAAI;EACJ,aAAU;EACV,WAAW,GAAG,mBAAmB,GAAG,SAAS;CAC9C,CAAA;AAEL,CAAC"}
+{"version":3,"file":"card.js","names":[],"sources":["../../src/card/card.tsx"],"sourcesContent":["\"use client\";\n\nimport { cva } from \"class-variance-authority\";\nimport { forwardRef, useState, type ComponentPropsWithoutRef } from \"react\";\n\nimport { cn, cnAll } from \"../lib/cn.js\";\n\n/**\n * Card, ported from the legacy shadcn component.\n *\n * Presentational, so there is no React Aria base -- React Aria ships no card,\n * and a container that is not focusable, selectable or interactive needs no\n * behaviour to inherit.\n *\n * Five parts, from six. The census (24 consumer files, the most-used\n * container in the app) reads: Card 55, CardContent 40, CardHeader 21,\n * CardTitle 19, CardDescription 8, CardFooter 2, **CardAction 0**.\n *\n * Dropping `CardAction` takes three things with it, which is most of the\n * legacy header's complexity: the `grid`, the `grid-rows-[auto_auto]`, and\n * the `has-data-[slot=card-action]:grid-cols-[1fr_auto]` rule that existed\n * only to reserve a column for it. With no action to place, a header is a\n * stack.\n *\n * Two more legacy rules are gone. `[.border-b]:pb-6` and `[.border-t]:pt-6`\n * added padding when the CONSUMER happened to add a border class -- clever,\n * but action at a distance through a class name we do not own, and the census\n * found zero application call sites relying on it (one call site passes\n * `border-b-0`, which removes a border it never had). `@container/card-header`\n * named a container nothing queried.\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 cardVariants = cva(\n  [\n    \"flex flex-col\",\n    \"rounded-panel border-(length:--border-width) border-border\",\n    \"bg-card text-card-foreground shadow-surface\",\n\n    // box-border and font-sans are not boilerplate. The reset in\n    // @seekalfred/styles is OPT-IN, so a consumer may load none: content-box\n    // would add the padding to any width they set (the Alert shipped\n    // overflowing its container by 46px), and an unstyled document renders\n    // text in a serif (the Accordion shipped its panel that way). Declaring\n    // the family HERE rather than on each part means one declaration covers\n    // the whole subtree by inheritance.\n    \"box-border font-sans\",\n  ],\n  {\n    variants: {\n      /**\n       * The block padding and the gap live here, not in the base, so `flush`\n       * REPLACES them rather than relying on a merge to drop them: the\n       * exported `cardVariants({ flush: true })` is correct on its own.\n       *\n       * Flush keeps the outline, radius, surface and shadow, and clips its\n       * content to the inside of the rounded border: without the clip a filled\n       * child (a table header, a chart) shows square corners over the curve and\n       * covers the left and right hairline. `overflow: clip`, not `hidden`, so\n       * the card does not become a scroll container and a sticky table header\n       * inside it still sticks to the page. The sections keep their inline\n       * padding, so text and a section's fill stay clear of the corner curve\n       * (the fill still meets the side edges: background paints the padding).\n       *\n       * The header and footer hold text, so under flush they keep the 24px\n       * block inset the shell gave up. Without it the title and the footer line\n       * sat against the top and bottom borders, inside the corner curve, and\n       * the clip cut their first glyphs. The inset is a custom property both\n       * sections read, set per variant (never left undefined), so a nested\n       * default card resets it, and a section's own `py-*` still wins by merge.\n       * CardContent stays block-flush: a table or chart meets the edges.\n       */\n      flush: {\n        false: \"gap-6 py-6 [--card-section-py:--spacing(0)]\",\n        true: \"gap-0 py-0 overflow-clip [--card-section-py:--spacing(6)]\",\n      },\n      /**\n       * A featured card: the hairline is replaced by a brand gradient edge,\n       * painted by the `card-highlighted` utility in styles.css. The border\n       * stays (transparent), so a highlighted card has exactly the box of a\n       * plain one and a list of mixed cards does not shift.\n       */\n      highlighted: {\n        false: \"\",\n        true: \"card-highlighted border-transparent\",\n      },\n    },\n    compoundVariants: [\n      // The flush clip would cut away the gradient edge, which is painted in\n      // the border area outside the padding box. See card-highlighted-flush.\n      { flush: true, highlighted: true, class: \"card-highlighted-flush\" },\n    ],\n    defaultVariants: { flush: false, highlighted: false },\n  },\n);\n\n/**\n * Padding is inline-only on the sections and block-only on the shell.\n *\n * That split is load-bearing rather than stylistic: it is what lets a\n * consumer run a divider or a full-bleed image edge to edge, which a single\n * `p-6` on the shell would make impossible.\n */\nexport const cardHeaderVariants = cva(\"flex flex-col gap-1.5 px-6 py-(--card-section-py)\");\n\nexport const cardTitleVariants = 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  \"font-display text-base leading-(--leading-none) font-semibold\",\n  // The user-agent <h3> ships a 1em block margin and font-size 1.17em. The\n  // legacy component was a <div> and never met either.\n  \"m-0\",\n]);\n\nexport const cardDescriptionVariants = cva([\n  \"text-sm leading-(--leading-normal) text-muted-foreground\",\n]);\n\nexport const cardContentVariants = cva(\"px-6\");\n\nexport const cardFooterVariants = cva(\"flex items-center px-6 py-(--card-section-py)\");\n\n/**\n * A content container.\n *\n * @example\n * <Card>\n *   <CardHeader>\n *     <CardTitle>Learning Progress</CardTitle>\n *     <CardDescription>Across all active courses.</CardDescription>\n *   </CardHeader>\n *   <CardContent>Twelve of eighteen modules complete.</CardContent>\n * </Card>\n */\nexport interface CardProps extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * Make the card respond to a pointer: it floats 2px on a spring while it is pointed\n   * at, its border darkens and its shadow deepens. Mouse and pen only; touch never lifts.\n   * Leave it off for a card that is not a target: a static card should not move.\n   */\n  interactive?: boolean;\n  /**\n   * A featured card: a brand gradient edge in place of the hairline. Use it for the\n   * one card a view wants the eye to land on (a recommended action, the suggested\n   * plan), never for several at once. The edge is decoration, so say WHY the card\n   * is featured in its content too: colour alone does not reach a screen reader.\n   * @default false\n   */\n  highlighted?: boolean;\n  /**\n   * Edge-to-edge content: no shell padding and no gap between the parts, and the\n   * content is clipped to the rounded border. The outline, radius, surface and\n   * shadow stay. For a table, list or full-bleed chart that must meet the card's\n   * top and bottom. The header and footer keep a 24px block inset so their text\n   * clears the corner curve, and every section keeps its inline padding: a\n   * section's fill already reaches the side edges.\n   * @default false\n   */\n  flush?: boolean;\n}\n\nexport const Card = forwardRef<HTMLDivElement, CardProps>(function Card(\n  {\n    className,\n    interactive = false,\n    highlighted = false,\n    flush = false,\n    onPointerEnter,\n    onPointerLeave,\n    ...props\n  },\n  ref,\n) {\n  // Pointed at by a mouse or pen. Touch never lifts, so it is read from the pointer, not :hover (which a tap leaves stuck).\n  const [pointed, setPointed] = useState(false);\n  return (\n    <div\n      ref={ref}\n      {...props}\n      data-slot=\"card\"\n      data-interactive={interactive || undefined}\n      data-highlighted={highlighted || undefined}\n      data-flush={flush || undefined}\n      data-pointed={(interactive && pointed) || undefined}\n      onPointerEnter={(event) => {\n        onPointerEnter?.(event);\n        if (interactive && event.pointerType !== \"touch\") setPointed(true);\n      }}\n      onPointerLeave={(event) => {\n        onPointerLeave?.(event);\n        setPointed(false);\n      }}\n      className={cnAll(cardVariants({ flush, highlighted }), interactive && \"card-lift\", className)}\n    />\n  );\n});\n\n/** Title and description, stacked. */\nexport type CardHeaderProps = ComponentPropsWithoutRef<\"div\">;\n\nexport const CardHeader = forwardRef<HTMLDivElement, CardHeaderProps>(function CardHeader(\n  { className, ...props },\n  ref,\n) {\n  return (\n    <div\n      ref={ref}\n      {...props}\n      data-slot=\"card-header\"\n      className={cn(cardHeaderVariants(), className)}\n    />\n  );\n});\n\n/**\n * The card's heading.\n *\n * A REAL heading, unlike the legacy `<div class=\"font-semibold\">`. None of\n * the 19 legacy call sites wrapped one, so 19 card titles were invisible to\n * screen-reader heading navigation -- the same shape of finding as the Avatar\n * port's missing `alt`, and the migration is when it gets answered.\n */\nexport interface CardTitleProps extends ComponentPropsWithoutRef<\"h3\"> {\n  /**\n   * Heading level.\n   *\n   * `3` by default, because a card almost always sits under a section\n   * heading. It is a prop rather than a constant because the correct level\n   * is a fact about the PAGE, and a fixed one would be wrong somewhere; the\n   * level changes semantics only, never the rendered size.\n   *\n   * @default 3\n   */\n  level?: 1 | 2 | 3 | 4 | 5 | 6;\n}\n\nexport const CardTitle = forwardRef<HTMLHeadingElement, CardTitleProps>(function CardTitle(\n  { className, level = 3, ...props },\n  ref,\n) {\n  // Static union, not a template literal: `h${level}` is a string React\n  // accepts but TypeScript cannot narrow to an intrinsic element, and the\n  // cast that silences it would also accept `h7`.\n  const Heading = ({ 1: \"h1\", 2: \"h2\", 3: \"h3\", 4: \"h4\", 5: \"h5\", 6: \"h6\" } as const)[level];\n\n  return (\n    <Heading\n      ref={ref}\n      {...props}\n      data-slot=\"card-title\"\n      className={cn(cardTitleVariants(), className)}\n    />\n  );\n});\n\n/** Secondary text under the title. */\nexport type CardDescriptionProps = ComponentPropsWithoutRef<\"div\">;\n\nexport const CardDescription = forwardRef<HTMLDivElement, CardDescriptionProps>(\n  function CardDescription({ className, ...props }, ref) {\n    return (\n      <div\n        ref={ref}\n        {...props}\n        data-slot=\"card-description\"\n        className={cn(cardDescriptionVariants(), className)}\n      />\n    );\n  },\n);\n\n/** The card's body. */\nexport type CardContentProps = ComponentPropsWithoutRef<\"div\">;\n\nexport const CardContent = forwardRef<HTMLDivElement, CardContentProps>(function CardContent(\n  { className, ...props },\n  ref,\n) {\n  return (\n    <div\n      ref={ref}\n      {...props}\n      data-slot=\"card-content\"\n      className={cn(cardContentVariants(), className)}\n    />\n  );\n});\n\n/** Actions or metadata at the foot of the card. */\nexport type CardFooterProps = ComponentPropsWithoutRef<\"div\">;\n\nexport const CardFooter = forwardRef<HTMLDivElement, CardFooterProps>(function CardFooter(\n  { className, ...props },\n  ref,\n) {\n  return (\n    <div\n      ref={ref}\n      {...props}\n      data-slot=\"card-footer\"\n      className={cn(cardFooterVariants(), className)}\n    />\n  );\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmCA,MAAa,eAAe,IAC1B;CACE;CACA;CACA;CASA;AACF,GACA;CACE,UAAU;;;;;;;;;;;;;;;;;;;;;;;EAuBR,OAAO;GACL,OAAO;GACP,MAAM;EACR;;;;;;;EAOA,aAAa;GACX,OAAO;GACP,MAAM;EACR;CACF;CACA,kBAAkB,CAGhB;EAAE,OAAO;EAAM,aAAa;EAAM,OAAO;CAAyB,CACpE;CACA,iBAAiB;EAAE,OAAO;EAAO,aAAa;CAAM;AACtD,CACF;;;;;;;;AASA,MAAa,qBAAqB,IAAI,mDAAmD;AAEzF,MAAa,oBAAoB,IAAI,CAGnC,iEAGA,KACF,CAAC;AAED,MAAa,0BAA0B,IAAI,CACzC,0DACF,CAAC;AAED,MAAa,sBAAsB,IAAI,MAAM;AAE7C,MAAa,qBAAqB,IAAI,+CAA+C;AAyCrF,MAAa,OAAO,WAAsC,SAAS,KACjE,EACE,WACA,cAAc,OACd,cAAc,OACd,QAAQ,OACR,gBACA,gBACA,GAAG,SAEL,KACA;CAEA,MAAM,CAAC,SAAS,cAAc,SAAS,KAAK;CAC5C,OACE,oBAAC,OAAD;EACO;EACL,GAAI;EACJ,aAAU;EACV,oBAAkB,eAAe,KAAA;EACjC,oBAAkB,eAAe,KAAA;EACjC,cAAY,SAAS,KAAA;EACrB,gBAAe,eAAe,WAAY,KAAA;EAC1C,iBAAiB,UAAU;GACzB,iBAAiB,KAAK;GACtB,IAAI,eAAe,MAAM,gBAAgB,SAAS,WAAW,IAAI;EACnE;EACA,iBAAiB,UAAU;GACzB,iBAAiB,KAAK;GACtB,WAAW,KAAK;EAClB;EACA,WAAW,MAAM,aAAa;GAAE;GAAO;EAAY,CAAC,GAAG,eAAe,aAAa,SAAS;CAC7F,CAAA;AAEL,CAAC;AAKD,MAAa,aAAa,WAA4C,SAAS,WAC7E,EAAE,WAAW,GAAG,SAChB,KACA;CACA,OACE,oBAAC,OAAD;EACO;EACL,GAAI;EACJ,aAAU;EACV,WAAW,GAAG,mBAAmB,GAAG,SAAS;CAC9C,CAAA;AAEL,CAAC;AAwBD,MAAa,YAAY,WAA+C,SAAS,UAC/E,EAAE,WAAW,QAAQ,GAAG,GAAG,SAC3B,KACA;CAIA,MAAM,UAAW;EAAE,GAAG;EAAM,GAAG;EAAM,GAAG;EAAM,GAAG;EAAM,GAAG;EAAM,GAAG;CAAK,EAAY;CAEpF,OACE,oBAAC,SAAD;EACO;EACL,GAAI;EACJ,aAAU;EACV,WAAW,GAAG,kBAAkB,GAAG,SAAS;CAC7C,CAAA;AAEL,CAAC;AAKD,MAAa,kBAAkB,WAC7B,SAAS,gBAAgB,EAAE,WAAW,GAAG,SAAS,KAAK;CACrD,OACE,oBAAC,OAAD;EACO;EACL,GAAI;EACJ,aAAU;EACV,WAAW,GAAG,wBAAwB,GAAG,SAAS;CACnD,CAAA;AAEL,CACF;AAKA,MAAa,cAAc,WAA6C,SAAS,YAC/E,EAAE,WAAW,GAAG,SAChB,KACA;CACA,OACE,oBAAC,OAAD;EACO;EACL,GAAI;EACJ,aAAU;EACV,WAAW,GAAG,oBAAoB,GAAG,SAAS;CAC/C,CAAA;AAEL,CAAC;AAKD,MAAa,aAAa,WAA4C,SAAS,WAC7E,EAAE,WAAW,GAAG,SAChB,KACA;CACA,OACE,oBAAC,OAAD;EACO;EACL,GAAI;EACJ,aAAU;EACV,WAAW,GAAG,mBAAmB,GAAG,SAAS;CAC9C,CAAA;AAEL,CAAC"}

package/dist/checkbox/checkbox.d.ts

@@ -38,6 +38,7 @@ import { CheckboxProps } from "react-aria-components";
  */
 export declare const checkboxVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 export declare const checkboxBoxVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const checkboxCardVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 interface CheckboxProps$1 extends Omit<CheckboxProps, "className" | "style" | "children"> {
   /**
    * The label, and the control's accessible name.
@@ -47,7 +48,30 @@ interface CheckboxProps$1 extends Omit<CheckboxProps, "className" | "style" | "c
    * accessible name, which is what every legacy call site would have been.
    */
   children?: ReactNode;
-  /** Extra classes for the label. Merged last, so they win conflicts. */
+  /**
+   * `card` draws the option as a selectable card: a bordered surface that is
+   * all hit target, with a `description`, an `icon` and `media`, and the box at
+   * its end. Selected shows a `primary-strong` edge AND the tick, so it never
+   * rests on colour alone. Focus is the card's own border turning dark, with no
+   * ring. The default variant renders exactly as before.
+   *
+   * @default "default"
+   */
+  variant?: "default" | "card";
+  /**
+   * A line under the title, read as the option's description
+   * (`aria-describedby`), not part of its name. Card variant only.
+   */
+  description?: ReactNode;
+  /** A decorative icon before the title. Card variant only; hidden from assistive tech. */
+  icon?: ReactNode;
+  /**
+   * Content above the title, edge to edge in the card: a thumbnail, a preview.
+   * Card variant only. Give an `<img>` its own `alt`, or `alt=""` when the
+   * title says it all.
+   */
+  media?: ReactNode;
+  /** Extra classes for the label (the whole card in the card variant). Merged last, so they win conflicts. */
   className?: string;
 }
 declare const Checkbox$1: import("react").ForwardRefExoticComponent<CheckboxProps$1 & import("react").RefAttributes<HTMLInputElement>>;

package/dist/checkbox/checkbox.js

@@ -1,8 +1,8 @@
 "use client";
-import { cn } from "../lib/cn.js";
-import { selectionLabelVariants, selectionRingVariants } from "../lib/selection-control.js";
+import { cn, cnAll } from "../lib/cn.js";
+import { selectionCardVariants, selectionLabelVariants, selectionRingVariants } from "../lib/selection-control.js";
 import { cva } from "class-variance-authority";
-import { forwardRef } from "react";
+import { forwardRef, useId } from "react";
 import { Checkbox } from "react-aria-components";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/checkbox/checkbox.tsx
@@ -42,7 +42,8 @@ import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 * legacy pair that styled one surface twice and silently drifted.
 */
 const checkboxVariants = cva([selectionLabelVariants()]);
-const checkboxBoxVariants = cva([
+/** The square, shared by both variants. Only the default one rings the box itself: a card shows focus on its own border. */
+const checkboxBox = [
 	"inline-flex size-4.5 shrink-0 items-center justify-center",
 	"rounded-checkbox border-(length:--border-width)",
 	"box-border",
@@ -50,37 +51,111 @@ const checkboxBoxVariants = cva([
 	"checkbox-box",
 	"group-data-[selected]:border-primary-strong",
 	"group-data-[indeterminate]:border-primary-strong",
-	"group-data-[hovered]:not-group-data-[selected]:not-group-data-[indeterminate]:border-muted-foreground",
-	selectionRingVariants()
-]);
-const Checkbox$1 = forwardRef(function Checkbox$2({ className, children, ...props }, ref) {
+	"group-data-[hovered]:not-group-data-[selected]:not-group-data-[indeterminate]:border-muted-foreground"
+];
+const checkboxBoxVariants = cva([...checkboxBox, selectionRingVariants()]);
+/** A card's checkbox sits beside the title, aligned to its first line. */
+const checkboxCardBoxVariants = cva([...checkboxBox, "mt-0.5"]);
+const checkboxCardVariants = selectionCardVariants;
+/** The box's fill and mark. One mark, always rendered: the state decides what it shows. */
+function CheckboxMark({ isSelected, isIndeterminate }) {
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
+		"data-slot": "checkbox-fill",
+		className: "checkbox-fill"
+	}), /* @__PURE__ */ jsx("svg", {
+		"data-slot": "checkbox-mark",
+		"data-mark": isIndeterminate ? "indeterminate" : isSelected ? "check" : void 0,
+		viewBox: "0 0 18 18",
+		fill: "none",
+		className: "absolute -inset-px size-4.5 overflow-visible",
+		children: /* @__PURE__ */ jsx("path", {
+			className: "checkbox-mark",
+			pathLength: "1",
+			stroke: "currentColor",
+			strokeWidth: "2",
+			strokeLinecap: "round",
+			strokeLinejoin: "round"
+		})
+	})] });
+}
+const Checkbox$1 = forwardRef(function Checkbox(props, ref) {
+	return props.variant === "card" ? /* @__PURE__ */ jsx(CheckboxCard, {
+		...props,
+		ref
+	}) : /* @__PURE__ */ jsx(CheckboxDefault, {
+		...props,
+		ref
+	});
+});
+const CheckboxCard = forwardRef(function CheckboxCard({ className, children, description, icon, media, variant: _variant, ...props }, ref) {
+	const id = useId();
+	const titleId = `${id}-title`;
+	const descriptionId = `${id}-description`;
+	return /* @__PURE__ */ jsx(Checkbox, {
+		"aria-labelledby": children == null || props["aria-label"] != null ? void 0 : titleId,
+		"aria-describedby": description == null ? void 0 : descriptionId,
+		...props,
+		inputRef: ref,
+		"data-slot": "checkbox",
+		"data-variant": "card",
+		className: cn(cnAll(checkboxCardVariants(), media != null && "flex-col items-stretch"), className),
+		children: ({ isSelected, isIndeterminate }) => {
+			const row = /* @__PURE__ */ jsxs(Fragment$1, { children: [
+				icon == null ? null : /* @__PURE__ */ jsx("span", {
+					"aria-hidden": "true",
+					"data-slot": "checkbox-icon",
+					className: "mt-0.5 inline-flex shrink-0 text-text-secondary [&_svg]:size-4",
+					children: icon
+				}),
+				/* @__PURE__ */ jsxs("span", {
+					className: "flex min-w-0 flex-1 flex-col gap-1",
+					children: [children == null ? null : /* @__PURE__ */ jsx("span", {
+						id: titleId,
+						"data-slot": "checkbox-label",
+						className: "font-medium",
+						children
+					}), description == null ? null : /* @__PURE__ */ jsx("span", {
+						id: descriptionId,
+						"data-slot": "checkbox-description",
+						className: "text-text-secondary",
+						children: description
+					})]
+				}),
+				/* @__PURE__ */ jsx("span", {
+					"aria-hidden": "true",
+					"data-slot": "checkbox-box",
+					className: checkboxCardBoxVariants(),
+					children: /* @__PURE__ */ jsx(CheckboxMark, {
+						isSelected,
+						isIndeterminate
+					})
+				})
+			] });
+			return media == null ? row : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
+				"data-slot": "checkbox-media",
+				className: "block w-full min-w-0",
+				children: media
+			}), /* @__PURE__ */ jsx("span", {
+				className: "flex w-full items-start gap-3",
+				children: row
+			})] });
+		}
+	});
+});
+const CheckboxDefault = forwardRef(function CheckboxDefault({ className, children, variant: _variant, description: _description, icon: _icon, media: _media, ...props }, ref) {
 	return /* @__PURE__ */ jsx(Checkbox, {
 		...props,
 		inputRef: ref,
 		"data-slot": "checkbox",
 		className: cn(checkboxVariants(), className),
-		children: ({ isSelected, isIndeterminate }) => /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("span", {
+		children: ({ isSelected, isIndeterminate }) => /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
 			"aria-hidden": "true",
 			"data-slot": "checkbox-box",
 			className: checkboxBoxVariants(),
-			children: [/* @__PURE__ */ jsx("span", {
-				"data-slot": "checkbox-fill",
-				className: "checkbox-fill"
-			}), /* @__PURE__ */ jsx("svg", {
-				"data-slot": "checkbox-mark",
-				"data-mark": isIndeterminate ? "indeterminate" : isSelected ? "check" : void 0,
-				viewBox: "0 0 18 18",
-				fill: "none",
-				className: "absolute -inset-px size-4.5 overflow-visible",
-				children: /* @__PURE__ */ jsx("path", {
-					className: "checkbox-mark",
-					pathLength: "1",
-					stroke: "currentColor",
-					strokeWidth: "2",
-					strokeLinecap: "round",
-					strokeLinejoin: "round"
-				})
-			})]
+			children: /* @__PURE__ */ jsx(CheckboxMark, {
+				isSelected,
+				isIndeterminate
+			})
 		}), children == null ? null : /* @__PURE__ */ jsx("span", {
 			"data-slot": "checkbox-label",
 			children
@@ -88,6 +163,6 @@ const Checkbox$1 = forwardRef(function Checkbox$2({ className, children, ...prop
 	});
 });
 //#endregion
-export { Checkbox$1 as Checkbox, checkboxBoxVariants, checkboxVariants };
+export { Checkbox$1 as Checkbox, checkboxBoxVariants, checkboxCardVariants, checkboxVariants };
 
 //# sourceMappingURL=checkbox.js.map

package/dist/checkbox/checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.js","names":["Checkbox","AriaCheckbox"],"sources":["../../src/checkbox/checkbox.tsx"],"sourcesContent":["\"use client\";\n\nimport { cva } from \"class-variance-authority\";\nimport { forwardRef, type ReactNode } from \"react\";\nimport {\n  Checkbox as AriaCheckbox,\n  type CheckboxProps as AriaCheckboxProps,\n} from \"react-aria-components\";\n\nimport { cn } from \"../lib/cn.js\";\nimport { selectionLabelVariants, selectionRingVariants } from \"../lib/selection-control.js\";\n\n/**\n * Checkbox, rebuilt on React Aria.\n *\n * THE CENSUS FOUND ZERO CALL SITES. It is ported anyway because forms and\n * table row selection are unbuildable without it, but that fact changes what\n * this is: with no usage to be faithful to and no call site to break, it is a\n * rewrite rather than a restyling. Four things the legacy component got\n * wrong are therefore simply fixed rather than carried:\n *\n * - **No accessible name.** It rendered a bare `<input type=\"checkbox\">` with\n *   no label, no `aria-label` and no `id`, so every use was an axe `label`\n *   violation. Here the label is `children`, and React Aria wraps the input\n *   in it.\n * - **The fill never showed.** `checked:bg-primary` on a native input with no\n *   `appearance-none` is painted over by the user-agent checkbox.\n * - **`border-primary` cannot be a boundary.** Brand orange is 2.44:1 on\n *   white, under even the 3:1 non-text floor (WCAG 1.4.11).\n * - **`focus-visible:ring-2` is a box-shadow**, which forced-colors discards,\n *   taking the only focus indication with it.\n *\n * React Aria renders a `<label>` around a visually-hidden real `<input>` and\n * NOTHING else -- there is no visual box in the box. Drawing one, and keeping\n * it in step with `data-selected` / `data-indeterminate`, is what this\n * component owns.\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 */\n/**\n * The label geometry now lives in lib/selection-control.ts, shared with\n * Radio and Switch. Three controls with the same 24px target and the same\n * typography is the Rule of Three, and this migration has twice found a\n * legacy pair that styled one surface twice and silently drifted.\n */\nexport const checkboxVariants = cva([selectionLabelVariants()]);\n\nexport const checkboxBoxVariants = cva([\n  \"inline-flex size-4.5 shrink-0 items-center justify-center\",\n  \"rounded-checkbox border-(length:--border-width)\",\n\n  // box-border: the size is the whole square, border included.\n  \"box-border\",\n\n  \"bg-surface border-control-edge text-primary-foreground\",\n\n  // Border colour eases, the square presses to .95 and springs back (see checkbox-box).\n  \"checkbox-box\",\n\n  // The border takes the strong tone once chosen; the colour itself is the fill below.\n  \"group-data-[selected]:border-primary-strong\",\n  \"group-data-[indeterminate]:border-primary-strong\",\n  // Hover darkens an unchosen box's border.\n  \"group-data-[hovered]:not-group-data-[selected]:not-group-data-[indeterminate]:border-muted-foreground\",\n\n  selectionRingVariants(),\n]);\n\nexport interface CheckboxProps\n  extends Omit<AriaCheckboxProps, \"className\" | \"style\" | \"children\"> {\n  /**\n   * The label, and the control's accessible name.\n   *\n   * Omit it only for a genuinely label-less checkbox -- a table row selector\n   * -- and pass `aria-label` instead. A checkbox with neither has no\n   * accessible name, which is what every legacy call site would have been.\n   */\n  children?: ReactNode;\n  /** Extra classes for the label. Merged last, so they win conflicts. */\n  className?: string;\n}\n\nexport const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(function Checkbox(\n  { className, children, ...props },\n  ref,\n) {\n  return (\n    <AriaCheckbox\n      {...props}\n      // inputRef, not ref: AriaCheckbox's own ref targets the label it\n      // renders around a visually-hidden native input, and a label cannot\n      // be focused -- ref.current.focus() would silently no-op. inputRef is\n      // React Aria's own escape hatch to the real control.\n      inputRef={ref}\n      data-slot=\"checkbox\"\n      // `group` is load-bearing: React Aria puts data-selected,\n      // data-indeterminate and data-focus-visible on the LABEL, and CSS\n      // cannot look upward from the box to them.\n      className={cn(checkboxVariants(), className)}\n    >\n      {({ isSelected, isIndeterminate }) => (\n        <>\n          {/*\n            aria-hidden: the real <input> already carries the state. A\n            decorative box announced as well would say everything twice.\n          */}\n          <span aria-hidden=\"true\" data-slot=\"checkbox-box\" className={checkboxBoxVariants()}>\n            <span data-slot=\"checkbox-fill\" className=\"checkbox-fill\" />\n            {/*\n              One mark, always rendered: the state decides what it shows. Both\n              states can be true at once (a \"select all\" box that has been\n              partially cleared) and indeterminate wins, which the path's\n              `d` carries in CSS -- the same precedence the old two-glyph\n              branch pinned in JS.\n            */}\n            <svg\n              data-slot=\"checkbox-mark\"\n              data-mark={isIndeterminate ? \"indeterminate\" : isSelected ? \"check\" : undefined}\n              viewBox=\"0 0 18 18\"\n              fill=\"none\"\n              className=\"absolute -inset-px size-4.5 overflow-visible\"\n            >\n              <path\n                className=\"checkbox-mark\"\n                pathLength=\"1\"\n                stroke=\"currentColor\"\n                strokeWidth=\"2\"\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n              />\n            </svg>\n          </span>\n          {children == null ? null : <span data-slot=\"checkbox-label\">{children}</span>}\n        </>\n      )}\n    </AriaCheckbox>\n  );\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+CA,MAAa,mBAAmB,IAAI,CAAC,uBAAuB,CAAC,CAAC;AAE9D,MAAa,sBAAsB,IAAI;CACrC;CACA;CAGA;CAEA;CAGA;CAGA;CACA;CAEA;CAEA,sBAAsB;AACxB,CAAC;AAgBD,MAAaA,aAAW,WAA4C,SAASA,WAC3E,EAAE,WAAW,UAAU,GAAG,SAC1B,KACA;CACA,OACE,oBAACC,UAAD;EACE,GAAI;EAKJ,UAAU;EACV,aAAU;EAIV,WAAW,GAAG,iBAAiB,GAAG,SAAS;EAEzC,WAAA,EAAE,YAAY,sBACd,qBAAA,YAAA,EAAA,UAAA,CAKE,qBAAC,QAAD;GAAM,eAAY;GAAO,aAAU;GAAe,WAAW,oBAAoB;GAAjF,UAAA,CACE,oBAAC,QAAD;IAAM,aAAU;IAAgB,WAAU;GAAiB,CAAA,GAQ3D,oBAAC,OAAD;IACE,aAAU;IACV,aAAW,kBAAkB,kBAAkB,aAAa,UAAU,KAAA;IACtE,SAAQ;IACR,MAAK;IACL,WAAU;IAEV,UAAA,oBAAC,QAAD;KACE,WAAU;KACV,YAAW;KACX,QAAO;KACP,aAAY;KACZ,eAAc;KACd,gBAAe;IAChB,CAAA;GACE,CAAA,CACD;EACL,CAAA,GAAA,YAAY,OAAO,OAAO,oBAAC,QAAD;GAAM,aAAU;GAAkB;EAAe,CAAA,CAC5E,EAAA,CAAA;CAEQ,CAAA;AAElB,CAAC"}
+{"version":3,"file":"checkbox.js","names":["Checkbox","AriaCheckbox"],"sources":["../../src/checkbox/checkbox.tsx"],"sourcesContent":["\"use client\";\n\nimport { cva } from \"class-variance-authority\";\nimport { forwardRef, useId, type ReactNode } from \"react\";\nimport {\n  Checkbox as AriaCheckbox,\n  type CheckboxProps as AriaCheckboxProps,\n} from \"react-aria-components\";\n\nimport { cn, cnAll } from \"../lib/cn.js\";\nimport {\n  selectionCardVariants,\n  selectionLabelVariants,\n  selectionRingVariants,\n} from \"../lib/selection-control.js\";\n\n/**\n * Checkbox, rebuilt on React Aria.\n *\n * THE CENSUS FOUND ZERO CALL SITES. It is ported anyway because forms and\n * table row selection are unbuildable without it, but that fact changes what\n * this is: with no usage to be faithful to and no call site to break, it is a\n * rewrite rather than a restyling. Four things the legacy component got\n * wrong are therefore simply fixed rather than carried:\n *\n * - **No accessible name.** It rendered a bare `<input type=\"checkbox\">` with\n *   no label, no `aria-label` and no `id`, so every use was an axe `label`\n *   violation. Here the label is `children`, and React Aria wraps the input\n *   in it.\n * - **The fill never showed.** `checked:bg-primary` on a native input with no\n *   `appearance-none` is painted over by the user-agent checkbox.\n * - **`border-primary` cannot be a boundary.** Brand orange is 2.44:1 on\n *   white, under even the 3:1 non-text floor (WCAG 1.4.11).\n * - **`focus-visible:ring-2` is a box-shadow**, which forced-colors discards,\n *   taking the only focus indication with it.\n *\n * React Aria renders a `<label>` around a visually-hidden real `<input>` and\n * NOTHING else -- there is no visual box in the box. Drawing one, and keeping\n * it in step with `data-selected` / `data-indeterminate`, is what this\n * component owns.\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 */\n/**\n * The label geometry now lives in lib/selection-control.ts, shared with\n * Radio and Switch. Three controls with the same 24px target and the same\n * typography is the Rule of Three, and this migration has twice found a\n * legacy pair that styled one surface twice and silently drifted.\n */\nexport const checkboxVariants = cva([selectionLabelVariants()]);\n\n/** The square, shared by both variants. Only the default one rings the box itself: a card shows focus on its own border. */\nconst checkboxBox = [\n  \"inline-flex size-4.5 shrink-0 items-center justify-center\",\n  \"rounded-checkbox border-(length:--border-width)\",\n\n  // box-border: the size is the whole square, border included.\n  \"box-border\",\n\n  \"bg-surface border-control-edge text-primary-foreground\",\n\n  // Border colour eases, the square presses to .95 and springs back (see checkbox-box).\n  \"checkbox-box\",\n\n  // The border takes the strong tone once chosen; the colour itself is the fill below.\n  \"group-data-[selected]:border-primary-strong\",\n  \"group-data-[indeterminate]:border-primary-strong\",\n  // Hover darkens an unchosen box's border.\n  \"group-data-[hovered]:not-group-data-[selected]:not-group-data-[indeterminate]:border-muted-foreground\",\n];\n\nexport const checkboxBoxVariants = cva([...checkboxBox, selectionRingVariants()]);\n\n/** A card's checkbox sits beside the title, aligned to its first line. */\nconst checkboxCardBoxVariants = cva([...checkboxBox, \"mt-0.5\"]);\n\nexport const checkboxCardVariants = selectionCardVariants;\n\nexport interface CheckboxProps\n  extends Omit<AriaCheckboxProps, \"className\" | \"style\" | \"children\"> {\n  /**\n   * The label, and the control's accessible name.\n   *\n   * Omit it only for a genuinely label-less checkbox -- a table row selector\n   * -- and pass `aria-label` instead. A checkbox with neither has no\n   * accessible name, which is what every legacy call site would have been.\n   */\n  children?: ReactNode;\n  /**\n   * `card` draws the option as a selectable card: a bordered surface that is\n   * all hit target, with a `description`, an `icon` and `media`, and the box at\n   * its end. Selected shows a `primary-strong` edge AND the tick, so it never\n   * rests on colour alone. Focus is the card's own border turning dark, with no\n   * ring. The default variant renders exactly as before.\n   *\n   * @default \"default\"\n   */\n  variant?: \"default\" | \"card\";\n  /**\n   * A line under the title, read as the option's description\n   * (`aria-describedby`), not part of its name. Card variant only.\n   */\n  description?: ReactNode;\n  /** A decorative icon before the title. Card variant only; hidden from assistive tech. */\n  icon?: ReactNode;\n  /**\n   * Content above the title, edge to edge in the card: a thumbnail, a preview.\n   * Card variant only. Give an `<img>` its own `alt`, or `alt=\"\"` when the\n   * title says it all.\n   */\n  media?: ReactNode;\n  /** Extra classes for the label (the whole card in the card variant). Merged last, so they win conflicts. */\n  className?: string;\n}\n\n/** The box's fill and mark. One mark, always rendered: the state decides what it shows. */\nfunction CheckboxMark({ isSelected, isIndeterminate }: { isSelected: boolean; isIndeterminate: boolean }) {\n  return (\n    <>\n      <span data-slot=\"checkbox-fill\" className=\"checkbox-fill\" />\n      {/*\n        Both states can be true at once (a \"select all\" box that has been\n        partially cleared) and indeterminate wins, which the path's `d` carries\n        in CSS -- the same precedence the old two-glyph branch pinned in JS.\n      */}\n      <svg\n        data-slot=\"checkbox-mark\"\n        data-mark={isIndeterminate ? \"indeterminate\" : isSelected ? \"check\" : undefined}\n        viewBox=\"0 0 18 18\"\n        fill=\"none\"\n        className=\"absolute -inset-px size-4.5 overflow-visible\"\n      >\n        <path\n          className=\"checkbox-mark\"\n          pathLength=\"1\"\n          stroke=\"currentColor\"\n          strokeWidth=\"2\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n        />\n      </svg>\n    </>\n  );\n}\n\nexport const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(function Checkbox(props, ref) {\n  return props.variant === \"card\" ? <CheckboxCard {...props} ref={ref} /> : <CheckboxDefault {...props} ref={ref} />;\n});\n\nconst CheckboxCard = forwardRef<HTMLInputElement, CheckboxProps>(function CheckboxCard(\n  { className, children, description, icon, media, variant: _variant, ...props },\n  ref,\n) {\n  const id = useId();\n  const titleId = `${id}-title`;\n  const descriptionId = `${id}-description`;\n  return (\n    <AriaCheckbox\n      // The title alone names the option; the description describes it. Left to\n      // the wrapping <label>, the name would be title and description run\n      // together. A caller's own labelling wins, as on Radio.\n      aria-labelledby={children == null || props[\"aria-label\"] != null ? undefined : titleId}\n      aria-describedby={description == null ? undefined : descriptionId}\n      {...props}\n      inputRef={ref}\n      data-slot=\"checkbox\"\n      data-variant=\"card\"\n      className={cn(cnAll(checkboxCardVariants(), media != null && \"flex-col items-stretch\"), className)}\n    >\n      {({ isSelected, isIndeterminate }) => {\n        const row = (\n          <>\n            {icon == null ? null : (\n              <span\n                aria-hidden=\"true\"\n                data-slot=\"checkbox-icon\"\n                className=\"mt-0.5 inline-flex shrink-0 text-text-secondary [&_svg]:size-4\"\n              >\n                {icon}\n              </span>\n            )}\n            <span className=\"flex min-w-0 flex-1 flex-col gap-1\">\n              {children == null ? null : (\n                <span id={titleId} data-slot=\"checkbox-label\" className=\"font-medium\">\n                  {children}\n                </span>\n              )}\n              {description == null ? null : (\n                <span id={descriptionId} data-slot=\"checkbox-description\" className=\"text-text-secondary\">\n                  {description}\n                </span>\n              )}\n            </span>\n            <span aria-hidden=\"true\" data-slot=\"checkbox-box\" className={checkboxCardBoxVariants()}>\n              <CheckboxMark isSelected={isSelected} isIndeterminate={isIndeterminate} />\n            </span>\n          </>\n        );\n        return media == null ? (\n          row\n        ) : (\n          <>\n            <span data-slot=\"checkbox-media\" className=\"block w-full min-w-0\">\n              {media}\n            </span>\n            <span className=\"flex w-full items-start gap-3\">{row}</span>\n          </>\n        );\n      }}\n    </AriaCheckbox>\n  );\n});\n\nconst CheckboxDefault = forwardRef<HTMLInputElement, CheckboxProps>(function CheckboxDefault(\n  // description, icon and media belong to the card; pulled out so they never reach the DOM.\n  { className, children, variant: _variant, description: _description, icon: _icon, media: _media, ...props },\n  ref,\n) {\n  return (\n    <AriaCheckbox\n      {...props}\n      // inputRef, not ref: AriaCheckbox's own ref targets the label it\n      // renders around a visually-hidden native input, and a label cannot\n      // be focused -- ref.current.focus() would silently no-op. inputRef is\n      // React Aria's own escape hatch to the real control.\n      inputRef={ref}\n      data-slot=\"checkbox\"\n      // `group` is load-bearing: React Aria puts data-selected,\n      // data-indeterminate and data-focus-visible on the LABEL, and CSS\n      // cannot look upward from the box to them.\n      className={cn(checkboxVariants(), className)}\n    >\n      {({ isSelected, isIndeterminate }) => (\n        <>\n          {/*\n            aria-hidden: the real <input> already carries the state. A\n            decorative box announced as well would say everything twice.\n          */}\n          <span aria-hidden=\"true\" data-slot=\"checkbox-box\" className={checkboxBoxVariants()}>\n            <CheckboxMark isSelected={isSelected} isIndeterminate={isIndeterminate} />\n          </span>\n          {children == null ? null : <span data-slot=\"checkbox-label\">{children}</span>}\n        </>\n      )}\n    </AriaCheckbox>\n  );\n});\n"],"mappings":"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"}

package/dist/checkbox/index.d.ts

@@ -1,2 +1,2 @@
-import { Checkbox, CheckboxProps, checkboxBoxVariants, checkboxVariants } from "./checkbox.js";
-export { Checkbox, type CheckboxProps, checkboxBoxVariants, checkboxVariants };
+import { Checkbox, CheckboxProps, checkboxBoxVariants, checkboxCardVariants, checkboxVariants } from "./checkbox.js";
+export { Checkbox, type CheckboxProps, checkboxBoxVariants, checkboxCardVariants, checkboxVariants };

package/dist/checkbox/index.js

@@ -1,2 +1,2 @@
-import { Checkbox, checkboxBoxVariants, checkboxVariants } from "./checkbox.js";
-export { Checkbox, checkboxBoxVariants, checkboxVariants };
+import { Checkbox, checkboxBoxVariants, checkboxCardVariants, checkboxVariants } from "./checkbox.js";
+export { Checkbox, checkboxBoxVariants, checkboxCardVariants, checkboxVariants };

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

@@ -14,7 +14,18 @@
 export interface ChipOption {
   value: string;
   label: string;
+  /**
+   * Extra `data-*` attributes for this chip's button, such as
+   * `{ "data-testid": "goal-market-IN" }`, so tests and analytics can address
+   * one chip. They never override the group's own `data-chip`, `data-slot`,
+   * `data-flip`, `data-more` or `data-selected`; those keys are dropped.
+   */
+  attrs?: ChipAttrs;
 }
+/** `data-*` attributes passed through to one chip's button. */
+export type ChipAttrs = {
+  [key: `data-${string}`]: string | undefined;
+};
 export interface ChipGroupProps {
   options: ChipOption[];
   value: string[];