prime-ui-kit 0.9.0 → 0.9.1

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

@@ -1,9 +1,21 @@
 import * as React from "react";
-import { type ColorAreaProps as AriaColorAreaProps, ColorField as AriaColorField, 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, type Color, parseColor } from "react-aria-components";
+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";
+declare global {
+    interface Window {
+        /** The EyeDropper API (Chromium); absent elsewhere. */
+        EyeDropper?: new () => {
+            open: () => Promise<{
+                sRGBHex: string;
+            }>;
+        };
+    }
+}
 export type ColorPickerLabels = {
     /** `ColorPicker.FormatSelect` trigger. */
     format: string;
@@ -29,23 +41,27 @@ export type ColorPickerRootProps = {
     labels?: Partial<ColorPickerLabels>;
     children: React.ReactNode;
 };
-export type ColorPickerHexInputProps = {
+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;
-    className?: string;
 };
 export { parseColor };
-declare function FormatSelect({ className }: {
-    className?: string;
-}): import("react/jsx-runtime").JSX.Element;
-export type ColorPickerChannelStripProps = {
-    className?: string;
+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.
@@ -54,75 +70,87 @@ export type ColorPickerChannelStripProps = {
     focusRing?: boolean;
 };
 /** Channel row: eyedropper on the left, then the cells of the current format. */
-declare function ChannelStrip({ className, focusRing }: ColorPickerChannelStripProps): import("react/jsx-runtime").JSX.Element;
+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 ColorPickerFieldProps = React.ComponentProps<typeof AriaColorField> & {
-    /**
-     * 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;
-};
-declare function Field({ className, focusRing, ...props }: ColorPickerFieldProps): import("react/jsx-runtime").JSX.Element;
 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>;
 };
-declare function Area({ className, disabled, ...props }: ColorPickerAreaProps): 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;
-export type ColorPickerSwatchPickerProps = Omit<AriaColorSwatchPickerProps, "onChange"> & {
-    onValueChange?: (color: Color) => void;
+export type ColorPickerSliderTrackProps = AriaSliderTrackProps & {
+    ref?: React.Ref<HTMLDivElement>;
 };
-/** Preset group. Inside `Root` it follows the picker color; standalone it takes `value` itself. */
-declare function SwatchPicker({ className, onValueChange, ...props }: ColorPickerSwatchPickerProps): import("react/jsx-runtime").JSX.Element;
-export type ColorPickerSwatchPickerItemProps = Omit<AriaColorSwatchPickerItemProps, "isDisabled"> & {
-    disabled?: boolean;
+export type ColorPickerThumbProps = AriaColorThumbProps & {
+    ref?: React.Ref<HTMLDivElement>;
 };
-declare function SwatchPickerItem({ className, disabled, ...props }: ColorPickerSwatchPickerItemProps): 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 }: {
+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, focusRing, className }: ColorPickerHexInputProps): import("react/jsx-runtime").JSX.Element | null;
-export type ColorPickerEyeDropperButtonProps = Omit<React.ComponentPropsWithoutRef<typeof Button.Root>, "variant" | "tone" | "size" | "aria-label">;
-export type ColorPickerTriggerSwatchProps = {
-    className?: string;
+};
+/** 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({ className }: ColorPickerTriggerSwatchProps): import("react/jsx-runtime").JSX.Element;
+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: React.ForwardRefExoticComponent<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";
-    } & React.RefAttributes<HTMLDivElement>>;
+    Panel: typeof Panel;
     TriggerSwatch: typeof TriggerSwatch;
     FormatSelect: typeof FormatSelect;
     ChannelStrip: typeof ChannelStrip;
-    Field: typeof Field;
     HexInput: typeof HexInput;
     Area: typeof Area;
     AreaThumb: typeof AreaThumb;
@@ -130,10 +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<ColorPickerEyeDropperButtonProps & React.RefAttributes<HTMLButtonElement>>;
+    Swatches: typeof Swatches;
+    EyeDropperButton: typeof EyeDropperButton;
 };
-//# sourceMappingURL=ColorPicker.d.ts.map

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

@@ -1,18 +1,8 @@
 import * as React from "react";
 import type { PositionAlign, PositionSide } from "@/hooks/usePosition";
 import type { ControlSize } from "@/internal/states";
-export type ColorPreset = {
-    /** CSS color stored as the value (`onValueChange` returns it as is). */
-    value: string;
-    /** Human-readable name: the option's accessible name and the trigger's `aria-label` suffix. */
-    label: string;
-};
-/**
- * Default quick colors: the kit palette primitives (`tokens/primitives.ts`).
- * Row 1 — step 500 of eight hues, row 2 — step 700 of the same hues.
- * Take `COLOR_PRESETS.slice(0, 8)` for a single row of eight.
- */
-export declare const COLOR_PRESETS: readonly ColorPreset[];
+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;
@@ -33,7 +23,7 @@ export type ColorPresetsRootProps = {
     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. */
+    /** 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. */
@@ -43,18 +33,18 @@ export type ColorPresetsRootProps = {
     labels?: Partial<ColorPresetsLabels>;
     children: React.ReactNode;
 };
-declare function ColorPresetsRoot({ value: valueProp, defaultValue, onValueChange, open: openProp, defaultOpen, onOpenChange, presets, columns: columnsProp, size, disabled, allowEmpty, closeOnSelect, labels: labelsProp, children, }: ColorPresetsRootProps): import("react/jsx-runtime").JSX.Element;
+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 = {
-    className?: 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({ className }: ColorPresetsSwatchProps): import("react/jsx-runtime").JSX.Element;
+declare function Swatch(props: ColorPresetsSwatchProps): import("react/jsx-runtime").JSX.Element;
 declare namespace Swatch {
     var displayName: string;
 }
@@ -65,31 +55,29 @@ export type ColorPresetsTriggerProps = Omit<React.ButtonHTMLAttributes<HTMLButto
      */
     asChild?: boolean;
     children?: React.ReactElement;
+    ref?: React.Ref<HTMLButtonElement>;
 };
-export type ColorPresetsContentProps = {
+/** 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;
-    className?: string;
+    /** The floating panel. */
+    ref?: React.Ref<HTMLDivElement>;
 };
 /** Floating panel (Popover overlay contract) with the swatch grid: `role="listbox"`. */
-declare function Content({ label, align, side, className }: ColorPresetsContentProps): import("react/jsx-runtime").JSX.Element;
+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: React.ForwardRefExoticComponent<Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "value" | "children" | "disabled"> & {
-        /**
-         * `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;
-    } & React.RefAttributes<HTMLButtonElement>>;
+    Trigger: typeof Trigger;
     Swatch: typeof Swatch;
     Content: typeof Content;
 };
-export {};
-//# sourceMappingURL=ColorPresets.d.ts.map

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,112 +1,172 @@
 import * as React from "react";
-import { type ModalContentProps, type ModalRootProps } from "@/components/modal/Modal";
-import type { ControlSize, Variant } from "@/internal/states";
+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`. */
+    /** Second line of `CommandMenu.Empty`; `""` hides it. */
     emptyHint: string;
 };
-export type CommandMenuDialogProps = Pick<ModalRootProps, "open" | "defaultOpen" | "onOpenChange" | "closeOnEscape" | "closeOnOutsideClick"> & Pick<ModalContentProps, "children" | "className" | "overlayClassName" | "aria-label" | "aria-labelledby" | "aria-describedby"> & {
-    /** Tier of the list rows and the search row: item height, text, icon. Default `m`. */
+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 CommandMenuDialog({ children, overlayClassName, className, open, defaultOpen, onOpenChange, closeOnEscape, closeOnOutsideClick, size, labels: labelsProp, "aria-label": ariaLabel, "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> & {
-    /** Слот слева; по умолчанию — иконка поиска. `null` — без иконки. */
-    leading?: React.ReactNode;
-    trailing?: 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>;
 };
-/** Search row; its height follows the Dialog `size` (taller on `l` / `xl`). */
-declare function CommandMenuInputRow({ leading, trailing, children, className, ...rest }: CommandMenuInputRowProps): import("react/jsx-runtime").JSX.Element;
-export type CommandMenuInputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "type"> & {
-    /** Called with the new query; native `onChange` still fires. */
-    onValueChange?: (value: string) => void;
+/** 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>;
 };
-export type CommandMenuListProps = React.HTMLAttributes<HTMLDivElement>;
-export type CommandMenuGroupProps = React.HTMLAttributes<HTMLDivElement> & {
-    heading?: React.ReactNode;
+/** 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>;
 };
-declare function CommandMenuGroup({ heading, className, children, ...rest }: CommandMenuGroupProps): import("react/jsx-runtime").JSX.Element;
-export type CommandMenuItemProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "type" | "onSelect"> & {
+/**
+ * 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;
+    /** 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>;
 };
-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>;
-declare function CommandMenuFooter({ className, ...rest }: CommandMenuFooterProps): import("react/jsx-runtime").JSX.Element;
-export type CommandMenuFooterKeyBoxProps = Omit<React.HTMLAttributes<HTMLElement>, "color"> & {
-    /** `soft` — клавиша на мягкой подложке (по умолчанию), `ghost` — только текст. */
-    variant?: Extract<Variant, "soft" | "ghost">;
+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>;
 };
-export type CommandMenuFooterHintProps = React.HTMLAttributes<HTMLSpanElement> & {
-    /** Клавиши (строки или иконки), каждая — отдельный `FooterKeyBox`. */
-    keys: React.ReactNode[];
-};
-/** Подсказка футера: клавиши + подпись («↑ ↓ Навигация»). */
-declare function CommandMenuFooterHint({ keys, children, className, ...rest }: CommandMenuFooterHintProps): import("react/jsx-runtime").JSX.Element;
-export type CommandMenuEmptyProps = React.HTMLAttributes<HTMLDivElement>;
-/**
- * Пустое состояние: показывается, только когда по запросу нет ни одного пункта.
- * Текст — `labels.empty` / `labels.emptyHint` у Dialog; `children` — действие под ним.
- */
-declare function CommandMenuEmpty({ children, className, ...rest }: CommandMenuEmptyProps): import("react/jsx-runtime").JSX.Element | null;
-export type CommandMenuItemShortcutProps = React.HTMLAttributes<HTMLElement>;
-/** Сочетание клавиш справа в пункте (приглушённый Kbd). */
-declare function CommandMenuItemShortcut({ className, ...rest }: CommandMenuItemShortcutProps): import("react/jsx-runtime").JSX.Element;
+/** 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> & {
-    /** Вторая строка (путь, описание) — caption, muted. */
+    /** 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>;
+};
+/** Bottom row of key hints, hairline above. */
+declare function CommandMenuFooter({ className, ...rest }: CommandMenuFooterProps): import("react/jsx-runtime").JSX.Element;
+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<Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "size"> & {
-        /** Called with the new query; native `onChange` still fires. */
-        onValueChange?: (value: string) => void;
-    } & 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"> & {
-        /** Text matched with `keywords`; with `""` the item shows only while the query is empty or `keywords` match. */
-        value: string;
-        keywords?: string;
-        onSelect?: () => void;
-    } & React.RefAttributes<HTMLButtonElement>>;
+    Item: typeof CommandMenuItem;
     ItemIcon: typeof CommandMenuItemIcon;
     ItemText: typeof CommandMenuItemText;
     ItemShortcut: typeof CommandMenuItemShortcut;
     Empty: typeof CommandMenuEmpty;
-    TagSection: typeof CommandMenuTagSection;
-    TagSectionLabel: typeof CommandMenuTagSectionLabel;
-    TagRow: typeof CommandMenuTagRow;
     Footer: typeof CommandMenuFooter;
-    FooterKeyBox: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLElement>, "color"> & {
-        /** `soft` — клавиша на мягкой подложке (по умолчанию), `ghost` — только текст. */
-        variant?: Extract<Variant, "soft" | "ghost">;
-    } & React.RefAttributes<HTMLElement>>;
     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;