@sableui/react 0.14.0 → 0.15.0

package/dist/foundations/motion.js

@@ -31,6 +31,8 @@ var motion = {
         { name: "motion-appear", value: "fast fade + base scale", use: "A small control mounting in place: a clear button, a send arrow, a badge. @starting-style, no JS." },
         { name: "motion-arrive", value: "base \xB7 decelerate \xB7 staggered \xB7 expressive", use: "Items a user action brings into a list: a folder's children on expand, a row just added. Never on every render." },
         { name: "motion-size", value: "base \xB7 emphasized \xB7 expressive", use: "An element easing between intrinsic sizes when its label changes: a two-step confirm, Copy \u2192 Copied." },
+        { name: "motion-bloom", value: "slower \xB7 0 \u2192 1.2 \u2192 1 \xB7 expressive", use: "A small glyph landing in its on state: a liked heart, a picked rating, a toast's status icon. Remount it (key) to replay; never on the resting state." },
+        { name: "<Burst>", value: "slower ring + thrown dots \xB7 expressive", use: "The follow-through behind a bloom, in the theme's palette families. Only on a choice a person made: a like, a star, a finished task." },
         { name: "motion-draw", value: "slower \xB7 decelerate", use: 'SVG line art drawing on when a <Reveal> scrolls in. The path needs pathLength="1"; stagger siblings with --motion-draw-delay.' },
         { name: "motion-spin \xB7 pulse \xB7 shimmer \xB7 dot-bounce \xB7 ping", value: "loops", use: "Activity. Scale-aware, so reduced motion freezes them." }
       ]
@@ -50,7 +52,7 @@ var motion = {
       note: "Essential motion answers the user; expressive motion narrates continuity. Expressive durations are also multiplied by --motion-expressive, which `subtle` sets to 0. Each level can only turn motion down from what surrounds it.",
       terms: [
         { name: "essential", value: "always, unless off", use: "Colour and focus feedback, press, overlay arrival, disclosure height, loaders, chart hover." },
-        { name: "expressive", value: "full only", use: "Glides, rolling numbers (NumberTicker), drawn ticks, shakes, staggers, chart arrival and morph, scroll reveals, spring overshoot." },
+        { name: "expressive", value: "full only", use: "Glides, rolling numbers (NumberTicker), drawn ticks, blooms and bursts, shakes, staggers, chart arrival and morph, scroll reveals, spring overshoot." },
         { name: "full", value: "default", use: "Both levels play. The crafted default." },
         { name: "subtle", value: 'data-motion="subtle"', use: "Essential only; nothing overshoots. For dense tools, embedded widgets, readers who want calm without stillness." },
         { name: "off", value: 'data-motion="off" \xB7 reduce-motion', use: "Nothing moves; every state still changes." },
@@ -112,6 +114,18 @@ var motion = {
       rule: "A state change finishes its story: refused shakes and says why, success confirms in place, armed asks again.",
       why: "Motion that starts a change and leaves the outcome to a snap reads as unfinished. ConfirmButton, OtpField's invalid shake and the copy-to-check swap are the reference cases."
     },
+    {
+      rule: "Amplitude scales with smallness. A 16px glyph that turns on grows from nothing past its size; a surface travels from 0.96 and a press settles to 0.97.",
+      why: "The same 4% that is right for a dialog is invisible on an icon, which is why a state change on a small control used to read as a colour swap with no life in it. A dialog that overshot 20% would lurch. Size, not importance, sets how far a thing moves."
+    },
+    {
+      rule: "Stage a moment: the main object lands first, the follow-through after it.",
+      why: "A ring that opens, a glyph that blooms 90ms later, dots thrown 60ms after that read as one event with a cause and an effect. Everything starting on the same frame reads as a flash. LikeButton and the toast's status glyph are the reference cases."
+    },
+    {
+      rule: "Celebrate only what a person chose, and only at full motion.",
+      why: "A burst is a reply. On a like it is delight; on a system event, on load, or on every row of a list it is a notification wearing confetti. Under subtle the fill alone answers."
+    },
     {
       rule: "Component motion props and MotionScope only turn motion down.",
       why: "`full` on a component means inherit. Nothing below the provider can switch motion back on for a reader who asked for it off."
@@ -166,6 +180,12 @@ var motion = {
       after: '<NumberTicker value={total} format={{ style: "currency", currency: "USD" }} />',
       why: "The digits that changed roll; the ones that did not stay still, so the eye goes straight to the difference."
     },
+    {
+      title: "A glyph that lands",
+      before: '<Icon name="heart" variant={liked ? "solid" : "regular"} />',
+      after: "<LikeButton count={likes} defaultPressed={liked} />",
+      why: "The heart used to swap fill in one frame. Now it blooms past its size and settles while a ring and dots burst from it, and the count rolls: the same state, told as an event."
+    },
     {
       title: "Faster exits",
       before: "transition: opacity 200ms ease-in-out;  /* in and out */",

package/dist/icon-sets/reicon.js

@@ -72,6 +72,9 @@ import { Pause } from "reicon-react/icons/Pause";
 import { Play } from "reicon-react/icons/Play";
 import { Previous } from "reicon-react/icons/Previous";
 import { Refresh } from "reicon-react/icons/Refresh";
+import { Restart } from "reicon-react/icons/Restart";
+import { EmojiHappy } from "reicon-react/icons/EmojiHappy";
+import { PlaybackSpeed } from "reicon-react/icons/PlaybackSpeed";
 import { Send } from "reicon-react/icons/Send";
 import { Star } from "reicon-react/icons/Star";
 import { Trash } from "reicon-react/icons/Trash";
@@ -181,7 +184,14 @@ var ICONS = {
   paperclip: Paperclip,
   chart: ChartBar,
   flag: Flag,
-  "at-sign": AtSign
+  "at-sign": AtSign,
+  // Added when the docs' preview controls borrowed `sparkles` (which reads
+  // as AI) for a motion level and `refresh` (which reads as fetching again)
+  // for watching an animation from its first frame.
+  replay: Restart,
+  motion: PlaybackSpeed,
+  // Added for the add-reaction pill under a chat bubble.
+  emoji: EmojiHappy
 };
 var WEIGHTS = {
   regular: "Outline",

package/dist/index.d.ts

@@ -440,6 +440,118 @@ declare namespace Presence {
     var displayName: string;
 }
 
+/**
+ * The palette: nine colour families and a scale under every tone, generated
+ * for whatever theme is painting. `scripts/build-palette.mjs` writes this into
+ * `src/palette.css`; `palette.test.ts` holds every built-in theme to it.
+ *
+ * The contract is roles, and roles are not enough for a product. Tags, avatars,
+ * labels and illustration need more colours than three tones, and raw Tailwind
+ * steps ignore the theme, so they were banned outright. These follow it:
+ *
+ * - A **family** (red, orange, yellow, green, teal, blue, purple, pink) keeps
+ *   its own hue and leans toward the brand by half the gap, at most 15°, and
+ *   only as far as the brand has colour to lean toward (an ink-black primary
+ *   pulls nothing). Material 3's harmonize, the same lean the customizer gives
+ *   status colours. Lightness and chroma are fixed per step, fitted inside sRGB
+ *   across the whole lean, so no brand can push a step out of gamut.
+ * - **neutral** is the theme's own page and ink mixed in steps, so it carries
+ *   whatever tint the theme's surfaces do.
+ * - Every **tone** (tone-1…3, info, warning, success, destructive) gets a scale
+ *   on one shared ladder of depths, and the tone lands exactly on the step
+ *   nearest its own lightness: a light status colour in dark mode is 800, a
+ *   mid one is 500. The steps either side stretch to keep the ladder's ends,
+ *   so a tone near one end does not crush five steps into the little room
+ *   left past it, and tone-1-100 and success-100 are the same depth.
+ *
+ * Steps follow the mode rather than literal lightness: a low step is always
+ * near the page and a high step always far from it, so 800 text on a 100
+ * wash reads in both modes with no `dark:` (Sable has none).
+ */
+declare const PALETTE_STEPS: readonly [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950];
+type PaletteStep = (typeof PALETTE_STEPS)[number];
+interface PaletteFamily {
+    name: string;
+    /** The family's own hue, before the lean. */
+    hue: number;
+    /** Step 500, per mode: lightness and the chroma the family is aiming for. */
+    light: {
+        l: number;
+        c: number;
+    };
+    dark: {
+        l: number;
+        c: number;
+    };
+}
+declare const PALETTE_FAMILIES: readonly PaletteFamily[];
+/** The hue families by name — the values Badge, Pill and StatusDot take on `tone`. */
+declare const PALETTE_COLORS: readonly ["red", "orange", "yellow", "green", "teal", "blue", "purple", "pink"];
+type PaletteColor = (typeof PALETTE_COLORS)[number];
+declare const isPaletteColor: (value: unknown) => value is PaletteColor;
+/** Tokens that get a scale of their own, `--<token>-50` … `--<token>-950`. */
+declare const PALETTE_TONES: readonly ["tone-1", "tone-2", "tone-3", "tone-info", "tone-warning", "success", "destructive"];
+/** Everything the palette names: neutral, the families, then the tone scales. */
+declare const PALETTE_SCALES: readonly ["neutral", ...string[], "tone-1", "tone-2", "tone-3", "tone-info", "tone-warning", "success", "destructive"];
+
+interface BurstProps {
+    /**
+     * Plays the burst each time this value changes. Nothing plays on mount, so
+     * a page that loads with a post already liked stays still. A counter that
+     * goes up on each "on" is the usual trigger; leave it alone on "off" so
+     * un-liking is quiet.
+     */
+    trigger: unknown;
+    /**
+     * The palette families the dots take in turn. The ring blooms in the host's
+     * `currentColor` and fades into the first. Families, not colours: the
+     * palette is generated from the active theme, so the confetti re-themes
+     * with everything else. @default ["pink", "purple", "blue", "orange"]
+     */
+    palette?: readonly PaletteColor[];
+    /** How many places dots fly from; each throws a pair. @default 7 */
+    count?: number;
+    /**
+     * Throw this instead of dots: copies of the glyph being celebrated (an
+     * emoji reaction), larger than a dot and with no ring, the way a reaction
+     * sprays its own emoji. Text only — it is repeated once per piece.
+     */
+    particle?: ReactNode;
+    /**
+     * Also play once when it mounts. For a glyph that arrives BECAUSE of the
+     * action — a reaction pill that did not exist until the reader chose it —
+     * where mounting is the change. Never for a page that loads.
+     * @default false
+     */
+    playOnMount?: boolean;
+    /** Sizing (`[--burst-size:…]`) or placement. */
+    className?: string;
+    /**
+     * How much motion this component uses. A burst is pure flourish, so it
+     * renders only at `full`: `subtle` and `off` render nothing.
+     */
+    motion?: MotionLevel;
+}
+/**
+ * Burst — the follow-through after a small celebratory toggle: a disc that
+ * hollows into a ring, then dots thrown outward that shrink as they go. Place
+ * it inside a `relative` wrapper around the glyph it celebrates, beside a
+ * `motion-bloom` on the glyph itself:
+ *
+ *   <span className="relative inline-flex">
+ *     <span key={likes} className={liked ? "motion-bloom" : undefined}><Icon name="heart" /></span>
+ *     <Burst trigger={likes} />
+ *   </span>
+ *
+ * It sizes from `--burst-size` (the ring's diameter, default 2.25em — about
+ * twice the glyph) and colours from the themed palette families. Decorative and
+ * `aria-hidden`; it draws outside its box and never takes pointer events.
+ * Use it for a moment of delight on an action a person chose — a like, a
+ * star, a finished task — never on something the system did, and never on
+ * every row of a list at once.
+ */
+declare function Burst({ trigger, palette, count, particle, playOnMount, className, motion, }: BurstProps): react.JSX.Element | null;
+
 /** Is the cross-document/SPA View Transitions API available? */
 declare function supportsViewTransitions(): boolean;
 /**
@@ -643,6 +755,67 @@ declare namespace ConfirmButton {
 
 declare const confirmButtonMeta: ComponentMeta;
 
+type LabelledSize = "xs" | "sm" | "md";
+interface LikeButtonProps extends Omit<ButtonProps, "children" | "variant" | "size" | "iconStart" | "iconEnd" | "badge" | "loading" | "loadingLabel" | "render" | "type"> {
+    /** Pressed (liked), controlled. */
+    pressed?: boolean;
+    /** Pressed (liked) at first, uncontrolled. @default false */
+    defaultPressed?: boolean;
+    /** Called when a press turns it on or off, with the new state. */
+    onPressedChange?: (pressed: boolean, event: MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * The total, shown beside the glyph and rolled when it changes. Pressing
+     * adds or removes the viewer's like at once, before your handler has saved
+     * it, and the button goes back to showing `count` exactly whenever `count`
+     * changes — so pass the server's total and update it when the save lands.
+     * Omit it for a bare glyph.
+     */
+    count?: number;
+    /** How to write the count — `{ notation: "compact" }` for 1.2K. Passed to `Intl.NumberFormat`. */
+    format?: Intl.NumberFormatOptions;
+    /** The glyph, by icon name. Its `solid` variant is shown while pressed. @default "heart" */
+    icon?: string;
+    /**
+     * The palette family the glyph fills with while pressed; the burst blooms
+     * from it. A family, not a colour, so it follows the theme. @default "red"
+     */
+    tone?: PaletteColor;
+    /** The accessible name, read before the count. @default "Like" */
+    label?: string;
+    /** @default "ghost" */
+    variant?: "ghost" | "outline" | "secondary";
+    /** @default "sm" */
+    size?: LabelledSize;
+    /**
+     * How much motion this component uses: `full` (default) inherits the app's
+     * policy, `subtle` keeps feedback and drops the flourish, `off` stills it.
+     * It can only turn motion down — it never overrides a reader's reduce-motion
+     * setting. The bloom and burst are the flourish; the fill and the count
+     * changing stay.
+     */
+    motion?: MotionLevel;
+}
+/**
+ * LikeButton — a pressed-or-not toggle for a like, a star, a save. Pressing
+ * it on fills the glyph, which blooms past its size and settles while a ring
+ * and a spray of dots burst from it, and the count rolls up a digit. Pressing
+ * it off is quiet: the glyph empties and the count rolls back.
+ *
+ *   <LikeButton count={post.likes} defaultPressed={post.liked} onPressedChange={(on) => save(on)} />
+ *   <LikeButton icon="star" tone="yellow" label="Star" count={repo.stars} />
+ *
+ * A Sable Button carrying `aria-pressed`, with Toggle's controlled/uncontrolled
+ * contract (`pressed` / `defaultPressed` / `onPressedChange`). It composes
+ * Button rather than Toggle: Toggle's pressed fill is the one thing a like
+ * must not show — its state is the glyph.
+ */
+declare function LikeButton({ className, count, format, icon, tone, label, variant, size, motion, pressed: pressedProp, defaultPressed, onPressedChange, onClick, ...props }: LikeButtonProps): react.JSX.Element;
+declare namespace LikeButton {
+    var displayName: string;
+}
+
+declare const likeButtonMeta: ComponentMeta;
+
 interface CardProps extends ComponentPropsWithRef<"div"> {
     /** "default" = raised surface (bg-card + edge + soft shadow). "flat" = transparent. */
     variant?: "default" | "flat";
@@ -4177,7 +4350,7 @@ declare const datePickerMeta: ComponentMeta;
  * binds it via Base UI's `toastManager` prop.
  */
 declare const toastManager: _base_ui_react.ToastManager<any>;
-/** Visual/semantic type of a toast — drives the accent and (for loading) a spinner. */
+/** Visual/semantic type of a toast — drives the status glyph and (for loading) a spinner. */
 type ToastType = "success" | "error" | "warning" | "info" | "loading";
 /** Screen anchor for the toast stack. */
 type ToastPosition = "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right";
@@ -8937,6 +9110,68 @@ declare namespace Message {
 
 declare const messageMeta: ComponentMeta;
 
+/** One choice in a reaction picker: the emoji and the name a screen reader says for it. */
+interface Reaction {
+    emoji: string;
+    /** The accessible name, e.g. "Heart". An emoji's own spoken name varies by platform. */
+    label: string;
+}
+/** The quick set a picker offers when you pass none — the reactions most chats lead with. */
+declare const DEFAULT_REACTIONS: readonly Reaction[];
+interface ReactionChoiceProps {
+    /** The choices, in order. @default DEFAULT_REACTIONS */
+    reactions?: readonly Reaction[];
+    /** The emoji the reader has already reacted with: shown pressed, and choosing one again removes it. */
+    selected?: readonly string[];
+    /** Called with the emoji the reader chose. Toggle it in or out of `selected`. */
+    onSelect?: (emoji: string) => void;
+    /**
+     * How much motion this component uses: `full` (default) inherits the app's
+     * policy, `subtle` keeps the press and drops the wave of emoji blooming in,
+     * `off` stills it. It can only turn motion down.
+     */
+    motion?: MotionLevel;
+}
+interface ReactionPickerProps extends ReactionChoiceProps, Omit<ToolbarProps, "children" | "onSelect"> {
+    /** Trailing controls after the emoji — a "more" button that opens a full picker. */
+    children?: ReactNode;
+}
+/**
+ * ReactionPicker — the quick row of emoji you react to a message with. A
+ * toolbar: one stop in the tab order, the arrow keys move along it, and each
+ * emoji is a toggle reporting `aria-pressed`. Opening it plays a short wave as
+ * the emoji bloom in one after another, and the one under the pointer
+ * magnifies. Put it in a Popover from an add-reaction control — or use
+ * `BubbleReactionAdd`, which is exactly that — and use `MenuReactions` for the
+ * same row inside a right-click menu.
+ *
+ *   <ReactionPicker selected={mine} onSelect={(emoji) => toggle(message.id, emoji)} />
+ */
+declare function ReactionPicker({ reactions, selected, onSelect, motion, className, children, "aria-label": ariaLabel, ...props }: ReactionPickerProps): react.JSX.Element;
+declare namespace ReactionPicker {
+    var displayName: string;
+}
+interface MenuReactionsProps extends ReactionChoiceProps, Omit<ComponentProps<typeof Menu$1.Group>, "className" | "children" | "onSelect"> {
+    className?: string;
+}
+/**
+ * The same quick row as the first group of a menu — the reactions above Reply
+ * and Copy when a message is right-clicked or long-pressed. Each emoji is a
+ * checkbox menu item (checked when the reader has reacted with it), so the
+ * arrow keys and typeahead reach it like any other row, and choosing one
+ * closes the menu. Works in `MenuContent` and `ContextMenuContent` alike.
+ *
+ *   <ContextMenuContent>
+ *     <MenuReactions selected={mine} onSelect={toggle} />
+ *     <ContextMenuSeparator />
+ *     <ContextMenuItem>Reply</ContextMenuItem>
+ *   </ContextMenuContent>
+ */
+declare function MenuReactions({ reactions, selected, onSelect, motion, className, "aria-label": ariaLabel, ...props }: MenuReactionsProps): react.JSX.Element;
+declare namespace MenuReactions {
+    var displayName: string;
+}
+
 interface BubbleProps extends ComponentPropsWithRef<"div"> {
     /**
      * Surface treatment. `muted` for the other party, `primary` for the reader's
@@ -8971,8 +9206,9 @@ interface BubbleProps extends ComponentPropsWithRef<"div"> {
  *   <Message>
  *     <Bubble>Shipping it now.</Bubble>
  *     <BubbleReactions>
- *       <BubbleReaction emoji="🎉" count={3} active onClick={() => toggle("🎉")} />
- *       <BubbleReaction emoji="👀" count={1} onClick={() => toggle("👀")} />
+ *       <BubbleReaction emoji="🎉" label="Party" count={3} active onClick={() => toggle("🎉")} />
+ *       <BubbleReaction emoji="👀" label="Eyes" count={1} onClick={() => toggle("👀")} />
+ *       <BubbleReactionAdd selected={mine} onSelect={toggle} />
  *     </BubbleReactions>
  *   </Message>
  *
@@ -8989,31 +9225,82 @@ interface BubbleReactionsProps extends ComponentPropsWithRef<"div"> {
     /** Match the enclosing `<Bubble align>` so the row hangs off the right edge. @default "start" */
     align?: "start" | "end";
 }
-/** The row of reaction pills belonging to one bubble. */
-declare function BubbleReactions({ align, className, ...props }: BubbleReactionsProps): react.JSX.Element;
+/**
+ * The row of reaction pills belonging to one bubble. Render it for every
+ * message, even one with no reactions yet: it hides itself while empty, and
+ * staying mounted is how it knows the first reaction someone adds is new
+ * (and so celebrates) rather than one the page loaded with.
+ */
+declare function BubbleReactions({ align, className, children, ...props }: BubbleReactionsProps): react.JSX.Element;
 declare namespace BubbleReactions {
     var displayName: string;
 }
 interface BubbleReactionProps extends Omit<ComponentPropsWithRef<"button">, "children"> {
     /** The reaction glyph. Rendered as text, so any emoji works with no icon mapping. */
     emoji: ReactNode;
+    /**
+     * What the emoji means, for the accessible name ("Party, 3"). An emoji's own
+     * spoken name varies by platform; without a label the pill is named by its
+     * count alone.
+     */
+    label?: string;
     /** How many people reacted this way. Hidden at 1 — the pill already says "one". */
     count?: number;
     /** The reader reacted this way. Drives `aria-pressed`, not just the styling. */
     active?: boolean;
+    /**
+     * How much motion this component uses: `full` (default) inherits the app's
+     * policy, `subtle` keeps the tint and the count changing and drops the
+     * bloom and the spray of emoji, `off` stills it. It can only turn motion down.
+     */
+    motion?: MotionLevel;
 }
 /**
  * One reaction pill — a toggle, not a label. It reports `aria-pressed` because
  * "did I react to this" is state a screen-reader user needs before deciding
  * whether pressing it adds or removes their reaction.
+ *
+ * When it becomes the reader's own — pressed on, or added from a picker — the
+ * emoji blooms and a spray of copies of it bursts out, the way a chat app
+ * answers a reaction, and the count rolls. Pressing it off is quiet. A pill
+ * the page loads with never plays.
  */
-declare function BubbleReaction({ emoji, count, active, className, ...props }: BubbleReactionProps): react.JSX.Element;
+declare function BubbleReaction({ emoji, label, count, active, motion, className, ...props }: BubbleReactionProps): react.JSX.Element;
 declare namespace BubbleReaction {
     var displayName: string;
 }
+interface BubbleReactionAddProps extends Omit<ComponentPropsWithRef<"button">, "children" | "onSelect"> {
+    /** The choices the picker offers. @default DEFAULT_REACTIONS */
+    reactions?: readonly Reaction[];
+    /** The emoji the reader has already reacted with, shown pressed in the picker. */
+    selected?: readonly string[];
+    /** Called with the emoji the reader chose; the picker closes. Toggle it in or out of `selected`. */
+    onSelect?: (emoji: string) => void;
+    /** The accessible name. @default "Add reaction" */
+    label?: string;
+    /** Passed to the picker: how much motion it uses. */
+    motion?: MotionLevel;
+}
+/**
+ * The add-reaction pill at the end of a reaction row: a smiley that opens a
+ * ReactionPicker above it. Choosing an emoji closes the picker and hands the
+ * emoji to `onSelect`; add it to the row and the new pill celebrates as it
+ * arrives.
+ *
+ *   <BubbleReactions>
+ *     {pills}
+ *     <BubbleReactionAdd selected={mine} onSelect={toggle} />
+ *   </BubbleReactions>
+ */
+declare function BubbleReactionAdd({ reactions, selected, onSelect, label, motion, className, ...props }: BubbleReactionAddProps): react.JSX.Element;
+declare namespace BubbleReactionAdd {
+    var displayName: string;
+}
 
 declare const bubbleMeta: ComponentMeta;
 
+declare const reactionPickerMeta: ComponentMeta;
+
 interface AttachmentProps extends Omit<ComponentPropsWithRef<"div">, "onClick"> {
     /**
      * File name. When it runs out of room the stem truncates and the extension
@@ -9485,60 +9772,6 @@ interface SmoothWheelOptions {
  */
 declare function useSmoothWheel({ axis, mapVertical, smooth, }?: SmoothWheelOptions): (node: HTMLElement | null) => void;
 
-/**
- * The palette: nine colour families and a scale under every tone, generated
- * for whatever theme is painting. `scripts/build-palette.mjs` writes this into
- * `src/palette.css`; `palette.test.ts` holds every built-in theme to it.
- *
- * The contract is roles, and roles are not enough for a product. Tags, avatars,
- * labels and illustration need more colours than three tones, and raw Tailwind
- * steps ignore the theme, so they were banned outright. These follow it:
- *
- * - A **family** (red, orange, yellow, green, teal, blue, purple, pink) keeps
- *   its own hue and leans toward the brand by half the gap, at most 15°, and
- *   only as far as the brand has colour to lean toward (an ink-black primary
- *   pulls nothing). Material 3's harmonize, the same lean the customizer gives
- *   status colours. Lightness and chroma are fixed per step, fitted inside sRGB
- *   across the whole lean, so no brand can push a step out of gamut.
- * - **neutral** is the theme's own page and ink mixed in steps, so it carries
- *   whatever tint the theme's surfaces do.
- * - Every **tone** (tone-1…3, info, warning, success, destructive) gets a scale
- *   on one shared ladder of depths, and the tone lands exactly on the step
- *   nearest its own lightness: a light status colour in dark mode is 800, a
- *   mid one is 500. The steps either side stretch to keep the ladder's ends,
- *   so a tone near one end does not crush five steps into the little room
- *   left past it, and tone-1-100 and success-100 are the same depth.
- *
- * Steps follow the mode rather than literal lightness: a low step is always
- * near the page and a high step always far from it, so 800 text on a 100
- * wash reads in both modes with no `dark:` (Sable has none).
- */
-declare const PALETTE_STEPS: readonly [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950];
-type PaletteStep = (typeof PALETTE_STEPS)[number];
-interface PaletteFamily {
-    name: string;
-    /** The family's own hue, before the lean. */
-    hue: number;
-    /** Step 500, per mode: lightness and the chroma the family is aiming for. */
-    light: {
-        l: number;
-        c: number;
-    };
-    dark: {
-        l: number;
-        c: number;
-    };
-}
-declare const PALETTE_FAMILIES: readonly PaletteFamily[];
-/** The hue families by name — the values Badge, Pill and StatusDot take on `tone`. */
-declare const PALETTE_COLORS: readonly ["red", "orange", "yellow", "green", "teal", "blue", "purple", "pink"];
-type PaletteColor = (typeof PALETTE_COLORS)[number];
-declare const isPaletteColor: (value: unknown) => value is PaletteColor;
-/** Tokens that get a scale of their own, `--<token>-50` … `--<token>-950`. */
-declare const PALETTE_TONES: readonly ["tone-1", "tone-2", "tone-3", "tone-info", "tone-warning", "success", "destructive"];
-/** Everything the palette names: neutral, the families, then the tone scales. */
-declare const PALETTE_SCALES: readonly ["neutral", ...string[], "tone-1", "tone-2", "tone-3", "tone-info", "tone-warning", "success", "destructive"];
-
-declare const SABLE_UI_VERSION: "0.14.0";
+declare const SABLE_UI_VERSION: "0.15.0";
 
-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, ButtonGroup, type ButtonGroupProps, 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, CaretMenu, CaretMenuItem, type CaretMenuItemProps, type CaretMenuProps, type CaretTrigger, type CaretTriggerField, type CaretTriggerMatch, 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, ConfirmButton, type ConfirmButtonProps, type ConstraintFlag, ContextCard, ContextCardArrow, ContextCardContent, ContextCardPortal, ContextCardTrigger, ContextMenu, ContextMenuContent, ContextMenuGroup, ContextMenuGroupLabel, ContextMenuItem, ContextMenuPortal, ContextMenuSeparator, ContextMenuTrigger, type CopySource, DataTable, type DataTableColumn, type DataTableProps, type DataTableRowKey, 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, type FieldsetVariant, 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, InputGroup, type InputGroupProps, 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, MenuLinkItem, MenuPortal, MenuRadioGroup, MenuRadioItem, MenuSeparator, MenuSubmenu, MenuSubmenuTrigger, MenuTrigger, Menubar, type MenubarProps, MenubarTrigger, type MenubarTriggerProps, Message, type MessageProps, MessageScroller, type MessageScrollerHandle, type MessageScrollerProps, Meter, MeterIndicator, MeterLabel, type MeterSize, type MeterTone, MeterTrack, MeterValue, MiddleTruncate, type MiddleTruncateProps, type MotionLevel, type MotionPolicy, MotionProvider, type MotionProviderProps, MotionScope, type MotionScopeProps, NavigationMenu, NavigationMenuContent, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, Note, type NoteAction, type NoteProps, NotificationBadge, type NotificationBadgeProps, NumberField, type NumberFieldProps, NumberTicker, type NumberTickerProps, type OrbMode, type OrbSize, OtpField, type OtpFieldProps, OverflowMenu, type OverflowMenuProps, PALETTE_COLORS, PALETTE_FAMILIES, PALETTE_SCALES, PALETTE_STEPS, PALETTE_TONES, PageHeader, type PageHeaderProps, PageLoader, type PageLoaderProps, Pagination, type PaginationProps, type PaletteColor, type PaletteFamily, type PaletteStep, 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, PropertyGroup, 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$2 as SeparatorProps, SettingsMenu, type SettingsMenuProps, SettingsRow, type SettingsRowProps, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetList, SheetPortal, type SheetProps, type SheetSnapPoint, 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, SkipLink, Slider, SliderControl, SliderIndicator, SliderRoot, SliderThumb, SliderTrack, SliderValue, type SmoothWheelOptions, 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, TOOL_CALL_STATUS_LABELS, 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, ToolCall, type ToolCallProps, type ToolCallStatus, Toolbar, ToolbarButton, type ToolbarButtonProps, ToolbarGroup, type ToolbarGroupProps, ToolbarInput, type ToolbarInputProps, ToolbarLink, type ToolbarLinkProps, type ToolbarProps, ToolbarSeparator, type ToolbarSeparatorProps, Tooltip, TooltipArrow, TooltipContent, TooltipGroup, type TooltipGroupProps, TooltipPortal, TooltipProvider, TooltipTrigger, Tree, TreeAddRow, TreeEmpty, TreeRow, TreeSection, type UseCaretTriggerOptions, type UseCaretTriggerResult, 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, buttonGroupMeta, buttonMeta, buttonVariants, calendarMeta, cardMeta, caretMenuMeta, carouselMeta, chartColor, toneColor as chartToneColor, chatComposerMeta, checkboxCardMeta, checkboxMeta, cn, codeBlockMeta, codeMeta, collapsibleMeta, colorFieldMeta, comboboxMeta, commandMenuMeta, componentGuidance, componentLabel, componentSlug, componentsInGroup, confirmButtonMeta, contextCardMeta, contextMenuMeta, dataTableMeta, datePickerMeta, dateTileMeta, destructiveActionModalMeta, dialogMeta, disclosurePickerMeta, emptyStateMeta, entityMeta, feedbackMeta, fieldsetMeta, fileDropzoneMeta, fileDropzoneVariants, fontPickerMeta, formMeta, formatFileSize, formatHex, glidingHighlightMeta, gradientArtMeta, hsvToRgb, hueColor, inlineStatusMeta, inputGroupMeta, inputMeta, isPaletteColor, isTransparent, kbdMeta, labelMeta, lineChartMeta, markerMeta, marqueeMeta, mediaImageMeta, mediaTileMeta, menuMeta, menubarMeta, messageMeta, messageScrollerMeta, meterIndicatorVariants, meterMeta, meterTrackVariants, middleTruncateMeta, motionAttribute, navigationMenuMeta, noteMeta, noteVariants, notificationBadgeMeta, notificationCountVariants, notificationDotVariants, numberFieldMeta, numberTickerMeta, 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, toolCallMeta, toolbarGroupVariants, toolbarMeta, toolbarSeparatorVariants, toolbarVariants, tooltipMeta, treeIndent, treeMeta, useAnchoredDensity, useAutoSize, useCaretTrigger, useComboboxFilteredItems, useCommandMenuShortcut, useCopy, useDensity, useDisclosurePicker, useInView, useMotion, useMotionLevel, usePanelWidth, usePresentation, useReducedMotion, useScrollActivity, useShake, useSidebar, useSmoothWheel, 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, BubbleReactionAdd, type BubbleReactionAddProps, type BubbleReactionProps, BubbleReactions, type BubbleReactionsProps, Burst, type BurstProps, Button, type ButtonBleed, ButtonGroup, type ButtonGroupProps, 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, CaretMenu, CaretMenuItem, type CaretMenuItemProps, type CaretMenuProps, type CaretTrigger, type CaretTriggerField, type CaretTriggerMatch, 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, ConfirmButton, type ConfirmButtonProps, type ConstraintFlag, ContextCard, ContextCardArrow, ContextCardContent, ContextCardPortal, ContextCardTrigger, ContextMenu, ContextMenuContent, ContextMenuGroup, ContextMenuGroupLabel, ContextMenuItem, ContextMenuPortal, ContextMenuSeparator, ContextMenuTrigger, type CopySource, DEFAULT_REACTIONS, DataTable, type DataTableColumn, type DataTableProps, type DataTableRowKey, 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, type FieldsetVariant, 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, InputGroup, type InputGroupProps, type InputProps$1 as InputProps, Kbd, KbdGroup, type KbdGroupProps, type KbdProps, Label, type LabelProps$2 as LabelProps, LikeButton, type LikeButtonProps, LineChart, type LineChartProps, Marker, type MarkerProps, Marquee, type MarqueeProps, MediaImage, type MediaImageProps, MediaTile, type MediaTileProps, Menu, MenuCheckboxItem, MenuContent, MenuGroup, MenuGroupLabel, MenuItem, MenuLinkItem, MenuPortal, MenuRadioGroup, MenuRadioItem, MenuReactions, type MenuReactionsProps, MenuSeparator, MenuSubmenu, MenuSubmenuTrigger, MenuTrigger, Menubar, type MenubarProps, MenubarTrigger, type MenubarTriggerProps, Message, type MessageProps, MessageScroller, type MessageScrollerHandle, type MessageScrollerProps, Meter, MeterIndicator, MeterLabel, type MeterSize, type MeterTone, MeterTrack, MeterValue, MiddleTruncate, type MiddleTruncateProps, type MotionLevel, type MotionPolicy, MotionProvider, type MotionProviderProps, MotionScope, type MotionScopeProps, NavigationMenu, NavigationMenuContent, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, Note, type NoteAction, type NoteProps, NotificationBadge, type NotificationBadgeProps, NumberField, type NumberFieldProps, NumberTicker, type NumberTickerProps, type OrbMode, type OrbSize, OtpField, type OtpFieldProps, OverflowMenu, type OverflowMenuProps, PALETTE_COLORS, PALETTE_FAMILIES, PALETTE_SCALES, PALETTE_STEPS, PALETTE_TONES, PageHeader, type PageHeaderProps, PageLoader, type PageLoaderProps, Pagination, type PaginationProps, type PaletteColor, type PaletteFamily, type PaletteStep, 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, PropertyGroup, PropertyPair, PropertyRow, RadarChart, type RadarChartProps, RadialChart, type RadialChartProps, Radio, RadioCard, type RadioCardProps, type RadioCardTone, RadioGroup, type Reaction, ReactionPicker, type ReactionPickerProps, 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$2 as SeparatorProps, SettingsMenu, type SettingsMenuProps, SettingsRow, type SettingsRowProps, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetList, SheetPortal, type SheetProps, type SheetSnapPoint, 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, SkipLink, Slider, SliderControl, SliderIndicator, SliderRoot, SliderThumb, SliderTrack, SliderValue, type SmoothWheelOptions, 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, TOOL_CALL_STATUS_LABELS, 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, ToolCall, type ToolCallProps, type ToolCallStatus, Toolbar, ToolbarButton, type ToolbarButtonProps, ToolbarGroup, type ToolbarGroupProps, ToolbarInput, type ToolbarInputProps, ToolbarLink, type ToolbarLinkProps, type ToolbarProps, ToolbarSeparator, type ToolbarSeparatorProps, Tooltip, TooltipArrow, TooltipContent, TooltipGroup, type TooltipGroupProps, TooltipPortal, TooltipProvider, TooltipTrigger, Tree, TreeAddRow, TreeEmpty, TreeRow, TreeSection, type UseCaretTriggerOptions, type UseCaretTriggerResult, 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, buttonGroupMeta, buttonMeta, buttonVariants, calendarMeta, cardMeta, caretMenuMeta, carouselMeta, chartColor, toneColor as chartToneColor, chatComposerMeta, checkboxCardMeta, checkboxMeta, cn, codeBlockMeta, codeMeta, collapsibleMeta, colorFieldMeta, comboboxMeta, commandMenuMeta, componentGuidance, componentLabel, componentSlug, componentsInGroup, confirmButtonMeta, contextCardMeta, contextMenuMeta, dataTableMeta, datePickerMeta, dateTileMeta, destructiveActionModalMeta, dialogMeta, disclosurePickerMeta, emptyStateMeta, entityMeta, feedbackMeta, fieldsetMeta, fileDropzoneMeta, fileDropzoneVariants, fontPickerMeta, formMeta, formatFileSize, formatHex, glidingHighlightMeta, gradientArtMeta, hsvToRgb, hueColor, inlineStatusMeta, inputGroupMeta, inputMeta, isPaletteColor, isTransparent, kbdMeta, labelMeta, likeButtonMeta, lineChartMeta, markerMeta, marqueeMeta, mediaImageMeta, mediaTileMeta, menuMeta, menubarMeta, messageMeta, messageScrollerMeta, meterIndicatorVariants, meterMeta, meterTrackVariants, middleTruncateMeta, motionAttribute, navigationMenuMeta, noteMeta, noteVariants, notificationBadgeMeta, notificationCountVariants, notificationDotVariants, numberFieldMeta, numberTickerMeta, otpFieldMeta, overflowMenuMeta, pageHeaderMeta, pageLoaderMeta, paginationMeta, panelGroupMeta, panelSectionMeta, parseHex, phoneMeta, pieChartMeta, pillMeta, pillVariants, popoverMeta, progressMeta, progressTrackVariants, radarChartMeta, radialChartMeta, radioCardMeta, radioMeta, reactionPickerMeta, 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, toolCallMeta, toolbarGroupVariants, toolbarMeta, toolbarSeparatorVariants, toolbarVariants, tooltipMeta, treeIndent, treeMeta, useAnchoredDensity, useAutoSize, useCaretTrigger, useComboboxFilteredItems, useCommandMenuShortcut, useCopy, useDensity, useDisclosurePicker, useInView, useMotion, useMotionLevel, usePanelWidth, usePresentation, useReducedMotion, useScrollActivity, useShake, useSidebar, useSmoothWheel, useToast, useToastManager, useTypeTier, videoMeta, workspaceMeta };

package/dist/index.js

@@ -44,6 +44,7 @@ export * from "./motion/index.js";
 export * from "./components/button/index.js";
 export * from "./components/button-group/index.js";
 export * from "./components/confirm-button/index.js";
+export * from "./components/like-button/index.js";
 export * from "./components/card/index.js";
 export * from "./components/caret-menu/index.js";
 export * from "./components/badge/index.js";
@@ -163,6 +164,7 @@ export * from "./components/chat-composer/index.js";
 export * from "./components/settings-menu/index.js";
 export * from "./components/message/index.js";
 export * from "./components/bubble/index.js";
+export * from "./components/reaction-picker/index.js";
 export * from "./components/attachment/index.js";
 export * from "./components/marker/index.js";
 import { Density, DensityProvider, useDensity, useAnchoredDensity, useTypeTier } from "./lib/density.js";
@@ -175,7 +177,7 @@ import {
 } from "./lib/use-caret-trigger.js";
 import { STATUS_TONES, STATUS_TONE_ICON } from "./lib/status-tone.js";
 import { PALETTE_COLORS, PALETTE_FAMILIES, PALETTE_SCALES, PALETTE_STEPS, PALETTE_TONES, isPaletteColor } from "./lib/palette.js";
-var SABLE_UI_VERSION = "0.14.0";
+var SABLE_UI_VERSION = "0.15.0";
 export {
   ART_TOKENS,
   CHART_SERIES_COUNT,

package/dist/lib/taxonomy.js

@@ -26,8 +26,10 @@ var COMPONENT_TAXONOMY = {
   Button: ["Actions", "either"],
   ButtonGroup: ["Actions", "either"],
   ConfirmButton: ["Actions", "either"],
+  LikeButton: ["Actions", "either"],
   Menubar: ["Actions", "either"],
   OverflowMenu: ["Actions", "either"],
+  ReactionPicker: ["Actions", "either"],
   Toolbar: ["Actions", "either"],
   /* ── Forms ────────────────────────────────────────────────────────────────
      Typing or entering a value, and the structure a form is built from.