4f: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"] 50: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"] 51:T3399,"use client"; import { cva, type VariantProps } from "class-variance-authority"; import { motion, useReducedMotion } from "motion/react"; import * as React from "react"; import { cn } from "@/lib/utils"; import { Spinner } from "./spinner"; declare const process: { env: { NODE_ENV?: string } }; export type ButtonStatus = "idle" | "loading" | "success" | "error"; export const buttonVariants = cva( cn( "relative isolate inline-flex cursor-pointer select-none items-center justify-center gap-2 whitespace-nowrap rounded-lg font-medium tracking-[-0.01em] outline-none", "transition-control duration-fast ease-soft", "hover:-translate-y-px active:scale-[0.96] motion-reduce:transition-none motion-reduce:transform-none", "before:pointer-events-none before:absolute before:inset-0 before:-z-10 before:rounded-[inherit] before:bg-transparent before:transition-tint before:duration-fast", "after:absolute after:inset-x-0 after:content-['']", "focus-visible:ring-focus", "disabled:pointer-events-none disabled:opacity-50 disabled:saturate-[0.7]", "data-[status=loading]:pointer-events-none", "data-[status=success]:bg-none data-[status=success]:bg-success data-[status=success]:text-on-accent", "data-[status=error]:bg-none data-[status=error]:bg-danger data-[status=error]:text-on-accent", "[&_svg]:pointer-events-none [&_svg]:shrink-0", ), { variants: { variant: { solid: "bg-accent bg-gradient-accent font-semibold text-on-accent shadow-raised hover:glow-ring hover:before:bg-ink/10 active:before:bg-ink/5", soft: "bg-surface-2 text-ink shadow-raised hover:before:bg-ink/5", ghost: "bg-transparent text-muted hover:text-ink hover:before:bg-ink/5", outline: "border border-border bg-transparent text-ink hover:border-border-strong hover:before:bg-ink/5 focus-visible:border-transparent", onSurface: "border border-ink/10 bg-ink/[0.055] font-semibold text-ink hover:border-ink/20 hover:before:bg-ink/5", glass: "border border-white/15 bg-black/40 text-white/90 shadow-raised backdrop-blur-sm hover:bg-black/55 hover:before:bg-white/5", }, size: { sm: "h-8 gap-1.5 rounded-md px-3 text-xs after:-inset-y-1.5", md: "h-10 px-4 text-sm after:-inset-y-0.5", lg: "h-12 rounded-xl px-6 text-[0.9375rem] after:inset-y-0", }, iconOnly: { true: "px-0", false: "" }, active: { true: "glow-ring text-accent", false: "" }, shape: { rounded: "", pill: "" }, }, compoundVariants: [ // the `after` inset expands the hit area to 44px without growing the box, // so it has to scale inversely with the visual size { iconOnly: true, size: "sm", class: "w-8 rounded-lg after:-inset-1.5 [&_svg]:size-4", }, { iconOnly: true, size: "md", class: "w-10 rounded-xl after:-inset-0.5 [&_svg]:size-[1.15rem]", }, { iconOnly: true, size: "lg", class: "w-12 [&_svg]:size-5" }, // icon-only outline keeps the quiet reading the old IconButton had { iconOnly: true, variant: "outline", active: false, class: "bg-surface text-muted hover:text-ink", }, { active: true, variant: "outline", class: "border-transparent" }, { shape: "pill", class: "rounded-full" }, ], defaultVariants: { variant: "solid", size: "md", iconOnly: false, active: false, shape: "rounded", }, }, ); const TOOLTIP_SIDE: Record = { top: "bottom-full left-1/2 mb-2 -translate-x-1/2", bottom: "top-full left-1/2 mt-2 -translate-x-1/2", left: "right-full top-1/2 mr-2 -translate-y-1/2", right: "left-full top-1/2 ml-2 -translate-y-1/2", }; const SPINNER_SIZE = { sm: "sm", md: "sm", lg: "md" } as const; const GRID_STYLE: React.CSSProperties = { display: "grid", placeItems: "center", }; const CELL_STYLE: React.CSSProperties = { gridArea: "1 / 1" }; const SIZER_STYLE: React.CSSProperties = { ...CELL_STYLE, visibility: "hidden", }; // Inline, not `sr-only`: a consumer's Tailwind build never scans this file. const SR_ONLY_STYLE: React.CSSProperties = { position: "absolute", width: 1, height: 1, margin: -1, padding: 0, overflow: "hidden", clipPath: "inset(50%)", whiteSpace: "nowrap", border: 0, }; type MotionConflicts = | "onAnimationStart" | "onAnimationEnd" | "onDrag" | "onDragStart" | "onDragEnd"; export interface ButtonProps extends Omit, MotionConflicts>, VariantProps { asChild?: boolean; status?: ButtonStatus; loadingText?: React.ReactNode; successText?: React.ReactNode; errorText?: React.ReactNode; /** How long `success` / `error` hold before the button settles back to idle. */ settleDelay?: number; onSettle?: () => void; /** Optional visible tooltip on hover/focus. */ tooltip?: React.ReactNode; side?: "top" | "bottom" | "left" | "right"; } export const Button = React.forwardRef( ( { className, variant, size = "md", iconOnly = false, active = false, shape, asChild, status = "idle", loadingText, successText, errorText, settleDelay = 1200, onSettle, tooltip, side = "top", onClick, children, ...props }, ref, ) => { const reduce = useReducedMotion(); const display = useSettlingStatus(status, settleDelay, onSettle); const tooltipId = React.useId(); const busy = display === "loading"; if ( process.env.NODE_ENV !== "production" && iconOnly && !props["aria-label"] && !props["aria-labelledby"] ) { throw new Error("usva: an icon-only Button needs an aria-label."); } if (asChild) return ( {children} ); const content: Record = { idle: children, loading: ( <> {loadingText ?? (iconOnly ? null : "Loading")} ), success: ( <> {successText ?? {children}} ), error: ( <> {errorText ?? {children}} ), }; // The lift is declared twice on purpose. Motion writes an inline transform on the // first press and never gives it back, which outranks the `hover:-translate-y-px` // class from here on. That class is what the motion-free `asChild` path uses. const button = ( {/* Every state is stacked in one grid cell so the button reserves the widest state's width up front and never reshapes between them. Only the active label is shown; the rest are hidden sizers. Grid placement is inline-styled, not Tailwind, so a consumer's build can never tree-shake the layout away. */} {(Object.keys(content) as ButtonStatus[]).map((s) => ( {content[s]} ))} {content[display]} ); if (!tooltip) return button; return ( {button} ); }, ); Button.displayName = "Button"; /** * `success` and `error` are momentary: they hold for `settleDelay`, then the button * returns to idle on its own. The callback lives in a ref so an inline `onSettle` * doesn't restart the timer on every render. */ function useSettlingStatus( status: ButtonStatus, settleDelay: number, onSettle?: () => void, ): ButtonStatus { const [display, setDisplay] = React.useState(status); const settle = React.useRef(onSettle); React.useEffect(() => { settle.current = onSettle; }, [onSettle]); React.useEffect(() => { setDisplay(status); if (status !== "success" && status !== "error") return; const timer = setTimeout(() => { setDisplay("idle"); settle.current?.(); }, settleDelay); return () => clearTimeout(timer); }, [status, settleDelay]); return display; } function CheckIcon() { return ( ); } function AlertIcon() { return ( ); } type Handler = (...args: unknown[]) => void; function childRef(element: React.ReactElement): React.Ref | undefined { return Number.parseInt(React.version, 10) >= 19 ? (element.props as { ref?: React.Ref }).ref : (element as unknown as { ref?: React.Ref }).ref; } /** * Carries the ref under a name of its own. React 18 reserves `ref`, strips it * from a function component's props and warns, so a Slot that read `props.ref` * would forward nothing there while working on 19. */ function Slot({ children, className, style, slotRef, ...props }: React.ButtonHTMLAttributes & { children?: React.ReactNode; slotRef?: React.Ref; }) { const element = React.isValidElement>( children, ) ? children : null; const theirRef = element ? childRef(element) : undefined; const composedRef = React.useCallback( (node: unknown) => { for (const target of [slotRef, theirRef]) { if (typeof target === "function") target(node); else if (target) (target as React.MutableRefObject).current = node; } }, [slotRef, theirRef], ); if (!element) return null; const childProps = element.props as Record; const merged: Record = { ...props, ...childProps }; for (const [key, ours] of Object.entries(props)) { if (!key.startsWith("on") || typeof ours !== "function") continue; const theirs = childProps[key]; merged[key] = typeof theirs === "function" ? (...args: unknown[]) => { (theirs as Handler)(...args); (ours as Handler)(...args); } : ours; } merged.className = cn(className, childProps.className as string); merged.style = { ...style, ...(childProps.style as React.CSSProperties) }; merged.ref = composedRef; return React.cloneElement( element, merged as React.HTMLAttributes, ); } 4e:["$","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","motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","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":"motion"}]]}]}],["$","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","clsx",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/clsx","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":"clsx"}]]}]}],["$","li","tailwind-merge",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/tailwind-merge","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":"tailwind-merge"}]]}]}]]}],["$","$L4f",null,{"namespace":"@usva","registryDependencies":["https://usva.build/r/spinner.json"]}]]}],null]}],["$","$L50",null,{"files":[{"path":"button.tsx","content":"$51","type":"registry:ui","target":"components/ui/button.tsx"}],"className":"h-[70svh] min-h-80"}]]}]