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:T5b9,.cr-stat { display: flex; flex-direction: column; gap: var(--cr-space-2); box-sizing: border-box; padding: var(--cr-space-4) var(--cr-space-5); border-radius: var(--cr-radius-lg); color: var(--cr-color-text-default); font-family: var(--cr-font-family-sans); } .cr-stat__label { color: var(--cr-color-text-muted); font-size: var(--cr-font-size-xs); font-weight: var(--cr-font-weight-semibold); } .cr-stat__row { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--cr-space-3); } .cr-stat__value { font-family: var(--cr-font-family-display); font-size: var(--cr-font-size-3xl); font-weight: var(--cr-font-weight-bold); font-variant-numeric: tabular-nums; letter-spacing: var(--cr-font-tracking-tight); line-height: 1.15; } .cr-stat__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cr-space-2); } .cr-stat__trend { display: inline-flex; align-items: center; gap: var(--cr-space-1); padding: 2px var(--cr-space-2) 2px 6px; border-radius: var(--cr-radius-full); background: var(--cr-color-bg-subtle); color: var(--cr-color-text-secondary); font-size: var(--cr-font-size-xs); font-weight: var(--cr-font-weight-semibold); } .cr-stat__trend[data-tone='bad'] { background: var(--cr-color-status-failed-bg); color: var(--cr-color-status-failed-fg); } .cr-stat__note { color: var(--cr-color-text-muted); font-size: var(--cr-font-size-xs); } 53:T761,import type { ReactNode } from 'react'; import { cx } from '@/lib/creance/cx'; import { ArrowDownIcon, ArrowUpIcon, MinusIcon } from '@/lib/creance/icons'; import { VisuallyHidden } from '@/lib/creance/VisuallyHidden'; import './StatCard.css'; export interface StatTrend { direction: 'up' | 'down' | 'flat'; /** The amount of change: "12%", "4", "No change". */ label: ReactNode; /** `bad` turns the chip red. Up is not always good: use it for a change that is bad news. */ tone?: 'neutral' | 'bad'; } export interface StatCardProps { /** What the number is. */ label: ReactNode; value: ReactNode; trend?: StatTrend; /** Beside the trend: what it is compared with, or a second fact. */ note?: ReactNode; /** Beside the value, usually a Sparkline. */ chart?: ReactNode; className?: string; } const words = { up: 'Up', down: 'Down', flat: '' }; const icons = { up: , down: , flat: }; /** One number, what it is, and how it moved. The arrow carries the direction, and is read out in words. */ export function StatCard({ label, value, trend, note, chart, className }: StatCardProps) { return (

{label} {value} {chart} {(trend || note) && ( {trend && ( {icons[trend.direction]} {words[trend.direction] && {words[trend.direction]} } {trend.label} )} {note && {note}} )}

); } 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":[null,["$","$L50",null,{"namespace":"@creance","registryDependencies":["https://creance.pages.dev/r/creance-base.json"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"stat-card/StatCard.css","content":"$52","type":"registry:file","target":"@components/creance/stat-card/StatCard.css"},{"path":"stat-card/StatCard.tsx","content":"$53","type":"registry:ui","target":"@components/creance/stat-card/StatCard.tsx"}],"className":"h-[70svh] min-h-80"}]]}]