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[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:T57ea,"use client" /** * Composable card matching `HaloSearchInput` / `HaloButtonPolished`: * animated gradient rim, frosted fill, layered shadow, fine-hover polish. * * @example * * * Title * Body copy. * * Optional main area. * * Cancel * Continue * * */ import { forwardRef, useEffect, useMemo, useState, type ComponentProps, type HTMLAttributes, type ReactNode, } from "react" import { Button as ButtonPrimitive } from "@base-ui/react/button" import { motion, useMotionValue, useReducedMotion, useTransform, } from "motion/react" import { cn } from "@/lib/utils" const paddingClass = { none: "", sm: "p-4", md: "p-6", lg: "p-8", } as const const BORDER_TRAIL_LOOP_MS = 5250 /** Moving rim highlight along the card edge (mask = border band only). Phase persists when hover/focus stops. */ function HaloCardBorderTrail({ active }: { active: boolean }) { const progress = useMotionValue(0) const offsetDistance = useTransform(progress, (v: number) => { const wrapped = ((v % 100) + 100) % 100 return `${wrapped}%` }) useEffect(() => { if (!active) { return } let rafId = 0 let last = performance.now() const tick = (now: number) => { const dt = now - last last = now const next = progress.get() + (dt / BORDER_TRAIL_LOOP_MS) * 100 progress.set(((next % 100) + 100) % 100) rafId = requestAnimationFrame(tick) } rafId = requestAnimationFrame(tick) return () => cancelAnimationFrame(rafId) }, [active, progress]) const pathCornerRadiusPx = 16 const trailLengthPx = 184 const trailThicknessPx = 32 const trailBox = { height: trailThicknessPx, offsetPath: `rect(0 auto auto 0 round ${pathCornerRadiusPx}px)`, width: trailLengthPx, } as const /** Feathered ends + same hue family as `borderGlowConfig` so it reads as one rim system. */ const ambientGradient = "linear-gradient(90deg, transparent 0%, rgba(255,0,128,0) 6%, rgba(255,0,128,0.38) 24%, rgba(121,40,202,0.5) 50%, rgba(0,212,255,0.42) 76%, rgba(0,212,255,0) 94%, transparent 100%)" const coreGradient = "linear-gradient(90deg, transparent 0%, rgba(255,0,128,0.72) 20%, rgba(200,140,255,0.92) 50%, rgba(0,212,255,0.78) 80%, transparent 100%)" return (

{/* Wide soft bloom — ties into frosted card edge */}

{/* Brighter core — higher-opacity read without a hard capsule edge */}

) } function borderGlowConfig(translucent: boolean, rimEmphasis: boolean) { let idleOpacity: number if (translucent) { idleOpacity = rimEmphasis ? 0.92 : 0.72 } else { idleOpacity = rimEmphasis ? 0.78 : 0.5 } return { opacityIdle: idleOpacity, primaryBg: "linear-gradient(90deg, #ff0080, #7928ca, #00d4ff, #0070f3)", secondaryBg: "linear-gradient(90deg, #ff4d4d, #f9cb28, #ff0080)", tertiaryBg: "linear-gradient(90deg, #0070f3, #00d4ff, #7928ca)", primaryLeft: ["-5%", "75%", "-5%"], secondaryLeft: ["65%", "10%", "65%"], tertiaryLeft: ["25%", "55%", "25%"], durationMain: 6, durationSec: 5, durationTer: 4, } } type BorderGlowState = ReturnType function GradientRimPillBlobs({ borderGlow, reduceMotion, }: { borderGlow: BorderGlowState reduceMotion: boolean }) { return (

) } function fillBackgroundFor( translucent: boolean, interactive: boolean, rimEmphasis: boolean ) { if (translucent) { if (interactive && rimEmphasis) { return "linear-gradient(to bottom, color-mix(in oklch, var(--card) 88%, transparent) 0%, color-mix(in oklch, var(--card) 74%, transparent) 100%)" } return "linear-gradient(to bottom, color-mix(in oklch, var(--card) 82%, transparent) 0%, color-mix(in oklch, var(--card) 70%, transparent) 100%)" } if (interactive && rimEmphasis) { return "linear-gradient(to bottom, var(--card) 0%, color-mix(in oklch, var(--card) 90%, var(--muted)) 100%)" } return "linear-gradient(to bottom, var(--card) 0%, color-mix(in oklch, var(--card) 94%, var(--muted)) 100%)" } export interface HaloCardProps extends ComponentProps<"div"> { children: ReactNode /** Frosted inner surface so gradient blobs read through. */ translucent?: boolean /** Hover + rim emphasis on the animated edge. */ interactive?: boolean /** Padding inside the card surface. */ padding?: keyof typeof paddingClass } const HaloCard = forwardRef(function HaloCard( { children, className, translucent = true, interactive = true, padding = "md", "aria-label": ariaLabel = "Card", onBlur, onFocus, onMouseEnter, onMouseLeave, ...props }, ref ) { const [isHovered, setIsHovered] = useState(false) const [isFocusedWithin, setIsFocusedWithin] = useState(false) const reduceMotion = useReducedMotion() ?? false const rimEmphasis = interactive && (isHovered || isFocusedWithin) const borderGlow = useMemo( () => borderGlowConfig(translucent, rimEmphasis), [translucent, rimEmphasis] ) const fillBackground = useMemo( () => fillBackgroundFor(translucent, interactive, rimEmphasis), [translucent, interactive, rimEmphasis] ) const showTrailChrome = interactive && !reduceMotion const trailActive = isHovered || isFocusedWithin return ( // biome-ignore lint/a11y/noNoninteractiveElementInteractions: hover drives animated rim; focusable controls render in children. // biome-ignore lint/a11y/useSemanticElements: not a form group; fieldset would be incorrect for layout chrome.

{ if (!e.currentTarget.contains(e.relatedTarget as Node | null)) { setIsFocusedWithin(false) } onBlur?.(e) }} onFocus={(e) => { if (interactive) { setIsFocusedWithin(true) } onFocus?.(e) }} onMouseEnter={(e) => { if (interactive) { setIsHovered(true) } onMouseEnter?.(e) }} onMouseLeave={(e) => { setIsHovered(false) onMouseLeave?.(e) }} ref={ref} role="group" {...props} >

{children}

{showTrailChrome ? (

) : null}

) }) HaloCard.displayName = "HaloCard" function HaloCardHeader({ className, ...props }: ComponentProps<"div">) { return (

[data-slot=halo-card-action]]:grid-cols-[1fr_auto]", "has-[>[data-slot=halo-card-description]]:grid-rows-[auto_auto]", className )} data-slot="halo-card-header" {...props} /> ) } HaloCardHeader.displayName = "HaloCardHeader" const HaloCardTitle = forwardRef>( function HaloCardTitle({ className, ...props }, ref) { return (

) } ) HaloCardTitle.displayName = "HaloCardTitle" const HaloCardDescription = forwardRef< HTMLParagraphElement, ComponentProps<"p"> >(function HaloCardDescription({ className, ...props }, ref) { return (
) }) HaloCardDescription.displayName = "HaloCardDescription" function HaloCardAction({ className, ...props }: ComponentProps<"div">) { return (
) } HaloCardAction.displayName = "HaloCardAction" function HaloCardContent({ className, ...props }: HTMLAttributes) { return (
) } HaloCardContent.displayName = "HaloCardContent" function HaloCardFooter({ className, ...props }: ComponentProps<"div">) { return (
) } HaloCardFooter.displayName = "HaloCardFooter" export interface HaloCardButtonProps extends Omit, "children"> { children: ReactNode /** * `primary` — animated gradient rim + frosted fill (matches card chrome). * `secondary` — muted surface, high-contrast `text-foreground`, subtle gradient ring (e.g. Cancel). */ variant?: "primary" | "secondary" size?: "default" | "icon" } const HaloCardButton = forwardRef( function HaloCardButton( { children, className, variant = "primary", size = "default", disabled, onFocus, onBlur, onMouseEnter, onMouseLeave, style, type, ...props }, ref ) { const [isHovered, setIsHovered] = useState(false) const [isFocused, setIsFocused] = useState(false) const reduceMotion = useReducedMotion() ?? false const rimEmphasis = isHovered || isFocused const borderGlow = useMemo( () => borderGlowConfig(true, rimEmphasis), [rimEmphasis] ) const fillBackground = useMemo( () => fillBackgroundFor(true, true, rimEmphasis), [rimEmphasis] ) if (variant === "secondary") { return (

{ setIsFocused(false) onBlur?.(e) }} onFocus={(e) => { setIsFocused(true) onFocus?.(e) }} onMouseEnter={(e) => { setIsHovered(true) onMouseEnter?.(e) }} onMouseLeave={(e) => { setIsHovered(false) onMouseLeave?.(e) }} ref={ref} type={type ?? "button"} {...props} > {children}

) } return (

{ setIsFocused(false) onBlur?.(e) }} onFocus={(e) => { setIsFocused(true) onFocus?.(e) }} onMouseEnter={(e) => { setIsHovered(true) onMouseEnter?.(e) }} onMouseLeave={(e) => { setIsHovered(false) onMouseLeave?.(e) }} ref={ref} style={{ ...style, background: fillBackground, }} type={type ?? "button"} {...props} > {children}

) } ) HaloCardButton.displayName = "HaloCardButton" /** @deprecated Use `HaloCard` — alias kept for existing imports. */ const HaloCardPolished = HaloCard /** @deprecated Use `HaloCardProps` */ export type HaloCardPolishedProps = HaloCardProps export { HaloCard, HaloCardAction, HaloCardButton, HaloCardContent, HaloCardDescription, HaloCardFooter, HaloCardHeader, /** @deprecated Use `HaloCard` */ HaloCardPolished, HaloCardTitle, } 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","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"}]]}]}]]}],["$","$L50",null,{"namespace":"@cult-ui","registryDependencies":[]}]]}],null]}],["$","$L51",null,{"files":[{"path":"registry/default/ui/halo-card.tsx","content":"$52","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]