prime-ui-kit 0.15.0 → 0.17.0

package/dist/internal/parts.d.ts

@@ -0,0 +1,39 @@
+import * as React from "react";
+/**
+ * Whether a child is an element of the given part (element types are compared, never
+ * `displayName`).
+ */
+export declare function isPart<P = unknown>(node: React.ReactNode, type: React.ElementType): node is React.ReactElement<P>;
+/**
+ * The children as a flat list: fragments opened (their keys prefixed, so they stay unique),
+ * `null`, `undefined` and booleans dropped.
+ */
+export declare function flattenChildren(nodes: React.ReactNode, prefix?: string): React.ReactNode[];
+/**
+ * Splits the direct children into the elements of the given part types and the rest, each in the
+ * written order (`Page.Actions` at the end of a `Page.Header`, `Badge.Action` at the end of the badge).
+ */
+export declare function splitParts<P = unknown>(children: React.ReactNode, ...types: React.ElementType[]): {
+    parts: React.ReactElement<P>[];
+    rest: React.ReactNode[];
+};
+/** Plain text children become `Label` elements, so every item title is its labelling part. */
+export declare function labelPlainText(children: React.ReactNode, Label: React.ComponentType<{
+    children: React.ReactNode;
+}>): React.ReactNode;
+/** A text part of an item: its title, a count after it, the second line. */
+type TextPart = "label" | "count" | "description";
+/**
+ * The text parts of a two-line item (a tab, a segment): its `Label`, `Count` and `Description`
+ * register their ids (`useTextPartId`), and the item takes its name from the label and the count
+ * and its description from the second line — by ids that are in the document, never guessed. A
+ * one-line item (no description) is named by its content and gets neither attribute.
+ */
+export declare function useTextParts(): {
+    provide: (children: React.ReactNode) => React.ReactElement;
+    labelledBy: string | undefined;
+    describedBy: string | undefined;
+};
+/** The id of a text part inside an item (`useTextParts`); `undefined` outside one. */
+export declare function useTextPartId(part: TextPart): string | undefined;
+export {};

package/dist/internal/progressSegments.d.ts

@@ -5,31 +5,70 @@
 import type { PaletteColor, Tone } from "./states";
 /** The two modes of a progress indicator; the component adds its own common props. */
 export type ProgressModeProps = {
-    /** Current value; clamped to `0…max`. */
+    /**
+     * Value mode: the current value, clamped to `0…max`.
+     */
     value: number;
-    /** Top of the scale. Default `100`. */
+    /**
+     * Value mode: top of the scale. Segments mode: total capacity; a `max` above the sum of the parts leaves the rest as track.
+     */
     max?: number;
-    /** Fill color. Default `accent`. */
+    /**
+     * Value mode: fill color, telling the outcome.
+     */
     tone?: Tone;
+    /**
+     * Segments mode: parts in order, `{ value, label?, tone? | color? }`: `tone` names a meaning (default `accent`), `color` a category, as in its charts. Each part's width is its share of `max`.
+     */
     segments?: never;
+    /**
+     * Segments mode: `none` — one continuous pill; `hairline` — every part and the rest are separate pills. `bar` layout.
+     */
     segmentGap?: never;
+    /**
+     * Segments mode: built-in strings, see Labels.
+     */
     labels?: never;
+    /**
+     * Segments mode: a legend under the bar, one row per part: color · name · value · share; it becomes the group's description. `bar` layout.
+     */
     legend?: never;
+    /**
+     * Segments mode: display of a part's value in the legend and the rows («1 840 000 ₽»).
+     */
     formatValue?: never;
 } | {
-    /** Parts in order (left to right, clockwise from the top); each one's size is its share of `max`. */
+    /**
+     * Segments mode: parts in order, `{ value, label?, tone? | color? }`: `tone` names a meaning (default `accent`), `color` a category — its step of the chart palette. Each part's length is its share of `max`.
+     */
     segments: ProgressSegment[];
-    /** Total capacity. Default: the sum of the segments (they fill the whole indicator). */
+    /**
+     * Value mode: top of the scale. Segments mode: total capacity; the sum of the parts closes the ring, a larger `max` leaves the rest as track.
+     */
     max?: number;
-    /** `hairline` draws every part on its own with a gap. Default `none`. */
+    /**
+     * Segments mode: `none` — one continuous ring; `hairline` — every part and the rest are separate round arcs.
+     */
     segmentGap?: "none" | "hairline";
-    /** Built-in accessible strings for empty distributions. */
+    /**
+     * Segments mode: built-in strings, see Labels.
+     */
     labels?: Partial<ProgressSegmentsLabels>;
-    /** A legend of the parts: color · name · value · share. Default `false`. */
+    /**
+     * Segments mode: a legend beside the ring (below it when narrow), one row per part: color · name · value · share; with `aria-label` it becomes the group's description. The root turns into the row of ring and legend.
+     */
     legend?: boolean;
-    /** Display of a value in the legend (and in ProgressBar rows). Default: Russian digit groups. */
+    /**
+     * Segments mode: display of a part's value in the legend («38 ГБ»).
+     */
     formatValue?: (value: number) => string;
+    /**
+     * Value mode: the current value, clamped to `0…max`; it glides to a new value (`base`). `null` — under way, the share unknown: a quarter arc that always turns, no `aria-valuenow`.
+     */
     value?: never;
+    /**
+     * Value mode: arc color, telling the outcome. `inherit` — the arc in the host's text color over a 32% track of it, for a ring on a colored host or over media.
+     */
     tone?: never;
 };
 /** `value` mode: `max` defaults to 100 (or when not positive) and `value` is clamped to `0…max`. */
@@ -63,7 +102,7 @@ export declare function segmentFill(segment: ProgressSegment): {
 };
 /** What 100% of a row is in the `rows` layout. */
 export type ProgressScale = "sum" | "max" | "first";
-export type ResolvedRow = {
+type ResolvedRow = {
     segment: ProgressSegment;
     /** Bar length, 0–1. */
     ratio: number;
@@ -83,8 +122,8 @@ export type ProgressSegmentsLabels = {
     /** Accessible description when every segment weighs zero. */
     allEmpty: string;
 };
-export declare const DEFAULT_PROGRESS_SEGMENTS_LABELS: ProgressSegmentsLabels;
-export type ResolvedSegments = {
+export declare const PROGRESS_SEGMENTS_LABELS: ProgressSegmentsLabels;
+type ResolvedSegments = {
     segments: ProgressSegment[];
     /** Sum of the segment weights. */
     total: number;
@@ -98,3 +137,4 @@ export type ResolvedSegments = {
     text: string;
 };
 export declare function resolveSegments(input: ProgressSegment[], max: number | undefined, labels: ProgressSegmentsLabels): ResolvedSegments;
+export {};

package/dist/internal/richText.d.ts

@@ -1,45 +1,17 @@
 import * as React from "react";
-export type RichInline = {
-    type: "text";
-    text: string;
-} | {
-    type: "bold" | "italic" | "strike" | "spoiler";
-    children: RichInline[];
-} | {
-    type: "code";
-    text: string;
-} | {
-    type: "link";
-    href: string;
-    children: RichInline[];
-};
-export type RichBlock = {
-    type: "text";
-    children: RichInline[];
-} | {
-    type: "quote";
-    children: RichInline[];
-} | {
-    type: "code";
-    text: string;
-};
-/** The address when it is a safe link, else `null`. */
-export declare function safeHref(raw: string): string | null;
-/** Inline markup of one run of text. */
-export declare function parseInline(source: string): RichInline[];
-/** Blocks of a message: runs of text, quotes (`> ` lines) and fenced code. */
-export declare function parseRichText(source: string): RichBlock[];
-export type RichTextLabels = {
+type RichTextLabels = {
     /** Accessible name of a masked spoiler: its text is not read until it is revealed. */
     spoiler: string;
 };
-export type RichTextProps = {
+type RichTextProps = {
     source: string;
     /** Rendered at the very end of the last line (a chat bubble's meta reserve). */
     end?: React.ReactNode;
     /** Marks every case-insensitive match of this text (a search through a chat). */
     highlight?: string;
-    labels?: Partial<RichTextLabels>;
+    /** The host's strings (`Message.Text` passes its `spoiler`). */
+    labels: RichTextLabels;
 };
 /** A message text with its Markdown subset rendered safely; `end` closes the last text line. */
-export declare function RichText({ source, end, highlight, labels: labelsProp }: RichTextProps): import("react/jsx-runtime").JSX.Element;
+export declare function RichText({ source, end, highlight, labels }: RichTextProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/internal/ring.d.ts

@@ -16,9 +16,12 @@ export declare const RING_DATA_STROKE: number;
  * - `line` — a ring inside a control (Spinner, the ring of a circle Button, a transfer disk): the
  *   kit's line weight, two border widths — the weight of an icon's stroke at the control's tier,
  *   at every diameter.
+ * - `band` — a band of one spacing step over the edge of a round video (the playback ring of
+ *   VideoNote, the recording ring of the Composer).
  */
-export type RingWeight = "data" | "line";
-export type RingProps = Omit<React.SVGAttributes<SVGSVGElement>, "children"> & {
+type RingWeight = "data" | "line" | "band";
+type RingTrack = "line" | "faint" | "surface" | "none";
+type RingProps = Omit<React.SVGAttributes<SVGSVGElement>, "children"> & {
     /**
      * The share drawn, `0…1`; `null` — under way, the share unknown: a quarter arc that always
      * turns. Ignored with `live`.
@@ -26,8 +29,13 @@ export type RingProps = Omit<React.SVGAttributes<SVGSVGElement>, "children"> & {
     value: number | null;
     /** The ring turns at any share (one turn = 3 × `--prime-motion-loop`); the arc never under 8%. */
     spin?: boolean;
-    /** A faint full circle under the arc. Default `true`. */
-    track?: boolean;
+    /**
+     * The full circle under the arc: `line` — `currentColor` at the line tint, for a ring on a
+     * colored host or over media (default); `faint` — at the hover tint, for a ring that is only a
+     * loading cue (Spinner); `surface` — `fill-strong`, the track of a line on a surface (as
+     * ProgressBar's); `none` — no track.
+     */
+    track?: RingTrack;
     /** Default `line`. */
     weight?: RingWeight;
     /**
@@ -56,9 +64,11 @@ export declare function RingCap({ position, className, style, ...rest }: React.S
  * it. An SVG without a viewBox: the circle is placed in CSS (`r`, the stroke from `weight`), so
  * the stroke is exact at every diameter; lengths are percent of the circle (`RING_PATH`). The arc
  * starts at 12 o'clock and runs clockwise with round ends; its share is one variable
- * (`--ring-value`) and glides by itself (`base`, on the paint of the arc), while the turn is a
- * transform of the whole svg (compositor) — so a share grows while the ring turns. Colors:
- * `--ring-fill` (default `currentColor`) and `--ring-track` (default `currentColor` at 32%).
- * Decorative (`aria-hidden`) unless the host gives it a role.
+ * (`--ring-value`) and glides by itself (`base`, on the paint of the arc), while the turn is the
+ * `rotate` of its inner group (compositor) — so a share grows while the ring turns, and a host's
+ * own animation of the svg (a region swap) runs beside it. The fill is `--ring-fill` (default
+ * `currentColor`); the track is `currentColor` at the line tint. Decorative (`aria-hidden`)
+ * unless the host gives it a role.
  */
 export declare function Ring({ value, spin, track, weight, live, className, style, children, role, ...rest }: RingProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/internal/rovingFocus.d.ts

@@ -3,16 +3,21 @@
  * segments) and grids (swatches). Pure functions: the caller owns the items, focus and selection.
  */
 /** Which arrow keys move along a single row. `both` accepts all four (a vertical list shown as a row). */
-export type RovingOrientation = "horizontal" | "vertical" | "both";
+type RovingOrientation = "horizontal" | "vertical" | "both";
 /**
- * Next index in a wrapping row of `count` items, or `null` when `key` does not navigate.
- * Arrows wrap around the ends; Home / End jump to the first / last item. A current index of `-1`
- * (nothing focused yet) moves to the first item on "next" and to the last on "previous".
+ * Next index in a row of `count` items, or `null` when `key` does not navigate. Arrows move one
+ * step and wrap around the ends (a tablist, a menu, a palette); with `wrap: false` they stop at the
+ * first and the last item (a long list whose ends are its edges: messages, conversations). Home /
+ * End jump to the first / last item. A current index of `-1` (nothing focused yet) moves to the
+ * first item on "next" and to the last on "previous".
  */
-export declare function rovingIndex(key: string, index: number, count: number, orientation?: RovingOrientation): number | null;
+export declare function rovingIndex(key: string, index: number, count: number, orientation?: RovingOrientation, { wrap }?: {
+    wrap?: boolean;
+}): number | null;
 /**
  * Next index in a grid of `count` items laid out in rows of `columns`, or `null` when `key` does
  * not navigate. Left / Right step through the reading order and stop at the ends; Up / Down move
  * one row and stay put when there is no row; Home / End jump to the first / last item.
  */
 export declare function gridIndex(key: string, index: number, count: number, columns: number): number | null;
+export {};

package/dist/{components/data-table/rowEvents.d.ts → internal/rowLink.d.ts}

@@ -1,9 +1,4 @@
 import type * as React from "react";
-/**
- * Elements inside a row that are controls of their own: a click on them never opens the row, and
- * on a link row they sit above the row's hit area. `data-row-click-ignore` marks a custom widget.
- */
-export declare const ROW_CONTROLS: string;
 /**
  * Whether a click on a row should open it: it started inside the row's own DOM (React events
  * bubble out of portals — a ⋯ menu item in a cell — and those never count), not on a control

package/dist/internal/scrollAncestors.d.ts

@@ -1,2 +1,16 @@
+/**
+ * The boxes a person can scroll around an element: the one walk behind a layer that follows its
+ * anchor through scrolling (`usePosition`) and a gesture that scrolls the box under the pointer
+ * (`edgeAutoScroll`). `hidden` and `clip` are not scrolling: a locked region or one whose content
+ * fits never counts.
+ */
+export type ScrollAxes = {
+    x: boolean;
+    y: boolean;
+};
+/** The axes a person can scroll `element` along. */
+export declare function scrollAxes(element: Element): ScrollAxes;
+/** Scrollable boxes from `element` itself up to the root, innermost first. */
+export declare function scrollableAncestors(element: Element | null): HTMLElement[];
 /** `window` and the scrolling ancestors of the anchor: where a fixed layer listens for scroll. */
 export declare function getScrollContainers(node: Element | null): Array<Element | Window | VisualViewport>;

package/dist/internal/selectionIndicator.d.ts

@@ -0,0 +1,27 @@
+import type * as React from "react";
+/**
+ * The sliding indicator of a switcher (`selectionIndicator.module.css`): join it on the element
+ * the host draws as its folder, thumb or capsule, first in the row so it paints under the items.
+ */
+export declare const selectionIndicatorClass: string;
+/**
+ * Writes a boolean `data-*` flag only when it changes: a layout pass that runs on every frame of
+ * a container resize must not restyle the row when nothing changed.
+ */
+export declare function setFlag(element: HTMLElement, name: `data-${string}`, on: boolean): void;
+/**
+ * Places the indicator over `target` — its offset box in the parent they share — straight in the
+ * DOM, so a resize or a font swap never re-renders the host. With `animate` (a person's choice) a
+ * move of a visible indicator glides; every other placement snaps. Without a target the
+ * indicator fades out.
+ */
+export declare function placeIndicator(indicator: HTMLElement, target: HTMLElement | null, animate: boolean): void;
+/** `onTransitionEnd` of the indicator: the glide is over, so the next layout change snaps. */
+export declare function endIndicatorGlide(event: Pick<React.TransitionEvent<HTMLElement>, "target" | "currentTarget" | "propertyName">): void;
+/**
+ * Scrolls a sideways scroller (never the page: `scrollIntoView` would scroll it too) so `item` is
+ * in view and clear of the edge fade (`--scroll-fade-depth` on the scroller); near an end it
+ * scrolls all the way, where the fade melts to nothing. Smooth only after a person's choice.
+ * Returns the offset the scroller goes to, or `null` when the item is already in view.
+ */
+export declare function revealInScroller(scroller: HTMLElement, item: HTMLElement, smooth: boolean): number | null;

package/dist/internal/slot.d.ts

@@ -1,9 +1,19 @@
 import * as React from "react";
 type AnyProps = Record<string, unknown>;
-export type SlotProps = {
+type SlotProps<E extends HTMLElement = HTMLElement> = {
     children?: React.ReactNode;
-    ref?: React.Ref<HTMLElement>;
+    ref?: React.Ref<E>;
 } & AnyProps;
+/**
+ * The props of a slot part (`Trigger`, `Close`, `Confirm`, `Anchor`): exactly one element, which
+ * takes the part's behaviour. A slot part renders no DOM of its own, so it has no `className`.
+ */
+export type SlotPartProps = {
+    /**
+     * One element: a control, a disabled control or a non-interactive element such as a Badge.
+     */
+    children: React.ReactElement;
+};
 /**
  * Merges its own props onto the single React child element.
  * The basis of the `asChild` polymorphism pattern (same idea as Radix UI `Slot`).
@@ -15,11 +25,19 @@ export type SlotProps = {
  * - `on*` handlers — both fire, child first; a child `preventDefault()` skips the slot handler
  * - All other props — a defined child prop overrides the slot prop
  * - `ref` — merged with the child's ref
- * - `aria-disabled` on the slot — clicks (pointer and keyboard-activated) are stopped in the capture
- *   phase, so the child's own `onClick` never runs and a link does not navigate
+ * - `aria-disabled` on the slot — the child leaves the Tab order (`tabIndex -1`), a link loses its
+ *   `href` (it stays a `link` by role), and clicks (pointer and keyboard-activated) are stopped in
+ *   the capture phase, so the child's own `onClick` never runs and nothing navigates
  */
-export declare function Slot({ children, ref, ...slotProps }: SlotProps): import("react/jsx-runtime").JSX.Element;
+export declare function Slot<E extends HTMLElement = HTMLElement>({ children, ref, ...slotProps }: SlotProps<E>): import("react/jsx-runtime").JSX.Element;
 export declare namespace Slot {
     var displayName: string;
 }
+/**
+ * The one element child of an `asChild` part, whose own children the part wraps
+ * (`React.cloneElement(child, undefined, …child.props.children)`). Throws a named error otherwise.
+ */
+export declare function slotChild(children: React.ReactNode, part: string): React.ReactElement<{
+    children?: React.ReactNode;
+}>;
 export {};

package/dist/internal/states.d.ts

@@ -5,8 +5,67 @@
 /** Control size tiers: xs 28 · s 32 · m 36 · l 40 · xl 48. Default is always `m`. */
 export declare const controlSizes: readonly ["xs", "s", "m", "l", "xl"];
 export type ControlSize = (typeof controlSizes)[number];
+/**
+ * The default `size` of an overlay's `Content` (Modal, Drawer, Popover, Dropdown, Tooltip): a width
+ * tier of its own that never follows the host's tier (foundation §10), so it does not resolve
+ * through `useHostTier`.
+ */
+export declare const OVERLAY_CONTENT_SIZE = "m";
 /** The tier `n` steps smaller, never below `xs`: a control nested in another (foundation §6 pairing). */
 export declare function stepDown(size: ControlSize, n?: number): ControlSize;
+/**
+ * The tier of a fixed small control inside a host (a corner close, a row toggle, a tile check, a
+ * close on a tab): `xs` up to `m`, `s` for `l` and `xl`. Not a step down: in an `m` host a step
+ * down would give `s`, and the control would read as one of the host's own actions.
+ */
+export declare function compactTier(size: ControlSize): ControlSize;
+/**
+ * Named tier mappings: one per metric a host must match, each with the reason it is not a step.
+ * A component never declares its own `Record<ControlSize, ControlSize>`.
+ */
+export declare const tierMappings: {
+    /** An Avatar or Thumbnail leading a Select row: the media stays inside the row height. */
+    readonly rowMedia: {
+        readonly xs: "xs";
+        readonly s: "xs";
+        readonly m: "s";
+        readonly l: "s";
+        readonly xl: "m";
+    };
+    /**
+     * The Skeleton tier whose line height equals the legend row of a label tier
+     * (16 · 16 · 20 · 20 · 20), so a loading legend keeps the height of the loaded one.
+     */
+    readonly legendSkeleton: {
+        readonly xs: "xs";
+        readonly s: "xs";
+        readonly m: "m";
+        readonly l: "m";
+        readonly xl: "m";
+    };
+    /**
+     * The label tier of a legend's text (ProgressBar, ProgressCircle): a legend is secondary to its
+     * indicator, so s and xl read the label of the tier below (xs · xs · m · l · l).
+     */
+    readonly legendText: {
+        readonly xs: "xs";
+        readonly s: "xs";
+        readonly m: "m";
+        readonly l: "l";
+        readonly xl: "l";
+    };
+    /**
+     * The account Avatar of a Sidebar row: the avatar of the tier, capped so it still fits the
+     * compact rail with even air around it (32 at `l`, 40 at `xl`).
+     */
+    readonly railAvatar: {
+        readonly xs: "xs";
+        readonly s: "s";
+        readonly m: "m";
+        readonly l: "m";
+        readonly xl: "l";
+    };
+};
 /** Visual treatment. */
 export declare const variants: readonly ["solid", "soft", "outline", "ghost"];
 export type Variant = (typeof variants)[number];
@@ -19,6 +78,8 @@ export type PaletteColor = (typeof paletteColors)[number];
 /** Values of `data-state`. */
 export declare const dataStates: readonly ["open", "closed", "checked", "unchecked", "indeterminate", "active", "inactive"];
 export type DataState = (typeof dataStates)[number];
+/** The state of a check: a checkbox box, a check mark, a choice row. */
+export type CheckState = Extract<DataState, "checked" | "unchecked" | "indeterminate">;
 /**
  * Text color (Typography, Icon). `default` is primary text, `secondary` and `muted` are the
  * two quieter steps; the rest map to the semantic `*-text` colors.

package/dist/internal/sticky.d.ts

@@ -1,2 +1,6 @@
-/** Covers the sub-pixel seam above a block-start sticky surface in WebKit (`sticky.module.css`). */
+/**
+ * A surface that sticks to the start edge of its scroller (`sticky.module.css`): it sticks at
+ * `top: 0`, covers the sub-pixel seam above it in WebKit, and stops sticking on a screen lower than
+ * 480px (foundation §9). The host sets only its stacking (`z-index`) and fill (`--sticky-bg`).
+ */
 export declare const stickySurfaceClass: string;

package/dist/internal/swallowNextClick.d.ts

@@ -0,0 +1,9 @@
+/**
+ * A gesture that ends with the pointer released over the page (a drag, a dragged scroll) is
+ * followed by a click on whatever the pointer was released over. That click is not a press: it is
+ * taken here, once, and only when it lands inside `source` or `scope` (the list an item was dropped
+ * into renders it anew, so the click lands on a new element there). The next press or key ends the
+ * watch, so a later click (a keyboard activation among them) is never taken. Returns a function
+ * that ends the watch early.
+ */
+export declare function swallowNextClick(source: Element, scope?: Element | null): () => void;

package/dist/internal/swatch.d.ts

@@ -1,4 +1,5 @@
 import * as React from "react";
+import type { PaletteColor } from "./states";
 export type ColorPreset = {
     /** CSS color stored as the value (`onValueChange` returns it as is). */
     value: string;
@@ -11,39 +12,72 @@ export type ColorPreset = {
  * Take `COLOR_PRESETS.slice(0, 8)` for a single row of eight.
  */
 export declare const COLOR_PRESETS: readonly ColorPreset[];
+/** Names of the palette hues, in the order a palette picker shows them. */
+export declare const PALETTE_COLOR_NAMES: Record<PaletteColor, string>;
+/** Every palette hue in the picker order (the keys of `PALETTE_COLOR_NAMES`). */
+export declare const PALETTE_ORDER: PaletteColor[];
 /**
  * One selectable swatch: `null` is «no color». `contrast` picks the check mark: `light` / `dark`
  * by the color's luminance; `surface` (the «no color» checkerboard, drawn from the surface's own
- * fills) follows the theme with the primary text color.
+ * fills) follows the theme with the primary text color; `hue` — a palette hue (`value` is its
+ * name), drawn from its solid step with its own foreground.
  */
 export type SwatchOption = {
     value: string | null;
     label: string;
-    contrast: "light" | "dark" | "surface";
+    contrast: "light" | "dark" | "surface" | "hue";
 };
 /** The presets as swatch options, plus the «no color» option at the end when `allowEmpty`. */
 export declare function useSwatchOptions(presets: readonly ColorPreset[], allowEmpty: boolean, emptyLabel: string): SwatchOption[];
-/** Class of a selectable swatch (button or option) sized by `--swatch-size` / `--swatch-radius`. */
+/** The palette hues as swatch options (`value` is the hue), plus «no color» when `allowEmpty`. */
+export declare function usePaletteOptions(palette: readonly PaletteColor[], allowEmpty: boolean, emptyLabel: string, names: Record<PaletteColor, string>): SwatchOption[];
+/**
+ * Class of a selectable swatch (button or option) sized by `--swatch-size` / `--swatch-radius`,
+ * with the press feedback; the donor owns its hover, focus and disabled look.
+ */
 export declare const swatchClass: string;
 /**
- * Tier of a swatch grid, from `data-size` on the same element: `--swatch-radius`, `--swatch-gap`
- * and `--swatch-size` = `--swatch-base` − 8. The host picks the base: `--swatch-base-control`
- * (control height) or `--swatch-base-item` (menu item height).
+ * The square swatch button of a trigger (ColorPresets): the field height of the tier on the same
+ * element (`fieldTierClass` + `data-size`), the inner edge that darkens on hover and while open
+ * (`data-state`), the press feedback and the shared disabled look.
+ */
+export declare const swatchTriggerClass: string;
+/**
+ * Tier of a swatch grid, on the grid element with `data-size`: the field tier plus
+ * `--swatch-radius`, the gap between swatches and `--swatch-size` = base − 8, where the base is the
+ * control height, or the menu item height with `data-base="item"`; on a coarse pointer at least the
+ * touch target.
  */
 export declare const swatchTierClass: string;
-/** Color layer of a swatch; `null` draws the "no color" checkerboard. */
-export declare function SwatchFill({ value }: {
+/**
+ * A grid of swatches, joined next to `swatchTierClass`: one row of `--swatch-count` swatches (the
+ * host sets it) while the width allows, then `--swatch-columns` (`useBalancedColumns`) balanced
+ * rows. `data-stretch` makes the swatches share the whole width, each across its column.
+ */
+export declare const swatchGridClass: string;
+/**
+ * Defines `--swatch-checker`, the kit's transparency checkerboard as a background layer, for a host
+ * that lays a translucent color over it (ColorPicker's alpha track).
+ */
+export declare const checkerboardClass: string;
+/**
+ * Color layer of a swatch; `null` draws the "no color" checkerboard; `hue` — the value is a palette
+ * hue on a swatch that carries `palette.hue` + `data-color`.
+ */
+export declare function SwatchFill({ value, hue }: {
     value: string | null;
+    hue?: boolean;
 }): import("react/jsx-runtime").JSX.Element;
 /**
  * Inside a selectable swatch: the color layer and the contrasting check, which draws in when the
  * swatch is selected and retracts when it is not (`CheckMark`, the same mark as Checkbox).
  */
-export declare function SwatchContent({ value, selected }: {
+export declare function SwatchContent({ value, selected, hue, }: {
     value: string | null;
     selected: boolean;
+    hue?: boolean;
 }): import("react/jsx-runtime").JSX.Element;
-export type SwatchChipProps = Omit<React.HTMLAttributes<HTMLSpanElement>, "children"> & {
+type SwatchChipProps = Omit<React.HTMLAttributes<HTMLSpanElement>, "children"> & {
     value: string | null;
     ref?: React.Ref<HTMLSpanElement>;
 };
@@ -55,9 +89,19 @@ export declare function SwatchChip({ value, className, ...rest }: SwatchChipProp
 /** Case- and space-insensitive color comparison; `null` means "no color". */
 export declare function sameColor(a: string | null, b: string | null): boolean;
 /**
- * sRGB channels (0–255) of a hex, `rgb()` or `hsl()` color; `null` for anything else (named colors,
- * other spaces). Kept dependency-free so the swatches stay out of the ColorPicker entry.
+ * `--swatch-columns` of a swatch grid: balanced rows at its current width (none before the first
+ * measure). `cellSelector` finds a swatch, whose height is the tier size (ColorSwatches, ColorPresets).
  */
-export declare function colorToRgb(value: string): [number, number, number] | null;
-/** `dark` when a dark mark contrasts better with the color than a light one (WCAG luminance). */
-export declare function markContrast(value: string): "light" | "dark";
+export declare function useBalancedColumns(gridRef: React.RefObject<HTMLElement | null>, count: number, cellSelector: string): number | undefined;
+/**
+ * Roving focus over a grid of `count` swatches (ColorSwatches, ColorPresets): `itemRef(index)` on
+ * each swatch; `move(event, from, columns?)` takes the arrows, Home and End from the focused swatch
+ * (else `from`), focuses the swatch they reach and returns its index — `null` for any other key.
+ * Without `columns` the rows are the visual ones (a grid that wraps to its width).
+ */
+export declare function useSwatchGrid(count: number): {
+    itemRef: (index: number) => (node: HTMLElement | null) => void;
+    move: (event: React.KeyboardEvent, from: number, columns?: number) => number | null;
+    focus: (index: number) => void;
+};
+export {};

package/dist/internal/textFormatting.d.ts

@@ -14,7 +14,7 @@ export declare const TEXT_FORMATTING_LABELS: TextFormattingLabels;
 /** Every format in toolbar order. */
 export declare const TEXT_FORMATS: readonly TextFormat[];
 /** Text with its selection, `start <= end` (a caret when equal). */
-export type TextSelection = {
+type TextSelection = {
     text: string;
     start: number;
     end: number;
@@ -50,3 +50,4 @@ export declare const FORMAT_SHORTCUTS: Record<TextFormat, {
 }>;
 /** `⌘⇧X` on Apple systems, `Ctrl+Shift+X` elsewhere. */
 export declare function shortcutText(format: TextFormat, apple: boolean): string;
+export {};

package/dist/internal/textFormattingToolbar.d.ts

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { type ControlSize } from "./states";
 import { type TextFormattingLabels } from "./textFormatting";
-export type TextFormattingOptions = {
+type TextFormattingOptions = {
     textareaRef: React.RefObject<HTMLTextAreaElement | null>;
     /** The hotkeys and the toolbar. */
     enabled: boolean;
@@ -13,7 +13,7 @@ export type TextFormattingOptions = {
     /** Id of the textarea (`aria-controls` of the toolbar). */
     controlsId?: string;
 };
-export type TextFormatting = {
+type TextFormatting = {
     /** On the textarea's `onSelect`. */
     onSelect: () => void;
     /** Call first in the textarea's `onKeyDown`; `true` when the key was a formatting one and is used. */
@@ -24,3 +24,4 @@ export type TextFormatting = {
     toolbar: React.ReactNode;
 };
 export declare function useTextFormatting({ textareaRef, enabled, toolbar: toolbarAllowed, labels, size, controlsId, }: TextFormattingOptions): TextFormatting;
+export {};