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: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; 31: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; 32: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); } } 33:T815,import type { ReactNode } from "react"; import { IconBolt } from "@tabler/icons-react"; import { TrendChip } from "./trend-chip"; import { DemoPage, DemoRow, DemoSection } from "../../_shared/variant-frame"; function Group({ label, children }: { label: string; children: ReactNode }) { return ( {children} ); } export function TrendChipDemo() { return ( } />

); } 34:T662,import type { BlockMeta } from "../../../lib/block-meta"; export const trendChipMeta: BlockMeta = { slug: "trend-chip", title: "Trend Chip", description: "A badge that reads a change at a glance: up, down or flat from the sign of a number, with the arrow and the sign as a second channel to colour.", group: "charts", kobraDeps: ["badge"], files: ["blocks/charts/trend-chip/trend-chip.tsx", "blocks/charts/number-value/number-value.tsx", "blocks/charts/number-value/format.ts"], props: [ { name: "value", type: "number", description: "The change. Percentage points when format is percent: 12.4 renders +12.4%." }, { name: "format", type: "'percent' | 'decimal' | 'currency' | 'compact'", default: "'percent'", description: "Intl style for the magnitude." }, { name: "threshold", type: "number", default: "0", description: "Changes at or below this size read as flat." }, { name: "invert", type: "boolean", default: "false", description: "A fall is good news: swaps the success and error hues, keeps the arrow." }, { name: "size", type: "'sm' | 'default' | 'lg'", default: "'default'", description: "Chip size." }, { name: "signed", type: "boolean", default: "true", description: "Show + or minus in front of the number." }, { name: "prefix", type: "ReactNode", description: "Text before the number." }, { name: "suffix", type: "ReactNode", description: "Text after the number, such as 'vs last month'." }, { name: "indicator", type: "ReactNode | false", description: "Replace the arrow, or false to drop it." }, ], tags: ["trend", "badge", "delta", "kpi"], 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":"Trend Chip"}]}]]}]}],["$","div",null,{"className":"flex flex-wrap items-center gap-3","children":[["$","h1",null,{"className":"text-2xl font-bold","children":"Trend Chip"}],["$","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":"A badge that reads a change at a glance: up, down or flat from the sign of a number, with the arrow and the sign as a second channel to colour."}]]}],["$","$L2d",null,{"preview":["$","$L2e",null,{"slug":"trend-chip","group":"charts","minHeight":640,"fixedHeight":"$undefined"}],"code":["$","$L2f",null,{"files":[{"path":"blocks/charts/trend-chip/trend-chip.tsx","code":"$30"},{"path":"blocks/charts/number-value/number-value.tsx","code":"$31"},{"path":"blocks/charts/number-value/format.ts","code":"$32"},{"path":"blocks/charts/trend-chip/demo.tsx","code":"$33"},{"path":"blocks/charts/trend-chip/meta.ts","code":"$34"}]}],"props":"$L35"}],"$L36"]}]