@sableui/react 0.6.2 → 0.7.1

package/dist/index.d.ts

@@ -3,11 +3,10 @@ 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-C2M1SjBf.js';
 export { A as ART_TOKENS, 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-C2M1SjBf.js';
-import { T as ThemeId } from './theme-provider-kQszHYji.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-kQszHYji.js';
+import { T as ThemeId } from './theme-provider-S0NVJs2Y.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-S0NVJs2Y.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';
 export { a as IconRenderProps, I as IconSet, b as IconVariant } from './registry-CyL28OzJ.js';
 import * as react from 'react';
 import { ReactNode, ComponentPropsWithoutRef, ElementType, ReactElement, Ref, ComponentPropsWithRef, ComponentProps } from 'react';
@@ -383,13 +382,33 @@ interface ButtonProps extends ComponentPropsWithRef<"button">, VariantProps<type
      * so callers never hand-position one with absolute offsets.
      */
     badge?: ReactNode;
+    /**
+     * Optical alignment for a borderless button: pull the box outward on that
+     * inline side by exactly its own padding (`--button-px`, less the icon-side
+     * step when an icon sits there; an icon-only size bleeds by its inset to the
+     * glyph), so the LABEL lines up with the content edge the row shares — the
+     * grid under a SectionHeader, a card's padding. The hit area and the hover
+     * and focus fill keep their full size; on hover the fill runs past the edge.
+     * Logical sides, so it mirrors in RTL.
+     *
+     * Only the borderless variants bleed — `ghost`, `link`, `on-color-ghost`.
+     * On a variant with a visible edge (primary, secondary, outline, destructive,
+     * floating, field, on-color, on-color-outline) it does nothing: a filled
+     * button aligns its EDGE, not its label.
+     *
+     * Left unset, a borderless button bleeds when its container asks —
+     * SectionHeader, PageHeader and CardAction align their outermost ghost or
+     * link action this way. `none` opts out of that.
+     */
+    bleed?: ButtonBleed;
 }
+type ButtonBleed = "start" | "end" | "both" | "none";
 /**
  * The primary action primitive. Pill-shaped by default; one `primary` per screen.
  * Corner radius is theme-driven via `--button-radius` (falls back to full pill) —
  * see `button.variants.ts`.
  */
-declare function Button({ variant, size, className, render, ref, type, loading, loadingLabel, iconStart, iconEnd, badge, disabled, children, ...props }: ButtonProps): react.ReactElement<unknown, string | react.JSXElementConstructor<any>>;
+declare function Button({ variant, size, className, render, ref, type, loading, loadingLabel, iconStart, iconEnd, badge, bleed, disabled, children, ...props }: ButtonProps): react.ReactElement<unknown, string | react.JSXElementConstructor<any>>;
 declare namespace Button {
     var displayName: string;
 }
@@ -425,6 +444,11 @@ declare function CardHeader({ className, ...props }: ComponentPropsWithRef<"div"
 /**
  * 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.
+ *
+ * A ghost or link Button that ends the slot bleeds by its padding at the end
+ * (lib/bleed.ts), so a "View all" label or a "⋯" glyph lines up with the card's
+ * content edge instead of sitting one padding inside it. Filled buttons keep
+ * their edge on the line.
  */
 declare function CardAction({ className, ...props }: ComponentPropsWithRef<"div">): react.JSX.Element;
 /** Title tier — a UI primitive title, not a document heading. */
@@ -529,7 +553,7 @@ declare const BADGE_APPEARANCES: readonly ["soft", "outline", "solid", "overlay"
 type BadgeAppearance = (typeof BADGE_APPEARANCES)[number];
 declare const badgeVariants: (props?: ({
     appearance?: "overlay" | "outline" | "solid" | "soft" | "plain" | null | undefined;
-    tone?: "destructive" | "success" | "info" | "warning" | "neutral" | "standard" | "edition" | "collectible" | null | undefined;
+    tone?: "destructive" | "success" | "neutral" | "standard" | "warning" | "info" | "edition" | "collectible" | null | undefined;
     size?: "sm" | "md" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 
@@ -830,9 +854,9 @@ type OtpNamespace<T> = T extends {
 } ? Parts : T extends {
     OTPFieldPreview: infer Parts;
 } ? Parts : never;
-declare const Base: OtpNamespace<typeof OtpParts>;
+type OtpBase = OtpNamespace<typeof OtpParts>;
 
-type BaseRootProps = ComponentProps<typeof Base.Root>;
+type BaseRootProps = ComponentProps<OtpBase["Root"]>;
 type OtpFieldProps = Omit<BaseRootProps, "className" | "render" | "length" | "children"> & {
     className?: string;
     /**
@@ -1191,11 +1215,18 @@ 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.
+ * Each size also sets the tier its initials (and a group's "+N") take, so the
+ * initials grow with the circle instead of one 12px label at every size. They
+ * hold roughly 30% of the diameter all the way up: the label tiers cover the
+ * row sizes; past them the initials are a mark standing in for a face — type
+ * as image — so the portrait sizes borrow heading-2 (28px in 96) and display-lg
+ * (48px in 160), the tiers built to be read as a shape at that size.
+ *
+ * `xl` and `2xl` are portrait sizes — a profile header, an artist hero, a
+ * roster tile — not row sizes, so AvatarGroup stops at `lg`.
  */
 declare const avatarVariants: (props?: ({
-    size?: "sm" | "md" | "lg" | null | undefined;
+    size?: "sm" | "md" | "lg" | "xl" | "2xl" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 /**
  * AvatarGroup — an overlapping stack. Each child is pulled left by about an
@@ -1228,7 +1259,8 @@ declare const avatarGroupVariants: (props?: ({
 type RootProps$4 = Omit<ComponentProps<typeof Avatar$1.Root>, "className"> & VariantProps<typeof avatarVariants> & {
     className?: string;
 };
-type AvatarSize = NonNullable<VariantProps<typeof avatarVariants>["size"]>;
+/** The row sizes. `xl`/`2xl` are portraits, which are never stacked. */
+type AvatarGroupSize = NonNullable<VariantProps<typeof avatarGroupVariants>["size"]>;
 /** The circular frame. Clips the image; holds the `size` axis. */
 declare function AvatarRoot({ size, className, ...props }: RootProps$4): react.JSX.Element;
 declare namespace AvatarRoot {
@@ -1305,8 +1337,12 @@ declare namespace AvatarGroupCount {
     var displayName: string;
 }
 interface AvatarGroupProps extends Omit<ComponentProps<"div">, "className"> {
-    /** Size of every avatar in the group: 32px / 40px / 48px. Overrides each child's own size. */
-    size?: AvatarSize;
+    /**
+     * Size of every avatar in the group: 32px / 40px / 48px. Overrides each
+     * child's own size. The portrait sizes (`xl`, `2xl`) are not offered: a
+     * stack is a row-sized summary of people, never a set of portraits.
+     */
+    size?: AvatarGroupSize;
     /**
      * The surface the group sits on, so the separating ring matches it. Omit to
      * inherit `--avatar-group-ring` from an ancestor (falling back to the page
@@ -1764,7 +1800,7 @@ declare namespace MeterValue {
  * the call site from thresholds you own; the component does not guess them.
  */
 declare const meterIndicatorVariants: (props?: ({
-    tone?: "primary" | "destructive" | "success" | "warning" | "standard" | null | undefined;
+    tone?: "primary" | "destructive" | "success" | "standard" | "warning" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 /**
  * Bar thickness, per size. Shared with Progress (`progressTrackVariants`): a
@@ -1784,7 +1820,7 @@ declare const meterMeta: ComponentMeta;
  * failed).
  */
 declare const segmentedBarSegmentVariants: (props?: ({
-    tone?: "primary" | "destructive" | "success" | "info" | "warning" | "neutral" | "standard" | "edition" | "collectible" | null | undefined;
+    tone?: "primary" | "destructive" | "success" | "neutral" | "standard" | "warning" | "info" | "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?: ({
@@ -1890,7 +1926,11 @@ type ChartCategories = Record<string, {
 }>;
 /** A big number with a caption in the middle of a donut or radial chart. */
 interface ChartCenterLabel {
-    value: string;
+    /**
+     * The number. Pass a number to have it formatted: in full up to 9,999,
+     * compact from 10,000 ("10.2K"). Pass a string for units or your own wording.
+     */
+    value: string | number;
     label?: string;
 }
 /** How the tooltip marks each row. */
@@ -2817,6 +2857,20 @@ type DescriptionProps$1 = Omit<ComponentProps<typeof Drawer.Description>, "class
 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;
+/**
+ * Rows that run edge to edge in the sheet — Entity rows, most often: a queue,
+ * notifications, a picker. The list bleeds through the sheet's padding and
+ * hands it back to each row (`--entity-px` from `--sheet-p`), so a row's
+ * avatar and text line up with SheetHeader while its hover fill reaches the
+ * panel's edges. Without it, Entity's own inset stacks on the sheet's and the
+ * rows sit 12px in from the header. The Sheet equivalent of CardList.
+ *
+ *   <SheetContent>
+ *     <SheetHeader><SheetTitle>Up next</SheetTitle></SheetHeader>
+ *     <SheetList>{queue.map((t) => <Entity key={t.id} title={t.title} … />)}</SheetList>
+ *   </SheetContent>
+ */
+declare function SheetList({ className, ...props }: ComponentProps<"div">): react.JSX.Element;
 /**
  * Action row, pushed to the bottom edge of the sheet via mt-auto. In a bottom
  * sheet it stacks: full width, the primary (last, on a page) on top, capped at
@@ -2847,7 +2901,18 @@ declare function TableFooter({ className, ...props }: ComponentPropsWithRef<"tfo
 declare namespace TableFooter {
     var displayName: string;
 }
-/** A table row. Hover-lifts; mark the selected row with `data-selected`. */
+/**
+ * A table row. Body rows hover-lift; header and footer rows stay still, since
+ * nothing there responds to a click on the row. Mark the selected row with
+ * `data-selected`.
+ *
+ * The selected fill is painted by the cells, each spilling 1px into the next
+ * (a box-shadow, so layout does not move). A row's own background is painted
+ * per cell at fractional widths, and a dogfood build saw 1px dark seams at
+ * cell boundaries on the selected row, the one users look at most. The spill
+ * covers any such gap; the fill is opaque in every theme, so the overlap does
+ * not show. Hover stays on the row: it is translucent, where an overlap would.
+ */
 declare function TableRow({ className, ...props }: ComponentPropsWithRef<"tr">): react.JSX.Element;
 declare namespace TableRow {
     var displayName: string;
@@ -3052,7 +3117,7 @@ declare const notificationBadgeMeta: ComponentMeta;
  * rounded-full and shrink-0 so it holds its shape inline next to text.
  */
 declare const statusDotVariants: (props?: ({
-    tone?: "destructive" | "success" | "info" | "warning" | "neutral" | "standard" | "edition" | "collectible" | null | undefined;
+    tone?: "destructive" | "success" | "neutral" | "standard" | "warning" | "info" | "edition" | "collectible" | null | undefined;
     size?: "sm" | "md" | "lg" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 
@@ -3565,6 +3630,20 @@ declare function SliderThumb({ className, children, ...props }: ThumbProps): rea
 type SliderValueType = number | readonly number[];
 type SliderProps<Value extends SliderValueType> = Omit<ComponentProps<typeof Slider$1.Root>, "className" | "value" | "defaultValue" | "onValueChange" | "render"> & {
     className?: string;
+    /**
+     * Names each thumb's input — the element with role=slider. Base UI would put
+     * it on the Root's role=group, leaving the slider itself unnamed. A range
+     * keeps it on the group too, so the pair is named as well.
+     */
+    "aria-label"?: string;
+    /** Per-thumb name for a range: `(index) => index ? "Maximum price" : "Minimum price"`. Wins over aria-label on the thumbs. */
+    getAriaLabel?: ThumbProps["getAriaLabel"];
+    /**
+     * What a screen reader announces for the value, when the number alone is
+     * wrong: `(formatted, value) => toTime(value) + " of " + toTime(duration)`.
+     * For units or percent, the Root's `format` (Intl.NumberFormatOptions) is enough.
+     */
+    getAriaValueText?: ThumbProps["getAriaValueText"];
     /** Controlled value. Pass an array for a range slider (one thumb per entry). */
     value?: Value;
     /** Uncontrolled initial value. Pass an array for a range slider. */
@@ -3576,9 +3655,10 @@ type SliderProps<Value extends SliderValueType> = Omit<ComponentProps<typeof Sli
  * The all-in-one Slider: Root + Control + Track + Indicator + Thumb(s).
  * Renders a single thumb for a scalar value, or one thumb per entry when the
  * value is an array (range slider). Forwards value / defaultValue /
- * onValueChange / min / max / step (and the rest of the Root props).
+ * onValueChange / min / max / step (and the rest of the Root props), and routes
+ * aria-label / getAriaLabel / getAriaValueText to the thumbs.
  */
-declare function Slider<Value extends SliderValueType = number>({ className, ...props }: SliderProps<Value>): ReactNode;
+declare function Slider<Value extends SliderValueType = number>({ className, "aria-label": ariaLabel, getAriaLabel, getAriaValueText, ...props }: SliderProps<Value>): ReactNode;
 declare namespace Slider {
     var displayName: string;
 }
@@ -4124,7 +4204,7 @@ declare const kbdMeta: ComponentMeta;
  * (neutral/info/success/warning/destructive).
  */
 declare const noteVariants: (props?: ({
-    tone?: "destructive" | "success" | "info" | "warning" | "neutral" | null | undefined;
+    tone?: "destructive" | "success" | "neutral" | "warning" | "info" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 
 /**
@@ -4234,7 +4314,7 @@ declare const inlineStatusMeta: ComponentMeta;
  * and `sticky` positioning live in `banner.tsx`.
  */
 declare const bannerVariants: (props?: ({
-    tone?: "destructive" | "success" | "info" | "warning" | "neutral" | "edition" | null | undefined;
+    tone?: "destructive" | "success" | "neutral" | "warning" | "info" | "edition" | null | undefined;
     appearance?: "solid" | "soft" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 
@@ -4944,6 +5024,15 @@ interface AppShellProps extends Omit<ComponentProps<"div">, "title"> {
      * `lg`. Rendered fixed to the bottom edge; `<main>` reserves space for it.
      */
     bottomNav?: ReactNode;
+    /**
+     * Persistent chrome that stays on screen across routes — a now-playing bar,
+     * an active-call bar, an upload tray. Full width, pinned to the bottom edge
+     * (above `bottomNav` on mobile); the desktop Sidebar shortens to clear it.
+     * The contents paint their own surface and border, since content scrolls
+     * beneath them. Keep it mounted in a layout that outlives route changes, or
+     * the playback it controls restarts.
+     */
+    dock?: ReactNode;
     /** Floating overlays (a message launcher, FAB, modal mount points). */
     overlays?: ReactNode;
     /** Main content. */
@@ -4952,7 +5041,7 @@ interface AppShellProps extends Omit<ComponentProps<"div">, "title"> {
 /**
  * AppShell — the application frame. Lays out optional status banners, a mobile
  * header, a desktop sidebar, the main content region, a mobile bottom nav, and
- * floating overlays, with a built-in skip link and the `#main-content` target.
+ * a persistent dock, and floating overlays, with a built-in skip link and the `#main-content` target.
  *
  * It is layout-agnostic about the breakpoint switch: each slot component owns
  * its own `hidden`/`lg:*` visibility (Sidebar is `hidden lg:flex`, AppHeader and
@@ -4968,7 +5057,7 @@ interface AppShellProps extends Omit<ComponentProps<"div">, "title"> {
  *     <Region max="feed">…</Region>
  *   </AppShell>
  */
-declare function AppShell({ banners, header, sidebar, bottomNav, overlays, className, children, ...rest }: AppShellProps): react.JSX.Element;
+declare function AppShell({ banners, header, sidebar, bottomNav, dock, overlays, className, children, ...rest }: AppShellProps): react.JSX.Element;
 declare namespace AppShell {
     var displayName: string;
 }
@@ -5016,6 +5105,28 @@ declare function SidebarHeader({ className, ...props }: ComponentPropsWithRef<"d
 declare namespace SidebarHeader {
     var displayName: string;
 }
+interface SidebarBrandProps extends Omit<ComponentPropsWithRef<"div">, "children"> {
+    /** The logo mark. Sits in the items' icon slot (24px); collapsed, it is all that shows. */
+    mark: ReactNode;
+    /** The product name, on the items' label column. Hidden when collapsed. */
+    label: ReactNode;
+    /** Render as a link home, e.g. `render={<Link to="/" />}`. */
+    render?: useRender.RenderProp;
+}
+/**
+ * The brand row, on the same grid as SidebarItem: the mark in the icon slot,
+ * the name on the label column. It takes the item row's own inset, slot and
+ * gap from the shared recipe, so it moves with the rail instead of an app
+ * copying 12px + 12px + size-6 out of the bundle. Goes inside SidebarHeader.
+ *
+ *   <SidebarHeader>
+ *     <SidebarBrand mark={<Logo />} label="Undertow" render={<Link to="/" />} />
+ *   </SidebarHeader>
+ */
+declare function SidebarBrand({ mark, label, render, className, "aria-label": ariaLabel, ...props }: SidebarBrandProps): ReactElement;
+declare namespace SidebarBrand {
+    var displayName: string;
+}
 /** The scrollable nav region — grows to fill the rail between header and footer. */
 declare function SidebarNav({ className, ...props }: ComponentPropsWithRef<"nav">): react.JSX.Element;
 declare namespace SidebarNav {
@@ -5227,6 +5338,59 @@ declare namespace PageHeader {
 
 declare const pageHeaderMeta: ComponentMeta;
 
+interface SectionHeaderProps extends Omit<ComponentPropsWithRef<"div">, "title"> {
+    /** The section's title. */
+    title?: ReactNode;
+    /** One line of supporting copy beneath the title. */
+    description?: ReactNode;
+    /**
+     * Trailing actions on the title row — a "View all" link, or a couple of
+     * buttons. Use `size="sm"` buttons: the title is centred on that height.
+     */
+    actions?: ReactNode;
+    /**
+     * The title's heading element, chosen by the document outline: `h2` for a
+     * section under the page's h1, `h3` for a subsection inside one. @default "h2"
+     */
+    titleAs?: "h2" | "h3" | "h4";
+    /**
+     * The title's `id`, so the section it heads can name itself with it:
+     * `<section aria-labelledby={id}>`. Generated when omitted.
+     */
+    titleId?: string;
+    /**
+     * Visual weight, independent of the heading level. `md` (text-heading-3) for
+     * a page's sections and shelves; `sm` (text-heading-4) for a denser set —
+     * settings groups, subsections, a sidebar's sections. @default "md"
+     */
+    size?: "md" | "sm";
+}
+/**
+ * SectionHeader — the heading block for one section of a page: a title, an
+ * optional line of description, and actions on the title row. The page's own
+ * title is PageHeader (the route's one h1); every section below it is this.
+ *
+ *   <section aria-labelledby="new-releases" className="flex flex-col gap-4">
+ *     <SectionHeader
+ *       titleId="new-releases"
+ *       title="New releases"
+ *       actions={<Button variant="ghost" size="sm" render={<a href="/new" />}>View all</Button>}
+ *     />
+ *     <Grid minItemWidth="10rem">…</Grid>
+ *   </section>
+ *
+ * It shares PageHeader's title row: the title wraps rather than truncating,
+ * the actions keep to the title's row and drop beneath it only when the row
+ * runs out of room. It carries no outer spacing — the Stack or Page it sits in
+ * owns the rhythm between the header and what it introduces.
+ */
+declare function SectionHeader({ title, description, actions, titleAs, titleId, size, className, ...props }: SectionHeaderProps): react.JSX.Element;
+declare namespace SectionHeader {
+    var displayName: string;
+}
+
+declare const sectionHeaderMeta: ComponentMeta;
+
 interface SearchInputProps extends Omit<ComponentPropsWithRef<"input">, "onChange" | "value" | "defaultValue"> {
     /** Controlled value of the search field. */
     value?: string;
@@ -5782,16 +5946,34 @@ interface ThemeSelectorProps extends Omit<ComponentPropsWithRef<"div">, "onChang
     layout?: "cards" | "list";
 }
 /**
- * ThemeSelector - a presentational card radiogroup for Sable design themes.
- * Pair it with useSableTheme().themeId / setThemeId when the app uses
- * SableThemeProvider.
+ * A theme, drawn as a sliver of its own interface: its background, "Aa" in its
+ * display face, a card and a primary button. The tile carries the theme's scope
+ * (`data-sable-theme`, plus `.dark` / `.light`), so every token inside it, the
+ * tile's own corners included, resolves to the previewed theme, not the app's.
  *
- * Built on Sable's RadioGroup over Base UI's Radio, so the roles,
- * `aria-checked`, the single tab stop and arrow-key selection come from Base UI
- * (the hand-rolled `role="radio"` buttons this replaced had no arrow keys).
- * Sable's `<Radio>` is the dot-in-a-ring control and takes no content; a card
- * or a row is its own skin, so each option renders Base UI's Radio.Root.
+ * The button and card corners are the theme's real radii scaled to the
+ * miniature, because shape is the half of a theme a colour strip never showed:
+ * Meridian's square controls, Poppy's soft 12px, Sable's capsule. The old card
+ * was four flat colour blocks, and four of six themes came out as the same
+ * white-and-black strip.
+ *
+ * `.light` is set explicitly, not only `.dark`: theme CSS matches
+ * `.dark [data-sable-theme]:not(.light)`, so under a dark page a "light"
+ * preview without it painted dark.
  */
+interface ThemePreviewProps {
+    /** The theme to draw. */
+    theme: ThemeManifest;
+    /** Which of its modes to draw. @default the theme's defaultMode */
+    mode?: ThemeMode$1;
+    /** `md` is the picker tile; `sm` is the row-sized chip a list row or a "current theme" trigger shows. @default "md" */
+    size?: "md" | "sm";
+}
+/**
+ * Exported for anywhere that shows a theme outside the picker, e.g. a trigger
+ * row naming the current preset before it opens the list.
+ */
+declare function ThemePreview({ theme, mode, size }: ThemePreviewProps): react.JSX.Element;
 declare function ThemeSelector({ value, onValueChange, themes, mode, label, layout, className, ref, ...props }: ThemeSelectorProps): react.JSX.Element;
 declare namespace ThemeSelector {
     var displayName: string;
@@ -5799,6 +5981,256 @@ declare namespace ThemeSelector {
 
 declare const themeSelectorMeta: ComponentMeta;
 
+/**
+ * DisclosurePicker — a property row that names the current value and opens a
+ * list IN PLACE beneath it, pushing what follows down, instead of floating a
+ * popup over it.
+ *
+ *   <DisclosurePicker>
+ *     <DisclosurePickerTrigger label="Body">Inter</DisclosurePickerTrigger>
+ *     <DisclosurePickerPanel>
+ *       <DisclosurePickerList aria-label="Body font" value={font} onValueChange={setFont}>
+ *         <DisclosurePickerOption value="Inter">Inter</DisclosurePickerOption>
+ *       </DisclosurePickerList>
+ *     </DisclosurePickerPanel>
+ *   </DisclosurePicker>
+ *
+ * Why not a Select: a tool panel's choices are made while looking at what they
+ * change. A popup covers the preview the choice is about; a list that opens in
+ * the panel keeps the row, the list and the preview in one column. Built on
+ * Collapsible, so the trigger is a real button with aria-expanded/controls and
+ * the panel animates with motion-disclosure (static under reduced motion).
+ *
+ * The list is a listbox, not a radio group: arrow keys move through it and
+ * nothing happens until Enter (or Space, or a click) picks. A radio group's
+ * checked state follows focus, so each arrow press was a pick — fine for a free
+ * toggle, wrong for a choice with a cost (a confirm, a font load, a reset).
+ *
+ * Grew out of the docs Customize panel, where a font row and a preset row had
+ * become two hand copies of the same disclosure.
+ */
+type Size = "md" | "xs";
+/**
+ * Open state, the row's size and a `close()` for a list the picker does not own
+ * (a Tree, a bespoke grid) that should still close the row when something is
+ * picked. Inside a DisclosurePicker only.
+ */
+declare function useDisclosurePicker(): {
+    open: boolean;
+    close: () => void;
+    size: Size;
+};
+interface DisclosurePickerProps extends Omit<ComponentProps<typeof Collapsible>, "className" | "open" | "defaultOpen" | "onOpenChange"> {
+    /** Controlled open state. Pair with `onOpenChange`; leave both off to let the row own it. */
+    open?: boolean;
+    /** Uncontrolled initial open state. @default false */
+    defaultOpen?: boolean;
+    /** Called with the next open state — on the trigger, on a pick, on Escape. */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * Which rung the row sits on. `md` is a 40px row in a settings panel; `xs` is
+     * the property-grid rung — a `--control-xs` row on the inset `panel-field`
+     * fill, the same shape as a ScrubField or an xs SelectTrigger beside it.
+     * Height, padding, radius, type and surface move together, which is why it is
+     * a prop and not a className. @default "md"
+     */
+    size?: Size;
+    className?: string;
+}
+/**
+ * The root: a Collapsible that also owns focus. Opening from the keyboard moves
+ * focus into the list (the search field, or the chosen option when there is no
+ * search); closing with focus inside returns it to the trigger. While the panel
+ * grows it keeps the whole row on screen, so a picker near the foot of a
+ * scrolling panel does not open out of sight; and it opens with the chosen
+ * option centred in a scrolling list, not wherever the list last was.
+ */
+declare function DisclosurePicker({ open: openProp, defaultOpen, onOpenChange, size, className, ref, children, ...props }: DisclosurePickerProps): react.JSX.Element;
+declare namespace DisclosurePicker {
+    var displayName: string;
+}
+interface DisclosurePickerTriggerProps extends Omit<ComponentProps<typeof CollapsibleTrigger>, "className" | "children"> {
+    /** A leading caption naming the property ("Body", "Theme"), muted, on a fixed column so stacked rows align. */
+    label?: ReactNode;
+    /** A leading visual before the value — a theme tile, a swatch. Not truncated. */
+    media?: ReactNode;
+    /** The current value. Truncates on one line; render it in its own face or colour if that is the point. */
+    children?: ReactNode;
+    className?: string;
+}
+/**
+ * The row: optional caption, optional media, the value, and a chevron that
+ * flips when open. A real button — Base UI wires aria-expanded and
+ * aria-controls — so its accessible name is its text (caption + value) unless
+ * an aria-label says it better.
+ */
+declare function DisclosurePickerTrigger({ label, media, children, className, ref, onKeyDown, onPointerDown, ...props }: DisclosurePickerTriggerProps): react.JSX.Element;
+declare namespace DisclosurePickerTrigger {
+    var displayName: string;
+}
+/** The search field a long list opts into: controlled, because the consumer does the filtering. */
+interface DisclosurePickerSearch {
+    /** The query. */
+    value: string;
+    /** Called on every keystroke; cleared with `""` when the picker closes. */
+    onValueChange: (value: string) => void;
+    /** @default "Search" */
+    placeholder?: string;
+    /** Accessible name of the field. @default the placeholder */
+    label?: string;
+}
+interface DisclosurePickerPanelProps extends Omit<ComponentProps<typeof CollapsiblePanel>, "className" | "children"> {
+    /**
+     * Opt in to a search field above the list. Off by default: a short list
+     * (a handful of presets) reads faster than a field you have to skip past.
+     * Turn it on once the list scrolls — roughly a dozen options or more.
+     */
+    search?: DisclosurePickerSearch;
+    children?: ReactNode;
+    className?: string;
+}
+/**
+ * What opens beneath the row: the optional search field and the list, divided
+ * from the row by a hairline. Escape closes it and returns focus to the row
+ * (first clearing a query, if there is one) without changing the value;
+ * ArrowDown in the search field steps into the list.
+ */
+declare function DisclosurePickerPanel({ search, children, className, ...props }: DisclosurePickerPanelProps): react.JSX.Element;
+declare namespace DisclosurePickerPanel {
+    var displayName: string;
+}
+interface DisclosurePickerListProps extends Omit<ComponentProps<"div">, "role" | "onChange" | "defaultValue" | "children"> {
+    /** The chosen (committed) option's value. Marked `aria-selected` and lifted out of the well. */
+    value: string;
+    /**
+     * Called once, when an option is picked — Enter, Space or a click — and only
+     * when the pick differs from `value`. Arrow keys, Home/End and type-ahead
+     * move focus through the list and change nothing; Escape closes without a
+     * pick. Picking closes the row.
+     */
+    onValueChange: (value: string) => void;
+    /** Name the list — the property it sets ("Body font"). */
+    "aria-label"?: string;
+    children?: ReactNode;
+}
+/**
+ * The options, as a listbox: ArrowUp/ArrowDown, Home/End and type-ahead move
+ * focus through them (roving tabindex, so Tab leaves the list in one step);
+ * Enter, Space or a click picks the focused option, applies it and closes the
+ * row. Nothing is applied while you move. ArrowUp from the first option goes
+ * back to the search field, when there is one. Scrolls past 16rem with a quiet
+ * scrollbar.
+ */
+declare function DisclosurePickerList({ value, onValueChange, className, ref, onKeyDown, onFocus, children, ...props }: DisclosurePickerListProps): react.JSX.Element;
+declare namespace DisclosurePickerList {
+    var displayName: string;
+}
+interface DisclosurePickerOptionProps extends Omit<ComponentProps<"div">, "className" | "children" | "role" | "tabIndex" | "onKeyDown"> {
+    value: string;
+    /** The option's name. Render it in its own face or colour when that is what is being picked. */
+    children?: ReactNode;
+    /** A leading visual before the name — a ThemePreview tile, a swatch. Not truncated. */
+    media?: ReactNode;
+    /** A short muted annotation at the row's end. Options without one show a check when chosen. */
+    note?: ReactNode;
+    /** Skipped by arrow keys and type-ahead, and cannot be picked. */
+    disabled?: boolean;
+    /** What type-ahead matches, when the name is not plain text. @default the name's text */
+    textValue?: string;
+    className?: string;
+}
+/**
+ * One option: a full-width row, raised out of the well when chosen. Focus
+ * (from arrow keys, Home/End or type-ahead) rings it; Enter, Space or a click
+ * picks it and closes the row.
+ */
+declare function DisclosurePickerOption({ value, children, media, note, disabled, textValue, className, onClick, ...props }: DisclosurePickerOptionProps): react.JSX.Element;
+declare namespace DisclosurePickerOption {
+    var displayName: string;
+}
+/** Shown in the list when a search matches nothing. */
+declare function DisclosurePickerEmpty({ children, className }: {
+    children?: ReactNode;
+    className?: string;
+}): react.JSX.Element;
+declare namespace DisclosurePickerEmpty {
+    var displayName: string;
+}
+
+declare const disclosurePickerMeta: ComponentMeta;
+
+/** One family the picker offers. Supplied by the app — Sable bundles no font catalog. */
+interface FontPickerFont {
+    /** The family name, as CSS knows it once loaded ("DM Sans"). */
+    family: string;
+    /** A short muted note at the row's end ("Neutral, dense UI"). Searched along with the family. */
+    note?: string;
+    /** The CSS font-family stack to render this option in. @default `"<family>"` */
+    stack?: string;
+}
+/** A choice that is not a family — "Theme default", "Same as body" — listed above the fonts, in the app's own face. */
+interface FontPickerOption {
+    value: string;
+    /** The option's row text ("Preset (Figtree)"). */
+    label: string;
+    /** What the row shows while this option is chosen, when it should differ from `label` ("Figtree"). */
+    valueLabel?: string;
+}
+interface FontPickerProps<Font extends FontPickerFont = FontPickerFont> extends Omit<DisclosurePickerProps, "children" | "onChange"> {
+    /** The chosen family, or the value of one of `options`. */
+    value: string;
+    /**
+     * Called when a family (or option) is picked — Enter, Space or a click —
+     * and only when it differs from `value`. Arrow keys and type-ahead move
+     * through the list without applying or loading anything; Escape closes
+     * without a pick.
+     */
+    onValueChange: (value: string) => void;
+    /** The families to offer, in order. */
+    fonts: readonly Font[];
+    /** Non-font choices listed first ("Preset", "Same as primary"). */
+    options?: readonly FontPickerOption[];
+    /** The row's leading caption — the role the font plays ("Body", "Headings"). */
+    label?: ReactNode;
+    /** Accessible name of the list. @default "Font" */
+    listLabel?: string;
+    /**
+     * A search field above the list. On by default: font lists are long, and a
+     * name is the fastest way to one. Pass `false` for a short, curated list
+     * (under a dozen), where the field is a control with nothing to do.
+     * @default true
+     */
+    searchable?: boolean;
+    /** Accessible name of the search field. @default "Search fonts" */
+    searchLabel?: string;
+    /**
+     * Load a face on demand — the app owns where fonts come from (Google Fonts,
+     * a CDN, self-hosted). Called with `"preview"` for every listed family when
+     * the list opens (enough to draw its own name), and with `"use"` for the
+     * chosen family — once it is picked, never while the list is only being
+     * walked. Make it idempotent: it is called again on every open.
+     */
+    loadFont?: (font: Font, purpose: "preview" | "use") => void;
+}
+/**
+ * FontPicker — a DisclosurePicker for a typeface: the row names the chosen
+ * family in its own face, and opens in place into a searchable list of
+ * families, each drawn in itself. Arrow keys walk the list — each name is
+ * already drawn in its face — and Enter (or a click) picks one, which is when
+ * its real weights load and the page changes.
+ *
+ *   <FontPicker label="Body" value={family} onValueChange={setFamily} fonts={FONTS} loadFont={load} />
+ *
+ * Sable ships the control, not a catalog: `fonts` and `loadFont` come from the
+ * app, so it can offer three families or three hundred from any source.
+ */
+declare function FontPicker<Font extends FontPickerFont = FontPickerFont>({ value, onValueChange, fonts, options, label, listLabel, searchable, searchLabel, loadFont, open: openProp, defaultOpen, onOpenChange, ...props }: FontPickerProps<Font>): react.JSX.Element;
+declare namespace FontPicker {
+    var displayName: string;
+}
+
+declare const fontPickerMeta: ComponentMeta;
+
 /** The three color preferences a ThemeSwitcher cycles between. */
 type ThemeMode = "light" | "dark" | "system";
 interface ThemeSwitcherProps extends Omit<ComponentPropsWithRef<"div">, "onChange"> {
@@ -6786,6 +7218,158 @@ declare namespace GradientArt {
 
 declare const gradientArtMeta: ComponentMeta;
 
+interface MediaImageProps extends Omit<ComponentPropsWithRef<"div">, "children"> {
+    /** Image URL. Omitted, empty, or failing to load ⇒ the fallback shows. */
+    src?: string;
+    /**
+     * Alt text. Defaults to `""` (decorative) — right when a visible title sits
+     * beside the image, as on a tile or a row. When it is set and no image shows,
+     * it names the fallback instead, so the description survives a broken URL.
+     */
+    alt?: string;
+    /**
+     * Seeds the fallback art, so an item keeps its own colour wherever it
+     * appears. Defaults to `alt`; pass the title or an id when `alt` is empty.
+     */
+    seed?: string | number;
+    /**
+     * Replaces the GradientArt fallback — a glyph, a monogram, a brand colour.
+     * It fills the frame, under the same clipping.
+     */
+    fallback?: ReactNode;
+    /**
+     * `cover` (default) crops to fill — artwork, photos. `contain` letterboxes on
+     * the muted surface — a logo, a product shot that must not be cropped.
+     */
+    fit?: "cover" | "contain";
+    /** `srcSet` / `sizes` for responsive images, passed to the `<img>`. */
+    srcSet?: string;
+    sizes?: string;
+    /** @default "lazy" — media grids are long, and a tile below the fold can wait. */
+    loading?: "lazy" | "eager";
+}
+/**
+ * MediaImage — an image that falls back to theme art when it has none.
+ *
+ *   <AspectBox ratio={1} className="rounded-md">
+ *     <MediaImage src={album.cover} seed={album.title} />
+ *   </AspectBox>
+ *
+ * It fills the box it is given (`size-full`), so the box owns the shape: an
+ * AspectBox for a cover, `size-14 rounded-md` for a row's thumbnail.
+ *
+ * **Loading is Base UI's, not a second implementation.** The image status comes
+ * from the same Base UI Avatar parts Avatar uses: the URL is preloaded off the
+ * DOM and the `<img>` mounts only once it has decoded, so an error that fires
+ * before hydration is still caught — the reason a plain `onError` misses broken
+ * images on prerendered pages. Avatar's frame is a circle with a size ladder and
+ * an initials tier; a cover is none of those, so this composes the primitive
+ * rather than restyling Avatar out of its shape.
+ *
+ * **Three states, three surfaces.** No `src` (or a failed one) is GradientArt
+ * seeded by the item, so a grid of missing covers still reads as distinct
+ * things. While a real image is loading the frame stays a quiet muted surface
+ * — painting the art first would flash a colourful stand-in for a frame and
+ * then swap it for the photo. Once loaded, the image fades in.
+ */
+declare function MediaImage({ src, alt, seed, fallback, fit, srcSet, sizes, loading, className, ...props }: MediaImageProps): react.JSX.Element;
+declare namespace MediaImage {
+    var displayName: string;
+}
+
+declare const mediaImageMeta: ComponentMeta;
+
+type MediaTileSize = "sm" | "md" | "lg";
+/** Named cover shapes. A number is a width / height ratio. */
+declare const ASPECT: {
+    readonly square: 1;
+    readonly video: number;
+    readonly poster: number;
+};
+interface MediaTileProps extends Omit<ComponentPropsWithRef<"div">, "title"> {
+    /** The item's name. Also seeds the fallback art when it is a string. */
+    title: ReactNode;
+    /** The second line — an artist, a channel, a price. Optional. */
+    subtitle?: ReactNode;
+    /** Cover image URL. Without one (or when it fails) the cover is GradientArt seeded by the item. */
+    src?: string;
+    /**
+     * Cover alt text. Defaults to `""`: the title right below already names the
+     * item, so describing the cover again makes a screen reader say it twice.
+     */
+    alt?: string;
+    /** Seeds the fallback art. Defaults to `title` when it is a string. */
+    seed?: string | number;
+    /**
+     * The cover's shape: `square` (albums, podcasts, playlists), `video` (16:9),
+     * `poster` (2:3 — films, books), or any width / height ratio.
+     * @default "square"
+     */
+    aspect?: keyof typeof ASPECT | number;
+    /** Type tier, gaps and corner together. @default "md" */
+    size?: MediaTileSize;
+    /**
+     * Where the tile goes. The title becomes the tile's link, stretched over the
+     * whole tile, so a click anywhere on it — cover included — follows it.
+     */
+    href?: string;
+    /**
+     * The title link's element, for a router: `render={<Link to="/albums/1" />}`.
+     * Takes precedence over `href`.
+     */
+    render?: useRender.RenderProp;
+    /** Makes the subtitle its own link (an artist page) — a separate tab stop above the tile's. */
+    subtitleHref?: string;
+    /** The subtitle link's element, for a router: `subtitleRender={<Link to="/artists/2" />}`. */
+    subtitleRender?: useRender.RenderProp;
+    /**
+     * An action over the cover's bottom-end corner — usually a play Button. It
+     * rests hidden on hover-capable devices and appears on hover or focus
+     * (`reveal-on-hover`); touch devices always show it. Name it for the item:
+     * "Play Low tide", not "Play".
+     */
+    action?: ReactNode;
+    /**
+     * A small static label on the cover's top-start corner — a duration, "New",
+     * "Explicit". Use `<Badge appearance="overlay">` so it reads on any image.
+     */
+    badge?: ReactNode;
+    /**
+     * The title's element. A tile in a titled section can be a heading the next
+     * level down, so screen-reader users can move tile to tile.
+     * @default "p"
+     */
+    titleAs?: "h2" | "h3" | "h4" | "h5" | "p";
+    /** Native image loading. `eager` for the first row above the fold. @default "lazy" */
+    loading?: "lazy" | "eager";
+}
+/**
+ * MediaTile — cover first, then the title and a subtitle: an album in a grid, a
+ * video in a feed, a podcast, a product, a photo in a gallery.
+ *
+ *   <MediaTile title="Low tide, high noon" subtitle="Juno Avery" src={cover}
+ *     render={<Link to="/albums/low-tide" />} subtitleRender={<Link to="/artists/juno" />}
+ *     action={<Button size="icon" aria-label="Play Low tide, high noon"><Icon name="play" variant="solid" /></Button>} />
+ *
+ * **The whole tile is a link without wrapping it in one.** A tile holds a
+ * second link (the artist) and a button (play), and interactive content cannot
+ * nest — so instead of an `<a>` around everything, the TITLE is the link and its
+ * `stretched-link` overlay covers the tile. The subtitle link and the action sit
+ * above that overlay, so each is its own control: one click target per thing,
+ * three tab stops, and the screen-reader name of the tile's link is its title,
+ * not the whole card read as one sentence.
+ *
+ * **Tab order is title → subtitle → action.** The text comes first in the DOM
+ * and the cover is drawn above it with `order`, so focus moves the way a
+ * reader names the item — what it is, who made it, then what to do with it.
+ */
+declare function MediaTile({ title, subtitle, src, alt, seed, aspect, size, href, render, subtitleHref, subtitleRender, action, badge, titleAs: TitleTag, loading, className, ...props }: MediaTileProps): react.JSX.Element;
+declare namespace MediaTile {
+    var displayName: string;
+}
+
+declare const mediaTileMeta: ComponentMeta;
+
 /**
  * Conversation rhythm. The class also publishes the gap as `--message-gap` so
  * `<Message grouped>` can close it without knowing which step is in play. The
@@ -7640,6 +8224,6 @@ interface UseCopyResult {
  */
 declare function useCopy(text: string, { timeout }?: UseCopyOptions): UseCopyResult;
 
-declare const SABLE_UI_VERSION: "0.6.2";
+declare const SABLE_UI_VERSION: "0.7.1";
 
-export { Accordion, AccordionItem, AccordionPanel, AccordionTrigger, AlertDialog, AlertDialogClose, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogTitle, AlertDialogTrigger, AppHeader, type AppHeaderProps, AppShell, type AppShellProps, AreaChart, type AreaChartProps, type ArtTone, 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, type CardFooterProps, 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, GradientArt, type GradientArtProps, 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, type Presentation, PresentationProvider, 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, ToastContent, 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, gradientArtMeta, 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, usePresentation, 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, type ArtTone, 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 ButtonBleed, type ButtonProps, CHART_SERIES_COUNT, COMPONENT_GROUPS, COMPONENT_TAXONOMY, Calendar, type CalendarProps, Card, CardAction, CardContent, type CardContentProps, CardDescription, CardFooter, type CardFooterProps, 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, DisclosurePicker, DisclosurePickerEmpty, DisclosurePickerList, type DisclosurePickerListProps, DisclosurePickerOption, type DisclosurePickerOptionProps, DisclosurePickerPanel, type DisclosurePickerPanelProps, type DisclosurePickerProps, type DisclosurePickerSearch, DisclosurePickerTrigger, type DisclosurePickerTriggerProps, 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, FontPicker, type FontPickerFont, type FontPickerOption, type FontPickerProps, Form, type FormProps, GlidingHighlight, type GlidingHighlightProps, GradientArt, type GradientArtProps, 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, MediaImage, type MediaImageProps, MediaTile, type MediaTileProps, 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, type Presentation, PresentationProvider, 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, SectionHeader, type SectionHeaderProps, 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, SheetList, SheetPortal, SheetTitle, SheetTrigger, ShowMore, type ShowMoreProps, SideNav, type SideNavActiveVariant, SideNavGroup, type SideNavGroupProps, SideNavItem, type SideNavItemProps, type SideNavProps, type SideNavSize, Sidebar, SidebarBrand, type SidebarBrandProps, 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, ThemePreview, type ThemePreviewProps, ThemeSelector, type ThemeSelectorProps, ThemeSwitcher, type ThemeSwitcherProps, ThinkingOrb, type ThinkingOrbProps, ToastAction, type ToastApi, ToastClose, ToastContent, 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, disclosurePickerMeta, emptyStateMeta, entityMeta, feedbackMeta, fieldsetMeta, fileDropzoneMeta, fileDropzoneVariants, fontPickerMeta, formMeta, formatFileSize, formatHex, glidingHighlightMeta, gradientArtMeta, hsvToRgb, hueColor, inlineStatusMeta, inputMeta, isTransparent, kbdMeta, labelMeta, lineChartMeta, markerMeta, marqueeMeta, mediaImageMeta, mediaTileMeta, 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, sectionHeaderMeta, 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, useDisclosurePicker, useInView, useMotion, usePanelWidth, usePresentation, useReducedMotion, useScrollActivity, useSidebar, useToast, useToastManager, useTypeTier, videoMeta, workspaceMeta };