4b: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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"RegistryDependencies"] 4c: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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"FilesView"] 4d:T266c,"use client" import * as React from "react" import { Lightbulb } from "lucide-react" import { cn } from "@/lib/utils" import { type NumberFormat } from "@/registry/dashboardcn/lib/format" import { Card } from "@/components/ui/card" import { MetricValue } from "@/registry/dashboardcn/ui/metric-value" export type InsightCardVariant = | "aurora" | "sunset" | "ocean" | "graphite" | "plain" export interface InsightItem { /** The big number. Formatted when numeric. */ value: number | string format?: NumberFormat currency?: string /** One-sentence takeaway under the number. */ headline: string /** Supporting detail under the headline. */ description?: React.ReactNode } export interface InsightCardProps extends Omit, "title"> { /** Pill label in the top-left, e.g. "Insights". */ badge?: string /** Icon inside the badge. Defaults to a lightbulb. */ icon?: React.ReactNode /** Slot in the top-right corner, e.g. a menu button. */ action?: React.ReactNode /** Background style. "plain" uses the card colors. */ variant?: InsightCardVariant /** One or more insights. More than one shows a pager at the bottom. */ items: InsightItem[] /** Controlled index of the visible insight. */ index?: number defaultIndex?: number onIndexChange?: (index: number) => void /** Milliseconds between automatic advances. Omit to disable. */ interval?: number /** Size of the big number. */ size?: "md" | "lg" /** Draws the folded light band and thin stroke over the gradient. */ decoration?: boolean } const variants: Record< Exclude, { background: string; scrim: string } > = { aurora: { background: [ "radial-gradient(90% 55% at 88% 6%, #f7cfa9 0%, transparent 60%)", "radial-gradient(70% 55% at 104% 48%, #f4dc95 0%, transparent 60%)", "radial-gradient(75% 60% at 52% 34%, #fff5e8 0%, transparent 60%)", "radial-gradient(110% 75% at 2% 106%, #2b5ad4 0%, transparent 62%)", "linear-gradient(165deg, #d4dcee 0%, #a9bfe9 38%, #5f88df 72%, #3a67d4 100%)", ].join(", "), scrim: "linear-gradient(to top, rgba(18, 36, 96, 0.45), rgba(18, 36, 96, 0.08) 45%, transparent 70%)", }, sunset: { background: [ "radial-gradient(85% 55% at 90% 8%, #ffe1b8 0%, transparent 60%)", "radial-gradient(70% 55% at 100% 50%, #ffb38a 0%, transparent 60%)", "radial-gradient(75% 60% at 50% 36%, #fff0e6 0%, transparent 58%)", "radial-gradient(110% 75% at 0% 108%, #5a2fb0 0%, transparent 62%)", "linear-gradient(165deg, #f8d3c4 0%, #f29a9f 40%, #b9569e 72%, #6c3aa9 100%)", ].join(", "), scrim: "linear-gradient(to top, rgba(60, 16, 80, 0.45), rgba(60, 16, 80, 0.08) 45%, transparent 70%)", }, ocean: { background: [ "radial-gradient(85% 55% at 90% 8%, #d7f8ef 0%, transparent 60%)", "radial-gradient(70% 55% at 102% 50%, #a6ecd6 0%, transparent 60%)", "radial-gradient(75% 60% at 50% 36%, #f2fffb 0%, transparent 58%)", "radial-gradient(110% 75% at 0% 108%, #0f4c8a 0%, transparent 62%)", "linear-gradient(165deg, #cfeee6 0%, #6fd3c0 40%, #2a9cae 72%, #1a5f9c 100%)", ].join(", "), scrim: "linear-gradient(to top, rgba(8, 40, 72, 0.45), rgba(8, 40, 72, 0.08) 45%, transparent 70%)", }, graphite: { background: [ "radial-gradient(85% 55% at 90% 8%, rgba(255,255,255,0.22) 0%, transparent 60%)", "radial-gradient(75% 60% at 52% 34%, rgba(255,255,255,0.16) 0%, transparent 58%)", "radial-gradient(110% 75% at 0% 108%, #050506 0%, transparent 62%)", "linear-gradient(165deg, #5a5a60 0%, #3a3a40 40%, #232327 72%, #131316 100%)", ].join(", "), scrim: "linear-gradient(to top, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.08) 45%, transparent 70%)", }, } /** A hero card with a badge, a very large number, a headline, and a paged set of insights over a soft gradient. */ function InsightCard({ badge = "Insights", icon = , action, variant = "aurora", items, index, defaultIndex = 0, onIndexChange, interval, size = "lg", decoration = true, className, ...props }: InsightCardProps) { const id = React.useId() const [internal, setInternal] = React.useState(defaultIndex) const active = Math.min(items.length - 1, Math.max(0, index ?? internal)) const [paused, setPaused] = React.useState(false) const select = React.useCallback( (next: number) => { if (index === undefined) setInternal(next) onIndexChange?.(next) }, [index, onIndexChange] ) React.useEffect(() => { if (!interval || paused || items.length < 2) return const timer = window.setInterval(() => { select((active + 1) % items.length) }, interval) return () => window.clearInterval(timer) }, [interval, paused, items.length, active, select]) const item = items[active] if (!item) return null const plain = variant === "plain" const palette = plain ? null : variants[variant] return ( setPaused(true)} onMouseLeave={() => setPaused(false)} onFocusCapture={() => setPaused(true)} onBlurCapture={() => setPaused(false)} {...props} > {palette ? ( <>

{decoration ? ( ) : null}

) : null}

{badge ? ( svg]:size-4", plain ? "bg-muted text-foreground" : "bg-white/75 text-neutral-900 shadow-sm backdrop-blur-sm" )} > {icon} {badge} ) : ( )} {action ?

{action}

: null}

{item.headline}

{item.description ? (

{item.description}

) : null}

{items.length > 1 ? (

{items.map((_, i) => ( ))}

) : null}

) } export { InsightCard } 4e:T8a9,"use client" import * as React from "react" import { cn } from "@/lib/utils" import { formatNumber, type NumberFormat } from "@/registry/dashboardcn/lib/format" import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from "@/components/ui/tooltip" /** Values at or above this are abbreviated by default. */ export const DEFAULT_COMPACT_FROM = 100_000 export interface MetricValueProps extends Omit, "children"> { /** Strings render as-is. */ value: number | string format?: NumberFormat currency?: string maximumFractionDigits?: number /** Values at or above this are abbreviated (e.g. $158K) with the full value in a tooltip. Set to Infinity to always show the full value. */ compactFrom?: number /** Text after the number, e.g. a unit. */ suffix?: React.ReactNode } /** A formatted number. Large values are abbreviated and reveal the full value on hover. */ function MetricValue({ value, format, currency, maximumFractionDigits, compactFrom = DEFAULT_COMPACT_FROM, suffix, className, ...props }: MetricValueProps) { const classes = cn("tabular-nums", className) if (typeof value !== "number") { return ( {value} {suffix} ) } const full = formatNumber(value, { format, currency, maximumFractionDigits }) const abbreviate = format !== "percent" && Math.abs(value) >= compactFrom if (!abbreviate) { return ( {full} {suffix} ) } return ( {formatNumber(value, { format, currency, compact: true })} {suffix} {full} {suffix} ) } export { MetricValue } 4f:Tc05,export type NumberFormat = "number" | "compact" | "currency" | "percent" export interface FormatNumberOptions { format?: NumberFormat /** ISO 4217 code, used when format is "currency". Defaults to USD. */ currency?: string locale?: string maximumFractionDigits?: number /** Abbreviate large values, e.g. "$158K" instead of "$158,143". */ compact?: boolean } const formatterCache = new Map() function getFormatter(locale: string, options: Intl.NumberFormatOptions) { const key = locale + JSON.stringify(options) let formatter = formatterCache.get(key) if (!formatter) { formatter = new Intl.NumberFormat(locale, options) formatterCache.set(key, formatter) } return formatter } /** * Format a metric value for display. * * formatNumber(1234567) -> "1,234,567" * formatNumber(1234567, { format: "compact" }) -> "1.2M" * formatNumber(48.2, { format: "currency" }) -> "$48.20" * formatNumber(158143, { format: "currency", compact: true }) -> "$158K" * formatNumber(0.124, { format: "percent" }) -> "12.4%" */ export function formatNumber( value: number, { format = "number", currency = "USD", locale = "en-US", maximumFractionDigits, compact = false, }: FormatNumberOptions = {} ): string { if (!Number.isFinite(value)) return "—" // Compact values keep three significant digits: $158K, $1.23M, 41.2K. const compactOptions: Intl.NumberFormatOptions = compact ? maximumFractionDigits === undefined ? { notation: "compact", maximumSignificantDigits: 3 } : { notation: "compact", maximumFractionDigits } : {} switch (format) { case "compact": return getFormatter(locale, { notation: "compact", maximumFractionDigits: maximumFractionDigits ?? 1, }).format(value) case "currency": return getFormatter(locale, { style: "currency", currency, maximumFractionDigits: maximumFractionDigits ?? 2, ...compactOptions, }).format(value) case "percent": return getFormatter(locale, { style: "percent", maximumFractionDigits: maximumFractionDigits ?? 1, }).format(value) default: return getFormatter(locale, { maximumFractionDigits: maximumFractionDigits ?? 0, ...compactOptions, }).format(value) } } /** * Format a fractional change as a signed percentage. * * formatDelta(0.124) -> "+12.4%" * formatDelta(-0.03) -> "-3.0%" * formatDelta(0) -> "0.0%" */ export function formatDelta(delta: number, locale = "en-US"): string { if (!Number.isFinite(delta)) return "—" return getFormatter(locale, { style: "percent", signDisplay: "exceptZero", maximumFractionDigits: 1, minimumFractionDigits: 1, }).format(delta) } /** * Fractional change between two values. Returns 0 when there is no baseline. */ export function computeDelta(current: number, previous: number): number { if (!previous) return 0 return (current - previous) / Math.abs(previous) } 4a:["$","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","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","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":"lucide-react"}]]}]}]]}],["$","$L4b",null,{"namespace":"@dashboardcn","registryDependencies":["card","tooltip"]}]]}],null]}],["$","$L4c",null,{"files":[{"path":"registry/dashboardcn/blocks/insight-card.tsx","content":"$4d","type":"registry:component"},{"path":"registry/dashboardcn/ui/metric-value.tsx","content":"$4e","type":"registry:ui"},{"path":"registry/dashboardcn/lib/format.ts","content":"$4f","type":"registry:lib"}],"className":"h-[70svh] min-h-80"}]]}]