canny-ui-react 6.6.2 → 7.0.0

package/dist/components/Charts/chartExtra.d.ts

@@ -0,0 +1,90 @@
+import type { CSSProperties, ReactNode, RefObject } from 'react';
+import { cx } from '../../utils/cx';
+import type { SxProp } from '../Layout/sx';
+/** Props shared by the extra chart components. */
+export interface ChartBaseProps {
+    /** Accessible label for the chart (svg `aria-label` + hidden table caption). */
+    label?: string;
+    /** Entrance + hover animation. Always off under `prefers-reduced-motion`. Default `true`. */
+    animate?: boolean;
+    /** Show a loading placeholder instead of the chart. */
+    loading?: boolean;
+    /** Content shown instead of the chart when there is no data. Default "No data". */
+    empty?: ReactNode;
+    className?: string;
+    style?: CSSProperties;
+    /** One-off CSS, same as `Box`'s `sx`. Applied to the chart's outer container. */
+    sx?: SxProp;
+}
+/**
+ * Hover index with a short leave delay. Moving between marks crosses a gap where
+ * `mouseleave` fires before the next `mouseenter`; without the delay the tooltip and
+ * the dim-others emphasis blink off and on at every crossing.
+ */
+export declare function useHover(delay?: number): [number | null, (i: number | null) => void];
+/** True when the user prefers reduced motion (live-updating). */
+export declare function usePrefersReducedMotion(): boolean;
+/** Effective animation flag: the `animate` prop AND no reduced-motion preference. */
+export declare function useAnimate(animate?: boolean): boolean;
+/** Counts from 0 to `target` (ease-out) while `enabled`; otherwise returns `target` as-is. */
+export declare function useCountUp(target: number, enabled: boolean, duration?: number): number;
+/** Outer container shared by the extra charts: sx, animation class, loading + empty states. */
+export declare function ChartShell({ rootRef, animate, loading, isEmpty, empty, height, className, style, sx, children, }: {
+    rootRef?: RefObject<HTMLDivElement | null>;
+    /** Resolved animation flag (see `useAnimate`). */
+    animate: boolean;
+    loading?: boolean;
+    isEmpty?: boolean;
+    empty?: ReactNode;
+    height?: number;
+    className?: string;
+    style?: CSSProperties;
+    sx?: SxProp;
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+/**
+ * Floating tooltip box (positioned in px relative to the chart container). It is measured
+ * after layout and flipped/shifted (`clampTooltip`) so it never leaves the container.
+ */
+export declare function ChartTip({ x, y, children }: {
+    x: number;
+    y: number;
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export declare const idx: (i: number, step?: number) => CSSProperties;
+/** Polar -> cartesian, angle in radians, 0 at 12 o'clock, clockwise. */
+export declare function polar(cx0: number, cy0: number, r: number, a: number): [number, number];
+/** Open stroke arc (for gauges / rings). */
+export declare function arcStroke(cx0: number, cy0: number, r: number, a0: number, a1: number): string;
+/** Nice [lo, hi] range + ticks that covers [min, max] (negatives, equal, tiny/huge, inverted, non-finite safe). */
+export declare function niceRange(min: number, max: number, count?: number): {
+    lo: number;
+    hi: number;
+    ticks: number[];
+};
+/** Rounds an in-flight count-up value to the precision of its target. */
+export declare const roundLike: (v: number, target: number) => number;
+export declare const fmt: (n: number) => string;
+export { cx };
+/**
+ * Skip entrance animation when there are too many marks (thousands of CSS-animated
+ * nodes jank). Combine with `useAnimate`: `useAnimate(animate) && useAnimateBudget(n)`.
+ */
+export declare function useAnimateBudget(count: number, limit?: number): boolean;
+/**
+ * ONE rAF-throttled pointermove handler for a whole svg (instead of N per-mark listeners).
+ * `resolve(x, y, rect)` gets pointer coords relative to the element and returns the hovered
+ * index (e.g. via `nearestIndexByX`) or null. Spread `handlers` on the svg.
+ */
+export declare function usePointerHover(resolve: (x: number, y: number, rect: DOMRect) => number | null, leaveDelay?: number): {
+    hover: number | null;
+    setHover: (i: number | null) => void;
+    handlers: {
+        onPointerMove: (e: {
+            clientX: number;
+            clientY: number;
+            currentTarget: Element;
+        }) => void;
+        onPointerLeave: () => void;
+    };
+};

package/dist/components/Charts/chartScale.d.ts

@@ -0,0 +1,94 @@
+/**
+ * Shared scale / perf / sanitising helpers for charts under high-volume or hostile data.
+ *
+ * PERF + SIZE GUARD (read before building a chart on top of this):
+ *  - Never render more marks than the plot has pixels for. Downsample line/area/scatter
+ *    series to ~2 points per horizontal pixel (`downsample`), and bucket bar-like data
+ *    (`bucketAggregate`) to the number of bars that fit.
+ *  - Never let NaN / Infinity / null reach an SVG attribute. Run values through
+ *    `sanitizeNumber` / `finiteValues` and build paths with `pathFromPoints`.
+ *  - Attach ONE pointermove handler to the svg (`usePointerHover` + `nearestIndexByX`)
+ *    instead of one listener per mark.
+ *  - Skip entrance animation above ~300 marks (`useAnimateBudget`), cap the hidden
+ *    screen-reader table (`SrOnlyChartTable maxRows`), and thin/truncate category labels.
+ *
+ * Everything here is pure and O(n) (or O(log n)) and never throws on bad input.
+ */
+/** A chart point. `y` may be NaN / non-finite to mark a gap. */
+export interface XY {
+    x: number;
+    y: number;
+}
+export type Aggregate = 'sum' | 'mean' | 'min' | 'max';
+/** Finite number, or numeric string parsed to one; otherwise `null` (NaN, ±Infinity, null, junk). */
+export declare function sanitizeNumber(v: unknown): number | null;
+/** Finite number or `fallback` (default 0). */
+export declare function safeNum(v: unknown, fallback?: number): number;
+/** Only the usable numbers from `values`, in order (invalid entries dropped). */
+export declare function finiteValues(values: readonly unknown[] | null | undefined): number[];
+/** [min, max] of the usable numbers (loop-based: safe for 1M items), or `null` if none. */
+export declare function extent(values: readonly unknown[] | null | undefined): [number, number] | null;
+/**
+ * SVG polyline path. Points with a non-finite x/y (or `null`) break the line (gap) and
+ * are never written to the path, so "NaN" can't appear in `d`. Returns '' when empty.
+ */
+export declare function pathFromPoints(points: readonly (XY | null | undefined)[]): string;
+/**
+ * LTTB downsample to ~`maxPoints` points (first/last and visual shape preserved).
+ * Points with non-finite x/y are gaps: each run of valid points is downsampled
+ * separately (budget split by run length) and ONE gap point is kept between runs, so
+ * `pathFromPoints` still breaks the line. Input is returned as-is when already small.
+ * Output points are the original objects (never copies).
+ */
+export declare function downsample<T extends XY>(points: readonly T[] | null | undefined, maxPoints: number): T[];
+/**
+ * Aggregate `values` into at most `maxBuckets` buckets (contiguous, equal index span).
+ * Invalid entries (NaN/null/Infinity/junk) are skipped; a bucket with no valid entry
+ * is `NaN` (a gap). When already small, returns the values with invalid -> NaN.
+ */
+export declare function bucketAggregate(values: readonly unknown[] | null | undefined, maxBuckets: number, agg?: Aggregate): number[];
+/**
+ * "Nice" [lo, hi] + ticks covering [min, max]. Handles min==max (incl. 0 and tiny/huge),
+ * negatives, inverted input, non-finite input (-> 0..1), 1e-9 and 1e15 magnitudes.
+ * (Named `niceScale` — `niceTicks` in chartUtils is the legacy 0..max variant.)
+ */
+export declare function niceScale(min: number, max: number, count?: number): {
+    lo: number;
+    hi: number;
+    step: number;
+    ticks: number[];
+};
+/** 1234 -> "1.2K", 3.4e6 -> "3.4M", 5e9 -> "5B"; negatives; small decimals keep 3 significant digits. */
+export declare function formatCompact(n: number, locale?: string): string;
+/** Shorten to `maxChars` with an ellipsis (code-point safe). Callers keep the full text for `title`/tooltip. */
+export declare function truncateLabel(str: unknown, maxChars: number): string;
+/**
+ * Which category labels to draw so they don't collide.
+ * `indices` = positions to show (always includes 0); `rotate` = draw them rotated
+ * (-45deg) when horizontal text can't fit but a rotated line height (~14px) can.
+ */
+export declare function thinLabels(labels: readonly unknown[], availablePx: number, charPx?: number, opts?: {
+    allowRotate?: boolean;
+    gap?: number;
+    lineHeight?: number;
+}): {
+    indices: number[];
+    step: number;
+    rotate: boolean;
+};
+/**
+ * Top-left position for a tooltip box anchored at (x, y) inside a container.
+ * Default placement is above-centred; flips below when it would clip the top, and is
+ * then shifted so the box stays fully inside [0..containerW] x [0..containerH]
+ * (a box larger than the container pins to 0).
+ */
+export declare function clampTooltip(x: number, y: number, boxW: number, boxH: number, containerW: number, containerH: number, gap?: number): {
+    left: number;
+    top: number;
+    placement: 'top' | 'bottom';
+};
+/**
+ * Index of the x closest to `px` in an ascending-sorted array (binary search, O(log n)).
+ * Returns -1 for an empty array or non-finite `px`.
+ */
+export declare function nearestIndexByX(sortedXs: ArrayLike<number>, px: number): number;

package/dist/components/Charts/chartUtils.d.ts

@@ -2,6 +2,12 @@ import type { RefObject } from 'react';
 /** Default palette — token-driven series colors, cycled by index. */
 export declare const CHART_COLORS: string[];
 export declare function seriesColor(index: number, explicit?: string): string;
+/**
+ * Readable label colour for text drawn on `color`: the matching `--color-*-on`
+ * token for role colours (theme-aware), black/white by luminance for #hex /
+ * rgb() literals, otherwise `undefined` (caller keeps its default).
+ */
+export declare function readableOn(color: string | undefined): string | undefined;
 /**
  * Measures the host element's width with a ResizeObserver and returns a fluid
  * width. Falls back to `fallback` when measurement is unavailable (SSR/jsdom).

package/dist/components/Charts/gantt/ganttUtils.d.ts

@@ -0,0 +1,54 @@
+export declare const DAY = 86400000;
+export type GanttScale = 'day' | 'week' | 'month' | 'quarter';
+/** Pixels per day for each zoom scale. */
+export declare const PX_PER_DAY: Record<GanttScale, number>;
+/**
+ * Wall-clock "day number" (days since epoch, fractional for time of day).
+ * Date-only ISO strings are read as local midnight. DST-proof: all gantt math
+ * happens in this UTC-of-wall-clock space.
+ */
+export declare function toDays(v: unknown): number;
+/** Day numbers for years 1000..9999 are accepted; anything else is treated as invalid (NaN). */
+export declare const MIN_DAY = -354285;
+export declare const MAX_DAY = 2932896;
+/** Hard cap on the timeline width in px (coarser scale / smaller px-per-day is chosen beyond it). */
+export declare const MAX_TIMELINE_W = 20000;
+/** Bounds for the effective px-per-day. */
+export declare const MIN_PPD = 0.005;
+export declare const MAX_PPD = 160;
+/** Header unit that reads well at a given px-per-day (defaults map to their own scale). */
+export declare function scaleForPpd(ppd: number): GanttScale;
+/** Rows to render for a scroll position: `[first, last)` including overscan, clamped to `count`. */
+export declare function visibleWindow(scrollRow: number, viewH: number, rowH: number, count: number, overscan?: number): {
+    first: number;
+    last: number;
+};
+export interface LabeledCell extends Cell {
+    /** px from the timeline's left edge. */
+    left: number;
+    width: number;
+    /** Label to draw (empty when thinned out to avoid overlap). */
+    text: string;
+    spill: boolean;
+}
+/** Position cells, thin overlapping labels greedily, and drop cells too narrow to be worth a node. */
+export declare function layoutCells(cells: Cell[], from: number, ppd: number, minUnlabeledW?: number): LabeledCell[];
+/** Inverse of `toDays`: a local Date at the same wall-clock time. */
+export declare function fromDays(n: number): Date;
+/** yyyy-MM-dd */
+export declare function fmtDay(n: number): string;
+export declare function pickScale(spanDays: number): GanttScale;
+export declare function floorUnit(scale: GanttScale | 'year', n: number): number;
+export declare function nextUnit(scale: GanttScale | 'year', n: number): number;
+export interface Cell {
+    start: number;
+    end: number;
+    label: string;
+}
+/** Header cells for `[from, to)`: a fine tier (the scale) and a coarse tier above it. */
+export declare function buildCells(scale: GanttScale, from: number, to: number): {
+    top: Cell[];
+    bottom: Cell[];
+};
+/** Elbow connector from a predecessor's end to a successor's start. */
+export declare function depPath(x1: number, y1: number, x2: number, y2: number, rowH: number): string;

package/dist/components/Charts/index.d.ts

@@ -7,3 +7,21 @@ export type { PieChartProps, PieDatum } from './PieChart';
 export { ResponsiveContainer } from './ResponsiveContainer';
 export type { ResponsiveContainerProps } from './ResponsiveContainer';
 export { CHART_COLORS } from './chartUtils';
+export { GanttChart } from './GanttChart';
+export type { GanttChartProps, GanttTask, GanttScale } from './GanttChart';
+export { DonutChart } from './DonutChart';
+export type { DonutChartProps } from './DonutChart';
+export { Sparkline } from './Sparkline';
+export type { SparklineProps } from './Sparkline';
+export { GaugeChart } from './GaugeChart';
+export type { GaugeChartProps, GaugeThreshold } from './GaugeChart';
+export { StatCard } from './StatCard';
+export type { StatCardProps } from './StatCard';
+export { RadarChart } from './RadarChart';
+export type { RadarChartProps } from './RadarChart';
+export { ScatterChart } from './ScatterChart';
+export type { ScatterChartProps } from './ScatterChart';
+export { FunnelChart } from './FunnelChart';
+export type { FunnelChartProps, FunnelDatum } from './FunnelChart';
+export { Heatmap } from './Heatmap';
+export type { HeatmapProps } from './Heatmap';

package/dist/components/Chip/Chip.d.ts

@@ -14,7 +14,10 @@ export interface ChipProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'onSele
     icon?: ReactNode;
     /** Avatar node (rendered before icon if both supplied). */
     avatar?: ReactNode;
-    /** When provided, renders an X button that calls this. */
+    /**
+     * When provided, renders an X button that calls this. The chip itself becomes
+     * focusable (the X leaves the tab order) and Delete / Backspace on it removes it.
+     */
     onDelete?: MouseEventHandler<HTMLButtonElement>;
     /** Accessible label for the delete button. Default: `Remove`. */
     deleteLabel?: string;

package/dist/components/CommandPalette/CommandPalette.d.ts

@@ -20,7 +20,7 @@ export declare function useCommandPalette({ hotkey }?: UseCommandPaletteOptions)
  *   onItemSelect={(item) => item.href && router.push(item.href)}
  * />
  */
-export declare function CommandPalette({ open, onOpenChange, sections, placeholder, title, description, emptyText, footer, onItemSelect, contentClassName, }: CommandPaletteProps): import("react/jsx-runtime").JSX.Element;
+export declare function CommandPalette({ open, onOpenChange, sections, placeholder, title, description, emptyText, footer, onItemSelect, contentClassName, recent, onRecentChange, persistRecentKey, recentLimit, recentTitle, }: CommandPaletteProps): import("react/jsx-runtime").JSX.Element;
 /**
  * Pill-shaped trigger button for the command palette. Use in a Navbar or
  * anywhere you want a visible search affordance.

package/dist/components/CommandPalette/CommandPalette.types.d.ts

@@ -14,8 +14,10 @@ export interface CommandPaletteItem {
     badge?: ReactNode;
     /** Leading icon. Defaults to a section-derived icon if not provided. */
     icon?: ReactNode;
-    /** Right-aligned hint text (e.g. a path). */
+    /** Right-aligned hint text (e.g. a path). Hidden on the active row. */
     hint?: ReactNode;
+    /** Keyboard shortcut hint (e.g. `⌘N`), rendered as a `<kbd>` that stays visible on the active row. */
+    shortcut?: ReactNode;
     /** Disable selection. */
     disabled?: boolean;
 }
@@ -24,6 +26,8 @@ export interface CommandPaletteSection {
     title: string;
     /** Items in this group. */
     items: CommandPaletteItem[];
+    /** Pin the group above the others. Group headings stick to the top while scrolling either way. */
+    pinned?: boolean;
 }
 export interface CommandPaletteProps {
     /** Controlled open state. */
@@ -49,6 +53,19 @@ export interface CommandPaletteProps {
     onItemSelect?: (item: CommandPaletteItem) => void;
     /** Extra className on the dialog content. */
     contentClassName?: string;
+    /**
+     * Item ids to show under a "Recent" group while the search is empty.
+     * Controlled; pair with `onRecentChange`. Omit to let the palette track them itself.
+     */
+    recent?: string[];
+    /** Fires with the updated recent ids (most recent first) after a selection. */
+    onRecentChange?: (ids: string[]) => void;
+    /** localStorage key to persist self-tracked recents across sessions. Ignored when `recent` is controlled. */
+    persistRecentKey?: string;
+    /** Max recent items shown/kept. Default: 5. */
+    recentLimit?: number;
+    /** Heading of the recent group. Default: `Recent`. */
+    recentTitle?: string;
 }
 export interface CommandPaletteTriggerProps {
     /** Click handler — usually `() => setOpen(true)`. */

package/dist/components/ConfirmDialog/ConfirmDialog.d.ts

@@ -19,6 +19,11 @@ export interface ConfirmDialogProps {
     danger?: boolean;
     /** Show a spinner on confirm and disable both buttons. */
     loading?: boolean;
+    /**
+     * Type-to-confirm: the confirm button stays disabled until the user types
+     * this exact text. Use for destructive actions (e.g. the resource name).
+     */
+    requireText?: string;
     /** Fired when the confirm button is clicked. */
     onConfirm: () => void;
     /** Fired when the cancel button is clicked (before close). */
@@ -38,4 +43,4 @@ export interface ConfirmDialogProps {
  * ConfirmDialog — a small Dialog preset for destructive / confirmation prompts.
  * Composes the base `Dialog` and `Button`.
  */
-export declare function ConfirmDialog({ open, onOpenChange, title, message, children, confirmLabel, cancelLabel, danger, loading, onConfirm, onCancel, className, style, sx, }: ConfirmDialogProps): import("react/jsx-runtime").JSX.Element;
+export declare function ConfirmDialog({ open, onOpenChange, title, message, children, confirmLabel, cancelLabel, danger, loading, requireText, onConfirm, onCancel, className, style, sx, }: ConfirmDialogProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/ContextMenu/ContextMenu.d.ts

@@ -1,7 +1,12 @@
 import type { FC } from 'react';
-import type { ContextMenuProps, ContextMenuTriggerProps, ContextMenuContentProps, ContextMenuItemProps, ContextMenuCheckboxItemProps, ContextMenuRadioGroupProps, ContextMenuRadioItemProps, ContextMenuLabelProps, ContextMenuSeparatorProps, ContextMenuSubProps, ContextMenuSubTriggerProps } from './ContextMenu.types';
+import type { ContextMenuProps, ContextMenuContentProps, ContextMenuItemProps, ContextMenuCheckboxItemProps, ContextMenuRadioGroupProps, ContextMenuRadioItemProps, ContextMenuLabelProps, ContextMenuSeparatorProps, ContextMenuSubProps, ContextMenuSubTriggerProps } from './ContextMenu.types';
 export declare const ContextMenu: FC<ContextMenuProps>;
-export declare const ContextMenuTrigger: FC<ContextMenuTriggerProps>;
+/**
+ * Right-click target. Also keyboard reachable: it is a tab stop, and the
+ * ContextMenu key or Shift+F10 opens the menu at the trigger. Esc returns
+ * focus to it.
+ */
+export declare const ContextMenuTrigger: import("react").ForwardRefExoticComponent<import("react").ButtonHTMLAttributes<HTMLButtonElement> & import("../../utils/primitiveProps").AsChildProps & import("react").RefAttributes<HTMLButtonElement>>;
 export declare const ContextMenuContent: import("react").ForwardRefExoticComponent<ContextMenuContentProps & import("react").RefAttributes<HTMLDivElement>>;
 export declare const ContextMenuItem: import("react").ForwardRefExoticComponent<ContextMenuItemProps & import("react").RefAttributes<HTMLDivElement>>;
 export declare const ContextMenuCheckboxItem: import("react").ForwardRefExoticComponent<ContextMenuCheckboxItemProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/DataTable/DataTable.d.ts

@@ -30,6 +30,11 @@ export interface DataTableColumn<R = Record<string, unknown>> {
         row: R;
         field: string;
     }) => unknown;
+    /**
+     * Pin the column to an edge so it stays visible while the grid scrolls
+     * horizontally. Pinned columns are moved ahead of / behind the rest.
+     */
+    pinned?: 'left' | 'right';
 }
 export type DataTableDensity = 'standard' | 'compact';
 export type DataTableLayout = 'auto' | 'fixed';
@@ -53,6 +58,16 @@ export interface DataTableProps<R = Record<string, unknown>> {
     rowCount?: number;
     paginationModel?: DataTablePaginationModel;
     onPaginationModelChange?: (model: DataTablePaginationModel) => void;
+    /**
+     * `'server'` (default): `rows` is already the current page and `rowCount` is the total.
+     * `'client'`: `rows` is every row — the table slices the current page itself
+     * and `rowCount` is not needed. Requires `paginationModel`.
+     */
+    paginationMode?: 'server' | 'client';
+    /** Rows-per-page choices in the footer. Default `[10, 25, 50, 100]`. */
+    pageSizeOptions?: number[];
+    /** Show a "Go to page" input in the footer. */
+    showGoToPage?: boolean;
     /** Show a leading checkbox column. */
     checkboxSelection?: boolean;
     rowSelectionModel?: RowId[];
@@ -63,6 +78,26 @@ export interface DataTableProps<R = Record<string, unknown>> {
     onRowClick?: (row: R) => void;
     /** Empty-state content. */
     noRowsLabel?: ReactNode;
+    /** Replaces the whole empty state (label and clear-filters action). */
+    emptyState?: ReactNode;
+    /**
+     * Turns the empty state into a "no results" state with a "Clear filters"
+     * button that calls this.
+     */
+    onClearFilters?: () => void;
+    /** Per-field visibility (`false` hides). Omit for uncontrolled. Missing fields are visible. */
+    columnVisibility?: Record<string, boolean>;
+    onColumnVisibilityChange?: (visibility: Record<string, boolean>) => void;
+    /** Show a "Columns" toolbar button with a show/hide checklist. */
+    columnsMenu?: boolean;
+    /**
+     * With `checkboxSelection` and server pagination: once every row on the page
+     * is selected, a banner offers "Select all {rowCount} rows" and calls this.
+     * The table only knows the current page's ids, so selecting the rest is up to you.
+     */
+    onSelectAllRows?: () => void;
+    /** Marks the selection as covering every row — the banner then offers "Clear selection". */
+    allRowsSelected?: boolean;
     /** Turn off column resizing for every column. */
     disableColumnResize?: boolean;
     /** Row height. `'compact'` halves the vertical cell padding. */
@@ -101,6 +136,26 @@ export interface DataTableProps<R = Record<string, unknown>> {
     tableLayout?: DataTableLayout;
     /** Extra class for a row's `<tr>` — for per-row state the table cannot know. */
     getRowClassName?: (row: R) => string | undefined;
+    /**
+     * Zebra-stripe the body rows.
+     */
+    striped?: boolean;
+    /**
+     * Row virtualization: only the rows in (and just around) the scrollport are
+     * in the DOM. `'auto'` (default) turns it on when there are more than 200 rows
+     * and the grid is height-bounded (give it a `height` / `maxHeight`, or a flex
+     * parent) - an unbounded grid has no scrollport, so every row is rendered.
+     * `true` forces it on, `false` off. Virtualized rows have a fixed height
+     * (`rowHeight`); long content is truncated with an ellipsis.
+     */
+    virtualize?: boolean | 'auto';
+    /** Fixed row height in px when virtualized. Defaults to 45 (`standard`) / 37 (`compact`). */
+    rowHeight?: number;
+    /**
+     * Content for the bar above the header (search input, filters, buttons).
+     * Shares the bar with the `columnsMenu` button, which sits at the right edge.
+     */
+    toolbar?: ReactNode;
     className?: string;
     /** Inline style applied to the outer table container. */
     style?: CSSProperties;

package/dist/components/DatePicker/DatePicker.types.d.ts

@@ -14,6 +14,12 @@ export type DatePickerMode = 'date' | 'month' | 'year' | 'time' | 'datetime';
  * Combines with explicit `min` / `max` — the stricter of the two always wins.
  */
 export type DatePickerAllow = 'any' | 'future' | 'past' | 'current';
+export interface DatePickerPreset {
+    /** Button text, e.g. `'Today'` or `'Next week'`. */
+    label: string;
+    /** The date to select — a `Date`, a parseable string, or a function returning one (evaluated on click). */
+    value: Date | string | (() => Date);
+}
 export interface DatePickerProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue' | 'children'> {
     /** Which picker to show. */
     mode?: DatePickerMode;
@@ -41,6 +47,10 @@ export interface DatePickerProps extends Omit<HTMLAttributes<HTMLDivElement>, 'o
     color?: DatePickerColor;
     /** Disable the trigger. */
     disabled?: boolean;
+    /** Quick-pick shortcuts rendered above the calendar (ignored in `time` mode). Disabled when the date is out of range. */
+    presets?: DatePickerPreset[];
+    /** Add a text field to the panel for typing a date as `yyyy-mm-dd` (`date` / `datetime` modes). Enter applies it. */
+    typeable?: boolean;
     /** Show a clear button when a value is selected. */
     clearable?: boolean;
     /** BCP-47 locale tag. Defaults to the browser's. */

package/dist/components/DatePicker/dateUtils.d.ts

@@ -8,6 +8,8 @@ export declare function startOfMonth(d: Date): Date;
 export declare function startOfYear(d: Date): Date;
 export declare function startOfDecade(d: Date): Date;
 export declare function addMonths(d: Date, n: number): Date;
+/** Move by whole months keeping the day of month (clamped to the target month's length). */
+export declare function shiftMonthsKeepDay(d: Date, n: number): Date;
 export declare function addDays(d: Date, n: number): Date;
 export declare function addYears(d: Date, n: number): Date;
 export declare function withTime(d: Date, h: number, m: number, s?: number): Date;

package/dist/components/DatePicker/index.d.ts

@@ -1,2 +1,2 @@
 export { DatePicker } from './DatePicker';
-export type { DatePickerProps, DatePickerSize, DatePickerColor } from './DatePicker.types';
+export type { DatePickerProps, DatePickerSize, DatePickerColor, DatePickerPreset } from './DatePicker.types';

package/dist/components/Dialog/Dialog.d.ts

@@ -24,6 +24,12 @@ export interface DialogProps {
     size?: DialogSize;
     /** Hide the built-in X close button. */
     hideClose?: boolean;
+    /** Unsaved changes. While true, close attempts go through `onBeforeClose` (or are blocked if it is absent). */
+    dirty?: boolean;
+    /** Guard for close attempts (Esc, backdrop, X). Return `false` (or resolve `false`) to keep the dialog open. */
+    onBeforeClose?: () => boolean | Promise<boolean>;
+    /** Fires when focus moves into the dialog on open; call `preventDefault()` to place focus yourself. Default: first form field in the body, else the Close button. */
+    onOpenAutoFocus?: (event: Event) => void;
     /** Extra className on the dialog content. */
     className?: string;
     /** Inline style on the dialog content panel. */

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

@@ -27,6 +27,14 @@ export interface DrawerProps {
     size?: DrawerSize;
     /** Hide the built-in X close button. */
     hideClose?: boolean;
+    /** Unsaved changes. While true, close attempts go through `onBeforeClose` (or are blocked if it is absent). */
+    dirty?: boolean;
+    /** Guard for close attempts (Esc, backdrop, X, swipe). Return `false` (or resolve `false`) to keep the drawer open. */
+    onBeforeClose?: () => boolean | Promise<boolean>;
+    /** Fires when focus moves into the drawer on open; call `preventDefault()` to place focus yourself. Default: first form field in the body, else the Close button. */
+    onOpenAutoFocus?: (event: Event) => void;
+    /** Drag the panel toward its edge on touch to close it. Default: false. */
+    swipeToClose?: boolean;
     /** Extra className on the drawer content. */
     className?: string;
     /** Inline style on the drawer content panel. */

package/dist/components/FileUploader/FileUploader.d.ts

@@ -1,6 +1,17 @@
 import type { CSSProperties, ReactNode } from 'react';
 import type { SxProp } from '../Layout/sx';
 import type { FileRejection, UseFileDropOptions } from './useFileDrop';
+export interface FileUploaderItem {
+    /** Stable identifier for the row. */
+    id: string;
+    file: File;
+    /** Upload progress, 0–100. Omit for no bar. */
+    progress?: number;
+    /** Row state. Default: `'uploading'` while `progress < 100`, else `'done'`. */
+    status?: 'uploading' | 'done' | 'error';
+    /** Message shown on a failed row. */
+    error?: ReactNode;
+}
 export interface FileUploaderProps extends Omit<UseFileDropOptions, 'onDrop' | 'onDropAccepted' | 'onDropRejected'> {
     /** Fired with `(accepted, rejected)` after each drop or browse. */
     onDrop?: (accepted: File[], rejected: FileRejection[]) => void;
@@ -12,6 +23,19 @@ export interface FileUploaderProps extends Omit<UseFileDropOptions, 'onDrop' | '
     icon?: ReactNode;
     /** Custom body; overrides the default icon + text. */
     children?: ReactNode;
+    /**
+     * Render a list of files below the dropzone with per-file progress, errors
+     * and retry. The consumer owns upload state and updates `progress` / `status`.
+     */
+    files?: FileUploaderItem[];
+    /** Show a Retry button on `status: 'error'` rows. */
+    onRetry?: (item: FileUploaderItem) => void;
+    /** Show a remove (×) button on each row. */
+    onRemove?: (item: FileUploaderItem) => void;
+    /** Show image thumbnails for image files in the list. */
+    showPreviews?: boolean;
+    /** Accept files pasted from the clipboard while the dropzone is focused. */
+    allowPaste?: boolean;
     /** Browse-button label. Set to `false` to hide the button. */
     buttonLabel?: ReactNode | false;
     size?: 'sm' | 'md';

package/dist/components/FileUploader/index.d.ts

@@ -1,4 +1,4 @@
 export { FileUploader } from './FileUploader';
-export type { FileUploaderProps } from './FileUploader';
+export type { FileUploaderProps, FileUploaderItem } from './FileUploader';
 export { useFileDrop } from './useFileDrop';
 export type { UseFileDropOptions, FileRejection, FileError, FileRejectionCode, AcceptProp, } from './useFileDrop';

package/dist/components/FileUploader/useFileDrop.d.ts

@@ -627,4 +627,5 @@ export declare function useFileDrop(options?: UseFileDropOptions): {
     open: () => void;
     isDragActive: boolean;
     inputRef: import("react").RefObject<HTMLInputElement | null>;
+    processFiles: (files: File[]) => void;
 };

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

@@ -16,6 +16,8 @@ export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>,
     onClear?: () => void;
     /** Show a password-visibility toggle. Forces `type="password"` when hidden. */
     showPasswordToggle?: boolean;
+    /** Show a live character counter below the input (`n/max` when `maxLength` is set). */
+    showCount?: boolean;
     /**
      * Drop the resting border and sit the field on a tinted surface. For
      * search-style inputs that need to read as a target against a plain

package/dist/components/List/List.d.ts

@@ -10,6 +10,21 @@ export interface ListProps extends HTMLAttributes<HTMLUListElement> {
     /** Use this when items have explicit dividers via `<ListSeparator>` to
      * disable automatic divider rendering. */
     dense?: boolean;
+    /** Replace the items with skeleton rows and mark the list `aria-busy`. */
+    loading?: boolean;
+    /**
+     * Windowing for long lists: only the rows in (and just around) the scrollport are in the
+     * DOM. `'auto'` (default) turns it on above 200 rows when the list is height-bounded
+     * (give it a `height` / `maxHeight`; it becomes the scroll container). Rows get a fixed
+     * `itemHeight`. `true` forces it on, `false` off.
+     */
+    virtualize?: boolean | 'auto';
+    /** Row height in px when windowed. Defaults to 64 / 55 / 74 for `md` / `sm` / `lg` two-line rows. */
+    itemHeight?: number;
+    /** Number of skeleton rows while `loading`. Default 3. */
+    loadingRows?: number;
+    /** Shown in place of the items when there are none (and not `loading`). */
+    empty?: ReactNode;
     /**
      * One-off CSS, same as `Box`'s `sx`: each value may be a scalar or a
      * responsive breakpoint map (`{ base, sm, md, lg, xl }`). Scalar-only sx
@@ -43,6 +58,8 @@ export interface ListItemProps {
     children?: ReactNode;
     /** Extra className. */
     className?: string;
+    /** Tab order override. `List` manages this itself (roving tabindex). */
+    tabIndex?: number;
 }
 export declare const ListItem: import("react").ForwardRefExoticComponent<ListItemProps & import("react").RefAttributes<HTMLElement>>;
 export declare const ListSeparator: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLLIElement> & import("react").RefAttributes<HTMLLIElement>>;