prime-ui-kit 0.9.0 → 0.9.1

package/dist/components/scroll-container/ScrollContainer.d.ts

@@ -1,23 +1,20 @@
 import * as React from "react";
 export type ScrollContainerAxis = "vertical" | "horizontal" | "both";
-export type ScrollContainerProps = Omit<React.HTMLAttributes<HTMLElement>, "className"> & {
+export type ScrollContainerProps = React.HTMLAttributes<HTMLElement> & {
     /** Root element. Default `div`; `AppShell.Main` renders `main`. */
     as?: "div" | "main" | "aside" | "section" | "nav" | "article";
     /** Scroll axis. Default `vertical`. */
     axis?: ScrollContainerAxis;
     /** `overscroll-behavior`. Default `contain`: nested panels do not chain scroll into the page. */
     overscrollBehavior?: "auto" | "contain" | "none";
-    className?: string;
+    /**
+     * Fade the edges where more content is hidden (`data-overflow-start` / `data-overflow-end`):
+     * along the horizontal axis for `axis="horizontal"`, along the vertical one otherwise.
+     */
+    fade?: boolean;
+    /** `thin` — the kit's quiet scrollbar (default); `hidden` — no scrollbar (pair it with `fade`). */
+    scrollbar?: "thin" | "hidden";
+    ref?: React.Ref<HTMLElement>;
 };
 /** Scroll region with the kit's thin scrollbars; shrinks inside flex/grid parents. */
-declare const ScrollContainer: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLElement>, "className"> & {
-    /** Root element. Default `div`; `AppShell.Main` renders `main`. */
-    as?: "div" | "main" | "aside" | "section" | "nav" | "article";
-    /** Scroll axis. Default `vertical`. */
-    axis?: ScrollContainerAxis;
-    /** `overscroll-behavior`. Default `contain`: nested panels do not chain scroll into the page. */
-    overscrollBehavior?: "auto" | "contain" | "none";
-    className?: string;
-} & React.RefAttributes<HTMLElement>>;
-export { ScrollContainer };
-//# sourceMappingURL=ScrollContainer.d.ts.map
+export declare function ScrollContainer({ as: Component, axis, overscrollBehavior, fade, scrollbar, className, ref, ...rest }: ScrollContainerProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/segmented-control/SegmentedControl.d.ts

@@ -1,6 +1,6 @@
 import * as React from "react";
 import type { ControlSize, PaletteColor } from "@/internal/states";
-export type SegmentedControlRootProps = {
+export type SegmentedControlRootProps = Omit<React.HTMLAttributes<HTMLDivElement>, "defaultValue" | "onChange"> & {
     value?: string;
     defaultValue?: string;
     onValueChange?: (value: string) => void;
@@ -8,13 +8,9 @@ export type SegmentedControlRootProps = {
     size?: ControlSize;
     /** Stretch to the container width; segments share it equally and truncate their labels. */
     fullWidth?: boolean;
-    /** Accessible name of the radiogroup (or use `aria-labelledby`). */
-    "aria-label"?: string;
-    "aria-labelledby"?: string;
-    children: React.ReactNode;
-    className?: string;
+    ref?: React.Ref<HTMLDivElement>;
 };
-declare function SegmentedControlRoot({ value, defaultValue, onValueChange, disabled, size, fullWidth, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, children, className, }: SegmentedControlRootProps): import("react/jsx-runtime").JSX.Element;
+declare function SegmentedControlRoot({ value, defaultValue, onValueChange, disabled, size: sizeProp, fullWidth, children, className, onKeyDown, ...rest }: SegmentedControlRootProps): import("react/jsx-runtime").JSX.Element;
 declare namespace SegmentedControlRoot {
     var displayName: string;
 }
@@ -33,10 +29,16 @@ export type SegmentedControlItemProps = Omit<React.ButtonHTMLAttributes<HTMLButt
      */
     children: React.ReactNode;
     className?: string;
+    ref?: React.Ref<HTMLButtonElement>;
 };
+declare function SegmentedControlItem({ value, disabled, color, children, className, onClick, ref, ...rest }: SegmentedControlItemProps): import("react/jsx-runtime").JSX.Element;
+declare namespace SegmentedControlItem {
+    var displayName: string;
+}
 export type SegmentedControlIconProps = {
     children: React.ReactNode;
     className?: string;
+    ref?: React.Ref<HTMLSpanElement>;
 } & Omit<React.HTMLAttributes<HTMLSpanElement>, "children">;
 declare function SegmentedControlIcon({ children, className, ...rest }: SegmentedControlIconProps): import("react/jsx-runtime").JSX.Element;
 declare namespace SegmentedControlIcon {
@@ -45,6 +47,7 @@ declare namespace SegmentedControlIcon {
 export type SegmentedControlLabelProps = {
     children: React.ReactNode;
     className?: string;
+    ref?: React.Ref<HTMLSpanElement>;
 } & Omit<React.HTMLAttributes<HTMLSpanElement>, "children">;
 /** Segment title; truncates with an ellipsis. Plain text children are wrapped automatically. */
 declare function SegmentedControlLabel({ children, className, ...rest }: SegmentedControlLabelProps): import("react/jsx-runtime").JSX.Element;
@@ -55,45 +58,30 @@ export type SegmentedControlDescriptionProps = {
     /** Muted second line; wrap the key value in `<strong>` to emphasize it. */
     children: React.ReactNode;
     className?: string;
+    ref?: React.Ref<HTMLSpanElement>;
 } & Omit<React.HTMLAttributes<HTMLSpanElement>, "children">;
 /** Second line of a two-line segment; becomes the segment's accessible description. */
 declare function SegmentedControlDescription({ children, className, ...rest }: SegmentedControlDescriptionProps): import("react/jsx-runtime").JSX.Element;
 declare namespace SegmentedControlDescription {
     var displayName: string;
 }
-export type SegmentedControlCountProps = {
+export type SegmentedControlCountProps = Omit<React.HTMLAttributes<HTMLSpanElement>, "children" | "color"> & {
     /** Badge hue. Default `gray`. */
     color?: PaletteColor;
     children: React.ReactNode;
-    className?: string;
+    ref?: React.Ref<HTMLSpanElement>;
 };
 /** Counter after the label: a soft Badge one tier below the control. */
-declare function SegmentedControlCount({ color, children, className, }: SegmentedControlCountProps): import("react/jsx-runtime").JSX.Element;
+declare function SegmentedControlCount({ color, children, className, ...rest }: SegmentedControlCountProps): import("react/jsx-runtime").JSX.Element;
 declare namespace SegmentedControlCount {
     var displayName: string;
 }
 export declare const SegmentedControl: {
     Root: typeof SegmentedControlRoot;
-    Item: React.ForwardRefExoticComponent<Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "value" | "children" | "role" | "type"> & {
-        value: string;
-        disabled?: boolean;
-        /**
-         * Palette hue of the option (e.g. a status): a dot of that hue before the content, and while
-         * selected the sliding thumb takes a soft fill of the hue with a ring of it.
-         */
-        color?: PaletteColor;
-        /**
-         * Text, `SegmentedControl.Icon`, `SegmentedControl.Label`, `SegmentedControl.Count`,
-         * `SegmentedControl.Description`. A description makes the segment two-line. Only an icon makes the
-         * segment square: give it `aria-label` (and wrap it in a Tooltip).
-         */
-        children: React.ReactNode;
-        className?: string;
-    } & React.RefAttributes<HTMLButtonElement>>;
+    Item: typeof SegmentedControlItem;
     Icon: typeof SegmentedControlIcon;
     Label: typeof SegmentedControlLabel;
     Count: typeof SegmentedControlCount;
     Description: typeof SegmentedControlDescription;
 };
 export {};
-//# sourceMappingURL=SegmentedControl.d.ts.map

package/dist/components/select/Select.d.ts

@@ -1,200 +1,119 @@
 import * as React from "react";
-import { type FieldFrameProps } from "@/internal/FieldFrame";
-import type { ControlSize, PaletteColor } from "@/internal/states";
-export type SelectLabels = {
-    /** Placeholder and accessible name of the search field (`Select.Content searchable`). */
-    search: string;
-    /** Empty state: no items or nothing matches. */
-    empty: string;
-    /** Second line of the empty state while searching. */
-    emptyHint: string;
-    /** Status row while `loading`. */
-    loading: string;
-    /** Tooltip of the clear button (`clearable`). */
-    clear: string;
-    /** Muted marker after the label when `optional`. */
-    optional: string;
-};
-type SelectRootBase = FieldFrameProps & {
+import { type FieldFrameProps, type FieldRootDomProps } from "@/internal/FieldFrame";
+import { type MenuGroupProps } from "@/internal/MenuGroup";
+import type { ControlSize } from "@/internal/states";
+import { SelectItem, SelectItemDescription, SelectItemIcon, SelectItemMeta, SelectItemText } from "./SelectItem";
+import { type SelectLabels } from "./selectContext";
+export type { SelectItemDescriptionProps, SelectItemIconProps, SelectItemMetaProps, SelectItemProps, SelectItemTextProps, } from "./SelectItem";
+export type { SelectLabels } from "./selectContext";
+type SelectRootBase = FieldRootDomProps & FieldFrameProps & {
     size?: ControlSize;
     disabled?: boolean;
     placeholder?: string;
     /** Danger ring and `aria-invalid`; a non-empty `error` implies it. */
     invalid?: boolean;
-    /** Id of the control (trigger or native `<select>`); generated when omitted. */
+    /** Id of the trigger; generated when omitted. */
     id?: string;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** Clear segment in the trigger (and `Delete` / `Backspace` on it) while a value is selected. */
+    clearable?: boolean;
+    /** Spinner instead of the chevron, `aria-busy`, a status row in the list. */
+    loading?: boolean;
     labels?: Partial<SelectLabels>;
     className?: string;
     children: React.ReactNode;
 };
-type SelectSingleValueProps = {
+type SelectSingleProps = {
     multiple?: false;
     value?: string;
     defaultValue?: string;
     /** Picked value; `""` after clearing. */
     onValueChange?: (value: string) => void;
 };
-type SelectMultipleValueProps = {
+type SelectMultipleProps = {
+    /** `string[]` value, checkboxes in the list, the list stays open on a pick. */
     multiple: true;
     value?: string[];
     defaultValue?: string[];
     onValueChange?: (value: string[]) => void;
 };
-type SelectComboboxProps = {
-    native?: false;
-    open?: boolean;
-    defaultOpen?: boolean;
-    onOpenChange?: (open: boolean) => void;
-    /** Clear button in the trigger (and `Delete` / `Backspace` on it) while a value is selected. */
-    clearable?: boolean;
-    /** Spinner instead of the chevron, `aria-busy`, a status row in the list. */
-    loading?: boolean;
-};
-/**
- * Native mode: the system `<select>`. It has no `Select.Trigger`, so naming attributes and
- * `name` go on Root.
- */
-type SelectNativeProps = Pick<React.SelectHTMLAttributes<HTMLSelectElement>, "name" | "aria-label" | "aria-labelledby" | "aria-describedby"> & {
-    native: true;
-};
-export type SelectRootProps = SelectRootBase & (SelectSingleValueProps | SelectMultipleValueProps) & (SelectComboboxProps | SelectNativeProps);
+export type SelectRootProps = SelectRootBase & (SelectSingleProps | SelectMultipleProps);
 declare function SelectRoot(props: SelectRootProps): import("react/jsx-runtime").JSX.Element;
 declare namespace SelectRoot {
     var displayName: string;
 }
-export type SelectTriggerProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "id" | "type" | "role">;
-/** What `Select.Value` passes to its render function: the selected option. */
+export type SelectTriggerProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "id" | "type" | "role"> & {
+    ref?: React.Ref<HTMLButtonElement>;
+};
+declare function SelectTrigger({ className, children, onClick, onKeyDown, "aria-describedby": ariaDescribedBy, ref, ...rest }: SelectTriggerProps): import("react/jsx-runtime").JSX.Element;
+declare namespace SelectTrigger {
+    var displayName: string;
+}
+/** What `renderValue` receives: the selected option. */
 export type SelectValueItem = {
     value: string;
     label: string;
 };
-export type SelectValueProps = {
-    className?: string;
+export type SelectValueProps = Omit<React.HTMLAttributes<HTMLSpanElement>, "children"> & {
     /**
-     * Single mode: renders the selected option in the trigger, e.g. with the same
-     * `Select.ItemMedia` / `Select.ItemText` / `Select.ItemDescription` parts as the row.
-     * Not called while empty (the placeholder shows) and ignored in `multiple` mode.
+     * Single mode: renders the selected option in the trigger, e.g. with the same `Thumbnail.Root`,
+     * `Select.ItemText` and `Select.ItemDescription` parts as the row. Not called while empty (the
+     * placeholder shows) and not used in `multiple` mode.
      */
-    children?: (item: SelectValueItem) => React.ReactNode;
+    renderValue?: (item: SelectValueItem) => React.ReactNode;
+    ref?: React.Ref<HTMLSpanElement>;
 };
-declare function SelectValue({ className, children }: SelectValueProps): import("react/jsx-runtime").JSX.Element;
+/** The picked label (labels joined in `multiple`), or the placeholder. */
+declare function SelectValue({ renderValue, className, ...rest }: SelectValueProps): import("react/jsx-runtime").JSX.Element;
 declare namespace SelectValue {
     var displayName: string;
 }
-export type SelectTriggerIconProps = React.HTMLAttributes<HTMLSpanElement>;
-declare function SelectTriggerIcon({ className, children, ...rest }: SelectTriggerIconProps): import("react/jsx-runtime").JSX.Element;
-declare namespace SelectTriggerIcon {
-    var displayName: string;
-}
-export type SelectBadgeProps = {
-    /** Palette hue of the soft badge. Default `gray`. */
-    color?: PaletteColor;
-    children: React.ReactNode;
-    className?: string;
-};
-/**
- * Status inside the trigger: a soft Badge one tier below the field, at the trailing edge before
- * the clear button and the chevron. The value truncates before it; the trigger height is unchanged.
- */
-declare function SelectBadge({ color, children, className }: SelectBadgeProps): import("react/jsx-runtime").JSX.Element;
-declare namespace SelectBadge {
-    var displayName: string;
-}
-export type SelectItemMediaProps = {
-    /** Palette hue of the tile (soft fill + hue text for an icon). Without it — a neutral fill. */
-    color?: PaletteColor;
-    /** An icon or an `<img>` (covers the tile). */
-    children: React.ReactNode;
-    className?: string;
-};
-/** Leading thumbnail tile of a rich option; the option grows to two lines. */
-declare function SelectItemMedia({ color, children, className }: SelectItemMediaProps): import("react/jsx-runtime").JSX.Element;
-declare namespace SelectItemMedia {
-    var displayName: string;
-}
-export type SelectItemTextProps = {
-    children: React.ReactNode;
-    className?: string;
-};
-/** Title of a rich option; its text is the option label (trigger, typeahead, search). */
-declare function SelectItemText({ children, className }: SelectItemTextProps): import("react/jsx-runtime").JSX.Element;
-declare namespace SelectItemText {
-    var displayName: string;
-}
-export type SelectItemDescriptionProps = {
-    children: React.ReactNode;
-    className?: string;
-};
-/** Muted second line under `Select.ItemText`; searchable. */
-declare function SelectItemDescription({ children, className }: SelectItemDescriptionProps): import("react/jsx-runtime").JSX.Element;
-declare namespace SelectItemDescription {
-    var displayName: string;
-}
-export type SelectItemMetaProps = {
-    children: React.ReactNode;
-    className?: string;
+export type SelectTriggerIconProps = React.HTMLAttributes<HTMLSpanElement> & {
+    ref?: React.Ref<HTMLSpanElement>;
 };
-/** Trailing meta of an option (price, count): muted, tabular, right-aligned, before the check. */
-declare function SelectItemMeta({ children, className }: SelectItemMetaProps): import("react/jsx-runtime").JSX.Element;
-declare namespace SelectItemMeta {
+/** A leading glyph in the trigger, before the value (decorative). */
+declare function SelectTriggerIcon({ className, ...rest }: SelectTriggerIconProps): import("react/jsx-runtime").JSX.Element;
+declare namespace SelectTriggerIcon {
     var displayName: string;
 }
-export type SelectContentProps = {
-    className?: string;
-    /** Поле поиска вверху панели; пункты фильтруются по подписи и `keywords`. */
+export type SelectContentProps = Omit<React.HTMLAttributes<HTMLDivElement>, "children" | "hidden" | "onKeyDown" | "onAnimationEnd"> & {
+    /** A search field on top of the list; items filter by label, description and `keywords`. */
     searchable?: boolean;
     children: React.ReactNode;
+    /** The floating panel. */
+    ref?: React.Ref<HTMLDivElement>;
 };
-declare function SelectContent({ className, searchable, children }: SelectContentProps): import("react/jsx-runtime").JSX.Element;
+declare function SelectContent({ searchable, className, children, ...rest }: SelectContentProps): import("react/jsx-runtime").JSX.Element;
 declare namespace SelectContent {
     var displayName: string;
 }
-export type SelectItemIconProps = React.HTMLAttributes<HTMLSpanElement>;
-declare function SelectItemIcon({ className, children, ...rest }: SelectItemIconProps): import("react/jsx-runtime").JSX.Element;
-declare namespace SelectItemIcon {
-    var displayName: string;
-}
-export type SelectItemProps = {
-    value: string;
-    /** Explicit label for display in trigger; falls back to string children, then value */
-    label?: string;
-    /** Дополнительные слова для поиска (`Select.Content searchable`). */
-    keywords?: string;
-    disabled?: boolean;
-    className?: string;
-    children: React.ReactNode;
-};
-export type SelectGroupProps = React.HTMLAttributes<HTMLDivElement>;
+export type SelectGroupProps = MenuGroupProps;
+/** Options under a heading; hidden while the search leaves none of them. */
 declare function SelectGroup({ className, ...rest }: SelectGroupProps): import("react/jsx-runtime").JSX.Element;
 declare namespace SelectGroup {
     var displayName: string;
 }
-export type SelectGroupLabelProps = React.HTMLAttributes<HTMLDivElement>;
-declare function SelectGroupLabel({ className, ...rest }: SelectGroupLabelProps): import("react/jsx-runtime").JSX.Element;
-declare namespace SelectGroupLabel {
-    var displayName: string;
-}
-export type SelectSeparatorProps = React.HTMLAttributes<HTMLHRElement>;
+export type SelectSeparatorProps = Omit<React.HTMLAttributes<HTMLDivElement>, "children"> & {
+    ref?: React.Ref<HTMLDivElement>;
+};
+/** A full-bleed hairline between groups; hidden while searching. */
 declare function SelectSeparator({ className, ...rest }: SelectSeparatorProps): import("react/jsx-runtime").JSX.Element;
 declare namespace SelectSeparator {
     var displayName: string;
 }
 export declare const Select: {
     Root: typeof SelectRoot;
-    Trigger: React.ForwardRefExoticComponent<SelectTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+    Trigger: typeof SelectTrigger;
     Value: typeof SelectValue;
     TriggerIcon: typeof SelectTriggerIcon;
-    Badge: typeof SelectBadge;
     Content: typeof SelectContent;
-    Item: React.ForwardRefExoticComponent<SelectItemProps & React.RefAttributes<HTMLDivElement>>;
+    Item: typeof SelectItem;
     ItemIcon: typeof SelectItemIcon;
-    ItemMedia: typeof SelectItemMedia;
     ItemText: typeof SelectItemText;
     ItemDescription: typeof SelectItemDescription;
     ItemMeta: typeof SelectItemMeta;
     Group: typeof SelectGroup;
-    GroupLabel: typeof SelectGroupLabel;
     Separator: typeof SelectSeparator;
 };
-export {};
-//# sourceMappingURL=Select.d.ts.map

package/dist/components/select/SelectItem.d.ts

@@ -0,0 +1,68 @@
+import * as React from "react";
+import { type ControlSize } from "@/internal/states";
+type SpanProps = React.HTMLAttributes<HTMLSpanElement> & {
+    ref?: React.Ref<HTMLSpanElement>;
+};
+export type SelectItemIconProps = SpanProps;
+/** A leading glyph of an option (decorative). */
+export declare function SelectItemIcon({ className, ...rest }: SelectItemIconProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace SelectItemIcon {
+    var displayName: string;
+}
+export type SelectItemTextProps = SpanProps & {
+    children: React.ReactNode;
+};
+/** Title of a rich option; its text is the option label (trigger, typeahead, search). */
+export declare function SelectItemText({ children, className, ...rest }: SelectItemTextProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace SelectItemText {
+    var displayName: string;
+}
+export type SelectItemDescriptionProps = SpanProps & {
+    children: React.ReactNode;
+};
+/** Muted second line under `Select.ItemText`; searchable. Makes the row two-line. */
+export declare function SelectItemDescription({ children, className, ...rest }: SelectItemDescriptionProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace SelectItemDescription {
+    var displayName: string;
+}
+export type SelectItemMetaProps = SpanProps & {
+    children: React.ReactNode;
+};
+/** Trailing meta of an option (price, count): muted, tabular, before the check. */
+export declare function SelectItemMeta({ children, className, ...rest }: SelectItemMetaProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace SelectItemMeta {
+    var displayName: string;
+}
+type ItemParts = {
+    /** `Select.ItemIcon` and `Thumbnail.Root`, before the text. */
+    leading: React.ReactNode[];
+    /** Title, description and plain text, in one column. */
+    body: React.ReactNode[];
+    /** `Select.ItemMeta`, after the text. */
+    meta: React.ReactNode[];
+    /** Two-line layout: a description or a media tile is present. */
+    rich: boolean;
+    /** Text of `Select.ItemText`, else of the plain text children. */
+    title: string;
+    description: string;
+};
+/** Sorts the direct children of an item (fragments flattened) into the row slots by part type. */
+export declare function splitItemChildren(children: React.ReactNode): ItemParts;
+/** A `Thumbnail.Root` in a row or the trigger: sized to the tier unless it sets `size`. */
+export declare function sizeMedia(leading: React.ReactNode[], size: ControlSize): React.ReactNode[];
+export type SelectItemProps = {
+    value: string;
+    /** Text shown in the trigger and used by typeahead; defaults to `Select.ItemText`, then plain text. */
+    label?: string;
+    /** Extra words for the search (`Select.Content searchable`). */
+    keywords?: string;
+    disabled?: boolean;
+    className?: string;
+    children: React.ReactNode;
+    ref?: React.Ref<HTMLDivElement>;
+};
+export declare function SelectItem({ value, label, keywords, disabled, className, children, ref, }: SelectItemProps): import("react/jsx-runtime").JSX.Element | null;
+export declare namespace SelectItem {
+    var displayName: string;
+}
+export {};

package/dist/components/select/selectContext.d.ts

@@ -0,0 +1,61 @@
+import type * as React from "react";
+import { type Store } from "@/internal/listbox";
+import type { ControlSize } from "@/internal/states";
+export type SelectLabels = {
+    /** Placeholder and accessible name of the search field (`Select.Content searchable`). */
+    search: string;
+    /** Empty state: no items or nothing matches. */
+    empty: string;
+    /** Second line of the empty state while searching; `""` hides it. */
+    emptyHint: string;
+    /** Status row while `loading`. */
+    loading: string;
+    /** Tooltip of the clear segment (`clearable`). */
+    clear: string;
+    /** Muted marker after the label when `optional`. */
+    optional: string;
+};
+export declare const normalize: (text: string) => string;
+/**
+ * The items of a Select: their labels (shown in the trigger; kept after an item unmounts, so the
+ * label does not flicker while the list moves between the closed registry and the open panel)
+ * and the mounted ones with their search text (the empty state). `version` changes on every
+ * (un)registration.
+ */
+export type ItemRegistry = {
+    version: Store<number>;
+    labelOf: (value: string) => string;
+    /** Registers a mounted item; returns the unregistration. */
+    register: (value: string, label: string, haystack: string) => () => void;
+    /** Some mounted item matches the normalized query. */
+    anyMatch: (query: string) => boolean;
+};
+export declare function createItemRegistry(): ItemRegistry;
+export type SelectContextValue = {
+    size: ControlSize;
+    invalid: boolean;
+    focusRing: boolean;
+    required: boolean;
+    disabled: boolean;
+    placeholder: string | undefined;
+    multiple: boolean;
+    /** Selected values: one or none in single mode. */
+    selected: string[];
+    registry: ItemRegistry;
+    pick: (value: string) => void;
+    clear: () => void;
+    clearable: boolean;
+    loading: boolean;
+    isOpen: boolean;
+    setOpen: (open: boolean) => void;
+    /** The highlighted option; items subscribe to their own slice of it. */
+    highlight: Store<string | undefined>;
+    query: string;
+    setQuery: (query: string) => void;
+    triggerId: string;
+    listboxId: string;
+    describedBy: string | undefined;
+    triggerRef: React.RefObject<HTMLButtonElement | null>;
+    labels: SelectLabels;
+};
+export declare const SelectProvider: React.Provider<SelectContextValue | null>, useSelectContext: () => SelectContextValue;

package/dist/components/skeleton/Skeleton.d.ts

@@ -0,0 +1,22 @@
+import type * as React from "react";
+import type { ControlSize } from "@/internal/states";
+/**
+ * What the placeholder stands for: `text` — lines of the tier's text; `control` — a field or button
+ * of the tier; `circle` — an avatar of the tier; `block` — any box (image, chart, card), sized by
+ * its container or `className`.
+ */
+export type SkeletonShape = "text" | "control" | "circle" | "block";
+export type SkeletonProps = Omit<React.HTMLAttributes<HTMLSpanElement>, "children"> & {
+    /** Default `text`. */
+    shape?: SkeletonShape;
+    /** Tier of the text line, control height or avatar size. Default: the host tier, else `m`. */
+    size?: ControlSize;
+    /** `text` only: number of lines; the last of several is shorter. Default 1. */
+    lines?: number;
+    ref?: React.Ref<HTMLSpanElement>;
+};
+/**
+ * A placeholder in the shape of the content that is loading, so the layout is already in place
+ * when the data arrives. Decorative (`aria-hidden`): the loading region carries `aria-busy`.
+ */
+export declare function Skeleton({ shape, size: sizeProp, lines, className, ...rest }: SkeletonProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/slider/Slider.d.ts

@@ -1,29 +1,37 @@
-import * as React from "react";
-import type { ControlSize } from "@/internal/states";
-export type SliderRootProps = {
+import { type FieldFrameProps, type FieldRootDomProps } from "@/internal/FieldFrame";
+import type { ControlSize, Tone } from "@/internal/states";
+export type SliderLabels = {
+    /** Muted marker after the label when `optional`. */
+    optional: string;
+};
+export type SliderProps = FieldRootDomProps & Omit<FieldFrameProps, "focusRing"> & {
     value?: number;
     defaultValue?: number;
+    onValueChange?: (value: number) => void;
     min?: number;
     max?: number;
     step?: number;
     disabled?: boolean;
-    onValueChange?: (value: number) => void;
-    /** Visible label linked to the range input. Without it, set `aria-label`. */
-    label?: React.ReactNode;
+    /** Invalid state: `aria-invalid` on the range input. A non-empty `error` implies it. */
+    invalid?: boolean;
     /** Shows the current value at the end of the label row (tabular numbers). */
     showValue?: boolean;
     /** Formats the displayed value and `aria-valuetext` (e.g. `(v) => \`${v} °C\``). */
     formatValue?: (value: number) => string;
+    /** Tier. Default: the tier of the surrounding control (a form, a panel), else `m`. */
     size?: ControlSize;
-    className?: string;
+    /** Color of the filled part of the track. */
+    tone?: Tone;
+    /** Id of the range input; generated when omitted. */
+    id?: string;
+    /** Name of the range input when there is no `label`. */
     "aria-label"?: string;
+    "aria-describedby"?: string;
+    labels?: Partial<SliderLabels>;
 };
-declare function SliderRoot({ value: valueProp, defaultValue, min: minProp, max: maxProp, step: stepProp, disabled, onValueChange, label, showValue, formatValue, size, className, "aria-label": ariaLabel, }: SliderRootProps): import("react/jsx-runtime").JSX.Element;
-declare namespace SliderRoot {
-    var displayName: string;
-}
-export declare const Slider: {
-    Root: typeof SliderRoot;
-};
-export {};
-//# sourceMappingURL=Slider.d.ts.map
+/**
+ * A single value on a range, framed like every field: label row (with the value), the track
+ * with a glass thumb, then hint or error. `className`, `ref` and the rest go to the frame, `id`
+ * and `aria-label` to the range input.
+ */
+export declare function Slider({ value: valueProp, defaultValue, onValueChange, min, max, step, disabled, invalid, label, required, optional, hint, error, showValue, formatValue, size: sizeProp, tone, id, className, style, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, labels: labelsProp, ...rest }: SliderProps): import("react/jsx-runtime").JSX.Element;