Releases: platform-blocks/react-ui-library
Release list
1.0.0
v0.11.0
0.11.0
A large feature release. Two headline efforts land here: @platform-blocks/charts gets a new unified interaction engine (every chart now shares one pointer, hit-test, and tooltip pipeline), and @platform-blocks/ui gains a new theming color-role system plus several new components. There are a handful of breaking changes — all removals of superseded APIs — collected under Migration notes at the end.
Charts: a unified interaction engine
Previously every chart re-implemented pointer handling roughly its own way (~20 variations), tooltips flowed through a two-renderer pipeline (registerSeries + setCrosshair → useTooltipAggregator → ChartPopover), and touch/hover support was uneven — several charts were web-onMouseMove-only. This release replaces all of that with one frame + hit-test + pointer architecture that every chart type now shares. See packages/charts/src/interaction/TOOLTIP_MIGRATION.md for the full design.
Three new layers do the work:
core/frame—createFrameand theChartFrame/CartesianFrame/RadialFrametypes are a memoizable, non-React source of truth for the plot rect, scales, and pixel↔data transforms. This establishes a single container-origin pixel convention across the whole library, so charts no longer hand-roll padding math.core/hittest— one pluggableHitTesterinterface (createHitTesterplusPointSeriesHitTester,BandCategoryHitTester,CellGridHitTester,AngularSliceHitTester,RadarAxisHitTester).hit()returns the nearest single target; the optionalslice()returns every series' target at a given x/angle for multi-series tooltips. This replaces the four overlapping nearest-point routines and the per-chart inline hit-test loops.interaction/—normalizePointeris the single coordinate-truth function that emits container / plot / page spaces (plus inside-plot flags) for every web and native event.useChartPointeris the one cross-platform input path (web PointerEvents vs. native Responder, hidden behind one hook),ChartGestureSurfaceis a declarative full-bleed overlay around it, andChartActiveTooltipis the single themed tooltip (web-portaled, native absolute). Optional two-finger pinch is provided byuseOptionalPinch(touchDistance/touchCenter/resolveGestureHandler), which usesreact-native-gesture-handleronly if installed and never hard-depends on it.
What you get from this:
- Consistent, richer tooltips across every chart type — single-point and multi-series "slice" tooltips, with
renderHeader,renderEntry,sortEntries,filterEntry,maxEntries, and fullcustomTooltipcontrol, all throughChartActiveTooltip. - Native touch hover on charts that were previously web-only — Histogram, Heatmap, Radar, Funnel, Marimekko, and Sankey now respond to touch as well as mouse.
- The
enableCrosshairguide line is engine-driven from the active target's pixel position rather than a per-chart crosshair state.
RadialBarChart was expanded onto the new angular hit-test archetype and gained centerLabel / centerSubLabel props (text in the empty center of the ring). DonutChart's center-label focus (focusedSliceId) now actually tracks the hovered slice instead of only ever resetting. GaugeChart moved from the feedback category into charts.
New chart demos
LineChart→zoom— scroll-to-zoom, drag-to-pan, Shift-drag box-zoom, and double-tap reset, showcasingenablePanZoom/enableWheelZoom/enableBrushZoom/resetOnDoubleTap/zoomMode/minZoom.RadialBarChart→goal-progressandsatisfaction-gauge.
Charts test coverage
The tests/components/* suite was entirely broken under pnpm (the Jest transformIgnorePatterns never matched @testing-library/react-native, so no component test could run). That's fixed with a pnpm-aware pattern, and ~19 new chart component test suites were added (BarChart, BubbleChart, CandlestickChart, ComboChart, FunnelChart, GroupedBarChart, HeatmapChart, HistogramChart, MarimekkoChart, NetworkChart, PieChart, RadarChart, RadialBarChart, RidgeChart, SankeyChart, StackedAreaChart, StackedBarChart, ViolinChart) alongside new unit tests for the frame, hit-test, pointer-normalization, and geometry primitives.
New UI components
ColorInput— a full form field for picking a color: a labeled trigger with a live color preview plus hex / RGB / HSL text entry in a positioned dropdown. Supportsvalue/defaultValue/onChange,format('hex' | 'rgb' | 'hsl'),withAlpha,swatches/withSwatches,showPreview,showInput,clearable, and the same positioning API asAutoComplete(placement,flip,shift,offset,keyboardAvoidance).DataList— a description / key-value list with compound partsDataList.Item,DataList.ItemLabel, andDataList.ItemValue. Render from adata={[{ label, value }]}shorthand or by composing children. Supportsorientation('horizontal' | 'vertical'),withDivider,size,spacing,labelWidth, and color overrides.Menu.Sub(MenuSub) — nested flyout submenus inside aMenu.Dropdown. Opens on hover on web (press elsewhere), nested overlays unmount as a chain, and selecting a leaf item closes the whole chain. Props:label,startSection,disabled,color,w,maxH.GradientTextis now exported from the package root. It fills glyphs with a multi-stop linear gradient (native via@react-native-masked-view+ optionalexpo-linear-gradient, with a graceful fallback when the gradient dependency is absent). Props includecolors(required, ≥2),locations,angle,start/end, andposition.
New theming primitives
Two new modules are exported for building theme-aware, legible color variants — the same machinery Chip and Button now use internally.
variantRoles resolves a component-agnostic variant vocabulary so a light Chip, a light Badge, and any other component render identically on any theme:
resolveVariantRoles(theme, { variant, color, gradientStops })returns{ fill, border, text }for a variant ('filled' | 'outline' | 'light' | 'subtle' | 'gradient'). Because palettes invert between light and dark schemes, tinted variants are built by alpha-compositing the strong color over the livebackgrounds.surfacerather than hardcoding palette indices, and the text color is chosen by measured WCAG contrast against the real composited background — so it stays legible on custom themes and arbitrary hex colors.CORE_COLORS— the six token names (primary,secondary,success,warning,error,gray) treated as palettes; anything else is a raw color.- Types:
VariantRole,VariantRoles,ResolveVariantOptions.
colorUtils provides the underlying contrast helpers:
withAlpha(hex, alpha)— anrgba()wash from a solid hex.readableTextOn(fill)— the text color for a solid fill; prefers white on saturated fills and only falls back to dark when white would drop below 3:1 (keeps white on iOS blue, fixes orange/yellow).contrastRatio(a, b)— WCAG contrast ratio.composite(fg, bg, alpha)— Porter–Duff "over" to an opaque hex, so contrast can be measured against a real tint result.pickReadable(candidates, surface, min)— the first candidate clearingmincontrast, else the highest-contrast one.
A new variantContrast test walks every theme × color × variant combination and asserts the resolved text clears a legible contrast ratio, guarding against regressions.
PlatformBlocksThemeProvider (and PlatformBlocksThemeProviderProps) is now exported from the package root. It was previously an internal-only symbol; consumers can now wrap their app or nest scoped themes directly, with granular sub-contexts (useThemeVisuals, useThemeLayout) so components subscribe only to the slice they need.
Additions
DataTablegained a large set of props: row grouping and aggregation (groupBy,groupsDefaultExpanded,renderGroupHeader, per-columnaggregate/aggregateFormat,showFooterTotals,footerLabel), server-side pagination (manualPagination+paginationProps), CSV export (exportable,exportFileName,onExport), column reordering (enableColumnReordering,columnOrder,onColumnOrderChange), and anariaLabel.Toastviewport-offset API — new exportsuseToastViewportOffset/setToastViewportOffsetand typeToastViewportOffset({ top, bottom, left, right }), plusToastProviderpropsoffset(static) anddefaultVariant. Because theToastProviderusually sits above the app shell, it can't read header/safe-area layout from context; a component inside the shell can now publish the header height and safe-area insets so toast stacks position clear of the chrome (centered stacks shift to stay centered between side navs).Switch— newvariantprop:'filled' | 'outline' | 'ios' | 'android'.AutoComplete— newrenderValue(a rich single-select value overlay),caretHidden, andhighlightQuery;freeSolonow works together withmultiSelect.Chip— newdot/dotColorprops for a leading status dot.Accordion— per-itemcoloroverride so one accordion can mix accents.Pagination— the page-size changer is now wired up in the toolbar (showSizeChanger,pageSizeOptions,onPageSizeChange).Button—colornow accepts any palette token or raw hex across filled / light / subtle / outline / gradient (and ghost/link text); thevariantunion is documented to includesecondaryandnone.ClearButton— newiconSizeandstrokeprops to override the computed close-glyph size and stroke width.Gallery— toggles for the metadata panel, thumbnail strip, download button, keyboard/swipe navigation, backdrop opacity, and animation duration.
Fixes
- **
Textmerges nested sty...
v0.10.0
This is a platform-compatibility release: Platform Blocks now targets Expo SDK 56 and React Native 0.85, along with the runtime fixes that the React 19 / RN 0.85 / Hermes upgrade surfaced. No public component APIs changed or were removed.
Expo SDK 56 / React Native 0.85
@platform-blocks/ui and @platform-blocks/charts now build and test against the SDK 56 toolchain:
| Package | Version |
|---|---|
| react / react-dom | 19.2.3 |
| react-native | 0.85.3 |
| react-native-reanimated | 4.3.1 |
| react-native-worklets | 0.8.3 |
| react-native-safe-area-context | ~5.7.0 |
| react-native-screens | ~4.25.2 |
| react-native-svg | 15.15.4 |
| typescript | ~6.0.3 |
Peer-dependency ranges remain permissive (react >=18, react-native >=0.73), so the packages still work on older toolchains — but everything is now verified on React 19.2 / RN 0.85.
Fixes
ContextMenu no longer crashes on iOS / Android
<ContextMenu> registered document / window event listeners inside a useEffect unconditionally. Hermes evaluated that effect on native and threw because those globals don't exist there. The listeners are now guarded behind Platform.OS === 'web', so ContextMenu mounts cleanly on iOS and Android (where it uses the long-press path instead).
AppShell status bar no longer crashes on Android (SDK 56 edge-to-edge)
expo-navigation-bar removed setBackgroundColorAsync / setButtonStyleAsync in SDK 56 (Android edge-to-edge) in favor of a synchronous setStyle. StatusBarManager called the removed methods and threw undefined is not a function. It now feature-detects the API — preferring setStyle, falling back to the legacy async methods, and only setting a navigation-bar background color when that (legacy) method still exists — so it works across expo-navigation-bar versions.
StyleSheet.absoluteFillObject → StyleSheet.absoluteFill
React Native 0.85 dropped StyleSheet.absoluteFillObject from both its types and its runtime export. Eight components (Badge, Card, Chip, Dialog, Overlay, ShimmerText, DrawerNavigator, and the overlay renderer) referenced it, which silently broke absolute-fill positioning on native. They now use the equivalent StyleSheet.absoluteFill.
@platform-blocks/charts resolved to unpublished source on React Native
The charts package's react-native export condition pointed at ./src/index.ts, but src/ is not part of the published tarball — so Metro / Expo consumers installing from npm hit a module-not-found error. It now resolves to the built ./lib/esm/index.js, matching @platform-blocks/ui.
Quieter charts without a ChartInteractionProvider
LineChart, CandlestickChart, and the charts provider logged a console.warn on every render when used outside a ChartInteractionProvider. The interaction context is optional (standalone charts are fully supported), so the warnings have been removed — bringing those components in line with the other ~17 chart types that already treated it as optional.
Maintenance
@platform-blocks/chartsnow ships aLICENSEfile (MIT), matching@platform-blocks/ui.- Charts type declarations are now emitted as a full
.d.tstree viatsc(matching ui) instead of a single bundled file. The strictertscpass surfaced and removed 55 dead@ts-ignoredirectives that were suppressing nothing, and the charts source now passes the same ESLint config as ui. - Charts
reactpeer range widened from>=18.0.0 <20.0.0to>=18.0.0, matching ui and reflecting React 19 support. - Tooling parity between the two packages: shared ESLint flat config, rollup
resolve/commonjssettings, and.npmignore. - Reanimated 4.3
AnimatedStyletyping fix inKnob. - Docs site: the component playground no longer crashes under React 19 when an example's props include a React node (non-serializable defaults are now handled when computing the change-detection key), and the landing page uses a valid
downloadicon.
Migration notes
To adopt 0.10.0, move your app to Expo SDK 56 / React Native 0.85 (React 19.2). The fastest path:
npx expo install expo@^56
npx expo install --fixThat aligns react, react-native, react-native-reanimated (4.3), react-native-worklets (0.8), and the Expo modules to their SDK 56 versions. If you depend on the optional native modules that the UI package integrates with (expo-navigation-bar, expo-haptics, etc.), reinstall them via expo install so they land on SDK 56 builds.
No public component APIs changed in this release, so no application code changes are required beyond the platform bump.
v0.9.0
New Features
Slot props for inner Text and View elements
Most components now accept *Props overrides for the inner <Text> / <View> slots they render. Consumers can pass through any TextProps / ViewProps (style, weight, font family, accessibility, etc.) without rewriting the component or fighting children-prop precedence.
- Label slots (
labelProps): Accordion (titleProps), Avatar, Badge, Breadcrumbs (labelProps+separatorProps), Button, Checkbox, Chip, Indicator, Pagination (labelProps+activeLabelProps), Radio, Slider, Stepper, Switch, Tabs, Tooltip - Title / body slots (
titleProps/bodyProps): Dialog, Notice, Toast - Description slots (
descriptionProps): AutoComplete, Avatar, Checkbox, Input, Radio, Stepper, Switch, TimePicker - Section / control slots: AutoComplete + Input + TimePicker (
startSectionProps,endSectionProps), Spoiler (controlProps), DataTable cell text customization mergeSlotPropsis now exported from@platform-blocks/uiso custom components can adopt the same merge semantics (theme defaults → slot props override → explicit props win).
useDisclosure, useDebouncedValue, useDebouncedCallback, useMediaQuery, useHover
Five hooks promoted to the public API. All have tests, demos, and metadata.
import { useDisclosure, useDebouncedValue, useMediaQuery } from '@platform-blocks/ui';
const [opened, { open, close, toggle }] = useDisclosure(false);
const [debounced] = useDebouncedValue(query, 200);
const isCompact = useMediaQuery('(max-width: 640px)');Slider variants
<Slider> and <RangeSlider> accept a new variant prop with six visual treatments:
| Variant | Description |
|---|---|
default |
Standard track, filled active range, solid thumb |
filled |
Thicker, fully opaque inactive track (iOS-style) |
outline |
Transparent track + border; active range is a colored fill |
minimal |
Hairline track and a smaller, flatter thumb for dense UIs |
segmented |
Track is divided at tick boundaries; active region fills whole segments |
unstyled |
Strips all chrome — consumer styles via trackStyle / thumbStyle |
Variant size multipliers are applied at the consumer level so the thumb stays visually aligned with the track ends.
RadioGroup variants
<RadioGroup> accepts a variant prop with four layouts:
| Variant | Description |
|---|---|
default |
Classic stacked radio dots with labels |
card |
Each option is a bordered, padded surface; selected card gets a colored border, tinted background, and a check icon — ideal when options have descriptions |
segmented |
Joined buttons with shared borders, like an iOS/macOS segmented control (always horizontal) |
chip |
Compact rounded pills that wrap onto multiple lines — great for filters and tag pickers |
orientation is honored only by default; segmented is always horizontal and chip always wraps. Keyboard navigation (arrow-key cycling) and accessibilityRole="radio" are preserved across all variants.
Card.Section
Card gains a new <Card.Section> sub-component for full-bleed banners, dividers, and banded rows. Position-aware: the parent walks its children and tags the first/last sections so they only negate the relevant edges.
<Card padding={20} withBorder>
<Card.Section>
<Image source={hero} />
</Card.Section>
<Text>Body content keeps the parent padding.</Text>
<Card.Section withBorder>
<Text>Footer with a top divider.</Text>
</Card.Section>
</Card>Card also gains withBorder, borderColor, borderWidth, bg (palette name or CSS color), and testID. padding is widened from number to SizeValue (token or pixel).
Input variants and slot overrides
BaseInputProps exposes a variant of 'default' | 'filled' | 'outline' | 'unstyled', plus placeholderTextColor, labelProps, descriptionProps, startSectionProps, and endSectionProps. The variant set propagates to every component that extends BaseInputProps (Input, NumberInput, AutoComplete, TimePicker, etc.).
Divider enhancements
Divider is no longer just a line — it now supports:
variant:'solid' | 'dashed' | 'dotted' | 'gradient'colorVariant:'border' | 'subtle' | 'muted' | 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'gray'label(centered, start, or end content rendered in the middle of the line) +labelPropsopacityshorthandsizeaccepts a token or pixel thickness
Block bg shorthand and Text c / ff shorthands
<Block bg="primary">resolves to the palette's shade-1 tint;<Block bg="primary.6">picks an explicit shade; theme background keys ('surface','subtle','elevated','base') are also supported.<Text c="dimmed">for color shorthand and<Text ff="mono">for font-family shorthand.
Demo coverage
36 new demos shipped across the UI package, including: label-customization / title-customization / text-customization for the components that gained slot props, Slider/variants, Radio/variants + Radio/theming, Card/sections + Card/border-and-bg, Input/variants + Input/slot-styling, Divider/gradient-opacity, Block/bg-shorthand, and Text/c-shorthand + Text/ff.
Improvements
DataTableFilter is now publicly typed
DataTableFilter was already exported from ./components/DataTable but missed the public re-export at the package root. It's now reachable via import type { DataTableFilter } from '@platform-blocks/ui'.
Playground exposes RadioGroup, not just Radio
The Radio playground entry now mounts <RadioGroup> (matching the convention used by Tabs, Select, and SegmentedControl — the playground exposes the parent/group rather than the inner element). Variant and orientation are surfaced as live segmented controls.
Slider playground covers variants
The Slider playground entry surfaces variant as a segmented control across all six values, with valueLabelPosition, valueLabelOffset, valueLabelAlwaysOn, and valueLabelAsCard pinned for live tweaking.
Fixes
Typecheck regressions cleared
The docs app + UI package now typecheck cleanly (down from 71 errors to 0). Touched areas:
- Demo cleanup — removed references to props that no longer exist (
mobileMode,touchOptimized,swipeToClose,floatingPosition, etc.) onTableOfContents;xxssize token replaced withxs;<Row wrap>boolean →wrap="wrap"string;<Column bg=…>→<Block bg=…>(Column doesn't acceptbg);renderExpandedRow→expandableRowRenderon DataTable. - Test infrastructure —
Card.testID(legitimately missing fromCardProps) added;react-test-renderertypes replaced with a structural shim so the Divider rendering test compiles without@types/react-test-renderer;renderHookcallbacks for the debounce hooks now annotate their props parameter so the generic infers correctly. - Wrong import path in
apps/platform-blocks.com/utils/sourceCode.ts(../data/sourceCodeMap→./sourceCodeMap). - Strictness fixes in NumberInput, Rating, Ring, and QRCode demos/tests (typed callback params, palette fallbacks, narrowed reduce).
RadioGroup no longer requires theme.backgrounds for the default variant
Variant-only color tokens (accentTint, surfaceColor, etc.) are now computed lazily and only when variant !== 'default'. The default radio-dot path doesn't depend on theme.backgrounds anymore, which fixes 10 Radio tests that mocked a slim theme.
Migration notes
This release is predominantly additive. A few demos that referenced removed TableOfContents mobile props will need to drop those props if you copied them — the props were never on TableOfContentsProps, so they were silently broken anyway. If you imported DataTableFilter from @platform-blocks/ui/components/DataTable, the type is now also re-exported from the package root.
v0.8.0
Breaking Changes
Monorepo Restructure
The repository layout has been reorganized for clarity and scalability:
ui/→packages/ui/charts/→packages/charts/docs/→apps/platform-blocks.com/
Migration: Update any local scripts, CI pipelines, or tooling that reference the old paths. All internal references (tsconfig paths, metro config, workspace definitions, build scripts, CI workflows) have been updated.
Workspace References
npm workspace names now use directory-based paths:
// Before
"workspaces": ["ui", "docs", "charts", "icons", "packages/create-platform-blocks"]
// After
"workspaces": ["packages/ui", "packages/charts", "apps/platform-blocks.com", "packages/create-platform-blocks"]Scripts that used --workspace=ui, --workspace=docs, or --workspace=charts now use --workspace=packages/ui, --workspace=apps/platform-blocks.com, and --workspace=packages/charts respectively.
Improvements
Dependency Alignment (Expo SDK 55)
All packages are now aligned to Expo SDK 55 expected versions, eliminating the Metro Bundler compatibility warnings:
| Package | From | To |
|---|---|---|
expo |
55.0.0-preview.7 | ~55.0.9 |
react-native |
0.83.1 | 0.83.2 |
react-native-svg |
15.15.1 | 15.15.3 |
react-native-safe-area-context |
~5.6.0 | ~5.6.2 |
react-native-screens |
~4.20.0 | ~4.23.0 |
react-native-reanimated |
~4.2.1 | 4.2.1 |
@types/react-dom |
~19.2.2 | ~19.1.7 |
Charts Test Stack Upgrade
Aligned @platform-blocks/charts testing dependencies to match @platform-blocks/ui:
| Package | From | To |
|---|---|---|
jest |
^29.7.0 | ^30.2.0 |
babel-jest |
^29.7.0 | ^30.2.0 |
@types/jest |
^29.5.12 | ^30.0.0 |
@testing-library/react-native |
^12.4.3 | ^13.3.0 |
@rollup/plugin-commonjs |
^28.0.1 | ^29.0.0 |
UI Expo DevDependency Alignment
The @platform-blocks/ui package previously referenced legacy Expo module versions as devDependencies. These are now pinned to SDK 55:
expo-audio^1.1.0 → ~55.0.2expo-document-picker^14.0.0 → ~55.0.2expo-haptics^15.0.0 → ~55.0.2expo-linear-gradient^15.0.0 → ~55.0.2expo-status-bar^3.0.0 → ~55.0.2jest-expo^54.0.0 → ~55.0.0
Other Package Updates
@shopify/flash-list2.0.2 → 2.3.1
Deprecated Package Removal
Removed deprecated packages from @platform-blocks/charts:
@testing-library/jest-native— superseded by built-in matchers in@testing-library/react-native12.4+metro-react-native-babel-preset— superseded by@react-native/babel-preset
Stale Workspace Cleanup
Removed the icons workspace entry from the root package.json (directory did not exist).
Infrastructure
CI/CD Updates
- GitHub Actions deploy workflow updated for new directory structure
- Playwright config updated to reference
apps/platform-blocks.com/ - EAS build post-install script updated for new nesting depth
Script Path Updates
All root-level scripts (generate-demos, validate-demos, generate-llms, generate-sitemap, scan-i18n-keys, publish-release) updated to resolve packages and app directories from the new layout.
v0.7.1
Features
Interactive Playgrounds (20 New Components)
Added interactive playground configurations for 20 additional components in the documentation site, bringing the total to 42 components with live playgrounds:
- Dialog, Badge, Chip, Notice, Checkbox, Toggle, Radio, Skeleton, Rating, Divider, Breadcrumbs, Pagination, IconButton, TextArea, NumberInput, Popover, SegmentedControl, Highlight, CodeBlock, Toast
Each playground allows real-time prop editing with tailored controls (color pickers, segmented selectors, number sliders, etc.) directly in the documentation.
BrandButton Dark Mode Support
- The
plainvariant now adapts to dark mode, using theme-aware background and text colors instead of hardcodedwhite/black - Improves visibility and consistency when using BrandButton in dark color schemes
Fixes
Text Hydration Error (Web)
- Fixed React hydration mismatch caused by block-level elements (e.g.,
View,Pressable) rendered inside<p>tags on web - Added
containsBlockElement()detection that automatically switches the Text wrapper from<p>to<div>when children contain block-level React Native components - Eliminates the
<div> cannot appear as a descendant of <p>browser warning
Carousel Demo Migrations
- Updated all 5 Carousel demos (
basic,multi,motionControls,performance,vertical) to useBlockinstead of the deprecatedColumncomponent
Documentation TypeScript Fixes
Resolved numerous TypeScript errors across the docs site:
- Layout prop renames: Updated
width/heighttow/hacross Header, HeaderMobile, FooterPage, SkeletonShowcase, MediaShowcase, EverythingShowcase, PhotoGalleryExample, ExampleListScreen, HookListScreen - Component API updates:
Switchvalue→checkedButtoncolor→colorVariantTextvariant'body'→'p'IconButtoniconVariantternary fixgetAllUISounds→getAllSounds
- Import corrections: Fixed
DataTableDataTableSortimport,SliderShowcaseprops,ChatroomExamplemissing import,PreviewFileunused import - Type fixes:
NodeJS.Timeouttype annotation,ColorSchemeNamenarrowing for"unspecified"value
v0.7.0
Fixes
Dialog: Bottom Sheet Pan Responder Fix
- Fixed pan responder behavior for the bottom sheet variant to prevent gesture conflicts with child interactive elements (buttons, pressables)
- Previously, the capture phase would immediately claim gestures on touch start, which could block taps on child elements like buttons inside the bottom sheet
- Now the pan responder only claims gestures in the bubble phase, allowing child components to handle their own touch events first
- Swipe-to-dismiss still works as expected when touching empty space or the drag handle
Improvements
StyleProp Type Flexibility
- Updated style prop types across 38+ components to use
StyleProp<ViewStyle>andStyleProp<TextStyle>instead ofViewStyleandTextStyledirectly - This allows passing arrays,
false,null,undefined, or registered style references as style values — matching React Native's standard style prop pattern - Affected components: Accordion, AutoComplete, Avatar, Badge, Block, Blockquote, Breadcrumbs, Calendar, Carousel, Chip, CodeBlock, ColorPicker, CopyButton, DatePicker, Divider, Grid, HoverCard, Image, Indicator, Knob, ListGroup, Loader, Masonry, Navigation, Notice, Pagination, Progress, QRCode, Rating, Ring, SegmentedControl, Skeleton, Slider, Spotlight, Tabs, Toast, Tooltip, Video
setTimeout Type Compatibility
- Fixed
setTimeoutreturn type for cross-platform TypeScript compatibility
0.5.0
UI Package (@platform-blocks/ui)
- Carousel picked up a full Embla-style responsive system: media-query breakpoints,
slidesToScroll,startIndex,align,containScroll, drag-free momentum, snap skipping, manualduration, and deterministic page virtualization so multi-item decks render identically across web/native (ui/src/components/Carousel/Carousel.tsx,ui/src/components/Carousel/types.ts). New demos (includingmotionControls) walk through drag-free and locked-snap setups. - Slider + RangeSlider now accept palette-driven overrides (
colorScheme,trackColor,activeTrackColor,thumbColor,tickColor,activeTickColor) along withtrackSize, custom thumb sizing/styling, and smarter default value labels so they can adopt product branding without re-implementing the primitive (ui/src/components/Slider/Slider.tsx,ui/src/components/Slider/SliderCore.tsx,ui/src/components/Slider/types.ts). The newcustomStylesdemo shows both single-value and range palettes in action. - DataTable exposes a dedicated
stripedprop that can force alternating row backgrounds independent of the broadervariantyou choose (ui/src/components/DataTable/DataTable.tsx,ui/src/components/DataTable/types.ts). - Input borders no longer disappear when the field is disabled—neutral borders remain in place for accessibility clarity (
ui/src/components/Input/styles.ts). - AppShell keeps the header mounted on mobile so the docs header/search/shortcuts stay reachable regardless of breakpoint (
ui/src/components/AppShell/AppShell.tsx,docs/components/layout/Header.tsx).
Documentation & Demos
- Component detail pages now show a "Further reading" card whenever a component supplies
resourcesmetadata. The loader and sample metadata were updated accordingly (docs/screens/ComponentDetailScreen.tsx,docs/utils/demosLoader.ts,ui/src/components/Button/meta/component.md,ui/src/components/Avatar/meta/component.md). - The playground builder allows control-specific labels so we can rename options without forking the control type (
docs/components/playground/ComponentPlayground.tsx,docs/components/playground/registry.ts). - Header tweaks keep the command palette shortcut, search affordance, and nav toggle aligned for both desktop and mobile (
docs/components/layout/Header.tsx).
Tooling & Release
scripts/generate-demos.tsnow parses structured frontmatter (arrays/objects) instead of plain strings, which lets contributors declaretags,highlightLines, or translation metadata without breaking the generator.- The workspace manifest knows about the new CLI package and the release script performs a UI build before running
publish-release.tsto ensure artifacts are up to date (package.json,package-lock.json).
0.4.0
UI Package (@platform-blocks/ui)
- Introduced
Notice, a flexible replacement forAlertthat supports severity-aware defaults, light/filled/outline/subtle variants, optional icons, close buttons, and full-width banners across web and native. - Rebuilt
Knobwith the newappearance/interactionsystem (layer-level styling, partial arcs, pointer + progress controls, multi-gesture input) plus extensive demos, README, and customization spec to document the behavior. - Reworked
QRCoderendering to use an internal encoder, support rounded/diamond modules, gradients, portal logos, and graceful error fallbacks; added a dedicated test suite to keep regressions out. - Added the shared
Collapseprimitive and refitAccordion,Spoiler, andTreeto use it so that expand/collapse timing, easing, and fade behavior remain consistent across components. - Hardened optional dependency loading through the centralized
resolveOptionalModulecache and migrated hooks such asuseClipboard,useHotkeys,useMaskedInput,useHaptics,useDeviceInfo, anduseSpotlightToggleinto their own folders with metadata + demos, making the docs pipeline aware of first-party hooks. - Polished dozens of components and demos: new
chart-sparklineicon assets, acaptiontext variant (with matching tests), web-onlyRadiokeyboard fixes, ColorPicker style cleanups, updated App Store badges/buttons, refreshed markdown + gradient docs, and brand-new Jest coverage across Accordion, Breadcrumbs, Card, Checkbox, Dialog, Divider, Grid, Indicator, Menu, Overlay, Popover, Progress, QRCode, Radio, Ring, SegmentedControl, Select, ShimmerText, Skeleton, Slider, Space, Spoiler, Spotlight, Stepper, Tabs, Title, Toggle, Tooltip, Tree, and more.
Charts Package (@platform-blocks/charts)
- Expanded
ChartInteractionProviderwith portal-aware popovers, sticky crosshairs, pointer/crosshair throttling, wheel zoom controls, and follow modes so charts remain responsive on both touch and desktop pointer devices. - Updated
ChartPopoverto animate toward pointer coordinates, optionally render insidedocument.body, and better format candlestick, bubble, histogram, funnel, radar, and violin data via the enriched metadata supplied by each series. - Rebuilt
useTooltipAggregatorto combine crosshair distance + pointer offset, cap series counts, and expose shared anchors that all Cartesian charts (Bar, Line, Scatter, Histogram, Violin, Combo, Donut, etc.) now feed to eliminate mismatched tooltips. - Synced every chart component to the new interaction contracts—fixing clipped padding, improving grouped/stacked hover alignment, and wiring up the docs’
DOCS_CHART_INTERACTION_CONFIGso previews feel identical to production usage.
Documentation & Site
- Adopted a new
docsLayoutshell with AppShell support: upgraded header (language toggle, Spotlight trigger, GitHub shortcut), collapsible desktop nav, mobile navbar + bottom bar, floating theme actions, keyboard focus restoration, and localization strings for en/es/fr. - Component detail pages now include the dynamic
ComponentPlayground, consolidated “showcase” previews, a smarterDemoRenderer, persistent scrolling viaPageLayout, and theCopyPageMenubutton that copies Markdown or opens ChatGPT/Claude with page context. - Hooks received first-class coverage:
scripts/generate-demosemits hook metadata/code,hooksLoaderexposes it to the app,/hookslists and filters entries,/hooks/[hookName]renders dedicated detail screens, and a comprehensiveuseDeviceInfohook documents runtime/platform heuristics. - Refreshed the example apps and doc content (Accessibility, Finder, Music Player, Photo Gallery, Settings, Social Feed, etc.), added breadcrumb helpers, standardized section headers (
DocsPageHeader), and wired every page through the updated layout wrappers. - SEO + sharing improvements:
app/+html.tsxnow stamps full meta tags, the Expo export pipeline injects them into the static bundle,docs/publicships robots/sitemap/llms assets,CopyPageMenuexposes copy/share actions, and chart playgrounds use the shared interaction config for stable previews.
Tooling & Release
-
scripts/generate-demos.tsnow parses hook directories alongside UI/charts components, emits code maps + metadata for every entry, and flags doc coverage gaps during generation. -
Added
scripts/generate-sitemap.ts,scripts/generate-llms.ts,docs/scripts/inject-seo-tags.ts, anddocs/scripts/check-prerender.tsso the docs build can produce crawlable HTML, verify prerender output, and capture a trimmed knowledge base for LLM ingestion. -
docs/package.jsongainedgenerate-seo,build-web,inject-seo,check-prerender, and preview helpers; the top-levelpublish-release.tsnow runs the SEO pipeline before bumping/publishing packages to guarantee fresh sitemap + llms artifacts. -
Repository tooling picked up path aliases in
tsconfig.json, refreshed ESLint/Jest setups insideui/, and tighter package scripts (verify:packages,site:build) to keep CI/CD reproducible. -
Replace any
Alertusages withNotice(or your own wrapper) and remove imports forContainer,PressAnimation,Reveal,Accessibility,Disclaimer, and the legacy form helpers—they no longer ship as public exports. -
If you load optional native modules (expo-clipboard, expo-haptics, linear gradient, etc.), rely on
resolveOptionalModuleinstead of callingrequireyourself so the guardrails and caching stay consistent. -
When hosting the docs, make sure the contents of
docs/publicare served as-is and update release automation to runnpm run generate-seo --workspace=docsso the sitemap/llms files stay current. -
Swap any references to the removed playground files with the new
ComponentPlaygroundregistry (or embed theshowcasehelpers) to keep the/components/[name]#playgroundtab functioning.
0.3.1
UI Package (@platform-blocks/ui)
- Introduced a global
KeyboardManagerProvideralong with optionalkeyboardFocusIdsupport so inputs, pickers, and overlays can coordinate refocus without dropping the keyboard. A newKeyboardAwareLayoutcomponent wraps forms to automatically pad for the current keyboard height on web and native. - Rebuilt overlay selection flows (
handleSelectionComplete,useOverlayApi) and adopted them inSelect,AutoComplete,NumberInput, and other inputs. This fixes the lingering overlay hook regressions and keeps focus stable after picks or clears. - Added hold-friendly controls to
NumberInput: optional side buttons, shift-click multipliers, refined continuous stepping behaviour, and fresh side-button demos that call out the new ergonomics. - Upgraded
SelectandAutoCompletepositioning to share the dropdown positioning hook, restored overlay exports, and tightened accessibility defaults (aria/role wiring, labels, keyboard navigation). - Delivered a fully featured
Knobcomponent: support for marks with labels, endless mode, text selection suppression on web, and new documentation/demo coverage. - Replaced the legacy
TimePickerimplementation withTimePickerInput, adding second-level precision, configurable columns, and direct re-export viaTimePickerfor backwards compatibility. - Hardened optional dependency loading with the new
resolveOptionalModulehelper, refreshed component sizing utilities (including the newComponentSizeValueunion + clamp helpers), and synced icon registries so apps no longer need to patch missing glyphs.
Charts Package (@platform-blocks/charts)
- Shipped two new data visualisations:
ParetoChartfor cumulative distribution analysis andMarimekkoChartfor weighted categorical comparisons. Each includes typed props, themed demos, and metadata for the docs site. - Updated
ChartPopover,ChartBase, and provider interactions to accommodate stacked categories, shared hover state, and the new weighted layouts. - Expanded chart typings and exports so mixed-series dashboards can consume the new components without manual wiring.
Documentation & Examples
- Added a dedicated "Keyboard Management" guide describing the provider, layout wrapper, and migration tips. The docs shell now wraps all pages in
KeyboardManagerProviderandKeyboardAwareLayoutto mirror production usage. - Refreshed major example apps (Dashboard, Finder, Music Player, Ecommerce, Todo, DAW) to demonstrate the latest component APIs, streamlined keyboard behaviour, and updated spacing defaults.
- Published new demos covering Card variants, multiple NumberInput scenarios (basic formatter, drag gestures, side buttons), Knob endless mode, and the Pareto/Marimekko charts; removed outdated keyboard roadmap content in favour of the new guide.
Migration Notes
- Wrap your host app with
KeyboardManagerProviderto opt into the shared keyboard state. SetEXPO_PUBLIC_ENABLE_KEYBOARD_MANAGER=falsetemporarily if you need to defer rollout. - Verify native applications that depend on Select, AutoComplete, NumberInput, or the new TimePicker flows—the keyboard focus behaviour has changed and should be smoke-tested before shipping to production.