@sableui/react 0.2.0 → 0.3.0

package/llms.txt

@@ -1,6 +1,6 @@
 # Sable (@sableui/react)
 
-> An owned, themeable React component system. Default theme: **Base** (dark-by-default, content-first, fluid product UI). Behavior from Base UI; styling via Tailwind v4 + semantic CSS-variable tokens; Reicon icons via a pluggable adapter. 96 components, 13 layout primitives, and a **patterns** tier of canonical page shells. The full, per-component contract is the generated `registry.json`.
+> An owned, themeable React component system. Default theme: **Base** (dark-by-default, content-first, fluid product UI). Behavior from Base UI; styling via Tailwind v4 + semantic CSS-variable tokens; Reicon icons via a pluggable adapter. 105 components, 13 layout primitives, and a **patterns** tier of canonical page shells. The full, per-component contract is the generated `registry.json`.
 
 ## Start here — brief, composition, evidence
 
@@ -276,6 +276,49 @@ import { Button, Card, IconProvider, MotionProvider, SableThemeProvider, useSabl
 - **ListDetailPage** — Searchable list beside the selected record's detail: interactive Entity rows in a CardList (5 of 12 columns) and a sticky detail pane (7) with an editable field, a label/value list, record actions with a destructive confirmation, and recent activity. → [`llms/patterns/list-detail-page.md`](./llms/patterns/list-detail-page.md)
 - **SettingsPage** — Account settings inside the app shell: a sticky SideNav section rail beside a column of section Cards — a Profile form with the page's one explicit save, Card + CardList + Entity rows with Switches that apply instantly, a read-only payouts summary, account rows, and a delete card confirmed through DestructiveActionModal. → [`llms/patterns/settings-page.md`](./llms/patterns/settings-page.md)
 
+### Blocks (40) — section-sized compositions (cards, forms, lists), copy as starting points (registry.json → blocks; importable from `@sableui/react/blocks`; `sable block <Name>`)
+
+- **ApiKeysBlock** (Settings & team) — An API keys card: each key's name with its masked hint in Code, when it was created and last used, and an OverflowMenu to rename, roll or revoke. → [`llms/blocks/api-keys-block.md`](./llms/blocks/api-keys-block.md)
+- **ChatThreadBlock** (Social & messaging) — A short message thread on a card: Message rows with incoming muted Bubbles on the start side and your own primary Bubbles on the end. → [`llms/blocks/chat-thread-block.md`](./llms/blocks/chat-thread-block.md)
+- **CommandPaletteBlock** (Navigation) — An inline command palette: CommandMenuPanel with a filter field and grouped actions, each with an icon and its keyboard shortcut. → [`llms/blocks/command-palette-block.md`](./llms/blocks/command-palette-block.md)
+- **CtaBandBlock** (Marketing) — A closing call to action: a centred h2 and one-line lede on a card, with a primary and an outline action. → [`llms/blocks/cta-band-block.md`](./llms/blocks/cta-band-block.md)
+- **DangerZoneBlock** (Settings & team) — A delete-account card: what deleting removes and what survives, one destructive Button, and a DestructiveActionModal that asks for the handle to be typed before it acts. → [`llms/blocks/danger-zone-block.md`](./llms/blocks/danger-zone-block.md)
+- **DeviceComparisonBlock** (Dashboard) — A comparison card: each series' total sits in the header as a pressable tile, and the one pressed is plotted below as a daily BarChart. → [`llms/blocks/device-comparison-block.md`](./llms/blocks/device-comparison-block.md)
+- **EventCardBlock** (Dashboard) — An upcoming-event card: a DateTile beside the title and time, a "starts in" Badge, attendees as an AvatarGroup, and Decline / Join. → [`llms/blocks/event-card-block.md`](./llms/blocks/event-card-block.md)
+- **FaqBlock** (Marketing) — A FAQ section: the heading and a way to ask beside an Accordion of questions, each answer one or two sentences. → [`llms/blocks/faq-block.md`](./llms/blocks/faq-block.md)
+- **FeatureGridBlock** (Marketing) — A feature section: an overline, an h2 and a lede over a grid of article cards, each with an icon in a well, a title and one sentence — 1, 2 then 3 columns. → [`llms/blocks/feature-grid-block.md`](./llms/blocks/feature-grid-block.md)
+- **FeedbackFormBlock** (Social & messaging) — A feedback card: a one-to-five rating as a full-width ToggleGroup, an optional notes field, and Skip / Send feedback. → [`llms/blocks/feedback-form-block.md`](./llms/blocks/feedback-form-block.md)
+- **GoalProgressBlock** (Dashboard) — A goals card: a ring per goal in a RadialChart against its track (a full ring is 100%), a legend, and which goals are behind in the footer. → [`llms/blocks/goal-progress-block.md`](./llms/blocks/goal-progress-block.md)
+- **HeroBlock** (Marketing) — A centred hero: an outline Badge eyebrow, the page's h1 at display size, a lede, a primary and an outline call to action, and an install command in a CodeBlock. → [`llms/blocks/hero-block.md`](./llms/blocks/hero-block.md)
+- **InviteTeamBlock** (Settings & team) — An invite card: who is already on the team as an AvatarGroup, and an email field with Send. → [`llms/blocks/invite-team-block.md`](./llms/blocks/invite-team-block.md)
+- **InvoiceHistoryBlock** (Commerce) — A billing history card: a flush Table of date, plan, amount and status per invoice, with a download button on each row. → [`llms/blocks/invoice-history-block.md`](./llms/blocks/invoice-history-block.md)
+- **KpiSparklineBlock** (Dashboard) — A KPI row with trends: three stat cards, each the value in the metric mono tier, a Sparkline of its last twelve weeks, and the change as a Badge. → [`llms/blocks/kpi-sparkline-block.md`](./llms/blocks/kpi-sparkline-block.md)
+- **MediaPlayerBlock** (Media & files) — A now-playing card: cover, title and artist as an Entity with a Like action, a position Slider with elapsed and remaining time, and previous / play-pause / next. → [`llms/blocks/media-player-block.md`](./llms/blocks/media-player-block.md)
+- **NewsletterBlock** (Marketing) — A newsletter sign-up card: the list's name, what it sends and how often, and an email field with Subscribe. → [`llms/blocks/newsletter-block.md`](./llms/blocks/newsletter-block.md)
+- **NotFoundBlock** (System) — A not-found page body: the status code in mono, a plain-language h1, what probably happened, and two ways on — home and search. → [`llms/blocks/not-found-block.md`](./llms/blocks/not-found-block.md)
+- **NotificationListBlock** (Social & messaging) — An activity list: Entity rows with the actor's Avatar, who did what, and a compact time with an unread StatusDot. → [`llms/blocks/notification-list-block.md`](./llms/blocks/notification-list-block.md)
+- **NotificationSettingsBlock** (Settings & team) — A preferences card: Entity rows in a CardList, each with a title, a one-line detail and a Switch that applies instantly. → [`llms/blocks/notification-settings-block.md`](./llms/blocks/notification-settings-block.md)
+- **OrderTrackingBlock** (Commerce) — An order status card: order number, item and a status Badge in the header over a vertical dot Stepper of delivery milestones. → [`llms/blocks/order-tracking-block.md`](./llms/blocks/order-tracking-block.md)
+- **PricingCardBlock** (Commerce) — A single-plan pricing card: a Monthly/Yearly ToggleGroup, the price and billing note, a checked feature list, and one full-width call to action. → [`llms/blocks/pricing-card-block.md`](./llms/blocks/pricing-card-block.md)
+- **PricingTableBlock** (Commerce) — A three-tier pricing section: heading, a Monthly/Yearly ToggleGroup, and three equal-height plan cards with the recommended one outlined in primary and badged "Most popular". → [`llms/blocks/pricing-table-block.md`](./llms/blocks/pricing-table-block.md)
+- **ProductCardBlock** (Commerce) — A product card: edge-to-edge artwork, title and maker, an edition Badge, and the price beside a single buy action. → [`llms/blocks/product-card-block.md`](./llms/blocks/product-card-block.md)
+- **ProfileCardBlock** (Social & messaging) — A profile card: a cover banner, an avatar rising into it, Share and Follow, the name and handle, a one-line bio and two counts. → [`llms/blocks/profile-card-block.md`](./llms/blocks/profile-card-block.md)
+- **ProfileFormBlock** (Settings & team) — A profile settings card: avatar with upload/remove, name and handle side by side, a bio, a timezone Select, and one Save profile in the footer. → [`llms/blocks/profile-form-block.md`](./llms/blocks/profile-form-block.md)
+- **RevenueBreakdownBlock** (Dashboard) — A stat card with a breakdown: the KPI in the metric mono tier, its trend Badge, a SegmentedBar of how the total divides, and a StatusDot legend. → [`llms/blocks/revenue-breakdown-block.md`](./llms/blocks/revenue-breakdown-block.md)
+- **SignInBlock** (Auth) — A sign-in card: email and password, a primary Sign in, and a passkey alternative under an "or" separator. → [`llms/blocks/sign-in-block.md`](./llms/blocks/sign-in-block.md)
+- **SignUpBlock** (Auth) — A sign-up card: name, work email and password as labelled Fields, one full-width Create account, and a link to sign in instead. → [`llms/blocks/sign-up-block.md`](./llms/blocks/sign-up-block.md)
+- **SiteFooterBlock** (Marketing) — A site footer: the brand and a one-line tagline beside link groups in a labelled Footer nav, over a copyright line. → [`llms/blocks/site-footer-block.md`](./llms/blocks/site-footer-block.md)
+- **StatRowBlock** (Dashboard) — A KPI row: four stat cards, each a label, the value in the metric mono tier, and a trend Badge with its comparison note — 2 × 2 on a phone, one row from xl. → [`llms/blocks/stat-row-block.md`](./llms/blocks/stat-row-block.md)
+- **StepsBlock** (Marketing) — A how-it-works section: the heading, lede and a guide link on the left; three numbered steps on the right, each under a strong rule. → [`llms/blocks/steps-block.md`](./llms/blocks/steps-block.md)
+- **TaskListBlock** (Dashboard) — A checklist card: a titled list of Checkbox rows with a category Badge each, a live count of what is left, and a quiet Add task action. → [`llms/blocks/task-list-block.md`](./llms/blocks/task-list-block.md)
+- **TeamMembersBlock** (Settings & team) — A members card: Entity rows with avatar, name and email, a role Badge, and an OverflowMenu of role changes and removal; pending invites sit in the same list. → [`llms/blocks/team-members-block.md`](./llms/blocks/team-members-block.md)
+- **TestimonialBlock** (Marketing) — A customer story: one large blockquote with the person's avatar, name and role, beside three outcome figures separated by rules. → [`llms/blocks/testimonial-block.md`](./llms/blocks/testimonial-block.md)
+- **TrafficSourcesBlock** (Dashboard) — A share card: a donut PieChart of where a total comes from, the total in the hole, a legend, and the headline share in words in the footer. → [`llms/blocks/traffic-sources-block.md`](./llms/blocks/traffic-sources-block.md)
+- **TrafficTrendBlock** (Dashboard) — A trend card: a stacked gradient AreaChart of two series by day, a time-range ToggleGroup in the header, and a one-line takeaway with its direction in the footer. → [`llms/blocks/traffic-trend-block.md`](./llms/blocks/traffic-trend-block.md)
+- **UploadListBlock** (Media & files) — An upload queue: full-width Attachment rows — one uploading with progress and a cancel button, one finished with a success check. → [`llms/blocks/upload-list-block.md`](./llms/blocks/upload-list-block.md)
+- **VerifyCodeBlock** (Auth) — A one-time-code card: where the code went, a six-slot OtpField grouped 3 + 3 under a visible label, and a quiet Resend. → [`llms/blocks/verify-code-block.md`](./llms/blocks/verify-code-block.md)
+- **WalletBlock** (Commerce) — A balance card: the balance in the metric mono tier, Send and Receive as an equal pair, and recent activity as Entity rows with signed amounts. → [`llms/blocks/wallet-block.md`](./llms/blocks/wallet-block.md)
+
 ### Layout primitives (13) — full contracts in registry.json → layoutPrimitives
 
 - **Region** — The page region: fluid, edge-to-edge with the fluid page inset (--page-inset). → [`llms/layout/region.md`](./llms/layout/region.md)
@@ -303,15 +346,17 @@ import { Button, Card, IconProvider, MotionProvider, SableThemeProvider, useSabl
 - **helper** — `hit-target`, `link-underline`, `checkerboard`
 - **elsewhere** — paired `text-*` page tiers: registry.json → tokens.typography; `motion-*` / `animate-*` recipes: registry.json → tokens.motion.recipes.
 
-### Components (96) — full props/subcomponents/variants/guidance/a11y/examples in registry.json → components
+### Components (105) — full props/subcomponents/variants/guidance/a11y/examples in registry.json → components
 
 - **Accordion** — Stacked, collapsible disclosure sections over Base UI Accordion — roving focus, arrow-key navigation, ARIA region/heading/button wiring, and an animated height transition. *Parts:* AccordionItem, AccordionTrigger, AccordionPanel. → [`llms/components/accordion.md`](./llms/components/accordion.md)
 - **AppHeader** — Mobile top bar (sticky, hidden at lg) with leading / title / actions slots on a 3-column grid that keeps the title optically centered. → [`llms/components/app-header.md`](./llms/components/app-header.md)
 - **AppShell** — The application frame: slots for status banners, a mobile header, a desktop sidebar, main content, a mobile bottom nav, and floating overlays — plus a built-in skip link and #main-content target. → [`llms/components/app-shell.md`](./llms/components/app-shell.md)
+- **AreaChart** — **BETA.** A trend over a sequence, filled to the baseline: overlapping translucent series, stacked, or stacked to 100%, with smooth, linear or step curves and optional gradient fills. → [`llms/components/area-chart.md`](./llms/components/area-chart.md)
 - **Attachment** — A file or image attached to a message: media or icon lead, name and metadata, upload and error states, an actions slot, and a full-card trigger that keeps those actions separately clickable. → [`llms/components/attachment.md`](./llms/components/attachment.md)
 - **Avatar** — Circular profile image over Base UI Avatar — automatic image-load tracking with an initials/glyph fallback. *Parts:* AvatarRoot, AvatarImage, AvatarFallback, AvatarGroup, AvatarGroupCount. → [`llms/components/avatar.md`](./llms/components/avatar.md)
 - **Badge** — Compact static label, set on two axes: appearance (soft, outline, solid, overlay on media, plain text) and tone (neutral or a semantic tone). → [`llms/components/badge.md`](./llms/components/badge.md)
 - **Banner** — Full-width, page-level announcement bar. → [`llms/components/banner.md`](./llms/components/banner.md)
+- **BarChart** — **BETA.** Bars comparing amounts across categories: grouped, stacked or stacked to 100%, vertical columns or horizontal bars, with value labels, per-category colours and a separate tone for negative values. → [`llms/components/bar-chart.md`](./llms/components/bar-chart.md)
 - **BottomNav** — Mobile bottom tab bar (fixed, hidden at lg), with home-indicator safe-area padding and evenly distributed BottomNavItem tabs. *Parts:* BottomNavItem. → [`llms/components/bottom-nav.md`](./llms/components/bottom-nav.md)
 - **Breadcrumbs** — Navigation trail showing the path to the current page. *Parts:* BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator. → [`llms/components/breadcrumbs.md`](./llms/components/breadcrumbs.md)
 - **Browser** — A generic, current browser window: one compact toolbar (window controls, back/forward/reload, a centered address field) around page content. → [`llms/components/browser.md`](./llms/components/browser.md)
@@ -333,9 +378,9 @@ import { Button, Card, IconProvider, MotionProvider, SableThemeProvider, useSabl
 - **ContextMenu** — Right-click menu over Base UI ContextMenu — opens on the native contextmenu event or long press and positions at the pointer. *Parts:* ContextMenuTrigger, ContextMenuContent, ContextMenuItem, ContextMenuSeparator, ContextMenuGroup, ContextMenuGroupLabel. → [`llms/components/context-menu.md`](./llms/components/context-menu.md)
 - **DataTable** — A data-driven table over the Table primitives — a columns def + data array with built-in client-side sorting (click a sortable header to cycle asc → desc → none), optional row click / selection, and an empty state. → [`llms/components/data-table.md`](./llms/components/data-table.md)
 - **DatePicker** — Date (and optionally time) picker: a field-shaped trigger (the Input / SelectTrigger shell) opens a Popover holding Sable's Calendar. → [`llms/components/date-picker.md`](./llms/components/date-picker.md)
+- **DateTile** — A calendar-page date: the short month on a primary band over the day number, in a <time> element. → [`llms/components/date-tile.md`](./llms/components/date-tile.md)
 - **DestructiveActionModal** — Confirmation modal for irreversible actions, built on AlertDialog (role=alertdialog; a backdrop click does not dismiss). → [`llms/components/destructive-action-modal.md`](./llms/components/destructive-action-modal.md)
 - **Dialog** — Modal surface over Base UI Dialog (focus trap, scroll lock, Esc/outside dismissal). *Parts:* DialogContent, DialogOverlay, DialogTrigger, DialogClose, DialogHeader, DialogTitle, DialogDescription, DialogFooter, AlertDialog (Root), AlertDialogTrigger, AlertDialogContent / AlertDialogOverlay / AlertDialogTitle / AlertDialogDescription / AlertDialogHeader / AlertDialogFooter / AlertDialogClose. → [`llms/components/dialog.md`](./llms/components/dialog.md)
-- **DotsMenu** — An overflow ellipsis icon button that opens a Menu. → [`llms/components/dots-menu.md`](./llms/components/dots-menu.md)
 - **EmptyState** — The centered empty / error block: optional icon or error code, title, description and an action. → [`llms/components/empty-state.md`](./llms/components/empty-state.md)
 - **Entity** — A list-row record: leading visual + title/subtitle column + trailing action, with truncating text. → [`llms/components/entity.md`](./llms/components/entity.md)
 - **Feedback** — A compact feedback popover. → [`llms/components/feedback.md`](./llms/components/feedback.md)
@@ -347,6 +392,7 @@ import { Button, Card, IconProvider, MotionProvider, SableThemeProvider, useSabl
 - **Input** — Styled native text input. → [`llms/components/input.md`](./llms/components/input.md)
 - **Kbd** — A keyboard key indicator. → [`llms/components/kbd.md`](./llms/components/kbd.md)
 - **Label** — Styled native <label>. → [`llms/components/label.md`](./llms/components/label.md)
+- **LineChart** — **BETA.** Lines over a sequence — for comparing how measures move. → [`llms/components/line-chart.md`](./llms/components/line-chart.md)
 - **Marker** — A non-message row in a conversation: streaming status, system note, bordered notice, or a labelled rule for date breaks. → [`llms/components/marker.md`](./llms/components/marker.md)
 - **Marquee** — Seamless, constant-speed infinite loop (logos, tags, testimonials). → [`llms/components/marquee.md`](./llms/components/marquee.md)
 - **Menu** — Dropdown menu over Base UI Menu — roving focus, typeahead, ARIA menu/menuitem wiring, collision-aware positioning, Esc/outside dismissal. *Parts:* MenuTrigger, MenuContent, MenuItem, MenuSeparator, MenuSubmenu, MenuSubmenuTrigger, MenuRadioGroup, MenuRadioItem, MenuCheckboxItem, MenuGroup, MenuGroupLabel. → [`llms/components/menu.md`](./llms/components/menu.md)
@@ -358,21 +404,26 @@ import { Button, Card, IconProvider, MotionProvider, SableThemeProvider, useSabl
 - **NotificationBadge** — An unread indicator. → [`llms/components/notification-badge.md`](./llms/components/notification-badge.md)
 - **NumberField** — Numeric input with decrement/increment steppers over Base UI NumberField — keyboard arrows, scroll, scrub-to-change, min/max clamping, locale formatting, and form integration. → [`llms/components/number-field.md`](./llms/components/number-field.md)
 - **OtpField** — One-time-code entry over Base UI's OTP Field — one slot per character, SMS autofill on the first slot, paste fills every slot, and only one tab stop for the whole code. → [`llms/components/otp-field.md`](./llms/components/otp-field.md)
+- **OverflowMenu** — An overflow ellipsis icon button that opens a Menu. → [`llms/components/overflow-menu.md`](./llms/components/overflow-menu.md)
 - **PageHeader** — In-flow page heading block: a title row (optional back control + actions) over an optional description, with room for children (filters, tabs) below. → [`llms/components/page-header.md`](./llms/components/page-header.md)
 - **PageLoader** — Full-screen branded loading splash: the screen fades in, the mark breathes, and an indeterminate Progress bar pulses beneath it. → [`llms/components/page-loader.md`](./llms/components/page-loader.md)
 - **Pagination** — Page navigation built from our own Button + Icon (no Base UI). → [`llms/components/pagination.md`](./llms/components/pagination.md)
 - **PanelGroup** — A row of docked chrome panels around a flexible centre, with draggable and keyboard-resizable edges and optional persisted widths. *Parts:* Panel, PanelResizer, usePanelWidth. → [`llms/components/panel-group.md`](./llms/components/panel-group.md)
 - **PanelSection** — A flush group of property rows inside a docked panel — eyebrow header, hairline separator, rows beneath. *Parts:* PropertyRow, PropertyPair. → [`llms/components/panel-section.md`](./llms/components/panel-section.md)
 - **Phone** — A current smartphone frame at iPhone proportions: a dark body with a titanium band, thin bezels, an island, an optional status bar and a scrollable screen. → [`llms/components/phone.md`](./llms/components/phone.md)
+- **PieChart** — **BETA.** Parts of a whole as slices: a pie or donut, concentric rings for several measures, a total in the hole, slice labels inside or out, and an active slice that pulls outward. → [`llms/components/pie-chart.md`](./llms/components/pie-chart.md)
 - **Pill** — A chip someone clicks: a filter, a tag choice, an option in a row. → [`llms/components/pill.md`](./llms/components/pill.md)
 - **Popover** — Click-triggered overlay over Base UI Popover (focus management, collision-aware positioning, Esc/outside dismissal). *Parts:* PopoverTrigger, PopoverContent, PopoverTitle, PopoverDescription, PopoverClose, PopoverArrow. → [`llms/components/popover.md`](./llms/components/popover.md)
 - **Progress** — Linear progress bar over Base UI Progress — value 0–100 drives the fill; omit value (or pass null) for an indeterminate, pulsing bar. *Parts:* ProgressTrack, ProgressIndicator, ProgressLabel, ProgressValue. → [`llms/components/progress.md`](./llms/components/progress.md)
+- **RadarChart** — **BETA.** Several measures compared around a centre: one polygon per series over a polygon or circular web, filled or outline only, with optional dots, a radius scale and a tinted web. → [`llms/components/radar-chart.md`](./llms/components/radar-chart.md)
+- **RadialChart** — **BETA.** Progress or share as rings: one ring per row against a muted track, a full circle or a gauge (`sweep`), one ring split between rows (`stacked`), ring labels and a value in the middle. → [`llms/components/radial-chart.md`](./llms/components/radial-chart.md)
 - **Radio** — Single-select control over Base UI RadioGroup + Radio (roving focus, arrow-key nav, ARIA radiogroup wiring, form integration). *Parts:* RadioGroup. → [`llms/components/radio.md`](./llms/components/radio.md)
 - **RadioCard** — A selectable card option (radio-card) over Base UI RadioGroup + Radio. *Parts:* RadioGroup. → [`llms/components/radio-card.md`](./llms/components/radio-card.md)
 - **RelativeTime** — A human relative timestamp (e.g. → [`llms/components/relative-time.md`](./llms/components/relative-time.md)
 - **Scroller** — Scroll container that fades its leading/trailing edges when content overflows. → [`llms/components/scroller.md`](./llms/components/scroller.md)
 - **ScrubField** — The compact numeric field a property grid is built from: a leading glyph inside the field that doubles as a drag-to-scrub handle, the value, and an optional unit. → [`llms/components/scrub-field.md`](./llms/components/scrub-field.md)
 - **SearchInput** — Styled search field with a leading magnifier and a clearable X. → [`llms/components/search-input.md`](./llms/components/search-input.md)
+- **SegmentedBar** — One bar split into the parts of a whole — revenue by type, storage by kind, results by outcome. → [`llms/components/segmented-bar.md`](./llms/components/segmented-bar.md)
 - **Select** — Listbox over Base UI Select — typeahead, roving focus, collision-aware popup, ARIA option wiring, and form integration. *Parts:* SelectTrigger, SelectContent, SelectItem, SelectGroup, SelectGroupLabel, SelectValue, SelectSeparator. → [`llms/components/select.md`](./llms/components/select.md)
 - **Separator** — A hairline divider. → [`llms/components/separator.md`](./llms/components/separator.md)
 - **SettingsMenu** — A compact trigger that states the current settings, over a menu of rows that change them. *Parts:* SettingsRow, MenuRadioGroup, MenuRadioItem. → [`llms/components/settings-menu.md`](./llms/components/settings-menu.md)
@@ -382,6 +433,7 @@ import { Button, Card, IconProvider, MotionProvider, SableThemeProvider, useSabl
 - **SideNav** — A lightweight in-content vertical navigation list - the settings / docs sub-nav, distinct from the app-chrome Sidebar. *Parts:* SideNavItem, SideNavGroup. → [`llms/components/side-nav.md`](./llms/components/side-nav.md)
 - **Skeleton** — Loading placeholder — a muted, shimmering block (rounded-md bg-muted motion-shimmer). → [`llms/components/skeleton.md`](./llms/components/skeleton.md)
 - **Slider** — Slider over Base UI Slider — pointer + keyboard control, ARIA slider wiring, and range support via multiple thumbs. *Parts:* SliderRoot, SliderControl, SliderTrack, SliderIndicator, SliderThumb, SliderValue. → [`llms/components/slider.md`](./llms/components/slider.md)
+- **Sparkline** — **BETA.** A word-sized trend with no axes — a line, a line over a soft fill, or columns — sized by its container, for stat cards, table cells and sentences. → [`llms/components/sparkline.md`](./llms/components/sparkline.md)
 - **Spinner** — Pure SVG activity indicator. → [`llms/components/spinner.md`](./llms/components/spinner.md)
 - **StatusBar** — The bottom chrome strip of a Workspace: ambient document facts — dimensions, counts, sync state — in the micro type tier. *Parts:* StatusBarGroup, StatusBarSeparator. → [`llms/components/status-bar.md`](./llms/components/status-bar.md)
 - **StatusDot** — A small colored status dot. → [`llms/components/status-dot.md`](./llms/components/status-dot.md)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sableui/react",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "Sable: themeable React components, layout patterns, and tools for coding agents.",
   "type": "module",
   "sideEffects": [
@@ -15,6 +15,10 @@
       "types": "./dist/patterns/index.d.ts",
       "default": "./dist/patterns/index.js"
     },
+    "./blocks": {
+      "types": "./dist/blocks/index.d.ts",
+      "default": "./dist/blocks/index.js"
+    },
     "./styles.css": "./dist/styles.css",
     "./themes.css": "./dist/themes.css",
     "./layout": {