@glyphui/ui 0.1.1 → 0.2.0

package/src/components/radio-group/radio-group.tsx

@@ -0,0 +1,128 @@
+import { RadioGroup as RadioGroupPrimitive } from 'radix-ui'
+import { type ComponentProps, createContext, type ReactNode, useContext, useId } from 'react'
+import { type SlotClasses, useComponentConfig } from '../../hooks/use-component-config'
+import { useFieldControl } from '../field/field-context'
+import { type RadioGroupVariants, radioGroupStyles } from './radio-group.styles'
+
+type RootProps = Omit<
+  ComponentProps<typeof RadioGroupPrimitive.Root>,
+  'value' | 'defaultValue' | 'onValueChange' | 'orientation'
+>
+
+export interface RadioGroupProps<T extends string> extends RootProps, RadioGroupVariants {
+  value?: T
+  defaultValue?: T
+  /** Receives your value type, not `string`. */
+  onValueChange?: (value: T) => void
+}
+
+interface RadioGroupContextValue {
+  s: ReturnType<typeof radioGroupStyles>
+  slots: SlotClasses<'RadioGroup'>
+  variant: NonNullable<RadioGroupVariants['variant']>
+}
+
+const RadioGroupContext = createContext<RadioGroupContextValue | null>(null)
+
+function useRadioGroupContext(): RadioGroupContextValue {
+  return useContext(RadioGroupContext) ?? { s: radioGroupStyles(), slots: {}, variant: 'default' }
+}
+
+/**
+ * Pick exactly one option from a short visible list. `variant="card"` turns each option
+ * into a bordered card with a title and description.
+ */
+export function RadioGroup<T extends string>(inProps: RadioGroupProps<T>) {
+  const [props, slots] = useComponentConfig('RadioGroup', useFieldControl(inProps))
+  const { variant = 'default', orientation = 'vertical', onValueChange, className, ...rest } = props
+  const s = radioGroupStyles({ variant, orientation })
+  return (
+    <RadioGroupContext.Provider value={{ s, slots, variant }}>
+      <RadioGroupPrimitive.Root
+        data-slot="radio-group"
+        data-variant={variant}
+        orientation={orientation}
+        {...(onValueChange && { onValueChange: (value: string) => onValueChange(value as T) })}
+        className={s.root({ class: [slots.root, className] })}
+        {...rest}
+      />
+    </RadioGroupContext.Provider>
+  )
+}
+
+export interface RadioGroupItemProps
+  extends Omit<ComponentProps<typeof RadioGroupPrimitive.Item>, 'children'> {
+  /** Visible label. For card items this is the card title. */
+  label?: ReactNode
+  description?: ReactNode
+  /** Extra content inside a card item, below the description. */
+  children?: ReactNode
+}
+
+export function RadioGroupItem({
+  label,
+  description,
+  children,
+  className,
+  id,
+  ...props
+}: RadioGroupItemProps) {
+  const { s, slots, variant } = useRadioGroupContext()
+  const generated = useId()
+  const itemId = id ?? generated
+  const descriptionId = description ? `${itemId}-description` : undefined
+
+  if (variant === 'card') {
+    return (
+      <RadioGroupPrimitive.Item
+        id={itemId}
+        data-slot="radio-group-card"
+        aria-describedby={descriptionId}
+        className={s.card({ class: [slots.card, className] })}
+        {...props}
+      >
+        <span className={s.cardControl({ class: slots.cardControl })} aria-hidden="true">
+          <RadioGroupPrimitive.Indicator className={s.indicator({ class: slots.indicator })} />
+        </span>
+        <span className={s.text({ class: slots.text })}>
+          {label && <span className={s.label({ class: slots.label })}>{label}</span>}
+          {description && (
+            <span id={descriptionId} className={s.description({ class: slots.description })}>
+              {description}
+            </span>
+          )}
+          {children}
+        </span>
+      </RadioGroupPrimitive.Item>
+    )
+  }
+
+  const control = (
+    <RadioGroupPrimitive.Item
+      id={itemId}
+      data-slot="radio-group-item"
+      aria-describedby={descriptionId}
+      className={s.control({ class: [slots.control, !label && className] })}
+      {...props}
+    >
+      <RadioGroupPrimitive.Indicator className={s.indicator({ class: slots.indicator })} />
+    </RadioGroupPrimitive.Item>
+  )
+  if (!label) return control
+
+  return (
+    <div data-slot="radio-group-option" className={s.option({ class: [slots.option, className] })}>
+      {control}
+      <span className={s.text({ class: slots.text })}>
+        <label htmlFor={itemId} className={s.label({ class: slots.label })}>
+          {label}
+        </label>
+        {description && (
+          <span id={descriptionId} className={s.description({ class: slots.description })}>
+            {description}
+          </span>
+        )}
+      </span>
+    </div>
+  )
+}

package/src/components/scroll-area/index.ts

@@ -0,0 +1 @@
+export { ScrollArea, type ScrollAreaProps, scrollAreaStyles } from './scroll-area'

package/src/components/scroll-area/scroll-area.tsx

@@ -0,0 +1,68 @@
+import { ScrollArea as ScrollAreaPrimitive } from 'radix-ui'
+import type { ComponentProps } from 'react'
+import { useComponentConfig } from '../../hooks/use-component-config'
+import type { StylesEntry } from '../../utils/registry'
+import { focusRing } from '../../utils/styles'
+import { tv } from '../../utils/tv'
+
+export const scrollAreaStyles = tv({
+  slots: {
+    root: 'relative overflow-hidden',
+    viewport: ['size-full rounded-[inherit]', focusRing],
+    scrollbar: [
+      'flex touch-none select-none p-px transition-colors duration-(--glyph-duration-fast)',
+      'data-[orientation=vertical]:h-full data-[orientation=vertical]:w-2.5 data-[orientation=vertical]:border-l data-[orientation=vertical]:border-l-transparent',
+      'data-[orientation=horizontal]:h-2.5 data-[orientation=horizontal]:flex-col data-[orientation=horizontal]:border-t data-[orientation=horizontal]:border-t-transparent',
+    ],
+    thumb: 'relative flex-1 rounded-pill bg-border-strong hover:bg-faint-foreground',
+    corner: 'bg-transparent',
+  },
+})
+
+declare module '@glyphui/tokens' {
+  interface GlyphComponentRegistry {
+    ScrollArea: StylesEntry<typeof scrollAreaStyles>
+  }
+}
+
+export interface ScrollAreaProps extends ComponentProps<typeof ScrollAreaPrimitive.Root> {
+  /** Which scrollbars to show. Default vertical. */
+  orientation?: 'vertical' | 'horizontal' | 'both'
+  viewportClassName?: string
+}
+
+/**
+ * A scrollable region with slim, theme-colored scrollbars. Give it a height (or width)
+ * with `className`, e.g. `h-72`.
+ */
+export function ScrollArea(inProps: ScrollAreaProps) {
+  const [props, slots] = useComponentConfig('ScrollArea', inProps)
+  const { orientation = 'vertical', viewportClassName, className, children, ...rest } = props
+  const s = scrollAreaStyles()
+  const bar = (o: 'vertical' | 'horizontal') => (
+    <ScrollAreaPrimitive.Scrollbar
+      data-slot="scroll-area-scrollbar"
+      orientation={o}
+      className={s.scrollbar({ class: slots.scrollbar })}
+    >
+      <ScrollAreaPrimitive.Thumb className={s.thumb({ class: slots.thumb })} />
+    </ScrollAreaPrimitive.Scrollbar>
+  )
+  return (
+    <ScrollAreaPrimitive.Root
+      data-slot="scroll-area"
+      className={s.root({ class: [slots.root, className] })}
+      {...rest}
+    >
+      <ScrollAreaPrimitive.Viewport
+        data-slot="scroll-area-viewport"
+        className={s.viewport({ class: [slots.viewport, viewportClassName] })}
+      >
+        {children}
+      </ScrollAreaPrimitive.Viewport>
+      {orientation !== 'horizontal' && bar('vertical')}
+      {orientation !== 'vertical' && bar('horizontal')}
+      <ScrollAreaPrimitive.Corner className={s.corner({ class: slots.corner })} />
+    </ScrollAreaPrimitive.Root>
+  )
+}

package/src/components/sheet/index.ts

@@ -0,0 +1,13 @@
+export {
+  Sheet,
+  SheetBody,
+  SheetClose,
+  SheetContent,
+  type SheetContentProps,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from './sheet'
+export { type SheetVariants, sheetStyles } from './sheet.styles'

package/src/components/sheet/sheet.styles.ts

@@ -0,0 +1,60 @@
+import type { StylesEntry } from '../../utils/registry'
+import { focusRing, transition } from '../../utils/styles'
+import { tv, type VariantProps } from '../../utils/tv'
+
+export const sheetStyles = tv({
+  slots: {
+    overlay: 'fixed inset-0 z-50 animate-fade-in bg-overlay',
+    content: [
+      'fixed z-50 flex flex-col gap-5 border-border bg-surface p-6 text-foreground shadow-lg outline-none',
+      'transition-[translate] duration-(--glyph-duration-slow) ease-standard',
+    ],
+    close: [
+      'absolute top-4 right-4 inline-flex size-7 cursor-pointer items-center justify-center rounded-sm text-muted-foreground hover:bg-muted hover:text-foreground [&>svg]:size-4',
+      transition,
+      focusRing,
+    ],
+    header: 'flex flex-col gap-1.5 pr-8',
+    title: 'font-display text-h4 text-foreground',
+    description: 'text-small text-muted-foreground',
+    body: '-mx-6 min-h-0 flex-1 overflow-y-auto px-6 text-small',
+    footer: 'mt-auto flex flex-col-reverse gap-2 sm:flex-row sm:justify-end',
+  },
+  variants: {
+    // Slide in from the edge using @starting-style (Tailwind's `starting:` variant).
+    side: {
+      right: {
+        content:
+          'inset-y-0 right-0 h-full w-full border-l-(length:--glyph-border-width) starting:translate-x-full',
+      },
+      left: {
+        content:
+          'inset-y-0 left-0 h-full w-full border-r-(length:--glyph-border-width) starting:-translate-x-full',
+      },
+      top: {
+        content:
+          'inset-x-0 top-0 max-h-[85dvh] border-b-(length:--glyph-border-width) starting:-translate-y-full',
+      },
+      bottom: {
+        content:
+          'inset-x-0 bottom-0 max-h-[85dvh] rounded-t-xl border-t-(length:--glyph-border-width) starting:translate-y-full',
+      },
+    },
+    size: { sm: {}, md: {}, lg: {}, xl: {} },
+  },
+  compoundVariants: [
+    { side: ['left', 'right'], size: 'sm', class: { content: 'sm:max-w-sm' } },
+    { side: ['left', 'right'], size: 'md', class: { content: 'sm:max-w-md' } },
+    { side: ['left', 'right'], size: 'lg', class: { content: 'sm:max-w-xl' } },
+    { side: ['left', 'right'], size: 'xl', class: { content: 'sm:max-w-3xl' } },
+  ],
+  defaultVariants: { side: 'right', size: 'md' },
+})
+
+export type SheetVariants = VariantProps<typeof sheetStyles>
+
+declare module '@glyphui/tokens' {
+  interface GlyphComponentRegistry {
+    Sheet: StylesEntry<typeof sheetStyles>
+  }
+}

package/src/components/sheet/sheet.tsx

@@ -0,0 +1,108 @@
+import { Dialog as DialogPrimitive } from 'radix-ui'
+import type { ComponentProps } from 'react'
+import { useComponentConfig } from '../../hooks/use-component-config'
+import { CloseIcon } from '../dialog/close-icon'
+import { type SheetVariants, sheetStyles } from './sheet.styles'
+
+function useParts() {
+  const [, slots] = useComponentConfig('Sheet', {})
+  return { s: sheetStyles(), slots }
+}
+
+/** A panel that slides in from an edge: filters, details, settings, mobile navigation. */
+export const Sheet = DialogPrimitive.Root
+export const SheetTrigger = DialogPrimitive.Trigger
+export const SheetClose = DialogPrimitive.Close
+
+export interface SheetContentProps
+  extends ComponentProps<typeof DialogPrimitive.Content>,
+    SheetVariants {
+  /** Show the close button in the corner. Default true. */
+  showClose?: boolean
+  overlayClassName?: string
+}
+
+export function SheetContent(inProps: SheetContentProps) {
+  const [props, slots] = useComponentConfig('Sheet', inProps)
+  const { side, size, showClose = true, overlayClassName, className, children, ...rest } = props
+  const s = sheetStyles({ side, size })
+  return (
+    <DialogPrimitive.Portal>
+      <DialogPrimitive.Overlay
+        data-slot="sheet-overlay"
+        className={s.overlay({ class: [slots.overlay, overlayClassName] })}
+      />
+      <DialogPrimitive.Content
+        data-slot="sheet-content"
+        data-side={side ?? 'right'}
+        className={s.content({ class: [slots.content, className] })}
+        {...rest}
+      >
+        {children}
+        {showClose && (
+          <DialogPrimitive.Close
+            data-slot="sheet-close"
+            aria-label="Close"
+            className={s.close({ class: slots.close })}
+          >
+            <CloseIcon />
+          </DialogPrimitive.Close>
+        )}
+      </DialogPrimitive.Content>
+    </DialogPrimitive.Portal>
+  )
+}
+
+export function SheetHeader({ className, ...props }: ComponentProps<'div'>) {
+  const { s, slots } = useParts()
+  return (
+    <div
+      data-slot="sheet-header"
+      className={s.header({ class: [slots.header, className] })}
+      {...props}
+    />
+  )
+}
+
+export function SheetTitle({ className, ...props }: ComponentProps<typeof DialogPrimitive.Title>) {
+  const { s, slots } = useParts()
+  return (
+    <DialogPrimitive.Title
+      data-slot="sheet-title"
+      className={s.title({ class: [slots.title, className] })}
+      {...props}
+    />
+  )
+}
+
+export function SheetDescription({
+  className,
+  ...props
+}: ComponentProps<typeof DialogPrimitive.Description>) {
+  const { s, slots } = useParts()
+  return (
+    <DialogPrimitive.Description
+      data-slot="sheet-description"
+      className={s.description({ class: [slots.description, className] })}
+      {...props}
+    />
+  )
+}
+
+export function SheetBody({ className, ...props }: ComponentProps<'div'>) {
+  const { s, slots } = useParts()
+  return (
+    <div data-slot="sheet-body" className={s.body({ class: [slots.body, className] })} {...props} />
+  )
+}
+
+export function SheetFooter({ className, ...props }: ComponentProps<'div'>) {
+  const { s, slots } = useParts()
+  return (
+    <div
+      data-slot="sheet-footer"
+      className={s.footer({ class: [slots.footer, className] })}
+      {...props}
+    />
+  )
+}

package/src/components/slider/index.ts

@@ -0,0 +1,2 @@
+export { Slider, type SliderMark, type SliderProps, type SliderValue } from './slider'
+export { type SliderVariants, sliderStyles } from './slider.styles'

package/src/components/slider/slider.styles.ts

@@ -0,0 +1,32 @@
+import type { StylesEntry } from '../../utils/registry'
+import { tv, type VariantProps } from '../../utils/tv'
+
+export const sliderStyles = tv({
+  slots: {
+    wrapper: 'grid w-full gap-1.5',
+    root: 'relative flex h-5 w-full touch-none select-none items-center data-disabled:cursor-not-allowed data-disabled:opacity-50',
+    track: 'relative h-1.5 w-full grow overflow-hidden rounded-pill bg-muted',
+    range: 'absolute h-full bg-primary',
+    thumb: [
+      'relative block size-4 cursor-grab rounded-pill border-2 border-primary bg-background shadow-sm outline-none active:cursor-grabbing',
+      'transition-[box-shadow] duration-(--glyph-duration-fast) ease-standard',
+      'hover:ring-4 hover:ring-ring/15 focus-visible:ring-4 focus-visible:ring-ring/30',
+      'data-disabled:cursor-not-allowed',
+    ],
+    value:
+      'pointer-events-none absolute bottom-full left-1/2 mb-2 -translate-x-1/2 whitespace-nowrap rounded-xs bg-secondary px-1.5 py-0.5 font-mono text-caption text-secondary-foreground tabular-nums',
+    marks: 'relative h-4 w-full',
+    mark: 'absolute top-0 -translate-x-1/2 text-caption text-faint-foreground tabular-nums',
+  },
+  variants: {
+    showValue: { true: { wrapper: 'pt-7' } },
+  },
+})
+
+export type SliderVariants = VariantProps<typeof sliderStyles>
+
+declare module '@glyphui/tokens' {
+  interface GlyphComponentRegistry {
+    Slider: StylesEntry<typeof sliderStyles>
+  }
+}

package/src/components/slider/slider.tsx

@@ -0,0 +1,131 @@
+import { Slider as SliderPrimitive } from 'radix-ui'
+import type { ReactNode } from 'react'
+import { useComponentConfig } from '../../hooks/use-component-config'
+import { useFieldControl } from '../field/field-context'
+import { sliderStyles } from './slider.styles'
+
+export type SliderValue = number | readonly [number, number]
+
+export interface SliderMark {
+  value: number
+  label?: ReactNode
+}
+
+export interface SliderProps<V extends SliderValue> {
+  /** A number for one thumb, a `[min, max]` tuple for a range. */
+  value?: V
+  defaultValue?: V
+  onValueChange?: (value: V) => void
+  /** Fires once when the user releases the thumb. Use it for expensive updates. */
+  onValueCommit?: (value: V) => void
+  min?: number
+  max?: number
+  step?: number
+  /** Minimum distance between range thumbs, in steps. */
+  minStepsBetweenThumbs?: number
+  /** Labels shown under the track at given values. */
+  marks?: readonly (number | SliderMark)[]
+  /** Show the current value above each thumb. Pass a function to format it. */
+  showValue?: boolean | ((value: number) => ReactNode)
+  disabled?: boolean
+  name?: string
+  id?: string
+  className?: string
+  'aria-label'?: string
+  'aria-describedby'?: string
+  'aria-invalid'?: boolean
+  /** Accessible names for range thumbs. Default: "Minimum", "Maximum". */
+  thumbLabels?: readonly [string, string]
+}
+
+const toArray = (value: SliderValue | undefined): number[] | undefined =>
+  value === undefined ? undefined : typeof value === 'number' ? [value] : [...value]
+
+/** Choose a number, or a range with two thumbs, by dragging or with arrow keys. */
+export function Slider<V extends SliderValue = number>(inProps: SliderProps<V>) {
+  const [props, slots] = useComponentConfig('Slider', useFieldControl(inProps))
+  const {
+    value,
+    defaultValue,
+    onValueChange,
+    onValueCommit,
+    min = 0,
+    max = 100,
+    step = 1,
+    minStepsBetweenThumbs,
+    marks,
+    showValue = false,
+    disabled,
+    name,
+    id,
+    className,
+    thumbLabels = ['Minimum', 'Maximum'],
+    'aria-label': ariaLabel,
+    'aria-describedby': ariaDescribedBy,
+    'aria-invalid': ariaInvalid,
+  } = props
+  const isRange = Array.isArray(value ?? defaultValue)
+  const fromArray = (next: number[]) => (isRange ? [next[0], next[1]] : next[0]) as V
+  const current = toArray(value) ?? toArray(defaultValue) ?? [min]
+  const s = sliderStyles({ showValue: Boolean(showValue) })
+  const format = typeof showValue === 'function' ? showValue : (n: number) => n
+
+  return (
+    <div data-slot="slider" className={s.wrapper({ class: [slots.wrapper, className] })}>
+      <SliderPrimitive.Root
+        className={s.root({ class: slots.root })}
+        min={min}
+        max={max}
+        step={step}
+        disabled={disabled}
+        name={name}
+        {...(minStepsBetweenThumbs !== undefined && { minStepsBetweenThumbs })}
+        {...(value !== undefined && { value: toArray(value) })}
+        {...(defaultValue !== undefined && { defaultValue: toArray(defaultValue) })}
+        {...(onValueChange && {
+          onValueChange: (next: number[]) => onValueChange(fromArray(next)),
+        })}
+        {...(onValueCommit && {
+          onValueCommit: (next: number[]) => onValueCommit(fromArray(next)),
+        })}
+      >
+        <SliderPrimitive.Track className={s.track({ class: slots.track })}>
+          <SliderPrimitive.Range className={s.range({ class: slots.range })} />
+        </SliderPrimitive.Track>
+        {current.map((thumbValue, index) => (
+          <SliderPrimitive.Thumb
+            key={index}
+            id={index === 0 ? id : undefined}
+            aria-label={isRange ? thumbLabels[index] : ariaLabel}
+            aria-describedby={ariaDescribedBy}
+            aria-invalid={ariaInvalid}
+            className={s.thumb({ class: slots.thumb })}
+          >
+            {showValue && (
+              <span className={s.value({ class: slots.value })} aria-hidden="true">
+                {format(thumbValue)}
+              </span>
+            )}
+          </SliderPrimitive.Thumb>
+        ))}
+      </SliderPrimitive.Root>
+      {marks && marks.length > 0 && (
+        <div className={s.marks({ class: slots.marks })} aria-hidden="true">
+          {marks.map((mark) => {
+            const m = typeof mark === 'number' ? { value: mark } : mark
+            const percent = ((m.value - min) / (max - min || 1)) * 100
+            return (
+              <span
+                key={m.value}
+                className={s.mark({ class: slots.mark })}
+                style={{ left: `${percent}%` }}
+              >
+                {m.label ?? m.value}
+              </span>
+            )
+          })}
+        </div>
+      )}
+    </div>
+  )
+}

package/src/components/stat-card/index.ts

@@ -0,0 +1,2 @@
+export { StatCard, type StatCardProps } from './stat-card'
+export { type StatCardVariants, statCardStyles } from './stat-card.styles'

package/src/components/stat-card/stat-card.styles.ts

@@ -0,0 +1,24 @@
+import type { StylesEntry } from '../../utils/registry'
+import { tv, type VariantProps } from '../../utils/tv'
+
+export const statCardStyles = tv({
+  slots: {
+    root: 'gap-2',
+    header: 'flex items-center justify-between gap-2',
+    label: 'text-small text-muted-foreground',
+    icon: 'flex size-8 shrink-0 items-center justify-center rounded-md bg-muted text-muted-foreground [&>svg]:size-4',
+    valueRow: 'flex flex-wrap items-baseline gap-x-2 gap-y-1',
+    value: 'font-display text-h2 tabular-nums text-foreground',
+    delta: 'gap-1 [&>svg]:size-3',
+    description: 'text-small text-faint-foreground',
+    chart: 'mt-1 min-w-0 text-primary',
+  },
+})
+
+export type StatCardVariants = VariantProps<typeof statCardStyles>
+
+declare module '@glyphui/tokens' {
+  interface GlyphComponentRegistry {
+    StatCard: StylesEntry<typeof statCardStyles>
+  }
+}

package/src/components/stat-card/stat-card.tsx

@@ -0,0 +1,108 @@
+import type { ReactNode } from 'react'
+import { useComponentConfig } from '../../hooks/use-component-config'
+import { Badge, type BadgeProps } from '../badge'
+import { Card, type CardProps } from '../card'
+import { statCardStyles } from './stat-card.styles'
+
+type Trend = 'up' | 'down' | 'neutral'
+
+export interface StatCardProps extends Omit<CardProps, 'children'> {
+  label: ReactNode
+  value: ReactNode
+  /** Change versus the previous period, e.g. "+12.4%". */
+  delta?: ReactNode
+  /** Direction of the change. Colors the delta: up is good unless `invertTrend` is set. */
+  trend?: Trend
+  /** For metrics where going down is good (churn, latency, cost). */
+  invertTrend?: boolean
+  icon?: ReactNode
+  description?: ReactNode
+  /** A sparkline or small chart under the value. Colored with the primary color by default. */
+  chart?: ReactNode
+}
+
+const ArrowUp = () => (
+  <svg
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2.5"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    aria-hidden="true"
+  >
+    <path d="M7 17 17 7M8 7h9v9" />
+  </svg>
+)
+const ArrowDown = () => (
+  <svg
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2.5"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    aria-hidden="true"
+  >
+    <path d="M7 7l10 10M17 8v9H8" />
+  </svg>
+)
+
+function deltaTone(trend: Trend, invert: boolean): BadgeProps['tone'] {
+  if (trend === 'neutral') return 'neutral'
+  const good = (trend === 'up') !== invert
+  return good ? 'success' : 'danger'
+}
+
+/** A key metric with its label, change versus the last period, and an optional chart. */
+export function StatCard(inProps: StatCardProps) {
+  const [props, slots] = useComponentConfig('StatCard', inProps)
+  const {
+    label,
+    value,
+    delta,
+    trend = 'neutral',
+    invertTrend = false,
+    icon,
+    description,
+    chart,
+    className,
+    ...cardProps
+  } = props
+  const s = statCardStyles()
+
+  return (
+    <Card
+      data-slot="stat-card"
+      className={s.root({ class: [slots.root, className] })}
+      {...cardProps}
+    >
+      <div className={s.header({ class: slots.header })}>
+        <p className={s.label({ class: slots.label })}>{label}</p>
+        {icon && (
+          <span className={s.icon({ class: slots.icon })} aria-hidden="true">
+            {icon}
+          </span>
+        )}
+      </div>
+      <div className={s.valueRow({ class: slots.valueRow })}>
+        <p data-slot="stat-card-value" className={s.value({ class: slots.value })}>
+          {value}
+        </p>
+        {delta !== undefined && (
+          <Badge
+            data-trend={trend}
+            tone={deltaTone(trend, invertTrend)}
+            className={s.delta({ class: slots.delta })}
+          >
+            {trend === 'up' && <ArrowUp />}
+            {trend === 'down' && <ArrowDown />}
+            {delta}
+          </Badge>
+        )}
+      </div>
+      {description && <p className={s.description({ class: slots.description })}>{description}</p>}
+      {chart && <div className={s.chart({ class: slots.chart })}>{chart}</div>}
+    </Card>
+  )
+}