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:T1785,"use client"; import * as React from "react"; import { Slot } from "radix-ui"; import { cva, type VariantProps } from "class-variance-authority"; import { cuePing } from "@/lib/motion"; import { cn } from "@/lib/utils"; /** * The fill lives on a `::before` surface layer: it compresses slightly on press while the label stays put and * sharp, so the press reads as physical without the text wobbling. Every color comes from theme tokens. */ const buttonVariants = cva( [ "group/button relative isolate inline-flex shrink-0 items-center justify-center gap-1.5 overflow-hidden rounded-lg text-sm font-medium whitespace-nowrap select-none outline-none", "transition-[color,box-shadow] duration-150 ease-cue focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-busy:cursor-progress aria-invalid:ring-3 aria-invalid:ring-destructive/25", "before:pointer-events-none before:absolute before:inset-0 before:-z-10 before:rounded-[inherit] before:transition-[scale,background-color,box-shadow] before:duration-200 before:ease-cue", "active:not-aria-[haspopup]:before:scale-[0.97] motion-reduce:before:transition-none motion-reduce:active:before:scale-100", "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", "[&_[data-slot=kbd]]:border-current/15 [&_[data-slot=kbd]]:bg-current/8 [&_[data-slot=kbd]]:text-current/70 [&_[data-slot=kbd]]:shadow-none", ], { variants: { variant: { primary: "text-primary-foreground before:bg-primary before:shadow-[inset_0_1px_0_var(--cl-highlight),0_0_0_1px_color-mix(in_oklch,var(--primary),var(--foreground)_12%),0_1px_2px_var(--cl-shade)] hover:before:bg-[color-mix(in_oklch,var(--primary),var(--background)_12%)]", secondary: "text-secondary-foreground before:bg-secondary hover:before:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_6%)] aria-expanded:before:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_6%)]", outline: "text-foreground before:bg-background before:shadow-[0_0_0_1px_var(--input),0_1px_2px_var(--cl-shade)] hover:before:bg-muted aria-expanded:before:bg-muted dark:before:bg-input/30 dark:hover:before:bg-input/50", ghost: "text-foreground hover:before:bg-foreground/6 aria-expanded:before:bg-foreground/6 active:before:bg-foreground/10", destructive: "text-white before:bg-destructive before:shadow-[inset_0_1px_0_rgb(255_255_255/0.16),0_1px_2px_var(--cl-shade)] hover:before:bg-[color-mix(in_oklch,var(--destructive),black_8%)] focus-visible:ring-destructive/40 dark:before:bg-destructive/80", link: "text-foreground underline decoration-border underline-offset-4 hover:decoration-foreground", }, size: { xs: "h-ctl-xs gap-1 rounded-md px-2 text-xs [&_svg:not([class*='size-'])]:size-3.5", sm: "h-ctl-sm gap-1 rounded-md px-2.5 text-[0.8125rem] [&_svg:not([class*='size-'])]:size-3.5", md: "h-ctl-md px-3", lg: "h-ctl-lg gap-2 px-4", icon: "size-ctl-md", "icon-sm": "size-ctl-sm rounded-md", "icon-lg": "size-ctl-lg", }, pill: { true: "rounded-full", }, }, compoundVariants: [ { variant: "link", className: "h-auto px-0" }, { pill: true, size: "md", className: "px-4" }, { pill: true, size: "lg", className: "px-5" }, ], defaultVariants: { variant: "primary", size: "md" }, }, ); type ButtonProps = React.ComponentProps<"button"> & VariantProps & { /** Render the child element (e.g. a link) with button styles instead of a ` ); } function Spinner({ className }: { className?: string }) { return ( ); } export { Button, buttonVariants }; export type { ButtonProps }; 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","class-variance-authority",{"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"}]]}]}],["$","li","radix-ui",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/radix-ui","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":"radix-ui"}]]}]}]]}],["$","$L50",null,{"namespace":"@cuelark","registryDependencies":["utils","https://ui.cuelark.com/r/theme.json","https://ui.cuelark.com/r/motion.json"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"src/registry/cuelark/ui/button.tsx","content":"$52","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]