prime-ui-kit 0.7.13 → 0.9.1

package/dist/components/color-picker/ColorPicker.d.ts

@@ -1,58 +1,156 @@
 import * as React from "react";
-import { type ColorAreaProps as AriaColorAreaProps, ColorField as AriaColorField, type ColorPickerProps as AriaColorPickerProps, type ColorSliderProps as AriaColorSliderProps, type ColorSwatchPickerItemProps as AriaColorSwatchPickerItemProps, type ColorSwatchPickerProps as AriaColorSwatchPickerProps, type ColorSwatchProps as AriaColorSwatchProps, type ColorThumbProps as AriaColorThumbProps, type SliderOutputProps as AriaSliderOutputProps, type SliderTrackProps as AriaSliderTrackProps, parseColor } from "react-aria-components";
-import type { InputSize } from "@/internal/states";
-export type { Color as ColorPickerColorValue, ColorPickerRenderProps } from "react-aria-components";
-export type ColorPickerRootProps = AriaColorPickerProps;
+import { type ColorAreaProps as AriaColorAreaProps, type ColorSliderProps as AriaColorSliderProps, type ColorThumbProps as AriaColorThumbProps, type SliderTrackProps as AriaSliderTrackProps, type Color, parseColor } from "react-aria-components";
+import { Button } from "@/components/button/Button";
+import { type ColorSwatchesProps } from "@/components/color-swatches/ColorSwatches";
+import type { FieldRootDomProps } from "@/internal/FieldFrame";
+import type { ControlSize } from "@/internal/states";
+export type { Color as ColorPickerColorValue } from "react-aria-components";
 export type ColorValueFormat = "hsl" | "rgb" | "hex";
-export type ColorPickerHexInputProps = {
-    size?: InputSize;
-    label?: React.ReactNode;
-    className?: string;
+declare global {
+    interface Window {
+        /** The EyeDropper API (Chromium); absent elsewhere. */
+        EyeDropper?: new () => {
+            open: () => Promise<{
+                sRGBHex: string;
+            }>;
+        };
+    }
+}
+export type ColorPickerLabels = {
+    /** `ColorPicker.FormatSelect` trigger. */
+    format: string;
+    /** `ColorPicker.EyeDropperButton` (also inside `ChannelStrip`). */
+    eyeDropper: string;
+    /** Hex field of `ChannelStrip` and the default `HexInput` label. */
+    hex: string;
+    hue: string;
+    saturation: string;
+    lightness: string;
+    alpha: string;
+    red: string;
+    green: string;
+    blue: string;
 };
-export type ColorPickerFormatProviderProps = {
-    children: React.ReactNode;
+export type ColorPickerRootProps = {
+    /** Controlled color: a CSS color string or a `Color` from `parseColor`. */
+    value?: string | Color;
+    defaultValue?: string | Color;
+    onValueChange?: (color: Color) => void;
+    /** Initial value format of `FormatSelect` and `ChannelStrip`. */
     defaultFormat?: ColorValueFormat;
+    labels?: Partial<ColorPickerLabels>;
+    children: React.ReactNode;
+};
+export type ColorPickerHexInputProps = FieldRootDomProps & {
+    /** Tier. Default: the tier of the surrounding control (a panel, a popover), else `m`. */
+    size?: ControlSize;
+    label?: React.ReactNode;
+    hint?: React.ReactNode;
+    /** Error message in the hint slot; implies `invalid`. */
+    error?: React.ReactNode;
+    /**
+     * Draws the focus ring on the focused field (default). `false` sets `data-focus-ring="false"` and
+     * hides only the visual ring — focus, keyboard and ARIA are unchanged, the error ring still shows.
+     * Turn it off only where focus is otherwise obvious; WCAG 2.4.7.
+     */
+    focusRing?: boolean;
 };
 export { parseColor };
-declare function FormatProvider({ children, defaultFormat }: ColorPickerFormatProviderProps): import("react/jsx-runtime").JSX.Element;
-declare function FormatSelect({ className }: {
-    className?: string;
-}): import("react/jsx-runtime").JSX.Element | null;
-/** Полоса каналов: слева пипетка из {@link EyeDropperButton}, справа — ячейки; иконку пипетки передайте `pipetteIcon`. */
-declare function ChannelStripWithIcon({ className, pipetteIcon, }: {
-    className?: string;
-    pipetteIcon: React.ReactNode;
-}): import("react/jsx-runtime").JSX.Element;
-declare function ColorPickerRoot(props: AriaColorPickerProps): import("react/jsx-runtime").JSX.Element;
-declare function Field({ className, ...props }: React.ComponentProps<typeof AriaColorField>): import("react/jsx-runtime").JSX.Element;
-declare function Slider({ className, ...props }: AriaColorSliderProps): import("react/jsx-runtime").JSX.Element;
-declare function Area({ className, ...props }: AriaColorAreaProps): import("react/jsx-runtime").JSX.Element;
-declare function SliderTrack({ className, style, ...props }: AriaSliderTrackProps): import("react/jsx-runtime").JSX.Element;
-declare function Thumb({ className, ...props }: AriaColorThumbProps): import("react/jsx-runtime").JSX.Element;
-declare function AreaThumb({ className, ...props }: AriaColorThumbProps): import("react/jsx-runtime").JSX.Element;
-declare function SwatchPicker({ className, ...props }: AriaColorSwatchPickerProps): import("react/jsx-runtime").JSX.Element;
-declare function SwatchPickerItem({ className, ...props }: AriaColorSwatchPickerItemProps): import("react/jsx-runtime").JSX.Element;
-declare function Swatch({ className, style, ...props }: AriaColorSwatchProps): import("react/jsx-runtime").JSX.Element;
-declare function Output(props: AriaSliderOutputProps): import("react/jsx-runtime").JSX.Element;
-declare function SliderMeta({ label }: {
+type DivProps = Omit<React.HTMLAttributes<HTMLDivElement>, "children"> & {
+    ref?: React.Ref<HTMLDivElement>;
+};
+export type ColorPickerFormatSelectProps = DivProps;
+declare function FormatSelect({ className, ...rest }: ColorPickerFormatSelectProps): import("react/jsx-runtime").JSX.Element;
+export type ColorPickerChannelStripProps = DivProps & {
+    /**
+     * Draws the focus ring on the focused field (default). `false` sets `data-focus-ring="false"` and
+     * hides only the visual ring — focus, keyboard and ARIA are unchanged, the error ring still shows.
+     * Turn it off only where focus is otherwise obvious; WCAG 2.4.7.
+     */
+    focusRing?: boolean;
+};
+/** Channel row: eyedropper on the left, then the cells of the current format. */
+declare function ChannelStrip({ className, focusRing, ...rest }: ColorPickerChannelStripProps): import("react/jsx-runtime").JSX.Element;
+export type ColorPickerPanelProps = React.HTMLAttributes<HTMLDivElement> & {
+    /**
+     * `none` (default) — layout only, for use inside Popover / Card that already provide a surface.
+     * `raised` — standalone floating panel: raised background, panel radius/padding, overlay shadow.
+     */
+    surface?: "none" | "raised";
+    ref?: React.Ref<HTMLDivElement>;
+};
+/** Vertical stack for picker parts with the standard gap; optional raised surface. */
+declare function Panel({ surface, className, ...rest }: ColorPickerPanelProps): import("react/jsx-runtime").JSX.Element;
+declare namespace Panel {
+    var displayName: string;
+}
+declare function ColorPickerRoot({ value, defaultValue, onValueChange, defaultFormat, labels: labelsProp, children, }: ColorPickerRootProps): import("react/jsx-runtime").JSX.Element;
+declare namespace ColorPickerRoot {
+    var displayName: string;
+}
+export type ColorPickerSliderProps = Omit<AriaColorSliderProps, "isDisabled"> & {
+    disabled?: boolean;
+    ref?: React.Ref<HTMLDivElement>;
+};
+declare function Slider({ className, disabled, ...props }: ColorPickerSliderProps): import("react/jsx-runtime").JSX.Element;
+export type ColorPickerAreaProps = Omit<AriaColorAreaProps, "isDisabled"> & {
+    disabled?: boolean;
+    ref?: React.Ref<HTMLDivElement>;
+};
+export type ColorPickerSliderTrackProps = AriaSliderTrackProps & {
+    ref?: React.Ref<HTMLDivElement>;
+};
+export type ColorPickerThumbProps = AriaColorThumbProps & {
+    ref?: React.Ref<HTMLDivElement>;
+};
+declare function Area({ className, disabled, ...props }: ColorPickerAreaProps): import("react/jsx-runtime").JSX.Element;
+declare function SliderTrack({ className, style, ...props }: ColorPickerSliderTrackProps): import("react/jsx-runtime").JSX.Element;
+declare function Thumb({ className, ...props }: ColorPickerThumbProps): import("react/jsx-runtime").JSX.Element;
+declare function AreaThumb({ className, ...props }: ColorPickerThumbProps): import("react/jsx-runtime").JSX.Element;
+export type ColorPickerSwatchesProps = Omit<ColorSwatchesProps, "value" | "defaultValue" | "onValueChange" | "allowEmpty" | "name">;
+/**
+ * Preset swatches bound to the picker color: picking one sets the color, editing the color
+ * elsewhere moves the selection. The kit `ColorSwatches`, so presets carry names.
+ */
+declare function Swatches(props: ColorPickerSwatchesProps): import("react/jsx-runtime").JSX.Element;
+declare namespace Swatches {
+    var displayName: string;
+}
+export type ColorPickerSliderMetaProps = DivProps & {
+    /** The channel name. */
     label: React.ReactNode;
-}): import("react/jsx-runtime").JSX.Element;
-declare function HexInput({ size, label, className }: ColorPickerHexInputProps): import("react/jsx-runtime").JSX.Element | null;
-export type ColorPickerTriggerSwatchProps = {
-    className?: string;
 };
-/** Квадратик текущего цвета из {@link ColorPickerStateContext}; для кнопки-триггера поповера и т.п. */
-declare function TriggerSwatch({ className }: ColorPickerTriggerSwatchProps): import("react/jsx-runtime").JSX.Element;
+/** Slider heading: the label and the current channel value. */
+declare function SliderMeta({ label, className, ...rest }: ColorPickerSliderMetaProps): import("react/jsx-runtime").JSX.Element;
+declare function HexInput({ label, hint, error, focusRing, ...rest }: ColorPickerHexInputProps): import("react/jsx-runtime").JSX.Element;
+declare namespace HexInput {
+    var displayName: string;
+}
+export type ColorPickerEyeDropperButtonProps = Omit<React.ComponentPropsWithoutRef<typeof Button.Root>, "variant" | "tone" | "size" | "aria-label"> & {
+    ref?: React.Ref<HTMLButtonElement>;
+};
+/**
+ * Square soft button that opens the native EyeDropper (name: `labels.eyeDropper`). Without
+ * browser support it renders disabled and hidden from assistive tech. Default icon: pipette.
+ */
+declare function EyeDropperButton({ children, onClick, type, className, ref, ...rest }: ColorPickerEyeDropperButtonProps): import("react/jsx-runtime").JSX.Element;
+declare namespace EyeDropperButton {
+    var displayName: string;
+}
+export type ColorPickerTriggerSwatchProps = Omit<React.HTMLAttributes<HTMLSpanElement>, "children"> & {
+    ref?: React.Ref<HTMLSpanElement>;
+};
+/** Square of the current color, e.g. inside the popover trigger button. */
+declare function TriggerSwatch(props: ColorPickerTriggerSwatchProps): import("react/jsx-runtime").JSX.Element;
 declare namespace TriggerSwatch {
     var displayName: string;
 }
 export declare const ColorPicker: {
     Root: typeof ColorPickerRoot;
+    Panel: typeof Panel;
     TriggerSwatch: typeof TriggerSwatch;
-    FormatProvider: typeof FormatProvider;
     FormatSelect: typeof FormatSelect;
-    ChannelStrip: typeof ChannelStripWithIcon;
-    Field: typeof Field;
+    ChannelStrip: typeof ChannelStrip;
     HexInput: typeof HexInput;
     Area: typeof Area;
     AreaThumb: typeof AreaThumb;
@@ -60,17 +158,6 @@ export declare const ColorPicker: {
     SliderMeta: typeof SliderMeta;
     SliderTrack: typeof SliderTrack;
     Thumb: typeof Thumb;
-    Output: typeof Output;
-    SwatchPicker: typeof SwatchPicker;
-    SwatchPickerItem: typeof SwatchPickerItem;
-    Swatch: typeof Swatch;
-    EyeDropperButton: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "size"> & {
-        variant?: import("@/internal/states").ButtonVariant;
-        mode?: import("@/internal/states").ButtonMode;
-        size?: import("@/internal/states").ButtonSize;
-        fullWidth?: boolean;
-        loading?: boolean;
-        asChild?: boolean;
-    } & React.RefAttributes<HTMLButtonElement>, "ref">, "variant" | "size" | "mode"> & React.RefAttributes<HTMLButtonElement>>;
+    Swatches: typeof Swatches;
+    EyeDropperButton: typeof EyeDropperButton;
 };
-//# sourceMappingURL=ColorPicker.d.ts.map

package/dist/components/color-picker/ColorPresets.d.ts

@@ -0,0 +1,83 @@
+import * as React from "react";
+import type { PositionAlign, PositionSide } from "@/hooks/usePosition";
+import type { ControlSize } from "@/internal/states";
+import { COLOR_PRESETS, type ColorPreset } from "@/internal/swatch";
+export { COLOR_PRESETS, type ColorPreset };
+export type ColorPresetsLabels = {
+    /** Trigger name prefix: `aria-label` = "<trigger>: <color name>". */
+    trigger: string;
+    /** Accessible name of the swatch list when `Content` has no `label`. */
+    list: string;
+    /** The "no color" swatch (`allowEmpty`) and the trigger name for an empty value. */
+    empty: string;
+};
+export type ColorPresetsRootProps = {
+    /** Controlled color; `null` — no color. */
+    value?: string | null;
+    defaultValue?: string | null;
+    onValueChange?: (value: string | null) => void;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** Swatches in panel order. Default: `COLOR_PRESETS` (16). */
+    presets?: readonly ColorPreset[];
+    /** Grid columns. Default: one row for up to 8 presets (+ "no color"), else 8; 16 → 8 × 2. */
+    columns?: number;
+    /** Tier of the trigger, swatches and panel. Default: the host tier, else `m`. */
+    size?: ControlSize;
+    disabled?: boolean;
+    /** Adds the "no color" swatch after the presets (value `null`); hue rows stay aligned. */
+    allowEmpty?: boolean;
+    /** Close the panel after a pick (focus returns to the trigger). Default `true`. */
+    closeOnSelect?: boolean;
+    labels?: Partial<ColorPresetsLabels>;
+    children: React.ReactNode;
+};
+declare function ColorPresetsRoot({ value: valueProp, defaultValue, onValueChange, open: openProp, defaultOpen, onOpenChange, presets, columns: columnsProp, size: sizeProp, disabled, allowEmpty, closeOnSelect, labels: labelsProp, children, }: ColorPresetsRootProps): import("react/jsx-runtime").JSX.Element;
+declare namespace ColorPresetsRoot {
+    var displayName: string;
+}
+export type ColorPresetsSwatchProps = Omit<React.HTMLAttributes<HTMLSpanElement>, "children"> & {
+    ref?: React.Ref<HTMLSpanElement>;
+};
+/**
+ * The current color as a small square for a custom trigger (e.g. inside `Button.Root`). Sized from
+ * the host's `--prime-icon-size`; `aria-hidden` — the trigger carries the name.
+ */
+declare function Swatch(props: ColorPresetsSwatchProps): import("react/jsx-runtime").JSX.Element;
+declare namespace Swatch {
+    var displayName: string;
+}
+export type ColorPresetsTriggerProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "children" | "disabled" | "value"> & {
+    /**
+     * `false` (default) — the kit square swatch button of the Root tier. `true` — `children` (one
+     * element, e.g. `Button.Root` with `ColorPresets.Swatch`) becomes the trigger.
+     */
+    asChild?: boolean;
+    children?: React.ReactElement;
+    ref?: React.Ref<HTMLButtonElement>;
+};
+/** Opens the panel. Name: `aria-label` ?? "<labels.trigger>: <color name>". */
+declare function Trigger({ asChild, children, className, onKeyDown, "aria-label": ariaLabel, ref: forwardedRef, ...rest }: ColorPresetsTriggerProps): import("react/jsx-runtime").JSX.Element;
+declare namespace Trigger {
+    var displayName: string;
+}
+export type ColorPresetsContentProps = Omit<React.HTMLAttributes<HTMLDivElement>, "children" | "role"> & {
+    /** Visible heading above the grid; also the list's accessible name (else `labels.list`). */
+    label?: React.ReactNode;
+    align?: PositionAlign;
+    side?: PositionSide;
+    /** The floating panel. */
+    ref?: React.Ref<HTMLDivElement>;
+};
+/** Floating panel (Popover overlay contract) with the swatch grid: `role="listbox"`. */
+declare function Content({ label, align, side, ...rest }: ColorPresetsContentProps): import("react/jsx-runtime").JSX.Element;
+declare namespace Content {
+    var displayName: string;
+}
+export declare const ColorPresets: {
+    Root: typeof ColorPresetsRoot;
+    Trigger: typeof Trigger;
+    Swatch: typeof Swatch;
+    Content: typeof Content;
+};

package/dist/components/color-swatches/ColorSwatches.d.ts

@@ -0,0 +1,40 @@
+import { type FieldFrameProps, type FieldRootDomProps } from "@/internal/FieldFrame";
+import type { ControlSize } from "@/internal/states";
+import { type ColorPreset } from "@/internal/swatch";
+export type ColorSwatchesLabels = {
+    /** Accessible name of the group when there is no visible `label` and no `aria-label`. */
+    group: string;
+    /** The "no color" swatch (`allowEmpty`). */
+    empty: string;
+    /** Muted marker after the label for `optional`. */
+    optional: string;
+};
+export type ColorSwatchesProps = FieldRootDomProps & Omit<FieldFrameProps, "focusRing"> & {
+    /** Controlled color; `null` — no color. */
+    value?: string | null;
+    defaultValue?: string | null;
+    onValueChange?: (value: string | null) => void;
+    /** Swatches in order. Default: `COLOR_PRESETS` (16). */
+    presets?: readonly ColorPreset[];
+    /**
+     * Tier: swatch = control height − 8 (20 · 24 · 28 · 32 · 40), gap = tier gap. Default: the
+     * tier of the surrounding control, else `m`.
+     */
+    size?: ControlSize;
+    disabled?: boolean;
+    invalid?: boolean;
+    /** Adds the "no color" swatch after the presets (value `null`). */
+    allowEmpty?: boolean;
+    /** Form field name: a hidden input submits the selected color (empty string for no color). */
+    name?: string;
+    id?: string;
+    "aria-label"?: string;
+    "aria-labelledby"?: string;
+    "aria-describedby"?: string;
+    labels?: Partial<ColorSwatchesLabels>;
+};
+/**
+ * Inline color choice: a wrapping grid of swatches, one selected (`role="radiogroup"`).
+ * Fits forms and dialogs where opening a palette popover would be one step too many.
+ */
+export declare function ColorSwatches({ value: valueProp, defaultValue, onValueChange, presets, size: sizeProp, disabled, invalid, allowEmpty, name, id, className, label, required, optional, hint, error, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, labels: labelsProp, ...rest }: ColorSwatchesProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/command-menu/CommandMenu.d.ts

@@ -1,74 +1,172 @@
 import * as React from "react";
-import { type ModalPanelProps, type ModalRootProps } from "@/components/modal/Modal";
-export type CommandMenuDialogProps = Omit<ModalRootProps, "children"> & Pick<ModalPanelProps, "children" | "className" | "overlayClassName" | "aria-labelledby" | "aria-describedby"> & {
-    /** Дополнительный класс для панели (совмещается с `className` панели). */
-    contentClassName?: string;
+import type { ControlSize } from "@/internal/states";
+export type CommandMenuLabels = {
+    /** Default placeholder and accessible name of `CommandMenu.Input`. */
+    search: string;
+    /** `CommandMenu.Empty`: nothing matches the query. */
+    empty: string;
+    /** Second line of `CommandMenu.Empty`; `""` hides it. */
+    emptyHint: string;
 };
-declare function CommandMenuDialog({ children, overlayClassName, className, contentClassName, open, defaultOpen, onOpenChange, closeOnEscape, closeOnOverlayClick, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, }: CommandMenuDialogProps): import("react/jsx-runtime").JSX.Element;
-declare function CommandMenuDialogTitle({ className, ...rest }: React.HTMLAttributes<HTMLHeadingElement>): import("react/jsx-runtime").JSX.Element;
-declare function CommandMenuDialogDescription({ className, ...rest }: React.HTMLAttributes<HTMLParagraphElement>): import("react/jsx-runtime").JSX.Element;
-export type CommandMenuInputRowProps = React.HTMLAttributes<HTMLDivElement> & {
-    leading?: React.ReactNode;
-    trailing?: React.ReactNode;
-    /** `compact` — ниже строка поиска, `comfortable` — выше. */
-    density?: "compact" | "comfortable";
+export type CommandMenuRootProps = Omit<React.HTMLAttributes<HTMLDivElement>, "children" | "defaultValue"> & {
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** The query (controlled); together with `onValueChange`. Cleared when the palette closes. */
+    value?: string;
+    /** The initial query, uncontrolled. Default `""`. */
+    defaultValue?: string;
+    /** Called with the new query (typing, and `""` when the palette closes). */
+    onValueChange?: (value: string) => void;
+    /** Escape closes the palette. Default `true`. */
+    closeOnEscape?: boolean;
+    /** A click on the scrim closes the palette. Default `true`. */
+    closeOnOutsideClick?: boolean;
+    /** Tier of the rows and the search row: item height, text, icon. */
+    size?: ControlSize;
+    labels?: Partial<CommandMenuLabels>;
+    /** Name of the dialog when there is no `CommandMenu.Title`. */
+    "aria-label"?: string;
+    "aria-labelledby"?: string;
+    "aria-describedby"?: string;
+    children: React.ReactNode;
+    /** The dialog panel. */
+    ref?: React.Ref<HTMLDivElement>;
 };
-declare function CommandMenuInputRow({ leading, trailing, children, className, density, ...rest }: CommandMenuInputRowProps): import("react/jsx-runtime").JSX.Element;
-export type CommandMenuInputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "type">;
-export type CommandMenuListProps = React.HTMLAttributes<HTMLDivElement>;
-export type CommandMenuGroupProps = React.HTMLAttributes<HTMLDivElement> & {
-    heading?: React.ReactNode;
+declare function CommandMenuRoot({ open, defaultOpen, onOpenChange, value, defaultValue, onValueChange, closeOnEscape, closeOnOutsideClick, size, labels: labelsProp, className, children, ...rest }: CommandMenuRootProps): import("react/jsx-runtime").JSX.Element;
+declare namespace CommandMenuRoot {
+    var displayName: string;
+}
+export type CommandMenuTitleProps = Omit<React.HTMLAttributes<HTMLHeadingElement>, "id"> & {
+    ref?: React.Ref<HTMLHeadingElement>;
 };
-declare function CommandMenuGroup({ heading, className, children, ...rest }: CommandMenuGroupProps): import("react/jsx-runtime").JSX.Element;
-export type CommandMenuItemSize = "s" | "m";
-export type CommandMenuItemProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "type" | "onSelect"> & {
-    /** Текст для фильтрации; пустая строка — пункт всегда виден при любом запросе. */
+/** Visible heading above the search row; names the dialog. */
+declare function CommandMenuTitle({ className, ...rest }: CommandMenuTitleProps): import("react/jsx-runtime").JSX.Element;
+declare namespace CommandMenuTitle {
+    var displayName: string;
+}
+export type CommandMenuDescriptionProps = Omit<React.HTMLAttributes<HTMLParagraphElement>, "id"> & {
+    ref?: React.Ref<HTMLParagraphElement>;
+};
+/** Secondary line under the title; describes the dialog. */
+declare function CommandMenuDescription({ className, ...rest }: CommandMenuDescriptionProps): import("react/jsx-runtime").JSX.Element;
+declare namespace CommandMenuDescription {
+    var displayName: string;
+}
+export type CommandMenuInputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "type" | "role" | "value" | "defaultValue"> & {
+    ref?: React.Ref<HTMLInputElement>;
+};
+/**
+ * The search row: a search icon and the query field (the query is `CommandMenu.Root` `value`). It
+ * is the permanent focus of the palette, so it draws no focus ring (foundation §7); focus lands
+ * here on open; arrows, Home, End and Enter drive the list from it.
+ */
+declare function CommandMenuInput({ className, onKeyDown, onChange, placeholder, "aria-label": ariaLabel, ...rest }: CommandMenuInputProps): import("react/jsx-runtime").JSX.Element;
+declare namespace CommandMenuInput {
+    var displayName: string;
+}
+export type CommandMenuListProps = Omit<React.HTMLAttributes<HTMLElement>, "role" | "id"> & {
+    ref?: React.Ref<HTMLElement>;
+};
+/** The scrolling `role="listbox"` of results under the search row. */
+declare function CommandMenuList({ className, ...rest }: CommandMenuListProps): import("react/jsx-runtime").JSX.Element;
+declare namespace CommandMenuList {
+    var displayName: string;
+}
+export type CommandMenuGroupProps = Omit<React.HTMLAttributes<HTMLDivElement>, "role"> & {
+    /** Visible heading of the group; names it for screen readers. */
+    label?: React.ReactNode;
+    ref?: React.Ref<HTMLDivElement>;
+};
+/** A labelled section of items; hidden while none of its items match the query. */
+declare function CommandMenuGroup({ className, ...rest }: CommandMenuGroupProps): import("react/jsx-runtime").JSX.Element;
+declare namespace CommandMenuGroup {
+    var displayName: string;
+}
+export type CommandMenuItemProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "type" | "role" | "id" | "onSelect"> & {
+    /** Text matched with `keywords`; with `""` the item shows only while the query is empty or `keywords` match. */
     value: string;
+    /** Extra words for the query (synonyms, English names). */
     keywords?: string;
-    size?: CommandMenuItemSize;
+    /** Unavailable right now: shown muted with `aria-disabled`, skipped by the arrows, not runnable. */
+    disabled?: boolean;
+    /** Runs the command: a click, or Enter while the item is active. */
     onSelect?: () => void;
+    ref?: React.Ref<HTMLButtonElement>;
+};
+declare function CommandMenuItem({ className, value, keywords, disabled, onSelect, onClick, onPointerMove, ref, children, ...rest }: CommandMenuItemProps): import("react/jsx-runtime").JSX.Element;
+declare namespace CommandMenuItem {
+    var displayName: string;
+}
+export type CommandMenuItemIconProps = React.HTMLAttributes<HTMLSpanElement> & {
+    ref?: React.Ref<HTMLSpanElement>;
+};
+/** Leading glyph of an item at the tier icon size (a kit `Icon` follows it). */
+declare function CommandMenuItemIcon({ className, ...rest }: CommandMenuItemIconProps): import("react/jsx-runtime").JSX.Element;
+declare namespace CommandMenuItemIcon {
+    var displayName: string;
+}
+export type CommandMenuItemTextProps = React.HTMLAttributes<HTMLSpanElement> & {
+    /** Second line (path, details): caption, muted. */
+    description?: React.ReactNode;
+    ref?: React.Ref<HTMLSpanElement>;
+};
+/** Item text: a title with an ellipsis and an optional description line. */
+declare function CommandMenuItemText({ description, children, className, ...rest }: CommandMenuItemTextProps): import("react/jsx-runtime").JSX.Element;
+declare namespace CommandMenuItemText {
+    var displayName: string;
+}
+export type CommandMenuItemShortcutProps = Omit<React.HTMLAttributes<HTMLElement>, "children"> & {
+    children: React.ReactNode;
+    ref?: React.Ref<HTMLElement>;
+};
+/** Key hint at the end of an item (a Kbd one tier below). A hint only — not a handler. */
+declare function CommandMenuItemShortcut({ className, ...rest }: CommandMenuItemShortcutProps): import("react/jsx-runtime").JSX.Element;
+declare namespace CommandMenuItemShortcut {
+    var displayName: string;
+}
+export type CommandMenuEmptyProps = Omit<React.HTMLAttributes<HTMLDivElement>, "role"> & {
+    ref?: React.Ref<HTMLDivElement>;
+};
+/**
+ * Shown only while nothing matches the query: `labels.empty` and `labels.emptyHint`; `children`
+ * is an action under them.
+ */
+declare function CommandMenuEmpty({ children, ...rest }: CommandMenuEmptyProps): import("react/jsx-runtime").JSX.Element | null;
+declare namespace CommandMenuEmpty {
+    var displayName: string;
+}
+export type CommandMenuFooterProps = React.HTMLAttributes<HTMLDivElement> & {
+    ref?: React.Ref<HTMLDivElement>;
 };
-export type CommandMenuItemIconProps<T extends React.ElementType = "span"> = {
-    as?: T;
-    className?: string;
-} & Omit<React.ComponentPropsWithoutRef<T>, "as" | "className">;
-declare function CommandMenuItemIcon<T extends React.ElementType = "span">({ as, className, ...rest }: CommandMenuItemIconProps<T>): import("react/jsx-runtime").JSX.Element;
-export type CommandMenuTagSectionProps = React.HTMLAttributes<HTMLDivElement>;
-declare function CommandMenuTagSection({ className, ...rest }: CommandMenuTagSectionProps): import("react/jsx-runtime").JSX.Element;
-export type CommandMenuTagSectionLabelProps = React.HTMLAttributes<HTMLDivElement>;
-declare function CommandMenuTagSectionLabel({ className, ...rest }: CommandMenuTagSectionLabelProps): import("react/jsx-runtime").JSX.Element;
-export type CommandMenuTagRowProps = React.HTMLAttributes<HTMLDivElement>;
-declare function CommandMenuTagRow({ className, ...rest }: CommandMenuTagRowProps): import("react/jsx-runtime").JSX.Element;
-export type CommandMenuFooterProps = React.HTMLAttributes<HTMLDivElement>;
+/** Bottom row of key hints, hairline above. */
 declare function CommandMenuFooter({ className, ...rest }: CommandMenuFooterProps): import("react/jsx-runtime").JSX.Element;
-export type CommandMenuFooterKeyBoxProps = Omit<React.HTMLAttributes<HTMLDivElement>, "color"> & {
-    /** На футере с `footerMuted` — бейдж `lighter`, иначе `stroke` (контур). */
-    tone?: "default" | "muted";
+declare namespace CommandMenuFooter {
+    var displayName: string;
+}
+export type CommandMenuFooterHintProps = React.HTMLAttributes<HTMLSpanElement> & {
+    /** Keys (text or icons), each in its own Kbd. */
+    keys: React.ReactNode[];
+    ref?: React.Ref<HTMLSpanElement>;
 };
+/** A footer hint: keys and what they do («↑ ↓ Навигация»). */
+declare function CommandMenuFooterHint({ keys, children, className, ...rest }: CommandMenuFooterHintProps): import("react/jsx-runtime").JSX.Element;
+declare namespace CommandMenuFooterHint {
+    var displayName: string;
+}
 export declare const CommandMenu: {
-    Dialog: typeof CommandMenuDialog;
-    DialogTitle: typeof CommandMenuDialogTitle;
-    DialogDescription: typeof CommandMenuDialogDescription;
-    InputRow: typeof CommandMenuInputRow;
-    Input: React.ForwardRefExoticComponent<CommandMenuInputProps & React.RefAttributes<HTMLInputElement>>;
-    List: React.ForwardRefExoticComponent<CommandMenuListProps & React.RefAttributes<HTMLDivElement>>;
+    Root: typeof CommandMenuRoot;
+    Title: typeof CommandMenuTitle;
+    Description: typeof CommandMenuDescription;
+    Input: typeof CommandMenuInput;
+    List: typeof CommandMenuList;
     Group: typeof CommandMenuGroup;
-    Item: React.ForwardRefExoticComponent<Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "onSelect" | "type"> & {
-        /** Текст для фильтрации; пустая строка — пункт всегда виден при любом запросе. */
-        value: string;
-        keywords?: string;
-        size?: CommandMenuItemSize;
-        onSelect?: () => void;
-    } & React.RefAttributes<HTMLButtonElement>>;
+    Item: typeof CommandMenuItem;
     ItemIcon: typeof CommandMenuItemIcon;
-    TagSection: typeof CommandMenuTagSection;
-    TagSectionLabel: typeof CommandMenuTagSectionLabel;
-    TagRow: typeof CommandMenuTagRow;
+    ItemText: typeof CommandMenuItemText;
+    ItemShortcut: typeof CommandMenuItemShortcut;
+    Empty: typeof CommandMenuEmpty;
     Footer: typeof CommandMenuFooter;
-    FooterKeyBox: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLDivElement>, "color"> & {
-        /** На футере с `footerMuted` — бейдж `lighter`, иначе `stroke` (контур). */
-        tone?: "default" | "muted";
-    } & React.RefAttributes<HTMLDivElement>>;
+    FooterHint: typeof CommandMenuFooterHint;
 };
 export {};
-//# sourceMappingURL=CommandMenu.d.ts.map

package/dist/components/crossfade/Crossfade.d.ts

@@ -0,0 +1,14 @@
+import * as React from "react";
+export type CrossfadeProps = React.HTMLAttributes<HTMLDivElement> & {
+    /**
+     * Key of what the region shows: `"loading"`, `"error"`, `"empty"`, `"ready"`, a record id.
+     * A new value cross-fades the old content into the new one; the same value updates in place.
+     */
+    state: string | number;
+    ref?: React.Ref<HTMLDivElement>;
+};
+/**
+ * Cross-fades a region between its states (loading → data → empty → error) and glides its height,
+ * so the page below does not jump. Nothing moves on the first render.
+ */
+export declare function Crossfade({ state, children, className, ref, ...rest }: CrossfadeProps): import("react/jsx-runtime").JSX.Element;