@sableui/react 0.17.0 → 0.18.0

package/dist/index.d.ts

@@ -9,7 +9,7 @@ export { AspectBox, AspectBoxProps, Bleed, BleedProps, Breakpoint, Center, Cente
 export { Icon, IconContextValue, IconProps, IconProvider, IconProviderProps, composeIconSets, useIconSet } from './icon/index.js';
 export { a as IconRenderProps, I as IconSet, b as IconVariant } from './registry-CyL28OzJ.js';
 import * as react from 'react';
-import { ReactNode, AnimationEvent, ComponentPropsWithoutRef, ElementType, ReactElement, Ref, ComponentPropsWithRef, MouseEvent, ComponentProps, AriaAttributes, RefObject, FormEvent } from 'react';
+import { ReactNode, AnimationEvent, ComponentPropsWithoutRef, ElementType, ReactElement, Ref, ComponentPropsWithRef, MouseEvent, ComponentProps, AriaAttributes, RefObject, FormEvent, CSSProperties } from 'react';
 import { VariantProps } from 'class-variance-authority';
 import { useRender } from '@base-ui/react/use-render';
 import * as class_variance_authority_types from 'class-variance-authority/types';
@@ -27,6 +27,8 @@ import { Tooltip as Tooltip$1 } from '@base-ui/react/tooltip';
 import { Avatar as Avatar$1 } from '@base-ui/react/avatar';
 import { Progress as Progress$1 } from '@base-ui/react/progress';
 import { Meter as Meter$1 } from '@base-ui/react/meter';
+import { a as ActivityData } from './activity-DT8VK9fx.js';
+export { A as ActivityDay, m as mergeActivity } from './activity-DT8VK9fx.js';
 import { Toggle as Toggle$1 } from '@base-ui/react/toggle';
 import { ToggleGroup as ToggleGroup$1 } from '@base-ui/react/toggle-group';
 import { Toolbar as Toolbar$1 } from '@base-ui/react/toolbar';
@@ -1315,8 +1317,13 @@ declare const badgeMeta: ComponentMeta;
  *       <img src="…" alt="Studio, 2026" className="max-h-full max-w-full object-contain" />
  *     </DialogContent>
  *   </Dialog>
+ *
+ * Opened from your own button through controlled `open`, with no DialogTrigger,
+ * it still returns focus to that button on close: the root records whatever
+ * held focus when `open` turned true and makes it DialogContent's default
+ * `finalFocus` (lib/focus-return has the why). An explicit `finalFocus` wins.
  */
-declare const Dialog: typeof Dialog$1.Root;
+declare function Dialog<Payload = unknown>({ open, onOpenChange, ...props }: Dialog$1.Root.Props<Payload>): react.JSX.Element;
 declare const DialogTrigger: Dialog$1.Trigger;
 declare const DialogClose: react.ForwardRefExoticComponent<Omit<_base_ui_react.AlertDialogCloseProps, "ref"> & react.RefAttributes<HTMLButtonElement>>;
 declare const DialogPortal: {
@@ -1368,9 +1375,20 @@ type PopupProps$1 = Omit<ComponentProps<typeof Dialog$1.Popup>, "className"> & {
      * children directly and the media sizes itself to the viewport.
      */
     scroll?: boolean;
+    /**
+     * Keep the content mounted while the dialog is closed, hidden, instead of
+     * unmounting it. Opt in for a draft the user may come back to: a half-written
+     * form closed by Esc or a stray click keeps its fields (typed values, React
+     * state, scroll position) when it reopens. Leave it off otherwise: a dialog
+     * that should start fresh each time, or one with live content (polling,
+     * video), should not keep running behind a closed door. Reset the draft
+     * yourself once it is submitted or discarded.
+     * @default false
+     */
+    keepMounted?: boolean;
 };
 /** Backdrop + popup surface. Renders through a portal. */
-declare function DialogContent({ size, showCloseButton, scroll, ...props }: PopupProps$1): react.JSX.Element;
+declare function DialogContent({ size, showCloseButton, scroll, finalFocus, ref, ...props }: PopupProps$1): react.JSX.Element;
 type TitleProps$3 = Omit<ComponentProps<typeof Dialog$1.Title>, "className"> & {
     className?: string;
 };
@@ -1404,7 +1422,7 @@ declare function DialogFooter({ className, ...props }: ComponentProps<"div">): r
  *     </AlertDialogContent>
  *   </AlertDialog>
  */
-declare const AlertDialog: typeof AlertDialog$1.Root;
+declare function AlertDialog<Payload = unknown>({ open, onOpenChange, ...props }: AlertDialog$1.Root.Props<Payload>): react.JSX.Element;
 declare const AlertDialogTrigger: AlertDialog$1.Trigger;
 declare const AlertDialogClose: react.ForwardRefExoticComponent<Omit<_base_ui_react.AlertDialogCloseProps, "ref"> & react.RefAttributes<HTMLButtonElement>>;
 declare const AlertDialogContent: typeof DialogContent;
@@ -3244,6 +3262,172 @@ declare namespace Sparkline {
 
 declare const sparklineMeta: ComponentMeta;
 
+/**
+ * Levels and colour for a heatmap: how a value becomes one of a few steps, and
+ * what each step looks like on the active theme.
+ */
+/** What a scale function is told about the data it is scaling. */
+interface ActivityStats {
+    /** The smallest positive value. */
+    min: number;
+    /** The largest value. */
+    max: number;
+    /** How many levels there are, including the empty level 0. */
+    levels: number;
+}
+/**
+ * How a value becomes a level. `"quantile"` splits the positive values evenly
+ * between the levels above 0, as GitHub does, so one outlier does not wash the
+ * rest out. `"linear"` divides 0…max evenly. An array gives the lower bound of
+ * each level from 1 up; a function decides for itself.
+ */
+type ActivityScale = "quantile" | "linear" | number[] | ((value: number, stats: ActivityStats) => number);
+interface ActivityLevels {
+    /** The lower bound of each level from 1 up (`thresholds[0]` is level 1). Empty for a scale function. */
+    thresholds: number[];
+    /** The level of a value: 0 for nothing, up to `levels - 1`. */
+    level: (value: number) => number;
+}
+/**
+ * The levels for a set of values. Zero and negative values are always level 0;
+ * any positive value is at least level 1, so a day with activity never reads as
+ * a day without it.
+ */
+declare function activityLevels(values: number[], { levels, scale }?: {
+    levels?: number;
+    scale?: ActivityScale;
+}): ActivityLevels;
+
+/** A day as the heatmap resolved it — what `tooltip`, `renderCell` and the callbacks receive. */
+interface ActivityHeatmapDay {
+    date: string;
+    value: number;
+    level: number;
+    category?: string;
+}
+/** What `renderCell` is told about the cell it draws into. */
+interface ActivityHeatmapCell {
+    level: number;
+    /** The cell's fill, as a CSS colour. */
+    color: string;
+    /** The cell's edge length in px. */
+    size: number;
+}
+interface ActivityHeatmapProps extends Omit<ComponentPropsWithRef<"figure">, "children"> {
+    /** What the grid shows ("Contributions in 2026") — its caption and accessible name. */
+    label: string;
+    /** The days, as a list or a map of date to value. Sparse is fine; a missing day is 0. */
+    data: ActivityData;
+    /** First day drawn, "YYYY-MM-DD". @default 53 weeks before `end`, from the start of that week */
+    start?: string;
+    /** Last day drawn, "YYYY-MM-DD". @default today */
+    end?: string;
+    /** Draw Jan 1 – Dec 31 of this year. Wins over `start` / `end`. */
+    year?: number;
+    /** 0 puts Sunday on top, 1 Monday. @default the locale's */
+    weekStart?: 0 | 1;
+    /** How many levels, including the empty level 0. @default 5 */
+    levels?: number;
+    /** How a value becomes a level. A day's own `level` always wins. @default "quantile" */
+    levelScale?: ActivityScale;
+    /** The hue of the intensity ramp. Decorative tones lead; `"success"` gives the GitHub look. @default "1" */
+    tone?: ChartTone;
+    /** Colour cells by `day.category` instead of one ramp — a label and tone (or colour) per key. */
+    categories?: ChartCategories;
+    /** Names the value in the tooltip and each cell's name: "contributions", or `{ one, other }` to pluralise. */
+    unit?: string | {
+        one: string;
+        other: string;
+    };
+    /** Formats a value. @default in full up to 9,999, compact past it */
+    formatValue?: (value: number) => string;
+    /** Show a tooltip on hover, focus and tap; a function replaces its content. @default true */
+    tooltip?: boolean | ((day: ActivityHeatmapDay) => ReactNode);
+    /** The Less–More ramp, or swatches for categories. @default true */
+    legend?: boolean;
+    /** The ramp's end words. @default ["Less", "More"] */
+    legendLabels?: [string, string];
+    /** Short month names over each month's first week. @default true */
+    monthLabels?: boolean;
+    /** Which weekday names to show beside the rows. @default "alternate" (Mon, Wed, Fri) */
+    weekdayLabels?: "alternate" | "all" | "none";
+    /** The smallest a cell may get before the grid scrolls instead of shrinking: 10, 12 or 14 px. @default "md" */
+    size?: "sm" | "md" | "lg";
+    /** Grow cells to fill the width, up to 20 px. @default true */
+    stretch?: boolean;
+    /** The hovered or focused day, controlled. */
+    activeDate?: string | null;
+    defaultActiveDate?: string | null;
+    onActiveDateChange?: (date: string | null) => void;
+    /** The selected day, controlled. Selection is on only when `onSelectDate` is set. */
+    selectedDate?: string | null;
+    /** Called when a day is clicked or chosen with Enter / Space — as GitHub filters its feed below. */
+    onSelectDate?: (date: string) => void;
+    /** Draw something into a cell (an icon for a milestone, a reward, an outage). Rendered over the fill. */
+    renderCell?: (day: ActivityHeatmapDay, cell: ActivityHeatmapCell) => ReactNode;
+    /** Draw the empty grid, shimmering, while data loads. */
+    loading?: boolean;
+    /**
+     * How much motion this component uses: `full` (default) inherits the app's
+     * policy, `subtle` keeps feedback and drops the flourish, `off` stills it.
+     * The weeks fading in as the grid scrolls into view is the flourish.
+     */
+    motion?: MotionLevel;
+    /** BCP 47 locale for month and weekday names, numbers and plurals. */
+    locale?: string;
+}
+/**
+ * A calendar heatmap: one value per day as a grid of weeks by weekdays — the
+ * GitHub contribution graph, for any daily measure (commits, habits, sales,
+ * uptime). Levels come from the data by quartile unless a day brings its own;
+ * categories colour days by source instead of intensity.
+ *
+ * The grid is a real `role="grid"` table, as GitHub's is: one tab stop, arrow
+ * keys between days, each cell named with its date and value. It fills the
+ * width down to `size`; narrower than that, the weeks scroll sideways (opening
+ * on the latest) while the weekday labels and legend stay put.
+ */
+declare function ActivityHeatmap({ label, data, start, end, year, weekStart, levels, levelScale, tone, categories, unit, formatValue, tooltip, legend, legendLabels, monthLabels, weekdayLabels, size, stretch, activeDate, defaultActiveDate, onActiveDateChange, selectedDate, onSelectDate, renderCell, loading, motion, locale, className, style, ref, ...props }: ActivityHeatmapProps): react.JSX.Element;
+declare namespace ActivityHeatmap {
+    var displayName: string;
+}
+
+declare const activityHeatmapMeta: ComponentMeta;
+
+interface ActivityWeek {
+    /** Day numbers for each row, top to bottom; null where the day falls outside the range. */
+    days: (number | null)[];
+}
+interface ActivityMonth {
+    /** The first day of the month (or of the range, for a partial first month). */
+    day: number;
+    /** The week column the month's header starts at. */
+    week: number;
+    /** How many week columns it spans. */
+    span: number;
+}
+interface ActivityGrid {
+    start: number;
+    end: number;
+    weekStart: 0 | 1;
+    /** The day number in the top-left slot, which may sit before `start`. */
+    origin: number;
+    weeks: ActivityWeek[];
+    /** Month header segments, left to right, spanning every week column between them. */
+    months: ActivityMonth[];
+}
+/**
+ * The weeks-by-weekdays grid for a range: one column per week, one row per
+ * weekday starting at `weekStart`, with partial first and last weeks padded by
+ * nulls. Month segments start at the week holding each month's 1st; the weeks
+ * before the first 1st belong to the range's opening month.
+ */
+declare function activityGrid({ start, end, weekStart }: {
+    start: number;
+    end: number;
+    weekStart: 0 | 1;
+}): ActivityGrid;
+
 type StepStatus = "complete" | "current" | "upcoming" | "error";
 type StepperOrientation = "horizontal" | "vertical";
 type StepperIndicator = "number" | "dot";
@@ -3878,7 +4062,7 @@ type SheetSnapPoint = number | string;
  * to a panel that slides sideways.
  */
 type SheetProps<Payload = unknown> = Omit<Drawer.Root.Props<Payload>, "swipeDirection">;
-declare function Sheet<Payload = unknown>({ snapPoints, snapPoint, defaultSnapPoint, onSnapPointChange, snapToSequentialPoints, ...props }: SheetProps<Payload>): react.JSX.Element;
+declare function Sheet<Payload = unknown>({ snapPoints, snapPoint, defaultSnapPoint, onSnapPointChange, snapToSequentialPoints, open, onOpenChange, ...props }: SheetProps<Payload>): react.JSX.Element;
 declare const SheetTrigger: Drawer.Trigger;
 declare const SheetClose: Drawer.Close;
 declare const SheetPortal: {
@@ -3888,7 +4072,7 @@ declare const SheetPortal: {
 type ContentProps$4 = Omit<ComponentProps<typeof Drawer.Popup>, "className"> & VariantProps<typeof sheetVariants> & {
     className?: string;
 };
-declare function SheetContent({ className, children, side, initialFocus, ref, style, ...props }: ContentProps$4): react.JSX.Element;
+declare function SheetContent({ className, children, side, initialFocus, finalFocus, ref, style, ...props }: ContentProps$4): react.JSX.Element;
 type TitleProps$1 = Omit<ComponentProps<typeof Drawer.Title>, "className"> & {
     className?: string;
 };
@@ -4071,7 +4255,7 @@ declare namespace DataTable {
 declare const dataTableMeta: ComponentMeta;
 
 /**
- * A chip someone clicks. Two appearances, two sizes, one `selected` state each:
+ * A chip someone clicks. Two appearances, three sizes, one `selected` state each:
  *
  * - `solid` (default): the filter-row chip. Rests on the secondary surface;
  *   `selected` lifts it onto the primary surface so the active filter reads at
@@ -4082,15 +4266,24 @@ 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.
  *
- * 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
+ * All sizes are fixed heights. md sits on the density ladder's xs control
+ * height (28px), sm is 24px — the touch-target floor, deliberately NOT a
+ * ladder step, so a compact scope cannot shrink it under 24. 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.
+ * so all drop it. Semantic tokens only — theme-safe in light and dark.
+ *
+ * `lg` sits on `--control-sm` (32px, compact 28), the rung the spacing doctrine
+ * gives toolbar controls: Button `sm`, Toggle and SearchInput `sm` stand on it
+ * too, so a filter row beside a search field and its buttons is one height. A
+ * page toolbar is the case it exists for ("All · Products · Open source" …
+ * [Find a project]). md's 28px is the chip under or among content, and no text
+ * field shares it — Input / SearchInput `xs` is the inset tool-panel field, a
+ * different surface — so md beside a field is always a mismatch.
  */
 declare const pillVariants: (props?: ({
     appearance?: "outline" | "solid" | null | undefined;
-    size?: "sm" | "md" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
     selected?: boolean | null | undefined;
     tone?: "blue" | "green" | "orange" | "pink" | "purple" | "red" | "teal" | "yellow" | "neutral" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
@@ -4108,8 +4301,10 @@ interface PillProps extends ComponentPropsWithRef<"button">, Omit<VariantProps<t
  * half clickable and half not.
  *
  * `appearance="outline"` is the quiet chip for choices that annotate other
- * content (a reaction, a tag on a card); `size="sm"` puts it on the xs control
- * height. Use these rather than restyling a Pill with classes — an override is
+ * content (a reaction, a tag on a card); `size="sm"` is the small chip under
+ * content, `size="lg"` the toolbar chip that shares `--control-sm` with a
+ * SearchInput `size="sm"` and Button `size="sm"` beside it. Use these rather
+ * than restyling a Pill with classes — an override is
  * a look that exists nowhere else in the system. `tone="blue"` (any palette
  * family) colours the chip as a category, like a tag picker's choices.
  */
@@ -5214,6 +5409,13 @@ interface CodeBlockProps extends ComponentPropsWithRef<"div"> {
      * What Snippet was.
      */
     prompt?: string;
+    /**
+     * Wrap long lines instead of scrolling them. For prose in a code face (a
+     * prompt to paste into an agent, a log line), where the end of a line
+     * scrolled out of view hides what it says. Code keeps scrolling: wrapping
+     * breaks the indentation it is read by.
+     */
+    wrap?: boolean;
 }
 /**
  * A multi-line code block. An optional header bar carries the filename and a
@@ -5224,7 +5426,7 @@ interface CodeBlockProps extends ComponentPropsWithRef<"div"> {
  * Highlighting is opt-in through `highlight` or `CodeHighlightProvider`.
  * Soft-square (rounded-md), never a pill.
  */
-declare function CodeBlock({ code, filename, showCopy, highlight, prompt, className, ...props }: CodeBlockProps): react.JSX.Element;
+declare function CodeBlock({ code, filename, showCopy, highlight, prompt, wrap, className, ...props }: CodeBlockProps): react.JSX.Element;
 declare namespace CodeBlock {
     var displayName: string;
 }
@@ -6610,6 +6812,14 @@ interface PageHeaderProps extends Omit<ComponentPropsWithRef<"div">, "title"> {
      * shows a PageHeader as an example. @default "h1"
      */
     titleAs?: "h1" | "h2";
+    /**
+     * The title's scale. `md` (text-heading-2 over a text-body-sm description)
+     * for product pages: settings, lists, dashboards. `lg` (text-display-lg over
+     * a text-body-lg lede) for an editorial page: a personal site, a marketing
+     * page, an article index. Display type is never product chrome, so keep `lg`
+     * off app routes. @default "md"
+     */
+    size?: "md" | "lg";
 }
 /**
  * PageHeader — an in-flow page heading block: a title row (optional back control
@@ -6623,9 +6833,10 @@ interface PageHeaderProps extends Omit<ComponentPropsWithRef<"div">, "title"> {
  * must never be cut — and the actions drop under it when the row runs out of
  * room. Beside a back control or actions the title sits in a band one control
  * tall, so a one-line title centres on the buttons and a wrapped one starts level
- * with them.
+ * with them. A title whose line is taller than the controls (`size="lg"`) is
+ * lifted by half the difference instead, so its first line still centres on them.
  */
-declare function PageHeader({ title, description, back, actions, titleAs: Title, className, children, ...props }: PageHeaderProps): react.JSX.Element;
+declare function PageHeader({ title, description, back, actions, titleAs: Title, size, className, children, ...props }: PageHeaderProps): react.JSX.Element;
 declare namespace PageHeader {
     var displayName: string;
 }
@@ -6653,11 +6864,13 @@ interface SectionHeaderProps extends Omit<ComponentPropsWithRef<"div">, "title">
      */
     titleId?: string;
     /**
-     * Visual weight, independent of the heading level. `md` (text-heading-3) for
-     * a page's sections and shelves; `sm` (text-heading-4) for a denser set —
-     * settings groups, subsections, a sidebar's sections. @default "md"
+     * Visual weight, independent of the heading level. `lg` (text-heading-2 over
+     * a text-body-md description) for an editorial page's sections, under a
+     * `PageHeader size="lg"`; `md` (text-heading-3) for a page's sections and
+     * shelves; `sm` (text-heading-4) for a denser set — settings groups,
+     * subsections, a sidebar's sections. @default "md"
      */
-    size?: "md" | "sm";
+    size?: "lg" | "md" | "sm";
 }
 /**
  * SectionHeader — the heading block for one section of a page: a title, an
@@ -6675,7 +6888,9 @@ interface SectionHeaderProps extends Omit<ComponentPropsWithRef<"div">, "title">
  *
  * It shares PageHeader's title row: the title wraps rather than truncating,
  * the actions keep to the title's row and drop beneath it only when the row
- * runs out of room. It carries no outer spacing — the Stack or Page it sits in
+ * runs out of room. A title whose line is taller than the controls (`lg`, or
+ * a denser register's shorter ladder) is lifted by half the difference, so its
+ * first line stays centred on them. It carries no outer spacing — the Stack or Page it sits in
  * owns the rhythm between the header and what it introduces.
  */
 declare function SectionHeader({ title, description, actions, titleAs, titleId, size, className, ...props }: SectionHeaderProps): react.JSX.Element;
@@ -6685,7 +6900,20 @@ declare namespace SectionHeader {
 
 declare const sectionHeaderMeta: ComponentMeta;
 
-interface SearchInputProps extends Omit<ComponentPropsWithRef<"input">, "onChange" | "value" | "defaultValue"> {
+/** The rungs of the control ladder a SearchInput stands on. */
+type SearchInputSize = "md" | "sm" | "xs";
+interface SearchInputProps extends Omit<ComponentPropsWithRef<"input">, "onChange" | "value" | "defaultValue" | "size"> {
+    /**
+     * Which rung of the control ladder the field stands on — the same names as
+     * Input, Select and Combobox. `md` is the form field. `sm` is the toolbar
+     * field: it shares `--control-sm` with Pill `lg` and Button `sm`, so a row
+     * of filter chips beside the search is one height. `xs` is the inset
+     * tool-panel field, Input `xs`'s surface. The magnifier and clear button
+     * scale and stay centred at every rung. The native numeric `size` attribute
+     * is omitted; the field's width comes from `className`.
+     * @default "md"
+     */
+    size?: SearchInputSize;
     /** Controlled value of the search field. */
     value?: string;
     /**
@@ -6719,7 +6947,7 @@ interface SearchInputProps extends Omit<ComponentPropsWithRef<"input">, "onChang
  * Controlled via `value` + `onValueChange`, or uncontrolled via `defaultValue`;
  * pass `onClear` to hook the reset. `className` sizes the whole field.
  */
-declare function SearchInput({ value, defaultValue, onValueChange, onClear, placeholder, className, inputClassName, ref, type, ...props }: SearchInputProps): react.JSX.Element;
+declare function SearchInput({ value, defaultValue, onValueChange, onClear, placeholder, className, inputClassName, size, ref, type, ...props }: SearchInputProps): react.JSX.Element;
 declare namespace SearchInput {
     var displayName: string;
 }
@@ -8692,6 +8920,14 @@ interface MediaImageProps extends Omit<ComponentPropsWithRef<"div">, "children">
      * the muted surface — a logo, a product shot that must not be cropped.
      */
     fit?: "cover" | "contain";
+    /**
+     * Where the image sits in its frame — CSS `object-position`, the sibling of
+     * `fit`. Under `cover` it is the part kept when the crop trims the rest (a
+     * face at `"50% 30%"`, a horizon at `"bottom"`); under `contain` it is the
+     * side the letterbox gives way to. Takes any object-position value.
+     * @default "center"
+     */
+    position?: CSSProperties["objectPosition"];
     /** `srcSet` / `sizes` for responsive images, passed to the `<img>`. */
     srcSet?: string;
     sizes?: string;
@@ -8722,7 +8958,7 @@ interface MediaImageProps extends Omit<ComponentPropsWithRef<"div">, "children">
  * — painting the art first would flash a colourful stand-in for a frame and
  * then swap it for the photo. Once loaded, the image fades in.
  */
-declare function MediaImage({ src, alt, seed, fallback, fit, srcSet, sizes, loading, className, ...props }: MediaImageProps): react.JSX.Element;
+declare function MediaImage({ src, alt, seed, fallback, fit, position, srcSet, sizes, loading, className, ...props }: MediaImageProps): react.JSX.Element;
 declare namespace MediaImage {
     var displayName: string;
 }
@@ -8760,6 +8996,13 @@ interface MediaTileProps extends Omit<ComponentPropsWithRef<"div">, "title"> {
     alt?: string;
     /** Seeds the fallback art. Defaults to `title` when it is a string. */
     seed?: string | number;
+    /**
+     * Which part of the cover the crop keeps — CSS `object-position`, passed to
+     * the cover's MediaImage: `"50% 30%"` for a face, `"top"` for a poster's
+     * title. Store it with the image when each one frames differently.
+     * @default "center"
+     */
+    position?: CSSProperties["objectPosition"];
     /**
      * The cover's shape: `square` (albums, podcasts, playlists), `video` (16:9),
      * `poster` (2:3 — films, books), or any width / height ratio.
@@ -8823,7 +9066,7 @@ interface MediaTileProps extends Omit<ComponentPropsWithRef<"div">, "title"> {
  * and the cover is drawn above it with `order`, so focus moves the way a
  * reader names the item — what it is, who made it, then what to do with it.
  */
-declare function MediaTile({ title, subtitle, meta, src, srcSet, sizes, alt, seed, aspect, size, href, render, subtitleHref, subtitleRender, action, badge, titleAs: TitleTag, loading, className, ...props }: MediaTileProps): react.JSX.Element;
+declare function MediaTile({ title, subtitle, meta, src, srcSet, sizes, alt, seed, position, aspect, size, href, render, subtitleHref, subtitleRender, action, badge, titleAs: TitleTag, loading, className, ...props }: MediaTileProps): react.JSX.Element;
 declare namespace MediaTile {
     var displayName: string;
 }
@@ -9974,6 +10217,6 @@ interface UseActiveSectionOptions {
  */
 declare function useActiveSection(ids: readonly string[], { offset, root }?: UseActiveSectionOptions): string | null;
 
-declare const SABLE_UI_VERSION: "0.17.0";
+declare const SABLE_UI_VERSION: "0.18.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 ArtIntensity, 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, SectionRail, type SectionRailProps, type SectionRailSection, 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 UseActiveSectionOptions, type UseCaretTriggerOptions, type UseCaretTriggerResult, type UseCopyOptions, type UseCopyResult, type UseInViewOptions, type UseMatchHighlightOptions, 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, sectionRailMeta, 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, useActiveSection, useAnchoredDensity, useAutoSize, useCaretTrigger, useComboboxFilteredItems, useCommandMenuShortcut, useCopy, useDensity, useDisclosurePicker, useInView, useMatchHighlight, useMotion, useMotionLevel, usePanelWidth, usePresentation, useReducedMotion, useScrollActivity, useShake, useSidebar, useSmoothWheel, useToast, useToastManager, useTypeTier, videoMeta, workspaceMeta };
+export { Accordion, AccordionItem, AccordionPanel, AccordionTrigger, ActivityData, type ActivityGrid, ActivityHeatmap, type ActivityHeatmapCell, type ActivityHeatmapDay, type ActivityHeatmapProps, type ActivityLevels, type ActivityMonth, type ActivityScale, type ActivityStats, type ActivityWeek, AlertDialog, AlertDialogClose, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogTitle, AlertDialogTrigger, AppHeader, type AppHeaderProps, AppShell, type AppShellProps, AreaChart, type AreaChartProps, type ArtIntensity, 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, SectionRail, type SectionRailProps, type SectionRailSection, 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 UseActiveSectionOptions, type UseCaretTriggerOptions, type UseCaretTriggerResult, type UseCopyOptions, type UseCopyResult, type UseInViewOptions, type UseMatchHighlightOptions, type UsePanelWidthOptions, Video, type VideoProps, ViewTransitionName, type ViewTransitionNameProps, Workspace, WorkspaceBar, WorkspaceCanvas, accordionMeta, activityGrid, activityHeatmapMeta, activityLevels, 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, sectionRailMeta, 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, useActiveSection, useAnchoredDensity, useAutoSize, useCaretTrigger, useComboboxFilteredItems, useCommandMenuShortcut, useCopy, useDensity, useDisclosurePicker, useInView, useMatchHighlight, useMotion, useMotionLevel, usePanelWidth, usePresentation, useReducedMotion, useScrollActivity, useShake, useSidebar, useSmoothWheel, useToast, useToastManager, useTypeTier, videoMeta, workspaceMeta };

package/dist/index.js

@@ -82,6 +82,10 @@ export * from "./components/pie-chart/index.js";
 export * from "./components/radar-chart/index.js";
 export * from "./components/radial-chart/index.js";
 export * from "./components/sparkline/index.js";
+export * from "./components/activity-heatmap/index.js";
+import { mergeActivity } from "./lib/chart/activity.js";
+import { activityGrid } from "./lib/chart/calendar.js";
+import { activityLevels } from "./lib/chart/heat.js";
 import {
   CHART_SERIES_COUNT,
   chartColor,
@@ -183,7 +187,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.17.0";
+var SABLE_UI_VERSION = "0.18.0";
 export {
   APP_SHELL_TOKENS,
   ART_TOKENS,
@@ -220,6 +224,8 @@ export {
   TYPE_SCALE_TOKENS,
   TYPE_UI_TOKENS,
   WORKSPACE_SURFACE_TOKENS,
+  activityGrid,
+  activityLevels,
   applySableColorMode,
   applySableTheme,
   chartColor,
@@ -232,6 +238,7 @@ export {
   getThemeManifest,
   isPaletteColor,
   isThemeId,
+  mergeActivity,
   switchMeta,
   themeIds,
   themeManifestById,

package/dist/layout/AspectBox.js

@@ -8,14 +8,11 @@ function AspectBox({
   children,
   ...rest
 }) {
-  const mergedStyle = {
-    aspectRatio: String(ratio),
-    ...style
-  };
+  const mergedStyle = { "--sable-aspect": String(ratio), ...style };
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: cn("relative w-full overflow-hidden", className),
+      className: cn("relative aspect-(--sable-aspect) w-full overflow-hidden", className),
       style: mergedStyle,
       ...rest,
       children

package/dist/layout/Bleed.js

@@ -2,12 +2,16 @@
 import { cn } from "../lib/cn.js";
 import { jsx } from "react/jsx-runtime";
 function Bleed({ className, style, children, ref, ...rest }) {
-  const mergedStyle = {
-    width: "100cqw",
-    marginInline: "calc(50% - 50cqw)",
-    ...style
-  };
-  return /* @__PURE__ */ jsx("div", { ref, className: cn(className), style: mergedStyle, ...rest, children });
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cn("mx-[calc(50%_-_50cqw)] w-[100cqw]", className),
+      style,
+      ...rest,
+      children
+    }
+  );
 }
 Bleed.displayName = "Bleed";
 export {

package/dist/layout/Center.js

@@ -10,11 +10,19 @@ var NAMED_MAX = {
 function Center({ max, className, style, children, ref, ...rest }) {
   const maxWidth = max ? NAMED_MAX[max] ?? max : void 0;
   const mergedStyle = {
-    marginInline: "auto",
-    ...maxWidth ? { maxWidth } : null,
+    ...maxWidth ? { "--sable-center-max": maxWidth } : null,
     ...style
   };
-  return /* @__PURE__ */ jsx("div", { ref, className: cn("w-full", className), style: mergedStyle, ...rest, children });
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cn("mx-auto w-full", maxWidth && "max-w-(--sable-center-max)", className),
+      style: mergedStyle,
+      ...rest,
+      children
+    }
+  );
 }
 export {
   Center

package/dist/layout/Columns.js

@@ -21,8 +21,8 @@ function Columns({
 }) {
   const resolvedGap = resolveGap(gap);
   const mergedStyle = {
-    rowGap: resolvedGap,
-    columnGap: cappedColumnGap(resolvedGap),
+    "--sable-columns-row-gap": resolvedGap,
+    "--sable-columns-column-gap": cappedColumnGap(resolvedGap),
     ...responsiveVars("--cols", count),
     ...style
   };
@@ -31,7 +31,10 @@ function Columns({
     {
       ref,
       "data-sable-grid-cols": true,
-      className: cn(className),
+      className: cn(
+        "grid gap-x-(--sable-columns-column-gap) gap-y-(--sable-columns-row-gap)",
+        className
+      ),
       style: mergedStyle,
       ...rest,
       children