@sableui/react 0.1.1 → 0.2.0

package/dist/{chunk-RWP4XBSK.js → chunk-KFZ43RKU.js}

@@ -21,7 +21,7 @@ function Phone({ statusBar = true, systemChrome = true, className, children, ...
         /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "absolute -start-[0.6cqi] top-[34%] h-[7%] w-[0.8cqi] rounded-s-full bg-(--phone-band)" }),
         /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "absolute -end-[0.6cqi] top-[27%] h-[10.5%] w-[0.8cqi] rounded-e-full bg-(--phone-band)" }),
         /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "absolute -end-[0.4cqi] top-[55%] h-[6%] w-[0.6cqi] rounded-e-full bg-(--phone-band)" }),
-        /* @__PURE__ */ jsx("div", { className: "relative rounded-[18cqi] bg-(--phone-body) p-[3.7cqi] shadow-xl ring-[0.5cqi] ring-(--phone-band) ring-inset", children: /* @__PURE__ */ jsxs("div", { className: "relative aspect-[402/874] overflow-hidden rounded-[14.3cqi] bg-background text-foreground", children: [
+        /* @__PURE__ */ jsx("div", { className: "relative rounded-[18cqi] bg-(--phone-body) p-[3.7cqi] shadow-xl ring-[0.5cqi] ring-(--phone-band) ring-inset", children: /* @__PURE__ */ jsxs("div", { className: "relative aspect-[402/874] overflow-hidden rounded-[14.3cqi] bg-background text-foreground [clip-path:inset(0_round_14.3cqi)]", children: [
           /* @__PURE__ */ jsx("div", { className: cn("h-full overflow-auto overscroll-contain scrollbar-hidden", statusBar && "pt-[14.3cqi]"), children }),
           statusBar ? /* @__PURE__ */ jsxs(
             "div",

package/dist/{chunk-JI7WJP2L.js → chunk-X276MF2W.js}

@@ -16,6 +16,11 @@ var SEMANTIC_TOKENS = [
   // higher-contrast step. See DESIGN.md / CONTRIBUTING.md → "Theme contract".
   "border-strong",
   "input",
+  // The resting edge of a control whose outline IS the control — a checkbox,
+  // a radio, an off switch track. Unlike `input` (a text field also has a fill
+  // and a caret to find it by), nothing else marks these, so WCAG 1.4.11 holds
+  // them to 3:1 on every surface. Gated in contrast.ts → NON_TEXT_PAIRS.
+  "control-border",
   "ring",
   // Actions
   "primary",

package/dist/foundations/index.js

@@ -327,7 +327,7 @@ var shape = {
     },
     {
       rule: "A list of rows inside a rounded popup uses popup-inset on the popup, rounded-popup-item on the rows and popup-bleed on a separator.",
-      why: "All three derive from the popup's radius: the inset grows to a third of it (never below --spacing(1), so density moves it too), the rows take what is left, and a separator bleeds by exactly the inset. A rounder look gets more room instead of rows that round into pills, and the default ladder still lands on the familiar 4px inset and 8px rows.",
+      why: "All three derive from the popup's radius: the inset grows to a third of it (never below --spacing(1), so density moves it too), the rows take what is left after the inset and the 1px border, and a separator bleeds by exactly the inset. A rounder look gets more room instead of rows that round into pills; the default ladder lands on a 4px inset and 7px rows.",
       enforcedBy: "sable-lint: popup-separator-bleed"
     },
     {

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 { 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';
@@ -468,6 +468,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 +628,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 +692,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 +1166,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;
@@ -1266,8 +1310,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
@@ -2127,11 +2171,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 +2363,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 +2400,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 +2508,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;
@@ -2749,6 +2810,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 +2830,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 +3489,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 +3549,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 +3576,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 +3774,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 +3782,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 +3796,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.
@@ -4626,71 +4744,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;
@@ -5306,7 +5359,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.
  *
@@ -6559,12 +6613,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 +6645,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 +7062,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.2.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, 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, 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, KbdGroup, type KbdGroupProps, 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, 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 };