50:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 51:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 52:T1189,/** * Button — Facade styling over Base UI's `Button`. * * Not marked `"use client"`, and deliberately so: Base UI's own modules carry the * directive, so this wrapper stays a server component and a hero rendered on the * server ships no extra client boundary of its own. * * `render` is Base UI's composition escape hatch (the equivalent of Radix's * `asChild`). Use it to turn the button into a *non-button* control that should * still behave like one, and pass `nativeButton={false}` so Base UI supplies the * `role="button"`, `tabindex` and Space/Enter handling that element lacks: * * * * Do not use `render` for links. Two things go wrong, both verified against * Base UI 1.0.0-rc.0 in `button.test.tsx`: * * - with `nativeButton` left at its default, the anchor is emitted with * `type="button"` and, when disabled, a `disabled` attribute — neither is * valid on ``, and `disabled` does not actually prevent navigation; * - with `nativeButton={false}`, the anchor gets `role="button"`, so a control * that navigates is announced as one that acts. * * Style the link directly instead — that is what `buttonVariants` is for, and * what `CtaGroup` does: * * … * * a11y: every size is at least 44x44 CSS px (WCAG 2.5.5), the focus ring is * always visible, and `loading` sets `aria-busy` while keeping the label in the * accessible name so it never changes mid-interaction. * * Dependencies: @base-ui-components/react, class-variance-authority, * lucide-react, react, @/lib/utils. */ import { Button as BaseButton, type ButtonProps as BaseButtonProps, } from "@base-ui-components/react/button" import { cva, type VariantProps } from "class-variance-authority" import { Loader2Icon } from "lucide-react" import { cn } from "@/lib/utils" export const buttonVariants = cva( [ "inline-flex shrink-0 items-center justify-center gap-2 whitespace-nowrap", "rounded-md font-medium", "duration-facade-fast ease-facade-out transition-[color,background-color,border-color,box-shadow,opacity]", "focus-visible:ring-ring focus-visible:ring-offset-background outline-none focus-visible:ring-2 focus-visible:ring-offset-2", "disabled:pointer-events-none disabled:opacity-50", "aria-disabled:pointer-events-none aria-disabled:opacity-50", "[&_svg:not([class*='size-'])]:size-5 [&_svg]:pointer-events-none [&_svg]:shrink-0", ], { variants: { variant: { primary: "bg-primary text-primary-foreground hover:bg-primary/90", secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80", outline: "border-border bg-background text-foreground hover:bg-accent hover:text-accent-foreground border", ghost: "text-foreground hover:bg-accent hover:text-accent-foreground", link: "text-foreground hover:text-foreground/80 underline underline-offset-4", destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90", }, size: { /** 44px — the WCAG 2.5.5 target minimum, and the floor for every control. */ sm: "h-11 px-4 text-sm", md: "h-12 px-5 text-base", lg: "h-14 px-7 text-base sm:text-lg", icon: "size-11 p-0", }, fullWidth: { true: "w-full", false: "" }, }, defaultVariants: { variant: "primary", size: "md", fullWidth: false }, }, ) export type ButtonVariantProps = VariantProps export type ButtonProps = BaseButtonProps & ButtonVariantProps & { /** Shows a spinner, sets `aria-busy`, and stops the button from being activated. */ loading?: boolean /** Status text for screen readers, announced with the spinner. */ loadingLabel?: string } export function Button({ variant, size, fullWidth, loading = false, loadingLabel = "Loading", className, disabled, children, ...props }: ButtonProps) { return ( {loading ? ( <> {loadingLabel} ) : null} {children} ) } 4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","@base-ui-components/react@1.0.0-rc.0",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40base-ui-components%2Freact","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@base-ui-components/react@1.0.0-rc.0"}]]}]}],["$","li","class-variance-authority@^0.7.1",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/class-variance-authority","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"class-variance-authority@^0.7.1"}]]}]}],["$","li","lucide-react@^1.47.0",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react@^1.47.0"}]]}]}]]}],["$","$L50",null,{"namespace":"@facade","registryDependencies":["https://facadeui.dev/r/utils.json"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"src/ui/button.tsx","content":"$52","type":"registry:ui","target":"components/ui/button.tsx"}],"className":"h-[70svh] min-h-80"}]]}]