# Canvas agent documentation Package: @nannier/canvas Version: 4.1.0 Status: source-snapshot (not proof of an npm release) Source SHA-256: 63292636c7ff2f224185aef7c96ac78124f9170a170b90ee11718addfa280643 This generated source snapshot describes `@nannier/canvas` at repository package version `4.1.0`. Check the application's installed package version and its declarations before using an API. A source snapshot is not a claim that npm has published this version. ## Guides - [installation](https://canvas.nannier.com/ai/4.1.0/installation.md) - [theming](https://canvas.nannier.com/ai/4.1.0/theming.md) - [layout](https://canvas.nannier.com/ai/4.1.0/layout.md) - [overlays](https://canvas.nannier.com/ai/4.1.0/overlays.md) - [Machine catalog](https://canvas.nannier.com/ai/4.1.0/catalog.json) - [Content and source manifest](https://canvas.nannier.com/ai/4.1.0/manifest.json) ## Components - [Accordion](https://canvas.nannier.com/ai/4.1.0/components/accordion.md): A vertically stacked group of disclosure rows: each `items` entry is a header (its `title` plus a chevron that rotates when the row opens) over a collapsible content panel. - [ActionPanel](https://canvas.nannier.com/ai/4.1.0/components/action-panels.md): Section panel with headline, body text, and one action. Used to surface a single decision or call-to-action. - [ActionSheet](https://canvas.nannier.com/ai/4.1.0/components/action-sheet.md): A modal sheet of contextual actions, the iOS action sheet idiom: a bottom sheet of choices summoned in response to a user action, over a dimmed scrim that glass on the web also blurs. - [Alert](https://canvas.nannier.com/ai/4.1.0/components/alert.md): Inline notification banners: info, success, warning, and destructive, plus a full-width announcement bar. For a blocking confirmation prompt, see Alert Dialog. - [AlertDialog](https://canvas.nannier.com/ai/4.1.0/components/alert-dialog.md): Catalyst-style confirmation dialog: a centered panel over a dimmed backdrop, which glass on the web also blurs, with a title, description, optional body, and action buttons. Reserve it for decisions that must block the rest of the app. - [AppFrame](https://canvas.nannier.com/ai/4.1.0/components/app-frame.md): The app's root frame and its scrolling screens. `AppFrame` mounts the safe-area context and the app-root overlay host, pads all four safe-area edges over the theme background, renders the app's top chrome in a banner region and lets its body (a router's Stack) fill the height left. `Page` is one screen inside it: the main region, a scroller with page gutters whose content is capped and centered at a step of the width scale. - [AreaChart](https://canvas.nannier.com/ai/4.1.0/components/area-chart.md): Categorical-x series fills: overlapping translucent areas by default, or running-sum bands with `stacked`. Shares the line chart's curve, density, furniture, and scrub-to-inspect axes. - [Autocomplete](https://canvas.nannier.com/ai/4.1.0/components/autocomplete.md): Text input + dropdown: searchable single-select. - [Avatar](https://canvas.nannier.com/ai/4.1.0/components/avatar.md): A photo when the account has one, falling back to one or two initials on an identity disc: the name resolves to one of ten hues (or `hue` picks one), and the disc is that hue's soft wash under initials in the same hue, so one person keeps one colour on every platform and stays distinct in a stack or list. The initials sit at weight 600, 38% of the disc, and their ink is held to 4.5:1 on the wash in both schemes. - [Badge](https://canvas.nannier.com/ai/4.1.0/components/badge.md): Two families on one Badge component, picked by boolean props. The metadata badge labels a schema, role, or tag: with no tone it is the accent's soft pill, and the tones give `default` the solid call-to-action pill, `secondary` the quiet surface pill, `outline` a hairline pill and `destructive` the soft red pill; add `mono` for token names. A status tone (`success`, `warning`, `error`, `info`, `neutral`) paints the pill in that tone's wash and ink and leads it with a dot. The status badge (`status`) has no pill: a dot in the tone's color, ringed in its wash, beside a muted label, for live state like active, pending, or failed. - [BarList](https://canvas.nannier.com/ai/4.1.0/components/bar-list.md): Ranked label and value rows: each row is a proportional tone wash behind a truncating label, with a right-aligned mono value and an optional delta. - [Board](https://canvas.nannier.com/ai/4.1.0/components/board.md): A data-driven kanban board: columns scroll horizontally, each column is a drop zone in a sunken well headed by its label and item count, and every card carries a drag grip, an optional trailing badge, a two-line description, a free-form chips slot, and an optional kebab menu. - [BoxPlot](https://canvas.nannier.com/ai/4.1.0/components/box-plot.md): Quartile boxes, whiskers, and outlier dots per category, computed by the chart from raw samples: quartiles by linear interpolation, whiskers at the most extreme data inside the 1.5 IQR fences, outliers beyond them. Scrub a category to flag its five-number summary; each category's summary also folds into the accessible name. - [Breadcrumb](https://canvas.nannier.com/ai/4.1.0/components/breadcrumb.md): Hierarchical navigation showing where you are. - [BulletChart](https://canvas.nannier.com/ai/4.1.0/components/bullet-chart.md): Goal-attainment rows: each datum is a leading label, a track holding qualitative background bands (`ranges`, ascending bounds in fading washes), the tone-colored measure bar, an optional vertical target tick, and the trailing formatted value. - [Button](https://canvas.nannier.com/ai/4.1.0/components/button.md): Six intents × three sizes (plus the icon square) × disabled / focus / hover states. Always semantic: the intent communicates what the button does (default = the primary action, destructive = irreversible, ghost = chrome). - [ButtonGroup](https://canvas.nannier.com/ai/4.1.0/components/button-group.md): Segmented controls, split buttons, attached groups. - [Calendar](https://canvas.nannier.com/ai/4.1.0/components/calendar.md): Month grid, week timeline, and day timeline in one component. Events mark their days with a dot in the month grid and week strip, and timed events render as blocks on the week/day hour timelines. - [CandlestickChart](https://canvas.nannier.com/ai/4.1.0/components/candlestick-chart.md): The trading instrument view: OHLC candles colored by direction from the success/destructive tokens, an optional docked volume pane, and optional overlay series (moving averages) in the series tokens. Press or scrub a candle to read its Open/High/Low/Close and volume. - [Card](https://canvas.nannier.com/ai/4.1.0/components/card.md): A content surface, used three ways: a stat card (a single metric, a big number and a delta), a section card (a labeled surface with an optional eyebrow, header and footer), and the generic card that brings its own structure. It is the Canvas v4 panel: the card fill under a hairline at the card corner (16 px on the web, 12 natively), the small shadow at rest and the large one `raised`; `flat` drops the shadow and steps the fill up a surface, `sunken` drops the shadow and sinks the fill to the well beneath the page (`surface-sunken`, the hand-off's `--bg2` tiles, stages and panels set into a card) under the hairline, and `outlined` drops the shadow and keeps the card fill under the hairline (the hand-off's page cards; a platform whose card control draws an outline instead of a shadow draws both the same), and `heroShadow` is the medium shadow (the hand-off's `--sh-md`, its section hero's stage), between the resting card and the raised one. Precedence is `raised`, `flat`, `sunken`, `outlined`, `heroShadow`. On Android `sunken` is the Material 3 filled card: the well's fill with no outline. A pressable card lifts 2 px on hover and takes the raised shadow. `selected` draws the primary border with a ring of the accent's soft wash around it. - [Carousel](https://canvas.nannier.com/ai/4.1.0/components/carousel.md): A horizontally paged slide viewer: swipe (or use the prev/next arrows and the dot indicators) to move one slide at a time. - [Chart](https://canvas.nannier.com/ai/4.1.0/components/chart.md): A single- or multi-series bar chart: vertical columns (or horizontal rows) sized against the axis max, with per-category values and labels. - [Chat](https://canvas.nannier.com/ai/4.1.0/components/chat.md): A controlled assistant conversation with independently scrolling messages, clear author and provider identities, and an anchored multiline composer. The parent supplies the bounds; Chat fills the available height without choosing a fixed height of its own. - [Checkbox](https://canvas.nannier.com/ai/4.1.0/components/checkbox.md): Multi-select option, single yes/no, grouped lists. - [Chip](https://canvas.nannier.com/ai/4.1.0/components/chip.md): An interactive pill for filter chips, tags, and selectable tokens. It carries an optional leading icon and a label, becomes tappable with `onPress`, and grows a trailing "×" remove button with `onRemove`. - [CodeBlock](https://canvas.nannier.com/ai/4.1.0/components/code-block.md): Syntax-highlighted code display with clipboard copy, horizontal scrolling, line emphasis, diff rendering, collapsible folding, and tabbed alternatives. - [Collapsible](https://canvas.nannier.com/ai/4.1.0/components/collapsible.md): A single disclosure: one header (its `title`, or a custom `trigger`, plus a chevron that rotates when open) over one collapsible content panel. - [Command](https://canvas.nannier.com/ai/4.1.0/components/command.md): Cmd+K search: navigation, actions, recent items. - [ComposedChart](https://canvas.nannier.com/ai/4.1.0/components/composed-chart.md): Bars, lines, and gradient-washed areas sharing one categorical axis: each series picks its mark with a `line` or `area` boolean (bars by default; precedence line > area > bars). - [Container](https://canvas.nannier.com/ai/4.1.0/components/container.md): The bounds provider. A Canvas component never dictates its own width: `Container` conforms to its parent (full width, no cap) by default, and a named step of the shared width scale (`xxxs` 192 through `page` 1280) caps and centers it, so the reading measure of a form, an article, or a card stack is a step you can name instead of a width invented at the call site. - [DashboardGrid](https://canvas.nannier.com/ai/4.1.0/components/dashboard-grid.md): A 12-column widget board for overview screens. Each widget declares a span in twelfths, and the grid measures its OWN width (never the window) to pick a tier: a wide container honors every span, a narrower one reflows widgets to their `narrowSpan`, and a phone-sized one stacks them full width. - [DataTable](https://canvas.nannier.com/ai/4.1.0/components/data-table.md): A data table rendered from column and row data, with sorting, row selection, pagination, and the loading and empty states built in. - [DepthChart](https://canvas.nannier.com/ai/4.1.0/components/depth-chart.md): The order-book view: cumulative bid and ask step areas mirrored around the spread, bids in the success tone and asks in destructive, on a numeric price axis. - [DescriptionList](https://canvas.nannier.com/ai/4.1.0/components/description-lists.md): Key-value pairs in stacked, two-column, or inline-edit layouts. Used for detail panels, settings, and profile views. Rows flagged `update` carry a working in-place editor: Update opens it, Enter or Save commits the new value and fires `onUpdate`, Escape or Cancel dismisses it. `muted` sets each text value as a note beside its term, in the small type and the muted ink, for a list that explains its terms (a key and its effect) rather than reporting data; a node value renders as given, and a platform skin whose value detail is already the secondary ink keeps its type. - [Dialog](https://canvas.nannier.com/ai/4.1.0/components/dialog.md): A modal dialog: a centered panel over a dimmed backdrop, which glass on the web also blurs, with a title, an optional description, a body for real content like a form, and right-aligned actions. Use it for a focused task that warrants interrupting the page; reach for the Alert Dialog for a terse yes/no confirmation. - [Divider](https://canvas.nannier.com/ai/4.1.0/components/divider.md): Horizontal, vertical, with label, with action. - [Drag & drop](https://canvas.nannier.com/ai/4.1.0/components/drag-drop.md): A reusable drag-and-drop context: wrap a surface in a `DragDropProvider`, mark droppable regions with `DropZone`, and make items draggable with `Draggable` plus a `DragHandle` grip. - [Drawer](https://canvas.nannier.com/ai/4.1.0/components/drawer.md): A full-screen panel that slides in from an edge: a navigation drawer, a mobile menu, or a bottom action sheet. Built on React Native's Modal, so it floats over the whole app on iOS, Android, and the web, over a dimmed scrim that glass on the web also blurs. For a small contextual menu, reach for Dropdown or RowMenu instead. - [Dropdown](https://canvas.nannier.com/ai/4.1.0/components/dropdown.md): Floating menus triggered by a button: actions, options, navigation. - [Emblem](https://canvas.nannier.com/ai/4.1.0/components/emblem.md): A tinted rounded square (or circle) that holds a single `Icon` or a short monogram, the recurring "icon on a soft background" used in cards, media objects, empty states, and feeds. Emblem owns the surface and the icon color: pick a tone and it tints the square and paints the glyph to match, so a call site never hand-composes `borderRadius` + `backgroundColor` to build an icon background. - [EmptyState](https://canvas.nannier.com/ai/4.1.0/components/empty-state.md): Centered, calm, never blame the user. Always tell them what could be here, and ideally how to get there. - [Feed](https://canvas.nannier.com/ai/4.1.0/components/feeds.md): Vertical activity streams with icons and timestamps. Used for audit logs, change history, and notification lists. - [Field](https://canvas.nannier.com/ai/4.1.0/components/field.md): A form row: a label, the control, and one message line under it. Field exists for the part no control owns on its own: every field family already owns its label, but nothing else in the kit renders helper or error text, so that message is what Field adds. - [FilterPanel](https://canvas.nannier.com/ai/4.1.0/components/filter-panel.md): Sidebar filter rail: grouped checkbox options under mono group headings, each with its count, and a "Clear N" action in the header while any filter is on (a plain accent text action). On the web an option's label is the 400 14px row label, 10px from its box. - [Form](https://canvas.nannier.com/ai/4.1.0/components/form.md): Stitch your own fields inside it; Form adds the stacked or two-column rhythm, titled sections, the submit and cancel actions row, and Enter to submit. - [FunnelChart](https://canvas.nannier.com/ai/4.1.0/components/funnel-chart.md): Stage-by-stage conversion bars: one centered row per stage, labelled on the left and valued on the right. - [Gauge](https://canvas.nannier.com/ai/4.1.0/components/gauge.md): A semicircular dial: a 180 degree top arc (muted track plus a tone-colored value arc) for a 0-100 value, the percent readout in the open center of the semicircle, and an optional label below the graphic. - [GeoMap](https://canvas.nannier.com/ai/4.1.0/components/geo-map.md): A world map with a bubble per place, its area proportional to its count, over coastlines and country borders precomputed at build time. Optionally zoomable, merging crowded places into one bubble that splits as you zoom in. - [Grid](https://canvas.nannier.com/ai/4.1.0/components/grid.md): The container-measured auto-fit tile grid. `minTileWidth` sets the floor (default 240): the grid fits as many equal-width columns of at least that width as its own measured container allows, and re-fits as the container changes, so the same grid renders three-up on a desktop, two-up on a tablet, and a single column on a phone with no breakpoint at the call site. - [GridList](https://canvas.nannier.com/ai/4.1.0/components/grid-lists.md): Tiled card grids for people directories, item collections, and image galleries. - [Heatmap](https://canvas.nannier.com/ai/4.1.0/components/heatmap.md): Density cells whose fill encodes each value. Pass `calendar` for a GitHub-style contribution graph: seven-day week columns with weekday and month labels, discrete less-to-more levels, and press or hover to inspect a day's count and date. The calendar layout IS the kit's activity calendar, so a contribution graph needs no separate component. - [Histogram](https://canvas.nannier.com/ai/4.1.0/components/histogram.md): An auto-binned frequency distribution: pass raw sample `values` and the chart bins them into nice-edged uniform buckets (Sturges' rule by default, `bins` to override) and draws contiguous bars on a numeric axis. Press or scrub a bar to inspect its range and count. The accessible name lists every bin with its bounds and tally. - [Icon](https://canvas.nannier.com/ai/4.1.0/components/icon.md): Lucide-style outline. 1.75 stroke width, rounded caps. The stroke defaults to the theme foreground token and tracks light and dark automatically; pick other hues with the semantic color booleans (`primary`, `destructive`, `success`, `warning`, `muted`, `subtle`; that order is the precedence). `muted` is the third ink (`subtle-foreground`) and `subtle` the second (`muted-foreground`), the names Typography gives the same two inks. Inside a control that owns a label ink (a Button's `iconLeft` and `iconRight` slots) a glyph with no tone takes that ink instead, the way the hand-off's icons inherit `currentColor`: the primary's contrast ink on a primary button, the muted ink on a quiet one. The precedence is the explicit tone, then the host's ink, then the foreground, so a toned glyph keeps its tone anywhere. - [Image](https://canvas.nannier.com/ai/4.1.0/components/image.md): Displays a local or remote image. Set the `source` (`{ uri }`) and a size, then choose how it fills its box with a fit prop: `cover` (the default) fills the box and crops the overflow, while `contain` fits the whole image inside and letterboxes the spare space. - [Input](https://canvas.nannier.com/ai/4.1.0/components/input.md): The Input component is a React Native text field with semantic boolean props (`error`, `small`, `large`, `compact`, `disabled`), plus prefix/suffix addons, overlaid icons (`leadingIcon` / `trailingIcon` with any Canvas glyph as `icon`), a `passwordToggle` eye for a `secureTextEntry` value, a `clearable` clear button, and a `shortcut` keycap. Input is single-line; for multi-line entry use the dedicated Textarea. - [InputOTP](https://canvas.nannier.com/ai/4.1.0/components/input-otp.md): A segmented one-time-code field: `length` cells display the typed characters while one underlying text input captures the keystrokes, so native SMS autofill, the one-time-code keyboard suggestion, and paste all flow into a single value. - [Kbd](https://canvas.nannier.com/ai/4.1.0/components/kbd.md): Keyboard shortcut indicator: a raised 24 px key cap with a mono label. `keys` composes a whole shortcut, one cap per key; `sequence` says "then" between the caps of keys pressed one after another. A shortcut reads as one accessible name ("⌘+K", "G then C"). `comfortable` pads the cap 3 px above and below its label and 8 px at the sides (25 px tall) for a key set beside what it does, as a reference's keyboard table lists it; omit it for the 24 px cap with 6 px sides. - [LineChart](https://canvas.nannier.com/ai/4.1.0/components/line-chart.md): Categorical-x series lines with nice y ticks, gridlines, and a legend for multiple series. - [Listbox](https://canvas.nannier.com/ai/4.1.0/components/listbox.md): A custom select whose options stay on screen: single or multi-select, an optional detail line under each option, and a checkmark on the chosen items. Reach for it when the options need rich rows; prefer `Select` for a simple short list. - [MediaObject](https://canvas.nannier.com/ai/4.1.0/components/media-objects.md): Image or icon paired with text content. The fundamental building block for list items, notifications, and comment layouts. - [MetricBreakdown](https://canvas.nannier.com/ai/4.1.0/components/metric-breakdown.md): The decomposed-metric dashboard card: headline value, tone-aware rate, Sparkline trend, per-category share rows, and a chip footer. - [Navbar](https://canvas.nannier.com/ai/4.1.0/components/navbars.md): Topbars with a brand, navigation links, and an action button. Used as the primary app-level navigation. - [Pagination](https://canvas.nannier.com/ai/4.1.0/components/pagination.md): Page-of-N navigation for tables and lists. - [PhoneInput](https://canvas.nannier.com/ai/4.1.0/components/phone-input.md): A phone number field: the Input's box with a country segment at its start (the chosen country and a caret, which open a list of countries with their names and dial codes) and that country's dial code inline before the number. On the web the segment is a small chip inside the field naming the country by its ISO code, and the dial code and the number are set in the mono face, and in the country list each row is a 16px flag 10px from the name with the dial code a 12px mono note at its end; on iOS and Android it is the country's flag. - [PieChart](https://canvas.nannier.com/ai/4.1.0/components/pie-chart.md): Proportional composition as arc slices in the `chart-1`..`chart-8` token colors, with a percent legend. `donut` centers the total (or the selected slice while inspecting); pressing a slice dims the others. - [Popover](https://canvas.nannier.com/ai/4.1.0/components/popover.md): Floating panel with a title, supporting text, rich content such as form fields, and a single follow-up action, anchored to its trigger. Pass children to host custom content in the panel body, between the description and the action. - [Pressable](https://canvas.nannier.com/ai/4.1.0/components/pressable.md): The touchable primitive: wraps content, fires `onPress`, and exposes the press state to its style for feedback. - [Progress](https://canvas.nannier.com/ai/4.1.0/components/progress.md): Determinate and indeterminate progress bars: a rounded bar that reports how far a task has gotten, or that work is underway. - [ProgressRing](https://canvas.nannier.com/ai/4.1.0/components/progress-ring.md): A full-circle completion ring, the Gauge's sibling: a muted track ring, a tone-colored value arc revealed clockwise from 12 o'clock with rounded caps, the whole-percent readout centered inside, and an optional label below the graphic. The same 0-100 value contract, tone axis, and rounding rules as Gauge, in the circular anatomy that reads as "completion" rather than "level". - [QRCode](https://canvas.nannier.com/ai/4.1.0/components/qrcode.md): Encodes a string as a scannable QR code. Built on react-native-svg, so it renders the same on iOS, Android, and the web. The code stays a fixed dark-on-white card so any camera can read it, whatever the app theme. - [RadarChart](https://canvas.nannier.com/ai/4.1.0/components/radar-chart.md): A polygonal multi-axis comparison: concentric rings at nice tick fractions, a spoke per axis, and one closed polygon per series (ramp stroke over a soft matching wash), with the spoke labels just beyond the outer ring. Values align to `axes` by index and the accessible name folds every axis and value; press-to-inspect is deferred scope for this chart. - [RadialBarChart](https://canvas.nannier.com/ai/4.1.0/components/radial-bar-chart.md): Concentric arc rings, one per category, outermost first: each pairs a muted full-circle track with a ramp-colored value arc revealed clockwise from 12 o'clock, and a column legend carries the formatted values. Every ring sweeps against the same `max` (the largest entry by default), so the chart compares attainment, not shares. Press a ring to select it (the others dim); press elsewhere to clear. - [Radio](https://canvas.nannier.com/ai/4.1.0/components/radio.md): Single-pick selection: stacked, inline, card-style. - [RangeAreaChart](https://canvas.nannier.com/ai/4.1.0/components/range-area-chart.md): A min/max envelope: a translucent band between each label's `low` and `high`, an optional solid `mid` line through it, and the standard scrub-to-inspect flag showing High, Mid, and Low. The y domain hugs the data rather than anchoring at zero, since an envelope is a range idiom, not a magnitude bar. Forecast bands, error envelopes, and daily temperature ranges all read this way. - [Reveal](https://canvas.nannier.com/ai/4.1.0/components/reveal.md): An entrance for page content: what it wraps starts slightly offset and transparent, then travels into place and fades in when it reaches the viewport. It fires once and stays, so content that has arrived never leaves again. - [Row & Column](https://canvas.nannier.com/ai/4.1.0/components/row-column.md): The layout primitives. `Row` lays children out horizontally, `Column` vertically. Both own arrangement through semantic boolean axes, a gap scale (`flush` / `tight` / `snug` / `cozy` / `relaxed` / `loose`), main-axis distribution (`center`, `between`, …), cross-axis alignment (`alignCenter`, `baseline`, …), and `wrap` / `fill` / `grow` / `shrink`, so a call site never hand-rolls `flexDirection`, `gap`, or `alignItems`. - [RowMenu](https://canvas.nannier.com/ai/4.1.0/components/row-menu.md): Vertical action menu items and navigation links. - [ScatterPlot](https://canvas.nannier.com/ai/4.1.0/components/scatter-plot.md): Numeric x/y point clouds with nice ticks on both axes and horizontal gridlines. Multi-series clouds use the series tokens; pressing near a point rings it and flags its coordinates. - [ScrollView](https://canvas.nannier.com/ai/4.1.0/components/scroll-view.md): A scrollable container for content larger than its bounds: vertical by default, `horizontal` for a row. - [Select](https://canvas.nannier.com/ai/4.1.0/components/select.md): A single-choice dropdown field: a trigger showing the chosen value that opens a panel of options, styled to match Canvas inputs. - [ServiceHealthList](https://canvas.nannier.com/ai/4.1.0/components/service-health-list.md): Per-service status rows: a status dot (down > degraded > operational), the service name, an optional right-aligned `detail` such as an uptime percentage, and, when the item carries `periods`, an inline strip of its latest 14 periods beside the detail. - [Sidebar](https://canvas.nannier.com/ai/4.1.0/components/sidebar.md): App navigation rail with collapsible sections and active highlighting. The sidebar on the left of this page is a thin adapter over this very `Sidebar` component: it feeds the docs' nav tree in and gets the same collapse, accordion, and active-highlight behavior back. - [Skeleton](https://canvas.nannier.com/ai/4.1.0/components/skeleton.md): Placeholders for loading content. - [Slider](https://canvas.nannier.com/ai/4.1.0/components/slider.md): Drag (or tap) along a track to pick a value in a range; the keyboard and screen readers step it too. Controlled by `value`, bounded by `min` / `max`, and snapped to `step`. - [Sparkline](https://canvas.nannier.com/ai/4.1.0/components/sparkline.md): A compact trend strip: a row of thin bars whose heights track a series of values, with the series in a soft wash of the tone and the latest bar in the full accent. Pass `values` and it sizes each bar against the series max and paints the tone, so no call site hand-composes a row of `flexGrow` + `height` + `backgroundColor` Views to draw an inline trend on a stat card or dashboard. - [Spinner](https://canvas.nannier.com/ai/4.1.0/components/spinner.md): Animated loading spinner in three sizes. - [StackedBar](https://canvas.nannier.com/ai/4.1.0/components/stacked-bar.md): One proportional horizontal bar split into colored segments (the `chart-1`..`chart-8` tokens in fixed order), with a legend carrying each segment's label and share. - [StackedList](https://canvas.nannier.com/ai/4.1.0/components/stacked-lists.md): Vertical lists with avatar, two-line items, and trailing metadata. Used for contacts, activity feeds, and data previews. - [Stats](https://canvas.nannier.com/ai/4.1.0/components/stats.md): Single value, grouped row, with sparkline, with comparison. Used for dashboards and overview pages. - [Stepper](https://canvas.nannier.com/ai/4.1.0/components/stepper.md): Increment, decrement, or type a number in a bounded range. A − button, an editable numeric center field, and a + button, controlled by `value` and clamped to `min` / `max` by `step`. This is the ± numeric control (the iOS UIStepper idiom); for a multi-step progress indicator see Steps. - [Steps](https://canvas.nannier.com/ai/4.1.0/components/steps.md): Multi-step progress indicators: horizontal, vertical, with progress. - [Swatch](https://canvas.nannier.com/ai/4.1.0/components/swatch.md): A color sample: a filled rounded block with the token's name and value beneath it, the anatomy a design-system color sheet repeats down a page. Swatch owns the whole lockup, so a sheet never sets a bare block next to a hand-built text column and drifts row to row. - [Switch](https://canvas.nannier.com/ai/4.1.0/components/switch.md): On / off switch, isolated or grouped in a settings list. - [TabBar](https://canvas.nannier.com/ai/4.1.0/components/tab-bar.md): Bottom app navigation: a row of equal-width destinations, each an icon over a short label, with exactly one active. The mobile idiom (the iOS 26 floating tab bar / Material 3 navigation bar), rendered through the glass functional layer. - [Tabs](https://canvas.nannier.com/ai/4.1.0/components/tabs.md): Underline, pill, vertical, with badges. - [Text](https://canvas.nannier.com/ai/4.1.0/components/text.md): Renders text. In React Native every string must live inside a Text element, so you cannot put a bare string in a View. For type scale and tone in app code, reach for `` (e.g. ``, ``, ``), which owns the kit's roles and colors; use the raw Text primitive for the primitive-level cases it does not cover: `numberOfLines` truncation and nested inline runs. - [TextInput](https://canvas.nannier.com/ai/4.1.0/components/text-input.md): Single-line (or multiline) text entry. Control it with `value` + `onChangeText`, and style the box with the usual View style props. Common props: `placeholder`, `secureTextEntry` (passwords), `keyboardType`, and `multiline`. - [Textarea](https://canvas.nannier.com/ai/4.1.0/components/textarea.md): Multi-line input, with character count, with toolbar. - [Toast](https://canvas.nannier.com/ai/4.1.0/components/toast.md): A transient notification card. Render a `` directly, or drive them imperatively: mount a `` near your app root and call `toast(...)` from the `useToast()` hook to enqueue auto-dismissing toasts that stack over the app. - [Tooltip](https://canvas.nannier.com/ai/4.1.0/components/tooltip.md): Small floating helper text on hover or focus. - [Treemap](https://canvas.nannier.com/ai/4.1.0/components/treemap.md): Squarified value tiles: each datum becomes a ramp-colored rectangle whose area is proportional to its value, packed largest-first with near-square aspect ratios, with the label and formatted value rendered inside only when the tile fits them. - [Typography](https://canvas.nannier.com/ai/4.1.0/components/typography.md): Type scale classes for headings, body text, and helper styles. - [UptimeBar](https://canvas.nannier.com/ai/4.1.0/components/uptime-bar.md): The statuspage strip: per-period status pills (operational, degraded, down, unknown) with a summary caption and edge labels. - [Video](https://canvas.nannier.com/ai/4.1.0/components/video.md): Plays a clip with an optional poster: tap to play inline, or full transport controls (the platform's own on iOS and Android, the kit's bar on the web), with boolean fit, `autoplay`, `loop` and `muted` props. - [View](https://canvas.nannier.com/ai/4.1.0/components/view.md): The layout primitive: a flex container that runs identically on iOS, Android, and the web. A View is a column by default. - [WaterfallChart](https://canvas.nannier.com/ai/4.1.0/components/waterfall-chart.md): The running-total bridge: each step floats from the running total by its signed `value`, and a `total` step snapshots the running total as an absolute bar from zero. - [Wizard](https://canvas.nannier.com/ai/4.1.0/components/wizard.md): A modal workflow with a fixed step sidebar, a title and status header, and footer actions around a bounded, scrolling body. The application owns stage content, validation, saving and transitions; Wizard composes the existing Dialog, Steps and Button controls.