prime-ui-kit 0.7.13 → 0.9.1

package/dist/components/progress-circle/ProgressCircle.d.ts

@@ -1,33 +1,19 @@
 import * as React from "react";
-declare const pc: {
-    readonly s: {
-        readonly diameter: "2.5625rem";
-        readonly strokeWidth: "3";
-    };
-    readonly m: {
-        readonly diameter: "3.375rem";
-        readonly strokeWidth: "4";
-    };
-    readonly l: {
-        readonly diameter: "4.25rem";
-        readonly strokeWidth: "5";
-    };
-    readonly xl: {
-        readonly diameter: "5.125rem";
-        readonly strokeWidth: "6";
-    };
-};
-export type ProgressCircleSize = keyof typeof pc;
-export type ProgressCircleRootProps = {
-    value: number;
-    max?: number;
-    size?: ProgressCircleSize;
-    label?: string;
+import { type ProgressModeProps, type ProgressSegmentsLabels } from "@/internal/progressSegments";
+import type { ControlSize } from "@/internal/states";
+export type ProgressCircleLabels = ProgressSegmentsLabels;
+export type ProgressCircleProps = Omit<React.HTMLAttributes<HTMLDivElement>, "children"> & {
+    /** Default `m`. */
+    size?: ControlSize;
+    /**
+     * Centered content (number, percent, icon). Not rendered on `xs` / `s`; a string or number
+     * child stays available as `aria-valuetext`.
+     */
     children?: React.ReactNode;
-    className?: string;
-};
-export declare const ProgressCircle: {
-    Root: React.ForwardRefExoticComponent<ProgressCircleRootProps & React.RefAttributes<HTMLDivElement>>;
-};
-export {};
-//# sourceMappingURL=ProgressCircle.d.ts.map
+    ref?: React.Ref<HTMLDivElement>;
+} & ProgressModeProps;
+/**
+ * A progress ring: a single `value` (`role="progressbar"`) or `segments` — parts of a whole
+ * clockwise from the top (`role="group"` described by the distribution).
+ */
+export declare function ProgressCircle(props: ProgressCircleProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/radio/Radio.d.ts

@@ -1,40 +1,70 @@
 import * as React from "react";
-import type { RadioSize, RadioVariant } from "@/internal/states";
-export type RadioRootProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "size"> & {
-    variant?: RadioVariant;
-    size?: RadioSize;
+import { type ChoiceLabelProps } from "@/internal/ChoiceField";
+import { type FieldRootDomProps } from "@/internal/FieldFrame";
+import type { ControlSize } from "@/internal/states";
+export type RadioGroupLabels = {
+    /** Muted marker after the group label when `optional`. */
+    optional: string;
 };
-export type RadioLabelProps = {
+export type RadioGroupProps = Omit<FieldRootDomProps, "dir"> & {
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    /** Native `name` shared by the radios; generated when omitted. */
+    name?: string;
+    /** Tier. Default: the tier of the surrounding control (a form, a panel), else `m`. */
+    size?: ControlSize;
+    disabled?: boolean;
+    /** Group heading above the options; names the radiogroup (`aria-labelledby`). */
+    label?: React.ReactNode;
+    /** Red `*` after the label, native `required` on the radios, `aria-required` on the group. */
+    required?: boolean;
+    /** Muted `labels.optional` marker after the label. */
+    optional?: boolean;
+    /** Help text under the options. Hidden while `error` is shown. */
+    hint?: React.ReactNode;
+    /** Error message under the options; implies `invalid`. */
+    error?: React.ReactNode;
+    /** Invalid state for every radio (`aria-invalid` on the group and the inputs). */
+    invalid?: boolean;
+    /** `vertical` stacks the options, `horizontal` lays them out in a wrapping row. */
+    orientation?: "vertical" | "horizontal";
+    /** Id of the `role="radiogroup"` element; generated when omitted. */
+    id?: string;
+    labels?: Partial<RadioGroupLabels>;
+    /** `Radio.Root` options. */
     children?: React.ReactNode;
-    className?: string;
-} & Omit<React.HTMLAttributes<HTMLLabelElement>, "htmlFor" | "size">;
-export type RadioHintProps = {
-    children: React.ReactNode;
-    className?: string;
-} & Omit<React.HTMLAttributes<HTMLParagraphElement>, "id">;
-declare function RadioHint({ children, className, ...rest }: RadioHintProps): import("react/jsx-runtime").JSX.Element;
-declare namespace RadioHint {
+};
+/**
+ * The field: label · radiogroup · hint or error. `className`, `ref` and the rest go to the frame,
+ * `id` and the `aria-label*` / `aria-describedby` names to the radiogroup.
+ */
+declare function RadioGroup({ id, value: valueProp, defaultValue, onValueChange, name: nameProp, size: sizeProp, disabled, label, required, optional, hint, error, invalid, orientation, labels: labelsProp, className, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, "aria-labelledby": ariaLabelledBy, children, ...rest }: RadioGroupProps): import("react/jsx-runtime").JSX.Element;
+declare namespace RadioGroup {
+    var displayName: string;
+}
+export type RadioRootProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "size" | "checked" | "defaultChecked" | "onChange" | "name" | "value"> & {
+    /** Value reported to `Radio.Group` when this option is chosen. */
+    value: string;
+    /** Description under the option text. */
+    hint?: React.ReactNode;
+    /** `Radio.Label`; without it only the circle renders (give it an `aria-label`). */
+    children?: React.ReactNode;
+    /** The native radio input. */
+    ref?: React.Ref<HTMLInputElement>;
+};
+declare function RadioRoot({ id, value, hint, disabled: disabledProp, className, "aria-describedby": ariaDescribedBy, children, ref, ...inputRest }: RadioRootProps): import("react/jsx-runtime").JSX.Element;
+declare namespace RadioRoot {
     var displayName: string;
 }
-export type RadioErrorProps = {
-    children: React.ReactNode;
-    className?: string;
-} & Omit<React.HTMLAttributes<HTMLParagraphElement>, "id">;
-declare function RadioError({ children, className, ...rest }: RadioErrorProps): import("react/jsx-runtime").JSX.Element;
-declare namespace RadioError {
+export type RadioLabelProps = ChoiceLabelProps;
+declare function RadioLabel(props: RadioLabelProps): import("react/jsx-runtime").JSX.Element;
+declare namespace RadioLabel {
     var displayName: string;
 }
 export declare const Radio: {
-    Root: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "type"> & {
-        variant?: RadioVariant;
-        size?: RadioSize;
-    } & React.RefAttributes<HTMLInputElement>>;
-    Label: React.ForwardRefExoticComponent<{
-        children?: React.ReactNode;
-        className?: string;
-    } & Omit<React.HTMLAttributes<HTMLLabelElement>, "size" | "htmlFor"> & React.RefAttributes<HTMLLabelElement>>;
-    Hint: typeof RadioHint;
-    Error: typeof RadioError;
+    Group: typeof RadioGroup;
+    Root: typeof RadioRoot;
+    Label: typeof RadioLabel;
 };
 export {};
-//# sourceMappingURL=Radio.d.ts.map

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

@@ -1,42 +1,20 @@
 import * as React from "react";
 export type ScrollContainerAxis = "vertical" | "horizontal" | "both";
-export type ScrollContainerProps = {
-    /**
-     * Корневой элемент. По умолчанию `div`; для `AppShell.Main` используйте `main`.
-     */
-    as?: "div" | "main" | "aside" | "section" | "nav" | "article";
-    /** Ось прокрутки. По умолчанию вертикальная. */
-    axis?: ScrollContainerAxis;
-    /** `-webkit-overflow-scrolling: touch` (полезно для вложенных скроллов на iOS). По умолчанию включено. */
-    touch?: boolean;
-    /** Значение `overscroll-behavior`. По умолчанию `contain` для вложенных панелей. */
-    overscrollBehavior?: "auto" | "contain" | "none";
-    /**
-     * `min-height: 0` и `min-width: 0` — типично для flex/grid-ребёнка, чтобы скролл не «ломал» раскладку.
-     * По умолчанию true.
-     */
-    flexItem?: boolean;
-    className?: string;
-    children?: React.ReactNode;
-} & Omit<React.HTMLAttributes<HTMLElement>, "className" | "children">;
-declare const ScrollContainer: React.ForwardRefExoticComponent<{
-    /**
-     * Корневой элемент. По умолчанию `div`; для `AppShell.Main` используйте `main`.
-     */
+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;
-    /** `-webkit-overflow-scrolling: touch` (полезно для вложенных скроллов на iOS). По умолчанию включено. */
-    touch?: boolean;
-    /** Значение `overscroll-behavior`. По умолчанию `contain` для вложенных панелей. */
+    /** `overscroll-behavior`. Default `contain`: nested panels do not chain scroll into the page. */
     overscrollBehavior?: "auto" | "contain" | "none";
     /**
-     * `min-height: 0` и `min-width: 0` — типично для flex/grid-ребёнка, чтобы скролл не «ломал» раскладку.
-     * По умолчанию true.
+     * 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.
      */
-    flexItem?: boolean;
-    className?: string;
-    children?: React.ReactNode;
-} & Omit<React.HTMLAttributes<HTMLElement>, "children" | "className"> & React.RefAttributes<HTMLElement>>;
-export { ScrollContainer };
-//# sourceMappingURL=ScrollContainer.d.ts.map
+    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. */
+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,40 +1,87 @@
 import * as React from "react";
-import type { InputSize } from "@/internal/states";
-export type SegmentedControlRootProps = {
+import type { ControlSize, PaletteColor } from "@/internal/states";
+export type SegmentedControlRootProps = Omit<React.HTMLAttributes<HTMLDivElement>, "defaultValue" | "onChange"> & {
     value?: string;
     defaultValue?: string;
     onValueChange?: (value: string) => void;
     disabled?: boolean;
-    size?: InputSize;
-    children: React.ReactNode;
-    className?: string;
+    size?: ControlSize;
+    /** Stretch to the container width; segments share it equally and truncate their labels. */
+    fullWidth?: boolean;
+    ref?: React.Ref<HTMLDivElement>;
 };
-declare function SegmentedControlRoot({ value, defaultValue, onValueChange, disabled, size, 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;
 }
-export type SegmentedControlItemProps = {
+export type SegmentedControlItemProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "value" | "children" | "type" | "role"> & {
     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;
+    ref?: React.Ref<HTMLButtonElement>;
 };
-declare function SegmentedControlItem({ value, disabled, children, className, }: SegmentedControlItemProps): import("react/jsx-runtime").JSX.Element;
+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 {
     var displayName: string;
 }
+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;
+declare namespace SegmentedControlLabel {
+    var displayName: string;
+}
+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 = Omit<React.HTMLAttributes<HTMLSpanElement>, "children" | "color"> & {
+    /** Badge hue. Default `gray`. */
+    color?: PaletteColor;
+    children: React.ReactNode;
+    ref?: React.Ref<HTMLSpanElement>;
+};
+/** Counter after the label: a soft Badge one tier below the control. */
+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: 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,101 +1,119 @@
 import * as React from "react";
-import type { SelectSize } from "@/internal/states";
-type SelectRootBase = {
-    size?: SelectSize;
+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;
-    hasError?: boolean;
+    /** Danger ring and `aria-invalid`; a non-empty `error` implies it. */
+    invalid?: boolean;
+    /** 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;
 };
-export type SelectRootProps = (SelectRootBase & {
-    multiple?: false;
-    native?: false;
-    value?: string;
-    defaultValue?: string;
-    onChange?: (value: string) => void;
-}) | (SelectRootBase & {
-    multiple: true;
-    native?: false;
-    value?: string[];
-    defaultValue?: string[];
-    onChange?: (value: string[]) => void;
-}) | (SelectRootBase & {
+type SelectSingleProps = {
     multiple?: false;
-    native: true;
     value?: string;
     defaultValue?: string;
-    onChange?: (value: string) => void;
-}) | (SelectRootBase & {
+    /** Picked value; `""` after clearing. */
+    onValueChange?: (value: string) => void;
+};
+type SelectMultipleProps = {
+    /** `string[]` value, checkboxes in the list, the list stays open on a pick. */
     multiple: true;
-    native: true;
     value?: string[];
     defaultValue?: string[];
-    onChange?: (value: string[]) => void;
-});
+    onValueChange?: (value: string[]) => void;
+};
+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">;
-export type SelectValueProps = {
-    className?: string;
+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;
 };
-declare function SelectValue({ className }: SelectValueProps): import("react/jsx-runtime").JSX.Element;
+export type SelectValueProps = Omit<React.HTMLAttributes<HTMLSpanElement>, "children"> & {
+    /**
+     * 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.
+     */
+    renderValue?: (item: SelectValueItem) => React.ReactNode;
+    ref?: React.Ref<HTMLSpanElement>;
+};
+/** 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;
+export type SelectTriggerIconProps = React.HTMLAttributes<HTMLSpanElement> & {
+    ref?: React.Ref<HTMLSpanElement>;
+};
+/** 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;
+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, 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;
-    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;
     Content: typeof SelectContent;
-    Item: React.ForwardRefExoticComponent<SelectItemProps & React.RefAttributes<HTMLDivElement>>;
+    Item: typeof SelectItem;
     ItemIcon: typeof SelectItemIcon;
+    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;