ObjectStackResponsive
Responsive protocol schemas
Source: packages/spec/src/ui/responsive.zod.ts
TypeScript Usage
import { BreakpointColumnMapSchema, BreakpointName, BreakpointOrderMapSchema, ResponsiveConfigSchema, ResponsiveStylesSchema, StyleMapSchema } from '@objectstack/spec/ui';
import type { BreakpointColumnMap, BreakpointName, BreakpointOrderMap, ResponsiveConfig, ResponsiveStyles, StyleMap } from '@objectstack/spec/ui';
// Validate data
const result = BreakpointColumnMapSchema.parse(data);BreakpointColumnMap
Grid columns per breakpoint (1-12)
Properties
| Property | Type | Required | Description |
|---|---|---|---|
| xs | number | optional | |
| sm | number | optional | |
| md | number | optional | |
| lg | number | optional | |
| xl | number | optional | |
| 2xl | number | optional |
BreakpointName
Allowed Values
xssmmdlgxl2xl
BreakpointOrderMap
Display order per breakpoint
Properties
| Property | Type | Required | Description |
|---|---|---|---|
| xs | number | optional | |
| sm | number | optional | |
| md | number | optional | |
| lg | number | optional | |
| xl | number | optional | |
| 2xl | number | optional |
ResponsiveConfig
Responsive layout configuration
Properties
| Property | Type | Required | Description |
|---|---|---|---|
| breakpoint | Enum<'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'> | optional | Minimum breakpoint for visibility |
| hiddenOn | Enum<'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'>[] | optional | Hide on these breakpoints |
| columns | { xs?: number; sm?: number; md?: number; lg?: number; … } | optional | Grid columns per breakpoint |
| order | { xs?: number; sm?: number; md?: number; lg?: number; … } | optional | Display order per breakpoint |
ResponsiveStyles
Per-breakpoint scoped style maps (ADR-0065)
Properties
| Property | Type | Required | Description |
|---|---|---|---|
| large | Record<string, string | number> | optional | Unconditional base (desktop-first) |
| medium | Record<string, string | number> | optional | Applied at ≤ medium breakpoint |
| small | Record<string, string | number> | optional | Applied at ≤ small breakpoint |
| xsmall | Record<string, string | number> | optional | Applied at ≤ xsmall breakpoint |
StyleMap
CSS property → value map (camelCase keys; design tokens encouraged)
Type: Record<string, string | number>