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:Td83,import * as React from "react" import { TrendingDown, TrendingUp } from "lucide-react" import { cn } from "@/lib/utils" import { type NumberFormat } from "@/registry/dashboardcn/lib/format" import { CornerFrame } from "@/registry/dashboardcn/ui/corner-frame" import { MetricValue } from "@/registry/dashboardcn/ui/metric-value" import { Sparkline } from "@/registry/dashboardcn/ui/sparkline" export interface CommerceKpiMetric { label: string value: number format?: NumberFormat currency?: string delta?: number deltaLabel?: string invertDelta?: boolean trend?: number[] icon?: React.ReactNode } export interface CommerceKpiRowProps extends React.ComponentProps<"div"> { metrics: CommerceKpiMetric[] cornerColor?: string } /** A responsive row of compact commerce metrics with sparklines and registration-mark corners. */ function CommerceKpiRow({ metrics, cornerColor, className, ...props }: CommerceKpiRowProps) { return (

{metrics.map((metric) => { const positive = metric.delta === undefined ? null : (metric.delta >= 0) !== Boolean(metric.invertDelta) const DeltaIcon = metric.delta !== undefined && metric.delta < 0 ? TrendingDown : TrendingUp const accent = positive === false ? "var(--color-rose-500)" : "var(--color-emerald-500)" return (

{metric.icon} {metric.label}

{metric.delta !== undefined ? (

{Math.abs(metric.delta * 100).toFixed(1)}% {metric.deltaLabel ? ( {metric.deltaLabel} ) : null}

) : null}

{metric.trend && metric.trend.length > 1 ? ( ) : null}

) })}

) } export { CommerceKpiRow } 53:T7d5,import * as React from "react" import { cn } from "@/lib/utils" export interface CornerFrameProps extends React.ComponentProps<"div"> { /** Length of each registration mark, in pixels. */ cornerSize?: number /** Any CSS color used for the corner marks. */ cornerColor?: string /** Show a quiet hairline around the framed content. */ bordered?: boolean } /** A content frame with small registration marks at every corner. */ function CornerFrame({ cornerSize = 10, cornerColor = "var(--muted-foreground)", bordered = true, className, children, style, ...props }: CornerFrameProps) { const cornerStyle = { "--corner-size": `${cornerSize}px`, "--corner-color": cornerColor, ...style, } as React.CSSProperties return (

{children} {(["top-left", "top-right", "bottom-right", "bottom-left"] as const).map( (corner) => (

) } export { CornerFrame } 54:T1275,"use client" import * as React from "react" import { Area, AreaChart, AreaRevealShape, Line, LineChart, ResponsiveContainer, type AreaRevealShapeProps, } from "recharts" import { cn } from "@/lib/utils" export interface SparklineProps extends React.ComponentProps<"div"> { /** Series to plot, oldest first. */ data: number[] variant?: "area" | "line" /** Area fill: a plain gradient, or a dot grid that fades out toward the line. */ fill?: "gradient" | "dots" /** Any CSS color. Defaults to the theme primary. */ color?: string curve?: "monotone" | "linear" | "step" strokeWidth?: number /** Animate after hydration and when data changes. Respects reduced motion. */ animate?: boolean animationDuration?: number } const reducedMotionQuery = "(prefers-reduced-motion: reduce)" function subscribeToReducedMotion(onChange: () => void) { const query = window.matchMedia(reducedMotionQuery) query.addEventListener("change", onChange) return () => query.removeEventListener("change", onChange) } function getReducedMotionSnapshot() { return window.matchMedia(reducedMotionQuery).matches } function getReducedMotionServerSnapshot() { return true } /** Area shape that masks the fill to a dot grid while keeping the stroke solid. */ function DotGridAreaShape({ maskId, ...props }: AreaRevealShapeProps & { maskId: string }) { return ( <> ) } function Sparkline({ data, variant = "area", fill = "gradient", color = "var(--primary)", curve = "monotone", strokeWidth = 1.5, animate = true, animationDuration = 500, className, ...props }: SparklineProps) { const id = React.useId() const reducedMotion = React.useSyncExternalStore( subscribeToReducedMotion, getReducedMotionSnapshot, getReducedMotionServerSnapshot ) const animationActive = animate && !reducedMotion const dots = variant === "area" && fill === "dots" const points = React.useMemo(() => data.map((y, i) => ({ i, y })), [data]) const margin = { top: 2, right: 0, bottom: 0, left: 0 } return (

{variant === "line" ? ( ) : ( {dots ? ( <> ) : null} ( ) : undefined } /> )}

) } export { Sparkline } 55: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 } 56: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) } 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","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"}]]}]}],["$","li","recharts",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/recharts","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":"recharts"}]]}]}]]}],["$","$L50",null,{"namespace":"@dashboardcn","registryDependencies":["tooltip"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"registry/dashboardcn/blocks/commerce-kpi-row.tsx","content":"$52","type":"registry:component"},{"path":"registry/dashboardcn/ui/corner-frame.tsx","content":"$53","type":"registry:ui"},{"path":"registry/dashboardcn/ui/sparkline.tsx","content":"$54","type":"registry:ui"},{"path":"registry/dashboardcn/ui/metric-value.tsx","content":"$55","type":"registry:ui"},{"path":"registry/dashboardcn/lib/format.ts","content":"$56","type":"registry:lib"}],"className":"h-[70svh] min-h-80"}]]}]