Primitives / foldkit-primitives/media

Breakpoints

const · packages/primitives/src/media/breakpoints.ts:69

Args{ breakpoints: { readonly [x: string]: number; } }
Model{ width: number, breakpoint: string | null }
MessagesChanged { width: number }
Its full type
const Breakpoints: Bundle.Bundle<
  'Breakpoints',
  { readonly breakpoints: { readonly [x: string]: number } },
  { readonly width: number; readonly breakpoint: string | null },
  { readonly _tag: 'Changed'; readonly width: number },
  never,
  never,
  never,
  void,
  {},
  {}
>

Named breakpoints over the viewport width: one resize listener, derived names in update. Thresholds are mobile-first min-widths: the breakpoint is the largest name whose threshold is <= width. Ties break alphabetically so duplicates stay deterministic.

In the guides