53: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"] 54: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"] 55:T1f2f,"use client"; import { Slot } from "radix-ui"; import * as React from "react"; import { cn } from "cn"; type MovingBorderButtonVariant = "default" | "outline" | "secondary"; type MovingBorderEffect = | "spin" | "beam" | "pulse" | "shimmer" | "dash" | "hover-spin" | "reverse" | "meteor" | "glow" | "ping" | "dual-beam" | "wave"; const variantStyles: Record< MovingBorderButtonVariant, { bg: string; border: string; text: string } > = { default: { bg: "bg-primary", border: "", text: "text-primary-foreground", }, secondary: { bg: "bg-secondary", border: "", text: "text-secondary-foreground", }, outline: { bg: "bg-background", border: "border border-input", text: "text-foreground", }, }; const gradients = { rainbow: "conic-gradient(from 0deg, var(--chart-1), var(--chart-3), var(--chart-5), var(--chart-2), var(--chart-4), var(--chart-1))", beam: "conic-gradient(from 0deg, transparent 0deg, transparent 285deg, var(--chart-1) 310deg, var(--chart-3) 330deg, var(--chart-5) 350deg, transparent 360deg)", shimmer: "linear-gradient(110deg, transparent 25%, var(--chart-1) 42%, var(--chart-3) 50%, var(--chart-5) 58%, transparent 75%)", meteor: "conic-gradient(from 0deg, transparent 0deg, transparent 240deg, var(--chart-1) 270deg, var(--chart-3) 295deg, var(--chart-5) 315deg, transparent 345deg, transparent 360deg)", dualBeam: "conic-gradient(from 0deg, transparent 0deg, var(--chart-1) 18deg, transparent 36deg, transparent 180deg, var(--chart-3) 198deg, transparent 216deg, transparent 360deg)", wave: "conic-gradient(from var(--moving-border-angle, 0deg), var(--chart-1), var(--chart-3), var(--chart-5), var(--chart-2), var(--chart-4), var(--chart-1))", }; type MaskedEffect = { kind: "mask"; layer: string; gradient: keyof typeof gradients; }; type CustomEffect = { kind: "custom"; id: "dash" | "ping"; }; const effectConfig: Record = { spin: { kind: "mask", layer: "absolute inset-[-150%] animate-[moving-border-spin_4s_linear_infinite]", gradient: "rainbow", }, beam: { kind: "mask", layer: "absolute inset-[-120%] animate-[moving-border-spin_3s_linear_infinite]", gradient: "beam", }, pulse: { kind: "mask", layer: "absolute inset-0 rounded-[inherit] animate-[moving-border-pulse_2s_ease-in-out_infinite]", gradient: "rainbow", }, shimmer: { kind: "mask", layer: "absolute inset-[-50%] animate-[moving-border-shimmer_2.5s_linear_infinite] bg-[length:200%_200%]", gradient: "shimmer", }, dash: { kind: "custom", id: "dash" }, "hover-spin": { kind: "mask", layer: "absolute inset-[-150%] opacity-30 transition-opacity duration-300 group-hover/btn:opacity-100 group-hover/btn:animate-[moving-border-spin_3s_linear_infinite]", gradient: "rainbow", }, reverse: { kind: "mask", layer: "absolute inset-[-150%] animate-[moving-border-spin-reverse_4s_linear_infinite]", gradient: "rainbow", }, meteor: { kind: "mask", layer: "absolute inset-[-130%] animate-[moving-border-spin_6s_linear_infinite]", gradient: "meteor", }, glow: { kind: "mask", layer: "absolute inset-[-100%] blur-sm animate-[moving-border-glow_3s_ease-in-out_infinite]", gradient: "rainbow", }, ping: { kind: "custom", id: "ping" }, "dual-beam": { kind: "mask", layer: "absolute inset-[-120%] animate-[moving-border-spin_5s_linear_infinite]", gradient: "dualBeam", }, wave: { kind: "mask", layer: "absolute inset-[-150%] animate-[moving-border-wave_5s_linear_infinite]", gradient: "wave", }, }; export interface MovingBorderButtonProps extends React.ButtonHTMLAttributes { variant?: MovingBorderButtonVariant; effect?: MovingBorderEffect; asChild?: boolean; } export const MovingBorderButton = ({ children, variant = "outline", effect = "spin", asChild = false, className, ...props }: MovingBorderButtonProps) => { const styles = variantStyles[variant]; const Comp = asChild ? Slot.Root : "button"; const config = effectConfig[effect]; const dashGradientId = React.useId(); return ( {config.kind === "mask" ? ( ) : null} {config.kind === "custom" && config.id === "dash" ? ( ) : null} {config.kind === "custom" && config.id === "ping" ? ( <> ) : null} {children} ); }; 52:["$","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","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"}]]}]}],["$","li","cn",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/cn","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":"cn"}]]}]}]]}],["$","$L53",null,{"namespace":"@shadcnblocks","registryDependencies":[]}]]}],null]}],["$","$L54",null,{"files":[{"path":"components/shadcnblocks/moving-border-button.tsx","content":"$55","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]