@overdoser/react-toolkit 0.0.6 → 0.0.8

package/llms.txt

@@ -35,6 +35,7 @@ Props:
 - `loading?: boolean` — default `false`. When `true`, button is disabled and `aria-busy`.
 - `loadingStyle?: 'dots' | 'shimmer' | 'border'` — default `'dots'`. Only used when `loading` is true.
 - `fullWidth?: boolean` — default `false`
+- `iconOnly?: boolean` — default `false`. Squares the button and renders content larger and bolder, for single-glyph buttons (`‹`, `›`, `×`, `+`). Always pair with `aria-label`.
 - `classes?: Partial<ButtonClasses>` where `ButtonClasses = { root, content, shimmer, dots, dot }`
 
 Example:
@@ -221,7 +222,8 @@ Mode B example:
 Import: `import { Popover } from '@overdoser/react-toolkit'`
 
 Props:
-- `trigger: ReactNode` — required. Wrapped in an internal `<button>`.
+- `trigger: ReactNode` — required. By default, wrapped in an internal `<button>` (so a plain `'Help'` string or an icon is fine).
+- `asChild?: boolean` — default `false`. When `true` and `trigger` is a single React element, the trigger is rendered **as-is** with click/aria/ref merged into it via `cloneElement` (no wrapping `<button>`). Use this when you want to pass your own interactive element (e.g. a `<Button>`) without producing `<button>` nested inside `<button>` (a hydration error).
 - `content: ReactNode` — required. Rendered inside an `[role="dialog"]` panel when open.
 - `position?: 'top' | 'bottom' | 'left' | 'right'` — default `'bottom'`
 - `open?: boolean` — controlled.
@@ -232,11 +234,20 @@ Closes on outside click and Escape. Auto-focuses the first focusable child of `c
 
 `children` is intentionally typed as `never` — pass via `content`.
 
-Example:
+Example — string trigger (default wrapping):
 ```tsx
 <Popover trigger="Help" content={<p>Some help text</p>} position="right" />
 ```
 
+Example — passing a `<Button>` without nested-button warning:
+```tsx
+<Popover
+  asChild
+  trigger={<Button iconOnly aria-label="Settings"><GearIcon /></Button>}
+  content={<Settings />}
+/>
+```
+
 ### Modal
 Import: `import { Modal } from '@overdoser/react-toolkit'`
 
@@ -434,6 +445,366 @@ Example:
 <Textarea placeholder="Bio" rows={3} autoExpand />
 ```
 
+### Charts: LineChart, AreaChart, BarChart, PieChart, RadarChart, TradingChart, Sparkline
+Imports: `import { LineChart, AreaChart, BarChart, PieChart, RadarChart, TradingChart, Sparkline, type ChartConfig } from '@overdoser/react-toolkit'`
+
+Responsive SVG charts, no external dependencies. Each chart fills its container width via `ResizeObserver`. Theme via five CSS variables: `--crk-chart-1` … `--crk-chart-5` (overridable on `:root`). Plus `--crk-chart-grid`, `--crk-chart-axis`, `--crk-chart-label-inside` (default `#ffffff` — used for labels positioned inside bar rectangles), `--crk-chart-tooltip-bg`, `--crk-chart-tooltip-text`.
+
+`ChartConfig` shape:
+```ts
+type ChartConfig = Record<string, { label: string; color: string }>;
+```
+Keys must match data-row field names. The `color` is any CSS color; use the chart tokens for consistency.
+
+Shared props (LineChart / AreaChart / BarChart):
+- `data: T[]` — row data.
+- `xKey: keyof T & string` — category field for the X axis.
+- `config: ChartConfig` — series keyed by data-field name.
+- `aspectRatio?: number` — default `16 / 9`.
+- `height?: number` — fixed pixel height; overrides `aspectRatio`.
+- `showGrid?: boolean` — default `true`.
+- `showLegend?: boolean` — default `true`.
+- `showTooltip?: boolean` — default `true`.
+- `yTickCount?: number` — default `5`. Approximate.
+- `yFormat?: (v: number) => string`
+- `xFormat?: (v: string) => string`
+- `valueFormat?: (v: number) => string` — used inside the default tooltip.
+- `renderTooltip?: (row: T) => ReactNode` — replace the default tooltip body.
+- `margin?: Partial<ChartMargin>` — `{ top, right, bottom, left }`. Defaults `{ 12, 16, 28, 48 }`.
+- `emptyMessage?: ReactNode` — default `'No data'`.
+- `classes?: Partial<ChartClasses>` where `ChartClasses = { root, svg, grid, axis, axisLabel, series, point, legend, legendItem, tooltip }`.
+
+LineChart extras (covers every shadcn line-chart variant via composable props):
+- `curve?: 'linear' | 'monotone' | 'step'` — default `'monotone'`. `'step'` is step-after (value holds until the next x).
+- `showPoints?: boolean` — default `true`.
+- `renderDot?: (args: { row, value, seriesKey, index, x, y, color, active }) => ReactNode` — replace the default circle with a custom SVG element per point.
+- `dotColorKey?: keyof T & string` — when set, each dot's fill comes from `row[dotColorKey]` (the line itself keeps the series color).
+- `showValues?: boolean` — default `false`. Renders a numeric label near each point.
+- `valuePosition?: 'top' | 'bottom'` — default `'top'`.
+- `renderLabel?: (args: { row, value, seriesKey, index }) => ReactNode` — custom label content. Overrides `valueFormat` for labels. Return `null` to skip.
+- `activeIndex?: number` — highlight a specific point; other points fade.
+- `onPointClick?: (args: { row, value, seriesKey, index }) => void` — fires when a dot (or the area around it) is clicked.
+
+Quick mapping from shadcn variant names to LineChart props:
+- **Default / Multiple** → no extras (multi-series via multiple keys in `config`).
+- **Linear** → `curve="linear"`.
+- **Step** → `curve="step"`.
+- **Dots** → `showPoints` (on by default).
+- **Dots Custom** → `renderDot`.
+- **Dots Colors** → `dotColorKey` (each row has a field holding its dot color; e.g. `{ ..., fill: 'var(--crk-chart-3)' }` + `dotColorKey="fill"`).
+- **Label / Label Custom** → `showValues` + `valuePosition`, or `renderLabel`.
+- **Interactive** → multiple series in `data`, but `config` passed to the chart only includes the *active* series (`config={{ [active]: fullConfig[active] }}`). Consumer renders the selector UI — tiles, prev/next navigator, or `<Dropdown>` all work. See `recipes/interactive-line-chart.tsx` for all three. `activeIndex` + `onPointClick` are optional and pertain to highlighting a row WITHIN the active series, not selecting the series.
+
+AreaChart extras (covers every shadcn area-chart variant via composable props):
+- `curve?: 'linear' | 'monotone' | 'step'` — default `'monotone'`.
+- `stacked?: boolean` — default `false`. Stacks series bottom-up in config-key order.
+- `stackOffset?: 'none' | 'expand'` — default `'none'`. `'expand'` normalizes each row to sum to 1 (percentage stack). Requires `stacked`.
+- `fillGradient?: boolean` — default `false`. Replaces flat fill with a per-series vertical linear gradient (opaque top → transparent bottom).
+- `showXAxis?: boolean` / `showYAxis?: boolean` — default `true`. Pass `false` to hide either axis.
+- `SeriesConfig.icon?: ReactNode` — if set on a series, the legend renders the icon (colored to match) in place of the swatch.
+
+Quick mapping from shadcn variant names to AreaChart props:
+- **Default / Linear / Step / Legend** → `curve` + `showLegend`.
+- **Axes** → defaults (both axes shown). Pass `showYAxis={false}` to hide.
+- **Stacked** → `stacked`.
+- **Stacked Expand** → `stacked` + `stackOffset="expand"`.
+- **Gradient** → `fillGradient`.
+- **Icons** → put an `icon` field on each `config` entry.
+- **Interactive** → for AreaChart this is a **data-range filter**, not a series toggle: all series stay visible (stacked, often `fillGradient`), and the selector swaps the slice of `data` shown (e.g. last 7d / 14d / 30d). Three selector UIs in `recipes/interactive-area-chart.tsx`: tiles, prev/next navigator, `<Dropdown>`.
+
+Example — stacked + gradient:
+```tsx
+<AreaChart
+  data={data}
+  xKey="month"
+  config={config}
+  stacked
+  fillGradient
+  showYAxis={false}
+/>
+```
+
+BarChart extras (covers every shadcn bar-chart variant via composable props):
+- `orientation?: 'vertical' | 'horizontal'` — default `'vertical'`. `'horizontal'` swaps the axes so bars extend left→right.
+- `stacked?: boolean` — default `false`. Series stack on top of each other (positive stacks up, negative stacks down). Ignored with a single series.
+- `showValues?: boolean` — default `false`. Renders a numeric label on every bar.
+- `valuePosition?: 'outside' | 'inside' | 'inside-start'` — default `'outside'`. Where the label sits relative to the bar: `'outside'` past the value end, `'inside'` inside near the value end, `'inside-start'` inside near the baseline. On vertical bars, `'inside-start'` rotates the label ±90° so it reads along the bar's length.
+- `renderLabel?: (args: { row, value, seriesKey, index }) => ReactNode` — custom label content. Overrides `valueFormat` for labels. Return `null` to skip.
+- `colorBy?: 'series' | 'index'` — default `'series'`. `'index'` picks color per row from `colors`; useful for "one color per category" charts.
+- `colors?: string[]` — palette for `colorBy='index'`. Defaults to the five `--crk-chart-N` tokens.
+- `negativeColor?: string` — override fill for bars whose value is negative.
+- `activeIndex?: number` — highlight one category index; other groups fade.
+- `onBarClick?: (args: { row, value, seriesKey, index }) => void` — fires when a bar is clicked.
+- `groupPadding?: number` — default `0.2`. Inner padding between category groups.
+- `barPadding?: number` — default `0.1`. Inner padding between grouped bars. Ignored when stacked.
+- `barRadius?: number` — default `4`. Corner radius on the bar's value end.
+
+Quick mapping from shadcn variant names to props:
+- **Default / Multiple** → no extra props (single vs. multi-series via `config`).
+- **Horizontal** → `orientation="horizontal"`.
+- **Stacked** → `stacked`.
+- **Label** → `showValues` (+ optional `valuePosition`).
+- **Label Custom** → `renderLabel` + `valuePosition="inside-start"` (typically with `orientation="horizontal"`). `renderLabel` receives the row, so return e.g. `String(row[xKey])` to draw the category name inside the bar.
+- **Mixed** → `colorBy="index"` (+ optional `colors`).
+- **Negative** → numeric values that span zero; pair with `negativeColor` for distinct below-zero fill.
+- **Active** → `activeIndex={n}`.
+- **Interactive** → multiple series in `data`, but only the *active* series is passed to the chart's `config` (`config={{ [active]: fullConfig[active] }}`). Consumer renders the selector UI — tiles, prev/next navigator, or `<Dropdown>` all work. See `recipes/interactive-bar-chart.tsx` for all three. `activeIndex` + `onBarClick` are an *orthogonal* row-highlight feature, not the series-selection mechanism.
+
+Example — LineChart:
+```tsx
+const config: ChartConfig = {
+  revenue: { label: 'Revenue', color: 'var(--crk-chart-1)' },
+  costs:   { label: 'Costs',   color: 'var(--crk-chart-2)' },
+};
+
+<LineChart
+  data={[{ month: 'Jan', revenue: 120, costs: 60 }, /* … */]}
+  xKey="month"
+  config={config}
+  yFormat={(v) => `$${v}k`}
+/>
+```
+
+Example — BarChart variants:
+```tsx
+// Horizontal
+<BarChart data={data} xKey="quarter" config={config} orientation="horizontal" />
+
+// Stacked
+<BarChart data={data} xKey="quarter" config={config} stacked />
+
+// Mixed (one color per category)
+<BarChart data={data} xKey="quarter" config={single} colorBy="index" />
+
+// Negative values with a danger color below zero
+<BarChart
+  data={deltas}
+  xKey="month"
+  config={{ delta: { label: 'Δ', color: 'var(--crk-chart-1)' } }}
+  negativeColor="var(--crk-chart-4)"
+/>
+
+// Active / interactive
+<BarChart
+  data={data}
+  xKey="quarter"
+  config={single}
+  activeIndex={active}
+  onBarClick={({ index }) => setActive(index)}
+/>
+```
+
+### PieChart
+Import: `import { PieChart } from '@overdoser/react-toolkit'`
+
+Single-ring pie / donut. One slice per row in `data`.
+
+Props:
+- `data: T[]` — one slice per row.
+- `valueKey: keyof T & string` — numeric value field.
+- `nameKey: keyof T & string` — slice label (legend, tooltip, label).
+- `colorKey?: keyof T & string` — per-row fill field (falls back to `colors`).
+- `colors?: string[]` — palette indexed by row order. Defaults to the five `--crk-chart-N` tokens.
+- `innerRadius?: number | string` — pixels or `'NN%'`. `0` = pie, `>0` = donut. @default `0`
+- `outerRadius?: number | string` — @default `'90%'`
+- `strokeWidth?: number` — separator stroke between slices. `0` = "separator-none". @default `2`
+- `strokeColor?: string` — @default `'var(--crk-color-bg)'`
+- `padAngle?: number` — degrees of visual gap between slices. @default `0`
+- `showLabels?: boolean` — render `${name} ${pct}` per slice. @default `false`
+- `valuePosition?: 'outside' | 'inside'` — label position. @default `'outside'`
+- `showLabelLines?: boolean` — draw a thin leader line from each slice edge to its outside label (slice-colored). No effect for inside labels. @default `true`
+- `renderLabel?: (args: { row, value, fraction, index }) => ReactNode` — custom label content. Return `null` to skip.
+- `centerLabel?: ReactNode` — content rendered at the centre (typical donut summary).
+- `activeIndex?: number` — pull the slice outward; other slices fade.
+- `onSliceClick?: (args: { row, value, index }) => void`
+- `showLegend?: boolean` — @default `true`
+- `showTooltip?: boolean` — @default `true`
+- `valueFormat?: (v: number) => string`
+- `renderTooltip?: (row: T) => ReactNode`
+- `aspectRatio?: number` — @default `1` (square)
+- `height?: number` — fixed pixel height.
+- `emptyMessage?: ReactNode` — @default `'No data'`
+- `className`, `style`, `classes?: Partial<ChartClasses>`
+
+Quick mapping from shadcn variant names to PieChart props:
+- **Simple / Donut** → `innerRadius` (0 → pie, > 0 → donut).
+- **Legend** → `showLegend` (on by default).
+- **Separator None** → `strokeWidth={0}`.
+- **Label** → `showLabels` (default content: `${name} ${pct}`). Outside labels get a slice-colored leader line by default; disable with `showLabelLines={false}`.
+- **Label Custom** → `renderLabel` (with the leader line still drawn).
+- **Label List** → `valuePosition="inside"` + `renderLabel={({ row }) => String(row[nameKey])}`. Renders the slice name *on the colored surface* of each slice. Inside-position labels are styled with the `--crk-chart-label-inside` token (white by default) for contrast.
+- **Donut Text** → `innerRadius` + `centerLabel`.
+- **Donut Active** → `activeIndex={n}`.
+- **Interactive** → metric/period filter — see `recipes/interactive-pie-chart.tsx`.
+- **Stacked (nested rings)** → not currently supported.
+
+Example — donut with centre summary:
+```tsx
+<PieChart
+  data={browsers}
+  nameKey="browser"
+  valueKey="visitors"
+  colorKey="fill"
+  innerRadius="62%"
+  centerLabel={<><strong>835</strong><div>Visitors</div></>}
+/>
+```
+
+### RadarChart
+Import: `import { RadarChart } from '@overdoser/react-toolkit'`
+
+Multi-series spider / radar chart. One vertex per row in `data`, one polygon per key in `config`.
+
+Props:
+- `data: T[]` — one vertex per row.
+- `axisKey: keyof T & string` — row field providing the axis label at that vertex.
+- `config: ChartConfig` — series keyed by data-field name.
+- `gridType?: 'polygon' | 'circle'` — concentric ring shape. @default `'polygon'`
+- `showGrid?: boolean` — concentric grid rings. @default `true`
+- `showRadialLines?: boolean` — spokes from center to each vertex. @default `true`
+- `showAxisLabels?: boolean` — vertex labels around the outside. @default `true`
+- `showRadiusAxis?: boolean` — radial tick labels along the top spoke. @default `false`
+- `levels?: number` — approximate ring count. @default `5`
+- `showPoints?: boolean` — dots at each series vertex. @default `true`
+- `fillOpacity?: number` — series fill opacity. `0` = lines only. @default `0.4`
+- `strokeWidth?: number` — series outline stroke width. @default `2`
+- `renderAxisLabel?: (args: { row, index, angle, x, y, textAnchor }) => ReactNode` — custom axis-label rendering. Return `null` to skip.
+- `axisFormat?: (label: string) => string` — format the default axis label.
+- `valueFormat?: (v: number) => string` — used by the default tooltip and the radius axis labels.
+- `renderTooltip?: (row: T) => ReactNode`
+- `showLegend?: boolean` — @default `true`
+- `showTooltip?: boolean` — @default `true`
+- `aspectRatio?: number` — @default `1` (square)
+- `height?: number`
+- `emptyMessage?: ReactNode` — @default `'No data'`
+- `className`, `style`, `classes?: Partial<ChartClasses>`
+
+Quick mapping from shadcn variant names to RadarChart props:
+- **Default / Multiple / Legend** → multi-series via multiple keys in `config`.
+- **Dots** → `showPoints` (on by default).
+- **Lines Only** → `fillOpacity={0}`.
+- **Grid Circle / Grid Circle Fill** → `gridType="circle"` (+ `fillOpacity` for "fill").
+- **Grid Circle No Lines** → `gridType="circle"` + `showRadialLines={false}`.
+- **Grid Fill** → defaults (filled polygon grid).
+- **Grid Custom** → override the grid via the `classes={{ grid: 'my-grid' }}` prop or theme tokens.
+- **Grid None** → `showGrid={false}` (+ usually `showRadialLines={false}`).
+- **Icons** → set `icon` on each `config` entry.
+- **Label Custom** → `renderAxisLabel`.
+- **Radius** → `showRadiusAxis`.
+
+Example — dual-series radar with circular grid:
+```tsx
+<RadarChart
+  data={data}
+  axisKey="month"
+  config={config}
+  gridType="circle"
+/>
+```
+
+### TradingChart
+Import: `import { TradingChart, type Datafeed, type Bar, type Resolution, type IndicatorConfig } from '@overdoser/react-toolkit'`
+
+Canvas-rendered, TradingView-style chart for OHLCV data. Different surface from the SVG charts: it owns its own data lifecycle via a `Datafeed` adapter and supports pan, zoom, crosshair, and a small built-in indicator library.
+
+Props:
+- `datafeed: Datafeed` — required. Plug-in adapter (see contract below).
+- `symbol: string` — required.
+- `resolution: Resolution` — bar size (the "tick interval"). TradingView-style: numeric strings are minutes (`'1'`, `'5'`, `'60'`); `'D'`, `'W'`, `'M'` for day/week/month; any other string passes through.
+- `period?: Period` — visible time-range window (the "chart interval"): `'1D' | '5D' | '1M' | '3M' | '6M' | '1Y' | '5Y'` or any `<n><unit>` string (`'30d'`, `'48h'`, `'2y'`). When set, the chart fetches bars covering the period and the initial visible window spans all of them. Overrides `initialLookback`. Note: the chart does NOT auto-adjust `resolution` for you — pair with `suggestResolutionForPeriod()` / `suggestPeriodForResolution()` if you want them coupled.
+- `seriesType?: 'candle' | 'bar' | 'line' | 'area'` — main pane style. @default `'candle'`. `'bar'` = OHLC bars (vertical high-low line, left tick at open, right tick at close).
+- `timezone?: Timezone` / `defaultTimezone?: Timezone` / `onTimezoneChange?: (tz) => void` — controlled / uncontrolled / notification trio for the crosshair time label. `Timezone = 'local' | 'utc' | IANA-name`. Default `'local'`. Local mode renders `YYYY-MM-DD HH:MM:SS +HH:MM`, UTC renders `… UTC`, IANA strings render `… EST` (short timezone via `Intl.DateTimeFormat`).
+- `showConfigPanel?: boolean` — show the gear button in the chart header + a Popover with a Timezone selector. @default `true`. Hide it if you want to manage timezone purely externally.
+- `indicators?: IndicatorConfig[]` — see "Indicators" below.
+- `precision?: number` — decimal places for price labels and tooltips. @default `2`
+- `initialLookback?: number` — historical bars fetched on mount when `period` is not set. @default `500`
+- `height?: number` — pixel height. @default `420`
+- `upColor?: string` / `downColor?: string` — candle and volume colors.
+- `lineColor?: string` — for `line` / `area` series.
+- `onCrosshair?: (info: CrosshairInfo | null) => void`
+- `onVisibleRangeChange?: (range, bars) => void`
+- `className`, `style`
+
+Datafeed contract:
+```ts
+interface Bar { time: number /* unix seconds */; open: number; high: number; low: number; close: number; volume?: number }
+
+interface Datafeed {
+  getBars(args: { symbol; resolution; from; to; countBack? }): Promise<Bar[]>;  // ascending by time
+  subscribeBars(args: { symbol; resolution; onTick(bar: Bar): void }): SubscriptionHandle;
+  unsubscribeBars(handle: SubscriptionHandle): void;
+}
+```
+- `from`/`to` are unix seconds (TV convention).
+- A tick whose `time` equals the previous bar's `time` updates the in-progress bar; otherwise the chart appends a new bar.
+- Pan-left past the loaded window automatically fires another `getBars` for older history.
+
+Indicators (`indicators?: IndicatorConfig[]`):
+- `{ type: 'sma', period, color? }` — overlay on the main pane.
+- `{ type: 'ema', period, color? }` — overlay on the main pane.
+- `{ type: 'bollinger', period, stdDev?, color?, fillOpacity? }` — overlay, filled band between upper/lower.
+- `{ type: 'rsi', period?, color?, overbought?, oversold? }` — its own sub-pane below the main pane.
+- `{ type: 'volume', upColor?, downColor? }` — sub-pane histogram colored by candle direction.
+
+Pure indicator functions are also exported (`sma`, `ema`, `bollinger`, `rsi`, `volumeSeries`) for custom rendering or analysis outside the chart.
+
+Period / resolution coupling helpers (exported):
+- `periodToSeconds(period: Period): number` — total seconds in a typed or `<n><unit>` period.
+- `suggestResolutionForPeriod(period): Resolution` — opinionated mapping targeting ~200–500 visible bars.
+- `suggestPeriodForResolution(resolution): Period` — inverse of the above.
+
+Typical UI: two coupled dropdowns. Changing the period dropdown calls `suggestResolutionForPeriod()` on its new value to keep the bar count reasonable; changing the resolution dropdown calls `suggestPeriodForResolution()` on its new value.
+
+Interactions:
+- Drag = pan.
+- Wheel = zoom (anchored on cursor).
+- ←/→ keys = nudge pan.
+- Hover = full crosshair (dashed horizontal + vertical lines) with a **price badge** on the right edge and a **time badge** under the X axis showing `YYYY-MM-DD HH:MM:SS <tz>` at the cursor's snapped bar (timezone is configurable via the gear panel or props). `onCrosshair` callback fires.
+
+Out of scope (v1):
+- Drawing tools (trend lines, fib, shapes).
+- Custom indicator settings dialog.
+- Touch gestures (pointer events work on touch but no pinch-zoom).
+- Multi-symbol comparison overlays.
+- Persistence / save-restore state.
+
+Example — full indicator stack with a custom datafeed:
+```tsx
+<TradingChart
+  datafeed={myDatafeed}
+  symbol="AAPL"
+  resolution="60"
+  indicators={[
+    { type: 'ema', period: 12, color: 'var(--crk-chart-2)' },
+    { type: 'ema', period: 26, color: 'var(--crk-chart-3)' },
+    { type: 'bollinger', period: 20, stdDev: 2 },
+    { type: 'rsi', period: 14 },
+    { type: 'volume' },
+  ]}
+  height={560}
+/>
+```
+
+### Sparkline
+Tiny inline trend line — fixed pixel width/height, no axes/legend/tooltip.
+
+Props:
+- `data: number[]` — numeric series, left-to-right.
+- `width?: number` — default `80`.
+- `height?: number` — default `24`.
+- `color?: string` — default `'var(--crk-chart-1)'`.
+- `strokeWidth?: number` — default `1.5`.
+- `curve?: 'linear' | 'monotone'` — default `'monotone'`.
+- `fill?: boolean` — default `false`. Renders a low-opacity area under the line.
+- `showLastPoint?: boolean` — default `false`. Draws a dot at the rightmost point.
+- `aria-label?: string`
+- Forwards ref to `SVGSVGElement`.
+
+Example:
+```tsx
+<Sparkline data={[1, 3, 2, 4, 3, 5, 4]} fill showLastPoint />
+```
+
 ## Hooks
 
 ### useClickOutside