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:T369e,"use client"; import { isValidElement, useEffect, useLayoutEffect, useRef, useState, type ComponentPropsWithRef, type SyntheticEvent, type ReactNode, } from "react"; /* * Button – a single self-contained file, clean style. * Clean style: a dark chip, a white button with hairline shadows, a quiet ghost and a minimal red fill. * The styles are injected below, so no extra files are needed. */ export type ButtonProps = ComponentPropsWithRef<"button"> & { /** primary: a dark chip · secondary: white with a hairline shadow · ghost: text only · destructive: a light red fill, for deleting */ variant?: "primary" | "secondary" | "ghost" | "destructive"; size?: "sm" | "md" | "lg"; /** Shows a shimmer over the label and blocks clicks */ loading?: boolean; /** Icon before the label, e.g. an inline SVG */ icon?: ReactNode; /** Icon after the label */ iconRight?: ReactNode; }; export function Button({ variant = "primary", size = "md", loading = false, icon, iconRight, children, className, disabled, onClick, onPointerEnter, type = "button", ref, ...rest }: ButtonProps) { // The shimmer copies the label, so it only works on plain text const text = typeof children === "string" ? children : undefined; // An empty string or false is no label – the icon stays centered const hasLabel = children != null && children !== false && children !== ""; const iconOnly = !hasLabel && Boolean(icon || iconRight); // Unknown values fall back to the defaults instead of an unstyled button const tone = VARIANTS.includes(variant) ? variant : "primary"; const scale = SIZES.includes(size) ? size : "md"; // Morph: when label or icon change, the width glides to its new size and the new content blurs in. // Nothing animates on the first render. const inner = useRef(null); const lastWidth = useRef(0); const [ready, setReady] = useState(false); useEffect(() => setReady(true), []); const labelKey = text ?? "label"; const iconKey = loading && icon ? "spinner" : contentKey(icon); const iconRightKey = contentKey(iconRight); const content = `${labelKey}|${iconKey}|${iconRightKey}`; const lastContent = useRef(content); // Runs after every render, so the remembered width is always current useLayoutEffect(() => { const el = inner.current; if (!el) return; const width = el.getBoundingClientRect().width; const from = lastWidth.current; const changed = lastContent.current !== content; lastWidth.current = width; lastContent.current = content; if (!changed || !from || Math.abs(from - width) < 0.5) return; if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return; el.animate([{ width: `${from}px` }, { width: `${width}px` }], { duration: 480, easing: "cubic-bezier(0.25, 1, 0.5, 1)", }); }); return ( <> {/* React 19 hoists this into once, no matter how many buttons render */} ); } const VARIANTS = ["primary", "secondary", "ghost", "destructive"]; const SIZES = ["sm", "md", "lg"]; /** An icon image that fails to load leaves an empty slot instead of a broken-image glyph */ const hideBroken = (event: SyntheticEvent) => { if (event.target instanceof HTMLImageElement) event.target.style.visibility = "hidden"; }; /** Shown in place of the left icon while loading */ const Spinner = () => ( ); /** A stable id per icon component, so swapping e.g. for counts as a change */ const ids = new WeakMap(); let nextId = 1; function contentKey(node: ReactNode) { if (!isValidElement(node) || typeof node.type === "string") return 0; const type = node.type as object; if (!ids.has(type)) ids.set(type, nextId++); return ids.get(type)!; } /* ---------- Styles ---------- */ const css = /* css */ ` /* Colors and motion as variables – override them on .ui-buttonc (see Theming in the docs) */ .ui-buttonc { --ui-btnc-title: #000; --ui-btnc-ink: rgba(0, 0, 0, 0.88); --ui-btnc-muted: rgba(0, 0, 0, 0.61); --ui-btnc-icon: rgba(0, 0, 0, 0.447); --ui-btnc-solid: rgba(0, 0, 0, 0.88); --ui-btnc-solid-hover: rgba(0, 0, 0, 0.8); --ui-btnc-on-solid: #fcfcfc; --ui-btnc-surface: #ffffff; --ui-btnc-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.06), 0 1px 1px -1px rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.05); --ui-btnc-shadow-hover: 0 0 0 0.5px rgba(0, 0, 0, 0.1), 0 1px 1px -1px rgba(0, 0, 0, 0.12), 0 1px 3px 0 rgba(0, 0, 0, 0.07); --ui-btnc-wash: rgba(0, 0, 0, 0.03); --ui-btnc-danger: #e5484d; --ui-btnc-danger-bg: rgba(229, 72, 77, 0.08); --ui-btnc-danger-bg-hover: rgba(229, 72, 77, 0.12); --ui-btnc-shine: rgba(255, 255, 255, 0.82); --ui-btnc-shine-on-solid: #ffffff; --ui-btnc-focus: rgba(0, 96, 226, 0.35); --ui-btnc-ease: cubic-bezier(0.22, 1, 0.36, 1); --ui-btnc-load: 650ms; --h: 28px; --px: 10px; --gap: 6px; --fs: 13px; --lh: 20px; --icon: 16px; --radius: 6px; position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--gap); box-sizing: border-box; height: var(--h); padding: 0 var(--px); margin: 0; border: 0; border-radius: var(--radius); font-family: "Inter", "InterVariable", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: var(--fs); font-weight: 500; line-height: var(--lh); letter-spacing: 0; max-width: 100%; min-width: 0; white-space: nowrap; text-decoration: none; cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; -webkit-font-smoothing: antialiased; transition: background-color 140ms ease, color 140ms ease, box-shadow 140ms ease, transform 160ms var(--ui-btnc-ease), opacity 140ms ease; } /* Sizes: 24 · 28 · 32 high */ .ui-buttonc[data-size="sm"] { --h: 24px; --px: 8px; --gap: 4px; --fs: 12px; --lh: 16px; --icon: 14px; --radius: 6px; } .ui-buttonc[data-size="lg"] { --h: 32px; --px: 12px; --gap: 6px; --fs: 13px; --icon: 16px; --radius: 6px; } /* An icon sits closer to the edge than the text, so both look evenly spaced */ .ui-buttonc[data-icon-left] { padding-left: calc(var(--px) - 2px); } .ui-buttonc[data-icon-right] { padding-right: calc(var(--px) - 2px); } .ui-buttonc[data-icon-only] { width: var(--h); padding: 0; } /* primary: a dark chip */ .ui-buttonc[data-variant="primary"] { background: var(--ui-btnc-solid); color: var(--ui-btnc-on-solid); } .ui-buttonc[data-variant="primary"]:hover:not(:disabled) { background: var(--ui-btnc-solid-hover); } /* secondary: white with the card's hairline shadow */ .ui-buttonc[data-variant="secondary"] { background: var(--ui-btnc-surface); color: var(--ui-btnc-title); box-shadow: var(--ui-btnc-shadow); } .ui-buttonc[data-variant="secondary"] .ui-buttonc__icon { color: var(--ui-btnc-icon); } .ui-buttonc[data-variant="secondary"]:hover:not(:disabled) { box-shadow: var(--ui-btnc-shadow-hover); } /* ghost: a muted label, a soft wash appears on hover */ .ui-buttonc[data-variant="ghost"] { background: transparent; color: var(--ui-btnc-muted); } .ui-buttonc[data-variant="ghost"] .ui-buttonc__icon { color: var(--ui-btnc-icon); } .ui-buttonc[data-variant="ghost"]:hover:not(:disabled) { background: var(--ui-btnc-wash); color: var(--ui-btnc-ink); } .ui-buttonc[data-variant="ghost"]:hover:not(:disabled) .ui-buttonc__icon { color: var(--ui-btnc-ink); } /* destructive: red label on a minimal red fill, no stroke */ .ui-buttonc[data-variant="destructive"] { background: var(--ui-btnc-danger-bg); color: var(--ui-btnc-danger); } .ui-buttonc[data-variant="destructive"]:hover:not(:disabled) { background: var(--ui-btnc-danger-bg-hover); } .ui-buttonc .ui-buttonc__icon { transition: color 140ms ease; } .ui-buttonc:active:not(:disabled):not([data-loading]) { transform: scale(0.97); } .ui-buttonc:focus-visible { outline: 2px solid var(--ui-btnc-focus); outline-offset: 1px; } .ui-buttonc:disabled { opacity: 0.4; cursor: default; } .ui-buttonc[data-loading] { cursor: default; } .ui-buttonc__icon { display: grid; place-items: center; flex: none; width: var(--icon); height: var(--icon); } .ui-buttonc__icon { overflow: hidden; } .ui-buttonc__icon > svg, .ui-buttonc__icon > img { display: block; width: 100%; height: 100%; } .ui-buttonc__icon > img { object-fit: contain; } /* Morph: the button clips while its width glides; changed parts blur in */ .ui-buttonc { overflow: clip; } .ui-buttonc[data-ready] .ui-buttonc__label { animation: ui-buttonc-label-in 480ms cubic-bezier(0.25, 1, 0.5, 1) both; } .ui-buttonc[data-ready] .ui-buttonc__icon { animation: ui-buttonc-icon-in 520ms cubic-bezier(0.25, 1, 0.5, 1) both; } /* Loading: a light band sweeps across a copy of the dimmed label */ /* A label too long for its parent ends in "…" – the full text shows on hover */ .ui-buttonc__label { position: relative; min-width: 0; overflow: hidden; text-overflow: ellipsis; } .ui-buttonc__label::after { content: attr(data-text); content: attr(data-text) / ""; position: absolute; inset: 0; white-space: nowrap; color: transparent; background: linear-gradient(90deg, transparent 38%, var(--ui-btnc-shine) 50%, transparent 62%) 100% 0 / 300% 100% no-repeat; -webkit-background-clip: text; background-clip: text; opacity: 0; pointer-events: none; } .ui-buttonc[data-variant="primary"] .ui-buttonc__label::after { --ui-btnc-shine: var(--ui-btnc-shine-on-solid); } .ui-buttonc[data-loading] .ui-buttonc__label { color: color-mix(in srgb, currentColor 50%, transparent); } .ui-buttonc[data-loading] .ui-buttonc__label::after { opacity: 1; animation: ui-buttonc-sweep calc(var(--ui-btnc-load) * 1.6) linear infinite; } .ui-buttonc__spinner { animation: ui-buttonc-spin 900ms linear infinite; } @keyframes ui-buttonc-label-in { from { opacity: 0; filter: blur(3px); transform: translateY(25%); } } @keyframes ui-buttonc-icon-in { from { opacity: 0; filter: blur(2px); transform: scale(0.7); } } @keyframes ui-buttonc-spin { to { transform: rotate(1turn); } } @keyframes ui-buttonc-sweep { from { background-position: 100% 0; } to { background-position: 0% 0; } } @media (prefers-reduced-motion: reduce) { .ui-buttonc[data-ready] .ui-buttonc__label, .ui-buttonc[data-ready] .ui-buttonc__icon { animation: none; } .ui-buttonc { transition-duration: 1ms; } .ui-buttonc[data-loading] .ui-buttonc__label::after { animation: none; opacity: 0; } } /* Dark mode: follows a .dark class or data-theme="dark" on any ancestor, e.g. */ :where(.dark, [data-theme="dark"]) .ui-buttonc { /* primary inverts: a light chip with dark text */ --ui-btnc-solid: rgba(255, 255, 255, 0.9); --ui-btnc-solid-hover: rgba(255, 255, 255, 0.82); --ui-btnc-on-solid: #161618; --ui-btnc-shine-on-solid: #ffffff; --ui-btnc-title: rgba(255, 255, 255, 0.9); --ui-btnc-ink: rgba(255, 255, 255, 0.9); --ui-btnc-muted: rgba(255, 255, 255, 0.62); --ui-btnc-icon: rgba(255, 255, 255, 0.5); --ui-btnc-surface: #1c1c1e; --ui-btnc-shadow: 0 0 0 0.5px rgba(255, 255, 255, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.4); --ui-btnc-shadow-hover: 0 0 0 0.5px rgba(255, 255, 255, 0.16), 0 1px 2px 0 rgba(0, 0, 0, 0.4); --ui-btnc-wash: rgba(255, 255, 255, 0.06); --ui-btnc-danger: #ff6369; --ui-btnc-danger-bg: rgba(229, 72, 77, 0.14); --ui-btnc-danger-bg-hover: rgba(229, 72, 77, 0.2); --ui-btnc-shine: #ffffff; --ui-btnc-focus: rgba(77, 141, 255, 0.5); } `; 50:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[null,["$","$L51",null,{"files":[{"path":"registry/button-clean/button-clean.tsx","content":"$52","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]