HeroUI Native Checkbox (checkbox.css): 24×24 with 8px continuous corners,
field background + field shadow (primary), accent overlay with a
spring-scaled check when selected (stiffness 1200, damping 120);
danger colors when invalid.
HeroUI Native CloseButton: a 32px tertiary icon-only button with a muted
close icon (close-button.tsx: Button tertiary/sm/iconOnly with the root
height overridden to 32 by close-button.css).
HeroUI Native semantic color palettes, precomputed from the oklch source
tokens in heroui-native/src/styles/variables.css and the color-mix(in
oklab, ...) formulas in theme.css. Regenerate with the gen_colors.py
script if upstream tokens change — do not hand-edit individual values.
HeroUI Native ControlField (control-field.css): a row (gap 12) pairing a
control (Switch, Checkbox, Radio…) with a label and optional description;
tapping anywhere activates the control.
HeroUI Native Menu (menu.css): an anchored overlay list — overlay
background, 24px continuous corners, px6/py12, items with 16px-radius
press highlight.
Vertical navigation for medium and larger windows — the counterpart to
BCBottomNav on compact ones (Material 3 "navigation rail", styled from
bc_ui tokens).
HeroUI Native Popover (popover.css): an anchored overlay card
(overlay background, px16/py12, 24px continuous corners, overlay shadow)
that scales in from the anchor.
HeroUI Native Radio (radio.css): a row with label/description content and
a trailing 24px round indicator — field background when idle, accent when
selected (danger when invalid), with a 10px fading thumb.
HeroUI Native ScrollShadow: fades the edges of a scrollable while more
content is available in that direction (200ms fade, scroll-shadow
sources). Wrap the scrollable; the shadows are painted over its edges in
the container color (defaults to the background token).
HeroUI Native SearchField (search-field.css): an BCInput with a leading
search icon (absolute left 12) and an animated 24×24 clear button
(absolute right 12) that appears while the field has text.
HeroUI Native Select (select.css): a surface-styled trigger
(py12/px16, radius 16, surface shadow) with a rotating chevron, opening
an option list (overlay bg, p12, radius 24) with accent check indicators.
A HeroUI shadow token: a list of layered outer shadows plus an optional
1px inner hairline used where the CSS source specifies an inset shadow
(dark-mode overlays). The hairline is rendered as an inside-stroke border
by the consuming widget, which is visually identical to a 1px zero-blur
inset shadow.
HeroUI Native SkeletonGroup: cascades isLoading, variant, and
animation to descendant BCSkeletons via an inherited scope
(skeleton-group.tsx passes the same values through context).
HeroUI Native Slider (slider.css): 20px-tall default track with 12px
radius, accent fill, and a 28×20 accent thumb container holding an
accent-foreground knob. The thumb snaps with a soft spring
(mass 0.5, stiffness 200, damping 15).
An expandable FAB (speed dial): tapping the button reveals a stack of
labelled action pills over a dim or blurred backdrop, and the button's
icon morphs to openIcon. Items and labels anchor to alignment.
HeroUI Native Switch (switch.css / switch.animation.ts):
48×24 pill track (default → accent, 150ms), 28×20 pill thumb sliding
from left 2 to 18 with a stiff spring (mass 2, stiffness 1600,
damping 120), thumb color white → accent-foreground, root press scale.
HeroUI Native TextField: a vertical stack (gap 6, text-field.css) of
Label / Input / Description / ErrorMessage parts that share invalid,
disabled, and required state through an inherited scope.
