@assure-one/design-system 1.38.0 → 1.40.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.
- package/README.md +63 -28
- package/codemods/README.md +76 -25
- package/codemods/lib/entry-map.mjs +315 -0
- package/codemods/lib/registry.mjs +28 -0
- package/codemods/lib/runner.mjs +8 -3
- package/codemods/run.mjs +27 -5
- package/codemods/transforms/cm-01-entry-imports.mjs +202 -0
- package/codemods/transforms/cm-15-dom-selectors.mjs +16 -9
- package/dist/brand-scope-BOHId6BY.d.ts +58 -0
- package/dist/brand-theme-ZYM867Jz.d.ts +59 -0
- package/dist/chunk-2MKLYYIY.js +3754 -0
- package/dist/chunk-2MKLYYIY.js.map +1 -0
- package/dist/chunk-6S2R2VWN.js +5527 -0
- package/dist/chunk-6S2R2VWN.js.map +1 -0
- package/dist/chunk-7U3ADR2Q.js +4336 -0
- package/dist/chunk-7U3ADR2Q.js.map +1 -0
- package/dist/chunk-CPOGSNXS.js +389 -0
- package/dist/chunk-CPOGSNXS.js.map +1 -0
- package/dist/chunk-EUHGZA6Q.js +313 -0
- package/dist/chunk-EUHGZA6Q.js.map +1 -0
- package/dist/chunk-KQBYTTAN.js +1829 -0
- package/dist/chunk-KQBYTTAN.js.map +1 -0
- package/dist/chunk-X76J4QSJ.js +164 -0
- package/dist/chunk-X76J4QSJ.js.map +1 -0
- package/dist/css/components.css +1 -1
- package/dist/css/legacy-aliases.css +2 -0
- package/dist/css/tailwind.css +2 -0
- package/dist/css/tokens.css +8 -6
- package/dist/data-table-view-ep8al7P9.d.ts +1132 -0
- package/dist/design-system-provider-CfD2g2lY.d.ts +142 -0
- package/dist/icons/index.d.ts +441 -3
- package/dist/icons/index.js +2 -1835
- package/dist/icons/index.js.map +1 -1
- package/dist/index.d.ts +404 -3847
- package/dist/index.js +8728 -24213
- package/dist/index.js.map +1 -1
- package/dist/legacy/index.d.ts +1464 -0
- package/dist/legacy/index.js +7 -0
- package/dist/legacy/index.js.map +1 -0
- package/dist/next/index.d.ts +2 -1
- package/dist/reference-BkDbrPIB.d.ts +310 -0
- package/dist/styles.css +2 -1
- package/dist/suite/index.d.ts +989 -0
- package/dist/suite/index.js +8 -0
- package/dist/suite/index.js.map +1 -0
- package/dist/{system-CyAVbHhM.d.ts → system-DfJIVBlJ.d.ts} +1 -310
- package/dist/testing/index.cjs +3 -2
- package/dist/testing/index.js +3 -2
- package/dist/tokens/index.d.ts +3 -61
- package/dist/tokens/index.js +3 -856
- package/dist/tokens/index.js.map +1 -1
- package/dist/{design-system-provider-B5MbvbRc.d.ts → types-Coqw8iaS.d.ts} +36 -142
- package/dist/vocab-DornLJbW.d.ts +76 -0
- package/docs/components.md +54 -52
- package/docs/components.registry.json +22 -8
- package/docs/for-ai-agents.md +12 -6
- package/package.json +17 -4
- package/public/brand/assure-audit-mark.svg +6 -0
- package/public/brand/assure-audit.svg +8 -0
- package/public/brand/assure-books-mark.svg +6 -0
- package/public/brand/assure-books.svg +8 -0
- package/public/brand/assure-pro-mark.svg +6 -0
- package/public/brand/assure-pro.svg +8 -0
- package/public/brand/assure-tax-mark.svg +6 -0
- package/public/brand/assure-tax.svg +8 -0
- package/public/brand/mycpe-teams-mark.svg +36 -0
- package/public/brand/mycpe-teams.svg +66 -0
- package/dist/index-vztxMSfl.d.ts +0 -512
|
@@ -0,0 +1,1132 @@
|
|
|
1
|
+
import * as React$1 from 'react';
|
|
2
|
+
import { ReactNode, CSSProperties } from 'react';
|
|
3
|
+
import { V as Variant, I as Intent, C as ControlSize, S as Shape } from './vocab-DornLJbW.js';
|
|
4
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
5
|
+
import { T as TableMessages } from './types-Coqw8iaS.js';
|
|
6
|
+
import { a as BrandTheme } from './brand-theme-ZYM867Jz.js';
|
|
7
|
+
|
|
8
|
+
/**
|
|
9
|
+
* `Code` parts, stamped as `data-slot="code[-<part>]"` (ADR-008). Inline, the
|
|
10
|
+
* root is the `<code>`; as a block, the root is the `<pre>` and `content` the
|
|
11
|
+
* `<code>` inside it. State on the root: `data-variant`.
|
|
12
|
+
*
|
|
13
|
+
* @experimental Slot names are experimental until ADR-008 is accepted (W2-18).
|
|
14
|
+
*/
|
|
15
|
+
type CodeSlot = "root" | "content";
|
|
16
|
+
/**
|
|
17
|
+
* `Kbd` part, stamped as `data-slot="kbd"` (ADR-008). State on the root:
|
|
18
|
+
* `data-variant`. `KbdHint` and `CommandPalette` render it.
|
|
19
|
+
*
|
|
20
|
+
* @experimental Slot names are experimental until ADR-008 is accepted (W2-18).
|
|
21
|
+
*/
|
|
22
|
+
type KbdSlot = "root";
|
|
23
|
+
/**
|
|
24
|
+
* `Pressable` has one part, its root, stamped as `data-slot="pressable"`
|
|
25
|
+
* (ADR-008): the element that carries the button behaviour, whether that is
|
|
26
|
+
* the `<button>` it renders or the child it wraps with `asChild`. State on the
|
|
27
|
+
* root: `data-disabled`, `data-pressed`. Components that compose it (`Button`
|
|
28
|
+
* once it adopts the behaviour, a clickable `Surface`) declare their own parts.
|
|
29
|
+
*
|
|
30
|
+
* @experimental Slot names are experimental until ADR-008 is accepted (W3-03).
|
|
31
|
+
*/
|
|
32
|
+
type PressableSlot = "root";
|
|
33
|
+
/**
|
|
34
|
+
* `Button` parts, stamped as `data-slot="button[-<part>]"` (ADR-008).
|
|
35
|
+
* States on the root: `data-variant`, `data-size`, `data-disabled`, and the
|
|
36
|
+
* pre-existing `data-loading="true"`.
|
|
37
|
+
*
|
|
38
|
+
* @experimental Slot names are experimental until ADR-008 is accepted (W2-18).
|
|
39
|
+
*/
|
|
40
|
+
type ButtonSlot = "root" | "icon-start" | "icon-end" | "spinner";
|
|
41
|
+
/**
|
|
42
|
+
* `LinkButton` parts, stamped as `data-slot="link-button[-<part>]"` (ADR-008).
|
|
43
|
+
* States on the root: `data-variant`, `data-size`.
|
|
44
|
+
*
|
|
45
|
+
* @experimental Slot names are experimental until ADR-008 is accepted (W2-18).
|
|
46
|
+
*/
|
|
47
|
+
type LinkButtonSlot = "root" | "icon-start" | "icon-end";
|
|
48
|
+
/**
|
|
49
|
+
* `Badge` parts, stamped as `data-slot="badge[-<part>]"` (ADR-008).
|
|
50
|
+
* States on the root: `data-variant`, `data-size`.
|
|
51
|
+
*
|
|
52
|
+
* @experimental Slot names are experimental until ADR-008 is accepted (W2-18).
|
|
53
|
+
*/
|
|
54
|
+
type BadgeSlot = "root" | "dot" | "icon";
|
|
55
|
+
/**
|
|
56
|
+
* `Input` parts, stamped as `data-slot="input[-<part>]"` (ADR-008).
|
|
57
|
+
* `root` is the `<input>` itself — the control frame, and the element
|
|
58
|
+
* `className` lands on (`C-INPUT-CLASSNAME`). The wrappers around it are
|
|
59
|
+
* private (target architecture §29.2).
|
|
60
|
+
* States on the root: `data-variant`, `data-size`, `data-disabled`,
|
|
61
|
+
* `data-invalid`. `description` is the `description` sugar's hint text (W4-05).
|
|
62
|
+
*
|
|
63
|
+
* @experimental Slot names are experimental until ADR-008 is accepted (W2-18).
|
|
64
|
+
*/
|
|
65
|
+
type InputSlot = "root" | "label" | "icon-start" | "icon-end" | "password-toggle" | "description" | "error";
|
|
66
|
+
/**
|
|
67
|
+
* `Textarea` parts, stamped as `data-slot="textarea[-<part>]"` (ADR-008).
|
|
68
|
+
* `root` is the `<textarea>`. States on the root: `data-variant`, `data-size`,
|
|
69
|
+
* `data-disabled`, `data-invalid`. `description` is the `description` sugar's
|
|
70
|
+
* hint text (W4-06).
|
|
71
|
+
*
|
|
72
|
+
* @experimental Slot names are experimental until ADR-008 is accepted (W2-18).
|
|
73
|
+
*/
|
|
74
|
+
type TextareaSlot = "root" | "label" | "description" | "error" | "count";
|
|
75
|
+
/**
|
|
76
|
+
* `SearchInput` parts, stamped as `data-slot="search-input[-<part>]"`
|
|
77
|
+
* (ADR-008). `root` is the positioning wrapper `className` lands on;
|
|
78
|
+
* `control` is the `<input type="search">`.
|
|
79
|
+
* States on the root: `data-size`, `data-disabled`.
|
|
80
|
+
*
|
|
81
|
+
* @experimental Slot names are experimental until ADR-008 is accepted (W2-18).
|
|
82
|
+
*/
|
|
83
|
+
type SearchInputSlot = "root" | "control" | "icon" | "clear";
|
|
84
|
+
/**
|
|
85
|
+
* `Select` parts, stamped as `data-slot="select-<part>"` (ADR-008).
|
|
86
|
+
* `SelectRoot` renders no element: `root` is the wrapper the options-driven
|
|
87
|
+
* `Select clearable` renders around the trigger and the `clear` button (W4-08),
|
|
88
|
+
* and exists only then. Radix's own `data-state`, `data-disabled`,
|
|
89
|
+
* `data-placeholder` and `data-highlighted` are left as they are
|
|
90
|
+
* (`P-DATA-STATE`); the trigger adds `data-size` when a `size` is set.
|
|
91
|
+
*
|
|
92
|
+
* `SelectValue` and `SelectGroup` are re-exported Radix components with no
|
|
93
|
+
* wrapper of ours, so they carry no slot of their own. `value` is the span
|
|
94
|
+
* the options-driven `Select` wraps Radix's value in when `classNames.value`
|
|
95
|
+
* or `clearable` asks for it (Radix's own span drops `className`); a legacy
|
|
96
|
+
* call renders no wrapper, so the `SelectTrigger > span` structure PRO selects
|
|
97
|
+
* on stays as frozen by `C-DOM-10`.
|
|
98
|
+
*
|
|
99
|
+
* @experimental Slot names are experimental until ADR-008 is accepted (W2-18).
|
|
100
|
+
*/
|
|
101
|
+
type SelectSlot = "root" | "trigger" | "value" | "icon" | "clear" | "content" | "viewport" | "item" | "item-indicator" | "label" | "separator" | "scroll-up-button" | "scroll-down-button";
|
|
102
|
+
/**
|
|
103
|
+
* `Checkbox` parts, stamped as `data-slot="checkbox[-<part>]"` (ADR-008).
|
|
104
|
+
* `root` is the Radix root — the box, and the element `className` lands on.
|
|
105
|
+
* Radix's `data-state` (`checked` / `unchecked` / `indeterminate`) is left as
|
|
106
|
+
* it is; `data-shape` is not part of the state vocabulary, so the shape stays
|
|
107
|
+
* a class until W4-13.
|
|
108
|
+
*
|
|
109
|
+
* @experimental Slot names are experimental until ADR-008 is accepted (W2-18).
|
|
110
|
+
*/
|
|
111
|
+
type CheckboxSlot = "root" | "indicator" | "label";
|
|
112
|
+
/**
|
|
113
|
+
* `RadioGroup` / `RadioGroupItem` parts, stamped as
|
|
114
|
+
* `data-slot="radio-group[-<part>]"` (ADR-008). `root` is the group,
|
|
115
|
+
* `item` the radio. Radix's `data-state` is left as it is. With
|
|
116
|
+
* `appearance="card"` (W4-14) the root carries `data-appearance="card"` and
|
|
117
|
+
* every item is wrapped in a `card` holding the `label` (stretched over the
|
|
118
|
+
* card, so the whole box is the click target) and an optional `description`.
|
|
119
|
+
*
|
|
120
|
+
* @experimental Slot names are experimental until ADR-008 is accepted (W2-18).
|
|
121
|
+
*/
|
|
122
|
+
type RadioGroupSlot = "root" | "item" | "indicator" | "label" | "card" | "description";
|
|
123
|
+
/**
|
|
124
|
+
* `Switch` parts, stamped as `data-slot="switch[-<part>]"` (ADR-008).
|
|
125
|
+
* `root` is the Radix root — the track, and the element `className` lands on;
|
|
126
|
+
* the label wrapper is a private wrapper. States on the root: `data-size`.
|
|
127
|
+
*
|
|
128
|
+
* @experimental Slot names are experimental until ADR-008 is accepted (W2-18).
|
|
129
|
+
*/
|
|
130
|
+
type SwitchSlot = "root" | "thumb" | "label";
|
|
131
|
+
/**
|
|
132
|
+
* `Label` parts, stamped as `data-slot="label[-<part>]"` (ADR-008).
|
|
133
|
+
* `required` is the asterisk marker.
|
|
134
|
+
*
|
|
135
|
+
* @experimental Slot names are experimental until ADR-008 is accepted (W2-18).
|
|
136
|
+
*/
|
|
137
|
+
type LabelSlot = "root" | "required";
|
|
138
|
+
/**
|
|
139
|
+
* `NumberInput` parts, stamped as `data-slot="number-input"` (ADR-008).
|
|
140
|
+
* `root` is the `<input>` itself — the control frame and the element
|
|
141
|
+
* `className` lands on, like `Input`. The hidden inputs `FormBridge` renders
|
|
142
|
+
* next to it are not parts. States on the root: `data-variant`, `data-size`,
|
|
143
|
+
* `data-disabled`, `data-invalid`.
|
|
144
|
+
*
|
|
145
|
+
* @experimental Slot names are experimental until ADR-008 is accepted (W4-21).
|
|
146
|
+
*/
|
|
147
|
+
type NumberInputSlot = "root";
|
|
148
|
+
/**
|
|
149
|
+
* `PhoneField` parts, stamped as `data-slot="phone-field[-<part>]"` (ADR-008).
|
|
150
|
+
* `root` is the row (the element `className` lands on), `number` the `tel`
|
|
151
|
+
* `<input>` on the control chrome, `flag` a `CountryFlag` (the SVG, or its
|
|
152
|
+
* placeholder while the flag set loads). `country` is the country picker: a
|
|
153
|
+
* `Combobox`, stamped with its own anatomy and styled through
|
|
154
|
+
* `classNames.country`. States on the root: `data-variant`, `data-size`,
|
|
155
|
+
* `data-disabled`, `data-invalid`.
|
|
156
|
+
*
|
|
157
|
+
* @experimental Slot names are experimental until ADR-008 is accepted (W4-22).
|
|
158
|
+
*/
|
|
159
|
+
type PhoneFieldSlot = "root" | "country" | "number" | "flag";
|
|
160
|
+
/**
|
|
161
|
+
* `FileUpload` parts, stamped as `data-slot="file-upload[-<part>]"` (ADR-008).
|
|
162
|
+
* `dropzone` is the `<label>` that `C-DOM-04` freezes and that
|
|
163
|
+
* `[&_[data-slot=file-upload-dropzone]]` replaces (target architecture §29.4).
|
|
164
|
+
* States: `data-disabled` and `data-invalid` on the root, `data-disabled` and
|
|
165
|
+
* `data-state="drag-over"` on the dropzone.
|
|
166
|
+
*
|
|
167
|
+
* @experimental Slot names are experimental until ADR-008 is accepted (W2-18).
|
|
168
|
+
*/
|
|
169
|
+
type FileUploadSlot = "root" | "dropzone" | "input" | "error";
|
|
170
|
+
/**
|
|
171
|
+
* `Command` / `CommandPalette` parts, stamped as `data-slot="command-<part>"`
|
|
172
|
+
* (ADR-008, W5-19). `overlay`, `content`, `title` and `description` are the
|
|
173
|
+
* spotlight modal (`CommandDialog`); `root`, `input`, `list`, `empty`,
|
|
174
|
+
* `group` and `item` are the command-list parts; `footer` is the
|
|
175
|
+
* keyboard-hint strip `CommandPalette` renders below the list.
|
|
176
|
+
*
|
|
177
|
+
* @experimental Slot names are experimental until ADR-008 is accepted (W2-18).
|
|
178
|
+
*/
|
|
179
|
+
type CommandSlot = "overlay" | "content" | "title" | "description" | "root" | "input" | "list" | "empty" | "group" | "item" | "footer";
|
|
180
|
+
/**
|
|
181
|
+
* `Dialog` parts, stamped as `data-slot="dialog-<part>"` (ADR-008). There is
|
|
182
|
+
* no `root`: `Dialog` is Radix's non-rendering root. `close` is stamped on
|
|
183
|
+
* both the built-in close button and `DialogClose`; they are the same part —
|
|
184
|
+
* a control that dismisses the dialog. `body` is the scroll region between
|
|
185
|
+
* header and footer (W5-05). States: `data-size` on the content, and
|
|
186
|
+
* `data-variant="responsive"` when it presents as a bottom sheet below `sm`
|
|
187
|
+
* (W5-09). Radix's `data-state` is left as it is (`P-DATA-STATE`).
|
|
188
|
+
*
|
|
189
|
+
* @experimental Slot names are experimental until ADR-008 is accepted (W2-18).
|
|
190
|
+
*/
|
|
191
|
+
type DialogSlot = "overlay" | "content" | "header" | "title" | "description" | "body" | "footer" | "close";
|
|
192
|
+
/**
|
|
193
|
+
* `AlertDialog` parts, stamped as `data-slot="alert-dialog-<part>"`
|
|
194
|
+
* (ADR-008). No `root` — Radix's root renders no element.
|
|
195
|
+
*
|
|
196
|
+
* @experimental Slot names are experimental until ADR-008 is accepted (W2-18).
|
|
197
|
+
*/
|
|
198
|
+
type AlertDialogSlot = "overlay" | "content" | "header" | "title" | "description" | "footer" | "action" | "cancel";
|
|
199
|
+
/**
|
|
200
|
+
* `Sheet` parts, stamped as `data-slot="sheet-<part>"` (ADR-008).
|
|
201
|
+
* `body` is the scroll region between header and footer (W5-07). States:
|
|
202
|
+
* `data-size` on the content, carrying the `size` step (or the deprecated
|
|
203
|
+
* `width` preset, C-SHEET-WIDTH; `default` when neither is given). The
|
|
204
|
+
* `side` is not in the §29.2 vocabulary and stays a class.
|
|
205
|
+
*
|
|
206
|
+
* @experimental Slot names are experimental until ADR-008 is accepted (W2-18).
|
|
207
|
+
*/
|
|
208
|
+
type SheetSlot = "overlay" | "content" | "header" | "title" | "description" | "body" | "footer" | "close";
|
|
209
|
+
/**
|
|
210
|
+
* `SideDrawer` parts, stamped as `data-slot="side-drawer[-<part>]"`
|
|
211
|
+
* (ADR-008). `root` is the panel. The screen-reader-only Radix title that the
|
|
212
|
+
* panel always renders is an accessibility fallback, not a part, so it carries
|
|
213
|
+
* no slot. States: `data-size` on the root, carrying the `width` preset.
|
|
214
|
+
*
|
|
215
|
+
* `SideDrawer` itself is `C-SIDEDRAWER` and is replaced by `Sheet` in W5-08;
|
|
216
|
+
* the slots exist so the two can be styled the same way in the meantime.
|
|
217
|
+
*
|
|
218
|
+
* @experimental Slot names are experimental until ADR-008 is accepted (W2-18).
|
|
219
|
+
*/
|
|
220
|
+
type SideDrawerSlot = "overlay" | "root" | "header" | "heading" | "subtitle" | "close" | "body" | "footer";
|
|
221
|
+
/**
|
|
222
|
+
* `Popover` parts, stamped as `data-slot="popover-content"` (ADR-008).
|
|
223
|
+
* `Popover`, `PopoverTrigger`, `PopoverAnchor` and `PopoverClose` are bare
|
|
224
|
+
* Radix re-exports, so the content is the only part we render.
|
|
225
|
+
*
|
|
226
|
+
* @experimental Slot names are experimental until ADR-008 is accepted (W2-18).
|
|
227
|
+
*/
|
|
228
|
+
type PopoverSlot = "content";
|
|
229
|
+
/**
|
|
230
|
+
* `DropdownMenu` parts, stamped as `data-slot="dropdown-menu-<part>"`
|
|
231
|
+
* (ADR-008). No `root`, no `trigger`: both are bare Radix re-exports.
|
|
232
|
+
* `destructive` items get no `data-intent` yet — W3-02 defines the intent
|
|
233
|
+
* values, and this task does not invent them.
|
|
234
|
+
*
|
|
235
|
+
* @experimental Slot names are experimental until ADR-008 is accepted (W2-18).
|
|
236
|
+
*/
|
|
237
|
+
type DropdownMenuSlot = "content" | "item" | "checkbox-item" | "radio-item" | "item-indicator" | "label" | "separator" | "shortcut" | "sub-trigger" | "sub-content";
|
|
238
|
+
/**
|
|
239
|
+
* `ContextMenu` parts, stamped as `data-slot="context-menu-<part>"`
|
|
240
|
+
* (ADR-008). The same part names as `DropdownMenu`, which is what makes the
|
|
241
|
+
* shared `Menu` internals of W5 a rename-free change for consumers.
|
|
242
|
+
*
|
|
243
|
+
* @experimental Slot names are experimental until ADR-008 is accepted (W2-18).
|
|
244
|
+
*/
|
|
245
|
+
type ContextMenuSlot = "content" | "item" | "checkbox-item" | "radio-item" | "item-indicator" | "label" | "separator" | "shortcut" | "sub-trigger" | "sub-content";
|
|
246
|
+
/**
|
|
247
|
+
* `Tooltip` parts, stamped as `data-slot="tooltip-content"` (ADR-008).
|
|
248
|
+
* `TooltipTrigger` is a bare Radix re-export.
|
|
249
|
+
*
|
|
250
|
+
* @experimental Slot names are experimental until ADR-008 is accepted (W2-18).
|
|
251
|
+
*/
|
|
252
|
+
type TooltipSlot = "content";
|
|
253
|
+
/**
|
|
254
|
+
* `Toast` parts, stamped as `data-slot="toast[-<part>]"` (ADR-008).
|
|
255
|
+
* `region` is the live region; `data-slot="toast-region"` is how consumers
|
|
256
|
+
* locate it (W5-15). Its `aria-label` is not a locator contract since 2.0
|
|
257
|
+
* (C-TOAST-ARIALABEL). States: `data-variant` on the root; its
|
|
258
|
+
* `data-state` (`open` / `closed`) already existed.
|
|
259
|
+
*
|
|
260
|
+
* @experimental Slot names are experimental until ADR-008 is accepted (W2-18).
|
|
261
|
+
*/
|
|
262
|
+
type ToastSlot = "region" | "root" | "icon" | "title" | "description" | "action" | "close";
|
|
263
|
+
/**
|
|
264
|
+
* `Table` parts, stamped as `data-slot="table[-<part>]"` (ADR-008).
|
|
265
|
+
* `root` is the `<table>` — the element `className` lands on; `wrapper` is the
|
|
266
|
+
* overflow container that `wrapperClassName` styles today and
|
|
267
|
+
* `classNames.wrapper` replaces (`C-CLASSNAME-PROPS`). `header` is `<thead>`
|
|
268
|
+
* and `head` is a `<th>`, matching the `TableHeader` / `TableHead` component
|
|
269
|
+
* names. Native table semantics are permanent (`P-NATIVE-TABLE`). `sort` is
|
|
270
|
+
* the `<button>` a sortable `TableHead` renders around its label and
|
|
271
|
+
* `sort-indicator` the chevron inside it (W6-01).
|
|
272
|
+
*
|
|
273
|
+
* @experimental Slot names are experimental until ADR-008 is accepted (W2-18).
|
|
274
|
+
*/
|
|
275
|
+
type TableSlot = "root" | "wrapper" | "header" | "body" | "footer" | "row" | "head" | "cell" | "caption" | "sort" | "sort-indicator";
|
|
276
|
+
/**
|
|
277
|
+
* `DataTable*` parts, stamped as `data-slot="data-table[-<part>]"` (ADR-008).
|
|
278
|
+
* These are `C-DT-PARTS`, the parallel copy of `Table*` that W6-03 folds back
|
|
279
|
+
* in; the part names deliberately match `table`'s so that fold is a no-op for
|
|
280
|
+
* a consumer's selectors (`header` = `<thead>` via `DataTableHead`, `head` =
|
|
281
|
+
* the `<th>` via `DataTableHeader`).
|
|
282
|
+
*
|
|
283
|
+
* `head-button` is the sortable header's `<button>` that `C-DOM-13` freezes.
|
|
284
|
+
* The four cell components share one `cell` part and are told apart by
|
|
285
|
+
* `data-variant` (`name`, `mono`, `id`, `due`).
|
|
286
|
+
*
|
|
287
|
+
* `DataTableSearch` and `DataTablePagination` render an `Input` and a
|
|
288
|
+
* `Pagination` with no wrapper of their own, so they carry those components'
|
|
289
|
+
* slots (`data-slot="input"`, `data-slot="pagination"`) rather than one of
|
|
290
|
+
* their own — stamping over it would delete the inner component's part name.
|
|
291
|
+
* W6-06 gives the search its own `classNames.search` (`C-DOM-18`).
|
|
292
|
+
*
|
|
293
|
+
* The compound `DataTablePattern` (W6-06, `src/patterns/data/data-table.tsx`)
|
|
294
|
+
* renders in the same namespace and adds its slots: `search`, `filters`,
|
|
295
|
+
* `columns-menu`, `content` (the table's overflow wrapper), `bulk-actions`
|
|
296
|
+
* and `pagination`. It is the same component family, so a consumer's
|
|
297
|
+
* `[data-slot^="data-table"]` selectors keep meaning what they meant.
|
|
298
|
+
*
|
|
299
|
+
* @experimental Slot names are experimental until ADR-008 is accepted (W2-18).
|
|
300
|
+
*/
|
|
301
|
+
type DataTableSlot = "root" | "toolbar" | "spacer" | "results-count" | "header" | "body" | "row" | "head" | "head-button" | "head-indicator" | "cell" | "checkbox-cell" | "search" | "filters" | "columns-menu" | "content" | "bulk-actions" | "pagination";
|
|
302
|
+
/**
|
|
303
|
+
* `Pagination` parts, stamped as `data-slot="pagination[-<part>]"` (ADR-008).
|
|
304
|
+
* `root` is the `<nav>`. The current page carries `data-selected` alongside
|
|
305
|
+
* its existing `aria-current="page"`. `page-size` wraps the optional
|
|
306
|
+
* rows-per-page `Select` (W6-09).
|
|
307
|
+
*
|
|
308
|
+
* @experimental Slot names are experimental until ADR-008 is accepted (W2-18).
|
|
309
|
+
*/
|
|
310
|
+
type PaginationSlot = "root" | "label" | "page-size" | "pages" | "previous" | "next" | "page" | "ellipsis";
|
|
311
|
+
/**
|
|
312
|
+
* `Shell` / `Main` / `Content` parts, stamped as `data-slot="shell[-<part>]"`
|
|
313
|
+
* (ADR-008). Three elements, three names: the app frame, the column beside the
|
|
314
|
+
* sidebar and the scrolling page region.
|
|
315
|
+
*
|
|
316
|
+
* @experimental Slot names are experimental until ADR-008 is accepted (W2-18).
|
|
317
|
+
*/
|
|
318
|
+
type ShellSlot = "root" | "main" | "content";
|
|
319
|
+
/**
|
|
320
|
+
* `Sidebar` and its parts, stamped as `data-slot="sidebar[-<part>]"`
|
|
321
|
+
* (ADR-008). This is the anatomy `C-DOM-06` is waiting for: PRO and TAX carry
|
|
322
|
+
* identical copies of `group-data-[labels=hide]/sidebar:*` and
|
|
323
|
+
* `[&>div:first-child]` overrides because there is no name for
|
|
324
|
+
* `section-header`, `link-label` or `user` today.
|
|
325
|
+
*
|
|
326
|
+
* `group/sidebar`, `data-labels`, `data-state`, `data-peek`, `data-overlay`,
|
|
327
|
+
* `data-collapsible` and `data-variant` on the root are **unchanged** — they
|
|
328
|
+
* are the frozen part of `C-DOM-06`, and no state attribute is re-stamped over
|
|
329
|
+
* them. W7-03 adds `data-collapsed` to the slots and the `SidebarSection`
|
|
330
|
+
* header slot; this change only names the parts.
|
|
331
|
+
*
|
|
332
|
+
* `group` is a `SidebarLinkGroup`: `group-link` is its activating row,
|
|
333
|
+
* `group-trigger` its chevron and `group-content` the collapsible body.
|
|
334
|
+
* The `tone` props on `SidebarSection` and `SidebarLinkBadge` get no
|
|
335
|
+
* `data-intent`: they are `C-TONE`, and W3-21 defines the intent values.
|
|
336
|
+
*
|
|
337
|
+
* @experimental Slot names are experimental until ADR-008 is accepted (W2-18).
|
|
338
|
+
*/
|
|
339
|
+
type SidebarSlot = "root" | "trigger" | "pin" | "brand" | "brand-text" | "section" | "section-header" | "section-label" | "link" | "link-label" | "link-action" | "link-badge" | "group" | "group-link" | "group-trigger" | "group-content" | "footer" | "user" | "user-name" | "user-subtitle";
|
|
340
|
+
/**
|
|
341
|
+
* `SidebarBrandSwitcher` parts, stamped as
|
|
342
|
+
* `data-slot="sidebar-brand-switcher[-<part>]"` (ADR-008). Its menu is a
|
|
343
|
+
* `DropdownMenuContent` and keeps that component's slots; its `trailing`
|
|
344
|
+
* children are rendered bare, with no wrapper of ours to name (W7-03 gives
|
|
345
|
+
* them one).
|
|
346
|
+
*
|
|
347
|
+
* @experimental Slot names are experimental until ADR-008 is accepted (W2-18).
|
|
348
|
+
*/
|
|
349
|
+
type SidebarBrandSwitcherSlot = "root" | "trigger" | "icon";
|
|
350
|
+
/**
|
|
351
|
+
* `Text` parts, stamped as `data-slot="text"` (ADR-008). One part: the
|
|
352
|
+
* element that carries the role, and the element `className` lands on (with
|
|
353
|
+
* `asChild`, the child the caller supplied).
|
|
354
|
+
*
|
|
355
|
+
* @experimental Slot names are experimental until ADR-008 is accepted (W2-12).
|
|
356
|
+
*/
|
|
357
|
+
type TextSlot = "root";
|
|
358
|
+
/**
|
|
359
|
+
* `Heading` parts, stamped as `data-slot="heading"` (ADR-008). One part: the
|
|
360
|
+
* `<h1>`…`<h6>` itself, which is the element `className` lands on.
|
|
361
|
+
*
|
|
362
|
+
* @experimental Slot names are experimental until ADR-008 is accepted (W2-13).
|
|
363
|
+
*/
|
|
364
|
+
type HeadingSlot = "root";
|
|
365
|
+
/**
|
|
366
|
+
* `Stack` has one part, its root, stamped as `data-slot="stack"` (ADR-008).
|
|
367
|
+
* No state attributes: a responsive `direction` has no single value to
|
|
368
|
+
* stamp, and the primitive's job is spacing, not state.
|
|
369
|
+
*
|
|
370
|
+
* @experimental Slot names are experimental until ADR-008 is accepted (W2-15).
|
|
371
|
+
*/
|
|
372
|
+
type StackSlot = "root";
|
|
373
|
+
/**
|
|
374
|
+
* `Inline` has one part, its root, stamped as `data-slot="inline"` (ADR-008).
|
|
375
|
+
*
|
|
376
|
+
* @experimental Slot names are experimental until ADR-008 is accepted (W2-15).
|
|
377
|
+
*/
|
|
378
|
+
type InlineSlot = "root";
|
|
379
|
+
/**
|
|
380
|
+
* `Surface` has one part, its root, stamped as `data-slot="surface"`
|
|
381
|
+
* (ADR-008). Composites built on it (Card, W3-17) declare their own parts.
|
|
382
|
+
*
|
|
383
|
+
* @experimental Slot names are experimental until ADR-008 is accepted (W2-16).
|
|
384
|
+
*/
|
|
385
|
+
type SurfaceSlot = "root";
|
|
386
|
+
/**
|
|
387
|
+
* `Avatar` parts, stamped as `data-slot="avatar[-<part>]"` (ADR-008, W3-16).
|
|
388
|
+
* `root` is the outer positioning wrapper — the element a consumer's
|
|
389
|
+
* `shrink-0` / `mt-0.5` overrides are aimed at and `classNames.root` reaches;
|
|
390
|
+
* `frame` is the circle (the Radix root: image and fallback clip to it), and
|
|
391
|
+
* the element `className` and `ref` keep landing on behind the compatibility
|
|
392
|
+
* entry (target architecture §29.1, ADR-008 decision 6 — the landing does not
|
|
393
|
+
* move silently). `image` and `fallback` are the Radix image and fallback;
|
|
394
|
+
* `status` is the corner dot, rendered only when `status` is set.
|
|
395
|
+
* States on the root: `data-size`, `data-variant`.
|
|
396
|
+
*
|
|
397
|
+
* @experimental Slot names are experimental until ADR-008 is accepted (W3-16).
|
|
398
|
+
*/
|
|
399
|
+
type AvatarSlot = "root" | "frame" | "image" | "fallback" | "status";
|
|
400
|
+
/**
|
|
401
|
+
* `Card` parts, stamped as `data-slot="card[-<part>]"` (ADR-008, W3-17). The
|
|
402
|
+
* root is a `Surface` (W2-16) that stamps `card` over `surface`: a composite
|
|
403
|
+
* declares its own parts. Each part is a real JSX component (`CardHeader`,
|
|
404
|
+
* `CardTitle`, …) and takes `className` itself, so `Card` has no `classNames`
|
|
405
|
+
* (ADR-008 decision 4). States on the root: `data-variant`.
|
|
406
|
+
*
|
|
407
|
+
* @experimental Slot names are experimental until ADR-008 is accepted (W3-17).
|
|
408
|
+
*/
|
|
409
|
+
type CardSlot = "root" | "header" | "title" | "description" | "action" | "content" | "footer";
|
|
410
|
+
/**
|
|
411
|
+
* `StatusBadge` parts, stamped as `data-slot="status-badge[-<part>]"`
|
|
412
|
+
* (ADR-008): the root, the `indicator` (dot, icon or spinner — one at a time)
|
|
413
|
+
* and the `label`. States on the root: `data-variant`, `data-intent`,
|
|
414
|
+
* `data-size`, `data-loading`.
|
|
415
|
+
*
|
|
416
|
+
* @experimental Slot names are experimental until ADR-008 is accepted (W3-14).
|
|
417
|
+
*/
|
|
418
|
+
type StatusBadgeSlot = "root" | "indicator" | "label";
|
|
419
|
+
/**
|
|
420
|
+
* `IconButton` parts, stamped as `data-slot="icon-button[-<part>]"` (ADR-008):
|
|
421
|
+
* the square root, the `icon` box and the `spinner` that replaces it while
|
|
422
|
+
* loading. States on the root: `data-variant`, `data-intent`, `data-size`,
|
|
423
|
+
* `data-disabled`, `data-loading`, `data-pressed`.
|
|
424
|
+
*
|
|
425
|
+
* @experimental Slot names are experimental until ADR-008 is accepted (W3-09).
|
|
426
|
+
*/
|
|
427
|
+
type IconButtonSlot = "root" | "icon" | "spinner";
|
|
428
|
+
/**
|
|
429
|
+
* `Chip` parts, stamped as `data-slot="chip[-<part>]"` (ADR-008): the root
|
|
430
|
+
* (the pressable itself, or the group that holds a pressable label and the
|
|
431
|
+
* `remove` button), the leading `icon`, the `label`, the `count` and the
|
|
432
|
+
* `remove` button. States on the root: `data-variant`, `data-intent`,
|
|
433
|
+
* `data-size`, `data-disabled`, `data-pressed`.
|
|
434
|
+
*
|
|
435
|
+
* @experimental Slot names are experimental until ADR-008 is accepted (W3-15).
|
|
436
|
+
*/
|
|
437
|
+
type ChipSlot = "root" | "icon" | "label" | "count" | "remove";
|
|
438
|
+
/**
|
|
439
|
+
* `Field` parts, stamped as `data-slot="field[-<part>]"` (ADR-008, W4-01):
|
|
440
|
+
* the root (the layout wrapper, no chrome), the `label` (a `Label` rendered
|
|
441
|
+
* inside a field stamps this over its own `label`, the way `Card` stamps
|
|
442
|
+
* `card` over `surface`), its `required` asterisk and `optional` indicator,
|
|
443
|
+
* the `description` and the `error`. The control is not a part: it keeps its
|
|
444
|
+
* own anatomy (`input`, `select-trigger`, …) and is found by the field's id.
|
|
445
|
+
* States on the root: `data-orientation`, `data-invalid`, `data-disabled`,
|
|
446
|
+
* `data-required`.
|
|
447
|
+
*
|
|
448
|
+
* @experimental Slot names are experimental until ADR-008 is accepted (W4-01).
|
|
449
|
+
*/
|
|
450
|
+
type FieldSlot = "root" | "label" | "required" | "optional" | "description" | "error";
|
|
451
|
+
/**
|
|
452
|
+
* `Fieldset` parts, stamped as `data-slot="fieldset[-<part>]"` (ADR-008,
|
|
453
|
+
* W4-01): the `<fieldset>` root and its `<legend>`. States on the root:
|
|
454
|
+
* `data-disabled`, `data-invalid`.
|
|
455
|
+
*
|
|
456
|
+
* @experimental Slot names are experimental until ADR-008 is accepted (W4-01).
|
|
457
|
+
*/
|
|
458
|
+
type FieldsetSlot = "root" | "legend";
|
|
459
|
+
/**
|
|
460
|
+
* `Combobox` parts, stamped as `data-slot="combobox[-<part>]"` (ADR-008,
|
|
461
|
+
* W4-10): the `root` (the frame that holds the control and its form bridge),
|
|
462
|
+
* the `control` (the field-shaped box the popover anchors to), the `value`
|
|
463
|
+
* (a custom `renderValue` node over the input), the `chips` row and its
|
|
464
|
+
* `Chip`s in `multiple` mode, the `input` (the `role="combobox"` element that
|
|
465
|
+
* keeps focus), the leading `icon`, the `clear` and `toggle` buttons; then
|
|
466
|
+
* the portalled `content` with an optional `header`, the `list`
|
|
467
|
+
* (`role="listbox"`), a `group` with its `group-heading`, each `item`
|
|
468
|
+
* (`role="option"`, see `behavior/collection/item-attributes.ts`) and its
|
|
469
|
+
* `item-indicator`, the `create` row, the `empty` and `loading` states and an
|
|
470
|
+
* optional `footer`. States on the root: `data-state` (`open` · `closed`),
|
|
471
|
+
* `data-disabled`, `data-invalid`, `data-size`.
|
|
472
|
+
*
|
|
473
|
+
* @experimental Slot names are experimental until ADR-008 is accepted (W4-10).
|
|
474
|
+
*/
|
|
475
|
+
type ComboboxSlot = "root" | "control" | "value" | "chips" | "input" | "icon" | "clear" | "toggle" | "content" | "header" | "list" | "group" | "group-heading" | "item" | "item-indicator" | "create" | "empty" | "loading" | "footer";
|
|
476
|
+
|
|
477
|
+
/** The emphasis subset a badge offers. @experimental */
|
|
478
|
+
type BadgeVariant = Extract<Variant, "solid" | "soft" | "outline">;
|
|
479
|
+
/** The badge's own size scale, spelled with the shared names (§17). @experimental */
|
|
480
|
+
type BadgeSize = Extract<ControlSize, "xs" | "sm" | "md">;
|
|
481
|
+
/** Corner treatment; omitted keeps today's corner (D1). @experimental */
|
|
482
|
+
type BadgeShape = Extract<Shape, "rounded" | "pill">;
|
|
483
|
+
/**
|
|
484
|
+
* The one-axis words Badge accepted before W3-13. Each resolves to a
|
|
485
|
+
* `{ variant, intent }` pair through `resolveBadgeAppearance` and renders the
|
|
486
|
+
* same classes it always did.
|
|
487
|
+
*
|
|
488
|
+
* @deprecated Use `variant` (`solid | soft | outline`) with `intent` instead:
|
|
489
|
+
* `default` → `solid` + `brand`, `secondary` → `soft` + `neutral`,
|
|
490
|
+
* `destructive` → `soft` + `danger`, `success | warning | info` → `soft` +
|
|
491
|
+
* the same word. `outline` is already an emphasis and is not deprecated.
|
|
492
|
+
*/
|
|
493
|
+
type BadgeLegacyVariant = "default" | "secondary" | "destructive" | "success" | "warning" | "info";
|
|
494
|
+
/** A resolved `{ variant, intent }` pair. @experimental */
|
|
495
|
+
interface BadgeAppearance {
|
|
496
|
+
variant: BadgeVariant;
|
|
497
|
+
intent: Intent;
|
|
498
|
+
}
|
|
499
|
+
/** What a badge can be asked for: the two axes, either one, or a legacy word. @experimental */
|
|
500
|
+
interface BadgeAppearanceInput {
|
|
501
|
+
variant?: BadgeVariant | BadgeLegacyVariant | null | undefined;
|
|
502
|
+
intent?: Intent | null | undefined;
|
|
503
|
+
}
|
|
504
|
+
/**
|
|
505
|
+
* Resolves what a consumer asked for into the pair the class table is keyed by.
|
|
506
|
+
*
|
|
507
|
+
* - both axes: taken as given (a legacy `variant` word with an explicit
|
|
508
|
+
* `intent` keeps the word's emphasis and takes the intent);
|
|
509
|
+
* - `variant` only: the per-variant default intent, or the legacy pair;
|
|
510
|
+
* - `intent` only: the per-intent default variant;
|
|
511
|
+
* - nothing: `solid` + `brand`, today's default.
|
|
512
|
+
*
|
|
513
|
+
* @experimental
|
|
514
|
+
*/
|
|
515
|
+
declare function resolveBadgeAppearance({ variant, intent, }?: BadgeAppearanceInput): BadgeAppearance;
|
|
516
|
+
/** The inputs `badgeVariants` accepts (the legacy `variant` words included). @experimental */
|
|
517
|
+
interface BadgeVariantsProps extends BadgeAppearanceInput {
|
|
518
|
+
size?: BadgeSize | null | undefined;
|
|
519
|
+
shape?: BadgeShape | null | undefined;
|
|
520
|
+
class?: string | null | undefined;
|
|
521
|
+
className?: string | null | undefined;
|
|
522
|
+
}
|
|
523
|
+
/**
|
|
524
|
+
* The badge's class string, for consumers that style their own element.
|
|
525
|
+
* Same call shape as before W3-13 (`variant`, `size`, `class`/`className`),
|
|
526
|
+
* plus `intent` and `shape`; a legacy `variant` word yields the string it
|
|
527
|
+
* always did.
|
|
528
|
+
*/
|
|
529
|
+
declare function badgeVariants({ variant, intent, size, shape, class: classValue, className, }?: BadgeVariantsProps): string;
|
|
530
|
+
interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
|
|
531
|
+
/**
|
|
532
|
+
* Visual emphasis: `solid` (filled), `soft` (tinted, the status look) or
|
|
533
|
+
* `outline`. Omitted, it follows `intent` (brand is solid, the rest soft);
|
|
534
|
+
* with neither prop the badge is `solid` + `brand`, as it always was.
|
|
535
|
+
* The legacy one-axis words are accepted and deprecated (`BadgeLegacyVariant`).
|
|
536
|
+
*/
|
|
537
|
+
variant?: BadgeVariant | BadgeLegacyVariant | undefined;
|
|
538
|
+
/**
|
|
539
|
+
* Semantic meaning → colour family. Omitted, it follows `variant`
|
|
540
|
+
* (`solid` is brand, `soft` and `outline` are neutral).
|
|
541
|
+
* @experimental
|
|
542
|
+
*/
|
|
543
|
+
intent?: Intent;
|
|
544
|
+
/** `xs` (10px text, W3-13), `sm` (default) or `md`. */
|
|
545
|
+
size?: BadgeSize;
|
|
546
|
+
/**
|
|
547
|
+
* Corner treatment. Omitted keeps today's corner (`--radius-pill`);
|
|
548
|
+
* `rounded` is the `radius.badge` role, `pill` is `radius.full` (D1).
|
|
549
|
+
* @experimental
|
|
550
|
+
*/
|
|
551
|
+
shape?: BadgeShape | undefined;
|
|
552
|
+
/** Leading status dot, drawn in the text colour. */
|
|
553
|
+
dot?: boolean;
|
|
554
|
+
/** Leading 14px glyph. */
|
|
555
|
+
icon?: React.ReactNode;
|
|
556
|
+
}
|
|
557
|
+
declare const Badge: React$1.ForwardRefExoticComponent<BadgeProps & React$1.RefAttributes<HTMLSpanElement>>;
|
|
558
|
+
|
|
559
|
+
/**
|
|
560
|
+
* FileChip — compact attachment row: a colored file-type tile, the file
|
|
561
|
+
* name, a "size · when" meta line, and an optional trailing action
|
|
562
|
+
* (View / Download). Used in the AI receipt panel, document mini-lists,
|
|
563
|
+
* and message attachments.
|
|
564
|
+
*
|
|
565
|
+
* The tile tone keys off `kind`: documents are danger-tinted (PDF red),
|
|
566
|
+
* sheets success, images info, generic neutral — a quick visual file-type
|
|
567
|
+
* cue without a bespoke icon per extension.
|
|
568
|
+
*/
|
|
569
|
+
type FileKind = "doc" | "sheet" | "image" | "generic";
|
|
570
|
+
interface FileChipProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
571
|
+
name: string;
|
|
572
|
+
/** Right-side meta, e.g. "240 KB · uploaded just now". */
|
|
573
|
+
meta?: React.ReactNode;
|
|
574
|
+
kind?: FileKind;
|
|
575
|
+
/** Custom glyph inside the tile; defaults to a document icon. */
|
|
576
|
+
icon?: React.ReactNode;
|
|
577
|
+
/** Trailing action node (a Button / link). */
|
|
578
|
+
action?: React.ReactNode;
|
|
579
|
+
}
|
|
580
|
+
declare const FileChip: React$1.ForwardRefExoticComponent<FileChipProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
581
|
+
|
|
582
|
+
/**
|
|
583
|
+
* Theme scope — the host dimensions a subtree renders with (W5-02).
|
|
584
|
+
*
|
|
585
|
+
* The design system's scopes are DOM attributes: `[data-ds-scheme]`,
|
|
586
|
+
* `[data-ds-brand]`, `[data-ds-density]`, `dir`, and the `--ds-*` style a
|
|
587
|
+
* runtime brand writes (`createBrandTheme`). Set on the document root they
|
|
588
|
+
* reach everything, portalled overlays included. Set on a *subtree* they stop
|
|
589
|
+
* at the subtree: a Dialog or Popover opened from inside it renders in
|
|
590
|
+
* `document.body`, outside the scope, and comes up in the root theme.
|
|
591
|
+
*
|
|
592
|
+
* `ThemeScope` fixes that. It stamps the attributes on its own element, as a
|
|
593
|
+
* hand-written scope would, **and** registers them in context, so the shared
|
|
594
|
+
* `Portal` (`primitives/behavior/portal.tsx`) can re-stamp the same attributes
|
|
595
|
+
* and runtime-brand style on the container wrapper it mounts portalled content
|
|
596
|
+
* into. Nested scopes merge: a `density="compact"` scope inside a `brand="tax"`
|
|
597
|
+
* one propagates both.
|
|
598
|
+
*
|
|
599
|
+
* Apps that scope the document root need none of this; the portal path is
|
|
600
|
+
* unchanged for them (no wrapper is created).
|
|
601
|
+
*/
|
|
602
|
+
/** The scheme a subtree renders with (`[data-ds-scheme]`). */
|
|
603
|
+
type ThemeScheme = "light" | "dark";
|
|
604
|
+
/** A built-in brand scope (`[data-ds-brand]`). */
|
|
605
|
+
type ThemeBrand = "pro" | "audit" | "books" | "tax";
|
|
606
|
+
/** The density scope (`[data-ds-density]`, W2-06). */
|
|
607
|
+
type ThemeDensity = "comfortable" | "compact";
|
|
608
|
+
/** Text direction (`dir`). */
|
|
609
|
+
type ThemeDirection = "ltr" | "rtl";
|
|
610
|
+
/**
|
|
611
|
+
* The dimensions a scope sets. Every field is optional; an unset field is
|
|
612
|
+
* inherited from the enclosing scope, then from the document.
|
|
613
|
+
*
|
|
614
|
+
* @experimental
|
|
615
|
+
*/
|
|
616
|
+
interface ThemeScopeValue {
|
|
617
|
+
scheme?: ThemeScheme | undefined;
|
|
618
|
+
brand?: ThemeBrand | undefined;
|
|
619
|
+
density?: ThemeDensity | undefined;
|
|
620
|
+
dir?: ThemeDirection | undefined;
|
|
621
|
+
/**
|
|
622
|
+
* A registered runtime brand: the object `createBrandTheme()` returns. It is
|
|
623
|
+
* applied as inline `--ds-*` style on the scope element and re-applied on
|
|
624
|
+
* portalled content.
|
|
625
|
+
*/
|
|
626
|
+
brandTheme?: BrandTheme | undefined;
|
|
627
|
+
}
|
|
628
|
+
/** Props of {@link ThemeScope}. @experimental */
|
|
629
|
+
interface ThemeScopeProps extends ThemeScopeValue, Omit<React.HTMLAttributes<HTMLDivElement>, "dir"> {
|
|
630
|
+
children?: ReactNode;
|
|
631
|
+
}
|
|
632
|
+
/**
|
|
633
|
+
* A `<div>` that scopes the host dimensions of its subtree — scheme, brand,
|
|
634
|
+
* density, direction and a runtime brand — and propagates them into every
|
|
635
|
+
* overlay opened from inside it (Dialog, Sheet, Popover, Tooltip, menus,
|
|
636
|
+
* Select, Toast …), which would otherwise render in the document's theme.
|
|
637
|
+
*
|
|
638
|
+
* ```tsx
|
|
639
|
+
* <ThemeScope brand="tax" density="compact">
|
|
640
|
+
* <Popover>…</Popover> // its content renders as compact Tax, too
|
|
641
|
+
* </ThemeScope>
|
|
642
|
+
*
|
|
643
|
+
* <ThemeScope brandTheme={createBrandTheme({ brand: firm.primary })}>
|
|
644
|
+
* <Dialog>…</Dialog> // the runtime brand follows the dialog to <body>
|
|
645
|
+
* </ThemeScope>
|
|
646
|
+
* ```
|
|
647
|
+
*
|
|
648
|
+
* Nothing changes for apps that scope `<html>` or `<body>`: no wrapper is
|
|
649
|
+
* created around portalled content when no `ThemeScope` encloses it.
|
|
650
|
+
*
|
|
651
|
+
* @experimental W5-02. The public shape follows decision D7 for the runtime
|
|
652
|
+
* brand seed.
|
|
653
|
+
*/
|
|
654
|
+
declare const ThemeScope: React$1.ForwardRefExoticComponent<ThemeScopeProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
655
|
+
|
|
656
|
+
/**
|
|
657
|
+
* How `TableHead` sets its column labels (W6-02).
|
|
658
|
+
* - `plain` (default) — sentence case in the body font, 14px medium, `text-fg-3`.
|
|
659
|
+
* This is what Table renders today and what Pro's `HEADER_CLS` override
|
|
660
|
+
* reproduces by hand.
|
|
661
|
+
* - `overline` — the mono uppercase eyebrow (`text-overline` role, `text-fg-4`).
|
|
662
|
+
*
|
|
663
|
+
* @experimental
|
|
664
|
+
*/
|
|
665
|
+
type TableHeaderStyle = "plain" | "overline";
|
|
666
|
+
/** Horizontal alignment of a cell's content, in logical (writing-direction) terms. @experimental */
|
|
667
|
+
type TableCellAlign = "start" | "center" | "end";
|
|
668
|
+
/** Which edge a cell sticks to while the wrapper scrolls horizontally (W6-10). @experimental */
|
|
669
|
+
type TableStickyEdge = "start" | "end";
|
|
670
|
+
/** A column's sort direction; `null` is "sortable, not sorted". @experimental */
|
|
671
|
+
type TableSortDirection = "asc" | "desc";
|
|
672
|
+
interface TableProps extends React.TableHTMLAttributes<HTMLTableElement> {
|
|
673
|
+
/** Class for the wrapping `div` that handles overflow. */
|
|
674
|
+
wrapperClassName?: string;
|
|
675
|
+
/**
|
|
676
|
+
* Per-part classes (W2-17 pattern). `wrapper` is the overflow container —
|
|
677
|
+
* the same element `wrapperClassName` styles (C-CLASSNAME-PROPS).
|
|
678
|
+
*
|
|
679
|
+
* @experimental
|
|
680
|
+
*/
|
|
681
|
+
classNames?: Partial<Record<Extract<TableSlot, "wrapper">, string>>;
|
|
682
|
+
/**
|
|
683
|
+
* The header label style (W6-02). Default `plain` — today's sentence-case
|
|
684
|
+
* labels. `overline` renders the mono uppercase eyebrow.
|
|
685
|
+
*
|
|
686
|
+
* @experimental
|
|
687
|
+
*/
|
|
688
|
+
headerStyle?: TableHeaderStyle;
|
|
689
|
+
/**
|
|
690
|
+
* Row density (W6-11). Stamps `data-ds-density` on the wrapper, so the
|
|
691
|
+
* whole table — its rows and the controls inside them — renders one step
|
|
692
|
+
* denser: 36px rows, 12px horizontal and 8px vertical cell padding, read
|
|
693
|
+
* from the `--ds-table-*` tokens the scope re-points. Undefined leaves the
|
|
694
|
+
* table on the ambient scope (ADR-013: density is a scope; this prop is the
|
|
695
|
+
* scope on the table's own element).
|
|
696
|
+
*
|
|
697
|
+
* @experimental
|
|
698
|
+
*/
|
|
699
|
+
density?: ThemeDensity;
|
|
700
|
+
/**
|
|
701
|
+
* Keep the header row visible while the wrapper scrolls vertically (W6-10).
|
|
702
|
+
* Give the wrapper a height (`wrapperClassName="max-h-96"`) for it to
|
|
703
|
+
* scroll. Header cells become `position: sticky` with the surface-2
|
|
704
|
+
* background they already have.
|
|
705
|
+
*
|
|
706
|
+
* @experimental
|
|
707
|
+
*/
|
|
708
|
+
stickyHeader?: boolean;
|
|
709
|
+
/**
|
|
710
|
+
* Copy for this table; prop > provider > English default (W5-20). The only
|
|
711
|
+
* message today is the accessible name of the horizontal scroll region
|
|
712
|
+
* (`region`).
|
|
713
|
+
*
|
|
714
|
+
* @experimental
|
|
715
|
+
*/
|
|
716
|
+
messages?: Partial<TableMessages>;
|
|
717
|
+
}
|
|
718
|
+
declare const Table: React$1.ForwardRefExoticComponent<TableProps & React$1.RefAttributes<HTMLTableElement>>;
|
|
719
|
+
type TableHeaderProps = React.HTMLAttributes<HTMLTableSectionElement>;
|
|
720
|
+
declare const TableHeader: React$1.ForwardRefExoticComponent<TableHeaderProps & React$1.RefAttributes<HTMLTableSectionElement>>;
|
|
721
|
+
type TableBodyProps = React.HTMLAttributes<HTMLTableSectionElement>;
|
|
722
|
+
declare const TableBody: React$1.ForwardRefExoticComponent<TableBodyProps & React$1.RefAttributes<HTMLTableSectionElement>>;
|
|
723
|
+
type TableFooterProps = React.HTMLAttributes<HTMLTableSectionElement>;
|
|
724
|
+
declare const TableFooter: React$1.ForwardRefExoticComponent<TableFooterProps & React$1.RefAttributes<HTMLTableSectionElement>>;
|
|
725
|
+
interface TableRowProps extends React.HTMLAttributes<HTMLTableRowElement> {
|
|
726
|
+
/**
|
|
727
|
+
* The row is part of the current selection: renders `data-state="selected"`
|
|
728
|
+
* (P-DATA-STATE — the attribute consumers already set by hand keeps working)
|
|
729
|
+
* and the brand tint.
|
|
730
|
+
*
|
|
731
|
+
* @experimental
|
|
732
|
+
*/
|
|
733
|
+
selected?: boolean | undefined;
|
|
734
|
+
/**
|
|
735
|
+
* The row itself is a click target (W6-01): a tab stop with a focus ring,
|
|
736
|
+
* Enter and Space fire `onClick` — Pressable's contract on a `<tr>`, which
|
|
737
|
+
* stays a `<tr>` (P-NATIVE-TABLE; a `role="button"` would take its cells
|
|
738
|
+
* out of the table). Keys pressed on a control inside the row (a checkbox,
|
|
739
|
+
* a menu button) are left to that control.
|
|
740
|
+
*
|
|
741
|
+
* @experimental
|
|
742
|
+
*/
|
|
743
|
+
interactive?: boolean;
|
|
744
|
+
}
|
|
745
|
+
declare const TableRow: React$1.ForwardRefExoticComponent<TableRowProps & React$1.RefAttributes<HTMLTableRowElement>>;
|
|
746
|
+
/** The props `TableHead` and `TableCell` share (W6-01). @experimental */
|
|
747
|
+
interface TableCellCommonProps {
|
|
748
|
+
/**
|
|
749
|
+
* Content alignment, logical: `end` is what a consumer wrote `text-right`
|
|
750
|
+
* for (60 times in Pro). Default `start`. Replaces the deprecated HTML
|
|
751
|
+
* `align` attribute on the cell, which no consumer passes.
|
|
752
|
+
*/
|
|
753
|
+
align?: TableCellAlign | undefined;
|
|
754
|
+
/** A column of figures: tabular numerals and `end` alignment. */
|
|
755
|
+
numeric?: boolean | undefined;
|
|
756
|
+
/** Clip overflowing content with an ellipsis (`truncate`, `max-width: 0`); pair with `width`. */
|
|
757
|
+
truncate?: boolean | undefined;
|
|
758
|
+
/** Column width, as a CSS length or a pixel number — an inline `width` on the cell. */
|
|
759
|
+
width?: number | string | undefined;
|
|
760
|
+
/**
|
|
761
|
+
* Stick the cell to the `start` or `end` edge while the wrapper scrolls
|
|
762
|
+
* horizontally (W6-10): the Pro sticky action column. The cell paints the
|
|
763
|
+
* surface it sits on so scrolled content never shows through it.
|
|
764
|
+
*/
|
|
765
|
+
sticky?: TableStickyEdge | undefined;
|
|
766
|
+
}
|
|
767
|
+
interface TableHeadProps extends Omit<React.ThHTMLAttributes<HTMLTableCellElement>, "align">, TableCellCommonProps {
|
|
768
|
+
/**
|
|
769
|
+
* The column's sort state (W6-01): `"asc"`, `"desc"`, or `null` for a
|
|
770
|
+
* sortable column that is not sorted. Undefined (the default) is a plain,
|
|
771
|
+
* unsortable header. Setting it renders the label inside a `<button>` that
|
|
772
|
+
* cycles none → asc → desc → none through `onSortChange` (the order
|
|
773
|
+
* `DataTableHeader` has always used) and reflects the state as `aria-sort`
|
|
774
|
+
* and `data-state`. The `<th>`'s text stays the label alone (C-DOM-14).
|
|
775
|
+
*
|
|
776
|
+
* @experimental
|
|
777
|
+
*/
|
|
778
|
+
sort?: TableSortDirection | null | undefined;
|
|
779
|
+
/** Receives the next step of the sort cycle when the header is activated. */
|
|
780
|
+
onSortChange?: ((sort: TableSortDirection | null) => void) | undefined;
|
|
781
|
+
}
|
|
782
|
+
declare const TableHead: React$1.ForwardRefExoticComponent<TableHeadProps & React$1.RefAttributes<HTMLTableCellElement>>;
|
|
783
|
+
interface TableCellProps extends Omit<React.TdHTMLAttributes<HTMLTableCellElement>, "align">, TableCellCommonProps {
|
|
784
|
+
/**
|
|
785
|
+
* Secondary content — `text-fg-3` (content-muted), what a consumer wrote
|
|
786
|
+
* `text-muted-foreground` for (90 times in Pro).
|
|
787
|
+
*/
|
|
788
|
+
muted?: boolean;
|
|
789
|
+
}
|
|
790
|
+
declare const TableCell: React$1.ForwardRefExoticComponent<TableCellProps & React$1.RefAttributes<HTMLTableCellElement>>;
|
|
791
|
+
type TableCaptionProps = React.HTMLAttributes<HTMLTableCaptionElement>;
|
|
792
|
+
declare const TableCaption: React$1.ForwardRefExoticComponent<TableCaptionProps & React$1.RefAttributes<HTMLTableCaptionElement>>;
|
|
793
|
+
|
|
794
|
+
/**
|
|
795
|
+
* Practice service tones for the client portal. Each engagement surface
|
|
796
|
+
* (card, ring, timeline) is "toned per service": a fill color + a track
|
|
797
|
+
* tint. Rather than fork every primitive's `variant` enum, portal
|
|
798
|
+
* composites set these two CSS vars (`--tone`, `--tone-bg`) once on their
|
|
799
|
+
* root and let descendants read them via `[color:var(--tone)]` /
|
|
800
|
+
* `[background:var(--tone-bg)]`. One place owns the mapping; theming and
|
|
801
|
+
* dark mode flow through the underlying `--color-service-*` tokens.
|
|
802
|
+
*/
|
|
803
|
+
type ServiceTone = "tax" | "audit" | "accounting" | "neutral";
|
|
804
|
+
/**
|
|
805
|
+
* CSS-var style object to spread on a service-toned root. Descendants read
|
|
806
|
+
* `var(--tone)` / `var(--tone-bg)`; the cast is required because
|
|
807
|
+
* `CSSProperties` doesn't type custom properties.
|
|
808
|
+
*/
|
|
809
|
+
declare function serviceToneStyle(tone: ServiceTone): CSSProperties;
|
|
810
|
+
declare const SERVICE_TONES: ServiceTone[];
|
|
811
|
+
/** Human label for a tone, for chips and headings. */
|
|
812
|
+
declare const serviceToneLabel: Record<ServiceTone, string>;
|
|
813
|
+
|
|
814
|
+
interface DataTableProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
815
|
+
/** When true, renders the table card with a flat top edge so it
|
|
816
|
+
* visually attaches to a `<DataTableToolbar>` above it. */
|
|
817
|
+
withToolbar?: boolean;
|
|
818
|
+
}
|
|
819
|
+
/**
|
|
820
|
+
* DataTable — outer wrapper. Children are typically:
|
|
821
|
+
* <DataTableToolbar /> + <table> + <DataTablePagination />.
|
|
822
|
+
*
|
|
823
|
+
* The `<table>` is hand-written by the consumer; this wrapper renders
|
|
824
|
+
* the surface card chrome on its descendant `<table>` element via a
|
|
825
|
+
* Tailwind arbitrary-variant selector. When `withToolbar` is set, the
|
|
826
|
+
* top corners flatten so the table visually joins the toolbar above.
|
|
827
|
+
*
|
|
828
|
+
* Children render in document order — toolbar (if any) then `<table>`
|
|
829
|
+
* then pagination — with the table card and the pagination not sharing
|
|
830
|
+
* a background.
|
|
831
|
+
*/
|
|
832
|
+
declare const DataTable: React$1.ForwardRefExoticComponent<DataTableProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
833
|
+
type DataTableToolbarProps = React.HTMLAttributes<HTMLDivElement>;
|
|
834
|
+
/**
|
|
835
|
+
* DataTableToolbar — header strip at the top of the table card. The outer
|
|
836
|
+
* frame is owned by `<DataTable>`, so this is just a row with a bottom
|
|
837
|
+
* divider separating it from the table below.
|
|
838
|
+
*/
|
|
839
|
+
declare const DataTableToolbar: React$1.ForwardRefExoticComponent<DataTableToolbarProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
840
|
+
interface DataTableSearchProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> {
|
|
841
|
+
/** Override the default placeholder. */
|
|
842
|
+
placeholder?: string;
|
|
843
|
+
}
|
|
844
|
+
/**
|
|
845
|
+
* DataTableSearch — small search input slot inside the toolbar. Wraps
|
|
846
|
+
* the `Input` primitive at `inputSize="sm"` with a leading search icon.
|
|
847
|
+
*/
|
|
848
|
+
declare const DataTableSearch: React$1.ForwardRefExoticComponent<DataTableSearchProps & React$1.RefAttributes<HTMLInputElement>>;
|
|
849
|
+
type DataTableSpacerProps = React.HTMLAttributes<HTMLSpanElement>;
|
|
850
|
+
/** DataTableSpacer — `flex-1` spacer for arranging toolbar items. */
|
|
851
|
+
declare const DataTableSpacer: React$1.ForwardRefExoticComponent<DataTableSpacerProps & React$1.RefAttributes<HTMLSpanElement>>;
|
|
852
|
+
interface DataTableResultsCountProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "children"> {
|
|
853
|
+
current: number;
|
|
854
|
+
total: number;
|
|
855
|
+
}
|
|
856
|
+
/**
|
|
857
|
+
* DataTableResultsCount — small "12 of 247" indicator. Mono + tabular.
|
|
858
|
+
*/
|
|
859
|
+
declare const DataTableResultsCount: React$1.ForwardRefExoticComponent<DataTableResultsCountProps & React$1.RefAttributes<HTMLSpanElement>>;
|
|
860
|
+
/** DataTableHead — `<thead>`; alias of `TableHeader`. */
|
|
861
|
+
type DataTableHeadProps = TableHeaderProps;
|
|
862
|
+
declare const DataTableHead: React$1.ForwardRefExoticComponent<TableHeaderProps & React$1.RefAttributes<HTMLTableSectionElement>>;
|
|
863
|
+
/** DataTableBody — `<tbody>`; alias of `TableBody`. Last row drops its bottom border. */
|
|
864
|
+
type DataTableBodyProps = TableBodyProps;
|
|
865
|
+
declare const DataTableBody: React$1.ForwardRefExoticComponent<TableBodyProps & React$1.RefAttributes<HTMLTableSectionElement>>;
|
|
866
|
+
/**
|
|
867
|
+
* DataTableRow — `<tr>`; alias of `TableRow`. `selected` renders
|
|
868
|
+
* `data-state="selected"` and the brand tint (P-DATA-STATE); `interactive`
|
|
869
|
+
* (W6-01) makes the row a click target.
|
|
870
|
+
*/
|
|
871
|
+
type DataTableRowProps = TableRowProps;
|
|
872
|
+
declare const DataTableRow: React$1.ForwardRefExoticComponent<TableRowProps & React$1.RefAttributes<HTMLTableRowElement>>;
|
|
873
|
+
type SortDirection = TableSortDirection;
|
|
874
|
+
interface DataTableHeaderProps extends Omit<TableHeadProps, "sort" | "onSortChange"> {
|
|
875
|
+
/** When true, the cell becomes a clickable button that toggles sort
|
|
876
|
+
* state and renders a chevron indicator. */
|
|
877
|
+
sortable?: boolean;
|
|
878
|
+
/** Initial sort direction when the header mounts in a sorted state. */
|
|
879
|
+
defaultSort?: SortDirection;
|
|
880
|
+
/** Optional controlled sort state. When provided, `onSortChange` should
|
|
881
|
+
* also be wired up — the header becomes fully controlled. */
|
|
882
|
+
sort?: SortDirection | null;
|
|
883
|
+
/** Fires whenever the user clicks a sortable header. */
|
|
884
|
+
onSortChange?: (sort: SortDirection | null) => void;
|
|
885
|
+
}
|
|
886
|
+
/**
|
|
887
|
+
* DataTableHeader — `<th scope="col">`; alias of `TableHead` that keeps the
|
|
888
|
+
* DataTable sort API: `sortable` gates sorting, the sort state is uncontrolled
|
|
889
|
+
* (`defaultSort`) or controlled (`sort` + `onSortChange`). Sort cycle when
|
|
890
|
+
* uncontrolled: unsorted → asc → desc → unsorted (3-state). The sort button
|
|
891
|
+
* is the header's direct child `<button>` (C-DOM-13), styled like
|
|
892
|
+
* `TableHead`'s.
|
|
893
|
+
*/
|
|
894
|
+
declare const DataTableHeader: React$1.ForwardRefExoticComponent<DataTableHeaderProps & React$1.RefAttributes<HTMLTableCellElement>>;
|
|
895
|
+
/** DataTableCell — `<td>`; alias of `TableCell` (13px / fg-2, W6-01 cell props). */
|
|
896
|
+
type DataTableCellProps = TableCellProps;
|
|
897
|
+
declare const DataTableCell: React$1.ForwardRefExoticComponent<TableCellProps & React$1.RefAttributes<HTMLTableCellElement>>;
|
|
898
|
+
/**
|
|
899
|
+
* DataTableCellName — primary identifier of the row. Display font,
|
|
900
|
+
* fg color, medium weight.
|
|
901
|
+
*/
|
|
902
|
+
declare const DataTableCellName: React$1.ForwardRefExoticComponent<TableCellProps & React$1.RefAttributes<HTMLTableCellElement>>;
|
|
903
|
+
/**
|
|
904
|
+
* DataTableCellMono — currency / IDs / numerics. Body font (Plus Jakarta
|
|
905
|
+
* Sans) with tabular numerals so columns of figures stay aligned.
|
|
906
|
+
*/
|
|
907
|
+
declare const DataTableCellMono: React$1.ForwardRefExoticComponent<TableCellProps & React$1.RefAttributes<HTMLTableCellElement>>;
|
|
908
|
+
/**
|
|
909
|
+
* DataTableCellId — muted ID (EIN, UUID, "5h ago") in the body font
|
|
910
|
+
* (Plus Jakarta Sans) with tabular numerals.
|
|
911
|
+
*/
|
|
912
|
+
declare const DataTableCellId: React$1.ForwardRefExoticComponent<TableCellProps & React$1.RefAttributes<HTMLTableCellElement>>;
|
|
913
|
+
interface DataTableCellDueProps extends Omit<DataTableCellProps, "children"> {
|
|
914
|
+
/** Date this row is due. */
|
|
915
|
+
value: Date;
|
|
916
|
+
/** Optional override for the displayed label (defaults to the
|
|
917
|
+
* formatted date). */
|
|
918
|
+
children?: ReactNode;
|
|
919
|
+
}
|
|
920
|
+
/**
|
|
921
|
+
* DataTableCellDue — accepts a Date and auto-colors:
|
|
922
|
+
* diff < 0 → text-danger-fg (overdue)
|
|
923
|
+
* diff < 14d → text-warning-fg (due-near)
|
|
924
|
+
* otherwise → text-fg-3 (default)
|
|
925
|
+
*
|
|
926
|
+
* The 14-day threshold and day-rounding (`Math.floor`) match the
|
|
927
|
+
* `.cell-due-near` / `.cell-due-overdue` CSS classes in the mockup.
|
|
928
|
+
*/
|
|
929
|
+
declare const DataTableCellDue: React$1.ForwardRefExoticComponent<DataTableCellDueProps & React$1.RefAttributes<HTMLTableCellElement>>;
|
|
930
|
+
interface DataTableCheckboxProps extends Omit<DataTableCellProps, "onChange" | "defaultChecked" | "children"> {
|
|
931
|
+
/** Forwarded to the inner `Checkbox` primitive. */
|
|
932
|
+
checked?: boolean | "indeterminate";
|
|
933
|
+
defaultChecked?: boolean | "indeterminate";
|
|
934
|
+
onCheckedChange?: (checked: boolean | "indeterminate") => void;
|
|
935
|
+
/** Accessible label for the checkbox (e.g. "Select row Acme Corp."). */
|
|
936
|
+
ariaLabel?: string;
|
|
937
|
+
disabled?: boolean;
|
|
938
|
+
/** Render the cell as `<th>` (for the select-all header) instead of `<td>`. */
|
|
939
|
+
asHeader?: boolean;
|
|
940
|
+
}
|
|
941
|
+
/**
|
|
942
|
+
* DataTableCheckbox — `<td>` (or `<th>` with `asHeader`) containing the
|
|
943
|
+
* row-selection checkbox: `TableCell` / `TableHead` tightened to a 32px
|
|
944
|
+
* column with no right padding to match `.row-checkbox` in the spec.
|
|
945
|
+
*/
|
|
946
|
+
declare const DataTableCheckbox: React$1.ForwardRefExoticComponent<DataTableCheckboxProps & React$1.RefAttributes<HTMLTableCellElement>>;
|
|
947
|
+
|
|
948
|
+
/**
|
|
949
|
+
* DataTableView — config-driven table on top of the composition
|
|
950
|
+
* `DataTable*` primitives. Every list/table screen is just a config:
|
|
951
|
+
* `columns` + `data` (+ optional `filters` / `searchKeys` / sort). Since
|
|
952
|
+
* W6-07 the search / filter / sort / pagination *state* lives in the
|
|
953
|
+
* headless `useDataTable` controller, so each of sort, page and search is
|
|
954
|
+
* **controllable** (`sorting` / `onSortingChange`, `page` / `onPageChange`,
|
|
955
|
+
* `search` / `onSearchChange`) while the uncontrolled defaults and the DOM
|
|
956
|
+
* stay exactly what they were: `<th>` text is `column.header`, the sort
|
|
957
|
+
* cycle is unsorted → asc → desc → unsorted (C-DOM-14). The table chrome,
|
|
958
|
+
* sortable headers and pagination all come from the existing `DataTable`
|
|
959
|
+
* family (no fork, no second table chrome).
|
|
960
|
+
*
|
|
961
|
+
* It complements — does not replace — the composition API: reach for the
|
|
962
|
+
* raw `DataTable*` parts when a screen needs bespoke cells or layout; reach
|
|
963
|
+
* for `DataTableView` when the table is "columns + rows + the usual
|
|
964
|
+
* toolbar." Render helpers (`EmptyValue`, `TagsCell`) cover the generic
|
|
965
|
+
* cell shapes; the product-flavoured ones (`StagePill`, `Assignee`,
|
|
966
|
+
* `MoneyCell`) are deprecated and flagged for hand-over to TAX (W6-14 →
|
|
967
|
+
* W8-13).
|
|
968
|
+
*/
|
|
969
|
+
type TableRowData = Record<string, unknown>;
|
|
970
|
+
interface DataTableViewColumn<Row extends TableRowData> {
|
|
971
|
+
key: string;
|
|
972
|
+
header: string;
|
|
973
|
+
/** Column width. Fixed px (`"120px"`) sets a hard width; a grid-style
|
|
974
|
+
* `"minmax(190px,1.5fr)"` is read as a `min-width` and the column flexes. */
|
|
975
|
+
width?: string;
|
|
976
|
+
sortable?: boolean;
|
|
977
|
+
align?: "right";
|
|
978
|
+
/** Custom sort accessor (e.g. a numeric `lastDays` behind a "5h ago" label). */
|
|
979
|
+
sortValue?: (row: Row) => string | number | null | undefined;
|
|
980
|
+
/** Custom cell renderer; defaults to the raw field value. */
|
|
981
|
+
render?: (row: Row) => ReactNode;
|
|
982
|
+
}
|
|
983
|
+
interface DataTableViewFilter<Row extends TableRowData> {
|
|
984
|
+
key: string;
|
|
985
|
+
label?: string;
|
|
986
|
+
allLabel?: string;
|
|
987
|
+
options: (string | {
|
|
988
|
+
value: string;
|
|
989
|
+
label: string;
|
|
990
|
+
})[];
|
|
991
|
+
match: (row: Row, value: string) => boolean;
|
|
992
|
+
}
|
|
993
|
+
/**
|
|
994
|
+
* Row selection. Controlled: the caller owns the id set, so a selection can
|
|
995
|
+
* outlive a filter change (or be cleared on one) — that policy belongs to the
|
|
996
|
+
* screen, not the table.
|
|
997
|
+
*/
|
|
998
|
+
interface DataTableViewSelection<Row extends TableRowData> {
|
|
999
|
+
/** Ids of selected rows, keyed by `rowKey`. May include rows not currently visible. */
|
|
1000
|
+
selectedIds: ReadonlySet<string>;
|
|
1001
|
+
onSelectionChange: (selectedIds: Set<string>) => void;
|
|
1002
|
+
/**
|
|
1003
|
+
* Rows the caller will not accept — e.g. an already-sent record. They render a
|
|
1004
|
+
* disabled checkbox and are excluded from select-all, so "all" never selects
|
|
1005
|
+
* something the action would reject.
|
|
1006
|
+
*/
|
|
1007
|
+
isRowSelectable?: (row: Row) => boolean;
|
|
1008
|
+
/**
|
|
1009
|
+
* What the header checkbox covers. **Required decision, not a default to
|
|
1010
|
+
* ignore:** with 132 filtered rows across 9 pages, "select all" meaning *this
|
|
1011
|
+
* page* and meaning *all 132* are different features, and a table that guesses
|
|
1012
|
+
* eventually acts on 132 records when the user saw 15.
|
|
1013
|
+
* `"page"` (default) — the rows currently on screen.
|
|
1014
|
+
* `"filtered"` — every row matching the active search and filters.
|
|
1015
|
+
*/
|
|
1016
|
+
selectAllScope?: "page" | "filtered" | undefined;
|
|
1017
|
+
/** Accessible label for a row's checkbox, e.g. ``(row) => `Select ${row.name}` ``. */
|
|
1018
|
+
rowLabel?: (row: Row) => string;
|
|
1019
|
+
}
|
|
1020
|
+
/**
|
|
1021
|
+
* The sort of a `DataTableView`: one column key and a direction, or `null`
|
|
1022
|
+
* for unsorted. The shape `initialSort` has always used.
|
|
1023
|
+
*
|
|
1024
|
+
* @experimental
|
|
1025
|
+
*/
|
|
1026
|
+
type DataTableViewSort = {
|
|
1027
|
+
key: string;
|
|
1028
|
+
dir: SortDirection;
|
|
1029
|
+
} | null;
|
|
1030
|
+
interface DataTableViewProps<Row extends TableRowData> {
|
|
1031
|
+
columns: DataTableViewColumn<Row>[];
|
|
1032
|
+
data: Row[];
|
|
1033
|
+
filters?: DataTableViewFilter<Row>[];
|
|
1034
|
+
searchKeys?: string[];
|
|
1035
|
+
searchPlaceholder?: string;
|
|
1036
|
+
/** The sort the table starts with when `sorting` is not controlled. */
|
|
1037
|
+
initialSort?: DataTableViewSort;
|
|
1038
|
+
/**
|
|
1039
|
+
* Controlled sort (W6-07). Pass it with `onSortingChange` to own the sort —
|
|
1040
|
+
* e.g. to mirror it into the URL — instead of listening for header clicks.
|
|
1041
|
+
* Omit it for the uncontrolled default seeded by `initialSort`.
|
|
1042
|
+
*
|
|
1043
|
+
* @experimental
|
|
1044
|
+
*/
|
|
1045
|
+
sorting?: DataTableViewSort;
|
|
1046
|
+
/** Called with the next sort when a header is pressed; the cycle is asc → desc → unsorted. @experimental */
|
|
1047
|
+
onSortingChange?: (sorting: DataTableViewSort) => void;
|
|
1048
|
+
/** Controlled 1-based page (W6-07). @experimental */
|
|
1049
|
+
page?: number;
|
|
1050
|
+
/** Called with the next page, including the return to page 1 on a search or filter change. @experimental */
|
|
1051
|
+
onPageChange?: (page: number) => void;
|
|
1052
|
+
/** Controlled search text (W6-07). @experimental */
|
|
1053
|
+
search?: string;
|
|
1054
|
+
/** Called with the search text on every keystroke. @experimental */
|
|
1055
|
+
onSearchChange?: (search: string) => void;
|
|
1056
|
+
onRowClick?: (row: Row) => void;
|
|
1057
|
+
rowKey?: string;
|
|
1058
|
+
pageSize?: number;
|
|
1059
|
+
/**
|
|
1060
|
+
* Hide the pager when every row fits on one page. Default `true` — the 1.x
|
|
1061
|
+
* behaviour, kept here although `Pagination` itself defaults to `false` in
|
|
1062
|
+
* 2.0 (W9-10). Pass `false` to always show the pager. @experimental
|
|
1063
|
+
*/
|
|
1064
|
+
hideOnSinglePage?: boolean;
|
|
1065
|
+
/** Plural noun for the footer / empty state, e.g. "clients". */
|
|
1066
|
+
itemLabel?: string;
|
|
1067
|
+
/** Opt in to row selection. Omit it and the table renders exactly as before. */
|
|
1068
|
+
selection?: DataTableViewSelection<Row>;
|
|
1069
|
+
className?: string;
|
|
1070
|
+
}
|
|
1071
|
+
declare function DataTableView<Row extends TableRowData>({ columns, data, filters, searchKeys, searchPlaceholder, initialSort, sorting: sortingProp, onSortingChange, page: pageProp, onPageChange, search: searchProp, onSearchChange, onRowClick, rowKey, pageSize, hideOnSinglePage, itemLabel, selection, className, }: DataTableViewProps<Row>): react_jsx_runtime.JSX.Element;
|
|
1072
|
+
/**
|
|
1073
|
+
* EmptyValue — the em-dash placeholder for a cell with no value. Generic:
|
|
1074
|
+
* no copy, no product tone.
|
|
1075
|
+
*
|
|
1076
|
+
* @experimental
|
|
1077
|
+
*/
|
|
1078
|
+
declare function EmptyValue(): react_jsx_runtime.JSX.Element;
|
|
1079
|
+
/**
|
|
1080
|
+
* Em-dash placeholder for empty cells.
|
|
1081
|
+
*
|
|
1082
|
+
* @deprecated Renamed `EmptyValue` (W6-14); same DOM. Removed in 3.0.
|
|
1083
|
+
*/
|
|
1084
|
+
declare function Dash(): react_jsx_runtime.JSX.Element;
|
|
1085
|
+
/** TagsCell — first tag + "+N" overflow. */
|
|
1086
|
+
declare function TagsCell({ items }: {
|
|
1087
|
+
items?: string[];
|
|
1088
|
+
}): react_jsx_runtime.JSX.Element;
|
|
1089
|
+
/**
|
|
1090
|
+
* Stage tones of {@link StagePill}. "blue" and "violet" are the Tax and Pro
|
|
1091
|
+
* brand tones: product vocabulary, not a system palette.
|
|
1092
|
+
*
|
|
1093
|
+
* @deprecated Product vocabulary (W6-14). Hands over to TAX in W8-13; use
|
|
1094
|
+
* `StatusBadge` with `defineStatusMap` for a system-toned status.
|
|
1095
|
+
* @product
|
|
1096
|
+
*/
|
|
1097
|
+
type TableTone = "slate" | "blue" | "violet" | "amber" | "ok" | "rose";
|
|
1098
|
+
/**
|
|
1099
|
+
* StagePill — colored stage/status pill for `column.render`.
|
|
1100
|
+
*
|
|
1101
|
+
* @deprecated Product vocabulary (W6-14). Hands over to TAX in W8-13; use
|
|
1102
|
+
* `StatusBadge` for a status word in the system palette.
|
|
1103
|
+
* @product
|
|
1104
|
+
*/
|
|
1105
|
+
declare function StagePill({ tone, dot, children, }: {
|
|
1106
|
+
tone?: TableTone | undefined;
|
|
1107
|
+
dot?: boolean;
|
|
1108
|
+
children: ReactNode;
|
|
1109
|
+
}): react_jsx_runtime.JSX.Element;
|
|
1110
|
+
/**
|
|
1111
|
+
* Assignee — grey avatar + name, or "Unassigned".
|
|
1112
|
+
*
|
|
1113
|
+
* @deprecated Product copy ("Unassigned") and layout (W6-14). Hands over to
|
|
1114
|
+
* TAX in W8-13; render `Avatar` + name in `column.render`.
|
|
1115
|
+
* @product
|
|
1116
|
+
*/
|
|
1117
|
+
declare function Assignee({ name }: {
|
|
1118
|
+
name?: string | null | undefined;
|
|
1119
|
+
}): react_jsx_runtime.JSX.Element;
|
|
1120
|
+
/**
|
|
1121
|
+
* MoneyCell — `$1,234` or an em-dash when falsy/zero.
|
|
1122
|
+
*
|
|
1123
|
+
* @deprecated Hard-coded `$` and host-locale formatting (W6-14). Hands over
|
|
1124
|
+
* to TAX in W8-13; format with `Intl.NumberFormat` in `column.render` and
|
|
1125
|
+
* fall back to `EmptyValue`.
|
|
1126
|
+
* @product
|
|
1127
|
+
*/
|
|
1128
|
+
declare function MoneyCell({ value }: {
|
|
1129
|
+
value?: number | null;
|
|
1130
|
+
}): react_jsx_runtime.JSX.Element;
|
|
1131
|
+
|
|
1132
|
+
export { DataTableResultsCount as $, Assignee as A, type BadgeProps as B, type CardSlot as C, Dash as D, DataTableBody as E, type FileKind as F, type DataTableBodyProps as G, DataTableCell as H, type InputSlot as I, DataTableCellDue as J, type DataTableCellDueProps as K, DataTableCellId as L, MoneyCell as M, type NumberInputSlot as N, DataTableCellMono as O, type PhoneFieldSlot as P, DataTableCellName as Q, type DataTableCellProps as R, type ServiceTone as S, TagsCell as T, DataTableCheckbox as U, type DataTableCheckboxProps as V, DataTableHead as W, type DataTableHeadProps as X, DataTableHeader as Y, type DataTableHeaderProps as Z, type DataTableProps as _, StagePill as a, type TableSortDirection as a$, type DataTableResultsCountProps as a0, DataTableRow as a1, type DataTableRowProps as a2, DataTableSearch as a3, type DataTableSearchProps as a4, DataTableSpacer as a5, type DataTableSpacerProps as a6, DataTableToolbar as a7, type DataTableToolbarProps as a8, DataTableView as a9, type SidebarBrandSwitcherSlot as aA, type SidebarSlot as aB, type SortDirection as aC, type StackSlot as aD, type StatusBadgeSlot as aE, type SurfaceSlot as aF, type SwitchSlot as aG, Table as aH, TableBody as aI, type TableBodyProps as aJ, TableCaption as aK, type TableCaptionProps as aL, TableCell as aM, type TableCellAlign as aN, type TableCellCommonProps as aO, type TableCellProps as aP, TableFooter as aQ, type TableFooterProps as aR, TableHead as aS, type TableHeadProps as aT, TableHeader as aU, type TableHeaderProps as aV, type TableHeaderStyle as aW, TableRow as aX, type TableRowData as aY, type TableRowProps as aZ, type TableSlot as a_, type DataTableViewColumn as aa, type DataTableViewFilter as ab, type DataTableViewProps as ac, type DataTableViewSelection as ad, type DataTableViewSort as ae, type DialogSlot as af, type DropdownMenuSlot as ag, EmptyValue as ah, type FieldSlot as ai, type FieldsetSlot as aj, FileChip as ak, type FileChipProps as al, type HeadingSlot as am, type IconButtonSlot as an, type InlineSlot as ao, type KbdSlot as ap, type LabelSlot as aq, type LinkButtonSlot as ar, type PaginationSlot as as, type PopoverSlot as at, type PressableSlot as au, type RadioGroupSlot as av, SERVICE_TONES as aw, type SheetSlot as ax, type ShellSlot as ay, type SideDrawerSlot as az, type AvatarSlot as b, type TableStickyEdge as b0, type TableTone as b1, type TextSlot as b2, type ThemeBrand as b3, type ThemeDensity as b4, type ThemeDirection as b5, type ThemeScheme as b6, ThemeScope as b7, type ThemeScopeProps as b8, type ThemeScopeValue as b9, type ToastSlot as ba, type TooltipSlot as bb, badgeVariants as bc, resolveBadgeAppearance as bd, serviceToneLabel as be, serviceToneStyle as bf, type FileUploadSlot as c, type SearchInputSlot as d, type SelectSlot as e, type TextareaSlot as f, type BadgeSize as g, type BadgeShape as h, type DataTableSlot as i, type TableProps as j, type AlertDialogSlot as k, Badge as l, type BadgeAppearance as m, type BadgeAppearanceInput as n, type BadgeLegacyVariant as o, type BadgeSlot as p, type BadgeVariant as q, type BadgeVariantsProps as r, type ButtonSlot as s, type CheckboxSlot as t, type ChipSlot as u, type CodeSlot as v, type ComboboxSlot as w, type CommandSlot as x, type ContextMenuSlot as y, DataTable as z };
|