60: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/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.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"] 61: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/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.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"] 62:T1eb8,"use client"; import { forwardRef, isValidElement, useCallback, useEffect, useLayoutEffect, useRef } from "react"; import type { ButtonHTMLAttributes, ReactNode, Ref, RefObject } from "react"; import { AnimatePresence, animate, motion, useIsPresent, useMotionValue, useReducedMotion } from "motion/react"; import type { TargetAndTransition, Variants } from "motion/react"; import { motionTokens } from "../lib/motion-tokens"; import styles from "./button.module.css"; export type ButtonVariant = "primary" | "secondary" | "ghost" | "danger"; export type ButtonSize = "sm" | "md" | "lg"; export interface ButtonProps extends Omit, "onDrag" | "onDragEnd" | "onDragStart" | "onAnimationStart"> { variant?: ButtonVariant; size?: ButtonSize; loading?: boolean; } /** Icon buttons press a little deeper, wide buttons a little less, so every size reads as the same push. */ const pressVariants: Variants = { pressed: (button: RefObject) => { const width = button.current?.offsetWidth ?? 0; return { scale: width > 220 ? .985 : width && width <= 48 ? .96 : .97, transition: { duration: motionTokens.duration.instant, ease: [...motionTokens.ease.standard] } }; }, }; const rest: TargetAndTransition = { opacity: 1, y: 0, scale: 1 }; /** One clean crossfade: the new label rises 2px as it fades in, the outgoing one fades out faster. No blur. */ const textIn: TargetAndTransition = { opacity: 0, y: 2 }; const textOut: TargetAndTransition = { opacity: 0, transition: { duration: .1, ease: [...motionTokens.ease.standard] } }; const iconIn: TargetAndTransition = { opacity: 0, scale: .85 }; const iconOut: TargetAndTransition = { opacity: 0, transition: { duration: .1, ease: [...motionTokens.ease.standard] } }; const fadeIn: TargetAndTransition = { ...rest, opacity: 0 }; const fadeOut: TargetAndTransition = { opacity: 0, transition: { duration: motionTokens.duration.instant } }; /** Scale rides the spring; opacity tweens. */ const iconEnter = { ...motionTokens.spring.snappy, opacity: { duration: motionTokens.duration.fast, ease: [...motionTokens.ease.enter] } } as const; /** A key for the label content: text plus element names, so a new label or icon crossfades while prop-only updates stay in place. */ function labelKey(node: ReactNode): string { if (node == null || typeof node === "boolean") return ""; if (typeof node === "string" || typeof node === "number" || typeof node === "bigint") return String(node); if (Array.isArray(node)) return node.map(labelKey).join(""); if (!isValidElement(node)) return ""; const type = node.type as string | { displayName?: string; name?: string }; return `<${typeof type === "string" ? type : type?.displayName ?? type?.name ?? ""}>${labelKey((node.props as { children?: ReactNode }).children)}`; } /** Springs the slot to the natural width of the incoming label when it changes, so a new label never snaps the button's size. * The outgoing label is popped out of flow at once, so it never holds the old width. Other resizes (a late web font, a parent reflow) jump straight to the new width, so nothing wobbles on first paint. */ function useMorphWidth(content: RefObject, key: string, reduced: boolean) { const width = useMotionValue("auto"); const lastKey = useRef(key), armedUntil = useRef(0); useLayoutEffect(() => { if (lastKey.current === key) return; lastKey.current = key; armedUntil.current = performance.now() + 700; }, [key]); useEffect(() => { const node = content.current, slot = node?.parentElement; if (!node || !slot || typeof ResizeObserver === "undefined") return; let measured = false; const observer = new ResizeObserver(([entry]) => { if (!entry) return; const next = entry.contentRect.width; if (!next || !measured || reduced || performance.now() > armedUntil.current) { measured = next > 0; width.jump(next || "auto"); delete slot.dataset.morphing; return; } slot.dataset.morphing = ""; animate(width, next, { ...motionTokens.spring.morph, onComplete: () => { delete slot.dataset.morphing; } }); }); observer.observe(node); return () => observer.disconnect(); }, [content, reduced, width]); return width; } function LabelPhase({ children, icon, reduced, ref }: { children: ReactNode; icon: boolean; reduced: boolean; ref?: Ref }) { const present = useIsPresent(); return {children}; } export const Button = forwardRef(function Button( { className, variant = "primary", size = "md", loading = false, disabled, children, onClick, ...props }, ref, ) { const reduceMotion = useReducedMotion() ?? false; const buttonRef = useRef(null); const contentRef = useRef(null); const key = labelKey(children); const width = useMorphWidth(contentRef, key, reduceMotion); const setRefs = useCallback((node: HTMLButtonElement | null) => { buttonRef.current = node; if (typeof ref === "function") ref(node); else if (ref) ref.current = node; }, [ref]); // A trigger that anchors a menu, popover, or dialog keeps its rect still while pressed, so the layer never measures a scaled anchor. // Radix triggers (asChild) pass aria-haspopup or data-state through; the stylesheet repeats the guard. const popup = props["aria-haspopup"]; const anchorsLayer = (popup !== undefined && popup !== false && popup !== "false") || props.role === "combobox" || (props as Record)["data-state"] !== undefined; const inert = disabled || loading || props["aria-disabled"] === true || props["aria-disabled"] === "true"; const classes = [styles.button, styles[variant], styles[size], className].filter(Boolean).join(" "); return ( event.preventDefault() : onClick} > {loading ? : null} ]*>/g, ""))} reduced={reduceMotion}>{children} ); }); Button.displayName = "Button"; export default Button; 63:T1108,/* Press scale is driven by Motion (whileTap) alone, so transform never gets a CSS transition here. */ .button { position: relative; display: inline-flex; min-height: var(--control-height-md); align-items: center; justify-content: center; gap: var(--space-2); border: 1px solid transparent; border-radius: var(--radius-control); padding: 0 var(--space-4); font: inherit; font-size: var(--text-sm); font-weight: 500; line-height: var(--leading-body); white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: color var(--duration-fast) var(--ease-standard), background var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), opacity var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); } .button:disabled { cursor: not-allowed; opacity: .52; } .button[aria-busy="true"] { cursor: progress; } /* Anchors of floating layers never scale: Radix opens on pointerdown and would measure a shrunken trigger. */ .button:is([aria-haspopup]:not([aria-haspopup="false"]), [data-state], [role="combobox"]) { transform: none !important; } /* The slot's width follows the incoming label on a spring. The label stays centered and may overflow evenly while the slot catches up; the outgoing label pops out of flow against the slot itself, so it keeps its place instead of following the new content box. */ .labelSlot { position: relative; display: inline-flex; min-width: 0; align-items: center; justify-content: center; transition: opacity var(--duration-fast) var(--ease-standard); } .labelSlot[data-morphing] { clip-path: inset(-50% calc(var(--space-3) * -1)); } .labelContent { display: inline-flex; flex: none; align-items: center; } .labelPhase { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); white-space: nowrap; } .labelPhase svg { flex: none; } .primary { color: var(--background); background: var(--foreground); border-color: var(--foreground); } .secondary { color: var(--foreground); background: var(--surface); border-color: var(--border); } .ghost { color: var(--text-secondary); background: transparent; border-color: transparent; } .danger { color: var(--danger); background: var(--surface); border-color: var(--border); } /* A disabled outlined button keeps its shape and fades only its label, so it still reads as a button that is off, not as plain text. */ .secondary:disabled, .danger:disabled { opacity: 1; color: var(--text-muted); background: var(--surface-muted); border-color: var(--border); } .danger:disabled { color: color-mix(in oklab, var(--danger) 55%, var(--surface-muted)); } .ghost:disabled { opacity: 1; color: var(--text-muted); } @media (hover: hover) and (pointer: fine) { .primary:hover:not(:disabled) { opacity: .91; box-shadow: var(--shadow-resting); } .secondary:hover:not(:disabled) { background: var(--surface-muted); box-shadow: var(--shadow-resting); } .ghost:hover:not(:disabled) { color: var(--foreground); background: var(--surface-muted); } .danger:hover:not(:disabled) { border-color: var(--danger); background: var(--surface-muted); } } /* Color feedback on press, so touch and menu triggers (which never scale) still answer the finger. */ .primary:active:not(:disabled) { opacity: .84; } .secondary:active:not(:disabled), .ghost:active:not(:disabled) { color: var(--foreground); background: var(--surface-muted); } .danger:active:not(:disabled) { border-color: var(--danger); background: var(--surface-muted); } .sm { min-height: var(--control-height-sm); padding-inline: var(--space-3); font-size: var(--text-sm); } .md { min-height: var(--control-height-md); } .lg { min-height: var(--control-height-lg); padding-inline: var(--space-5); font-size: var(--text-sm); } .loader { position: absolute; left: 50%; top: 50%; display: grid; width: var(--space-4); height: var(--space-4); margin: calc(var(--space-4) / -2); } .spinner { border: 1.5px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; } .loadingLabel { opacity: 0; } @keyframes spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .button { transition: none; } .labelSlot { transition: opacity var(--duration-instant) linear; } .spinner { animation-duration: .01ms; animation-iteration-count: 1; } } 5f:["$","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"}]]}]}]]}],["$","$L60",null,{"namespace":"@uiarc","registryDependencies":["https://uiarc.dev/r/arc-motion-tokens.json"]}]]}],null]}],["$","$L61",null,{"files":[{"path":"registry/components/button/button.tsx","content":"$62","type":"registry:component","target":"@components/arc/button/button.tsx"},{"path":"registry/components/button/button.module.css","content":"$63","type":"registry:component","target":"@components/arc/button/button.module.css"}],"className":"h-[70svh] min-h-80"}]]}]