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[544296,["/_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"],"ItemStyles"] 52:I[34002,["/_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"],"CodeEditor"] 53: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"] 54:T5377,"use client"; import { cloneElement, forwardRef, isValidElement, type ButtonHTMLAttributes, type ReactElement, type ReactNode, } from "react"; import { Button as ButtonPrimitive } from "@base-ui/react/button"; import { cva, type VariantProps } from "class-variance-authority"; import type { IconComponent } from "@/lib/icon-context"; import { cn } from "@/lib/utils"; // The size ladder shared by every control — sm 32px, default 36px, lg 40px, // shadcn's heights — rides `--control-*` custom properties instead of literal // classes, so one set of classes serves every scope. `:root` carries the // values; `[data-size="compact"]` shifts the ladder down a step, either from an // ancestor (e.g. a docs-only SizeProvider) or from this component's own root // (see `resolvedSize` below), so a button resolves the right size whether it's // driven by an explicit prop or by whatever scope it's rendered in — with no // context import required. `compact` is sm inside that scope: still 28px. const controlSize = (h: string, px: string, text = "text-[length:var(--control-text,13px)]") => `${h} ${px} ${text} gap-[var(--control-gap,6px)]`; const iconOnlySize = (box: string, glyph = "[&_svg]:size-[var(--control-icon-glyph,16px)]") => `${box} p-0 ${glyph}`; const buttonVariants = cva( [ "group relative isolate inline-flex items-center justify-center outline-none cursor-pointer font-medium", "rounded-[var(--radius-button,var(--radius,0.5rem))]", // The colour still lands in 80ms; the press dips the whole button — label, // icon and ground together — on the moderate tier and releases a tier // quicker, the same shape as Image's press. 0.96, never less: below that // a control this small reads as flinching. "transition-[color,scale] [transition-duration:80ms,var(--motion-moderate-exit)] ease-spring", "active:scale-[0.96] active:[transition-duration:80ms,var(--motion-moderate)]", // Without its own layer the label is re-rasterised on the main thread at // every intermediate scale and snapped to the pixel grid each frame, so // the text judders through the dip. A compositor layer scales the cached // raster instead and re-rasters once it settles. Only `transform` — the // one thing the press animates. "will-change-transform", // A real cursor, not `pointer-events-none`: an element with no pointer // events can't show one. The hover effects below guard on `enabled` // themselves, which is the work pointer-events used to do. "disabled:opacity-50 disabled:cursor-not-allowed", "focus-visible:ring-1 focus-visible:ring-[color:var(--focus-ring,#6B97FF)]", ], { variants: { variant: { primary: "text-background", secondary: "text-foreground", tertiary: "text-foreground", ghost: "text-muted-foreground enabled:hover:text-foreground", }, size: { sm: controlSize("h-[var(--control-h-sm,32px)]", "px-[var(--control-px-sm,12px)]"), default: controlSize("h-[var(--control-h,36px)]", "px-[var(--control-px,16px)]"), lg: controlSize("h-[var(--control-h-lg,40px)]", "px-[var(--control-px-lg,24px)]"), // The one step past shadcn's ladder. Its label leaves the shared 13px // control step, as Tabs' lg does, and its glyph grows with the box. xl: controlSize( "h-[var(--control-h-xl,48px)]", "px-[var(--control-px-xl,32px)]", "text-[length:var(--fs-subtitle,15px)]" ), "icon-sm": iconOnlySize("size-[var(--control-icon-box-sm,32px)]"), icon: iconOnlySize("size-[var(--control-icon-box,36px)]"), "icon-lg": iconOnlySize("size-[var(--control-icon-box-lg,40px)]"), "icon-xl": iconOnlySize( "size-[var(--control-icon-box-xl,48px)]", "[&_svg]:size-[var(--control-icon-glyph-xl,20px)]" ), }, iconLeft: { true: "" }, iconRight: { true: "" }, }, compoundVariants: [ { iconLeft: true, className: "pl-[var(--control-icon-pad,10px)]" }, { iconRight: true, className: "pr-[var(--control-icon-pad,10px)]" }, ], defaultVariants: { variant: "primary", size: "default", }, } ); type ButtonSizeCanonical = | "sm" | "default" | "lg" | "xl" | "icon-sm" | "icon" | "icon-lg" | "icon-xl"; /** Public size values: the canonical ladder plus `compact`/`icon-compact` for * the dense 28px control, and `md`, kept so existing call sites compile. */ type ButtonSize = ButtonSizeCanonical | "compact" | "icon-compact" | "md"; /** `compact` is `sm` rendered inside the compact scope — the ladder shifted * down a step lands it back on 28px, the height it has always had. */ const sizeAliases: Partial> = { compact: "sm", "icon-compact": "icon-sm", md: "default", }; /** The spinner tracks the button's own box, so it stays proportionate on every * step rather than reading the default one's height at all three. */ const spinnerBox: Record = { sm: "size-[var(--control-h-sm,32px)]", default: "size-[var(--control-h,36px)]", lg: "size-[var(--control-h-lg,40px)]", xl: "size-[var(--control-h-xl,48px)]", "icon-sm": "size-[var(--control-icon-box-sm,32px)]", icon: "size-[var(--control-icon-box,36px)]", "icon-lg": "size-[var(--control-icon-box-lg,40px)]", "icon-xl": "size-[var(--control-icon-box-xl,48px)]", }; interface ButtonProps extends ButtonHTMLAttributes, Omit, "size"> { /** sm 32px, default 36px, lg 40px, xl 48px, and the `icon-*` squares to match. * Omitted, the button follows the ambient `data-size` scope, where compact * shifts the ladder down a step — see the `--control-*` tokens in * globals.css. `compact`/`icon-compact` are the dense 28px control. */ size?: ButtonSize; /** When true, the given single React-element child becomes the rendered element (slot-style). */ asChild?: boolean; loading?: boolean; leadingIcon?: IconComponent; trailingIcon?: IconComponent; /** Force the visual pressed/held state. Useful when the button drives an * external open piece of UI (a popover, dropdown, etc.) so it reads as * engaged while the menu is showing. */ active?: boolean; } /* Press effect: the surface layer sits 1px inside the button and a same-color box-shadow spread fills it back out to the full bounds. Pressing collapses the spread, shrinking the surface by exactly 1px per side at any width. The root's 0.96 press scale rides on top of this: the 1px collapse is the ground's own geometry and stays uniform at any width, while the scale carries the label and icon along, which the collapse alone never did. On a very wide button the scale reads more sideways than down (2% of 400px is 8px against under 1px), which is the trade the tactile press was chosen over. Fill colors are opaque color-mix()es rather than alpha so the fill and its spread ring never seam. This layer holds only the RESTING ground and that press geometry; every hover and press *color* lives on the wash layer below, so the two can't both paint a translucent fill and double its alpha. */ const bgVariants: Record = { primary: "[--btn-bg:var(--foreground)] bg-[var(--btn-bg)] shadow-[0_0_0_1px_var(--btn-bg)] group-active:shadow-[0_0_0_0px_var(--btn-bg)]", secondary: "[--btn-bg:var(--accent)] bg-[var(--btn-bg)] shadow-[0_0_0_1px_var(--btn-bg)] group-active:shadow-[0_0_0_0px_var(--btn-bg)]", // The border ring is an outer 1px shadow at rest that hands off to an // inset 1px shadow when pressed, so the ring moves inward with the // surface. tertiary: "bg-transparent shadow-[0_0_0_1px_var(--border),inset_0_0_0_0px_var(--border)] group-active:shadow-[0_0_0_0px_var(--border),inset_0_0_0_1px_var(--border)]", ghost: "bg-transparent", }; /* Hover ground. A second layer over the resting one, carrying every hover and press fill, which BLOOMS out of the button's centre (75% → full) instead of cross-fading in place. It repeats the base layer's geometry — `inset-px` plus a same-color 1px spread — so the ground reaches the button's real bounds and collapses with it under a press, rather than leaving a hairline of the resting color ringing a hovered face. Translucent fill + same-color spread never double up: outer shadows render only outside the surface box. The color is one custom property per variant rather than two sets of classes, so the layer itself is written once. */ const washVariants: Record = { primary: "[--btn-wash:color-mix(in_oklab,var(--foreground)_90%,var(--background))] group-active:[--btn-wash:color-mix(in_oklab,var(--foreground)_80%,var(--background))]", secondary: "[--btn-wash:color-mix(in_oklab,var(--accent)_80%,var(--background))] group-active:[--btn-wash:var(--accent)]", tertiary: "[--btn-wash:var(--hover)] group-active:[--btn-wash:var(--active)]", // Ghost has no resting ground, so the wash IS the button while hovered and // a quicker exit reads as it blinking out. It leaves on the tier it arrived // on instead; `cn` drops the quicker exit duration the layer sets by default. ghost: "[--btn-wash:var(--hover)] group-active:[--btn-wash:var(--active)] duration-(--motion-moderate)", }; /* Forced-active (`active` prop): pressed colors at full size; the geometric press-collapse still reacts on top. */ const activeBgVariants: Record = { primary: "[--btn-bg:color-mix(in_oklab,var(--foreground)_80%,var(--background))] bg-[var(--btn-bg)] shadow-[0_0_0_1px_var(--btn-bg)] group-active:shadow-[0_0_0_0px_var(--btn-bg)]", secondary: "[--btn-bg:var(--accent)] bg-[var(--btn-bg)] shadow-[0_0_0_1px_var(--btn-bg)] group-active:shadow-[0_0_0_0px_var(--btn-bg)]", tertiary: "bg-active shadow-[0_0_0_1px_var(--border),inset_0_0_0_0px_var(--border)] group-active:shadow-[0_0_0_0px_var(--border),inset_0_0_0_1px_var(--border)]", ghost: "bg-active shadow-[0_0_0_1px_var(--active)] group-active:shadow-[0_0_0_0px_var(--active)]", }; const Button = forwardRef( ( { className, variant, size, asChild = false, loading = false, leadingIcon: LeadingIcon, trailingIcon: TrailingIcon, active = false, disabled, children, style, ...props }, ref ) => { // asChild: the user's element becomes the root while the button's internal // structure (bg layer, content wrapper, spinner, icons) survives as its // children — the element's own children become the label. We clone the // element directly instead of routing through ButtonPrimitive's `render`: // Base UI would bolt button semantics (role="button", Space activation) // onto e.g. a link, where plain-link output is wanted. const asChildElement = asChild && isValidElement(children) ? (children as ReactElement<{ children?: ReactNode; className?: string; style?: React.CSSProperties; ref?: React.Ref; }>) : null; const label = asChildElement ? asChildElement.props.children : children; // Resolve the size from the explicit prop alone (legacy aliases mapped // onto the canonical ladder) — no ambient SizeProvider read. Falling // outside an explicit prop, "default" is just the JS fallback; the // *rendered* size still follows an ambient `data-size="compact"` // ancestor via the `--control-*` vars in buttonVariants, CSS handles // that resolution on its own. const resolvedSize: ButtonSizeCanonical = size ? sizeAliases[size] ?? (size as ButtonSizeCanonical) : "default"; const isIconOnly = resolvedSize.startsWith("icon"); const isCompact = size === "compact" || size === "icon-compact"; // Best-effort JS fallback for icon components that don't size off the // `size-[var(--control-icon-glyph,16px)]` class below (e.g. a non-SVG glyph // font) — accurate whenever `size` was passed explicitly, otherwise just // the default-tier glyph size until CSS corrects it. const iconSize = isCompact ? 14 : 16; // A control label is an affordance, not prose: at the 13px control size // regular reads too light, most visibly on `primary`, where light-on-dark // optically thins. The weight is `font-medium` on the root rather than the // `fontWeights.medium` variation (450): that pairing exists to hold a // label's width while the weight ANIMATES, which a button's never does, and // 500 is what Tabs' triggers carry — a control should not read lighter than // the tab strip beside it. const labelStyle: React.CSSProperties = { ...style }; const bgClass = active ? activeBgVariants[variant ?? "primary"] : bgVariants[variant ?? "primary"]; const internals = ( <> {/* Forced-active paints the pressed color at full size on the layer above, so a bloom on top of it would only re-tint an already-lit button with the lighter hover shade. */} {!active && ( )} {loading ? ( <> {LeadingIcon && !isIconOnly && ( )} {label} {TrailingIcon && !isIconOnly && ( )} {/* Tracks the button height so the loading glyph stays proportionate across sizes, ambient or explicit. */} ) : isIconOnly ? ( {label} ) : ( <> {LeadingIcon && ( )} {/* text-box only applies to block containers, so the trim lives on the label span (a blockified flex item), not the flex root. The button's height is fixed (h-*), so this doesn't change layout — it just centers the cap-to-baseline box optically. */} {label} {TrailingIcon && ( )} )} ); const rootClassName = cn( buttonVariants({ variant, size: resolvedSize, iconLeft: !isIconOnly && !!LeadingIcon, iconRight: !isIconOnly && !!TrailingIcon, }), className ); // An explicit size must win over whatever `--control-*` values an ambient // data-size ancestor (or lack of one) would otherwise resolve to. Setting // the attribute here — not just relying on the class above — makes the // override apply on the element itself, where a plain attribute selector // beats inheritance from any ancestor. // // Both directions, not just compact: subtree scoping is the supported way // to size a region, so `size="default"` inside a `data-size="compact"` // wrapper has to climb back out. Only an omitted prop stays ambient. const dataSize = size ? (isCompact ? "compact" : "default") : undefined; if (asChildElement) { const childProps = asChildElement.props; return cloneElement( asChildElement, { ...props, // Spread, not a literal key: cloneElement's inferred config type is // narrower than ButtonHTMLAttributes (it only knows the target // element's own props), so a literal "data-size" key fails // TypeScript's excess-property check the way a spread doesn't. ...(dataSize ? { "data-size": dataSize } : {}), ref, className: cn(rootClassName, childProps.className), style: { ...labelStyle, ...childProps.style }, }, internals ); } return ( } className={rootClassName} data-size={dataSize} disabled={disabled || loading} style={labelStyle} {...props} > {internals} ); } ); Button.displayName = "Button"; export { Button, buttonVariants }; export type { ButtonProps, ButtonSize }; 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/react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40base-ui%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/react"}]]}]}],["$","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","lucide-react",{"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"}]]}]}]]}],["$","$L50",null,{"namespace":"@delta","registryDependencies":["https://www.deltacomponents.dev/r/utils.json","https://www.deltacomponents.dev/r/icon-context.json","https://www.deltacomponents.dev/r/tokens.json"]}]]}],["$","$L51",null,{"children":["$","div",null,{"className":"@container","children":["$","div",null,{"className":"grid grid-cols-1 gap-4 @xl:grid-cols-2","children":[null,null,null,["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"CSS"}],["$","div",null,{"children":["$","$L52",null,{"lang":"css","copyButton":true,"writing":false,"className":"rounded-none w-full max-h-80","header":false,"children":"@keyframes spinner-move {\n\tto {\n\t\tstroke-dashoffset: -100;\n\t}\n}\n\n@keyframes spinner-dash {\n\t0%, 100% {\n\t\tstroke-dasharray: 15 85;\n\t}\n\t50% {\n\t\tstroke-dasharray: 40 60;\n\t}\n}"}]}]]}]]}]}]}]]}],["$","$L53",null,{"files":[{"path":"registry/ui/button.tsx","content":"$54","type":"registry:ui","target":"components/ui/button.tsx"}],"className":"h-[70svh] min-h-80"}]]}]