prime-ui-kit 0.9.1 → 0.9.3

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

@@ -4,11 +4,12 @@ import {
   Icon,
   Input,
   Select,
+  SurfaceDepthProvider,
   SwatchChip,
   createComponentContext,
   cx,
   fieldSurfaceClass
-} from "./chunk-NHOWNIAR.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-KCQFOORX.js";
-import "./chunks/chunk-NHOWNIAR.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/DataTable.d.ts

@@ -29,6 +29,11 @@ export type DataTableProps<Row> = Omit<React.HTMLAttributes<HTMLDivElement>, "ch
     /** The outer card-fill `<div>`. */
     ref?: React.Ref<HTMLDivElement>;
     columns: DataTableColumn<Row>[];
+    /**
+     * Ids of columns not rendered (head, body, skeleton, state rows). A column with
+     * `hideable: false` stays. The consumer owns the list and the control that changes it.
+     */
+    hiddenColumns?: string[];
     rows: Row[];
     size?: ControlSize;
     className?: string;
@@ -101,4 +106,4 @@ export type DataTableProps<Row> = Omit<React.HTMLAttributes<HTMLDivElement>, "ch
     /** Panel above the table (search, filters, actions). Wraps on narrow widths. */
     toolbar?: React.ReactNode;
 };
-export declare function DataTable<Row>({ columns, rows, size, className, showHeader, stickyHeader, stickyFirstColumn, getRowKey, onRowClick, 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, getRowChildren, renderExpanded, isRowExpandable, expanded, defaultExpanded, onExpandedChange, error, loadingRows, toolbar, ref, ...rest }: DataTableProps<Row>): import("react/jsx-runtime").JSX.Element;
+export declare function DataTable<Row>({ columns: allColumns, hiddenColumns, rows, size, className, showHeader, stickyHeader, stickyFirstColumn, getRowKey, onRowClick, 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, getRowChildren, renderExpanded, isRowExpandable, expanded, defaultExpanded, onExpandedChange, error, loadingRows, toolbar, ref, ...rest }: DataTableProps<Row>): import("react/jsx-runtime").JSX.Element;

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/data-table/types.d.ts

@@ -32,4 +32,9 @@ export type DataTableColumn<Row> = {
      * such a column the table fills its container instead of growing to its content width.
      */
     grow?: boolean;
+    /**
+     * The column can be hidden through the table's `hiddenColumns`. Default `true`; `false` for the
+     * key column that names the row — it stays even when its id is listed.
+     */
+    hideable?: boolean;
 };

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/dnd/Dnd.d.ts

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { type DragItem, type DragOutcome } from "./dragSession";
-import type { Point, Rect } from "./geometry";
+import { type Point, type Rect } from "./geometry";
 import { type DndLabels } from "./labels";
 import { type ReorderReturn } from "./useSortableList";
 export type { DragItem, DragOutcome } from "./dragSession";

package/dist/components/dnd/dragSession.d.ts

@@ -20,6 +20,11 @@ export type DragSnapshot = {
     pointerKind: PointerKind | null;
     /** The drop target the pointer is over right now, by registered id. */
     overId: string | null;
+    /**
+     * The `holdsDrop` target the drop stays aimed at while the pointer crosses empty space: the last
+     * one it was over that would take the item. Null once the pointer is over any other target.
+     */
+    heldId: string | null;
     canDrop: boolean;
     /** The rect the lifted element occupied when the drag began: the size of the gap a list opens for it. */
     origin: Rect | null;
@@ -38,11 +43,15 @@ export type DropTargetEntry = {
     id: string;
     element: HTMLElement;
     accepts: (item: DragItem) => boolean;
+    /** Keeps the drop while the pointer crosses empty space (the gutter between two lists). */
+    holdsDrop: boolean;
     enter: (item: DragItem) => void;
     /** Called on every resolved pointer position; returns whether a drop here would be accepted. */
     over: (point: Point, item: DragItem) => boolean;
     leave: () => void;
     drop: (point: Point, item: DragItem) => void;
+    /** Drops where the pointer was last over this target: the release came over empty space. */
+    dropHeld: (item: DragItem) => void;
 };
 export type DragPreview = {
     /** The element the gesture started on, cloned by the overlay. */

package/dist/components/dnd/useDropTarget.d.ts

@@ -10,6 +10,11 @@ export type DropTargetOptions<TValue, TData = unknown> = {
     canDrop?: ((value: TValue, item: DragItem<TData>) => boolean) | undefined;
     onDrop: (value: TValue, item: DragItem<TData>) => void;
     disabled?: boolean | undefined;
+    /**
+     * The drop stays aimed here while the pointer crosses empty space after leaving (the gutter
+     * between lists), and a release there drops here at the last resolved spot.
+     */
+    holdsDrop?: boolean | undefined;
     onEnter?: ((item: DragItem<TData>) => void) | undefined;
     onLeave?: (() => void) | undefined;
     /** Flashes the target once a drop lands, so the eye can follow where the item went. */

package/dist/components/dnd/useFlipList.d.ts

@@ -1,11 +1,11 @@
 /**
  * WAAPI timing from the motion tokens (`--prime-motion-duration-<token>`,
- * `--prime-motion-easing-standard`), read at animation time so theme and app overrides apply;
+ * `--prime-motion-easing-<curve>`), read at animation time so theme and app overrides apply;
  * WAAPI cannot take `var()`.
  */
-export declare function motionTiming(duration: "fast" | "base"): KeyframeAnimationOptions;
+export declare function motionTiming(duration: "fast" | "base", curve?: "standard" | "enter" | "exit"): KeyframeAnimationOptions;
 /**
- * Animates layout changes of list items from the position currently on screen. Hit testing still uses
+ * Animates layout changes of list items (`data-dnd-item`) and of the gap (`data-dnd-gap`) from the position currently on screen. Hit testing still uses
  * `layoutRect`, so visual easing never changes a drop decision.
  */
 export declare function useFlipList(container: HTMLElement | null, layoutKey: string, selector: string, enabled: boolean): void;

package/dist/components/drawer/Drawer.d.ts

@@ -1,8 +1,8 @@
-import type * as React from "react";
+import * as React from "react";
 import { DialogBody, DialogClose, DialogDescription, DialogFooter, DialogHeader, DialogIcon, DialogTitle, DialogTrigger } from "@/components/modal/DialogParts";
 import type { ControlSize } from "@/internal/states";
 export type { DialogBodyProps as DrawerBodyProps, DialogCloseProps as DrawerCloseProps, DialogDescriptionProps as DrawerDescriptionProps, DialogFooterProps as DrawerFooterProps, DialogHeaderProps as DrawerHeaderProps, DialogIconProps as DrawerIconProps, DialogTitleProps as DrawerTitleProps, DialogTriggerProps as DrawerTriggerProps, } from "@/components/modal/DialogParts";
-export type DrawerSide = "left" | "right";
+export type DrawerSide = "left" | "right" | "bottom";
 export type DrawerLabels = {
     /** `aria-label` of the header close button. */
     close: string;
@@ -13,7 +13,7 @@ export type DrawerRootProps = {
     onOpenChange?: (open: boolean) => void;
     /** Escape closes the drawer. Default `true`. */
     closeOnEscape?: boolean;
-    /** A click on the scrim closes the drawer. Default `true`. */
+    /** A click on the scrim or a swipe toward the edge closes the drawer. Default `true`. */
     closeOnOutsideClick?: boolean;
     labels?: Partial<DrawerLabels>;
     children?: React.ReactNode;
@@ -23,9 +23,12 @@ declare namespace DrawerRoot {
     var displayName: string;
 }
 export type DrawerContentProps = React.HTMLAttributes<HTMLDivElement> & {
-    /** Edge the panel slides from. Default `right`. */
+    /** Edge the panel slides from; `bottom` is a sheet with a grab handle. Default `right`. */
     side?: DrawerSide;
-    /** Panel width: `s` 360 · `m` 480 · `l` 640 · `xl` 800. Full width below 640px of viewport. */
+    /**
+     * Panel width: `s` 360 · `m` 480 · `l` 640 · `xl` 800 (a bottom sheet is centred). Full width
+     * below 640px of viewport.
+     */
     size?: Exclude<ControlSize, "xs">;
     /** Class on the full-screen scrim. */
     overlayClassName?: string;

package/dist/components/dropdown/Dropdown.d.ts

@@ -51,6 +51,22 @@ declare function DropdownItem({ onSelect, disabled, tone, className, onClick, ..
 declare namespace DropdownItem {
     var displayName: string;
 }
+export type DropdownCheckboxItemProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "type" | "role" | "onSelect" | "onChange" | "defaultChecked"> & {
+    checked?: boolean;
+    defaultChecked?: boolean;
+    onCheckedChange?: (checked: boolean) => void;
+    disabled?: boolean;
+    ref?: React.Ref<HTMLButtonElement>;
+};
+/**
+ * A toggle inside the menu (show a column, turn a filter on, pick a view): the label where an item
+ * has it and a check mark at the end while checked, `role="menuitemcheckbox"`. Toggling keeps the
+ * menu open, so several can be set in a row.
+ */
+declare function DropdownCheckboxItem({ checked: checkedProp, defaultChecked, onCheckedChange, disabled, className, onClick, children, ...rest }: DropdownCheckboxItemProps): import("react/jsx-runtime").JSX.Element;
+declare namespace DropdownCheckboxItem {
+    var displayName: string;
+}
 type DivProps = React.HTMLAttributes<HTMLDivElement> & {
     ref?: React.Ref<HTMLDivElement>;
 };
@@ -113,6 +129,7 @@ export declare const Dropdown: {
     Description: typeof DropdownDescription;
     Group: typeof DropdownGroup;
     Item: typeof DropdownItem;
+    CheckboxItem: typeof DropdownCheckboxItem;
     ItemIcon: typeof DropdownItemIcon;
     ItemShortcut: typeof DropdownItemShortcut;
     Separator: typeof DropdownSeparator;

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";
@@ -41,7 +41,7 @@ export type { DndDraggableProps, DndDropZoneProps, DndHandleProps, DndLabels, Dn
 export { Dnd } from "./dnd/Dnd";
 export { moveBefore } from "./dnd/useSortableList";
 export * from "./drawer/Drawer";
-export type { DropdownContentProps, DropdownDescriptionProps, DropdownGroupProps, DropdownHeaderProps, DropdownItemIconProps, DropdownItemProps, DropdownItemShortcutProps, DropdownRootProps, DropdownSeparatorProps, DropdownTitleProps, DropdownTriggerProps, } from "./dropdown/Dropdown";
+export type { DropdownCheckboxItemProps, DropdownContentProps, DropdownDescriptionProps, DropdownGroupProps, DropdownHeaderProps, DropdownItemIconProps, DropdownItemProps, DropdownItemShortcutProps, DropdownRootProps, DropdownSeparatorProps, DropdownTitleProps, DropdownTriggerProps, } from "./dropdown/Dropdown";
 export { Dropdown } from "./dropdown/Dropdown";
 export type { EmptyPageActionsProps, EmptyPageDescriptionProps, EmptyPageIconProps, EmptyPageRootProps, EmptyPageTitleProps, } from "./empty-page/EmptyPage";
 export { EmptyPage } from "./empty-page/EmptyPage";
@@ -53,6 +53,9 @@ 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";
 export { Kbd } from "./kbd/Kbd";
 export type { LabelDescriptionProps, LabelIconProps, LabelLabels, LabelRootProps, } from "./label/Label";
@@ -71,6 +74,8 @@ export type { NotificationProviderProps } from "./notification/NotificationStore
 export { NotificationProvider, useNotifications, } from "./notification/NotificationStore";
 export type { PageContentActionsProps, PageContentBodyProps, PageContentDescriptionMeasure, PageContentDescriptionProps, PageContentHeaderProps, PageContentMaxWidth, PageContentRootProps, PageContentSectionProps, 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";
@@ -93,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/kanban/Kanban.d.ts

@@ -0,0 +1,129 @@
+import * as React from "react";
+/** A column of the board: application data, drawn in array order. */
+export type KanbanColumn = {
+    /** Stable unique id; the key of the column in `value`. */
+    id: string;
+    /** Heading of the column. */
+    title: string;
+    /** Most cards the column holds (a WIP limit): when full it refuses cards from other columns. */
+    limit?: number;
+};
+/** Where every card stands: column id → card ids in their order. */
+export type KanbanValue = Readonly<Record<string, readonly string[]>>;
+/** One applied move: card `id` went from column `from` to column `to` (may be the same) at `index`. */
+export type KanbanMove = {
+    id: string;
+    from: string;
+    to: string;
+    index: number;
+};
+/** System strings of the board. `{token}` values are substituted. */
+export type KanbanLabels = {
+    /** Spoken name of the count badge: `{count}`. */
+    count: string;
+    /** Spoken name of the count badge of a column with a `limit`: `{count}`, `{limit}`. */
+    countLimit: string;
+    /** Text of an empty column. */
+    empty: string;
+    /** Live region: a card moved to another column from the keyboard. */
+    moved: string;
+    /** Live region: the next column refused the card (full or `canDrop`). */
+    refused: string;
+};
+export declare const defaultKanbanLabels: KanbanLabels;
+export type KanbanRootProps<T> = Omit<React.HTMLAttributes<HTMLDivElement>, "children" | "defaultValue"> & {
+    /** Columns in their order. */
+    columns: readonly KanbanColumn[];
+    /** Every card the board can show; `value` decides where each one stands. */
+    items: readonly T[];
+    /** Stable unique id of a card. */
+    getId: (item: T) => string;
+    /** Spoken by the live region. Defaults to the id. */
+    getLabel?: (item: T) => string;
+    /** Card ids per column (controlled). */
+    value?: KanbanValue;
+    /** Initial card ids per column (uncontrolled). */
+    defaultValue?: KanbanValue;
+    /** A card moved: the new placement first, then what moved. */
+    onValueChange?: (value: KanbanValue, move: KanbanMove) => void;
+    /** Renders one card; return a `Kanban.Item`. */
+    renderItem: (item: T) => React.ReactNode;
+    /** Renders the trailing actions of a column header (add a card, a menu). */
+    renderColumnActions?: (column: KanbanColumn) => React.ReactNode;
+    /** Refuses a card in a column (a workflow rule); the column turns `danger` before the release. */
+    canDrop?: (id: string, columnId: string) => boolean;
+    /** Columns show skeleton cards; the cards cross-fade in when it turns off. */
+    loading?: boolean;
+    /** No drag, no keyboard moves. */
+    disabled?: boolean;
+    labels?: Partial<KanbanLabels>;
+    ref?: React.Ref<HTMLDivElement>;
+};
+/**
+ * A board of columns: cards move within and between columns by pointer, touch (a hold) and
+ * keyboard (Alt + arrows). Mounts its own `Dnd.Root` unless one is already above it.
+ */
+declare function KanbanRoot<T>(props: KanbanRootProps<T>): import("react/jsx-runtime").JSX.Element;
+declare namespace KanbanRoot {
+    var displayName: string;
+}
+export type KanbanItemProps = Omit<React.HTMLAttributes<HTMLElement>, "id"> & {
+    /** This card cannot be dragged or moved. */
+    disabled?: boolean;
+    ref?: React.Ref<HTMLElement>;
+};
+/** One card: an `<li>` on a filled surface; drags by the whole card, moves with Alt + arrows. */
+declare function KanbanItem({ disabled, className, onKeyDown, children, ...rest }: KanbanItemProps): import("react/jsx-runtime").JSX.Element;
+declare namespace KanbanItem {
+    var displayName: string;
+}
+export type KanbanItemTitleProps = React.HTMLAttributes<HTMLSpanElement> & {
+    ref?: React.Ref<HTMLSpanElement>;
+};
+/** The card title: medium body text, wraps up to three lines. */
+declare function KanbanItemTitle({ className, ...rest }: KanbanItemTitleProps): import("react/jsx-runtime").JSX.Element;
+declare namespace KanbanItemTitle {
+    var displayName: string;
+}
+export type KanbanItemDescriptionProps = React.HTMLAttributes<HTMLSpanElement> & {
+    ref?: React.Ref<HTMLSpanElement>;
+};
+/** The muted meta line: id, due date. */
+declare function KanbanItemDescription({ className, ...rest }: KanbanItemDescriptionProps): import("react/jsx-runtime").JSX.Element;
+declare namespace KanbanItemDescription {
+    var displayName: string;
+}
+export type KanbanItemBadgesProps = React.HTMLAttributes<HTMLDivElement> & {
+    ref?: React.Ref<HTMLDivElement>;
+};
+/** A wrapping row of `Badge`s: labels, priority. */
+declare function KanbanItemBadges({ className, ...rest }: KanbanItemBadgesProps): import("react/jsx-runtime").JSX.Element;
+declare namespace KanbanItemBadges {
+    var displayName: string;
+}
+export type KanbanItemFooterProps = React.HTMLAttributes<HTMLDivElement> & {
+    ref?: React.Ref<HTMLDivElement>;
+};
+/** The bottom row: `Kanban.ItemCount`s at the start, anything else (an assignee) at the end. */
+declare function KanbanItemFooter({ className, ...rest }: KanbanItemFooterProps): import("react/jsx-runtime").JSX.Element;
+declare namespace KanbanItemFooter {
+    var displayName: string;
+}
+export type KanbanItemCountProps = React.HTMLAttributes<HTMLSpanElement> & {
+    ref?: React.Ref<HTMLSpanElement>;
+};
+/** A small muted counter with an icon (comments, attachments, subtasks). */
+declare function KanbanItemCount({ className, ...rest }: KanbanItemCountProps): import("react/jsx-runtime").JSX.Element;
+declare namespace KanbanItemCount {
+    var displayName: string;
+}
+export declare const Kanban: {
+    Root: typeof KanbanRoot;
+    Item: typeof KanbanItem;
+    ItemTitle: typeof KanbanItemTitle;
+    ItemDescription: typeof KanbanItemDescription;
+    ItemBadges: typeof KanbanItemBadges;
+    ItemFooter: typeof KanbanItemFooter;
+    ItemCount: typeof KanbanItemCount;
+};
+export {};

package/dist/components/modal/Modal.d.ts

@@ -12,7 +12,10 @@ export type ModalRootProps = {
     onOpenChange?: (open: boolean) => void;
     /** Escape closes the dialog. Default `true`. */
     closeOnEscape?: boolean;
-    /** A click on the scrim closes the dialog. Default `true`; turn it off for destructive confirms. */
+    /**
+     * A click on the scrim (or, on a narrow viewport, a swipe down) closes the dialog. Default
+     * `true`; turn it off for destructive confirms.
+     */
     closeOnOutsideClick?: boolean;
     /** Enter clicks the action wrapped in `Modal.Confirm`. Default `true`. */
     confirmOnEnter?: boolean;
@@ -28,7 +31,7 @@ declare namespace ModalRoot {
 export type ModalContentProps = React.HTMLAttributes<HTMLDivElement> & {
     /**
      * Dialog width: `s` 440 · `m` 560 · `l` 720 · `xl` 960. Below 640px of viewport the dialog is
-     * always a full-width bottom sheet.
+     * always a full-width bottom sheet with a grab handle.
      */
     size?: Exclude<ControlSize, "xs">;
     /** Portal target. Default `document.body`. */