Skip to content

responsive.mdx

Latest commit

 

History

History
130 lines (84 loc) · 3.55 KB

responsive.mdx

File metadata and controls

130 lines (84 loc) · 3.55 KB
Raw
title Responsive
description Responsive protocol schemas

{/* ⚠️ AUTO-GENERATED — DO NOT EDIT. Run build-docs.ts to regenerate. Hand-written docs live in the module folders under content/docs/. */}

Breakpoint Name Enum

Standard Tailwind-style breakpoint names (xs–2xl).

**Source:** `packages/spec/src/ui/responsive.zod.ts`

TypeScript Usage

import { BreakpointColumnMap, BreakpointName, BreakpointOrderMap, PerformanceConfig, ResponsiveConfig, ResponsiveStyles, StyleMap } from '@objectstack/spec/ui';
import type { BreakpointColumnMap, BreakpointName, BreakpointOrderMap, PerformanceConfig, ResponsiveConfig, ResponsiveStyles, StyleMap } from '@objectstack/spec/ui';

// Validate data
const result = BreakpointColumnMap.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

  • xs
  • sm
  • md
  • lg
  • xl
  • 2xl

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

PerformanceConfig

Performance optimization configuration

Properties

Property Type Required Description
lazyLoad boolean optional Enable lazy loading (defer rendering until visible)
virtualScroll { enabled: boolean; itemHeight?: number; overscan?: number } optional Virtual scrolling configuration
cacheStrategy Enum<'none' | 'cache-first' | 'network-first' | 'stale-while-revalidate'> optional Client-side data caching strategy
prefetch boolean optional Prefetch data before component is visible
pageSize number optional Number of items per page for pagination
debounceMs number optional Debounce interval for user interactions in milliseconds

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