prime-ui-kit 0.16.0 → 0.17.0

package/dist/chunks/{chunk-A7OQWH6R.js → chunk-PRP4B6OG.js}

@@ -2,7 +2,7 @@
 
 import {
   defineGlyph
-} from "./chunk-U3Q2I3MY.js";
+} from "./chunk-2ODXLPW3.js";
 
 // src/icons/glyphs/a-arrow-down.tsx
 import { jsx, jsxs } from "react/jsx-runtime";

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

@@ -3,6 +3,7 @@
 import {
   Button,
   ColorSwatches,
+  FieldActionButton,
   FieldFrame,
   Icon,
   Input,
@@ -22,11 +23,11 @@ import {
   useInheritedDisabled,
   useLabels,
   useOpenState
-} from "./chunk-4PSQ64S4.js";
+} from "./chunk-7WWZYGRC.js";
 import {
   cx,
   useHostTier
-} from "./chunk-U3Q2I3MY.js";
+} from "./chunk-2ODXLPW3.js";
 
 // src/components/color-field/ColorField.tsx
 import * as React3 from "react";
@@ -42,7 +43,8 @@ import {
   ColorPickerStateContext,
   ColorSliderStateContext,
   composeRenderProps,
-  parseColor
+  parseColor,
+  useLocale
 } from "react-aria-components";
 
 // src/hooks/useDraft.ts
@@ -75,6 +77,7 @@ var ColorPicker_default = {
   channelInput: "ColorPicker_channelInput",
   channelCellHex: "ColorPicker_channelCellHex",
   channelSuffix: "ColorPicker_channelSuffix",
+  swatchButton: "ColorPicker_swatchButton",
   eyeDropperSquare: "ColorPicker_eyeDropperSquare"
 };
 
@@ -84,6 +87,7 @@ var COLOR_PICKER_LABELS = {
   format: "\u0424\u043E\u0440\u043C\u0430\u0442 \u0437\u043D\u0430\u0447\u0435\u043D\u0438\u0439 \u0446\u0432\u0435\u0442\u0430",
   eyeDropper: "\u041F\u0438\u043F\u0435\u0442\u043A\u0430",
   hex: "Hex",
+  palette: "\u041E\u0442\u043A\u0440\u044B\u0442\u044C \u043F\u0430\u043B\u0438\u0442\u0440\u0443",
   hue: "\u041E\u0442\u0442\u0435\u043D\u043E\u043A, \u0433\u0440\u0430\u0434\u0443\u0441\u044B",
   saturation: "\u041D\u0430\u0441\u044B\u0449\u0435\u043D\u043D\u043E\u0441\u0442\u044C, \u043F\u0440\u043E\u0446\u0435\u043D\u0442\u044B",
   lightness: "\u042F\u0440\u043A\u043E\u0441\u0442\u044C, \u043F\u0440\u043E\u0446\u0435\u043D\u0442\u044B",
@@ -279,15 +283,21 @@ function ColorPickerRoot({
   );
 }
 ColorPickerRoot.displayName = "ColorPicker.Root";
+var SliderChannelContext = React2.createContext(null);
 function Slider({ className, disabled, ...props }) {
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(SliderChannelContext.Provider, { value: props.channel, children: /* @__PURE__ */ jsx(
     AriaColorSlider,
     {
       className: composeRenderProps(className, (c) => cx(ColorPicker_default.slider, c)),
       isDisabled: useInheritedDisabled(disabled),
       ...props
     }
-  );
+  ) });
+}
+function sliderValueLabel(color, channel, locale) {
+  const raw = color.getChannelValue(channel);
+  const rounded = channel === "alpha" ? Math.round(raw * 100) / 100 : Math.round(raw);
+  return color.withChannelValue(channel, rounded).formatChannelValue(channel, locale);
 }
 function Area({ className, disabled, ...props }) {
   return /* @__PURE__ */ jsx(
@@ -342,12 +352,14 @@ function Swatches(props) {
 Swatches.displayName = "ColorPicker.Swatches";
 function SliderMeta({ label, className, ...rest }) {
   const slider = React2.useContext(ColorSliderStateContext);
+  const channel = React2.useContext(SliderChannelContext);
+  const { locale } = useLocale();
   return /* @__PURE__ */ jsxs("div", { ...rest, className: cx(ColorPicker_default.sliderHeader, className), children: [
     /* @__PURE__ */ jsx("span", { className: ColorPicker_default.sliderLabel, children: label }),
-    /* @__PURE__ */ jsx("output", { className: ColorPicker_default.sliderValue, "aria-live": "off", children: slider?.getThumbValueLabel(0) })
+    /* @__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, ...rest }) {
+function HexInput({ label, hint, error, focusRing, children, ...rest }) {
   const { labels } = useColorPickerContext();
   const { inputRef, text, setText, commit } = useColorDraft(toHexText, parseHex);
   return /* @__PURE__ */ jsx(
@@ -358,19 +370,22 @@ function HexInput({ label, hint, error, focusRing, ...rest }) {
       hint,
       error,
       focusRing,
-      children: /* @__PURE__ */ jsx(Input.Wrapper, { children: /* @__PURE__ */ jsx(
-        Input.Field,
-        {
-          ref: inputRef,
-          autoCapitalize: "off",
-          autoCorrect: "off",
-          spellCheck: false,
-          value: text,
-          onBlur: commit,
-          onChange: (e) => setText(e.target.value),
-          onKeyDown: onCommitKeyDown(commit)
-        }
-      ) })
+      children: /* @__PURE__ */ jsxs(Input.Wrapper, { children: [
+        /* @__PURE__ */ jsx(
+          Input.Field,
+          {
+            ref: inputRef,
+            autoCapitalize: "off",
+            autoCorrect: "off",
+            spellCheck: false,
+            value: text,
+            onBlur: commit,
+            onChange: (e) => setText(e.target.value),
+            onKeyDown: onCommitKeyDown(commit)
+          }
+        ),
+        children
+      ] })
     }
   );
 }
@@ -419,10 +434,24 @@ function TriggerSwatch(props) {
   return /* @__PURE__ */ jsx(SwatchChip, { ...props, value: state.color.toString("css") });
 }
 TriggerSwatch.displayName = "ColorPicker.TriggerSwatch";
+function SwatchButton({ className, ...rest }) {
+  const { labels } = useColorPickerContext();
+  return /* @__PURE__ */ jsx(
+    FieldActionButton,
+    {
+      ...rest,
+      label: labels.palette,
+      className: cx(ColorPicker_default.swatchButton, className),
+      children: /* @__PURE__ */ jsx(TriggerSwatch, {})
+    }
+  );
+}
+SwatchButton.displayName = "ColorPicker.SwatchButton";
 var ColorPicker = {
   Root: ColorPickerRoot,
   Panel,
   TriggerSwatch,
+  SwatchButton,
   FormatSelect,
   ChannelStrip,
   HexInput,

package/dist/color-picker.d.ts

@@ -5,5 +5,5 @@
  */
 export type { ColorFieldLabels, ColorFieldProps } from "./components/color-field/ColorField";
 export { ColorField } from "./components/color-field/ColorField";
-export type { ColorPickerAreaProps, ColorPickerChannelStripProps, ColorPickerColorValue, ColorPickerEyeDropperButtonProps, ColorPickerFormatSelectProps, ColorPickerHexInputProps, ColorPickerLabels, ColorPickerPanelProps, ColorPickerRootProps, ColorPickerSliderMetaProps, ColorPickerSliderProps, ColorPickerSliderTrackProps, ColorPickerSwatchesProps, ColorPickerThumbProps, ColorPickerTriggerSwatchProps, ColorValueFormat, } from "./components/color-picker/ColorPicker";
+export type { ColorPickerAreaProps, ColorPickerChannelStripProps, ColorPickerColorValue, ColorPickerEyeDropperButtonProps, ColorPickerFormatSelectProps, ColorPickerHexInputProps, ColorPickerLabels, ColorPickerPanelProps, ColorPickerRootProps, ColorPickerSliderMetaProps, ColorPickerSliderProps, ColorPickerSliderTrackProps, ColorPickerSwatchButtonProps, ColorPickerSwatchesProps, ColorPickerThumbProps, ColorPickerTriggerSwatchProps, ColorValueFormat, } from "./components/color-picker/ColorPicker";
 export { ColorPicker, parseColor } from "./components/color-picker/ColorPicker";

package/dist/color-picker.js

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

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

@@ -18,7 +18,7 @@ export type BreadcrumbRootProps = React.HTMLAttributes<HTMLElement> & {
     labels?: Partial<BreadcrumbLabels>;
     ref?: React.Ref<HTMLElement>;
 };
-declare function BreadcrumbRoot({ children, className, size: sizeProp, labels: labelsProp, ...rest }: BreadcrumbRootProps): import("react/jsx-runtime").JSX.Element;
+declare function BreadcrumbRoot({ children, className, size: sizeProp, labels: labelsProp, ref, ...rest }: BreadcrumbRootProps): import("react/jsx-runtime").JSX.Element;
 declare namespace BreadcrumbRoot {
     var displayName: string;
 }

package/dist/components/chart-frame/ChartFrame.d.ts

@@ -166,7 +166,7 @@ declare namespace ChartFrameDelta {
 }
 export type ChartFramePlotProps = Omit<React.HTMLAttributes<HTMLDivElement>, "children"> & {
     /**
-     * Height of the plot area in px. `fill` takes the free height of a stretched panel (a `PageContent.Cell` with `rows`), the default height at least.
+     * Height of the plot area in px. `fill` takes the free height of a stretched panel (a `Page.Cell` with `rows`), the default height at least.
      */
     height?: number | "fill";
     /**

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

@@ -2,7 +2,11 @@ import type * as React from "react";
 export type ChatSeparatorProps = React.HTMLAttributes<HTMLDivElement> & {
     ref?: React.Ref<HTMLDivElement>;
 };
-/** A date between messages («Сегодня», «12 марта»): a small pill that sticks while its day scrolls. */
+/**
+ * A date between messages («Сегодня», «12 марта»): a small pill that sticks while its day scrolls.
+ * An incoming bubble stands one step off the list's host, the pill one step above the bubble, so the
+ * two never share a fill while the bubbles pass under it.
+ */
 export declare function ChatSeparator({ className, children, ...rest }: ChatSeparatorProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace ChatSeparator {
     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 FieldActionButtonProps } from "../../internal/FieldAction";
 import type { FieldFocusRingProps, FieldRootDomProps } from "../../internal/FieldFrame";
 import type { ControlSize } from "../../internal/states";
 export type { Color as ColorPickerColorValue } from "react-aria-components";
@@ -23,6 +24,8 @@ export type ColorPickerLabels = {
     eyeDropper: string;
     /** Hex field of `ChannelStrip` and the default `HexInput` label. */
     hex: string;
+    /** `ColorPicker.SwatchButton`: its name and tooltip. */
+    palette: string;
     hue: string;
     saturation: string;
     lightness: string;
@@ -83,6 +86,10 @@ export type ColorPickerHexInputProps = FieldRootDomProps & FieldFocusRingProps &
      * Error message in the hint slot; marks the field invalid.
      */
     error?: React.ReactNode;
+    /**
+     * End segments of the field box after the value: `ColorPicker.SwatchButton` (in a `Popover.Trigger`), so the hex and its swatch read as one field.
+     */
+    children?: React.ReactNode;
 };
 export { parseColor };
 /** Hex text of a color: `#rrggbb`, or `#rrggbbaa` when it is not opaque. */
@@ -158,7 +165,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, ...rest }: ColorPickerHexInputProps): import("react/jsx-runtime").JSX.Element;
+declare function HexInput({ label, hint, error, focusRing, children, ...rest }: ColorPickerHexInputProps): import("react/jsx-runtime").JSX.Element;
 declare namespace HexInput {
     var displayName: string;
 }
@@ -181,10 +188,20 @@ declare function TriggerSwatch(props: ColorPickerTriggerSwatchProps): import("re
 declare namespace TriggerSwatch {
     var displayName: string;
 }
+export type ColorPickerSwatchButtonProps = Omit<FieldActionButtonProps, "label" | "children" | "asChild">;
+/**
+ * The current color as a button segment at the end of `HexInput` (named `labels.palette`, with a
+ * tooltip): the hex and its swatch read as one field. Wrap it in `Popover.Trigger` to open a panel.
+ */
+declare function SwatchButton({ className, ...rest }: ColorPickerSwatchButtonProps): import("react/jsx-runtime").JSX.Element;
+declare namespace SwatchButton {
+    var displayName: string;
+}
 export declare const ColorPicker: {
     Root: typeof ColorPickerRoot;
     Panel: typeof Panel;
     TriggerSwatch: typeof TriggerSwatch;
+    SwatchButton: typeof SwatchButton;
     FormatSelect: typeof FormatSelect;
     ChannelStrip: typeof ChannelStrip;
     HexInput: typeof HexInput;

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

@@ -184,7 +184,7 @@ export type DataTableProps<Row> = Omit<React.HTMLAttributes<HTMLDivElement>, "ch
      */
     scrollHeight?: number | string;
     /**
-     * The table spans its container; `false` sizes it by its content.
+     * The table spans its container; `false` sizes the table and its surface by its content (up to the container's width, then it scrolls).
      */
     fullWidth?: boolean;
     /**

package/dist/components/index.d.ts

@@ -102,10 +102,6 @@ export type { NotificationAction, NotificationCardProps, NotificationDismissReas
 export { NotificationCard } from "./notification/Notification";
 export type { NotificationProviderProps } from "./notification/NotificationStore";
 export { NotificationProvider, useNotifications, } from "./notification/NotificationStore";
-export type { PageContentActionsProps, PageContentBackButtonProps, PageContentBodyProps, PageContentCellProps, PageContentCellRows, PageContentCellSpan, PageContentDescriptionMeasure, PageContentDescriptionProps, PageContentGridProps, PageContentHeaderProps, PageContentLabels, PageContentMaxWidth, PageContentPanelKind, PageContentPanelProps, PageContentRootAs, PageContentRootProps, PageContentSectionLayout, PageContentSectionProps, PageContentSplitProps, PageContentTitleProps, } from "./page-content/PageContent";
-export { PageContent } from "./page-content/PageContent";
-export type { PageToolbarActionsProps, PageToolbarChipsProps, PageToolbarRootProps, PageToolbarSectionsProps, PageToolbarToolsProps, PageToolbarViewProps, } from "./page-toolbar/PageToolbar";
-export { PageToolbar } from "./page-toolbar/PageToolbar";
 export type { PaginationLabels, PaginationProps } from "./pagination/Pagination";
 export { Pagination } from "./pagination/Pagination";
 export type { PopoverActionsProps, PopoverAnchorProps, PopoverCloseProps, PopoverContentProps, PopoverDescriptionProps, PopoverHeaderProps, PopoverRootProps, PopoverTitleProps, PopoverTriggerProps, } from "./popover/Popover";

package/dist/components/pagination/Pagination.d.ts

@@ -42,9 +42,13 @@ export type PaginationProps = Omit<React.HTMLAttributes<HTMLElement>, "defaultVa
      * Always arrows + «current / total» instead of numbers. Without it the nav fills its parent and shows that view only below 22rem of its width.
      */
     compact?: boolean;
+    /**
+     * Where the page numbers sit in the width the nav fills: centred under a list, `end` beside a range line (the DataTable footer). The compact view keeps its arrows at the edges.
+     */
+    align?: "start" | "center" | "end";
     /**
      * Built-in strings, see Labels.
      */
     labels?: Partial<PaginationLabels>;
 };
-export declare function Pagination({ value, defaultValue, onValueChange, totalPages, siblingCount, size: sizeProp, compact, labels: labelsProp, className, ...rest }: PaginationProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | null;
+export declare function Pagination({ value, defaultValue, onValueChange, totalPages, siblingCount, size: sizeProp, compact, align, labels: labelsProp, className, ...rest }: PaginationProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | null;

package/dist/components/popover/Popover.d.ts

@@ -81,7 +81,7 @@ export type PopoverContentProps = Omit<React.HTMLAttributes<HTMLDivElement>, "ro
      */
     size?: ControlSize;
     /**
-     * `auto`: by content, from the panel minimum to twice that. `trigger`: exactly the trigger's width, below the minimum too. `content`: what the content needs, within the viewport. A sheet is full width.
+     * `auto`: by content, panel minimum to twice that. `trigger`: exactly the trigger. `min-trigger`: `auto`, never narrower than the trigger. `content`: what the content needs. A sheet is full width.
      */
     width?: FloatingWidth;
     /**

package/dist/components/slider/Slider.d.ts

@@ -43,7 +43,7 @@ export type SliderProps = FieldRootDomProps & FieldFrameProps & {
      */
     disabled?: boolean;
     /**
-     * `aria-invalid` on the range input and a danger focus ring on the thumb. A non-empty `error` implies it.
+     * `aria-invalid` on the range input, a danger fill (over any `tone`) and a danger focus ring on the thumb. A non-empty `error` implies it.
      */
     invalid?: boolean;
     /**

package/dist/components/smart-filter/SmartFilter.d.ts

@@ -97,7 +97,7 @@ export type SmartFilterLabels = {
     rangeTo: string;
 };
 export declare const SMART_FILTER_LABELS: SmartFilterLabels;
-export type SmartFilterRootProps = Omit<React.HTMLAttributes<HTMLDivElement>, "children" | "defaultValue" | "onChange"> & {
+export type SmartFilterRootProps = {
     /**
      * Fields of this screen, in display order; empty — only the search. Pass a stable reference.
      */
@@ -139,12 +139,11 @@ export type SmartFilterRootProps = Omit<React.HTMLAttributes<HTMLDivElement>, "c
      */
     labels?: Partial<SmartFilterLabels>;
     /**
-     * `SmartFilter.Toolbar` and `SmartFilter.Chips`, anywhere inside.
+     * `SmartFilter.Toolbar` and `SmartFilter.Chips`, anywhere inside — in a page bar the Root wraps `Page.Root`.
      */
     children: React.ReactNode;
-    ref?: React.Ref<HTMLDivElement>;
 };
-declare function SmartFilterRoot({ fields, value, defaultValue, onValueChange, search, defaultSearch, onSearchChange, size: sizeProp, collapsedLimit, labels, className, children, ref, ...rest }: SmartFilterRootProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+declare function SmartFilterRoot({ fields, value, defaultValue, onValueChange, search, defaultSearch, onSearchChange, size: sizeProp, collapsedLimit, labels, children, }: SmartFilterRootProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
 declare namespace SmartFilterRoot {
     var displayName: string;
 }
@@ -155,7 +154,7 @@ export type SmartFilterToolbarProps = Omit<React.HTMLAttributes<HTMLDivElement>,
     searchable?: boolean;
     ref?: React.Ref<HTMLDivElement>;
 };
-declare function SmartFilterToolbar({ searchable, className, ...rest }: SmartFilterToolbarProps): import("react/jsx-runtime").JSX.Element;
+declare function SmartFilterToolbar({ searchable, className, ref, ...rest }: SmartFilterToolbarProps): import("react/jsx-runtime").JSX.Element;
 declare namespace SmartFilterToolbar {
     var displayName: string;
 }

package/dist/icon-set.js

@@ -410,7 +410,7 @@ import {
   Youtube,
   Zap,
   ZapOff
-} from "./chunks/chunk-A7OQWH6R.js";
+} from "./chunks/chunk-PRP4B6OG.js";
 import {
   Activity,
   ArrowDown,
@@ -527,7 +527,7 @@ import {
   X,
   ZoomIn,
   ZoomOut
-} from "./chunks/chunk-U3Q2I3MY.js";
+} from "./chunks/chunk-2ODXLPW3.js";
 export {
   AArrowDown as AArrowDownIcon,
   AArrowUp as AArrowUpIcon,