2c:I[522016,["/_next/static/immutable/chunks/0x-9rc1bm-510.js","/_next/static/immutable/chunks/0vm4r_y51lca-.js","/_next/static/immutable/chunks/1_05dnk5nlv68.js","/_next/static/immutable/chunks/0zz-qr4ehfg-y.js","/_next/static/immutable/chunks/26w7nc1n_z-ef.js","/_next/static/immutable/chunks/0rg7f484r7pvs.js","/_next/static/immutable/chunks/08zzaq7mzunr6.js","/_next/static/immutable/chunks/2r4xab7oviwp5.js","/_next/static/immutable/chunks/3xlvx278x1e_n.js","/_next/static/immutable/chunks/2ndy6i4i4-y6n.js","/_next/static/immutable/chunks/06y00c7m-_7je.js","/_next/static/immutable/chunks/263-ujry15jpq.js","/_next/static/immutable/chunks/3p6b9_d0h8s6a.js","/_next/static/immutable/chunks/0x4o-jqryzpjy.js","/_next/static/immutable/chunks/35wq0ehn8yo1w.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/40nsmaivjxzl9.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2iimfs9klm8ee.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/1v12dieyr7wjf.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/42c4hv7h_qef7.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2a84g45p9ue92.js","/_next/static/immutable/chunks/174-kkyy6-c5l.js","/_next/static/immutable/chunks/3j6wvt_gtks8k.js","/_next/static/immutable/chunks/0xciaf081ehlj.js"],""] 2d:I[406394,["/_next/static/immutable/chunks/0x-9rc1bm-510.js","/_next/static/immutable/chunks/0vm4r_y51lca-.js","/_next/static/immutable/chunks/1_05dnk5nlv68.js","/_next/static/immutable/chunks/0zz-qr4ehfg-y.js","/_next/static/immutable/chunks/26w7nc1n_z-ef.js","/_next/static/immutable/chunks/0rg7f484r7pvs.js","/_next/static/immutable/chunks/08zzaq7mzunr6.js","/_next/static/immutable/chunks/2r4xab7oviwp5.js","/_next/static/immutable/chunks/3xlvx278x1e_n.js","/_next/static/immutable/chunks/2ndy6i4i4-y6n.js","/_next/static/immutable/chunks/06y00c7m-_7je.js","/_next/static/immutable/chunks/263-ujry15jpq.js","/_next/static/immutable/chunks/3p6b9_d0h8s6a.js","/_next/static/immutable/chunks/0x4o-jqryzpjy.js","/_next/static/immutable/chunks/35wq0ehn8yo1w.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/40nsmaivjxzl9.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2iimfs9klm8ee.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/1v12dieyr7wjf.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/42c4hv7h_qef7.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2a84g45p9ue92.js","/_next/static/immutable/chunks/174-kkyy6-c5l.js","/_next/static/immutable/chunks/3j6wvt_gtks8k.js","/_next/static/immutable/chunks/0xciaf081ehlj.js"],"BlockTabs"] 2e:I[966139,["/_next/static/immutable/chunks/0x-9rc1bm-510.js","/_next/static/immutable/chunks/0vm4r_y51lca-.js","/_next/static/immutable/chunks/1_05dnk5nlv68.js","/_next/static/immutable/chunks/0zz-qr4ehfg-y.js","/_next/static/immutable/chunks/26w7nc1n_z-ef.js","/_next/static/immutable/chunks/0rg7f484r7pvs.js","/_next/static/immutable/chunks/08zzaq7mzunr6.js","/_next/static/immutable/chunks/2r4xab7oviwp5.js","/_next/static/immutable/chunks/3xlvx278x1e_n.js","/_next/static/immutable/chunks/2ndy6i4i4-y6n.js","/_next/static/immutable/chunks/06y00c7m-_7je.js","/_next/static/immutable/chunks/263-ujry15jpq.js","/_next/static/immutable/chunks/3p6b9_d0h8s6a.js","/_next/static/immutable/chunks/0x4o-jqryzpjy.js","/_next/static/immutable/chunks/35wq0ehn8yo1w.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/40nsmaivjxzl9.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2iimfs9klm8ee.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/1v12dieyr7wjf.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/42c4hv7h_qef7.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2a84g45p9ue92.js","/_next/static/immutable/chunks/174-kkyy6-c5l.js","/_next/static/immutable/chunks/3j6wvt_gtks8k.js","/_next/static/immutable/chunks/0xciaf081ehlj.js"],"PreviewFrame"] 2f:I[967833,["/_next/static/immutable/chunks/0x-9rc1bm-510.js","/_next/static/immutable/chunks/0vm4r_y51lca-.js","/_next/static/immutable/chunks/1_05dnk5nlv68.js","/_next/static/immutable/chunks/0zz-qr4ehfg-y.js","/_next/static/immutable/chunks/26w7nc1n_z-ef.js","/_next/static/immutable/chunks/0rg7f484r7pvs.js","/_next/static/immutable/chunks/08zzaq7mzunr6.js","/_next/static/immutable/chunks/2r4xab7oviwp5.js","/_next/static/immutable/chunks/3xlvx278x1e_n.js","/_next/static/immutable/chunks/2ndy6i4i4-y6n.js","/_next/static/immutable/chunks/06y00c7m-_7je.js","/_next/static/immutable/chunks/263-ujry15jpq.js","/_next/static/immutable/chunks/3p6b9_d0h8s6a.js","/_next/static/immutable/chunks/0x4o-jqryzpjy.js","/_next/static/immutable/chunks/35wq0ehn8yo1w.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/40nsmaivjxzl9.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2iimfs9klm8ee.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/1v12dieyr7wjf.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/42c4hv7h_qef7.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2a84g45p9ue92.js","/_next/static/immutable/chunks/174-kkyy6-c5l.js","/_next/static/immutable/chunks/3j6wvt_gtks8k.js","/_next/static/immutable/chunks/0xciaf081ehlj.js"],"CodeView"] 30:T9df,import type { ComponentProps } from "react"; import { cva, type VariantProps } from "class-variance-authority"; import { Card } from "@/components/ui/card"; import { Skeleton } from "@/components/ui/skeleton"; import { cn } from "@/lib/utils"; const list = cva("flex flex-col divide-y divide-border *:min-w-0", { variants: { orientation: { /** Cells sit side by side once the group is wide enough, and stack below that. */ horizontal: "@xl:flex-row @xl:divide-x @xl:divide-y-0 @xl:*:flex-1", vertical: "", }, }, defaultVariants: { orientation: "horizontal" }, }); export type KpiGroupProps = ComponentProps<"div"> & VariantProps; /** One card, several metrics, hairlines between them. Compose KpiGroupItem inside. */ export function KpiGroup({ orientation = "horizontal", className, children, ...props }: KpiGroupProps) { return (

{children}

); } /** One cell: stack KpiLabel, then a KpiGroupValue row with KpiValue, KpiFrom and KpiTrend. */ export function KpiGroupItem({ className, ...props }: ComponentProps<"div">) { return

; } /** Value row that wraps instead of overflowing: value, "from" comparison and trend chip. */ export function KpiGroupValue({ className, ...props }: ComponentProps<"div">) { return (

); } /** Same footprint as a KpiGroup with `count` cells. */ export function KpiGroupSkeleton({ count = 3, orientation = "horizontal", className, }: { count?: number; className?: string; } & VariantProps) { return ( {Array.from({ length: count }, (_, i) => (

))} ); } 31:T1aeb,import type { ComponentProps, ReactNode } from "react"; import { Card } from "@/components/ui/card"; import { Progress, ProgressLabel, ProgressValue } from "@/components/ui/progress"; import { Skeleton } from "@/components/ui/skeleton"; import { cn } from "@/lib/utils"; import { NumberValue, type NumberValueProps } from "../number-value/number-value"; import { TrendChip, type TrendChipProps } from "../trend-chip/trend-chip"; import { kpiChartSize } from "./kpi-chart"; export { KpiChart, kpiChartSize, type KpiChartProps, type KpiPoint } from "./kpi-chart"; /** Card shell. Compose KpiHeader, KpiMain, KpiProgress, KpiChart and KpiFooter inside. */ export function Kpi({ className, size = "default", ...props }: ComponentProps<"div"> & { size?: "default" | "sm" }) { return ( ); } export function KpiHeader({ className, ...props }: ComponentProps<"div">) { return (

); } export function KpiIcon({ className, ...props }: ComponentProps<"span">) { return ( ); } export function KpiLabel({ className, ...props }: ComponentProps<"div">) { return (

); } /** Pushes to the end of the header: a menu button, a link, a toggle. */ export function KpiActions({ className, ...props }: ComponentProps<"div">) { return (

); } /** Value row: KpiValue, KpiTrend, an inline KpiChart. Fixed 32px so every KPI lines up. */ export function KpiMain({ className, ...props }: ComponentProps<"div">) { return (

); } export type KpiValueProps = Omit & { /** `null` or `undefined` shows a muted dash: the reading is missing, not zero. */ value?: number | null; size?: NumberValueProps["size"]; children?: ReactNode; }; export function KpiValue({ value, children, size = "lg", ...format }: KpiValueProps) { if (children != null) { return ( {children} ); } if (value == null) { return ( {"—"} No data ); } return ( ); } /** The trend chip, sized for a KPI. Renders nothing when there is no change to report. */ export function KpiTrend({ value, ...props }: Omit & { value?: number | null }) { if (value == null) return null; return ; } /** Muted "from $41,120" comparison. */ export function KpiFrom({ value, label = "from", className, ...format }: Omit & { label?: ReactNode }) { return ( {label} ); } export function KpiProgress({ value, label, showValue = true, className, }: { /** 0 to 100. */ value: number; label?: ReactNode; showValue?: boolean; className?: string; }) { return (

{label != null ? {label} : null} {showValue ? : null}

); } export function KpiFooter({ className, ...props }: ComponentProps<"div">) { return (

); } /** A designed "nothing here yet" for a whole KPI value row. */ export function KpiEmpty({ className, children = "No data for this period", ...props }: ComponentProps<"div">) { return (

{children}

); } /** Same footprint as the matching Kpi: pass the same chart, progress, footer and size flags. */ export function KpiSkeleton({ chart = "none", progress = false, footer = false, icon = false, size = "default", className, }: { chart?: "none" | "inline" | "bottom"; progress?: boolean; footer?: boolean; icon?: boolean; size?: "default" | "sm"; className?: string; }) { return (

{icon ? : null}

{chart === "inline" ? : }

{progress ? (

) : null} {chart === "bottom" ? ( ) : null} {footer ?

: null} ); } 32:T1bfc,"use client"; import { useId, useMemo, type ComponentProps } from "react"; import { Area, Bar, BarChart, ComposedChart, Line, LineChart, Tooltip, XAxis, YAxis } from "recharts"; import { ChartContainer, ChartTooltipContent, type ChartConfig } from "@/components/ui/chart"; import { cn } from "@/lib/utils"; import { toneVar } from "../chart-area/chart-shell"; import { formatNumberValue, type NumberValueFormatOptions } from "../number-value/format"; export type KpiPoint = { label: string; value: number | null }; export type KpiChartTone = "neutral" | "success" | "error"; export type KpiChartProps = { /** Points in order. A `null` value is a gap: it breaks the line and is drawn as a dashed bridge or a stub bar. */ data: KpiPoint[]; type?: "area" | "line" | "bar"; /** `inline` sits beside the value; `bottom` bleeds to the card edges. */ placement?: "inline" | "bottom"; /** Hover readout. */ tooltip?: boolean; /** Series name in the tooltip and the accessible summary. */ label?: string; tone?: KpiChartTone; valueFormat?: NumberValueFormatOptions; className?: string; }; const toneColor: Record = { neutral: toneVar("foreground"), success: toneVar("success"), error: toneVar("error"), }; /** Size is part of the contract: KpiSkeleton and KpiChart empty state use the same classes. */ export const kpiChartSize = { inline: "h-8 w-28 shrink-0", bottom: "h-16 w-full", } as const; const bleed = "-mx-(--card-spacing) w-auto last:-mb-(--card-spacing)"; export function KpiChart({ data: input, type = "area", placement = "bottom", tooltip = true, label = "Trend", tone = "neutral", valueFormat, className, }: KpiChartProps) { // Inline bars read as a barcode past a dozen points: keep the latest twelve. const data = useMemo(() => (type === "bar" && placement === "inline" ? input.slice(-12) : input), [input, type, placement]); const gradientId = useId().replace(/:/g, ""); const real = data.filter((p) => p.value != null); const rootClass = cn(kpiChartSize[placement], placement === "bottom" && bleed, className); const rows = useMemo(() => { const max = Math.max(...real.map((p) => p.value as number), 0); return data.map((p, i) => { const gapNeighbour = p.value != null && (data[i - 1]?.value === null || data[i + 1]?.value === null); return { label: p.label, value: p.value, // Dashed bridge across a gap: only the points either side of it. bridge: gapNeighbour ? p.value : undefined, // Placeholder bar where a bar chart has no reading. stub: p.value == null ? max * 0.07 : undefined, }; }); }, [data, real]); if (real.length === 0) { return (

{placement === "bottom" ? ( No data yet ) : null}

); } const first = real[0].value as number; const last = real[real.length - 1].value as number; const summary = `${label}, ${data.length} points from ${formatNumberValue(first, valueFormat)} to ${formatNumberValue(last, valueFormat)}${ real.length < data.length ? `, ${data.length - real.length} missing` : "" }`; const config: ChartConfig = { value: { label, color: toneColor[tone] } }; const margin = placement === "inline" ? { top: 4, right: 3, bottom: 4, left: 3 } : { top: 6, right: 0, bottom: 0, left: 0 }; const common = { data: rows, margin } satisfies Partial>; const axes = ( <> ); const tip = tooltip ? ( { const row = props.payload?.[0]?.payload as { label: string; value: number | null } | undefined; if (!props.active || !row) return null; if (row.value == null) { return (

{row.label} No reading

); } return ( )} hideIndicator formatter={(v) => {formatNumberValue(Number(v), valueFormat)}} /> ); }} /> ) : null; const lineProps = { type: "monotone" as const, stroke: "var(--color-value)", strokeWidth: 1.75, dot: false, activeDot: { r: 3.5, fill: "var(--color-value)", stroke: "var(--card)", strokeWidth: 2 }, isAnimationActive: "auto" as const, animationDuration: 240, animationEasing: "ease-out" as const, }; const bridge = ( ); return ( {type === "bar" ? ( {axes} {tip} ) : type === "line" ? ( {axes} {tip} {bridge} ) : ( {axes} {tip} {bridge} )} ); } 33:Tca4,"use client"; import { useState, type ReactNode } from "react"; import { cva, type VariantProps } from "class-variance-authority"; import { cn } from "@/lib/utils"; import { formatNumberValue, type NumberValueFormat, type NumberValueFormatOptions } from "./format"; export { formatNumberValue, type NumberValueFormat, type NumberValueFormatOptions }; const numberValue = cva("inline-flex items-baseline gap-[0.25em] align-baseline tabular-nums", { variants: { size: { sm: "text-sm", default: "text-base", lg: "text-2xl leading-8 font-medium tracking-tight", xl: "text-4xl leading-10 font-medium tracking-tight", }, }, defaultVariants: { size: "default" }, }); export type NumberValueProps = NumberValueFormatOptions & VariantProps & { value: number; /** Flip changed digits in with the `--digit-*` tokens. Reduced motion swaps plainly. */ animate?: boolean; prefix?: ReactNode; suffix?: ReactNode; className?: string; }; type Snapshot = { text: string; prev: string }; export function NumberValue({ value, animate = false, prefix, suffix, size, className, ...formatOptions }: NumberValueProps) { const text = formatNumberValue(value, formatOptions); // Derive "previous text" during render, the React-approved way to compare against the last value. const [snap, setSnap] = useState({ text, prev: text }); if (snap.text !== text) setSnap({ text, prev: snap.text }); return ( {prefix != null ? ( {prefix} ) : null} {animate ? : {text}} {suffix != null ? ( {suffix} ) : null} ); } /** Characters are aligned from the right, so "999" to "1,000" flips every column that moved. */ function AnimatedText({ text, prev }: { text: string; prev: string }) { const chars = Array.from(text); const before = Array.from(prev); const changed = chars.map((char, i) => before[before.length - (chars.length - i)] !== char); const firstChanged = changed.indexOf(true); return ( <> {text} {chars.map((char, i) => { const from = chars.length - i; return ( {char === " " ? " " : char} ); })} ); } function staggerFor(step: number) { if (step <= 0) return undefined; return step === 1 ? "1" : "2"; } export default NumberValue; 34:T846,// Pure Intl formatting, no React and no "use client": safe to call from server components. export type NumberValueFormat = "decimal" | "currency" | "percent" | "compact" | "unit"; export type NumberValueFormatOptions = { /** `percent` follows Intl: 0.25 renders as 25%. */ format?: NumberValueFormat; /** ISO 4217 code, used by `currency`. */ currency?: string; /** Intl sanctioned unit identifier (`kilobyte`, `percent`, `millisecond`), used by `unit`. */ unit?: string; unitDisplay?: "short" | "narrow" | "long"; /** `compact` with `currency` gives $120K. `format: "compact"` is the plain-number shorthand. */ notation?: "standard" | "compact"; signDisplay?: "auto" | "always" | "exceptZero" | "negative" | "never"; locale?: string; minimumFractionDigits?: number; maximumFractionDigits?: number; }; /** Pure formatter behind `NumberValue`, exported for tooltips, axis ticks and labels. */ export function formatNumberValue( value: number, { format = "decimal", currency = "USD", unit, unitDisplay = "short", notation, signDisplay, locale = "en-US", minimumFractionDigits, maximumFractionDigits, }: NumberValueFormatOptions = {}, ): string { const options: Intl.NumberFormatOptions = { signDisplay, minimumFractionDigits, maximumFractionDigits }; if (notation) { options.notation = notation; if (notation === "compact" && maximumFractionDigits === undefined) options.maximumFractionDigits = 1; } if (format === "currency") { options.style = "currency"; options.currency = currency; } else if (format === "percent") { options.style = "percent"; } else if (format === "compact") { options.notation = "compact"; if (maximumFractionDigits === undefined) options.maximumFractionDigits = 1; } else if (format === "unit" && unit) { options.style = "unit"; options.unit = unit; options.unitDisplay = unitDisplay; } try { return new Intl.NumberFormat(locale, options).format(value); } catch { // Bad currency/unit/locale input never breaks a dashboard. return String(value); } } 35:Tc6b,import type { ReactNode } from "react"; import { IconArrowDownRight, IconArrowUpRight, IconMinus } from "@tabler/icons-react"; import { Badge } from "@/components/ui/badge"; import { cn } from "@/lib/utils"; import { formatNumberValue, type NumberValueFormat } from "../number-value/format"; export type TrendDirection = "up" | "down" | "flat"; /** The sign of a number decides direction. Anything within `threshold` of zero is flat. */ export function trendDirection(value: number, threshold = 0): TrendDirection { if (!Number.isFinite(value) || Math.abs(value) <= threshold) return "flat"; return value > 0 ? "up" : "down"; } export type TrendChipProps = { /** The change. With `format: 'percent'` (the default) this is in percentage points: 12.4 renders +12.4%. */ value: number; format?: Exclude; currency?: string; locale?: string; maximumFractionDigits?: number; /** Changes at or below this size read as flat. */ threshold?: number; /** A fall is good news (churn, refunds, load time): swaps the hues, never the arrow. */ invert?: boolean; size?: "sm" | "default" | "lg"; /** Show the sign. Default true; the arrow is the second channel, not a replacement. */ signed?: boolean; prefix?: ReactNode; suffix?: ReactNode; /** Replace the arrow, or `false` to drop it. */ indicator?: ReactNode | false; className?: string; }; const variantFor = { good: "green", bad: "destructive", flat: "neutral", } as const; const word = { up: "Up", down: "Down", flat: "No change" } as const; export function TrendChip({ value, format = "percent", currency, locale, maximumFractionDigits = 1, threshold = 0, invert = false, size = "default", signed = true, prefix, suffix, indicator, className, }: TrendChipProps) { const direction = trendDirection(value, threshold); const tone = direction === "flat" ? "flat" : (direction === "up") !== invert ? "good" : "bad"; const magnitude = Math.abs(value); const text = formatNumberValue(format === "percent" ? magnitude / 100 : magnitude, { format, currency, locale, maximumFractionDigits, signDisplay: "never", }); const sign = !signed || direction === "flat" ? "" : direction === "up" ? "+" : "−"; const Icon = direction === "up" ? IconArrowUpRight : direction === "down" ? IconArrowDownRight : IconMinus; return ( {indicator === false ? null : (indicator ?? )} {word[direction]} {prefix != null ? {prefix} : null} {sign} {text} {suffix != null ? {suffix} : null} ); } export default TrendChip; 36:Tcf6,import type { ReactNode } from "react"; import { KpiFrom, KpiLabel, KpiTrend, KpiValue } from "../kpi/kpi"; import { KpiGroup, KpiGroupItem, KpiGroupSkeleton, KpiGroupValue, } from "./kpi-group"; import { kpis } from "../_fixtures-b"; import { DemoPage, DemoSection } from "../../_shared/variant-frame"; const [revenue, orders, conversion, refunds] = kpis; function Section({ title, children }: { title: string; children: ReactNode }) { return {children}; } function Cells({ from = false }: { from?: boolean }) { return ( <> Revenue {from ? ( ) : null} Orders {from ? : null} Conversion {from ? ( ) : null} Refund rate {from ? ( ) : null} ); } export function KpiGroupDemo() { return (

); } 37:T517,import type { BlockMeta } from "../../../lib/block-meta"; export const kpiGroupMeta: BlockMeta = { slug: "kpi-group", title: "KPI Group", description: "Several metrics in one card with hairline dividers: side by side when there is room, stacked when there is not, or always vertical. Supports a 'from' comparison.", group: "charts", kobraDeps: ["badge", "card", "chart", "progress", "skeleton"], files: [ "blocks/charts/kpi-group/kpi-group.tsx", "blocks/charts/kpi/kpi.tsx", "blocks/charts/kpi/kpi-chart.tsx", "blocks/charts/number-value/number-value.tsx", "blocks/charts/number-value/format.ts", "blocks/charts/trend-chip/trend-chip.tsx", ], props: [ { name: "orientation", type: "'horizontal' | 'vertical'", default: "'horizontal'", description: "Horizontal is container-aware: cells stack below the group's xl container width." }, { name: "KpiGroupItem", type: "div", description: "One cell. Use KpiLabel, KpiValue, KpiFrom and KpiTrend from the kpi block inside it." }, { name: "KpiGroupValue", type: "div", description: "Wrapping value row." }, { name: "KpiGroupSkeleton count", type: "number", default: "3", description: "Loading state with the same footprint." }, ], tags: ["kpi", "stats", "dashboard", "group"], status: "ready", }; 23:["$","article",null,{"className":"grid gap-6","children":[["$","header",null,{"className":"grid gap-3","children":[["$","nav",null,{"aria-label":"breadcrumb","data-slot":"breadcrumb","className":"","children":["$","ol",null,{"data-slot":"breadcrumb-list","className":"flex flex-wrap items-center gap-1.5 text-sm wrap-break-word text-muted-foreground","children":[["$","li",null,{"data-slot":"breadcrumb-item","className":"inline-flex items-center gap-1","children":["$","$L2c",null,{"href":"/","data-slot":"breadcrumb-link","className":"transition-colors hover:text-foreground","children":"Kobra Commerce"}]}],["$","li",null,{"data-slot":"breadcrumb-separator","role":"presentation","aria-hidden":"true","className":"[&>svg]:size-3.5","children":["$","svg",null,{"ref":"$undefined","xmlns":"http://www.w3.org/2000/svg","width":24,"height":24,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"tabler-icon tabler-icon-chevron-right rtl:-scale-x-100","children":["$undefined",["$","path","svg-0",{"d":"M9 6l6 6l-6 6"}],"$undefined"]}]}],["$","li",null,{"data-slot":"breadcrumb-item","className":"inline-flex items-center gap-1","children":["$","$L2c",null,{"href":"/#charts","data-slot":"breadcrumb-link","className":"transition-colors hover:text-foreground","children":"Charts"}]}],["$","li",null,{"data-slot":"breadcrumb-separator","role":"presentation","aria-hidden":"true","className":"[&>svg]:size-3.5","children":["$","svg",null,{"ref":"$undefined","xmlns":"http://www.w3.org/2000/svg","width":24,"height":24,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"tabler-icon tabler-icon-chevron-right rtl:-scale-x-100","children":["$undefined",["$","path","svg-0",{"d":"M9 6l6 6l-6 6"}],"$undefined"]}]}],["$","li",null,{"data-slot":"breadcrumb-item","className":"inline-flex items-center gap-1","children":["$","span",null,{"data-slot":"breadcrumb-page","role":"link","aria-disabled":"true","aria-current":"page","className":"font-normal text-foreground","children":"KPI Group"}]}]]}]}],["$","div",null,{"className":"flex flex-wrap items-center gap-3","children":[["$","h1",null,{"className":"text-2xl font-bold","children":"KPI Group"}],["$","span",null,{"data-slot":"badge","data-variant":"green","className":"group/badge t-label relative isolate inline-flex w-fit shrink-0 items-center justify-center gap-1 rounded-full border border-transparent py-0.5 font-medium [--surface-calm:0.5] whitespace-nowrap transition-ring before:pointer-events-none before:absolute before:inset-0 before:-z-10 before:rounded-[inherit] before:border before:border-transparent before:transition-[scale,background-color,border-color] before:duration-150 before:ease-out focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 motion-reduce:before:transition-none has-data-[icon=inline-end]:pe-1.5 has-data-[icon=inline-start]:ps-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [a,button]:active:before:scale-[0.97] motion-reduce:[a,button]:active:before:scale-100 [&>svg]:pointer-events-none [&>svg]:size-3! t-surface t-surface-success text-[var(--badge-green-fg)] h-5 px-1.5 text-xs","children":"Ready"}]]}],["$","p",null,{"className":"max-w-[65ch] text-sm text-muted-foreground","children":"Several metrics in one card with hairline dividers: side by side when there is room, stacked when there is not, or always vertical. Supports a 'from' comparison."}]]}],["$","$L2d",null,{"preview":["$","$L2e",null,{"slug":"kpi-group","group":"charts","minHeight":640,"fixedHeight":"$undefined"}],"code":["$","$L2f",null,{"files":[{"path":"blocks/charts/kpi-group/kpi-group.tsx","code":"$30"},{"path":"blocks/charts/kpi/kpi.tsx","code":"$31"},{"path":"blocks/charts/kpi/kpi-chart.tsx","code":"$32"},{"path":"blocks/charts/number-value/number-value.tsx","code":"$33"},{"path":"blocks/charts/number-value/format.ts","code":"$34"},{"path":"blocks/charts/trend-chip/trend-chip.tsx","code":"$35"},{"path":"blocks/charts/kpi-group/demo.tsx","code":"$36"},{"path":"blocks/charts/kpi-group/meta.ts","code":"$37"}]}],"props":"$L38"}],"$L39"]}]