@sableui/react 0.9.0 → 0.10.0

package/llms/components/empty-state.md

@@ -12,7 +12,7 @@ Use EmptyState when a content area has no items, no search results, or no first-
 
 ### Best practices
 
-- Do: Explain what is empty in plain language, such as "No posts yet" or "No matching collectors".
+- Do: Explain what is empty in plain language, such as "No posts yet" or "No matching customers".
 - Do: Offer one next step when the user can recover, create, clear filters, or start setup.
 - Do: Keep the icon decorative and make the title carry the meaning.
 - Do: For a search or filter result, name the query back to the user and offer the way out, such as "No results for 'quarterly'" with a Clear filters action. An empty result that does not say what was searched leaves the user unsure whether the query or the data was wrong.
@@ -85,7 +85,7 @@ import { Button, EmptyState, Icon } from "@sableui/react"
 ```tsx
 import { Button, EmptyState, Icon, Row } from "@sableui/react"
 
-<EmptyState surface="card" icon={<Icon name="sparkles" />} title="Start your collection" description="Create a first edition, import an existing drop, or invite collaborators." action={<Row gap={1}><Button>Create edition</Button><Button variant="ghost">Import</Button></Row>} />
+<EmptyState surface="card" icon={<Icon name="sparkles" />} title="Start your first project" description="Create a project, import one from a file, or invite collaborators." action={<Row gap={1}><Button>Create project</Button><Button variant="ghost">Import</Button></Row>} />
 ```
 
 ### Page-level error
@@ -101,7 +101,7 @@ import { Button, EmptyState } from "@sableui/react"
 ```tsx
 import { Button, EmptyState } from "@sableui/react"
 
-<EmptyState tone="destructive" surface="card" title="Could not load this edition" description="Check your connection and try again." action={<Button variant="secondary">Retry</Button>} />
+<EmptyState tone="destructive" surface="card" title="Could not load this project" description="Check your connection and try again." action={<Button variant="secondary">Retry</Button>} />
 ```
 
 ### Empty table body
@@ -109,5 +109,5 @@ import { Button, EmptyState } from "@sableui/react"
 ```tsx
 import { DataTable, EmptyState } from "@sableui/react"
 
-<DataTable data={[]} columns={[{ key: "name", header: "Collector" }, { key: "status", header: "Status" }]} empty={<EmptyState title="No collectors yet" description="Collectors appear here after the first mint." />} />
+<DataTable data={[]} columns={[{ key: "name", header: "Customer" }, { key: "status", header: "Status" }]} empty={<EmptyState title="No customers yet" description="Customers appear here after the first order." />} />
 ```

package/llms/components/gradient-art.md

@@ -24,7 +24,7 @@ Use GradientArt where a real image belongs but none exists yet, or where the ima
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
 | variant | "mesh" \| "grain" | "mesh" | mesh: soft spots of colour pulled together by gentle waves. grain: glowing light over deep corners with a printed texture. |
-| tones | ("info" \| "standard" \| "collectible" \| "edition" \| "warning")[] | — | Paint these `--tone-*` colours instead of the preset's art palette. Leave unset to follow the preset's art direction. |
+| tones | ("info" \| "3" \| "2" \| "1" \| "warning")[] | — | Paint these `--tone-*` colours instead of the preset's art palette. Leave unset to follow the preset's art direction. |
 | seed | string \| number | — | Fixes the composition: the same seed paints the same art in every theme. Pass a stable id. |
 | children | ReactNode | — | Rendered above the art — initials, a glyph, a short label. |
 | className | string | — | Size and shape: aspect, height, rounding. |
@@ -35,7 +35,7 @@ Use GradientArt where a real image belongs but none exists yet, or where the ima
 
 ## Tokens used
 
-`art-1`, `art-2`, `art-3`, `art-4`, `art-5`, `art-6`, `art-ground`, `art-warp`, `art-softness`, `art-grain`, `primary`, `tone-info`, `tone-standard`, `tone-collectible`, `tone-edition`, `tone-warning`
+`art-1`, `art-2`, `art-3`, `art-4`, `art-5`, `art-6`, `art-ground`, `art-warp`, `art-softness`, `art-grain`, `primary`, `tone-info`, `tone-3`, `tone-2`, `tone-1`, `tone-warning`
 
 ## Motion
 
@@ -68,7 +68,7 @@ import { GradientArt } from "@sableui/react"
 ```tsx
 import { GradientArt } from "@sableui/react"
 
-<GradientArt variant="grain" seed="juno" tones={["info", "edition"]} className="h-20 rounded-md" />
+<GradientArt variant="grain" seed="juno" tones={["info", "1"]} className="h-20 rounded-md" />
 ```
 
 ### Avatar with initials

package/llms/components/label.md

@@ -69,5 +69,5 @@ import { Field, Input } from "@sableui/react"
 ```tsx
 import { Label } from "@sableui/react"
 
-<Label htmlFor="royalty" hint="A percentage of every resale, paid to you.">Royalty</Label>
+<Label htmlFor="discount" hint="Taken off every order this code is used on.">Discount</Label>
 ```

package/llms/components/line-chart.md

@@ -45,7 +45,7 @@ Use LineChart to compare how two or more measures change over the same sequence,
 
 ## Tokens used
 
-`tone-edition`, `tone-collectible`, `tone-standard`, `tone-info`, `tone-warning`, `primary`, `muted-foreground`, `border`, `popover`, `popover-foreground`, `foreground`, `background`
+`tone-1`, `tone-2`, `tone-3`, `tone-info`, `tone-warning`, `primary`, `muted-foreground`, `border`, `popover`, `popover-foreground`, `foreground`, `background`
 
 ## Motion
 

package/llms/components/meter.md

@@ -43,7 +43,7 @@ Use Meter to show a static measurement against a known maximum — storage used,
 | value | number | — | The current reading, between min and max. Required. |
 | min | number | 0 | The bottom of the range. |
 | max | number | 100 | The top of the range. |
-| tone | "primary" \| "standard" \| "success" \| "warning" \| "destructive" | "primary" | Fill colour, mapped to a semantic token. Choose it from your own thresholds. |
+| tone | "primary" \| "3" \| "success" \| "warning" \| "destructive" | "primary" | Fill colour, mapped to a semantic token. Choose it from your own thresholds. |
 | shape | "bar" \| "ring" | "bar" | bar is a horizontal track; ring is a circular gauge for a small, glanceable reading — the same value, min, max and tones. |
 | size | "sm" \| "md" \| "lg" | "md" | Ring diameter (40 / 64 / 96px at the default spacing; the centre value steps with it), or bar thickness on the same sm / md / lg rails as Progress. |
 | showValue | boolean | — | Print the value in the ring's centre (formatted like MeterValue). |
@@ -54,7 +54,7 @@ Use Meter to show a static measurement against a known maximum — storage used,
 
 ## Variants
 
-- **tone**: primary, standard, success, warning, destructive
+- **tone**: primary, 3, success, warning, destructive
 - **shape**: bar, ring
 - **size**: sm, md, lg
 

package/llms/components/middle-truncate.md

@@ -36,12 +36,12 @@ Use MiddleTruncate when both the beginning and end of a long identifier must rem
 
 ## Examples
 
-### Solana address
+### API key
 
 ```tsx
 import { MiddleTruncate } from "@sableui/react"
 
-<MiddleTruncate text="5J7sX2QpHt9vK4mNbR8wYcZ3dF6gH1jL0pA8xQpVnTu" />
+<MiddleTruncate text="demo_key_7f3a9c2e5b8d1f4a6c0e9b3d7a2f5c8e1b4" />
 ```
 
 ### Custom start/end counts
@@ -49,7 +49,7 @@ import { MiddleTruncate } from "@sableui/react"
 ```tsx
 import { MiddleTruncate } from "@sableui/react"
 
-<MiddleTruncate text="0xAbC1234567890dEf1234567890aBcDeF12345678" startChars={4} endChars={4} />
+<MiddleTruncate text="9f2c4e7a1b3d5f60c8e2a4b6d8f0e1c3a5b7d9f2" startChars={4} endChars={4} />
 ```
 
 ### Copyable value
@@ -57,6 +57,6 @@ import { MiddleTruncate } from "@sableui/react"
 ```tsx
 import { Button, Icon, MiddleTruncate, Row, useCopy } from "@sableui/react"
 
-const { copy, copied } = useCopy(address)
-<Row gap={1}><MiddleTruncate text={address} /><Button variant="ghost" size="icon-xs" aria-label="Copy address" onClick={copy}><Icon name={copied ? "check" : "copy"} /></Button></Row>
+const { copy, copied } = useCopy(commitHash)
+<Row gap={1}><MiddleTruncate text={commitHash} /><Button variant="ghost" size="icon-xs" aria-label="Copy commit hash" onClick={copy}><Icon name={copied ? "check" : "copy"} /></Button></Row>
 ```

package/llms/components/note.md

@@ -53,7 +53,7 @@ Use Note for helpful supporting information that should sit near the relevant co
 ```tsx
 import { Note } from "@sableui/react"
 
-<Note tone="info">Editions mint on Solana mainnet.</Note>
+<Note tone="info">Reports refresh every hour.</Note>
 ```
 
 ### With title
@@ -61,7 +61,7 @@ import { Note } from "@sableui/react"
 ```tsx
 import { Note } from "@sableui/react"
 
-<Note tone="warning" title="Low balance">Top up SOL before minting.</Note>
+<Note tone="warning" title="Low balance">Add credits before your next export.</Note>
 ```
 
 ### Warning with a remedy, inside a dialog
@@ -77,5 +77,5 @@ import { Note } from "@sableui/react"
 ```tsx
 import { Note } from "@sableui/react"
 
-<Note tone="neutral" icon="lock">Pricing and supply cannot be changed after an edition is purchased.</Note>
+<Note tone="neutral" icon="lock">Pricing cannot be changed after an order is placed.</Note>
 ```

package/llms/components/pagination.md

@@ -13,7 +13,7 @@ Use Pagination when a result set is split into discrete pages and the user needs
 ### Best practices
 
 - Do: Keep page state controlled by the parent route or data layer so URL, filters, and result fetches stay in sync.
-- Do: Use a specific label when multiple pagers appear on a page, such as "Collector pages".
+- Do: Use a specific label when multiple pagers appear on a page, such as "Customer pages".
 - Do: Reset to page 1 when filters or search terms materially change the result set.
 - Don't: Use Pagination for tiny lists where all items fit comfortably on one page.
 - Don't: Hide disabled previous/next buttons at the bounds; disabled controls make the current position clearer.
@@ -79,7 +79,7 @@ const [page, setPage] = useState(8)
 ```tsx
 import { DataTable, Pagination, Stack } from "@sableui/react"
 
-<Stack gap={2}><DataTable data={rows} columns={columns} rowKey={(row) => row.id} /><Pagination label="Collector pages" page={page} total={12} onPageChange={setPage} /></Stack>
+<Stack gap={2}><DataTable data={rows} columns={columns} rowKey={(row) => row.id} /><Pagination label="Customer pages" page={page} total={12} onPageChange={setPage} /></Stack>
 ```
 
 ### Server query state

package/llms/components/phone.md

@@ -46,7 +46,7 @@ Use Phone to frame a mobile product preview when the device context is useful.
 ```tsx
 import { Phone } from "@sableui/react"
 
-<Phone><div className="p-4"><h2 className="text-title-lg">Activity</h2><p className="text-body-sm text-muted-foreground">3 new collects today.</p></div></Phone>
+<Phone><div className="p-4"><h2 className="text-title-lg">Activity</h2><p className="text-body-sm text-muted-foreground">3 new orders today.</p></div></Phone>
 ```
 
 ### Mockup, not a responsive preview

package/llms/components/pie-chart.md

@@ -43,7 +43,7 @@ Use PieChart for a share of one total across two to six categories — traffic s
 
 ## Tokens used
 
-`tone-edition`, `tone-collectible`, `tone-standard`, `tone-info`, `tone-warning`, `primary`, `muted-foreground`, `border`, `popover`, `popover-foreground`, `foreground`, `background`
+`tone-1`, `tone-2`, `tone-3`, `tone-info`, `tone-warning`, `primary`, `muted-foreground`, `border`, `popover`, `popover-foreground`, `foreground`, `background`
 
 ## Motion
 

package/llms/components/pill.md

@@ -25,6 +25,7 @@ Use Pill for a row of filters or choices a person clicks to narrow or toggle wha
 | selected | boolean | false | Marks the pill as chosen. Solid lifts onto the primary surface; outline takes a primary tint and soft primary edge. Sets aria-pressed. |
 | appearance | "solid" \| "outline" | "solid" | solid for a filter row; outline for quiet chips that annotate other content (a reaction under a message, a tag on a card), where a filled chip would compete with what it annotates. |
 | size | "md" \| "sm" | "md" | md sits on the density ladder's xs control height (28px); sm is 24px, for chips under or inside other content. |
+| tone | "neutral" \| "red" \| "orange" \| "yellow" \| "green" \| "teal" \| "blue" \| "purple" \| "pink" | "neutral" | neutral is the chip as described. A palette family colours it as a category, like the choices in a tag picker: a wash at rest, the solid family colour when selected. Painted from the theme's generated palette. |
 | icon | ReactNode | — | Optional leading glyph (e.g. <Icon name="lock" />), rendered before the children with the base gap. |
 
 ## Variants
@@ -32,10 +33,11 @@ Use Pill for a row of filters or choices a person clicks to narrow or toggle wha
 - **appearance**: solid, outline
 - **size**: md, sm
 - **selected**: true, false
+- **tone**: neutral, red, orange, yellow, green, teal, blue, purple, pink
 
 ## Tokens used
 
-`secondary`, `secondary-foreground`, `accent`, `accent-foreground`, `primary`, `primary-foreground`, `card`, `border`, `muted-foreground`, `foreground`
+`palette-wash`, `palette-wash-strong`, `palette-edge`, `palette-solid`, `palette-text`, `palette-solid-ink`, `secondary`, `secondary-foreground`, `accent`, `accent-foreground`, `primary`, `primary-foreground`, `card`, `border`, `muted-foreground`, `foreground`
 
 ## Accessibility
 
@@ -48,12 +50,20 @@ Use Pill for a row of filters or choices a person clicks to narrow or toggle wha
 
 ## Examples
 
+### Tag picker
+
+```tsx
+import { Pill, Row } from "@sableui/react"
+
+<Row gap={1}><Pill tone="blue" selected onClick={() => {}}>Design</Pill><Pill tone="teal" onClick={() => {}}>Research</Pill><Pill tone="orange" onClick={() => {}}>Marketing</Pill></Row>
+```
+
 ### Filter row
 
 ```tsx
 import { Pill, Row } from "@sableui/react"
 
-<Row gap={1}><Pill selected onClick={() => {}}>All</Pill><Pill onClick={() => {}}>Editions</Pill><Pill onClick={() => {}}>Collectibles</Pill></Row>
+<Row gap={1}><Pill selected onClick={() => {}}>All</Pill><Pill onClick={() => {}}>Projects</Pill><Pill onClick={() => {}}>Reports</Pill></Row>
 ```
 
 ### Outline, small (reactions)

package/llms/components/popover.md

@@ -67,7 +67,7 @@ Use Popover for anchored secondary content that needs more room than a tooltip b
 ```tsx
 import { Button, Popover, PopoverContent, PopoverDescription, PopoverTitle, PopoverTrigger } from "@sableui/react"
 
-<Popover><PopoverTrigger render={<Button variant="secondary">Details</Button>} /><PopoverContent><PopoverTitle>Edition details</PopoverTitle><PopoverDescription>A limited run of 100, stored permanently on Arweave.</PopoverDescription></PopoverContent></Popover>
+<Popover><PopoverTrigger render={<Button variant="secondary">Details</Button>} /><PopoverContent><PopoverTitle>Plan details</PopoverTitle><PopoverDescription>Up to 10 seats, billed monthly per seat.</PopoverDescription></PopoverContent></Popover>
 ```
 
 ### With close
@@ -75,5 +75,5 @@ import { Button, Popover, PopoverContent, PopoverDescription, PopoverTitle, Popo
 ```tsx
 import { Button, Popover, PopoverClose, PopoverContent, PopoverDescription, PopoverTitle, PopoverTrigger } from "@sableui/react"
 
-<Popover><PopoverTrigger render={<Button variant="secondary">Open</Button>} /><PopoverContent><PopoverTitle>Heads up</PopoverTitle><PopoverDescription>Collecting mints a compressed NFT to your wallet.</PopoverDescription><PopoverClose render={<Button size="sm">Got it</Button>} /></PopoverContent></Popover>
+<Popover><PopoverTrigger render={<Button variant="secondary">Open</Button>} /><PopoverContent><PopoverTitle>Heads up</PopoverTitle><PopoverDescription>Upgrading starts a new billing period today.</PopoverDescription><PopoverClose render={<Button size="sm">Got it</Button>} /></PopoverContent></Popover>
 ```

package/llms/components/radar-chart.md

@@ -42,7 +42,7 @@ Use RadarChart to compare the shape of a profile across five to eight dimensions
 
 ## Tokens used
 
-`tone-edition`, `tone-collectible`, `tone-standard`, `tone-info`, `tone-warning`, `primary`, `muted-foreground`, `border`, `popover`, `popover-foreground`, `foreground`, `background`
+`tone-1`, `tone-2`, `tone-3`, `tone-info`, `tone-warning`, `primary`, `muted-foreground`, `border`, `popover`, `popover-foreground`, `foreground`, `background`
 
 ## Motion
 

package/llms/components/radial-chart.md

@@ -44,7 +44,7 @@ Use RadialChart for progress toward goals (several rings), a single score or usa
 
 ## Tokens used
 
-`tone-edition`, `tone-collectible`, `tone-standard`, `tone-info`, `tone-warning`, `primary`, `muted-foreground`, `border`, `popover`, `popover-foreground`, `foreground`, `background`
+`tone-1`, `tone-2`, `tone-3`, `tone-info`, `tone-warning`, `primary`, `muted-foreground`, `border`, `popover`, `popover-foreground`, `foreground`, `background`
 
 ## Motion
 

package/llms/components/radio-card.md

@@ -39,18 +39,18 @@ Use RadioCard for visual choice cards when users compare a small set of named op
 | description | ReactNode | — | Optional supporting copy beneath the title (text-body-sm, muted). |
 | trailing | ReactNode | — | End-aligned on the title's line: a price, a delivery date, a count. The title takes the rest of the row. |
 | icon | ReactNode | — | Leading icon (e.g. a solid <Icon>). Its presence switches to the two-dimensional card — icon top-left, indicator top-right, copy below — and the glyph is rendered as a solid-fill icon in the tone colour. |
-| tone | "neutral" \| "standard" \| "collectible" \| "edition" \| "info" \| "warning" | "neutral" | Semantic colour the selected state carries across the border, radio, and icon glyph. Neutral uses the primary ring with a muted wash. |
+| tone | "neutral" \| "3" \| "2" \| "1" \| "info" \| "warning" | "neutral" | Semantic colour the selected state carries across the border, radio, and icon glyph. Neutral uses the primary ring with a muted wash. |
 | disabled | boolean | false | Dims the card and blocks selection. The group skips it during keyboard navigation. |
 | titleClassName | string | — | Merged onto the title span (default text-title-sm) — e.g. to tighten copy in a two-column layout. |
 | descriptionClassName | string | — | Merged onto the description span (default text-body-sm text-muted-foreground). |
 
 ## Variants
 
-- **tone**: neutral, standard, collectible, edition, info, warning
+- **tone**: neutral, 3, 2, 1, info, warning
 
 ## Tokens used
 
-`input`, `card`, `foreground`, `primary`, `muted`, `ring`, `muted-foreground`, `tone-standard`, `tone-collectible`, `tone-edition`, `tone-info`, `tone-warning`
+`input`, `card`, `foreground`, `primary`, `muted`, `ring`, `muted-foreground`, `tone-3`, `tone-2`, `tone-1`, `tone-info`, `tone-warning`
 
 ## Accessibility
 
@@ -71,7 +71,7 @@ Use RadioCard for visual choice cards when users compare a small set of named op
 ```tsx
 import { Icon, RadioCard, RadioGroup } from "@sableui/react"
 
-<RadioGroup defaultValue="post" className="grid sm:grid-cols-3"><RadioCard value="post" tone="standard" icon={<Icon name="plus" />} title="Standard" description="Share without minting" /><RadioCard value="collectible" tone="collectible" icon={<Icon name="gem" />} title="Collectible" description="Free to collect as NFT" /><RadioCard value="edition" tone="edition" icon={<Icon name="image-stack" />} title="Edition" description="Sell as NFT editions" /></RadioGroup>
+<RadioGroup defaultValue="starter" className="grid sm:grid-cols-3"><RadioCard value="starter" tone="3" icon={<Icon name="plus" />} title="Starter" description="Free for one person" /><RadioCard value="studio" tone="2" icon={<Icon name="gem" />} title="Studio" description="For small teams" /><RadioCard value="business" tone="1" icon={<Icon name="image-stack" />} title="Business" description="SSO and audit log" /></RadioGroup>
 ```
 
 ### Plan picker (plain)

package/llms/components/radio.md

@@ -63,7 +63,7 @@ import { Field, Fieldset, FieldsetContent, FieldsetLegend, Radio, RadioGroup } f
 	<FieldsetContent>
 		<RadioGroup defaultValue="standard">
 			<Field label="Standard" orientation="horizontal"><Radio value="standard" /></Field>
-			<Field label="Edition" orientation="horizontal"><Radio value="edition" /></Field>
+			<Field label="Poll" orientation="horizontal"><Radio value="poll" /></Field>
 		</RadioGroup>
 	</FieldsetContent>
 </Fieldset>
@@ -79,7 +79,7 @@ import { Field, Fieldset, FieldsetContent, FieldsetLegend, Radio, RadioGroup } f
 	<FieldsetContent>
 		<RadioGroup defaultValue="standard">
 			<Field label="Standard" orientation="horizontal"><Radio value="standard" /></Field>
-			<Field label="Edition" orientation="horizontal" disabled><Radio value="edition" /></Field>
+			<Field label="Poll" orientation="horizontal" disabled><Radio value="poll" /></Field>
 		</RadioGroup>
 	</FieldsetContent>
 </Fieldset>

package/llms/components/scroller.md

@@ -60,7 +60,7 @@ Use Scroller to create a contained overflow region for content that naturally ex
 ```tsx
 import { Scroller } from "@sableui/react"
 
-<Scroller label="Editions" className="h-64"><ul className="space-y-2 p-4">{items.map((item) => (<li key={item.id} className="text-body-sm">{item.title}</li>))}</ul></Scroller>
+<Scroller label="Projects" className="h-64"><ul className="space-y-2 p-4">{items.map((item) => (<li key={item.id} className="text-body-sm">{item.title}</li>))}</ul></Scroller>
 ```
 
 ### Capped, scrolls past the cap

package/llms/components/search-input.md

@@ -72,7 +72,7 @@ import { SearchInput } from "@sableui/react"
 ```tsx
 import { Field, SearchInput } from "@sableui/react"
 
-<Field label="Search posts"><SearchInput defaultValue="editions" className="max-w-80" /></Field>
+<Field label="Search posts"><SearchInput defaultValue="roadmap" className="max-w-80" /></Field>
 ```
 
 ### Disabled

package/llms/components/segmented-bar.md

@@ -36,11 +36,11 @@ Use SegmentedBar when a stat card or row needs to show how a total divides into
 ## Variants
 
 - **size**: sm, md, lg
-- **tone**: edition, collectible, standard, info, primary, neutral, success, warning, destructive
+- **tone**: 1, 2, 3, info, primary, neutral, success, warning, destructive
 
 ## Tokens used
 
-`tone-edition`, `tone-collectible`, `tone-standard`, `tone-info`, `primary`, `muted-foreground`, `success`, `tone-warning`, `destructive`
+`tone-1`, `tone-2`, `tone-3`, `tone-info`, `primary`, `muted-foreground`, `success`, `tone-warning`, `destructive`
 
 ## Motion
 
@@ -51,7 +51,7 @@ Use SegmentedBar when a stat card or row needs to show how a total divides into
 
 ## Accessibility
 
-- Rendered role=img with an aria-label built from `label` and each segment's share ("Revenue by type: Editions 42%, Collectibles 27%"), so the whole breakdown is read in one stop.
+- Rendered role=img with an aria-label built from `label` and each segment's share ("Revenue by channel: Direct 42%, Partners 27%"), so the whole breakdown is read in one stop.
 - Colour alone does not identify a segment: always show a legend with each segment's label beside the bar.
 
 ## Related
@@ -67,13 +67,13 @@ Use SegmentedBar when a stat card or row needs to show how a total divides into
 import { SegmentedBar, Stack, StatusDot } from "@sableui/react"
 
 const sales = [
-	{ label: "Editions", value: 42, tone: "edition" },
-	{ label: "Collectibles", value: 27, tone: "collectible" },
-	{ label: "Standard", value: 19, tone: "standard" },
+	{ label: "Direct", value: 42, tone: "1" },
+	{ label: "Partners", value: 27, tone: "2" },
+	{ label: "Referrals", value: 19, tone: "3" },
 ] as const
 
 <Stack gap={3}>
-	<SegmentedBar label="Revenue by type" segments={[...sales]} size="lg" />
+	<SegmentedBar label="Revenue by channel" segments={[...sales]} size="lg" />
 	<ul className="flex flex-col gap-1.5">
 		{sales.map((s) => (
 			<li key={s.label} className="flex items-center gap-2 text-body-sm">

package/llms/components/select.md

@@ -94,7 +94,7 @@ import { SelectContent, SelectGroup, SelectGroupLabel, SelectItem } from "@sable
 ```tsx
 import { Field, Select, SelectContent, SelectItem, SelectTrigger } from "@sableui/react"
 
-<Field label="Default visibility" description="Controls how new editions appear."><Select defaultValue="public"><SelectTrigger placeholder="Choose visibility" /><SelectContent><SelectItem value="public">Public</SelectItem><SelectItem value="private">Private</SelectItem><SelectItem value="unlisted">Unlisted</SelectItem></SelectContent></Select></Field>
+<Field label="Default visibility" description="Controls how new projects appear."><Select defaultValue="public"><SelectTrigger placeholder="Choose visibility" /><SelectContent><SelectItem value="public">Public</SelectItem><SelectItem value="private">Private</SelectItem><SelectItem value="unlisted">Unlisted</SelectItem></SelectContent></Select></Field>
 ```
 
 ### Rich item labels
@@ -102,5 +102,5 @@ import { Field, Select, SelectContent, SelectItem, SelectTrigger } from "@sableu
 ```tsx
 import { Badge, Select, SelectContent, SelectItem, SelectTrigger } from "@sableui/react"
 
-<Select defaultValue="edition" items={[{ value: "edition", label: "Edition" }, { value: "collectible", label: "Collectible" }]}><SelectTrigger /><SelectContent><SelectItem value="edition" label="Edition"><span className="flex items-center gap-2"><Badge tone="edition">Edition</Badge><span>Edition drop</span></span></SelectItem><SelectItem value="collectible" label="Collectible"><span className="flex items-center gap-2"><Badge tone="collectible">Collectible</Badge><span>Collectible</span></span></SelectItem></SelectContent></Select>
+<Select defaultValue="business" items={[{ value: "business", label: "Business" }, { value: "studio", label: "Studio" }]}><SelectTrigger /><SelectContent><SelectItem value="business" label="Business"><span className="flex items-center gap-2"><Badge tone="1">Business</Badge><span>Business plan</span></span></SelectItem><SelectItem value="studio" label="Studio"><span className="flex items-center gap-2"><Badge tone="2">Studio</Badge><span>Studio</span></span></SelectItem></SelectContent></Select>
 ```

package/llms/components/sheet.md

@@ -103,5 +103,5 @@ import { Button, Sheet, SheetClose, SheetContent, SheetFooter, SheetHeader, Shee
 ```tsx
 import { Button, Sheet, SheetClose, SheetContent, SheetFooter, SheetHeader, SheetTitle, SheetTrigger } from "@sableui/react"
 
-<Sheet><SheetTrigger render={<Button variant="secondary">Details</Button>} /><SheetContent side="bottom"><SheetHeader><SheetTitle>Edition details</SheetTitle></SheetHeader><SheetFooter><SheetClose render={<Button variant="secondary">Close</Button>} /></SheetFooter></SheetContent></Sheet>
+<Sheet><SheetTrigger render={<Button variant="secondary">Details</Button>} /><SheetContent side="bottom"><SheetHeader><SheetTitle>Order details</SheetTitle></SheetHeader><SheetFooter><SheetClose render={<Button variant="secondary">Close</Button>} /></SheetFooter></SheetContent></Sheet>
 ```

package/llms/components/side-nav.md

@@ -84,7 +84,7 @@ import { SideNav, SideNavGroup, SideNavItem } from "@sableui/react"
 import { SideNav, SideNavItem } from "@sableui/react"
 // <Link> = your router's link (react-router, next/link, @tanstack/router, …)
 
-<SideNav size="lg"><SideNavItem label="Profile" active render={<Link to="/settings/profile" />} /><SideNavItem label="Wallets" render={<Link to="/settings/wallets" />} /><SideNavItem label="Security" render={<Link to="/settings/security" />} /></SideNav>
+<SideNav size="lg"><SideNavItem label="Profile" active render={<Link to="/settings/profile" />} /><SideNavItem label="Billing" render={<Link to="/settings/billing" />} /><SideNavItem label="Security" render={<Link to="/settings/security" />} /></SideNav>
 ```
 
 ### Inside Sidebar chrome

package/llms/components/sidebar.md

@@ -67,7 +67,7 @@ Use Sidebar for persistent desktop navigation or application chrome outside the
 import { Icon, NotificationBadge, Sidebar, SidebarBrand, SidebarFooter, SidebarHeader, SidebarItem, SidebarNav } from "@sableui/react"
 // <Link> = your router's link (react-router, next/link, @tanstack/router, …)
 
-<Sidebar><SidebarHeader><SidebarBrand mark={<Icon name="music" variant="solid" />} label="Undertow" render={<Link to="/" />} /></SidebarHeader><SidebarNav><SidebarItem icon={<Icon name="bell" />} label="Notifications" badge={<NotificationBadge count={3} />} render={<Link to="/notifications" />} /></SidebarNav><SidebarFooter>{wallet}</SidebarFooter></Sidebar>
+<Sidebar><SidebarHeader><SidebarBrand mark={<Icon name="music" variant="solid" />} label="Undertow" render={<Link to="/" />} /></SidebarHeader><SidebarNav><SidebarItem icon={<Icon name="bell" />} label="Notifications" badge={<NotificationBadge count={3} />} render={<Link to="/notifications" />} /></SidebarNav><SidebarFooter>{account}</SidebarFooter></Sidebar>
 ```
 
 ### Collapsible (icon rail)

package/llms/components/sparkline.md

@@ -24,7 +24,7 @@ Use Sparkline next to a number to show where it has been — a KPI's last 30 day
 | data | number[] | — | The values, oldest first. |
 | label | string | — | What the line tracks ("Revenue, last 30 days"). The spoken summary adds the first and last values, low and high. |
 | variant | "line" \| "area" \| "bar" | "line" | A line, a line over a soft fill, or columns. |
-| tone | "edition" \| "collectible" \| "standard" \| "info" \| "warning" \| "primary" \| "neutral" \| "success" \| "destructive" | "primary" | Colour by role. |
+| tone | "1" \| "2" \| "3" \| "info" \| "warning" \| "primary" \| "neutral" \| "success" \| "destructive" | "primary" | Colour by role. |
 | className | string | "h-8 w-24" | Sizes it; the drawing stretches to fit. |
 | animate | boolean | true | Draw on (or rise) when it scrolls into view. |
 | locale | string | runtime locale | BCP 47 locale for default number and date formatting. |
@@ -35,7 +35,7 @@ Use Sparkline next to a number to show where it has been — a KPI's last 30 day
 
 ## Tokens used
 
-`primary`, `tone-edition`, `tone-collectible`, `tone-standard`, `tone-info`, `tone-warning`, `muted-foreground`, `success`, `destructive`
+`primary`, `tone-1`, `tone-2`, `tone-3`, `tone-info`, `tone-warning`, `muted-foreground`, `success`, `destructive`
 
 ## Motion
 

package/llms/components/spinner.md

@@ -83,5 +83,5 @@ import { Spinner } from "@sableui/react"
 ```tsx
 import { Button } from "@sableui/react"
 
-<Button loading>Collecting</Button>
+<Button loading>Saving</Button>
 ```

package/llms/components/status-dot.md

@@ -28,18 +28,18 @@ Use StatusDot as a compact visual state cue next to text, avatars, rows, or labe
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| tone | "neutral" \| "standard" \| "success" \| "warning" \| "info" \| "edition" \| "collectible" \| "destructive" | "neutral" | Semantic color of the dot. |
+| tone | "neutral" \| "1" \| "2" \| "3" \| "success" \| "warning" \| "info" \| "destructive" \| "red" \| "orange" \| "yellow" \| "green" \| "teal" \| "blue" \| "purple" \| "pink" | "neutral" | Semantic color of the dot, or a palette family (red … pink) for a category legend. |
 | size | "sm" \| "md" \| "lg" | "md" | Dot diameter. |
 | pulse | boolean | false | Wrap the dot in an animated ping ring to signal a live state. |
 
 ## Variants
 
-- **tone**: neutral, standard, success, warning, info, edition, collectible, destructive
+- **tone**: neutral, 1, 2, 3, success, warning, info, destructive, red, orange, yellow, green, teal, blue, purple, pink
 - **size**: sm, md, lg
 
 ## Tokens used
 
-`muted-foreground`, `tone-standard`, `success`, `tone-warning`, `tone-info`, `tone-edition`, `tone-collectible`, `destructive`
+`palette-dot`, `muted-foreground`, `tone-3`, `success`, `tone-warning`, `tone-info`, `tone-1`, `tone-2`, `destructive`
 
 ## Accessibility
 
@@ -58,7 +58,7 @@ Use StatusDot as a compact visual state cue next to text, avatars, rows, or labe
 ```tsx
 import { Row, StatusDot } from "@sableui/react"
 
-<Row gap={2}><StatusDot tone="standard" /><StatusDot tone="info" /><StatusDot tone="warning" /><StatusDot tone="destructive" /></Row>
+<Row gap={2}><StatusDot tone="3" /><StatusDot tone="info" /><StatusDot tone="warning" /><StatusDot tone="destructive" /></Row>
 ```
 
 ### With label — use Badge

package/llms/components/table.md

@@ -63,25 +63,25 @@ Use Table for structured data with consistent columns and rows. Use DataTable wh
 
 ## Examples
 
-### Collectors
+### Orders
 
 ```tsx
 import { Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, TableRow } from "@sableui/react"
 
 <Table>
-	<TableCaption>Recent collectors</TableCaption>
+	<TableCaption>Recent orders</TableCaption>
 	<TableHeader>
 		<TableRow>
-			<TableHead>Collector</TableHead>
-			<TableHead>Edition</TableHead>
+			<TableHead>Customer</TableHead>
+			<TableHead>Order</TableHead>
 			<TableHead>Paid</TableHead>
 		</TableRow>
 	</TableHeader>
 	<TableBody>
 		<TableRow>
 			<TableCell>@nova</TableCell>
-			<TableCell>#012</TableCell>
-			<TableCell>0.5 SOL</TableCell>
+			<TableCell>1042</TableCell>
+			<TableCell>$48.00</TableCell>
 		</TableRow>
 	</TableBody>
 </Table>
@@ -100,7 +100,7 @@ import { Avatar, Badge, Button, Row, Table, TableBody, TableCaption, TableCell,
 ```tsx
 import { Card, CardContent, CardHeader, CardTitle, Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@sableui/react"
 
-<Card><CardHeader><CardTitle>Collectors</CardTitle></CardHeader><CardContent flush><Table><TableHeader><TableRow><TableHead>Collector</TableHead><TableHead>Paid</TableHead></TableRow></TableHeader><TableBody><TableRow><TableCell>@nova</TableCell><TableCell>0.5 SOL</TableCell></TableRow></TableBody></Table></CardContent></Card>
+<Card><CardHeader><CardTitle>Customers</CardTitle></CardHeader><CardContent flush><Table><TableHeader><TableRow><TableHead>Customer</TableHead><TableHead>Paid</TableHead></TableRow></TableHeader><TableBody><TableRow><TableCell>@nova</TableCell><TableCell>$48.00</TableCell></TableRow></TableBody></Table></CardContent></Card>
 ```
 
 ### Summary footer
@@ -108,5 +108,5 @@ import { Card, CardContent, CardHeader, CardTitle, Table, TableBody, TableCell,
 ```tsx
 import { Table, TableBody, TableCell, TableFooter, TableHead, TableHeader, TableRow } from "@sableui/react"
 
-<Table><TableHeader><TableRow><TableHead>Item</TableHead><TableHead className="text-end">Amount</TableHead></TableRow></TableHeader><TableBody><TableRow><TableCell>Primary sale</TableCell><TableCell className="text-end">42 SOL</TableCell></TableRow></TableBody><TableFooter><TableRow><TableCell>Total</TableCell><TableCell className="text-end">42 SOL</TableCell></TableRow></TableFooter></Table>
+<Table><TableHeader><TableRow><TableHead>Item</TableHead><TableHead className="text-end">Amount</TableHead></TableRow></TableHeader><TableBody><TableRow><TableCell>Studio plan</TableCell><TableCell className="text-end">$192.00</TableCell></TableRow></TableBody><TableFooter><TableRow><TableCell>Total</TableCell><TableCell className="text-end">$192.00</TableCell></TableRow></TableFooter></Table>
 ```

package/llms/components/tabs.md

@@ -80,5 +80,5 @@ import { Tabs, TabsList, TabsPanel, TabsTrigger } from "@sableui/react"
 ```tsx
 import { Tabs, TabsList, TabsPanel, TabsTrigger } from "@sableui/react"
 
-<Tabs defaultValue="overview"><TabsList><TabsTrigger value="overview">Overview</TabsTrigger><TabsTrigger value="holders" disabled>Holders</TabsTrigger></TabsList><TabsPanel value="overview">Overview content</TabsPanel></Tabs>
+<Tabs defaultValue="overview"><TabsList><TabsTrigger value="overview">Overview</TabsTrigger><TabsTrigger value="billing" disabled>Billing</TabsTrigger></TabsList><TabsPanel value="overview">Overview content</TabsPanel></Tabs>
 ```

package/llms/components/textarea.md

@@ -60,7 +60,7 @@ import { Textarea } from "@sableui/react"
 ```tsx
 import { Textarea } from "@sableui/react"
 
-<Textarea rows={6} placeholder="Tell the story behind this edition…" />
+<Textarea rows={6} placeholder="Tell your team what this project is for…" />
 ```
 
 ### Auto-resize
@@ -84,5 +84,5 @@ import { Textarea } from "@sableui/react"
 ```tsx
 import { Textarea } from "@sableui/react"
 
-<Textarea disabled defaultValue="Captions lock once the edition is minted." />
+<Textarea disabled defaultValue="Notes lock once the invoice is sent." />
 ```

package/llms/components/toast.md

@@ -104,7 +104,7 @@ toast.promise(publish(), { loading: "Publishing…", success: "Published", error
 ```tsx
 import { toast } from "@sableui/react"
 
-const id = toast.loading("Pinning to Arweave…"); /* later */ toast.update(id, { title: "Pinned", type: "success", timeout: 4000 })
+const id = toast.loading("Uploading report…"); /* later */ toast.update(id, { title: "Uploaded", type: "success", timeout: 4000 })
 ```
 
 ### Custom toast markup (composed parts)