@sableui/react 0.1.1 → 0.3.0

package/dist/index.d.ts

@@ -1,10 +1,10 @@
 import { ClassValue } from 'clsx';
-import { C as ComponentMeta } from './meta-6dUzgC6M.js';
-export { A as AnatomyMeta, B as BestPracticeMeta, E as ExampleMeta, M as MotionMeta, a as MotionSlot, b as PropMeta, R as RelatedMeta, S as SubcomponentMeta, U as UsageMeta } from './meta-6dUzgC6M.js';
-import { T as ThemeManifest, a as ThemeMode$1 } from './_contract-CYScOdf5.js';
-export { D as DENSITY_TOKENS, b as DensityToken, M as MOTION_TOKENS, c as MotionToken, R as RADIUS_TOKENS, d as RadiusToken, S as SEMANTIC_TOKENS, e as SemanticToken, f as TYPE_OVERLINE_TOKENS, g as TYPE_REFINEMENT_TOKENS, h as TYPE_SCALE_TOKENS, i as TYPE_UI_TOKENS, j as TypeOverlineToken, k as TypeRefinementToken, l as TypeScaleToken, m as TypeUiToken, W as WORKSPACE_SURFACE_TOKENS, n as WorkspaceSurfaceToken } from './_contract-CYScOdf5.js';
-import { T as ThemeId } from './theme-provider-BWcizhAt.js';
-export { D as DEFAULT_THEME_ID, S as SABLE_COLOR_STORAGE_KEY, a as SABLE_THEME_ATTRIBUTE, b as SABLE_THEME_STORAGE_KEY, c as SableColorMode, d as SableThemeContextValue, e as SableThemePreference, f as SableThemeProvider, g as SableThemeProviderProps, h as applySableColorMode, i as applySableTheme, k as defaultThemeId, m as getThemeManifest, o as isThemeId, t as themeIds, p as themeManifestById, q as themeManifests, u as useSableTheme } from './theme-provider-BWcizhAt.js';
+import { C as ComponentMeta } from './meta-CcE_SeFu.js';
+export { A as AnatomyMeta, a as BestPracticeMeta, E as ExampleMeta, M as MotionMeta, b as MotionSlot, c as PropMeta, R as RelatedMeta, S as SubcomponentMeta, U as UsageMeta } from './meta-CcE_SeFu.js';
+import { T as ThemeManifest, a as ThemeMode$1 } from './_contract-o3tUc8Ig.js';
+export { D as DENSITY_TOKENS, b as DensityToken, M as MOTION_TOKENS, c as MotionToken, R as RADIUS_TOKENS, d as RadiusToken, S as SEMANTIC_TOKENS, e as SemanticToken, f as TYPE_OVERLINE_TOKENS, g as TYPE_REFINEMENT_TOKENS, h as TYPE_SCALE_TOKENS, i as TYPE_UI_TOKENS, j as TypeOverlineToken, k as TypeRefinementToken, l as TypeScaleToken, m as TypeUiToken, W as WORKSPACE_SURFACE_TOKENS, n as WorkspaceSurfaceToken } from './_contract-o3tUc8Ig.js';
+import { T as ThemeId } from './theme-provider-BE-KqUG-.js';
+export { D as DEFAULT_THEME_ID, S as SABLE_COLOR_STORAGE_KEY, a as SABLE_THEME_ATTRIBUTE, b as SABLE_THEME_STORAGE_KEY, c as SableColorMode, d as SableThemeContextValue, e as SableThemePreference, f as SableThemeProvider, g as SableThemeProviderProps, h as applySableColorMode, i as applySableTheme, k as defaultThemeId, m as getThemeManifest, o as isThemeId, t as themeIds, p as themeManifestById, q as themeManifests, u as useSableTheme } from './theme-provider-BE-KqUG-.js';
 export { AspectBox, AspectBoxProps, Bleed, BleedProps, Breakpoint, Center, CenterProps, Col, ColProps, Columns, ColumnsProps, Grid, GridOverlay, GridOverlayProps, GridProps, Page, PageProps, Region, RegionMax, RegionProps, Responsive, Row, RowProps, SafeArea, SafeAreaProps, Spacer, SpacerProps, SplitPane, SplitPaneProps, Stack, StackProps } from './layout/index.js';
 export { Icon, IconContextValue, IconProps, IconProvider, IconProviderProps, composeIconSets, useIconSet } from './icon/index.js';
 export { reiconIconSet as fallbackIconSet, reiconIconNames, reiconIconSet } from './icon-sets/reicon.js';
@@ -122,7 +122,7 @@ declare const componentGuidance: Partial<Record<string, ComponentGuidance>>;
  * reader scanning for "Selection" or "Status" knows where to look without
  * knowing the system. A test keeps both lists sorted.
  */
-declare const COMPONENT_GROUPS: readonly ["Actions", "Badges & pills", "Chat & AI", "Containers", "Data display", "Forms", "Layout", "Loading & progress", "Media & mockups", "Navigation", "Overlays", "Selection", "Status", "Text & code"];
+declare const COMPONENT_GROUPS: readonly ["Actions", "Badges & pills", "Charts", "Chat & AI", "Containers", "Data display", "Forms", "Layout", "Loading & progress", "Media & mockups", "Navigation", "Overlays", "Selection", "Status", "Text & code"];
 type ComponentGroup = (typeof COMPONENT_GROUPS)[number];
 /** Which surface language a component speaks. */
 type ComponentRegister = "page" | "workspace" | "either";
@@ -423,12 +423,23 @@ declare namespace Card {
 }
 declare function CardHeader({ className, ...props }: ComponentPropsWithRef<"div">): react.JSX.Element;
 /**
- * Header-aligned action slot — pins to the top-right of CardHeader (e.g. a
- * dots menu, close button, or switch). Place as a child of CardHeader.
+ * Header-aligned action slot — pins to the top-right of CardHeader (e.g. an
+ * overflow menu, close button, or switch). Place as a child of CardHeader.
  */
 declare function CardAction({ className, ...props }: ComponentPropsWithRef<"div">): react.JSX.Element;
 /** Title tier — a UI primitive title, not a document heading. */
-declare function CardTitle({ className, ...props }: ComponentPropsWithRef<"div">): react.JSX.Element;
+interface CardTitleProps extends ComponentPropsWithRef<"div"> {
+    /**
+     * Render the title as another element — most often a heading, so a card's
+     * name joins the page outline: `render={<h2 />}`. The type tier stays.
+     */
+    render?: useRender.RenderProp;
+}
+/**
+ * The card's name. A `<div>` by default, because a card's heading level depends
+ * on where the card sits; pass `render={<h2 />}` (or h3…) to make it a heading.
+ */
+declare function CardTitle({ className, render, ref, ...props }: CardTitleProps): react.ReactElement<unknown, string | react.JSXElementConstructor<any>>;
 declare function CardDescription({ className, ...props }: ComponentPropsWithRef<"p">): react.JSX.Element;
 /**
  * The body region. Full padding on all sides — CardContent does NOT assume a
@@ -468,6 +479,18 @@ declare function CardContent({ className, flush, ...props }: CardContentProps):
  *   </Card>
  */
 declare function CardList({ className, ...props }: ComponentPropsWithRef<"div">): react.JSX.Element;
+/**
+ * The card's closing band. Its top padding is zero because the part above
+ * normally owns the seam (CardContent's own bottom padding) — so the two cases
+ * where nothing above does are handled here:
+ *
+ * - straight after a CardHeader (no content between), it takes the card
+ *   padding, or the actions sat right on the title;
+ * - after an edge-to-edge part (a flush CardContent, a CardList), whose last
+ *   row runs to the card's edges, it takes the padding AND a hairline — the
+ *   mirror of the hairline CardList draws under a CardHeader. Without it the
+ *   footer read as one more row of the table or list above it.
+ */
 declare function CardFooter({ className, ...props }: ComponentPropsWithRef<"div">): react.JSX.Element;
 
 declare const cardMeta: ComponentMeta;
@@ -616,10 +639,10 @@ type TitleProps$3 = Omit<ComponentProps<typeof Dialog$1.Title>, "className"> & {
     className?: string;
 };
 declare function DialogTitle({ className, ...props }: TitleProps$3): react.JSX.Element;
-type DescriptionProps$4 = Omit<ComponentProps<typeof Dialog$1.Description>, "className"> & {
+type DescriptionProps$3 = Omit<ComponentProps<typeof Dialog$1.Description>, "className"> & {
     className?: string;
 };
-declare function DialogDescription({ className, ...props }: DescriptionProps$4): react.JSX.Element;
+declare function DialogDescription({ className, ...props }: DescriptionProps$3): react.JSX.Element;
 declare function DialogHeader({ className, ...props }: ComponentProps<"div">): react.JSX.Element;
 declare function DialogFooter({ className, ...props }: ComponentProps<"div">): react.JSX.Element;
 /**
@@ -680,6 +703,36 @@ declare namespace Separator {
 
 declare const separatorMeta: ComponentMeta;
 
+/**
+ * The iOS 16px rule, and why these three fields carry a second type tier.
+ *
+ * Mobile Safari zooms the whole page when a text field is focused whose
+ * COMPUTED font-size is under 16px, and it does not zoom back out. The page
+ * register's body tier is `text-body-md` = 0.9375rem = **15px** at a 16px root,
+ * so focusing any Sable Input/Textarea on an iPhone shifted the layout — with
+ * nothing in the package handling it. (`--control-*` cannot help: the trigger
+ * is font-size, not box height.)
+ *
+ * The fix stays inside the tier system, because rule #2 forbids hand-setting a
+ * font-size next to a paired utility: below `sm` the field renders the next
+ * paired tier UP — `text-body-lg`, 1.0625rem = 17px, which is also iOS's own
+ * field size — and the designed tier takes over from `sm`. Written as
+ * `max-sm:` rather than `sm:` on purpose: only the mobile arm is a variant, so
+ * a consumer's own unprefixed `text-*` on `className` still wins at every width
+ * it used to.
+ *
+ * Do NOT collapse this to one tier and do NOT swap it for a raw `text-base`.
+ *
+ * Compact (workspace) register is deliberately excluded: styles.css clamps
+ * every page tier to `min(page, --type-ui-*)` inside `[data-density="compact"]`,
+ * so the bump literally cannot land there — it would only trade the tier's 500
+ * weight for 400 while staying 12px. A tool panel on an iPhone is a register
+ * mismatch, not a type bug.
+ *
+ * Every text-entry field (and SelectTrigger / DatePicker, which stand in the
+ * same row) wears it via lib/field-shell; this is where the reasoning is
+ * written down.
+ */
 interface InputProps$1 extends Omit<ComponentPropsWithRef<"input">, "size"> {
     /**
      * The control ladder, matching Select and Combobox: `md` is the form field;
@@ -1124,6 +1177,8 @@ declare const tooltipMeta: ComponentMeta;
  * Avatar root — a circular, fixed-size frame that clips its image. The only axis
  * is `size`, which sets the square footprint; the image and fallback inherit it.
  * `bg-muted` is the resting surface shown behind a loading or missing image.
+ * Each size also sets the label tier its initials (and a group's "+N") take,
+ * so the initials grow with the circle instead of one 12px label in all three.
  */
 declare const avatarVariants: (props?: ({
     size?: "sm" | "md" | "lg" | null | undefined;
@@ -1142,7 +1197,7 @@ declare const avatarVariants: (props?: ({
  */
 declare const avatarGroupVariants: (props?: ({
     size?: "sm" | "md" | "lg" | null | undefined;
-    surface?: "background" | "card" | "popover" | "muted" | null | undefined;
+    surface?: "card" | "background" | "popover" | "muted" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 
 /**
@@ -1266,8 +1321,8 @@ declare namespace AvatarGroup {
 declare const avatarMeta: ComponentMeta;
 
 /**
- * Skeleton — a loading placeholder. A muted block with a shimmer sweep that stands in for
- * content while it loads. Style the shape with utilities on the caller side:
+ * Skeleton — a loading placeholder. A muted block that stands in for content while it
+ * loads, with a sheen that passes through every skeleton on screen as one eased wave. Style the shape with utilities on the caller side:
  *
  *   <Skeleton className="h-4 w-40" />            // a text line
  *   <Skeleton className="size-10 rounded-full" /> // a circular avatar
@@ -1695,6 +1750,416 @@ declare const meterTrackVariants: (props?: ({
 
 declare const meterMeta: ComponentMeta;
 
+/**
+ * One segment's fill. The decorative tones lead, because a breakdown names
+ * categories (kinds of sale, file types, teams), not good and bad; the status
+ * tones are there for the breakdown that is a judgement (passed / flaky /
+ * failed).
+ */
+declare const segmentedBarSegmentVariants: (props?: ({
+    tone?: "primary" | "destructive" | "success" | "info" | "warning" | "neutral" | "standard" | "edition" | "collectible" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+/** Bar thickness — the same three rails as Meter and Progress. */
+declare const segmentedBarVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+
+type SegmentedBarTone = NonNullable<VariantProps<typeof segmentedBarSegmentVariants>["tone"]>;
+interface SegmentedBarSegment {
+    /** The category's name — read out in the bar's accessible summary. */
+    label: string;
+    /** Its amount, in any unit; segments are sized by their share of the total. */
+    value: number;
+    /** Fill colour. Omitted, segments take the decorative tones in order. */
+    tone?: SegmentedBarTone;
+}
+interface SegmentedBarProps extends Omit<ComponentPropsWithRef<"div">, "children" | "aria-label">, VariantProps<typeof segmentedBarVariants> {
+    /** The categories, in the order they should read left to right. */
+    segments: SegmentedBarSegment[];
+    /** What the bar breaks down ("Revenue by type"). Prefixes the spoken summary. */
+    label: string;
+    /** BCP 47 locale for the spoken percentages. Defaults to the runtime's. */
+    locale?: string;
+}
+/** The order segments take when they name no tone: the palette's decorative set first. */
+declare const SEGMENTED_BAR_TONES: readonly SegmentedBarTone[];
+/**
+ * One bar split into the parts of a whole — revenue by type, storage by kind,
+ * test results by outcome. `Meter` shows one reading against a range; this
+ * shows how a total divides. The legend is yours to compose (a StatusDot, the
+ * label and the share per row), because where it sits — under the bar, beside
+ * it, in a table — depends on the card.
+ *
+ * The bar is one image to assistive tech, named by `label` and every
+ * segment's share ("Revenue by type: Editions 42%, Collectibles 27%, …"), so a
+ * legend that repeats it visually can stay out of the accessible reading.
+ */
+declare function SegmentedBar({ segments, label, locale, size, className, ...props }: SegmentedBarProps): react.JSX.Element;
+declare namespace SegmentedBar {
+    var displayName: string;
+}
+
+declare const segmentedBarMeta: ComponentMeta;
+
+/**
+ * How a line runs between its points. `smooth` is monotone — it never
+ * overshoots a value the data does not contain, so a peak is drawn where it
+ * is; `step` holds each value to the midpoint between categories.
+ */
+type ChartCurve = "smooth" | "linear" | "step";
+
+/**
+ * A series colour by role. The decorative tones lead — a chart names
+ * categories (desktop / mobile, editions / collectibles), not good and bad —
+ * and they follow the active theme and Customize → Color → Palette. The
+ * status tones are for a series that IS a judgement (errors, warnings).
+ */
+type ChartTone = "edition" | "collectible" | "standard" | "info" | "warning" | "primary" | "neutral" | "success" | "destructive";
+/** How many series colours the palette holds (--chart-1 … --chart-8). */
+declare const CHART_SERIES_COUNT = 8;
+/**
+ * The colour of series `index` when it names none: the theme's chart palette,
+ * in order. The palette (`--chart-1` … `--chart-8`, defined by the Base theme
+ * and inherited by every other) is validated for colour-blind separation of
+ * neighbours, a normal-vision floor, a lightness band and a chroma floor, in
+ * light and dark. Past eight series, fold the rest into "Other".
+ *
+ * Also the bridge for a charting library: pass `chartColor(0)` and on to
+ * Recharts or visx and their marks follow the theme too.
+ */
+declare function chartColor(index: number): string;
+/**
+ * The CSS colour for a tone as a chart fill — for a series that names its role
+ * (`tone: "success"`), not for default series (see chartColor). Tones are
+ * tuned to be legible as TEXT (dark, restrained); a plotted mark keeps the hue
+ * but is lifted into the chart lightness band with a chroma floor, so a quiet
+ * tone (a slate "standard") still reads as colour rather than grey.
+ */
+declare function toneColor(tone: ChartTone): string;
+/** One plotted measure: which field of each datum, what to call it, how to colour it. */
+interface ChartSeries {
+    /** The datum field holding this series' numbers. */
+    key: string;
+    /** Its name in the legend, tooltip and data table. */
+    label: string;
+    /** Colour by role (a status series: `success`, `destructive`). Omitted, series take the chart palette in order. */
+    tone?: ChartTone;
+    /** A CSS colour that overrides `tone` — a token reference keeps it themeable. */
+    color?: string;
+    /** A Sable icon name shown in the legend and tooltip instead of the swatch. */
+    icon?: string;
+}
+/** One row of chart data: the category under `index`, numbers under each series key. */
+type ChartDatum = Record<string, unknown>;
+/**
+ * Per-category styling for charts whose marks ARE categories (pie slices,
+ * radial rings): keyed by the category's value in the data.
+ */
+type ChartCategories = Record<string, {
+    label?: string;
+    tone?: ChartTone;
+    color?: string;
+    icon?: string;
+}>;
+/** A big number with a caption in the middle of a donut or radial chart. */
+interface ChartCenterLabel {
+    value: string;
+    label?: string;
+}
+/** How the tooltip marks each row. */
+type ChartTooltipIndicator = "dot" | "line" | "dashed" | "none";
+interface ChartTooltipOptions {
+    /** Each row's marker. @default "dot" */
+    indicator?: ChartTooltipIndicator;
+    /** Drop the category heading — for a single series, where the value says enough. */
+    hideLabel?: boolean;
+    /** Rewrite the heading, e.g. a date key into "Tuesday, Oct 14". */
+    labelFormatter?: (label: string, datum: ChartDatum) => ReactNode;
+    /** Add a Total row summing every series at that category. */
+    showTotal?: boolean;
+}
+/** A number as it should read on the axis (compact) and in the tooltip (full). */
+type ChartValueFormatter = (value: number) => string;
+
+/** Props every cartesian chart (area, bar, line) shares. */
+interface CartesianBaseProps {
+    /** The rows to plot, in order along the category axis. */
+    data: ChartDatum[];
+    /** The datum field naming each row's category (a month, a day, a channel). */
+    index: string;
+    /** The measures to plot, with labels and colours. */
+    series: ChartSeries[];
+    /** What the chart shows — its accessible name and the data table's caption. */
+    label: string;
+    className?: string;
+    /** Format values on the axis, in labels, the tooltip and the data table. Default: compact on the axis, full elsewhere. */
+    valueFormatter?: ChartValueFormatter;
+    /** Format category labels on the axis ("January" → "Jan"). The tooltip keeps the full value. */
+    indexFormatter?: (value: string) => string;
+    /** BCP 47 locale for default number and date formatting. */
+    locale?: string;
+    /** Show a tooltip on hover and keyboard focus, or pass options. @default true */
+    tooltip?: boolean | ChartTooltipOptions;
+    /** Show the legend. @default true when there is more than one series */
+    legend?: boolean;
+    /** Hairline gridlines along the value axis. @default true (false for horizontal bars) */
+    grid?: boolean;
+    /** The horizontal axis. @default true for categories (columns), false for values (horizontal bars) */
+    xAxis?: boolean;
+    /** The vertical axis. @default false for values (columns), true for categories (horizontal bars) */
+    yAxis?: boolean;
+    /** Play the arrival when the chart scrolls into view. @default true */
+    animate?: boolean;
+    /** The highlighted row (controlled). `null` for none. */
+    activeIndex?: number | null;
+    /** The row highlighted at first — a tooltip that is open before anyone hovers. */
+    defaultActiveIndex?: number | null;
+    onActiveIndexChange?: (index: number | null) => void;
+}
+
+interface AreaChartProps extends CartesianBaseProps {
+    /** How the line runs between points. `smooth` never overshoots the data. @default "smooth" */
+    curve?: ChartCurve;
+    /** Stack the series on each other, or `"expand"` to show each category as 100%. @default false */
+    stacked?: boolean | "expand";
+    /** Fill each area with a fade from its colour to transparent instead of a flat tint. @default false */
+    gradient?: boolean;
+}
+/**
+ * A trend over a sequence (days, months), filled to the baseline — volume over
+ * time at a glance. Series overlap as translucent tints, or stack to show a
+ * total and its parts. The line draws on and the fill rises when the chart
+ * scrolls into view; changing data eases the shape from old to new.
+ */
+declare function AreaChart(props: AreaChartProps): react.JSX.Element;
+declare namespace AreaChart {
+    var displayName: string;
+}
+
+declare const areaChartMeta: ComponentMeta;
+
+interface BarChartProps extends CartesianBaseProps {
+    /** `vertical` columns rise from the bottom; `horizontal` bars run from the left, for long category names. @default "vertical" */
+    orientation?: "vertical" | "horizontal";
+    /** Stack the series in one bar, or `"expand"` to show each category as 100%. Unstacked series sit side by side. @default false */
+    stacked?: boolean | "expand";
+    /** Print each bar's value at its end, or (`"inside"`, horizontal) the category inside the bar too. @default false */
+    labels?: boolean | "inside";
+    /** Colour by series, or give each category its own tone (one series). @default "series" */
+    colorBy?: "series" | "index";
+    /** Colour negative values with this tone, so losses read apart from gains. */
+    negativeTone?: ChartTone;
+    /** Corner radius of each bar's far end, in px. Stacks round only the outer segment. @default 4 */
+    radius?: number;
+    /** Maximum thickness of a bar, in px — the band's leftover is air, not a fatter bar. Raise it for a bolder, presentation look. @default 24 */
+    barWidth?: number;
+}
+/**
+ * Bars comparing amounts across categories — the default chart for "how much
+ * of each". Grouped, stacked, 100% stacked, horizontal, labelled or diverging
+ * around zero. Bars rise from the baseline in sequence as the chart scrolls
+ * into view; changing data eases each bar to its new length.
+ */
+declare function BarChart(props: BarChartProps): react.JSX.Element;
+declare namespace BarChart {
+    var displayName: string;
+}
+
+declare const barChartMeta: ComponentMeta;
+
+interface LineChartProps extends CartesianBaseProps {
+    /** How the line runs between points. `smooth` never overshoots the data. @default "smooth" */
+    curve?: ChartCurve;
+    /** Mark every data point with a dot. @default false */
+    dots?: boolean;
+    /** Colour the dots by series, or each by its category. @default "series" */
+    colorBy?: "series" | "index";
+    /** Print each point's value above it. @default false */
+    labels?: boolean;
+}
+/**
+ * Lines over a sequence — for comparing how two or more measures move, where
+ * fills would pile up. Lines draw on as the chart scrolls into view; changing
+ * data eases each line from old to new.
+ */
+declare function LineChart(props: LineChartProps): react.JSX.Element;
+declare namespace LineChart {
+    var displayName: string;
+}
+
+declare const lineChartMeta: ComponentMeta;
+
+interface PieChartProps {
+    /** One row per slice. */
+    data: ChartDatum[];
+    /** The datum field naming each slice. */
+    index: string;
+    /** The datum field holding each slice's amount — or several fields, drawn as concentric rings (outer first). */
+    valueKey: string | string[];
+    /** What the chart shows — its accessible name and the data table's caption. */
+    label: string;
+    /** Labels, tones and icons per slice, keyed by the slice's name. Unlisted slices take the tones in order. */
+    categories?: ChartCategories;
+    className?: string;
+    /** Cut out the middle: `true` for a ring at 60% of the radius, or a ratio (0–0.9). @default false */
+    donut?: boolean | number;
+    /** A value and caption in the hole of a donut — the total, or the headline slice. */
+    centerLabel?: ChartCenterLabel;
+    /** A hairline in the surface colour between slices. @default true */
+    separator?: boolean;
+    /** Label each slice outside the pie or inside it. @default "none" */
+    labels?: "none" | "outside" | "inside";
+    /** What a slice label says. @default "value" */
+    labelContent?: "value" | "percent" | "name";
+    /** Show the legend. @default true unless slices are labelled */
+    legend?: boolean;
+    /** Show a tooltip on hover and keyboard focus, or pass options. @default true */
+    tooltip?: boolean | ChartTooltipOptions;
+    valueFormatter?: ChartValueFormatter;
+    locale?: string;
+    /** Sweep the slices in clockwise when the chart scrolls into view. @default true */
+    animate?: boolean;
+    /** The pulled-out slice (controlled). */
+    activeIndex?: number | null;
+    /** The slice pulled out at first — the one the caption is about. */
+    defaultActiveIndex?: number | null;
+    onActiveIndexChange?: (index: number | null) => void;
+}
+/**
+ * Parts of a whole as slices — share of traffic, budget split, survey answers.
+ * Best with two to six slices; past that, a BarChart compares more honestly.
+ * A donut leaves room in the middle for the total. The slices sweep in
+ * clockwise from 12 o'clock as the chart scrolls into view, and the active
+ * slice pulls outward.
+ */
+declare function PieChart({ data, index, valueKey, label, categories, className, donut, centerLabel, separator, labels, labelContent, legend, tooltip, valueFormatter, locale, animate, activeIndex, defaultActiveIndex, onActiveIndexChange, }: PieChartProps): react.JSX.Element;
+declare namespace PieChart {
+    var displayName: string;
+}
+
+declare const pieChartMeta: ComponentMeta;
+
+interface RadarChartProps {
+    /** One row per spoke (a skill, a month, a dimension). */
+    data: ChartDatum[];
+    /** The datum field naming each spoke. */
+    index: string;
+    /** The measures drawn as polygons. */
+    series: ChartSeries[];
+    /** What the chart shows — its accessible name and the data table's caption. */
+    label: string;
+    className?: string;
+    /** The web behind the polygons: straight rings, round rings, or none. @default "polygon" */
+    grid?: "polygon" | "circle" | "none";
+    /** Tint the web's outer ring. @default false */
+    gridFill?: boolean;
+    /** Fill each polygon; `false` draws outlines only. @default true */
+    filled?: boolean;
+    /** Mark every vertex with a dot. @default false */
+    dots?: boolean;
+    /** Print the ring values along the top spoke. @default false */
+    radiusAxis?: boolean;
+    /** Show the legend. @default true when there is more than one series */
+    legend?: boolean;
+    /** Show a tooltip on hover and keyboard focus, or pass options. @default true */
+    tooltip?: boolean | ChartTooltipOptions;
+    valueFormatter?: ChartValueFormatter;
+    locale?: string;
+    /** Grow the polygons from the centre when the chart scrolls into view. @default true */
+    animate?: boolean;
+    activeIndex?: number | null;
+    defaultActiveIndex?: number | null;
+    onActiveIndexChange?: (index: number | null) => void;
+}
+/**
+ * Several measures compared around a centre — a profile's shape at a glance
+ * (skills, product scores, a month-by-month cycle). Best with five to eight
+ * spokes and one to three series. Polygons grow out from the centre as the
+ * chart scrolls into view.
+ */
+declare function RadarChart({ data, index, series: rawSeries, label, className, grid, gridFill, filled, dots, radiusAxis, legend, tooltip, valueFormatter, locale, animate, activeIndex, defaultActiveIndex, onActiveIndexChange, }: RadarChartProps): react.JSX.Element;
+declare namespace RadarChart {
+    var displayName: string;
+}
+
+declare const radarChartMeta: ComponentMeta;
+
+interface RadialChartProps {
+    /** One row per ring, outermost first. */
+    data: ChartDatum[];
+    /** The datum field naming each ring. */
+    index: string;
+    /** The datum field holding each ring's amount. */
+    valueKey: string;
+    /** What the chart shows — its accessible name and the data table's caption. */
+    label: string;
+    /** Labels, tones and icons per ring, keyed by the ring's name. Unlisted rings take the tones in order. */
+    categories?: ChartCategories;
+    className?: string;
+    /** The value a full ring stands for. @default the largest value */
+    max?: number;
+    /** How far round a full ring runs, in degrees: 360 for a circle, 180 for a gauge. @default 360 */
+    sweep?: number;
+    /** Stack every row along ONE ring (a split gauge) instead of a ring each. @default false */
+    stacked?: boolean;
+    /** Draw each ring's full track behind it in the muted surface. @default true */
+    track?: boolean;
+    /** Name each ring at its start. @default false */
+    labels?: boolean;
+    /** A value and caption in the middle — the total, or the headline ring. */
+    centerLabel?: ChartCenterLabel;
+    /** Show the legend. @default true unless rings are labelled */
+    legend?: boolean;
+    /** Show a tooltip on hover and keyboard focus, or pass options. @default true */
+    tooltip?: boolean | ChartTooltipOptions;
+    valueFormatter?: ChartValueFormatter;
+    locale?: string;
+    /** Draw the rings round from their start when the chart scrolls into view. @default true */
+    animate?: boolean;
+    activeIndex?: number | null;
+    defaultActiveIndex?: number | null;
+    onActiveIndexChange?: (index: number | null) => void;
+}
+/**
+ * Progress or share drawn as rings — goals met, plan usage, a score. One ring
+ * per row (outermost first), each against a muted track; `sweep={180}` makes a
+ * gauge and `stacked` splits one ring between rows. Rings draw round from 12
+ * o'clock (or the gauge's left) as the chart scrolls into view.
+ */
+declare function RadialChart({ data, index, valueKey, label, categories, className, max, sweep, stacked, track, labels, centerLabel, legend, tooltip, valueFormatter, locale, animate, activeIndex, defaultActiveIndex, onActiveIndexChange, }: RadialChartProps): react.JSX.Element;
+declare namespace RadialChart {
+    var displayName: string;
+}
+
+declare const radialChartMeta: ComponentMeta;
+
+interface SparklineProps extends Omit<ComponentPropsWithRef<"svg">, "children" | "aria-label"> {
+    /** The values, oldest first. */
+    data: number[];
+    /** What the line tracks ("Revenue, last 30 days"). The spoken summary adds the range and latest value. */
+    label: string;
+    /** A line, a line over a soft fill, or columns. @default "line" */
+    variant?: "line" | "area" | "bar";
+    /** Colour by role. @default "primary" */
+    tone?: ChartTone;
+    /** Draw on (or rise) when it scrolls into view. @default true */
+    animate?: boolean;
+    /** BCP 47 locale for the spoken numbers. */
+    locale?: string;
+}
+/**
+ * A word-sized chart: the shape of a trend with no axes, inside a stat card,
+ * a table cell or a sentence. Sized by className (h-8 w-24 by default) and
+ * stretched to fit, so it follows its container. For values a reader needs
+ * to look up, use AreaChart or LineChart.
+ */
+declare function Sparkline({ data, label, variant, tone, animate, locale, className, ...props }: SparklineProps): react.JSX.Element;
+declare namespace Sparkline {
+    var displayName: string;
+}
+
+declare const sparklineMeta: ComponentMeta;
+
 type StepStatus = "complete" | "current" | "upcoming" | "error";
 type StepperOrientation = "horizontal" | "vertical";
 type StepperIndicator = "number" | "dot";
@@ -2127,11 +2592,11 @@ type TitleProps$2 = Omit<ComponentProps<typeof Popover$1.Title>, "className"> &
 };
 /** Accessible heading that labels the popover (Base UI wires aria-labelledby). */
 declare function PopoverTitle({ className, ...props }: TitleProps$2): react.JSX.Element;
-type DescriptionProps$3 = Omit<ComponentProps<typeof Popover$1.Description>, "className"> & {
+type DescriptionProps$2 = Omit<ComponentProps<typeof Popover$1.Description>, "className"> & {
     className?: string;
 };
 /** Supplementary copy below the title (Base UI wires aria-describedby). */
-declare function PopoverDescription({ className, ...props }: DescriptionProps$3): react.JSX.Element;
+declare function PopoverDescription({ className, ...props }: DescriptionProps$2): react.JSX.Element;
 type ArrowProps$1 = Omit<ComponentProps<typeof Popover$1.Arrow>, "className"> & {
     className?: string;
 };
@@ -2319,10 +2784,10 @@ type TitleProps$1 = Omit<ComponentProps<typeof Drawer.Title>, "className"> & {
     className?: string;
 };
 declare function SheetTitle({ className, ...props }: TitleProps$1): react.JSX.Element;
-type DescriptionProps$2 = Omit<ComponentProps<typeof Drawer.Description>, "className"> & {
+type DescriptionProps$1 = Omit<ComponentProps<typeof Drawer.Description>, "className"> & {
     className?: string;
 };
-declare function SheetDescription({ className, ...props }: DescriptionProps$2): react.JSX.Element;
+declare function SheetDescription({ className, ...props }: DescriptionProps$1): react.JSX.Element;
 /** Stacked title + description block, pinned to the top of the sheet. */
 declare function SheetHeader({ className, ...props }: ComponentProps<"div">): react.JSX.Element;
 /** Action row, pushed to the bottom edge of the sheet via mt-auto. */
@@ -2356,17 +2821,32 @@ declare function TableRow({ className, ...props }: ComponentPropsWithRef<"tr">):
 declare namespace TableRow {
     var displayName: string;
 }
+interface TableHeadProps extends ComponentPropsWithRef<"th"> {
+    /** A numeric column — end-aligned, tabular figures. Set it on the column's cells too. */
+    numeric?: boolean;
+}
 /** A column header cell. */
-declare function TableHead({ className, ...props }: ComponentPropsWithRef<"th">): react.JSX.Element;
+declare function TableHead({ className, numeric, ...props }: TableHeadProps): react.JSX.Element;
 declare namespace TableHead {
     var displayName: string;
 }
+interface TableCellProps extends ComponentPropsWithRef<"td"> {
+    /** A numeric cell — end-aligned, tabular figures. Match the column's header. */
+    numeric?: boolean;
+}
 /** A body cell. */
-declare function TableCell({ className, ...props }: ComponentPropsWithRef<"td">): react.JSX.Element;
+declare function TableCell({ className, numeric, ...props }: TableCellProps): react.JSX.Element;
 declare namespace TableCell {
     var displayName: string;
 }
-/** A bottom caption describing the table. */
+/**
+ * A bottom caption describing the table. It is the table's last band, so it is
+ * built like one: a hairline above it closes off the last row (TableBody drops
+ * that row's own border), it sits on the cells' text edge (`--table-edge-px`,
+ * so it lines up inside a flush Card too), and it has room below it rather
+ * than touching whatever contains the table. Start-aligned, not the browser's
+ * centred default — it reads with the cells, not as a title under them.
+ */
 declare function TableCaption({ className, ...props }: ComponentPropsWithRef<"caption">): react.JSX.Element;
 declare namespace TableCaption {
     var displayName: string;
@@ -2449,9 +2929,11 @@ declare const dataTableMeta: ComponentMeta;
  *   `selected` (the reader's own choice) takes a primary tint and a soft
  *   primary edge — distinct from rest without a heavy dark outline.
  *
- * `size="sm"` sits on the density ladder's xs control height and drops the
- * optical label nudge, which a fixed-height chip centred with `items-center`
- * does not need. Semantic tokens only — theme-safe in light and dark.
+ * Both sizes are fixed heights, md the larger: md sits on the density ladder's
+ * xs control height (28px), sm is 24px — the touch-target floor. md used to be
+ * padding-sized (~18px) while sm was 28px, so the "small" chip was the taller
+ * one. A fixed-height chip centred with `items-center` needs no optical nudge,
+ * so both drop it. Semantic tokens only — theme-safe in light and dark.
  */
 declare const pillVariants: (props?: ({
     appearance?: "outline" | "solid" | null | undefined;
@@ -2584,6 +3066,30 @@ declare namespace Calendar {
 
 declare const calendarMeta: ComponentMeta;
 
+interface DateTileProps extends Omit<ComponentPropsWithRef<"time">, "children" | "dateTime"> {
+    /** The day to show. Read in local time — the tile names a calendar day, not an instant. */
+    date: Date;
+    /** BCP 47 locale for the month name. Defaults to the runtime's. */
+    locale?: string;
+}
+/**
+ * A calendar-page date: the month on a primary band over the day number. The
+ * leading visual of an event, booking or deadline row — where a date is the
+ * thing you scan for, not a detail in a sentence (that is `RelativeTime`, or
+ * plain text).
+ *
+ * The corner follows the look up to a cap: past about the band's own height,
+ * the curve starts cutting into the band and its text. `h-fit`, because the
+ * tile usually sits in a flex row beside two lines of text and must not
+ * stretch to their height.
+ */
+declare function DateTile({ date, locale, className, ...props }: DateTileProps): react.JSX.Element;
+declare namespace DateTile {
+    var displayName: string;
+}
+
+declare const dateTileMeta: ComponentMeta;
+
 /**
  * The trigger attributes a `Field` (or a hand-rolled label) wires onto its
  * control. Forwarded to the trigger button, so `<Field label=…><DatePicker /></Field>`
@@ -2749,6 +3255,10 @@ type ViewportProps = Omit<ComponentProps<typeof Toast.Viewport>, "className"> &
  * is irrelevant since it's screen-anchored. Pointer events pass through the gaps
  * so the page stays interactive around the toasts. `position` picks the anchor;
  * `className` merges last for safe-area or offset tweaks.
+ *
+ * Portaled to `<body>`: rendered in place, `fixed` resolved against any ancestor
+ * with a transform, translate, filter or contain (a route's enter animation is
+ * enough), so the stack landed in the content column instead of the screen corner.
  */
 declare function ToastViewport({ className, position, ...props }: ViewportProps): react.JSX.Element;
 type RootProps$1 = Omit<ComponentProps<typeof Toast.Root>, "className"> & {
@@ -2765,11 +3275,11 @@ type TitleProps = Omit<ComponentProps<typeof Toast.Title>, "className"> & {
 };
 /** The toast headline. Auto-associated as the toast's accessible name. */
 declare function ToastTitle({ className, ...props }: TitleProps): react.JSX.Element;
-type DescriptionProps$1 = Omit<ComponentProps<typeof Toast.Description>, "className"> & {
+type DescriptionProps = Omit<ComponentProps<typeof Toast.Description>, "className"> & {
     className?: string;
 };
 /** Supporting body copy beneath the title. */
-declare function ToastDescription({ className, ...props }: DescriptionProps$1): react.JSX.Element;
+declare function ToastDescription({ className, ...props }: DescriptionProps): react.JSX.Element;
 type CloseProps = Omit<ComponentProps<typeof Toast.Close>, "className"> & {
     className?: string;
 };
@@ -3424,7 +3934,14 @@ declare const paginationMeta: ComponentMeta;
 
 interface CodeProps extends ComponentPropsWithRef<"code"> {
 }
-/** Inline code. A styled `<code>` for code spans inside running text. */
+/**
+ * Inline code. A styled `<code>` for code spans inside running text.
+ *
+ * Sized from the text it sits in (`0.875em` — a mono face runs large, so a
+ * touch under the surrounding size reads as the same size), not a fixed tier:
+ * the fixed 11px read as fine print inside 15px body copy and went smaller
+ * still in a heading. Padding is in em for the same reason.
+ */
 declare function Code({ className, ...props }: CodeProps): react.JSX.Element;
 declare namespace Code {
     var displayName: string;
@@ -3477,6 +3994,25 @@ declare namespace CodeBlock {
 
 declare const codeBlockMeta: ComponentMeta;
 
+/**
+ * The cap, sized from the text it sits in rather than fixed: `0.85em` type
+ * (never under 12px) in a box `1.6em` of its own type tall, so the same Kbd
+ * reads right inline in body copy, in a 12px menu row and in a tooltip.
+ *
+ * Sans, not mono: word keys (Esc, Enter, Ctrl) read as labels, and the modifier
+ * symbols (⌘ ⇧ ⌥ ↵) are not in most mono faces — they fell back to a tiny
+ * system glyph. Tabular figures keep number keys on one width.
+ *
+ * `key` is a raised key ON whatever surface it sits on (it takes the surface's
+ * own fill, published as `--sable-surface-bg`), with a heavier bottom edge as
+ * the key's lip — the flat muted chip it replaced barely read in dark mode.
+ * `ghost` drops the cap for places that are already a surface of their own: a
+ * menu row's shortcut column, a tooltip, an inverted chip.
+ */
+declare const KBD_VARIANTS: {
+    readonly key: "rounded-xs border border-border border-b-border-strong bg-[var(--sable-surface-bg,var(--background))] text-muted-foreground shadow-[0_1px_0_0_var(--border)]";
+    readonly ghost: "text-current opacity-70";
+};
 interface KbdProps extends ComponentPropsWithRef<"kbd"> {
     /**
      * Render the platform's shortcut modifier instead of children: `⌘` on macOS
@@ -3485,16 +4021,43 @@ interface KbdProps extends ComponentPropsWithRef<"kbd"> {
      */
     mod?: boolean;
 }
+interface KbdProps extends ComponentPropsWithRef<"kbd"> {
+    /**
+     * Render the platform's shortcut modifier instead of children: `⌘` on macOS
+     * and iOS, `Ctrl` everywhere else. Hardcoding either one shows half your
+     * users the wrong key. @default false
+     */
+    mod?: boolean;
+    /**
+     * `key` draws a raised key cap; `ghost` is the bare label, for a menu row,
+     * tooltip or any surface that is already its own frame. @default "key"
+     */
+    variant?: keyof typeof KBD_VARIANTS;
+}
 /**
  * A keyboard key indicator. Renders a styled `<kbd>` for a single key cap.
- * `mod` renders the platform's shortcut modifier (⌘ or Ctrl).
+ * `mod` renders the platform's shortcut modifier (⌘ or Ctrl). Show a combo as
+ * one cap per key inside a KbdGroup.
  *
- *   <Kbd mod /> <Kbd>K</Kbd>
+ *   <KbdGroup><Kbd mod /><Kbd>K</Kbd></KbdGroup>
  */
-declare function Kbd({ mod, className, children, ...props }: KbdProps): react.JSX.Element;
+declare function Kbd({ mod, variant, className, children, ...props }: KbdProps): react.JSX.Element;
 declare namespace Kbd {
     var displayName: string;
 }
+interface KbdGroupProps extends ComponentPropsWithRef<"kbd"> {
+}
+/**
+ * A shortcut combo: one cap per key, set tight together. A nested `<kbd>` is
+ * the HTML spelling of "this key, then that key", so the combo is announced as
+ * one piece of keyboard input.
+ *
+ *   <KbdGroup><Kbd mod /><Kbd>⇧</Kbd><Kbd>P</Kbd></KbdGroup>
+ */
+declare function KbdGroup({ className, ...props }: KbdGroupProps): react.JSX.Element;
+declare namespace KbdGroup {
+    var displayName: string;
+}
 
 declare const kbdMeta: ComponentMeta;
 
@@ -3656,7 +4219,7 @@ declare namespace Banner {
 declare const bannerMeta: ComponentMeta;
 
 interface EmptyStateProps extends Omit<ComponentPropsWithRef<"div">, "title"> {
-    /** A glyph in a tinted disc. A destructive state shows a warning by default. */
+    /** A glyph, image or illustration above the title. A destructive state shows a warning by default. */
     icon?: ReactNode;
     title: ReactNode;
     description?: ReactNode;
@@ -3664,7 +4227,7 @@ interface EmptyStateProps extends Omit<ComponentPropsWithRef<"div">, "title"> {
     /** A large figure above the title — an error code like 404. */
     code?: ReactNode;
     /**
-     * `destructive` is an error state: a destructive disc, and `role="alert"` so
+     * `destructive` is an error state: a destructive glyph, and `role="alert"` so
      * it is announced. @default "neutral"
      */
     tone?: "neutral" | "destructive";
@@ -3678,7 +4241,7 @@ interface EmptyStateProps extends Omit<ComponentPropsWithRef<"div">, "title"> {
 }
 /**
  * EmptyState — the centred "nothing here / something went wrong" block: an
- * optional disc or code, a title, a description and an action. One component
+ * optional glyph or code, a title, a description and an action. One component
  * for empty lists, page-level errors (`tone="destructive"`, `code`, `size="lg"`)
  * and error cards (`surface="card"`); it used to be three — EmptyState,
  * ErrorState and ErrorCard — whose titles, widths and spacing had drifted.
@@ -4390,22 +4953,6 @@ interface SidebarProps extends ComponentPropsWithRef<"aside"> {
      */
     variant?: "app" | "inline";
 }
-/**
- * Sidebar — the desktop side-navigation rail. An in-flow sticky column, hidden
- * below `lg` (where the mobile AppHeader + BottomNav take over). Compose a brand
- * header, a scrollable nav, and a bottom-anchored footer:
- *
- *   <Sidebar collapsed={collapsed}>
- *     <SidebarHeader>{brand}</SidebarHeader>
- *     <SidebarNav>
- *       <SidebarItem icon={<Icon name="home" />} label="Home" active render={<Link to="/" />} />
- *     </SidebarNav>
- *     <SidebarFooter>{walletTrigger}</SidebarFooter>
- *   </Sidebar>
- *
- * Width is the `--sidebar-width` token (16rem), or `--sidebar-width-collapsed`
- * (4rem) when `collapsed`; colors are the `--sidebar-*` set.
- */
 declare function Sidebar({ collapsed, icons, variant, className, children, ...props }: SidebarProps): react.JSX.Element;
 declare namespace Sidebar {
     var displayName: string;
@@ -4626,71 +5173,6 @@ declare namespace PageHeader {
 
 declare const pageHeaderMeta: ComponentMeta;
 
-/**
- * The definition-list container. A single-column grid by default; `cols="2"`
- * lays term/detail pairs two-wide when the list is at least @md wide (a container query) for compact metadata blocks.
- * Semantic tokens only — no palette references.
- */
-declare const descriptionVariants: (props?: ({
-    cols?: "1" | "2" | null | undefined;
-} & class_variance_authority_types.ClassProp) | undefined) => string;
-/**
- * The detail (value) tone. `default` is the plain foreground value; the semantic
- * tones color a status value (e.g. "Ended" muted, "Active" success) without an
- * inline conditional palette class. Semantic tokens only.
- */
-declare const detailToneVariants: (props?: ({
-    tone?: "muted" | "destructive" | "success" | "default" | "warning" | null | undefined;
-} & class_variance_authority_types.ClassProp) | undefined) => string;
-
-/** Detail value tone — see `detailToneVariants`. */
-type DescriptionTone = NonNullable<VariantProps<typeof detailToneVariants>["tone"]>;
-interface DescriptionProps extends ComponentPropsWithRef<"dl">, VariantProps<typeof descriptionVariants> {
-}
-/**
- * A labeled key/value list (definition list). Compose with `DescriptionTerm` +
- * `DescriptionDetail`, or use the ergonomic `DescriptionItem` shorthand. The
- * grid aligns terms and details into columns; `cols="2"` packs pairs two-wide once the list's container is wide enough.
- */
-declare function Description({ cols, className, ...props }: DescriptionProps): react.JSX.Element;
-declare namespace Description {
-    var displayName: string;
-}
-/** The key. Muted label tier; sits in the first grid column. */
-declare function DescriptionTerm({ className, ...props }: ComponentPropsWithRef<"dt">): react.JSX.Element;
-declare namespace DescriptionTerm {
-    var displayName: string;
-}
-interface DescriptionDetailProps extends ComponentPropsWithRef<"dd">, VariantProps<typeof detailToneVariants> {
-}
-/**
- * The value. Body tier on the foreground; sits in the second grid column. Pass a
- * `tone` to color a status value (success/warning/destructive/muted).
- */
-declare function DescriptionDetail({ tone, className, ...props }: DescriptionDetailProps): react.JSX.Element;
-declare namespace DescriptionDetail {
-    var displayName: string;
-}
-interface DescriptionItemProps {
-    /** The key shown in the term column. */
-    term: ReactNode;
-    /** The value shown in the detail column. Falls back to `children`. */
-    detail?: ReactNode;
-    /** Color the detail value to encode a status (success/warning/destructive/muted). */
-    tone?: DescriptionTone;
-    children?: ReactNode;
-}
-/**
- * Ergonomic shorthand for one term/detail pair — renders a `DescriptionTerm`
- * followed by a `DescriptionDetail`. Pass the value via `detail` or `children`.
- */
-declare function DescriptionItem({ term, detail, tone, children, }: DescriptionItemProps): react.JSX.Element;
-declare namespace DescriptionItem {
-    var displayName: string;
-}
-
-declare const descriptionMeta: ComponentMeta;
-
 interface SearchInputProps extends Omit<ComponentPropsWithRef<"input">, "onChange" | "value" | "defaultValue"> {
     /** Controlled value of the search field. */
     value?: string;
@@ -5156,9 +5638,16 @@ interface EntityBaseProps extends VariantProps<typeof entityVariants> {
 type EntityProps = EntityBaseProps & Omit<ComponentPropsWithRef<"div">, "title" | "onSelect"> & ({
     interactive?: false;
     onSelect?: never;
+    selected?: never;
 } | {
     interactive: true;
     onSelect: () => void;
+    /**
+     * The current row of a selectable list (the open record in a
+     * list–detail view): the row's button gets `aria-current="true"` and
+     * the row takes the selected fill, which also holds on hover.
+     */
+    selected?: boolean;
 });
 /**
  * Entity — a list-row record: a leading visual, a title/subtitle column, and a
@@ -5166,7 +5655,8 @@ type EntityProps = EntityBaseProps & Omit<ComponentPropsWithRef<"div">, "title"
  * row never advertises clickability. The center column is `min-w-0` so both
  * lines truncate cleanly.
  *
- * Pass `interactive` + `onSelect` to make the entire row a target. The leading
+ * Pass `interactive` + `onSelect` to make the entire row a target, and
+ * `selected` to mark the current row of a selectable list. The leading
  * visual and the text column become a real `<button>` (native focus, Enter and
  * Space), whose `::after` is stretched over the whole row so a click anywhere
  * selects it. The trailing `action` stays OUTSIDE that button and is lifted above
@@ -5176,7 +5666,7 @@ type EntityProps = EntityBaseProps & Omit<ComponentPropsWithRef<"div">, "title"
  *   <Entity interactive onSelect={() => select(user)}
  *     leading={<Avatar fallback="AM" />} title="Alex Morgan" subtitle="@alex" />
  */
-declare function Entity({ leading, title, subtitle, action, density, className, interactive, onSelect, ...props }: EntityProps): react.JSX.Element;
+declare function Entity({ leading, title, subtitle, action, density, className, interactive, onSelect, selected, ...props }: EntityProps): react.JSX.Element;
 declare namespace Entity {
     var displayName: string;
 }
@@ -5306,7 +5796,8 @@ interface ShowMoreProps extends ComponentPropsWithRef<"div"> {
 /**
  * ShowMore — a collapsible content region with a bottom fade and a toggle.
  * Clips its children to `collapsedLines` (or `collapsedHeight`) while
- * collapsed, overlays a gradient fade (from-background) so the cut text
+ * collapsed, overlays a gradient fade (from the surface it sits on — the
+ * `--sable-surface-bg` a Card or popover publishes, else the page) so the cut text
  * dissolves, and reveals the full content on toggle. Self-contained state
  * (useState); no Base UI behavior.
  *
@@ -5643,7 +6134,7 @@ declare namespace CommandMenuTrigger {
 declare const commandMenuMeta: ComponentMeta;
 
 type MenuContentProps = ComponentProps<typeof MenuContent>;
-interface DotsMenuProps {
+interface OverflowMenuProps {
     /** The menu rows — MenuItem / MenuSeparator / MenuGroup, etc. */
     children: ReactNode;
     /** Alignment of the popup along its side. @default "end" */
@@ -5661,26 +6152,26 @@ interface DotsMenuProps {
     size?: "icon" | "icon-sm" | "icon-xs";
 }
 /**
- * DotsMenu — an overflow "…" icon button that opens a Menu. A thin composition
+ * OverflowMenu — the "more actions" icon button that opens a Menu. A thin composition
  * over our own Menu + Button + Icon: pass MenuItems as children and it wires the
  * ghost icon trigger, accessible label, and portal-rendered content for you.
  *
- *   <DotsMenu label="Post actions">
+ *   <OverflowMenu label="Post actions">
  *     <MenuItem>Edit</MenuItem>
  *     <MenuItem>Share</MenuItem>
  *     <MenuSeparator />
  *     <MenuItem variant="destructive">Delete</MenuItem>
- *   </DotsMenu>
+ *   </OverflowMenu>
  *
  * All Base UI menu behavior (roving focus, typeahead, Esc/outside dismissal)
  * comes through Menu; this component only owns the trigger affordance.
  */
-declare function DotsMenu({ children, align, label, icon, size, }: DotsMenuProps): react.JSX.Element;
-declare namespace DotsMenu {
+declare function OverflowMenu({ children, align, label, icon, size, }: OverflowMenuProps): react.JSX.Element;
+declare namespace OverflowMenu {
     var displayName: string;
 }
 
-declare const dotsMenuMeta: ComponentMeta;
+declare const overflowMenuMeta: ComponentMeta;
 
 /**
  * ContextCard — a themed rich hover/preview card over Base UI's PreviewCard
@@ -6559,12 +7050,12 @@ interface BubbleProps extends ComponentPropsWithRef<"div"> {
      */
     variant?: "muted" | "primary" | "outline" | "plain";
     /**
-     * Which side of the conversation the bubble is on — flattens the corner
-     * nearest the speaker. Match it to the enclosing `<Message align>`.
+     * Which side of the conversation the bubble is on — puts the tail on
+     * the speaker's side. Match it to the enclosing `<Message align>`.
      * @default "start"
      */
     align?: "start" | "end";
-    /** Flatten the speaker-side corner. Turn it off for a run of grouped messages. @default true */
+    /** Draw the speaker-side tail. Turn it off for a run of grouped messages. @default true */
     tail?: boolean;
 }
 /**
@@ -6591,10 +7082,10 @@ interface BubbleProps extends ComponentPropsWithRef<"div"> {
  *
  * Two judgment calls worth inheriting: the bubble is capped at a readable
  * measure (~42rem) so a wide window does not produce 140-character lines, and
- * the "tail" is a flattened corner rather than a drawn arrow so it survives
- * every theme's radius language without per-theme geometry.
+ * the tail is a small ear off a squared top corner, the same 5px in every
+ * theme's radius language, so the speaker's side always reads.
  */
-declare function Bubble({ variant, align, tail, className, ...props }: BubbleProps): react.JSX.Element;
+declare function Bubble({ variant, align, tail, className, children, ...props }: BubbleProps): react.JSX.Element;
 declare namespace Bubble {
     var displayName: string;
 }
@@ -7008,6 +7499,6 @@ interface UseCopyResult {
  */
 declare function useCopy(text: string, { timeout }?: UseCopyOptions): UseCopyResult;
 
-declare const SABLE_UI_VERSION: "0.1.1";
+declare const SABLE_UI_VERSION: "0.3.0";
 
-export { Accordion, AccordionItem, AccordionPanel, AccordionTrigger, AlertDialog, AlertDialogClose, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogTitle, AlertDialogTrigger, AppHeader, type AppHeaderProps, AppShell, type AppShellProps, Attachment, type AttachmentProps, Avatar, AvatarFallback, AvatarGroup, AvatarGroupCount, type AvatarGroupCountProps, type AvatarGroupProps, AvatarImage, type AvatarProps, AvatarRoot, BADGE_APPEARANCES, BADGE_TONES, Badge, type BadgeAppearance, type BadgeProps, type BadgeTone, Banner, type BannerProps, BottomNav, BottomNavItem, type BottomNavItemProps, BreadcrumbItem, type BreadcrumbItemProps, BreadcrumbLink, type BreadcrumbLinkProps, BreadcrumbPage, type BreadcrumbPageProps, BreadcrumbSeparator, type BreadcrumbSeparatorProps, Breadcrumbs, type BreadcrumbsProps, Browser, type BrowserProps, Bubble, type BubbleProps, BubbleReaction, type BubbleReactionProps, BubbleReactions, type BubbleReactionsProps, Button, type ButtonProps, COMPONENT_GROUPS, COMPONENT_TAXONOMY, Calendar, type CalendarProps, Card, CardAction, CardContent, type CardContentProps, CardDescription, CardFooter, CardHeader, CardList, type CardProps, CardTitle, Carousel, type CarouselProps, type CarouselSlidesToShow, ChatComposer, type ChatComposerProps, Checkbox, CheckboxCard, type CheckboxCardProps, type CheckboxCardTone, CheckboxGroup, type CheckboxGroupProps, Code, CodeBlock, type CodeBlockProps, CodeHighlightProvider, type CodeHighlighter, type CodeProps, Collapsible, CollapsibleIndicator, CollapsiblePanel, CollapsibleTrigger, ColorField, type ColorFieldProps, Combobox, ComboboxChips, ComboboxClear, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxGroupLabel, ComboboxInput, ComboboxItem, type ComboboxItemGroup, ComboboxItemIndicator, ComboboxList, ComboboxPortal, type ComboboxProps, ComboboxValue, ComboboxVirtualList, type ComboboxVirtualListProps, type CommandFilter, type CommandItem, CommandMenu, CommandMenuGroup, type CommandMenuGroupProps, CommandMenuItem, type CommandMenuItemProps, CommandMenuPanel, type CommandMenuPanelProps, type CommandMenuProps, CommandMenuTrigger, type CommandMenuTriggerProps, type ComponentGroup, type ComponentGuidance, ComponentMeta, type ComponentRegister, ContextCard, ContextCardArrow, ContextCardContent, ContextCardPortal, ContextCardTrigger, ContextMenu, ContextMenuContent, ContextMenuGroup, ContextMenuGroupLabel, ContextMenuItem, ContextMenuPortal, ContextMenuSeparator, ContextMenuTrigger, DataTable, type DataTableColumn, type DataTableProps, DatePicker, type DatePickerProps, Density, DensityProvider, Density as DensityValue, Description, DescriptionDetail, DescriptionItem, type DescriptionItemProps, type DescriptionProps, DescriptionTerm, DestructiveActionModal, type DestructiveActionModalProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, type DialogSize, DialogTitle, DialogTrigger, DotsMenu, type DotsMenuProps, EmptyState, type EmptyStateProps, Entity, type EntityProps, Feedback, type FeedbackData, type FeedbackProps, type FeedbackRating, Field, type FieldProps, Fieldset, FieldsetContent, FieldsetDescription, FieldsetFooter, FieldsetLegend, FileDropzone, type FileDropzoneProps, type FileRejection, type FileRejectionCode, Form, type FormProps, GlidingHighlight, type GlidingHighlightProps, type Hsv, InlineStatus, type InlineStatusProps, type StatusTone as InlineTone, Input, type InputProps$1 as InputProps, Kbd, type KbdProps, Label, type LabelProps$2 as LabelProps, Marker, type MarkerProps, Marquee, type MarqueeProps, Menu, MenuCheckboxItem, MenuContent, MenuGroup, MenuGroupLabel, MenuItem, MenuPortal, MenuRadioGroup, MenuRadioItem, MenuSeparator, MenuSubmenu, MenuSubmenuTrigger, MenuTrigger, Message, type MessageProps, MessageScroller, type MessageScrollerHandle, type MessageScrollerProps, Meter, MeterIndicator, MeterLabel, type MeterSize, type MeterTone, MeterTrack, MeterValue, MiddleTruncate, type MiddleTruncateProps, type MotionPolicy, MotionProvider, type MotionProviderProps, Note, type NoteAction, type NoteProps, NotificationBadge, type NotificationBadgeProps, NumberField, type NumberFieldProps, type OrbMode, type OrbSize, OtpField, type OtpFieldProps, PageHeader, type PageHeaderProps, PageLoader, type PageLoaderProps, Pagination, type PaginationProps, Panel, PanelGroup, PanelResizer, type PanelResizerProps, PanelSection, type PanelWidthBounds, Phone, type PhoneProps, Pill, type PillProps, Popover, PopoverArrow, PopoverClose, PopoverContent, PopoverDescription, PopoverPortal, PopoverTitle, PopoverTrigger, Presence, type PresenceProps, Progress, ProgressIndicator, ProgressLabel, type ProgressSize, ProgressTrack, ProgressValue, PropertyPair, PropertyRow, Radio, RadioCard, type RadioCardProps, type RadioCardTone, RadioGroup, RelativeTime, type RelativeTimeProps, Reveal, type RevealProps, type Rgb, SABLE_UI_VERSION, STATUS_TONES, STATUS_TONE_ICON, type ScrollCommandOptions, Scroller, type ScrollerProps, ScrubField, type ScrubFieldProps, SearchInput, type SearchInputProps, Select, SelectContent, SelectGroup, SelectGroupLabel, SelectItem, SelectPortal, SelectSeparator, SelectTrigger, SelectValue, Separator, type SeparatorProps$3 as SeparatorProps, SettingsMenu, type SettingsMenuProps, SettingsRow, type SettingsRowProps, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetPortal, SheetTitle, SheetTrigger, ShowMore, type ShowMoreProps, SideNav, type SideNavActiveVariant, SideNavGroup, type SideNavGroupProps, SideNavItem, type SideNavItemProps, type SideNavProps, type SideNavSize, Sidebar, SidebarFooter, SidebarHeader, SidebarItem, type SidebarItemProps, SidebarNav, type SidebarProps, SimpleTooltip, Skeleton, Slider, SliderControl, SliderIndicator, SliderRoot, SliderThumb, SliderTrack, SliderValue, Spinner, type SpinnerProps, StatusBar, StatusBarGroup, StatusBarSeparator, StatusDot, type StatusDotProps, type StatusTone, type StepStatus, Stepper, StepperItem, type StepperItemProps, type StepperOrientation, type StepperProps, StreamingText, type StreamingTextProps, Switch, TRANSPARENT, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsPanel as TabsContent, TabsList, TabsPanel, TabsTrigger, TextReveal, type TextRevealProps, Textarea, type TextareaProps, ThemeId, ThemeManifest, ThemeMode$1 as ThemeManifestMode, type ThemeMode, ThemeSelector, type ThemeSelectorProps, ThemeSwitcher, type ThemeSwitcherProps, ThinkingOrb, type ThinkingOrbProps, ToastAction, type ToastApi, ToastClose, ToastDescription, type ToastManagerApi, type ToastOptions, ToastProvider, type ToastProviderProps, ToastRoot, ToastTitle, type ToastType, ToastViewport, Toggle, ToggleGroup, type ToggleGroupAppearance, Toggle as ToggleGroupItem, Toolbar, ToolbarButton, type ToolbarButtonProps, ToolbarGroup, type ToolbarGroupProps, ToolbarInput, type ToolbarInputProps, ToolbarLink, type ToolbarLinkProps, type ToolbarProps, ToolbarSeparator, type ToolbarSeparatorProps, Tooltip, TooltipArrow, TooltipContent, TooltipPortal, TooltipProvider, TooltipTrigger, Tree, TreeAddRow, TreeEmpty, TreeRow, TreeSection, type UseCopyOptions, type UseCopyResult, type UseInViewOptions, type UsePanelWidthOptions, Video, type VideoProps, ViewTransitionName, type ViewTransitionNameProps, Workspace, WorkspaceBar, WorkspaceCanvas, accordionMeta, appHeaderMeta, appShellMeta, attachmentMeta, avatarGroupVariants, avatarMeta, avatarVariants, badgeMeta, badgeVariants, bannerMeta, bannerVariants, bottomNavMeta, breadcrumbsMeta, browserMeta, bubbleMeta, buttonMeta, buttonVariants, calendarMeta, cardMeta, carouselMeta, chatComposerMeta, checkboxCardMeta, checkboxMeta, cn, codeBlockMeta, codeMeta, collapsibleMeta, colorFieldMeta, comboboxMeta, commandMenuMeta, componentGuidance, componentLabel, componentSlug, componentsInGroup, contextCardMeta, contextMenuMeta, dataTableMeta, datePickerMeta, descriptionMeta, descriptionVariants, destructiveActionModalMeta, dialogMeta, dotsMenuMeta, emptyStateMeta, entityMeta, feedbackMeta, fieldsetMeta, fileDropzoneMeta, fileDropzoneVariants, formMeta, formatFileSize, formatHex, glidingHighlightMeta, hsvToRgb, hueColor, inlineStatusMeta, inputMeta, isTransparent, kbdMeta, labelMeta, markerMeta, marqueeMeta, menuMeta, messageMeta, messageScrollerMeta, meterIndicatorVariants, meterMeta, meterTrackVariants, middleTruncateMeta, noteMeta, noteVariants, notificationBadgeMeta, notificationCountVariants, notificationDotVariants, numberFieldMeta, otpFieldMeta, pageHeaderMeta, pageLoaderMeta, paginationMeta, panelGroupMeta, panelSectionMeta, parseHex, phoneMeta, pillMeta, pillVariants, popoverMeta, progressMeta, progressTrackVariants, radioCardMeta, radioMeta, relativeTimeMeta, rgbToHsv, scrollerMeta, scrubFieldMeta, searchInputMeta, selectMeta, separatorMeta, settingsMenuMeta, sheetMeta, sheetVariants, showMoreMeta, sideNavMeta, sidebarMeta, skeletonMeta, sliderMeta, spinnerMeta, startViewTransition, statusBarMeta, statusDotMeta, statusDotVariants, stepperConnectorVariants, stepperIndicatorVariants, stepperMeta, streamingTextMeta, supportsViewTransitions, switchMeta, tableMeta, tabsMeta, textareaMeta, themeSelectorMeta, themeSwitcherMeta, thinkingOrbMeta, toast, toastMeta, toggleMeta, toolbarGroupVariants, toolbarMeta, toolbarSeparatorVariants, toolbarVariants, tooltipMeta, treeIndent, treeMeta, useAnchoredDensity, useComboboxFilteredItems, useCommandMenuShortcut, useCopy, useDensity, useInView, useMotion, usePanelWidth, useReducedMotion, useScrollActivity, useSidebar, useToast, useToastManager, useTypeTier, videoMeta, workspaceMeta };
+export { Accordion, AccordionItem, AccordionPanel, AccordionTrigger, AlertDialog, AlertDialogClose, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogTitle, AlertDialogTrigger, AppHeader, type AppHeaderProps, AppShell, type AppShellProps, AreaChart, type AreaChartProps, Attachment, type AttachmentProps, Avatar, AvatarFallback, AvatarGroup, AvatarGroupCount, type AvatarGroupCountProps, type AvatarGroupProps, AvatarImage, type AvatarProps, AvatarRoot, BADGE_APPEARANCES, BADGE_TONES, Badge, type BadgeAppearance, type BadgeProps, type BadgeTone, Banner, type BannerProps, BarChart, type BarChartProps, BottomNav, BottomNavItem, type BottomNavItemProps, BreadcrumbItem, type BreadcrumbItemProps, BreadcrumbLink, type BreadcrumbLinkProps, BreadcrumbPage, type BreadcrumbPageProps, BreadcrumbSeparator, type BreadcrumbSeparatorProps, Breadcrumbs, type BreadcrumbsProps, Browser, type BrowserProps, Bubble, type BubbleProps, BubbleReaction, type BubbleReactionProps, BubbleReactions, type BubbleReactionsProps, Button, type ButtonProps, CHART_SERIES_COUNT, COMPONENT_GROUPS, COMPONENT_TAXONOMY, Calendar, type CalendarProps, Card, CardAction, CardContent, type CardContentProps, CardDescription, CardFooter, CardHeader, CardList, type CardProps, CardTitle, type CardTitleProps, Carousel, type CarouselProps, type CarouselSlidesToShow, type ChartCategories, type ChartCenterLabel, type ChartCurve, type ChartDatum, type ChartSeries, type ChartTone, type ChartTooltipIndicator, type ChartTooltipOptions, type ChartValueFormatter, ChatComposer, type ChatComposerProps, Checkbox, CheckboxCard, type CheckboxCardProps, type CheckboxCardTone, CheckboxGroup, type CheckboxGroupProps, Code, CodeBlock, type CodeBlockProps, CodeHighlightProvider, type CodeHighlighter, type CodeProps, Collapsible, CollapsibleIndicator, CollapsiblePanel, CollapsibleTrigger, ColorField, type ColorFieldProps, Combobox, ComboboxChips, ComboboxClear, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxGroupLabel, ComboboxInput, ComboboxItem, type ComboboxItemGroup, ComboboxItemIndicator, ComboboxList, ComboboxPortal, type ComboboxProps, ComboboxValue, ComboboxVirtualList, type ComboboxVirtualListProps, type CommandFilter, type CommandItem, CommandMenu, CommandMenuGroup, type CommandMenuGroupProps, CommandMenuItem, type CommandMenuItemProps, CommandMenuPanel, type CommandMenuPanelProps, type CommandMenuProps, CommandMenuTrigger, type CommandMenuTriggerProps, type ComponentGroup, type ComponentGuidance, ComponentMeta, type ComponentRegister, ContextCard, ContextCardArrow, ContextCardContent, ContextCardPortal, ContextCardTrigger, ContextMenu, ContextMenuContent, ContextMenuGroup, ContextMenuGroupLabel, ContextMenuItem, ContextMenuPortal, ContextMenuSeparator, ContextMenuTrigger, DataTable, type DataTableColumn, type DataTableProps, DatePicker, type DatePickerProps, DateTile, type DateTileProps, Density, DensityProvider, Density as DensityValue, DestructiveActionModal, type DestructiveActionModalProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, type DialogSize, DialogTitle, DialogTrigger, EmptyState, type EmptyStateProps, Entity, type EntityProps, Feedback, type FeedbackData, type FeedbackProps, type FeedbackRating, Field, type FieldProps, Fieldset, FieldsetContent, FieldsetDescription, FieldsetFooter, FieldsetLegend, FileDropzone, type FileDropzoneProps, type FileRejection, type FileRejectionCode, Form, type FormProps, GlidingHighlight, type GlidingHighlightProps, type Hsv, InlineStatus, type InlineStatusProps, type StatusTone as InlineTone, Input, type InputProps$1 as InputProps, Kbd, KbdGroup, type KbdGroupProps, type KbdProps, Label, type LabelProps$2 as LabelProps, LineChart, type LineChartProps, Marker, type MarkerProps, Marquee, type MarqueeProps, Menu, MenuCheckboxItem, MenuContent, MenuGroup, MenuGroupLabel, MenuItem, MenuPortal, MenuRadioGroup, MenuRadioItem, MenuSeparator, MenuSubmenu, MenuSubmenuTrigger, MenuTrigger, Message, type MessageProps, MessageScroller, type MessageScrollerHandle, type MessageScrollerProps, Meter, MeterIndicator, MeterLabel, type MeterSize, type MeterTone, MeterTrack, MeterValue, MiddleTruncate, type MiddleTruncateProps, type MotionPolicy, MotionProvider, type MotionProviderProps, Note, type NoteAction, type NoteProps, NotificationBadge, type NotificationBadgeProps, NumberField, type NumberFieldProps, type OrbMode, type OrbSize, OtpField, type OtpFieldProps, OverflowMenu, type OverflowMenuProps, PageHeader, type PageHeaderProps, PageLoader, type PageLoaderProps, Pagination, type PaginationProps, Panel, PanelGroup, PanelResizer, type PanelResizerProps, PanelSection, type PanelWidthBounds, Phone, type PhoneProps, PieChart, type PieChartProps, Pill, type PillProps, Popover, PopoverArrow, PopoverClose, PopoverContent, PopoverDescription, PopoverPortal, PopoverTitle, PopoverTrigger, Presence, type PresenceProps, Progress, ProgressIndicator, ProgressLabel, type ProgressSize, ProgressTrack, ProgressValue, PropertyPair, PropertyRow, RadarChart, type RadarChartProps, RadialChart, type RadialChartProps, Radio, RadioCard, type RadioCardProps, type RadioCardTone, RadioGroup, RelativeTime, type RelativeTimeProps, Reveal, type RevealProps, type Rgb, SABLE_UI_VERSION, SEGMENTED_BAR_TONES, STATUS_TONES, STATUS_TONE_ICON, type ScrollCommandOptions, Scroller, type ScrollerProps, ScrubField, type ScrubFieldProps, SearchInput, type SearchInputProps, SegmentedBar, type SegmentedBarProps, type SegmentedBarSegment, type SegmentedBarTone, Select, SelectContent, SelectGroup, SelectGroupLabel, SelectItem, SelectPortal, SelectSeparator, SelectTrigger, SelectValue, Separator, type SeparatorProps$3 as SeparatorProps, SettingsMenu, type SettingsMenuProps, SettingsRow, type SettingsRowProps, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetPortal, SheetTitle, SheetTrigger, ShowMore, type ShowMoreProps, SideNav, type SideNavActiveVariant, SideNavGroup, type SideNavGroupProps, SideNavItem, type SideNavItemProps, type SideNavProps, type SideNavSize, Sidebar, SidebarFooter, SidebarHeader, SidebarItem, type SidebarItemProps, SidebarNav, type SidebarProps, SimpleTooltip, Skeleton, Slider, SliderControl, SliderIndicator, SliderRoot, SliderThumb, SliderTrack, SliderValue, Sparkline, type SparklineProps, Spinner, type SpinnerProps, StatusBar, StatusBarGroup, StatusBarSeparator, StatusDot, type StatusDotProps, type StatusTone, type StepStatus, Stepper, StepperItem, type StepperItemProps, type StepperOrientation, type StepperProps, StreamingText, type StreamingTextProps, Switch, TRANSPARENT, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsPanel as TabsContent, TabsList, TabsPanel, TabsTrigger, TextReveal, type TextRevealProps, Textarea, type TextareaProps, ThemeId, ThemeManifest, ThemeMode$1 as ThemeManifestMode, type ThemeMode, ThemeSelector, type ThemeSelectorProps, ThemeSwitcher, type ThemeSwitcherProps, ThinkingOrb, type ThinkingOrbProps, ToastAction, type ToastApi, ToastClose, ToastDescription, type ToastManagerApi, type ToastOptions, type ToastPosition, ToastProvider, type ToastProviderProps, ToastRoot, ToastTitle, type ToastType, ToastViewport, Toggle, ToggleGroup, type ToggleGroupAppearance, Toggle as ToggleGroupItem, Toolbar, ToolbarButton, type ToolbarButtonProps, ToolbarGroup, type ToolbarGroupProps, ToolbarInput, type ToolbarInputProps, ToolbarLink, type ToolbarLinkProps, type ToolbarProps, ToolbarSeparator, type ToolbarSeparatorProps, Tooltip, TooltipArrow, TooltipContent, TooltipPortal, TooltipProvider, TooltipTrigger, Tree, TreeAddRow, TreeEmpty, TreeRow, TreeSection, type UseCopyOptions, type UseCopyResult, type UseInViewOptions, type UsePanelWidthOptions, Video, type VideoProps, ViewTransitionName, type ViewTransitionNameProps, Workspace, WorkspaceBar, WorkspaceCanvas, accordionMeta, appHeaderMeta, appShellMeta, areaChartMeta, attachmentMeta, avatarGroupVariants, avatarMeta, avatarVariants, badgeMeta, badgeVariants, bannerMeta, bannerVariants, barChartMeta, bottomNavMeta, breadcrumbsMeta, browserMeta, bubbleMeta, buttonMeta, buttonVariants, calendarMeta, cardMeta, carouselMeta, chartColor, toneColor as chartToneColor, chatComposerMeta, checkboxCardMeta, checkboxMeta, cn, codeBlockMeta, codeMeta, collapsibleMeta, colorFieldMeta, comboboxMeta, commandMenuMeta, componentGuidance, componentLabel, componentSlug, componentsInGroup, contextCardMeta, contextMenuMeta, dataTableMeta, datePickerMeta, dateTileMeta, destructiveActionModalMeta, dialogMeta, emptyStateMeta, entityMeta, feedbackMeta, fieldsetMeta, fileDropzoneMeta, fileDropzoneVariants, formMeta, formatFileSize, formatHex, glidingHighlightMeta, hsvToRgb, hueColor, inlineStatusMeta, inputMeta, isTransparent, kbdMeta, labelMeta, lineChartMeta, markerMeta, marqueeMeta, menuMeta, messageMeta, messageScrollerMeta, meterIndicatorVariants, meterMeta, meterTrackVariants, middleTruncateMeta, noteMeta, noteVariants, notificationBadgeMeta, notificationCountVariants, notificationDotVariants, numberFieldMeta, otpFieldMeta, overflowMenuMeta, pageHeaderMeta, pageLoaderMeta, paginationMeta, panelGroupMeta, panelSectionMeta, parseHex, phoneMeta, pieChartMeta, pillMeta, pillVariants, popoverMeta, progressMeta, progressTrackVariants, radarChartMeta, radialChartMeta, radioCardMeta, radioMeta, relativeTimeMeta, rgbToHsv, scrollerMeta, scrubFieldMeta, searchInputMeta, segmentedBarMeta, segmentedBarSegmentVariants, segmentedBarVariants, selectMeta, separatorMeta, settingsMenuMeta, sheetMeta, sheetVariants, showMoreMeta, sideNavMeta, sidebarMeta, skeletonMeta, sliderMeta, sparklineMeta, spinnerMeta, startViewTransition, statusBarMeta, statusDotMeta, statusDotVariants, stepperConnectorVariants, stepperIndicatorVariants, stepperMeta, streamingTextMeta, supportsViewTransitions, switchMeta, tableMeta, tabsMeta, textareaMeta, themeSelectorMeta, themeSwitcherMeta, thinkingOrbMeta, toast, toastMeta, toggleMeta, toolbarGroupVariants, toolbarMeta, toolbarSeparatorVariants, toolbarVariants, tooltipMeta, treeIndent, treeMeta, useAnchoredDensity, useComboboxFilteredItems, useCommandMenuShortcut, useCopy, useDensity, useInView, useMotion, usePanelWidth, useReducedMotion, useScrollActivity, useSidebar, useToast, useToastManager, useTypeTier, videoMeta, workspaceMeta };