canny-ui-react 6.7.0 → 7.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (74) hide show
  1. package/dist/components/Accordion/Accordion.d.ts +7 -0
  2. package/dist/components/Alert/Alert.types.d.ts +5 -0
  3. package/dist/components/Autocomplete/Autocomplete.types.d.ts +7 -1
  4. package/dist/components/Avatar/Avatar.d.ts +3 -1
  5. package/dist/components/Avatar/Avatar.types.d.ts +14 -0
  6. package/dist/components/Avatar/index.d.ts +2 -2
  7. package/dist/components/Breadcrumb/Breadcrumb.d.ts +6 -0
  8. package/dist/components/Charts/BarChart.d.ts +16 -2
  9. package/dist/components/Charts/ChartA11y.d.ts +3 -1
  10. package/dist/components/Charts/ChartParts.d.ts +19 -0
  11. package/dist/components/Charts/DonutChart.d.ts +15 -0
  12. package/dist/components/Charts/FunnelChart.d.ts +16 -0
  13. package/dist/components/Charts/GanttChart.d.ts +75 -0
  14. package/dist/components/Charts/GaugeChart.d.ts +25 -0
  15. package/dist/components/Charts/Heatmap.d.ts +37 -0
  16. package/dist/components/Charts/LineChart.d.ts +15 -1
  17. package/dist/components/Charts/PieChart.d.ts +25 -3
  18. package/dist/components/Charts/RadarChart.d.ts +25 -0
  19. package/dist/components/Charts/ScatterChart.d.ts +33 -0
  20. package/dist/components/Charts/Sparkline.d.ts +17 -0
  21. package/dist/components/Charts/StatCard.d.ts +23 -0
  22. package/dist/components/Charts/cartesian.d.ts +23 -0
  23. package/dist/components/Charts/chartExtra.d.ts +90 -0
  24. package/dist/components/Charts/chartScale.d.ts +94 -0
  25. package/dist/components/Charts/chartUtils.d.ts +6 -0
  26. package/dist/components/Charts/gantt/ganttUtils.d.ts +54 -0
  27. package/dist/components/Charts/index.d.ts +18 -0
  28. package/dist/components/Chip/Chip.d.ts +4 -1
  29. package/dist/components/CommandPalette/CommandPalette.d.ts +1 -1
  30. package/dist/components/CommandPalette/CommandPalette.types.d.ts +18 -1
  31. package/dist/components/ConfirmDialog/ConfirmDialog.d.ts +6 -1
  32. package/dist/components/ContextMenu/ContextMenu.d.ts +7 -2
  33. package/dist/components/DataTable/DataTable.d.ts +55 -0
  34. package/dist/components/DatePicker/DatePicker.types.d.ts +10 -0
  35. package/dist/components/DatePicker/dateUtils.d.ts +2 -0
  36. package/dist/components/DatePicker/index.d.ts +1 -1
  37. package/dist/components/Dialog/Dialog.d.ts +6 -0
  38. package/dist/components/Drawer/Drawer.d.ts +8 -0
  39. package/dist/components/FileUploader/FileUploader.d.ts +24 -0
  40. package/dist/components/FileUploader/index.d.ts +1 -1
  41. package/dist/components/FileUploader/useFileDrop.d.ts +1 -0
  42. package/dist/components/Input/Input.types.d.ts +2 -0
  43. package/dist/components/List/List.d.ts +17 -0
  44. package/dist/components/MultiSelect/MultiSelect.d.ts +10 -2
  45. package/dist/components/Navbar/Navbar.types.d.ts +12 -0
  46. package/dist/components/Pagination/Pagination.d.ts +34 -0
  47. package/dist/components/PanelGroup/PanelGroup.d.ts +1 -1
  48. package/dist/components/Popover/Popover.d.ts +11 -2
  49. package/dist/components/Progress/Progress.types.d.ts +5 -0
  50. package/dist/components/Scroll/Scroll.types.d.ts +0 -4
  51. package/dist/components/Scroll/index.d.ts +1 -1
  52. package/dist/components/Scroll/useScrollFocusable.d.ts +10 -0
  53. package/dist/components/Select/Select.d.ts +7 -1
  54. package/dist/components/Sidebar/Sidebar.types.d.ts +10 -0
  55. package/dist/components/Skeleton/Skeleton.types.d.ts +3 -1
  56. package/dist/components/Skeleton/SkeletonLayouts.d.ts +5 -0
  57. package/dist/components/Skeleton/index.d.ts +1 -0
  58. package/dist/components/Slider/Slider.d.ts +2 -0
  59. package/dist/components/Stepper/Stepper.d.ts +5 -1
  60. package/dist/components/Tabs/Tabs.d.ts +7 -0
  61. package/dist/components/Textarea/Textarea.d.ts +2 -0
  62. package/dist/components/Timeline/Timeline.d.ts +9 -0
  63. package/dist/components/Toast/Toast.d.ts +1 -5
  64. package/dist/components/Toast/Toast.types.d.ts +13 -3
  65. package/dist/components/Tooltip/Tooltip.d.ts +3 -11
  66. package/dist/components/TreeView/TreeView.d.ts +34 -0
  67. package/dist/index.cjs +80 -55
  68. package/dist/index.cjs.map +1 -1
  69. package/dist/index.js +15280 -11282
  70. package/dist/index.js.map +1 -1
  71. package/dist/utils/overlayFocus.d.ts +13 -0
  72. package/dist/utils/useCloseGuard.d.ts +17 -0
  73. package/dist/utils/useVirtualWindow.d.ts +29 -0
  74. package/package.json +3 -3
@@ -0,0 +1,94 @@
1
+ /**
2
+ * Shared scale / perf / sanitising helpers for charts under high-volume or hostile data.
3
+ *
4
+ * PERF + SIZE GUARD (read before building a chart on top of this):
5
+ * - Never render more marks than the plot has pixels for. Downsample line/area/scatter
6
+ * series to ~2 points per horizontal pixel (`downsample`), and bucket bar-like data
7
+ * (`bucketAggregate`) to the number of bars that fit.
8
+ * - Never let NaN / Infinity / null reach an SVG attribute. Run values through
9
+ * `sanitizeNumber` / `finiteValues` and build paths with `pathFromPoints`.
10
+ * - Attach ONE pointermove handler to the svg (`usePointerHover` + `nearestIndexByX`)
11
+ * instead of one listener per mark.
12
+ * - Skip entrance animation above ~300 marks (`useAnimateBudget`), cap the hidden
13
+ * screen-reader table (`SrOnlyChartTable maxRows`), and thin/truncate category labels.
14
+ *
15
+ * Everything here is pure and O(n) (or O(log n)) and never throws on bad input.
16
+ */
17
+ /** A chart point. `y` may be NaN / non-finite to mark a gap. */
18
+ export interface XY {
19
+ x: number;
20
+ y: number;
21
+ }
22
+ export type Aggregate = 'sum' | 'mean' | 'min' | 'max';
23
+ /** Finite number, or numeric string parsed to one; otherwise `null` (NaN, ±Infinity, null, junk). */
24
+ export declare function sanitizeNumber(v: unknown): number | null;
25
+ /** Finite number or `fallback` (default 0). */
26
+ export declare function safeNum(v: unknown, fallback?: number): number;
27
+ /** Only the usable numbers from `values`, in order (invalid entries dropped). */
28
+ export declare function finiteValues(values: readonly unknown[] | null | undefined): number[];
29
+ /** [min, max] of the usable numbers (loop-based: safe for 1M items), or `null` if none. */
30
+ export declare function extent(values: readonly unknown[] | null | undefined): [number, number] | null;
31
+ /**
32
+ * SVG polyline path. Points with a non-finite x/y (or `null`) break the line (gap) and
33
+ * are never written to the path, so "NaN" can't appear in `d`. Returns '' when empty.
34
+ */
35
+ export declare function pathFromPoints(points: readonly (XY | null | undefined)[]): string;
36
+ /**
37
+ * LTTB downsample to ~`maxPoints` points (first/last and visual shape preserved).
38
+ * Points with non-finite x/y are gaps: each run of valid points is downsampled
39
+ * separately (budget split by run length) and ONE gap point is kept between runs, so
40
+ * `pathFromPoints` still breaks the line. Input is returned as-is when already small.
41
+ * Output points are the original objects (never copies).
42
+ */
43
+ export declare function downsample<T extends XY>(points: readonly T[] | null | undefined, maxPoints: number): T[];
44
+ /**
45
+ * Aggregate `values` into at most `maxBuckets` buckets (contiguous, equal index span).
46
+ * Invalid entries (NaN/null/Infinity/junk) are skipped; a bucket with no valid entry
47
+ * is `NaN` (a gap). When already small, returns the values with invalid -> NaN.
48
+ */
49
+ export declare function bucketAggregate(values: readonly unknown[] | null | undefined, maxBuckets: number, agg?: Aggregate): number[];
50
+ /**
51
+ * "Nice" [lo, hi] + ticks covering [min, max]. Handles min==max (incl. 0 and tiny/huge),
52
+ * negatives, inverted input, non-finite input (-> 0..1), 1e-9 and 1e15 magnitudes.
53
+ * (Named `niceScale` — `niceTicks` in chartUtils is the legacy 0..max variant.)
54
+ */
55
+ export declare function niceScale(min: number, max: number, count?: number): {
56
+ lo: number;
57
+ hi: number;
58
+ step: number;
59
+ ticks: number[];
60
+ };
61
+ /** 1234 -> "1.2K", 3.4e6 -> "3.4M", 5e9 -> "5B"; negatives; small decimals keep 3 significant digits. */
62
+ export declare function formatCompact(n: number, locale?: string): string;
63
+ /** Shorten to `maxChars` with an ellipsis (code-point safe). Callers keep the full text for `title`/tooltip. */
64
+ export declare function truncateLabel(str: unknown, maxChars: number): string;
65
+ /**
66
+ * Which category labels to draw so they don't collide.
67
+ * `indices` = positions to show (always includes 0); `rotate` = draw them rotated
68
+ * (-45deg) when horizontal text can't fit but a rotated line height (~14px) can.
69
+ */
70
+ export declare function thinLabels(labels: readonly unknown[], availablePx: number, charPx?: number, opts?: {
71
+ allowRotate?: boolean;
72
+ gap?: number;
73
+ lineHeight?: number;
74
+ }): {
75
+ indices: number[];
76
+ step: number;
77
+ rotate: boolean;
78
+ };
79
+ /**
80
+ * Top-left position for a tooltip box anchored at (x, y) inside a container.
81
+ * Default placement is above-centred; flips below when it would clip the top, and is
82
+ * then shifted so the box stays fully inside [0..containerW] x [0..containerH]
83
+ * (a box larger than the container pins to 0).
84
+ */
85
+ export declare function clampTooltip(x: number, y: number, boxW: number, boxH: number, containerW: number, containerH: number, gap?: number): {
86
+ left: number;
87
+ top: number;
88
+ placement: 'top' | 'bottom';
89
+ };
90
+ /**
91
+ * Index of the x closest to `px` in an ascending-sorted array (binary search, O(log n)).
92
+ * Returns -1 for an empty array or non-finite `px`.
93
+ */
94
+ export declare function nearestIndexByX(sortedXs: ArrayLike<number>, px: number): number;
@@ -2,6 +2,12 @@ import type { RefObject } from 'react';
2
2
  /** Default palette — token-driven series colors, cycled by index. */
3
3
  export declare const CHART_COLORS: string[];
4
4
  export declare function seriesColor(index: number, explicit?: string): string;
5
+ /**
6
+ * Readable label colour for text drawn on `color`: the matching `--color-*-on`
7
+ * token for role colours (theme-aware), black/white by luminance for #hex /
8
+ * rgb() literals, otherwise `undefined` (caller keeps its default).
9
+ */
10
+ export declare function readableOn(color: string | undefined): string | undefined;
5
11
  /**
6
12
  * Measures the host element's width with a ResizeObserver and returns a fluid
7
13
  * width. Falls back to `fallback` when measurement is unavailable (SSR/jsdom).
@@ -0,0 +1,54 @@
1
+ export declare const DAY = 86400000;
2
+ export type GanttScale = 'day' | 'week' | 'month' | 'quarter';
3
+ /** Pixels per day for each zoom scale. */
4
+ export declare const PX_PER_DAY: Record<GanttScale, number>;
5
+ /**
6
+ * Wall-clock "day number" (days since epoch, fractional for time of day).
7
+ * Date-only ISO strings are read as local midnight. DST-proof: all gantt math
8
+ * happens in this UTC-of-wall-clock space.
9
+ */
10
+ export declare function toDays(v: unknown): number;
11
+ /** Day numbers for years 1000..9999 are accepted; anything else is treated as invalid (NaN). */
12
+ export declare const MIN_DAY = -354285;
13
+ export declare const MAX_DAY = 2932896;
14
+ /** Hard cap on the timeline width in px (coarser scale / smaller px-per-day is chosen beyond it). */
15
+ export declare const MAX_TIMELINE_W = 20000;
16
+ /** Bounds for the effective px-per-day. */
17
+ export declare const MIN_PPD = 0.005;
18
+ export declare const MAX_PPD = 160;
19
+ /** Header unit that reads well at a given px-per-day (defaults map to their own scale). */
20
+ export declare function scaleForPpd(ppd: number): GanttScale;
21
+ /** Rows to render for a scroll position: `[first, last)` including overscan, clamped to `count`. */
22
+ export declare function visibleWindow(scrollRow: number, viewH: number, rowH: number, count: number, overscan?: number): {
23
+ first: number;
24
+ last: number;
25
+ };
26
+ export interface LabeledCell extends Cell {
27
+ /** px from the timeline's left edge. */
28
+ left: number;
29
+ width: number;
30
+ /** Label to draw (empty when thinned out to avoid overlap). */
31
+ text: string;
32
+ spill: boolean;
33
+ }
34
+ /** Position cells, thin overlapping labels greedily, and drop cells too narrow to be worth a node. */
35
+ export declare function layoutCells(cells: Cell[], from: number, ppd: number, minUnlabeledW?: number): LabeledCell[];
36
+ /** Inverse of `toDays`: a local Date at the same wall-clock time. */
37
+ export declare function fromDays(n: number): Date;
38
+ /** yyyy-MM-dd */
39
+ export declare function fmtDay(n: number): string;
40
+ export declare function pickScale(spanDays: number): GanttScale;
41
+ export declare function floorUnit(scale: GanttScale | 'year', n: number): number;
42
+ export declare function nextUnit(scale: GanttScale | 'year', n: number): number;
43
+ export interface Cell {
44
+ start: number;
45
+ end: number;
46
+ label: string;
47
+ }
48
+ /** Header cells for `[from, to)`: a fine tier (the scale) and a coarse tier above it. */
49
+ export declare function buildCells(scale: GanttScale, from: number, to: number): {
50
+ top: Cell[];
51
+ bottom: Cell[];
52
+ };
53
+ /** Elbow connector from a predecessor's end to a successor's start. */
54
+ export declare function depPath(x1: number, y1: number, x2: number, y2: number, rowH: number): string;
@@ -7,3 +7,21 @@ export type { PieChartProps, PieDatum } from './PieChart';
7
7
  export { ResponsiveContainer } from './ResponsiveContainer';
8
8
  export type { ResponsiveContainerProps } from './ResponsiveContainer';
9
9
  export { CHART_COLORS } from './chartUtils';
10
+ export { GanttChart } from './GanttChart';
11
+ export type { GanttChartProps, GanttTask, GanttScale } from './GanttChart';
12
+ export { DonutChart } from './DonutChart';
13
+ export type { DonutChartProps } from './DonutChart';
14
+ export { Sparkline } from './Sparkline';
15
+ export type { SparklineProps } from './Sparkline';
16
+ export { GaugeChart } from './GaugeChart';
17
+ export type { GaugeChartProps, GaugeThreshold } from './GaugeChart';
18
+ export { StatCard } from './StatCard';
19
+ export type { StatCardProps } from './StatCard';
20
+ export { RadarChart } from './RadarChart';
21
+ export type { RadarChartProps } from './RadarChart';
22
+ export { ScatterChart } from './ScatterChart';
23
+ export type { ScatterChartProps } from './ScatterChart';
24
+ export { FunnelChart } from './FunnelChart';
25
+ export type { FunnelChartProps, FunnelDatum } from './FunnelChart';
26
+ export { Heatmap } from './Heatmap';
27
+ export type { HeatmapProps } from './Heatmap';
@@ -14,7 +14,10 @@ export interface ChipProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'onSele
14
14
  icon?: ReactNode;
15
15
  /** Avatar node (rendered before icon if both supplied). */
16
16
  avatar?: ReactNode;
17
- /** When provided, renders an X button that calls this. */
17
+ /**
18
+ * When provided, renders an X button that calls this. The chip itself becomes
19
+ * focusable (the X leaves the tab order) and Delete / Backspace on it removes it.
20
+ */
18
21
  onDelete?: MouseEventHandler<HTMLButtonElement>;
19
22
  /** Accessible label for the delete button. Default: `Remove`. */
20
23
  deleteLabel?: string;
@@ -20,7 +20,7 @@ export declare function useCommandPalette({ hotkey }?: UseCommandPaletteOptions)
20
20
  * onItemSelect={(item) => item.href && router.push(item.href)}
21
21
  * />
22
22
  */
23
- export declare function CommandPalette({ open, onOpenChange, sections, placeholder, title, description, emptyText, footer, onItemSelect, contentClassName, }: CommandPaletteProps): import("react/jsx-runtime").JSX.Element;
23
+ 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;
24
24
  /**
25
25
  * Pill-shaped trigger button for the command palette. Use in a Navbar or
26
26
  * anywhere you want a visible search affordance.
@@ -14,8 +14,10 @@ export interface CommandPaletteItem {
14
14
  badge?: ReactNode;
15
15
  /** Leading icon. Defaults to a section-derived icon if not provided. */
16
16
  icon?: ReactNode;
17
- /** Right-aligned hint text (e.g. a path). */
17
+ /** Right-aligned hint text (e.g. a path). Hidden on the active row. */
18
18
  hint?: ReactNode;
19
+ /** Keyboard shortcut hint (e.g. `⌘N`), rendered as a `<kbd>` that stays visible on the active row. */
20
+ shortcut?: ReactNode;
19
21
  /** Disable selection. */
20
22
  disabled?: boolean;
21
23
  }
@@ -24,6 +26,8 @@ export interface CommandPaletteSection {
24
26
  title: string;
25
27
  /** Items in this group. */
26
28
  items: CommandPaletteItem[];
29
+ /** Pin the group above the others. Group headings stick to the top while scrolling either way. */
30
+ pinned?: boolean;
27
31
  }
28
32
  export interface CommandPaletteProps {
29
33
  /** Controlled open state. */
@@ -49,6 +53,19 @@ export interface CommandPaletteProps {
49
53
  onItemSelect?: (item: CommandPaletteItem) => void;
50
54
  /** Extra className on the dialog content. */
51
55
  contentClassName?: string;
56
+ /**
57
+ * Item ids to show under a "Recent" group while the search is empty.
58
+ * Controlled; pair with `onRecentChange`. Omit to let the palette track them itself.
59
+ */
60
+ recent?: string[];
61
+ /** Fires with the updated recent ids (most recent first) after a selection. */
62
+ onRecentChange?: (ids: string[]) => void;
63
+ /** localStorage key to persist self-tracked recents across sessions. Ignored when `recent` is controlled. */
64
+ persistRecentKey?: string;
65
+ /** Max recent items shown/kept. Default: 5. */
66
+ recentLimit?: number;
67
+ /** Heading of the recent group. Default: `Recent`. */
68
+ recentTitle?: string;
52
69
  }
53
70
  export interface CommandPaletteTriggerProps {
54
71
  /** Click handler — usually `() => setOpen(true)`. */
@@ -19,6 +19,11 @@ export interface ConfirmDialogProps {
19
19
  danger?: boolean;
20
20
  /** Show a spinner on confirm and disable both buttons. */
21
21
  loading?: boolean;
22
+ /**
23
+ * Type-to-confirm: the confirm button stays disabled until the user types
24
+ * this exact text. Use for destructive actions (e.g. the resource name).
25
+ */
26
+ requireText?: string;
22
27
  /** Fired when the confirm button is clicked. */
23
28
  onConfirm: () => void;
24
29
  /** Fired when the cancel button is clicked (before close). */
@@ -38,4 +43,4 @@ export interface ConfirmDialogProps {
38
43
  * ConfirmDialog — a small Dialog preset for destructive / confirmation prompts.
39
44
  * Composes the base `Dialog` and `Button`.
40
45
  */
41
- 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;
46
+ 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;
@@ -1,7 +1,12 @@
1
1
  import type { FC } from 'react';
2
- import type { ContextMenuProps, ContextMenuTriggerProps, ContextMenuContentProps, ContextMenuItemProps, ContextMenuCheckboxItemProps, ContextMenuRadioGroupProps, ContextMenuRadioItemProps, ContextMenuLabelProps, ContextMenuSeparatorProps, ContextMenuSubProps, ContextMenuSubTriggerProps } from './ContextMenu.types';
2
+ import type { ContextMenuProps, ContextMenuContentProps, ContextMenuItemProps, ContextMenuCheckboxItemProps, ContextMenuRadioGroupProps, ContextMenuRadioItemProps, ContextMenuLabelProps, ContextMenuSeparatorProps, ContextMenuSubProps, ContextMenuSubTriggerProps } from './ContextMenu.types';
3
3
  export declare const ContextMenu: FC<ContextMenuProps>;
4
- export declare const ContextMenuTrigger: FC<ContextMenuTriggerProps>;
4
+ /**
5
+ * Right-click target. Also keyboard reachable: it is a tab stop, and the
6
+ * ContextMenu key or Shift+F10 opens the menu at the trigger. Esc returns
7
+ * focus to it.
8
+ */
9
+ export declare const ContextMenuTrigger: import("react").ForwardRefExoticComponent<import("react").ButtonHTMLAttributes<HTMLButtonElement> & import("../../utils/primitiveProps").AsChildProps & import("react").RefAttributes<HTMLButtonElement>>;
5
10
  export declare const ContextMenuContent: import("react").ForwardRefExoticComponent<ContextMenuContentProps & import("react").RefAttributes<HTMLDivElement>>;
6
11
  export declare const ContextMenuItem: import("react").ForwardRefExoticComponent<ContextMenuItemProps & import("react").RefAttributes<HTMLDivElement>>;
7
12
  export declare const ContextMenuCheckboxItem: import("react").ForwardRefExoticComponent<ContextMenuCheckboxItemProps & import("react").RefAttributes<HTMLDivElement>>;
@@ -30,6 +30,11 @@ export interface DataTableColumn<R = Record<string, unknown>> {
30
30
  row: R;
31
31
  field: string;
32
32
  }) => unknown;
33
+ /**
34
+ * Pin the column to an edge so it stays visible while the grid scrolls
35
+ * horizontally. Pinned columns are moved ahead of / behind the rest.
36
+ */
37
+ pinned?: 'left' | 'right';
33
38
  }
34
39
  export type DataTableDensity = 'standard' | 'compact';
35
40
  export type DataTableLayout = 'auto' | 'fixed';
@@ -53,6 +58,16 @@ export interface DataTableProps<R = Record<string, unknown>> {
53
58
  rowCount?: number;
54
59
  paginationModel?: DataTablePaginationModel;
55
60
  onPaginationModelChange?: (model: DataTablePaginationModel) => void;
61
+ /**
62
+ * `'server'` (default): `rows` is already the current page and `rowCount` is the total.
63
+ * `'client'`: `rows` is every row — the table slices the current page itself
64
+ * and `rowCount` is not needed. Requires `paginationModel`.
65
+ */
66
+ paginationMode?: 'server' | 'client';
67
+ /** Rows-per-page choices in the footer. Default `[10, 25, 50, 100]`. */
68
+ pageSizeOptions?: number[];
69
+ /** Show a "Go to page" input in the footer. */
70
+ showGoToPage?: boolean;
56
71
  /** Show a leading checkbox column. */
57
72
  checkboxSelection?: boolean;
58
73
  rowSelectionModel?: RowId[];
@@ -63,6 +78,26 @@ export interface DataTableProps<R = Record<string, unknown>> {
63
78
  onRowClick?: (row: R) => void;
64
79
  /** Empty-state content. */
65
80
  noRowsLabel?: ReactNode;
81
+ /** Replaces the whole empty state (label and clear-filters action). */
82
+ emptyState?: ReactNode;
83
+ /**
84
+ * Turns the empty state into a "no results" state with a "Clear filters"
85
+ * button that calls this.
86
+ */
87
+ onClearFilters?: () => void;
88
+ /** Per-field visibility (`false` hides). Omit for uncontrolled. Missing fields are visible. */
89
+ columnVisibility?: Record<string, boolean>;
90
+ onColumnVisibilityChange?: (visibility: Record<string, boolean>) => void;
91
+ /** Show a "Columns" toolbar button with a show/hide checklist. */
92
+ columnsMenu?: boolean;
93
+ /**
94
+ * With `checkboxSelection` and server pagination: once every row on the page
95
+ * is selected, a banner offers "Select all {rowCount} rows" and calls this.
96
+ * The table only knows the current page's ids, so selecting the rest is up to you.
97
+ */
98
+ onSelectAllRows?: () => void;
99
+ /** Marks the selection as covering every row — the banner then offers "Clear selection". */
100
+ allRowsSelected?: boolean;
66
101
  /** Turn off column resizing for every column. */
67
102
  disableColumnResize?: boolean;
68
103
  /** Row height. `'compact'` halves the vertical cell padding. */
@@ -101,6 +136,26 @@ export interface DataTableProps<R = Record<string, unknown>> {
101
136
  tableLayout?: DataTableLayout;
102
137
  /** Extra class for a row's `<tr>` — for per-row state the table cannot know. */
103
138
  getRowClassName?: (row: R) => string | undefined;
139
+ /**
140
+ * Zebra-stripe the body rows.
141
+ */
142
+ striped?: boolean;
143
+ /**
144
+ * Row virtualization: only the rows in (and just around) the scrollport are
145
+ * in the DOM. `'auto'` (default) turns it on when there are more than 200 rows
146
+ * and the grid is height-bounded (give it a `height` / `maxHeight`, or a flex
147
+ * parent) - an unbounded grid has no scrollport, so every row is rendered.
148
+ * `true` forces it on, `false` off. Virtualized rows have a fixed height
149
+ * (`rowHeight`); long content is truncated with an ellipsis.
150
+ */
151
+ virtualize?: boolean | 'auto';
152
+ /** Fixed row height in px when virtualized. Defaults to 45 (`standard`) / 37 (`compact`). */
153
+ rowHeight?: number;
154
+ /**
155
+ * Content for the bar above the header (search input, filters, buttons).
156
+ * Shares the bar with the `columnsMenu` button, which sits at the right edge.
157
+ */
158
+ toolbar?: ReactNode;
104
159
  className?: string;
105
160
  /** Inline style applied to the outer table container. */
106
161
  style?: CSSProperties;
@@ -14,6 +14,12 @@ export type DatePickerMode = 'date' | 'month' | 'year' | 'time' | 'datetime';
14
14
  * Combines with explicit `min` / `max` — the stricter of the two always wins.
15
15
  */
16
16
  export type DatePickerAllow = 'any' | 'future' | 'past' | 'current';
17
+ export interface DatePickerPreset {
18
+ /** Button text, e.g. `'Today'` or `'Next week'`. */
19
+ label: string;
20
+ /** The date to select — a `Date`, a parseable string, or a function returning one (evaluated on click). */
21
+ value: Date | string | (() => Date);
22
+ }
17
23
  export interface DatePickerProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue' | 'children'> {
18
24
  /** Which picker to show. */
19
25
  mode?: DatePickerMode;
@@ -41,6 +47,10 @@ export interface DatePickerProps extends Omit<HTMLAttributes<HTMLDivElement>, 'o
41
47
  color?: DatePickerColor;
42
48
  /** Disable the trigger. */
43
49
  disabled?: boolean;
50
+ /** Quick-pick shortcuts rendered above the calendar (ignored in `time` mode). Disabled when the date is out of range. */
51
+ presets?: DatePickerPreset[];
52
+ /** Add a text field to the panel for typing a date as `yyyy-mm-dd` (`date` / `datetime` modes). Enter applies it. */
53
+ typeable?: boolean;
44
54
  /** Show a clear button when a value is selected. */
45
55
  clearable?: boolean;
46
56
  /** BCP-47 locale tag. Defaults to the browser's. */
@@ -8,6 +8,8 @@ export declare function startOfMonth(d: Date): Date;
8
8
  export declare function startOfYear(d: Date): Date;
9
9
  export declare function startOfDecade(d: Date): Date;
10
10
  export declare function addMonths(d: Date, n: number): Date;
11
+ /** Move by whole months keeping the day of month (clamped to the target month's length). */
12
+ export declare function shiftMonthsKeepDay(d: Date, n: number): Date;
11
13
  export declare function addDays(d: Date, n: number): Date;
12
14
  export declare function addYears(d: Date, n: number): Date;
13
15
  export declare function withTime(d: Date, h: number, m: number, s?: number): Date;
@@ -1,2 +1,2 @@
1
1
  export { DatePicker } from './DatePicker';
2
- export type { DatePickerProps, DatePickerSize, DatePickerColor } from './DatePicker.types';
2
+ export type { DatePickerProps, DatePickerSize, DatePickerColor, DatePickerPreset } from './DatePicker.types';
@@ -24,6 +24,12 @@ export interface DialogProps {
24
24
  size?: DialogSize;
25
25
  /** Hide the built-in X close button. */
26
26
  hideClose?: boolean;
27
+ /** Unsaved changes. While true, close attempts go through `onBeforeClose` (or are blocked if it is absent). */
28
+ dirty?: boolean;
29
+ /** Guard for close attempts (Esc, backdrop, X). Return `false` (or resolve `false`) to keep the dialog open. */
30
+ onBeforeClose?: () => boolean | Promise<boolean>;
31
+ /** 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. */
32
+ onOpenAutoFocus?: (event: Event) => void;
27
33
  /** Extra className on the dialog content. */
28
34
  className?: string;
29
35
  /** Inline style on the dialog content panel. */
@@ -27,6 +27,14 @@ export interface DrawerProps {
27
27
  size?: DrawerSize;
28
28
  /** Hide the built-in X close button. */
29
29
  hideClose?: boolean;
30
+ /** Unsaved changes. While true, close attempts go through `onBeforeClose` (or are blocked if it is absent). */
31
+ dirty?: boolean;
32
+ /** Guard for close attempts (Esc, backdrop, X, swipe). Return `false` (or resolve `false`) to keep the drawer open. */
33
+ onBeforeClose?: () => boolean | Promise<boolean>;
34
+ /** 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. */
35
+ onOpenAutoFocus?: (event: Event) => void;
36
+ /** Drag the panel toward its edge on touch to close it. Default: false. */
37
+ swipeToClose?: boolean;
30
38
  /** Extra className on the drawer content. */
31
39
  className?: string;
32
40
  /** Inline style on the drawer content panel. */
@@ -1,6 +1,17 @@
1
1
  import type { CSSProperties, ReactNode } from 'react';
2
2
  import type { SxProp } from '../Layout/sx';
3
3
  import type { FileRejection, UseFileDropOptions } from './useFileDrop';
4
+ export interface FileUploaderItem {
5
+ /** Stable identifier for the row. */
6
+ id: string;
7
+ file: File;
8
+ /** Upload progress, 0–100. Omit for no bar. */
9
+ progress?: number;
10
+ /** Row state. Default: `'uploading'` while `progress < 100`, else `'done'`. */
11
+ status?: 'uploading' | 'done' | 'error';
12
+ /** Message shown on a failed row. */
13
+ error?: ReactNode;
14
+ }
4
15
  export interface FileUploaderProps extends Omit<UseFileDropOptions, 'onDrop' | 'onDropAccepted' | 'onDropRejected'> {
5
16
  /** Fired with `(accepted, rejected)` after each drop or browse. */
6
17
  onDrop?: (accepted: File[], rejected: FileRejection[]) => void;
@@ -12,6 +23,19 @@ export interface FileUploaderProps extends Omit<UseFileDropOptions, 'onDrop' | '
12
23
  icon?: ReactNode;
13
24
  /** Custom body; overrides the default icon + text. */
14
25
  children?: ReactNode;
26
+ /**
27
+ * Render a list of files below the dropzone with per-file progress, errors
28
+ * and retry. The consumer owns upload state and updates `progress` / `status`.
29
+ */
30
+ files?: FileUploaderItem[];
31
+ /** Show a Retry button on `status: 'error'` rows. */
32
+ onRetry?: (item: FileUploaderItem) => void;
33
+ /** Show a remove (×) button on each row. */
34
+ onRemove?: (item: FileUploaderItem) => void;
35
+ /** Show image thumbnails for image files in the list. */
36
+ showPreviews?: boolean;
37
+ /** Accept files pasted from the clipboard while the dropzone is focused. */
38
+ allowPaste?: boolean;
15
39
  /** Browse-button label. Set to `false` to hide the button. */
16
40
  buttonLabel?: ReactNode | false;
17
41
  size?: 'sm' | 'md';
@@ -1,4 +1,4 @@
1
1
  export { FileUploader } from './FileUploader';
2
- export type { FileUploaderProps } from './FileUploader';
2
+ export type { FileUploaderProps, FileUploaderItem } from './FileUploader';
3
3
  export { useFileDrop } from './useFileDrop';
4
4
  export type { UseFileDropOptions, FileRejection, FileError, FileRejectionCode, AcceptProp, } from './useFileDrop';
@@ -627,4 +627,5 @@ export declare function useFileDrop(options?: UseFileDropOptions): {
627
627
  open: () => void;
628
628
  isDragActive: boolean;
629
629
  inputRef: import("react").RefObject<HTMLInputElement | null>;
630
+ processFiles: (files: File[]) => void;
630
631
  };
@@ -16,6 +16,8 @@ export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>,
16
16
  onClear?: () => void;
17
17
  /** Show a password-visibility toggle. Forces `type="password"` when hidden. */
18
18
  showPasswordToggle?: boolean;
19
+ /** Show a live character counter below the input (`n/max` when `maxLength` is set). */
20
+ showCount?: boolean;
19
21
  /**
20
22
  * Drop the resting border and sit the field on a tinted surface. For
21
23
  * search-style inputs that need to read as a target against a plain
@@ -10,6 +10,21 @@ export interface ListProps extends HTMLAttributes<HTMLUListElement> {
10
10
  /** Use this when items have explicit dividers via `<ListSeparator>` to
11
11
  * disable automatic divider rendering. */
12
12
  dense?: boolean;
13
+ /** Replace the items with skeleton rows and mark the list `aria-busy`. */
14
+ loading?: boolean;
15
+ /**
16
+ * Windowing for long lists: only the rows in (and just around) the scrollport are in the
17
+ * DOM. `'auto'` (default) turns it on above 200 rows when the list is height-bounded
18
+ * (give it a `height` / `maxHeight`; it becomes the scroll container). Rows get a fixed
19
+ * `itemHeight`. `true` forces it on, `false` off.
20
+ */
21
+ virtualize?: boolean | 'auto';
22
+ /** Row height in px when windowed. Defaults to 64 / 55 / 74 for `md` / `sm` / `lg` two-line rows. */
23
+ itemHeight?: number;
24
+ /** Number of skeleton rows while `loading`. Default 3. */
25
+ loadingRows?: number;
26
+ /** Shown in place of the items when there are none (and not `loading`). */
27
+ empty?: ReactNode;
13
28
  /**
14
29
  * One-off CSS, same as `Box`'s `sx`: each value may be a scalar or a
15
30
  * responsive breakpoint map (`{ base, sm, md, lg, xl }`). Scalar-only sx
@@ -43,6 +58,8 @@ export interface ListItemProps {
43
58
  children?: ReactNode;
44
59
  /** Extra className. */
45
60
  className?: string;
61
+ /** Tab order override. `List` manages this itself (roving tabindex). */
62
+ tabIndex?: number;
46
63
  }
47
64
  export declare const ListItem: import("react").ForwardRefExoticComponent<ListItemProps & import("react").RefAttributes<HTMLElement>>;
48
65
  export declare const ListSeparator: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLLIElement> & import("react").RefAttributes<HTMLLIElement>>;
@@ -31,6 +31,12 @@ export interface MultiSelectProps {
31
31
  emptyText?: string;
32
32
  /** Cap on how many can be selected. */
33
33
  maxItems?: number;
34
+ /** Show a clear-all (×) button in the trigger while anything is selected. */
35
+ clearable?: boolean;
36
+ /** Show at most this many chips; the rest collapse into a "+N" chip. */
37
+ maxVisibleChips?: number;
38
+ /** Show a "Select all / Clear" row above the options. Respects `maxItems` and disabled options. */
39
+ showSelectAll?: boolean;
34
40
  /** Size of the trigger. */
35
41
  size?: MultiSelectSize;
36
42
  /** Validation color. */
@@ -42,8 +48,10 @@ export interface MultiSelectProps {
42
48
  /** aria-invalid / aria-describedby threaded in from Field. */
43
49
  'aria-invalid'?: boolean;
44
50
  'aria-describedby'?: string;
45
- /** aria-label for the combobox if no Field label is present. */
51
+ /** aria-label for the combobox. Falls back to the placeholder when no label is associated. */
46
52
  'aria-label'?: string;
53
+ /** Id of the element that labels the combobox (Field threads this in). */
54
+ 'aria-labelledby'?: string;
47
55
  /** Extra class on the trigger. */
48
56
  className?: string;
49
57
  /** Inline style applied to the trigger (the inline field). */
@@ -61,4 +69,4 @@ export interface MultiSelectProps {
61
69
  * the selected values. Built on @radix-ui/react-popover (positioning +
62
70
  * focus management) and cmdk (search + filtering).
63
71
  */
64
- export declare function MultiSelect({ options, value, defaultValue, onValueChange, placeholder, searchPlaceholder, emptyText, maxItems, size, color, disabled, id, className, style, sx, 'aria-invalid': ariaInvalid, 'aria-describedby': ariaDescribedBy, 'aria-label': ariaLabel, }: MultiSelectProps): import("react/jsx-runtime").JSX.Element;
72
+ export declare function MultiSelect({ options, value, defaultValue, onValueChange, placeholder, searchPlaceholder, emptyText, maxItems, clearable, maxVisibleChips, showSelectAll, size, color, disabled, id, className, style, sx, 'aria-invalid': ariaInvalid, 'aria-describedby': ariaDescribedBy, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, }: MultiSelectProps): import("react/jsx-runtime").JSX.Element;
@@ -2,6 +2,10 @@ import type { AnchorHTMLAttributes, ButtonHTMLAttributes, HTMLAttributes, ReactN
2
2
  import type { SxProp } from '../Layout/sx';
3
3
  export interface NavbarProps extends HTMLAttributes<HTMLElement> {
4
4
  solid?: boolean;
5
+ /** Renders a "skip to content" link (visible on keyboard focus) pointing at this selector, e.g. `#main`. */
6
+ skipLinkTarget?: string;
7
+ /** Text of the skip link. Default: `Skip to content`. */
8
+ skipLinkLabel?: string;
5
9
  /**
6
10
  * Background (solid, no glass, when raised). `'base'` (default) sits on the page tone; `'raised'` uses the
7
11
  * surface of drawers, dialogs and menus (white in light mode).
@@ -20,6 +24,14 @@ export interface NavbarBrandProps extends AnchorHTMLAttributes<HTMLAnchorElement
20
24
  children: ReactNode;
21
25
  }
22
26
  export interface NavbarNavProps extends HTMLAttributes<HTMLElement> {
27
+ /**
28
+ * Below 640px the items collapse into a menu opened by a built-in button
29
+ * (`aria-expanded`/`aria-controls`; Esc closes and returns focus; choosing a link closes it).
30
+ * Pass `false` to opt out and hide the nav at that width instead. Default `true`.
31
+ */
32
+ mobileMenu?: boolean;
33
+ /** Noun used in the menu button's label ("Open navigation menu"). Default `navigation menu`. */
34
+ menuLabel?: string;
23
35
  children: ReactNode;
24
36
  }
25
37
  export interface NavbarItemProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
@@ -14,6 +14,26 @@ export interface PaginationProps {
14
14
  /** Hide the prev/next chevrons. */
15
15
  hideControls?: boolean;
16
16
  size?: 'sm' | 'md' | 'lg';
17
+ /** Show a "Go to page" number input (Enter to jump). */
18
+ showPageInput?: boolean;
19
+ /** Current rows per page — shows the page-size picker when `onPageSizeChange` is also set. */
20
+ pageSize?: number;
21
+ /** Choices for the page-size picker. Default `[10, 25, 50, 100]`. */
22
+ pageSizeOptions?: number[];
23
+ /** Fires with the new rows-per-page. */
24
+ onPageSizeChange?: (pageSize: number) => void;
25
+ /**
26
+ * Compact layout: prev / "Page 3 of 12" / next instead of numbered buttons.
27
+ * `'auto'` (default) switches to it at 480px wide and below.
28
+ */
29
+ compact?: boolean | 'auto';
30
+ /** Show First / Last page buttons beside Previous / Next. Hidden in the compact layout. */
31
+ showFirstLast?: boolean;
32
+ /**
33
+ * Total row count. With `pageSize`, renders the range text "1–10 of 243"
34
+ * (localized numbers) ahead of the controls.
35
+ */
36
+ totalCount?: number;
17
37
  className?: string;
18
38
  style?: CSSProperties;
19
39
  /**
@@ -24,8 +44,22 @@ export interface PaginationProps {
24
44
  sx?: SxProp;
25
45
  'aria-label'?: string;
26
46
  }
47
+ type Item = {
48
+ type: 'page';
49
+ page: number;
50
+ } | {
51
+ type: 'ellipsis';
52
+ key: string;
53
+ };
54
+ /**
55
+ * Constant-width page list: `1 … 4 5 [6] 7 8 … 25`. The slot count stays the
56
+ * same near either end, so the controls do not jump while paging.
57
+ * @internal exported for tests
58
+ */
59
+ export declare function buildPageItems(page: number, pageCount: number, siblingCount?: number): Item[];
27
60
  /**
28
61
  * Pagination — page-number nav with prev/next chevrons. Server-driven:
29
62
  * pass `page`, `pageCount`, and `onPageChange`.
30
63
  */
31
64
  export declare const Pagination: import("react").ForwardRefExoticComponent<PaginationProps & import("react").RefAttributes<HTMLElement>>;
65
+ export {};