prime-ui-kit 0.9.0 → 0.9.1

package/dist/color-picker.d.ts

@@ -0,0 +1,7 @@
+/**
+ * `prime-ui-kit/color-picker` — the full ColorPicker, the only part of the kit built on
+ * `react-aria-components` (an optional peer). Kept out of the main entry so apps without a color
+ * picker never load it. `ColorPresets` and `ColorSwatches` stay in the main entry.
+ */
+export type { ColorPickerAreaProps, ColorPickerChannelStripProps, ColorPickerColorValue, ColorPickerEyeDropperButtonProps, ColorPickerFormatSelectProps, ColorPickerHexInputProps, ColorPickerLabels, ColorPickerPanelProps, ColorPickerRootProps, ColorPickerSliderMetaProps, ColorPickerSliderProps, ColorPickerSliderTrackProps, ColorPickerSwatchesProps, ColorPickerThumbProps, ColorPickerTriggerSwatchProps, ColorValueFormat, } from "./components/color-picker/ColorPicker";
+export { ColorPicker, parseColor } from "./components/color-picker/ColorPicker";

package/dist/color-picker.js

@@ -0,0 +1,9 @@
+import {
+  ColorPicker,
+  parseColor
+} from "./chunks/chunk-KCQFOORX.js";
+import "./chunks/chunk-NHOWNIAR.js";
+export {
+  ColorPicker,
+  parseColor
+};

package/dist/components/accordion/Accordion.d.ts

@@ -5,10 +5,11 @@ type AccordionBaseProps = Omit<React.HTMLAttributes<HTMLDivElement>, "defaultVal
     size?: ControlSize;
     /** `grouped` — one frame without gaps (default); `separate` — every item is its own card. */
     layout?: "grouped" | "separate";
+    ref?: React.Ref<HTMLDivElement>;
 };
 /** One open item at a time; `value` is the open item (`""` when all are closed). */
 export type AccordionSingleProps = AccordionBaseProps & {
-    type?: "single";
+    multiple?: false;
     value?: string;
     defaultValue?: string;
     onValueChange?: (value: string) => void;
@@ -17,53 +18,64 @@ export type AccordionSingleProps = AccordionBaseProps & {
 };
 /** Any number of open items; `value` lists them. */
 export type AccordionMultipleProps = AccordionBaseProps & {
-    type: "multiple";
+    multiple: true;
     value?: string[];
     defaultValue?: string[];
     onValueChange?: (value: string[]) => void;
+    /** Every item of a multiple accordion closes on its own click. */
+    collapsible?: never;
 };
 export type AccordionRootProps = AccordionSingleProps | AccordionMultipleProps;
+declare function AccordionRoot(props: AccordionRootProps): import("react/jsx-runtime").JSX.Element;
+declare namespace AccordionRoot {
+    var displayName: string;
+}
 export type AccordionItemProps = React.HTMLAttributes<HTMLDivElement> & {
     value: string;
     disabled?: boolean;
+    ref?: React.Ref<HTMLDivElement>;
 };
-export type AccordionHeaderProps = React.HTMLAttributes<HTMLHeadingElement>;
-export type AccordionTriggerProps = React.ButtonHTMLAttributes<HTMLButtonElement>;
-export type AccordionContentProps = React.HTMLAttributes<HTMLDivElement>;
-export type AccordionIconProps<T extends React.ElementType = "div"> = {
-    as?: T;
-    className?: string;
-    children?: React.ReactNode;
-} & Omit<React.ComponentPropsWithoutRef<T>, "as" | "className">;
-type ArrowIcon = React.ElementType<{
-    className?: string;
-    strokeWidth?: number | string;
-}>;
-export type AccordionArrowProps = React.HTMLAttributes<HTMLSpanElement> & {
-    /** Glyph; rotates 180° when the item opens. Default `ChevronDown`. */
-    icon?: ArrowIcon;
-    /** Glyph shown instead of `icon` while open (e.g. `Plus` → `Minus`); disables the rotation. */
-    openIcon?: ArrowIcon;
+declare function AccordionItem({ className, value, disabled, children, ...rest }: AccordionItemProps): import("react/jsx-runtime").JSX.Element;
+declare namespace AccordionItem {
+    var displayName: string;
+}
+export type AccordionHeaderProps = React.HTMLAttributes<HTMLHeadingElement> & {
+    ref?: React.Ref<HTMLHeadingElement>;
 };
-declare function AccordionIcon<T extends React.ElementType = "div">({ as, className, children, ...rest }: AccordionIconProps<T>): import("react/jsx-runtime").JSX.Element;
+declare function AccordionHeader({ className, ...rest }: AccordionHeaderProps): import("react/jsx-runtime").JSX.Element;
+declare namespace AccordionHeader {
+    var displayName: string;
+}
+export type AccordionTriggerProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "type"> & {
+    ref?: React.Ref<HTMLButtonElement>;
+};
+/** The item's button: its children, then the chevron that turns when the item opens. */
+declare function AccordionTrigger({ className, children, onClick, ...rest }: AccordionTriggerProps): import("react/jsx-runtime").JSX.Element;
+declare namespace AccordionTrigger {
+    var displayName: string;
+}
+export type AccordionIconProps = Omit<React.HTMLAttributes<HTMLSpanElement>, "children"> & {
+    children: React.ReactNode;
+    ref?: React.Ref<HTMLSpanElement>;
+};
+/** Decorative leading icon of a trigger; the content lines up with the label after it. */
+declare function AccordionIcon({ className, children, ...rest }: AccordionIconProps): import("react/jsx-runtime").JSX.Element;
 declare namespace AccordionIcon {
     var displayName: string;
 }
-declare function AccordionArrow({ className, icon: Icon, openIcon: OpenIcon, ...rest }: AccordionArrowProps): import("react/jsx-runtime").JSX.Element;
-declare namespace AccordionArrow {
+export type AccordionContentProps = React.HTMLAttributes<HTMLElement> & {
+    ref?: React.Ref<HTMLElement>;
+};
+declare function AccordionContent({ className, children, ...rest }: AccordionContentProps): import("react/jsx-runtime").JSX.Element;
+declare namespace AccordionContent {
     var displayName: string;
 }
 export declare const Accordion: {
-    Root: React.ForwardRefExoticComponent<AccordionRootProps & React.RefAttributes<HTMLDivElement>>;
-    Header: React.ForwardRefExoticComponent<AccordionHeaderProps & React.RefAttributes<HTMLHeadingElement>>;
-    Item: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
-        value: string;
-        disabled?: boolean;
-    } & React.RefAttributes<HTMLDivElement>>;
-    Trigger: React.ForwardRefExoticComponent<AccordionTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+    Root: typeof AccordionRoot;
+    Item: typeof AccordionItem;
+    Header: typeof AccordionHeader;
+    Trigger: typeof AccordionTrigger;
     Icon: typeof AccordionIcon;
-    Arrow: typeof AccordionArrow;
-    Content: React.ForwardRefExoticComponent<AccordionContentProps & React.RefAttributes<HTMLDivElement>>;
+    Content: typeof AccordionContent;
 };
 export {};
-//# sourceMappingURL=Accordion.d.ts.map

package/dist/components/avatar/Avatar.d.ts

@@ -1,79 +1,62 @@
 import * as React from "react";
+import { type ImageSlotFallbackProps, type ImageSlotImageProps } from "@/internal/imageSlot";
 import type { ControlSize, PaletteColor } from "@/internal/states";
 /** `xs` 20 · `s` 24 · `m` 32 · `l` 40 · `xl` 48 · `2xl` 64 (`--prime-avatar-*`). */
 export type AvatarSize = ControlSize | "2xl";
-export type AvatarImageStatus = "idle" | "loading" | "loaded" | "error";
-export type AvatarRootProps = {
+export type AvatarRootProps = React.HTMLAttributes<HTMLDivElement> & {
+    /** Default `m`, or the size of the surrounding `Avatar.Group`. */
     size?: AvatarSize;
     /** Fallback color (`--prime-color-palette-<hue>-*`). Default `gray`. */
     color?: PaletteColor;
-    className?: string;
-    children?: React.ReactNode;
-} & React.HTMLAttributes<HTMLDivElement>;
-export type AvatarImageProps = {
-    src: string;
-    alt?: string;
-    className?: string;
-} & Omit<React.ImgHTMLAttributes<HTMLImageElement>, "src" | "alt">;
-export type AvatarFallbackProps = {
-    children?: React.ReactNode;
-    className?: string;
-} & React.HTMLAttributes<HTMLSpanElement>;
-declare function AvatarFallback({ children, className, ...rest }: AvatarFallbackProps): import("react/jsx-runtime").JSX.Element;
-declare namespace AvatarFallback {
+    ref?: React.Ref<HTMLDivElement>;
+};
+declare function AvatarRoot({ size, color, className, children, ...rest }: AvatarRootProps): import("react/jsx-runtime").JSX.Element;
+declare namespace AvatarRoot {
     var displayName: string;
 }
+/** `alt` is empty by default: the name next to the avatar already says who it is. */
+export type AvatarImageProps = ImageSlotImageProps;
+export type AvatarFallbackProps = ImageSlotFallbackProps;
 export type AvatarPresence = "online" | "offline" | "away" | "busy";
 export type AvatarStatusLabels = Record<AvatarPresence, string>;
-export type AvatarStatusProps = {
+export type AvatarStatusProps = Omit<React.HTMLAttributes<HTMLSpanElement>, "children"> & {
     /** Presence shown as a dot on the avatar's bottom-end edge. */
     status: AvatarPresence;
     /** Accessible names of the presence states (Russian defaults). */
     labels?: Partial<AvatarStatusLabels>;
-    className?: string;
-} & Omit<React.HTMLAttributes<HTMLSpanElement>, "children">;
+    ref?: React.Ref<HTMLSpanElement>;
+};
 /** Presence dot; announced as an image with the state name (`labels`). */
 declare function AvatarStatus({ status, labels, className, ...rest }: AvatarStatusProps): import("react/jsx-runtime").JSX.Element;
 declare namespace AvatarStatus {
     var displayName: string;
 }
-export type AvatarGroupOverflowProps = {
+export type AvatarGroupProps = React.HTMLAttributes<HTMLDivElement> & {
+    /** Size of every member without its own `size`. Default `m`. */
     size?: AvatarSize;
-    className?: string;
-    children?: React.ReactNode;
-} & React.HTMLAttributes<HTMLDivElement>;
-export type AvatarGroupRootProps = {
+    ref?: React.Ref<HTMLDivElement>;
+};
+/** An overlapping row of avatars (`role="group"`); rings match the surface. */
+declare function AvatarGroup({ size, className, role, ...rest }: AvatarGroupProps): import("react/jsx-runtime").JSX.Element;
+declare namespace AvatarGroup {
+    var displayName: string;
+}
+export type AvatarOverflowProps = React.HTMLAttributes<HTMLDivElement> & {
+    /** Default `m`, or the size of the surrounding `Avatar.Group`. */
     size?: AvatarSize;
-    className?: string;
-    children?: React.ReactNode;
-} & React.HTMLAttributes<HTMLDivElement>;
+    ref?: React.Ref<HTMLDivElement>;
+};
+/** The «+N» cell at the end of a group, the same diameter as its avatars. */
+declare function AvatarOverflow({ size, className, ...rest }: AvatarOverflowProps): import("react/jsx-runtime").JSX.Element;
+declare namespace AvatarOverflow {
+    var displayName: string;
+}
 export declare const Avatar: {
-    Root: React.ForwardRefExoticComponent<{
-        size?: AvatarSize;
-        /** Fallback color (`--prime-color-palette-<hue>-*`). Default `gray`. */
-        color?: PaletteColor;
-        className?: string;
-        children?: React.ReactNode;
-    } & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
-    Image: React.ForwardRefExoticComponent<{
-        src: string;
-        alt?: string;
-        className?: string;
-    } & Omit<React.ImgHTMLAttributes<HTMLImageElement>, "alt" | "src"> & React.RefAttributes<HTMLImageElement>>;
-    Fallback: typeof AvatarFallback;
+    Root: typeof AvatarRoot;
+    Image: (props: ImageSlotImageProps) => React.ReactElement;
+    Fallback: (props: ImageSlotFallbackProps) => React.ReactElement;
     Status: typeof AvatarStatus;
-    Group: {
-        Root: React.ForwardRefExoticComponent<{
-            size?: AvatarSize;
-            className?: string;
-            children?: React.ReactNode;
-        } & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
-        Overflow: React.ForwardRefExoticComponent<{
-            size?: AvatarSize;
-            className?: string;
-            children?: React.ReactNode;
-        } & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
-    };
+    Group: typeof AvatarGroup;
+    Overflow: typeof AvatarOverflow;
 };
 export {};
-//# sourceMappingURL=Avatar.d.ts.map

package/dist/components/badge/Badge.d.ts

@@ -1,45 +1,82 @@
 import * as React from "react";
 import type { ControlSize, PaletteColor, Variant } from "@/internal/states";
+export type BadgeLabels = {
+    /** Accessible name of the remove button; include the badge text, e.g. «Убрать фильтр «Москва»». */
+    remove: string;
+};
 export type BadgeRootProps = {
-    /** Palette hue (categorization, not status). Default `gray`. */
+    /** Palette hue. Default `gray`. */
     color?: PaletteColor;
     /** Treatment. Default `soft`. */
     variant?: Exclude<Variant, "ghost">;
     /** Badge tier; without it the badge follows the surrounding control one tier down. */
     size?: ControlSize;
+    /** Shows the remove segment at the end (an applied filter, a selected value). */
+    onRemove?: () => void;
+    /**
+     * Makes the body a button covering the whole badge (a toggle chip, a filter value). Receives the
+     * click, so Alt / Shift clicks can mean something else.
+     */
+    onPress?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    /** Toggle state of a pressable badge: `aria-pressed` and `data-pressed`. */
+    pressed?: boolean;
+    labels?: Partial<BadgeLabels>;
     disabled?: boolean;
     children?: React.ReactNode;
     className?: string;
+    ref?: React.Ref<HTMLSpanElement>;
 } & React.HTMLAttributes<HTMLSpanElement>;
 export type BadgeIconProps = {
     children: React.ReactNode;
     className?: string;
+    ref?: React.Ref<HTMLSpanElement>;
 } & Omit<React.HTMLAttributes<HTMLSpanElement>, "children">;
 export type BadgeDotProps = {
     className?: string;
+    ref?: React.Ref<HTMLSpanElement>;
 } & React.HTMLAttributes<HTMLSpanElement>;
+export type BadgeActionProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "type" | "onClick" | "children"> & {
+    /** Accessible name and tooltip of the action («Скрыть billing»). */
+    label: string;
+    onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    /** Keeps the action shown, not only on hover and focus (e.g. while the state it sets is on). */
+    persistent?: boolean;
+    disabled?: boolean;
+    /** Toggle state of the action: `aria-pressed`. */
+    pressed?: boolean;
+    /** The glyph; a minus by default. Sized to the tier icon. */
+    children?: React.ReactNode;
+    ref?: React.Ref<HTMLButtonElement>;
+};
+declare function BadgeRoot({ color, variant, size: sizeProp, onRemove, onPress, pressed, labels, disabled, children, className, ...rest }: BadgeRootProps): import("react/jsx-runtime").JSX.Element;
+declare namespace BadgeRoot {
+    var displayName: string;
+}
 declare function BadgeIcon({ children, className, ...rest }: BadgeIconProps): import("react/jsx-runtime").JSX.Element;
 declare namespace BadgeIcon {
     var displayName: string;
 }
+/**
+ * A status dot in the current text color. Inside a badge it takes the badge tier; standalone (a
+ * marker on an icon, before a label) it takes the tier of the surrounding control.
+ */
 declare function BadgeDot({ className, ...rest }: BadgeDotProps): import("react/jsx-runtime").JSX.Element;
 declare namespace BadgeDot {
     var displayName: string;
 }
+/**
+ * An action at the end of the badge («−» to hide a value): a full-height segment revealed on hover
+ * and focus. The text slides toward the start and the segment comes in, inside room the badge always
+ * reserves, so the badge never changes width and its neighbours never move.
+ */
+declare function BadgeAction({ label, onClick, persistent: _persistent, disabled, pressed, children, className, ...rest }: BadgeActionProps): import("react/jsx-runtime").JSX.Element;
+declare namespace BadgeAction {
+    var displayName: string;
+}
 export declare const Badge: {
-    Root: React.ForwardRefExoticComponent<{
-        /** Palette hue (categorization, not status). Default `gray`. */
-        color?: PaletteColor;
-        /** Treatment. Default `soft`. */
-        variant?: Exclude<Variant, "ghost">;
-        /** Badge tier; without it the badge follows the surrounding control one tier down. */
-        size?: ControlSize;
-        disabled?: boolean;
-        children?: React.ReactNode;
-        className?: string;
-    } & React.HTMLAttributes<HTMLSpanElement> & React.RefAttributes<HTMLSpanElement>>;
+    Root: typeof BadgeRoot;
     Icon: typeof BadgeIcon;
     Dot: typeof BadgeDot;
+    Action: typeof BadgeAction;
 };
 export {};
-//# sourceMappingURL=Badge.d.ts.map

package/dist/components/badge/edgeIcons.d.ts

@@ -0,0 +1,13 @@
+import * as React from "react";
+/**
+ * An icon or dot at an edge of the badge (first or last child) becomes a segment —
+ * full height, flush with that edge, the icon centred in it — instead of an icon floating inside the
+ * padding. Marks those icons with `data-edge` and reports which edges have one.
+ */
+export declare function markEdgeIcons(children: React.ReactNode, isIcon: (type: unknown) => boolean, options?: {
+    endTaken?: boolean;
+}): {
+    children: React.ReactNode[];
+    start: boolean;
+    end: boolean;
+};

package/dist/components/badge/tier.d.ts

@@ -10,4 +10,3 @@ export type ResolvedBadgeTier = {
  * `ControlSizeProvider` one tier down; with no provider the default is `m`.
  */
 export declare function useBadgeTier(sizeProp: ControlSize | undefined): ResolvedBadgeTier;
-//# sourceMappingURL=tier.d.ts.map

package/dist/components/banner/Banner.d.ts

@@ -4,7 +4,7 @@ export type BannerLabels = {
     /** `aria-label` of the close button. */
     dismiss: string;
 };
-export type BannerRootProps = {
+export type BannerRootProps = React.HTMLAttributes<HTMLDivElement> & {
     /** Treatment: `soft` tinted fill (default), `solid` saturated fill, `outline` surface with a tone ring. */
     variant?: Exclude<Variant, "ghost">;
     /** Semantic color. Default `info`. */
@@ -17,90 +17,59 @@ export type BannerRootProps = {
      * page content column.
      */
     placement?: "inset" | "page";
-    /** Renders a close button (unless `Banner.CloseButton` is already a child) and calls this on click. */
+    /** Renders a close button and calls this on its click. */
     onDismiss?: () => void;
-    /** Built-in strings. */
     labels?: Partial<BannerLabels>;
-    className?: string;
-    children?: React.ReactNode;
-} & React.HTMLAttributes<HTMLDivElement>;
-export type BannerContentProps = {
-    className?: string;
-    children?: React.ReactNode;
-} & React.HTMLAttributes<HTMLDivElement>;
+    ref?: React.Ref<HTMLDivElement>;
+};
+declare function BannerRoot({ variant, tone, size, placement, onDismiss, labels, className, children, ...rest }: BannerRootProps): import("react/jsx-runtime").JSX.Element;
+declare namespace BannerRoot {
+    var displayName: string;
+}
+export type BannerContentProps = React.HTMLAttributes<HTMLDivElement> & {
+    ref?: React.Ref<HTMLDivElement>;
+};
 /** Layout of the message: icon on the first line, title over description, actions right (under the text when narrow). */
-declare function BannerContent({ className, children, ...rest }: BannerContentProps): import("react/jsx-runtime").JSX.Element;
+declare function BannerContent({ className, ...rest }: BannerContentProps): import("react/jsx-runtime").JSX.Element;
 declare namespace BannerContent {
     var displayName: string;
 }
-export type BannerIconProps<T extends React.ElementType = "div"> = {
-    as?: T;
-    className?: string;
-    children?: React.ReactNode;
-} & Omit<React.ComponentPropsWithoutRef<T>, "as" | "className">;
-declare function BannerIcon<T extends React.ElementType = "div">({ as, className, children, ...rest }: BannerIconProps<T>): import("react/jsx-runtime").JSX.Element;
+export type BannerIconProps = React.HTMLAttributes<HTMLSpanElement> & {
+    ref?: React.Ref<HTMLSpanElement>;
+};
+/** Holds one `Icon` on the first text line, in the tone color. */
+declare function BannerIcon({ className, ...rest }: BannerIconProps): import("react/jsx-runtime").JSX.Element;
 declare namespace BannerIcon {
     var displayName: string;
 }
-export type BannerTitleProps = {
-    className?: string;
-    children?: React.ReactNode;
-} & React.HTMLAttributes<HTMLSpanElement>;
-declare function BannerTitle({ className, children, ...rest }: BannerTitleProps): import("react/jsx-runtime").JSX.Element;
+export type BannerTitleProps = React.HTMLAttributes<HTMLSpanElement> & {
+    ref?: React.Ref<HTMLSpanElement>;
+};
+declare function BannerTitle({ className, ...rest }: BannerTitleProps): import("react/jsx-runtime").JSX.Element;
 declare namespace BannerTitle {
     var displayName: string;
 }
-export type BannerDescriptionProps = {
-    className?: string;
-    children?: React.ReactNode;
-} & React.HTMLAttributes<HTMLSpanElement>;
-declare function BannerDescription({ className, children, ...rest }: BannerDescriptionProps): import("react/jsx-runtime").JSX.Element;
+export type BannerDescriptionProps = React.HTMLAttributes<HTMLSpanElement> & {
+    ref?: React.Ref<HTMLSpanElement>;
+};
+declare function BannerDescription({ className, ...rest }: BannerDescriptionProps): import("react/jsx-runtime").JSX.Element;
 declare namespace BannerDescription {
     var displayName: string;
 }
-export type BannerActionsProps = {
-    className?: string;
-    children?: React.ReactNode;
-} & React.HTMLAttributes<HTMLDivElement>;
+export type BannerActionsProps = React.HTMLAttributes<HTMLDivElement> & {
+    ref?: React.Ref<HTMLDivElement>;
+};
 /** Action buttons take the banner `size`; with `onDismiss` the close button joins this row. */
 declare function BannerActions({ className, children, ...rest }: BannerActionsProps): import("react/jsx-runtime").JSX.Element;
 declare namespace BannerActions {
     var displayName: string;
 }
-export type BannerCloseButtonProps = {
-    className?: string;
-    children?: React.ReactNode;
-} & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "size">;
 export declare const Banner: {
-    Root: React.ForwardRefExoticComponent<{
-        /** Treatment: `soft` tinted fill (default), `solid` saturated fill, `outline` surface with a tone ring. */
-        variant?: Exclude<Variant, "ghost">;
-        /** Semantic color. Default `info`. */
-        tone?: Tone;
-        /** Spacing and type tier. Default `m`. */
-        size?: ControlSize;
-        /**
-         * `inset` (default): rounded block in the content flow or inside a card.
-         * `page`: edge-to-edge strip (no radius) at the top of a page or app shell; content follows the
-         * page content column.
-         */
-        placement?: "inset" | "page";
-        /** Renders a close button (unless `Banner.CloseButton` is already a child) and calls this on click. */
-        onDismiss?: () => void;
-        /** Built-in strings. */
-        labels?: Partial<BannerLabels>;
-        className?: string;
-        children?: React.ReactNode;
-    } & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+    Root: typeof BannerRoot;
     Content: typeof BannerContent;
     Icon: typeof BannerIcon;
     Title: typeof BannerTitle;
     Description: typeof BannerDescription;
     Actions: typeof BannerActions;
-    CloseButton: React.ForwardRefExoticComponent<{
-        className?: string;
-        children?: React.ReactNode;
-    } & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "size"> & React.RefAttributes<HTMLButtonElement>>;
 };
 export {};
-//# sourceMappingURL=Banner.d.ts.map

package/dist/components/breadcrumb/Breadcrumb.d.ts

@@ -6,50 +6,38 @@ export type BreadcrumbLabels = {
     /** Accessible text of `Breadcrumb.Ellipsis` (skipped levels). */
     ellipsis: string;
 };
-export type BreadcrumbRootProps = {
-    children: React.ReactNode;
-    className?: string;
-    /** Кегль ссылок (LinkButton), текущей страницы, многоточия; иконка-разделитель и иконка «дом» — тот же ярус. */
+export type BreadcrumbRootProps = React.HTMLAttributes<HTMLElement> & {
+    /** Text of the links, the current page and the ellipsis; the chevrons take the same tier. */
     size?: ControlSize;
     /** Built-in strings. */
     labels?: Partial<BreadcrumbLabels>;
-} & React.HTMLAttributes<HTMLElement>;
+    ref?: React.Ref<HTMLElement>;
+};
 declare function BreadcrumbRoot({ children, className, size, labels: labelsProp, ...rest }: BreadcrumbRootProps): import("react/jsx-runtime").JSX.Element;
 declare namespace BreadcrumbRoot {
     var displayName: string;
 }
-export type BreadcrumbItemProps = {
+export type BreadcrumbItemProps = Omit<React.LiHTMLAttributes<HTMLLIElement>, "aria-label"> & {
     href?: string;
     current?: boolean;
-    children?: React.ReactNode;
-    className?: string;
-    /** Для ссылки без видимого текста (например, только иконка «дом»). */
+    /** For a link without visible text (e.g. only a «home» icon). Goes to the link. */
     "aria-label"?: string;
+    ref?: React.Ref<HTMLLIElement>;
 };
-declare function BreadcrumbItem({ href, current, children, className, "aria-label": ariaLabel, }: BreadcrumbItemProps): import("react/jsx-runtime").JSX.Element;
+declare function BreadcrumbItem({ href, current, children, className, "aria-label": ariaLabel, ...rest }: BreadcrumbItemProps): import("react/jsx-runtime").JSX.Element;
 declare namespace BreadcrumbItem {
     var displayName: string;
 }
-export type BreadcrumbSeparatorProps = {
-    children?: React.ReactNode;
-    className?: string;
-};
-declare function BreadcrumbSeparator({ children, className }: BreadcrumbSeparatorProps): import("react/jsx-runtime").JSX.Element;
-declare namespace BreadcrumbSeparator {
-    var displayName: string;
-}
-export type BreadcrumbEllipsisProps = {
-    className?: string;
+export type BreadcrumbEllipsisProps = Omit<React.LiHTMLAttributes<HTMLLIElement>, "children"> & {
+    ref?: React.Ref<HTMLLIElement>;
 };
-declare function BreadcrumbEllipsis({ className }: BreadcrumbEllipsisProps): import("react/jsx-runtime").JSX.Element;
+declare function BreadcrumbEllipsis({ className, ...rest }: BreadcrumbEllipsisProps): import("react/jsx-runtime").JSX.Element;
 declare namespace BreadcrumbEllipsis {
     var displayName: string;
 }
 export declare const Breadcrumb: {
     Root: typeof BreadcrumbRoot;
     Item: typeof BreadcrumbItem;
-    Separator: typeof BreadcrumbSeparator;
     Ellipsis: typeof BreadcrumbEllipsis;
 };
 export {};
-//# sourceMappingURL=Breadcrumb.d.ts.map

package/dist/components/button/Button.d.ts

@@ -1,61 +1,47 @@
-import * as React from "react";
+import type * as React from "react";
 import type { ControlSize, Tone, Variant } from "@/internal/states";
-export type ButtonRootProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "size"> & {
+/**
+ * `tone="inherit"` takes the host's text color (a close button on a solid Banner): fills are a
+ * `currentColor` wash, so it has no `solid` treatment.
+ */
+type ButtonColorProps = {
     /** Visual treatment. Default `solid`. */
     variant?: Variant;
     /** Semantic color. Default `accent`; `danger` for destructive actions. */
     tone?: Extract<Tone, "accent" | "neutral" | "danger">;
+} | {
+    variant: Exclude<Variant, "solid">;
+    /** Takes the host's text color; for actions placed on a colored host. */
+    tone: "inherit";
+};
+export type ButtonRootProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "size"> & ButtonColorProps & {
+    /** Tier. Default: the tier of the surrounding control (a form, a panel, a field), else `m`. */
     size?: ControlSize;
     fullWidth?: boolean;
     loading?: boolean;
     /**
      * Merges Button props onto its single child element instead of rendering `<button>`.
-     * Use when the trigger must be a different element (e.g. `<a>`, React Router `<Link>`).
-     *
-     * - `disabled` / `loading` → `aria-disabled="true"` + `pointer-events: none` (CSS);
-     *   native `disabled` attribute is NOT set (invalid on non-button elements).
-     * - `type` is not forwarded (irrelevant for non-button elements).
-     * - The child must accept `className`, `aria-*`, `data-*`, and event handler props.
+     * `disabled` / `loading` become `aria-disabled` (a link has no native `disabled`), `type` is
+     * dropped, and no spinner is added — the child owns its content.
      */
     asChild?: boolean;
+    ref?: React.Ref<HTMLButtonElement>;
 };
+declare function ButtonRoot({ children, className, variant, tone, size: sizeProp, fullWidth, type, loading, disabled, asChild, onClick, ref, ...rest }: ButtonRootProps): import("react/jsx-runtime").JSX.Element;
+declare namespace ButtonRoot {
+    var displayName: string;
+}
 export type ButtonIconProps = {
     children: React.ReactNode;
     className?: string;
+    ref?: React.Ref<HTMLSpanElement>;
 } & Omit<React.HTMLAttributes<HTMLSpanElement>, "children">;
 declare function ButtonIcon({ children, className, ...rest }: ButtonIconProps): import("react/jsx-runtime").JSX.Element;
 declare namespace ButtonIcon {
     var displayName: string;
 }
-export type ButtonSpinnerProps = {
-    className?: string;
-} & React.HTMLAttributes<HTMLSpanElement>;
-declare function ButtonSpinner({ className, ...rest }: ButtonSpinnerProps): import("react/jsx-runtime").JSX.Element | null;
-declare namespace ButtonSpinner {
-    var displayName: string;
-}
 export declare const Button: {
-    Root: React.ForwardRefExoticComponent<Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "size"> & {
-        /** Visual treatment. Default `solid`. */
-        variant?: Variant;
-        /** Semantic color. Default `accent`; `danger` for destructive actions. */
-        tone?: Extract<Tone, "accent" | "neutral" | "danger">;
-        size?: ControlSize;
-        fullWidth?: boolean;
-        loading?: boolean;
-        /**
-         * Merges Button props onto its single child element instead of rendering `<button>`.
-         * Use when the trigger must be a different element (e.g. `<a>`, React Router `<Link>`).
-         *
-         * - `disabled` / `loading` → `aria-disabled="true"` + `pointer-events: none` (CSS);
-         *   native `disabled` attribute is NOT set (invalid on non-button elements).
-         * - `type` is not forwarded (irrelevant for non-button elements).
-         * - The child must accept `className`, `aria-*`, `data-*`, and event handler props.
-         */
-        asChild?: boolean;
-    } & React.RefAttributes<HTMLButtonElement>>;
+    Root: typeof ButtonRoot;
     Icon: typeof ButtonIcon;
-    Spinner: typeof ButtonSpinner;
 };
 export {};
-//# sourceMappingURL=Button.d.ts.map