1.0.0-beta.4

The fourth beta of HeroUI Native Pro is a big one — eight new components spanning charts, wheel pickers, and a full time / date-time selection stack. PieChart and RadarChart round out the polar-chart family, a new WheelPicker / WheelPickerGroup foundation powers iOS-style wheel selection, and TimePicker, WheelTimePicker, DateTimePicker, and WheelDateTimePicker bring locale-aware time and date-time pickers to the library. This release also standardizes label and indicator colors on the new *-soft-foreground tokens and fixes a handful of NumberStepper and WheelPicker edge cases.

Try It on Your Device

Installation

Follow the installation guide to authenticate the private registry with your HEROUI_PERSONAL_TOKEN, install heroui-native-pro, and wire up HeroUINativeProvider.

What's New

New Components

This release introduces 8 new components across charts, forms, and date & time:

• PieChart: victory-native-powered polar chart with pie, donut, segmented-donut, partial-arc, and labeled-slice layouts. (Documentation)
• RadarChart: Skia-rendered multivariate radar with Grid, AngleAxis, RadiusAxis, and multi-series Radar compound parts. (Documentation)
• WheelPicker: Vertical snap-to-row wheel with distance-based fade / scale and optional fade overlays. (Documentation)
• WheelPickerGroup: Coordinated row of wheels sharing layout, a composite values record, and a shared indicator / mask. (Documentation)
• TimePicker: Trigger field that opens a wheel-based hour / minute / period selector in a popover, dialog, or bottom sheet. (Documentation)
• WheelTimePicker: Standalone wheel time selector exchanging an @internationalized/date Time value. (Documentation)
• DateTimePicker: Field shell pairing a Select trigger with a combined date + time wheel surface. (Documentation)
• WheelDateTimePicker: Standalone wheel date-time selector exchanging a CalendarDateTime value. (Documentation)

PieChart

A polar chart for visualizing categorical proportions. Built on top of victory-native's PolarChart and Pie.Chart, wrapped with HeroUI Native theming, generic-preserving typings, and a root-to-Canvas animation cascade. Compose pie, donut, segmented donut, partial-arc gauges, and Skia-font slice labels from the same building blocks.

Features:

• Compound parts — PieChart, PieChart.Pie, PieChart.Slice, PieChart.SliceAngularInset, PieChart.Label
• Donut layouts via innerRadius, segmented donuts via SliceAngularInset, and partial-arc gauges via startAngle / circleSweepDegrees
• Per-slice animate config for path-interpolated data transitions, gated by the cascading animation="disable-all" prop
• Slice fills sourced from each data row's colorKey; layer Skia shaders (LinearGradient, RadialGradient) as children for gradient fills
• Skia-font slice labels via PieChart.Label, with a render-function children for fully custom content
• New internal BasePolarChart helper plus re-exported useSlicePath, useSliceAngularInsetPath, and the PieSliceData type
• victory-native stays an optional peer dependency — only loaded when a chart component is imported

Usage:

import { PieChart } from "heroui-native-pro";

const DATA = [
  { name: "Chrome", value: 62, color: "#6366f1" },
  { name: "Safari", value: 19, color: "#7c3aed" },
  { name: "Firefox", value: 10, color: "#8b5cf6" },
];

export function Example() {
  return (
    <PieChart
      data={DATA}
      labelKey="name"
      valueKey="value"
      colorKey="color"
      wrapperClassName="h-[220px]"
    >
      <PieChart.Pie innerRadius="60%">
        {() => <PieChart.Slice />}
      </PieChart.Pie>
    </PieChart>
  );
}

For complete documentation and examples, see the PieChart component page.

RadarChart

A radar chart for comparing multivariate data across categorical spokes. It reuses victory-native's PolarChart for canvas measurement and useAnimatedPath for polygon interpolation, then renders every visual part — grid rings, spokes, axis labels, polygons, vertex dots — with @shopify/react-native-skia primitives.

Features:

• Compound parts — RadarChart.Grid (polygon or circle rings + spokes), RadarChart.AngleAxis, RadarChart.RadiusAxis, and RadarChart.Radar
• Multi-series support via sibling Radar components with per-series dataKey and color
• RadarChart.RadiusAxis with configurable angle, orientation, and tickFormatter
• maxValue to fix the radial scale across series; showDots / dotRadius to emphasize vertices
• Animated path interpolation through victory-native's useAnimatedPath, gated by animation="disable-all" on the root
• Public type exports (RadarChartRootProps, RadarChartRadarProps, etc.) and radarChartClassNames for styling overrides
• Relies on the existing optional victory-native and @shopify/react-native-skia peers — no new runtime dependencies

Usage:

import { RadarChart } from "heroui-native-pro";

const DATA = [
  { category: "Design", score: 86 },
  { category: "Frontend", score: 92 },
  { category: "Backend", score: 74 },
];

export function Example() {
  return (
    <RadarChart
      data={DATA}
      labelKey="category"
      dataKey="score"
      maxValue={100}
      wrapperClassName="h-[280px]"
    >
      <RadarChart.Grid />
      <RadarChart.AngleAxis />
      <RadarChart.Radar showDots />
    </RadarChart>
  );
}

For complete documentation and examples, see the RadarChart component page.

WheelPicker

A vertical wheel picker with snap-to-row selection, distance-based fade and scale, and optional fade overlays. Built on react-native-reanimated, it powers iOS-style selectors for years, durations, reminders, and any single-column option list — and serves as the foundation for the new time and date-time pickers.

Features:

• Compound parts — WheelPicker.Item, WheelPicker.ItemLabel, WheelPicker.Indicator, WheelPicker.Mask
• Controlled (value / onValueChange) and uncontrolled (defaultValue) selection over a generic items array
• Configurable itemHeight, visibleCount, and a renderItem slot for fully custom rows
• Tap-to-focus rows, throttled value-change events, and distance-driven opacity / scale / label-color animations
• Imperative scrollToIndex / scrollToValue via the root ref
• useWheelPicker and useWheelPickerItem hooks for building custom row animations off the shared scroll offset

Usage:

import { WheelPicker } from "heroui-native-pro";
import { useState } from "react";

const YEAR_ITEMS = Array.from({ length: 80 }, (_, i) => {
  const year = 2026 - i;
  return { value: year, label: String(year) };
});

export function Example() {
  const [year, setYear] = useState(1995);

  return (
    <WheelPicker value={year} onValueChange={setYear} items={YEAR_ITEMS}>
      <WheelPicker.Indicator />
      <WheelPicker.Mask />
    </WheelPicker>
  );
}

For complete documentation and examples, see the WheelPicker component page.

WheelPickerGroup

A coordinated row of WheelPicker instances that share layout, emit a composite values record keyed by each wheel's name, and report when every wheel has come to rest. Use it for currency + amount selectors, time columns, or any multi-column wheel UI.

Features:

• Compound parts — WheelPickerGroup.Indicator, WheelPickerGroup.Mask
• Broadcasts itemHeight / visibleCount to every child wheel and distributes columns evenly with automatic flex-1
• Owns a shared values record (controlled values / uncontrolled defaultValues) keyed by each child wheel's name
• onValuesChange for live updates and onValuesCommit that fires once after every wheel comes to rest
• A single shared indicator band and mask spanning every column
• animation="disable-all" cascades the disabled state to all child wheels

Usage:

import { WheelPicker, WheelPickerGroup } from "heroui-native-pro";
import { useState } from "react";

export function Example() {
  const [values, setValues] = useState({ currency: "USD", amount: 500 });

  return (
    <WheelPickerGroup values={values} onValuesChange={setValues}>
      <WheelPicker name="currency" items={CURRENCY_ITEMS} />
      <WheelPicker name="amount" items={AMOUNT_ITEMS} />
      <WheelPickerGroup.Indicator />
      <WheelPickerGroup.Mask />
    </WheelPickerGroup>
  );
}

For complete documentation and examples, see the WheelPickerGroup component page.

WheelTimePicker

A standalone wheel time selector built on WheelPickerGroup that exchanges an @internationalized/date Time value. It renders hour, minute, and (in 12-hour mode) AM/PM period columns with a shared indicator and mask, committing live on scroll.

Features:

• Compound parts — WheelTimePicker.Hour, WheelTimePicker.Minute, WheelTimePicker.Period, WheelTimePicker.Indicator, WheelTimePicker.Mask
• 12 / 24-hour modes via hourFormat, with the period column auto-omitted in 24-hour mode
• minuteInterval for appointment-style stepping and locale-aware AM/PM labels (canonical "AM" / "PM" stored)
• onValueChange for live scroll updates and onValueCommit that fires once after every column rests
• Tabular numerals by default on hour / minute columns for stable digit width

Usage:

import { Time } from "@internationalized/date";
import { WheelTimePicker } from "heroui-native-pro";
import { useState } from "react";

export function Example() {
  const [time, setTime] = useState(new Time(9, 30));

  return <WheelTimePicker value={time} onValueChange={setTime} />;
}

For complete documentation and examples, see the WheelTimePicker component page.

TimePicker

A time picker that composes WheelTimePicker inside a trigger field with popover, dialog, and bottom-sheet presentations. It follows the same compound-component and adaptive-presentation pattern as DatePicker, and integrates with Label, Description, and FieldError.

Features:

• Compound parts — TimePicker.Select, Trigger, Value, TriggerIndicator, Portal, Overlay, Content, Wheel, and the WheelHour / WheelMinute / WheelPeriod / WheelIndicator / WheelMask columns
• Controlled and uncontrolled selection and open state
• "popover", "dialog", and "bottom-sheet" presentations from a single prop
• hourFormat, minuteInterval, timeDisplayFormat presets, and a formatTime override for the trigger label
• New internal clock-icon as the default trigger indicator
• Field states (isRequired, isInvalid, isDisabled) with danger border styling on invalid

Usage:

import { Label } from "heroui-native";
import { TimePicker } from "heroui-native-pro";

export function Example() {
  return (
    <TimePicker>
      <Label>Reminder</Label>
      <TimePicker.Select>
        <TimePicker.Trigger>
          <TimePicker.Value />
          <TimePicker.TriggerIndicator />
        </TimePicker.Trigger>
        <TimePicker.Portal>
          <TimePicker.Overlay />
          <TimePicker.Content presentation="popover" width="trigger">
            <TimePicker.Wheel />
          </TimePicker.Content>
        </TimePicker.Portal>
      </TimePicker.Select>
    </TimePicker>
  );
}

For complete documentation and examples, see the TimePicker component page.

WheelDateTimePicker

A standalone wheel date-time selector built on WheelPickerGroup that exchanges a CalendarDateTime value. It adds a combined day column alongside hour, minute, and period columns, with bounded date ranges, localized labels, and custom formatDate.

Features:

• Compound parts — WheelDateTimePicker.Date, Hour, Minute, Period, Indicator, Mask
• Combined day column spanning [minValue, maxValue], always widened to include the active value
• 12 / 24-hour modes, minuteInterval stepping, and localized date + AM/PM labels
• Custom date column labels via formatDate (receives an isToday flag)
• onValueChange for live updates and onValueCommit once every column rests
• Reuses the WheelTimePicker hour / minute / period item builders for consistency

Usage:

import { CalendarDateTime } from "@internationalized/date";
import { WheelDateTimePicker } from "heroui-native-pro";
import { useState } from "react";

export function Example() {
  const [value, setValue] = useState(
    new CalendarDateTime(2026, 6, 1, 9, 30)
  );

  return <WheelDateTimePicker value={value} onValueChange={setValue} />;
}

For complete documentation and examples, see the WheelDateTimePicker component page.

DateTimePicker

A field shell that pairs a Select trigger with a WheelDateTimePicker presentation surface. It mirrors TimePicker's ergonomics for a combined date + time selection, forwarding range, format, and locale props down to the wheel and bridging context through portals.

Features:

• Compound parts — DateTimePicker.Select, Trigger, Value, TriggerIndicator, Portal, Overlay, Content, Wheel, and the aliased WheelDate / WheelHour / WheelMinute / WheelPeriod / WheelIndicator / WheelMask parts
• "popover", "dialog", and "bottom-sheet" presentations
• Controlled / uncontrolled selection and open state with automatic context bridging through portals
• minValue / maxValue, hourFormat, minuteInterval, dateTimeDisplayFormat presets, and a formatDateTime override
• Field states (isRequired, isInvalid, isDisabled) with a default trailing calendar icon

Usage:

import { DateTimePicker } from "heroui-native-pro";

export function Example() {
  return (
    <DateTimePicker>
      <DateTimePicker.Select>
        <DateTimePicker.Trigger>
          <DateTimePicker.Value />
          <DateTimePicker.TriggerIndicator />
        </DateTimePicker.Trigger>
        <DateTimePicker.Portal>
          <DateTimePicker.Overlay />
          <DateTimePicker.Content presentation="popover" width="trigger">
            <DateTimePicker.Wheel />
          </DateTimePicker.Content>
        </DateTimePicker.Portal>
      </DateTimePicker.Select>
    </DateTimePicker>
  );
}

For complete documentation and examples, see the DateTimePicker component page.

Component Improvements

NumberStepper Digit Jitter Fix

Fixed a layout jitter in the NumberStepper value where the displayed number shifted horizontally as digits changed, due to proportional figure widths.

Improvements:

• NumberStepper.Value now applies fontVariant: ['tabular-nums'] for a stable, monospaced digit width — no more horizontal shift between values like 1 and 8.
• The consumer-provided style prop is now destructured and merged with the internal style, so overrides still take precedence via the merged style array.

Style Fixes

Soft-Foreground Token Adoption

Standardized label, icon, and indicator colors across multiple components to use the new *-soft-foreground semantic tokens instead of raw color tokens. These are internal styling refinements — the public component API is unchanged.

Fixes:

• Badge, ProgressButton, and SlideButton labels now use *-soft-foreground tokens for the secondary / soft / accent / success / warning / danger variants.
• TrendChip indicator colors are resolved via explicit Record<ChipColor, string> maps for the primary and soft variants.
• Calendar and RangeCalendar nav buttons, the year-picker indicator, and today cells use soft-foreground / soft-background tokens.

Style Optimizations

• Range calendar today highlight: RangeCalendar adds a data-today-not-in-range attribute so today's highlight no longer overrides range endpoints or the continuous middle strip.

Dependencies

Other Dependency Upgrades

• heroui-native (peer): 1.0.2 / 1.0.3 → 1.0.4

Updated Documentation

The following documentation pages have been updated to reflect the changes in this release:

• PieChart — New component page with pie, donut, segmented donut, partial-arc, labeled-slice, gradient, and animated examples
• RadarChart — New component page covering basic, multi-series, dots-only, circle-grid, fixed-scale, custom radius-axis, custom font, and animated variants
• WheelPicker — New component page with masked, uncontrolled, custom render, custom indicator / mask, animation, disabled, and programmatic-scroll examples
• WheelPickerGroup — New component page covering controlled / uncontrolled values, shared layout, commit-on-rest, custom indicator / mask, and disabled cascading
• TimePicker — New component page covering popover / dialog / bottom-sheet presentations, hour format, minute interval, custom format, and field states
• WheelTimePicker — New component page covering 12 / 24-hour modes, minute interval, localized labels, commit-on-rest, custom composition, and custom item render
• DateTimePicker — New component page covering managed state, bounded date range, 24-hour mode, custom label, and field states
• WheelDateTimePicker — New component page covering bounded ranges, 24-hour mode, minute interval, localized labels, custom date label, and commit-on-rest
• RangeCalendar — Documents the new data-today-not-in-range render-prop attribute

Links

• Installation
• Component Documentation
• UI for Agents