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:T409d,"use client" /** * Badge with optional layout animation on content changes (`tabular-nums` for counts), * a “live” status dot (opacity-only pulse), and the same frosted fill + animated * gradient rim + layered shadow language as `HaloButton` / `HaloCard`. */ import { useMemo, useState, type ComponentProps, type ReactNode } from "react" import type { VariantProps } from "class-variance-authority" import { motion, useReducedMotion } from "motion/react" import { cn } from "@/lib/utils" import { badgeVariants } from "@/components/ui/badge" /* ─── Rim + fill (self-contained; no halo-card import) ─── */ type RimVariant = "default" | "success" | "destructive" const RIM_BLOB_GRADIENTS: Record< RimVariant, { primaryBg: string; secondaryBg: string; tertiaryBg: string } > = { default: { primaryBg: "linear-gradient(90deg, #ff0080, #7928ca, #00d4ff, #0070f3)", secondaryBg: "linear-gradient(90deg, #ff4d4d, #f9cb28, #ff0080)", tertiaryBg: "linear-gradient(90deg, #0070f3, #00d4ff, #7928ca)", }, success: { primaryBg: "linear-gradient(90deg, #047857, #059669, #10b981, #14b8a6, #0d9488)", secondaryBg: "linear-gradient(90deg, #34d399, #6ee7b7, #2dd4bf, #5eead4)", tertiaryBg: "linear-gradient(90deg, #065f46, #047857, #0f766e)", }, destructive: { primaryBg: "linear-gradient(90deg, #991b1b, #dc2626, #e11d48, #f43f5e, #be123c)", secondaryBg: "linear-gradient(90deg, #fb7185, #fda4af, #f87171, #fecdd3)", tertiaryBg: "linear-gradient(90deg, #7f1d1d, #b91c1c, #dc2626)", }, } function badgeBorderGlowConfig( translucent: boolean, rimEmphasis: boolean, rimVariant: RimVariant = "default" ) { let idleOpacity: number if (translucent) { idleOpacity = rimEmphasis ? 0.92 : 0.72 } else { idleOpacity = rimEmphasis ? 0.78 : 0.5 } const gradients = RIM_BLOB_GRADIENTS[rimVariant] return { opacityIdle: idleOpacity, primaryBg: gradients.primaryBg, secondaryBg: gradients.secondaryBg, tertiaryBg: gradients.tertiaryBg, primaryLeft: ["-5%", "75%", "-5%"], secondaryLeft: ["65%", "10%", "65%"], tertiaryLeft: ["25%", "55%", "25%"], durationMain: 6, durationSec: 5, durationTer: 4, } } function badgeFillBackgroundFor( 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%)" } const layoutTransition = { type: "spring" as const, bounce: 0, duration: 0.32, } /** Variants that use gradient rim + frosted surface (ghost/link stay minimal). */ const CHROMED_BADGE_VARIANTS = new Set< NonNullable["variant"]> >(["default", "secondary", "destructive", "outline"]) function badgeRimVariant( variant: NonNullable["variant"]> ): RimVariant { if (variant === "destructive") { return "destructive" } return "default" } /** * Same ambient underglow as {@link HaloSwitch} — radial brand ramps clipped to the pill * so it reads as depth, not a second misaligned rim. */ function BadgeAmbientUnderglow({ reduceMotion }: { reduceMotion: boolean }) { return (

) } /** Scaled pill blobs for `h-5` badges — same motion keys as `GradientRimPillBlobs`. */ function BadgeRimPillBlobs({ borderGlow, reduceMotion, }: { borderGlow: ReturnType reduceMotion: boolean }) { return (

) } const chromedLabelClasses: Record< "default" | "secondary" | "destructive" | "outline", string > = { default: "text-primary", secondary: "text-muted-foreground", destructive: "text-destructive aria-invalid:text-destructive dark:aria-invalid:text-destructive", outline: "text-foreground", } /** Border tints (same `color-mix` system as `HaloSwitch` shell). */ const chromedBorderClasses: Record< "default" | "secondary" | "destructive" | "outline", string > = { default: "border-[color-mix(in_oklch,var(--border)_72%,oklch(0.88_0.06_300))]", secondary: "border-[color-mix(in_oklch,var(--border)_72%,oklch(0.88_0.06_300))]", destructive: "border-[color-mix(in_oklch,var(--border)_65%,oklch(0.86_0.09_22))]", outline: "border-[color-mix(in_oklch,var(--border)_72%,oklch(0.88_0.06_300))]", } /** Plain string/number children only — used to pick a perfect circle for single-digit counts. */ function plainChildLength(children: ReactNode): number | null { if (typeof children === "string" || typeof children === "number") { return String(children).length } return null } /** Explicit transform in transition (never `transition: all`). Easing matches cross-fade polish in the design skill. */ const chromedSurfaceBase = "relative z-[1] flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden whitespace-nowrap rounded-full px-2 font-medium text-[0.625rem] leading-none tracking-tight antialiased outline-none transition-[background-color,backdrop-filter,border-color,box-shadow,transform] duration-200 ease-[cubic-bezier(0.2,0,0,1)] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-2.5" function chromedShapeClasses( singleDigitCircle: boolean, multiDigitTabular: boolean ): string { if (singleDigitCircle) { return "size-5 px-0" } if (multiDigitTabular) { return "h-5 min-w-5 px-1.5" } return "h-5 px-2" } export interface HaloBadgeProps extends Omit, "children">, VariantProps { children?: ReactNode /** Leading “live” dot — opacity pulse only (respects reduced motion). */ live?: boolean /** * Animate width when label/children change. Prefer off for badges that update very frequently. * @default true */ layout?: boolean /** Avoids digit shift when children are numeric strings. */ tabularNums?: boolean /** Frosted inner surface so gradient blobs read through (matches other animated components). */ translucent?: boolean /** Stronger rim + fill on hover (matches `HaloCard` / pill buttons). */ interactive?: boolean /** * Subtle `scale(0.96)` on press when `interactive` (interruptible CSS transition). * @default true */ pressScale?: boolean } function HaloBadgeChrome({ borderGlow, body, chromedKey, className, enableLayout, fillBackground, interactive, live, onMouseEnter, onMouseLeave, pressScale, pulseTransition, reduceMotion, singleDigitCircle, multiDigitTabular, translucent, ...props }: { borderGlow: ReturnType body: ReactNode chromedKey: keyof typeof chromedLabelClasses className?: string enableLayout: boolean fillBackground: string interactive: boolean live: boolean onMouseEnter?: ComponentProps["onMouseEnter"] onMouseLeave?: ComponentProps["onMouseLeave"] pressScale: boolean pulseTransition: { duration: number; ease: "easeInOut"; repeat: number } reduceMotion: boolean singleDigitCircle: boolean multiDigitTabular: boolean translucent: boolean } & Omit, "children">) { const shapeClasses = chromedShapeClasses(singleDigitCircle, multiDigitTabular) return ( {translucent ? ( ) : null} {/* Inline baseline/line-height on the rim wrapper skews the inner pill inside `p-px`. `inline-flex` + `leading-none` + `text-[0]` keeps the ring concentric; text size is set on the inner surface. */} {/* Concentric radii: outer `rounded-full` + `p-px` (1px) with inner `rounded-full` reads as a pill ring; both use full rounding so caps stay semicircular. */} {live ? ( ) : null} {body} ) } export function HaloBadge({ variant = "default", className, children, live = false, layout = true, tabularNums = false, translucent = true, interactive = true, pressScale = true, onMouseEnter, onMouseLeave, ...props }: HaloBadgeProps) { const reduceMotion = useReducedMotion() ?? false const enableLayout = layout && !reduceMotion const [isHovered, setIsHovered] = useState(false) const pulseTransition = useMemo( () => ({ duration: reduceMotion ? 0 : 1.15, ease: "easeInOut" as const, repeat: reduceMotion ? 0 : Number.POSITIVE_INFINITY, }), [reduceMotion] ) const body = tabularNums || live ? ( {children} ) : ( {children} ) const resolvedVariant = variant ?? ("default" as NonNullable) const useChrome = CHROMED_BADGE_VARIANTS.has(resolvedVariant) const rimVariant = badgeRimVariant(resolvedVariant) const rimEmphasis = interactive && isHovered const digitLen = plainChildLength(children) const singleDigitCircle = Boolean(tabularNums) && digitLen === 1 && !live const multiDigitTabular = Boolean(tabularNums) && !live && digitLen !== null && digitLen > 1 const borderGlow = useMemo( () => badgeBorderGlowConfig(translucent, rimEmphasis, rimVariant), [translucent, rimEmphasis, rimVariant] ) const fillBackground = useMemo( () => badgeFillBackgroundFor(translucent, interactive, rimEmphasis), [translucent, interactive, rimEmphasis] ) if (!useChrome) { return ( {live ? ( ) : null} {body} ) } const chromedKey = resolvedVariant as keyof typeof chromedLabelClasses return ( { setIsHovered(true) onMouseEnter?.(e) }} onMouseLeave={(e) => { setIsHovered(false) onMouseLeave?.(e) }} pressScale={pressScale} pulseTransition={pulseTransition} reduceMotion={reduceMotion} singleDigitCircle={singleDigitCircle} translucent={translucent} {...props} /> ) } 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","class-variance-authority",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/class-variance-authority","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":"class-variance-authority"}]]}]}],["$","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":["badge"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"registry/default/ui/halo-badge.tsx","content":"$52","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]