{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "halo-card", "type": "registry:ui", "description": "Composable card with animated gradient rim, frosted fill, layered shadow, and Base UI button actions", "dependencies": [ "@base-ui/react", "motion" ], "files": [ { "path": "registry/default/ui/halo-card.tsx", "content": "\"use client\"\n\n/**\n * Composable card matching `HaloSearchInput` / `HaloButtonPolished`:\n * animated gradient rim, frosted fill, layered shadow, fine-hover polish.\n *\n * @example\n * \n * \n * Title\n * Body copy.\n * \n * Optional main area.\n * \n * Cancel\n * Continue\n * \n * \n */\nimport {\n forwardRef,\n useEffect,\n useMemo,\n useState,\n type ComponentProps,\n type HTMLAttributes,\n type ReactNode,\n} from \"react\"\nimport { Button as ButtonPrimitive } from \"@base-ui/react/button\"\nimport {\n motion,\n useMotionValue,\n useReducedMotion,\n useTransform,\n} from \"motion/react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst paddingClass = {\n none: \"\",\n sm: \"p-4\",\n md: \"p-6\",\n lg: \"p-8\",\n} as const\n\nconst BORDER_TRAIL_LOOP_MS = 5250\n\n/** Moving rim highlight along the card edge (mask = border band only). Phase persists when hover/focus stops. */\nfunction HaloCardBorderTrail({ active }: { active: boolean }) {\n const progress = useMotionValue(0)\n const offsetDistance = useTransform(progress, (v: number) => {\n const wrapped = ((v % 100) + 100) % 100\n return `${wrapped}%`\n })\n\n useEffect(() => {\n if (!active) {\n return\n }\n let rafId = 0\n let last = performance.now()\n const tick = (now: number) => {\n const dt = now - last\n last = now\n const next = progress.get() + (dt / BORDER_TRAIL_LOOP_MS) * 100\n progress.set(((next % 100) + 100) % 100)\n rafId = requestAnimationFrame(tick)\n }\n rafId = requestAnimationFrame(tick)\n return () => cancelAnimationFrame(rafId)\n }, [active, progress])\n\n const pathCornerRadiusPx = 16\n const trailLengthPx = 184\n const trailThicknessPx = 32\n\n const trailBox = {\n height: trailThicknessPx,\n offsetPath: `rect(0 auto auto 0 round ${pathCornerRadiusPx}px)`,\n width: trailLengthPx,\n } as const\n\n /** Feathered ends + same hue family as `borderGlowConfig` so it reads as one rim system. */\n const ambientGradient =\n \"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%)\"\n\n const coreGradient =\n \"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%)\"\n\n return (\n \n {/* Wide soft bloom — ties into frosted card edge */}\n \n \n \n {/* Brighter core — higher-opacity read without a hard capsule edge */}\n \n \n \n \n )\n}\n\nfunction borderGlowConfig(translucent: boolean, rimEmphasis: boolean) {\n let idleOpacity: number\n if (translucent) {\n idleOpacity = rimEmphasis ? 0.92 : 0.72\n } else {\n idleOpacity = rimEmphasis ? 0.78 : 0.5\n }\n return {\n opacityIdle: idleOpacity,\n primaryBg: \"linear-gradient(90deg, #ff0080, #7928ca, #00d4ff, #0070f3)\",\n secondaryBg: \"linear-gradient(90deg, #ff4d4d, #f9cb28, #ff0080)\",\n tertiaryBg: \"linear-gradient(90deg, #0070f3, #00d4ff, #7928ca)\",\n primaryLeft: [\"-5%\", \"75%\", \"-5%\"],\n secondaryLeft: [\"65%\", \"10%\", \"65%\"],\n tertiaryLeft: [\"25%\", \"55%\", \"25%\"],\n durationMain: 6,\n durationSec: 5,\n durationTer: 4,\n }\n}\n\ntype BorderGlowState = ReturnType\n\nfunction GradientRimPillBlobs({\n borderGlow,\n reduceMotion,\n}: {\n borderGlow: BorderGlowState\n reduceMotion: boolean\n}) {\n return (\n
\n \n \n \n \n \n
\n )\n}\n\nfunction fillBackgroundFor(\n translucent: boolean,\n interactive: boolean,\n rimEmphasis: boolean\n) {\n if (translucent) {\n if (interactive && rimEmphasis) {\n return \"linear-gradient(to bottom, color-mix(in oklch, var(--card) 88%, transparent) 0%, color-mix(in oklch, var(--card) 74%, transparent) 100%)\"\n }\n return \"linear-gradient(to bottom, color-mix(in oklch, var(--card) 82%, transparent) 0%, color-mix(in oklch, var(--card) 70%, transparent) 100%)\"\n }\n if (interactive && rimEmphasis) {\n return \"linear-gradient(to bottom, var(--card) 0%, color-mix(in oklch, var(--card) 90%, var(--muted)) 100%)\"\n }\n return \"linear-gradient(to bottom, var(--card) 0%, color-mix(in oklch, var(--card) 94%, var(--muted)) 100%)\"\n}\n\nexport interface HaloCardProps extends ComponentProps<\"div\"> {\n children: ReactNode\n /** Frosted inner surface so gradient blobs read through. */\n translucent?: boolean\n /** Hover + rim emphasis on the animated edge. */\n interactive?: boolean\n /** Padding inside the card surface. */\n padding?: keyof typeof paddingClass\n}\n\nconst HaloCard = forwardRef(function HaloCard(\n {\n children,\n className,\n translucent = true,\n interactive = true,\n padding = \"md\",\n \"aria-label\": ariaLabel = \"Card\",\n onBlur,\n onFocus,\n onMouseEnter,\n onMouseLeave,\n ...props\n },\n ref\n) {\n const [isHovered, setIsHovered] = useState(false)\n const [isFocusedWithin, setIsFocusedWithin] = useState(false)\n const reduceMotion = useReducedMotion() ?? false\n\n const rimEmphasis = interactive && (isHovered || isFocusedWithin)\n\n const borderGlow = useMemo(\n () => borderGlowConfig(translucent, rimEmphasis),\n [translucent, rimEmphasis]\n )\n\n const fillBackground = useMemo(\n () => fillBackgroundFor(translucent, interactive, rimEmphasis),\n [translucent, interactive, rimEmphasis]\n )\n\n const showTrailChrome = interactive && !reduceMotion\n const trailActive = isHovered || isFocusedWithin\n\n return (\n // biome-ignore lint/a11y/noNoninteractiveElementInteractions: hover drives animated rim; focusable controls render in children.\n // biome-ignore lint/a11y/useSemanticElements: not a form group; fieldset would be incorrect for layout chrome.\n {\n if (!e.currentTarget.contains(e.relatedTarget as Node | null)) {\n setIsFocusedWithin(false)\n }\n onBlur?.(e)\n }}\n onFocus={(e) => {\n if (interactive) {\n setIsFocusedWithin(true)\n }\n onFocus?.(e)\n }}\n onMouseEnter={(e) => {\n if (interactive) {\n setIsHovered(true)\n }\n onMouseEnter?.(e)\n }}\n onMouseLeave={(e) => {\n setIsHovered(false)\n onMouseLeave?.(e)\n }}\n ref={ref}\n role=\"group\"\n {...props}\n >\n
\n
\n \n \n \n \n \n
\n\n \n {children}\n
\n\n {showTrailChrome ? (\n
\n \n
\n ) : null}\n \n \n )\n})\n\nHaloCard.displayName = \"HaloCard\"\n\nfunction HaloCardHeader({ className, ...props }: ComponentProps<\"div\">) {\n return (\n [data-slot=halo-card-action]]:grid-cols-[1fr_auto]\",\n \"has-[>[data-slot=halo-card-description]]:grid-rows-[auto_auto]\",\n className\n )}\n data-slot=\"halo-card-header\"\n {...props}\n />\n )\n}\nHaloCardHeader.displayName = \"HaloCardHeader\"\n\nconst HaloCardTitle = forwardRef>(\n function HaloCardTitle({ className, ...props }, ref) {\n return (\n \n )\n }\n)\nHaloCardTitle.displayName = \"HaloCardTitle\"\n\nconst HaloCardDescription = forwardRef<\n HTMLParagraphElement,\n ComponentProps<\"p\">\n>(function HaloCardDescription({ className, ...props }, ref) {\n return (\n \n )\n})\nHaloCardDescription.displayName = \"HaloCardDescription\"\n\nfunction HaloCardAction({ className, ...props }: ComponentProps<\"div\">) {\n return (\n \n )\n}\nHaloCardAction.displayName = \"HaloCardAction\"\n\nfunction HaloCardContent({\n className,\n ...props\n}: HTMLAttributes) {\n return (\n \n )\n}\nHaloCardContent.displayName = \"HaloCardContent\"\n\nfunction HaloCardFooter({ className, ...props }: ComponentProps<\"div\">) {\n return (\n \n )\n}\nHaloCardFooter.displayName = \"HaloCardFooter\"\n\nexport interface HaloCardButtonProps\n extends Omit, \"children\"> {\n children: ReactNode\n /**\n * `primary` — animated gradient rim + frosted fill (matches card chrome).\n * `secondary` — muted surface, high-contrast `text-foreground`, subtle gradient ring (e.g. Cancel).\n */\n variant?: \"primary\" | \"secondary\"\n size?: \"default\" | \"icon\"\n}\n\nconst HaloCardButton = forwardRef(\n function HaloCardButton(\n {\n children,\n className,\n variant = \"primary\",\n size = \"default\",\n disabled,\n onFocus,\n onBlur,\n onMouseEnter,\n onMouseLeave,\n style,\n type,\n ...props\n },\n ref\n ) {\n const [isHovered, setIsHovered] = useState(false)\n const [isFocused, setIsFocused] = useState(false)\n const reduceMotion = useReducedMotion() ?? false\n\n const rimEmphasis = isHovered || isFocused\n\n const borderGlow = useMemo(\n () => borderGlowConfig(true, rimEmphasis),\n [rimEmphasis]\n )\n\n const fillBackground = useMemo(\n () => fillBackgroundFor(true, true, rimEmphasis),\n [rimEmphasis]\n )\n\n if (variant === \"secondary\") {\n return (\n \n \n {\n setIsFocused(false)\n onBlur?.(e)\n }}\n onFocus={(e) => {\n setIsFocused(true)\n onFocus?.(e)\n }}\n onMouseEnter={(e) => {\n setIsHovered(true)\n onMouseEnter?.(e)\n }}\n onMouseLeave={(e) => {\n setIsHovered(false)\n onMouseLeave?.(e)\n }}\n ref={ref}\n type={type ?? \"button\"}\n {...props}\n >\n {children}\n \n \n \n )\n }\n\n return (\n \n
\n \n {\n setIsFocused(false)\n onBlur?.(e)\n }}\n onFocus={(e) => {\n setIsFocused(true)\n onFocus?.(e)\n }}\n onMouseEnter={(e) => {\n setIsHovered(true)\n onMouseEnter?.(e)\n }}\n onMouseLeave={(e) => {\n setIsHovered(false)\n onMouseLeave?.(e)\n }}\n ref={ref}\n style={{\n ...style,\n background: fillBackground,\n }}\n type={type ?? \"button\"}\n {...props}\n >\n {children}\n \n
\n \n )\n }\n)\n\nHaloCardButton.displayName = \"HaloCardButton\"\n\n/** @deprecated Use `HaloCard` — alias kept for existing imports. */\nconst HaloCardPolished = HaloCard\n\n/** @deprecated Use `HaloCardProps` */\nexport type HaloCardPolishedProps = HaloCardProps\n\nexport {\n HaloCard,\n HaloCardAction,\n HaloCardButton,\n HaloCardContent,\n HaloCardDescription,\n HaloCardFooter,\n HaloCardHeader,\n /** @deprecated Use `HaloCard` */\n HaloCardPolished,\n HaloCardTitle,\n}\n", "type": "registry:ui" } ] }