4f: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/1o6_421saitt-.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"] 50: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/1o6_421saitt-.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"] 51:Ta31,"use client"; import { Area, AreaChart, ChartStatFlow, LinearGradient, } from "@/components/charts"; import { curveCardinal } from "@visx/curve"; import { useState } from "react"; import { Card, CardAction, CardContent, CardHeader, CardTitle, } from "@/components/ui/card"; import { revenueSeries, revenueStats } from "../data/revenue-series"; import { StatCardChart, statCardLabelClassName, statCardValueClassName, } from "./stat-card-chart"; import { formatStatCardMonth, StatCardHoverBridge, type StatCardHoverState, } from "./stat-card-hover-bridge"; import { TrendBadge } from "./trend-badge"; export function StatCardArea() { const [hover, setHover] = useState({ value: null, label: null, trend: null, }); const displayValue = hover.value ?? revenueStats.average; const displayLabel = hover.label ?? "Avg"; const displayTrend = hover.trend ?? revenueStats.trend; return ( Total Revenue ); } 52:T412,"use client"; import type { ReactNode } from "react"; import { cn } from "@/lib/utils"; export interface StatCardHoverState { value: number | null; label: string | null; trend: number | null; } export const statCardValueClassName = "text-3xl font-semibold leading-none tracking-tight"; export const statCardLabelClassName = "mt-0 text-xs"; export const statCardChartHeights = { sm: "[--stat-card-chart-h:96px]", md: "[--stat-card-chart-h:190px]", lg: "[--stat-card-chart-h:420px]", } as const; /** Bleeds charts edge-to-edge inside stat card content padding. */ export function StatCardChart({ children, className, size = "sm", }: { children: ReactNode; className?: string; size?: keyof typeof statCardChartHeights; }) { return (

{children}

); } 53:T7c0,"use client"; import { useChart } from "@/components/charts"; import { useEffect } from "react"; import type { StatCardHoverState } from "./stat-card-chart"; export type { StatCardHoverState } from "./stat-card-chart"; export function formatStatCardMonth(date: Date) { return date.toLocaleDateString("en-US", { month: "short" }); } export function formatStatCardWeekday(date: Date) { return date.toLocaleDateString("en-US", { weekday: "long" }); } function parsePointDate(raw: unknown): Date | null { if (raw instanceof Date) { return raw; } if (typeof raw === "string") { return new Date(raw); } return null; } function computePeriodTrend( data: Record[], index: number, dataKey: string ): number | null { if (index <= 0) { return null; } const current = data[index]?.[dataKey]; const previous = data[index - 1]?.[dataKey]; if ( typeof current !== "number" || typeof previous !== "number" || previous === 0 ) { return null; } return ((current - previous) / previous) * 100; } /** Syncs hovered chart values, labels, and trend into stat card UI. */ export function StatCardHoverBridge({ dataKey, dateKey = "date", formatLabel, onHoverChange, }: { dataKey: string; dateKey?: string; formatLabel: (date: Date) => string; onHoverChange: (state: StatCardHoverState) => void; }) { const { data, tooltipData } = useChart(); useEffect(() => { if (!tooltipData?.point) { onHoverChange({ value: null, label: null, trend: null }); return; } const raw = tooltipData.point[dataKey]; const value = typeof raw === "number" ? raw : null; const date = parsePointDate(tooltipData.point[dateKey]); const label = date ? formatLabel(date) : null; const trend = computePeriodTrend(data, tooltipData.index, dataKey); onHoverChange({ value, label, trend }); }, [data, dataKey, dateKey, formatLabel, onHoverChange, tooltipData]); return null; } 4e:["$","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","@visx/curve@4.0.1-alpha.0",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40visx%2Fcurve","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":"@visx/curve@4.0.1-alpha.0"}]]}]}],["$","li","@visx/gradient@4.0.1-alpha.0",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40visx%2Fgradient","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":"@visx/gradient@4.0.1-alpha.0"}]]}]}],["$","li","@number-flow/react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40number-flow%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":"@number-flow/react"}]]}]}],["$","li","@central-icons-react/all",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40central-icons-react%2Fall","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":"@central-icons-react/all"}]]}]}]]}],["$","$L4f",null,{"namespace":"@catalogs","registryDependencies":["@bklit/area-chart","@bklit/chart-stat-flow","card","badge"]}]]}],null]}],["$","$L50",null,{"files":[{"path":"registry/blocks/stat-card-area-01/components/stat-card-area.tsx","content":"$51","type":"registry:component","target":"components/stat-card-area.tsx"},{"path":"registry/blocks/stat-card-area-01/components/stat-card-chart.tsx","content":"$52","type":"registry:component","target":"components/stat-card-chart.tsx"},{"path":"registry/blocks/stat-card-area-01/components/stat-card-hover-bridge.tsx","content":"$53","type":"registry:component","target":"components/stat-card-hover-bridge.tsx"},{"path":"registry/blocks/stat-card-area-01/components/trend-badge.tsx","content":"\"use client\";\n\nimport { CentralIcon } from \"@central-icons-react/all\";\nimport { Badge } from \"@/components/ui/badge\";\nimport { cn } from \"@/lib/utils\";\n\nexport function TrendBadge({\n value,\n className,\n}: {\n value: number;\n className?: string;\n}) {\n const positive = value >= 0;\n\n return (\n \n \n {positive ? \"+\" : \"\"}\n {value.toFixed(1)}%\n \n );\n}\n","type":"registry:component","target":"components/trend-badge.tsx"},{"path":"registry/blocks/stat-card-area-01/data/revenue-series.ts","content":"export const revenueSeries = [\n { date: new Date(\"2024-01-01\"), value: 5200 },\n { date: new Date(\"2024-02-01\"), value: 6100 },\n { date: new Date(\"2024-03-01\"), value: 5400 },\n { date: new Date(\"2024-04-01\"), value: 4700 },\n { date: new Date(\"2024-05-01\"), value: 5100 },\n { date: new Date(\"2024-06-01\"), value: 6800 },\n { date: new Date(\"2024-07-01\"), value: 6400 },\n { date: new Date(\"2024-08-01\"), value: 7200 },\n { date: new Date(\"2024-09-01\"), value: 6900 },\n { date: new Date(\"2024-10-01\"), value: 8100 },\n { date: new Date(\"2024-11-01\"), value: 7600 },\n { date: new Date(\"2024-12-01\"), value: 8800 },\n];\n\nexport const revenueStats = {\n average:\n revenueSeries.reduce((sum, point) => sum + point.value, 0) /\n revenueSeries.length,\n trend: 12.4,\n};\n","type":"registry:lib","target":"data/revenue-series.ts"},{"path":"registry/examples/stat-card-area-01-index.ts","content":"/** biome-ignore-all lint/performance/noBarrelFile: v0 registry example barrel for shadcn install */\nexport { AreaChart } from \"./area-chart\";\nexport { Area } from \"./area\";\nexport { ChartStatFlow } from \"./chart-stat-flow\";\nexport { useChart } from \"./chart-context\";\nexport { LinearGradient } from \"@visx/gradient\";\n","type":"registry:lib","target":"components/charts/index.ts"}],"className":"h-[70svh] min-h-80"}]]}]