prime-ui-kit 0.17.0 → 0.19.0

package/dist/chunks/{chunk-SVFWPLNW.js → chunk-ZTZ2ML2B.js}

@@ -23,11 +23,11 @@ import {
   useInheritedDisabled,
   useLabels,
   useOpenState
-} from "./chunk-7WWZYGRC.js";
+} from "./chunk-RZNGLELR.js";
 import {
   cx,
   useHostTier
-} from "./chunk-2ODXLPW3.js";
+} from "./chunk-QFHE5GKW.js";
 
 // src/components/color-field/ColorField.tsx
 import * as React3 from "react";
@@ -359,7 +359,15 @@ function SliderMeta({ label, className, ...rest }) {
     /* @__PURE__ */ jsx("output", { className: ColorPicker_default.sliderValue, "aria-live": "off", children: slider && channel ? sliderValueLabel(slider.value, channel, locale) : null })
   ] });
 }
-function HexInput({ label, hint, error, focusRing, children, ...rest }) {
+function HexInput({
+  label,
+  hint,
+  hintTone,
+  error,
+  focusRing,
+  children,
+  ...rest
+}) {
   const { labels } = useColorPickerContext();
   const { inputRef, text, setText, commit } = useColorDraft(toHexText, parseHex);
   return /* @__PURE__ */ jsx(
@@ -368,6 +376,7 @@ function HexInput({ label, hint, error, focusRing, children, ...rest }) {
       ...rest,
       label: label ?? labels.hex,
       hint,
+      hintTone,
       error,
       focusRing,
       children: /* @__PURE__ */ jsxs(Input.Wrapper, { children: [
@@ -507,6 +516,7 @@ function ColorField({
   required = false,
   optional,
   hint,
+  hintTone,
   error,
   className,
   "aria-label": ariaLabel,
@@ -557,6 +567,7 @@ function ColorField({
         required,
         optional,
         hint,
+        hintTone,
         error,
         disabled,
         optionalLabel: labels.optional,

package/dist/color-picker.js

@@ -4,9 +4,9 @@ import {
   ColorField,
   ColorPicker,
   parseColor
-} from "./chunks/chunk-SVFWPLNW.js";
-import "./chunks/chunk-7WWZYGRC.js";
-import "./chunks/chunk-2ODXLPW3.js";
+} from "./chunks/chunk-ZTZ2ML2B.js";
+import "./chunks/chunk-RZNGLELR.js";
+import "./chunks/chunk-QFHE5GKW.js";
 export {
   ColorField,
   ColorPicker,

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

@@ -127,6 +127,13 @@ export type BadgeActionProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement
     children?: React.ReactNode;
     ref?: React.Ref<HTMLButtonElement>;
 };
+export type BadgeGroupProps = React.HTMLAttributes<HTMLDivElement> & {
+    /**
+     * Tier of every badge in the group; a badge's own `size` wins. Small tiers stand closer.
+     */
+    size?: ControlSize;
+    ref?: React.Ref<HTMLDivElement>;
+};
 declare function BadgeRoot({ color, tone, variant, size: sizeProp, shape, onRemove, pressed: pressedProp, defaultPressed, onPressedChange, loading, labels, disabled: disabledProp, children, className, ref, ...rest }: BadgeRootProps): import("react/jsx-runtime").JSX.Element;
 declare namespace BadgeRoot {
     var displayName: string;
@@ -153,8 +160,18 @@ declare function BadgeAction({ label, onClick, persistent: _persistent, disabled
 declare namespace BadgeAction {
     var displayName: string;
 }
+/**
+ * A row of badges as one value (the tags of a record, the stages a deal went through): the badges
+ * wrap onto more lines, a chip gap apart. `size` sets the tier of every badge in it; without it the
+ * badges follow the host, as a lone badge does.
+ */
+declare function BadgeGroup({ size, className, ...rest }: BadgeGroupProps): import("react/jsx-runtime").JSX.Element;
+declare namespace BadgeGroup {
+    var displayName: string;
+}
 export declare const Badge: {
     Root: typeof BadgeRoot;
+    Group: typeof BadgeGroup;
     Icon: typeof BadgeIcon;
     Dot: typeof BadgeDot;
     Action: typeof BadgeAction;

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

@@ -24,9 +24,13 @@ declare namespace BreadcrumbRoot {
 }
 export type BreadcrumbItemProps = Omit<React.LiHTMLAttributes<HTMLLIElement>, "aria-label"> & {
     /**
-     * Renders a link; without it the item is text.
+     * Renders a link; without it (and without `asChild`) the item is text.
      */
     href?: string;
+    /**
+     * The single child (a router `Link`) is the level's link with the same look; its own text is the level. In the «…» menu of a folded path it is the menu item.
+     */
+    asChild?: boolean;
     /**
      * Current page: `aria-current="page"` (on the link when `href` is set), primary text, medium weight. Usually the last item, without `href`.
      */
@@ -37,7 +41,12 @@ export type BreadcrumbItemProps = Omit<React.LiHTMLAttributes<HTMLLIElement>, "a
     "aria-label"?: string;
     ref?: React.Ref<HTMLLIElement>;
 };
-declare function BreadcrumbItem({ href, current, children, className, "aria-label": ariaLabel, ...rest }: BreadcrumbItemProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * One level of the path in its `<li>`: a link (`href`, or the consumer's router link with
+ * `asChild`) for a previous level, plain text for the current one. A press on the link goes
+ * through `Page.Guard` (`leaveGuardCapture`).
+ */
+declare function BreadcrumbItem({ href, asChild, current, children, className, "aria-label": ariaLabel, onClickCapture, ...rest }: BreadcrumbItemProps): import("react/jsx-runtime").JSX.Element;
 declare namespace BreadcrumbItem {
     var displayName: string;
 }

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

@@ -37,7 +37,7 @@ type ButtonShapeProps = {
     "aria-label": string;
 };
 /**
- * A `<button>` runs the long-action modes; with `asChild` the child (a link) owns its content, so
+ * A `<button>` runs the long-action modes; with `asChild` the child (a link) owns its element, so
  * it takes none of them.
  */
 type ButtonElementProps = {

package/dist/components/button-group/ButtonGroup.d.ts

@@ -45,7 +45,7 @@ export type ButtonGroupRootProps = Omit<FieldRootDomProps, "dir"> & FieldFramePr
  * The field: label · the segments · hint or error. `className`, `ref` and the rest go to the frame;
  * `id`, `role` and the `aria-label*` / `aria-describedby` names to the `role="group"` element.
  */
-declare function ButtonGroupRoot({ orientation, size: sizeProp, fullWidth, label, required, optional, hint, error, invalid, reserveSupportRow, id, labels: labelsProp, children, className, role, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, ...rest }: ButtonGroupRootProps): import("react/jsx-runtime").JSX.Element;
+declare function ButtonGroupRoot({ orientation, size: sizeProp, fullWidth, label, required, optional, hint, hintTone, error, invalid, reserveSupportRow, id, labels: labelsProp, children, className, role, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, ...rest }: ButtonGroupRootProps): import("react/jsx-runtime").JSX.Element;
 declare namespace ButtonGroupRoot {
     var displayName: string;
 }

package/dist/components/card/Card.d.ts

@@ -16,12 +16,16 @@ export type CardRootProps = DivProps & {
      * No raised shadow: a flat tile for dense grids.
      */
     flat?: boolean;
+    /**
+     * The KPI is loading: `Card.Value`, `Card.Delta` and `Card.Meta` show a Skeleton in their own geometry and the root sets `aria-busy`; the data fades in when it arrives. Labels and titles stay.
+     */
+    loading?: boolean;
     /**
      * The whole card is one link or button: pass that element as the only child with the parts inside it; it gets hover, press and the focus ring. Nothing interactive may sit inside it.
      */
     asChild?: boolean;
 };
-declare function CardRoot({ variant, flat, asChild, className, children, ...rest }: CardRootProps): import("react/jsx-runtime").JSX.Element;
+declare function CardRoot({ variant, flat, loading, asChild, className, children, ...rest }: CardRootProps): import("react/jsx-runtime").JSX.Element;
 declare namespace CardRoot {
     var displayName: string;
 }
@@ -79,7 +83,7 @@ declare namespace CardLabel {
     var displayName: string;
 }
 export type CardValueProps = SpanProps;
-declare function CardValue({ className, ...rest }: CardValueProps): import("react/jsx-runtime").JSX.Element;
+declare function CardValue({ className, children, ...rest }: CardValueProps): import("react/jsx-runtime").JSX.Element;
 declare namespace CardValue {
     var displayName: string;
 }
@@ -89,7 +93,7 @@ export type CardDeltaProps = SpanProps & {
      */
     tone?: Extract<Tone, "neutral" | "success" | "warning" | "danger">;
 };
-declare function CardDelta({ className, tone, ...rest }: CardDeltaProps): import("react/jsx-runtime").JSX.Element;
+declare function CardDelta({ className, tone, children, ...rest }: CardDeltaProps): import("react/jsx-runtime").JSX.Element;
 declare namespace CardDelta {
     var displayName: string;
 }
@@ -98,7 +102,7 @@ export type CardMetaProps = SpanProps;
  * The reference line of a KPI («Лидов 120 · сделок 18»): caption, muted, tabular; it sits at the
  * bottom of the tile, so tiles in a row line their meta up.
  */
-declare function CardMeta({ className, ...rest }: CardMetaProps): import("react/jsx-runtime").JSX.Element;
+declare function CardMeta({ className, children, ...rest }: CardMetaProps): import("react/jsx-runtime").JSX.Element;
 declare namespace CardMeta {
     var displayName: string;
 }

package/dist/components/chat/Chat.d.ts

@@ -186,9 +186,9 @@ export type ChatMessagesProps<T = unknown> = Omit<MessageListProps, "selected" |
      */
     now?: Date;
     /**
-     * The label of a date.
+     * The label of a date; gets the `timeZone`.
      */
-    formatDate?: (date: Date, now: Date) => string;
+    formatDate?: (date: Date, now: Date, timeZone?: string) => string;
 };
 /**
  * The conversation: the one message list of the kit, in its own scroller. A `role="log"` of rows
@@ -198,7 +198,7 @@ export type ChatMessagesProps<T = unknown> = Omit<MessageListProps, "selected" |
  * and `Message.Typing` close the list). Only the rows around the view render; the list opens at
  * the end and keeps the reader's place.
  */
-declare function ChatMessages<T>({ group, loading, hasOlder, onLoadOlder, items, getKey, getAuthor, getDate, isService, renderMessage, unread, groupWindow, now, formatDate, children, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...rest }: ChatMessagesProps<T>): import("react/jsx-runtime").JSX.Element;
+declare function ChatMessages<T>({ group, loading, hasOlder, onLoadOlder, items, getKey, getAuthor, getDate, isService, renderMessage, unread, groupWindow, now, timeZone, formatDate, children, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...rest }: ChatMessagesProps<T>): import("react/jsx-runtime").JSX.Element;
 declare namespace ChatMessages {
     var displayName: string;
 }

package/dist/components/chat/MessageList.d.ts

@@ -38,6 +38,10 @@ export type MessageListProps = React.HTMLAttributes<HTMLDivElement> & {
      * The reader (`{ id, name: «Вы», src?, color? }`): a reaction they put shows them among the chip's avatars at once, before the data comes back; matched by `id`.
      */
     reader?: MessageUser;
+    /**
+     * The IANA zone of the date separators, the runs and every message time (`"Asia/Vladivostok"`): a profile's zone, not the browser's.
+     */
+    timeZone?: string;
     /**
      * A message was added at the end after mount, sent or received: for a sound, a counter, a title badge. Not called for the first render, history or a message put back in the middle.
      */
@@ -76,7 +80,7 @@ export type MessageListProps = React.HTMLAttributes<HTMLDivElement> & {
  * `anchor="end"`); jumps, search, selection ranges, the keyboard and playing media reach or keep
  * rows that are not rendered.
  */
-export declare function MessageList({ group, selected: selectedProp, defaultSelected, onSelectedChange, quickReaction, reactionOptions, reader, onNewMessage, onRead, jumpTo, highlight, onMatchesChange, revealRef, labels: labelsProp, className, children, onKeyDown, onFocus, ref, ...rest }: MessageListProps): import("react/jsx-runtime").JSX.Element;
+export declare function MessageList({ group, selected: selectedProp, defaultSelected, onSelectedChange, quickReaction, reactionOptions, reader, timeZone, onNewMessage, onRead, jumpTo, highlight, onMatchesChange, revealRef, labels: labelsProp, className, children, onKeyDown, onFocus, ref, ...rest }: MessageListProps): import("react/jsx-runtime").JSX.Element;
 export type ChatSelectionBarProps = React.HTMLAttributes<HTMLDivElement> & {
     ref?: React.Ref<HTMLDivElement>;
 };

package/dist/components/chat/groupMessages.d.ts

@@ -7,7 +7,7 @@ import type { MessagePosition } from "../message/types";
 export type MessageListEntry<T> = {
     type: "date";
     key: string;
-    /** The start of the day (local time). */
+    /** The start of the day (in `timeZone`, else local time). */
     date: Date;
     /** «Сегодня», «Вчера», «12 марта», «12 марта 2025». */
     label: string;
@@ -37,11 +37,19 @@ export type GroupMessagesOptions<T> = {
     groupWindow?: number;
     /** «Today» for the date labels. Default: now. */
     now?: Date;
+    /**
+     * The zone the days are read in (an IANA name, `"Asia/Vladivostok"`): where a day starts and what
+     * «today» is. Default: the browser's zone.
+     */
+    timeZone?: string;
     /** The label of a date separator. Default `formatMessageDate`. */
-    formatDate?: (date: Date, now: Date) => string;
+    formatDate?: (date: Date, now: Date, timeZone?: string) => string;
 };
-/** «Сегодня», «Вчера», «12 марта» this year, «12 марта 2025» another year. */
-export declare function formatMessageDate(date: Date, now?: Date): string;
+/**
+ * «Сегодня», «Вчера», «12 марта» this year, «12 марта 2025» another year; days are read in
+ * `timeZone`, or the browser's zone.
+ */
+export declare function formatMessageDate(date: Date, now?: Date, timeZone?: string): string;
 /**
  * The rows of a chat from messages in time order: a date separator before the first message of
  * every day, and for every message its `position` in the run of one author (a new run starts with

package/dist/components/chat-list/ChatList.d.ts

@@ -140,17 +140,22 @@ type ChatListItemOwnProps = {
      */
     draft?: string;
     /**
-     * `ChatList.ItemIcon`, `ChatList.ItemText`, `ChatList.ItemDescription`, `ChatList.ItemMenu`.
+     * The one child element (a router `Link`) is the row; the parts go inside it.
+     */
+    asChild?: boolean;
+    /**
+     * `ChatList.ItemIcon`, `ChatList.ItemText`, `ChatList.ItemDescription`, `ChatList.ItemMenu` — inside the child element with `asChild`.
      */
     children?: React.ReactNode;
 };
-export type ChatListItemProps = ChatListItemOwnProps & Omit<ListItemProps, keyof ChatListItemOwnProps | "value" | "current" | "asChild" | "disabled">;
+export type ChatListItemProps = ChatListItemOwnProps & Omit<ListItemProps, keyof ChatListItemOwnProps | "value" | "current" | "disabled">;
 /**
- * A dialog: a `List.Item` row (a button, or a link with `href`) with the avatar, the name and the
- * time on the first line, the preview and the counts on the second. Its key and `current` come
- * from `ChatList.Root`.
+ * A dialog: a `List.Item` row (a button, a link with `href`, or the consumer's element with
+ * `asChild` — a router link, its children the parts) with the avatar, the name and the time on
+ * the first line, the preview and the counts on the second. Its key and `current` come from
+ * `ChatList.Root`.
  */
-declare function ChatListItem({ time, status, unread, mention, muted, pinned, typing, draft, className, children, onClick, onKeyDown, onFocus, onContextMenu, onPointerDown, onPointerMove, onPointerUp, onPointerCancel, ref, ...rest }: ChatListItemProps): import("react/jsx-runtime").JSX.Element;
+declare function ChatListItem({ asChild, time, status, unread, mention, muted, pinned, typing, draft, className, children, onClick, onKeyDown, onFocus, onContextMenu, onPointerDown, onPointerMove, onPointerUp, onPointerCancel, ref, ...rest }: ChatListItemProps): import("react/jsx-runtime").JSX.Element;
 declare namespace ChatListItem {
     var displayName: string;
 }
@@ -216,9 +221,13 @@ export type ChatListRootProps<T = unknown> = Omit<React.HTMLAttributes<HTMLDivEl
      */
     now?: Date;
     /**
-     * Display of a row's `Date` time: «14:32» today, «пн» this week, «12 мар», «12.03.2025».
+     * The IANA zone the times of the rows are read in (`"Asia/Vladivostok"`): a profile's zone, not the browser's.
+     */
+    timeZone?: string;
+    /**
+     * Display of a row's `Date` time: «14:32» today, «пн» this week, «12 мар», «12.03.2025»; gets the `timeZone`.
      */
-    formatTime?: (date: Date, now: Date) => string;
+    formatTime?: (date: Date, now: Date, timeZone?: string) => string;
     /**
      * Built-in strings, see Labels.
      */
@@ -231,7 +240,7 @@ export type ChatListRootProps<T = unknown> = Omit<React.HTMLAttributes<HTMLDivEl
  * new places when the order changes, a long list rendered only around the view, placeholder rows
  * while loading and more dialogs loaded near the end. Draws no surface: put it in a pane.
  */
-declare function ChatListRoot<T>({ items, getKey, renderItem, value: valueProp, defaultValue, onValueChange, search: searchProp, defaultSearch, onSearchChange, loading, hasMore, onLoadMore, empty, size: sizeProp, now: nowProp, formatTime, labels: labelsProp, className, ref, ...rest }: ChatListRootProps<T>): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+declare function ChatListRoot<T>({ items, getKey, renderItem, value: valueProp, defaultValue, onValueChange, search: searchProp, defaultSearch, onSearchChange, loading, hasMore, onLoadMore, empty, size: sizeProp, now: nowProp, timeZone, formatTime, labels: labelsProp, className, ref, ...rest }: ChatListRootProps<T>): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
 declare namespace ChatListRoot {
     var displayName: string;
 }

package/dist/components/chat-list/formatChatTime.d.ts

@@ -1,6 +1,6 @@
 /**
  * The time of a dialog's last message, as a messenger shows it: today «14:32», within the last
- * six days the weekday «пн», earlier this year «12 мар», another year «12.03.2025». The default
- * `ChatList.Root formatTime`.
+ * six days the weekday «пн», earlier this year «12 мар», another year «12.03.2025». Days and the
+ * clock are read in `timeZone`, or the browser's zone. The default `ChatList.Root formatTime`.
  */
-export declare function formatChatTime(date: Date, now: Date): string;
+export declare function formatChatTime(date: Date, now: Date, timeZone?: string): string;

package/dist/components/checkbox/Checkbox.d.ts

@@ -1,4 +1,5 @@
 import * as React from "react";
+import type { HintTone } from "../hint/Hint";
 import { type ChoiceLabelProps } from "../../internal/ChoiceField";
 import type { ControlSize } from "../../internal/states";
 export type CheckboxShape = "square" | "circle";
@@ -32,6 +33,10 @@ export type CheckboxRootProps = Omit<React.InputHTMLAttributes<HTMLInputElement>
      * Help text under the label text. Hidden while `error` is shown.
      */
     hint?: React.ReactNode;
+    /**
+     * Status color of `hint` («Осталось 12 дней» in `warning`). The words carry the status, the color repeats it; an `error` replaces the hint and its tone. A validation error is `error`, never a `danger` hint.
+     */
+    hintTone?: HintTone;
     /**
      * Error message in the hint slot; implies `invalid`.
      */
@@ -59,7 +64,7 @@ export type CheckboxRootProps = Omit<React.InputHTMLAttributes<HTMLInputElement>
     /** The native checkbox input. */
     ref?: React.Ref<HTMLInputElement>;
 };
-declare function CheckboxRoot({ id, checked: checkedProp, defaultChecked, onCheckedChange, indeterminate, invalid, hint, error, size: sizeProp, shape, optional, labels: labelsProp, disabled: disabledProp, readOnly, className, "aria-describedby": ariaDescribedBy, children, ref, ...inputRest }: CheckboxRootProps): import("react/jsx-runtime").JSX.Element;
+declare function CheckboxRoot({ id, checked: checkedProp, defaultChecked, onCheckedChange, indeterminate, invalid, hint, hintTone, error, size: sizeProp, shape, optional, labels: labelsProp, disabled: disabledProp, readOnly, className, "aria-describedby": ariaDescribedBy, children, ref, ...inputRest }: CheckboxRootProps): import("react/jsx-runtime").JSX.Element;
 declare namespace CheckboxRoot {
     var displayName: string;
 }

package/dist/components/color-field/ColorField.d.ts

@@ -77,7 +77,7 @@ export type ColorFieldProps = FieldRootDomProps & FieldFrameProps & FieldFocusRi
  * the ColorPicker panel (area, hue, optional opacity, channels with the eyedropper, presets) in a
  * Popover.
  */
-export declare function ColorField({ value: valueProp, defaultValue, onValueChange, presets, alpha, size: sizeProp, disabled: disabledProp, invalid: invalidProp, focusRing, name, id, label, required, optional, hint, error, className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, labels: labelsProp, ...rest }: ColorFieldProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+export declare function ColorField({ value: valueProp, defaultValue, onValueChange, presets, alpha, size: sizeProp, disabled: disabledProp, invalid: invalidProp, focusRing, name, id, label, required, optional, hint, hintTone, error, className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, labels: labelsProp, ...rest }: ColorFieldProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
 export declare namespace ColorField {
     var displayName: string;
 }

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

@@ -2,6 +2,7 @@ import * as React from "react";
 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 "../button/Button";
 import { type ColorSwatchesColorProps } from "../color-swatches/ColorSwatches";
+import type { HintTone } from "../hint/Hint";
 import { type FieldActionButtonProps } from "../../internal/FieldAction";
 import type { FieldFocusRingProps, FieldRootDomProps } from "../../internal/FieldFrame";
 import type { ControlSize } from "../../internal/states";
@@ -82,6 +83,10 @@ export type ColorPickerHexInputProps = FieldRootDomProps & FieldFocusRingProps &
      * Help text under the field. Hidden while `error` is shown.
      */
     hint?: React.ReactNode;
+    /**
+     * Status color of `hint` («Осталось 12 дней» in `warning`). The words carry the status, the color repeats it; an `error` replaces the hint and its tone. A validation error is `error`, never a `danger` hint.
+     */
+    hintTone?: HintTone;
     /**
      * Error message in the hint slot; marks the field invalid.
      */
@@ -165,7 +170,7 @@ export type ColorPickerSliderMetaProps = DivProps & {
  * React Aria's `SliderOutput` inside a color slider points `for` at an id no input carries.
  */
 declare function SliderMeta({ label, className, ...rest }: ColorPickerSliderMetaProps): import("react/jsx-runtime").JSX.Element;
-declare function HexInput({ label, hint, error, focusRing, children, ...rest }: ColorPickerHexInputProps): import("react/jsx-runtime").JSX.Element;
+declare function HexInput({ label, hint, hintTone, error, focusRing, children, ...rest }: ColorPickerHexInputProps): import("react/jsx-runtime").JSX.Element;
 declare namespace HexInput {
     var displayName: string;
 }

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

@@ -10,6 +10,10 @@ export type ColorPresetsLabels = {
     list: string;
     /** The "no color" swatch (`allowEmpty`) and the trigger name for an empty value. */
     empty: string;
+    /** Label of the hex field under the swatches (`allowCustom`). */
+    custom: string;
+    /** Error of the hex field when Enter finds no hex color in it. */
+    customInvalid: string;
 };
 export declare const COLOR_PRESETS_LABELS: ColorPresetsLabels;
 export type ColorPresetsRootProps = {
@@ -65,6 +69,10 @@ export type ColorPresetsRootProps = {
      * Adds the «no color» swatch after the presets (value `null`).
      */
     allowEmpty?: boolean;
+    /**
+     * Any color beyond the palette: a hex field under the swatches (`labels.custom`) shows the typed color, Enter picks it as `#rrggbb`; invalid text gets `labels.customInvalid`.
+     */
+    allowCustom?: boolean;
     /**
      * Close the panel after a pick (focus returns to the trigger).
      */
@@ -78,7 +86,7 @@ export type ColorPresetsRootProps = {
      */
     children: React.ReactNode;
 };
-declare function ColorPresetsRoot({ value: valueProp, defaultValue, onValueChange, open: openProp, defaultOpen, onOpenChange, closeOnEscape, closeOnOutsideClick, presets, columns: columnsProp, size: sizeProp, disabled: disabledProp, allowEmpty, closeOnSelect, labels: labelsProp, children, }: ColorPresetsRootProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+declare function ColorPresetsRoot({ value: valueProp, defaultValue, onValueChange, open: openProp, defaultOpen, onOpenChange, closeOnEscape, closeOnOutsideClick, presets, columns: columnsProp, size: sizeProp, disabled: disabledProp, allowEmpty, allowCustom, closeOnSelect, labels: labelsProp, children, }: ColorPresetsRootProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
 declare namespace ColorPresetsRoot {
     var displayName: string;
 }

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

@@ -5,7 +5,7 @@ export type CrossfadeProps = React.HTMLAttributes<HTMLDivElement> & {
      */
     state: string | number;
     /**
-     * The region takes its parent's height (a flex or grid item, or a sized block) and every state stretches to it; the height never glides.
+     * The region takes its parent's height (a flex or grid item, or a sized block) and every state stretches to it; the height never glides. A `Crossfade` that is the child of a `Page.Cell` fills it unless `fill` is set.
      */
     fill?: boolean;
     ref?: React.Ref<HTMLDivElement>;

package/dist/components/data-table/ColumnsMenu.d.ts

@@ -1,23 +1,19 @@
-import * as React from "react";
-import type { PositionAlign, PositionSide } from "../../hooks/usePosition";
-export type DataTableColumnsMenuProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "type" | "children"> & {
-    /**
-     * Side of the trigger the menu opens on.
-     */
-    side?: PositionSide;
-    /**
-     * Alignment to the trigger. `auto` lines the panel up with the trigger edge that has more room beyond it; `start`, `center` or `end` fix it.
-     */
-    align?: PositionAlign;
-    /** The trigger button. */
-    ref?: React.Ref<HTMLButtonElement>;
+import { type ControlSize } from "../../internal/states";
+import type { DataTableLabels } from "./DataTable";
+import type { DataTableColumn } from "./types";
+type ColumnsMenuProps = {
+    /** Every column, hidden ones included, in table order. */
+    columns: DataTableColumn<never>[];
+    hidden: ReadonlySet<string>;
+    setHidden: (hidden: string[]) => void;
+    labels: DataTableLabels;
+    size: ControlSize;
 };
 /**
- * The column chooser of the table it sits in (put it into `toolbar`): a trigger button and a menu
- * with a check item per column and «Показать все». Writes the table's `hiddenColumns`; a column
- * with `hideable: false` stays checked and disabled, and the last visible column cannot be hidden.
+ * The column chooser of the table (`columnsMenu`), drawn in its header row: an icon-only ghost
+ * Button one tier below the table, named and tipped by `labels.columns`, opening a Dropdown with a
+ * check item per column and «Показать все». A column with `hideable: false` stays checked and
+ * disabled, and the last visible column cannot be hidden.
  */
-export declare function DataTableColumnsMenu({ side, align, ...rest }: DataTableColumnsMenuProps): import("react/jsx-runtime").JSX.Element;
-export declare namespace DataTableColumnsMenu {
-    var displayName: string;
-}
+export declare function ColumnsMenu({ columns, hidden, setHidden, labels, size }: ColumnsMenuProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/data-table/DataTable.d.ts

@@ -1,8 +1,6 @@
 import * as React from "react";
 import { type ControlSize } from "../../internal/states";
-import { DataTableColumnsMenu } from "./ColumnsMenu";
 import type { DataTableColumn, DataTableGroup, DataTableRowClickEvent, DataTableSortState } from "./types";
-export type { DataTableColumnsMenuProps } from "./ColumnsMenu";
 export type { DataTableColumn, DataTableGroup, DataTableOrder, DataTableRowClickEvent, DataTableSortState, } from "./types";
 /** System strings; `{from}`, `{to}`, `{total}`, `{label}`, `{count}`, `{group}` are replaced. */
 export type DataTableLabels = {
@@ -26,9 +24,9 @@ export type DataTableLabels = {
     expand: string;
     /** `aria-label` of the expand toggle of an expanded row. */
     collapse: string;
-    /** Text of the `DataTable.ColumnsMenu` trigger; `{shown}` and `{total}` are column counts. */
+    /** Name and tooltip of the column chooser (`columnsMenu`); `{shown}` and `{total}` are counts. */
     columns: string;
-    /** The `DataTable.ColumnsMenu` item that shows every column again. */
+    /** The column chooser item that shows every column again. */
     showAllColumns: string;
     /** `aria-label` of a row's drag handle (`onReorder`); `{label}` is `getRowLabel(row)`. */
     reorderRow: string;
@@ -38,6 +36,8 @@ export type DataTableLabels = {
     expandGroup: string;
     /** `aria-label` of the toggle of an expanded group; `{group}` is the group key. */
     collapseGroup: string;
+    /** Name of the info glyph of a column with a `description` (the tooltip holds the text). */
+    columnInfo: string;
 };
 export declare const DATA_TABLE_LABELS: DataTableLabels;
 export type DataTableProps<Row> = Omit<React.HTMLAttributes<HTMLDivElement>, "children"> & {
@@ -48,7 +48,7 @@ export type DataTableProps<Row> = Omit<React.HTMLAttributes<HTMLDivElement>, "ch
      */
     columns: DataTableColumn<Row>[];
     /**
-     * Ids of columns that are not rendered, controlled. A column with `hideable: false` stays. `DataTable.ColumnsMenu` in `toolbar` changes it.
+     * Ids of columns that are not rendered, controlled. A column with `hideable: false` stays. The column chooser (`columnsMenu`) changes it.
      */
     hiddenColumns?: string[];
     /**
@@ -56,9 +56,13 @@ export type DataTableProps<Row> = Omit<React.HTMLAttributes<HTMLDivElement>, "ch
      */
     defaultHiddenColumns?: string[];
     /**
-     * The hidden ids changed (`DataTable.ColumnsMenu`). The kit stores nothing: keep the list (local storage, the user's settings) and pass it back to restore the choice.
+     * The hidden ids changed (`columnsMenu`). The kit stores nothing: keep the list (local storage, the user's settings) and pass it back to restore the choice.
      */
     onHiddenColumnsChange?: (hiddenColumns: string[]) => void;
+    /**
+     * The column chooser at the end of the header row: in the head cell of a trailing row-actions column (`hideHeader`), else in a cell of its own; sticks with `stickyLastColumn`. Needs `showHeader`.
+     */
+    columnsMenu?: boolean;
     /**
      * Data; sorted in memory when a sort is set. With `source="server"` — the page (or the loaded batches) as the server returned it.
      */
@@ -91,6 +95,10 @@ export type DataTableProps<Row> = Omit<React.HTMLAttributes<HTMLDivElement>, "ch
      * The first visible column (with the selection and toggle columns) sticks while scrolling sideways; the start edge shadow falls from its end edge.
      */
     stickyFirstColumn?: boolean;
+    /**
+     * The last visible column (row actions) sticks to the end edge while scrolling sideways; the end edge shadow falls from its start edge.
+     */
+    stickyLastColumn?: boolean;
     /**
      * Stable row id (position by default; sub-rows too, `index` among siblings); selection, expansion and the enter animation of new rows are keyed by it. Pass it whenever sorting, selection or expansion is used.
      */
@@ -252,7 +260,7 @@ export type DataTableProps<Row> = Omit<React.HTMLAttributes<HTMLDivElement>, "ch
      */
     loadingRows?: number;
     /**
-     * Panel above the table (search, filters, bulk actions); stacks below 30rem of table width.
+     * Panel above the table for several controls of the table itself (bulk actions on the selected rows, a table-local search with filters); stacks below 30rem of table width.
      */
     toolbar?: React.ReactNode;
     /**
@@ -280,7 +288,4 @@ export type DataTableProps<Row> = Omit<React.HTMLAttributes<HTMLDivElement>, "ch
      */
     onCollapsedGroupsChange?: (collapsedGroups: (string | number)[]) => void;
 };
-export declare function DataTable<Row>({ columns: allColumns, hiddenColumns, defaultHiddenColumns, onHiddenColumnsChange, rows, source, rowCount, size: sizeProp, className, showHeader, stickyHeader, stickyFirstColumn, getRowKey, getRowHref, onRowClick, isRowClickable, loading, empty, labels: labelsProp, rowDividers, columnDividers, sort, defaultSort, onSortChange, paging, page, defaultPage, onPageChange, pageSize, infiniteBatchSize, hasMore, loadingMore, onLoadMore, scrollHeight, fullWidth, highlightRowOnHover, highlightColumnOnHover, striped, getRowLabel, selectable, selected, defaultSelected, onSelectedChange, onReorder, getRowChildren, renderExpanded, isRowExpandable, expanded, defaultExpanded, onExpandedChange, loadError, loadingRows, toolbar, getRowGroup, renderGroupHeader, stickyGroupHeaders, collapsedGroups, defaultCollapsedGroups, onCollapsedGroupsChange, ref, ...rest }: DataTableProps<Row>): import("react/jsx-runtime").JSX.Element;
-export declare namespace DataTable {
-    var ColumnsMenu: typeof DataTableColumnsMenu;
-}
+export declare function DataTable<Row>({ columns: allColumns, hiddenColumns, defaultHiddenColumns, onHiddenColumnsChange, columnsMenu, rows, source, rowCount, size: sizeProp, className, showHeader, stickyHeader, stickyFirstColumn, stickyLastColumn, getRowKey, getRowHref, onRowClick, isRowClickable, loading, empty, labels: labelsProp, rowDividers, columnDividers, sort, defaultSort, onSortChange, paging, page, defaultPage, onPageChange, pageSize, infiniteBatchSize, hasMore, loadingMore, onLoadMore, scrollHeight, fullWidth, highlightRowOnHover, highlightColumnOnHover, striped, getRowLabel, selectable, selected, defaultSelected, onSelectedChange, onReorder, getRowChildren, renderExpanded, isRowExpandable, expanded, defaultExpanded, onExpandedChange, loadError, loadingRows, toolbar, getRowGroup, renderGroupHeader, stickyGroupHeaders, collapsedGroups, defaultCollapsedGroups, onCollapsedGroupsChange, ref, ...rest }: DataTableProps<Row>): import("react/jsx-runtime").JSX.Element;

package/dist/components/data-table/Head.d.ts

@@ -1,3 +1,4 @@
+import * as React from "react";
 import type { ControlSize } from "../../internal/states";
 import type { DataTableColumn, DataTableSortState } from "./types";
 type HeadProps<Row> = {
@@ -6,13 +7,21 @@ type HeadProps<Row> = {
     sort: DataTableSortState;
     onSort: (columnId: string) => void;
     stickyFirstColumn: boolean;
+    /** The last visible column sticks to the end edge (with `stickyHeader`: the end corner). */
+    stickyLastColumn: boolean;
     /** The head sticks to the top of the scroller. */
     stickyHeader: boolean;
     /** Sticky head and first column: the leading head cells stick to both edges. */
     stickyCorner: boolean;
     expandEnabled: boolean;
+    /** Name of the info glyph of a column with a `description`. */
+    infoLabel: string;
     /** A leading column of row handles (`onReorder`). */
     reorderable?: boolean;
+    /** The column chooser trigger (`columnsMenu`), or null. */
+    columnsMenu: React.ReactNode;
+    /** The chooser stands in a cell of its own at the end; else in the row-actions head cell. */
+    menuCell: boolean;
     selectAll?: {
         checked: boolean;
         indeterminate: boolean;
@@ -21,5 +30,5 @@ type HeadProps<Row> = {
         onToggle: () => void;
     };
 };
-export declare function Head<Row>({ columns, size, sort, onSort, stickyFirstColumn, stickyHeader, stickyCorner, expandEnabled, reorderable, selectAll, }: HeadProps<Row>): import("react/jsx-runtime").JSX.Element;
+export declare function Head<Row>({ columns, size, sort, onSort, stickyFirstColumn, stickyLastColumn, stickyHeader, stickyCorner, expandEnabled, infoLabel, reorderable, columnsMenu, menuCell, selectAll, }: HeadProps<Row>): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/data-table/Row.d.ts

@@ -15,6 +15,10 @@ export type RowShared<Row> = {
     selectable: boolean;
     expandEnabled: boolean;
     stickyFirstColumn: boolean;
+    /** The last visible column sticks to the end edge (row actions). */
+    stickyLastColumn: boolean;
+    /** A trailing cell under the head's column chooser (`columnsMenu` with no row-actions column). */
+    menuCell: boolean;
     striped: boolean;
     totalColumns: number;
     /**
@@ -93,10 +97,12 @@ type MeasureBodyProps<Row> = {
     expandEnabled: boolean;
     /** A leading column of row handles (`onReorder`). */
     reorderable: boolean;
+    /** A trailing cell under the head's column chooser. */
+    menuCell: boolean;
 };
 /**
  * Sub-rows of collapsed rows and rows of collapsed groups, laid out invisibly so the columns are
  * already as wide as they will be once a row or group opens; never shown or reachable.
  */
-export declare function MeasureBody<Row>({ rows, columns, selectable, expandEnabled, reorderable, }: MeasureBodyProps<Row>): import("react/jsx-runtime").JSX.Element;
+export declare function MeasureBody<Row>({ rows, columns, selectable, expandEnabled, reorderable, menuCell, }: MeasureBodyProps<Row>): import("react/jsx-runtime").JSX.Element;
 export {};