@podoba/react 0.0.18 → 0.0.20

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@podoba/react",
-	"version": "0.0.18",
+	"version": "0.0.20",
 	"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.20",
+		"@podoba/tailwind": "^0.0.20",
 		"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/components/stats-card.tsx

@@ -40,6 +40,15 @@ export type StatsCardProps = {
 	children?: ReactNode
 	/** Dark/inverted surface (gs's dark "Cloud" tile). */
 	dark?: boolean
+	/**
+	 * Vertical placement of the value band. `center` (default) is gs's
+	 * `contentAlign="center"` hero-count tile (value fills + centres, footer pinned
+	 * bottom). `top` sits the value directly under the eyebrow (gs's dark "Summary"
+	 * data tile) with the footer pushed to the bottom.
+	 */
+	align?: 'center' | 'top'
+	/** Mute the value colour (gs's Summary tile — a descriptive title, not a hero count). */
+	subtleValue?: boolean
 	/** Accessible label for the clickable card (defaults to nothing — title is read). */
 	'aria-label'?: string
 	className?: string
@@ -61,7 +70,11 @@ function StatsCardBody({
 	badge,
 	description,
 	dark,
-}: Pick<StatsCardProps, 'title' | 'value' | 'footer' | 'badge' | 'description' | 'dark'>) {
+	align = 'center',
+	subtleValue = false,
+}: Pick<StatsCardProps, 'title' | 'value' | 'footer' | 'badge' | 'description' | 'dark' | 'align' | 'subtleValue'>) {
+	const isTop = align === 'top'
+	const valueTone = dark ? (subtleValue ? 'text-white/60' : 'text-white') : subtleValue ? 'text-fg-muted' : 'text-fg'
 	return (
 		<>
 			<div className="flex items-center justify-between gap-2">
@@ -76,21 +89,27 @@ function StatsCardBody({
 				</span>
 			) : null}
 			{/*
-			 * gs Tile `contentAlign="center"`: the value sits in the CENTRE band of the
-			 * three-band tile (title top / value centred / footer bottom). The `flex-1`
-			 * band grows to fill the 208px tile and vertically centres the value, pushing
-			 * any footer to the bottom (no `mt-auto` needed). Value ramp = gs label-1
-			 * (1.875rem / 500 / 2rem line). Letter-spacing tracks gs 1:1: light tiles use
-			 * -0.56px via `tracking-wide`; the dark "Cloud" count tile uses gs's em-based
+			 * `center` (gs `contentAlign="center"`): the value sits in the CENTRE band —
+			 * `flex-1` grows to fill the tile and vertically centres it, pushing any footer
+			 * to the bottom. `top`: the value sits directly under the eyebrow (no grow) and
+			 * the footer takes `mt-auto` to stay pinned at the bottom. Value ramp = gs
+			 * label-1 (1.875rem / 500 / 2rem line). Letter-spacing tracks gs 1:1: light
+			 * tiles use -0.56px via `tracking-wide`; the dark count tile uses gs's em-based
 			 * `-0.02em` (`AssetsTile.module.scss .count`).
 			 */}
 			<span
-				className={`flex flex-1 items-center text-display font-medium leading-[2rem] ${dark ? 'tracking-normal text-white' : 'tracking-wide text-fg'}`}
+				className={`flex ${isTop ? 'items-start pt-6' : 'flex-1 items-center'} text-display font-medium leading-[2rem] ${dark ? 'tracking-normal' : 'tracking-wide'} ${valueTone}`}
 			>
-				{value}
+				{/*
+				 * Inner wrapper is deliberate: the band is a flex container, and flex
+				 * TRIMS the leading whitespace of an anonymous text run — so a value of
+				 * `<CountUp/> {' '} unit` collapses to "1version". Nesting the value in one
+				 * inline span makes it a single flex item, preserving the internal space.
+				 */}
+				<span>{value}</span>
 			</span>
 			{footer ? (
-				<span className={`pt-4 text-compact leading-4 ${dark ? 'text-white/50' : 'text-fg-muted'}`}>
+				<span className={`${isTop ? 'mt-auto ' : ''}pt-4 text-small leading-5 ${dark ? 'text-white/50' : 'text-fg-muted'}`}>
 					{footer}
 				</span>
 			) : null}
@@ -126,6 +145,8 @@ export function StatsCard({
 	asChild,
 	children,
 	dark,
+	align,
+	subtleValue,
 	className,
 	...rest
 }: StatsCardProps) {
@@ -136,7 +157,7 @@ export function StatsCard({
 		const cardClass = [baseSurface, dark ? darkSkin : lightSkin, anchorInteractive, child.props.className, className]
 			.filter(Boolean)
 			.join(' ')
-		return cloneElement(child, { className: cardClass } as { className: string }, <StatsCardBody title={title} value={value} footer={footer} badge={badge} description={description} dark={dark} />)
+		return cloneElement(child, { className: cardClass } as { className: string }, <StatsCardBody title={title} value={value} footer={footer} badge={badge} description={description} dark={dark} align={align} subtleValue={subtleValue} />)
 	}
 
 	if (onPress) {
@@ -148,13 +169,13 @@ export function StatsCard({
 				className={[dark ? darkSkin : '', className].filter(Boolean).join(' ')}
 				aria-label={rest['aria-label']}
 			>
-				<StatsCardBody title={title} value={value} footer={footer} badge={badge} description={description} dark={dark} />
+				<StatsCardBody title={title} value={value} footer={footer} badge={badge} description={description} dark={dark} align={align} subtleValue={subtleValue} />
 			</PressableCard>
 		)
 	}
 	return (
 		<div className={[baseSurface, dark ? darkSkin : lightSkin, className].filter(Boolean).join(' ')}>
-			<StatsCardBody title={title} value={value} footer={footer} badge={badge} description={description} dark={dark} />
+			<StatsCardBody title={title} value={value} footer={footer} badge={badge} description={description} dark={dark} align={align} subtleValue={subtleValue} />
 		</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";