<!-- GENERATED by tools/gen_skill.py — do not edit by hand. Run `make skill`. -->
# ThemeKit component reference

117 public SwiftUI components. Every one reads `@Environment(\.theme)` and resolves all colors from tokens — **never hardcode a color**. Init shows the *required/common* params; long-tail styling is set with the chainable modifiers listed at the bottom.

## Atoms (29)

- `AnimatedImage(url)` — Animated GIF / APNG playback with NO third-party dependency — frames and per-frame delays are decoded natively via ImageIO (`CGImageSource`) and driven by a `TimelineView(.animation)`. · modifiers: `.contentMode()`, `.cornerRadius()`
- `Avatar(content)` — Atom. · modifiers: `.size()`, `.dimension()`, `.fillColor()`, `.shape()`, `.presence()`, `.maxVisible()`
- `AvatarGroup` — Overlapping stack of avatars with a "+N" overflow bubble.
- `Badge(text, action:)` — Improved, token-bound rewrite of the reference BadgeView. · modifiers: `.badgeStyle()`, `.variant()`, `.size()`, `.icon()`, `.badgeShape()`, `.trailingIcon()`, `.badgeColor()`, `.gradient()`, `.highlighted()`
- `Chip(title, isSelected:)` — Improved, token-bound rewrite of the reference BasicChip — a single clear selection API (tonal / solid) instead of the reference's nested status × mode × fullSelect × isExist matrix. · modifiers: `.size()`, `.chipStyle()`, `.icon()`, `.rating()`, `.exists()`, `.interactive()`, `.expands()`
- `Ribbon(text, @ViewBuilder:)` — A corner ribbon wrapping any content (Ant `Badge.Ribbon`). · modifiers: `.color()`
- `DividerView(title)` — A theme-driven divider: horizontal / vertical, solid / dashed, with an optional inline text label (left / center / right). · modifiers: `.size()`, `.axis()`, `.dashed()`, `.titleAlign()`
- `GaugeView(value:, in:, label:)` — Atom. · modifiers: `.gaugeStyle()`, `.showsValue()`
- `Icon(systemName:)` — Icon system. · modifiers: `.size()`, `.color()`
- `InlineText(text, links:)` — Atom. · modifiers: `.color()`, `.inlineStyle()`
- `InputLabel(text)` — Atom. · modifiers: `.required()`, `.hasInfo()`, `.hasError()`
- `Join(axis, @ViewBuilder:)` — Atom.
- `Kbd(text)` — Atom.
- `ProgressBar(value:)` — Linear determinate progress with status colors, an optional ladder gradient, a segmented (steps) variant and a custom format label. · modifiers: `.showsPercentage()`, `.status()`, `.barHeight()`, `.gradient()`, `.steps()`, `.colors()`, `.successSegment()`, `.valueFormat()`, `.progressLabel()`
- `StepIndicator` — Segmented step indicator (e.g.
- `RadialProgress(value)` — Atom. · modifiers: `.size()`, `.lineWidth()`, `.showsLabel()`, `.status()`, `.dashboard()`, `.ringColor()`, `.a11yLabel()`
- `Rating(value:)` — Star rating with two layouts (stars / numeric-leading), continuous fractional fill (display) or half-step interaction, a tappable review count, a custom character and a disabled state. · modifiers: `.layout()`, `.countLabel()`, `.maxValue()`, `.starSize()`, `.allowHalf()`, `.symbol()`, `.sentiment()`, `.onRate()`, `.onReviewTap()`
- `RemoteImage(url)` — Async remote image on native `AsyncImage` (no Kingfisher dependency): URL + aspect ratio (number or "16:9" string) + shimmer placeholder + failure state. · modifiers: `.ratio()`, `.contentMode()`, `.cornerRadius()`, `.circle()`
- `RollingNumber(value)` — Odometer / slot-machine number — each digit column rolls vertically to its new value when `value` changes (reference `RollingText`). · modifiers: `.size()`, `.weight()`, `.color()`
- `ScoreBadge(score, large:)` — Atom.
- `ShareButton(title, item:)` — Atom.
- `Skeleton(shape)` — A standalone skeleton block of an arbitrary shape and size. · modifiers: `.size()`
- `Spinner` — Atom. · modifiers: `.size()`, `.lineWidth()`, `.color()`
- `StatusDot(kind, label:)` — Atom. · modifiers: `.size()`, `.pulse()`
- `Swap(isOn:)` — Atom. · modifiers: `.symbols()`, `.size()`, `.rotate()`, `.a11yID()`
- `Tag(text, onRemove:)` — Atom. · modifiers: `.icon()`, `.tagStyle()`, `.variant()`
- `TextLink(title, action:)` — Atom. · modifiers: `.underline()`
- `TextRotate(words, interval:)` — Atom.
- `Title(text)` — Atom. · modifiers: `.subtitle()`, `.eyebrow()`, `.action()`

## Molecules (46)

- `Autocomplete(//:, text:, suggestions:, onSelect:)` — Molecule. · modifiers: `.placeholder()`, `.maxResults()`, `.debounce()`, `.suggestionEnabled()`, `.onSearch()`, `.a11yID()`
- `Breadcrumbs(title, action:)` — Molecule.
- `ButtonGroup(axis, @ViewBuilder:)` — Molecule.
- `PrimaryButton(title, action:)` · modifiers: `.size()`, `.fullWidth()`, `.helperText()`, `.titleTextStyle()`, `.confirmsSuccess()`, `.a11yID()`, `.loading()`
- `SecondaryButton`
- `OutlineButton`
- `GhostButton`
- `LinkButton`
- `ThemeButton(title, action:)` · modifiers: `.variant()`, `.color()`, `.size()`, `.shape()`, `.fullWidth()`, `.loading()`, `.icon()`, `.a11yID()`
- `CalendarView(selection:)` — Molecule.
- `Checkbox(label, isChecked:)` — Figma "Control Items" → Checkboxes. · modifiers: `.type()`, `.indeterminate()`, `.alignment()`, `.customSize()`, `.infoMessages()`, `.a11yID()`
- `CheckboxGroup(title:, options:, selection:, label:)` — Molecule. · modifiers: `.infoMessages()`, `.selectAll()`, `.optionEnabled()`, `.a11yID()`
- `ImageChip(isSelected:, url:)` — A selectable remote-image tile with a selection border. · modifiers: `.size()`, `.imageURL()`, `.rating()`, `.description()`, `.free()`, `.icon()`, `.shape()`, `.closable()`, `.chipStyle()`
- `CompactChip` — A selectable card: an optional rating + label row, then an optional logo + price row.
- `ChoseChip` — A selectable card: a leading icon, a title with an optional "free" gradient badge, and a rating + description row.
- `FilterChip` — A dismissible filter chip in a pill (with a soft shadow) or square shape.
- `ChipGroup` — A horizontally-scrolling, multi-select chip group backed by a `Set` binding.
- `ColorField(label, selection:)` — Molecule. · modifiers: `.supportsOpacity()`
- `DateField(label, date:)` — Molecule. · modifiers: `.placeholder()`, `.range()`, `.style()`, `.locale()`, `.components()`, `.infoMessages()`, `.clearable()`, `.icon()`, `.a11yID()`
- `Fieldset(title, @ViewBuilder:)` — Molecule. · modifiers: `.helper()`
- `FileInput(label, onPick:)` — Molecule. · modifiers: `.fileName()`, `.buttonTitle()`, `.placeholder()`, `.infoMessages()`, `.onClear()`
- `FilterGroup(title:, options:, selection:, label:)` — Molecule.
- `InputNumber(label, value:, range:)` — Molecule. · modifiers: `.step()`, `.unit()`, `.hint()`, `.errorText()`, `.large()`, `.editable()`, `.hasInfo()`, `.onValueChange()`, `.a11yID()`
- `MultiLineTextInput(label, text:)` — Improved, token-bound rewrite of the reference MultiLineInput — a bordered TextEditor with header label, placeholder, character counter and error state. · modifiers: `.placeholder()`, `.characterLimit()`, `.errorText()`, `.infoMessages()`, `.minHeight()`, `.a11yID()`
- `MultiSelect(//:, options:, selection:, optionTitle:)` — Multiple / tags select with optional search (Ant Select mode="multiple"). · modifiers: `.placeholder()`, `.infoMessages()`, `.optionEnabled()`, `.searchable()`, `.clearable()`, `.maxTags()`, `.loading()`, `.a11yID()`
- `OTPInput(code:, onComplete:)` — Improved, token-bound rewrite of the reference OTPInputView. · modifiers: `.digitCount()`, `.secure()`, `.errorText()`, `.infoMessages()`, `.resend()`, `.a11yID()`
- `Pagination(current:, total:)` — Molecule. · modifiers: `.simple()`, `.window()`, `.jumper()`, `.showTotal()`
- `ProgressIndicator(variant:, current:, total:)` — Segmented position/progress indicator (Reference ProgressIndicator parity). · modifiers: `.size()`, `.videoProgress()`, `.stepText()`, `.cornerRadius()`
- `QuantityStepper(//:, range:)` — A token-bound quantity stepper (− value +), bounded by a range. · modifiers: `.a11yID()`, `.step()`
- `RadioButton(label, isSelected:)` — Figma "Control Items" → Radioboxes. · modifiers: `.type()`, `.radioStyle()`, `.gap()`, `.fillColor()`, `.infoMessages()`, `.alignment()`, `.a11yID()`
- `RadioGroup(title:, options:, selection:, label:)` — Molecule. · modifiers: `.infoMessages()`, `.optionEnabled()`, `.a11yID()`, `.groupStyle()`, `.fullWidth()`
- `RadioButtonGroup` — A connected, segmented button-style single-select radio group — a distinct API from the stacked `RadioGroup` and the enclosed `SegmentedControl`.
- `RangeSlider(//:, upperValue:, in:)` — Improved, token-bound rewrite of the reference RangeSliderView — a self-contained dual-thumb slider over a numeric range (decoupled from the reference's text-field wiring). · modifiers: `.a11yID()`, `.step()`, `.marks()`, `.inputs()`, `.onChangeEnd()`, `.valueLabel()`
- `SearchBar(text:)` — A search field with optional typeahead suggestions, a recent-searches list and submit/clear callbacks. · modifiers: `.placeholder()`, `.suggestions()`, `.recent()`, `.onSearch()`, `.onSelect()`, `.onCommit()`, `.backButton()`, `.trailingIcon()`, `.debounce()`, `.maxResults()`, `.a11yID()`
- `SegmentedControl(title, systemImage:, isEnabled:)` — Molecule. · modifiers: `.fullWidth()`, `.size()`, `.a11yID()`
- `Select(title, options)` — A single-select dropdown — a native `Menu` by default, or a searchable inline panel with section headers when `.searchable()` is on. · modifiers: `.placeholder()`, `.clearable()`, `.searchable()`, `.size()`, `.infoMessages()`, `.loading()`, `.optionEnabled()`, `.a11yID()`
- `SelectBox(//:, options:, selection:, optionTitle:)` — Molecule. · modifiers: `.placeholder()`, `.hint()`, `.errorText()`, `.a11yID()`
- `Slider(//:, in:, label:)` — Molecule. · modifiers: `.a11yID()`, `.step()`, `.marks()`, `.axis()`, `.showsValueTooltip()`, `.onChangeEnd()`
- `Stat(title:, value:)` — Molecule. · modifiers: `.prefix()`, `.suffix()`, `.loading()`, `.description()`, `.icon()`, `.trend()`
- `Steps(title, description:, systemImage:, state:, percent:)` — A horizontal or vertical step / progress indicator with done / active / todo / error states, an optional progress dot, and tap-to-navigate. · modifiers: `.axis()`, `.small()`, `.progressDot()`
- `TextInput(label:, placeholder:, leadingSystemImage:, suffixSystemImage:, addonBefore:, addonAfter: …)` — Single floating-label text field. · modifiers: `.placeholder()`, `.icon()`, `.addons()`, `.secure()`, `.clearable()`, `.maxLength()`, `.showsCount()`, `.size()`, `.formatter()`, `.helperText()`, `.errorText()`, `.warningText()`, `.infoMessages()`, `.externalFocus()`, `.keyboard()`, `.autocorrectionDisabled()`, `.onCommit()`, `.a11yID()`
- `ThemeController(name:, label:)` — Molecule.
- `ThemeToggle(isOn:)` — Figma "Control Items" → Switch Toggles. · modifiers: `.loading()`, `.symbols()`, `.a11yID()`
- `TimeField(label, time:)` — Molecule. · modifiers: `.placeholder()`, `.range()`, `.minuteInterval()`, `.hourCycle()`, `.locale()`, `.infoMessages()`, `.clearable()`, `.icon()`, `.a11yID()`
- `ToggleGroup(title:, options:, selection:, label:)` — Molecule. · modifiers: `.optionDescription()`, `.a11yID()`
- `TreeSelect(id:, title, systemImage:, children:)` — Hierarchical (nested) select with expand/collapse and multi-selection. · modifiers: `.placeholder()`, `.cascade()`, `.searchable()`, `.loading()`, `.nodeEnabled()`

## Organisms (42)

- `Accordion(//:, so:, initiallyExpanded:, @ViewBuilder:)` — Improved, token-bound rewrite of the reference AccordionView — a single expandable row with a @ViewBuilder body instead of type-erased AnyView models. · modifiers: `.icon()`, `.subtitle()`, `.number()`, `.indicator()`, `.titleSize()`, `.density()`, `.truncateSubtitle()`, `.divider()`
- `AccordionGroup(//:, so:, initiallyExpanded:, title:)` — A group of accordion rows with single- or multiple-open behavior (the reference `AccordionView` tracks a `Set` of open ids). · modifiers: `.mode()`
- `AlertToast(title, handler:)` — Improved, token-bound rewrite of the reference AlertView — a solid-fill status banner (complements the light-surface InfoBanner). · modifiers: `.message()`, `.variant()`, `.icon()`, `.loading()`, `.action()`, `.onClose()`
- `BlogCard(title:, @ViewBuilder:)` — Organism. · modifiers: `.excerpt()`, `.compact()`
- `Callout(text)` — Organism. · modifiers: `.variant()`, `.calloutStyle()`, `.showsIcon()`, `.action()`, `.onClose()`
- `Card(title, action:)` — Organism. · modifiers: `.subtitle()`, `.elevation()`, `.contentPadding()`, `.extraAction()`, `.loading()`
- `CardStack(items, @ViewBuilder:)` — Organism.
- `Carousel(items, loop:, currentIndex:, @ViewBuilder:)` — A generic paging carousel with dot indicators, optional autoplay and optional prev/next arrows. · modifiers: `.autoplay()`, `.arrows()`, `.dots()`, `.fade()`
- `ChatBubble(text, author:, time:)` — Organism. · modifiers: `.side()`, `.icon()`
- `Counter(value:, label:)` — Organism.
- `Coupon(code:, label:, onCopy:)` — Organism. · modifiers: `.couponStyle()`
- `DataTable(title, align:, sortKey:)` — Organism. · modifiers: `.striped()`, `.pageSize()`, `.loading()`, `.onRowTap()`
- `Diff(@ViewBuilder:)` — Organism. · modifiers: `.aspect()`
- `EmptyState(title)` — Improved, token-bound rewrite of the reference EmptyCardView. · modifiers: `.icon()`, `.message()`, `.imageMaxHeight()`, `.iconForeground()`, `.iconBackground()`, `.iconCircleSize()`, `.primaryAction()`, `.secondaryAction()`
- `FloatingActionButton(systemImage:, label:, action:)` — Organism. · modifiers: `.shape()`, `.color()`, `.badge()`
- `Footer(title, action:)` — Organism.
- `Gallery(items, @ViewBuilder:)` — Organism. · modifiers: `.columns()`, `.aspect()`
- `Hero(title:, @ViewBuilder:)` — Organism. · modifiers: `.subtitle()`, `.cta()`, `.dark()`
- `HeroSurface` — The default `Hero` surface.
- `ImageCollage(urls, onTap:)` — A gallery collage of remote images with count-aware layouts (1 / 2 / 3 / 4+) and a "+N" overlay on the last visible tile. · modifiers: `.height()`, `.spacing()`, `.cornerRadius()`
- `InfoBanner(message, title:, links:)` — Improved, token-bound rewrite of the reference InfoMessage. · modifiers: `.variant()`, `.showsIcon()`, `.fullWidth()`, `.action()`, `.onDismiss()`
- `KeyValueTable(label, value:, style:)` — Organism. · modifiers: `.title()`, `.bordered()`
- `ListRow(total:, each:, unit:)` — A flexible list row that consolidates the reference ListItem family (Default / Chevron / Checkbox / Radio / Menu / Quick-action) into one token-bound view. · modifiers: `.subtitle()`, `.number()`, `.size()`, `.icon()`, `.leadingImage()`, `.leadingSelection()`, `.alertCount()`, `.badge()`, `.meta()`, `.infos()`, `.selected()`, `.multilineTitle()`, `.trailing()`, `.onInfo()`
- `ListSectionHeader` — A non-interactive section-header row inside a list (Reference menu `.secondary`).
- `ListView(items, @ViewBuilder:)` — Ant-style List container: optional header/footer, bordered surface, row dividers (split), and a loading (skeleton) state. · modifiers: `.header()`, `.footer()`, `.bordered()`, `.loading()`, `.split()`, `.emptyText()`
- `MenuCard(title:, subtitle:, systemImage:, action:)` — Organism. · modifiers: `.subtitle()`, `.icon()`
- `NavigationBar(systemImage:, activeSystemImage:)` — Organism.
- `NotificationCard(title:, @ViewBuilder:)` — Organism. · modifiers: `.message()`, `.date()`, `.unread()`, `.variant()`, `.onClose()`
- `PageHeader(systemImage:, handler:)` — Organism. · modifiers: `.subtitle()`, `.tags()`, `.onBack()`, `.actions()`
- `PagingCarousel(items, @ViewBuilder:)` — Custom drag-paging carousel with PEEKING neighbors + threshold snap (the reference `PagingScrollView`). · modifiers: `.peek()`, `.spacing()`, `.autoplay()`
- `PromoBanner(title, action:)` — Organism. · modifiers: `.subtitle()`, `.icon()`, `.ctaTitle()`, `.color()`
- `RatingSummary(score:)` — Organism. · modifiers: `.label()`, `.reviews()`
- `ResultView(status, title:)` — Ant-style "Result" template: a full-page status view for the outcome of an operation (success / info / warning / error) or an exception page (404 / 403 / 500), with up to two actions. · modifiers: `.message()`, `.primaryAction()`, `.secondaryAction()`
- `SegmentedTabBar(title, caption:, systemImage:, trailingSystemImage:, badge:, isEnabled:)` — Tab bar with a selection binding and an animated underline. · modifiers: `.scrollable()`, `.tabStyle()`, `.a11yID()`
- `RadioCard(title, isSelected:, action:)` — Organisms. · modifiers: `.description()`
- `CheckboxCard`
- `Sidebar(tag:, label, systemImage:, badge:)` — Organism. · modifiers: `.header()`, `.footer()`, `.width()`, `.a11yID()`
- `ThemePicker(selection:, themes:, onSelect:)` — A grid of `ThemePreset` preview cards.
- `Timeline(title:, time:, description:, systemImage:, state:, color:)` — Organism. · modifiers: `.axis()`, `.mode()`, `.reversed()`, `.pending()`
- `Upload(id:, name:, status:)` — Organism. · modifiers: `.buttonTitle()`, `.maxCount()`, `.prompt()`
- `UploadList` — `Upload` wired to an `UploadController` — renders its files with remove + retry.
- `VideoPlayerView(url, progress:, isMuted:, onTap:)` — Inline video on AVKit (reference `InlineVideoPlayerView`): autoplay, loop, mute, aspect-fill, and active-gating (only the visible item plays). · modifiers: `.autoplay()`, `.loop()`, `.muted()`, `.muteToggle()`, `.tapToToggle()`

## Chainable modifiers (all components)

Set styling/variants/flags AFTER the init, SwiftUI-style:

`.a11yID()` `.a11yLabel()` `.action()` `.actions()` `.addons()` `.alertCount()` `.alignment()` `.allowHalf()` `.arrows()` `.aspect()` `.autocorrectionDisabled()` `.autoplay()` `.axis()` `.backButton()` `.badge()` `.badgeColor()` `.badgeShape()` `.badgeStyle()` `.barHeight()` `.bordered()` `.buttonTitle()` `.calloutStyle()` `.cascade()` `.characterLimit()` `.chipStyle()` `.circle()` `.clearable()` `.closable()` `.color()` `.colors()` `.columns()` `.compact()` `.components()` `.confirmsSuccess()` `.contentMode()` `.contentPadding()` `.cornerRadius()` `.countLabel()` `.couponStyle()` `.cta()` `.ctaTitle()` `.customSize()` `.dark()` `.dashboard()` `.dashed()` `.date()` `.debounce()` `.density()` `.description()` `.digitCount()` `.dimension()` `.divider()` `.dots()` `.editable()` `.elevation()` `.emptyText()` `.errorText()` `.excerpt()` `.exists()` `.expands()` `.externalFocus()` `.extraAction()` `.eyebrow()` `.fade()` `.fileName()` `.fillColor()` `.footer()` `.formatter()` `.free()` `.fullWidth()` `.gap()` `.gaugeStyle()` `.gradient()` `.groupStyle()` `.hasError()` `.hasInfo()` `.header()` `.height()` `.helper()` `.helperText()` `.highlighted()` `.hint()` `.hourCycle()` `.icon()` `.iconBackground()` `.iconCircleSize()` `.iconForeground()` `.imageMaxHeight()` `.imageURL()` `.indeterminate()` `.indicator()` `.infoMessages()` `.infos()` `.inlineStyle()` `.inputs()` `.interactive()` `.jumper()` `.keyboard()` `.label()` `.large()` `.layout()` `.leadingImage()` `.leadingSelection()` `.lineWidth()` `.loading()` `.locale()` `.loop()` `.marks()` `.maxCount()` `.maxLength()` `.maxResults()` `.maxTags()` `.maxValue()` `.maxVisible()` `.message()` `.meta()` `.minHeight()` `.minuteInterval()` `.mode()` `.multilineTitle()` `.muteToggle()` `.muted()` `.nodeEnabled()` `.number()` `.onBack()` `.onChangeEnd()` `.onClear()` `.onClose()` `.onCommit()` `.onDismiss()` `.onInfo()` `.onRate()` `.onReviewTap()` `.onRowTap()` `.onSearch()` `.onSelect()` `.onValueChange()` `.optionDescription()` `.optionEnabled()` `.pageSize()` `.peek()` `.pending()` `.placeholder()` `.prefix()` `.presence()` `.primaryAction()` `.progressDot()` `.progressLabel()` `.prompt()` `.pulse()` `.radioStyle()` `.range()` `.rating()` `.ratio()` `.recent()` `.required()` `.resend()` `.reversed()` `.reviews()` `.ringColor()` `.rotate()` `.scrollable()` `.searchable()` `.secondaryAction()` `.secure()` `.selectAll()` `.selected()` `.sentiment()` `.shape()` `.showTotal()` `.showsCount()` `.showsIcon()` `.showsLabel()` `.showsPercentage()` `.showsValue()` `.showsValueTooltip()` `.side()` `.simple()` `.size()` `.small()` `.spacing()` `.split()` `.starSize()` `.status()` `.step()` `.stepText()` `.steps()` `.striped()` `.style()` `.subtitle()` `.successSegment()` `.suffix()` `.suggestionEnabled()` `.suggestions()` `.supportsOpacity()` `.symbol()` `.symbols()` `.tabStyle()` `.tagStyle()` `.tags()` `.tapToToggle()` `.title()` `.titleAlign()` `.titleSize()` `.titleTextStyle()` `.trailing()` `.trailingIcon()` `.trend()` `.truncateSubtitle()` `.type()` `.underline()` `.unit()` `.unread()` `.valueFormat()` `.valueLabel()` `.variant()` `.videoProgress()` `.warningText()` `.weight()` `.width()` `.window()`

Plus the native cross-cuts every control honors: `.disabled(_:)`, `.controlSize(_:)`, `.a11yID(_:)`.
