reflex-reactbits 0.1.1__py3-none-any.whl

reflex_reactbits/micro.py

@@ -0,0 +1,2336 @@
+"""React Bits - Micro interactions.
+
+AUTO-GENERATED by scripts/generate_wrappers.py - do not edit by hand.
+"""
+
+# ruff: noqa: E501
+from __future__ import annotations
+
+from typing import Any, Literal
+
+import reflex as rx
+from reflex.event import no_args_event_spec
+from reflex_base.components.component import field
+
+from .base import ReactBitsComponent, safe
+
+__all__ = ['BellToggle', 'BranchedMenu', 'CallChip', 'CodeSlots', 'CometDial', 'DodgeField', 'FolderFloat', 'FuseButton', 'GlideSelect', 'HoldButton', 'JellyRadio', 'LatticeLoader', 'PeekRating', 'PromptBar', 'PulseHeart', 'RefineFrame', 'RubberSegment', 'ScrubField', 'SlideCommit', 'SlingButton', 'SloshGauge', 'SpringCheck', 'SquishSwitch', 'StatusMark', 'SwipeRow', 'SwipeToast', 'ThoughtLine', 'VoicePill', 'WakeSlider', 'WarmTooltip', 'WarmTooltipGroup', 'bell_toggle', 'branched_menu', 'call_chip', 'code_slots', 'comet_dial', 'dodge_field', 'folder_float', 'fuse_button', 'glide_select', 'hold_button', 'jelly_radio', 'lattice_loader', 'peek_rating', 'prompt_bar', 'pulse_heart', 'refine_frame', 'rubber_segment', 'scrub_field', 'slide_commit', 'sling_button', 'slosh_gauge', 'spring_check', 'squish_switch', 'status_mark', 'swipe_row', 'swipe_toast', 'thought_line', 'voice_pill', 'wake_slider', 'warm_tooltip', 'warm_tooltip_group']
+
+
+class BellToggle(ReactBitsComponent):
+    """Pill toggle that answers a press at three tempos: the bell rings on damped keyframes, the label blur-crossfades, and the pill unfurls to the longer label through a clip-path on a critically damped spring. The pressed state is the receipt.
+
+    Docs: https://reactbits.dev/micro/bell-toggle
+    """
+
+    tag = "BellToggle"
+    alias = "ReactBitsBellToggle"
+    is_default = True
+    _rb_category = "Micro"
+    _rb_name = "BellToggle"
+    _rb_files = ('BellToggle.css', 'BellToggle.jsx')
+    lib_dependencies: list[str] = ['@hugeicons/core-free-icons@4.3.3', '@hugeicons/react@1.1.10', 'motion@12.23.21']
+
+    off_label: rx.Var[str] = field(
+        doc="The face at rest. Its width sets how far the pill is clipped. Default: 'Notify me'."
+    )
+    on_label: rx.Var[str] = field(
+        doc="The face after the yes press. The pill reserves the width of the longer label; only the visible part changes, so neighbours never shift. Default: \"You'll be notified\"."
+    )
+    icon: rx.Var[rx.Component | str] = field(
+        doc="Replaces the bell. Adjust ringPivot for a glyph that hangs elsewhere."
+    )
+    label: rx.Var[str] = field(
+        doc="Constant accessible name. Falls back to offLabel."
+    )
+    color: rx.Var[str] = field(
+        doc="Ink at rest: label, bell and hover tint. Default: '#f5f5f5'."
+    )
+    background: rx.Var[str] = field(
+        doc="Pill fill at rest. Default: '#27272a'."
+    )
+    on_color: rx.Var[str] = field(
+        doc="Ink when pressed. Default: '#18181b'."
+    )
+    on_background: rx.Var[str] = field(
+        doc="Fill when pressed. Default: '#f5f5f5'."
+    )
+    size: rx.Var[Literal["sm", "md", "lg"]] = field(
+        doc="36, 44 or 52 pixels tall with matching type, icon and padding. Default: 'md'."
+    )
+    radius: rx.Var[int | float] = field(
+        doc="Corner radius of the pill and of the clip cap. Default: 22."
+    )
+    ring_amplitude: rx.Var[int | float] = field(
+        doc="Degrees of the first swing. Every later swing scales from it. Default: 17."
+    )
+    ring_passes: rx.Var[int | float] = field(
+        doc="Half-swings before rest. 2 is a nod, 9 a peal. Default: 5."
+    )
+    ring_decay: rx.Var[int | float] = field(
+        doc="How fast the swings die. 1 evenly, 2 the second is already small, 0.5 keeps shaking. Default: 1."
+    )
+    ring_duration: rx.Var[int | float] = field(
+        doc="Milliseconds for the whole ring. Default: 820."
+    )
+    ring_pivot: rx.Var[int | float] = field(
+        doc="Where the icon hangs from, as a percentage of its height. 16 is the crown, 50 the centre. Default: 16."
+    )
+    crossfade_ms: rx.Var[int | float] = field(
+        doc="The label and fill crossfade. Also all a keyboard toggle gets. Default: 200."
+    )
+    reveal_bounce: rx.Var[int | float] = field(
+        doc="Overshoot of the unfurl. 0 is critically damped; 0.2 lets the cap pass its mark and return. Default: 0."
+    )
+    count: rx.Var[int | float] = field(
+        doc="Notifications waiting. A rise while on rolls the badge and wobbles the bell. Default: 0."
+    )
+    badge: rx.Var[bool] = field(
+        doc="Show the count on the bell while on. Default: true."
+    )
+    badge_color: rx.Var[str] = field(
+        doc="The badge. Default: '#ef4444'."
+    )
+    badge_text_color: rx.Var[str] = field(
+        doc="The count on the badge. Default: '#ffffff'."
+    )
+    waves: rx.Var[bool] = field(
+        doc="Sound waves leave the rim on every swing. Default: true."
+    )
+    clapper: rx.Var[bool] = field(
+        doc="Draw a bell with a clapper that swings a beat behind the body. Default: false."
+    )
+    pressed: rx.Var[bool] = field(
+        doc="Controlled state. Outside changes only crossfade."
+    )
+    default_pressed: rx.Var[bool] = field(
+        doc="Initial state when uncontrolled. Default: false."
+    )
+    disabled: rx.Var[bool] = field(
+        doc="Dims the pill and ignores input. The state is kept. Default: false."
+    )
+    on_change: rx.EventHandler[lambda checked: [safe(checked)]] = field(
+        doc="Called on every toggle. Handler receives: checked."
+    )
+
+
+class BranchedMenu(ReactBitsComponent):
+    """Collapsible menu whose sections unfold into a trunk with a curved branch to each child, and an accent line that travels down the trunk and around the curve to whatever you pick, while a marker glides to the open section.
+
+    Docs: https://reactbits.dev/micro/branched-menu
+    """
+
+    tag = "BranchedMenu"
+    alias = "ReactBitsBranchedMenu"
+    is_default = True
+    _rb_category = "Micro"
+    _rb_name = "BranchedMenu"
+    _rb_files = ('BranchedMenu.css', 'BranchedMenu.jsx')
+    lib_dependencies: list[str] = ['@hugeicons/core-free-icons@4.3.3', '@hugeicons/react@1.1.10']
+
+    items: rx.Var[list[Any]] = field(
+        doc="Sections: label plus children (value, label, icon), or a leaf with a value. A section with children folds; a leaf selects. Default: DEFAULT_ITEMS."
+    )
+    default_open: rx.Var[int | float | list[int | float]] = field(
+        doc="The section, or sections, open at first. -1 for none. Default: 0."
+    )
+    default_active: rx.Var[str] = field(
+        doc="Value selected at first. Empty picks the open section's first child."
+    )
+    color: rx.Var[str] = field(
+        doc="The ink. Lines and idle text are mixes of it. Default: '#f5f5f5'."
+    )
+    accent_color: rx.Var[str] = field(
+        doc="The active line, the active label and the marker. Default: '#f5f5f5'."
+    )
+    line_color: rx.Var[str] = field(
+        doc="The rail, trunk and branches. A solid colour, so joints never darken. Default: '#3f3f46'."
+    )
+    width: rx.Var[int | float] = field(
+        doc="The widest the menu may be, in px. It shrinks to its content. Default: 240."
+    )
+    row_height: rx.Var[int | float] = field(
+        doc="Height of a child row in px. Default: 36."
+    )
+    indent: rx.Var[int | float] = field(
+        doc="Where child rows start, in px. Branches end just before it. Default: 40."
+    )
+    trunk: rx.Var[int | float] = field(
+        doc="The trunk line's x position, in px. Default: 14."
+    )
+    radius: rx.Var[int | float] = field(
+        doc="The curve of each branch, in px. Default: 10."
+    )
+    line_width: rx.Var[int | float] = field(
+        doc="Stroke width of the lines. Default: 1.5."
+    )
+    font_size: rx.Var[int | float] = field(
+        doc="Child text size in px. Headers are 1px larger. Default: 14."
+    )
+    draw_duration: rx.Var[int | float] = field(
+        doc="The accent line's travel, in ms. Default: 400."
+    )
+    fold_duration: rx.Var[int | float] = field(
+        doc="A section's fold and unfold, in ms. Default: 300."
+    )
+    on_select: rx.EventHandler[lambda value, item: [safe(value), safe(item)]] = field(
+        doc="A child or a leaf was picked. Handler receives: value, item."
+    )
+    on_toggle: rx.EventHandler[lambda index, open: [safe(index), safe(open)]] = field(
+        doc="A section folded or unfolded. Handler receives: index, open."
+    )
+
+
+class CallChip(ReactBitsComponent):
+    """Inline tool-call chip whose fill wipes across while a live ms counter ticks, completing with a green wash on success or stopping short and shaking red with a retry glyph on error.
+
+    Docs: https://reactbits.dev/micro/call-chip
+    """
+
+    tag = "CallChip"
+    alias = "ReactBitsCallChip"
+    is_default = True
+    _rb_category = "Micro"
+    _rb_name = "CallChip"
+    _rb_files = ('CallChip.css', 'CallChip.jsx')
+    lib_dependencies: list[str] = ['@hugeicons/core-free-icons@4.3.3', '@hugeicons/react@1.1.10']
+
+    icon: rx.Var[rx.Component | str] = field(
+        doc="The tool glyph. It rolls out when the call resolves. Default: 'terminal'."
+    )
+    name: rx.Var[str] = field(
+        doc="The tool name. Default: 'bash'."
+    )
+    argument: rx.Var[str] = field(
+        doc="The argument. Default: 'npm test'."
+    )
+    status: rx.Var[Literal["idle", "running", "done", "error"]] = field(
+        doc="Running wipes the fill across and ticks the counter. Done completes it with a wash. Error stops it, tints and shakes. Default: 'running'."
+    )
+    expected_ms: rx.Var[int | float] = field(
+        doc="Milliseconds the fill takes to reach its 90% park, the time you expect the call to take. Default: 2500."
+    )
+    size: rx.Var[int | float] = field(
+        doc="Chip height in pixels. Font, padding and glyph follow. Default: 34."
+    )
+    radius: rx.Var[int | float] = field(
+        doc="Corner radius in pixels. Half the height is a pill. Default: 10."
+    )
+    color: rx.Var[str] = field(
+        doc="Ink for the text and the tool glyph. Default: 'currentColor'."
+    )
+    surface_color: rx.Var[str] = field(
+        doc="The chip surface. Default: '#27272a'."
+    )
+    progress_color: rx.Var[str] = field(
+        doc="The fill that wipes across while running. Default: 'currentColor'."
+    )
+    progress_opacity: rx.Var[int | float] = field(
+        doc="How strong that fill is. Default: 0.08."
+    )
+    done_color: rx.Var[str] = field(
+        doc="The success wash and the check. Default: '#22c55e'."
+    )
+    error_color: rx.Var[str] = field(
+        doc="The stopped fill and the retry glyph on error. Default: '#ef4444'."
+    )
+    wash_opacity: rx.Var[int | float] = field(
+        doc="Strength of the success wash and of the error tint. Default: 0.14."
+    )
+    shake: rx.Var[int | float] = field(
+        doc="Error shake amplitude in pixels. 0 tints only. Default: 6."
+    )
+    show_timer: rx.Var[bool] = field(
+        doc="Shows the millisecond counter. Default: true."
+    )
+    on_retry: rx.EventHandler[no_args_event_spec] = field(
+        doc="When set, the failed chip becomes a retry button."
+    )
+
+
+class CodeSlots(ReactBitsComponent):
+    """One-time-code input where a hidden overlay input owns focus, paste and SMS autofill while each slot lands its digit on one spring: the fill swells from the centre, the digit rises and the caret glides; a wrong code drains the slots in a cascade, a right one merges them into a single accent wash.
+
+    Docs: https://reactbits.dev/micro/code-slots
+    """
+
+    tag = "CodeSlots"
+    alias = "ReactBitsCodeSlots"
+    is_default = True
+    _rb_category = "Micro"
+    _rb_name = "CodeSlots"
+    _rb_files = ('CodeSlots.css', 'CodeSlots.jsx')
+    lib_dependencies: list[str] = ['@hugeicons/core-free-icons@4.3.3', '@hugeicons/react@1.1.10', 'motion@12.23.21']
+
+    length: rx.Var[int | float] = field(
+        doc="Number of slots. Default: 6."
+    )
+    value: rx.Var[str] = field(
+        doc="Controlled code. Digits that arrive from outside land with the cascade; digits removed drain."
+    )
+    default_value: rx.Var[str] = field(
+        doc="Uncontrolled initial code, rendered already landed."
+    )
+    status: rx.Var[Literal["idle", "error", "success"]] = field(
+        doc="error drains the slots last to first under the danger tint and clears the code; success merges the fills into one wash and locks the input. Default: 'idle'."
+    )
+    mask: rx.Var[bool] = field(
+        doc="Shows a dot instead of each digit. Default: false."
+    )
+    caret: rx.Var[bool] = field(
+        doc="Shows the blinking caret in the active slot. Default: true."
+    )
+    disabled: rx.Var[bool] = field(
+        doc="Fades the row and ignores input. Default: false."
+    )
+    auto_focus: rx.Var[bool] = field(
+        doc="Focuses the input on mount. Default: false."
+    )
+    accent_color: rx.Var[str] = field(
+        doc="Fill of a landed digit, the active ring and the success wash. Default: '#f5f5f5'."
+    )
+    ink_color: rx.Var[str] = field(
+        doc="Caret, and the tint of the active slot. Default: '#f5f5f5'."
+    )
+    slot_color: rx.Var[str] = field(
+        doc="Surface of an empty slot. Default: '#27272a'."
+    )
+    digit_color: rx.Var[str] = field(
+        doc="Digit colour on the fill. Default: '#18181b'."
+    )
+    danger_color: rx.Var[str] = field(
+        doc="Ring and fill colour while status is error. Default: '#ff3b30'."
+    )
+    slot_size: rx.Var[int | float] = field(
+        doc="Slot width in pixels. Height and digit size follow it. Default: 44."
+    )
+    gap: rx.Var[int | float] = field(
+        doc="Space between slots in pixels. Default: 8."
+    )
+    radius: rx.Var[int | float] = field(
+        doc="Corner radius in pixels, capped at half the slot size. Default: 12."
+    )
+    bounce: rx.Var[int | float] = field(
+        doc="Spring overshoot of the landing fill. 0 is critically damped. Default: 0.2."
+    )
+    settle: rx.Var[int | float] = field(
+        doc="Seconds a digit takes to land or drain. Default: 0.3."
+    )
+    rise: rx.Var[int | float] = field(
+        doc="Pixels a digit rises into place. 0 fades only. Default: 8."
+    )
+    cascade: rx.Var[int | float] = field(
+        doc="Milliseconds between slots when several land at once or drain on reject. Default: 20."
+    )
+    aria_label: rx.Var[str] = field(
+        doc="Accessible name of the input. Default: 'One-time code'."
+    )
+    on_change: rx.EventHandler[lambda code: [safe(code)]] = field(
+        doc="Called on every edit, including the clear at the end of a reject. Handler receives: code."
+    )
+    on_complete: rx.EventHandler[lambda code: [safe(code)]] = field(
+        doc="Called once when the last hole is filled. Handler receives: code."
+    )
+
+
+class CometDial(ReactBitsComponent):
+    """Tick-ring dial you flick by angle: the reading launches on a spring and a velocity-driven comet streaks behind the lit head, trailing the direction of travel and vanishing at rest.
+
+    Docs: https://reactbits.dev/micro/comet-dial
+    """
+
+    tag = "CometDial"
+    alias = "ReactBitsCometDial"
+    is_default = True
+    _rb_category = "Micro"
+    _rb_name = "CometDial"
+    _rb_files = ('CometDial.css', 'CometDial.jsx')
+    lib_dependencies: list[str] = ['motion@12.23.21']
+
+    value: rx.Var[int | float] = field(
+        doc="Controlled value. A change from outside launches the reading on the tap spring."
+    )
+    default_value: rx.Var[int | float] = field(
+        doc="Initial value when uncontrolled. Default: 62."
+    )
+    min: rx.Var[int | float] = field(
+        doc="Lowest value. Default: 0."
+    )
+    max: rx.Var[int | float] = field(
+        doc="Highest value. Default: 100."
+    )
+    step: rx.Var[int | float] = field(
+        doc="Snapping grid, and the keyboard nudge. Default: 1."
+    )
+    unit: rx.Var[str] = field(
+        doc="Suffix after the figure. Empty hides it. Default: '%'."
+    )
+    label: rx.Var[str] = field(
+        doc="Accessible name of the slider. Default: 'Level'."
+    )
+    accent: rx.Var[str] = field(
+        doc="The lit arc, the bead and the comet. Default: '#f5f5f5'."
+    )
+    ink: rx.Var[str] = field(
+        doc="The track and the readout. Default: '#fdfdfd'."
+    )
+    size: rx.Var[int | float] = field(
+        doc="Diameter in pixels. Everything inside scales with it. Default: 250."
+    )
+    sweep: rx.Var[int | float] = field(
+        doc="Degrees the arc covers, with the gap centred at the bottom. Default: 320."
+    )
+    thickness: rx.Var[int | float] = field(
+        doc="Stroke width of the track and the arc. The bead follows it. Default: 5."
+    )
+    speed: rx.Var[int | float] = field(
+        doc="How quickly the reading arrives, 0 to 100. Default: 25."
+    )
+    tap_bounce: rx.Var[int | float] = field(
+        doc="Ring-down after a tap. 0 stops dead. Default: 0.2."
+    )
+    flick_bounce: rx.Var[int | float] = field(
+        doc="Ring-down after a full-speed flick. A slower release lands between the two. Default: 0.1."
+    )
+    momentum: rx.Var[int | float] = field(
+        doc="How far a flick carries the reading past where you let go. 0 drops it where released. Default: 1."
+    )
+    comet_reach: rx.Var[int | float] = field(
+        doc="Degrees of trail behind the bead at full speed. Default: 180."
+    )
+    comet_width: rx.Var[int | float] = field(
+        doc="Extra stroke width at the head of the trail at full speed. Default: 12."
+    )
+    disabled: rx.Var[bool] = field(
+        doc="Dims the dial and ignores input. Default: false."
+    )
+    on_change: rx.EventHandler[lambda value: [safe(value)]] = field(
+        doc="Called on every snapped change, including during a drag. Handler receives: value."
+    )
+    on_change_end: rx.EventHandler[lambda value, detail: [safe(value), safe(detail)]] = field(
+        doc="Called on release and on a key, with the release velocity and the bounce it earned. Handler receives: value, detail."
+    )
+
+
+class DodgeField(ReactBitsComponent):
+    """Wrapper that makes any child flee the pointer inside a bounded field, dodges once per approach, then relents after a few tries and glides home.
+
+    Docs: https://reactbits.dev/micro/dodge-field
+    """
+
+    tag = "DodgeField"
+    alias = "ReactBitsDodgeField"
+    is_default = True
+    _rb_category = "Micro"
+    _rb_name = "DodgeField"
+    _rb_files = ('DodgeField.css', 'DodgeField.jsx')
+    lib_dependencies: list[str] = ['motion@12.23.21']
+
+    taunts: rx.Var[list[str]] = field(
+        doc="Labels for the built-in pill: the first at rest, then one per dodge, the last once it relents. Default: DEFAULT_TAUNTS."
+    )
+    notice: rx.Var[str] = field(
+        doc="One line shown under the child on touch devices, where nothing dodges."
+    )
+    ink_color: rx.Var[str] = field(
+        doc="The pill tint and text, the caught fill and the focus ring all derive from it. Default: '#f5f5f5'."
+    )
+    contrast_color: rx.Var[str] = field(
+        doc="Text colour while the pill is caught. Default: '#18181b'."
+    )
+    field_height: rx.Var[int | float] = field(
+        doc="Height of the invisible field in pixels; its width is the container. Default: 240."
+    )
+    reach: rx.Var[int | float] = field(
+        doc="How far it bolts, in pixels, with the pointer on its home. Default: 72."
+    )
+    radius: rx.Var[int | float] = field(
+        doc="Distance from home at which it starts to react, in pixels. Default: 120."
+    )
+    falloff: rx.Var[int | float] = field(
+        doc="Exponent of the reaction curve. 1 drifts away from far off; 4 only flinches at the last moment. Default: 2."
+    )
+    flee_duration: rx.Var[int | float] = field(
+        doc="Settle time of the dart, in milliseconds. Default: 130."
+    )
+    return_duration: rx.Var[int | float] = field(
+        doc="Settle time of the glide home, in milliseconds. Default: 620."
+    )
+    return_bounce: rx.Var[int | float] = field(
+        doc="Overshoot on the way home. 0.1 is a hair, 0.3 a visible wobble. Default: 0.1."
+    )
+    axis: rx.Var[Literal["both", "x", "y"]] = field(
+        doc="Which way it may flee. Default: 'both'."
+    )
+    wall: rx.Var[Literal["clamp", "bounce"]] = field(
+        doc="At the edge of the field: stop dead, or fold the overflow back so it rebounds. Default: 'clamp'."
+    )
+    patience: rx.Var[int | float] = field(
+        doc="Dodges before it gives in and sits still, at least 1. Never wrap a decline or close control in a field that dodges. Default: 4."
+    )
+    disabled: rx.Var[bool] = field(
+        doc="Sits still and stops counting; the child stays clickable. Default: false."
+    )
+    on_dodge: rx.EventHandler[lambda count: [safe(count)]] = field(
+        doc="Called on each counted dodge. Handler receives: count."
+    )
+    on_relent: rx.EventHandler[no_args_event_spec] = field(
+        doc="Called when it gives in."
+    )
+    on_catch: rx.EventHandler[no_args_event_spec] = field(
+        doc="Called when the child is clicked."
+    )
+
+
+class FolderFloat(ReactBitsComponent):
+    """Folder that opens on hover or press: the flap tilts toward you, a paper edge rises, and its notes spring out from behind the flap into a floating cloud to pick from, then sink back when the folder closes.
+
+    Docs: https://reactbits.dev/micro/folder-float
+    """
+
+    tag = "FolderFloat"
+    alias = "ReactBitsFolderFloat"
+    is_default = True
+    _rb_category = "Micro"
+    _rb_name = "FolderFloat"
+    _rb_files = ('FolderFloat.css', 'FolderFloat.jsx')
+    lib_dependencies: list[str] = ['matter-js@0.20.0']
+
+    items: rx.Var[list[Any]] = field(
+        doc="The pills that float out. A string is its own value. Default: DEFAULT_ITEMS."
+    )
+    label: rx.Var[str] = field(
+        doc="The line on the flap. Default: 'Design feedback'."
+    )
+    sublabel: rx.Var[str] = field(
+        doc="The dimmer line under it. Empty counts the notes."
+    )
+    trigger: rx.Var[Literal["hover", "click"]] = field(
+        doc="Open on hover, or toggle on press. Default: 'hover'."
+    )
+    default_open: rx.Var[bool] = field(
+        doc="Start open. Default: false."
+    )
+    close_on_select: rx.Var[bool] = field(
+        doc="Picking a pill closes the folder. Default: true."
+    )
+    physics: rx.Var[bool] = field(
+        doc="Once the pills land, a zero-gravity world takes over: they float, collide, and can be dragged and thrown inside the cloud. Default: true."
+    )
+    drift: rx.Var[int | float] = field(
+        doc="Strength of the floating currents in the world. 0 holds still. Default: 0.5."
+    )
+    folder_color: rx.Var[str] = field(
+        doc="The back panel and its tab. Default: '#3f3f46'."
+    )
+    front_color: rx.Var[str] = field(
+        doc="The flap. Default: '#52525b'."
+    )
+    paper_color: rx.Var[str] = field(
+        doc="The paper edge that rises as it opens. Default: '#f5f5f5'."
+    )
+    item_color: rx.Var[str] = field(
+        doc="The pills. Default: '#f5f5f5'."
+    )
+    item_text_color: rx.Var[str] = field(
+        doc="The pill text. Default: '#18181b'."
+    )
+    label_color: rx.Var[str] = field(
+        doc="The flap text. Default: '#f5f5f5'."
+    )
+    width: rx.Var[int | float] = field(
+        doc="Folder width in px. Default: 200."
+    )
+    height: rx.Var[int | float] = field(
+        doc="Folder height in px, below the tab. Default: 148."
+    )
+    radius: rx.Var[int | float] = field(
+        doc="Corner radius in px. Default: 14."
+    )
+    spread: rx.Var[int | float] = field(
+        doc="Half the widest the cloud may be, in px. Pills pack into rows within it. Default: 180."
+    )
+    lift: rx.Var[int | float] = field(
+        doc="Gap between the folder and the lowest row, in px. Default: 26."
+    )
+    tilt: rx.Var[int | float] = field(
+        doc="Most a pill leans, in degrees. Default: 8."
+    )
+    flap_angle: rx.Var[int | float] = field(
+        doc="How far the flap tilts toward you when open, in degrees. Default: 34."
+    )
+    rest_angle: rx.Var[int | float] = field(
+        doc="The flap tilt when closed, in degrees. Default: 16."
+    )
+    open_duration: rx.Var[int | float] = field(
+        doc="A pill's rise, in ms. The close is 60% of it. Default: 520."
+    )
+    stagger: rx.Var[int | float] = field(
+        doc="Delay between pills, in ms. The close reverses the order. Default: 45."
+    )
+    bounce: rx.Var[int | float] = field(
+        doc="Overshoot of the rise. 0 lands dead. Default: 0.3."
+    )
+    on_select: rx.EventHandler[lambda value, index: [safe(value), safe(index)]] = field(
+        doc="A pill was picked. Handler receives: value, index."
+    )
+    on_open_change: rx.EventHandler[lambda open: [safe(open)]] = field(
+        doc="The folder opened or closed. Handler receives: open."
+    )
+
+
+class FuseButton(ReactBitsComponent):
+    """Action button whose done state carries its own undo on a burning fuse: press, the label crossfades to Undo, a hairline burns for the undo window, and Undo or Escape runs it back.
+
+    Docs: https://reactbits.dev/micro/fuse-button
+    """
+
+    tag = "FuseButton"
+    alias = "ReactBitsFuseButton"
+    is_default = True
+    _rb_category = "Micro"
+    _rb_name = "FuseButton"
+    _rb_files = ('FuseButton.css', 'FuseButton.jsx')
+    lib_dependencies: list[str] = ['@hugeicons/core-free-icons@4.3.3', '@hugeicons/react@1.1.10']
+
+    label: rx.Var[str] = field(
+        doc="The idle action. Default: 'Archive'."
+    )
+    undo_label: rx.Var[str] = field(
+        doc="The label while the fuse burns; the whole pill is the Undo button. Default: 'Undo'."
+    )
+    done_label: rx.Var[str] = field(
+        doc="Shown with a check once the fuse burns out and settle is stay; announced to screen readers on arm. Default: 'Archived'."
+    )
+    icon: rx.Var[rx.Component | str] = field(
+        doc="The idle glyph; an archive icon when omitted."
+    )
+    color: rx.Var[str] = field(
+        doc="Ink for labels and icons; the seam and tints derive from it. Default: '#f5f5f5'."
+    )
+    background: rx.Var[str] = field(
+        doc="The pill surface. Default: '#27272a'."
+    )
+    fuse_color: rx.Var[str] = field(
+        doc="The lit line or ring. Default: '#f5a524'."
+    )
+    size: rx.Var[Literal["sm", "md", "lg"]] = field(
+        doc="Height 36, 44 or 52 pixels with matching type and icons. Default: 'md'."
+    )
+    radius: rx.Var[int | float] = field(
+        doc="Corner radius in pixels; 22 is a full pill at the medium size. Default: 22."
+    )
+    undo_window: rx.Var[int | float] = field(
+        doc="How long the fuse burns and Undo stays on offer, in milliseconds. Default: 4000."
+    )
+    fuse: rx.Var[Literal["outline", "bottom", "top"]] = field(
+        doc="The pill rim burning down clockwise, or a line along the bottom or top edge. Default: 'outline'."
+    )
+    fuse_thickness: rx.Var[int | float] = field(
+        doc="Line height or rim stroke in pixels. Default: 1.5."
+    )
+    crossfade_ms: rx.Var[int | float] = field(
+        doc="Blur crossfade between faces after a pointer press. Keyboard commits swap instantly. Default: 200."
+    )
+    commit_on: rx.Var[Literal["press", "fuseEnd"]] = field(
+        doc="When onCommit fires: at the press, with Undo as the revert, or only once the fuse burns out. Default: 'press'."
+    )
+    pause_on_hover: rx.Var[bool] = field(
+        doc="Leaving and coming back with a mouse freezes the fuse until the pointer leaves again. Default: true."
+    )
+    settle: rx.Var[Literal["reset", "stay"]] = field(
+        doc="After the fuse ends: return to the idle face, or stay on a terminal done face until remounted. Default: 'reset'."
+    )
+    disabled: rx.Var[bool] = field(
+        doc="Dims the idle face and ignores presses. Undo stays available while armed. Default: false."
+    )
+    type: rx.Var[Literal["button", "submit", "reset"]] = field(
+        doc="Type of the idle button. Default: 'button'."
+    )
+    on_commit: rx.EventHandler[lambda reason: [safe(reason)]] = field(
+        doc="The action. Handler receives: reason."
+    )
+    on_undo: rx.EventHandler[no_args_event_spec] = field(
+        doc="Called when Undo or Escape runs the action back."
+    )
+    on_fuse_end: rx.EventHandler[no_args_event_spec] = field(
+        doc="Called when the window closes without an undo."
+    )
+    on_phase_change: rx.EventHandler[lambda phase: [safe(phase)]] = field(
+        doc="Called on every phase change. Handler receives: phase."
+    )
+
+
+class GlideSelect(ReactBitsComponent):
+    """Select chip whose menu pops out of its own corner and whose single hover highlight glides between rows, remembering where you left it so re-entry slides from there instead of blinking in.
+
+    Docs: https://reactbits.dev/micro/glide-select
+    """
+
+    tag = "GlideSelect"
+    alias = "ReactBitsGlideSelect"
+    is_default = True
+    _rb_category = "Micro"
+    _rb_name = "GlideSelect"
+    _rb_files = ('GlideSelect.css', 'GlideSelect.jsx')
+    lib_dependencies: list[str] = ['@hugeicons/core-free-icons@4.3.3', '@hugeicons/react@1.1.10']
+
+    options: rx.Var[list[Any]] = field(
+        doc="The rows. A string is both value and label; a tag shows muted at the right. Default: DEFAULT_OPTIONS."
+    )
+    value: rx.Var[str] = field(
+        doc="Controlled value. Outside changes never animate."
+    )
+    default_value: rx.Var[str] = field(
+        doc="Initial value when uncontrolled."
+    )
+    placeholder: rx.Var[str] = field(
+        doc="Chip text while nothing is selected. Default: 'Select\u2026'."
+    )
+    show_tags: rx.Var[bool] = field(
+        doc="Shows each row's tag. Default: true."
+    )
+    accent_color: rx.Var[str] = field(
+        doc="The check on the selected row. Default: '#f5f5f5'."
+    )
+    surface_color: rx.Var[str] = field(
+        doc="Chip and menu background. Default: '#27272a'."
+    )
+    highlight_color: rx.Var[str] = field(
+        doc="The gliding pill. The selected row rests on it at 60%, and the chip tint derives from it. Default: '#3f3f46'."
+    )
+    text_color: rx.Var[str] = field(
+        doc="Labels. Tags and the chevron derive from it. Default: '#f5f5f5'."
+    )
+    size: rx.Var[Literal["sm", "md", "lg"]] = field(
+        doc="Chip 28, 32 or 44 pixels with matching rows. Large is the touch-first size. Default: 'md'."
+    )
+    radius: rx.Var[int | float] = field(
+        doc="Menu corner in pixels. Chip, rows and pill use 4 less so they stay concentric. Default: 10."
+    )
+    menu_width: rx.Var[int | float] = field(
+        doc="Menu width in pixels, never narrower than the chip. Default: 176."
+    )
+    placement: rx.Var[Literal["top", "bottom"]] = field(
+        doc="Which side the menu grows on. It flips when the chosen side would leave the viewport. Default: 'bottom'."
+    )
+    align: rx.Var[Literal["left", "right"]] = field(
+        doc="Which chip edge the menu shares. Default: 'left'."
+    )
+    pop_duration: rx.Var[int | float] = field(
+        doc="Milliseconds the menu takes to grow out of its corner. It leaves in two thirds of that. Default: 180."
+    )
+    glide_duration: rx.Var[int | float] = field(
+        doc="Milliseconds the pill takes to travel between rows. 0 is a conventional hover. Default: 220."
+    )
+    remember_position: rx.Var[bool] = field(
+        doc="The highlight stays on the row the pointer left, so re-entry glides from there. Off, it clears on leave and the selected row shows again. Default: true."
+    )
+    disabled: rx.Var[bool] = field(
+        doc="Dims the chip and ignores input. Default: false."
+    )
+    aria_label: rx.Var[str] = field(
+        doc="Accessible name of the chip and list. Default: 'Select'."
+    )
+    on_change: rx.EventHandler[lambda value, option: [safe(value), safe(option)]] = field(
+        doc="Called on a pick that changes the value. Handler receives: value, option."
+    )
+
+
+class HoldButton(ReactBitsComponent):
+    """Hold-to-confirm button whose liquid fill rises while pressed, snaps back on an early release and swaps its label through a blur when the hold completes.
+
+    Docs: https://reactbits.dev/micro/hold-button
+    """
+
+    tag = "HoldButton"
+    alias = "ReactBitsHoldButton"
+    is_default = True
+    _rb_category = "Micro"
+    _rb_name = "HoldButton"
+    _rb_files = ('HoldButton.css', 'HoldButton.jsx')
+
+    done_label: rx.Var[rx.Component | str] = field(
+        doc="Label that blurs in when the hold completes. Default: 'Deleted'."
+    )
+    icon: rx.Var[rx.Component | str] = field(
+        doc="Optional icon rendered before the idle label."
+    )
+    done_icon: rx.Var[rx.Component | str] = field(
+        doc="Optional icon rendered before the done label."
+    )
+    background_color: rx.Var[str] = field(
+        doc="Button body colour. Default: '#27272a'."
+    )
+    fill_color: rx.Var[str] = field(
+        doc="Colour of the liquid fill, its wave, the glow and the focus ring. Default: '#5227FF'."
+    )
+    text_color: rx.Var[str] = field(
+        doc="Label colour outside the fill. Default: '#f5f5f5'."
+    )
+    fill_text_color: rx.Var[str] = field(
+        doc="Label colour inside the fill; the ink inverts as the edge crosses it. Default: '#ffffff'."
+    )
+    size: rx.Var[Literal["sm", "md", "lg"]] = field(
+        doc="Height, padding and font size preset. Default: 'md'."
+    )
+    radius: rx.Var[int | float] = field(
+        doc="Corner radius in pixels of the body, the fill and the focus ring. Default: 14."
+    )
+    fill_direction: rx.Var[Literal["right", "up"]] = field(
+        doc="Whether the liquid sweeps left to right or rises from the bottom. Default: 'right'."
+    )
+    hold_time: rx.Var[int | float] = field(
+        doc="How long the press must last, in milliseconds. The fill moves at constant speed. Default: 2000."
+    )
+    release_time: rx.Var[int | float] = field(
+        doc="How fast the fill snaps back on an early release or a reset, in milliseconds. Default: 200."
+    )
+    press_scale: rx.Var[int | float] = field(
+        doc="Squash of the button while a pointer holds it. 1 disables it. Default: 0.97."
+    )
+    wave: rx.Var[bool] = field(
+        doc="Scrolling meniscus on the leading edge of the fill. Default: true."
+    )
+    wave_amplitude: rx.Var[int | float] = field(
+        doc="Height of the wave crests in pixels. Default: 6."
+    )
+    glow: rx.Var[bool] = field(
+        doc="Glow that charges with the hold and pulses once on completion. Default: true."
+    )
+    reset_after: rx.Var[int | float] = field(
+        doc="Milliseconds the done state stays before the button resets. 0 keeps it done. Default: 1200."
+    )
+    disabled: rx.Var[bool] = field(
+        doc="Dims the button and ignores input. Default: false."
+    )
+    on_hold: rx.EventHandler[no_args_event_spec] = field(
+        doc="Called once, on the frame the fill completes."
+    )
+    on_tap: rx.EventHandler[no_args_event_spec] = field(
+        doc="Called on a release shorter than 250ms that did not drift away."
+    )
+
+
+class JellyRadio(ReactBitsComponent):
+    """Radio group of labelled chips where the chosen one swells wide-then-tall on two springs and barges its neighbours outward with a travelling stagger, so a selection reads as a force moving through the row.
+
+    Docs: https://reactbits.dev/micro/jelly-radio
+    """
+
+    tag = "JellyRadio"
+    alias = "ReactBitsJellyRadio"
+    is_default = True
+    _rb_category = "Micro"
+    _rb_name = "JellyRadio"
+    _rb_files = ('JellyRadio.css', 'JellyRadio.jsx')
+    lib_dependencies: list[str] = ['motion@12.23.21']
+
+    items: rx.Var[list[Any]] = field(
+        doc="The chips. A string is both value and label. Default: DEFAULT_ITEMS."
+    )
+    value: rx.Var[str] = field(
+        doc="Controlled value. Outside changes jump."
+    )
+    default_value: rx.Var[str] = field(
+        doc="Initial value when uncontrolled. Falls back to the first item."
+    )
+    chip_color: rx.Var[str] = field(
+        doc="Surface of an unchosen chip. Default: '#27272a'."
+    )
+    active_color: rx.Var[str] = field(
+        doc="Surface of the chosen chip. Default: '#f5f5f5'."
+    )
+    text_color: rx.Var[str] = field(
+        doc="Label of an unchosen chip, and the hover tone. Default: '#f5f5f5'."
+    )
+    active_text_color: rx.Var[str] = field(
+        doc="Label of the chosen chip. Default: '#18181b'."
+    )
+    size: rx.Var[Literal["sm", "md", "lg"]] = field(
+        doc="Chip height 28, 36 or 44 pixels. Large is the touch-first size. Default: 'md'."
+    )
+    gap: rx.Var[int | float] = field(
+        doc="Rest spacing between chips in pixels. Default: 8."
+    )
+    radius: rx.Var[int | float] = field(
+        doc="Corner radius in pixels. 18 is a pill at medium. Default: 18."
+    )
+    swell: rx.Var[int | float] = field(
+        doc="How much the chosen chip grows. It also sets the room the neighbours make. Default: 0.2."
+    )
+    barge: rx.Var[int | float] = field(
+        doc="Extra pixels every neighbour is shoved beyond that room. 0 only makes room. Default: 6."
+    )
+    shrink: rx.Var[int | float] = field(
+        doc="How much every unchosen chip gives up. Default: 0.05."
+    )
+    jelly: rx.Var[int | float] = field(
+        doc="The wide-before-tall split. 0 swells uniformly, 1.5 exaggerates it. Default: 1."
+    )
+    bounce: rx.Var[int | float] = field(
+        doc="One minus the damping ratio. 0 arrives and stops, 0.4 rings. Default: 0.25."
+    )
+    stagger: rx.Var[int | float] = field(
+        doc="Milliseconds per row step before a neighbour moves. 0 moves the row as a slab. Default: 22."
+    )
+    stiffness: rx.Var[int | float] = field(
+        doc="Spring stiffness of the chosen chip. Neighbours soften from it with distance. Default: 580."
+    )
+    disabled: rx.Var[bool] = field(
+        doc="Fades the group and ignores input. Default: false."
+    )
+    aria_label: rx.Var[str] = field(
+        doc="Accessible name of the group. Default: 'Options'."
+    )
+    on_change: rx.EventHandler[lambda value, index: [safe(value), safe(index)]] = field(
+        doc="Called on the commit, before the motion ends. Handler receives: value, index."
+    )
+
+
+class LatticeLoader(ReactBitsComponent):
+    """Inline agent-status row: a 3x3 or 4x4 lattice whose cells brighten in a phase-offset wave beside a verb and a live stopwatch, resolving into a check or a cross when the task ends.
+
+    Docs: https://reactbits.dev/micro/lattice-loader
+    """
+
+    tag = "LatticeLoader"
+    alias = "ReactBitsLatticeLoader"
+    is_default = True
+    _rb_category = "Micro"
+    _rb_name = "LatticeLoader"
+    _rb_files = ('LatticeLoader.css', 'LatticeLoader.jsx')
+
+    label: rx.Var[str] = field(
+        doc="The verb while working. Default: 'Thinking'."
+    )
+    done_label: rx.Var[str] = field(
+        doc="The verb after status turns to done; the frozen time follows it. Default: 'Done in'."
+    )
+    error_label: rx.Var[str] = field(
+        doc="The verb after status turns to error. Default: 'Failed after'."
+    )
+    status: rx.Var[Literal["working", "done", "error"]] = field(
+        doc="Drives everything: the wave runs, or freezes and dissolves into a check or a cross while the stopwatch stops. Default: 'working'."
+    )
+    pattern: rx.Var[str | dict[str, Any]] = field(
+        doc="The wave geometry. At 3 x 3: arrow, dots, orbit, ripple, snake, spiral. At 4 x 4: sweep, spin, rain, pulse, orbit, snake. A custom object gives one delay per cell in step units (null for a hole), an optional loop and scale, and lit: the share of the cycle a cell stays bright, 0.25, 0.35, 0.45 or 0.62. Default: 'orbit'."
+    )
+    grid: rx.Var[int | int | float] = field(
+        doc="Cells per side. Each size has its own set of patterns and its own check and cross. Default: 3."
+    )
+    shape: rx.Var[Literal["square", "round"]] = field(
+        doc="Rounded tiles or dots. Default: 'round'."
+    )
+    color: rx.Var[str] = field(
+        doc="Ink for the cells, the verb and the stopwatch. Inherits the page colour by default. Default: 'currentColor'."
+    )
+    done_color: rx.Var[str] = field(
+        doc="Colour of the check. Default: '#22c55e'."
+    )
+    error_color: rx.Var[str] = field(
+        doc="Colour of the cross. Default: '#ef4444'."
+    )
+    cell_size: rx.Var[int | float] = field(
+        doc="Cell side in pixels; the lattice is three cells and two gaps. Default: 6."
+    )
+    gap: rx.Var[int | float] = field(
+        doc="Seam between cells in pixels. Default: 2."
+    )
+    font_size: rx.Var[int | float] = field(
+        doc="Verb size in pixels; the stopwatch and row gap scale with it. Default: 14."
+    )
+    step: rx.Var[int | float] = field(
+        doc="Milliseconds between neighbouring cells lighting; the whole loop scales with it. Default: 90."
+    )
+    idle_opacity: rx.Var[int | float] = field(
+        doc="How visible the dark silhouette is. Default: 0.15."
+    )
+    glow: rx.Var[bool] = field(
+        doc="A halo on the lit cells and the mark. Default: false."
+    )
+    glow_color: rx.Var[str] = field(
+        doc="The halo colour. Empty follows the ink, and the mark colour for the mark."
+    )
+    show_timer: rx.Var[bool] = field(
+        doc="Shows the live stopwatch. Default: true."
+    )
+    elapsed: rx.Var[int | float] = field(
+        doc="Controlled elapsed seconds. When set, the internal clock never runs."
+    )
+
+
+class PeekRating(ReactBitsComponent):
+    """Star rating you can try before you commit: sweeping the row lifts a trailing wave of stars up to the pointer while a tip hops along with the label; a click commits with a pop.
+
+    Docs: https://reactbits.dev/micro/peek-rating
+    """
+
+    tag = "PeekRating"
+    alias = "ReactBitsPeekRating"
+    is_default = True
+    _rb_category = "Micro"
+    _rb_name = "PeekRating"
+    _rb_files = ('PeekRating.css', 'PeekRating.jsx')
+    lib_dependencies: list[str] = ['@hugeicons/core-free-icons@4.3.3', '@hugeicons/react@1.1.10']
+
+    value: rx.Var[int | float] = field(
+        doc="Controlled rating, from 0 to count."
+    )
+    default_value: rx.Var[int | float] = field(
+        doc="Initial rating when uncontrolled. Default: 0."
+    )
+    count: rx.Var[int | float] = field(
+        doc="Number of glyphs. Default: 5."
+    )
+    shape: rx.Var[Literal["star", "heart", "bolt"]] = field(
+        doc="Built-in glyph shape. Default: 'star'."
+    )
+    icon: rx.Var[rx.Component | str] = field(
+        doc="Custom glyph that replaces the built-in shape."
+    )
+    labels: rx.Var[list[str]] = field(
+        doc="One label per glyph, shown in the tip while previewing. Without labels the tip shows the number. Default: []."
+    )
+    active_color: rx.Var[str] = field(
+        doc="Colour of lit glyphs and of the focus ring. Default: '#f5b400'."
+    )
+    idle_color: rx.Var[str] = field(
+        doc="Colour of unlit glyphs. Default: '#52525b'."
+    )
+    tip_color: rx.Var[str] = field(
+        doc="Background of the tip that follows the pointer. Default: '#27272a'."
+    )
+    tip_text_color: rx.Var[str] = field(
+        doc="Text colour of the tip. Default: '#f5f5f5'."
+    )
+    size: rx.Var[int | float] = field(
+        doc="Glyph size in pixels; spacing and the tip scale with it. Default: 28."
+    )
+    lift: rx.Var[int | float] = field(
+        doc="How far previewed glyphs rise, in pixels. 0 makes the preview colour-only. Default: 6."
+    )
+    magnify: rx.Var[int | float] = field(
+        doc="Scale of the glyph under the pointer. Default: 1.15."
+    )
+    rise_duration: rx.Var[int | float] = field(
+        doc="Duration in milliseconds of each glyph\u2019s rise and fall, and of the tip\u2019s hop. Default: 320."
+    )
+    pop_scale: rx.Var[int | float] = field(
+        doc="Peak scale of the pop on the committed glyph. 1 disables it. Default: 1.3."
+    )
+    show_tip: rx.Var[bool] = field(
+        doc="Shows the tip above the pointer glyph while previewing. Default: true."
+    )
+    allow_clear: rx.Var[bool] = field(
+        doc="Clicking the current rating again, or Backspace, clears it to 0. Default: true."
+    )
+    read_only: rx.Var[bool] = field(
+        doc="Display only: no preview, no pop, announced as an image. Default: false."
+    )
+    disabled: rx.Var[bool] = field(
+        doc="Dims the control and ignores input. Default: false."
+    )
+    aria_label: rx.Var[str] = field(
+        doc="Accessible name of the radio group. Default: 'Rating'."
+    )
+    on_change: rx.EventHandler[lambda value: [safe(value)]] = field(
+        doc="Called when a rating is committed by click, release or keyboard. Handler receives: value."
+    )
+    on_preview: rx.EventHandler[lambda value: [safe(value)]] = field(
+        doc="Called on every slot crossing while previewing, and with null when the preview clears. Handler receives: value."
+    )
+
+
+class PromptBar(ReactBitsComponent):
+    """Chat composer with an @ sources menu, a / commands menu, a model picker, dictation and attachments, whose send tile charges to ink the moment there is something to send and morphs its arrow into a stop square while busy.
+
+    Docs: https://reactbits.dev/micro/prompt-bar
+    """
+
+    tag = "PromptBar"
+    alias = "ReactBitsPromptBar"
+    is_default = True
+    _rb_category = "Micro"
+    _rb_name = "PromptBar"
+    _rb_files = ('PromptBar.css', 'PromptBar.jsx')
+    lib_dependencies: list[str] = ['@hugeicons/core-free-icons@4.3.3', '@hugeicons/react@1.1.10', 'motion@12.23.21']
+
+    placeholder: rx.Var[str] = field(
+        doc="Shown while the field is empty. Default: 'Ask anything'."
+    )
+    sources: rx.Var[list[Any]] = field(
+        doc="Rows of the @ menu and the plus button: key, name, description, icon (a Hugeicons icon or any node), and attach: true for the row that adds files. Default: DEFAULT_SOURCES."
+    )
+    commands: rx.Var[list[Any]] = field(
+        doc="Rows of the / menu: key, name (with the slash), description. Default: DEFAULT_COMMANDS."
+    )
+    models: rx.Var[list[Any]] = field(
+        doc="Rows of the model picker: key, name, tag. An empty list hides the picker. Default: DEFAULT_MODELS."
+    )
+    default_model: rx.Var[str] = field(
+        doc="Key of the model selected at first. Empty picks the first."
+    )
+    efforts: rx.Var[list[str]] = field(
+        doc="Steps of the effort slider, low to high. The last step turns the field to the spark colour with drifting sparks. An empty list hides the control. Default: DEFAULT_EFFORTS."
+    )
+    default_effort: rx.Var[str] = field(
+        doc="The step selected at first. Empty picks the middle."
+    )
+    busy: rx.Var[bool] = field(
+        doc="A response is in flight. The send tile stays ink and its arrow morphs into a stop square. Default: false."
+    )
+    background: rx.Var[str] = field(
+        doc="The field surface, and the glyph on an armed tile. Default: '#27272a'."
+    )
+    color: rx.Var[str] = field(
+        doc="The ink: text, icons, and the armed tile. Default: '#f5f5f5'."
+    )
+    menu_background: rx.Var[str] = field(
+        doc="The surface of the menus and the effort popover. Default: '#323236'."
+    )
+    spark_color: rx.Var[str] = field(
+        doc="The wash, the sparks and the slider at the top effort. Default: '#b39dff'."
+    )
+    width: rx.Var[int | float] = field(
+        doc="Field width in px, capped at the parent. Default: 400."
+    )
+    radius: rx.Var[int | float] = field(
+        doc="Field corner radius in px. Default: 16."
+    )
+    max_rows: rx.Var[int | float] = field(
+        doc="Rows the field grows to before it scrolls. Default: 5."
+    )
+    morph_duration: rx.Var[int | float] = field(
+        doc="Arrow to square and back, in ms. Default: 240."
+    )
+    squash: rx.Var[int | float] = field(
+        doc="Mid-morph pinch. The glyph narrows by this and grows taller to keep its area. Default: 0.12."
+    )
+    tilt: rx.Var[int | float] = field(
+        doc="Mid-morph lean in degrees, mirrored on the way back. Default: 8."
+    )
+    press_scale: rx.Var[int | float] = field(
+        doc="Scale of the send tile while a pointer is down. Default: 0.96."
+    )
+    on_effort_change: rx.EventHandler[lambda effort: [safe(effort)]] = field(
+        doc="The slider moved. Handler receives: effort."
+    )
+    on_send: rx.EventHandler[lambda text, options: [safe(text), safe(options)]] = field(
+        doc="Enter or the tile, with a non-empty draft or an attachment. The draft and attachments clear. Handler receives: text, options."
+    )
+    on_stop: rx.EventHandler[no_args_event_spec] = field(
+        doc="The tile while busy."
+    )
+    on_attach: rx.EventHandler[no_args_event_spec] = field(
+        doc="Picked the attach row. Return file names, or a promise of them, and they appear as chips."
+    )
+    on_dictate: rx.EventHandler[no_args_event_spec] = field(
+        doc="The mic. Return the transcript, or a promise of it, and it lands in the draft. Omit to hide the mic."
+    )
+
+
+class PulseHeart(ReactBitsComponent):
+    """Like button that contracts to a dot, flips colour at its smallest frame and pulses back while the count swaps one glyph.
+
+    Docs: https://reactbits.dev/micro/pulse-heart
+    """
+
+    tag = "PulseHeart"
+    alias = "ReactBitsPulseHeart"
+    is_default = True
+    _rb_category = "Micro"
+    _rb_name = "PulseHeart"
+    _rb_files = ('PulseHeart.css', 'PulseHeart.jsx')
+    lib_dependencies: list[str] = ['@hugeicons/core-free-icons@4.3.3']
+
+    liked: rx.Var[bool] = field(
+        doc="Controlled state. Changes from outside land without a run."
+    )
+    default_liked: rx.Var[bool] = field(
+        doc="Initial state when uncontrolled. Default: false."
+    )
+    count: rx.Var[int | float] = field(
+        doc="The number shown; a press adds or removes one. Rolls one glyph per press. For a multi-digit odometer with places and decimals, use Counter. Default: 0."
+    )
+    show_count: rx.Var[bool] = field(
+        doc="Shows the count; off collapses the pill to a circle. Default: true."
+    )
+    icon: rx.Var[rx.Component | str] = field(
+        doc="Built-in glyph, or a custom element. Default: 'heart'."
+    )
+    idle_outline: rx.Var[bool] = field(
+        doc="Draws the idle glyph as an outline. Off draws it as a muted solid. Default: true."
+    )
+    size: rx.Var[int | float] = field(
+        doc="Glyph size in pixels; padding, gap and count size derive from it. Default: 40."
+    )
+    corner: rx.Var[int | float] = field(
+        doc="Pill corner radius in pixels. Default: 32."
+    )
+    liked_color: rx.Var[str] = field(
+        doc="Colour after the flip, and of the hover tint and focus ring. Default: '#ff4d6d'."
+    )
+    idle_color: rx.Var[str] = field(
+        doc="Colour before the flip. Default: '#8b8b93'."
+    )
+    pill_color: rx.Var[str] = field(
+        doc="Background of the pill that beats under the glyph. Default: '#232326'."
+    )
+    text_color: rx.Var[str] = field(
+        doc="Colour of the count. Default: '#f5f5f5'."
+    )
+    duration: rx.Var[int | float] = field(
+        doc="Length of the whole run in milliseconds; the flip is always at 40% of it. Default: 560."
+    )
+    dot_size: rx.Var[int | float] = field(
+        doc="How small the glyph gets at the flip, as a fraction of its size. Default: 0.3."
+    )
+    overshoot: rx.Var[int | float] = field(
+        doc="How far the glyph rebounds past rest on the way back. 0 lands without a rebound. Default: 1.7."
+    )
+    beat: rx.Var[int | float] = field(
+        doc="Percent the pill dips at the flip. Default: 3."
+    )
+    roll_duration: rx.Var[int | float] = field(
+        doc="How long the changed glyph of the count takes to roll, in milliseconds. Default: 350."
+    )
+    disabled: rx.Var[bool] = field(
+        doc="Dims the button and ignores input. Default: false."
+    )
+    label: rx.Var[str] = field(
+        doc="Accessible name; the count is appended to it. Default: 'Like'."
+    )
+    on_change: rx.EventHandler[lambda liked, count: [safe(liked), safe(count)]] = field(
+        doc="Called on every press with the new state and count. Handler receives: liked, count."
+    )
+
+
+class RefineFrame(ReactBitsComponent):
+    """Reserved-aspect frame that walks any media through queued, generating, refining and complete without layout shift: each stage is one blur, saturate, scale and opacity tween, a soft band sweeps while it works, a chip reports the stage, and an error dims the picture behind a retry pill.
+
+    Docs: https://reactbits.dev/micro/refine-frame
+    """
+
+    tag = "RefineFrame"
+    alias = "ReactBitsRefineFrame"
+    is_default = True
+    _rb_category = "Micro"
+    _rb_name = "RefineFrame"
+    _rb_files = ('RefineFrame.css', 'RefineFrame.jsx')
+    lib_dependencies: list[str] = ['@hugeicons/core-free-icons@4.3.3', '@hugeicons/react@1.1.10']
+
+    status: rx.Var[Literal["queued", "generating", "refining", "complete", "error"]] = field(
+        doc="The stage. Each change tweens the media to that stage. Default: 'generating'."
+    )
+    aspect_ratio: rx.Var[str] = field(
+        doc="The box reserved before and during generation, so nothing shifts. Default: '4 / 3'."
+    )
+    width: rx.Var[int | float] = field(
+        doc="Frame width in px, capped at the parent. Default: 320."
+    )
+    radius: rx.Var[int | float] = field(
+        doc="Corner radius in px. Default: 16."
+    )
+    background: rx.Var[str] = field(
+        doc="The paper behind the media, and the chip surface. Default: '#27272a'."
+    )
+    color: rx.Var[str] = field(
+        doc="The ink: chip text, the sweep and the retry pill. Default: '#f5f5f5'."
+    )
+    stage_duration: rx.Var[int | float] = field(
+        doc="Each stage tween, in ms. Default: 400."
+    )
+    sweep: rx.Var[bool] = field(
+        doc="A soft band crosses the frame while it works. Default: true."
+    )
+    show_status: rx.Var[bool] = field(
+        doc="The chip with the mark and the stage label. Default: true."
+    )
+    hide_after: rx.Var[int | float] = field(
+        doc="Ms after completion before the chip fades. 0 keeps it. Default: 1200."
+    )
+    labels: rx.Var[dict[str, Any]] = field(
+        doc="Chip text per stage: Queued, Generating, Refining, Ready, Failed. Default: DEFAULT_LABELS."
+    )
+    retry_label: rx.Var[str] = field(
+        doc="The pill on an error. Default: 'Retry'."
+    )
+    on_retry: rx.EventHandler[no_args_event_spec] = field(
+        doc="The retry pill was pressed. Without it, no pill."
+    )
+
+
+class RubberSegment(ReactBitsComponent):
+    """Segmented control with a rubber thumb: taps stretch it across the gap and squash it onto the target, and you can grab, drag and flick it between slots.
+
+    Docs: https://reactbits.dev/micro/rubber-segment
+    """
+
+    tag = "RubberSegment"
+    alias = "ReactBitsRubberSegment"
+    is_default = True
+    _rb_category = "Micro"
+    _rb_name = "RubberSegment"
+    _rb_files = ('RubberSegment.css', 'RubberSegment.jsx')
+    lib_dependencies: list[str] = ['motion@12.23.21']
+
+    items: rx.Var[list[Any]] = field(
+        doc="The slots, in order. A string is both value and label. Default: -."
+    )
+    value: rx.Var[str] = field(
+        doc="Controlled value. A change from outside jumps the thumb without animation."
+    )
+    default_value: rx.Var[str] = field(
+        doc="Initial value when uncontrolled; the first item if omitted."
+    )
+    track_color: rx.Var[str] = field(
+        doc="The well behind the slots. Default: '#27272a'."
+    )
+    thumb_color: rx.Var[str] = field(
+        doc="The rubber thumb, and the focus ring. Default: '#fafafa'."
+    )
+    text_color: rx.Var[str] = field(
+        doc="Idle labels, drawn at 70%. Default: '#fafafa'."
+    )
+    active_text_color: rx.Var[str] = field(
+        doc="The label revealed inside the thumb. Default: '#18181b'."
+    )
+    size: rx.Var[Literal["sm", "md", "lg"]] = field(
+        doc="Track height 28, 36 or 44 pixels; font and padding follow. Default: 'md'."
+    )
+    radius: rx.Var[int | float] = field(
+        doc="Track corner radius in pixels. Default: 10."
+    )
+    inset: rx.Var[int | float] = field(
+        doc="Gap between the thumb and the track edge; the thumb corner is radius minus inset. Default: 3."
+    )
+    equal_slots: rx.Var[bool] = field(
+        doc="Every slot the same width. Off, slots hug their labels and the thumb changes width per slot. Default: true."
+    )
+    stretch: rx.Var[int | float] = field(
+        doc="How far a tap dilates the thumb across old and new slot before it contracts. 0 is a plain slide. Default: 100."
+    )
+    squash: rx.Var[int | float] = field(
+        doc="Pixels the trailing edge lands past the slot edge before relaxing. 0 removes the squash. Default: 3."
+    )
+    speed: rx.Var[int | float] = field(
+        doc="Scales every phase together; 0.25 is slow motion. Default: 1."
+    )
+    glide: rx.Var[int | float] = field(
+        doc="How far a flick carries the thumb before it snaps. 0 always lands on the nearest slot. Default: 75."
+    )
+    draggable: rx.Var[bool] = field(
+        doc="Lets the thumb be grabbed, dragged and flicked. Default: true."
+    )
+    disabled: rx.Var[bool] = field(
+        doc="Dims the control and ignores input. Default: false."
+    )
+    on_change: rx.EventHandler[lambda value, index: [safe(value), safe(index)]] = field(
+        doc="Called on a tap, on a drag release and on every arrow key. Handler receives: value, index."
+    )
+
+
+class ScrubField(ReactBitsComponent):
+    """Number chip you drag to scrub: the value follows the hand, pushes past the range on a rubber band, and a click without moving opens it for typing.
+
+    Docs: https://reactbits.dev/micro/scrub-field
+    """
+
+    tag = "ScrubField"
+    alias = "ReactBitsScrubField"
+    is_default = True
+    _rb_category = "Micro"
+    _rb_name = "ScrubField"
+    _rb_files = ('ScrubField.css', 'ScrubField.jsx')
+    lib_dependencies: list[str] = ['motion@12.23.21']
+
+    label: rx.Var[str] = field(
+        doc="The field name. Drag anywhere on the chip to scrub; click without moving to type. Default: 'Radius'."
+    )
+    suffix: rx.Var[str] = field(
+        doc="Unit after the number, also read by screen readers. Default: 'px'."
+    )
+    value: rx.Var[int | float] = field(
+        doc="Controlled value; changes from outside land without motion."
+    )
+    default_value: rx.Var[int | float] = field(
+        doc="Initial value and the dirty baseline: the ring turns off exactly here. Default: 24."
+    )
+    min: rx.Var[int | float] = field(
+        doc="Lower bound; the rubber band starts here. Default: 0."
+    )
+    max: rx.Var[int | float] = field(
+        doc="Upper bound; the rubber band starts here. Default: 100."
+    )
+    step: rx.Var[int | float] = field(
+        doc="Granularity of drag and arrows; sets the decimals shown. Default: 1."
+    )
+    size: rx.Var[Literal["sm", "md", "lg"]] = field(
+        doc="Chip height 28, 34 or 44 pixels. Default: 'md'."
+    )
+    sensitivity: rx.Var[int | float] = field(
+        doc="Pixels of travel per step. 1 is twitchy, 6 is precise. Default: 2."
+    )
+    rubber_reach: rx.Var[int | float] = field(
+        doc="How far past a bound the number can be pushed, as a percent of the range. 0 is a hard stop. Default: 8."
+    )
+    return_duration: rx.Var[int | float] = field(
+        doc="Duration in milliseconds of the critically damped snap back to the bound. Default: 300."
+    )
+    coarse_multiplier: rx.Var[int | float] = field(
+        doc="Step multiplier while Shift is held, and for Page Up and Page Down. Default: 10."
+    )
+    fine_multiplier: rx.Var[int | float] = field(
+        doc="Step multiplier while Alt or Option is held; adds a decimal. Default: 0.1."
+    )
+    show_delta: rx.Var[bool] = field(
+        doc="Shows the signed change in a pill riding the pointer. Default: true."
+    )
+    show_dirty: rx.Var[bool] = field(
+        doc="Rings the chip while the value differs from the default. Default: false."
+    )
+    show_fill: rx.Var[bool] = field(
+        doc="Fills the chip from the left in proportion to where the value sits in the range. Default: true."
+    )
+    accent: rx.Var[str] = field(
+        doc="Fill band, dirty ring and delta pill. Default: '#f5f5f5'."
+    )
+    chip_color: rx.Var[str] = field(
+        doc="Chip surface. Text inherits from the page. Default: '#27272a'."
+    )
+    disabled: rx.Var[bool] = field(
+        doc="Dims the chip and ignores input. Default: false."
+    )
+    on_change: rx.EventHandler[lambda value: [safe(value)]] = field(
+        doc="Called on every step, key and typed commit. Handler receives: value."
+    )
+    on_commit: rx.EventHandler[lambda value: [safe(value)]] = field(
+        doc="Called on release, on a key step and on blur or Enter. Handler receives: value."
+    )
+
+
+class SlideCommit(ReactBitsComponent):
+    """Slide-to-confirm handle that plants with a spinner while your action runs, unfurls into a done pill on success and springs home with a squash and shake on failure.
+
+    Docs: https://reactbits.dev/micro/slide-commit
+    """
+
+    tag = "SlideCommit"
+    alias = "ReactBitsSlideCommit"
+    is_default = True
+    _rb_category = "Micro"
+    _rb_name = "SlideCommit"
+    _rb_files = ('SlideCommit.css', 'SlideCommit.jsx')
+    lib_dependencies: list[str] = ['@hugeicons/core-free-icons@4.3.3', '@hugeicons/react@1.1.10', 'motion@12.23.21']
+
+    label: rx.Var[rx.Component | str] = field(
+        doc="The instruction centred in the pill; the capsule wipes it as you drag. Default: 'Slide to pay'."
+    )
+    done_label: rx.Var[rx.Component | str] = field(
+        doc="The words beside the check once confirmed. Default: 'Paid'."
+    )
+    error_label: rx.Var[rx.Component | str] = field(
+        doc="Replaces the instruction, in the danger colour, after a rejected promise. Default: 'Payment failed'."
+    )
+    track_color: rx.Var[str] = field(
+        doc="The pill behind the handle. Default: '#262626'."
+    )
+    handle_color: rx.Var[str] = field(
+        doc="The handle and the ground it paints; the arrow colour is picked to read on it. Default: '#f5f5f5'."
+    )
+    success_color: rx.Var[str] = field(
+        doc="Fill of the done pill. Default: '#22c55e'."
+    )
+    danger_color: rx.Var[str] = field(
+        doc="Tint of the handle and error label after a reject. Default: '#e5484d'."
+    )
+    width: rx.Var[int | float] = field(
+        doc="Track width in pixels; the travel scales with it. Default: 280."
+    )
+    height: rx.Var[int | float] = field(
+        doc="Track height in pixels; the handle is 8px smaller. Default: 56."
+    )
+    radius: rx.Var[int | float] = field(
+        doc="Track corner radius; the handle corner is 4px smaller so the two stay concentric. Default: 28."
+    )
+    speed: rx.Var[int | float] = field(
+        doc="How fast the unfurl and the return take over once you let go. Default: 50."
+    )
+    return_bounce: rx.Var[int | float] = field(
+        doc="Energy left when the handle returns to the wall: 0 stops dead, 0.38 fills the 8% squash. Default: 0.38."
+    )
+    landing_dip: rx.Var[int | float] = field(
+        doc="How much the track dips as the done pill lands. 0 removes it. Default: 0.026."
+    )
+    hold_ms: rx.Var[int | float] = field(
+        doc="How long the done pill stands before it closes back. 0 keeps it until the component remounts. Default: 1500."
+    )
+    disabled: rx.Var[bool] = field(
+        doc="Dims the control and ignores input. Default: false."
+    )
+    icon: rx.Var[rx.Component | str] = field(
+        doc="Replaces the arrow in the handle."
+    )
+    on_confirm: rx.EventHandler[no_args_event_spec] = field(
+        doc="Called when the handle reaches the end. Return a promise to show the spinner; it unfurls on resolve and springs home on reject."
+    )
+    on_done: rx.EventHandler[no_args_event_spec] = field(
+        doc="Called when the done pill unfurls."
+    )
+    on_error: rx.EventHandler[lambda reason: [safe(reason)]] = field(
+        doc="Called with the rejection reason; the component swallows it otherwise. Handler receives: reason."
+    )
+
+
+class SlingButton(ReactBitsComponent):
+    """Send button you pull back like a slingshot: the band stretches, a power arc arms it, and releasing fires the action with the flick's velocity.
+
+    Docs: https://reactbits.dev/micro/sling-button
+    """
+
+    tag = "SlingButton"
+    alias = "ReactBitsSlingButton"
+    is_default = True
+    _rb_category = "Micro"
+    _rb_name = "SlingButton"
+    _rb_files = ('SlingButton.css', 'SlingButton.jsx')
+    lib_dependencies: list[str] = ['@hugeicons/core-free-icons@4.3.3', '@hugeicons/react@1.1.10', 'motion@12.23.21']
+
+    pad_color: rx.Var[str] = field(
+        doc="The pad fill. Default: '#f5f5f5'."
+    )
+    icon_color: rx.Var[str] = field(
+        doc="The pad content colour. Default: '#18181b'."
+    )
+    accent_color: rx.Var[str] = field(
+        doc="The power arc, the loaded band and the dot. Default: '#f5f5f5'."
+    )
+    well_color: rx.Var[str] = field(
+        doc="The seat the pad rests in. Default: '#27272a'."
+    )
+    band_color: rx.Var[str] = field(
+        doc="The band before it loads. Default: '#52525b'."
+    )
+    size: rx.Var[int | float] = field(
+        doc="Pad diameter in pixels. Seat, hit area and dot follow. Default: 56."
+    )
+    stroke_width: rx.Var[int | float] = field(
+        doc="Arc and band thickness in pixels. The band thins as it stretches. Default: 3."
+    )
+    arm_at: rx.Var[int | float] = field(
+        doc="Pull distance in pixels that loads the send. Default: 48."
+    )
+    max_pull: rx.Var[int | float] = field(
+        doc="How far the band can stretch before it stops giving. Default: 160."
+    )
+    launch_speed: rx.Var[int | float] = field(
+        doc="Speed the band adds on release, in pixels per second. Sets how far the pad snaps through its seat. Default: 2600."
+    )
+    recoil: rx.Var[int | float] = field(
+        doc="Bounce of the return spring. 0 stops dead. Default: 0.2."
+    )
+    flight: rx.Var[int | float] = field(
+        doc="How far the dot flies, in pixels. Default: 120."
+    )
+    axis: rx.Var[Literal["any", "horizontal", "vertical"]] = field(
+        doc="Free pull, or one axis with a little give across it. Default: 'any'."
+    )
+    tap_sends: rx.Var[bool] = field(
+        doc="Whether a plain tap sends. Enter always does. Default: true."
+    )
+    disabled: rx.Var[bool] = field(
+        doc="Dims the pad and ignores input. Default: false."
+    )
+    aria_label: rx.Var[str] = field(
+        doc="Accessible name of the button. Default: 'Send'."
+    )
+    on_send: rx.EventHandler[no_args_event_spec] = field(
+        doc="Called on a loaded release, on a tap when tapSends is on, and on Enter or Space."
+    )
+
+
+class SloshGauge(ReactBitsComponent):
+    """Tank gauge whose liquid chases the value with mass, tilts with its own speed and splashes against the top when it slams full; optionally a vertical slider.
+
+    Docs: https://reactbits.dev/micro/slosh-gauge
+    """
+
+    tag = "SloshGauge"
+    alias = "ReactBitsSloshGauge"
+    is_default = True
+    _rb_category = "Micro"
+    _rb_name = "SloshGauge"
+    _rb_files = ('SloshGauge.css', 'SloshGauge.jsx')
+
+    value: rx.Var[int | float] = field(
+        doc="The level, 0 to 100, controlled. Every change launches the liquid toward it."
+    )
+    default_value: rx.Var[int | float] = field(
+        doc="The starting level when uncontrolled. Default: 60."
+    )
+    interactive: rx.Var[bool] = field(
+        doc="Press or drag the tank to set the level, arrows to step. A marker appears at the level. Default: false."
+    )
+    show_value: rx.Var[bool] = field(
+        doc="A readout whose colour flips at the surface. Default: true."
+    )
+    disabled: rx.Var[bool] = field(
+        doc="Dimmed and inert. Value changes still animate. Default: false."
+    )
+    liquid_color: rx.Var[str] = field(
+        doc="The liquid. The readout over it picks dark or light by itself. Default: '#f5f5f5'."
+    )
+    glass_color: rx.Var[str] = field(
+        doc="The tank. Default: '#27272a'."
+    )
+    width: rx.Var[int | float] = field(
+        doc="Tank width in px. The readout scales with it. Default: 88."
+    )
+    height: rx.Var[int | float] = field(
+        doc="Tank height in px. Default: 180."
+    )
+    radius: rx.Var[int | float] = field(
+        doc="Corner radius in px, capped at half the smaller side. Default: 20."
+    )
+    ticks: rx.Var[int | float] = field(
+        doc="Lines etched on the right of the glass. 0 hides them. Default: 4."
+    )
+    viscosity: rx.Var[int | float] = field(
+        doc="0 is a rigid gauge. Higher is slower to answer, longer to settle, and overshoots more. Default: 0.15."
+    )
+    tilt: rx.Var[int | float] = field(
+        doc="How far the surface leans per unit of speed. 0 keeps it flat. Default: 0.45."
+    )
+    splash: rx.Var[int | float] = field(
+        doc="How much of a slam the top and bottom give back. 0 swallows it, 0.8 nearly bounces. Default: 0.42."
+    )
+    unit: rx.Var[str] = field(
+        doc="Readout suffix. Default: '%'."
+    )
+    aria_label: rx.Var[str] = field(
+        doc="Accessible name of the meter or slider. Default: 'Level'."
+    )
+    on_change: rx.EventHandler[lambda value: [safe(value)]] = field(
+        doc="The integer level on press, on each change while dragging, and on keys. Interactive only. Handler receives: value."
+    )
+
+
+class SpringCheck(ReactBitsComponent):
+    """Checkbox row where a single spring fills the box, draws the tick, strikes the label and dims the words in one press.
+
+    Docs: https://reactbits.dev/micro/spring-check
+    """
+
+    tag = "SpringCheck"
+    alias = "ReactBitsSpringCheck"
+    is_default = True
+    _rb_category = "Micro"
+    _rb_name = "SpringCheck"
+    _rb_files = ('SpringCheck.css', 'SpringCheck.jsx')
+    lib_dependencies: list[str] = ['@hugeicons/core-free-icons@4.3.3', 'motion@12.23.21']
+
+    label: rx.Var[rx.Component | str] = field(
+        doc="The words beside the box; the strike-through is exactly their width. Default: 'Ship the build'."
+    )
+    checked: rx.Var[bool] = field(
+        doc="Controlled state. A change from outside animates on the spring."
+    )
+    default_checked: rx.Var[bool] = field(
+        doc="Initial state when uncontrolled. Default: false."
+    )
+    disabled: rx.Var[bool] = field(
+        doc="Dims the row and ignores input. Default: false."
+    )
+    color: rx.Var[str] = field(
+        doc="Ink: the label, the ring, the rule and the focus outline. Default: '#ffffff'."
+    )
+    fill_color: rx.Var[str] = field(
+        doc="The fill that swells out of the box centre. Default: '#ffffff'."
+    )
+    check_color: rx.Var[str] = field(
+        doc="Stroke of the tick drawn over the fill. Default: '#0b0b0f'."
+    )
+    box_size: rx.Var[int | float] = field(
+        doc="Box side in pixels; ring, gap and row height derive from it. Default: 28."
+    )
+    box_radius: rx.Var[int | float] = field(
+        doc="Box corner radius in pixels; half the size makes a circle. Default: 9."
+    )
+    font_size: rx.Var[int | float] = field(
+        doc="Label size in pixels; the rule thickness derives from it. Default: 18."
+    )
+    bounce: rx.Var[int | float] = field(
+        doc="How far the fill swells past full. 0 arrives dead, 0.5 rebounds twice. Default: 0.2."
+    )
+    strike_lag: rx.Var[int | float] = field(
+        doc="Where on the spring the rule starts: 0 wipes with the fill, 0.4 waits for the tick. Default: 0.12."
+    )
+    done_opacity: rx.Var[int | float] = field(
+        doc="How much ink the words keep once checked. Default: 0.42."
+    )
+    strike: rx.Var[Literal["left", "center", "right", "none"]] = field(
+        doc="Where the strike-through wipes from, or no rule at all. Default: 'left'."
+    )
+    aria_label: rx.Var[str] = field(
+        doc="Accessible name when the label is not text. Default: -."
+    )
+    on_change: rx.EventHandler[lambda checked: [safe(checked)]] = field(
+        doc="Called on every toggle. Handler receives: checked."
+    )
+
+
+class SquishSwitch(ReactBitsComponent):
+    """Drag-scrubbable switch whose thumb stretches by how fast it moves, flips at the midpoint and squashes against the track end on a flick.
+
+    Docs: https://reactbits.dev/micro/squish-switch
+    """
+
+    tag = "SquishSwitch"
+    alias = "ReactBitsSquishSwitch"
+    is_default = True
+    _rb_category = "Micro"
+    _rb_name = "SquishSwitch"
+    _rb_files = ('SquishSwitch.css', 'SquishSwitch.jsx')
+    lib_dependencies: list[str] = ['motion@12.23.21']
+
+    checked: rx.Var[bool] = field(
+        doc="Controlled state. Leave it out to let the switch keep its own."
+    )
+    default_checked: rx.Var[bool] = field(
+        doc="Initial state when uncontrolled. Default: false."
+    )
+    label: rx.Var[str] = field(
+        doc="A label beside the switch, wired to it."
+    )
+    disabled: rx.Var[bool] = field(
+        doc="Dimmed and inert. Default: false."
+    )
+    track_color: rx.Var[str] = field(
+        doc="The track while off. Default: '#27272a'."
+    )
+    track_on_color: rx.Var[str] = field(
+        doc="The track while on. Default: '#f5f5f5'."
+    )
+    thumb_color: rx.Var[str] = field(
+        doc="The thumb while off. Empty mixes the on colour faintly into the track."
+    )
+    thumb_on_color: rx.Var[str] = field(
+        doc="The thumb while on. Empty uses the off track colour."
+    )
+    width: rx.Var[int | float] = field(
+        doc="Track width in px. Default: 76."
+    )
+    height: rx.Var[int | float] = field(
+        doc="Track height in px. The thumb and its inset follow. Default: 38."
+    )
+    radius: rx.Var[int | float] = field(
+        doc="Track corner radius in px, capped at half the height. Default: 19."
+    )
+    speed: rx.Var[int | float] = field(
+        doc="Stiffness of the settle spring, 0 to 100. Low is lazy, high is snappy. Default: 50."
+    )
+    stretch: rx.Var[int | float] = field(
+        doc="How much the thumb lengthens with speed, 0 to 100. It narrows to keep its area. Default: 36."
+    )
+    hover_scale: rx.Var[int | float] = field(
+        doc="The thumb swells to this on hover. Default: 1.035."
+    )
+    color_duration: rx.Var[int | float] = field(
+        doc="The colour cross-fade, in ms. Default: 320."
+    )
+    aria_label: rx.Var[str] = field(
+        doc="Accessible name when there is no label. Default: -."
+    )
+    id_: rx.Var[str] = field(
+        doc="Id for the switch button; the label uses it. Default: -."
+    )
+    on_change: rx.EventHandler[lambda checked: [safe(checked)]] = field(
+        doc="A tap, a drag past the middle, or a key. Handler receives: checked."
+    )
+
+
+class StatusMark(ReactBitsComponent):
+    """A 20px status glyph for agent task lists that morphs in place from a dashed idle ring to a spinning or real-progress arc, then draws a check or a cross, with an optional label strike.
+
+    Docs: https://reactbits.dev/micro/status-mark
+    """
+
+    tag = "StatusMark"
+    alias = "ReactBitsStatusMark"
+    is_default = True
+    _rb_category = "Micro"
+    _rb_name = "StatusMark"
+    _rb_files = ('StatusMark.css', 'StatusMark.jsx')
+    lib_dependencies: list[str] = ['motion@12.23.21']
+
+    status: rx.Var[Literal["pending", "running", "done", "failed", "cancelled"]] = field(
+        doc="The lifecycle state. Every change morphs the glyph in place. Default: 'pending'."
+    )
+    progress: rx.Var[int | float] = field(
+        doc="0 to 1 while running. Leave it out for an indeterminate spinning arc."
+    )
+    label: rx.Var[rx.Component | str] = field(
+        doc="Text beside the glyph. It dims and gets struck."
+    )
+    color: rx.Var[str] = field(
+        doc="Ring, arc, cancelled cross and label. Default: 'currentColor'."
+    )
+    done_color: rx.Var[str] = field(
+        doc="Ring, wash and check when done. Default: '#22c55e'."
+    )
+    error_color: rx.Var[str] = field(
+        doc="Ring, wash and cross when failed. Default: '#ef4444'."
+    )
+    size: rx.Var[int | float] = field(
+        doc="Glyph size in pixels. The label gap is half of it. Default: 20."
+    )
+    stroke_width: rx.Var[int | float] = field(
+        doc="Stroke width in the 24-unit box. The ring shrinks to keep its margin. Default: 2."
+    )
+    dashes: rx.Var[int | float] = field(
+        doc="Dashes in the idle ring, the ones that fuse into the arc. Default: 8."
+    )
+    font_size: rx.Var[int | float] = field(
+        doc="Label size in pixels. The strike scales with it. Default: 14."
+    )
+    spin_duration: rx.Var[int | float] = field(
+        doc="Milliseconds per turn of the indeterminate arc. Default: 1100."
+    )
+    arc_length: rx.Var[int | float] = field(
+        doc="Share of the ring the indeterminate arc covers. Default: 0.68."
+    )
+    draw_duration: rx.Var[int | float] = field(
+        doc="Milliseconds the check or cross takes to draw. Default: 240."
+    )
+    fill_opacity: rx.Var[int | float] = field(
+        doc="The wash inside a finished ring. Default: 0.06."
+    )
+    strike: rx.Var[bool] = field(
+        doc="Strikes the label through when done. Default: true."
+    )
+    strike_delay: rx.Var[int | float] = field(
+        doc="Milliseconds after the check starts before the strike wipes in. Default: 60."
+    )
+
+
+class SwipeRow(ReactBitsComponent):
+    """List row that swipes open to reveal actions, snaps by flick velocity, and deletes on a full swipe that stretches the action colour across the row.
+
+    Docs: https://reactbits.dev/micro/swipe-row
+    """
+
+    tag = "SwipeRow"
+    alias = "ReactBitsSwipeRow"
+    is_default = True
+    _rb_category = "Micro"
+    _rb_name = "SwipeRow"
+    _rb_files = ('SwipeRow.css', 'SwipeRow.jsx')
+    lib_dependencies: list[str] = ['@hugeicons/core-free-icons@4.3.3', '@hugeicons/react@1.1.10', 'motion@12.23.21']
+
+    actions: rx.Var[list[Any]] = field(
+        doc="The drawer, outermost first. Each has id, label, an optional icon, an optional color for secondary actions, dismiss to fold the row when pressed, and onSelect. The first is the full-swipe action and always folds the row. Default: DEFAULT_ACTIONS."
+    )
+    action_color: rx.Var[str] = field(
+        doc="The full-swipe block that leaps and fills the row. Default: '#e5484d'."
+    )
+    drawer_color: rx.Var[str] = field(
+        doc="The drawer base and the secondary actions. Default: '#3f3f46'."
+    )
+    row_color: rx.Var[str] = field(
+        doc="The surface. Default: '#27272a'."
+    )
+    text_color: rx.Var[str] = field(
+        doc="Row text and the keyboard toggle. Default: '#f5f5f5'."
+    )
+    height: rx.Var[int | float] = field(
+        doc="Row height in pixels. The fold closes from it. Default: 64."
+    )
+    radius: rx.Var[int | float] = field(
+        doc="Corner radius of the row and the clipped drawer. Default: 16."
+    )
+    action_width: rx.Var[int | float] = field(
+        doc="Width of each action in pixels, so the drawer width too. Default: 80."
+    )
+    direction: rx.Var[Literal["left", "right"]] = field(
+        doc="Which way you swipe. Everything mirrors. Default: 'left'."
+    )
+    snap_bounce: rx.Var[int | float] = field(
+        doc="Overshoot of the open or close settle after a flick. Slow releases never bounce. Default: 0.2."
+    )
+    resistance: rx.Var[int | float] = field(
+        doc="How much of the finger the row keeps past the drawer, and the rubber-band beyond the commit point. Default: 0.55."
+    )
+    collapse_ms: rx.Var[int | float] = field(
+        doc="How long a deleted row takes to fold shut. Default: 200."
+    )
+    commit_at: rx.Var[int | float] = field(
+        doc="Fraction of the row width the surface must uncover for the block to leap and a release to delete. Default: 0.6."
+    )
+    full_swipe: rx.Var[bool] = field(
+        doc="Off, the drawer is the end: no leap, no delete. Default: true."
+    )
+    disabled: rx.Var[bool] = field(
+        doc="Dims the row and ignores input. Default: false."
+    )
+    open: rx.Var[bool] = field(
+        doc="Controlled open state. Outside changes settle the row."
+    )
+    close_on_action: rx.Var[bool] = field(
+        doc="Closes the drawer after an action is pressed. Default: true."
+    )
+    haptic: rx.Var[bool] = field(
+        doc="A short vibration on touch when the block leaps. Default: true."
+    )
+    label: rx.Var[str] = field(
+        doc="Accessible name of the row. Default: 'List item'."
+    )
+    on_open_change: rx.EventHandler[lambda open: [safe(open)]] = field(
+        doc="Called when a gesture or key opens or closes the drawer. Handler receives: open."
+    )
+    on_action: rx.EventHandler[lambda action: [safe(action)]] = field(
+        doc="Called when any action button is pressed. Handler receives: action."
+    )
+    on_commit: rx.EventHandler[lambda action: [safe(action)]] = field(
+        doc="Called after a full swipe or a press on a folding action, once the row has shut. Remove the row here. Handler receives: action."
+    )
+
+
+class SwipeToast(ReactBitsComponent):
+    """Single toast that rises through its bottom edge, swipes down to dismiss on a flick or a distance, and burns a thin fuse for exactly its remaining time; hover pauses it and an inline mode keeps it inside any container.
+
+    Docs: https://reactbits.dev/micro/swipe-toast
+    """
+
+    tag = "SwipeToast"
+    alias = "ReactBitsSwipeToast"
+    is_default = True
+    _rb_category = "Micro"
+    _rb_name = "SwipeToast"
+    _rb_files = ('SwipeToast.css', 'SwipeToast.jsx')
+    lib_dependencies: list[str] = ['@hugeicons/core-free-icons@4.3.3', '@hugeicons/react@1.1.10', 'motion@12.23.21']
+
+    title: rx.Var[rx.Component | str] = field(
+        doc="The first line. Default: 'File archived'."
+    )
+    description: rx.Var[rx.Component | str] = field(
+        doc="The dimmer second line. Empty hides it."
+    )
+    icon: rx.Var[rx.Component | str] = field(
+        doc="An 18px icon before the text."
+    )
+    action_label: rx.Var[rx.Component | str] = field(
+        doc="The inverted button. Empty hides it."
+    )
+    open: rx.Var[bool] = field(
+        doc="Flip to false to close from outside. True again re-enters. Default: true."
+    )
+    background: rx.Var[str] = field(
+        doc="The card surface, and the action text. Default: '#27272a'."
+    )
+    color: rx.Var[str] = field(
+        doc="Ink: title, description at 62% and the action fill. Default: '#f5f5f5'."
+    )
+    fuse_color: rx.Var[str] = field(
+        doc="The burning line. Default: '#f5a524'."
+    )
+    width: rx.Var[int | float] = field(
+        doc="Card width in pixels, capped at the parent when inline. Default: 356."
+    )
+    radius: rx.Var[int | float] = field(
+        doc="Corner radius in pixels. Default: 12."
+    )
+    slide_ms: rx.Var[int | float] = field(
+        doc="How long the rise and the drop take. Default: 400."
+    )
+    settle_bounce: rx.Var[int | float] = field(
+        doc="Overshoot of the return after an abandoned swipe. 0 stops dead. Default: 0.2."
+    )
+    swipe_distance: rx.Var[int | float] = field(
+        doc="How far a slow drag must go before release dismisses. A flick always does. Default: 40."
+    )
+    duration: rx.Var[int | float] = field(
+        doc="Milliseconds until it closes itself. Changing it re-arms the fuse. 0 keeps it until dismissed. Default: 4000."
+    )
+    fuse: rx.Var[Literal["bottom", "top", "none"]] = field(
+        doc="Which edge the line burns along. None keeps the timer but shows nothing. Default: 'bottom'."
+    )
+    pause_on_hover: rx.Var[bool] = field(
+        doc="Hovering freezes the line and the timer. Default: true."
+    )
+    close_button: rx.Var[bool] = field(
+        doc="Adds a cross at the end of the row. Default: false."
+    )
+    inline: rx.Var[bool] = field(
+        doc="In flow inside the parent instead of fixed to the bottom-right of the viewport. Default: false."
+    )
+    dismissible: rx.Var[bool] = field(
+        doc="Off removes the swipe and Escape. Default: true."
+    )
+    on_action: rx.EventHandler[no_args_event_spec] = field(
+        doc="Called when the action is pressed, before the close."
+    )
+    on_close: rx.EventHandler[lambda reason: [safe(reason)]] = field(
+        doc="Called after the exit, and after the inline slot has collapsed. Reason is timeout, swipe, action, close, escape or programmatic. Handler receives: reason."
+    )
+
+
+class ThoughtLine(ReactBitsComponent):
+    """Reasoning-trace header: a glyph and a label breathe beside a live clock while steps appear beneath, then the line settles on one beat into "Thought for 4.2s" through a blur crossfade and the trace folds into it.
+
+    Docs: https://reactbits.dev/micro/thought-line
+    """
+
+    tag = "ThoughtLine"
+    alias = "ReactBitsThoughtLine"
+    is_default = True
+    _rb_category = "Micro"
+    _rb_name = "ThoughtLine"
+    _rb_files = ('ThoughtLine.css', 'ThoughtLine.jsx')
+    lib_dependencies: list[str] = ['@hugeicons/core-free-icons@4.3.3', '@hugeicons/react@1.1.10', 'motion@12.23.21']
+
+    label: rx.Var[str] = field(
+        doc="The working line. It breathes, and it is the spoken text. Default: 'Thinking\u2026'."
+    )
+    done_label: rx.Var[str] = field(
+        doc="The settled line. Empty gives \"Thought for\", or \"Done thinking\" without the timer."
+    )
+    render_label: rx.Var[Any] = field(
+        doc="Wraps either string, for a sheen or a link. Inline content only. Default: -. Pass a JS function with rx.Var('(...) => ...')."
+    )
+    glyph: rx.Var[rx.Component | str] = field(
+        doc="The mark that breathes and dims. Default: 'sparkle'."
+    )
+    steps: rx.Var[list[str]] = field(
+        doc="The trace beneath the line. Append as the agent progresses; the last step is current, earlier ones tick. Default: EMPTY_STEPS."
+    )
+    collapsible: rx.Var[bool] = field(
+        doc="The line becomes a toggle for the trace, with a chevron. Default: true."
+    )
+    collapse_on_settle: rx.Var[bool] = field(
+        doc="Fold the trace into the line when it settles. Default: true."
+    )
+    color: rx.Var[str] = field(
+        doc="The ink of the line and the trace. Default: 'currentColor'."
+    )
+    glyph_color: rx.Var[str] = field(
+        doc="The glyph alone. Empty follows the ink."
+    )
+    font_size: rx.Var[int | float] = field(
+        doc="Type size in px. Everything scales in em. Default: 16."
+    )
+    breath_period: rx.Var[int | float] = field(
+        doc="One breath, up and down, in seconds. Default: 1.6."
+    )
+    breath_depth: rx.Var[int | float] = field(
+        doc="How far the glyph and label dim at the trough. 0 is no breath. Default: 0.45."
+    )
+    shimmer: rx.Var[bool] = field(
+        doc="A band of ink sweeps the working label. The label then leaves the breath to the glyph. Default: true."
+    )
+    shimmer_duration: rx.Var[int | float] = field(
+        doc="One sweep, in seconds. Default: 1.8."
+    )
+    settle_duration: rx.Var[int | float] = field(
+        doc="The settle chord, in ms: crossfade, dim, glide, fold. Default: 350."
+    )
+    settle_blur: rx.Var[int | float] = field(
+        doc="Blur through the crossfade seam, in px. Default: 2."
+    )
+    working: rx.Var[bool] = field(
+        doc="Working or settled. True again starts a new clock. Default: true."
+    )
+    settle_after: rx.Var[int | float] = field(
+        doc="Seconds after which the line settles by itself. 0 waits for working. Default: 0."
+    )
+    elapsed: rx.Var[int | float] = field(
+        doc="Controlled seconds. The internal clock never runs."
+    )
+    show_timer: rx.Var[bool] = field(
+        doc="The live clock that freezes into the sentence. Default: true."
+    )
+    on_settle: rx.EventHandler[lambda seconds: [safe(seconds)]] = field(
+        doc="Once per settle, with the frozen time. Handler receives: seconds."
+    )
+
+
+class VoicePill(ReactBitsComponent):
+    """Mic button that swells into a tinted capsule of level-driven equalizer bars and an elapsed clock while held or toggled, then relaxes back into the mic on release; simulated voice by default, real microphone as an opt-in.
+
+    Docs: https://reactbits.dev/micro/voice-pill
+    """
+
+    tag = "VoicePill"
+    alias = "ReactBitsVoicePill"
+    is_default = True
+    _rb_category = "Micro"
+    _rb_name = "VoicePill"
+    _rb_files = ('VoicePill.css', 'VoicePill.jsx')
+    lib_dependencies: list[str] = ['@hugeicons/core-free-icons@4.3.3', '@hugeicons/react@1.1.10']
+
+    accent_color: rx.Var[str] = field(
+        doc="The waveform, the clock and the stop mark. Default: '#f5f5f5'."
+    )
+    icon_color: rx.Var[str] = field(
+        doc="The mic at rest, and the hover wash. Default: '#a1a1aa'."
+    )
+    background: rx.Var[str] = field(
+        doc="The capsule surface. Default: '#27272a'."
+    )
+    size: rx.Var[int | float] = field(
+        doc="Footprint in px. The icon, the stop mark and the clock scale with it. Default: 28."
+    )
+    shape: rx.Var[Literal["pill", "rounded"]] = field(
+        doc="A circle that opens into a capsule, or a rounded square. Default: 'pill'."
+    )
+    reach: rx.Var[int | float] = field(
+        doc="The room the capsule leaves before the waveform, in px. Default: 8."
+    )
+    show_time: rx.Var[bool] = field(
+        doc="An elapsed clock in the capsule, which grows to the left to hold it. Default: true."
+    )
+    waveform: rx.Var[bool] = field(
+        doc="A history of the level scrolling through the capsule, past the clock. Default: true."
+    )
+    slide_to_cancel: rx.Var[bool] = field(
+        doc="While held, sliding left drags the capsule contents along and reveals Cancel. Crossing the distance scatters the bars and stops without a result. Default: true."
+    )
+    cancel_distance: rx.Var[int | float] = field(
+        doc="How far left a held pointer slides before it cancels, in px. Default: 64."
+    )
+    attack: rx.Var[int | float] = field(
+        doc="How fast the level rises to a louder signal, in ms. Default: 40."
+    )
+    release: rx.Var[int | float] = field(
+        doc="How long the level hangs after the sound drops, in ms. Default: 240."
+    )
+    sensitivity: rx.Var[int | float] = field(
+        doc="Gain on the signal before the envelope. Default: 1."
+    )
+    floor: rx.Var[int | float] = field(
+        doc="Waveform bar height when silent, as a fraction of its box. Default: 0.1."
+    )
+    open_duration: rx.Var[int | float] = field(
+        doc="The capsule open and close, in ms. Default: 200."
+    )
+    press_scale: rx.Var[int | float] = field(
+        doc="Scale of the button while a pointer is down. Default: 0.95."
+    )
+    mode: rx.Var[Literal["auto", "hold", "toggle"]] = field(
+        doc="Auto: a tap latches, a hold stops on release. Hold: release always stops. Toggle: release never stops. Default: 'auto'."
+    )
+    hold_after: rx.Var[int | float] = field(
+        doc="In auto, the press length after which a release stops instead of latching, in ms. Default: 300."
+    )
+    reactive: rx.Var[Literal["simulated", "mic"]] = field(
+        doc="What drives the level. Mic asks for microphone permission on the first press and stops if it is refused. Default: 'simulated'."
+    )
+    disabled: rx.Var[bool] = field(
+        doc="Dimmed and inert. A listening pill stops. Default: false."
+    )
+    aria_label: rx.Var[str] = field(
+        doc="Accessible name. The state is carried by aria-pressed. Default: 'Dictate'."
+    )
+    on_start: rx.EventHandler[lambda info: [safe(info)]] = field(
+        doc="Listening began, with the requested source. Handler receives: info."
+    )
+    on_stop: rx.EventHandler[lambda info: [safe(info)]] = field(
+        doc="Listening ended. Reason is release, tap, key, escape, blur, cancel, disabled, mic-denied or unmount; duration in ms. Handler receives: info."
+    )
+
+
+class WakeSlider(ReactBitsComponent):
+    """Range slider drawn as thin bars with no thumb: drag speed raises a wake that trails behind the handle and flattens again at rest.
+
+    Docs: https://reactbits.dev/micro/wake-slider
+    """
+
+    tag = "WakeSlider"
+    alias = "ReactBitsWakeSlider"
+    is_default = True
+    _rb_category = "Micro"
+    _rb_name = "WakeSlider"
+    _rb_files = ('WakeSlider.css', 'WakeSlider.jsx')
+    lib_dependencies: list[str] = ['motion@12.23.21']
+
+    value: rx.Var[int | float] = field(
+        doc="Controlled value."
+    )
+    default_value: rx.Var[int | float] = field(
+        doc="Initial value when uncontrolled. Default: 50."
+    )
+    min: rx.Var[int | float] = field(
+        doc="Lowest value. Default: 0."
+    )
+    max: rx.Var[int | float] = field(
+        doc="Highest value. Default: 100."
+    )
+    step: rx.Var[int | float] = field(
+        doc="Snapping grid. Large steps move the handle in notches, and the wake pulses per notch. Default: 1."
+    )
+    bars: rx.Var[int | float] = field(
+        doc="How many bars draw the track. Default: 32."
+    )
+    height: rx.Var[int | float] = field(
+        doc="Full bar height in pixels, the ceiling of the wake. Default: 56."
+    )
+    rest_height: rx.Var[int | float] = field(
+        doc="Bar height at rest in pixels. Default: 12."
+    )
+    gap: rx.Var[int | float] = field(
+        doc="Space between bars in pixels. Default: 4."
+    )
+    fill_color: rx.Var[str] = field(
+        doc="Lit bars, up to the value. Default: '#f5f5f5'."
+    )
+    track_color: rx.Var[str] = field(
+        doc="Unlit bars. Default: '#27272a'."
+    )
+    crest_color: rx.Var[str] = field(
+        doc="Optional tint the raised bars take on by their lift. Empty renders no tint layer."
+    )
+    sensitivity: rx.Var[int | float] = field(
+        doc="How easily speed raises the wake. Low needs a flick; high lifts it on a stroll. Default: 1."
+    )
+    reach: rx.Var[int | float] = field(
+        doc="Half-width of the wake at full speed, in bars. Default: 6."
+    )
+    skew: rx.Var[int | float] = field(
+        doc="How much wider the wake is behind the handle than ahead. 0 is symmetric. Default: 0.6."
+    )
+    glide: rx.Var[int | float] = field(
+        doc="Seconds the handle takes to settle. Short hugs the finger; long floats behind it. Default: 0.3."
+    )
+    smoothing: rx.Var[int | float] = field(
+        doc="Milliseconds of velocity lag. Low twitches with every change of speed; high lingers. Default: 100."
+    )
+    show_value: rx.Var[bool] = field(
+        doc="Shows the value beside the track. Default: false."
+    )
+    format_value: rx.Var[Any] = field(
+        doc="Formats the readout and the announced value. Default: -. Pass a JS function with rx.Var('(...) => ...')."
+    )
+    disabled: rx.Var[bool] = field(
+        doc="Fades the slider and ignores input. Default: false."
+    )
+    aria_label: rx.Var[str] = field(
+        doc="Accessible name of the slider. Default: 'Value'."
+    )
+    on_change: rx.EventHandler[lambda value: [safe(value)]] = field(
+        doc="Called on every committed change, from the pointer or the keyboard. Handler receives: value."
+    )
+
+
+class WarmTooltip(ReactBitsComponent):
+    """Tooltip group with one shared delay: the first label waits and pops from its trigger, then siblings open instantly while the group is warm, with an optional velocity lean.
+
+    Docs: https://reactbits.dev/micro/warm-tooltip
+    """
+
+    tag = "WarmTooltip"
+    alias = "ReactBitsWarmTooltip"
+    is_default = True
+    _rb_category = "Micro"
+    _rb_name = "WarmTooltip"
+    _rb_files = ('WarmTooltip.css', 'WarmTooltip.jsx')
+    lib_dependencies: list[str] = ['motion@12.23.21']
+
+    content: rx.Var[rx.Component | str] = field(
+        doc="The label. Keep it to a few words. Default: -."
+    )
+    shortcut: rx.Var[rx.Component | str] = field(
+        doc="Optional keyboard shortcut, drawn as a keycap beside the label."
+    )
+    side: rx.Var[Literal["top", "bottom", "left", "right"]] = field(
+        doc="The edge the label hangs from; also where the fuse runs and the pop originates. Default: 'top'."
+    )
+    delay: rx.Var[int | float] = field(
+        doc="How long a cold open waits, in milliseconds. Inherits the group value when omitted. Default: 400."
+    )
+    warm_window: rx.Var[int | float] = field(
+        doc="How long after this label closes the group stays warm. Inherits the group value when omitted. Default: 300."
+    )
+    surface_color: rx.Var[str] = field(
+        doc="Label background, arrow and fuse. Default: '#f5f5f5'."
+    )
+    ink_color: rx.Var[str] = field(
+        doc="Label text; the keycap is tinted from it. Default: '#18181b'."
+    )
+    size: rx.Var[Literal["sm", "md", "lg"]] = field(
+        doc="Font size and padding of the label. Default: 'md'."
+    )
+    radius: rx.Var[int | float] = field(
+        doc="Corner radius of the label in pixels. Default: 8."
+    )
+    gap: rx.Var[int | float] = field(
+        doc="Distance between the trigger edge and the label. Default: 8."
+    )
+    arrow: rx.Var[bool] = field(
+        doc="Shows the pointer on the anchored edge. Default: true."
+    )
+    pop_duration: rx.Var[int | float] = field(
+        doc="Cold pop-in time in milliseconds; the exit takes 0.8 of it. Default: 160."
+    )
+    pop_scale: rx.Var[int | float] = field(
+        doc="Scale the label pops from. 1 makes it a fade. Default: 0.94."
+    )
+    pop_blur: rx.Var[int | float] = field(
+        doc="Blur in pixels the label arrives through. Default: 4."
+    )
+    show_fuse: rx.Var[bool] = field(
+        doc="Draws a thin line along the trigger edge that fills over the delay, or over the long press on touch. Default: false."
+    )
+    long_press: rx.Var[int | float] = field(
+        doc="Hold time in milliseconds that opens the label on touch; the click that follows is swallowed. Default: 500."
+    )
+    disabled: rx.Var[bool] = field(
+        doc="No open path; an open label closes. Default: false."
+    )
+
+
+class WarmTooltipGroup(ReactBitsComponent):
+    """Groups WarmTooltips so moving between them skips the open delay."""
+
+    tag = "WarmTooltipGroup"
+    alias = "ReactBitsWarmTooltipGroup"
+    is_default = False
+    _rb_category = "Micro"
+    _rb_name = "WarmTooltip"
+    _rb_files = ('WarmTooltip.css', 'WarmTooltip.jsx')
+    lib_dependencies: list[str] = ['motion@12.23.21']
+
+    delay: rx.Var[int | float] = field(doc="Open delay in ms.")
+    warm_window: rx.Var[int | float] = field(doc="How long (ms) the group stays warm.")
+
+
+bell_toggle = BellToggle.create
+branched_menu = BranchedMenu.create
+call_chip = CallChip.create
+code_slots = CodeSlots.create
+comet_dial = CometDial.create
+dodge_field = DodgeField.create
+folder_float = FolderFloat.create
+fuse_button = FuseButton.create
+glide_select = GlideSelect.create
+hold_button = HoldButton.create
+jelly_radio = JellyRadio.create
+lattice_loader = LatticeLoader.create
+peek_rating = PeekRating.create
+prompt_bar = PromptBar.create
+pulse_heart = PulseHeart.create
+refine_frame = RefineFrame.create
+rubber_segment = RubberSegment.create
+scrub_field = ScrubField.create
+slide_commit = SlideCommit.create
+sling_button = SlingButton.create
+slosh_gauge = SloshGauge.create
+spring_check = SpringCheck.create
+squish_switch = SquishSwitch.create
+status_mark = StatusMark.create
+swipe_row = SwipeRow.create
+swipe_toast = SwipeToast.create
+thought_line = ThoughtLine.create
+voice_pill = VoicePill.create
+wake_slider = WakeSlider.create
+warm_tooltip = WarmTooltip.create
+warm_tooltip_group = WarmTooltipGroup.create