{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "button", "type": "registry:ui", "title": "Button", "files": [ { "path": "ui/button.tsrx", "type": "registry:ui", "target": "components/ui/button.tsrx", "content": "// Base UI base button — runs on the @octanejs/base-ui `Button` primitive.\n//\n// TWO THINGS HERE ARE RECORDED FACTS, not guesses, both from the React Aria base's own\n// provenance note:\n// 1. Upstream's bases SHARE button's cva strings exactly, so the class strings below are the\n// package's shipped utilities-inlined flavor and match the other bases.\n// 2. The Base UI base OMITS the `data-variant`/`data-size` attributes the aria base sets. They\n// are deliberately absent rather than forgotten — no selector in these strings keys off\n// them, so nothing styles differently for their absence.\n//\n// NO LinkButton. The aria base has one because RAC ships a `Link` primitive slotted as a button;\n// Base UI has no such primitive, and upstream's Base UI base composes links through the `render`\n// prop instead. Inventing one here would be an API this base does not have — `pagination`, which\n// consumes it in the aria base, therefore stays unported until the upstream source says how.\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { Button as ButtonPrimitive } from '@octanejs/base-ui/button';\n\nimport { cn } from '@/lib/utils';\n\nexport const buttonVariants = cva(\n\t'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',\n\t{\n\t\tvariants: {\n\t\t\tvariant: {\n\t\t\t\tdefault: 'bg-primary text-primary-foreground hover:bg-primary/80',\n\t\t\t\toutline: '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',\n\t\t\t\tsecondary: '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',\n\t\t\t\tghost: 'hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50',\n\t\t\t\tdestructive: 'bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40',\n\t\t\t\tlink: 'text-primary underline-offset-4 hover:underline',\n\t\t\t},\n\t\t\tsize: {\n\t\t\t\tdefault: 'h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2',\n\t\t\t\txs: 'h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*=\\'size-\\'])]:size-3',\n\t\t\t\tsm: 'h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*=\\'size-\\'])]:size-3.5',\n\t\t\t\tlg: 'h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2',\n\t\t\t\ticon: 'size-8',\n\t\t\t\t'icon-xs': 'size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*=\\'size-\\'])]:size-3',\n\t\t\t\t'icon-sm': 'size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg',\n\t\t\t\t'icon-lg': 'size-9',\n\t\t\t},\n\t\t},\n\t\tdefaultVariants: {\n\t\t\tvariant: 'default',\n\t\t\tsize: 'default',\n\t\t},\n\t},\n);\n\ntype ButtonVariants = VariantProps;\n\nexport interface ButtonProps extends Record {\n\tvariant?: ButtonVariants['variant'];\n\tsize?: ButtonVariants['size'];\n\tclassName?: string;\n}\n\nexport function Button({\n\tclassName,\n\tvariant = 'default',\n\tsize = 'default',\n\t...props\n}: ButtonProps) @{\n\t\n}\n" } ], "dependencies": [ "@octanejs/base-ui@0.1.33", "class-variance-authority" ], "registryDependencies": [ "@octane/utils" ] }