Button

1// Base UI base button — runs on the @octanejs/base-ui `Button` primitive.
2//
3// TWO THINGS HERE ARE RECORDED FACTS, not guesses, both from the React Aria base's own
4// provenance note:
5//   1. Upstream's bases SHARE button's cva strings exactly, so the class strings below are the
6//      package's shipped utilities-inlined flavor and match the other bases.
7//   2. The Base UI base OMITS the `data-variant`/`data-size` attributes the aria base sets. They
8//      are deliberately absent rather than forgotten — no selector in these strings keys off
9//      them, so nothing styles differently for their absence.
10//
11// NO LinkButton. The aria base has one because RAC ships a `Link` primitive slotted as a button;
12// Base UI has no such primitive, and upstream's Base UI base composes links through the `render`
13// prop instead. Inventing one here would be an API this base does not have — `pagination`, which
14// consumes it in the aria base, therefore stays unported until the upstream source says how.
15import { cva, type VariantProps } from 'class-variance-authority';
16import { Button as ButtonPrimitive } from '@octanejs/base-ui/button';
17 
18import { cn } from '@/lib/utils';
19 
20export const buttonVariants = cva(
21	'group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
22	{
23		variants: {
24			variant: {
25				default: 'bg-primary text-primary-foreground hover:bg-primary/80',
26				outline: 'border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50',
27				secondary: 'bg-secondary text-secondary-foreground hover:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)] aria-expanded:bg-secondary aria-expanded:text-secondary-foreground',
28				ghost: 'hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50',
29// … truncated