@rinzai/zen 0.13.0 → 0.15.0

package/dist/docs/radio-group.md

@@ -0,0 +1,86 @@
+# Radio Group
+
+Choose one of a list, each option with a label and a description; native radios, so arrow keys work.
+
+```tsx
+import { RadioGroup, Radio } from '@rinzai/zen';
+```
+
+## Examples
+
+### Default
+
+```tsx
+import { Radio, RadioGroup } from '@rinzai/zen';
+import { useState } from 'react';
+
+/** Arrow keys move between options and pick them, as for any radio group. */
+export default function Default() {
+    const [repay, setRepay] = useState<'emi' | 'tenure'>('emi');
+    return (
+        <RadioGroup label="After a prepayment" value={repay} onValueChange={setRepay}>
+            <Radio value="emi" description="Keep the end date; pay less each month.">
+                Lower the EMI
+            </Radio>
+            <Radio value="tenure" description="Keep the EMI; finish sooner and save more interest.">
+                Shorten the tenure
+            </Radio>
+        </RadioGroup>
+    );
+}
+```
+
+### Horizontal
+
+```tsx
+import { Radio, RadioGroup } from '@rinzai/zen';
+import { useState } from 'react';
+
+/** In a row, with one option disabled. */
+export default function Horizontal() {
+    const [every, setEvery] = useState<string | null>(null);
+    return (
+        <RadioGroup label="Repeat" value={every} onValueChange={setEvery} orientation="horizontal">
+            <Radio value="week">Weekly</Radio>
+            <Radio value="month">Monthly</Radio>
+            <Radio value="year">Yearly</Radio>
+            <Radio value="custom" disabled>
+                Custom
+            </Radio>
+        </RadioGroup>
+    );
+}
+```
+
+## API reference
+
+### RadioGroup
+
+Choose one of a list: native radios underneath, so arrow keys move and pick
+within the group, and forms work as usual. Fill it with Radio. For a few
+short options side by side use Segmented; for options that show themselves,
+RadioCards.
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `children` (required) | `ReactNode` |  | The Radios. |
+| `className` | `string` |  | Classes for the options' container. |
+| `defaultValue` | `string \| null` | `null` | The first chosen option, when the group keeps its own. |
+| `disabled` | `boolean` | `false` |  |
+| `label` | `ReactNode` |  | Shown above the options, naming the group. Without it, give the group an aria-label. |
+| `name` | `string` |  | Form field name; defaults to a generated one. |
+| `onValueChange` | `((value: V) => void)` |  |  |
+| `orientation` | `"horizontal" \| "vertical"` | `vertical` | Options in a column (default) or wrapping in a row. |
+| `value` | `string \| null` |  | The chosen option when you keep it, or null for none yet. |
+
+### Radio
+
+One option: a round radio that fills with a glowing dot when chosen, its label, and an optional description.
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `children` (required) | `ReactNode` |  | The label. |
+| `value` (required) | `string` |  |  |
+| `className` | `string` |  |  |
+| `description` | `ReactNode` |  | A muted line under the label. |
+| `disabled` | `boolean` |  | Can't be chosen (and the arrow keys skip it). |

package/dist/docs/range-slider.md

@@ -0,0 +1,64 @@
+# Range Slider
+
+Two thumbs on one track, for a span like an amount from $50 to $500.
+
+```tsx
+import { RangeSlider } from '@rinzai/zen';
+```
+
+## Examples
+
+### Default
+
+```tsx
+import { RangeSlider } from '@rinzai/zen';
+import { useState } from 'react';
+
+/** Entries between two amounts. */
+export default function Default() {
+    const [span, setSpan] = useState<[number, number]>([50, 500]);
+    return (
+        <div className="flex w-full max-w-sm flex-col gap-3">
+            <div className="flex justify-between text-sm">
+                <span className="font-medium">Amount</span>
+                <span className="text-muted-foreground tabular-nums">
+                    ${span[0]} – ${span[1]}
+                </span>
+            </div>
+            <RangeSlider
+                label="Amount"
+                min={0}
+                max={1000}
+                step={10}
+                value={span}
+                onValueChange={setSpan}
+                valueText={(v) => `$${v}`}
+            />
+        </div>
+    );
+}
+```
+
+## API reference
+
+### RangeSlider
+
+Two thumbs on one track, for a span such as an amount from $50 to $500:
+two native range inputs (keyboard, forms and screen readers work as on
+Slider), the span between them filled. The thumbs can meet but not cross.
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `label` (required) | `string` |  | Accessible name of the pair, e.g. "Amount". |
+| `className` | `string` |  |  |
+| `defaultValue` | `readonly [number, number]` |  | The first span, when the slider keeps its own (default the whole range). |
+| `disabled` | `boolean` |  |  |
+| `max` | `number` | `100` |  |
+| `min` | `number` | `0` |  |
+| `name` | `string` |  | Form field name: low and high are submitted under it, in that order. |
+| `onValueChange` | `((value: [number, number]) => void)` |  | While dragging (every step). |
+| `onValueCommit` | `((value: [number, number]) => void)` |  | Once the user lets go: the moment to save or filter. |
+| `step` | `number` | `1` |  |
+| `thumbLabels` | `readonly [string, string]` |  | Each thumb's name (default "Minimum", "Maximum"). |
+| `value` | `readonly [number, number]` |  | The span, low then high, when you keep it. |
+| `valueText` | `((value: number) => string)` |  | Spoken value of a thumb, e.g. (v) => `$${v}`. |

package/dist/docs/repeat-picker.md

@@ -0,0 +1,44 @@
+# Repeat Picker
+
+How often something recurs, like a bill, said in words, with the next dates it falls on.
+
+```tsx
+import { RepeatPicker } from '@rinzai/zen';
+```
+
+## Examples
+
+### Default
+
+```tsx
+import { type Repeat, RepeatPicker } from '@rinzai/zen';
+import { useState } from 'react';
+
+/** Rent: monthly on the 1st, from November. */
+export default function Default() {
+    const [repeat, setRepeat] = useState<Repeat>({ every: 1, unit: 'month', day: 1 });
+    return (
+        <RepeatPicker value={repeat} onValueChange={setRepeat} locale="en-US" start="2026-11-01" className="max-w-sm" />
+    );
+}
+```
+
+## API reference
+
+### RepeatPicker
+
+How often something recurs, e.g. a bill: every n days, weeks, months or
+years, on chosen weekdays or a day of the month. Says what it means in
+words, and with a `start` date, the next few dates it falls on.
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `className` | `string` |  |  |
+| `defaultValue` | `Repeat` | `{ every: 1, unit: 'month' }` | The first rule, when the picker keeps its own. Every month by default. |
+| `label` | `string` |  | The group's name for screen readers (default "Repeats"). |
+| `locale` | `string` |  | For weekday and date names, and the week's first day. Defaults to the LocaleProvider's. |
+| `name` | `string` |  | Form field name: the rule is submitted as JSON. |
+| `onValueChange` | `((value: Repeat) => void)` |  |  |
+| `start` | `string` |  | When it starts: its weekday and day of the month are the defaults, and the next dates are shown. |
+| `value` | `Repeat` |  | The rule, when you keep it. |
+| `weekStartsOn` | `number` |  | 0 for Sunday … 6. Defaults to the locale's. |

package/dist/docs/resizable.md

@@ -0,0 +1,107 @@
+# Resizable
+
+Panels with handles between them to drag, or to move with the arrow keys, within limits you set; groups nest, and the layout is reported to keep.
+
+```tsx
+import { ResizablePanelGroup, ResizablePanel, ResizableHandle } from '@rinzai/zen';
+```
+
+## Examples
+
+### Default
+
+```tsx
+import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from '@rinzai/zen';
+
+/** A sidebar beside the main view, and a detail pane under it: drag a line, or focus it and use the arrow keys. */
+export default function Default() {
+    return (
+        <ResizablePanelGroup className="border-tint/10 h-72 w-full max-w-2xl rounded-xl border">
+            <ResizablePanel defaultSize={30} minSize={20} maxSize={50}>
+                <div className="flex h-full flex-col gap-1 p-4">
+                    <span className="text-muted-foreground mb-2 text-xs font-medium tracking-wide uppercase">
+                        Accounts
+                    </span>
+                    <span className="text-sm">Everyday</span>
+                    <span className="text-sm">Savings</span>
+                    <span className="text-sm">Credit card</span>
+                </div>
+            </ResizablePanel>
+            <ResizableHandle aria-label="Resize accounts" />
+            <ResizablePanel>
+                <ResizablePanelGroup orientation="vertical">
+                    <ResizablePanel defaultSize={65} minSize={30}>
+                        <div className="flex h-full items-center justify-center text-sm">Transactions</div>
+                    </ResizablePanel>
+                    <ResizableHandle aria-label="Resize details" />
+                    <ResizablePanel minSize={20}>
+                        <div className="text-muted-foreground flex h-full items-center justify-center text-sm">
+                            Details
+                        </div>
+                    </ResizablePanel>
+                </ResizablePanelGroup>
+            </ResizablePanel>
+        </ResizablePanelGroup>
+    );
+}
+```
+
+### Stacked
+
+```tsx
+import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from '@rinzai/zen';
+
+/** Three panels stacked, each with a smallest size: drag either line, or focus one and use ↑↓. */
+export default function Stacked() {
+    return (
+        <ResizablePanelGroup orientation="vertical" className="border-tint/10 h-80 w-full max-w-md rounded-xl border">
+            <ResizablePanel defaultSize={25} minSize={15}>
+                <div className="flex h-full flex-col justify-center gap-0.5 px-4">
+                    <span className="text-muted-foreground text-xs">Balance</span>
+                    <span className="text-lg font-semibold tabular-nums">$12,480</span>
+                </div>
+            </ResizablePanel>
+            <ResizableHandle aria-label="Resize balance" />
+            <ResizablePanel defaultSize={45} minSize={20}>
+                <div className="text-muted-foreground flex h-full items-center justify-center text-sm">This month</div>
+            </ResizablePanel>
+            <ResizableHandle aria-label="Resize this month" />
+            <ResizablePanel minSize={15}>
+                <div className="text-muted-foreground flex h-full items-center justify-center text-sm">Upcoming</div>
+            </ResizablePanel>
+        </ResizablePanelGroup>
+    );
+}
+```
+
+## API reference
+
+### ResizablePanelGroup
+
+Panels side by side (or stacked, `orientation="vertical"`) with handles
+between them to drag, or to focus and move with the arrow keys. Sizes are
+percentages of the group; `onLayout` reports them all after each change,
+e.g. to keep for next time as the panels' `defaultSize`. Groups nest.
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `onLayout` | `((sizes: number[]) => void)` |  | Every panel's size, in percent and in order, after each change. |
+| `orientation` | `"horizontal" \| "vertical"` | `horizontal` | Side by side (default), or stacked. |
+
+### ResizablePanel
+
+One panel: `defaultSize` is a percentage of the group (those without one share what's left); `minSize` and `maxSize` bound it.
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `defaultSize` | `number` |  | Its share of the group, in percent. |
+| `maxSize` | `number` | `100` |  |
+| `minSize` | `number` | `0` |  |
+
+### ResizableHandle
+
+The boundary between two panels: a hairline that lights up while it's
+dragged, hovered or focused, with a wider grip than it looks. Arrow keys move
+it, Home and End take the panel before it to its smallest and largest.
+
+No props of its own; it accepts the props of the element it renders.

package/dist/docs/seek-bar.md

@@ -0,0 +1,68 @@
+# Seek Bar
+
+Where playback is in a track, and the way to move it: played and loaded on one track, between the time played and the length.
+
+```tsx
+import { SeekBar, formatDuration } from '@rinzai/zen';
+```
+
+## Examples
+
+### Default
+
+```tsx
+import { Button, SeekBar, useMediaPlayer } from '@rinzai/zen';
+
+import { useDemoTrack } from '../../player-bar/examples/demo-track';
+// Icons from Heroicons (https://heroicons.com): Pause (pause), Play (play).
+
+/** Filled to the time played, shaded on to what's loaded. Drag it: the track plays on, and seeks when you let go. */
+export default function Default() {
+    const src = useDemoTrack();
+    const [audioRef, player] = useMediaPlayer();
+    return (
+        <div className="flex w-96 items-center gap-3">
+            <audio ref={audioRef} src={src} preload="metadata" />
+            <Button
+                size="icon-sm"
+                className="rounded-full"
+                aria-label={player.playing ? 'Pause' : 'Play'}
+                disabled={!src}
+                onClick={() => player.toggle()}
+            >
+                {player.playing ? <Pause className="size-4" /> : <Play className="size-4" />}
+            </Button>
+            <SeekBar
+                className="flex-1"
+                currentTime={player.currentTime}
+                playing={player.playing && !player.waiting}
+                playbackRate={player.playbackRate}
+                duration={player.duration}
+                buffered={player.buffered}
+                onSeek={player.seek}
+            />
+        </div>
+    );
+}
+```
+
+## API reference
+
+### SeekBar
+
+Where playback is in a track, and the way to move it: filled up to the
+current time, shaded on to what's loaded, between the time played and the
+length. While playing it glides, run by the browser's compositor between
+the player's time updates. While dragging, the time follows the thumb and
+the track keeps playing; letting go seeks. The arrow keys seek 5 seconds.
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `currentTime` (required) | `number` |  | Seconds played. |
+| `duration` (required) | `number` |  | Seconds long; 0 while unknown (the bar is disabled). |
+| `onSeek` (required) | `(time: number) => void` |  | When the user lets go, or steps with the keys: the time to play from. |
+| `buffered` | `number` | `0` | Seconds loaded, shaded on the track past the time played. |
+| `playbackRate` | `number` | `1` | How fast it moves on while playing (default 1). |
+| `playing` | `boolean` | `false` | While the time is running (playing, not waiting for data): the bar glides on between time updates. |
+| `thumbColor` | `string` |  | CSS colour for the thumb (default: the accent). |
+| `valueText` | `((value: number) => string)` |  | Spoken value, e.g. (v) => `Hue ${v} degrees`. |

package/dist/docs/segmented.md

@@ -0,0 +1,89 @@
+# Segmented
+
+A pill row for a few mutually exclusive options.
+
+```tsx
+import { Segmented, SegmentedItem } from '@rinzai/zen';
+```
+
+## Examples
+
+### Default
+
+```tsx
+import { Segmented, SegmentedItem } from '@rinzai/zen';
+import { useState } from 'react';
+
+export default function Default() {
+    const [glow, setGlow] = useState<'off' | 'soft' | 'bright'>('soft');
+    return (
+        <Segmented label="Glow" value={glow} onValueChange={setGlow}>
+            <SegmentedItem value="off">Off</SegmentedItem>
+            <SegmentedItem value="soft">Soft</SegmentedItem>
+            <SegmentedItem value="bright">Bright</SegmentedItem>
+        </Segmented>
+    );
+}
+```
+
+### With icons
+
+```tsx
+import { Segmented, SegmentedItem } from '@rinzai/zen';
+import { useState } from 'react';
+// Icons from Heroicons (https://heroicons.com): ChartBarIcon (chart-bar), ListBullet (list-bullet), Squares (squares-2x2).
+
+/** SegmentedItem holds anything (here an icon and text), and an option can be disabled. */
+export default function WithIcons() {
+    const [view, setView] = useState('list');
+    return (
+        <Segmented label="View" value={view} onValueChange={setView}>
+            <SegmentedItem value="list">
+                <span className="flex items-center gap-1.5">
+                    <ListBullet className="size-4" /> List
+                </span>
+            </SegmentedItem>
+            <SegmentedItem value="grid">
+                <span className="flex items-center gap-1.5">
+                    <Squares className="size-4" /> Grid
+                </span>
+            </SegmentedItem>
+            <SegmentedItem value="chart" disabled>
+                <span className="flex items-center gap-1.5">
+                    <ChartBarIcon className="size-4" /> Chart
+                </span>
+            </SegmentedItem>
+        </Segmented>
+    );
+}
+```
+
+## API reference
+
+### Segmented
+
+A small set of mutually exclusive options, shown as a pill row. Native radio
+inputs underneath, so arrow keys and forms work as for any radio group. The
+selection slides between options, like Pills. Fill it with
+SegmentedItem (any content: text, icons, a disabled option).
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `children` (required) | `ReactNode` |  | The SegmentedItems. |
+| `className` | `string` |  |  |
+| `defaultValue` | `string` |  | The first chosen option, when the control keeps its own. |
+| `label` | `ReactNode` |  | Shown above the options, naming the group. Without it, give the group an aria-label or aria-labelledby. |
+| `name` | `string` |  | Form field name; defaults to a generated one. |
+| `onValueChange` | `((value: V) => void)` |  |  |
+| `value` | `string` |  | The chosen option, when you keep it. |
+
+### SegmentedItem
+
+One option of a Segmented: a native radio covering whatever you put inside.
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `children` (required) | `ReactNode` |  | What the option shows: text, an icon, both. |
+| `value` (required) | `string` |  |  |
+| `className` | `string` |  |  |
+| `disabled` | `boolean` |  | Skipped by the arrow keys and can't be chosen. |

package/dist/docs/select.md

@@ -0,0 +1,148 @@
+# Select
+
+Pick one value from a short list, fully keyboard-driven. For long or searchable lists, use Combobox.
+
+```tsx
+import { Select, SelectItem, SelectGroup, SelectSeparator } from '@rinzai/zen';
+```
+
+## Examples
+
+### Default
+
+```tsx
+import { Select, SelectItem } from '@rinzai/zen';
+import { useState } from 'react';
+
+const CATEGORIES = ['Groceries', 'Rent', 'Transport', 'Dining out', 'Subscriptions', 'Health', 'Travel'];
+
+/** Keyboard: arrows, Home/End, type a letter to jump, Enter to choose, Escape to close. */
+export default function Default() {
+    const [category, setCategory] = useState<string | null>('rent');
+    return (
+        <Select aria-label="Category" value={category} onValueChange={setCategory} className="w-56">
+            {CATEGORIES.map((label) => (
+                <SelectItem key={label} value={label.toLowerCase().replace(/\s+/g, '-')}>
+                    {label}
+                </SelectItem>
+            ))}
+        </Select>
+    );
+}
+```
+
+### Custom options
+
+```tsx
+import { currencySymbol, Select, SelectItem } from '@rinzai/zen';
+import { useState } from 'react';
+
+const CURRENCIES = [
+    { value: 'INR', label: 'Indian rupee' },
+    { value: 'USD', label: 'US dollar' },
+    { value: 'EUR', label: 'Euro' },
+    { value: 'JPY', label: 'Japanese yen', disabled: true },
+];
+
+/** An item can show anything; its `label` is what the field shows and typing matches. Disabled items are skipped by the keyboard. */
+export default function CustomOptions() {
+    const [currency, setCurrency] = useState<string | null>(null);
+    return (
+        <Select
+            aria-label="Currency"
+            placeholder="Choose a currency"
+            value={currency}
+            onValueChange={setCurrency}
+            className="w-64"
+        >
+            {CURRENCIES.map((c) => (
+                <SelectItem key={c.value} value={c.value} label={c.label} disabled={c.disabled}>
+                    <span className="flex items-center justify-between gap-3">
+                        {c.label}
+                        <span className="text-muted-foreground tabular-nums">
+                            {c.value} {currencySymbol(c.value, 'en')}
+                        </span>
+                    </span>
+                </SelectItem>
+            ))}
+        </Select>
+    );
+}
+```
+
+### Groups
+
+```tsx
+import { Select, SelectGroup, SelectItem, SelectSeparator } from '@rinzai/zen';
+import { useState } from 'react';
+
+/** SelectItem children, organised with SelectGroup and SelectSeparator; the keyboard skips the disabled one. */
+export default function Groups() {
+    const [category, setCategory] = useState<string | null>('groceries');
+    return (
+        <Select aria-label="Category" value={category} onValueChange={setCategory} className="w-64">
+            <SelectGroup label="Essentials">
+                <SelectItem value="rent">Rent</SelectItem>
+                <SelectItem value="groceries">Groceries</SelectItem>
+                <SelectItem value="transport">Transport</SelectItem>
+            </SelectGroup>
+            <SelectSeparator />
+            <SelectGroup label="Lifestyle">
+                <SelectItem value="dining">Dining out</SelectItem>
+                <SelectItem value="travel" disabled>
+                    Travel (over budget)
+                </SelectItem>
+            </SelectGroup>
+        </Select>
+    );
+}
+```
+
+## API reference
+
+### Select
+
+Pick one value from a short list: a field-styled button that opens a list
+below it. Keyboard: arrows, Home/End, type to jump, Enter to choose, Escape
+to close. Fill it with SelectItem, organised with SelectGroup and
+SelectSeparator. For long or searchable lists, use Combobox.
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `children` (required) | `ReactNode` |  | SelectItem, SelectGroup and SelectSeparator. |
+| `className` | `string` |  | Classes for the trigger (e.g. a width, instead of the default full width). |
+| `defaultValue` | `string \| null` | `null` | The first value, when the select keeps its own. |
+| `disabled` | `boolean` | `false` |  |
+| `id` | `string` |  |  |
+| `listClassName` | `string` |  | Classes for the popup list. |
+| `name` | `string` |  | Form field name: adds a hidden input with the value. |
+| `onValueChange` | `((value: V) => void)` |  |  |
+| `placeholder` | `string` |  | Shown while nothing is chosen. |
+| `size` | `"default" \| "lg" \| "sm"` | `default` | Height, matching Button's: sm (32px), default (40px) or lg (44px). |
+| `value` | `string \| null` |  | The chosen value, when you keep it; null for none. |
+
+### SelectItem
+
+One choice in a Select. Its `label` (or its text, when that's all it holds)
+shows in the field once chosen and is matched when typing to jump.
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `value` (required) | `string` |  |  |
+| `className` | `string` |  |  |
+| `disabled` | `boolean` |  |  |
+| `label` | `string` |  | Text for the field and for typing to jump (defaults to the item's text). |
+
+### SelectGroup
+
+A labelled group of SelectItems.
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `label` (required) | `ReactNode` |  |  |
+
+### SelectSeparator
+
+A hairline between items or groups.
+
+No props of its own; it accepts the props of the element it renders.

package/dist/docs/separator.md

@@ -0,0 +1,76 @@
+# Separator
+
+A hairline between groups of content, across or upright.
+
+```tsx
+import { Separator } from '@rinzai/zen';
+```
+
+## Examples
+
+### Default
+
+```tsx
+import { Separator } from '@rinzai/zen';
+
+/** Across between sections, and upright between items in a row. */
+export default function Default() {
+    return (
+        <div className="flex w-full max-w-xs flex-col gap-3 text-sm">
+            <div>
+                <p className="mt-0! font-medium">September 2026</p>
+                <p className="text-muted-foreground mt-0!">Budgets, entries and goals</p>
+            </div>
+            <Separator />
+            <div className="text-muted-foreground flex h-5 items-center gap-3">
+                <span>Spent $2,742</span>
+                <Separator orientation="vertical" />
+                <span>Left $1,258</span>
+                <Separator orientation="vertical" />
+                <span>12 entries</span>
+            </div>
+        </div>
+    );
+}
+```
+
+### Stats
+
+```tsx
+import { Card, Separator } from '@rinzai/zen';
+
+/** Upright between figures in a card: it takes the row's height, so it spans each label and value. */
+export default function Stats() {
+    return (
+        <Card className="flex w-full max-w-md items-stretch justify-between gap-4 py-4">
+            {[
+                ['Income', '$6,200'],
+                ['Spent', '$4,180'],
+                ['Saved', '$2,020'],
+            ].map(([label, value], i) => (
+                <div key={label} className="contents">
+                    {i > 0 && <Separator orientation="vertical" decorative />}
+                    <div className="flex flex-1 flex-col gap-1">
+                        <span className="text-muted-foreground text-xs">{label}</span>
+                        <span className="text-lg font-semibold tabular-nums">{value}</span>
+                    </div>
+                </div>
+            ))}
+        </Card>
+    );
+}
+```
+
+## API reference
+
+### Separator
+
+A hairline between groups of content, across (the default) or upright
+(`orientation="vertical"`, e.g. between toolbar buttons; it takes its
+container's height). Screen readers hear it only when it divides something
+meaningful: pass `decorative` for one that's just visual.
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `decorative` | `boolean` |  | Only visual: hidden from screen readers. |
+| `orientation` | `"horizontal" \| "vertical"` | `horizontal` |  |