@podoba/react 0.0.18 → 0.0.19

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@podoba/react",
-	"version": "0.0.18",
+	"version": "0.0.19",
 	"type": "module",
 	"description": "podoba React components — React Aria Components + Tailwind primitives + layout, built with uic.",
 	"repository": {
@@ -25,8 +25,8 @@
 		"typecheck": "tsc --build"
 	},
 	"dependencies": {
-		"@podoba/tokens": "^0.0.18",
-		"@podoba/tailwind": "^0.0.18",
+		"@podoba/tokens": "^0.0.19",
+		"@podoba/tailwind": "^0.0.19",
 		"react-aria-components": "1.18.0",
 		"class-variance-authority": "0.7.1",
 		"clsx": "2.1.1",

package/src/components/count-up.tsx

@@ -0,0 +1,59 @@
+import { useEffect, useRef, useState, type ElementType } from 'react'
+
+/**
+ * CountUp — animates a number from 0 up to `value` on mount (and whenever `value`
+ * changes), for the subtle "counting up" effect on dashboard stats. easeOutCubic over
+ * ~900ms by default. Respects `prefers-reduced-motion` (renders the final value
+ * immediately). Presentational only — pass formatting via `format`.
+ */
+export interface CountUpProps {
+	/** Target value to count up to. */
+	value: number
+	/** Animation duration in ms (default 900). */
+	durationMs?: number
+	/** Format the displayed number (default `toLocaleString`). */
+	format?: (n: number) => string
+	/** Element to render as (default `span`). */
+	as?: ElementType
+	className?: string
+}
+
+const easeOutCubic = (t: number): number => 1 - Math.pow(1 - t, 3)
+
+export function CountUp({
+	value,
+	durationMs = 900,
+	format = (n) => n.toLocaleString(),
+	as: Tag = 'span',
+	className,
+}: CountUpProps) {
+	const [display, setDisplay] = useState(value)
+	const rafRef = useRef<number | null>(null)
+	const startRef = useRef<number | null>(null)
+
+	useEffect(() => {
+		if (typeof window === 'undefined') return
+		const reduce = window.matchMedia?.('(prefers-reduced-motion: reduce)').matches
+		if (reduce || durationMs <= 0) {
+			setDisplay(value)
+			return
+		}
+		startRef.current = null
+		const tick = (now: number) => {
+			if (startRef.current === null) startRef.current = now
+			const progress = Math.min(1, (now - startRef.current) / durationMs)
+			setDisplay(Math.round(value * easeOutCubic(progress)))
+			if (progress < 1) rafRef.current = requestAnimationFrame(tick)
+		}
+		rafRef.current = requestAnimationFrame(tick)
+		return () => {
+			if (rafRef.current !== null) cancelAnimationFrame(rafRef.current)
+		}
+	}, [value, durationMs])
+
+	return (
+		<Tag className={className} aria-label={format(value)}>
+			{format(display)}
+		</Tag>
+	)
+}

package/src/components/stat-stack.tsx

@@ -0,0 +1,61 @@
+import type { ReactNode } from 'react'
+import { CountUp } from './count-up'
+
+/**
+ * StatStack — a "production compass" infographic: a fanned deck of coloured rounded
+ * bars, each showing an animated count + label (e.g. 55 Progress · 36 Done · 26
+ * Review). Bars cascade with a left inset that shrinks top→bottom and overlap
+ * vertically, later bars in front. The counts animate up via <CountUp>. Sits inside a
+ * dark data tile. Presentational only.
+ */
+export type StatStackTone = 'neutral' | 'green' | 'mint' | 'yellow' | 'pink' | 'blue'
+
+const TONE: Record<StatStackTone, string> = {
+	// Fixed decorative chip colours (they sit on a dark tile in both themes, so they
+	// do NOT theme-flip); dark text reads on all of them.
+	neutral: 'bg-[#eae7e0] text-fg',
+	green: 'bg-brand-green text-fg',
+	mint: 'bg-accent-mint text-fg',
+	yellow: 'bg-accent-yellow text-fg',
+	pink: 'bg-accent-pink text-fg',
+	blue: 'bg-accent-blue text-white',
+}
+
+export interface StatStackSegment {
+	value: number
+	label: ReactNode
+	tone: StatStackTone
+}
+
+export interface StatStackProps {
+	segments: StatStackSegment[]
+	className?: string
+}
+
+export function StatStack({ segments, className }: StatStackProps) {
+	const n = segments.length
+	return (
+		<div className={['flex flex-col', className].filter(Boolean).join(' ')}>
+			{segments.map((s, i) => (
+				<div
+					key={i}
+					className={[
+						'flex items-baseline gap-2 rounded-lg px-5 py-4 shadow-sm',
+						TONE[s.tone],
+					].join(' ')}
+					style={{
+						// Cascade: most-inset at the top, flush-left at the bottom; overlap the
+						// bar above; later bars sit in front.
+						marginLeft: `${(n - 1 - i) * 1.75}rem`,
+						marginRight: `${i * 1.25}rem`,
+						marginTop: i === 0 ? 0 : '-1rem',
+						zIndex: i + 1,
+					}}
+				>
+					<CountUp value={s.value} className="text-heading1 font-medium leading-none" />
+					<span className="text-heading3 font-medium leading-none">{s.label}</span>
+				</div>
+			))}
+		</div>
+	)
+}

package/src/index.ts

@@ -52,8 +52,10 @@ export * from "./layout/persistent-page-shell";
 
 // --- product patterns (label-driven; no domain coupling) ---
 export * from "./components/brand-page-header";
+export * from "./components/count-up";
 export * from "./components/cta-pill";
 export * from "./components/feature-tile";
+export * from "./components/stat-stack";
 export * from "./components/icons";
 export * from "./components/subtle";
 export * from "./components/stats-card";