@assure-one/design-system 1.34.0 → 1.36.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 +53 -0
- package/codemods/README.md +225 -10
- package/codemods/lib/jsx-edit.mjs +63 -4
- package/codemods/lib/registry.mjs +7 -0
- package/codemods/transforms/cm-04-button-variant-intent.mjs +223 -0
- package/codemods/transforms/cm-05-button-icon-slots.mjs +117 -0
- package/codemods/transforms/cm-06-tone-to-intent.mjs +190 -0
- package/codemods/transforms/cm-07-input-size.mjs +104 -0
- package/codemods/transforms/cm-08-search-select-to-combobox.mjs +236 -0
- package/codemods/transforms/cm-10-date-picker-value-change.mjs +416 -0
- package/codemods/transforms/cm-14-hidden-mirrors.mjs +2 -2
- package/codemods/transforms/cm-19-progress-explicit-intent.mjs +192 -0
- package/dist/css/components.css +1 -1
- package/dist/css/legacy-aliases.css +5 -0
- package/dist/css/tokens.css +5 -0
- package/dist/design-system-provider-cPUklDJv.d.ts +220 -0
- package/dist/icons/index.d.ts +3 -0
- package/dist/icons/index.js +1833 -0
- package/dist/icons/index.js.map +1 -0
- package/dist/index-CQwzTm0v.d.ts +509 -0
- package/dist/index.d.ts +2967 -823
- package/dist/index.js +7644 -3062
- package/dist/index.js.map +1 -1
- package/dist/next/index.d.ts +20 -0
- package/dist/next/index.js +16 -0
- package/dist/next/index.js.map +1 -0
- package/dist/styles.css +1 -1
- package/dist/testing/index.cjs +133 -11
- package/dist/testing/index.d.cts +98 -2
- package/dist/testing/index.d.ts +98 -2
- package/dist/testing/index.js +132 -12
- package/docs/components.md +601 -0
- package/docs/components.registry.json +1586 -0
- package/docs/for-ai-agents.md +153 -0
- package/package.json +21 -3
package/dist/index.d.ts
CHANGED
|
@@ -1,10 +1,11 @@
|
|
|
1
|
-
|
|
2
|
-
export { C as ColorName, R as ReferenceTokens, c as colors, r as radii, a as reference, s as shadows, b as spacing, d as surfaces, e as systemTokens, t as typography } from './system-BDU18fVg.js';
|
|
1
|
+
export { C as ColorName, R as ReferenceTokens, S as SystemTokens, c as colors, r as radii, a as reference, s as shadows, b as spacing, d as surfaces, e as systemTokens, t as typography } from './system-BDU18fVg.js';
|
|
3
2
|
import * as React$1 from 'react';
|
|
4
|
-
import { ReactNode, CSSProperties } from 'react';
|
|
3
|
+
import { ReactNode, InputHTMLAttributes, HTMLAttributes, RefCallback, ReactElement, FieldsetHTMLAttributes, CSSProperties } from 'react';
|
|
5
4
|
import * as AccordionPrimitive from '@radix-ui/react-accordion';
|
|
6
5
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
7
6
|
import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
|
|
7
|
+
import { V as Variant, I as Intent, C as ControlSize, S as Shape } from './index-CQwzTm0v.js';
|
|
8
|
+
export { A as AlertCircleIcon, a as AlertTriangleIcon, b as AlertTriangleSolidIcon, c as ArchiveIcon, d as ArrowDownIcon, e as ArrowLeftIcon, f as ArrowRightIcon, g as ArrowRightSmallIcon, h as ArrowUpIcon, i as AtSignIcon, B as BarChartIcon, j as BellIcon, k as BoldIcon, l as BrainIcon, m as BriefcaseIcon, n as Building2Icon, o as BuildingIcon, p as CalendarIcon, q as ChatBubbleIcon, r as CheckCircle2Icon, s as CheckCircleSolidIcon, t as CheckIcon, u as ChevronDownIcon, v as ChevronLeftIcon, w as ChevronRightIcon, x as ChevronUpIcon, y as ChevronsDownUpIcon, z as ChevronsUpDownIcon, D as CircleDotIcon, E as CircleIcon, F as ClipboardCheckIcon, G as ClockIcon, H as CloseIcon, J as CommandIcon, K as CopyIcon, L as CornerDownLeftIcon, M as CreditCardIcon, N as DocumentIcon, O as DollarSignIcon, P as DownloadIcon, Q as ExternalLinkIcon, R as ExtractIcon, T as EyeIcon, U as EyeOffIcon, W as FileIcon, X as FileReturnIcon, Y as FileTextIcon, Z as FilterIcon, _ as FlagIcon, $ as FolderClosedIcon, a0 as FolderOpenIcon, a1 as FolderPlusIcon, a2 as FolderUpIcon, a3 as GlobeIcon, a4 as GoogleBrandIcon, a5 as GripVerticalIcon, a6 as HelpCircleIcon, a7 as HistoryIcon, a8 as HomeIcon, a9 as IconComponent, aa as IconDefinition, ab as IconProps, ac as IconSize, ad as InboxIcon, ae as InfoCircleSolidIcon, af as InfoIcon, ag as ItalicIcon, ah as KanbanIcon, ai as KeyIcon, aj as LandmarkIcon, ak as LayersIcon, al as LayoutDashboardIcon, am as LayoutGridIcon, an as LayoutListIcon, ao as LightningIcon, ap as Link2Icon, aq as LinkIcon, ar as ListChecksIcon, as as ListIcon, at as ListOrderedIcon, au as LoaderIcon, av as LockIcon, aw as LockKeyholeIcon, ax as LockOpenIcon, ay as LogOutIcon, az as MailIcon, aA as MapPinIcon, aB as MaximizeIcon, aC as MenuIcon, aD as MessageCircleIcon, aE as MessageCircleWarningIcon, aF as MicIcon, aG as MicrosoftBrandIcon, aH as MinimizeIcon, aI as MinusIcon, aJ as MonitorIcon, aK as MoonIcon, aL as MoreHorizontalIcon, aM as MoveIcon, aN as PaletteIcon, aO as PanelLeftCloseIcon, aP as PanelLeftIcon, aQ as PanelRightIcon, aR as PaperclipIcon, aS as PauseIcon, aT as PenSignIcon, aU as PenToolIcon, aV as PencilIcon, aW as PhoneIcon, aX as PlayIcon, aY as PlusIcon, aZ as ReceiptIcon, a_ as RefreshCwIcon, a$ as ReplyIcon, b0 as RotateCcwIcon, b1 as SaveIcon, b2 as SearchIcon, b3 as SendIcon, b4 as SettingsIcon, b5 as ShieldIcon, b6 as SigmaIcon, b7 as SlashIcon, b8 as SmartphoneIcon, b9 as SparkleIcon, ba as SparklesIcon, bb as StarIcon, bc as StopIcon, bd as StrikethroughIcon, be as SunIcon, bf as TableIcon, bg as TagIcon, bh as TeamIcon, bi as ThumbsDownIcon, bj as ThumbsUpIcon, bk as TimerIcon, bl as Trash2Icon, bm as TrashIcon, bn as TrashSolidIcon, bo as TrendingDownIcon, bp as TrendingUpIcon, bq as UnderlineIcon, br as UploadIcon, bs as UserCircleIcon, bt as UserIcon, bu as UsersIcon, bv as VideoIcon, bw as Volume2Icon, bx as VolumeXIcon, by as WorkflowIcon, bz as XCircleSolidIcon, bA as XIcon, bB as ZoomInIcon, bC as ZoomOutIcon, bD as createIcon } from './index-CQwzTm0v.js';
|
|
8
9
|
import * as class_variance_authority_types from 'class-variance-authority/types';
|
|
9
10
|
import { VariantProps } from 'class-variance-authority';
|
|
10
11
|
import * as AspectRatioPrimitive from '@radix-ui/react-aspect-ratio';
|
|
@@ -15,6 +16,8 @@ import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
|
|
|
15
16
|
import * as ContextMenuPrimitive from '@radix-ui/react-context-menu';
|
|
16
17
|
import * as DialogPrimitive from '@radix-ui/react-dialog';
|
|
17
18
|
import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
|
|
19
|
+
import { F as FileUploadMessages, S as SearchInputMessages, a as SelectMessages, b as FieldMessages, C as ComboboxMessages } from './design-system-provider-cPUklDJv.js';
|
|
20
|
+
export { c as DesignSystemProvider, D as DesignSystemProviderProps, d as DsDirection, e as DsMessageNamespace, f as DsMessages, g as DsMessagesOverride, I as ImageComponent, h as ImageComponentProps, L as LinkComponent, i as LinkComponentProps, T as TooltipDefaults, u as useDsMessages } from './design-system-provider-cPUklDJv.js';
|
|
18
21
|
import * as HoverCardPrimitive from '@radix-ui/react-hover-card';
|
|
19
22
|
import * as LabelPrimitive from '@radix-ui/react-label';
|
|
20
23
|
import * as PopoverPrimitive from '@radix-ui/react-popover';
|
|
@@ -30,6 +33,7 @@ import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
|
|
|
30
33
|
import * as TooltipPrimitive from '@radix-ui/react-tooltip';
|
|
31
34
|
import * as VisuallyHiddenPrimitive from '@radix-ui/react-visually-hidden';
|
|
32
35
|
import { ClassValue } from 'clsx';
|
|
36
|
+
import { BrandTheme } from './tokens/index.js';
|
|
33
37
|
|
|
34
38
|
type AccordionProps = React$1.ComponentPropsWithoutRef<typeof AccordionPrimitive.Root>;
|
|
35
39
|
declare const Accordion: React$1.ForwardRefExoticComponent<AccordionProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
@@ -52,6 +56,16 @@ type CodeSlot = "root" | "content";
|
|
|
52
56
|
* @experimental Slot names are experimental until ADR-008 is accepted (W2-18).
|
|
53
57
|
*/
|
|
54
58
|
type KbdSlot = "root";
|
|
59
|
+
/**
|
|
60
|
+
* `Pressable` has one part, its root, stamped as `data-slot="pressable"`
|
|
61
|
+
* (ADR-008): the element that carries the button behaviour, whether that is
|
|
62
|
+
* the `<button>` it renders or the child it wraps with `asChild`. State on the
|
|
63
|
+
* root: `data-disabled`, `data-pressed`. Components that compose it (`Button`
|
|
64
|
+
* once it adopts the behaviour, a clickable `Surface`) declare their own parts.
|
|
65
|
+
*
|
|
66
|
+
* @experimental Slot names are experimental until ADR-008 is accepted (W3-03).
|
|
67
|
+
*/
|
|
68
|
+
type PressableSlot = "root";
|
|
55
69
|
/**
|
|
56
70
|
* `Button` parts, stamped as `data-slot="button[-<part>]"` (ADR-008).
|
|
57
71
|
* States on the root: `data-variant`, `data-size`, `data-disabled`, and the
|
|
@@ -80,19 +94,20 @@ type BadgeSlot = "root" | "dot" | "icon";
|
|
|
80
94
|
* `className` lands on (`C-INPUT-CLASSNAME`). The wrappers around it are
|
|
81
95
|
* private (target architecture §29.2).
|
|
82
96
|
* States on the root: `data-variant`, `data-size`, `data-disabled`,
|
|
83
|
-
* `data-invalid`.
|
|
97
|
+
* `data-invalid`. `description` is the `description` sugar's hint text (W4-05).
|
|
84
98
|
*
|
|
85
99
|
* @experimental Slot names are experimental until ADR-008 is accepted (W2-18).
|
|
86
100
|
*/
|
|
87
|
-
type InputSlot = "root" | "label" | "icon-start" | "icon-end" | "password-toggle" | "error";
|
|
101
|
+
type InputSlot = "root" | "label" | "icon-start" | "icon-end" | "password-toggle" | "description" | "error";
|
|
88
102
|
/**
|
|
89
103
|
* `Textarea` parts, stamped as `data-slot="textarea[-<part>]"` (ADR-008).
|
|
90
104
|
* `root` is the `<textarea>`. States on the root: `data-variant`, `data-size`,
|
|
91
|
-
* `data-disabled`, `data-invalid`.
|
|
105
|
+
* `data-disabled`, `data-invalid`. `description` is the `description` sugar's
|
|
106
|
+
* hint text (W4-06).
|
|
92
107
|
*
|
|
93
108
|
* @experimental Slot names are experimental until ADR-008 is accepted (W2-18).
|
|
94
109
|
*/
|
|
95
|
-
type TextareaSlot = "root" | "label" | "error" | "count";
|
|
110
|
+
type TextareaSlot = "root" | "label" | "description" | "error" | "count";
|
|
96
111
|
/**
|
|
97
112
|
* `SearchInput` parts, stamped as `data-slot="search-input[-<part>]"`
|
|
98
113
|
* (ADR-008). `root` is the positioning wrapper `className` lands on;
|
|
@@ -103,18 +118,23 @@ type TextareaSlot = "root" | "label" | "error" | "count";
|
|
|
103
118
|
*/
|
|
104
119
|
type SearchInputSlot = "root" | "control" | "icon" | "clear";
|
|
105
120
|
/**
|
|
106
|
-
* `Select` parts, stamped as `data-slot="select-<part>"` (ADR-008).
|
|
107
|
-
*
|
|
108
|
-
* `
|
|
109
|
-
*
|
|
121
|
+
* `Select` parts, stamped as `data-slot="select-<part>"` (ADR-008).
|
|
122
|
+
* `SelectRoot` renders no element: `root` is the wrapper the options-driven
|
|
123
|
+
* `Select clearable` renders around the trigger and the `clear` button (W4-08),
|
|
124
|
+
* and exists only then. Radix's own `data-state`, `data-disabled`,
|
|
125
|
+
* `data-placeholder` and `data-highlighted` are left as they are
|
|
126
|
+
* (`P-DATA-STATE`); the trigger adds `data-size` when a `size` is set.
|
|
110
127
|
*
|
|
111
128
|
* `SelectValue` and `SelectGroup` are re-exported Radix components with no
|
|
112
|
-
* wrapper of ours, so they carry no slot
|
|
113
|
-
* `classNames.value`
|
|
129
|
+
* wrapper of ours, so they carry no slot of their own. `value` is the span
|
|
130
|
+
* the options-driven `Select` wraps Radix's value in when `classNames.value`
|
|
131
|
+
* or `clearable` asks for it (Radix's own span drops `className`); a legacy
|
|
132
|
+
* call renders no wrapper, so the `SelectTrigger > span` structure PRO selects
|
|
133
|
+
* on stays as frozen by `C-DOM-10`.
|
|
114
134
|
*
|
|
115
135
|
* @experimental Slot names are experimental until ADR-008 is accepted (W2-18).
|
|
116
136
|
*/
|
|
117
|
-
type SelectSlot = "trigger" | "icon" | "content" | "viewport" | "item" | "item-indicator" | "label" | "separator" | "scroll-up-button" | "scroll-down-button";
|
|
137
|
+
type SelectSlot = "root" | "trigger" | "value" | "icon" | "clear" | "content" | "viewport" | "item" | "item-indicator" | "label" | "separator" | "scroll-up-button" | "scroll-down-button";
|
|
118
138
|
/**
|
|
119
139
|
* `Checkbox` parts, stamped as `data-slot="checkbox[-<part>]"` (ADR-008).
|
|
120
140
|
* `root` is the Radix root — the box, and the element `className` lands on.
|
|
@@ -128,11 +148,14 @@ type CheckboxSlot = "root" | "indicator" | "label";
|
|
|
128
148
|
/**
|
|
129
149
|
* `RadioGroup` / `RadioGroupItem` parts, stamped as
|
|
130
150
|
* `data-slot="radio-group[-<part>]"` (ADR-008). `root` is the group,
|
|
131
|
-
* `item` the radio. Radix's `data-state` is left as it is.
|
|
151
|
+
* `item` the radio. Radix's `data-state` is left as it is. With
|
|
152
|
+
* `appearance="card"` (W4-14) the root carries `data-appearance="card"` and
|
|
153
|
+
* every item is wrapped in a `card` holding the `label` (stretched over the
|
|
154
|
+
* card, so the whole box is the click target) and an optional `description`.
|
|
132
155
|
*
|
|
133
156
|
* @experimental Slot names are experimental until ADR-008 is accepted (W2-18).
|
|
134
157
|
*/
|
|
135
|
-
type RadioGroupSlot = "root" | "item" | "indicator" | "label";
|
|
158
|
+
type RadioGroupSlot = "root" | "item" | "indicator" | "label" | "card" | "description";
|
|
136
159
|
/**
|
|
137
160
|
* `Switch` parts, stamped as `data-slot="switch[-<part>]"` (ADR-008).
|
|
138
161
|
* `root` is the Radix root — the track, and the element `className` lands on;
|
|
@@ -148,6 +171,28 @@ type SwitchSlot = "root" | "thumb" | "label";
|
|
|
148
171
|
* @experimental Slot names are experimental until ADR-008 is accepted (W2-18).
|
|
149
172
|
*/
|
|
150
173
|
type LabelSlot = "root" | "required";
|
|
174
|
+
/**
|
|
175
|
+
* `NumberInput` parts, stamped as `data-slot="number-input"` (ADR-008).
|
|
176
|
+
* `root` is the `<input>` itself — the control frame and the element
|
|
177
|
+
* `className` lands on, like `Input`. The hidden inputs `FormBridge` renders
|
|
178
|
+
* next to it are not parts. States on the root: `data-variant`, `data-size`,
|
|
179
|
+
* `data-disabled`, `data-invalid`.
|
|
180
|
+
*
|
|
181
|
+
* @experimental Slot names are experimental until ADR-008 is accepted (W4-21).
|
|
182
|
+
*/
|
|
183
|
+
type NumberInputSlot = "root";
|
|
184
|
+
/**
|
|
185
|
+
* `PhoneField` parts, stamped as `data-slot="phone-field[-<part>]"` (ADR-008).
|
|
186
|
+
* `root` is the row (the element `className` lands on), `number` the `tel`
|
|
187
|
+
* `<input>` on the control chrome, `flag` a `CountryFlag` (the SVG, or its
|
|
188
|
+
* placeholder while the flag set loads). `country` is the country picker: a
|
|
189
|
+
* `Combobox`, stamped with its own anatomy and styled through
|
|
190
|
+
* `classNames.country`. States on the root: `data-variant`, `data-size`,
|
|
191
|
+
* `data-disabled`, `data-invalid`.
|
|
192
|
+
*
|
|
193
|
+
* @experimental Slot names are experimental until ADR-008 is accepted (W4-22).
|
|
194
|
+
*/
|
|
195
|
+
type PhoneFieldSlot = "root" | "country" | "number" | "flag";
|
|
151
196
|
/**
|
|
152
197
|
* `FileUpload` parts, stamped as `data-slot="file-upload[-<part>]"` (ADR-008).
|
|
153
198
|
* `dropzone` is the `<label>` that `C-DOM-04` freezes and that
|
|
@@ -162,12 +207,13 @@ type FileUploadSlot = "root" | "dropzone" | "input" | "error";
|
|
|
162
207
|
* `Dialog` parts, stamped as `data-slot="dialog-<part>"` (ADR-008). There is
|
|
163
208
|
* no `root`: `Dialog` is Radix's non-rendering root. `close` is stamped on
|
|
164
209
|
* both the built-in close button and `DialogClose`; they are the same part —
|
|
165
|
-
* a control that dismisses the dialog.
|
|
210
|
+
* a control that dismisses the dialog. `body` is the scroll region between
|
|
211
|
+
* header and footer (W5-05). States: `data-size` on the content.
|
|
166
212
|
* Radix's `data-state` is left as it is (`P-DATA-STATE`).
|
|
167
213
|
*
|
|
168
214
|
* @experimental Slot names are experimental until ADR-008 is accepted (W2-18).
|
|
169
215
|
*/
|
|
170
|
-
type DialogSlot = "overlay" | "content" | "header" | "title" | "description" | "footer" | "close";
|
|
216
|
+
type DialogSlot = "overlay" | "content" | "header" | "title" | "description" | "body" | "footer" | "close";
|
|
171
217
|
/**
|
|
172
218
|
* `AlertDialog` parts, stamped as `data-slot="alert-dialog-<part>"`
|
|
173
219
|
* (ADR-008). No `root` — Radix's root renders no element.
|
|
@@ -177,13 +223,14 @@ type DialogSlot = "overlay" | "content" | "header" | "title" | "description" | "
|
|
|
177
223
|
type AlertDialogSlot = "overlay" | "content" | "header" | "title" | "description" | "footer" | "action" | "cancel";
|
|
178
224
|
/**
|
|
179
225
|
* `Sheet` parts, stamped as `data-slot="sheet-<part>"` (ADR-008).
|
|
180
|
-
*
|
|
181
|
-
*
|
|
182
|
-
*
|
|
226
|
+
* `body` is the scroll region between header and footer (W5-07). States:
|
|
227
|
+
* `data-size` on the content, carrying the `size` step (or the deprecated
|
|
228
|
+
* `width` preset, C-SHEET-WIDTH; `default` when neither is given). The
|
|
229
|
+
* `side` is not in the §29.2 vocabulary and stays a class.
|
|
183
230
|
*
|
|
184
231
|
* @experimental Slot names are experimental until ADR-008 is accepted (W2-18).
|
|
185
232
|
*/
|
|
186
|
-
type SheetSlot = "overlay" | "content" | "header" | "title" | "description" | "footer" | "close";
|
|
233
|
+
type SheetSlot = "overlay" | "content" | "header" | "title" | "description" | "body" | "footer" | "close";
|
|
187
234
|
/**
|
|
188
235
|
* `SideDrawer` parts, stamped as `data-slot="side-drawer[-<part>]"`
|
|
189
236
|
* (ADR-008). `root` is the panel. The screen-reader-only Radix title that the
|
|
@@ -352,6 +399,281 @@ type InlineSlot = "root";
|
|
|
352
399
|
* @experimental Slot names are experimental until ADR-008 is accepted (W2-16).
|
|
353
400
|
*/
|
|
354
401
|
type SurfaceSlot = "root";
|
|
402
|
+
/**
|
|
403
|
+
* `Avatar` parts, stamped as `data-slot="avatar[-<part>]"` (ADR-008, W3-16).
|
|
404
|
+
* `root` is the outer positioning wrapper — the element a consumer's
|
|
405
|
+
* `shrink-0` / `mt-0.5` overrides are aimed at and `classNames.root` reaches;
|
|
406
|
+
* `frame` is the circle (the Radix root: image and fallback clip to it), and
|
|
407
|
+
* the element `className` and `ref` keep landing on behind the compatibility
|
|
408
|
+
* entry (target architecture §29.1, ADR-008 decision 6 — the landing does not
|
|
409
|
+
* move silently). `image` and `fallback` are the Radix image and fallback;
|
|
410
|
+
* `status` is the corner dot, rendered only when `status` is set.
|
|
411
|
+
* States on the root: `data-size`, `data-variant`.
|
|
412
|
+
*
|
|
413
|
+
* @experimental Slot names are experimental until ADR-008 is accepted (W3-16).
|
|
414
|
+
*/
|
|
415
|
+
type AvatarSlot = "root" | "frame" | "image" | "fallback" | "status";
|
|
416
|
+
/**
|
|
417
|
+
* `Card` parts, stamped as `data-slot="card[-<part>]"` (ADR-008, W3-17). The
|
|
418
|
+
* root is a `Surface` (W2-16) that stamps `card` over `surface`: a composite
|
|
419
|
+
* declares its own parts. Each part is a real JSX component (`CardHeader`,
|
|
420
|
+
* `CardTitle`, …) and takes `className` itself, so `Card` has no `classNames`
|
|
421
|
+
* (ADR-008 decision 4). States on the root: `data-variant`.
|
|
422
|
+
*
|
|
423
|
+
* @experimental Slot names are experimental until ADR-008 is accepted (W3-17).
|
|
424
|
+
*/
|
|
425
|
+
type CardSlot = "root" | "header" | "title" | "description" | "action" | "content" | "footer";
|
|
426
|
+
/**
|
|
427
|
+
* `StatusBadge` parts, stamped as `data-slot="status-badge[-<part>]"`
|
|
428
|
+
* (ADR-008): the root, the `indicator` (dot, icon or spinner — one at a time)
|
|
429
|
+
* and the `label`. States on the root: `data-variant`, `data-intent`,
|
|
430
|
+
* `data-size`, `data-loading`.
|
|
431
|
+
*
|
|
432
|
+
* @experimental Slot names are experimental until ADR-008 is accepted (W3-14).
|
|
433
|
+
*/
|
|
434
|
+
type StatusBadgeSlot = "root" | "indicator" | "label";
|
|
435
|
+
/**
|
|
436
|
+
* `IconButton` parts, stamped as `data-slot="icon-button[-<part>]"` (ADR-008):
|
|
437
|
+
* the square root, the `icon` box and the `spinner` that replaces it while
|
|
438
|
+
* loading. States on the root: `data-variant`, `data-intent`, `data-size`,
|
|
439
|
+
* `data-disabled`, `data-loading`, `data-pressed`.
|
|
440
|
+
*
|
|
441
|
+
* @experimental Slot names are experimental until ADR-008 is accepted (W3-09).
|
|
442
|
+
*/
|
|
443
|
+
type IconButtonSlot = "root" | "icon" | "spinner";
|
|
444
|
+
/**
|
|
445
|
+
* `Chip` parts, stamped as `data-slot="chip[-<part>]"` (ADR-008): the root
|
|
446
|
+
* (the pressable itself, or the group that holds a pressable label and the
|
|
447
|
+
* `remove` button), the leading `icon`, the `label`, the `count` and the
|
|
448
|
+
* `remove` button. States on the root: `data-variant`, `data-intent`,
|
|
449
|
+
* `data-size`, `data-disabled`, `data-pressed`.
|
|
450
|
+
*
|
|
451
|
+
* @experimental Slot names are experimental until ADR-008 is accepted (W3-15).
|
|
452
|
+
*/
|
|
453
|
+
type ChipSlot = "root" | "icon" | "label" | "count" | "remove";
|
|
454
|
+
/**
|
|
455
|
+
* `Field` parts, stamped as `data-slot="field[-<part>]"` (ADR-008, W4-01):
|
|
456
|
+
* the root (the layout wrapper, no chrome), the `label` (a `Label` rendered
|
|
457
|
+
* inside a field stamps this over its own `label`, the way `Card` stamps
|
|
458
|
+
* `card` over `surface`), its `required` asterisk and `optional` indicator,
|
|
459
|
+
* the `description` and the `error`. The control is not a part: it keeps its
|
|
460
|
+
* own anatomy (`input`, `select-trigger`, …) and is found by the field's id.
|
|
461
|
+
* States on the root: `data-orientation`, `data-invalid`, `data-disabled`,
|
|
462
|
+
* `data-required`.
|
|
463
|
+
*
|
|
464
|
+
* @experimental Slot names are experimental until ADR-008 is accepted (W4-01).
|
|
465
|
+
*/
|
|
466
|
+
type FieldSlot = "root" | "label" | "required" | "optional" | "description" | "error";
|
|
467
|
+
/**
|
|
468
|
+
* `Fieldset` parts, stamped as `data-slot="fieldset[-<part>]"` (ADR-008,
|
|
469
|
+
* W4-01): the `<fieldset>` root and its `<legend>`. States on the root:
|
|
470
|
+
* `data-disabled`, `data-invalid`.
|
|
471
|
+
*
|
|
472
|
+
* @experimental Slot names are experimental until ADR-008 is accepted (W4-01).
|
|
473
|
+
*/
|
|
474
|
+
type FieldsetSlot = "root" | "legend";
|
|
475
|
+
/**
|
|
476
|
+
* `Combobox` parts, stamped as `data-slot="combobox[-<part>]"` (ADR-008,
|
|
477
|
+
* W4-10): the `root` (the frame that holds the control and its form bridge),
|
|
478
|
+
* the `control` (the field-shaped box the popover anchors to), the `value`
|
|
479
|
+
* (a custom `renderValue` node over the input), the `chips` row and its
|
|
480
|
+
* `Chip`s in `multiple` mode, the `input` (the `role="combobox"` element that
|
|
481
|
+
* keeps focus), the leading `icon`, the `clear` and `toggle` buttons; then
|
|
482
|
+
* the portalled `content` with an optional `header`, the `list`
|
|
483
|
+
* (`role="listbox"`), a `group` with its `group-heading`, each `item`
|
|
484
|
+
* (`role="option"`, see `behavior/collection/item-attributes.ts`) and its
|
|
485
|
+
* `item-indicator`, the `create` row, the `empty` and `loading` states and an
|
|
486
|
+
* optional `footer`. States on the root: `data-state` (`open` · `closed`),
|
|
487
|
+
* `data-disabled`, `data-invalid`, `data-size`.
|
|
488
|
+
*
|
|
489
|
+
* @experimental Slot names are experimental until ADR-008 is accepted (W4-10).
|
|
490
|
+
*/
|
|
491
|
+
type ComboboxSlot = "root" | "control" | "value" | "chips" | "input" | "icon" | "clear" | "toggle" | "content" | "header" | "list" | "group" | "group-heading" | "item" | "item-indicator" | "create" | "empty" | "loading" | "footer";
|
|
492
|
+
|
|
493
|
+
/**
|
|
494
|
+
* L1a behaviour primitive (private). Not exported from the package.
|
|
495
|
+
*
|
|
496
|
+
* `buttonBase` — the one class recipe every button-shaped control renders
|
|
497
|
+
* (W3-03; target architecture §4 L1a, §30), and the `variant` + `intent`
|
|
498
|
+
* resolver in front of it (W3-02; ADR-007). `Button`, `LinkButton` and
|
|
499
|
+
* `SubmitButton` read both through the public `buttonVariants`;
|
|
500
|
+
* `IconButton` (W3-09) and `Chip` (W3-15) read them next, so the geometry,
|
|
501
|
+
* the focus ring, the disabled treatment, the press feedback and the colour
|
|
502
|
+
* table of an action are written once.
|
|
503
|
+
*
|
|
504
|
+
* Two axes, one table: `variant` says how loudly (`solid · soft · outline ·
|
|
505
|
+
* ghost · link`), `intent` says what it means (`brand · neutral · success ·
|
|
506
|
+
* danger`), and every pair has one row in {@link BUTTON_LOOKS}. The legacy
|
|
507
|
+
* single-axis words (`primary`, `secondary`, `destructive`, `success`,
|
|
508
|
+
* `accent`, `dashed`) resolve to a pair through {@link LEGACY_BUTTON_VARIANTS}
|
|
509
|
+
* and produce the class string they always did:
|
|
510
|
+
* `src/primitives/__tests__/button-legacy-classes.test.tsx` pins every legacy
|
|
511
|
+
* `variant` × `size` to the output recorded from `main` before W3-02.
|
|
512
|
+
*
|
|
513
|
+
* No React, no client directive: plain functions of props to a string, so a
|
|
514
|
+
* Server Component can call them once the root entry is server-safe (S3).
|
|
515
|
+
*/
|
|
516
|
+
/**
|
|
517
|
+
* The emphases a Button offers: all five of the shared vocabulary.
|
|
518
|
+
*
|
|
519
|
+
* @experimental
|
|
520
|
+
*/
|
|
521
|
+
type ButtonEmphasis = Variant;
|
|
522
|
+
/**
|
|
523
|
+
* The intents a Button offers (ADR-007 §1; `info` and `warning` are not actions).
|
|
524
|
+
*
|
|
525
|
+
* @experimental
|
|
526
|
+
*/
|
|
527
|
+
type ButtonIntent = Extract<Intent, "brand" | "neutral" | "success" | "danger">;
|
|
528
|
+
/**
|
|
529
|
+
* `destructive` is accepted where an intent is expected, as an alias of
|
|
530
|
+
* `danger`, until decision D4 settles the canonical word (ADR-007 §5).
|
|
531
|
+
*
|
|
532
|
+
* @deprecated Use `intent="danger"`.
|
|
533
|
+
* @experimental
|
|
534
|
+
*/
|
|
535
|
+
type ButtonIntentAlias = "destructive";
|
|
536
|
+
/**
|
|
537
|
+
* The single-axis words Button accepted before W3-02, each a fixed
|
|
538
|
+
* `{ variant, intent }` pair (ADR-007 §4, target architecture §28):
|
|
539
|
+
*
|
|
540
|
+
* - `primary` → `solid` + `brand` (the default; nothing to migrate)
|
|
541
|
+
* - `secondary` → `soft` + `neutral`
|
|
542
|
+
* - `destructive` → `solid` + `danger`
|
|
543
|
+
* - `success` → `solid` + `success`
|
|
544
|
+
* - `accent` → `solid` + `brand` in the suite-action colour; folds into
|
|
545
|
+
* `intent="brand"` and is dropped in 2.0 (decision D13)
|
|
546
|
+
* - `dashed` → `outline` + `neutral` with a dashed 2px border; kept for the
|
|
547
|
+
* 2.x line
|
|
548
|
+
*
|
|
549
|
+
* `ghost`, `outline` and `link` are not legacy: they already are emphases.
|
|
550
|
+
*
|
|
551
|
+
* @deprecated Pass `variant` (emphasis) and `intent` (meaning) instead. The
|
|
552
|
+
* codemod CM-04 rewrites call sites mechanically.
|
|
553
|
+
* @experimental
|
|
554
|
+
*/
|
|
555
|
+
type ButtonLegacyVariant = "primary" | "secondary" | "destructive" | "success" | "accent" | "dashed";
|
|
556
|
+
/** What `variant` accepts on the Button family: the vocabulary plus the deprecated aliases. */
|
|
557
|
+
type ButtonVariant = ButtonEmphasis | ButtonLegacyVariant;
|
|
558
|
+
/**
|
|
559
|
+
* A row of the colour table: a `variant`/`intent` pair or one of the two
|
|
560
|
+
* legacy-only looks. The separator is `/`, not `-`: the keys of the table are
|
|
561
|
+
* text Tailwind scans, and an `outline` emphasis joined to an intent with a
|
|
562
|
+
* hyphen would compile to an outline-colour utility nobody asked for.
|
|
563
|
+
*
|
|
564
|
+
* @experimental
|
|
565
|
+
*/
|
|
566
|
+
type ButtonLook = `${ButtonEmphasis}/${ButtonIntent}` | "accent" | "dashed";
|
|
567
|
+
/**
|
|
568
|
+
* The resolved appearance of a Button.
|
|
569
|
+
*
|
|
570
|
+
* @experimental
|
|
571
|
+
*/
|
|
572
|
+
interface ButtonStyle {
|
|
573
|
+
variant: ButtonEmphasis;
|
|
574
|
+
intent: ButtonIntent;
|
|
575
|
+
/** The row of the colour table the pair renders. */
|
|
576
|
+
look: ButtonLook;
|
|
577
|
+
}
|
|
578
|
+
/**
|
|
579
|
+
* Resolve what a Button renders from the two-axis props, accepting every
|
|
580
|
+
* legacy word (W3-02, ADR-007 §4).
|
|
581
|
+
*
|
|
582
|
+
* - No `variant`: `solid` + `brand` (what `primary` always rendered).
|
|
583
|
+
* - A legacy `variant` alone: its fixed pair; `accent` and `dashed` keep
|
|
584
|
+
* their own look.
|
|
585
|
+
* - A legacy `variant` with an explicit `intent`: the alias contributes its
|
|
586
|
+
* emphasis, the intent is the caller's (`variant="primary" intent="danger"`
|
|
587
|
+
* is a solid danger button). `accent`'s and `dashed`'s own looks apply only
|
|
588
|
+
* without a competing intent.
|
|
589
|
+
* - `intent="destructive"` is `danger` (deprecated alias, D4).
|
|
590
|
+
*
|
|
591
|
+
* @experimental
|
|
592
|
+
*/
|
|
593
|
+
declare function resolveButtonStyle({ variant, intent, }: {
|
|
594
|
+
variant?: ButtonVariant | null;
|
|
595
|
+
intent?: ButtonIntent | ButtonIntentAlias | null;
|
|
596
|
+
}): ButtonStyle;
|
|
597
|
+
/**
|
|
598
|
+
* The size names the recipe knows (W3-05, ADR-013): the shared control scale
|
|
599
|
+
* `xs · sm · md · lg · xl` (`ControlSize`), the 1.31 aliases
|
|
600
|
+
* `compact` / `default` / `comfortable` of `sm` / `md` / `lg`, and the square
|
|
601
|
+
* icon-only steps `icon-xs` / `icon-sm` / `icon` (C-BTN-SIZE-ICON).
|
|
602
|
+
*
|
|
603
|
+
* `xs` and `xl` are new in W3-05 and read the shared scale
|
|
604
|
+
* (`--control-*-{xs,xl}`: 28px and 48px tall), so they follow the density
|
|
605
|
+
* scope. `md` (40px) and `lg` (48px) are the two A1 mismatches recorded in
|
|
606
|
+
* `baselines/size-geometry.json`: they keep today's pixels through the
|
|
607
|
+
* D5-gated compat tokens `--button-height-md` / `--button-height-lg` and
|
|
608
|
+
* their padding, gap and label size stay on Tailwind's scale — nothing about
|
|
609
|
+
* them moves until decision D5 (W2-05, CM-03). `sm` (32px) already agrees
|
|
610
|
+
* with the scale's `sm` step, so it reads the shared row like `xs`/`xl`.
|
|
611
|
+
*/
|
|
612
|
+
type ButtonSize = ControlSize | ButtonSizeAlias | ButtonIconSize;
|
|
613
|
+
/**
|
|
614
|
+
* The 1.31 aliases of `sm` / `md` / `lg` (C-BTN-SIZE-ALIAS). No known consumer
|
|
615
|
+
* uses them; they leave in 2.0.
|
|
616
|
+
*
|
|
617
|
+
* @deprecated Use `size="sm"`, `"md"` or `"lg"`.
|
|
618
|
+
* @experimental
|
|
619
|
+
*/
|
|
620
|
+
type ButtonSizeAlias = "compact" | "default" | "comfortable";
|
|
621
|
+
/**
|
|
622
|
+
* The icon-only squares (C-BTN-SIZE-ICON): 24 / 28 / 40px. `IconButton`
|
|
623
|
+
* (W3-09) owns icon-only geometry; the codemod CM-03 rewrites the call sites.
|
|
624
|
+
* Removed in 3.0.
|
|
625
|
+
*
|
|
626
|
+
* @deprecated Use `IconButton`.
|
|
627
|
+
* @experimental
|
|
628
|
+
*/
|
|
629
|
+
type ButtonIconSize = "icon-xs" | "icon-sm" | "icon";
|
|
630
|
+
/**
|
|
631
|
+
* What {@link buttonVariants} takes: the two axes, the size and cva's class
|
|
632
|
+
* pass-through.
|
|
633
|
+
*
|
|
634
|
+
* @experimental
|
|
635
|
+
*/
|
|
636
|
+
interface ButtonVariantsProps {
|
|
637
|
+
variant?: ButtonVariant | null;
|
|
638
|
+
intent?: ButtonIntent | ButtonIntentAlias | null;
|
|
639
|
+
size?: ButtonSize | null;
|
|
640
|
+
class?: string | null;
|
|
641
|
+
className?: string | null;
|
|
642
|
+
}
|
|
643
|
+
/**
|
|
644
|
+
* The public recipe of the Button family: resolves `variant` + `intent`
|
|
645
|
+
* (legacy words included) and renders the row with the size. Same name and
|
|
646
|
+
* output as before W3-02 for every call that existed; `intent` is the one
|
|
647
|
+
* addition. Server-safe.
|
|
648
|
+
*/
|
|
649
|
+
declare function buttonVariants({ variant, intent, size, class: classProp, className, }?: ButtonVariantsProps): string;
|
|
650
|
+
/**
|
|
651
|
+
* The icon slots of the Button family (W3-07). `iconStart` / `iconEnd` are
|
|
652
|
+
* logical — start is the left in LTR and the right in RTL, because the button
|
|
653
|
+
* is a flex row and the slot follows the writing direction. `iconLeft` /
|
|
654
|
+
* `iconRight` are the names consumers use today (140 call sites) and stay as
|
|
655
|
+
* aliases of the same slots.
|
|
656
|
+
*
|
|
657
|
+
* @experimental
|
|
658
|
+
*/
|
|
659
|
+
interface ButtonIconProps {
|
|
660
|
+
/** Icon before the label (logical start). */
|
|
661
|
+
iconStart?: ReactNode;
|
|
662
|
+
/** Icon after the label (logical end). */
|
|
663
|
+
iconEnd?: ReactNode;
|
|
664
|
+
/**
|
|
665
|
+
* Alias of `iconStart`. The codemod CM-05 renames it.
|
|
666
|
+
*
|
|
667
|
+
* @deprecated Use `iconStart`.
|
|
668
|
+
*/
|
|
669
|
+
iconLeft?: ReactNode;
|
|
670
|
+
/**
|
|
671
|
+
* Alias of `iconEnd`. The codemod CM-05 renames it.
|
|
672
|
+
*
|
|
673
|
+
* @deprecated Use `iconEnd`.
|
|
674
|
+
*/
|
|
675
|
+
iconRight?: ReactNode;
|
|
676
|
+
}
|
|
355
677
|
|
|
356
678
|
declare const AlertDialog: React$1.FC<AlertDialogPrimitive.AlertDialogProps>;
|
|
357
679
|
declare const AlertDialogTrigger: React$1.ForwardRefExoticComponent<AlertDialogPrimitive.AlertDialogTriggerProps & React$1.RefAttributes<HTMLButtonElement>>;
|
|
@@ -359,16 +681,33 @@ declare const AlertDialogPortal: React$1.FC<AlertDialogPrimitive.AlertDialogPort
|
|
|
359
681
|
declare const AlertDialogOverlay: React$1.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogOverlayProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
|
|
360
682
|
declare const AlertDialogContent: React$1.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogContentProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
|
|
361
683
|
declare const AlertDialogHeader: {
|
|
362
|
-
(
|
|
684
|
+
(props: React$1.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
|
|
363
685
|
displayName: string;
|
|
364
686
|
};
|
|
365
687
|
declare const AlertDialogFooter: {
|
|
366
|
-
(
|
|
688
|
+
(props: React$1.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
|
|
367
689
|
displayName: string;
|
|
368
690
|
};
|
|
369
691
|
declare const AlertDialogTitle: React$1.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogTitleProps & React$1.RefAttributes<HTMLHeadingElement>, "ref"> & React$1.RefAttributes<HTMLHeadingElement>>;
|
|
370
692
|
declare const AlertDialogDescription: React$1.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogDescriptionProps & React$1.RefAttributes<HTMLParagraphElement>, "ref"> & React$1.RefAttributes<HTMLParagraphElement>>;
|
|
371
|
-
|
|
693
|
+
/**
|
|
694
|
+
* Props of `AlertDialogAction` (W5-06): Radix's action props plus the two
|
|
695
|
+
* Button axes.
|
|
696
|
+
*
|
|
697
|
+
* @experimental
|
|
698
|
+
*/
|
|
699
|
+
interface AlertDialogActionProps extends React$1.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action> {
|
|
700
|
+
/**
|
|
701
|
+
* Emphasis, as on `Button` (ADR-007): `solid · soft · outline · ghost ·
|
|
702
|
+
* link`, or a legacy word. Without `variant` and `intent` the action keeps
|
|
703
|
+
* its 1.x destructive look; naming either resolves through the Button
|
|
704
|
+
* recipe, so `intent="brand"` is a non-destructive confirm.
|
|
705
|
+
*/
|
|
706
|
+
variant?: ButtonVariant;
|
|
707
|
+
/** Meaning, as on `Button`: `brand · neutral · success · danger`. */
|
|
708
|
+
intent?: ButtonIntent | ButtonIntentAlias;
|
|
709
|
+
}
|
|
710
|
+
declare const AlertDialogAction: React$1.ForwardRefExoticComponent<AlertDialogActionProps & React$1.RefAttributes<HTMLButtonElement>>;
|
|
372
711
|
declare const AlertDialogCancel: React$1.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogCancelProps & React$1.RefAttributes<HTMLButtonElement>, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
|
|
373
712
|
|
|
374
713
|
/**
|
|
@@ -474,24 +813,111 @@ declare const statusStyles: {
|
|
|
474
813
|
readonly busy: "ds:bg-danger-fg";
|
|
475
814
|
readonly offline: "ds:bg-fg-4";
|
|
476
815
|
};
|
|
816
|
+
|
|
817
|
+
/**
|
|
818
|
+
* Props of `Avatar`. Everything not listed spreads onto the frame (the Radix
|
|
819
|
+
* root), as it always has.
|
|
820
|
+
*/
|
|
477
821
|
interface AvatarProps extends Omit<React$1.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>, "children">, VariantProps<typeof avatarVariants> {
|
|
478
822
|
src?: string | null;
|
|
479
823
|
alt?: string;
|
|
480
824
|
name?: string;
|
|
481
825
|
status?: keyof typeof statusStyles;
|
|
826
|
+
/**
|
|
827
|
+
* One class per part, keyed by `AvatarSlot` (ADR-008 decision 4). `root` is
|
|
828
|
+
* the outer wrapper — where a `shrink-0` or a margin belongs; `frame` is the
|
|
829
|
+
* circle, the same element `className` lands on. Each part's class comes
|
|
830
|
+
* after the design system's own and, on the frame, before `className`, so a
|
|
831
|
+
* consumer's `className` keeps winning exactly as it does today.
|
|
832
|
+
*
|
|
833
|
+
* Spelled out as `Partial<Record<AvatarSlot, string>>` rather than through the
|
|
834
|
+
* internal `SlotClassNames` helper so the public declaration names no
|
|
835
|
+
* unexported type.
|
|
836
|
+
*
|
|
837
|
+
* @experimental
|
|
838
|
+
*/
|
|
839
|
+
classNames?: Partial<Record<AvatarSlot, string>>;
|
|
482
840
|
}
|
|
483
841
|
declare const Avatar: React$1.ForwardRefExoticComponent<AvatarProps & React$1.RefAttributes<HTMLSpanElement>>;
|
|
484
842
|
|
|
843
|
+
/** The emphasis subset a badge offers. @experimental */
|
|
844
|
+
type BadgeVariant = Extract<Variant, "solid" | "soft" | "outline">;
|
|
845
|
+
/** The badge's own size scale, spelled with the shared names (§17). @experimental */
|
|
846
|
+
type BadgeSize = Extract<ControlSize, "xs" | "sm" | "md">;
|
|
847
|
+
/** Corner treatment; omitted keeps today's corner (D1). @experimental */
|
|
848
|
+
type BadgeShape = Extract<Shape, "rounded" | "pill">;
|
|
485
849
|
/**
|
|
486
|
-
* Badge
|
|
487
|
-
*
|
|
850
|
+
* The one-axis words Badge accepted before W3-13. Each resolves to a
|
|
851
|
+
* `{ variant, intent }` pair through `resolveBadgeAppearance` and renders the
|
|
852
|
+
* same classes it always did.
|
|
853
|
+
*
|
|
854
|
+
* @deprecated Use `variant` (`solid | soft | outline`) with `intent` instead:
|
|
855
|
+
* `default` → `solid` + `brand`, `secondary` → `soft` + `neutral`,
|
|
856
|
+
* `destructive` → `soft` + `danger`, `success | warning | info` → `soft` +
|
|
857
|
+
* the same word. `outline` is already an emphasis and is not deprecated.
|
|
488
858
|
*/
|
|
489
|
-
|
|
490
|
-
|
|
491
|
-
|
|
492
|
-
|
|
493
|
-
|
|
859
|
+
type BadgeLegacyVariant = "default" | "secondary" | "destructive" | "success" | "warning" | "info";
|
|
860
|
+
/** A resolved `{ variant, intent }` pair. @experimental */
|
|
861
|
+
interface BadgeAppearance {
|
|
862
|
+
variant: BadgeVariant;
|
|
863
|
+
intent: Intent;
|
|
864
|
+
}
|
|
865
|
+
/** What a badge can be asked for: the two axes, either one, or a legacy word. @experimental */
|
|
866
|
+
interface BadgeAppearanceInput {
|
|
867
|
+
variant?: BadgeVariant | BadgeLegacyVariant | null | undefined;
|
|
868
|
+
intent?: Intent | null | undefined;
|
|
869
|
+
}
|
|
870
|
+
/**
|
|
871
|
+
* Resolves what a consumer asked for into the pair the class table is keyed by.
|
|
872
|
+
*
|
|
873
|
+
* - both axes: taken as given (a legacy `variant` word with an explicit
|
|
874
|
+
* `intent` keeps the word's emphasis and takes the intent);
|
|
875
|
+
* - `variant` only: the per-variant default intent, or the legacy pair;
|
|
876
|
+
* - `intent` only: the per-intent default variant;
|
|
877
|
+
* - nothing: `solid` + `brand`, today's default.
|
|
878
|
+
*
|
|
879
|
+
* @experimental
|
|
880
|
+
*/
|
|
881
|
+
declare function resolveBadgeAppearance({ variant, intent, }?: BadgeAppearanceInput): BadgeAppearance;
|
|
882
|
+
/** The inputs `badgeVariants` accepts (the legacy `variant` words included). @experimental */
|
|
883
|
+
interface BadgeVariantsProps extends BadgeAppearanceInput {
|
|
884
|
+
size?: BadgeSize | null | undefined;
|
|
885
|
+
shape?: BadgeShape | null | undefined;
|
|
886
|
+
class?: string | null | undefined;
|
|
887
|
+
className?: string | null | undefined;
|
|
888
|
+
}
|
|
889
|
+
/**
|
|
890
|
+
* The badge's class string, for consumers that style their own element.
|
|
891
|
+
* Same call shape as before W3-13 (`variant`, `size`, `class`/`className`),
|
|
892
|
+
* plus `intent` and `shape`; a legacy `variant` word yields the string it
|
|
893
|
+
* always did.
|
|
894
|
+
*/
|
|
895
|
+
declare function badgeVariants({ variant, intent, size, shape, class: classValue, className, }?: BadgeVariantsProps): string;
|
|
896
|
+
interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
|
|
897
|
+
/**
|
|
898
|
+
* Visual emphasis: `solid` (filled), `soft` (tinted, the status look) or
|
|
899
|
+
* `outline`. Omitted, it follows `intent` (brand is solid, the rest soft);
|
|
900
|
+
* with neither prop the badge is `solid` + `brand`, as it always was.
|
|
901
|
+
* The legacy one-axis words are accepted and deprecated (`BadgeLegacyVariant`).
|
|
902
|
+
*/
|
|
903
|
+
variant?: BadgeVariant | BadgeLegacyVariant;
|
|
904
|
+
/**
|
|
905
|
+
* Semantic meaning → colour family. Omitted, it follows `variant`
|
|
906
|
+
* (`solid` is brand, `soft` and `outline` are neutral).
|
|
907
|
+
* @experimental
|
|
908
|
+
*/
|
|
909
|
+
intent?: Intent;
|
|
910
|
+
/** `xs` (10px text, W3-13), `sm` (default) or `md`. */
|
|
911
|
+
size?: BadgeSize;
|
|
912
|
+
/**
|
|
913
|
+
* Corner treatment. Omitted keeps today's corner (`--radius-pill`);
|
|
914
|
+
* `rounded` is the `radius.badge` role, `pill` is `radius.full` (D1).
|
|
915
|
+
* @experimental
|
|
916
|
+
*/
|
|
917
|
+
shape?: BadgeShape;
|
|
918
|
+
/** Leading status dot, drawn in the text colour. */
|
|
494
919
|
dot?: boolean;
|
|
920
|
+
/** Leading 14px glyph. */
|
|
495
921
|
icon?: React.ReactNode;
|
|
496
922
|
}
|
|
497
923
|
declare const Badge: React$1.ForwardRefExoticComponent<BadgeProps & React$1.RefAttributes<HTMLSpanElement>>;
|
|
@@ -535,39 +961,47 @@ declare const BreadcrumbPage: React$1.ForwardRefExoticComponent<BreadcrumbPagePr
|
|
|
535
961
|
type BreadcrumbSeparatorProps = React.HTMLAttributes<HTMLSpanElement>;
|
|
536
962
|
declare const BreadcrumbSeparator: React$1.ForwardRefExoticComponent<BreadcrumbSeparatorProps & React$1.RefAttributes<HTMLSpanElement>>;
|
|
537
963
|
|
|
538
|
-
|
|
539
|
-
|
|
540
|
-
|
|
541
|
-
|
|
542
|
-
|
|
543
|
-
|
|
544
|
-
|
|
545
|
-
|
|
546
|
-
|
|
547
|
-
|
|
548
|
-
|
|
549
|
-
|
|
550
|
-
|
|
551
|
-
|
|
552
|
-
|
|
553
|
-
|
|
554
|
-
|
|
555
|
-
|
|
556
|
-
|
|
557
|
-
|
|
558
|
-
|
|
559
|
-
|
|
560
|
-
size?:
|
|
561
|
-
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
562
|
-
type ButtonVariant = NonNullable<VariantProps<typeof buttonVariants>["variant"]>;
|
|
563
|
-
type ButtonSize = NonNullable<VariantProps<typeof buttonVariants>["size"]>;
|
|
564
|
-
|
|
565
|
-
interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
|
|
964
|
+
interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, ButtonIconProps {
|
|
965
|
+
/**
|
|
966
|
+
* Visual emphasis: `solid` (default) · `soft` · `outline` · `ghost` · `link`.
|
|
967
|
+
* The legacy words (`primary`, `secondary`, `destructive`, `success`,
|
|
968
|
+
* `accent`, `dashed`) are deprecated aliases — see {@link ButtonLegacyVariant}.
|
|
969
|
+
*/
|
|
970
|
+
variant?: ButtonVariant;
|
|
971
|
+
/**
|
|
972
|
+
* Meaning → colour family: `brand` · `neutral` · `success` · `danger`.
|
|
973
|
+
* Defaults per variant so an omitted prop renders what it always did.
|
|
974
|
+
* `destructive` is a deprecated alias of `danger` (decision D4).
|
|
975
|
+
*
|
|
976
|
+
* @experimental
|
|
977
|
+
*/
|
|
978
|
+
intent?: ButtonIntent | ButtonIntentAlias;
|
|
979
|
+
/**
|
|
980
|
+
* The shared control scale `xs · sm · md · lg · xl` (ADR-013). Default `md`
|
|
981
|
+
* (40px); `xs` and `xl` are new in W3-05. The icon-only squares `icon-xs` ·
|
|
982
|
+
* `icon-sm` · `icon` are deprecated in favour of `IconButton`
|
|
983
|
+
* ({@link ButtonIconSize}), and `compact` / `default` / `comfortable` are
|
|
984
|
+
* deprecated aliases of `sm` / `md` / `lg` ({@link ButtonSizeAlias}).
|
|
985
|
+
*/
|
|
986
|
+
size?: ButtonSize;
|
|
566
987
|
/** Render as the child element via Radix `Slot` (shadcn pattern). */
|
|
567
988
|
asChild?: boolean;
|
|
568
989
|
loading?: boolean;
|
|
569
|
-
|
|
570
|
-
|
|
990
|
+
/**
|
|
991
|
+
* Stretch to the container's width (`w-full`). A prop instead of a
|
|
992
|
+
* `className`, so the codemods and the dashboard can see it.
|
|
993
|
+
*
|
|
994
|
+
* @experimental
|
|
995
|
+
*/
|
|
996
|
+
fullWidth?: boolean;
|
|
997
|
+
/**
|
|
998
|
+
* Toggle state (a boolean prop, never a variant — ADR-007 §2). Reflected as
|
|
999
|
+
* `aria-pressed` and, when true, `data-pressed`. Leave undefined for an
|
|
1000
|
+
* action that does not toggle.
|
|
1001
|
+
*
|
|
1002
|
+
* @experimental
|
|
1003
|
+
*/
|
|
1004
|
+
pressed?: boolean;
|
|
571
1005
|
}
|
|
572
1006
|
declare const Button: React$1.ForwardRefExoticComponent<ButtonProps & React$1.RefAttributes<HTMLButtonElement>>;
|
|
573
1007
|
|
|
@@ -577,102 +1011,319 @@ interface CalendarHighlight {
|
|
|
577
1011
|
date: Date;
|
|
578
1012
|
color?: CalendarHighlightColor;
|
|
579
1013
|
}
|
|
580
|
-
|
|
581
|
-
|
|
582
|
-
|
|
1014
|
+
/** A range as `Calendar mode="range"` reports it: either edge may be missing while the user picks. */
|
|
1015
|
+
interface CalendarRange {
|
|
1016
|
+
from?: Date;
|
|
1017
|
+
to?: Date;
|
|
1018
|
+
}
|
|
1019
|
+
/** Props shared by both modes of `Calendar`. */
|
|
1020
|
+
interface CalendarBaseProps extends Omit<DayPickerProps, "mode" | "selected" | "onSelect" | "modifiers" | "modifiersClassNames" | "locale" | "required"> {
|
|
583
1021
|
highlights?: CalendarHighlight[];
|
|
584
1022
|
minDate?: Date;
|
|
585
1023
|
maxDate?: Date;
|
|
586
1024
|
className?: string;
|
|
1025
|
+
/**
|
|
1026
|
+
* A BCP 47 language tag (`"en-US"`, `"fr-FR"`), or a `date-fns` locale
|
|
1027
|
+
* object as before. Default: the provider's locale, else `"en-US"` (A3).
|
|
1028
|
+
*/
|
|
1029
|
+
locale?: string | DayPickerProps["locale"];
|
|
1030
|
+
}
|
|
1031
|
+
/** Single-date calendar (the default mode). */
|
|
1032
|
+
interface CalendarProps extends CalendarBaseProps {
|
|
1033
|
+
mode?: "single";
|
|
1034
|
+
selected?: Date | null;
|
|
1035
|
+
onSelect?: (date: Date) => void;
|
|
1036
|
+
}
|
|
1037
|
+
/**
|
|
1038
|
+
* Range calendar: `selected` is a `{ from, to }` pair and `onSelect` reports
|
|
1039
|
+
* the pair react-day-picker produced, `undefined` when it cleared the range.
|
|
1040
|
+
*
|
|
1041
|
+
* @experimental
|
|
1042
|
+
*/
|
|
1043
|
+
interface CalendarRangeProps extends CalendarBaseProps {
|
|
1044
|
+
mode: "range";
|
|
1045
|
+
selected?: CalendarRange | null;
|
|
1046
|
+
onSelect?: (range: CalendarRange | undefined) => void;
|
|
587
1047
|
}
|
|
588
|
-
declare function Calendar({ selected, onSelect, highlights, minDate, maxDate, className, classNames, captionLayout, navLayout, startMonth, endMonth, components, ...props }: CalendarProps): react_jsx_runtime.JSX.Element;
|
|
1048
|
+
declare function Calendar({ mode, selected, onSelect, highlights, minDate, maxDate, className, classNames, captionLayout, navLayout, startMonth, endMonth, components, locale: localeProp, today: todayProp, formatters, labels, lang, weekStartsOn, ...props }: CalendarProps | CalendarRangeProps): react_jsx_runtime.JSX.Element;
|
|
589
1049
|
declare namespace Calendar {
|
|
590
1050
|
var displayName: string;
|
|
591
1051
|
}
|
|
592
1052
|
|
|
593
1053
|
/**
|
|
594
|
-
*
|
|
595
|
-
*
|
|
1054
|
+
* Inner padding of a `Surface`, as a `surface.padding` role (W2-02): 16 / 20 /
|
|
1055
|
+
* 24px — the three card and panel paddings the library and its consumers
|
|
1056
|
+
* already write — or `none` for a surface whose content pads itself (a table,
|
|
1057
|
+
* an image, a list with its own row padding).
|
|
596
1058
|
*
|
|
597
|
-
*
|
|
598
|
-
* interactive — clickable card; hover darkens the border
|
|
599
|
-
* flat — borderless / shadowless transparent surface, for nesting
|
|
600
|
-
* inside Dialog/Sheet/Card without double-border
|
|
1059
|
+
* @experimental
|
|
601
1060
|
*/
|
|
602
|
-
|
|
603
|
-
variant?: "flat" | "default" | "interactive" | null | undefined;
|
|
604
|
-
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
605
|
-
type CardVariants = VariantProps<typeof cardVariants>;
|
|
606
|
-
interface CardProps extends React.HTMLAttributes<HTMLDivElement>, CardVariants {
|
|
607
|
-
}
|
|
608
|
-
declare const Card: React$1.ForwardRefExoticComponent<CardProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
609
|
-
declare const CardHeader: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
|
|
610
|
-
declare const CardTitle: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLHeadingElement> & React$1.RefAttributes<HTMLHeadingElement>>;
|
|
611
|
-
declare const CardDescription: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLParagraphElement> & React$1.RefAttributes<HTMLParagraphElement>>;
|
|
612
|
-
declare const CardContent: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
|
|
613
|
-
declare const CardFooter: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
|
|
614
|
-
declare const CardAction: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
|
|
615
|
-
|
|
1061
|
+
type SurfacePadding = "none" | "sm" | "md" | "lg";
|
|
616
1062
|
/**
|
|
617
|
-
*
|
|
618
|
-
*
|
|
619
|
-
*
|
|
620
|
-
*
|
|
621
|
-
* the single brand. Pure presentational.
|
|
1063
|
+
* Corner radius of a `Surface`, as a radius role (W2-07, target architecture
|
|
1064
|
+
* §18): `surface` for cards, dialogs and sheets, `surface-sm` for popovers,
|
|
1065
|
+
* tooltips, toasts and small cards, or `none`. Control and badge radii are not
|
|
1066
|
+
* offered: a surface is never a control.
|
|
622
1067
|
*
|
|
623
|
-
*
|
|
624
|
-
* brand → --color-brand-pro · audit → --color-brand-audit ·
|
|
625
|
-
* books → --color-brand-books · tax → --color-brand-tax ·
|
|
626
|
-
* neutral → --color-fg-3
|
|
1068
|
+
* @experimental
|
|
627
1069
|
*/
|
|
628
|
-
|
|
629
|
-
tone?: "brand" | "neutral" | "audit" | "books" | "tax" | null | undefined;
|
|
630
|
-
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
631
|
-
type CategoryTone = NonNullable<VariantProps<typeof categoryTagVariants>["tone"]>;
|
|
632
|
-
interface CategoryTagProps extends React.HTMLAttributes<HTMLSpanElement>, VariantProps<typeof categoryTagVariants> {
|
|
633
|
-
/** Tag label text. */
|
|
634
|
-
label: string;
|
|
635
|
-
/** Optional leading icon rendered inside the pill. */
|
|
636
|
-
icon?: React.ReactNode;
|
|
637
|
-
}
|
|
1070
|
+
type SurfaceRadius = "none" | "surface-sm" | "surface";
|
|
638
1071
|
/**
|
|
639
|
-
*
|
|
640
|
-
*
|
|
1072
|
+
* Elevation of a `Surface`, as an elevation role (W2-08, target architecture
|
|
1073
|
+
* §19): `flat` (resting, border-led — today's `Card`), `raised` (resting
|
|
1074
|
+
* lift), `floating` (anchored transient surfaces), `overlay` (modal surfaces),
|
|
1075
|
+
* or `none` for no shadow at all — which is what the hand-rolled card boxes in
|
|
1076
|
+
* every product render, and the default. `flat` is kept distinct from `none`
|
|
1077
|
+
* because today's `flat` role still aliases the hairline `shadow-quiet` (gated
|
|
1078
|
+
* on D1); when D1 lands the two coincide and nothing here changes.
|
|
1079
|
+
*
|
|
1080
|
+
* @experimental
|
|
641
1081
|
*/
|
|
642
|
-
|
|
643
|
-
interface CategoryDividerProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof categoryTagVariants> {
|
|
644
|
-
/** Category label shown in the tone-tinted tag. */
|
|
645
|
-
label: string;
|
|
646
|
-
/** Optional leading icon rendered inside the tag. */
|
|
647
|
-
icon?: React.ReactNode;
|
|
648
|
-
/** Optional item count → trailing neutral count chip. */
|
|
649
|
-
count?: number;
|
|
650
|
-
}
|
|
651
|
-
declare const CategoryDivider: React$1.ForwardRefExoticComponent<CategoryDividerProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
652
|
-
|
|
653
|
-
interface CheckboxProps extends Omit<React$1.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>, "checked" | "defaultChecked"> {
|
|
654
|
-
/** Optional inline label rendered to the right of the box */
|
|
655
|
-
label?: string;
|
|
656
|
-
/** Tri-state support: true | false | "indeterminate" */
|
|
657
|
-
checked?: boolean | "indeterminate";
|
|
658
|
-
defaultChecked?: boolean | "indeterminate";
|
|
659
|
-
/** Convenience: render with indeterminate state. Mirrors legacy prop. */
|
|
660
|
-
indeterminate?: boolean;
|
|
661
|
-
/** Box shape. Defaults to "square". */
|
|
662
|
-
shape?: "square" | "circle";
|
|
663
|
-
}
|
|
664
|
-
declare const Checkbox: React$1.ForwardRefExoticComponent<CheckboxProps & React$1.RefAttributes<HTMLButtonElement>>;
|
|
1082
|
+
type SurfaceElevation = "none" | "flat" | "raised" | "floating" | "overlay";
|
|
665
1083
|
|
|
666
|
-
|
|
667
|
-
|
|
668
|
-
|
|
669
|
-
|
|
670
|
-
|
|
671
|
-
|
|
672
|
-
|
|
673
|
-
|
|
674
|
-
|
|
675
|
-
|
|
1084
|
+
/**
|
|
1085
|
+
* Props of `Surface`.
|
|
1086
|
+
*
|
|
1087
|
+
* Tokenised props for exactly the three things a surface is (padding, radius,
|
|
1088
|
+
* elevation) and nothing else: no `gap`/`align`/`direction` (that is a `Stack`
|
|
1089
|
+
* inside it), no `bg`, `border`, `shadow`, `rounded`, `p`/`m`/`px`/`mt`,
|
|
1090
|
+
* `color`, `width`, `height`, `sx` or `css`, and no numeric or length values.
|
|
1091
|
+
* `className` and `style` land on the root element (§29.1).
|
|
1092
|
+
*
|
|
1093
|
+
* @experimental
|
|
1094
|
+
*/
|
|
1095
|
+
interface SurfaceProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "color"> {
|
|
1096
|
+
/**
|
|
1097
|
+
* Inner padding, as a `surface.padding` role.
|
|
1098
|
+
* @default "sm"
|
|
1099
|
+
*/
|
|
1100
|
+
padding?: SurfacePadding;
|
|
1101
|
+
/**
|
|
1102
|
+
* Corner radius, as a radius role.
|
|
1103
|
+
* @default "surface"
|
|
1104
|
+
*/
|
|
1105
|
+
radius?: SurfaceRadius;
|
|
1106
|
+
/**
|
|
1107
|
+
* Shadow, as an elevation role.
|
|
1108
|
+
* @default "none"
|
|
1109
|
+
*/
|
|
1110
|
+
elevation?: SurfaceElevation;
|
|
1111
|
+
}
|
|
1112
|
+
/**
|
|
1113
|
+
* Surface — the bordered box content sits on (W2-16, target architecture §23).
|
|
1114
|
+
* It is the primitive behind the 367 (Pro) / 119 (Portal) / 96 (Tax)
|
|
1115
|
+
* hand-rolled card boxes of the consumer usage audit (the class string is
|
|
1116
|
+
* `HAND_ROLLED_CARD` in the stories; it is not spelled here because Tailwind
|
|
1117
|
+
* would compile it from this comment) and the `.surface` helper class: with no
|
|
1118
|
+
* props it renders that box — surface background, 1px rule border,
|
|
1119
|
+
* `radius.surface`, `surface.padding.sm`, no shadow — and every knob is a
|
|
1120
|
+
* role, never a value. `Card` (W3-17) is built on it and adds anatomy.
|
|
1121
|
+
*
|
|
1122
|
+
* Deferred, deliberately:
|
|
1123
|
+
* - `interactive`: a clickable surface renders through `Pressable` (W3-03) so
|
|
1124
|
+
* it gets keyboard activation, `data-pressed` and a focus ring for free; a
|
|
1125
|
+
* `cursor-pointer` hover treatment here would be a click target with no
|
|
1126
|
+
* keyboard semantics. Until then, put a `Button asChild` or a link inside
|
|
1127
|
+
* the surface.
|
|
1128
|
+
* - `asChild`: waits for the design system's own `Slot` (a11y primitives).
|
|
1129
|
+
*
|
|
1130
|
+
* Server-safe: no hooks, no client directive, renders a plain `div` and stamps
|
|
1131
|
+
* `data-slot="surface"`.
|
|
1132
|
+
*
|
|
1133
|
+
* Under a consumer's shadcn theme the hand-rolled box and this primitive differ
|
|
1134
|
+
* on purpose in two places the parity story makes visible: the products'
|
|
1135
|
+
* `rounded-xl` is `--radius` + 4px (16px) where `radius.surface` is 12px, and
|
|
1136
|
+
* their `--border` is not the design system's rule colour. Both are decision
|
|
1137
|
+
* D1 (target architecture §18); `Surface` follows the roles.
|
|
1138
|
+
*
|
|
1139
|
+
* @experimental Shipped in Wave 2 as a new export nobody is forced to use; the
|
|
1140
|
+
* prop shapes may still change before the wave's exit review.
|
|
1141
|
+
*/
|
|
1142
|
+
declare const Surface: React$1.ForwardRefExoticComponent<SurfaceProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
1143
|
+
|
|
1144
|
+
/**
|
|
1145
|
+
* The document-outline level: which of `<h1>`…`<h6>` renders. Semantic only —
|
|
1146
|
+
* it says where the heading sits in the outline, not how large it is.
|
|
1147
|
+
*
|
|
1148
|
+
* @experimental W2-13.
|
|
1149
|
+
*/
|
|
1150
|
+
type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
|
|
1151
|
+
/**
|
|
1152
|
+
* The visual role of a heading: one of the four title roles of target
|
|
1153
|
+
* architecture §15. Independent of `level`. Written out as a literal union so
|
|
1154
|
+
* the public API report records the names.
|
|
1155
|
+
*
|
|
1156
|
+
* @experimental W2-13.
|
|
1157
|
+
*/
|
|
1158
|
+
type HeadingSize = "display" | "title-page" | "title-section" | "title-sub";
|
|
1159
|
+
/**
|
|
1160
|
+
* Props of `Heading`. `level` is required on purpose: a heading without an
|
|
1161
|
+
* outline level is the hard-coded `h3`/`h1`/`h4` this component exists to end
|
|
1162
|
+
* (target architecture §15.2, current-state audit §14).
|
|
1163
|
+
*
|
|
1164
|
+
* @experimental W2-13.
|
|
1165
|
+
*/
|
|
1166
|
+
interface HeadingProps extends React.HTMLAttributes<HTMLHeadingElement> {
|
|
1167
|
+
/** The outline level: renders `<h{level}>`. Required. */
|
|
1168
|
+
level: HeadingLevel;
|
|
1169
|
+
/**
|
|
1170
|
+
* The visual role, independent of `level`. Defaults from the level
|
|
1171
|
+
* (`1` → `title-page`, `2` → `title-section`, `3`–`6` → `title-sub`), so an
|
|
1172
|
+
* `<h3>` that must look like a section title says `size="title-section"`
|
|
1173
|
+
* instead of becoming an `<h2>`.
|
|
1174
|
+
*/
|
|
1175
|
+
size?: HeadingSize;
|
|
1176
|
+
}
|
|
1177
|
+
/**
|
|
1178
|
+
* `Heading` — an `<h1>`…`<h6>` whose outline level and visual size are two
|
|
1179
|
+
* separate props (W2-13, target architecture §15.2).
|
|
1180
|
+
*
|
|
1181
|
+
* `level` is required and picks the element; `size` picks the title role and
|
|
1182
|
+
* defaults from the level. Because the two are independent, a card title can
|
|
1183
|
+
* be the `<h3>` the document outline needs and still render at the section
|
|
1184
|
+
* scale, and a page can keep exactly one `<h1>` without every other title
|
|
1185
|
+
* shrinking. Every size is a role token; there is no pixel size.
|
|
1186
|
+
*
|
|
1187
|
+
* Renders in the display family (`font-display`) and the heading ink (`fg`),
|
|
1188
|
+
* as the base `h1`–`h4` rules do today, so an `<h5>` at `title-sub` matches an
|
|
1189
|
+
* `<h4>` at `title-sub`.
|
|
1190
|
+
*
|
|
1191
|
+
* Server-safe: no hooks, no client directive, no effects.
|
|
1192
|
+
*
|
|
1193
|
+
* Anatomy: one part, `data-slot="heading"`, which is also where `className`
|
|
1194
|
+
* and `style` land.
|
|
1195
|
+
*
|
|
1196
|
+
* @example
|
|
1197
|
+
* ```tsx
|
|
1198
|
+
* <Heading level={1}>Engagements</Heading>
|
|
1199
|
+
* <Heading level={3} size="title-section">Documents</Heading>
|
|
1200
|
+
* ```
|
|
1201
|
+
*
|
|
1202
|
+
* @experimental New export (W2-13); its size vocabulary may change while
|
|
1203
|
+
* decision D1 (visual source of truth) is open.
|
|
1204
|
+
*/
|
|
1205
|
+
declare const Heading: React$1.ForwardRefExoticComponent<HeadingProps & React$1.RefAttributes<HTMLHeadingElement>>;
|
|
1206
|
+
|
|
1207
|
+
/**
|
|
1208
|
+
* The full card look as one class string, for a consumer that styles its own
|
|
1209
|
+
* element as a card (`KpiCard`'s `<button>` does). Unchanged by W3-17: it
|
|
1210
|
+
* still spells the settled box itself, because a `Surface` cannot be applied
|
|
1211
|
+
* to someone else's element. `Card` itself renders a `Surface` and layers only
|
|
1212
|
+
* the variant slice on it.
|
|
1213
|
+
*/
|
|
1214
|
+
declare const cardVariants: (props?: ({
|
|
1215
|
+
variant?: "flat" | "default" | "interactive" | null | undefined;
|
|
1216
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
1217
|
+
type CardVariants = VariantProps<typeof cardVariants>;
|
|
1218
|
+
|
|
1219
|
+
/** Props of `Card`. */
|
|
1220
|
+
interface CardProps extends React.HTMLAttributes<HTMLDivElement>, CardVariants {
|
|
1221
|
+
/**
|
|
1222
|
+
* Inner padding of the root, as a `surface.padding` role (16 / 20 / 24px) —
|
|
1223
|
+
* the `p-4` / `p-5` / `p-6` override 88 % of cards carry today, as a prop.
|
|
1224
|
+
* `none` is today's default: the root has no padding of its own and
|
|
1225
|
+
* `CardHeader` / `CardContent` / `CardFooter` pad themselves, so set a
|
|
1226
|
+
* padding only on a card whose content is bare (no parts).
|
|
1227
|
+
* @default "none"
|
|
1228
|
+
*/
|
|
1229
|
+
padding?: SurfacePadding;
|
|
1230
|
+
}
|
|
1231
|
+
declare const Card: React$1.ForwardRefExoticComponent<CardProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
1232
|
+
declare const CardHeader: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
|
|
1233
|
+
/** Props of `CardTitle`. */
|
|
1234
|
+
interface CardTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {
|
|
1235
|
+
/**
|
|
1236
|
+
* The document-outline level: which of `<h1>`…`<h6>` the title renders. The
|
|
1237
|
+
* visual size does not change with it. Defaults to `3`, the tag the title
|
|
1238
|
+
* always rendered; a section card directly under a page `<h1>` wants `2`
|
|
1239
|
+
* (target architecture §15: "every titled component gains `headingLevel`").
|
|
1240
|
+
* @default 3
|
|
1241
|
+
*/
|
|
1242
|
+
headingLevel?: HeadingLevel;
|
|
1243
|
+
}
|
|
1244
|
+
declare const CardTitle: React$1.ForwardRefExoticComponent<CardTitleProps & React$1.RefAttributes<HTMLHeadingElement>>;
|
|
1245
|
+
declare const CardDescription: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLParagraphElement> & React$1.RefAttributes<HTMLParagraphElement>>;
|
|
1246
|
+
declare const CardContent: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
|
|
1247
|
+
declare const CardFooter: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
|
|
1248
|
+
declare const CardAction: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
|
|
1249
|
+
|
|
1250
|
+
/**
|
|
1251
|
+
* CategoryDivider — THE category separator: a tone-tinted category pill, a
|
|
1252
|
+
* flex-1 hairline rule, and an optional trailing count chip. Used to group a
|
|
1253
|
+
* run of feed items / cards by service line. Per the ONE-brand rule, this tag
|
|
1254
|
+
* is the *only* place per-service color is allowed — everything else stays on
|
|
1255
|
+
* the single brand. Pure presentational.
|
|
1256
|
+
*
|
|
1257
|
+
* Tones map to the suite tints:
|
|
1258
|
+
* brand → --color-brand-pro · audit → --color-brand-audit ·
|
|
1259
|
+
* books → --color-brand-books · tax → --color-brand-tax ·
|
|
1260
|
+
* neutral → --color-fg-3
|
|
1261
|
+
*/
|
|
1262
|
+
declare const categoryTagVariants: (props?: ({
|
|
1263
|
+
tone?: "brand" | "neutral" | "audit" | "books" | "tax" | null | undefined;
|
|
1264
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
1265
|
+
type CategoryTone = NonNullable<VariantProps<typeof categoryTagVariants>["tone"]>;
|
|
1266
|
+
interface CategoryTagProps extends React.HTMLAttributes<HTMLSpanElement>, VariantProps<typeof categoryTagVariants> {
|
|
1267
|
+
/** Tag label text. */
|
|
1268
|
+
label: string;
|
|
1269
|
+
/** Optional leading icon rendered inside the pill. */
|
|
1270
|
+
icon?: React.ReactNode;
|
|
1271
|
+
}
|
|
1272
|
+
/**
|
|
1273
|
+
* CategoryTag — the standalone tone-tinted category pill, reusable in card
|
|
1274
|
+
* headers and feed-item rows. Same atom CategoryDivider renders on its left.
|
|
1275
|
+
*/
|
|
1276
|
+
declare const CategoryTag: React$1.ForwardRefExoticComponent<CategoryTagProps & React$1.RefAttributes<HTMLSpanElement>>;
|
|
1277
|
+
interface CategoryDividerProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof categoryTagVariants> {
|
|
1278
|
+
/** Category label shown in the tone-tinted tag. */
|
|
1279
|
+
label: string;
|
|
1280
|
+
/** Optional leading icon rendered inside the tag. */
|
|
1281
|
+
icon?: React.ReactNode;
|
|
1282
|
+
/** Optional item count → trailing neutral count chip. */
|
|
1283
|
+
count?: number;
|
|
1284
|
+
}
|
|
1285
|
+
declare const CategoryDivider: React$1.ForwardRefExoticComponent<CategoryDividerProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
1286
|
+
|
|
1287
|
+
/** The states a checkbox renders: checked, unchecked, or partly checked. */
|
|
1288
|
+
type CheckboxChecked = boolean | "indeterminate";
|
|
1289
|
+
interface CheckboxProps extends Omit<React$1.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>, "checked" | "defaultChecked"> {
|
|
1290
|
+
/** Optional inline label rendered to the right of the box. Names the button through `htmlFor`. */
|
|
1291
|
+
label?: string;
|
|
1292
|
+
/** Tri-state support: true | false | "indeterminate" */
|
|
1293
|
+
checked?: CheckboxChecked;
|
|
1294
|
+
defaultChecked?: CheckboxChecked;
|
|
1295
|
+
/**
|
|
1296
|
+
* Render the indeterminate state.
|
|
1297
|
+
*
|
|
1298
|
+
* @deprecated Pass `checked="indeterminate"` instead (C-CHECKBOX-INDET;
|
|
1299
|
+
* codemod CM-11 rewrites it). Removed in 3.0.
|
|
1300
|
+
*/
|
|
1301
|
+
indeterminate?: boolean;
|
|
1302
|
+
/** Box shape. Defaults to "square". */
|
|
1303
|
+
shape?: "square" | "circle";
|
|
1304
|
+
/**
|
|
1305
|
+
* The value submitted with `name` while checked. Default `"on"`, like a
|
|
1306
|
+
* native checkbox.
|
|
1307
|
+
*/
|
|
1308
|
+
value?: string;
|
|
1309
|
+
/**
|
|
1310
|
+
* The checkbox is in error: `aria-invalid` and `data-invalid`. Implied by
|
|
1311
|
+
* the surrounding `Field`'s `invalid` or a mounted `FieldError`.
|
|
1312
|
+
*/
|
|
1313
|
+
invalid?: boolean;
|
|
1314
|
+
}
|
|
1315
|
+
declare const Checkbox: React$1.ForwardRefExoticComponent<CheckboxProps & React$1.RefAttributes<HTMLButtonElement>>;
|
|
1316
|
+
|
|
1317
|
+
type ClientSelectOption = {
|
|
1318
|
+
id: string;
|
|
1319
|
+
label: string;
|
|
1320
|
+
email?: string;
|
|
1321
|
+
};
|
|
1322
|
+
interface ClientSelectProps {
|
|
1323
|
+
clients: ClientSelectOption[];
|
|
1324
|
+
value: string | null;
|
|
1325
|
+
onChange: (clientId: string | null) => void;
|
|
1326
|
+
name?: string;
|
|
676
1327
|
error?: string;
|
|
677
1328
|
className?: string;
|
|
678
1329
|
placeholder?: string;
|
|
@@ -760,9 +1411,17 @@ declare const ContextMenuSubTrigger: React$1.ForwardRefExoticComponent<Omit<Cont
|
|
|
760
1411
|
declare const ContextMenuSubContent: React$1.ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuSubContentProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
|
|
761
1412
|
declare const ContextMenuContent: React$1.ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuContentProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
|
|
762
1413
|
interface ContextMenuItemProps extends React$1.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Item> {
|
|
1414
|
+
/** Render as a destructive (danger) action — the `intent="danger"` look of the shared Menu recipe. */
|
|
763
1415
|
destructive?: boolean;
|
|
1416
|
+
/** Increase left padding to align with checkbox/radio items. */
|
|
764
1417
|
inset?: boolean;
|
|
765
1418
|
}
|
|
1419
|
+
/**
|
|
1420
|
+
* A menu item. Activation fires both `onSelect` (canonical; call
|
|
1421
|
+
* `event.preventDefault()` on it to keep the menu open) and `onClick`
|
|
1422
|
+
* (tolerated): Radix composes `onClick` with its select handler and a
|
|
1423
|
+
* keyboard activation clicks the element.
|
|
1424
|
+
*/
|
|
766
1425
|
declare const ContextMenuItem: React$1.ForwardRefExoticComponent<ContextMenuItemProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
767
1426
|
declare const ContextMenuCheckboxItem: React$1.ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuCheckboxItemProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
|
|
768
1427
|
declare const ContextMenuRadioItem: React$1.ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuRadioItemProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
|
|
@@ -805,10 +1464,25 @@ declare function isoToYear(iso: string | undefined | null): string;
|
|
|
805
1464
|
declare function yearToIso(year: string): string;
|
|
806
1465
|
/** Apply the `YYYY` mask while the user types. */
|
|
807
1466
|
declare function applyYearMask(input: string): string;
|
|
1467
|
+
/** A display pattern: the tokens `MM`, `DD` and `YYYY`, once each, around literal separators — `"MM/DD/YYYY"`, `"DD.MM.YYYY"`, `"YYYY-MM-DD"`. */
|
|
1468
|
+
type DatePattern = string;
|
|
808
1469
|
|
|
809
1470
|
interface DatePickerProps {
|
|
810
|
-
|
|
1471
|
+
/** ISO `YYYY-MM-DD`; `""` or `null` is "controlled, empty". */
|
|
1472
|
+
value?: string | null;
|
|
811
1473
|
defaultValue?: string;
|
|
1474
|
+
/**
|
|
1475
|
+
* The value callback: the ISO date, or `null` when the field is cleared.
|
|
1476
|
+
* Fires before the legacy `onChange` when both are passed.
|
|
1477
|
+
*
|
|
1478
|
+
* @experimental
|
|
1479
|
+
*/
|
|
1480
|
+
onValueChange?: (value: string | null) => void;
|
|
1481
|
+
/**
|
|
1482
|
+
* Legacy fake-event callback (C-DATE-FAKEEVENT): `{ target: { name, value } }`
|
|
1483
|
+
* with the ISO string (`""` when cleared). Prefer `onValueChange`; codemod
|
|
1484
|
+
* CM-10 rewrites the recognisable shapes.
|
|
1485
|
+
*/
|
|
812
1486
|
onChange?: (event: {
|
|
813
1487
|
target: {
|
|
814
1488
|
name?: string;
|
|
@@ -816,6 +1490,22 @@ interface DatePickerProps {
|
|
|
816
1490
|
};
|
|
817
1491
|
}) => void;
|
|
818
1492
|
name?: string;
|
|
1493
|
+
/** `id` of the form to submit with when the picker is rendered outside it (Dialog, Sheet). */
|
|
1494
|
+
form?: string;
|
|
1495
|
+
/**
|
|
1496
|
+
* BCP 47 tag deciding the typed pattern, the mask and the default
|
|
1497
|
+
* placeholder. Default: the provider's locale, else `"en-US"` (`MM/DD/YYYY`).
|
|
1498
|
+
*
|
|
1499
|
+
* @experimental
|
|
1500
|
+
*/
|
|
1501
|
+
locale?: string;
|
|
1502
|
+
/**
|
|
1503
|
+
* The display pattern, overriding the locale's: `MM`, `DD` and `YYYY`
|
|
1504
|
+
* once each around literal separators (`"DD.MM.YYYY"`). Ignored in year mode.
|
|
1505
|
+
*
|
|
1506
|
+
* @experimental
|
|
1507
|
+
*/
|
|
1508
|
+
dateFormat?: DatePattern;
|
|
819
1509
|
id?: string;
|
|
820
1510
|
label?: string;
|
|
821
1511
|
error?: string;
|
|
@@ -860,11 +1550,33 @@ interface DateRangeValue {
|
|
|
860
1550
|
from?: string;
|
|
861
1551
|
to?: string;
|
|
862
1552
|
}
|
|
1553
|
+
/** The two form field names of a range. */
|
|
1554
|
+
interface DateRangeNames {
|
|
1555
|
+
from: string;
|
|
1556
|
+
to: string;
|
|
1557
|
+
}
|
|
863
1558
|
interface DateRangePickerProps {
|
|
864
1559
|
value?: DateRangeValue;
|
|
865
1560
|
defaultValue?: DateRangeValue;
|
|
866
1561
|
onChange?: (value: DateRangeValue) => void;
|
|
1562
|
+
/** Base of the two field names: `${name}_from` / `${name}_to` unless `names` says otherwise. */
|
|
867
1563
|
name?: string;
|
|
1564
|
+
/**
|
|
1565
|
+
* Explicit field names for the two edges, replacing the `${name}_from` /
|
|
1566
|
+
* `${name}_to` default (C-DATERANGE-NAMES, kept through 2.x).
|
|
1567
|
+
*
|
|
1568
|
+
* @experimental
|
|
1569
|
+
*/
|
|
1570
|
+
names?: DateRangeNames;
|
|
1571
|
+
/** `id` of the form to submit with when the picker is rendered outside it (Dialog, Sheet). */
|
|
1572
|
+
form?: string;
|
|
1573
|
+
/**
|
|
1574
|
+
* BCP 47 tag deciding the displayed pattern of both edges and the
|
|
1575
|
+
* calendar's language. Default: the provider's locale, else `"en-US"`.
|
|
1576
|
+
*
|
|
1577
|
+
* @experimental
|
|
1578
|
+
*/
|
|
1579
|
+
locale?: string;
|
|
868
1580
|
id?: string;
|
|
869
1581
|
label?: string;
|
|
870
1582
|
error?: string;
|
|
@@ -887,37 +1599,101 @@ declare const Dialog: React$1.FC<DialogPrimitive.DialogProps>;
|
|
|
887
1599
|
declare const DialogTrigger: React$1.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & React$1.RefAttributes<HTMLButtonElement>>;
|
|
888
1600
|
declare const DialogPortal: React$1.FC<DialogPrimitive.DialogPortalProps>;
|
|
889
1601
|
declare const DialogOverlay: React$1.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogOverlayProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
|
|
890
|
-
|
|
891
|
-
|
|
892
|
-
|
|
893
|
-
|
|
894
|
-
|
|
895
|
-
|
|
1602
|
+
/**
|
|
1603
|
+
* Width of a `DialogContent`, as a step of the dialog width scale (W5-05):
|
|
1604
|
+
* `sm` 24rem · `md` 32rem (default) · `lg` 42rem · `xl` 56rem · `full` the
|
|
1605
|
+
* viewport minus a 1rem gutter. `sm`/`md`/`lg`/`full` are the 1.x steps,
|
|
1606
|
+
* pixel for pixel; `xl` is new. Every step yields to `--ds-dialog-width`
|
|
1607
|
+
* when a consumer sets it (on the content, or on a scope above it), which
|
|
1608
|
+
* is the replacement for the `!max-w-*` overrides products write today.
|
|
1609
|
+
*
|
|
1610
|
+
* @experimental
|
|
1611
|
+
*/
|
|
1612
|
+
type DialogSize$1 = "sm" | "md" | "lg" | "xl" | "full";
|
|
1613
|
+
/**
|
|
1614
|
+
* Height of a `DialogContent` (W5-05). `auto` (default) grows with the
|
|
1615
|
+
* content and scrolls the whole box past `100vh - 6rem`, as it always did.
|
|
1616
|
+
* A fixed step (`sm` 24rem · `md` 32rem · `lg` 44rem · `full` the viewport
|
|
1617
|
+
* minus the same gutter, each capped at the viewport) turns the box into a
|
|
1618
|
+
* column whose `DialogBody` is the scroll region, so header and footer stay
|
|
1619
|
+
* put while long content scrolls.
|
|
1620
|
+
*
|
|
1621
|
+
* @experimental
|
|
1622
|
+
*/
|
|
1623
|
+
type DialogHeight = "auto" | "sm" | "md" | "lg" | "full";
|
|
1624
|
+
/**
|
|
1625
|
+
* The copy a `Dialog` renders (target architecture §24.5). English defaults
|
|
1626
|
+
* until the messages contract of the provider lands (W5-20).
|
|
1627
|
+
*
|
|
1628
|
+
* @experimental
|
|
1629
|
+
*/
|
|
1630
|
+
interface DialogMessages {
|
|
1631
|
+
/** The accessible name of the built-in close button. Default `"Close"`. */
|
|
1632
|
+
close: string;
|
|
1633
|
+
}
|
|
1634
|
+
/**
|
|
1635
|
+
* Props of `DialogContent`: Radix's content props plus the sizing and
|
|
1636
|
+
* dismiss options.
|
|
1637
|
+
*
|
|
1638
|
+
* @experimental
|
|
1639
|
+
*/
|
|
896
1640
|
interface DialogContentProps extends React$1.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> {
|
|
897
|
-
|
|
1641
|
+
/** Width step. Default `md`. See {@link DialogSize}. */
|
|
1642
|
+
size?: DialogSize$1;
|
|
1643
|
+
/** Height step. Default `auto`. See {@link DialogHeight}. */
|
|
1644
|
+
height?: DialogHeight;
|
|
898
1645
|
/**
|
|
899
1646
|
* If false, the built-in close button is hidden. Default: true.
|
|
900
1647
|
* Use `<DialogClose>` inside content to render your own close UI.
|
|
901
1648
|
*/
|
|
902
1649
|
showCloseButton?: boolean;
|
|
1650
|
+
/**
|
|
1651
|
+
* The accessible name of the built-in close button. Takes precedence over
|
|
1652
|
+
* `messages.close`. Default `"Close"`.
|
|
1653
|
+
*/
|
|
1654
|
+
closeLabel?: string;
|
|
1655
|
+
/** Overrides of the copy the dialog renders (English defaults until W5-20). */
|
|
1656
|
+
messages?: Partial<DialogMessages>;
|
|
903
1657
|
}
|
|
904
1658
|
declare const DialogContent: React$1.ForwardRefExoticComponent<DialogContentProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
905
1659
|
declare const DialogClose: React$1.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogCloseProps & React$1.RefAttributes<HTMLButtonElement>, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
|
|
906
1660
|
declare const DialogHeader: {
|
|
907
|
-
(
|
|
1661
|
+
(props: React$1.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
|
|
908
1662
|
displayName: string;
|
|
909
1663
|
};
|
|
910
|
-
|
|
911
|
-
|
|
912
|
-
|
|
913
|
-
|
|
914
|
-
|
|
1664
|
+
/**
|
|
1665
|
+
* Props of `DialogBody` (W5-05).
|
|
1666
|
+
*
|
|
1667
|
+
* @experimental
|
|
1668
|
+
*/
|
|
1669
|
+
interface DialogBodyProps extends React$1.HTMLAttributes<HTMLDivElement> {
|
|
1670
|
+
/**
|
|
1671
|
+
* Inner padding. Default `none`: the content box already pads itself
|
|
1672
|
+
* (`p-6`), so the body only needs its own padding when the content is
|
|
1673
|
+
* `height`-fixed and a scrolling region wants breathing room.
|
|
1674
|
+
*/
|
|
1675
|
+
padding?: "none" | "sm" | "md" | "lg";
|
|
1676
|
+
}
|
|
1677
|
+
/**
|
|
1678
|
+
* The scroll region of a dialog between `DialogHeader` and `DialogFooter`
|
|
1679
|
+
* (W5-05). With `height="auto"` (the default) the whole content scrolls as
|
|
1680
|
+
* before and the body is a plain block; with a fixed `height` it takes the
|
|
1681
|
+
* remaining height and scrolls while the header and footer stay in place.
|
|
1682
|
+
*
|
|
1683
|
+
* @experimental
|
|
1684
|
+
*/
|
|
1685
|
+
declare const DialogBody: React$1.ForwardRefExoticComponent<DialogBodyProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
1686
|
+
declare const DialogFooter: {
|
|
1687
|
+
(props: React$1.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
|
|
1688
|
+
displayName: string;
|
|
1689
|
+
};
|
|
1690
|
+
declare const DialogTitle: React$1.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogTitleProps & React$1.RefAttributes<HTMLHeadingElement>, "ref"> & React$1.RefAttributes<HTMLHeadingElement>>;
|
|
915
1691
|
declare const DialogDescription: React$1.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogDescriptionProps & React$1.RefAttributes<HTMLParagraphElement>, "ref"> & React$1.RefAttributes<HTMLParagraphElement>>;
|
|
916
1692
|
|
|
917
|
-
declare const chipVariants: (props?: ({
|
|
1693
|
+
declare const chipVariants$1: (props?: ({
|
|
918
1694
|
variant?: "neutral" | "primary" | null | undefined;
|
|
919
1695
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
920
|
-
interface DismissibleChipProps extends Omit<React$1.ButtonHTMLAttributes<HTMLButtonElement>, "onClick" | "children">, VariantProps<typeof chipVariants> {
|
|
1696
|
+
interface DismissibleChipProps extends Omit<React$1.ButtonHTMLAttributes<HTMLButtonElement>, "onClick" | "children">, VariantProps<typeof chipVariants$1> {
|
|
921
1697
|
label: React$1.ReactNode;
|
|
922
1698
|
onDismiss: () => void;
|
|
923
1699
|
}
|
|
@@ -1009,6 +1785,22 @@ interface DonutChartProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "ch
|
|
|
1009
1785
|
}
|
|
1010
1786
|
declare const DonutChart: React$1.ForwardRefExoticComponent<DonutChartProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
1011
1787
|
|
|
1788
|
+
/**
|
|
1789
|
+
* L1a behaviour primitive (private). Not exported from the package.
|
|
1790
|
+
*
|
|
1791
|
+
* The `width` of a menu content surface (W5-13; target architecture §14
|
|
1792
|
+
* "Menus: `width: auto | trigger | sm | md`" — 62% of consumer
|
|
1793
|
+
* `DropdownMenuContent` uses override the width by class today). `auto` is
|
|
1794
|
+
* the default and adds nothing, so every existing menu keeps its class string
|
|
1795
|
+
* byte for byte; the other values are opt-in. `trigger` reads the Popper
|
|
1796
|
+
* variable Radix stamps on the content, so the menu is as wide as the element
|
|
1797
|
+
* that opened it.
|
|
1798
|
+
*
|
|
1799
|
+
* Full literals, one per row, so Tailwind's scanner sees them.
|
|
1800
|
+
*/
|
|
1801
|
+
/** How wide a menu content surface is. */
|
|
1802
|
+
type MenuWidth = "auto" | "trigger" | "sm" | "md";
|
|
1803
|
+
|
|
1012
1804
|
declare const DropdownMenu: React$1.FC<DropdownMenuPrimitive.DropdownMenuProps>;
|
|
1013
1805
|
declare const DropdownMenuTrigger: React$1.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuTriggerProps & React$1.RefAttributes<HTMLButtonElement>>;
|
|
1014
1806
|
declare const DropdownMenuGroup: React$1.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuGroupProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
@@ -1019,13 +1811,32 @@ declare const DropdownMenuSubTrigger: React$1.ForwardRefExoticComponent<Omit<Dro
|
|
|
1019
1811
|
inset?: boolean;
|
|
1020
1812
|
} & React$1.RefAttributes<HTMLDivElement>>;
|
|
1021
1813
|
declare const DropdownMenuSubContent: React$1.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSubContentProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
|
|
1022
|
-
|
|
1814
|
+
interface DropdownMenuContentProps extends React$1.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content> {
|
|
1815
|
+
/**
|
|
1816
|
+
* The width of the menu surface. `auto` (default) sizes to the items with
|
|
1817
|
+
* the 10rem minimum; `trigger` matches the element that opened the menu;
|
|
1818
|
+
* `sm` and `md` are fixed widths (12rem, 16rem). Replaces the `w-*` class
|
|
1819
|
+
* overrides most consumers write today.
|
|
1820
|
+
* @default "auto"
|
|
1821
|
+
*/
|
|
1822
|
+
width?: MenuWidth;
|
|
1823
|
+
}
|
|
1824
|
+
declare const DropdownMenuContent: React$1.ForwardRefExoticComponent<DropdownMenuContentProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
1023
1825
|
interface DropdownMenuItemProps extends React$1.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> {
|
|
1024
|
-
/**
|
|
1826
|
+
/**
|
|
1827
|
+
* Render as a destructive (danger) action — the `intent="danger"` look of
|
|
1828
|
+
* the shared Menu recipe (`menu.item.destructive.*` tokens).
|
|
1829
|
+
*/
|
|
1025
1830
|
destructive?: boolean;
|
|
1026
1831
|
/** Increase left padding to align with checkbox/radio items. */
|
|
1027
1832
|
inset?: boolean;
|
|
1028
1833
|
}
|
|
1834
|
+
/**
|
|
1835
|
+
* A menu item. Activation fires both `onSelect` (canonical; call
|
|
1836
|
+
* `event.preventDefault()` on it to keep the menu open) and `onClick`
|
|
1837
|
+
* (tolerated): Radix composes `onClick` with its select handler and a
|
|
1838
|
+
* keyboard activation clicks the element.
|
|
1839
|
+
*/
|
|
1029
1840
|
declare const DropdownMenuItem: React$1.ForwardRefExoticComponent<DropdownMenuItemProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
1030
1841
|
declare const DropdownMenuCheckboxItem: React$1.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuCheckboxItemProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
|
|
1031
1842
|
declare const DropdownMenuRadioItem: React$1.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuRadioItemProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
|
|
@@ -1116,21 +1927,87 @@ interface FileTypeBadgeProps extends Omit<React.HTMLAttributes<HTMLSpanElement>,
|
|
|
1116
1927
|
}
|
|
1117
1928
|
declare const FileTypeBadge: React$1.ForwardRefExoticComponent<FileTypeBadgeProps & React$1.RefAttributes<HTMLSpanElement>>;
|
|
1118
1929
|
|
|
1930
|
+
/**
|
|
1931
|
+
* The looks of the dropzone: `default` stacks the icon and the copy in a
|
|
1932
|
+
* padded tile; `compact` lays them out in one row for dialogs and dense
|
|
1933
|
+
* forms.
|
|
1934
|
+
*
|
|
1935
|
+
* @experimental
|
|
1936
|
+
*/
|
|
1937
|
+
type FileUploadVariant = "default" | "compact";
|
|
1938
|
+
|
|
1939
|
+
/**
|
|
1940
|
+
* Props of `FileUpload`.
|
|
1941
|
+
*
|
|
1942
|
+
* @experimental The W4-24 additions (`name`, `form`, `required`, `classNames`,
|
|
1943
|
+
* `variant`, `inputRef`) are experimental; the legacy props keep their contract.
|
|
1944
|
+
*/
|
|
1119
1945
|
interface FileUploadProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
1120
1946
|
accept?: string;
|
|
1121
1947
|
maxSize?: number;
|
|
1122
1948
|
multiple?: boolean;
|
|
1123
1949
|
onFilesSelected?: (files: File[]) => void;
|
|
1124
1950
|
disabled?: boolean;
|
|
1951
|
+
/**
|
|
1952
|
+
* The form field name. With it the owned `<input type="file">` submits the
|
|
1953
|
+
* selected or dropped files; a surrounding `Field` can supply it.
|
|
1954
|
+
*/
|
|
1955
|
+
name?: string;
|
|
1956
|
+
/** `id` of the form to submit with when the dropzone is rendered outside it. */
|
|
1957
|
+
form?: string;
|
|
1958
|
+
/** Block native submission while no file is selected. */
|
|
1959
|
+
required?: boolean;
|
|
1960
|
+
/** `default` (stacked tile) or `compact` (one row). */
|
|
1961
|
+
variant?: FileUploadVariant;
|
|
1962
|
+
/**
|
|
1963
|
+
* One class per part, keyed by `FileUploadSlot` (ADR-008). `className`
|
|
1964
|
+
* keeps landing on the root; `dropzone` is the `<label>` that
|
|
1965
|
+
* `[&_label]` selectors reach for today (C-DOM-04), `input` the file
|
|
1966
|
+
* input, `error` the message.
|
|
1967
|
+
*/
|
|
1968
|
+
classNames?: Partial<Record<Exclude<FileUploadSlot, "root">, string>>;
|
|
1969
|
+
/** A ref to the owned file input. */
|
|
1970
|
+
inputRef?: React.Ref<HTMLInputElement>;
|
|
1971
|
+
/** Overrides for the default dropzone copy (W5-20). @experimental */
|
|
1972
|
+
messages?: Partial<FileUploadMessages>;
|
|
1125
1973
|
}
|
|
1126
|
-
declare function FileUpload({ accept, maxSize, multiple, onFilesSelected, disabled, className, children, ...props }: FileUploadProps): react_jsx_runtime.JSX.Element;
|
|
1974
|
+
declare function FileUpload({ accept, maxSize, multiple, onFilesSelected, disabled, name, form, required, variant, classNames, inputRef: inputRefProp, messages: messagesProp, className, children, ...props }: FileUploadProps): react_jsx_runtime.JSX.Element;
|
|
1127
1975
|
|
|
1976
|
+
/**
|
|
1977
|
+
* `FormError` / `FormSuccess` — the pre-Field inline messages (contract
|
|
1978
|
+
* C-FORM-MSG, replaced by the Field parts in W4-25, removed in 3.0).
|
|
1979
|
+
*
|
|
1980
|
+
* They are deliberately **not** thin adapters over `FieldError` and
|
|
1981
|
+
* `FieldDescription`: the Field parts stamp `data-slot="field-error"` /
|
|
1982
|
+
* `data-slot="field-description"`, always render a part `id` (a `useId`
|
|
1983
|
+
* fallback outside a `Field`), and `FieldError` renders nothing without
|
|
1984
|
+
* content and chooses its `role` from the mount timing — none of which
|
|
1985
|
+
* today's `<p role="alert"><svg/><span>…</span></p>` has. Rendering through
|
|
1986
|
+
* the parts would therefore change the DOM every consumer freezes (C-DOM
|
|
1987
|
+
* snapshots) for no visible gain, so the markup below stays byte for byte
|
|
1988
|
+
* until 3.0 and the replacement is a call-site migration:
|
|
1989
|
+
*
|
|
1990
|
+
* ```tsx
|
|
1991
|
+
* <Field invalid={!!error}>
|
|
1992
|
+
* <Label>Email</Label>
|
|
1993
|
+
* <Input />
|
|
1994
|
+
* <FieldError>{error}</FieldError>
|
|
1995
|
+
* </Field>
|
|
1996
|
+
* ```
|
|
1997
|
+
*
|
|
1998
|
+
* `FormSuccess` has no Field counterpart by design: a confirmation is a
|
|
1999
|
+
* `FieldDescription` (or a toast), not a field state.
|
|
2000
|
+
*/
|
|
1128
2001
|
interface FormErrorProps extends React.HTMLAttributes<HTMLParagraphElement> {
|
|
1129
2002
|
children: React.ReactNode;
|
|
1130
2003
|
}
|
|
1131
2004
|
/**
|
|
1132
2005
|
* Inline form error — paired below an input to communicate validation failure.
|
|
1133
2006
|
* Uses architectural --color-danger-fg token.
|
|
2007
|
+
*
|
|
2008
|
+
* @deprecated Use `FieldError` inside a `Field` (W4-25, C-FORM-MSG): it wires
|
|
2009
|
+
* `aria-describedby` and `aria-invalid` on the control and announces itself
|
|
2010
|
+
* only after an interaction. Removed in 3.0.
|
|
1134
2011
|
*/
|
|
1135
2012
|
declare function FormError({ children, className, ...props }: FormErrorProps): react_jsx_runtime.JSX.Element;
|
|
1136
2013
|
interface FormSuccessProps extends React.HTMLAttributes<HTMLParagraphElement> {
|
|
@@ -1139,6 +2016,10 @@ interface FormSuccessProps extends React.HTMLAttributes<HTMLParagraphElement> {
|
|
|
1139
2016
|
/**
|
|
1140
2017
|
* Inline form success — paired below an input to confirm a saved value.
|
|
1141
2018
|
* Uses architectural --color-success-fg token.
|
|
2019
|
+
*
|
|
2020
|
+
* @deprecated Use `FieldDescription` inside a `Field` for a per-field
|
|
2021
|
+
* confirmation, or a toast for a saved form (W4-25, C-FORM-MSG). Removed in
|
|
2022
|
+
* 3.0.
|
|
1142
2023
|
*/
|
|
1143
2024
|
declare function FormSuccess({ children, className, ...props }: FormSuccessProps): react_jsx_runtime.JSX.Element;
|
|
1144
2025
|
|
|
@@ -1157,6 +2038,21 @@ declare function FormSuccess({ children, className, ...props }: FormSuccessProps
|
|
|
1157
2038
|
* For marketing-style centered section heads, prefer `<SectionHeader>`.
|
|
1158
2039
|
* For lower-level title+description blocks that aren't part of a form,
|
|
1159
2040
|
* use `<SectionHead>` from `./section`.
|
|
2041
|
+
*
|
|
2042
|
+
* Contract C-FORM-MSG (W4-25): replaced by `Fieldset` + `FieldsetLegend`,
|
|
2043
|
+
* removed in 3.0. It is deliberately **not** an adapter over them: `Fieldset`
|
|
2044
|
+
* stamps `data-slot="fieldset"` and lays its children out as a
|
|
2045
|
+
* `flex-col gap-3` column, `FieldsetLegend` adds `mb-1.5` — both would move
|
|
2046
|
+
* the heading row and the fields this component renders today. The markup
|
|
2047
|
+
* below therefore stays byte for byte until 3.0; the replacement is a
|
|
2048
|
+
* call-site migration:
|
|
2049
|
+
*
|
|
2050
|
+
* ```tsx
|
|
2051
|
+
* <Fieldset>
|
|
2052
|
+
* <FieldsetLegend>Contact</FieldsetLegend>
|
|
2053
|
+
* <Field>…</Field>
|
|
2054
|
+
* </Fieldset>
|
|
2055
|
+
* ```
|
|
1160
2056
|
*/
|
|
1161
2057
|
interface FormSectionProps extends Omit<React.FieldsetHTMLAttributes<HTMLFieldSetElement>, "title"> {
|
|
1162
2058
|
/** The section heading (renders as `<legend>` text). */
|
|
@@ -1168,6 +2064,14 @@ interface FormSectionProps extends Omit<React.FieldsetHTMLAttributes<HTMLFieldSe
|
|
|
1168
2064
|
/** Space between the heading block and the fields. Default `mt-4`. */
|
|
1169
2065
|
headSpacing?: string;
|
|
1170
2066
|
}
|
|
2067
|
+
/**
|
|
2068
|
+
* A grouped block of a settings/profile form: `<fieldset>` + `<legend>` with
|
|
2069
|
+
* an optional description and trailing action.
|
|
2070
|
+
*
|
|
2071
|
+
* @deprecated Use `Fieldset` with `FieldsetLegend` (W4-25, C-FORM-MSG); put
|
|
2072
|
+
* a description in a `Text` and each control in its own `Field`. Removed in
|
|
2073
|
+
* 3.0.
|
|
2074
|
+
*/
|
|
1171
2075
|
declare const FormSection: React$1.ForwardRefExoticComponent<FormSectionProps & React$1.RefAttributes<HTMLFieldSetElement>>;
|
|
1172
2076
|
|
|
1173
2077
|
declare const HoverCard: React$1.FC<HoverCardPrimitive.HoverCardProps>;
|
|
@@ -1176,21 +2080,67 @@ declare const HoverCardPortal: React$1.FC<HoverCardPrimitive.HoverCardPortalProp
|
|
|
1176
2080
|
declare const HoverCardContent: React$1.ForwardRefExoticComponent<Omit<HoverCardPrimitive.HoverCardContentProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
|
|
1177
2081
|
|
|
1178
2082
|
/**
|
|
1179
|
-
* IconTile — the recurring tinted rounded-square icon chip.
|
|
1180
|
-
* the square and colors the icon; `grid place-items-center` keeps the
|
|
1181
|
-
* centered. Consolidates v2's `.v2-qico` / `.v2-item-ico` / `.nr-ico` /
|
|
2083
|
+
* IconTile — the recurring tinted rounded-square icon chip. An intent tint
|
|
2084
|
+
* fills the square and colors the icon; `grid place-items-center` keeps the
|
|
2085
|
+
* glyph centered. Consolidates v2's `.v2-qico` / `.v2-item-ico` / `.nr-ico` /
|
|
1182
2086
|
* `.licon` / `.aico` icon-chip pattern into one primitive.
|
|
1183
2087
|
*
|
|
1184
|
-
*
|
|
1185
|
-
*
|
|
1186
|
-
*
|
|
2088
|
+
* intent — `brand` (default), `neutral`, status (`info` | `success` |
|
|
2089
|
+
* `warning` | `danger`) — the ADR-007 vocabulary. `tone` is the
|
|
2090
|
+
* deprecated spelling (`pro` → `brand`); the suite tints
|
|
2091
|
+
* (`audit` | `books` | `tax`) are only reachable through `tone`
|
|
2092
|
+
* because product names are never intents (ADR-007 §2).
|
|
2093
|
+
* size — `sm` (30px) | `md` (38px, default) | `lg` (42px) | `xl` (48px).
|
|
2094
|
+
* Each step sets `--ds-icon-size` on the tile from the W2-10 icon
|
|
2095
|
+
* scale (`--icon-size-md` / 18px / `--icon-size-lg`, the legacy
|
|
2096
|
+
* spellings of `--ds-icon-size-*`) and the icon reads it, so a
|
|
2097
|
+
* consumer that needs another glyph size sets the variable instead
|
|
2098
|
+
* of selecting the descendant `svg` (C-DOM-05).
|
|
1187
2099
|
* badge — optional ReactNode pinned to the top-right corner (e.g. a count).
|
|
1188
2100
|
*/
|
|
2101
|
+
/** Every intent of the shared vocabulary is an IconTile tint. */
|
|
2102
|
+
type IconTileIntent = Intent;
|
|
2103
|
+
/** Legacy `tone` → `intent` (ADR-007 §4) for the values that have one. */
|
|
2104
|
+
declare const ICON_TILE_TONE_TO_INTENT: {
|
|
2105
|
+
readonly pro: "brand";
|
|
2106
|
+
readonly neutral: "neutral";
|
|
2107
|
+
readonly info: "info";
|
|
2108
|
+
readonly success: "success";
|
|
2109
|
+
readonly warning: "warning";
|
|
2110
|
+
readonly danger: "danger";
|
|
2111
|
+
};
|
|
2112
|
+
/**
|
|
2113
|
+
* The pre-W3-21 colour words (compat registry C-TONE).
|
|
2114
|
+
*
|
|
2115
|
+
* @deprecated Use `intent` — `tone="pro"` is `intent="brand"`, the status
|
|
2116
|
+
* values keep their name. The suite tints (`audit`, `books`, `tax`) have no
|
|
2117
|
+
* intent and stay on `tone` until the products own a service → colour
|
|
2118
|
+
* mapping (target architecture §40). Removed in 3.0; CM-06 rewrites the
|
|
2119
|
+
* mappable call sites and lists the rest.
|
|
2120
|
+
*/
|
|
2121
|
+
type IconTileTone = keyof typeof ICON_TILE_TONE_TO_INTENT | IconTileSuiteTone;
|
|
2122
|
+
type IconTileSize = "sm" | "md" | "lg" | "xl";
|
|
1189
2123
|
declare const iconTileVariants: (props?: ({
|
|
1190
|
-
|
|
1191
|
-
|
|
2124
|
+
intent?: "brand" | "neutral" | "info" | "success" | "warning" | "danger" | null | undefined;
|
|
2125
|
+
suite?: "audit" | "books" | "tax" | null | undefined;
|
|
2126
|
+
size?: "sm" | "md" | "lg" | "xl" | null | undefined;
|
|
1192
2127
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
1193
|
-
|
|
2128
|
+
/** Suite tints: product hues that stay on the deprecated `tone` axis. */
|
|
2129
|
+
type IconTileSuiteTone = NonNullable<VariantProps<typeof iconTileVariants>["suite"]>;
|
|
2130
|
+
interface IconTileVariantProps {
|
|
2131
|
+
/** Semantic tint (ADR-007). Default `brand`. Wins over `tone`. */
|
|
2132
|
+
intent?: IconTileIntent | null;
|
|
2133
|
+
/**
|
|
2134
|
+
* @deprecated Use `intent`. `pro` → `brand`; status values keep their name;
|
|
2135
|
+
* `audit` / `books` / `tax` stay here (no intent).
|
|
2136
|
+
*/
|
|
2137
|
+
tone?: IconTileTone | null;
|
|
2138
|
+
size?: IconTileSize | null;
|
|
2139
|
+
}
|
|
2140
|
+
/** The IconTile class string. Accepts `intent` or the deprecated `tone`. */
|
|
2141
|
+
declare function resolveIconTileVariants({ intent, tone, size }?: IconTileVariantProps): string;
|
|
2142
|
+
|
|
2143
|
+
interface IconTileProps extends React.HTMLAttributes<HTMLDivElement>, IconTileVariantProps {
|
|
1194
2144
|
/** The icon (or any node) rendered centered inside the tile. */
|
|
1195
2145
|
icon: React.ReactNode;
|
|
1196
2146
|
/** Optional overlay pinned to the top-right corner, e.g. a count badge. */
|
|
@@ -1199,360 +2149,86 @@ interface IconTileProps extends React.HTMLAttributes<HTMLDivElement>, VariantPro
|
|
|
1199
2149
|
declare const IconTile: React$1.ForwardRefExoticComponent<IconTileProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
1200
2150
|
|
|
1201
2151
|
/**
|
|
1202
|
-
*
|
|
2152
|
+
* The emphases an Input offers: the shared chrome's `default` (a
|
|
2153
|
+
* `--color-rule-strong` hairline) and `ghost` (no border and no background
|
|
2154
|
+
* until focused). Spelled out rather than aliased to the recipe's private
|
|
2155
|
+
* type so the public declaration names no unexported symbol; the
|
|
2156
|
+
* `satisfies` below keeps the two in step.
|
|
1203
2157
|
*
|
|
1204
|
-
*
|
|
1205
|
-
* never a private union with the same words. Components that support only a
|
|
1206
|
-
* subset narrow with `Extract<…>`; nothing may widen a list. The lists are
|
|
1207
|
-
* closed: adding a word is an ADR-007 amendment, not a component change.
|
|
1208
|
-
*
|
|
1209
|
-
* Types only — this module has no runtime and adds nothing to `dist/index.js`.
|
|
1210
|
-
* All four names are `@experimental` until decision D4 (`danger` vs
|
|
1211
|
-
* `destructive`) is resolved and the Wave 3 components that adopt them are
|
|
1212
|
-
* marked stable (ADR-007 acceptance condition).
|
|
2158
|
+
* @experimental
|
|
1213
2159
|
*/
|
|
1214
|
-
|
|
2160
|
+
type InputVariant = "default" | "ghost";
|
|
1215
2161
|
/**
|
|
1216
|
-
*
|
|
1217
|
-
*
|
|
1218
|
-
* `intent` says *what the element means*; `variant` says how loudly. A
|
|
1219
|
-
* `danger` action, a `danger` badge and a `danger` alert share one colour
|
|
1220
|
-
* family (`--ds-color-danger-*`) at three different emphases.
|
|
1221
|
-
*
|
|
1222
|
-
* `danger` is the canonical word (decision D4, default); `destructive` is
|
|
1223
|
-
* accepted by components as a deprecated alias for the 2.x line and is *not*
|
|
1224
|
-
* a member of this type.
|
|
2162
|
+
* The 1.31 aliases of `sm` / `md` / `lg` (C-INPUT-SIZE). No known consumer
|
|
2163
|
+
* uses them; they leave with `inputSize` in 3.0.
|
|
1225
2164
|
*
|
|
2165
|
+
* @deprecated Use `size="sm"`, `"md"` or `"lg"`.
|
|
1226
2166
|
* @experimental
|
|
1227
2167
|
*/
|
|
1228
|
-
type
|
|
2168
|
+
type InputSizeAlias = "compact" | "default" | "comfortable";
|
|
1229
2169
|
/**
|
|
1230
|
-
*
|
|
1231
|
-
*
|
|
1232
|
-
* applies (`Extract<Variant, "solid" | "soft" | "outline">` for Badge).
|
|
1233
|
-
*
|
|
1234
|
-
* - `solid` — filled with the intent colour, contrasting foreground
|
|
1235
|
-
* - `soft` — tinted background, intent-coloured foreground
|
|
1236
|
-
* - `outline` — border only, transparent background
|
|
1237
|
-
* - `ghost` — no border or background until hovered
|
|
1238
|
-
* - `link` — inline text, underlined on hover; actions only
|
|
2170
|
+
* The size names an Input knows (W4-05, ADR-013): the shared control scale
|
|
2171
|
+
* `xs · sm · md · lg · xl` (`ControlSize`) and the 1.31 aliases.
|
|
1239
2172
|
*
|
|
1240
|
-
*
|
|
1241
|
-
*
|
|
2173
|
+
* `sm` and `md` are today's pixels *and* the scale's steps (32 / 36px), so
|
|
2174
|
+
* they read `--control-height-{sm,md}` and follow the density scope. `lg` is
|
|
2175
|
+
* the A1 mismatch recorded in `baselines/size-geometry.json` (44px where the
|
|
2176
|
+
* scale says 40): it keeps today's pixels through the D5-gated compat token
|
|
2177
|
+
* `--input-height-lg` until decision D5 (W2-05). `xs` and `xl` are new and
|
|
2178
|
+
* read the shared rows in full. Padding and text of the compat rows stay on
|
|
2179
|
+
* Tailwind's steps — nothing about them moves until D5.
|
|
1242
2180
|
*
|
|
1243
2181
|
* @experimental
|
|
1244
2182
|
*/
|
|
1245
|
-
type
|
|
2183
|
+
type InputSize = ControlSize | InputSizeAlias;
|
|
1246
2184
|
/**
|
|
1247
|
-
*
|
|
1248
|
-
*
|
|
1249
|
-
* `--ds-control-height-{size}`. Derived from the token scale so the type and
|
|
1250
|
-
* the tokens cannot disagree; it resolves to `"xs" | "sm" | "md" | "lg" | "xl"`.
|
|
1251
|
-
*
|
|
1252
|
-
* The pixels behind each step are decision D5; existing components keep
|
|
1253
|
-
* today's geometry under these names until 2.0 (compat token per control).
|
|
2185
|
+
* What {@link inputVariants} takes: the emphasis, the size (either name — the
|
|
2186
|
+
* new `size` wins when both are given) and cva's class props.
|
|
1254
2187
|
*
|
|
1255
2188
|
* @experimental
|
|
1256
2189
|
*/
|
|
1257
|
-
|
|
2190
|
+
interface InputVariantsOptions {
|
|
2191
|
+
variant?: InputVariant | null;
|
|
2192
|
+
size?: InputSize | null;
|
|
2193
|
+
/**
|
|
2194
|
+
* The legacy size prop (C-INPUT-SIZE): today's rows, byte for byte, so a
|
|
2195
|
+
* call that has not moved to `size` renders the classes it always did.
|
|
2196
|
+
*
|
|
2197
|
+
* @deprecated Use `size`. Codemod CM-07 renames it.
|
|
2198
|
+
*/
|
|
2199
|
+
inputSize?: InputSize | null;
|
|
2200
|
+
class?: string | null;
|
|
2201
|
+
className?: string | null;
|
|
2202
|
+
}
|
|
2203
|
+
/** The variant props of `inputVariants` (cva's `VariantProps` shape, kept for the API report). */
|
|
2204
|
+
type InputVariants = Omit<InputVariantsOptions, "class" | "className">;
|
|
1258
2205
|
/**
|
|
1259
|
-
*
|
|
1260
|
-
*
|
|
1261
|
-
*
|
|
1262
|
-
*
|
|
1263
|
-
*
|
|
1264
|
-
* - `pill` — `--ds-radius-full`
|
|
1265
|
-
* - `square` — no rounding beyond the smallest reference step; icon tiles only
|
|
2206
|
+
* The Input class recipe (W4-05): the shared control chrome
|
|
2207
|
+
* (`behavior/control-chrome.ts` — border, VN-5 focus edge + field halo,
|
|
2208
|
+
* `aria-invalid`, `disabled`, `ghost`) called with the emphasis and, for the
|
|
2209
|
+
* scale steps `xs` / `xl`, the shared size row; then the file-selector reset
|
|
2210
|
+
* and, for the compat sizes, Input's own row (see {@link InputSize}).
|
|
1266
2211
|
*
|
|
1267
|
-
*
|
|
1268
|
-
*
|
|
2212
|
+
* Emits the same *set* of classes as the cva it replaces for every legacy
|
|
2213
|
+
* `variant` × `inputSize` (`src/primitives/__tests__/input-chrome-classes.test.tsx`
|
|
2214
|
+
* pins the set and the browser test pins the pixels); only the position of
|
|
2215
|
+
* the file reset moved, which Tailwind does not read. Server-safe.
|
|
1269
2216
|
*
|
|
1270
2217
|
* @experimental
|
|
1271
2218
|
*/
|
|
1272
|
-
|
|
1273
|
-
|
|
1274
|
-
/**
|
|
1275
|
-
* Named icon boxes — the four `--ds-icon-size-*` steps of W2-10 (12 / 14 / 16 /
|
|
1276
|
-
* 20 px), spelled with the shared size vocabulary (ADR-007) and derived from the
|
|
1277
|
-
* token scale so the type and the tokens cannot disagree.
|
|
1278
|
-
*/
|
|
1279
|
-
type IconSize = Extract<ControlSize, keyof typeof iconSizes>;
|
|
1280
|
-
interface IconProps extends React.SVGAttributes<SVGElement> {
|
|
1281
|
-
/**
|
|
1282
|
-
* The icon box. A size name renders `var(--ds-icon-size-<name>)` — with the
|
|
1283
|
-
* legacy `--icon-size-<name>` and then the token's pixel value as fallbacks —
|
|
1284
|
-
* so a theme can retune the boxes; a number is a pixel box, as before.
|
|
1285
|
-
* Defaults to 24, the grid the glyphs are drawn on.
|
|
1286
|
-
*/
|
|
1287
|
-
size?: IconSize | number;
|
|
1288
|
-
/**
|
|
1289
|
-
* Stroke width of every stroked element, set once on the root `<svg>` and
|
|
1290
|
-
* inherited. Defaults to 1.5, the catalogue's baseline; the few glyphs drawn
|
|
1291
|
-
* heavier (`XIcon`, `CheckIcon`, `BoldIcon`) default to their own weight.
|
|
1292
|
-
*/
|
|
1293
|
-
strokeWidth?: number | string;
|
|
1294
|
-
/**
|
|
1295
|
-
* Accessible name. Icons are decorative (`aria-hidden`); a `title` exposes
|
|
1296
|
-
* the svg as `role="img"` with a `<title>` child. (An `aria-label` alone
|
|
1297
|
-
* still lands on the hidden svg, as it always has — C-DOM-15 freezes that
|
|
1298
|
-
* DOM for Pro; use `title` to name an icon.)
|
|
1299
|
-
*/
|
|
1300
|
-
title?: string;
|
|
1301
|
-
}
|
|
1302
|
-
/** What every catalogue icon and every `createIcon()` product is. */
|
|
1303
|
-
interface IconComponent {
|
|
1304
|
-
(props: IconProps): React.JSX.Element;
|
|
1305
|
-
displayName?: string;
|
|
1306
|
-
}
|
|
1307
|
-
interface IconDefinition {
|
|
1308
|
-
/** Component name, e.g. `"ArchiveIcon"`; becomes the `displayName`. */
|
|
1309
|
-
name: string;
|
|
1310
|
-
/**
|
|
1311
|
-
* What to draw. Path data strings become `currentColor` strokes with round
|
|
1312
|
-
* caps and joins, the catalogue's outline style; pass elements for anything
|
|
1313
|
-
* else (filled dots, rects, a mark's fixed colours). Elements must not set
|
|
1314
|
-
* their own `strokeWidth` — it lives on the root so the prop works.
|
|
1315
|
-
*/
|
|
1316
|
-
paths: string | readonly string[] | React.ReactNode;
|
|
1317
|
-
/** Defaults to `"0 0 24 24"`. A product icon drawn on another grid sets its own. */
|
|
1318
|
-
viewBox?: string;
|
|
1319
|
-
/** This glyph's default stroke width when the caller passes none. Defaults to 1.5. */
|
|
1320
|
-
strokeWidth?: number | string;
|
|
1321
|
-
}
|
|
2219
|
+
declare function inputVariants({ variant, size, inputSize, class: classProp, className, }?: InputVariantsOptions): string;
|
|
1322
2220
|
/**
|
|
1323
|
-
*
|
|
1324
|
-
* accessibility contract from path data or SVG elements. Products use it for
|
|
1325
|
-
* icons that are theirs (vendor logos, annotation shapes) without inlining
|
|
1326
|
-
* `<svg>` at call sites; the catalogue uses it for its newer glyphs.
|
|
2221
|
+
* Props of `Input` (W4-05; target architecture §24.3, §29.1).
|
|
1327
2222
|
*
|
|
1328
|
-
* @
|
|
1329
|
-
*
|
|
1330
|
-
* name: "ArchiveIcon",
|
|
1331
|
-
* paths: ["M3 3h18a1 1 0 011 1v3a1 1 0 01-1 1H3a1 1 0 01-1-1V4a1 1 0 011-1z", "M4 8v11a2 2 0 002 2h12a2 2 0 002-2V8", "M10 12h4"],
|
|
1332
|
-
* });
|
|
2223
|
+
* @experimental The name is exported since W4-05; the props it lists have been
|
|
2224
|
+
* stable since 1.x.
|
|
1333
2225
|
*/
|
|
1334
|
-
declare function createIcon(definition: IconDefinition): IconComponent;
|
|
1335
|
-
declare function DocumentIcon({ size, ...props }: IconProps): react_jsx_runtime.JSX.Element;
|
|
1336
|
-
declare function ArrowRightIcon({ size, ...props }: IconProps): react_jsx_runtime.JSX.Element;
|
|
1337
|
-
declare function StarIcon({ size, ...props }: IconProps): react_jsx_runtime.JSX.Element;
|
|
1338
|
-
declare function SparkleIcon({ size, ...props }: IconProps): react_jsx_runtime.JSX.Element;
|
|
1339
|
-
/**
|
|
1340
|
-
* ExtractIcon — gradient (Pro purple → cyan) tri-sparkle used for AI
|
|
1341
|
-
* "Extract" affordances. Unlike the currentColor catalog, the fill is a
|
|
1342
|
-
* fixed brand gradient; `size` scales it while preserving the 16:12 ratio.
|
|
1343
|
-
* Gradient/clip ids are per-instance (useId) so multiple icons don't clash.
|
|
1344
|
-
*/
|
|
1345
|
-
declare function ExtractIcon({ size, className, ...props }: IconProps): react_jsx_runtime.JSX.Element;
|
|
1346
|
-
declare function ChatBubbleIcon({ size, ...props }: IconProps): react_jsx_runtime.JSX.Element;
|
|
1347
|
-
declare function LightningIcon({ size, ...props }: IconProps): react_jsx_runtime.JSX.Element;
|
|
1348
|
-
declare function UsersIcon({ size, ...props }: IconProps): react_jsx_runtime.JSX.Element;
|
|
1349
|
-
declare function FileTextIcon({ size, ...props }: IconProps): react_jsx_runtime.JSX.Element;
|
|
1350
|
-
declare function ShieldIcon({ size, ...props }: IconProps): react_jsx_runtime.JSX.Element;
|
|
1351
|
-
declare function MenuIcon({ size, ...props }: IconProps): react_jsx_runtime.JSX.Element;
|
|
1352
|
-
/**
|
|
1353
|
-
* @deprecated Use `XIcon` — the same glyph under its lucide name (the catalogue
|
|
1354
|
-
* drew it twice). This alias is the identical component and stays through 2.x.
|
|
1355
|
-
*/
|
|
1356
|
-
declare const CloseIcon: typeof XIcon;
|
|
1357
|
-
declare function CheckIcon({ size, strokeWidth, ...props }: IconProps): react_jsx_runtime.JSX.Element;
|
|
1358
|
-
declare function LayoutDashboardIcon({ size, ...props }: IconProps): react_jsx_runtime.JSX.Element;
|
|
1359
|
-
declare function BuildingIcon({ size, ...props }: IconProps): react_jsx_runtime.JSX.Element;
|
|
1360
|
-
/** Landmark / "bank" glyph (columns + pediment) — the accounting service mark. */
|
|
1361
|
-
declare function LandmarkIcon({ size, ...props }: IconProps): react_jsx_runtime.JSX.Element;
|
|
1362
|
-
/** Folder with an up-arrow — the "upload documents" / document-request mark. */
|
|
1363
|
-
declare function FolderUpIcon({ size, ...props }: IconProps): react_jsx_runtime.JSX.Element;
|
|
1364
|
-
/** Pen-tool / nibbed signature pen — the e-signature mark. */
|
|
1365
|
-
declare function PenToolIcon({ size, ...props }: IconProps): react_jsx_runtime.JSX.Element;
|
|
1366
|
-
declare function MapPinIcon({ size, ...props }: IconProps): react_jsx_runtime.JSX.Element;
|
|
1367
|
-
declare function FileReturnIcon({ size, ...props }: IconProps): react_jsx_runtime.JSX.Element;
|
|
1368
|
-
declare function ClipboardCheckIcon({ size, ...props }: IconProps): react_jsx_runtime.JSX.Element;
|
|
1369
|
-
declare function FolderOpenIcon({ size, ...props }: IconProps): react_jsx_runtime.JSX.Element;
|
|
1370
|
-
declare function ReceiptIcon({ size, ...props }: IconProps): react_jsx_runtime.JSX.Element;
|
|
1371
|
-
declare function CalendarIcon({ size, ...props }: IconProps): react_jsx_runtime.JSX.Element;
|
|
1372
|
-
declare function BarChartIcon({ size, ...props }: IconProps): react_jsx_runtime.JSX.Element;
|
|
1373
|
-
declare function SettingsIcon({ size, ...props }: IconProps): react_jsx_runtime.JSX.Element;
|
|
1374
|
-
declare function PanelLeftIcon({ size, ...props }: IconProps): react_jsx_runtime.JSX.Element;
|
|
1375
|
-
declare function PanelLeftCloseIcon({ size, ...props }: IconProps): react_jsx_runtime.JSX.Element;
|
|
1376
|
-
declare function SunIcon({ size, ...props }: IconProps): react_jsx_runtime.JSX.Element;
|
|
1377
|
-
declare function TeamIcon({ size, ...props }: IconProps): react_jsx_runtime.JSX.Element;
|
|
1378
|
-
declare function MoonIcon({ size, ...props }: IconProps): react_jsx_runtime.JSX.Element;
|
|
1379
|
-
declare function PaletteIcon({ size, ...props }: IconProps): react_jsx_runtime.JSX.Element;
|
|
1380
|
-
declare function MailIcon({ size, ...props }: IconProps): react_jsx_runtime.JSX.Element;
|
|
1381
|
-
declare function GlobeIcon({ size, ...props }: IconProps): react_jsx_runtime.JSX.Element;
|
|
1382
|
-
declare function BellIcon({ size, ...props }: IconProps): react_jsx_runtime.JSX.Element;
|
|
1383
|
-
declare function WorkflowIcon({ size, ...props }: IconProps): react_jsx_runtime.JSX.Element;
|
|
1384
|
-
declare function LinkIcon({ size, ...props }: IconProps): react_jsx_runtime.JSX.Element;
|
|
1385
|
-
declare function KeyIcon({ size, ...props }: IconProps): react_jsx_runtime.JSX.Element;
|
|
1386
|
-
declare function SearchIcon({ size, ...props }: IconProps): react_jsx_runtime.JSX.Element;
|
|
1387
|
-
declare function LogOutIcon({ size, ...props }: IconProps): react_jsx_runtime.JSX.Element;
|
|
1388
|
-
declare function TagIcon({ size, ...props }: IconProps): react_jsx_runtime.JSX.Element;
|
|
1389
|
-
declare function SendIcon({ size, ...props }: IconProps): react_jsx_runtime.JSX.Element;
|
|
1390
|
-
declare function TrashIcon({ size, ...props }: IconProps): react_jsx_runtime.JSX.Element;
|
|
1391
|
-
declare function Link2Icon({ size, ...props }: IconProps): react_jsx_runtime.JSX.Element;
|
|
1392
|
-
declare function ChevronUpIcon({ size, ...props }: IconProps): react_jsx_runtime.JSX.Element;
|
|
1393
|
-
declare function ChevronDownIcon({ size, ...props }: IconProps): react_jsx_runtime.JSX.Element;
|
|
1394
|
-
declare function PlusIcon({ size, ...props }: IconProps): react_jsx_runtime.JSX.Element;
|
|
1395
|
-
declare function UserCircleIcon({ size, ...props }: IconProps): react_jsx_runtime.JSX.Element;
|
|
1396
|
-
declare function PencilIcon({ size, ...props }: IconProps): react_jsx_runtime.JSX.Element;
|
|
1397
|
-
declare function PhoneIcon({ size, ...props }: IconProps): react_jsx_runtime.JSX.Element;
|
|
1398
|
-
declare function FolderClosedIcon({ size, ...props }: IconProps): react_jsx_runtime.JSX.Element;
|
|
1399
|
-
declare function UploadIcon({ size, ...props }: IconProps): react_jsx_runtime.JSX.Element;
|
|
1400
|
-
declare function DownloadIcon({ size, ...props }: IconProps): react_jsx_runtime.JSX.Element;
|
|
1401
|
-
declare function MoreHorizontalIcon({ size, ...props }: IconProps): react_jsx_runtime.JSX.Element;
|
|
1402
|
-
declare function ChevronRightIcon({ size, ...props }: IconProps): react_jsx_runtime.JSX.Element;
|
|
1403
|
-
declare function ChevronLeftIcon({ size, ...props }: IconProps): react_jsx_runtime.JSX.Element;
|
|
1404
|
-
declare function FileIcon({ size, ...props }: IconProps): react_jsx_runtime.JSX.Element;
|
|
1405
|
-
declare function RotateCcwIcon({ size, ...props }: IconProps): react_jsx_runtime.JSX.Element;
|
|
1406
|
-
declare function EyeIcon({ size, ...props }: IconProps): react_jsx_runtime.JSX.Element;
|
|
1407
|
-
declare function ClockIcon({ size, ...props }: IconProps): react_jsx_runtime.JSX.Element;
|
|
1408
|
-
declare function LayoutListIcon({ size, ...props }: IconProps): react_jsx_runtime.JSX.Element;
|
|
1409
|
-
declare function LayoutGridIcon({ size, ...props }: IconProps): react_jsx_runtime.JSX.Element;
|
|
1410
|
-
declare function LockIcon({ size, ...props }: IconProps): react_jsx_runtime.JSX.Element;
|
|
1411
|
-
declare function FolderPlusIcon({ size, ...props }: IconProps): react_jsx_runtime.JSX.Element;
|
|
1412
|
-
declare function MoveIcon({ size, ...props }: IconProps): react_jsx_runtime.JSX.Element;
|
|
1413
|
-
declare function LockKeyholeIcon({ size, ...props }: IconProps): react_jsx_runtime.JSX.Element;
|
|
1414
|
-
declare function PaperclipIcon({ size, ...props }: IconProps): react_jsx_runtime.JSX.Element;
|
|
1415
|
-
declare function AtSignIcon({ size, ...props }: IconProps): react_jsx_runtime.JSX.Element;
|
|
1416
|
-
declare function ZoomInIcon({ size, ...props }: IconProps): react_jsx_runtime.JSX.Element;
|
|
1417
|
-
declare function ZoomOutIcon({ size, ...props }: IconProps): react_jsx_runtime.JSX.Element;
|
|
1418
|
-
declare function XIcon({ size, strokeWidth, ...props }: IconProps): react_jsx_runtime.JSX.Element;
|
|
1419
|
-
declare function MessageCircleWarningIcon({ size, ...props }: IconProps): react_jsx_runtime.JSX.Element;
|
|
1420
|
-
declare function FlagIcon({ size, ...props }: IconProps): react_jsx_runtime.JSX.Element;
|
|
1421
|
-
declare function LockOpenIcon({ size, ...props }: IconProps): react_jsx_runtime.JSX.Element;
|
|
1422
|
-
declare function MessageCircleIcon({ size, ...props }: IconProps): react_jsx_runtime.JSX.Element;
|
|
1423
|
-
declare function PenSignIcon({ size, ...props }: IconProps): react_jsx_runtime.JSX.Element;
|
|
1424
|
-
declare function CopyIcon({ size, ...props }: IconProps): react_jsx_runtime.JSX.Element;
|
|
1425
|
-
declare function MonitorIcon({ size, ...props }: IconProps): react_jsx_runtime.JSX.Element;
|
|
1426
|
-
declare function SmartphoneIcon({ size, ...props }: IconProps): react_jsx_runtime.JSX.Element;
|
|
1427
|
-
declare function AlertTriangleIcon({ size, ...props }: IconProps): react_jsx_runtime.JSX.Element;
|
|
1428
|
-
/**
|
|
1429
|
-
* @deprecated Use `ArrowRightIcon` — it is the same path; "small" was never a
|
|
1430
|
-
* different drawing. This alias is the identical component and stays through 2.x.
|
|
1431
|
-
*/
|
|
1432
|
-
declare const ArrowRightSmallIcon: typeof ArrowRightIcon;
|
|
1433
|
-
declare function ArrowLeftIcon({ size, ...props }: IconProps): react_jsx_runtime.JSX.Element;
|
|
1434
|
-
declare function CreditCardIcon({ size, ...props }: IconProps): react_jsx_runtime.JSX.Element;
|
|
1435
|
-
declare function AlertCircleIcon({ size, ...props }: IconProps): react_jsx_runtime.JSX.Element;
|
|
1436
|
-
declare function ArrowDownIcon({ size, ...props }: IconProps): react_jsx_runtime.JSX.Element;
|
|
1437
|
-
declare function ArrowUpIcon({ size, ...props }: IconProps): react_jsx_runtime.JSX.Element;
|
|
1438
|
-
declare function BriefcaseIcon({ size, ...props }: IconProps): react_jsx_runtime.JSX.Element;
|
|
1439
|
-
declare function Building2Icon({ size, ...props }: IconProps): react_jsx_runtime.JSX.Element;
|
|
1440
|
-
declare function CheckCircle2Icon({ size, ...props }: IconProps): react_jsx_runtime.JSX.Element;
|
|
1441
|
-
declare function ChevronsUpDownIcon({ size, ...props }: IconProps): react_jsx_runtime.JSX.Element;
|
|
1442
|
-
declare function CircleIcon({ size, ...props }: IconProps): react_jsx_runtime.JSX.Element;
|
|
1443
|
-
declare function CircleDotIcon({ size, ...props }: IconProps): react_jsx_runtime.JSX.Element;
|
|
1444
|
-
declare function CommandIcon({ size, ...props }: IconProps): react_jsx_runtime.JSX.Element;
|
|
1445
|
-
declare function CornerDownLeftIcon({ size, ...props }: IconProps): react_jsx_runtime.JSX.Element;
|
|
1446
|
-
declare function EyeOffIcon({ size, ...props }: IconProps): react_jsx_runtime.JSX.Element;
|
|
1447
|
-
declare function HomeIcon({ size, ...props }: IconProps): react_jsx_runtime.JSX.Element;
|
|
1448
|
-
declare function InboxIcon({ size, ...props }: IconProps): react_jsx_runtime.JSX.Element;
|
|
1449
|
-
declare function ListChecksIcon({ size, ...props }: IconProps): react_jsx_runtime.JSX.Element;
|
|
1450
|
-
declare function MinusIcon({ size, ...props }: IconProps): react_jsx_runtime.JSX.Element;
|
|
1451
|
-
declare function SlashIcon({ size, ...props }: IconProps): react_jsx_runtime.JSX.Element;
|
|
1452
|
-
declare function SparklesIcon({ size, ...props }: IconProps): react_jsx_runtime.JSX.Element;
|
|
1453
|
-
declare function Trash2Icon({ size, ...props }: IconProps): react_jsx_runtime.JSX.Element;
|
|
1454
|
-
declare function UserIcon({ size, ...props }: IconProps): react_jsx_runtime.JSX.Element;
|
|
1455
|
-
declare function BoldIcon({ size, strokeWidth, ...props }: IconProps): react_jsx_runtime.JSX.Element;
|
|
1456
|
-
declare function ItalicIcon({ size, ...props }: IconProps): react_jsx_runtime.JSX.Element;
|
|
1457
|
-
declare function UnderlineIcon({ size, ...props }: IconProps): react_jsx_runtime.JSX.Element;
|
|
1458
|
-
declare function StrikethroughIcon({ size, ...props }: IconProps): react_jsx_runtime.JSX.Element;
|
|
1459
|
-
declare function ListIcon({ size, ...props }: IconProps): react_jsx_runtime.JSX.Element;
|
|
1460
|
-
declare function ListOrderedIcon({ size, ...props }: IconProps): react_jsx_runtime.JSX.Element;
|
|
1461
|
-
declare function InfoIcon({ size, ...props }: IconProps): react_jsx_runtime.JSX.Element;
|
|
1462
|
-
declare function HelpCircleIcon({ size, ...props }: IconProps): react_jsx_runtime.JSX.Element;
|
|
1463
|
-
declare function DollarSignIcon({ size, ...props }: IconProps): react_jsx_runtime.JSX.Element;
|
|
1464
|
-
declare function ReplyIcon({ size, ...props }: IconProps): react_jsx_runtime.JSX.Element;
|
|
1465
|
-
declare function KanbanIcon({ size, ...props }: IconProps): react_jsx_runtime.JSX.Element;
|
|
1466
|
-
declare function TableIcon({ size, ...props }: IconProps): react_jsx_runtime.JSX.Element;
|
|
1467
|
-
declare function HistoryIcon({ size, ...props }: IconProps): react_jsx_runtime.JSX.Element;
|
|
1468
|
-
declare function SaveIcon({ size, ...props }: IconProps): react_jsx_runtime.JSX.Element;
|
|
1469
|
-
/**
|
|
1470
|
-
* LoaderIcon — animated spinner. Render with `className="animate-spin"`
|
|
1471
|
-
* (or `motion-safe:animate-spin` if you want to respect `prefers-reduced-
|
|
1472
|
-
* motion`; the catalog doesn't gate this itself because the spinner IS
|
|
1473
|
-
* the indicator for many flows).
|
|
1474
|
-
*
|
|
1475
|
-
* Visual contract: a dim full-circle ring + a brighter quarter-arc on top.
|
|
1476
|
-
* When rotated, the bright arc creates the "leading edge" of the spinner.
|
|
1477
|
-
*/
|
|
1478
|
-
declare function LoaderIcon({ size, ...props }: IconProps): react_jsx_runtime.JSX.Element;
|
|
1479
|
-
/**
|
|
1480
|
-
* GoogleBrandIcon — Google four-color "G" mark. Brand-locked colors,
|
|
1481
|
-
* does NOT respond to currentColor. Use only in provider-list UIs
|
|
1482
|
-
* (OAuth buttons, integration chips). Standard 24-grid.
|
|
1483
|
-
*/
|
|
1484
|
-
declare function GoogleBrandIcon({ size, ...props }: IconProps): react_jsx_runtime.JSX.Element;
|
|
1485
|
-
/**
|
|
1486
|
-
* MicrosoftBrandIcon — Microsoft four-square mark in red / green / blue /
|
|
1487
|
-
* yellow. Brand-locked colors, does NOT respond to currentColor. Use
|
|
1488
|
-
* inside Microsoft OAuth signin buttons, Outlook / Office integration
|
|
1489
|
-
* chips, and similar provider-list UIs. Standard 24-grid (10×10 squares
|
|
1490
|
-
* with 2u gaps).
|
|
1491
|
-
*/
|
|
1492
|
-
declare function MicrosoftBrandIcon({ size, ...props }: IconProps): react_jsx_runtime.JSX.Element;
|
|
1493
|
-
/**
|
|
1494
|
-
* FilterIcon — funnel mark used for filter popover triggers across list
|
|
1495
|
-
* pages (clients, workflow, billing, organizers…). Renders the same
|
|
1496
|
-
* lucide-style polygon at any size; pair with a corner notification dot
|
|
1497
|
-
* to surface active filter count.
|
|
1498
|
-
*/
|
|
1499
|
-
declare function FilterIcon({ size, ...props }: IconProps): react_jsx_runtime.JSX.Element;
|
|
1500
|
-
declare function CheckCircleSolidIcon({ size, ...props }: IconProps): react_jsx_runtime.JSX.Element;
|
|
1501
|
-
declare function XCircleSolidIcon({ size, ...props }: IconProps): react_jsx_runtime.JSX.Element;
|
|
1502
|
-
declare function AlertTriangleSolidIcon({ size, ...props }: IconProps): react_jsx_runtime.JSX.Element;
|
|
1503
|
-
declare function InfoCircleSolidIcon({ size, ...props }: IconProps): react_jsx_runtime.JSX.Element;
|
|
1504
|
-
declare function TrendingUpIcon({ size, ...props }: IconProps): react_jsx_runtime.JSX.Element;
|
|
1505
|
-
declare function TrendingDownIcon({ size, ...props }: IconProps): react_jsx_runtime.JSX.Element;
|
|
1506
|
-
declare function PlayIcon({ size, ...props }: IconProps): react_jsx_runtime.JSX.Element;
|
|
1507
|
-
declare function PauseIcon({ size, ...props }: IconProps): react_jsx_runtime.JSX.Element;
|
|
1508
|
-
declare function StopIcon({ size, ...props }: IconProps): react_jsx_runtime.JSX.Element;
|
|
1509
|
-
/** Six-dot drag handle for sortable rows and kanban cards. */
|
|
1510
|
-
declare const GripVerticalIcon: IconComponent;
|
|
1511
|
-
/** Enter full screen / expand a panel — four outward corners. */
|
|
1512
|
-
declare const MaximizeIcon: IconComponent;
|
|
1513
|
-
/** Leave full screen / shrink a panel — four inward corners. */
|
|
1514
|
-
declare const MinimizeIcon: IconComponent;
|
|
1515
|
-
declare const ArchiveIcon: IconComponent;
|
|
1516
|
-
declare const ThumbsUpIcon: IconComponent;
|
|
1517
|
-
declare const ThumbsDownIcon: IconComponent;
|
|
1518
|
-
declare const LayersIcon: IconComponent;
|
|
1519
|
-
/** Formula / sum — the Greek capital sigma. */
|
|
1520
|
-
declare const SigmaIcon: IconComponent;
|
|
1521
|
-
/** Video camera; pair with `PlayIcon` for playback. */
|
|
1522
|
-
declare const VideoIcon: IconComponent;
|
|
1523
|
-
declare const MicIcon: IconComponent;
|
|
1524
|
-
/** Speaker with two sound waves — audio on. */
|
|
1525
|
-
declare const Volume2Icon: IconComponent;
|
|
1526
|
-
/** Speaker with a cross — muted. */
|
|
1527
|
-
declare const VolumeXIcon: IconComponent;
|
|
1528
|
-
/** Two clockwise arrows — refresh / sync. `RotateCcwIcon` is the single-arrow undo. */
|
|
1529
|
-
declare const RefreshCwIcon: IconComponent;
|
|
1530
|
-
/** Stopwatch — elapsed time and timers; `ClockIcon` is wall-clock time. */
|
|
1531
|
-
declare const TimerIcon: IconComponent;
|
|
1532
|
-
declare const BrainIcon: IconComponent;
|
|
1533
|
-
/** Pop-out / opens elsewhere — box with an arrow leaving the top-right corner. */
|
|
1534
|
-
declare const ExternalLinkIcon: IconComponent;
|
|
1535
|
-
/** Dock to the right — the mirror of `PanelLeftIcon`. */
|
|
1536
|
-
declare const PanelRightIcon: IconComponent;
|
|
1537
|
-
/** Collapse — the pair of `ChevronsUpDownIcon`. */
|
|
1538
|
-
declare const ChevronsDownUpIcon: IconComponent;
|
|
1539
|
-
/**
|
|
1540
|
-
* Filled trash can for destructive affordances inside small round buttons,
|
|
1541
|
-
* where the outline `TrashIcon` reads as thin. Same family as the solid status
|
|
1542
|
-
* icons: the slots are knockouts.
|
|
1543
|
-
*/
|
|
1544
|
-
declare const TrashSolidIcon: IconComponent;
|
|
1545
|
-
|
|
1546
|
-
/**
|
|
1547
|
-
* Input variants. Mirrors the raw HTML `<input>` styled per the suite tokens
|
|
1548
|
-
* (rule-strong border, surface bg, accent focus ring).
|
|
1549
|
-
*/
|
|
1550
|
-
declare const inputVariants: (props?: ({
|
|
1551
|
-
variant?: "ghost" | "default" | null | undefined;
|
|
1552
|
-
inputSize?: "sm" | "md" | "lg" | "default" | "compact" | "comfortable" | null | undefined;
|
|
1553
|
-
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
1554
|
-
type InputVariants = VariantProps<typeof inputVariants>;
|
|
1555
2226
|
interface InputProps$1 extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size">, InputVariants {
|
|
2227
|
+
/**
|
|
2228
|
+
* Sugar for the field label: renders the label above the control, bound
|
|
2229
|
+
* through the field wiring (`htmlFor`/`id`), exactly as
|
|
2230
|
+
* `<Field><Label>…</Label><Input/></Field>` binds it.
|
|
2231
|
+
*/
|
|
1556
2232
|
label?: string;
|
|
1557
2233
|
/**
|
|
1558
2234
|
* Render `label` inside the field instead of stacked above it: it rests like
|
|
@@ -1564,10 +2240,50 @@ interface InputProps$1 extends Omit<React.InputHTMLAttributes<HTMLInputElement>,
|
|
|
1564
2240
|
* ("e.g. 555-0100") can still sit behind the label without competing with it.
|
|
1565
2241
|
*/
|
|
1566
2242
|
floatingLabel?: boolean;
|
|
2243
|
+
/**
|
|
2244
|
+
* Sugar for the hint text under the control, referenced first in the
|
|
2245
|
+
* control's `aria-describedby` (before `error`).
|
|
2246
|
+
*/
|
|
2247
|
+
description?: string;
|
|
2248
|
+
/**
|
|
2249
|
+
* Sugar for the error message: renders it under the control, linked through
|
|
2250
|
+
* `aria-describedby`, and marks the control invalid.
|
|
2251
|
+
*/
|
|
1567
2252
|
error?: string;
|
|
1568
|
-
|
|
1569
|
-
|
|
2253
|
+
/**
|
|
2254
|
+
* The value is invalid without a message to show: `aria-invalid`,
|
|
2255
|
+
* `data-invalid` and the chrome's invalid treatment. Implied by `error`.
|
|
2256
|
+
*/
|
|
2257
|
+
invalid?: boolean;
|
|
2258
|
+
prefixIcon?: ReactNode;
|
|
2259
|
+
suffixIcon?: ReactNode;
|
|
2260
|
+
/**
|
|
2261
|
+
* Called with the new string value on every change, next to `onChange`
|
|
2262
|
+
* (which keeps receiving the event).
|
|
2263
|
+
*/
|
|
2264
|
+
onValueChange?: (value: string) => void;
|
|
2265
|
+
/**
|
|
2266
|
+
* Classes per anatomy part (the `input-*` slots). The `<input>` is
|
|
2267
|
+
* the root part and takes `className` (C-INPUT-CLASSNAME), so it has no
|
|
2268
|
+
* entry here.
|
|
2269
|
+
*/
|
|
2270
|
+
classNames?: Partial<Record<Exclude<InputSlot, "root">, string>>;
|
|
2271
|
+
/**
|
|
2272
|
+
* Classes for the outer wrapper around the control and its parts.
|
|
2273
|
+
* Transitional (C-INPUT-CLASSNAME): `className` keeps landing on the
|
|
2274
|
+
* `<input>` because 192 consumer overrides depend on it; this is the name
|
|
2275
|
+
* for the wrapper until `className` moves there in 3.0.
|
|
2276
|
+
*/
|
|
2277
|
+
rootClassName?: string;
|
|
1570
2278
|
}
|
|
2279
|
+
/**
|
|
2280
|
+
* A single-line text field (target architecture §24, §29). The control is a
|
|
2281
|
+
* native `<input>` and takes part in a form on its own. Inside a `Field` it
|
|
2282
|
+
* binds itself through `useFieldControl` — id, name, `aria-describedby`,
|
|
2283
|
+
* invalid / required / disabled come from the field; explicit props win. The
|
|
2284
|
+
* `label` / `description` / `error` sugar renders the same wiring around the
|
|
2285
|
+
* control for the call sites that never adopt the compound form.
|
|
2286
|
+
*/
|
|
1571
2287
|
declare const Input: React$1.ForwardRefExoticComponent<InputProps$1 & React$1.RefAttributes<HTMLInputElement>>;
|
|
1572
2288
|
|
|
1573
2289
|
interface KeyboardShortcut {
|
|
@@ -1600,18 +2316,42 @@ declare const labelVariants: (props?: class_variance_authority_types.ClassProp |
|
|
|
1600
2316
|
interface LabelProps extends React$1.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>, VariantProps<typeof labelVariants> {
|
|
1601
2317
|
required?: boolean;
|
|
1602
2318
|
}
|
|
2319
|
+
/**
|
|
2320
|
+
* The label of a form control. On its own, a `<label>` that names the
|
|
2321
|
+
* control `htmlFor` points to. Inside a `Field` (W4-01, target architecture
|
|
2322
|
+
* §24) it binds itself: `htmlFor` is the field's control id, `id` is the id a
|
|
2323
|
+
* non-native control references through `aria-labelledby`, `required` and
|
|
2324
|
+
* `optional` come from the field, and a click focuses a control that
|
|
2325
|
+
* `htmlFor` cannot reach (a `div` editor). Explicit props win.
|
|
2326
|
+
*/
|
|
1603
2327
|
declare const Label: React$1.ForwardRefExoticComponent<LabelProps & React$1.RefAttributes<HTMLLabelElement>>;
|
|
1604
2328
|
|
|
1605
|
-
interface LinkButtonProps$1 extends Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, "href"
|
|
2329
|
+
interface LinkButtonProps$1 extends Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, "href">, ButtonIconProps {
|
|
1606
2330
|
href: string;
|
|
2331
|
+
/** Visual emphasis; the legacy words are deprecated aliases (see `Button`). */
|
|
1607
2332
|
variant?: ButtonVariant;
|
|
2333
|
+
/**
|
|
2334
|
+
* Meaning → colour family: `brand` · `neutral` · `success` · `danger`.
|
|
2335
|
+
* Defaults per variant so an omitted prop renders what it always did.
|
|
2336
|
+
*
|
|
2337
|
+
* @experimental
|
|
2338
|
+
*/
|
|
2339
|
+
intent?: ButtonIntent | ButtonIntentAlias;
|
|
2340
|
+
/**
|
|
2341
|
+
* The shared control scale (see `Button`). The icon-only squares and the
|
|
2342
|
+
* `compact` / `default` / `comfortable` aliases are deprecated.
|
|
2343
|
+
*/
|
|
1608
2344
|
size?: ButtonSize;
|
|
1609
|
-
|
|
1610
|
-
|
|
2345
|
+
/**
|
|
2346
|
+
* Stretch to the container's width (`w-full`).
|
|
2347
|
+
*
|
|
2348
|
+
* @experimental
|
|
2349
|
+
*/
|
|
2350
|
+
fullWidth?: boolean;
|
|
1611
2351
|
children: React.ReactNode;
|
|
1612
2352
|
className?: string;
|
|
1613
2353
|
/**
|
|
1614
|
-
* Render a native `<a>` instead of
|
|
2354
|
+
* Render a native `<a>` instead of the router link. Use for:
|
|
1615
2355
|
* - cross-origin URLs (e.g. https://other-app.example/sign-in)
|
|
1616
2356
|
* - same-origin `/api/*` route handlers that 302-redirect off-app
|
|
1617
2357
|
* (next/link tries to client-route, which doesn't follow the 302)
|
|
@@ -1621,12 +2361,26 @@ interface LinkButtonProps$1 extends Omit<React.AnchorHTMLAttributes<HTMLAnchorEl
|
|
|
1621
2361
|
* `rel="noopener noreferrer"` is applied automatically.
|
|
1622
2362
|
*/
|
|
1623
2363
|
external?: boolean;
|
|
2364
|
+
/**
|
|
2365
|
+
* A disabled link (W3-08). A link has no native `disabled`, so this renders
|
|
2366
|
+
* `aria-disabled="true"`, `tabIndex={-1}`, `data-disabled`, the disabled
|
|
2367
|
+
* colours and `pointer-events: none`, and swallows the click and Enter /
|
|
2368
|
+
* Space so nothing navigates and `onClick` is not called. `href` stays on
|
|
2369
|
+
* the element: it is still a link, announced as disabled.
|
|
2370
|
+
*
|
|
2371
|
+
* @experimental
|
|
2372
|
+
*/
|
|
2373
|
+
disabled?: boolean;
|
|
1624
2374
|
}
|
|
1625
2375
|
/**
|
|
1626
2376
|
* LinkButton — visually identical to `<Button>` but renders a link.
|
|
1627
|
-
* Shares `buttonVariants` so styling stays in lock-step
|
|
2377
|
+
* Shares `buttonVariants` so styling stays in lock-step: the same `variant`
|
|
2378
|
+
* + `intent` axes and the same legacy aliases (W3-02).
|
|
1628
2379
|
*
|
|
1629
|
-
* - Default: renders `
|
|
2380
|
+
* - Default: renders the provider's `linkComponent` (W5-21, ADR-010) when a
|
|
2381
|
+
* `DesignSystemProvider` supplies one, else `next/link` (client-routed
|
|
2382
|
+
* internal navigation). The static `next/link` import stays until 2.0
|
|
2383
|
+
* (C-NEXT-PEER), so a Next.js app without a provider is unchanged.
|
|
1630
2384
|
* - `external`: renders a native `<a>` so the browser handles the request
|
|
1631
2385
|
* end-to-end. Required for cross-origin URLs and same-origin `/api/*`
|
|
1632
2386
|
* handlers that 302 off-app.
|
|
@@ -1673,6 +2427,11 @@ declare const LoadingRows: React$1.ForwardRefExoticComponent<LoadingRowsProps &
|
|
|
1673
2427
|
* - `productName` (the suffix text; `null` renders just "Assure")
|
|
1674
2428
|
* - `className`, `iconClassName`, `textClassName` (style overrides)
|
|
1675
2429
|
*
|
|
2430
|
+
* The link and the wordmark image are the provider's `linkComponent` /
|
|
2431
|
+
* `imageComponent` when a `DesignSystemProvider` supplies them (W5-21,
|
|
2432
|
+
* ADR-010), else `next/link` / `next/image`; the static imports stay until 2.0
|
|
2433
|
+
* (C-NEXT-PEER), so a Next.js app without a provider is unchanged.
|
|
2434
|
+
*
|
|
1676
2435
|
* By default the lockup is a link (`href="/"`). Pass `href={null}` to render a
|
|
1677
2436
|
* non-interactive `<span>` wrapper instead — required when embedding the lockup
|
|
1678
2437
|
* inside another interactive element (a menu trigger `<button>`, a
|
|
@@ -1799,27 +2558,99 @@ declare namespace MultiSelectField {
|
|
|
1799
2558
|
var displayName: string;
|
|
1800
2559
|
}
|
|
1801
2560
|
|
|
2561
|
+
/**
|
|
2562
|
+
* Props of `NumberInput`. Everything a text `<input>` takes except the
|
|
2563
|
+
* value-shaped attributes the component owns (`value`, `defaultValue`,
|
|
2564
|
+
* `onChange`, `type`, `min`, `max`, `step`, `size`).
|
|
2565
|
+
*
|
|
2566
|
+
* @experimental
|
|
2567
|
+
*/
|
|
2568
|
+
interface NumberInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "value" | "defaultValue" | "onChange" | "type" | "min" | "max" | "step" | "size"> {
|
|
2569
|
+
/** The controlled value; `null` is an empty field. */
|
|
2570
|
+
value?: number | null;
|
|
2571
|
+
/** The initial value while uncontrolled. */
|
|
2572
|
+
defaultValue?: number | null;
|
|
2573
|
+
/** Called with the new value on every change; `null` when the field is emptied. */
|
|
2574
|
+
onValueChange?: (value: number | null) => void;
|
|
2575
|
+
/**
|
|
2576
|
+
* The BCP 47 locale the value is formatted and parsed in: this prop, else
|
|
2577
|
+
* `DesignSystemProvider locale`, else `"en-US"` on the server and the client
|
|
2578
|
+
* alike (A3) — never `navigator.language`.
|
|
2579
|
+
*/
|
|
2580
|
+
locale?: string;
|
|
2581
|
+
/** `Intl.NumberFormat` options: fraction digits, `style: "currency"`, `style: "percent"`, … */
|
|
2582
|
+
formatOptions?: Intl.NumberFormatOptions;
|
|
2583
|
+
/** The lowest committed value; ArrowDown and Home stop here. */
|
|
2584
|
+
min?: number;
|
|
2585
|
+
/** The highest committed value; ArrowUp and End stop here. */
|
|
2586
|
+
max?: number;
|
|
2587
|
+
/** The increment of the arrow keys. Default `1`. */
|
|
2588
|
+
step?: number;
|
|
2589
|
+
/** The control scale (`--control-*-<size>`). Default `md`. */
|
|
2590
|
+
size?: ControlSize;
|
|
2591
|
+
/**
|
|
2592
|
+
* `default` draws the field border; `ghost` draws none until focused. The
|
|
2593
|
+
* words are `ControlChromeVariant` (`behavior/control-chrome.ts`), spelled
|
|
2594
|
+
* out so the public declaration names no unexported type.
|
|
2595
|
+
*/
|
|
2596
|
+
variant?: "default" | "ghost";
|
|
2597
|
+
/** Marks the control invalid (`aria-invalid`, danger chrome); a surrounding `Field` can set it too. */
|
|
2598
|
+
invalid?: boolean;
|
|
2599
|
+
/** One class per part, keyed by `NumberInputSlot`. `root` is the `<input>`, the element `className` lands on too. */
|
|
2600
|
+
classNames?: Partial<Record<NumberInputSlot, string>>;
|
|
2601
|
+
}
|
|
2602
|
+
/**
|
|
2603
|
+
* The design-system number field: a locale-formatted `number | null` that
|
|
2604
|
+
* submits its canonical value and reads as a spinbutton.
|
|
2605
|
+
*
|
|
2606
|
+
* @experimental
|
|
2607
|
+
*/
|
|
2608
|
+
declare const NumberInput: React$1.ForwardRefExoticComponent<NumberInputProps & React$1.RefAttributes<HTMLInputElement>>;
|
|
2609
|
+
|
|
2610
|
+
/**
|
|
2611
|
+
* Props of `OTPInput`.
|
|
2612
|
+
*
|
|
2613
|
+
* @experimental The Field / form additions of W4-23 (`onValueChange`,
|
|
2614
|
+
* `required`, `form`, `invalid`, an optional `name`) are experimental; the
|
|
2615
|
+
* legacy props keep their contract.
|
|
2616
|
+
*/
|
|
1802
2617
|
interface OTPInputProps {
|
|
1803
|
-
name:
|
|
2618
|
+
/** The form field name. Optional since W4-23: a surrounding `Field` can supply it. */
|
|
2619
|
+
name?: string;
|
|
1804
2620
|
length?: number;
|
|
1805
2621
|
error?: string;
|
|
2622
|
+
/**
|
|
2623
|
+
* Move focus into the code on mount. Opt-in: only for a screen whose one
|
|
2624
|
+
* purpose is the code (step-up auth, post-redirect verification), never in
|
|
2625
|
+
* a form with other fields. Documented in the `AutoFocus` story.
|
|
2626
|
+
*/
|
|
1806
2627
|
autoFocus?: boolean;
|
|
1807
2628
|
className?: string;
|
|
1808
2629
|
defaultValue?: string;
|
|
1809
2630
|
/** Optional controlled value (additive). */
|
|
1810
2631
|
value?: string;
|
|
1811
|
-
/** Optional controlled onChange (additive). */
|
|
2632
|
+
/** Optional controlled onChange (additive). Fires with the same string as `onValueChange`. */
|
|
1812
2633
|
onChange?: (value: string) => void;
|
|
2634
|
+
/** Called with the new code on every change (ADR-006 spelling). */
|
|
2635
|
+
onValueChange?: (value: string) => void;
|
|
1813
2636
|
/** Optional callback fired when all slots are filled (additive). */
|
|
1814
2637
|
onComplete?: (value: string) => void;
|
|
1815
2638
|
/** Optional id for the underlying input (additive). */
|
|
1816
2639
|
id?: string;
|
|
1817
2640
|
/** Optional disabled flag (additive). */
|
|
1818
2641
|
disabled?: boolean;
|
|
1819
|
-
/**
|
|
2642
|
+
/** Block native submission while the code is empty. */
|
|
2643
|
+
required?: boolean;
|
|
2644
|
+
/** `id` of the form to submit with when the input is rendered outside it. */
|
|
2645
|
+
form?: string;
|
|
2646
|
+
/** Marks the input invalid without a message of its own; `error` and a `Field` can set it too. */
|
|
2647
|
+
invalid?: boolean;
|
|
2648
|
+
/** Accessible label for the underlying one-time-code input. A `Field` label takes precedence. */
|
|
1820
2649
|
"aria-label"?: string;
|
|
2650
|
+
"aria-labelledby"?: string;
|
|
2651
|
+
"aria-describedby"?: string;
|
|
1821
2652
|
}
|
|
1822
|
-
declare function OTPInput({ name, length, error, autoFocus, className, defaultValue, value, onChange, onComplete, id, disabled, "aria-label": ariaLabel, }: OTPInputProps): react_jsx_runtime.JSX.Element;
|
|
2653
|
+
declare function OTPInput({ name, length, error, autoFocus, className, defaultValue, value: valueProp, onChange, onValueChange, onComplete, id, disabled, required, form, invalid, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, }: OTPInputProps): react_jsx_runtime.JSX.Element;
|
|
1823
2654
|
declare namespace OTPInput {
|
|
1824
2655
|
var displayName: string;
|
|
1825
2656
|
}
|
|
@@ -1897,14 +2728,6 @@ interface PdfPreviewProps extends React.HTMLAttributes<HTMLDivElement>, VariantP
|
|
|
1897
2728
|
}
|
|
1898
2729
|
declare const PdfPreview: React$1.ForwardRefExoticComponent<PdfPreviewProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
1899
2730
|
|
|
1900
|
-
type InputProps = React.ComponentProps<typeof Input>;
|
|
1901
|
-
interface PhoneInputProps extends Omit<InputProps, "type" | "onChange" | "value" | "defaultValue"> {
|
|
1902
|
-
value?: string;
|
|
1903
|
-
defaultValue?: string;
|
|
1904
|
-
onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
|
|
1905
|
-
}
|
|
1906
|
-
declare const PhoneInput: React$1.ForwardRefExoticComponent<Omit<PhoneInputProps, "ref"> & React$1.RefAttributes<HTMLInputElement>>;
|
|
1907
|
-
|
|
1908
2731
|
interface CountryCode {
|
|
1909
2732
|
iso: string;
|
|
1910
2733
|
name: string;
|
|
@@ -1926,14 +2749,108 @@ declare function parsePhoneForEditing(phone: string): {
|
|
|
1926
2749
|
localPhone: string;
|
|
1927
2750
|
};
|
|
1928
2751
|
|
|
2752
|
+
/**
|
|
2753
|
+
* Every string the phone field renders, so a consumer can localise it until
|
|
2754
|
+
* the messages contract of the provider lands (W5-20, ADR-010).
|
|
2755
|
+
* Deterministic English defaults (A3).
|
|
2756
|
+
*
|
|
2757
|
+
* @experimental
|
|
2758
|
+
*/
|
|
2759
|
+
interface PhoneFieldMessages {
|
|
2760
|
+
/** The accessible name of the country combobox. */
|
|
2761
|
+
country: string;
|
|
2762
|
+
/** The placeholder of the country combobox while its list is open. */
|
|
2763
|
+
searchCountries: string;
|
|
2764
|
+
/** The empty state when the query matches no country. */
|
|
2765
|
+
noCountries: string;
|
|
2766
|
+
}
|
|
2767
|
+
declare const DEFAULT_PHONE_FIELD_MESSAGES: PhoneFieldMessages;
|
|
2768
|
+
/** What `onValueChange` is told besides the E.164 value. @experimental */
|
|
2769
|
+
interface PhoneFieldChangeDetails {
|
|
2770
|
+
/** The ISO 3166-1 alpha-2 code of the picked country. */
|
|
2771
|
+
country: string;
|
|
2772
|
+
/** The national digits as typed, without the dial code. */
|
|
2773
|
+
nationalNumber: string;
|
|
2774
|
+
}
|
|
2775
|
+
/**
|
|
2776
|
+
* Props of `PhoneField`. Everything a `tel` `<input>` takes except the
|
|
2777
|
+
* value-shaped attributes the component owns.
|
|
2778
|
+
*
|
|
2779
|
+
* @experimental
|
|
2780
|
+
*/
|
|
2781
|
+
interface PhoneFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "value" | "defaultValue" | "onChange" | "type" | "size"> {
|
|
2782
|
+
/** The controlled E.164 value; `null` (or `""`) is an empty field. */
|
|
2783
|
+
value?: string | null;
|
|
2784
|
+
/** The initial E.164 value while uncontrolled. */
|
|
2785
|
+
defaultValue?: string | null;
|
|
2786
|
+
/** Called with the E.164 value on every change; `null` when the number is emptied. */
|
|
2787
|
+
onValueChange?: (value: string | null, details: PhoneFieldChangeDetails) => void;
|
|
2788
|
+
/**
|
|
2789
|
+
* The controlled country (ISO 3166-1 alpha-2). Without `onCountryChange`
|
|
2790
|
+
* the country is fixed and the picker is not rendered.
|
|
2791
|
+
*/
|
|
2792
|
+
country?: string;
|
|
2793
|
+
/** The initial country while uncontrolled. Default `"US"`. */
|
|
2794
|
+
defaultCountry?: string;
|
|
2795
|
+
onCountryChange?: (country: string) => void;
|
|
2796
|
+
/** The countries offered. Default: every entry of `COUNTRY_CODES`. */
|
|
2797
|
+
countries?: readonly CountryCode[];
|
|
2798
|
+
/** The control scale (`--control-*-<size>`). Default `md`. */
|
|
2799
|
+
size?: ControlSize;
|
|
2800
|
+
/**
|
|
2801
|
+
* `default` draws the field border; `ghost` draws none until focused. The
|
|
2802
|
+
* words are `ControlChromeVariant` (`behavior/control-chrome.ts`).
|
|
2803
|
+
*/
|
|
2804
|
+
variant?: "default" | "ghost";
|
|
2805
|
+
/** Marks the control invalid (`aria-invalid`, danger chrome); a surrounding `Field` can set it too. */
|
|
2806
|
+
invalid?: boolean;
|
|
2807
|
+
messages?: Partial<PhoneFieldMessages>;
|
|
2808
|
+
/** One class per part, keyed by `PhoneFieldSlot`. `root` is the row, the element `className` lands on too. */
|
|
2809
|
+
classNames?: Partial<Record<PhoneFieldSlot, string>>;
|
|
2810
|
+
}
|
|
2811
|
+
/**
|
|
2812
|
+
* The design-system phone field: a country picker beside a national number,
|
|
2813
|
+
* one E.164 value.
|
|
2814
|
+
*
|
|
2815
|
+
* @experimental
|
|
2816
|
+
*/
|
|
2817
|
+
declare const PhoneField: React$1.ForwardRefExoticComponent<PhoneFieldProps & React$1.RefAttributes<HTMLInputElement>>;
|
|
2818
|
+
|
|
2819
|
+
type InputProps = React.ComponentProps<typeof Input>;
|
|
2820
|
+
interface PhoneInputProps extends Omit<InputProps, "type" | "onChange" | "value" | "defaultValue"> {
|
|
2821
|
+
value?: string;
|
|
2822
|
+
defaultValue?: string;
|
|
2823
|
+
onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
|
|
2824
|
+
}
|
|
2825
|
+
/**
|
|
2826
|
+
* @deprecated Use `PhoneField` (`country="US"` for the fixed-country mode;
|
|
2827
|
+
* `value` is E.164). Removed in 3.0.
|
|
2828
|
+
*/
|
|
2829
|
+
declare const PhoneInput: React$1.ForwardRefExoticComponent<Omit<PhoneInputProps, "ref"> & React$1.RefAttributes<HTMLInputElement>>;
|
|
2830
|
+
|
|
2831
|
+
/**
|
|
2832
|
+
* The legacy flag: the same 20×14 box and ISO fallback as before, drawn from
|
|
2833
|
+
* `PhoneField`'s lazily loaded flag set (a same-size placeholder until it
|
|
2834
|
+
* lands).
|
|
2835
|
+
*
|
|
2836
|
+
* @deprecated Use `PhoneField`'s `CountryFlag`. Removed in 3.0.
|
|
2837
|
+
*/
|
|
1929
2838
|
declare function CountryFlag({ iso }: {
|
|
1930
2839
|
iso: string;
|
|
1931
2840
|
}): react_jsx_runtime.JSX.Element;
|
|
2841
|
+
/**
|
|
2842
|
+
* @deprecated Use `PhoneField` (its country picker is a `Combobox`). Removed
|
|
2843
|
+
* in 3.0.
|
|
2844
|
+
*/
|
|
1932
2845
|
declare function CountrySelect({ value, onChange, disabled, }: {
|
|
1933
2846
|
value: string;
|
|
1934
2847
|
onChange: (iso: string) => void;
|
|
1935
2848
|
disabled?: boolean;
|
|
1936
2849
|
}): react_jsx_runtime.JSX.Element;
|
|
2850
|
+
/**
|
|
2851
|
+
* @deprecated Use `PhoneField`: one E.164 `value` / `onValueChange`, Field
|
|
2852
|
+
* binding and form submission built in. Removed in 3.0.
|
|
2853
|
+
*/
|
|
1937
2854
|
declare function PhoneCountryInput({ countryIso, localPhone, onCountryChange, onPhoneChange, placeholder, error, disabled, id, }: {
|
|
1938
2855
|
countryIso: string;
|
|
1939
2856
|
localPhone: string;
|
|
@@ -1952,6 +2869,50 @@ declare const PopoverPortal: React$1.FC<PopoverPrimitive.PopoverPortalProps>;
|
|
|
1952
2869
|
declare const PopoverClose: React$1.ForwardRefExoticComponent<PopoverPrimitive.PopoverCloseProps & React$1.RefAttributes<HTMLButtonElement>>;
|
|
1953
2870
|
declare const PopoverContent: React$1.ForwardRefExoticComponent<Omit<PopoverPrimitive.PopoverContentProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
|
|
1954
2871
|
|
|
2872
|
+
interface PressableProps extends React.ButtonHTMLAttributes<HTMLElement> {
|
|
2873
|
+
/**
|
|
2874
|
+
* Render the child element instead of a `<button>` (Radix `Slot`). The
|
|
2875
|
+
* child keeps its own element and role — an `<a href>` stays a link — and
|
|
2876
|
+
* gains the pressable behaviour: Space activates it like a button, `disabled`
|
|
2877
|
+
* becomes `aria-disabled` + `tabIndex={-1}` with the click swallowed, and
|
|
2878
|
+
* `pressed` is reflected. A child that is neither a `<button>` nor a link
|
|
2879
|
+
* must carry its own `role="button"` and `tabIndex`.
|
|
2880
|
+
*/
|
|
2881
|
+
asChild?: boolean;
|
|
2882
|
+
/**
|
|
2883
|
+
* Toggle state (a boolean prop, never a variant — ADR-007 §2). Reflected as
|
|
2884
|
+
* `aria-pressed` and, when true, `data-pressed`. Leave undefined for an
|
|
2885
|
+
* action that does not toggle.
|
|
2886
|
+
*/
|
|
2887
|
+
pressed?: boolean;
|
|
2888
|
+
/**
|
|
2889
|
+
* Native `disabled` on a `<button>`; on any other element (`asChild`)
|
|
2890
|
+
* `aria-disabled="true"`, removal from the tab order and a prevented click,
|
|
2891
|
+
* because links and generic elements have no `disabled` attribute.
|
|
2892
|
+
*/
|
|
2893
|
+
disabled?: boolean;
|
|
2894
|
+
}
|
|
2895
|
+
/**
|
|
2896
|
+
* The behaviour of a button, without its look (W3-03; target architecture
|
|
2897
|
+
* §30, ADR-008). What every pressable thing in the system needs and what a
|
|
2898
|
+
* `<div onClick>` never gets: keyboard activation with Enter *and* Space, a
|
|
2899
|
+
* visible focus ring, disabled semantics that hold on links, and `pressed`
|
|
2900
|
+
* reflected as ARIA and as a `data-*` hook for styling.
|
|
2901
|
+
*
|
|
2902
|
+
* Unstyled-accessible: the only classes are the cursor, the focus ring and
|
|
2903
|
+
* `pointer-events-none` while disabled. Geometry and colour belong to the
|
|
2904
|
+
* component that composes it (`Button`'s recipe is `buttonBase`; a clickable
|
|
2905
|
+
* `Surface` renders through this).
|
|
2906
|
+
*
|
|
2907
|
+
* State attributes on the root: `data-slot="pressable"`, `data-disabled`,
|
|
2908
|
+
* `data-pressed`. The native element defaults to `type="button"` — a new
|
|
2909
|
+
* primitive has no submit-by-default legacy to keep (Button's own default is
|
|
2910
|
+
* W3-10).
|
|
2911
|
+
*
|
|
2912
|
+
* @experimental
|
|
2913
|
+
*/
|
|
2914
|
+
declare const Pressable: React$1.ForwardRefExoticComponent<PressableProps & React$1.RefAttributes<HTMLElement>>;
|
|
2915
|
+
|
|
1955
2916
|
/**
|
|
1956
2917
|
* PriorityIcon — priority glyph for the fixed none/low/medium/high/urgent scale.
|
|
1957
2918
|
*
|
|
@@ -1968,11 +2929,45 @@ interface PriorityIconProps extends Omit<React.SVGAttributes<SVGSVGElement>, "co
|
|
|
1968
2929
|
}
|
|
1969
2930
|
declare function PriorityIcon({ priority, size, className, ...props }: PriorityIconProps): react_jsx_runtime.JSX.Element;
|
|
1970
2931
|
|
|
2932
|
+
/**
|
|
2933
|
+
* The colour vocabulary shared by the Progress family (W3-21, ADR-007 §4,
|
|
2934
|
+
* compat registry C-PROGRESS).
|
|
2935
|
+
*
|
|
2936
|
+
* `ProgressBar` and `ProgressRing` spelled their colour axis `variant`,
|
|
2937
|
+
* `SegmentedProgress` spelled it `tone`, and all three called the brand
|
|
2938
|
+
* colour `default` and danger `destructive`. The new spelling is `intent`
|
|
2939
|
+
* everywhere; the old words stay accepted as deprecated aliases that resolve
|
|
2940
|
+
* through the table below, and every legacy value keeps its classes.
|
|
2941
|
+
*
|
|
2942
|
+
* The family also **auto-colours by value** when no colour is passed
|
|
2943
|
+
* (`< 50%` brand, `≥ 50%` warning, `≥ 80%` success). That mapping is
|
|
2944
|
+
* business-adjacent (Tax documents it as a gotcha) and is kept **on** until
|
|
2945
|
+
* 2.0 (W9-10); an explicit `intent` switches it off, and CM-19 writes the
|
|
2946
|
+
* intent the rule would have picked into every literal-valued call site.
|
|
2947
|
+
*
|
|
2948
|
+
* Lives in the foundation layer because the four presets (L2, one A2 group)
|
|
2949
|
+
* share it and A2 allows no import between them; the unified `Progress`
|
|
2950
|
+
* module (target architecture §26) folds them together later.
|
|
2951
|
+
*/
|
|
2952
|
+
/** Every intent of the shared vocabulary is a Progress colour. */
|
|
2953
|
+
type ProgressIntent = Intent;
|
|
2954
|
+
/**
|
|
2955
|
+
* The pre-W3-21 colour words of `ProgressBar`/`ProgressRing` (`variant`) and
|
|
2956
|
+
* `SegmentedProgress` (`tone`).
|
|
2957
|
+
*
|
|
2958
|
+
* @deprecated Use `intent` — `default` → `brand`, `destructive` → `danger`,
|
|
2959
|
+
* the others keep their name. Removed in 3.0; CM-06 / CM-19 rewrite call sites.
|
|
2960
|
+
*/
|
|
2961
|
+
type ProgressLegacyColour = "default" | "success" | "warning" | "destructive" | "info";
|
|
2962
|
+
/** Legacy colour word → `intent` (ADR-007 §4). Classes are identical on both sides. */
|
|
2963
|
+
declare const PROGRESS_LEGACY_TO_INTENT: Readonly<Record<ProgressLegacyColour, ProgressIntent>>;
|
|
2964
|
+
|
|
1971
2965
|
/**
|
|
1972
2966
|
* ProgressBar — Radix-driven determinate (or indeterminate) progress meter.
|
|
1973
|
-
* Track sits on `bg-3`;
|
|
1974
|
-
*
|
|
1975
|
-
*
|
|
2967
|
+
* Track sits on `bg-3`; the fill follows `intent` (ADR-007). When neither
|
|
2968
|
+
* `intent` nor the deprecated `variant` is passed, the colour auto-resolves
|
|
2969
|
+
* from the value (kept on until 2.0, W9-10):
|
|
2970
|
+
* <50% → brand
|
|
1976
2971
|
* ≥50% → warning
|
|
1977
2972
|
* ≥80% → success
|
|
1978
2973
|
*
|
|
@@ -1980,10 +2975,24 @@ declare function PriorityIcon({ priority, size, className, ...props }: PriorityI
|
|
|
1980
2975
|
* Pass `value={null}` (or omit when in-doubt) to render Radix's indeterminate
|
|
1981
2976
|
* state — but for back-compat we still accept `value: number`.
|
|
1982
2977
|
*/
|
|
1983
|
-
|
|
1984
|
-
|
|
1985
|
-
|
|
1986
|
-
|
|
2978
|
+
/** @deprecated Use `intent`. `default` → `brand`, `destructive` → `danger`. */
|
|
2979
|
+
type ProgressBarVariant = ProgressLegacyColour;
|
|
2980
|
+
interface ProgressBarVariantProps {
|
|
2981
|
+
/**
|
|
2982
|
+
* Semantic fill colour (ADR-007). Passing it switches the value-driven
|
|
2983
|
+
* auto-colour off. Wins over `variant`.
|
|
2984
|
+
*/
|
|
2985
|
+
intent?: ProgressIntent | null;
|
|
2986
|
+
/** @deprecated Use `intent`. `default` → `brand`, `destructive` → `danger`. */
|
|
2987
|
+
variant?: ProgressBarVariant | null;
|
|
2988
|
+
}
|
|
2989
|
+
/**
|
|
2990
|
+
* The indicator class string for a resolved colour. Accepts `intent` or the
|
|
2991
|
+
* deprecated `variant`; with neither it renders `brand` (the component itself
|
|
2992
|
+
* auto-colours by value before calling this).
|
|
2993
|
+
*/
|
|
2994
|
+
declare function progressBarVariants({ intent, variant }?: ProgressBarVariantProps): string;
|
|
2995
|
+
interface ProgressBarProps extends Omit<React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>, "value">, ProgressBarVariantProps {
|
|
1987
2996
|
/** 0..max. Set to `null` for an indeterminate track. */
|
|
1988
2997
|
value: number | null;
|
|
1989
2998
|
max?: number;
|
|
@@ -1994,15 +3003,31 @@ declare const ProgressBar: React$1.ForwardRefExoticComponent<ProgressBarProps &
|
|
|
1994
3003
|
|
|
1995
3004
|
/**
|
|
1996
3005
|
* ProgressRing — custom SVG ring meter (no Radix equivalent).
|
|
1997
|
-
* Track is `bg-3`, the indicator picks up the active
|
|
1998
|
-
* value-driven auto-resolve mirror ProgressBar so consumers
|
|
3006
|
+
* Track is `bg-3`, the indicator picks up the active `intent` (ADR-007).
|
|
3007
|
+
* Colours and the value-driven auto-resolve mirror ProgressBar so consumers
|
|
3008
|
+
* can mix freely; the auto-colour applies only when neither `intent` nor the
|
|
3009
|
+
* deprecated `variant` is passed (kept on until 2.0, W9-10).
|
|
1999
3010
|
*
|
|
2000
3011
|
* Public API preserved: `value`, `max`, `size`, `strokeWidth`, `label`, `sublabel`.
|
|
2001
3012
|
*/
|
|
2002
|
-
|
|
2003
|
-
|
|
2004
|
-
|
|
2005
|
-
|
|
3013
|
+
/** @deprecated Use `intent`. `default` → `brand`, `destructive` → `danger`. */
|
|
3014
|
+
type ProgressRingVariant = ProgressLegacyColour;
|
|
3015
|
+
interface ProgressRingVariantProps {
|
|
3016
|
+
/**
|
|
3017
|
+
* Semantic indicator colour (ADR-007). Passing it switches the value-driven
|
|
3018
|
+
* auto-colour off. Wins over `variant`.
|
|
3019
|
+
*/
|
|
3020
|
+
intent?: ProgressIntent | null;
|
|
3021
|
+
/** @deprecated Use `intent`. `default` → `brand`, `destructive` → `danger`. */
|
|
3022
|
+
variant?: ProgressRingVariant | null;
|
|
3023
|
+
}
|
|
3024
|
+
/**
|
|
3025
|
+
* The indicator class string for a resolved colour. Accepts `intent` or the
|
|
3026
|
+
* deprecated `variant`; with neither it renders `brand` (the component itself
|
|
3027
|
+
* auto-colours by value before calling this).
|
|
3028
|
+
*/
|
|
3029
|
+
declare function progressRingVariants({ intent, variant }?: ProgressRingVariantProps): string;
|
|
3030
|
+
interface ProgressRingProps extends React.HTMLAttributes<HTMLDivElement>, ProgressRingVariantProps {
|
|
2006
3031
|
value: number;
|
|
2007
3032
|
max?: number;
|
|
2008
3033
|
size?: number;
|
|
@@ -2012,10 +3037,27 @@ interface ProgressRingProps extends React.HTMLAttributes<HTMLDivElement>, Varian
|
|
|
2012
3037
|
}
|
|
2013
3038
|
declare const ProgressRing: React$1.ForwardRefExoticComponent<ProgressRingProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
2014
3039
|
|
|
2015
|
-
|
|
3040
|
+
/** How the items render: the bare radio (`plain`, default) or a selectable card. */
|
|
3041
|
+
type RadioGroupAppearance = "plain" | "card";
|
|
3042
|
+
interface RadioGroupProps extends React$1.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root> {
|
|
3043
|
+
/** `card` renders each item as a bordered, clickable card with its label and description. */
|
|
3044
|
+
appearance?: RadioGroupAppearance;
|
|
3045
|
+
/**
|
|
3046
|
+
* The group is in error: `aria-invalid` and `data-invalid` on the group
|
|
3047
|
+
* and `aria-invalid` on every item. Implied by the surrounding `Field`'s
|
|
3048
|
+
* `invalid` or a mounted `FieldError`.
|
|
3049
|
+
*/
|
|
3050
|
+
invalid?: boolean;
|
|
3051
|
+
}
|
|
3052
|
+
declare const RadioGroup: React$1.ForwardRefExoticComponent<RadioGroupProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
2016
3053
|
interface RadioGroupItemProps extends React$1.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item> {
|
|
2017
3054
|
/** Optional inline label rendered to the right of the radio */
|
|
2018
3055
|
label?: string;
|
|
3056
|
+
/**
|
|
3057
|
+
* Secondary text under the label, referenced by the radio through
|
|
3058
|
+
* `aria-describedby`. Rendered only with `appearance="card"` on the group.
|
|
3059
|
+
*/
|
|
3060
|
+
description?: React$1.ReactNode;
|
|
2019
3061
|
}
|
|
2020
3062
|
declare const RadioGroupItem: React$1.ForwardRefExoticComponent<RadioGroupItemProps & React$1.RefAttributes<HTMLButtonElement>>;
|
|
2021
3063
|
|
|
@@ -2046,7 +3088,7 @@ interface RankedBarsProps extends React.HTMLAttributes<HTMLUListElement> {
|
|
|
2046
3088
|
}
|
|
2047
3089
|
declare const RankedBars: React$1.ForwardRefExoticComponent<RankedBarsProps & React$1.RefAttributes<HTMLUListElement>>;
|
|
2048
3090
|
|
|
2049
|
-
type SheetSide = "top" | "right" | "bottom" | "left";
|
|
3091
|
+
type SheetSide$1 = "top" | "right" | "bottom" | "left";
|
|
2050
3092
|
type DialogSize = "sm" | "md" | "lg" | "full";
|
|
2051
3093
|
interface ResponsiveDialogProps {
|
|
2052
3094
|
/** Controlled open state. */
|
|
@@ -2067,7 +3109,7 @@ interface ResponsiveDialogProps {
|
|
|
2067
3109
|
/** Class applied to the rendered Sheet/Dialog content surface. */
|
|
2068
3110
|
className?: string;
|
|
2069
3111
|
/** Sheet side on mobile. Default `"bottom"`. */
|
|
2070
|
-
side?: SheetSide;
|
|
3112
|
+
side?: SheetSide$1;
|
|
2071
3113
|
/** Desktop Dialog max-width preset. Default `"md"`. */
|
|
2072
3114
|
size?: DialogSize;
|
|
2073
3115
|
}
|
|
@@ -2106,18 +3148,78 @@ interface ScrollAreaProps extends React$1.ComponentPropsWithoutRef<typeof Scroll
|
|
|
2106
3148
|
declare const ScrollArea: React$1.ForwardRefExoticComponent<ScrollAreaProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
2107
3149
|
declare const ScrollBar: React$1.ForwardRefExoticComponent<Omit<ScrollAreaPrimitive.ScrollAreaScrollbarProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
|
|
2108
3150
|
|
|
2109
|
-
|
|
2110
|
-
|
|
2111
|
-
|
|
2112
|
-
|
|
2113
|
-
|
|
2114
|
-
|
|
2115
|
-
|
|
2116
|
-
|
|
2117
|
-
|
|
2118
|
-
}
|
|
2119
|
-
|
|
2120
|
-
|
|
3151
|
+
/**
|
|
3152
|
+
* The size names a SearchInput knows (W4-07): the three steps Input's compat
|
|
3153
|
+
* rows cover, plus the 1.31 aliases (deprecated with `inputSize`).
|
|
3154
|
+
*
|
|
3155
|
+
* @experimental
|
|
3156
|
+
*/
|
|
3157
|
+
type SearchInputSize = Extract<ControlSize, "sm" | "md" | "lg"> | InputSizeAlias;
|
|
3158
|
+
|
|
3159
|
+
/**
|
|
3160
|
+
* What {@link searchInputVariants} takes: the size (either name — `size`
|
|
3161
|
+
* wins when both are given) and cva's class props.
|
|
3162
|
+
*
|
|
3163
|
+
* @experimental
|
|
3164
|
+
*/
|
|
3165
|
+
interface SearchInputVariantsOptions {
|
|
3166
|
+
size?: SearchInputSize | null;
|
|
3167
|
+
/**
|
|
3168
|
+
* The legacy size prop (C-INPUT-SIZE): today's rows, byte for byte.
|
|
3169
|
+
*
|
|
3170
|
+
* @deprecated Use `size`. Codemod CM-07 renames it.
|
|
3171
|
+
*/
|
|
3172
|
+
inputSize?: SearchInputSize | null;
|
|
3173
|
+
class?: string | null;
|
|
3174
|
+
className?: string | null;
|
|
3175
|
+
}
|
|
3176
|
+
/** The variant props of `searchInputVariants` (cva's `VariantProps` shape, kept for the API report). */
|
|
3177
|
+
type SearchInputVariants = Omit<SearchInputVariantsOptions, "class" | "className">;
|
|
3178
|
+
/**
|
|
3179
|
+
* The SearchInput class recipe (W4-07): the shared control chrome
|
|
3180
|
+
* (`behavior/control-chrome.ts`) in its `default` emphasis and no height
|
|
3181
|
+
* row, the native search-decoration reset, then the row of the size.
|
|
3182
|
+
*
|
|
3183
|
+
* Against the cva it replaces (W4-03 mapping, PR #199) the set of classes
|
|
3184
|
+
* gains the chrome's `aria-[invalid=true]` rows — inert until a caller sets
|
|
3185
|
+
* `aria-invalid` — and is otherwise identical for every legacy `inputSize`;
|
|
3186
|
+
* `border-rule-strong` moved after the base, which Tailwind does not read.
|
|
3187
|
+
* Server-safe.
|
|
3188
|
+
*
|
|
3189
|
+
* @experimental
|
|
3190
|
+
*/
|
|
3191
|
+
declare function searchInputVariants({ size, inputSize, class: classProp, className, }?: SearchInputVariantsOptions): string;
|
|
3192
|
+
/**
|
|
3193
|
+
* Props of `SearchInput` (W4-07).
|
|
3194
|
+
*
|
|
3195
|
+
* @experimental The name is exported since W4-07; the props it lists have been
|
|
3196
|
+
* stable since 1.x.
|
|
3197
|
+
*/
|
|
3198
|
+
interface SearchInputProps extends Omit<React$1.InputHTMLAttributes<HTMLInputElement>, "type" | "onChange" | "size">, SearchInputVariants {
|
|
3199
|
+
/** The current query (controlled). */
|
|
3200
|
+
value: string;
|
|
3201
|
+
/** Called with the new query on every keystroke and with `""` when cleared or the form resets. */
|
|
3202
|
+
onValueChange: (value: string) => void;
|
|
3203
|
+
/** Called with the query once it has been stable for `debounceMs`. */
|
|
3204
|
+
onSearch?: (value: string) => void;
|
|
3205
|
+
/** Default 300. */
|
|
3206
|
+
debounceMs?: number;
|
|
3207
|
+
/** Overrides of the copy the component renders (English defaults). */
|
|
3208
|
+
messages?: Partial<SearchInputMessages>;
|
|
3209
|
+
/**
|
|
3210
|
+
* Classes per anatomy part (the `search-input-*` slots). The wrapper
|
|
3211
|
+
* is the root part and takes `className`, so it has no entry here.
|
|
3212
|
+
*/
|
|
3213
|
+
classNames?: Partial<Record<Exclude<SearchInputSlot, "root">, string>>;
|
|
3214
|
+
}
|
|
3215
|
+
/**
|
|
3216
|
+
* A search field. The control is a native `<input type="search">`
|
|
3217
|
+
* (`role="searchbox"`); name it with `aria-label`, or through a `Field`,
|
|
3218
|
+
* which it binds to with `useFieldControl`.
|
|
3219
|
+
*/
|
|
3220
|
+
declare const SearchInput: React$1.ForwardRefExoticComponent<SearchInputProps & React$1.RefAttributes<HTMLInputElement>>;
|
|
3221
|
+
|
|
3222
|
+
/** @deprecated Use `Combobox` with `Option` (`{ value, label }`). Removed in 3.0 (C-SEARCHSELECT, CM-08). */
|
|
2121
3223
|
interface SearchSelectOption {
|
|
2122
3224
|
id: string;
|
|
2123
3225
|
label: string;
|
|
@@ -2151,6 +3253,7 @@ interface SearchSelectOption {
|
|
|
2151
3253
|
*/
|
|
2152
3254
|
description?: string;
|
|
2153
3255
|
}
|
|
3256
|
+
/** @deprecated Use `ComboboxProps`. Removed in 3.0 (C-SEARCHSELECT, CM-08). */
|
|
2154
3257
|
interface SearchSelectProps {
|
|
2155
3258
|
options: SearchSelectOption[];
|
|
2156
3259
|
/**
|
|
@@ -2213,8 +3316,22 @@ interface SearchSelectProps {
|
|
|
2213
3316
|
* reads as a tag instead of running into the label. Single-mode only.
|
|
2214
3317
|
*/
|
|
2215
3318
|
descriptionVariant?: "inline" | "pill";
|
|
3319
|
+
/** The accessible name (W4-12). Without it, `placeholder` names the input as before. */
|
|
3320
|
+
"aria-label"?: string;
|
|
3321
|
+
/** Names the input from another element, for example a visible label (W4-12). */
|
|
3322
|
+
"aria-labelledby"?: string;
|
|
3323
|
+
"aria-describedby"?: string;
|
|
3324
|
+
/** The input's id, so a `<label htmlFor>` can point at it (W4-12). */
|
|
3325
|
+
id?: string;
|
|
2216
3326
|
}
|
|
2217
|
-
|
|
3327
|
+
/**
|
|
3328
|
+
* @deprecated Use `Combobox` (single: `value` / `onValueChange` with `null` for
|
|
3329
|
+
* empty; multi: `multiple` with `TValue[]`) and the `Option` shape
|
|
3330
|
+
* (`{ value, label }`). `SearchSelect` is an adapter over it and is removed in
|
|
3331
|
+
* 3.0 (compatibility registry C-SEARCHSELECT); codemod CM-08 rewrites call
|
|
3332
|
+
* sites and flags the ones a human must look at.
|
|
3333
|
+
*/
|
|
3334
|
+
declare function SearchSelect({ options, selected: selectedProp, onSelect: onSelectProp, onRemove: onRemoveProp, value, onValueChange, onCreate, placeholder, className, disabled, groupFilter, pinnedGroups, closeOnSelect: closeOnSelectProp, showGroupCounts, onCreateNew, createNewLabel, descriptionVariant, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, id, }: SearchSelectProps): react_jsx_runtime.JSX.Element;
|
|
2218
3335
|
declare namespace SearchSelect {
|
|
2219
3336
|
var displayName: string;
|
|
2220
3337
|
}
|
|
@@ -2254,21 +3371,33 @@ interface SectionHeadProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "t
|
|
|
2254
3371
|
}
|
|
2255
3372
|
declare const SectionHead: React$1.ForwardRefExoticComponent<SectionHeadProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
2256
3373
|
|
|
3374
|
+
/** Service tints — product hues, never intents (ADR-007 §2); reachable through `tone` only. */
|
|
3375
|
+
declare const SERVICE_FILL: {
|
|
3376
|
+
tax: string;
|
|
3377
|
+
audit: string;
|
|
3378
|
+
accounting: string;
|
|
3379
|
+
};
|
|
3380
|
+
/** Service tints: product hues that stay on the deprecated `tone` axis. */
|
|
3381
|
+
type SegmentedServiceTone = keyof typeof SERVICE_FILL;
|
|
2257
3382
|
/**
|
|
2258
|
-
*
|
|
2259
|
-
* first `current` of which are filled. Used on engagement cards ("step 2
|
|
2260
|
-
* of 5") where a continuous bar would over-state precision.
|
|
3383
|
+
* The pre-W3-21 colour words (compat registry C-TONE).
|
|
2261
3384
|
*
|
|
2262
|
-
* `
|
|
2263
|
-
*
|
|
2264
|
-
*
|
|
3385
|
+
* @deprecated Use `intent` — `default` → `brand`, `destructive` → `danger`,
|
|
3386
|
+
* the other status words keep their name. The service tones have no intent
|
|
3387
|
+
* and stay here. Removed in 3.0; CM-06 rewrites the mappable call sites.
|
|
2265
3388
|
*/
|
|
2266
|
-
type SegmentedTone =
|
|
3389
|
+
type SegmentedTone = ProgressLegacyColour | SegmentedServiceTone;
|
|
2267
3390
|
interface SegmentedProgressProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
|
|
2268
3391
|
/** Total number of segments. */
|
|
2269
3392
|
steps: number;
|
|
2270
3393
|
/** How many leading segments are filled. */
|
|
2271
3394
|
current: number;
|
|
3395
|
+
/** Semantic fill colour (ADR-007). Default `brand`. Wins over `tone`. */
|
|
3396
|
+
intent?: ProgressIntent;
|
|
3397
|
+
/**
|
|
3398
|
+
* @deprecated Use `intent`. `default` → `brand`, `destructive` → `danger`;
|
|
3399
|
+
* `tax` / `audit` / `accounting` stay here (no intent).
|
|
3400
|
+
*/
|
|
2272
3401
|
tone?: SegmentedTone;
|
|
2273
3402
|
/** Segment height in px. Default 6. */
|
|
2274
3403
|
thickness?: number;
|
|
@@ -2280,10 +3409,53 @@ declare const SegmentedProgress: React$1.ForwardRefExoticComponent<SegmentedProg
|
|
|
2280
3409
|
declare const SelectRoot: React$1.FC<SelectPrimitive.SelectProps>;
|
|
2281
3410
|
declare const SelectGroup: React$1.ForwardRefExoticComponent<SelectPrimitive.SelectGroupProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
2282
3411
|
declare const SelectValue: React$1.ForwardRefExoticComponent<SelectPrimitive.SelectValueProps & React$1.RefAttributes<HTMLSpanElement>>;
|
|
2283
|
-
|
|
3412
|
+
/**
|
|
3413
|
+
* The Select sizes: the shared control scale, nothing else (A1, ADR-013).
|
|
3414
|
+
*
|
|
3415
|
+
* @experimental
|
|
3416
|
+
*/
|
|
3417
|
+
type SelectSize = ControlSize;
|
|
3418
|
+
/**
|
|
3419
|
+
* The parts a `classNames` entry can reach on the options-driven `Select`,
|
|
3420
|
+
* keyed by the anatomy (ADR-008 decision 4). `value` is a span of ours
|
|
3421
|
+
* around Radix's value (Radix's own span drops `className`), rendered only
|
|
3422
|
+
* when `classNames.value` or `clearable` asks for it, so a legacy call keeps
|
|
3423
|
+
* the `SelectTrigger > span` structure C-DOM-10 freezes.
|
|
3424
|
+
*
|
|
3425
|
+
* @experimental
|
|
3426
|
+
*/
|
|
3427
|
+
type SelectClassNames = Partial<Record<SelectSlot, string>>;
|
|
3428
|
+
|
|
3429
|
+
/**
|
|
3430
|
+
* Props of `SelectTrigger`: Radix's trigger props plus the control-scale
|
|
3431
|
+
* `size` and a class for the chevron.
|
|
3432
|
+
*
|
|
3433
|
+
* @experimental `size` and `classNames`
|
|
3434
|
+
*/
|
|
3435
|
+
interface SelectTriggerProps extends React$1.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger> {
|
|
3436
|
+
/**
|
|
3437
|
+
* Height, horizontal padding, label size, gap and glyph size from the shared
|
|
3438
|
+
* control scale (A1). Omitted, the trigger keeps its legacy geometry (36px,
|
|
3439
|
+
* the same pixels as `md`).
|
|
3440
|
+
*/
|
|
3441
|
+
size?: SelectSize | null;
|
|
3442
|
+
/** Classes for the parts the trigger renders itself: the chevron `icon`. */
|
|
3443
|
+
classNames?: Pick<SelectClassNames, "icon">;
|
|
3444
|
+
}
|
|
3445
|
+
declare const SelectTrigger: React$1.ForwardRefExoticComponent<SelectTriggerProps & React$1.RefAttributes<HTMLButtonElement>>;
|
|
2284
3446
|
declare const SelectScrollUpButton: React$1.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectScrollUpButtonProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
|
|
2285
3447
|
declare const SelectScrollDownButton: React$1.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectScrollDownButtonProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
|
|
2286
|
-
|
|
3448
|
+
/**
|
|
3449
|
+
* Props of `SelectContent`: Radix's content props plus a class for the
|
|
3450
|
+
* viewport (C-DOM-19's `[data-radix-select-viewport]` selector replacement).
|
|
3451
|
+
*
|
|
3452
|
+
* @experimental `classNames`
|
|
3453
|
+
*/
|
|
3454
|
+
interface SelectContentProps extends React$1.ComponentPropsWithoutRef<typeof SelectPrimitive.Content> {
|
|
3455
|
+
/** Classes for the parts the content renders itself: the scrolling `viewport`. */
|
|
3456
|
+
classNames?: Pick<SelectClassNames, "viewport">;
|
|
3457
|
+
}
|
|
3458
|
+
declare const SelectContent: React$1.ForwardRefExoticComponent<SelectContentProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
2287
3459
|
declare const SelectLabel: React$1.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectLabelProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
|
|
2288
3460
|
declare const SelectItem: React$1.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectItemProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
|
|
2289
3461
|
declare const SelectSeparator: React$1.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectSeparatorProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
|
|
@@ -2300,26 +3472,104 @@ interface SelectOption {
|
|
|
2300
3472
|
interface SelectProps {
|
|
2301
3473
|
/** Option list. Required to preserve legacy API. */
|
|
2302
3474
|
options: SelectOption[];
|
|
2303
|
-
/**
|
|
2304
|
-
|
|
2305
|
-
|
|
2306
|
-
|
|
3475
|
+
/**
|
|
3476
|
+
* Controlled value. `null` is "nothing selected" (target architecture §32);
|
|
3477
|
+
* `""` means the same and stays accepted through 2.x (C-SELECT-EMPTY).
|
|
3478
|
+
*/
|
|
3479
|
+
value?: string | null;
|
|
3480
|
+
/** Uncontrolled initial value; restored on form reset. `null` = nothing selected. */
|
|
3481
|
+
defaultValue?: string | null;
|
|
3482
|
+
/**
|
|
3483
|
+
* Called with the picked option's value, and with `""` when the selection
|
|
3484
|
+
* is cleared (`clearable`) — the signature every existing handler already
|
|
3485
|
+
* has. Reporting `null` is a 3.0 change (C-SELECT-EMPTY).
|
|
3486
|
+
*/
|
|
2307
3487
|
onValueChange?: (value: string) => void;
|
|
2308
3488
|
placeholder?: string;
|
|
2309
|
-
/**
|
|
3489
|
+
/**
|
|
3490
|
+
* @deprecated NO-OP: Radix Select cannot filter. Use `Combobox` (or
|
|
3491
|
+
* `SearchSelect`) for filterable selection. Warns once in development;
|
|
3492
|
+
* removed in 2.0 (C-SELECT-DEAD, codemod CM-11).
|
|
3493
|
+
*/
|
|
2310
3494
|
searchable?: boolean;
|
|
2311
3495
|
disabled?: boolean;
|
|
3496
|
+
/**
|
|
3497
|
+
* Submit the value under this name through the form the trigger sits in
|
|
3498
|
+
* (or `form`). Inside a `<Field name>` the field's name applies.
|
|
3499
|
+
*/
|
|
2312
3500
|
name?: string;
|
|
3501
|
+
/**
|
|
3502
|
+
* Block native submission while nothing is selected; the trigger carries
|
|
3503
|
+
* `aria-required`. Inside a `<Field required>` the field's flag applies.
|
|
3504
|
+
*/
|
|
2313
3505
|
required?: boolean;
|
|
3506
|
+
/**
|
|
3507
|
+
* The `id` of the form to submit with when the trigger is rendered outside
|
|
3508
|
+
* it — inside a portalled Dialog or Sheet (ADR-006).
|
|
3509
|
+
*
|
|
3510
|
+
* @experimental
|
|
3511
|
+
*/
|
|
3512
|
+
form?: string;
|
|
3513
|
+
/**
|
|
3514
|
+
* The trigger's `id`; inside a `<Field>` the field's control id applies.
|
|
3515
|
+
*
|
|
3516
|
+
* @experimental
|
|
3517
|
+
*/
|
|
3518
|
+
id?: string;
|
|
3519
|
+
/**
|
|
3520
|
+
* The control scale (A1, ADR-013): `xs` 28 · `sm` 32 · `md` 36 · `lg` 40 ·
|
|
3521
|
+
* `xl` 48. Omitted, the trigger keeps its legacy 36px row; a `<Field size>`
|
|
3522
|
+
* supplies it.
|
|
3523
|
+
*
|
|
3524
|
+
* @experimental
|
|
3525
|
+
*/
|
|
3526
|
+
size?: SelectSize;
|
|
3527
|
+
/**
|
|
3528
|
+
* Show a clear button beside the chevron while a value is selected. Clearing
|
|
3529
|
+
* reports `""` through `onValueChange` and focuses the trigger. Renders the
|
|
3530
|
+
* `root` part (`data-slot="select"`) around the trigger — `className` lands
|
|
3531
|
+
* on that wrapper then, `classNames.trigger` on the trigger.
|
|
3532
|
+
*
|
|
3533
|
+
* @experimental
|
|
3534
|
+
*/
|
|
3535
|
+
clearable?: boolean;
|
|
3536
|
+
/**
|
|
3537
|
+
* The outermost element's class: the trigger, or the `root` wrapper when
|
|
3538
|
+
* `clearable`.
|
|
3539
|
+
*/
|
|
2314
3540
|
className?: string;
|
|
2315
|
-
/**
|
|
3541
|
+
/**
|
|
3542
|
+
* One class per part (ADR-008 decision 4): `trigger`, `value`, `icon`
|
|
3543
|
+
* (chevron), `content`, `viewport`, `item`, `clear`, `root`. Each part's
|
|
3544
|
+
* class comes after the design system's own and before `className`.
|
|
3545
|
+
* `value` wraps Radix's value span in one of ours (see `SelectClassNames`).
|
|
3546
|
+
*
|
|
3547
|
+
* @experimental
|
|
3548
|
+
*/
|
|
3549
|
+
classNames?: SelectClassNames;
|
|
3550
|
+
/** Overrides of the copy the select renders (English defaults until W5-20). */
|
|
3551
|
+
messages?: Partial<SelectMessages>;
|
|
3552
|
+
/**
|
|
3553
|
+
* @deprecated Use `classNames.trigger` (C-CLASSNAME-PROPS, codemod CM-11).
|
|
3554
|
+
* Removed in 3.0.
|
|
3555
|
+
*/
|
|
2316
3556
|
triggerClassName?: string;
|
|
2317
|
-
/**
|
|
3557
|
+
/**
|
|
3558
|
+
* @deprecated Use `classNames.content` (C-CLASSNAME-PROPS, codemod CM-11).
|
|
3559
|
+
* Removed in 3.0.
|
|
3560
|
+
*/
|
|
2318
3561
|
contentClassName?: string;
|
|
2319
|
-
/** aria-invalid + danger styling on trigger. */
|
|
3562
|
+
/** aria-invalid + danger styling on trigger. Inside a `<Field invalid>` the field's flag applies. */
|
|
2320
3563
|
"aria-invalid"?: boolean;
|
|
2321
|
-
/**
|
|
3564
|
+
/**
|
|
3565
|
+
* aria-label fallback when there is no visible label. Inside a `<Field>`
|
|
3566
|
+
* with a `Label` the trigger is named by the label instead.
|
|
3567
|
+
*/
|
|
2322
3568
|
"aria-label"?: string;
|
|
3569
|
+
/** Explicit `aria-labelledby`; wins over the surrounding `Field`. */
|
|
3570
|
+
"aria-labelledby"?: string;
|
|
3571
|
+
/** Explicit `aria-describedby`; appended after the field's description and error. */
|
|
3572
|
+
"aria-describedby"?: string;
|
|
2323
3573
|
}
|
|
2324
3574
|
/**
|
|
2325
3575
|
* Convenience `Select` — preserved options-driven API.
|
|
@@ -2335,15 +3585,48 @@ interface SelectProps {
|
|
|
2335
3585
|
* </SelectContent>
|
|
2336
3586
|
* </SelectRoot>
|
|
2337
3587
|
*/
|
|
2338
|
-
declare function Select({ options, value, defaultValue, onValueChange, placeholder, searchable, disabled, name, required, className, triggerClassName, contentClassName, "aria-invalid": ariaInvalid, "aria-label": ariaLabel, }: SelectProps): react_jsx_runtime.JSX.Element;
|
|
3588
|
+
declare function Select({ options, value: valueProp, defaultValue: defaultValueProp, onValueChange, placeholder, searchable, disabled: disabledProp, name: nameProp, required: requiredProp, form, id: idProp, size: sizeProp, clearable, className, classNames, messages, triggerClassName, contentClassName, "aria-invalid": ariaInvalid, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, }: SelectProps): react_jsx_runtime.JSX.Element;
|
|
2339
3589
|
declare namespace Select {
|
|
2340
3590
|
var displayName: string;
|
|
2341
3591
|
}
|
|
2342
3592
|
|
|
2343
3593
|
declare const Separator: React$1.ForwardRefExoticComponent<Omit<SeparatorPrimitive.SeparatorProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
|
|
2344
3594
|
|
|
2345
|
-
|
|
2346
|
-
|
|
3595
|
+
/**
|
|
3596
|
+
* The edge a `Sheet` slides in from.
|
|
3597
|
+
*
|
|
3598
|
+
* @experimental
|
|
3599
|
+
*/
|
|
3600
|
+
type SheetSide = "top" | "right" | "bottom" | "left";
|
|
3601
|
+
type Side = SheetSide;
|
|
3602
|
+
/**
|
|
3603
|
+
* Width of a left/right `SheetContent`, as a step of the sheet width scale
|
|
3604
|
+
* (W5-07): `sm` 420px · `md` 520px · `lg` 640px · `xl` 760px from the `sm`
|
|
3605
|
+
* breakpoint (95vw below it) · `full` the viewport. Omitted, the panel keeps
|
|
3606
|
+
* its 1.x geometry (`w-3/4 max-w-sm`). Every step and the default yield to
|
|
3607
|
+
* `--ds-sheet-width` when a consumer sets it. Top/bottom sheets span the
|
|
3608
|
+
* viewport and ignore it.
|
|
3609
|
+
*
|
|
3610
|
+
* @experimental
|
|
3611
|
+
*/
|
|
3612
|
+
type SheetSize = "sm" | "md" | "lg" | "xl" | "full";
|
|
3613
|
+
/**
|
|
3614
|
+
* What the deprecated `width` prop accepts: the size steps plus `default`.
|
|
3615
|
+
*
|
|
3616
|
+
* @deprecated Use `size` (C-SHEET-WIDTH, codemod CM-11). Removed in 3.0.
|
|
3617
|
+
* @experimental
|
|
3618
|
+
*/
|
|
3619
|
+
type SheetWidth = "default" | SheetSize;
|
|
3620
|
+
/**
|
|
3621
|
+
* The copy a `Sheet` renders (target architecture §24.5). English defaults
|
|
3622
|
+
* until the messages contract of the provider lands (W5-20).
|
|
3623
|
+
*
|
|
3624
|
+
* @experimental
|
|
3625
|
+
*/
|
|
3626
|
+
interface SheetMessages {
|
|
3627
|
+
/** The accessible name of the built-in close button. Default `"Close"`. */
|
|
3628
|
+
close: string;
|
|
3629
|
+
}
|
|
2347
3630
|
interface SheetProps extends React$1.ComponentPropsWithoutRef<typeof DialogPrimitive.Root> {
|
|
2348
3631
|
/**
|
|
2349
3632
|
* Default side for SheetContent if it doesn't specify its own.
|
|
@@ -2360,31 +3643,72 @@ declare const SheetTrigger: React$1.ForwardRefExoticComponent<DialogPrimitive.Di
|
|
|
2360
3643
|
declare const SheetClose: React$1.ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & React$1.RefAttributes<HTMLButtonElement>>;
|
|
2361
3644
|
declare const SheetPortal: React$1.FC<DialogPrimitive.DialogPortalProps>;
|
|
2362
3645
|
declare const SheetOverlay: React$1.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogOverlayProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
|
|
2363
|
-
|
|
2364
|
-
|
|
2365
|
-
|
|
2366
|
-
|
|
3646
|
+
/**
|
|
3647
|
+
* Props of `SheetContent`: Radix's content props plus the side, the sizing
|
|
3648
|
+
* and the dismiss options.
|
|
3649
|
+
*
|
|
3650
|
+
* @experimental
|
|
3651
|
+
*/
|
|
3652
|
+
interface SheetContentProps extends React$1.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> {
|
|
3653
|
+
/** The edge the panel slides in from. Default `right` (or the `Sheet` root's `side`). */
|
|
3654
|
+
side?: SheetSide | null;
|
|
3655
|
+
/**
|
|
3656
|
+
* Width step for left/right sheets. Omit for the 1.x geometry
|
|
3657
|
+
* (`w-3/4 max-w-sm`). See {@link SheetSize}.
|
|
3658
|
+
*/
|
|
3659
|
+
size?: SheetSize;
|
|
2367
3660
|
/** If false, the built-in close button is hidden. Default: true. */
|
|
2368
3661
|
showCloseButton?: boolean;
|
|
2369
3662
|
/**
|
|
2370
|
-
*
|
|
2371
|
-
*
|
|
3663
|
+
* The accessible name of the built-in close button. Takes precedence over
|
|
3664
|
+
* `messages.close`. Default `"Close"`.
|
|
3665
|
+
*/
|
|
3666
|
+
closeLabel?: string;
|
|
3667
|
+
/** Overrides of the copy the sheet renders (English defaults until W5-20). */
|
|
3668
|
+
messages?: Partial<SheetMessages>;
|
|
3669
|
+
/**
|
|
3670
|
+
* Width preset for left/right sheets — the same steps as `size`, plus
|
|
3671
|
+
* `default`. When both are given `size` wins.
|
|
3672
|
+
*
|
|
3673
|
+
* @deprecated Use `size` (C-SHEET-WIDTH, codemod CM-11). Removed in 3.0.
|
|
2372
3674
|
*/
|
|
2373
3675
|
width?: SheetWidth;
|
|
2374
3676
|
/**
|
|
2375
|
-
* Custom CSS width for left/right sheets, e.g. `"520px"
|
|
2376
|
-
*
|
|
2377
|
-
*
|
|
3677
|
+
* Custom CSS width for left/right sheets, e.g. `"520px"`, rendered as an
|
|
3678
|
+
* inline `width` with `max-width: 95vw`.
|
|
3679
|
+
*
|
|
3680
|
+
* @deprecated Set the `--ds-sheet-width` custom property instead
|
|
3681
|
+
* (C-SHEET-WIDTH, codemod CM-11). Removed in 3.0.
|
|
2378
3682
|
*/
|
|
2379
3683
|
customWidth?: string;
|
|
2380
3684
|
}
|
|
2381
3685
|
declare const SheetContent: React$1.ForwardRefExoticComponent<SheetContentProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
2382
3686
|
declare const SheetHeader: {
|
|
2383
|
-
(
|
|
3687
|
+
(props: React$1.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
|
|
2384
3688
|
displayName: string;
|
|
2385
3689
|
};
|
|
3690
|
+
/**
|
|
3691
|
+
* Props of `SheetBody` (W5-07).
|
|
3692
|
+
*
|
|
3693
|
+
* @experimental
|
|
3694
|
+
*/
|
|
3695
|
+
interface SheetBodyProps extends React$1.HTMLAttributes<HTMLDivElement> {
|
|
3696
|
+
/**
|
|
3697
|
+
* Horizontal padding, matching the header's and footer's `p-6` at `md`
|
|
3698
|
+
* (the default). The panel's own `gap-4` spaces the parts vertically.
|
|
3699
|
+
*/
|
|
3700
|
+
padding?: "none" | "sm" | "md" | "lg";
|
|
3701
|
+
}
|
|
3702
|
+
/**
|
|
3703
|
+
* The scroll region of a sheet between `SheetHeader` and `SheetFooter`
|
|
3704
|
+
* (W5-07): takes the remaining height of the panel and scrolls on its own,
|
|
3705
|
+
* so the header and the footer stay in place.
|
|
3706
|
+
*
|
|
3707
|
+
* @experimental
|
|
3708
|
+
*/
|
|
3709
|
+
declare const SheetBody: React$1.ForwardRefExoticComponent<SheetBodyProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
2386
3710
|
declare const SheetFooter: {
|
|
2387
|
-
(
|
|
3711
|
+
(props: React$1.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
|
|
2388
3712
|
displayName: string;
|
|
2389
3713
|
};
|
|
2390
3714
|
declare const SheetTitle: React$1.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogTitleProps & React$1.RefAttributes<HTMLHeadingElement>, "ref"> & React$1.RefAttributes<HTMLHeadingElement>>;
|
|
@@ -2443,19 +3767,82 @@ interface SkeletonCircleProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
|
2443
3767
|
}
|
|
2444
3768
|
declare const SkeletonCircle: React$1.ForwardRefExoticComponent<SkeletonCircleProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
2445
3769
|
|
|
3770
|
+
/**
|
|
3771
|
+
* Slider — a Radix slider with the design system's track and thumb (W4-16,
|
|
3772
|
+
* plan §16.1).
|
|
3773
|
+
*
|
|
3774
|
+
* **Form participation** is Radix's own (ADR-006 §1): the thumb is paired
|
|
3775
|
+
* with a hidden native input carrying `name` (`name[]` for a range), the
|
|
3776
|
+
* current value, `disabled` and `form`, so `FormData` holds the number as a
|
|
3777
|
+
* string. Radix Slider does not follow a form `reset`; the wrapper does
|
|
3778
|
+
* (`useFormReset`), restoring `defaultValue`.
|
|
3779
|
+
*
|
|
3780
|
+
* **Field binding** through `useFieldControl`: inside a `Field` the thumb
|
|
3781
|
+
* (the focusable `role="slider"`) references the `Label` through
|
|
3782
|
+
* `aria-labelledby` and the description / error through `aria-describedby`;
|
|
3783
|
+
* `name`, `disabled` and `invalid` come from the field. Explicit props win.
|
|
3784
|
+
* Outside a field the thumb is named by `aria-label`, the `label` sugar, or
|
|
3785
|
+
* "Slider value".
|
|
3786
|
+
*
|
|
3787
|
+
* **Sizes** (`size`, own geometry per plan §2.1): `md` (default) is today's
|
|
3788
|
+
* 6px track and 16px thumb; `sm` and `lg` read the control scale's glyph
|
|
3789
|
+
* tokens for the thumb (`--control-icon-sm` 14px, `--control-icon-xl` 20px)
|
|
3790
|
+
* with a 4px / 8px track.
|
|
3791
|
+
*/
|
|
3792
|
+
/** The slider sizes: the component's own geometry, `md` is today's. */
|
|
3793
|
+
type SliderSize = Extract<ControlSize, "sm" | "md" | "lg">;
|
|
2446
3794
|
interface SliderProps extends React$1.ComponentPropsWithoutRef<typeof SliderPrimitive.Root> {
|
|
2447
|
-
/** Optional inline label rendered above the track */
|
|
3795
|
+
/** Optional inline label rendered above the track. Names the thumb. */
|
|
2448
3796
|
label?: string;
|
|
2449
3797
|
/** When true, renders the current value to the right of the label */
|
|
2450
3798
|
showValue?: boolean;
|
|
3799
|
+
/** Track and thumb geometry. Default `md` (today's 6px track, 16px thumb). */
|
|
3800
|
+
size?: SliderSize;
|
|
3801
|
+
/**
|
|
3802
|
+
* The slider is in error: `aria-invalid` on the thumb and `data-invalid`
|
|
3803
|
+
* on the root. Implied by the surrounding `Field`'s `invalid`.
|
|
3804
|
+
*/
|
|
3805
|
+
invalid?: boolean;
|
|
2451
3806
|
}
|
|
2452
3807
|
declare const Slider: React$1.ForwardRefExoticComponent<SliderProps & React$1.RefAttributes<HTMLSpanElement>>;
|
|
2453
3808
|
|
|
2454
|
-
|
|
2455
|
-
|
|
2456
|
-
|
|
2457
|
-
|
|
2458
|
-
|
|
3809
|
+
/**
|
|
3810
|
+
* Spinner — indeterminate activity indicator.
|
|
3811
|
+
*
|
|
3812
|
+
* intent — omitted (default) inherits `currentColor`, so a Spinner inside a
|
|
3813
|
+
* Button takes the button's ink; `neutral` | `brand` | `info` |
|
|
3814
|
+
* `success` | `warning` | `danger` pick a colour (ADR-007).
|
|
3815
|
+
* `tone` is the deprecated spelling: `muted` → `neutral`,
|
|
3816
|
+
* `accent` → `info`, `destructive` → `danger`, `current` → omit.
|
|
3817
|
+
* size — xs (12px) | sm (16px) | md (20px, default) | lg (24px)
|
|
3818
|
+
*/
|
|
3819
|
+
/** Every intent of the shared vocabulary is a Spinner colour. */
|
|
3820
|
+
type SpinnerIntent = Intent;
|
|
3821
|
+
/**
|
|
3822
|
+
* The pre-W3-21 colour words (compat registry C-TONE).
|
|
3823
|
+
*
|
|
3824
|
+
* @deprecated Use `intent` — `muted` → `neutral`, `accent` → `info`,
|
|
3825
|
+
* `destructive` → `danger`; `current` is the default and is simply omitted.
|
|
3826
|
+
* Removed in 3.0; CM-06 rewrites call sites.
|
|
3827
|
+
*/
|
|
3828
|
+
type SpinnerTone = "current" | "muted" | "accent" | "success" | "warning" | "destructive";
|
|
3829
|
+
type SpinnerSize = "xs" | "sm" | "md" | "lg";
|
|
3830
|
+
/**
|
|
3831
|
+
* Legacy `tone` → `intent` (ADR-007 §4). `current` maps to no intent: the
|
|
3832
|
+
* spinner inherits `currentColor`, which is also what an omitted `intent`
|
|
3833
|
+
* renders. Classes are identical on both sides.
|
|
3834
|
+
*/
|
|
3835
|
+
declare const SPINNER_TONE_TO_INTENT: Readonly<Record<SpinnerTone, SpinnerIntent | undefined>>;
|
|
3836
|
+
interface SpinnerVariantProps {
|
|
3837
|
+
/** Semantic colour (ADR-007). Omitted, the spinner inherits `currentColor`. Wins over `tone`. */
|
|
3838
|
+
intent?: SpinnerIntent | null;
|
|
3839
|
+
/** @deprecated Use `intent`. `muted` → `neutral`, `accent` → `info`, `destructive` → `danger`. */
|
|
3840
|
+
tone?: SpinnerTone | null;
|
|
3841
|
+
size?: SpinnerSize | null;
|
|
3842
|
+
}
|
|
3843
|
+
/** The Spinner class string. Accepts `intent` or the deprecated `tone`. */
|
|
3844
|
+
declare function spinnerVariants({ intent, tone, size }?: SpinnerVariantProps): string;
|
|
3845
|
+
interface SpinnerProps extends React.HTMLAttributes<HTMLSpanElement>, SpinnerVariantProps {
|
|
2459
3846
|
/**
|
|
2460
3847
|
* Accessible status text. Omit when adjacent visible copy already names the
|
|
2461
3848
|
* loading state, such as inside a button labelled "Saving".
|
|
@@ -2623,21 +4010,48 @@ declare const Stat: React$1.ForwardRefExoticComponent<StatProps & React$1.RefAtt
|
|
|
2623
4010
|
* top-bar bells, list rows, unread markers. (Avatar already renders its own
|
|
2624
4011
|
* corner presence dot — use that for avatar-attached dots.)
|
|
2625
4012
|
*
|
|
2626
|
-
*
|
|
4013
|
+
* intent — danger (default) | warning | info | success | brand | neutral
|
|
4014
|
+
* (ADR-007 vocabulary; `tone` is the deprecated spelling)
|
|
2627
4015
|
* size — sm ~7px (default) | md ~9px
|
|
2628
4016
|
* ring — adds a 2px solid surface ring so the dot reads when overlaid on
|
|
2629
4017
|
* icons / avatars (box-shadow, so it never shifts layout)
|
|
2630
4018
|
* pulse — subtle expanding ping halo; hidden under prefers-reduced-motion
|
|
2631
4019
|
*
|
|
2632
|
-
* The dot fills with `currentColor`, so the ping clone inherits the same
|
|
2633
|
-
* automatically. `aria-hidden` by default — pass `aria-label` to
|
|
2634
|
-
|
|
2635
|
-
|
|
2636
|
-
|
|
2637
|
-
|
|
2638
|
-
|
|
2639
|
-
|
|
2640
|
-
|
|
4020
|
+
* The dot fills with `currentColor`, so the ping clone inherits the same
|
|
4021
|
+
* colour automatically. `aria-hidden` by default — pass `aria-label` to
|
|
4022
|
+
* expose it.
|
|
4023
|
+
*/
|
|
4024
|
+
/** Every intent of the shared vocabulary is a StatusDot colour. */
|
|
4025
|
+
type StatusDotIntent = Intent;
|
|
4026
|
+
/** Legacy `tone` → `intent` (ADR-007 §4). Classes are identical on both sides. */
|
|
4027
|
+
declare const STATUS_DOT_TONE_TO_INTENT: {
|
|
4028
|
+
readonly danger: "danger";
|
|
4029
|
+
readonly warning: "warning";
|
|
4030
|
+
readonly info: "info";
|
|
4031
|
+
readonly success: "success";
|
|
4032
|
+
readonly pro: "brand";
|
|
4033
|
+
readonly neutral: "neutral";
|
|
4034
|
+
};
|
|
4035
|
+
/**
|
|
4036
|
+
* The pre-W3-21 colour words (compat registry C-TONE). `pro` is the brand
|
|
4037
|
+
* colour spelled as a product name.
|
|
4038
|
+
*
|
|
4039
|
+
* @deprecated Use `intent` — `tone="pro"` is `intent="brand"`, every other
|
|
4040
|
+
* value keeps its name. Removed in 3.0; CM-06 rewrites call sites.
|
|
4041
|
+
*/
|
|
4042
|
+
type StatusDotTone = keyof typeof STATUS_DOT_TONE_TO_INTENT;
|
|
4043
|
+
type StatusDotSize = "sm" | "md";
|
|
4044
|
+
interface StatusDotVariantProps {
|
|
4045
|
+
/** Semantic colour (ADR-007). Default `danger`. Wins over `tone`. */
|
|
4046
|
+
intent?: StatusDotIntent | null;
|
|
4047
|
+
/** @deprecated Use `intent`. `pro` → `brand`; other values keep their name. */
|
|
4048
|
+
tone?: StatusDotTone | null;
|
|
4049
|
+
size?: StatusDotSize | null;
|
|
4050
|
+
ring?: boolean | null;
|
|
4051
|
+
}
|
|
4052
|
+
/** The StatusDot class string. Accepts `intent` or the deprecated `tone`. */
|
|
4053
|
+
declare function statusDotVariants({ intent, tone, size, ring }?: StatusDotVariantProps): string;
|
|
4054
|
+
interface StatusDotProps extends React.HTMLAttributes<HTMLSpanElement>, StatusDotVariantProps {
|
|
2641
4055
|
/** Subtle expanding ping halo. Respects `prefers-reduced-motion`. */
|
|
2642
4056
|
pulse?: boolean;
|
|
2643
4057
|
}
|
|
@@ -2737,6 +4151,13 @@ declare const StickyActionBar: React$1.ForwardRefExoticComponent<StickyActionBar
|
|
|
2737
4151
|
interface SubmitButtonProps extends Omit<ButtonProps, "type" | "loading"> {
|
|
2738
4152
|
pendingText?: string;
|
|
2739
4153
|
children: React.ReactNode;
|
|
4154
|
+
/**
|
|
4155
|
+
* A submit button fills its form row by default (what it has always
|
|
4156
|
+
* rendered); pass `fullWidth={false}` for an inline one.
|
|
4157
|
+
*
|
|
4158
|
+
* @experimental
|
|
4159
|
+
*/
|
|
4160
|
+
fullWidth?: boolean;
|
|
2740
4161
|
}
|
|
2741
4162
|
/**
|
|
2742
4163
|
* SubmitButton — react-dom `useFormStatus`-aware Button.
|
|
@@ -2748,7 +4169,7 @@ declare const SubmitButton: React$1.ForwardRefExoticComponent<SubmitButtonProps
|
|
|
2748
4169
|
* SuiteProgress — a discrete, segmented progress meter with a percent readout.
|
|
2749
4170
|
*
|
|
2750
4171
|
* Renders `total` equal-width segments in a flex row. Segments before `value`
|
|
2751
|
-
* are filled in the
|
|
4172
|
+
* are filled in the meter's colour; the rest sit on the `surface-3` track. An
|
|
2752
4173
|
* optional numeric percent renders to the right (bold + tabular, with a
|
|
2753
4174
|
* smaller "%").
|
|
2754
4175
|
*
|
|
@@ -2757,11 +4178,40 @@ declare const SubmitButton: React$1.ForwardRefExoticComponent<SubmitButtonProps
|
|
|
2757
4178
|
* pipeline and engagement *completion* (e.g. "3 of 5 — 60%"). Pick the step
|
|
2758
4179
|
* meter when the count itself is the message; pick this when the percentage is.
|
|
2759
4180
|
*
|
|
4181
|
+
* `intent` colours the filled segments (ADR-007; default `brand`, which is
|
|
4182
|
+
* what `tone="pro"` rendered). The suite tones (`audit` | `books` | `tax`)
|
|
4183
|
+
* stay on the deprecated `tone` axis: product names are never intents.
|
|
4184
|
+
*
|
|
2760
4185
|
* Pure presentational — no client runtime required.
|
|
2761
4186
|
*/
|
|
2762
|
-
|
|
2763
|
-
|
|
2764
|
-
|
|
4187
|
+
/** Legacy `tone` → `intent` (ADR-007 §4): the one suite tone that is a brand colour. */
|
|
4188
|
+
declare const SUITE_PROGRESS_TONE_TO_INTENT: {
|
|
4189
|
+
readonly pro: "brand";
|
|
4190
|
+
};
|
|
4191
|
+
/** Suite tints — product hues, never intents (ADR-007 §2); reachable through `tone` only. */
|
|
4192
|
+
declare const SUITE_FILL: {
|
|
4193
|
+
audit: string;
|
|
4194
|
+
books: string;
|
|
4195
|
+
tax: string;
|
|
4196
|
+
};
|
|
4197
|
+
/** Suite tints: product hues that stay on the deprecated `tone` axis. */
|
|
4198
|
+
type SuiteProgressSuiteTone = keyof typeof SUITE_FILL;
|
|
4199
|
+
/**
|
|
4200
|
+
* The pre-W3-21 colour words (compat registry C-TONE).
|
|
4201
|
+
*
|
|
4202
|
+
* @deprecated Use `intent` — `tone="pro"` is `intent="brand"`. The suite
|
|
4203
|
+
* tones (`audit`, `books`, `tax`) have no intent and stay here. Removed in
|
|
4204
|
+
* 3.0; CM-06 rewrites the mappable call sites.
|
|
4205
|
+
*/
|
|
4206
|
+
type SuiteProgressTone = keyof typeof SUITE_PROGRESS_TONE_TO_INTENT | SuiteProgressSuiteTone;
|
|
4207
|
+
interface SuiteProgressFillVariantProps {
|
|
4208
|
+
/** Semantic fill colour (ADR-007). Default `brand`. Wins over `tone`. */
|
|
4209
|
+
intent?: ProgressIntent | null;
|
|
4210
|
+
/** @deprecated Use `intent`. `pro` → `brand`; `audit` / `books` / `tax` stay here. */
|
|
4211
|
+
tone?: SuiteProgressTone | null;
|
|
4212
|
+
}
|
|
4213
|
+
/** The filled-segment class string. Accepts `intent` or the deprecated `tone`. */
|
|
4214
|
+
declare function suiteProgressFillVariants({ intent, tone }?: SuiteProgressFillVariantProps): string;
|
|
2765
4215
|
declare const SIZE_STYLES: {
|
|
2766
4216
|
readonly sm: {
|
|
2767
4217
|
readonly row: "ds:gap-2";
|
|
@@ -2777,8 +4227,7 @@ declare const SIZE_STYLES: {
|
|
|
2777
4227
|
};
|
|
2778
4228
|
};
|
|
2779
4229
|
type SuiteProgressSize = keyof typeof SIZE_STYLES;
|
|
2780
|
-
|
|
2781
|
-
interface SuiteProgressProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "role"> {
|
|
4230
|
+
interface SuiteProgressProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "role">, SuiteProgressFillVariantProps {
|
|
2782
4231
|
/** Number of completed segments. */
|
|
2783
4232
|
value: number;
|
|
2784
4233
|
/** Total segment count. */
|
|
@@ -2787,8 +4236,6 @@ interface SuiteProgressProps extends Omit<React.HTMLAttributes<HTMLDivElement>,
|
|
|
2787
4236
|
showPercent?: boolean;
|
|
2788
4237
|
/** Override the displayed percent (0–100). Falls back to value/total. */
|
|
2789
4238
|
percent?: number;
|
|
2790
|
-
/** Suite tone for filled segments. Defaults to "pro". */
|
|
2791
|
-
tone?: SuiteProgressTone;
|
|
2792
4239
|
/** Bar height + text scale. Defaults to "md". */
|
|
2793
4240
|
size?: SuiteProgressSize;
|
|
2794
4241
|
/** Optional leading label, rendered before the segments. */
|
|
@@ -2801,8 +4248,18 @@ declare const SuiteProgress: React$1.ForwardRefExoticComponent<SuiteProgressProp
|
|
|
2801
4248
|
declare const switchVariants: (props?: ({
|
|
2802
4249
|
size?: "sm" | "md" | null | undefined;
|
|
2803
4250
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
4251
|
+
/** The switch sizes: the component's own geometry (`sm` 20×36, `md` 24×44). */
|
|
4252
|
+
type SwitchSize = NonNullable<VariantProps<typeof switchVariants>["size"]>;
|
|
2804
4253
|
interface SwitchProps extends Omit<React$1.ComponentPropsWithoutRef<typeof SwitchPrimitive.Root>, "size">, VariantProps<typeof switchVariants> {
|
|
4254
|
+
/** Optional inline label rendered to the right of the track. Names the button through `htmlFor`. */
|
|
2805
4255
|
label?: string;
|
|
4256
|
+
/** The value submitted with `name` while on. Default `"on"`, like a native checkbox. */
|
|
4257
|
+
value?: string;
|
|
4258
|
+
/**
|
|
4259
|
+
* The switch is in error: `aria-invalid` and `data-invalid`. Implied by the
|
|
4260
|
+
* surrounding `Field`'s `invalid` or a mounted `FieldError`.
|
|
4261
|
+
*/
|
|
4262
|
+
invalid?: boolean;
|
|
2806
4263
|
}
|
|
2807
4264
|
declare const Switch: React$1.ForwardRefExoticComponent<SwitchProps & React$1.RefAttributes<HTMLButtonElement>>;
|
|
2808
4265
|
|
|
@@ -2854,17 +4311,95 @@ declare namespace TeamMemberSelect {
|
|
|
2854
4311
|
var displayName: string;
|
|
2855
4312
|
}
|
|
2856
4313
|
|
|
2857
|
-
|
|
2858
|
-
|
|
2859
|
-
|
|
2860
|
-
|
|
2861
|
-
|
|
4314
|
+
/**
|
|
4315
|
+
* The emphases a Textarea offers: the shared chrome's `default` and `ghost`
|
|
4316
|
+
* (spelled out, as on Input, so the public declaration names no unexported
|
|
4317
|
+
* symbol; the `satisfies` keeps it in step with the recipe).
|
|
4318
|
+
*
|
|
4319
|
+
* @experimental
|
|
4320
|
+
*/
|
|
4321
|
+
type TextareaVariant = "default" | "ghost";
|
|
4322
|
+
/**
|
|
4323
|
+
* The size names a Textarea knows (W4-06): the three steps that have a
|
|
4324
|
+
* `--textarea-min-height-<size>` token (64 / 80 / 96px). A textarea grows
|
|
4325
|
+
* with its content, so `size` is a *minimum* height, not the outer height
|
|
4326
|
+
* the shared scale promises (`baselines/size-geometry.json` keeps Textarea
|
|
4327
|
+
* out of A1 on purpose). Padding and text stay on today's steps until D5.
|
|
4328
|
+
*
|
|
4329
|
+
* @experimental
|
|
4330
|
+
*/
|
|
4331
|
+
type TextareaSize = Extract<ControlSize, "sm" | "md" | "lg">;
|
|
4332
|
+
/**
|
|
4333
|
+
* What {@link textareaVariants} takes: the emphasis, the size (either name —
|
|
4334
|
+
* `size` wins when both are given) and cva's class props.
|
|
4335
|
+
*
|
|
4336
|
+
* @experimental
|
|
4337
|
+
*/
|
|
4338
|
+
interface TextareaVariantsOptions {
|
|
4339
|
+
variant?: TextareaVariant | null;
|
|
4340
|
+
size?: TextareaSize | null;
|
|
4341
|
+
/**
|
|
4342
|
+
* The legacy size prop (C-INPUT-SIZE): today's rows, byte for byte.
|
|
4343
|
+
*
|
|
4344
|
+
* @deprecated Use `size`. Codemod CM-07 renames it.
|
|
4345
|
+
*/
|
|
4346
|
+
inputSize?: TextareaSize | null;
|
|
4347
|
+
class?: string | null;
|
|
4348
|
+
className?: string | null;
|
|
4349
|
+
}
|
|
4350
|
+
/** The variant props of `textareaVariants` (cva's `VariantProps` shape, kept for the API report). */
|
|
4351
|
+
type TextareaVariants = Omit<TextareaVariantsOptions, "class" | "className">;
|
|
4352
|
+
/**
|
|
4353
|
+
* The Textarea class recipe (W4-06): the shared control chrome
|
|
4354
|
+
* (`behavior/control-chrome.ts`) with the emphasis and no height row, then
|
|
4355
|
+
* the `min-height` row of the size.
|
|
4356
|
+
*
|
|
4357
|
+
* Against the cva it replaces the set of classes differs in one place, on
|
|
4358
|
+
* purpose (W4-03 mapping, PR #199): the motion string is the shared
|
|
4359
|
+
* `microInteractions.control` — same transitioned properties, the feedback
|
|
4360
|
+
* duration token (the same 150ms `--duration-fast` was) and the `enter`
|
|
4361
|
+
* easing where the copy declared none. `tests/browser/textarea-parity.test.tsx`
|
|
4362
|
+
* holds every other computed property equal under each host fixture.
|
|
4363
|
+
* Server-safe.
|
|
4364
|
+
*
|
|
4365
|
+
* @experimental
|
|
4366
|
+
*/
|
|
4367
|
+
declare function textareaVariants({ variant, size, inputSize, class: classProp, className, }?: TextareaVariantsOptions): string;
|
|
4368
|
+
/**
|
|
4369
|
+
* Props of `Textarea` (W4-06).
|
|
4370
|
+
*
|
|
4371
|
+
* @experimental The name is exported since W4-06; the props it lists have been
|
|
4372
|
+
* stable since 1.x.
|
|
4373
|
+
*/
|
|
2862
4374
|
interface TextareaProps extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, "size">, TextareaVariants {
|
|
4375
|
+
/** Sugar for the field label, bound through the field wiring (`htmlFor`/`id`). */
|
|
2863
4376
|
label?: string;
|
|
4377
|
+
/** Sugar for the hint text under the control, referenced before `error` in `aria-describedby`. */
|
|
4378
|
+
description?: string;
|
|
4379
|
+
/** Sugar for the error message: linked through `aria-describedby`, marks the control invalid. */
|
|
2864
4380
|
error?: string;
|
|
4381
|
+
/** The value is invalid without a message to show. Implied by `error`. */
|
|
4382
|
+
invalid?: boolean;
|
|
4383
|
+
/** Show `<length>/<maxLength>` under the control. Needs `maxLength`. */
|
|
2865
4384
|
showCount?: boolean;
|
|
4385
|
+
/** Grow with the content instead of scrolling. */
|
|
2866
4386
|
autoResize?: boolean;
|
|
4387
|
+
/** Called with the new string value on every change, next to `onChange`. */
|
|
4388
|
+
onValueChange?: (value: string) => void;
|
|
4389
|
+
/**
|
|
4390
|
+
* Classes per anatomy part (the `textarea-*` slots). The `<textarea>`
|
|
4391
|
+
* is the root part and takes `className` (C-INPUT-CLASSNAME), so it has no
|
|
4392
|
+
* entry here.
|
|
4393
|
+
*/
|
|
4394
|
+
classNames?: Partial<Record<Exclude<TextareaSlot, "root">, string>>;
|
|
4395
|
+
/** Classes for the outer wrapper (transitional, C-INPUT-CLASSNAME — see `Input`). */
|
|
4396
|
+
rootClassName?: string;
|
|
2867
4397
|
}
|
|
4398
|
+
/**
|
|
4399
|
+
* A multi-line text field. The control is a native `<textarea>`; inside a
|
|
4400
|
+
* `Field` it binds itself through `useFieldControl`, and the
|
|
4401
|
+
* `label` / `description` / `error` sugar renders the same wiring around it.
|
|
4402
|
+
*/
|
|
2868
4403
|
declare const Textarea: React$1.ForwardRefExoticComponent<TextareaProps & React$1.RefAttributes<HTMLTextAreaElement>>;
|
|
2869
4404
|
|
|
2870
4405
|
type ToastVariant = "default" | "success" | "destructive" | "warning" | "info" | "loading";
|
|
@@ -2916,8 +4451,34 @@ declare function ToastProvider({ children }: ToastProviderProps): react_jsx_runt
|
|
|
2916
4451
|
declare const itemVariants: (props?: ({
|
|
2917
4452
|
variant?: "outline" | "default" | null | undefined;
|
|
2918
4453
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
2919
|
-
|
|
2920
|
-
|
|
4454
|
+
/** The toggle-group sizes: the shared control scale (A1). */
|
|
4455
|
+
type ToggleGroupSize = ControlSize;
|
|
4456
|
+
/** The item's look: bare (`default`) or with a border (`outline`). */
|
|
4457
|
+
type ToggleGroupVariant = NonNullable<VariantProps<typeof itemVariants>["variant"]>;
|
|
4458
|
+
type RadixRootProps = React$1.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root>;
|
|
4459
|
+
/** The props every group shares, whatever its `type`. */
|
|
4460
|
+
interface ToggleGroupFormProps extends VariantProps<typeof itemVariants> {
|
|
4461
|
+
/** Outer height from the shared control scale (A1). Omitted: today's geometry. */
|
|
4462
|
+
size?: ToggleGroupSize;
|
|
4463
|
+
/** The form field name. Without it the group does not take part in a form. */
|
|
4464
|
+
name?: string;
|
|
4465
|
+
/** `id` of the form to submit with when the group is rendered outside it. */
|
|
4466
|
+
form?: string;
|
|
4467
|
+
/** Block native submission while nothing is pressed. */
|
|
4468
|
+
required?: boolean;
|
|
4469
|
+
/**
|
|
4470
|
+
* The group is in error: `aria-invalid` and `data-invalid`. Implied by the
|
|
4471
|
+
* surrounding `Field`'s `invalid` or a mounted `FieldError`.
|
|
4472
|
+
*/
|
|
4473
|
+
invalid?: boolean;
|
|
4474
|
+
/**
|
|
4475
|
+
* Single groups only: submit `name=""` while nothing is pressed (`true`,
|
|
4476
|
+
* the default and what a Select does) or omit the entry (`false`).
|
|
4477
|
+
*/
|
|
4478
|
+
submitEmpty?: boolean;
|
|
4479
|
+
}
|
|
4480
|
+
type ToggleGroupProps = RadixRootProps & ToggleGroupFormProps;
|
|
4481
|
+
declare const ToggleGroup: React$1.ForwardRefExoticComponent<ToggleGroupProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
2921
4482
|
interface ToggleGroupItemProps extends React$1.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item>, VariantProps<typeof itemVariants> {
|
|
2922
4483
|
}
|
|
2923
4484
|
declare const ToggleGroupItem: React$1.ForwardRefExoticComponent<ToggleGroupItemProps & React$1.RefAttributes<HTMLButtonElement>>;
|
|
@@ -3161,319 +4722,828 @@ interface TextProps extends Omit<React.HTMLAttributes<HTMLElement>, "color"> {
|
|
|
3161
4722
|
declare const Text: React$1.ForwardRefExoticComponent<TextProps & React$1.RefAttributes<HTMLElement>>;
|
|
3162
4723
|
|
|
3163
4724
|
/**
|
|
3164
|
-
* The
|
|
3165
|
-
*
|
|
4725
|
+
* The shared vocabulary of the layout primitives (W2-15, target architecture
|
|
4726
|
+
* §16, §22, §23): the gap scale, the alignment words, and the one responsive
|
|
4727
|
+
* shape a layout prop may take.
|
|
3166
4728
|
*
|
|
3167
|
-
*
|
|
4729
|
+
* Every class this module hands out is a literal in the tables below. Tailwind
|
|
4730
|
+
* compiles a utility only when it can read it from source, so a class built
|
|
4731
|
+
* from string pieces at render time would exist in the DOM and nowhere in
|
|
4732
|
+
* `dist/styles.css`. The tables are the whole set; nothing else is generated.
|
|
4733
|
+
*
|
|
4734
|
+
* The gap utilities read the `stack.gap.*` tokens through the parenthesised
|
|
4735
|
+
* custom-property form (`gap-(--stack-gap-md)`), which is what binds a step to
|
|
4736
|
+
* the token rather than to Tailwind's numeric scale: a density scope or a
|
|
4737
|
+
* consumer preset that re-points `--stack-gap-md` moves every `Stack` with it.
|
|
3168
4738
|
*/
|
|
3169
|
-
type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
|
|
3170
4739
|
/**
|
|
3171
|
-
* The
|
|
3172
|
-
*
|
|
3173
|
-
*
|
|
4740
|
+
* The breakpoints a responsive layout prop may name. They are Tailwind's `sm`,
|
|
4741
|
+
* `md` and `lg` (40 / 48 / 64rem), the same values `breakpoints` in the
|
|
4742
|
+
* `/tokens` entry publishes (W2-10). Only `Stack direction` and the `gap` of
|
|
4743
|
+
* `Stack`/`Inline` are responsive (target architecture §22); nothing else on a
|
|
4744
|
+
* layout primitive takes an object.
|
|
3174
4745
|
*
|
|
3175
|
-
* @experimental
|
|
4746
|
+
* @experimental
|
|
3176
4747
|
*/
|
|
3177
|
-
type
|
|
4748
|
+
type LayoutBreakpoint = "sm" | "md" | "lg";
|
|
3178
4749
|
/**
|
|
3179
|
-
*
|
|
3180
|
-
*
|
|
3181
|
-
*
|
|
4750
|
+
* A layout prop value that may change at a breakpoint: either one value, or an
|
|
4751
|
+
* object of values by breakpoint. `base` is what applies below `sm`; when it
|
|
4752
|
+
* is omitted the prop's own default applies there, so
|
|
4753
|
+
* `direction={{ md: "row" }}` reads "a column, a row from `md` up".
|
|
3182
4754
|
*
|
|
3183
|
-
* @experimental
|
|
4755
|
+
* @experimental
|
|
3184
4756
|
*/
|
|
3185
|
-
|
|
3186
|
-
|
|
3187
|
-
|
|
4757
|
+
type Responsive<T> = T | Partial<Record<"base" | LayoutBreakpoint, T>>;
|
|
4758
|
+
/**
|
|
4759
|
+
* The five gaps the library actually writes (W2-02, `stack.gap.*`): 4 / 6 / 8 /
|
|
4760
|
+
* 12 / 16px, plus `none`. `md` (8px) is the single most-written gap in the
|
|
4761
|
+
* library and the default of both `Stack` and `Inline`.
|
|
4762
|
+
*
|
|
4763
|
+
* @experimental
|
|
4764
|
+
*/
|
|
4765
|
+
type LayoutGap = "none" | "xs" | "sm" | "md" | "lg" | "xl";
|
|
4766
|
+
/**
|
|
4767
|
+
* Cross-axis alignment of the children (`align-items`).
|
|
4768
|
+
*
|
|
4769
|
+
* @experimental
|
|
4770
|
+
*/
|
|
4771
|
+
type LayoutAlign = "start" | "center" | "end" | "stretch" | "baseline";
|
|
4772
|
+
/**
|
|
4773
|
+
* Main-axis distribution of the children (`justify-content`).
|
|
4774
|
+
*
|
|
4775
|
+
* @experimental
|
|
4776
|
+
*/
|
|
4777
|
+
type LayoutJustify = "start" | "center" | "end" | "between" | "around" | "evenly";
|
|
4778
|
+
|
|
4779
|
+
/**
|
|
4780
|
+
* The axis a `Stack` lays its children along.
|
|
4781
|
+
*
|
|
4782
|
+
* @experimental
|
|
4783
|
+
*/
|
|
4784
|
+
type StackDirection = "column" | "row";
|
|
4785
|
+
|
|
4786
|
+
/**
|
|
4787
|
+
* Props of `Stack`.
|
|
4788
|
+
*
|
|
4789
|
+
* A layout primitive takes tokenised props only for the things it exists for
|
|
4790
|
+
* — the gap between its children and how they line up — and never arbitrary
|
|
4791
|
+
* style props (target architecture §23). There is no `padding`, `margin`,
|
|
4792
|
+
* `p`/`m`/`px`/`mt`, `bg`, `color`, `width`, `height`, `sx` or `css` here, and
|
|
4793
|
+
* `gap` accepts a scale step, not a number or a length. Spacing *around* a
|
|
4794
|
+
* stack belongs to its parent; a box with padding is a `Surface`. `className`
|
|
4795
|
+
* and `style` land on the root element (§29.1).
|
|
4796
|
+
*
|
|
4797
|
+
* @experimental
|
|
4798
|
+
*/
|
|
4799
|
+
interface StackProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "color"> {
|
|
3188
4800
|
/**
|
|
3189
|
-
* The
|
|
3190
|
-
*
|
|
3191
|
-
*
|
|
3192
|
-
* instead of becoming an `<h2>`.
|
|
4801
|
+
* The axis the children follow. Responsive: `{ base?, sm?, md?, lg? }`, so
|
|
4802
|
+
* a form row can be a column on a phone and a row from `sm` up.
|
|
4803
|
+
* @default "column"
|
|
3193
4804
|
*/
|
|
3194
|
-
|
|
4805
|
+
direction?: Responsive<StackDirection>;
|
|
4806
|
+
/**
|
|
4807
|
+
* The gap between children, as a `stack.gap` step (4 / 6 / 8 / 12 / 16px)
|
|
4808
|
+
* or `none`. Responsive like `direction`.
|
|
4809
|
+
* @default "md"
|
|
4810
|
+
*/
|
|
4811
|
+
gap?: Responsive<LayoutGap>;
|
|
4812
|
+
/** Cross-axis alignment (`align-items`). Not responsive. */
|
|
4813
|
+
align?: LayoutAlign;
|
|
4814
|
+
/** Main-axis distribution (`justify-content`). Not responsive. */
|
|
4815
|
+
justify?: LayoutJustify;
|
|
4816
|
+
/** Whether children may wrap onto further lines. Not responsive. */
|
|
4817
|
+
wrap?: boolean;
|
|
3195
4818
|
}
|
|
3196
4819
|
/**
|
|
3197
|
-
*
|
|
3198
|
-
*
|
|
4820
|
+
* Stack — the one-dimensional layout primitive (W2-15, target architecture
|
|
4821
|
+
* §23). A flex container that owns the spacing *between* its children through
|
|
4822
|
+
* the `stack.gap` tokens, so siblings never carry outer margins of their own.
|
|
3199
4823
|
*
|
|
3200
|
-
*
|
|
3201
|
-
*
|
|
3202
|
-
*
|
|
3203
|
-
*
|
|
3204
|
-
* shrinking. Every size is a role token; there is no pixel size.
|
|
4824
|
+
* Vertical by default; `direction` may switch to a row, at a breakpoint if
|
|
4825
|
+
* needed. Only `direction` and `gap` are responsive — the deliberately small
|
|
4826
|
+
* exception the architecture makes for layout primitives (§22). For a
|
|
4827
|
+
* horizontal, wrapping row use `Inline`.
|
|
3205
4828
|
*
|
|
3206
|
-
*
|
|
3207
|
-
*
|
|
3208
|
-
*
|
|
4829
|
+
* Server-safe: no hooks, no client directive, renders a plain `div` and stamps
|
|
4830
|
+
* `data-slot="stack"`. `asChild` is deferred until the design system has its
|
|
4831
|
+
* own `Slot` in the a11y primitives (the Radix package is a behaviour import
|
|
4832
|
+
* the L1b layer may not make directly).
|
|
3209
4833
|
*
|
|
3210
|
-
*
|
|
4834
|
+
* @experimental Shipped in Wave 2 as a new export nobody is forced to use; the
|
|
4835
|
+
* prop shapes may still change before the wave's exit review.
|
|
4836
|
+
*/
|
|
4837
|
+
declare const Stack: React$1.ForwardRefExoticComponent<StackProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
4838
|
+
|
|
4839
|
+
/**
|
|
4840
|
+
* Props of `Inline`.
|
|
3211
4841
|
*
|
|
3212
|
-
*
|
|
3213
|
-
*
|
|
4842
|
+
* The same discipline as `StackProps`: tokenised props for gap and alignment
|
|
4843
|
+
* only, no arbitrary style props (`padding`, `margin`, `p`/`m`/`px`/`mt`,
|
|
4844
|
+
* `bg`, `color`, `width`, `height`, `sx`, `css`), and `gap` is a scale step.
|
|
4845
|
+
* `className` and `style` land on the root element (§29.1).
|
|
3214
4846
|
*
|
|
3215
|
-
* @
|
|
3216
|
-
|
|
3217
|
-
|
|
3218
|
-
|
|
4847
|
+
* @experimental
|
|
4848
|
+
*/
|
|
4849
|
+
interface InlineProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "color"> {
|
|
4850
|
+
/**
|
|
4851
|
+
* The gap between children, as a `stack.gap` step (4 / 6 / 8 / 12 / 16px)
|
|
4852
|
+
* or `none`. Responsive: `{ base?, sm?, md?, lg? }`.
|
|
4853
|
+
* @default "md"
|
|
4854
|
+
*/
|
|
4855
|
+
gap?: Responsive<LayoutGap>;
|
|
4856
|
+
/**
|
|
4857
|
+
* Cross-axis alignment (`align-items`). Not responsive.
|
|
4858
|
+
* @default "center"
|
|
4859
|
+
*/
|
|
4860
|
+
align?: LayoutAlign;
|
|
4861
|
+
/** Main-axis distribution (`justify-content`). Not responsive. */
|
|
4862
|
+
justify?: LayoutJustify;
|
|
4863
|
+
/**
|
|
4864
|
+
* Whether children may wrap onto further lines. Not responsive.
|
|
4865
|
+
* @default true
|
|
4866
|
+
*/
|
|
4867
|
+
wrap?: boolean;
|
|
4868
|
+
}
|
|
4869
|
+
/**
|
|
4870
|
+
* Inline — the horizontal, wrapping row (W2-15, target architecture §23): a
|
|
4871
|
+
* label beside a badge, a row of chips, the buttons of a toolbar. Children are
|
|
4872
|
+
* centred on the cross axis and wrap by default, which is what a row of mixed
|
|
4873
|
+
* heights and unknown count wants; `Stack direction="row"` is the row that
|
|
4874
|
+
* does not wrap and stretches.
|
|
4875
|
+
*
|
|
4876
|
+
* Only `gap` is responsive (§22). Server-safe: no hooks, no client directive,
|
|
4877
|
+
* renders a plain `div` and stamps `data-slot="inline"`. `asChild` is deferred
|
|
4878
|
+
* with `Stack`'s.
|
|
4879
|
+
*
|
|
4880
|
+
* @experimental Shipped in Wave 2 as a new export nobody is forced to use; the
|
|
4881
|
+
* prop shapes may still change before the wave's exit review.
|
|
4882
|
+
*/
|
|
4883
|
+
declare const Inline: React$1.ForwardRefExoticComponent<InlineProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
4884
|
+
|
|
4885
|
+
/**
|
|
4886
|
+
* How one status looks, in the shared vocabulary (ADR-007). These are the
|
|
4887
|
+
* presentation props of `StatusBadge`; a map entry is spread straight onto it.
|
|
4888
|
+
*
|
|
4889
|
+
* @experimental
|
|
4890
|
+
*/
|
|
4891
|
+
interface StatusPresentation {
|
|
4892
|
+
/** Semantic meaning → colour family. Required: a status without a meaning is a `Badge`. */
|
|
4893
|
+
intent: Intent;
|
|
4894
|
+
/** Emphasis. `StatusBadge` defaults to `soft`, the status-chip look. */
|
|
4895
|
+
variant?: Extract<Variant, "solid" | "soft" | "outline">;
|
|
4896
|
+
/** Leading dot, for a state where work is in flight or attention is due. */
|
|
4897
|
+
dot?: boolean;
|
|
4898
|
+
/** Spinner in place of the dot or icon, for a state that is still moving. */
|
|
4899
|
+
loading?: boolean;
|
|
4900
|
+
}
|
|
4901
|
+
/**
|
|
4902
|
+
* A product's status map: one entry per member of its status union, nothing
|
|
4903
|
+
* missing, nothing extra.
|
|
4904
|
+
*
|
|
4905
|
+
* @experimental
|
|
4906
|
+
*/
|
|
4907
|
+
type StatusMap<TStatus extends string, TEntry extends StatusPresentation = StatusPresentation> = Readonly<Record<TStatus, TEntry>>;
|
|
4908
|
+
/**
|
|
4909
|
+
* Rejects keys outside the status union: a plain generic constraint would let
|
|
4910
|
+
* an unknown status through. Part of `defineStatusMap`'s signature only.
|
|
4911
|
+
*
|
|
4912
|
+
* @experimental
|
|
4913
|
+
*/
|
|
4914
|
+
type OnlyStatuses<TMap, TStatus extends string> = {
|
|
4915
|
+
readonly [K in Exclude<keyof TMap, TStatus>]: never;
|
|
4916
|
+
};
|
|
4917
|
+
/**
|
|
4918
|
+
* Declares a status map that is checked for exhaustiveness against the
|
|
4919
|
+
* product's own status union and keeps the literal type of every entry, key
|
|
4920
|
+
* by key.
|
|
4921
|
+
*
|
|
4922
|
+
* Two call shapes:
|
|
4923
|
+
*
|
|
4924
|
+
* ```ts
|
|
4925
|
+
* // The status union is known, the entries are inferred (extra fields kept):
|
|
4926
|
+
* const MEETING = defineStatusMap<MeetingStatus>()({
|
|
4927
|
+
* pending: { intent: "neutral", loading: true, labelKey: "status.pending" },
|
|
4928
|
+
* notesReady: { intent: "success", labelKey: "status.notesReady" },
|
|
4929
|
+
* // ^ a missing or unknown status is a type error
|
|
4930
|
+
* });
|
|
4931
|
+
* MEETING.pending.loading; // true
|
|
4932
|
+
*
|
|
4933
|
+
* // Both are named, when the product already types its entries:
|
|
4934
|
+
* const IMPORTS = defineStatusMap<ImportStatus, ImportMeta>({ … });
|
|
3219
4935
|
* ```
|
|
3220
4936
|
*
|
|
3221
|
-
*
|
|
3222
|
-
*
|
|
4937
|
+
* Runtime: returns its argument. The value is the type check.
|
|
4938
|
+
*
|
|
4939
|
+
* @experimental
|
|
3223
4940
|
*/
|
|
3224
|
-
declare
|
|
4941
|
+
declare function defineStatusMap<TStatus extends string>(): <TMap extends StatusMap<TStatus>>(map: TMap & OnlyStatuses<TMap, TStatus>) => Readonly<TMap>;
|
|
4942
|
+
declare function defineStatusMap<TStatus extends string, TEntry extends StatusPresentation>(map: StatusMap<TStatus, TEntry>): StatusMap<TStatus, TEntry>;
|
|
4943
|
+
|
|
4944
|
+
interface StatusBadgeProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "children">, StatusPresentation {
|
|
4945
|
+
/** The status name, as the product spells it. Always visible. */
|
|
4946
|
+
label: React.ReactNode;
|
|
4947
|
+
/** Leading 14px glyph; ignored while `loading`, replaced by `dot` when both are set. */
|
|
4948
|
+
icon?: React.ReactNode;
|
|
4949
|
+
/** What the status means for the work, shown on hover and focus. */
|
|
4950
|
+
description?: React.ReactNode;
|
|
4951
|
+
/** `xs`, `sm` (default) or `md` — the Badge scale. */
|
|
4952
|
+
size?: BadgeSize;
|
|
4953
|
+
/** Corner treatment, as on `Badge`; omitted keeps the Badge default (D1). */
|
|
4954
|
+
shape?: BadgeShape;
|
|
4955
|
+
}
|
|
4956
|
+
declare const StatusBadge: React$1.ForwardRefExoticComponent<StatusBadgeProps & React$1.RefAttributes<HTMLSpanElement>>;
|
|
3225
4957
|
|
|
3226
4958
|
/**
|
|
3227
|
-
* The
|
|
3228
|
-
* §16, §22, §23): the gap scale, the alignment words, and the one responsive
|
|
3229
|
-
* shape a layout prop may take.
|
|
4959
|
+
* The IconButton sizes: the shared control scale, nothing else (A1).
|
|
3230
4960
|
*
|
|
3231
|
-
*
|
|
3232
|
-
|
|
3233
|
-
|
|
3234
|
-
|
|
4961
|
+
* @experimental
|
|
4962
|
+
*/
|
|
4963
|
+
type IconButtonSize = ControlSize;
|
|
4964
|
+
/** Where the default tooltip opens. @experimental */
|
|
4965
|
+
type IconButtonTooltipSide = "top" | "right" | "bottom" | "left";
|
|
4966
|
+
/** @experimental */
|
|
4967
|
+
interface IconButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "aria-label" | "children"> {
|
|
4968
|
+
/**
|
|
4969
|
+
* The accessible name — what a screen reader says and, by default, what the
|
|
4970
|
+
* tooltip shows. Required: an icon alone is not a name.
|
|
4971
|
+
*/
|
|
4972
|
+
label: string;
|
|
4973
|
+
/** The glyph. `children` is accepted as an alias for `<IconButton label="…"><Icon /></IconButton>`. */
|
|
4974
|
+
icon?: ReactNode;
|
|
4975
|
+
children?: ReactNode;
|
|
4976
|
+
/**
|
|
4977
|
+
* Visual emphasis, as on Button: `solid` (default) · `soft` · `outline` ·
|
|
4978
|
+
* `ghost` · `link`. The legacy Button words resolve through the same table.
|
|
4979
|
+
*/
|
|
4980
|
+
variant?: ButtonVariant;
|
|
4981
|
+
/**
|
|
4982
|
+
* Meaning → colour family: `brand` · `neutral` · `success` · `danger`.
|
|
4983
|
+
* Defaults per variant, as on Button. `destructive` is a deprecated alias
|
|
4984
|
+
* of `danger` (decision D4).
|
|
4985
|
+
*/
|
|
4986
|
+
intent?: ButtonIntent | ButtonIntentAlias;
|
|
4987
|
+
/**
|
|
4988
|
+
* Outer size, square, from the shared control scale (A1): `xs` 28 · `sm` 32
|
|
4989
|
+
* · `md` 36 (default; D5-gated token) · `lg` 40 · `xl` 48.
|
|
4990
|
+
*/
|
|
4991
|
+
size?: IconButtonSize;
|
|
4992
|
+
/**
|
|
4993
|
+
* `true` (default) shows `label` in a tooltip on hover and focus; `false`
|
|
4994
|
+
* renders no tooltip (the `aria-label` stays); a node replaces the text.
|
|
4995
|
+
* The tooltip is never the only source of the name.
|
|
4996
|
+
*/
|
|
4997
|
+
tooltip?: boolean | ReactNode;
|
|
4998
|
+
/** Side the tooltip opens on. Default `top`. */
|
|
4999
|
+
tooltipSide?: IconButtonTooltipSide;
|
|
5000
|
+
/** Render the child element instead of a `<button>` (Radix `Slot`). */
|
|
5001
|
+
asChild?: boolean;
|
|
5002
|
+
/** Replaces the glyph with a spinner, sets `aria-busy` and disables the control. */
|
|
5003
|
+
loading?: boolean;
|
|
5004
|
+
/**
|
|
5005
|
+
* Toggle state (a boolean prop, never a variant — ADR-007 §2). Reflected as
|
|
5006
|
+
* `aria-pressed` and, when true, `data-pressed`.
|
|
5007
|
+
*/
|
|
5008
|
+
pressed?: boolean;
|
|
5009
|
+
}
|
|
5010
|
+
/**
|
|
5011
|
+
* The IconButton class recipe: `buttonBase` (look resolved from `variant` +
|
|
5012
|
+
* `intent`, no text-button size row) plus the square control-scale size, so
|
|
5013
|
+
* `IconButton size="sm"` and `Button size="sm"` are the same height by
|
|
5014
|
+
* construction. Server-safe.
|
|
3235
5015
|
*
|
|
3236
|
-
*
|
|
3237
|
-
|
|
3238
|
-
|
|
3239
|
-
|
|
5016
|
+
* @experimental
|
|
5017
|
+
*/
|
|
5018
|
+
declare function iconButtonVariants({ variant, intent, size, className, }?: {
|
|
5019
|
+
variant?: ButtonVariant | null;
|
|
5020
|
+
intent?: ButtonIntent | ButtonIntentAlias | null;
|
|
5021
|
+
size?: IconButtonSize | null;
|
|
5022
|
+
className?: string | null;
|
|
5023
|
+
}): string;
|
|
5024
|
+
/**
|
|
5025
|
+
* An icon-only action with a required accessible name, a tooltip by default
|
|
5026
|
+
* and the Button family's look on a square control-scale geometry. See the
|
|
5027
|
+
* module comment.
|
|
5028
|
+
*
|
|
5029
|
+
* @experimental
|
|
5030
|
+
*/
|
|
5031
|
+
declare const IconButton: React$1.ForwardRefExoticComponent<IconButtonProps & React$1.RefAttributes<HTMLButtonElement>>;
|
|
5032
|
+
|
|
5033
|
+
/** The emphasis subset a chip offers. @experimental */
|
|
5034
|
+
type ChipVariant = Extract<Variant, "solid" | "soft" | "outline">;
|
|
5035
|
+
/** The intents a chip offers (the Button family's). @experimental */
|
|
5036
|
+
type ChipIntent = ButtonIntent;
|
|
5037
|
+
/** The chip sizes: the shared control scale (A1). @experimental */
|
|
5038
|
+
type ChipSize = ControlSize;
|
|
5039
|
+
/** @experimental */
|
|
5040
|
+
interface ChipProps extends Omit<React.HTMLAttributes<HTMLElement>, "children" | "onClick"> {
|
|
5041
|
+
/** The label. A string also names the remove button ("Remove {label}"). */
|
|
5042
|
+
children: ReactNode;
|
|
5043
|
+
/** Leading glyph, decorative. */
|
|
5044
|
+
icon?: ReactNode;
|
|
5045
|
+
/** Trailing number. */
|
|
5046
|
+
count?: number;
|
|
5047
|
+
/** Visual emphasis: `soft` (default) · `solid` · `outline`. */
|
|
5048
|
+
variant?: ChipVariant;
|
|
5049
|
+
/**
|
|
5050
|
+
* Meaning → colour family. Default `neutral`, or `brand` while `pressed`.
|
|
5051
|
+
* `destructive` is a deprecated alias of `danger` (decision D4).
|
|
5052
|
+
*/
|
|
5053
|
+
intent?: ChipIntent | ButtonIntentAlias;
|
|
5054
|
+
/** Outer height from the shared control scale (A1). Default `sm` (32px). */
|
|
5055
|
+
size?: ChipSize;
|
|
5056
|
+
/**
|
|
5057
|
+
* Toggle state (a boolean prop, never a variant — ADR-007 §2). Controlled:
|
|
5058
|
+
* pair with `onPressedChange`. Reflected as `aria-pressed` / `data-pressed`.
|
|
5059
|
+
*/
|
|
5060
|
+
pressed?: boolean;
|
|
5061
|
+
/** Called with the next state when a toggle chip is activated. */
|
|
5062
|
+
onPressedChange?: (pressed: boolean) => void;
|
|
5063
|
+
/** Activation of the chip itself (not of the remove button). */
|
|
5064
|
+
onClick?: React.MouseEventHandler<HTMLButtonElement>;
|
|
5065
|
+
/** Renders a remove button after the label and is called when it is activated. */
|
|
5066
|
+
onRemove?: () => void;
|
|
5067
|
+
/**
|
|
5068
|
+
* The remove button's accessible name. Defaults to "Remove {label}" when
|
|
5069
|
+
* `children` is a string; required otherwise (a development error).
|
|
5070
|
+
*/
|
|
5071
|
+
removeLabel?: string;
|
|
5072
|
+
/** Disables the chip and its remove button. */
|
|
5073
|
+
disabled?: boolean;
|
|
5074
|
+
}
|
|
5075
|
+
/**
|
|
5076
|
+
* The chip class recipe: `buttonBase` for the resolved look (no text-button
|
|
5077
|
+
* size row), a pill corner, and the control-scale size. Server-safe.
|
|
5078
|
+
*
|
|
5079
|
+
* @experimental
|
|
5080
|
+
*/
|
|
5081
|
+
declare function chipVariants({ variant, intent, size, pressed, className, }?: {
|
|
5082
|
+
variant?: ChipVariant | null;
|
|
5083
|
+
intent?: ChipIntent | ButtonIntentAlias | null;
|
|
5084
|
+
size?: ChipSize | null;
|
|
5085
|
+
pressed?: boolean | null;
|
|
5086
|
+
className?: string | null;
|
|
5087
|
+
}): string;
|
|
5088
|
+
/**
|
|
5089
|
+
* The resolved appearance of a chip: the emphasis, the colour family and the
|
|
5090
|
+
* row of the Button colour table they render (see the module comment on the
|
|
5091
|
+
* `intent` default).
|
|
5092
|
+
*
|
|
5093
|
+
* @experimental
|
|
3240
5094
|
*/
|
|
5095
|
+
interface ChipStyle {
|
|
5096
|
+
variant: ChipVariant;
|
|
5097
|
+
intent: ChipIntent;
|
|
5098
|
+
look: ButtonLook;
|
|
5099
|
+
}
|
|
5100
|
+
/** Resolves `variant` + `intent` (+ `pressed`) to the row a chip renders. */
|
|
5101
|
+
declare function resolveChipStyle({ variant, intent, pressed, }: {
|
|
5102
|
+
variant?: ChipVariant | null;
|
|
5103
|
+
intent?: ChipIntent | ButtonIntentAlias | null;
|
|
5104
|
+
pressed?: boolean | null;
|
|
5105
|
+
}): ChipStyle;
|
|
5106
|
+
/**
|
|
5107
|
+
* The removable, toggleable or clickable token, on `buttonBase` through
|
|
5108
|
+
* `Pressable`. See the module comment.
|
|
5109
|
+
*
|
|
5110
|
+
* @experimental
|
|
5111
|
+
*/
|
|
5112
|
+
declare const Chip: React$1.ForwardRefExoticComponent<ChipProps & React$1.RefAttributes<HTMLElement>>;
|
|
5113
|
+
|
|
5114
|
+
/**
|
|
5115
|
+
* How a `Field` lays out its parts: stacked (`vertical`, the default) or on
|
|
5116
|
+
* one row (`horizontal`: settings rows, Switch and Checkbox rows).
|
|
5117
|
+
*
|
|
5118
|
+
* @experimental
|
|
5119
|
+
*/
|
|
5120
|
+
type FieldOrientation = "vertical" | "horizontal";
|
|
5121
|
+
|
|
5122
|
+
/**
|
|
5123
|
+
* Props of `Field`.
|
|
5124
|
+
*
|
|
5125
|
+
* @experimental
|
|
5126
|
+
*/
|
|
5127
|
+
interface FieldProps extends HTMLAttributes<HTMLDivElement> {
|
|
5128
|
+
/**
|
|
5129
|
+
* The control's id and the base of every part id (`<id>-label`,
|
|
5130
|
+
* `<id>-description`, `<id>-error`). Generated with `useId` when omitted.
|
|
5131
|
+
*/
|
|
5132
|
+
id?: string;
|
|
5133
|
+
/** The control's `name`, when the control does not set its own. */
|
|
5134
|
+
name?: string;
|
|
5135
|
+
/**
|
|
5136
|
+
* The field is in error: the control gets `aria-invalid` and
|
|
5137
|
+
* `data-invalid`. Implied by a mounted `FieldError` with content.
|
|
5138
|
+
*/
|
|
5139
|
+
invalid?: boolean;
|
|
5140
|
+
/**
|
|
5141
|
+
* The value is required: a native control gets `required`, any other
|
|
5142
|
+
* `aria-required`; the `Label` shows the asterisk.
|
|
5143
|
+
*/
|
|
5144
|
+
required?: boolean;
|
|
5145
|
+
/** The value is optional: the `Label` shows the `optional` message after the text. */
|
|
5146
|
+
optional?: boolean;
|
|
5147
|
+
/** Propagated to the control. */
|
|
5148
|
+
disabled?: boolean;
|
|
5149
|
+
/** Propagated to the control. */
|
|
5150
|
+
readOnly?: boolean;
|
|
5151
|
+
/** Stacked (`vertical`, default) or on one row (`horizontal`). */
|
|
5152
|
+
orientation?: FieldOrientation;
|
|
5153
|
+
/** The control size the field's controls read (from W4-05). */
|
|
5154
|
+
size?: ControlSize;
|
|
5155
|
+
/** Overrides of the copy the field renders (English defaults until W5-20). */
|
|
5156
|
+
messages?: Partial<FieldMessages>;
|
|
5157
|
+
children?: ReactNode;
|
|
5158
|
+
}
|
|
3241
5159
|
/**
|
|
3242
|
-
*
|
|
3243
|
-
*
|
|
3244
|
-
*
|
|
3245
|
-
* `Stack`/`Inline` are responsive (target architecture §22); nothing else on a
|
|
3246
|
-
* layout primitive takes an object.
|
|
5160
|
+
* One form control with its label, description and error (target
|
|
5161
|
+
* architecture §24.1). Renders a `div` with the field anatomy and puts the
|
|
5162
|
+
* wiring in context.
|
|
3247
5163
|
*
|
|
3248
5164
|
* @experimental
|
|
3249
5165
|
*/
|
|
3250
|
-
|
|
5166
|
+
declare const Field: React$1.ForwardRefExoticComponent<FieldProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
3251
5167
|
/**
|
|
3252
|
-
*
|
|
3253
|
-
* object of values by breakpoint. `base` is what applies below `sm`; when it
|
|
3254
|
-
* is omitted the prop's own default applies there, so
|
|
3255
|
-
* `direction={{ md: "row" }}` reads "a column, a row from `md` up".
|
|
5168
|
+
* Props of `FieldDescription`.
|
|
3256
5169
|
*
|
|
3257
5170
|
* @experimental
|
|
3258
5171
|
*/
|
|
3259
|
-
type
|
|
5172
|
+
type FieldDescriptionProps = HTMLAttributes<HTMLParagraphElement>;
|
|
3260
5173
|
/**
|
|
3261
|
-
*
|
|
3262
|
-
*
|
|
3263
|
-
*
|
|
5174
|
+
* Hint text for the field's control, referenced first in the control's
|
|
5175
|
+
* `aria-describedby`. Registers itself, so an unmounted description is not
|
|
5176
|
+
* referenced.
|
|
3264
5177
|
*
|
|
3265
5178
|
* @experimental
|
|
3266
5179
|
*/
|
|
3267
|
-
|
|
5180
|
+
declare const FieldDescription: React$1.ForwardRefExoticComponent<FieldDescriptionProps & React$1.RefAttributes<HTMLParagraphElement>>;
|
|
3268
5181
|
/**
|
|
3269
|
-
*
|
|
5182
|
+
* Props of `FieldError`.
|
|
3270
5183
|
*
|
|
3271
5184
|
* @experimental
|
|
3272
5185
|
*/
|
|
3273
|
-
type
|
|
5186
|
+
type FieldErrorProps = HTMLAttributes<HTMLParagraphElement>;
|
|
3274
5187
|
/**
|
|
3275
|
-
*
|
|
5188
|
+
* The field's error message, referenced after the description in the
|
|
5189
|
+
* control's `aria-describedby`; a mounted error with content also makes the
|
|
5190
|
+
* field invalid. Renders nothing (and registers nothing) without content, so
|
|
5191
|
+
* `<FieldError>{error}</FieldError>` is the whole call site.
|
|
5192
|
+
*
|
|
5193
|
+
* Announcement (target architecture §24.1): an error that appears after the
|
|
5194
|
+
* field is on screen — after an interaction — is a `role="alert"` live
|
|
5195
|
+
* region, announced once when it mounts and again when its text changes. An
|
|
5196
|
+
* error rendered with the field (server-rendered validation results, the
|
|
5197
|
+
* first client paint) is plain text: it is read with the control through
|
|
5198
|
+
* `aria-describedby`, not shouted on page load. Pass `role` to override.
|
|
3276
5199
|
*
|
|
3277
5200
|
* @experimental
|
|
3278
5201
|
*/
|
|
3279
|
-
|
|
5202
|
+
declare const FieldError: React$1.ForwardRefExoticComponent<FieldErrorProps & React$1.RefAttributes<HTMLParagraphElement>>;
|
|
3280
5203
|
|
|
3281
5204
|
/**
|
|
3282
|
-
*
|
|
5205
|
+
* L1b (W2-19 scaffolding, public since W4-02). The integration contract of
|
|
5206
|
+
* target architecture §24.2: a control asks for its wiring and never knows
|
|
5207
|
+
* about labels. Explicit props always win over the surrounding `Field`, and a
|
|
5208
|
+
* control outside a field keeps working.
|
|
3283
5209
|
*
|
|
3284
|
-
*
|
|
5210
|
+
* Every design-system form control calls this hook (from W4-05 on). It is
|
|
5211
|
+
* public for product-built controls — a rich-text editor, an annotation
|
|
5212
|
+
* editor — that want the same binding; `FieldControl` is the same contract as
|
|
5213
|
+
* a Slot for a control that is already a component.
|
|
3285
5214
|
*/
|
|
3286
|
-
type StackDirection = "column" | "row";
|
|
3287
|
-
|
|
3288
5215
|
/**
|
|
3289
|
-
*
|
|
3290
|
-
*
|
|
3291
|
-
*
|
|
3292
|
-
* — the gap between its children and how they line up — and never arbitrary
|
|
3293
|
-
* style props (target architecture §23). There is no `padding`, `margin`,
|
|
3294
|
-
* `p`/`m`/`px`/`mt`, `bg`, `color`, `width`, `height`, `sx` or `css` here, and
|
|
3295
|
-
* `gap` accepts a scale step, not a number or a length. Spacing *around* a
|
|
3296
|
-
* stack belongs to its parent; a box with padding is a `Surface`. `className`
|
|
3297
|
-
* and `style` land on the root element (§29.1).
|
|
5216
|
+
* What a control tells `useFieldControl`. Every prop is optional: inside a
|
|
5217
|
+
* `Field` the context supplies the rest, outside one the hook generates an id
|
|
5218
|
+
* and adds nothing else.
|
|
3298
5219
|
*
|
|
3299
5220
|
* @experimental
|
|
3300
5221
|
*/
|
|
3301
|
-
interface
|
|
5222
|
+
interface UseFieldControlProps {
|
|
5223
|
+
id?: string | undefined;
|
|
5224
|
+
name?: string | undefined;
|
|
5225
|
+
invalid?: boolean | undefined;
|
|
5226
|
+
required?: boolean | undefined;
|
|
5227
|
+
disabled?: boolean | undefined;
|
|
5228
|
+
readOnly?: boolean | undefined;
|
|
5229
|
+
"aria-labelledby"?: string | undefined;
|
|
5230
|
+
"aria-describedby"?: string | undefined;
|
|
3302
5231
|
/**
|
|
3303
|
-
*
|
|
3304
|
-
*
|
|
3305
|
-
*
|
|
5232
|
+
* `false` for a control that cannot be the target of `htmlFor` — a Radix
|
|
5233
|
+
* trigger, a checkbox button, a slider thumb. Those are named with
|
|
5234
|
+
* `aria-labelledby` and cannot carry the native `required` attribute.
|
|
5235
|
+
* Default `true` (`input`, `textarea`, `select`).
|
|
3306
5236
|
*/
|
|
3307
|
-
|
|
5237
|
+
native?: boolean | undefined;
|
|
5238
|
+
}
|
|
5239
|
+
/**
|
|
5240
|
+
* The wiring `useFieldControl` returns. Spread it onto the control's element
|
|
5241
|
+
* (`<input {...wiring} />`); merge `ref` with your own through a ref callback
|
|
5242
|
+
* when you keep one.
|
|
5243
|
+
*
|
|
5244
|
+
* @experimental
|
|
5245
|
+
*/
|
|
5246
|
+
interface FieldControlWiring {
|
|
5247
|
+
id: string;
|
|
5248
|
+
name: string | undefined;
|
|
5249
|
+
"aria-labelledby": string | undefined;
|
|
5250
|
+
"aria-describedby": string | undefined;
|
|
5251
|
+
"aria-invalid": true | undefined;
|
|
5252
|
+
"aria-required": true | undefined;
|
|
5253
|
+
required: true | undefined;
|
|
5254
|
+
disabled: boolean | undefined;
|
|
5255
|
+
readOnly: boolean | undefined;
|
|
5256
|
+
/** State attributes per ADR-008: present when true, absent otherwise. */
|
|
5257
|
+
"data-invalid": "" | undefined;
|
|
5258
|
+
"data-disabled": "" | undefined;
|
|
3308
5259
|
/**
|
|
3309
|
-
*
|
|
3310
|
-
*
|
|
3311
|
-
*
|
|
5260
|
+
* Attach to the control's element. In development the hook checks, once the
|
|
5261
|
+
* element is in the document, that it has an accessible name, and prints an
|
|
5262
|
+
* error (once per control) when it has none. Nothing in production.
|
|
3312
5263
|
*/
|
|
3313
|
-
|
|
3314
|
-
/** Cross-axis alignment (`align-items`). Not responsive. */
|
|
3315
|
-
align?: LayoutAlign;
|
|
3316
|
-
/** Main-axis distribution (`justify-content`). Not responsive. */
|
|
3317
|
-
justify?: LayoutJustify;
|
|
3318
|
-
/** Whether children may wrap onto further lines. Not responsive. */
|
|
3319
|
-
wrap?: boolean;
|
|
5264
|
+
ref: RefCallback<HTMLElement>;
|
|
3320
5265
|
}
|
|
3321
5266
|
/**
|
|
3322
|
-
*
|
|
3323
|
-
*
|
|
3324
|
-
*
|
|
3325
|
-
*
|
|
3326
|
-
* Vertical by default; `direction` may switch to a row, at a breakpoint if
|
|
3327
|
-
* needed. Only `direction` and `gap` are responsive — the deliberately small
|
|
3328
|
-
* exception the architecture makes for layout primitives (§22). For a
|
|
3329
|
-
* horizontal, wrapping row use `Inline`.
|
|
5267
|
+
* The wiring of one form control: `id`, `name`, ARIA references to the
|
|
5268
|
+
* mounted `Field` parts (description before error), invalid / required /
|
|
5269
|
+
* disabled / readOnly and the matching state attributes.
|
|
3330
5270
|
*
|
|
3331
|
-
*
|
|
3332
|
-
*
|
|
3333
|
-
*
|
|
3334
|
-
* the L1b layer may not make directly).
|
|
5271
|
+
* Merge order: an explicit prop wins over the field; `aria-describedby` is
|
|
5272
|
+
* merged (field ids first, then the prop). Outside a `Field` only the
|
|
5273
|
+
* explicit props and a generated id remain.
|
|
3335
5274
|
*
|
|
3336
|
-
* @experimental
|
|
3337
|
-
* prop shapes may still change before the wave's exit review.
|
|
5275
|
+
* @experimental
|
|
3338
5276
|
*/
|
|
3339
|
-
declare
|
|
5277
|
+
declare function useFieldControl(props?: UseFieldControlProps): FieldControlWiring;
|
|
3340
5278
|
|
|
3341
5279
|
/**
|
|
3342
|
-
* Props of `
|
|
3343
|
-
*
|
|
3344
|
-
* The same discipline as `StackProps`: tokenised props for gap and alignment
|
|
3345
|
-
* only, no arbitrary style props (`padding`, `margin`, `p`/`m`/`px`/`mt`,
|
|
3346
|
-
* `bg`, `color`, `width`, `height`, `sx`, `css`), and `gap` is a scale step.
|
|
3347
|
-
* `className` and `style` land on the root element (§29.1).
|
|
5280
|
+
* Props of `FieldControl`.
|
|
3348
5281
|
*
|
|
3349
5282
|
* @experimental
|
|
3350
5283
|
*/
|
|
3351
|
-
interface
|
|
3352
|
-
/**
|
|
3353
|
-
|
|
3354
|
-
* or `none`. Responsive: `{ base?, sm?, md?, lg? }`.
|
|
3355
|
-
* @default "md"
|
|
3356
|
-
*/
|
|
3357
|
-
gap?: Responsive<LayoutGap>;
|
|
3358
|
-
/**
|
|
3359
|
-
* Cross-axis alignment (`align-items`). Not responsive.
|
|
3360
|
-
* @default "center"
|
|
3361
|
-
*/
|
|
3362
|
-
align?: LayoutAlign;
|
|
3363
|
-
/** Main-axis distribution (`justify-content`). Not responsive. */
|
|
3364
|
-
justify?: LayoutJustify;
|
|
3365
|
-
/**
|
|
3366
|
-
* Whether children may wrap onto further lines. Not responsive.
|
|
3367
|
-
* @default true
|
|
3368
|
-
*/
|
|
3369
|
-
wrap?: boolean;
|
|
5284
|
+
interface FieldControlProps extends Pick<UseFieldControlProps, "native"> {
|
|
5285
|
+
/** Exactly one element. Its own `id`, `aria-*` and state props win over the field. */
|
|
5286
|
+
children: ReactElement;
|
|
3370
5287
|
}
|
|
3371
5288
|
/**
|
|
3372
|
-
*
|
|
3373
|
-
* label beside a badge, a row of chips, the buttons of a toolbar. Children are
|
|
3374
|
-
* centred on the cross axis and wrap by default, which is what a row of mixed
|
|
3375
|
-
* heights and unknown count wants; `Stack direction="row"` is the row that
|
|
3376
|
-
* does not wrap and stretches.
|
|
5289
|
+
* Injects the field's wiring into its only child (see `useFieldControl`).
|
|
3377
5290
|
*
|
|
3378
|
-
*
|
|
3379
|
-
*
|
|
3380
|
-
*
|
|
5291
|
+
* `native` defaults to whether the child is an intrinsic `input`, `select`
|
|
5292
|
+
* or `textarea`. A native child receives the full wiring, including `name`,
|
|
5293
|
+
* `required`, `disabled` and `readOnly`. Any other child receives the id,
|
|
5294
|
+
* the ARIA references and states (`aria-labelledby`, `aria-describedby`,
|
|
5295
|
+
* `aria-invalid`, `aria-required`, `aria-disabled`, `aria-readonly`) and the
|
|
5296
|
+
* `data-invalid` / `data-disabled` attributes, and reads `disabled` itself
|
|
5297
|
+
* through `useFieldControl` when it needs the prop.
|
|
3381
5298
|
*
|
|
3382
|
-
* @experimental
|
|
3383
|
-
* prop shapes may still change before the wave's exit review.
|
|
5299
|
+
* @experimental
|
|
3384
5300
|
*/
|
|
3385
|
-
declare
|
|
5301
|
+
declare function FieldControl({ children, native }: FieldControlProps): ReactElement;
|
|
3386
5302
|
|
|
3387
5303
|
/**
|
|
3388
|
-
*
|
|
3389
|
-
* 24px — the three card and panel paddings the library and its consumers
|
|
3390
|
-
* already write — or `none` for a surface whose content pads itself (a table,
|
|
3391
|
-
* an image, a list with its own row padding).
|
|
5304
|
+
* Props of `Fieldset`.
|
|
3392
5305
|
*
|
|
3393
5306
|
* @experimental
|
|
3394
5307
|
*/
|
|
3395
|
-
|
|
5308
|
+
interface FieldsetProps extends FieldsetHTMLAttributes<HTMLFieldSetElement> {
|
|
5309
|
+
/** The group is in error; `data-invalid` for styling. Each field carries its own `aria-invalid`. */
|
|
5310
|
+
invalid?: boolean;
|
|
5311
|
+
}
|
|
3396
5312
|
/**
|
|
3397
|
-
*
|
|
3398
|
-
*
|
|
3399
|
-
* tooltips, toasts and small cards, or `none`. Control and badge radii are not
|
|
3400
|
-
* offered: a surface is never a control.
|
|
5313
|
+
* A group of fields under one legend. No visual chrome: the browser's
|
|
5314
|
+
* fieldset border and padding are reset.
|
|
3401
5315
|
*
|
|
3402
5316
|
* @experimental
|
|
3403
5317
|
*/
|
|
3404
|
-
|
|
5318
|
+
declare const Fieldset: React$1.ForwardRefExoticComponent<FieldsetProps & React$1.RefAttributes<HTMLFieldSetElement>>;
|
|
3405
5319
|
/**
|
|
3406
|
-
*
|
|
3407
|
-
* §19): `flat` (resting, border-led — today's `Card`), `raised` (resting
|
|
3408
|
-
* lift), `floating` (anchored transient surfaces), `overlay` (modal surfaces),
|
|
3409
|
-
* or `none` for no shadow at all — which is what the hand-rolled card boxes in
|
|
3410
|
-
* every product render, and the default. `flat` is kept distinct from `none`
|
|
3411
|
-
* because today's `flat` role still aliases the hairline `shadow-quiet` (gated
|
|
3412
|
-
* on D1); when D1 lands the two coincide and nothing here changes.
|
|
5320
|
+
* Props of `FieldsetLegend`.
|
|
3413
5321
|
*
|
|
3414
5322
|
* @experimental
|
|
3415
5323
|
*/
|
|
3416
|
-
type
|
|
5324
|
+
type FieldsetLegendProps = HTMLAttributes<HTMLLegendElement>;
|
|
5325
|
+
/**
|
|
5326
|
+
* The group's name. Must be the first child of `Fieldset` for the browser to
|
|
5327
|
+
* treat it as the legend. Inside a `Fieldset` it carries the id a grouped
|
|
5328
|
+
* control references through `aria-labelledby`; an explicit `id` wins.
|
|
5329
|
+
*
|
|
5330
|
+
* @experimental
|
|
5331
|
+
*/
|
|
5332
|
+
declare const FieldsetLegend: React$1.ForwardRefExoticComponent<FieldsetLegendProps & React$1.RefAttributes<HTMLLegendElement>>;
|
|
3417
5333
|
|
|
3418
5334
|
/**
|
|
3419
|
-
*
|
|
5335
|
+
* L1a behaviour primitive (private). Not exported from the package.
|
|
3420
5336
|
*
|
|
3421
|
-
*
|
|
3422
|
-
*
|
|
3423
|
-
*
|
|
3424
|
-
* `
|
|
3425
|
-
* `
|
|
5337
|
+
* The canonical option model of every list-shaped control (W4-09; target
|
|
5338
|
+
* architecture §32): `Select`, the coming `Combobox` (W4-10) and its
|
|
5339
|
+
* `MultiSelect` preset (W4-11), the `SearchSelect` adapter (W4-12) and the
|
|
5340
|
+
* `PeoplePicker` pattern all read one shape, in place of the six that ship
|
|
5341
|
+
* today (`{value,label}`, `{id,label,group…}`, `{id,label,email}`,
|
|
5342
|
+
* `{id,fullName}`, `{key,label,dot}`, `string[]`).
|
|
5343
|
+
*
|
|
5344
|
+
* Two halves:
|
|
5345
|
+
*
|
|
5346
|
+
* - {@link Option} and its accessors: what a row *is*. Consumers with domain
|
|
5347
|
+
* objects pass {@link OptionAccessors} (`getOptionValue`/`getOptionLabel`)
|
|
5348
|
+
* instead of remapping, and {@link toOptions} normalises everything — a
|
|
5349
|
+
* `string[]`, domain objects, `Option`s — into one array the list renders.
|
|
5350
|
+
* - The selection helpers: what a control's *value* is, discriminated by
|
|
5351
|
+
* `multiple` (single `TValue | null`, multi `TValue[]`; §32 "Value"). `""`
|
|
5352
|
+
* keeps meaning empty in 2.x (§32 "Compat"), so {@link normalizeSingleValue}
|
|
5353
|
+
* folds it to `null` at the boundary.
|
|
5354
|
+
*
|
|
5355
|
+
* No React, no client directive, no DOM: plain functions over plain data, so
|
|
5356
|
+
* the same module serves a Server Component, a test and the keyboard helper.
|
|
5357
|
+
*/
|
|
5358
|
+
/**
|
|
5359
|
+
* One row of a list-shaped control.
|
|
5360
|
+
*
|
|
5361
|
+
* `value` is never `""`: emptiness is `value === null` on the control, not a
|
|
5362
|
+
* sentinel row (§32). `label` is the string typeahead, filtering and the
|
|
5363
|
+
* accessible name read; `description` and `icon` are rendered, never searched.
|
|
5364
|
+
* `keywords` widen the match without showing. `meta` carries consumer data
|
|
5365
|
+
* through to `renderOption` / `onValueChange` details untouched.
|
|
3426
5366
|
*
|
|
3427
5367
|
* @experimental
|
|
3428
5368
|
*/
|
|
3429
|
-
interface
|
|
3430
|
-
|
|
3431
|
-
|
|
3432
|
-
|
|
3433
|
-
|
|
3434
|
-
|
|
5369
|
+
interface Option<TValue extends string = string, TMeta = unknown> {
|
|
5370
|
+
value: TValue;
|
|
5371
|
+
label: string;
|
|
5372
|
+
description?: ReactNode;
|
|
5373
|
+
/** Leading visual: icon, avatar, flag, colour swatch. */
|
|
5374
|
+
icon?: ReactNode;
|
|
5375
|
+
disabled?: boolean;
|
|
5376
|
+
group?: string;
|
|
5377
|
+
keywords?: readonly string[];
|
|
5378
|
+
meta?: TMeta;
|
|
5379
|
+
}
|
|
5380
|
+
/**
|
|
5381
|
+
* How a list reads a consumer's own item type. Only `getOptionValue` and
|
|
5382
|
+
* `getOptionLabel` are required: an item with no `disabled`/`group`/`keywords`
|
|
5383
|
+
* accessor is enabled, ungrouped and matched on its label alone.
|
|
5384
|
+
*
|
|
5385
|
+
* @experimental
|
|
5386
|
+
*/
|
|
5387
|
+
interface OptionAccessors<TItem, TValue extends string = string> {
|
|
5388
|
+
getOptionValue: (item: TItem) => TValue;
|
|
5389
|
+
getOptionLabel: (item: TItem) => string;
|
|
5390
|
+
getOptionDisabled?: (item: TItem) => boolean;
|
|
5391
|
+
getOptionGroup?: (item: TItem) => string | undefined;
|
|
5392
|
+
getOptionKeywords?: (item: TItem) => readonly string[] | undefined;
|
|
5393
|
+
}
|
|
5394
|
+
|
|
5395
|
+
/** The English defaults (the `combobox` namespace of the catalogue). */
|
|
5396
|
+
declare const DEFAULT_COMBOBOX_MESSAGES: ComboboxMessages;
|
|
5397
|
+
/** The sizes a combobox offers: the shared control scale (A1). @experimental */
|
|
5398
|
+
type ComboboxSize = ControlSize;
|
|
5399
|
+
/** What `renderOption` is told about the row it renders. @experimental */
|
|
5400
|
+
interface ComboboxOptionState {
|
|
5401
|
+
selected: boolean;
|
|
5402
|
+
highlighted: boolean;
|
|
5403
|
+
disabled: boolean;
|
|
5404
|
+
}
|
|
5405
|
+
/**
|
|
5406
|
+
* Class overrides per part, for the consumer who must restyle one slot
|
|
5407
|
+
* without reaching into the DOM.
|
|
5408
|
+
*
|
|
5409
|
+
* @experimental
|
|
5410
|
+
*/
|
|
5411
|
+
interface ComboboxClassNames {
|
|
5412
|
+
root?: string;
|
|
5413
|
+
control?: string;
|
|
5414
|
+
input?: string;
|
|
5415
|
+
chip?: string;
|
|
5416
|
+
content?: string;
|
|
5417
|
+
list?: string;
|
|
5418
|
+
item?: string;
|
|
5419
|
+
}
|
|
5420
|
+
/** @experimental */
|
|
5421
|
+
interface ComboboxBaseProps<TItem, TValue extends string> extends Partial<OptionAccessors<TItem, TValue>> {
|
|
5422
|
+
/** The rows: `Option`s, strings, or domain objects read through the accessors. */
|
|
5423
|
+
options: readonly TItem[];
|
|
5424
|
+
id?: string;
|
|
5425
|
+
/** The form field name. Without it nothing is submitted. */
|
|
5426
|
+
name?: string;
|
|
5427
|
+
/** The `id` of the form to submit with when the control is rendered outside it. */
|
|
5428
|
+
form?: string;
|
|
5429
|
+
required?: boolean;
|
|
5430
|
+
disabled?: boolean;
|
|
5431
|
+
readOnly?: boolean;
|
|
5432
|
+
invalid?: boolean;
|
|
5433
|
+
/** The accessible name of a combobox outside a `Field`. */
|
|
5434
|
+
"aria-label"?: string;
|
|
5435
|
+
"aria-labelledby"?: string;
|
|
5436
|
+
"aria-describedby"?: string;
|
|
5437
|
+
placeholder?: string;
|
|
5438
|
+
/** Outer height from the shared control scale. Default `md` (36px). */
|
|
5439
|
+
size?: ComboboxSize;
|
|
5440
|
+
/** A leading glyph inside the control, decorative. */
|
|
5441
|
+
icon?: ReactNode;
|
|
5442
|
+
/** Show a clear button while a value is set. Default `true`. */
|
|
5443
|
+
clearable?: boolean;
|
|
5444
|
+
/** Open the list when the input receives focus. Default `false`. */
|
|
5445
|
+
openOnFocus?: boolean;
|
|
5446
|
+
/** Whether the list surface flips to stay in the viewport. Default `true`. */
|
|
5447
|
+
avoidCollisions?: boolean;
|
|
5448
|
+
open?: boolean;
|
|
5449
|
+
defaultOpen?: boolean;
|
|
5450
|
+
onOpenChange?: (open: boolean) => void;
|
|
5451
|
+
/** The typed query (controlled). */
|
|
5452
|
+
search?: string;
|
|
5453
|
+
defaultSearch?: string;
|
|
5454
|
+
/** Called with every query the user types (an async source fetches here). */
|
|
5455
|
+
onSearchChange?: (query: string) => void;
|
|
3435
5456
|
/**
|
|
3436
|
-
*
|
|
3437
|
-
*
|
|
5457
|
+
* Filter `options` by the query (`true`, the default). `false` when the
|
|
5458
|
+
* consumer filters — the options are already the answer to the query.
|
|
3438
5459
|
*/
|
|
3439
|
-
|
|
5460
|
+
shouldFilter?: boolean;
|
|
5461
|
+
/** An async source is fetching: a spinner in the control, `loadingState` in the list. */
|
|
5462
|
+
loading?: boolean;
|
|
5463
|
+
emptyState?: ReactNode;
|
|
5464
|
+
loadingState?: ReactNode;
|
|
5465
|
+
/** Rendered above the list, inside the popover. */
|
|
5466
|
+
header?: ReactNode;
|
|
5467
|
+
/** Rendered below the list, inside the popover. */
|
|
5468
|
+
footer?: ReactNode;
|
|
5469
|
+
/** Offer a "Create …" row for a query that matches no option exactly. */
|
|
5470
|
+
onCreate?: (query: string) => void;
|
|
5471
|
+
/** Replaces the content of a row. */
|
|
5472
|
+
renderOption?: (option: Option<TValue, unknown>, state: ComboboxOptionState) => ReactNode;
|
|
5473
|
+
messages?: Partial<ComboboxMessages>;
|
|
5474
|
+
className?: string;
|
|
5475
|
+
classNames?: ComboboxClassNames;
|
|
5476
|
+
/** The input element. */
|
|
5477
|
+
ref?: React$1.Ref<HTMLInputElement>;
|
|
5478
|
+
}
|
|
5479
|
+
/** @experimental */
|
|
5480
|
+
interface ComboboxSingleProps<TItem, TValue extends string> extends ComboboxBaseProps<TItem, TValue> {
|
|
5481
|
+
multiple?: false;
|
|
5482
|
+
/** The picked value, or `null`. `""` means empty (2.x compat). */
|
|
5483
|
+
value?: TValue | "" | null;
|
|
5484
|
+
defaultValue?: TValue | "" | null;
|
|
5485
|
+
onValueChange?: (value: TValue | null, details: {
|
|
5486
|
+
option: Option<TValue, unknown> | null;
|
|
5487
|
+
}) => void;
|
|
5488
|
+
/** Replaces the closed control's text for the picked option. */
|
|
5489
|
+
renderValue?: (option: Option<TValue, unknown>) => ReactNode;
|
|
5490
|
+
/** Close the list after a pick. Default `true`. */
|
|
5491
|
+
closeOnSelect?: boolean;
|
|
5492
|
+
}
|
|
5493
|
+
/** What `renderValue` receives in `multiple` mode besides the picked options. @experimental */
|
|
5494
|
+
interface ComboboxSelectionControls<TValue extends string> {
|
|
5495
|
+
/** Removes one value from the selection. */
|
|
5496
|
+
remove: (value: TValue) => void;
|
|
5497
|
+
}
|
|
5498
|
+
/** @experimental */
|
|
5499
|
+
interface ComboboxMultipleProps<TItem, TValue extends string> extends ComboboxBaseProps<TItem, TValue> {
|
|
5500
|
+
multiple: true;
|
|
5501
|
+
/** The picked values, in pick order. Empty strings are dropped. */
|
|
5502
|
+
value?: readonly (TValue | "")[];
|
|
5503
|
+
defaultValue?: readonly (TValue | "")[];
|
|
5504
|
+
onValueChange?: (value: TValue[], details: {
|
|
5505
|
+
option: Option<TValue, unknown> | null;
|
|
5506
|
+
}) => void;
|
|
3440
5507
|
/**
|
|
3441
|
-
*
|
|
3442
|
-
*
|
|
5508
|
+
* Replaces the chips inside the control: called with the picked options
|
|
5509
|
+
* and `remove`. Return `null` to render nothing there.
|
|
3443
5510
|
*/
|
|
3444
|
-
|
|
5511
|
+
renderValue?: (options: Option<TValue, unknown>[], controls: ComboboxSelectionControls<TValue>) => ReactNode;
|
|
5512
|
+
/** Close the list after a pick. Default `false`: keep picking. */
|
|
5513
|
+
closeOnSelect?: boolean;
|
|
5514
|
+
/** Drop picked rows from the list (the chips already show them). Default `false`. */
|
|
5515
|
+
hideSelected?: boolean;
|
|
3445
5516
|
}
|
|
3446
5517
|
/**
|
|
3447
|
-
*
|
|
3448
|
-
*
|
|
3449
|
-
* hand-rolled card boxes of the consumer usage audit (the class string is
|
|
3450
|
-
* `HAND_ROLLED_CARD` in the stories; it is not spelled here because Tailwind
|
|
3451
|
-
* would compile it from this comment) and the `.surface` helper class: with no
|
|
3452
|
-
* props it renders that box — surface background, 1px rule border,
|
|
3453
|
-
* `radius.surface`, `surface.padding.sm`, no shadow — and every knob is a
|
|
3454
|
-
* role, never a value. `Card` (W3-17) is built on it and adds anatomy.
|
|
3455
|
-
*
|
|
3456
|
-
* Deferred, deliberately:
|
|
3457
|
-
* - `interactive`: a clickable surface renders through `Pressable` (W3-03) so
|
|
3458
|
-
* it gets keyboard activation, `data-pressed` and a focus ring for free; a
|
|
3459
|
-
* `cursor-pointer` hover treatment here would be a click target with no
|
|
3460
|
-
* keyboard semantics. Until then, put a `Button asChild` or a link inside
|
|
3461
|
-
* the surface.
|
|
3462
|
-
* - `asChild`: waits for the design system's own `Slot` (a11y primitives).
|
|
5518
|
+
* The props, discriminated by `multiple` (target architecture §32 "Value"):
|
|
5519
|
+
* a single pick is `TValue | null`, a multi pick is `TValue[]`.
|
|
3463
5520
|
*
|
|
3464
|
-
*
|
|
3465
|
-
|
|
5521
|
+
* @experimental
|
|
5522
|
+
*/
|
|
5523
|
+
type ComboboxProps<TItem = Option, TValue extends string = string> = ComboboxSingleProps<TItem, TValue> | ComboboxMultipleProps<TItem, TValue>;
|
|
5524
|
+
/**
|
|
5525
|
+
* The searchable pick: one input, a portalled listbox, the option model.
|
|
5526
|
+
* See the module comment.
|
|
3466
5527
|
*
|
|
3467
|
-
*
|
|
3468
|
-
|
|
3469
|
-
|
|
3470
|
-
|
|
3471
|
-
|
|
5528
|
+
* @experimental
|
|
5529
|
+
*/
|
|
5530
|
+
declare function Combobox<TItem = Option, TValue extends string = string>(props: ComboboxProps<TItem, TValue>): react_jsx_runtime.JSX.Element;
|
|
5531
|
+
declare namespace Combobox {
|
|
5532
|
+
var displayName: string;
|
|
5533
|
+
}
|
|
5534
|
+
|
|
5535
|
+
/** @experimental */
|
|
5536
|
+
type MultiSelectProps<TItem = Option, TValue extends string = string> = Omit<ComboboxMultipleProps<TItem, TValue>, "multiple">;
|
|
5537
|
+
/**
|
|
5538
|
+
* `Combobox multiple`: values as `TValue[]`, chips inside the control, one
|
|
5539
|
+
* form entry per value.
|
|
3472
5540
|
*
|
|
3473
|
-
* @experimental
|
|
3474
|
-
* prop shapes may still change before the wave's exit review.
|
|
5541
|
+
* @experimental
|
|
3475
5542
|
*/
|
|
3476
|
-
declare
|
|
5543
|
+
declare function MultiSelect<TItem = Option, TValue extends string = string>(props: MultiSelectProps<TItem, TValue>): react_jsx_runtime.JSX.Element;
|
|
5544
|
+
declare namespace MultiSelect {
|
|
5545
|
+
var displayName: string;
|
|
5546
|
+
}
|
|
3477
5547
|
|
|
3478
5548
|
/**
|
|
3479
5549
|
* AgreementViewer — the chrome + navigation shell for a multi-step, branded
|
|
@@ -6756,4 +8826,78 @@ interface BrandScopeProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
|
6756
8826
|
*/
|
|
6757
8827
|
declare const BrandScope: React$1.ForwardRefExoticComponent<BrandScopeProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
6758
8828
|
|
|
6759
|
-
export { AIReceiptPanel, type AIReceiptPanelProps, type AIReceiptResult, Accordion, AccordionContent, AccordionItem, AccordionTrigger, type ActivityDotVariant, ActivityEventItem, type ActivityEventItemProps, ActivityItem, type ActivityItemProps, ActivityList, type ActivityListProps, type AgreementFirm, AgreementPaneHeading, type AgreementPaneHeadingProps, type AgreementStatus, type AgreementStep, AgreementViewer, type AgreementViewerProps, AiDraftCard, type AiDraftCardProps, type AiDraftState, Alert, AlertCircleIcon, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, type AlertDialogSlot, AlertDialogTitle, AlertDialogTrigger, type AlertProps, AlertTitle, AlertTriangleIcon, AlertTriangleSolidIcon, AppHeader, AppHeaderActions, type AppHeaderActionsProps, AppHeaderBreadcrumb, type AppHeaderBreadcrumbProps, type AppHeaderProps, AppHeaderSearch, type AppHeaderSearchProps, AppHeaderTitle, type AppHeaderTitleProps, ArchiveIcon, AreaChart, type AreaChartProps, type AreaPoint, ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowRightSmallIcon, ArrowUpIcon, AspectRatio, Assignee, AssureAuditBrandIcon, AssureBooksBrandIcon, AssureProBrandIcon, AssureTaxBrandIcon, AtSignIcon, AttachmentChip, type AttachmentChipProps, AttentionItem, type AttentionItemProps, type AttentionUrgency, Avatar, BRAND_PRODUCTS, Badge, type BadgeProps, type BadgeSlot, BarChartIcon, BellIcon, Blockquote, BoldIcon, BottomNav, type BottomNavProps, type BottomNavTab, BrainIcon, type BrandIconProps, type BrandProduct, BrandScope, type BrandScopeProps, BrandScopeProvider, Breadcrumb, BreadcrumbItem, type BreadcrumbItemProps, BreadcrumbLink, type BreadcrumbLinkProps, BreadcrumbList, type BreadcrumbListProps, BreadcrumbPage, type BreadcrumbPageProps, type BreadcrumbProps, BreadcrumbSeparator, type BreadcrumbSeparatorProps, BriefcaseIcon, Building2Icon, BuildingIcon, BulkActionBar, BulkActionBarAction, type BulkActionBarActionProps, type BulkActionBarProps, BulkActionBarSeparator, type BulkActionBarVariant, Button, type ButtonProps, type ButtonSize, type ButtonSlot, type ButtonVariant, COUNTRY_CODES, Calendar, type CalendarCaptionLayout, type CalendarHighlight, type CalendarHighlightColor, CalendarIcon, type CalendarProps, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, type CardVariants, CategoryDivider, type CategoryDividerProps, CategoryTag, type CategoryTagProps, type CategoryTone, type CellValue, type ChannelTabItem, ChannelTabs, type ChannelTabsProps, type ChannelTone, ChatBubbleIcon, CheckCircle2Icon, CheckCircleSolidIcon, CheckIcon, Checkbox, type CheckboxSlot, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ChevronsDownUpIcon, ChevronsUpDownIcon, CircleDotIcon, CircleIcon, ClientRailGroupHeader, type ClientRailGroupHeaderProps, ClientRailItem, type ClientRailItemProps, ClientSelect, type ClientSelectOption, ClipboardCheckIcon, ClockIcon, CloseIcon, Code, type CodeProps, type CodeSlot, type CodeVariant, Collapsible, CollapsibleContent, CollapsibleTrigger, ComingSoon, type ComingSoonProps, CommandIcon, type CommandItem, CommandPalette, ConfirmActionButton, type ConfirmActionButtonProps, Content, type ContentProps, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, type ContextMenuSlot, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, type ControlSize, CopyButton, CopyIcon, CornerDownLeftIcon, type CountryCode, CountryFlag, CountrySelect, CreditCardIcon, DATE_DISPLAY_PLACEHOLDER, DangerAction, type DangerActionProps, Dash, DashGrid, type DashGridProps, type DashWidget, DataItem, DataTable, DataTableBody, type DataTableBodyProps, DataTableCell, DataTableCellDue, type DataTableCellDueProps, DataTableCellId, DataTableCellMono, DataTableCellName, type DataTableCellProps, DataTableCheckbox, type DataTableCheckboxProps, DataTableHead, type DataTableHeadProps, DataTableHeader, type DataTableHeaderProps, DataTablePagination, type DataTablePaginationProps, type DataTableProps, DataTableResultsCount, type DataTableResultsCountProps, DataTableRow, type DataTableRowProps, DataTableSearch, type DataTableSearchProps, type DataTableSlot, DataTableSpacer, type DataTableSpacerProps, DataTableToolbar, type DataTableToolbarProps, DataTableView, type DataTableViewColumn, type DataTableViewFilter, type DataTableViewProps, type DataTableViewSelection, DatePicker, DateRangePicker, type DateRangeValue, DetailGrid, type DetailGridProps, DetailMain, type DetailMainProps, DetailSpine, DetailSpineHeader, type DetailSpineHeaderProps, type DetailSpineProps, DetailSpineSection, type DetailSpineSectionProps, DetailSpineStats, type DetailSpineStatsProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, type DialogSlot, DialogTitle, DialogTrigger, DismissibleChip, DisplayMenu, type DisplayMenuOption, type DisplayMenuProps, type DisplayMenuSection, DocumentChecklist, type DocumentChecklistFile, type DocumentChecklistItem, type DocumentChecklistProps, type DocumentChecklistStatus, DocumentDetailActions, type DocumentDetailActionsProps, DocumentDetailBody, type DocumentDetailBodyProps, DocumentDetailHeader, type DocumentDetailHeaderProps, DocumentDetailMetaRow, type DocumentDetailMetaRowProps, DocumentDetailPanel, type DocumentDetailPanelProps, DocumentDetailRequester, type DocumentDetailRequesterProps, DocumentDetailTitle, type DocumentDetailTitleProps, DocumentFileCard, type DocumentFileCardProps, DocumentFileLine, type DocumentFileLineProps, DocumentFileRow, type DocumentFileRowProps, DocumentIcon, type DocumentItemState, DocumentList, type DocumentListProps, DocumentListSection, type DocumentListSectionProps, type DocumentRequestActivityKind, type DocumentRequestAssigneeOption, DocumentRequestCard, type DocumentRequestCardProps, DocumentRequestDetail, type DocumentRequestDetailActivityEvent, type DocumentRequestDetailComment, type DocumentRequestDetailDoc, type DocumentRequestDetailProps, type DocumentRequestDetailTab, DocumentRequestField, type DocumentRequestFieldProps, type DocumentRequestItemSummary, type DocumentRequestRequestedItem, type DocumentRequestReviewStatusOption, type DocumentRequestTone, DocumentRequestUpload, type DocumentRequestUploadFile, type DocumentRequestUploadProps, DocumentRow, type DocumentRowProps, type DocumentSource, DocumentSourceFilter, type DocumentSourceFilterProps, type DocumentSourceFilterValue, DocumentSourceTag, type DocumentSourceTagProps, DocumentsWorkspaceLayout, type DocumentsWorkspaceLayoutProps, DollarSignIcon, DonutChart, type DonutChartProps, type DonutSegment, DownloadIcon, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, type DropdownMenuSlot, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmailMessageCard, type EmailMessageCardProps, EmptyState, type EmptyStateProps, EngagementCard, type EngagementCardProps, EngagementTimeline, type EngagementTimelineProps, EngagementTimelineStep, type EngagementTimelineStepProps, ExternalLinkIcon, ExtractIcon, EyeIcon, EyeOffIcon, Eyebrow, type EyebrowProps, FileChip, type FileChipProps, FileIcon, type FileKind, FileReturnIcon, FileTextIcon, FileTypeBadge, type FileTypeBadgeProps, type FileTypeTone, FileUpload, type FileUploadSlot, FilterChip, type FilterChipProps, FilterIcon, FlagIcon, FolderClosedIcon, type FolderNode, FolderOpenIcon, FolderPlusIcon, FolderTree, type FolderTreeProps, FolderUpIcon, FormError, FormSection, FormSuccess, GlobeIcon, GoogleBrandIcon, Grid, type GridColumn, type GridInputType, type GridProps, type GridRow, type GridValue, GripVerticalIcon, Heading, type HeadingLevel, type HeadingProps, type HeadingSize, type HeadingSlot, HelpCircleIcon, HistoryIcon, HomeIcon, HoverCard, HoverCardContent, HoverCardPortal, HoverCardTrigger, IconAction, type IconActionProps, type IconComponent, type IconDefinition, type IconProps, type IconSize, IconTile, type IconTileProps, InboxIcon, InfoCircleSolidIcon, InfoIcon, Inline, type InlineProps, type InlineSlot, Input, type InputSlot, type InputVariants, type Intent, IntentBadge, type IntentBadgeProps, type IntentTone, ItalicIcon, Kanban, KanbanCard, type KanbanCardProps, KanbanColumn, type KanbanColumnProps, KanbanIcon, type KanbanProps, Kbd, type KbdGlyph, KbdHint, type KbdHintProps, type KbdProps, type KbdSlot, type KbdVariant, KeyIcon, type KeyboardShortcut, type KeyboardShortcutSection, KeyboardShortcutsDialog, type KeyboardShortcutsDialogProps, KpiCard, type KpiCardProps, type KpiDelta, Label, type LabelSlot, LandmarkIcon, LayersIcon, type LayoutAlign, type LayoutBreakpoint, LayoutDashboardIcon, type LayoutGap, LayoutGridIcon, type LayoutJustify, LayoutListIcon, LightningIcon, Link2Icon, LinkAction, type LinkActionProps, LinkButton, type LinkButtonProps$1 as LinkButtonProps, type LinkButtonSlot, LinkIcon, ListChecksIcon, ListIcon, ListOrderedIcon, LoaderIcon, LoadingRows, LockIcon, LockKeyholeIcon, LockOpenIcon, LogOutIcon, Logo, MailIcon, Main, type MainProps, MapPinIcon, MasterDetailLayout, type MasterDetailLayoutProps, MaximizeIcon, MenuIcon, MessageBubble, MessageBubbleAction, type MessageBubbleActionProps, type MessageBubbleProps, MessageBubbleTombstone, type MessageBubbleTombstoneProps, MessageCircleIcon, MessageCircleWarningIcon, MessageComposer, type MessageComposerProps, MetadataGrid, MicIcon, MicrosoftBrandIcon, MinimizeIcon, MinusIcon, type MissingDocumentItem, MissingDocumentsPanel, type MissingDocumentsPanelProps, MoneyCell, MonitorIcon, MoonIcon, MoreHorizontalIcon, MoveIcon, MultiFilterPill, MultiSelectField, MutedSpec, type MutedSpecProps, NewMenu, type NewMenuAction, type NewMenuGroup, type NewMenuProps, NotificationFilter, type NotificationFilterProps, type NotificationFilterValue, NotificationItem, type NotificationItemProps, NotificationList, type NotificationListProps, NotificationPanel, NotificationPanelFooter, type NotificationPanelFooterProps, NotificationPanelHeader, type NotificationPanelHeaderProps, type NotificationPanelProps, Numeric, type NumericProps, OTPInput, PageHeader, type PageHeaderProps, PageHeaderSep, type PageHeaderSepProps, PageHeaderSpec, type PageHeaderSpecProps, Pagination, type PaginationProps, type PaginationSlot, PaletteIcon, PanelLeftCloseIcon, PanelLeftIcon, PanelRightIcon, PaperclipIcon, PauseIcon, PdfPreview, type PdfPreviewProps, PenSignIcon, PenToolIcon, PencilIcon, PhoneCountryInput, PhoneIcon, PhoneInput, type PillStatus, PlayIcon, PlusIcon, Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverPortal, type PopoverSlot, PopoverTrigger, PrimaryAction, type PrimaryActionProps, type Priority, PriorityIcon, type PriorityIconProps, ProgressBar, type ProgressBarProps, ProgressRing, type ProgressRingProps, ProposalAddOn, type ProposalAddOnProps, type ProposalBillingMode, type ProposalBillingRow, ProposalBillingTerms, type ProposalBillingTermsProps, ProposalConsentGate, type ProposalConsentGateProps, ProposalCustomPage, type ProposalCustomPageKind, type ProposalCustomPageProps, ProposalNote, type ProposalNoteProps, ProposalPackageCard, type ProposalPackageCardProps, type ProposalPackageMode, ProposalPaymentCapture, type ProposalPaymentCaptureProps, ProposalPricingSummary, type ProposalPricingSummaryProps, ProposalServiceRow, type ProposalServiceRowProps, ProposalSignatureBlock, type ProposalSignatureBlockProps, type ProposalSigner, ProposalSignerList, type ProposalSignerListProps, type ProposalSignerStatus, type QuestionAddressValue, type QuestionFileValue, type QuestionHelp, type QuestionLabeledColumn, type QuestionLabeledRow, type QuestionLabeledValue, type QuestionNameValue, type QuestionOption, type QuestionTableColumn, type QuestionTableRow, type QuestionType, QuestionnairePanel, type QuestionnairePanelGroup, type QuestionnairePanelProps, type QuestionnairePanelSection, type QuestionnairePanelStatus, Questions, type QuestionsProps, type QuickReplyChip, RadioGroup, RadioGroupItem, type RadioGroupSlot, type RankedBar, RankedBars, type RankedBarsProps, ReceiptIcon, RefreshCwIcon, ReplyIcon, type Responsive, ResponsiveDialog, type ResponsiveDialogProps, RotateCcwIcon, RouteTransition, type RouteTransitionProps, SERVICE_TONES, SaveIcon, ScrollArea, ScrollBar, SearchIcon, SearchInput, type SearchInputSlot, type SearchInputVariants, SearchSelect, type SearchSelectOption, SecondaryAction, type SecondaryActionProps, Section, SectionHead, SectionHeader, SegmentedProgress, type SegmentedProgressProps, type SegmentedTone, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, type SelectOption, type SelectProps, SelectRoot, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, type SelectSlot, SelectTrigger, SelectValue, SelectableKpiCard, type SelectableKpiCardProps, SendIcon, Separator, type ServiceTone, SettingsIcon, type Shape, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, type SheetSlot, SheetTitle, SheetTrigger, Shell, type ShellProps, type ShellSlot, ShieldIcon, SideDrawer, type SideDrawerSlot, Sidebar, SidebarBrand, type SidebarBrandProps, SidebarBrandSwitcher, type SidebarBrandSwitcherExtra, type SidebarBrandSwitcherItem, type SidebarBrandSwitcherProps, type SidebarBrandSwitcherSlot, SidebarBrandSwitcherTile, SidebarBrandText, type SidebarBrandTextProps, SidebarFooter, type SidebarFooterProps, SidebarLink, SidebarLinkAction, type SidebarLinkActionProps, SidebarLinkBadge, type SidebarLinkBadgeProps, type SidebarLinkBadgeVariants, SidebarLinkGroup, type SidebarLinkGroupProps, SidebarLinkLabel, type SidebarLinkLabelProps, type SidebarLinkProps, SidebarPinButton, type SidebarPinButtonProps, type SidebarProps, SidebarProvider, type SidebarProviderProps, SidebarSection, type SidebarSectionProps, type SidebarSlot, type SidebarState, SidebarTrigger, type SidebarTriggerProps, SidebarUser, type SidebarUserProps, SigmaIcon, SignatureEditor, type SignatureEditorProps, Skeleton, SkeletonCircle, SkeletonText, SlashIcon, Slider, SmartphoneIcon, type SortDirection, SparkleIcon, SparklesIcon, Spinner, type SpinnerProps, SpreadsheetPreview, type SpreadsheetPreviewProps, Stack, type StackDirection, type StackProps, type StackSlot, StackedBarChart, type StackedBarChartProps, type StackedBarDatum, type StackedBarSeries, StagePill, StarIcon, StarRating, type StarRatingProps, Stat, StatusDot, type StatusDotProps, StatusIcon, type StatusIconProps, StatusPill, type StatusPillProps, type StatusState, type Step, Stepper, type StepperProps, StickyActionBar, type StickyActionBarProps, StickyStack, StickyStackLayer, type StickyStackLayerProps, type StickyStackProps, StickyStackSectionHeader, type StickyStackSectionHeaderProps, StickyStackSticky, type StickyStackStickyProps, StopIcon, StrikethroughIcon, SubmitButton, SuggestionPills, type SuggestionPillsProps, SuiteProgress, type SuiteProgressProps, type SuiteProgressSize, type SuiteProgressTone, SunIcon, Surface, type SurfaceElevation, type SurfacePadding, type SurfaceProps, type SurfaceRadius, type SurfaceSlot, Switch, type SwitchSlot, SystemTokens, Table, TableBody, type TableBodyProps, TableCaption, type TableCaptionProps, TableCell, type TableCellProps, TableFooter, type TableFooterProps, TableHead, type TableHeadProps, TableHeader, type TableHeaderProps, TableIcon, type TableProps, TableRow, type TableRowData, type TableRowProps, type TableSlot, type TableTone, Tabs, TabsContent, TabsList, TabsTrigger, TagIcon, TagsCell, TeamIcon, TeamMemberSelect, Text, type TextColor, type TextProps, type TextSize, type TextSlot, type TextWeight, Textarea, type TextareaSlot, type TextareaVariants, ThumbsDownIcon, ThumbsUpIcon, TimeLogger, TimeLoggerActions, type TimeLoggerActionsProps, TimeLoggerBillable, type TimeLoggerBillableProps, TimeLoggerContextRow, type TimeLoggerContextRowProps, TimeLoggerEntry, TimeLoggerEntryList, type TimeLoggerEntryListProps, type TimeLoggerEntryProps, TimeLoggerField, type TimeLoggerFieldProps, TimeLoggerFooter, type TimeLoggerFooterProps, TimeLoggerHeader, type TimeLoggerHeaderProps, TimeLoggerNotes, type TimeLoggerNotesProps, type TimeLoggerPhase, type TimeLoggerProps, type TimeLoggerTier, TimeLoggerTimer, type TimeLoggerTimerProps, type TimelineState, TimerIcon, type ToastAction, type ToastContextValue, type ToastOptions, ToastProvider, type ToastSlot, type ToastVariant, ToggleGroup, ToggleGroupItem, Toolbar, type ToolbarProps, Tooltip, TooltipContent, TooltipPortal, TooltipProvider, type TooltipSlot, TooltipTrigger, Trash2Icon, TrashIcon, TrashSolidIcon, TrendingDownIcon, TrendingUpIcon, UnderlineIcon, UploadIcon, type UseStopwatchReturn, UserCircleIcon, UserIcon, UsersIcon, type Variant, VideoIcon, VisuallyHidden, Volume2Icon, VolumeXIcon, WorkflowIcon, XCircleSolidIcon, XIcon, YEAR_DISPLAY_PLACEHOLDER, ZoomInIcon, ZoomOutIcon, alertVariants, applyMask, applyYearMask, assetPath, attachmentChipVariants, badgeVariants, brandLabel, brandScope, buttonVariants, cardVariants, cn, createIcon, dateToIso, displayToIso, fileTypeBadgeVariants, fileTypeFromName, filterChipVariants, formatClock, formatCurrency, formatDuration, getAssetBasePath, getFlagEmoji, iconTileVariants, inputVariants, isoToDate, isoToDisplay, isoToYear, labelVariants, parseDuration, parsePhoneForEditing, progressBarVariants, progressRingVariants, searchInputVariants, serviceToneLabel, serviceToneStyle, setAssetBasePath, sidebarLinkBadgeVariants, spinnerVariants, starRatingVariants, statusDotVariants, suiteProgressFillVariants, textareaVariants, useBrandScope, useSidebarPeekLock, useSidebarState, useStopwatch, useToast, yearToIso };
|
|
8829
|
+
/**
|
|
8830
|
+
* Theme scope — the host dimensions a subtree renders with (W5-02).
|
|
8831
|
+
*
|
|
8832
|
+
* The design system's scopes are DOM attributes: `[data-ds-scheme]`,
|
|
8833
|
+
* `[data-ds-brand]`, `[data-ds-density]`, `dir`, and the `--ds-*` style a
|
|
8834
|
+
* runtime brand writes (`createBrandTheme`). Set on the document root they
|
|
8835
|
+
* reach everything, portalled overlays included. Set on a *subtree* they stop
|
|
8836
|
+
* at the subtree: a Dialog or Popover opened from inside it renders in
|
|
8837
|
+
* `document.body`, outside the scope, and comes up in the root theme.
|
|
8838
|
+
*
|
|
8839
|
+
* `ThemeScope` fixes that. It stamps the attributes on its own element, as a
|
|
8840
|
+
* hand-written scope would, **and** registers them in context, so the shared
|
|
8841
|
+
* `Portal` (`primitives/behavior/portal.tsx`) can re-stamp the same attributes
|
|
8842
|
+
* and runtime-brand style on the container wrapper it mounts portalled content
|
|
8843
|
+
* into. Nested scopes merge: a `density="compact"` scope inside a `brand="tax"`
|
|
8844
|
+
* one propagates both.
|
|
8845
|
+
*
|
|
8846
|
+
* Apps that scope the document root need none of this; the portal path is
|
|
8847
|
+
* unchanged for them (no wrapper is created).
|
|
8848
|
+
*/
|
|
8849
|
+
/** The scheme a subtree renders with (`[data-ds-scheme]`). */
|
|
8850
|
+
type ThemeScheme = "light" | "dark";
|
|
8851
|
+
/** A built-in brand scope (`[data-ds-brand]`). */
|
|
8852
|
+
type ThemeBrand = "pro" | "audit" | "books" | "tax";
|
|
8853
|
+
/** The density scope (`[data-ds-density]`, W2-06). */
|
|
8854
|
+
type ThemeDensity = "comfortable" | "compact";
|
|
8855
|
+
/** Text direction (`dir`). */
|
|
8856
|
+
type ThemeDirection = "ltr" | "rtl";
|
|
8857
|
+
/**
|
|
8858
|
+
* The dimensions a scope sets. Every field is optional; an unset field is
|
|
8859
|
+
* inherited from the enclosing scope, then from the document.
|
|
8860
|
+
*
|
|
8861
|
+
* @experimental
|
|
8862
|
+
*/
|
|
8863
|
+
interface ThemeScopeValue {
|
|
8864
|
+
scheme?: ThemeScheme;
|
|
8865
|
+
brand?: ThemeBrand;
|
|
8866
|
+
density?: ThemeDensity;
|
|
8867
|
+
dir?: ThemeDirection;
|
|
8868
|
+
/**
|
|
8869
|
+
* A registered runtime brand: the object `createBrandTheme()` returns. It is
|
|
8870
|
+
* applied as inline `--ds-*` style on the scope element and re-applied on
|
|
8871
|
+
* portalled content.
|
|
8872
|
+
*/
|
|
8873
|
+
brandTheme?: BrandTheme;
|
|
8874
|
+
}
|
|
8875
|
+
/** Props of {@link ThemeScope}. @experimental */
|
|
8876
|
+
interface ThemeScopeProps extends ThemeScopeValue, Omit<React.HTMLAttributes<HTMLDivElement>, "dir"> {
|
|
8877
|
+
children?: ReactNode;
|
|
8878
|
+
}
|
|
8879
|
+
/**
|
|
8880
|
+
* A `<div>` that scopes the host dimensions of its subtree — scheme, brand,
|
|
8881
|
+
* density, direction and a runtime brand — and propagates them into every
|
|
8882
|
+
* overlay opened from inside it (Dialog, Sheet, Popover, Tooltip, menus,
|
|
8883
|
+
* Select, Toast …), which would otherwise render in the document's theme.
|
|
8884
|
+
*
|
|
8885
|
+
* ```tsx
|
|
8886
|
+
* <ThemeScope brand="tax" density="compact">
|
|
8887
|
+
* <Popover>…</Popover> // its content renders as compact Tax, too
|
|
8888
|
+
* </ThemeScope>
|
|
8889
|
+
*
|
|
8890
|
+
* <ThemeScope brandTheme={createBrandTheme({ brand: firm.primary })}>
|
|
8891
|
+
* <Dialog>…</Dialog> // the runtime brand follows the dialog to <body>
|
|
8892
|
+
* </ThemeScope>
|
|
8893
|
+
* ```
|
|
8894
|
+
*
|
|
8895
|
+
* Nothing changes for apps that scope `<html>` or `<body>`: no wrapper is
|
|
8896
|
+
* created around portalled content when no `ThemeScope` encloses it.
|
|
8897
|
+
*
|
|
8898
|
+
* @experimental W5-02. The public shape follows decision D7 for the runtime
|
|
8899
|
+
* brand seed.
|
|
8900
|
+
*/
|
|
8901
|
+
declare const ThemeScope: React$1.ForwardRefExoticComponent<ThemeScopeProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
8902
|
+
|
|
8903
|
+
export { AIReceiptPanel, type AIReceiptPanelProps, type AIReceiptResult, Accordion, AccordionContent, AccordionItem, AccordionTrigger, type ActivityDotVariant, ActivityEventItem, type ActivityEventItemProps, ActivityItem, type ActivityItemProps, ActivityList, type ActivityListProps, type AgreementFirm, AgreementPaneHeading, type AgreementPaneHeadingProps, type AgreementStatus, type AgreementStep, AgreementViewer, type AgreementViewerProps, AiDraftCard, type AiDraftCardProps, type AiDraftState, Alert, AlertDescription, AlertDialog, AlertDialogAction, type AlertDialogActionProps, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, type AlertDialogSlot, AlertDialogTitle, AlertDialogTrigger, type AlertProps, AlertTitle, AppHeader, AppHeaderActions, type AppHeaderActionsProps, AppHeaderBreadcrumb, type AppHeaderBreadcrumbProps, type AppHeaderProps, AppHeaderSearch, type AppHeaderSearchProps, AppHeaderTitle, type AppHeaderTitleProps, AreaChart, type AreaChartProps, type AreaPoint, AspectRatio, Assignee, AssureAuditBrandIcon, AssureBooksBrandIcon, AssureProBrandIcon, AssureTaxBrandIcon, AttachmentChip, type AttachmentChipProps, AttentionItem, type AttentionItemProps, type AttentionUrgency, Avatar, type AvatarProps, type AvatarSlot, BRAND_PRODUCTS, Badge, type BadgeAppearance, type BadgeAppearanceInput, type BadgeLegacyVariant, type BadgeProps, type BadgeShape, type BadgeSize, type BadgeSlot, type BadgeVariant, type BadgeVariantsProps, Blockquote, BottomNav, type BottomNavProps, type BottomNavTab, type BrandIconProps, type BrandProduct, BrandScope, type BrandScopeProps, BrandScopeProvider, Breadcrumb, BreadcrumbItem, type BreadcrumbItemProps, BreadcrumbLink, type BreadcrumbLinkProps, BreadcrumbList, type BreadcrumbListProps, BreadcrumbPage, type BreadcrumbPageProps, type BreadcrumbProps, BreadcrumbSeparator, type BreadcrumbSeparatorProps, BulkActionBar, BulkActionBarAction, type BulkActionBarActionProps, type BulkActionBarProps, BulkActionBarSeparator, type BulkActionBarVariant, Button, type ButtonEmphasis, type ButtonIconProps, type ButtonIconSize, type ButtonIntent, type ButtonIntentAlias, type ButtonLegacyVariant, type ButtonLook, type ButtonProps, type ButtonSize, type ButtonSizeAlias, type ButtonSlot, type ButtonStyle, type ButtonVariant, type ButtonVariantsProps, COUNTRY_CODES, Calendar, type CalendarBaseProps, type CalendarCaptionLayout, type CalendarHighlight, type CalendarHighlightColor, type CalendarProps, type CalendarRange, type CalendarRangeProps, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, type CardProps, type CardSlot, CardTitle, type CardTitleProps, type CardVariants, CategoryDivider, type CategoryDividerProps, CategoryTag, type CategoryTagProps, type CategoryTone, type CellValue, type ChannelTabItem, ChannelTabs, type ChannelTabsProps, type ChannelTone, Checkbox, type CheckboxChecked, type CheckboxProps, type CheckboxSlot, Chip, type ChipIntent, type ChipProps, type ChipSize, type ChipSlot, type ChipStyle, type ChipVariant, ClientRailGroupHeader, type ClientRailGroupHeaderProps, ClientRailItem, type ClientRailItemProps, ClientSelect, type ClientSelectOption, Code, type CodeProps, type CodeSlot, type CodeVariant, Collapsible, CollapsibleContent, CollapsibleTrigger, Combobox, type ComboboxBaseProps, type ComboboxClassNames, ComboboxMessages, type ComboboxMultipleProps, type ComboboxOptionState, type ComboboxProps, type ComboboxSelectionControls, type ComboboxSingleProps, type ComboboxSize, type ComboboxSlot, ComingSoon, type ComingSoonProps, type CommandItem, CommandPalette, ConfirmActionButton, type ConfirmActionButtonProps, Content, type ContentProps, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, type ContextMenuSlot, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, ControlSize, CopyButton, type CountryCode, CountryFlag, CountrySelect, DATE_DISPLAY_PLACEHOLDER, DEFAULT_COMBOBOX_MESSAGES, DEFAULT_PHONE_FIELD_MESSAGES, DangerAction, type DangerActionProps, Dash, DashGrid, type DashGridProps, type DashWidget, DataItem, DataTable, DataTableBody, type DataTableBodyProps, DataTableCell, DataTableCellDue, type DataTableCellDueProps, DataTableCellId, DataTableCellMono, DataTableCellName, type DataTableCellProps, DataTableCheckbox, type DataTableCheckboxProps, DataTableHead, type DataTableHeadProps, DataTableHeader, type DataTableHeaderProps, DataTablePagination, type DataTablePaginationProps, type DataTableProps, DataTableResultsCount, type DataTableResultsCountProps, DataTableRow, type DataTableRowProps, DataTableSearch, type DataTableSearchProps, type DataTableSlot, DataTableSpacer, type DataTableSpacerProps, DataTableToolbar, type DataTableToolbarProps, DataTableView, type DataTableViewColumn, type DataTableViewFilter, type DataTableViewProps, type DataTableViewSelection, type DatePattern, DatePicker, type DatePickerProps, type DateRangeNames, DateRangePicker, type DateRangePickerProps, type DateRangeValue, DetailGrid, type DetailGridProps, DetailMain, type DetailMainProps, DetailSpine, DetailSpineHeader, type DetailSpineHeaderProps, type DetailSpineProps, DetailSpineSection, type DetailSpineSectionProps, DetailSpineStats, type DetailSpineStatsProps, Dialog, DialogBody, type DialogBodyProps, DialogClose, DialogContent, type DialogContentProps, DialogDescription, DialogFooter, DialogHeader, type DialogHeight, type DialogMessages, DialogOverlay, DialogPortal, type DialogSize$1 as DialogSize, type DialogSlot, DialogTitle, DialogTrigger, DismissibleChip, DisplayMenu, type DisplayMenuOption, type DisplayMenuProps, type DisplayMenuSection, DocumentChecklist, type DocumentChecklistFile, type DocumentChecklistItem, type DocumentChecklistProps, type DocumentChecklistStatus, DocumentDetailActions, type DocumentDetailActionsProps, DocumentDetailBody, type DocumentDetailBodyProps, DocumentDetailHeader, type DocumentDetailHeaderProps, DocumentDetailMetaRow, type DocumentDetailMetaRowProps, DocumentDetailPanel, type DocumentDetailPanelProps, DocumentDetailRequester, type DocumentDetailRequesterProps, DocumentDetailTitle, type DocumentDetailTitleProps, DocumentFileCard, type DocumentFileCardProps, DocumentFileLine, type DocumentFileLineProps, DocumentFileRow, type DocumentFileRowProps, type DocumentItemState, DocumentList, type DocumentListProps, DocumentListSection, type DocumentListSectionProps, type DocumentRequestActivityKind, type DocumentRequestAssigneeOption, DocumentRequestCard, type DocumentRequestCardProps, DocumentRequestDetail, type DocumentRequestDetailActivityEvent, type DocumentRequestDetailComment, type DocumentRequestDetailDoc, type DocumentRequestDetailProps, type DocumentRequestDetailTab, DocumentRequestField, type DocumentRequestFieldProps, type DocumentRequestItemSummary, type DocumentRequestRequestedItem, type DocumentRequestReviewStatusOption, type DocumentRequestTone, DocumentRequestUpload, type DocumentRequestUploadFile, type DocumentRequestUploadProps, DocumentRow, type DocumentRowProps, type DocumentSource, DocumentSourceFilter, type DocumentSourceFilterProps, type DocumentSourceFilterValue, DocumentSourceTag, type DocumentSourceTagProps, DocumentsWorkspaceLayout, type DocumentsWorkspaceLayoutProps, DonutChart, type DonutChartProps, type DonutSegment, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, type DropdownMenuSlot, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmailMessageCard, type EmailMessageCardProps, EmptyState, type EmptyStateProps, EngagementCard, type EngagementCardProps, EngagementTimeline, type EngagementTimelineProps, EngagementTimelineStep, type EngagementTimelineStepProps, Eyebrow, type EyebrowProps, Field, FieldControl, type FieldControlProps, type FieldControlWiring, FieldDescription, type FieldDescriptionProps, FieldError, type FieldErrorProps, FieldMessages, type FieldOrientation, type FieldProps, type FieldSlot, Fieldset, FieldsetLegend, type FieldsetLegendProps, type FieldsetProps, type FieldsetSlot, FileChip, type FileChipProps, type FileKind, FileTypeBadge, type FileTypeBadgeProps, type FileTypeTone, FileUpload, FileUploadMessages, type FileUploadProps, type FileUploadSlot, type FileUploadVariant, FilterChip, type FilterChipProps, type FolderNode, FolderTree, type FolderTreeProps, FormError, FormSection, FormSuccess, Grid, type GridColumn, type GridInputType, type GridProps, type GridRow, type GridValue, Heading, type HeadingLevel, type HeadingProps, type HeadingSize, type HeadingSlot, HoverCard, HoverCardContent, HoverCardPortal, HoverCardTrigger, ICON_TILE_TONE_TO_INTENT, IconAction, type IconActionProps, IconButton, type IconButtonProps, type IconButtonSize, type IconButtonSlot, type IconButtonTooltipSide, IconTile, type IconTileIntent, type IconTileProps, type IconTileSize, type IconTileSuiteTone, type IconTileTone, type IconTileVariantProps, Inline, type InlineProps, type InlineSlot, Input, type InputProps$1 as InputProps, type InputSize, type InputSizeAlias, type InputSlot, type InputVariant, type InputVariants, type InputVariantsOptions, Intent, IntentBadge, type IntentBadgeProps, type IntentTone, Kanban, KanbanCard, type KanbanCardProps, KanbanColumn, type KanbanColumnProps, type KanbanProps, Kbd, type KbdGlyph, KbdHint, type KbdHintProps, type KbdProps, type KbdSlot, type KbdVariant, type KeyboardShortcut, type KeyboardShortcutSection, KeyboardShortcutsDialog, type KeyboardShortcutsDialogProps, KpiCard, type KpiCardProps, type KpiDelta, Label, type LabelSlot, type LayoutAlign, type LayoutBreakpoint, type LayoutGap, type LayoutJustify, LinkAction, type LinkActionProps, LinkButton, type LinkButtonProps$1 as LinkButtonProps, type LinkButtonSlot, LoadingRows, Logo, Main, type MainProps, MasterDetailLayout, type MasterDetailLayoutProps, MessageBubble, MessageBubbleAction, type MessageBubbleActionProps, type MessageBubbleProps, MessageBubbleTombstone, type MessageBubbleTombstoneProps, MessageComposer, type MessageComposerProps, MetadataGrid, type MissingDocumentItem, MissingDocumentsPanel, type MissingDocumentsPanelProps, MoneyCell, MultiFilterPill, MultiSelect, MultiSelectField, type MultiSelectProps, MutedSpec, type MutedSpecProps, NewMenu, type NewMenuAction, type NewMenuGroup, type NewMenuProps, NotificationFilter, type NotificationFilterProps, type NotificationFilterValue, NotificationItem, type NotificationItemProps, NotificationList, type NotificationListProps, NotificationPanel, NotificationPanelFooter, type NotificationPanelFooterProps, NotificationPanelHeader, type NotificationPanelHeaderProps, type NotificationPanelProps, NumberInput, type NumberInputProps, type NumberInputSlot, Numeric, type NumericProps, OTPInput, type OTPInputProps, type OnlyStatuses, type Option, type OptionAccessors, PROGRESS_LEGACY_TO_INTENT, PageHeader, type PageHeaderProps, PageHeaderSep, type PageHeaderSepProps, PageHeaderSpec, type PageHeaderSpecProps, Pagination, type PaginationProps, type PaginationSlot, PdfPreview, type PdfPreviewProps, PhoneCountryInput, PhoneField, type PhoneFieldChangeDetails, type PhoneFieldMessages, type PhoneFieldProps, type PhoneFieldSlot, PhoneInput, type PillStatus, Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverPortal, type PopoverSlot, PopoverTrigger, Pressable, type PressableProps, type PressableSlot, PrimaryAction, type PrimaryActionProps, type Priority, PriorityIcon, type PriorityIconProps, ProgressBar, type ProgressBarProps, type ProgressBarVariant, type ProgressBarVariantProps, type ProgressIntent, type ProgressLegacyColour, ProgressRing, type ProgressRingProps, type ProgressRingVariant, type ProgressRingVariantProps, ProposalAddOn, type ProposalAddOnProps, type ProposalBillingMode, type ProposalBillingRow, ProposalBillingTerms, type ProposalBillingTermsProps, ProposalConsentGate, type ProposalConsentGateProps, ProposalCustomPage, type ProposalCustomPageKind, type ProposalCustomPageProps, ProposalNote, type ProposalNoteProps, ProposalPackageCard, type ProposalPackageCardProps, type ProposalPackageMode, ProposalPaymentCapture, type ProposalPaymentCaptureProps, ProposalPricingSummary, type ProposalPricingSummaryProps, ProposalServiceRow, type ProposalServiceRowProps, ProposalSignatureBlock, type ProposalSignatureBlockProps, type ProposalSigner, ProposalSignerList, type ProposalSignerListProps, type ProposalSignerStatus, type QuestionAddressValue, type QuestionFileValue, type QuestionHelp, type QuestionLabeledColumn, type QuestionLabeledRow, type QuestionLabeledValue, type QuestionNameValue, type QuestionOption, type QuestionTableColumn, type QuestionTableRow, type QuestionType, QuestionnairePanel, type QuestionnairePanelGroup, type QuestionnairePanelProps, type QuestionnairePanelSection, type QuestionnairePanelStatus, Questions, type QuestionsProps, type QuickReplyChip, RadioGroup, type RadioGroupAppearance, RadioGroupItem, type RadioGroupItemProps, type RadioGroupProps, type RadioGroupSlot, type RankedBar, RankedBars, type RankedBarsProps, type Responsive, ResponsiveDialog, type ResponsiveDialogProps, RouteTransition, type RouteTransitionProps, SERVICE_TONES, SPINNER_TONE_TO_INTENT, STATUS_DOT_TONE_TO_INTENT, ScrollArea, ScrollBar, SearchInput, SearchInputMessages, type SearchInputProps, type SearchInputSize, type SearchInputSlot, type SearchInputVariants, type SearchInputVariantsOptions, SearchSelect, type SearchSelectOption, type SearchSelectProps, SecondaryAction, type SecondaryActionProps, Section, SectionHead, SectionHeader, SegmentedProgress, type SegmentedProgressProps, type SegmentedServiceTone, type SegmentedTone, Select, type SelectClassNames, SelectContent, type SelectContentProps, SelectGroup, SelectItem, SelectLabel, SelectMessages, type SelectOption, type SelectProps, SelectRoot, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, type SelectSize, type SelectSlot, SelectTrigger, type SelectTriggerProps, SelectValue, SelectableKpiCard, type SelectableKpiCardProps, Separator, type ServiceTone, Shape, Sheet, SheetBody, type SheetBodyProps, SheetClose, SheetContent, type SheetContentProps, SheetDescription, SheetFooter, SheetHeader, type SheetMessages, SheetOverlay, SheetPortal, type SheetSide, type SheetSize, type SheetSlot, SheetTitle, SheetTrigger, type SheetWidth, Shell, type ShellProps, type ShellSlot, SideDrawer, type SideDrawerSlot, Sidebar, SidebarBrand, type SidebarBrandProps, SidebarBrandSwitcher, type SidebarBrandSwitcherExtra, type SidebarBrandSwitcherItem, type SidebarBrandSwitcherProps, type SidebarBrandSwitcherSlot, SidebarBrandSwitcherTile, SidebarBrandText, type SidebarBrandTextProps, SidebarFooter, type SidebarFooterProps, SidebarLink, SidebarLinkAction, type SidebarLinkActionProps, SidebarLinkBadge, type SidebarLinkBadgeProps, type SidebarLinkBadgeVariants, SidebarLinkGroup, type SidebarLinkGroupProps, SidebarLinkLabel, type SidebarLinkLabelProps, type SidebarLinkProps, SidebarPinButton, type SidebarPinButtonProps, type SidebarProps, SidebarProvider, type SidebarProviderProps, SidebarSection, type SidebarSectionProps, type SidebarSlot, type SidebarState, SidebarTrigger, type SidebarTriggerProps, SidebarUser, type SidebarUserProps, SignatureEditor, type SignatureEditorProps, Skeleton, SkeletonCircle, SkeletonText, Slider, type SliderProps, type SliderSize, type SortDirection, Spinner, type SpinnerIntent, type SpinnerProps, type SpinnerSize, type SpinnerTone, type SpinnerVariantProps, SpreadsheetPreview, type SpreadsheetPreviewProps, Stack, type StackDirection, type StackProps, type StackSlot, StackedBarChart, type StackedBarChartProps, type StackedBarDatum, type StackedBarSeries, StagePill, StarRating, type StarRatingProps, Stat, StatusBadge, type StatusBadgeProps, type StatusBadgeSlot, StatusDot, type StatusDotIntent, type StatusDotProps, type StatusDotSize, type StatusDotTone, type StatusDotVariantProps, StatusIcon, type StatusIconProps, type StatusMap, StatusPill, type StatusPillProps, type StatusPresentation, type StatusState, type Step, Stepper, type StepperProps, StickyActionBar, type StickyActionBarProps, StickyStack, StickyStackLayer, type StickyStackLayerProps, type StickyStackProps, StickyStackSectionHeader, type StickyStackSectionHeaderProps, StickyStackSticky, type StickyStackStickyProps, SubmitButton, SuggestionPills, type SuggestionPillsProps, SuiteProgress, type SuiteProgressFillVariantProps, type SuiteProgressProps, type SuiteProgressSize, type SuiteProgressSuiteTone, type SuiteProgressTone, Surface, type SurfaceElevation, type SurfacePadding, type SurfaceProps, type SurfaceRadius, type SurfaceSlot, Switch, type SwitchProps, type SwitchSize, type SwitchSlot, Table, TableBody, type TableBodyProps, TableCaption, type TableCaptionProps, TableCell, type TableCellProps, TableFooter, type TableFooterProps, TableHead, type TableHeadProps, TableHeader, type TableHeaderProps, type TableProps, TableRow, type TableRowData, type TableRowProps, type TableSlot, type TableTone, Tabs, TabsContent, TabsList, TabsTrigger, TagsCell, TeamMemberSelect, Text, type TextColor, type TextProps, type TextSize, type TextSlot, type TextWeight, Textarea, type TextareaProps, type TextareaSize, type TextareaSlot, type TextareaVariant, type TextareaVariants, type TextareaVariantsOptions, type ThemeBrand, type ThemeDensity, type ThemeDirection, type ThemeScheme, ThemeScope, type ThemeScopeProps, type ThemeScopeValue, TimeLogger, TimeLoggerActions, type TimeLoggerActionsProps, TimeLoggerBillable, type TimeLoggerBillableProps, TimeLoggerContextRow, type TimeLoggerContextRowProps, TimeLoggerEntry, TimeLoggerEntryList, type TimeLoggerEntryListProps, type TimeLoggerEntryProps, TimeLoggerField, type TimeLoggerFieldProps, TimeLoggerFooter, type TimeLoggerFooterProps, TimeLoggerHeader, type TimeLoggerHeaderProps, TimeLoggerNotes, type TimeLoggerNotesProps, type TimeLoggerPhase, type TimeLoggerProps, type TimeLoggerTier, TimeLoggerTimer, type TimeLoggerTimerProps, type TimelineState, type ToastAction, type ToastContextValue, type ToastOptions, ToastProvider, type ToastSlot, type ToastVariant, ToggleGroup, type ToggleGroupFormProps, ToggleGroupItem, type ToggleGroupItemProps, type ToggleGroupProps, type ToggleGroupSize, type ToggleGroupVariant, Toolbar, type ToolbarProps, Tooltip, TooltipContent, TooltipPortal, TooltipProvider, type TooltipSlot, TooltipTrigger, type UseFieldControlProps, type UseStopwatchReturn, Variant, VisuallyHidden, YEAR_DISPLAY_PLACEHOLDER, alertVariants, applyMask, applyYearMask, assetPath, attachmentChipVariants, badgeVariants, brandLabel, brandScope, buttonVariants, cardVariants, chipVariants, cn, dateToIso, defineStatusMap, displayToIso, fileTypeBadgeVariants, fileTypeFromName, filterChipVariants, formatClock, formatCurrency, formatDuration, getAssetBasePath, getFlagEmoji, iconButtonVariants, resolveIconTileVariants as iconTileVariants, inputVariants, isoToDate, isoToDisplay, isoToYear, labelVariants, parseDuration, parsePhoneForEditing, progressBarVariants, progressRingVariants, resolveBadgeAppearance, resolveButtonStyle, resolveChipStyle, searchInputVariants, serviceToneLabel, serviceToneStyle, setAssetBasePath, sidebarLinkBadgeVariants, spinnerVariants, starRatingVariants, statusDotVariants, suiteProgressFillVariants, textareaVariants, useBrandScope, useFieldControl, useSidebarPeekLock, useSidebarState, useStopwatch, useToast, yearToIso };
|