prime-ui-kit 0.9.2 → 0.9.3

package/dist/chunks/{chunk-IQELQNMR.js → chunk-U5SR2LZR.js}

@@ -4,11 +4,12 @@ import {
   Icon,
   Input,
   Select,
+  SurfaceDepthProvider,
   SwatchChip,
   createComponentContext,
   cx,
   fieldSurfaceClass
-} from "./chunk-ZEFCDEEQ.js";
+} from "./chunk-6JTZOA5I.js";
 
 // src/components/color-picker/ColorPicker.tsx
 import * as React from "react";
@@ -60,7 +61,7 @@ var COLOR_PICKER_LABELS = {
   green: "\u0417\u0435\u043B\u0451\u043D\u044B\u0439, 0\u2013255",
   blue: "\u0421\u0438\u043D\u0438\u0439, 0\u2013255"
 };
-var CHECKER_BG = "repeating-conic-gradient(var(--prime-color-bg-surface) 0deg 90deg, var(--prime-color-fill-strong) 90deg 180deg) 0% 0% / var(--prime-space-2) var(--prime-space-2)";
+var CHECKER_BG = "repeating-conic-gradient(var(--prime-color-layer-current) 0deg 90deg, var(--prime-color-fill-strong) 90deg 180deg) 0% 0% / var(--prime-space-2) var(--prime-space-2)";
 var [ColorPickerProvider, useColorPickerContext] = createComponentContext("ColorPicker");
 function useColorState() {
   const state = React.useContext(ColorPickerStateContext);
@@ -194,8 +195,20 @@ function ChannelStrip({ className, focusRing = true, ...rest }) {
     }
   );
 }
-function Panel({ surface = "none", className, ...rest }) {
-  return /* @__PURE__ */ jsx("div", { className: cx(ColorPicker_default.panel, className), "data-surface": surface, ...rest });
+function Panel({ surface = "none", className, children, ...rest }) {
+  if (surface === "none") {
+    return /* @__PURE__ */ jsx("div", { className: cx(ColorPicker_default.panel, className), "data-surface": surface, ...rest, children });
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cx(ColorPicker_default.panel, className),
+      "data-surface": surface,
+      "data-depth": "floating",
+      ...rest,
+      children: /* @__PURE__ */ jsx(SurfaceDepthProvider, { value: "floating", children })
+    }
+  );
 }
 Panel.displayName = "ColorPicker.Panel";
 function ColorPickerRoot({

package/dist/color-picker.js

@@ -1,8 +1,8 @@
 import {
   ColorPicker,
   parseColor
-} from "./chunks/chunk-IQELQNMR.js";
-import "./chunks/chunk-ZEFCDEEQ.js";
+} from "./chunks/chunk-U5SR2LZR.js";
+import "./chunks/chunk-6JTZOA5I.js";
 export {
   ColorPicker,
   parseColor

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

@@ -1,4 +1,4 @@
-import type * as React from "react";
+import * as React from "react";
 import type { ControlSize, Tone, Variant } from "@/internal/states";
 /**
  * `tone="inherit"` takes the host's text color (a close button on a solid Banner): fills are a
@@ -14,11 +14,28 @@ type ButtonColorProps = {
     /** Takes the host's text color; for actions placed on a colored host. */
     tone: "inherit";
 };
+export type ButtonLabels = {
+    /** Description of a hold-to-confirm button for assistive tech. */
+    holdHint: string;
+};
 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;
+    /**
+     * Progress of a long action started by this button, `0…1`: a fill grows inside the button and
+     * `aria-busy` is set. The label carries the number («Скачивание 42%»). Remove it when done.
+     */
+    progress?: number;
+    /**
+     * The action needs a held press: the fill runs for 1.2 s and `onConfirm` fires at its end.
+     * Releasing earlier rolls the fill back and does nothing. Space and Enter hold too.
+     */
+    holdToConfirm?: boolean;
+    /** Fires when a `holdToConfirm` press completes; the action goes here, not in `onClick`. */
+    onConfirm?: () => void;
+    labels?: Partial<ButtonLabels>;
     /**
      * Merges Button props onto its single child element instead of rendering `<button>`.
      * `disabled` / `loading` become `aria-disabled` (a link has no native `disabled`), `type` is
@@ -27,7 +44,7 @@ export type ButtonRootProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>
     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 function ButtonRoot({ children, className, variant, tone, size: sizeProp, fullWidth, type, loading, progress, holdToConfirm, onConfirm, labels, disabled, asChild, onClick, ref, ...rest }: ButtonRootProps): import("react/jsx-runtime").JSX.Element;
 declare namespace ButtonRoot {
     var displayName: string;
 }

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

@@ -13,7 +13,7 @@ export type CardRootProps = DivProps & {
     /** No raised shadow: a flat tile on the page (dense grids where shadows add noise). */
     flat?: boolean;
 };
-declare function CardRoot({ variant, flat, className, ...rest }: CardRootProps): import("react/jsx-runtime").JSX.Element;
+declare function CardRoot({ variant, flat, className, children, ...rest }: CardRootProps): import("react/jsx-runtime").JSX.Element;
 declare namespace CardRoot {
     var displayName: string;
 }

package/dist/components/code-block/CodeBlock.d.ts

@@ -1,7 +1,7 @@
 import * as React from "react";
 import type { Variant } from "@/internal/states";
 export type CodeBlockColorScheme = "light" | "dark";
-/** `soft` — sunken panel with padding and the `code` text role; `ghost` — bare `pre` that inherits type and background from its host. */
+/** `soft` — filled panel with padding and the `code` text role; `ghost` — bare `pre` that inherits type and background from its host. */
 export type CodeBlockVariant = Extract<Variant, "soft" | "ghost">;
 export type CodeBlockProps = Omit<React.HTMLAttributes<HTMLPreElement>, "children" | "dangerouslySetInnerHTML"> & {
     /** TS/TSX source; highlighted with `highlightTsxHtml`. */

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

@@ -80,7 +80,7 @@ export type ColorPickerPanelProps = React.HTMLAttributes<HTMLDivElement> & {
     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 function Panel({ surface, className, children, ...rest }: ColorPickerPanelProps): import("react/jsx-runtime").JSX.Element;
 declare namespace Panel {
     var displayName: string;
 }

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

@@ -33,13 +33,15 @@ type DataTableRowProps<Row> = {
     expandable: boolean;
     expanded: boolean;
     animate: boolean;
+    /** A sub-row of a row that is collapsing: it folds away before it unmounts. */
+    folding?: boolean;
     /** The detail panel opened by the latest expand: it drops in. */
     detailAnimate: boolean;
     selected: boolean;
     /** Ids of the sub-rows the toggle controls (while expanded). */
     childControls: string;
 };
-declare function DataTableRowImpl<Row>({ shared, row, rowKey, index, depth, expandable, expanded, animate, detailAnimate, selected, childControls, }: DataTableRowProps<Row>): import("react/jsx-runtime").JSX.Element;
+declare function DataTableRowImpl<Row>({ shared, row, rowKey, index, depth, expandable, expanded, animate, folding, detailAnimate, selected, childControls, }: DataTableRowProps<Row>): import("react/jsx-runtime").JSX.Element;
 /** A body row (plus its detail panel); re-renders only when its own props change. */
 export declare const DataTableRow: typeof DataTableRowImpl;
 type MeasureBodyProps<Row> = {

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

@@ -16,6 +16,8 @@ export type FlatRow<Row> = {
     expanded: boolean;
     /** Mounted by the latest expand, or newly added to `rows`: plays the enter animation. */
     animate: boolean;
+    /** A sub-row of a row that is collapsing: still drawn while it folds away. */
+    folding: boolean;
 };
 export type MeasureRow<Row> = {
     row: Row;
@@ -35,6 +37,8 @@ export type FlattenOptions<Row> = {
     withDetail: boolean;
     isRowExpandable?: (row: Row) => boolean;
     expanded: ReadonlySet<React.Key>;
+    /** Rows collapsed a moment ago: their sub-rows stay drawn (folding) until the fold ends. */
+    closing?: ReadonlySet<React.Key>;
     /** Top-level rows newly added to the data. */
     arrived: ReadonlySet<React.Key>;
     /** Row whose latest expand mounted new rows: only those animate in. */

package/dist/components/digit-input/DigitInput.d.ts

@@ -34,10 +34,15 @@ export type DigitInputProps = FieldRootDomProps & FieldFrameProps & {
     disabled?: boolean;
     /** Invalid state: danger ring on every cell. A non-empty `error` implies it. */
     invalid?: boolean;
+    /**
+     * The code was accepted (after the server checked it): the cells turn success one after
+     * another. Say it in words too (`hint`), never by color alone.
+     */
+    success?: boolean;
     /** Id of the first cell (the label points at it); generated when omitted. */
     id?: string;
     "aria-describedby"?: string;
     labels?: Partial<DigitInputLabels>;
 };
 /** A one-time code or PIN split into cells, with the field label, hint and error. */
-export declare function DigitInput({ length, size: sizeProp, fullWidth, name, groupSize, mask, autoFocus, value: valueProp, defaultValue, onValueChange, onComplete, disabled, invalid, focusRing, label, required, optional, hint, error, id, "aria-describedby": ariaDescribedBy, labels: labelsProp, className, ...rest }: DigitInputProps): import("react/jsx-runtime").JSX.Element;
+export declare function DigitInput({ length, size: sizeProp, fullWidth, name, groupSize, mask, autoFocus, value: valueProp, defaultValue, onValueChange, onComplete, disabled, invalid, success, focusRing, label, required, optional, hint, error, id, "aria-describedby": ariaDescribedBy, labels: labelsProp, className, ...rest }: DigitInputProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/index.d.ts

@@ -11,7 +11,7 @@ export type { BannerActionsProps, BannerContentProps, BannerDescriptionProps, Ba
 export { Banner } from "./banner/Banner";
 export type { BreadcrumbEllipsisProps, BreadcrumbItemProps, BreadcrumbLabels, BreadcrumbRootProps, } from "./breadcrumb/Breadcrumb";
 export { Breadcrumb } from "./breadcrumb/Breadcrumb";
-export type { ButtonIconProps, ButtonRootProps } from "./button/Button";
+export type { ButtonIconProps, ButtonLabels, ButtonRootProps } from "./button/Button";
 export { Button } from "./button/Button";
 export type { ButtonGroupIconProps, ButtonGroupItemProps, ButtonGroupOrientation, ButtonGroupRootProps, } from "./button-group/ButtonGroup";
 export { ButtonGroup } from "./button-group/ButtonGroup";
@@ -53,6 +53,7 @@ export type { HintIconProps, HintRootProps } from "./hint/Hint";
 export { Hint } from "./hint/Hint";
 export type { InputAffixProps, InputClearButtonProps, InputCounterProps, InputFieldProps, InputIconProps, InputInlineAffixProps, InputLabels, InputRootProps, InputWrapperProps, } from "./input/Input";
 export { Input } from "./input/Input";
+export { getPasswordStrength, type PasswordStrength } from "./input/passwordStrength";
 export type { KanbanColumn, KanbanItemBadgesProps, KanbanItemCountProps, KanbanItemDescriptionProps, KanbanItemFooterProps, KanbanItemProps, KanbanItemTitleProps, KanbanLabels, KanbanMove, KanbanRootProps, KanbanValue, } from "./kanban/Kanban";
 export { Kanban } from "./kanban/Kanban";
 export type { KbdProps } from "./kbd/Kbd";
@@ -97,6 +98,8 @@ export type { SliderLabels, SliderProps } from "./slider/Slider";
 export { Slider } from "./slider/Slider";
 export type { SmartFilterChipsProps, SmartFilterField, SmartFilterLabels, SmartFilterMode, SmartFilterOption, SmartFilterRootProps, SmartFilterSelection, SmartFilterToolbarProps, SmartFilterValue, } from "./smart-filter/SmartFilter";
 export { matchesSmartFilter, resolveSmartFilterValues, SmartFilter, } from "./smart-filter/SmartFilter";
+export type { SparklineLabels, SparklinePoint, SparklineProps, } from "./sparkline/Sparkline";
+export { Sparkline } from "./sparkline/Sparkline";
 export type { SpinnerLabels, SpinnerProps } from "./spinner/Spinner";
 export { Spinner } from "./spinner/Spinner";
 export type { StepperArrowProps, StepperContentProps, StepperDescriptionProps, StepperIndicatorProps, StepperItemProps, StepperItemStatus, StepperRootProps, StepperTitleProps, } from "./stepper/Stepper";

package/dist/components/input/Input.d.ts

@@ -1,6 +1,7 @@
 import * as React from "react";
 import { type FieldRootDomProps } from "@/internal/FieldFrame";
 import type { ControlSize } from "@/internal/states";
+import { type PasswordStrength } from "./passwordStrength";
 export type InputLabels = {
     /** Muted marker after the label when `optional`. */
     optional: string;
@@ -8,6 +9,13 @@ export type InputLabels = {
     clear: string;
     /** Screen-reader text of `Input.Counter`; `{current}` and `{max}` are replaced. */
     counter: string;
+    /** Accessible name of the `strength` meter. */
+    strength: string;
+    /** Visible words of the four `strength` levels. */
+    strengthWeak: string;
+    strengthEasy: string;
+    strengthMedium: string;
+    strengthHard: string;
 };
 export type InputRootProps = FieldRootDomProps & {
     /** Tier. Default: the tier of the surrounding control (a form, a panel), else `m`. */
@@ -34,10 +42,17 @@ export type InputRootProps = FieldRootDomProps & {
     reserveSupportRow?: boolean;
     /** Explicit id for the underlying <input>; auto-generated if omitted. */
     id?: string;
+    /**
+     * A password strength meter under the field: four steps that fill as the value grows stronger,
+     * with the level word on the right of the support row. Use on new-password fields.
+     */
+    strength?: boolean;
+    /** Replaces the kit's estimate (`getPasswordStrength`): return 0 (empty) … 4 (hard). */
+    getStrength?: (value: string) => PasswordStrength;
     labels?: Partial<InputLabels>;
     children: React.ReactNode;
 };
-declare function InputRoot({ size: sizeProp, invalid, focusRing, label, required, optional, hint, error, counter, reserveSupportRow, id, labels: labelsProp, children, className, ...rest }: InputRootProps): import("react/jsx-runtime").JSX.Element;
+declare function InputRoot({ size: sizeProp, invalid, focusRing, label, required, optional, hint, error, counter, reserveSupportRow, id, strength, getStrength, labels: labelsProp, children, className, ...rest }: InputRootProps): import("react/jsx-runtime").JSX.Element;
 declare namespace InputRoot {
     var displayName: string;
 }

package/dist/components/input/passwordStrength.d.ts

@@ -0,0 +1,9 @@
+/** A password level: 0 — empty, 1 — weak, 2 — easy, 3 — medium, 4 — hard. */
+export type PasswordStrength = 0 | 1 | 2 | 3 | 4;
+/**
+ * The kit's default estimate. Every trait adds one point on its own, in any order: lowercase
+ * letters, uppercase letters, digits, symbols, 10+ characters, 14+ characters. Points 0–2 are weak,
+ * 3 easy, 4 medium, 5+ hard; a password shorter than 8 characters is at most easy. A quick hint
+ * for the person typing, not a security check — the server decides what it accepts.
+ */
+export declare function getPasswordStrength(value: string): PasswordStrength;

package/dist/components/progress-bar/ProgressBar.d.ts

@@ -13,9 +13,24 @@ export type ProgressBarProps = Omit<React.HTMLAttributes<HTMLDivElement>, "child
     /** Shows the rounded filled percentage at the end of the label row. */
     showValue?: boolean;
     ref?: React.Ref<HTMLDivElement>;
-} & ProgressModeProps;
+} & ProgressBarModeProps;
+/** Value mode may draw its scale as steps; segments already are parts. */
+type ProgressBarModeProps = (Extract<ProgressModeProps, {
+    value: number;
+}> & {
+    /**
+     * Draws the scale as `max` equal cells (2–12), each filled whole: a level out of a few
+     * (password strength, a step of onboarding). `value` rounds to a whole cell.
+     */
+    steps?: boolean;
+}) | (Extract<ProgressModeProps, {
+    segments: unknown;
+}> & {
+    steps?: never;
+});
 /**
  * A linear progress line: a single `value` (native `<progress>` for assistive tech) or
  * `segments` — parts of a whole in one bar (`role="group"` named by the distribution).
  */
 export declare function ProgressBar(props: ProgressBarProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/sparkline/Sparkline.d.ts

@@ -0,0 +1,26 @@
+import * as React from "react";
+export type SparklinePoint = {
+    /** Name of the point on the axis: a date, a week, a month («8 окт»). */
+    label: string;
+    value: number;
+};
+export type SparklineLabels = {
+    /** Spoken value of the chosen point; `{label}` and `{value}` are replaced. */
+    point: string;
+};
+export type SparklineProps = Omit<React.HTMLAttributes<HTMLDivElement>, "children"> & {
+    /** Points in order, oldest first; at least two draw a line. */
+    data: SparklinePoint[];
+    /** Visible title above the value and the accessible name of the chart. */
+    label: string;
+    /** Display of a value («312 400 ₽»). Default: the number with Russian digit groups. */
+    formatValue?: (value: number) => string;
+    labels?: Partial<SparklineLabels>;
+    ref?: React.Ref<HTMLDivElement>;
+};
+/**
+ * A small line chart with its headline: the latest value, its change against the point before and
+ * its date. Scrubbing (pointer, touch, or the arrow keys on the chart) shows any point; the header
+ * follows instantly, the trend arrow turns, and leaving glides the cursor back to the latest point.
+ */
+export declare function Sparkline({ data, label, formatValue, labels: labelsProp, className, ref, ...rest }: SparklineProps): import("react/jsx-runtime").JSX.Element;

package/dist/hooks/useEdgeOverflow.d.ts

@@ -8,5 +8,9 @@ export type EdgeOverflow = {
  * (`ScrollContainer` `fade`, the DataTable edge cue). Measured at most once per frame on scroll,
  * on resize of the region or any child, and when children are added. RTL-aware: the start is the
  * inline start of the region.
+ *
+ * It also writes how far the hidden content reaches on each side to the region itself
+ * (`--edge-start` / `--edge-end`, px), so a fade can be as deep as that distance at most: it grows
+ * as the region scrolls away from an edge and melts as it comes back, instead of switching.
  */
 export declare function useEdgeOverflow(ref: React.RefObject<HTMLElement | null>, enabled: boolean, horizontal: boolean): EdgeOverflow;

package/dist/icons/registry.d.ts

@@ -73,6 +73,8 @@ export declare const iconRegistry: {
     readonly "status.locked": import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
     readonly "status.offline": import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
     readonly "status.success": import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+    /** A rising trend; a falling one is the same arrow turned half a turn (it rotates between them). */
+    readonly "status.trendUp": import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
     readonly "status.warning": import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
     readonly "theme.dark": import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
     readonly "theme.light": import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;