All components
Stat
Key figures with label, value, and help text in three value sizes.
Installs per day
10,482
+12% this month
1234567891011121314import { Stat } from "#components/ui/ark-ui/stat.tsx";
export function Example() { return ( // size resolves once on Root; every part inherits it via context <Stat.Root size="md"> <Stat.Label>Installs per day</Stat.Label> <Stat.ValueText> 10,482 <Stat.ValueUnit>pkg</Stat.ValueUnit> </Stat.ValueText> <Stat.HelpText>+12% this month</Stat.HelpText> </Stat.Root> );}Sizes
Installs per day
10,482
+12% this month
Installs per day
10,482
+12% this month
Installs per day
10,482
+12% this month
Install
1npx stylexblocks add statSource
components/ui/ark-ui/stat.tsx
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124import * as stylex from "@stylexjs/stylex";import { createSlotRecipeContext } from "#lib/ark-ui/create-slot-recipe-context.tsx";import { defineSlotRecipe } from "#lib/recipe-props.ts";import { statIndicatorSvgVars } from '@stylexblocks/ui/slot-recipes/stat.stylex.ts'
import { fontSizes } from '@stylexblocks/ui/tokens/font-sizes.stylex.ts'import { fontWeights } from '@stylexblocks/ui/tokens/font-weights.stylex.ts'import { letterSpacings } from '@stylexblocks/ui/tokens/letter-spacings.stylex.ts'import { lineHeights } from '@stylexblocks/ui/tokens/line-heights.stylex.ts'import { semanticColors } from '@stylexblocks/ui/semantic-tokens/colors.stylex.ts'import { spacing } from '@stylexblocks/ui/tokens/spacing.stylex.ts'
const statRoot = stylex.create({ base: { display: 'flex', flexDirection: 'column', gap: 0, position: 'relative', flex: 1, },})
const statLabel = stylex.create({ base: { color: semanticColors.fgMuted, fontSize: fontSizes.sm, lineHeight: lineHeights.sm, },})
const statHelpText = stylex.create({ base: { color: semanticColors.fgMuted, fontSize: fontSizes.xs, lineHeight: lineHeights.xs, },})
const statValueUnit = stylex.create({ base: { color: semanticColors.fgMuted, fontSize: fontSizes.xs, lineHeight: lineHeights.xs, fontWeight: 'initial', letterSpacing: 'initial', },})
const statValueText = stylex.create({ base: { verticalAlign: 'baseline', fontWeight: fontWeights.semibold, letterSpacing: letterSpacings.tight, fontFeatureSettings: 'pnum', fontVariantNumeric: 'proportional-nums', display: 'inline-flex', gap: spacing._1, },})
const statValueTextSizes = stylex.create({ sm: { fontSize: fontSizes.xl, lineHeight: lineHeights.xl, }, md: { fontSize: fontSizes._2xl, lineHeight: lineHeights._2xl, }, lg: {},})
const statIndicator = stylex.create({ base: { display: 'inline-flex', alignItems: 'center', justifyContent: 'center', marginEnd: 1, [statIndicatorSvgVars.width]: '1em', [statIndicatorSvgVars.height]: '1em', },})
const statIndicatorSvg = stylex.create({ base: { width: statIndicatorSvgVars.width, height: statIndicatorSvgVars.height, },})
export type StatSize = keyof typeof statValueTextSizes
// defineSlotRecipe validates the shape at compile time: default values must// exist in the axis maps, and slot keys must be `styles` or a declared axisconst statSlotRecipe = defineSlotRecipe({ slots: { root: { styles: statRoot }, label: { styles: statLabel }, valueText: { styles: statValueText, sizes: statValueTextSizes }, valueUnit: { styles: statValueUnit }, helpText: { styles: statHelpText }, indicator: { styles: statIndicator }, }, defaultVariants: { size: "md" },});
/** * Stat — recipe and component colocated in one file. `<Stat.Root size>` * resolves the recipe once and every part inherits it through context; each * part composes via `asChild`. */const { withProvider, withContext } = createSlotRecipeContext(statSlotRecipe);
export const Stat = { // slot names resolve mechanically from the recipe maps above Root: withProvider("div", "root", "StatRoot"), Label: withContext("div", "label", "StatLabel"), ValueText: withContext("div", "valueText", "StatValueText"), ValueUnit: withContext("span", "valueUnit", "StatValueUnit"), HelpText: withContext("div", "helpText", "StatHelpText"), Indicator: withContext("span", "indicator", "StatIndicator"),};