prime-ui-kit 0.9.0 → 0.9.2

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

@@ -1,20 +1,19 @@
 import * as React from "react";
-import type { ControlSize, Tone } from "@/internal/states";
-export type ProgressCircleRootProps = {
-    value: number;
-    max?: number;
+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;
-    /** Цвет дуги. По умолчанию `accent`. */
-    tone?: Exclude<Tone, "neutral" | "info">;
-    label?: string;
     /**
-     * Центрированное содержимое (число, процент, иконка). На `xs` / `s` не рендерится — кольцо
-     * слишком мало; строковое / числовое значение остаётся доступным через `aria-valuetext`.
+     * 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>>;
-};
-//# 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,78 +1,70 @@
 import * as React from "react";
+import { type ChoiceLabelProps } from "@/internal/ChoiceField";
+import { type FieldRootDomProps } from "@/internal/FieldFrame";
 import type { ControlSize } from "@/internal/states";
-export type RadioGroupProps = Omit<React.HTMLAttributes<HTMLDivElement>, "defaultValue" | "onChange" | "dir"> & {
+export type RadioGroupLabels = {
+    /** Muted marker after the group label when `optional`. */
+    optional: string;
+};
+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;
-    /** Invalid state for every radio in the group (`aria-invalid` on the group and inputs). */
-    invalid?: boolean;
-    /** Native `required` on the radios and `aria-required` on the group. */
+    /** 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";
-    /** Stretch every option to the container width. */
-    fullWidth?: boolean;
+    /** Id of the `role="radiogroup"` element; generated when omitted. */
+    id?: string;
+    labels?: Partial<RadioGroupLabels>;
+    /** `Radio.Root` options. */
+    children?: React.ReactNode;
 };
-type InputPassthrough = Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "size" | "checked" | "defaultChecked" | "onChange" | "name" | "value" | "children">;
-export type RadioRootProps = InputPassthrough & {
+/**
+ * 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;
-    /** Invalid state for this option; also set by the group or a mounted `Radio.Error`. */
-    invalid?: boolean;
+    /** 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>;
 };
-export type RadioLabelProps = {
-    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 {
+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 = RadioHintProps;
-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: {
-    Group: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLDivElement>, "defaultValue" | "dir" | "onChange"> & {
-        value?: string;
-        defaultValue?: string;
-        onValueChange?: (value: string) => void;
-        /** Native `name` shared by the radios; generated when omitted. */
-        name?: string;
-        size?: ControlSize;
-        disabled?: boolean;
-        /** Invalid state for every radio in the group (`aria-invalid` on the group and inputs). */
-        invalid?: boolean;
-        /** Native `required` on the radios and `aria-required` on the group. */
-        required?: boolean;
-        /** `vertical` stacks the options, `horizontal` lays them out in a wrapping row. */
-        orientation?: "vertical" | "horizontal";
-        /** Stretch every option to the container width. */
-        fullWidth?: boolean;
-    } & React.RefAttributes<HTMLDivElement>>;
-    Root: React.ForwardRefExoticComponent<InputPassthrough & {
-        /** Value reported to `Radio.Group` when this option is chosen. */
-        value: string;
-        /** Invalid state for this option; also set by the group or a mounted `Radio.Error`. */
-        invalid?: boolean;
-        children?: React.ReactNode;
-    } & 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,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,20 +1,19 @@
 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;
     disabled?: boolean;
     size?: ControlSize;
-    /** Stretch to the container width; segments share it equally and truncate their labels. */
+    /**
+     * Stretch to the container width. Single-line segments tend to equal widths but never get narrower
+     * than their label; when they do not fit, the row scrolls.
+     */
     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 +32,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,8 +50,9 @@ 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. */
+/** Segment title on one line; never truncated. 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;
@@ -55,45 +61,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 {};