@nextlyhq/ui 0.0.2-alpha.6 → 0.0.2-alpha.60
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 +102 -24
- package/dist/color.cjs +193 -0
- package/dist/color.cjs.map +1 -0
- package/dist/color.d.cts +251 -0
- package/dist/color.d.ts +251 -0
- package/dist/color.mjs +179 -0
- package/dist/color.mjs.map +1 -0
- package/dist/index.cjs +3164 -1102
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +1220 -315
- package/dist/index.d.ts +1220 -315
- package/dist/index.mjs +2887 -839
- package/dist/index.mjs.map +1 -1
- package/dist/styles.css +2 -0
- package/dist/styles.scoped.css +2 -0
- package/dist/tailwind-preset.cjs +153 -0
- package/dist/tailwind-preset.cjs.map +1 -0
- package/dist/tailwind-preset.d.cts +120 -0
- package/dist/tailwind-preset.d.ts +120 -0
- package/dist/tailwind-preset.mjs +148 -0
- package/dist/tailwind-preset.mjs.map +1 -0
- package/dist/theme.css +1117 -0
- package/dist/utils.cjs +13 -0
- package/dist/utils.cjs.map +1 -0
- package/dist/utils.d.cts +19 -0
- package/dist/utils.d.ts +19 -0
- package/dist/utils.mjs +11 -0
- package/dist/utils.mjs.map +1 -0
- package/docs/plugin-ui-authoring.md +230 -0
- package/package.json +77 -17
package/dist/index.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as class_variance_authority_types from 'class-variance-authority/types';
|
|
2
2
|
import * as react from 'react';
|
|
3
|
-
import { ButtonHTMLAttributes, ComponentProps, TextareaHTMLAttributes, HTMLAttributes,
|
|
3
|
+
import { ButtonHTMLAttributes, ComponentProps, TextareaHTMLAttributes, HTMLAttributes, ReactNode, ComponentPropsWithoutRef } from 'react';
|
|
4
4
|
import * as class_variance_authority from 'class-variance-authority';
|
|
5
5
|
import { VariantProps } from 'class-variance-authority';
|
|
6
6
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
@@ -13,7 +13,7 @@ import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
|
|
|
13
13
|
import * as AccordionPrimitive from '@radix-ui/react-accordion';
|
|
14
14
|
import { Content, Item, Root as Root$2, Trigger } from '@radix-ui/react-accordion';
|
|
15
15
|
import * as _radix_ui_react_tabs from '@radix-ui/react-tabs';
|
|
16
|
-
import { Content as Content$1,
|
|
16
|
+
import { Content as Content$1, Root as Root$3 } from '@radix-ui/react-tabs';
|
|
17
17
|
import * as _radix_ui_react_tooltip from '@radix-ui/react-tooltip';
|
|
18
18
|
import * as PopoverPrimitive from '@radix-ui/react-popover';
|
|
19
19
|
import * as DialogPrimitive from '@radix-ui/react-dialog';
|
|
@@ -24,8 +24,11 @@ import { Command as Command$1 } from 'cmdk';
|
|
|
24
24
|
import { LucideProps } from 'lucide-react';
|
|
25
25
|
import { ToasterProps } from 'sonner';
|
|
26
26
|
export { ToasterProps, toast } from 'sonner';
|
|
27
|
-
import
|
|
27
|
+
import * as ContextMenuPrimitive from '@radix-ui/react-context-menu';
|
|
28
|
+
import * as ResizablePrimitive from 'react-resizable-panels';
|
|
29
|
+
import * as SliderPrimitive from '@radix-ui/react-slider';
|
|
28
30
|
|
|
31
|
+
/** @public */
|
|
29
32
|
interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
|
|
30
33
|
asChild?: boolean;
|
|
31
34
|
}
|
|
@@ -45,11 +48,13 @@ interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, VariantPr
|
|
|
45
48
|
* - link: Link-style button (underlined text)
|
|
46
49
|
*
|
|
47
50
|
* Note: 'primary' is a semantic alias for 'default' variant for better code readability
|
|
51
|
+
* @experimental
|
|
48
52
|
*/
|
|
49
53
|
declare const buttonVariants: (props?: ({
|
|
50
54
|
variant?: "default" | "primary" | "destructive" | "outline" | "secondary" | "ghost" | "link" | null | undefined;
|
|
51
55
|
size?: "default" | "sm" | "md" | "lg" | "icon" | "icon-sm" | "icon-lg" | null | undefined;
|
|
52
56
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
57
|
+
/** @public */
|
|
53
58
|
declare const Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAttributes<HTMLButtonElement>>;
|
|
54
59
|
|
|
55
60
|
/**
|
|
@@ -66,15 +71,15 @@ declare const Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAtt
|
|
|
66
71
|
* - Placeholder text for guidance (not a replacement for labels)
|
|
67
72
|
*
|
|
68
73
|
* Design Specs:
|
|
69
|
-
* - Height: sm=
|
|
74
|
+
* - Height: sm=36px, default=40px, lg=44px
|
|
70
75
|
* - Padding: Horizontal varies by size (sm=10px, default=12px, lg=16px)
|
|
71
|
-
* - Border radius:
|
|
76
|
+
* - Border radius: `rounded-md`, the control step of the `--radius` scale
|
|
72
77
|
* - Border: 1px solid, changes on focus/error
|
|
73
78
|
* - Transition: 150ms (consistent with design system)
|
|
74
79
|
* - Font size: sm/default=14px (text-sm), lg=16px (text-base)
|
|
75
80
|
*
|
|
76
81
|
* Size Variants:
|
|
77
|
-
* - sm: Height
|
|
82
|
+
* - sm: Height 36px - Compact forms and filters, matching a small Button
|
|
78
83
|
* - default: Height 40px (h-10) - Standard forms
|
|
79
84
|
* - lg: Height 44px (h-11) - Prominent inputs, marketing forms
|
|
80
85
|
*
|
|
@@ -86,18 +91,34 @@ declare const Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAtt
|
|
|
86
91
|
* - tel: Phone number input
|
|
87
92
|
* - url: URL validation
|
|
88
93
|
* - search: Search input with clear button
|
|
94
|
+
* @experimental
|
|
89
95
|
*/
|
|
90
96
|
declare const inputVariants: (props?: ({
|
|
91
97
|
size?: "default" | "sm" | "lg" | null | undefined;
|
|
92
98
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
99
|
+
/** @public */
|
|
93
100
|
interface InputProps extends Omit<ComponentProps<"input">, "size">, VariantProps<typeof inputVariants> {
|
|
94
101
|
}
|
|
102
|
+
/** @public */
|
|
95
103
|
declare const Input: react.ForwardRefExoticComponent<Omit<InputProps, "ref"> & react.RefAttributes<HTMLInputElement>>;
|
|
96
104
|
|
|
105
|
+
/** @public */
|
|
97
106
|
declare const Textarea: react.ForwardRefExoticComponent<TextareaHTMLAttributes<HTMLTextAreaElement> & react.RefAttributes<HTMLTextAreaElement>>;
|
|
98
107
|
|
|
108
|
+
/** @public */
|
|
99
109
|
declare function Label({ className, ...props }: ComponentProps<typeof Root>): react_jsx_runtime.JSX.Element;
|
|
100
110
|
|
|
111
|
+
/** @public */
|
|
112
|
+
interface FormLabelWithTooltipProps extends react.ComponentPropsWithoutRef<typeof Label> {
|
|
113
|
+
label: react.ReactNode;
|
|
114
|
+
description?: react.ReactNode;
|
|
115
|
+
required?: boolean;
|
|
116
|
+
labelClassName?: string;
|
|
117
|
+
tooltipClassName?: string;
|
|
118
|
+
}
|
|
119
|
+
/** @public */
|
|
120
|
+
declare const FormLabelWithTooltip: react.ForwardRefExoticComponent<FormLabelWithTooltipProps & react.RefAttributes<HTMLLabelElement>>;
|
|
121
|
+
|
|
101
122
|
/**
|
|
102
123
|
* Badge Component - Design System Specification
|
|
103
124
|
*
|
|
@@ -124,13 +145,16 @@ declare function Label({ className, ...props }: ComponentProps<typeof Root>): re
|
|
|
124
145
|
* - success: Light green background
|
|
125
146
|
* - warning: Light amber background
|
|
126
147
|
* - destructive: Light red background
|
|
127
|
-
* - outline: Transparent background with border border-
|
|
148
|
+
* - outline: Transparent background with border border-border
|
|
149
|
+
* @experimental
|
|
128
150
|
*/
|
|
129
151
|
declare const badgeVariants: (props?: ({
|
|
130
152
|
variant?: "default" | "primary" | "destructive" | "outline" | "success" | "warning" | null | undefined;
|
|
131
153
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
154
|
+
/** @public */
|
|
132
155
|
interface BadgeProps extends HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {
|
|
133
156
|
}
|
|
157
|
+
/** @public */
|
|
134
158
|
declare function Badge({ className, variant, ...props }: BadgeProps): react_jsx_runtime.JSX.Element;
|
|
135
159
|
|
|
136
160
|
/**
|
|
@@ -140,14 +164,14 @@ declare function Badge({ className, variant, ...props }: BadgeProps): react_jsx_
|
|
|
140
164
|
* Cards provide a structured layout with header, content, and footer sections.
|
|
141
165
|
*
|
|
142
166
|
* Design Specs:
|
|
143
|
-
* - Border radius:
|
|
167
|
+
* - Border radius: `rounded-lg`, the container step of the `--radius` scale
|
|
144
168
|
* - Padding: 24px (p-6) for header/content, 16px 24px for footer
|
|
145
169
|
* - Shadow: sm (default), md (hover/elevated)
|
|
146
|
-
* - Border: 1px solid border border-
|
|
170
|
+
* - Border: 1px solid border border-border color
|
|
147
171
|
*
|
|
148
172
|
* Variants:
|
|
149
173
|
* - default: Standard card with subtle shadow
|
|
150
|
-
* - interactive: Hover effects for clickable cards (border border-
|
|
174
|
+
* - interactive: Hover effects for clickable cards (border border-border highlight, shadow increase)
|
|
151
175
|
* ⚠️ IMPORTANT: When using the interactive variant, you MUST add appropriate
|
|
152
176
|
* accessibility attributes:
|
|
153
177
|
* - Add role="button" or use an actual <button> wrapper
|
|
@@ -182,33 +206,89 @@ declare function Badge({ className, variant, ...props }: BadgeProps): react_jsx_
|
|
|
182
206
|
* - Interactive cards MUST have role, tabIndex, and keyboard handlers (see above)
|
|
183
207
|
* - Ensure sufficient color contrast for all text (WCAG 2.2 AA minimum)
|
|
184
208
|
* - Use aria-label or aria-labelledby for cards without visible text labels
|
|
209
|
+
* @experimental
|
|
185
210
|
*/
|
|
186
211
|
declare const cardVariants: (props?: ({
|
|
187
212
|
variant?: "default" | "interactive" | "elevated" | null | undefined;
|
|
188
213
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
214
|
+
/** @experimental */
|
|
189
215
|
type CardProps = HTMLAttributes<HTMLDivElement> & VariantProps<typeof cardVariants>;
|
|
216
|
+
/** @experimental */
|
|
190
217
|
declare const Card: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & VariantProps<(props?: ({
|
|
191
218
|
variant?: "default" | "interactive" | "elevated" | null | undefined;
|
|
192
219
|
} & class_variance_authority_types.ClassProp) | undefined) => string> & react.RefAttributes<HTMLDivElement>>;
|
|
220
|
+
/** @experimental */
|
|
193
221
|
interface CardHeaderProps extends HTMLAttributes<HTMLDivElement> {
|
|
194
222
|
/**
|
|
195
|
-
* Whether to hide the bottom border border-
|
|
196
|
-
* Default: false (border border-
|
|
223
|
+
* Whether to hide the bottom border border-border separator between header and content.
|
|
224
|
+
* Default: false (border border-border is shown per design spec)
|
|
197
225
|
*/
|
|
198
226
|
noBorder?: boolean;
|
|
199
227
|
}
|
|
228
|
+
/** @experimental */
|
|
200
229
|
declare const CardHeader: react.ForwardRefExoticComponent<CardHeaderProps & react.RefAttributes<HTMLDivElement>>;
|
|
230
|
+
/** @experimental */
|
|
201
231
|
type CardTitleProps = HTMLAttributes<HTMLHeadingElement>;
|
|
232
|
+
/** @experimental */
|
|
202
233
|
declare const CardTitle: react.ForwardRefExoticComponent<CardTitleProps & react.RefAttributes<HTMLHeadingElement>>;
|
|
234
|
+
/** @experimental */
|
|
203
235
|
type CardDescriptionProps = HTMLAttributes<HTMLParagraphElement>;
|
|
236
|
+
/** @experimental */
|
|
204
237
|
declare const CardDescription: react.ForwardRefExoticComponent<CardDescriptionProps & react.RefAttributes<HTMLParagraphElement>>;
|
|
238
|
+
/** @experimental */
|
|
205
239
|
type CardActionProps = HTMLAttributes<HTMLDivElement>;
|
|
240
|
+
/** @experimental */
|
|
206
241
|
declare const CardAction: react.ForwardRefExoticComponent<CardActionProps & react.RefAttributes<HTMLDivElement>>;
|
|
242
|
+
/** @experimental */
|
|
207
243
|
type CardContentProps = HTMLAttributes<HTMLDivElement>;
|
|
244
|
+
/** @experimental */
|
|
208
245
|
declare const CardContent: react.ForwardRefExoticComponent<CardContentProps & react.RefAttributes<HTMLDivElement>>;
|
|
246
|
+
/** @experimental */
|
|
209
247
|
type CardFooterProps = HTMLAttributes<HTMLDivElement>;
|
|
248
|
+
/** @experimental */
|
|
210
249
|
declare const CardFooter: react.ForwardRefExoticComponent<CardFooterProps & react.RefAttributes<HTMLDivElement>>;
|
|
211
250
|
|
|
251
|
+
type Gap = 0 | 1 | 2 | 3 | 4 | 6 | 8;
|
|
252
|
+
type Cols = 1 | 2 | 3 | 4 | 6;
|
|
253
|
+
/** @experimental */
|
|
254
|
+
interface StackProps extends HTMLAttributes<HTMLDivElement> {
|
|
255
|
+
/** Main-axis direction. Default `col`. */
|
|
256
|
+
direction?: "col" | "row";
|
|
257
|
+
/** Gap between children (Tailwind spacing step). Default `4`. */
|
|
258
|
+
gap?: Gap;
|
|
259
|
+
}
|
|
260
|
+
/** Flex stack: vertical by default, horizontal with `direction="row"`.
|
|
261
|
+
* @experimental
|
|
262
|
+
*/
|
|
263
|
+
declare const Stack: react.ForwardRefExoticComponent<StackProps & react.RefAttributes<HTMLDivElement>>;
|
|
264
|
+
/** @experimental */
|
|
265
|
+
interface GridProps extends HTMLAttributes<HTMLDivElement> {
|
|
266
|
+
/** Column count. Default `2`. */
|
|
267
|
+
cols?: Cols;
|
|
268
|
+
/** Gap between cells. Default `4`. */
|
|
269
|
+
gap?: Gap;
|
|
270
|
+
/**
|
|
271
|
+
* Collapse to one column in a narrow container. Off by default so existing
|
|
272
|
+
* callers keep the fixed column count they were written against.
|
|
273
|
+
*/
|
|
274
|
+
responsive?: boolean;
|
|
275
|
+
}
|
|
276
|
+
/** Simple fixed-column grid, or a container-responsive one via `responsive`.
|
|
277
|
+
* @experimental
|
|
278
|
+
*/
|
|
279
|
+
declare const Grid: react.ForwardRefExoticComponent<GridProps & react.RefAttributes<HTMLDivElement>>;
|
|
280
|
+
/** @experimental */
|
|
281
|
+
interface StatProps extends HTMLAttributes<HTMLDivElement> {
|
|
282
|
+
/** Muted label above the value. */
|
|
283
|
+
label: string;
|
|
284
|
+
/** The emphasized value (string or node). */
|
|
285
|
+
value: ReactNode;
|
|
286
|
+
}
|
|
287
|
+
/** Labelled metric block for dashboard-style plugin widgets.
|
|
288
|
+
* @experimental
|
|
289
|
+
*/
|
|
290
|
+
declare const Stat: react.ForwardRefExoticComponent<StatProps & react.RefAttributes<HTMLDivElement>>;
|
|
291
|
+
|
|
212
292
|
/**
|
|
213
293
|
* Alert Component - Design System Specification
|
|
214
294
|
*
|
|
@@ -217,7 +297,7 @@ declare const CardFooter: react.ForwardRefExoticComponent<CardFooterProps & reac
|
|
|
217
297
|
*
|
|
218
298
|
* Design Specs:
|
|
219
299
|
* - Padding: 16px (p-4)
|
|
220
|
-
* - Border radius:
|
|
300
|
+
* - Border radius: `rounded-md`, one step tighter than Card's `rounded-lg`
|
|
221
301
|
* for inline/flow content vs. larger container components
|
|
222
302
|
* - Border: 1px solid matching variant color
|
|
223
303
|
* - Shadow: sm (subtle elevation)
|
|
@@ -276,10 +356,12 @@ declare const CardFooter: react.ForwardRefExoticComponent<CardFooterProps & reac
|
|
|
276
356
|
* - Success: <CheckCircle2 className="h-4 w-4" />
|
|
277
357
|
* - Warning: <AlertTriangle className="h-4 w-4" />
|
|
278
358
|
* - Destructive: <XCircle className="h-4 w-4" />
|
|
359
|
+
* @experimental
|
|
279
360
|
*/
|
|
280
361
|
declare const alertVariants: (props?: ({
|
|
281
362
|
variant?: "destructive" | "success" | "warning" | "info" | null | undefined;
|
|
282
363
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
364
|
+
/** @experimental */
|
|
283
365
|
type AlertProps = HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>;
|
|
284
366
|
/**
|
|
285
367
|
* Alert - Root container for alert messages
|
|
@@ -292,10 +374,12 @@ type AlertProps = HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVari
|
|
|
292
374
|
* <CheckCircle2 className="h-4 w-4" />
|
|
293
375
|
* <AlertDescription>Operation completed successfully</AlertDescription>
|
|
294
376
|
* </Alert>
|
|
377
|
+
* @experimental
|
|
295
378
|
*/
|
|
296
379
|
declare const Alert: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & VariantProps<(props?: ({
|
|
297
380
|
variant?: "destructive" | "success" | "warning" | "info" | null | undefined;
|
|
298
381
|
} & class_variance_authority_types.ClassProp) | undefined) => string> & react.RefAttributes<HTMLDivElement>>;
|
|
382
|
+
/** @experimental */
|
|
299
383
|
type AlertTitleProps = HTMLAttributes<HTMLHeadingElement>;
|
|
300
384
|
/**
|
|
301
385
|
* AlertTitle - Heading text for alert message
|
|
@@ -305,8 +389,10 @@ type AlertTitleProps = HTMLAttributes<HTMLHeadingElement>;
|
|
|
305
389
|
*
|
|
306
390
|
* @example
|
|
307
391
|
* <AlertTitle>Payment Successful</AlertTitle>
|
|
392
|
+
* @experimental
|
|
308
393
|
*/
|
|
309
394
|
declare const AlertTitle: react.ForwardRefExoticComponent<AlertTitleProps & react.RefAttributes<HTMLHeadingElement>>;
|
|
395
|
+
/** @experimental */
|
|
310
396
|
type AlertDescriptionProps = HTMLAttributes<HTMLDivElement>;
|
|
311
397
|
/**
|
|
312
398
|
* AlertDescription - Supporting detail text for alert message
|
|
@@ -318,9 +404,11 @@ type AlertDescriptionProps = HTMLAttributes<HTMLDivElement>;
|
|
|
318
404
|
* <AlertDescription>
|
|
319
405
|
* Your changes have been saved. <a href="/view">View details</a>
|
|
320
406
|
* </AlertDescription>
|
|
407
|
+
* @experimental
|
|
321
408
|
*/
|
|
322
409
|
declare const AlertDescription: react.ForwardRefExoticComponent<AlertDescriptionProps & react.RefAttributes<HTMLDivElement>>;
|
|
323
410
|
|
|
411
|
+
/** @experimental */
|
|
324
412
|
declare function Separator({ className, orientation, decorative, ...props }: react.ComponentProps<typeof SeparatorPrimitive.Root>): react_jsx_runtime.JSX.Element;
|
|
325
413
|
|
|
326
414
|
/**
|
|
@@ -332,7 +420,7 @@ declare function Separator({ className, orientation, decorative, ...props }: rea
|
|
|
332
420
|
* @design_specs
|
|
333
421
|
* - Background: bg-accent (slate-100 in light mode, slate-800 in dark mode)
|
|
334
422
|
* - Animation: animate-pulse with motion-reduce:animate-none (respects prefers-reduced-motion)
|
|
335
|
-
* - Border-radius:
|
|
423
|
+
* - Border-radius: `rounded-md` by default; override per placeholder shape
|
|
336
424
|
* - Contrast: 3:1 minimum for WCAG 1.4.11 (Non-text Contrast) compliance
|
|
337
425
|
*
|
|
338
426
|
* @accessibility
|
|
@@ -352,13 +440,13 @@ declare function Separator({ className, orientation, decorative, ...props }: rea
|
|
|
352
440
|
*
|
|
353
441
|
* **Avatar Skeleton:**
|
|
354
442
|
* ```tsx
|
|
355
|
-
* <Skeleton className="h-12 w-12 rounded-
|
|
443
|
+
* <Skeleton className="h-12 w-12 rounded-md" />
|
|
356
444
|
* ```
|
|
357
445
|
*
|
|
358
446
|
* **Card Skeleton:**
|
|
359
447
|
* ```tsx
|
|
360
448
|
* <div className="space-y-3">
|
|
361
|
-
* <Skeleton className="h-[125px] w-[250px] rounded-
|
|
449
|
+
* <Skeleton className="h-[125px] w-[250px] rounded-lg" />
|
|
362
450
|
* <div className="space-y-2">
|
|
363
451
|
* <Skeleton className="h-4 w-[250px]" />
|
|
364
452
|
* <Skeleton className="h-4 w-[200px]" />
|
|
@@ -372,7 +460,7 @@ declare function Separator({ className, orientation, decorative, ...props }: rea
|
|
|
372
460
|
* {isLoading ? (
|
|
373
461
|
* <>
|
|
374
462
|
* <span className="sr-only">Loading user profile...</span>
|
|
375
|
-
* <Skeleton className="h-12 w-12 rounded-
|
|
463
|
+
* <Skeleton className="h-12 w-12 rounded-md" />
|
|
376
464
|
* <Skeleton className="h-4 w-[200px]" />
|
|
377
465
|
* </>
|
|
378
466
|
* ) : (
|
|
@@ -395,20 +483,25 @@ declare function Separator({ className, orientation, decorative, ...props }: rea
|
|
|
395
483
|
*
|
|
396
484
|
* @see {@link https://ui.shadcn.com/docs/components/skeleton shadcn/ui Skeleton}
|
|
397
485
|
* @see {@link https://adrianroselli.com/2020/11/more-accessible-skeletons.html More Accessible Skeletons}
|
|
486
|
+
* @experimental
|
|
398
487
|
*/
|
|
399
488
|
declare const Skeleton: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
|
|
489
|
+
/** @experimental */
|
|
400
490
|
type SkeletonProps = react.ComponentProps<"div">;
|
|
401
491
|
|
|
402
492
|
/**
|
|
403
493
|
* Progress variants using CVA
|
|
404
494
|
*
|
|
405
495
|
* Defines color variants for different progress states.
|
|
496
|
+
*
|
|
497
|
+
* @experimental
|
|
406
498
|
*/
|
|
407
499
|
declare const progressVariants: (props?: ({
|
|
408
500
|
variant?: "default" | "success" | "error" | null | undefined;
|
|
409
501
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
410
502
|
/**
|
|
411
503
|
* Progress component props
|
|
504
|
+
* @experimental
|
|
412
505
|
*/
|
|
413
506
|
type ProgressProps = {
|
|
414
507
|
/**
|
|
@@ -433,7 +526,7 @@ type ProgressProps = {
|
|
|
433
526
|
* Visual variant for different states
|
|
434
527
|
*
|
|
435
528
|
* - `default`: Primary blue (bg-primary-500)
|
|
436
|
-
* - `success`: Green (bg-
|
|
529
|
+
* - `success`: Green (bg-success-500)
|
|
437
530
|
* - `error`: Red (bg-destructive)
|
|
438
531
|
*
|
|
439
532
|
* @default "default"
|
|
@@ -476,6 +569,7 @@ type ProgressProps = {
|
|
|
476
569
|
* );
|
|
477
570
|
* }
|
|
478
571
|
* ```
|
|
572
|
+
* @experimental
|
|
479
573
|
*/
|
|
480
574
|
declare const Progress: react.ForwardRefExoticComponent<{
|
|
481
575
|
/**
|
|
@@ -500,7 +594,7 @@ declare const Progress: react.ForwardRefExoticComponent<{
|
|
|
500
594
|
* Visual variant for different states
|
|
501
595
|
*
|
|
502
596
|
* - `default`: Primary blue (bg-primary-500)
|
|
503
|
-
* - `success`: Green (bg-
|
|
597
|
+
* - `success`: Green (bg-success-500)
|
|
504
598
|
* - `error`: Red (bg-destructive)
|
|
505
599
|
*
|
|
506
600
|
* @default "default"
|
|
@@ -523,6 +617,7 @@ declare const Progress: react.ForwardRefExoticComponent<{
|
|
|
523
617
|
"aria-label"?: string;
|
|
524
618
|
} & react.HTMLAttributes<HTMLDivElement> & react.RefAttributes<HTMLDivElement>>;
|
|
525
619
|
|
|
620
|
+
/** @public */
|
|
526
621
|
declare const Checkbox: react.ForwardRefExoticComponent<Omit<CheckboxPrimitive.CheckboxProps & react.RefAttributes<HTMLButtonElement>, "ref"> & {
|
|
527
622
|
indeterminate?: boolean;
|
|
528
623
|
} & react.RefAttributes<HTMLButtonElement>>;
|
|
@@ -542,40 +637,58 @@ declare const Checkbox: react.ForwardRefExoticComponent<Omit<CheckboxPrimitive.C
|
|
|
542
637
|
* Design Specs:
|
|
543
638
|
* - Size: 16px (h-4 w-4) - Fixed size matching Checkbox
|
|
544
639
|
* - Border: 1px solid, expands to 5px when checked (visual indicator)
|
|
545
|
-
* - Border radius:
|
|
640
|
+
* - Border radius: `rounded-full`. Round means "pick one" and square means
|
|
641
|
+
* "pick many"; a square radio would announce the wrong behaviour, so the
|
|
642
|
+
* shape is fixed and deliberately outside the `--radius` scale. Checkbox
|
|
643
|
+
* keeps the derived radius for the same reason.
|
|
546
644
|
* - Transition: 150ms (consistent with design system)
|
|
547
645
|
* - Focus ring: 2px ring with 2px offset
|
|
548
646
|
*
|
|
549
647
|
* Implementation Notes:
|
|
550
648
|
* - Uses Radix UI primitives for robust accessibility
|
|
551
|
-
* - Visual "checked" state achieved via border border-
|
|
552
|
-
* - No inner indicator needed - border border-
|
|
553
|
-
* - Hover state changes border border-
|
|
649
|
+
* - Visual "checked" state achieved via border border-border expansion (border-[5px])
|
|
650
|
+
* - No inner indicator needed - border border-border expansion provides clear visual feedback
|
|
651
|
+
* - Hover state changes border border-border color for better interactivity
|
|
652
|
+
* @public
|
|
554
653
|
*/
|
|
555
654
|
declare const RadioGroup: react.ForwardRefExoticComponent<Omit<RadioGroupPrimitive.RadioGroupProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
|
|
655
|
+
/** @public */
|
|
556
656
|
declare const RadioGroupItem: react.ForwardRefExoticComponent<Omit<RadioGroupPrimitive.RadioGroupItemProps & react.RefAttributes<HTMLButtonElement>, "ref"> & react.RefAttributes<HTMLButtonElement>>;
|
|
557
657
|
|
|
658
|
+
/**
|
|
659
|
+
* A pill track carrying a circular thumb is how a toggle is recognised, so both
|
|
660
|
+
* parts use `rounded-full` and stay outside the `--radius` scale: at any theme
|
|
661
|
+
* radius the switch must still read as a switch and not as a small checkbox.
|
|
662
|
+
* @public
|
|
663
|
+
*/
|
|
558
664
|
declare function Switch({ className, ...props }: ComponentProps<typeof Root$1>): react_jsx_runtime.JSX.Element;
|
|
559
665
|
|
|
666
|
+
/** @experimental */
|
|
560
667
|
declare const Collapsible: react.ForwardRefExoticComponent<CollapsiblePrimitive.CollapsibleProps & react.RefAttributes<HTMLDivElement>>;
|
|
668
|
+
/** @experimental */
|
|
561
669
|
declare const CollapsibleTrigger: react.ForwardRefExoticComponent<CollapsiblePrimitive.CollapsibleTriggerProps & react.RefAttributes<HTMLButtonElement>>;
|
|
670
|
+
/** @experimental */
|
|
562
671
|
declare const CollapsibleContent: react.ForwardRefExoticComponent<CollapsiblePrimitive.CollapsibleContentProps & react.RefAttributes<HTMLDivElement>>;
|
|
563
672
|
|
|
564
673
|
/**
|
|
565
674
|
* Props for the Accordion root component
|
|
566
675
|
* @see https://www.radix-ui.com/primitives/docs/components/accordion
|
|
676
|
+
* @experimental
|
|
567
677
|
*/
|
|
568
678
|
type AccordionProps = ComponentPropsWithoutRef<typeof Root$2>;
|
|
569
679
|
/**
|
|
570
680
|
* Props for the AccordionItem component (container for trigger and content)
|
|
681
|
+
* @experimental
|
|
571
682
|
*/
|
|
572
683
|
type AccordionItemProps = ComponentPropsWithoutRef<typeof Item>;
|
|
573
684
|
/**
|
|
574
685
|
* Props for the AccordionTrigger component (clickable header button)
|
|
686
|
+
* @experimental
|
|
575
687
|
*/
|
|
576
688
|
type AccordionTriggerProps = ComponentPropsWithoutRef<typeof Trigger>;
|
|
577
689
|
/**
|
|
578
690
|
* Props for the AccordionContent component (collapsible content panel)
|
|
691
|
+
* @experimental
|
|
579
692
|
*/
|
|
580
693
|
type AccordionContentProps = ComponentPropsWithoutRef<typeof Content>;
|
|
581
694
|
|
|
@@ -586,7 +699,7 @@ type AccordionContentProps = ComponentPropsWithoutRef<typeof Content>;
|
|
|
586
699
|
* Built on Radix UI primitives with WAI-ARIA compliance.
|
|
587
700
|
*
|
|
588
701
|
* Design Specs:
|
|
589
|
-
* - AccordionItem border: 1px bottom border border-
|
|
702
|
+
* - AccordionItem border: 1px bottom border border-border (border-b)
|
|
590
703
|
* - AccordionTrigger padding: 16px vertical (py-4)
|
|
591
704
|
* - AccordionTrigger font: font-medium (500 weight)
|
|
592
705
|
* - AccordionContent padding: 16px bottom, 0 top (pb-4 pt-0)
|
|
@@ -671,18 +784,20 @@ type AccordionContentProps = ComponentPropsWithoutRef<typeof Content>;
|
|
|
671
784
|
* ```
|
|
672
785
|
*
|
|
673
786
|
* @see https://www.radix-ui.com/primitives/docs/components/accordion
|
|
787
|
+
* @experimental
|
|
674
788
|
*/
|
|
675
789
|
declare const Accordion: react.ForwardRefExoticComponent<(AccordionPrimitive.AccordionSingleProps | AccordionPrimitive.AccordionMultipleProps) & react.RefAttributes<HTMLDivElement>>;
|
|
676
790
|
/**
|
|
677
791
|
* AccordionItem - Container for trigger and content
|
|
678
792
|
*
|
|
679
793
|
* Design Specs:
|
|
680
|
-
* - Border: 1px bottom border border-
|
|
794
|
+
* - Border: 1px bottom border border-border (border-b) for visual separation
|
|
681
795
|
* - Each item represents a collapsible section
|
|
682
796
|
*
|
|
683
797
|
* Accessibility:
|
|
684
798
|
* - Each item requires a unique value prop for identification
|
|
685
799
|
* - Disabled state can be set via disabled prop
|
|
800
|
+
* @experimental
|
|
686
801
|
*/
|
|
687
802
|
declare const AccordionItem: react.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionItemProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
|
|
688
803
|
/**
|
|
@@ -707,6 +822,7 @@ declare const AccordionItem: react.ForwardRefExoticComponent<Omit<AccordionPrimi
|
|
|
707
822
|
* - The ChevronDown icon is included by default
|
|
708
823
|
* - Icon rotates 180° when item is expanded ([data-state=open])
|
|
709
824
|
* - Trigger includes AccordionPrimitive.Header wrapper for proper semantics
|
|
825
|
+
* @experimental
|
|
710
826
|
*/
|
|
711
827
|
declare const AccordionTrigger: react.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionTriggerProps & react.RefAttributes<HTMLButtonElement>, "ref"> & react.RefAttributes<HTMLButtonElement>>;
|
|
712
828
|
/**
|
|
@@ -728,6 +844,7 @@ declare const AccordionTrigger: react.ForwardRefExoticComponent<Omit<AccordionPr
|
|
|
728
844
|
* - data-state="open": animate-accordion-down (Tailwind built-in)
|
|
729
845
|
* - data-state="closed": animate-accordion-up (Tailwind built-in)
|
|
730
846
|
* - Height transitions smoothly from 0 to auto
|
|
847
|
+
* @experimental
|
|
731
848
|
*/
|
|
732
849
|
declare const AccordionContent: react.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionContentProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
|
|
733
850
|
|
|
@@ -750,7 +867,9 @@ declare const AccordionContent: react.ForwardRefExoticComponent<Omit<AccordionPr
|
|
|
750
867
|
* - 2xl: 80px (h-20 w-20) - For profile headers, large avatars
|
|
751
868
|
*
|
|
752
869
|
* **Design Specs**:
|
|
753
|
-
* - Border radius: rounded-
|
|
870
|
+
* - Border radius: `rounded-full`. A person's avatar is read as a circle, so it
|
|
871
|
+
* sits outside the `--radius` scale and stays circular at any theme radius.
|
|
872
|
+
* Non-identity content (media thumbnails) overrides back to a scale step.
|
|
754
873
|
* - Background: bg-accent (slate-100 light, slate-800 dark)
|
|
755
874
|
* - Text color: text-accent-foreground (slate-900 light, slate-100 dark)
|
|
756
875
|
* - Fallback text scales with avatar size (text-xs to text-2xl)
|
|
@@ -790,6 +909,7 @@ declare const AccordionContent: react.ForwardRefExoticComponent<Omit<AccordionPr
|
|
|
790
909
|
*
|
|
791
910
|
* @see {@link https://www.radix-ui.com/primitives/docs/components/avatar Radix UI Avatar}
|
|
792
911
|
* @see {@link https://github.com/nextlyhq/nextly/blob/main/ui-revamp/04-design-system-specification.md Design System Specification}
|
|
912
|
+
* @experimental
|
|
793
913
|
*/
|
|
794
914
|
declare const avatarVariants: (props?: ({
|
|
795
915
|
size?: "sm" | "md" | "lg" | "xl" | "2xl" | null | undefined;
|
|
@@ -800,6 +920,7 @@ declare const avatarVariants: (props?: ({
|
|
|
800
920
|
* Container element for avatar image and fallback. Provides consistent sizing
|
|
801
921
|
* and styling across the application. Uses React Context to pass size to
|
|
802
922
|
* AvatarFallback for reliable text scaling.
|
|
923
|
+
* @experimental
|
|
803
924
|
*/
|
|
804
925
|
declare const Avatar: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & class_variance_authority.VariantProps<(props?: ({
|
|
805
926
|
size?: "sm" | "md" | "lg" | "xl" | "2xl" | null | undefined;
|
|
@@ -819,6 +940,7 @@ declare const Avatar: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLPro
|
|
|
819
940
|
*
|
|
820
941
|
* @example
|
|
821
942
|
* <AvatarImage src="/users/john-doe.jpg" alt="John Doe" />
|
|
943
|
+
* @experimental
|
|
822
944
|
*/
|
|
823
945
|
declare const AvatarImage: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "ref"> & react.RefAttributes<HTMLImageElement>>;
|
|
824
946
|
/**
|
|
@@ -851,6 +973,7 @@ declare const AvatarImage: react.ForwardRefExoticComponent<Omit<react.DetailedHT
|
|
|
851
973
|
* @example
|
|
852
974
|
* // Custom delay before showing fallback
|
|
853
975
|
* <AvatarFallback delayMs={300}>AB</AvatarFallback>
|
|
976
|
+
* @experimental
|
|
854
977
|
*/
|
|
855
978
|
declare const AvatarFallback: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
|
|
856
979
|
delayMs?: number;
|
|
@@ -861,6 +984,7 @@ declare const AvatarFallback: react.ForwardRefExoticComponent<Omit<react.Detaile
|
|
|
861
984
|
*
|
|
862
985
|
* Root container for displaying user avatars with image and fallback support.
|
|
863
986
|
* Extends Radix UI Avatar.Root props with size variants.
|
|
987
|
+
* @experimental
|
|
864
988
|
*/
|
|
865
989
|
type AvatarProps = ComponentPropsWithoutRef<"span"> & VariantProps<typeof avatarVariants> & {
|
|
866
990
|
/**
|
|
@@ -882,6 +1006,7 @@ type AvatarProps = ComponentPropsWithoutRef<"span"> & VariantProps<typeof avatar
|
|
|
882
1006
|
*
|
|
883
1007
|
* Note: Both src and alt are optional to support dynamic loading scenarios.
|
|
884
1008
|
* When src is undefined/empty, the AvatarFallback will be displayed instead.
|
|
1009
|
+
* @experimental
|
|
885
1010
|
*/
|
|
886
1011
|
type AvatarImageProps = ComponentPropsWithoutRef<"img">;
|
|
887
1012
|
/**
|
|
@@ -889,6 +1014,7 @@ type AvatarImageProps = ComponentPropsWithoutRef<"img">;
|
|
|
889
1014
|
*
|
|
890
1015
|
* Displays fallback content (typically user initials) when image fails to load.
|
|
891
1016
|
* Extends Radix UI Avatar.Fallback props.
|
|
1017
|
+
* @experimental
|
|
892
1018
|
*/
|
|
893
1019
|
type AvatarFallbackProps = ComponentPropsWithoutRef<"span"> & {
|
|
894
1020
|
/**
|
|
@@ -901,18 +1027,12 @@ type AvatarFallbackProps = ComponentPropsWithoutRef<"span"> & {
|
|
|
901
1027
|
/**
|
|
902
1028
|
* Props for the Tabs root component
|
|
903
1029
|
* @see https://www.radix-ui.com/primitives/docs/components/tabs
|
|
1030
|
+
* @public
|
|
904
1031
|
*/
|
|
905
1032
|
type TabsProps = ComponentPropsWithoutRef<typeof Root$3>;
|
|
906
|
-
/**
|
|
907
|
-
* Props for the TabsList component (container for tab triggers)
|
|
908
|
-
*/
|
|
909
|
-
type TabsListProps = ComponentPropsWithoutRef<typeof List>;
|
|
910
|
-
/**
|
|
911
|
-
* Props for the TabsTrigger component (clickable tab button)
|
|
912
|
-
*/
|
|
913
|
-
type TabsTriggerProps = ComponentPropsWithoutRef<typeof Trigger$1>;
|
|
914
1033
|
/**
|
|
915
1034
|
* Props for the TabsContent component (content panel for each tab)
|
|
1035
|
+
* @public
|
|
916
1036
|
*/
|
|
917
1037
|
type TabsContentProps = ComponentPropsWithoutRef<typeof Content$1>;
|
|
918
1038
|
|
|
@@ -923,8 +1043,9 @@ type TabsContentProps = ComponentPropsWithoutRef<typeof Content$1>;
|
|
|
923
1043
|
* Built on Radix UI primitives with WAI-ARIA compliance.
|
|
924
1044
|
*
|
|
925
1045
|
* Design Specs:
|
|
926
|
-
* - TabsList border-radius:
|
|
927
|
-
* - TabsTrigger border-radius:
|
|
1046
|
+
* - TabsList border-radius: square, independent of `--radius`
|
|
1047
|
+
* - TabsTrigger border-radius: square, independent of `--radius`; the active
|
|
1048
|
+
* state is a 2px bottom border that has to stay flush with the tab edges
|
|
928
1049
|
* - TabsList height: 40px (h-10)
|
|
929
1050
|
* - TabsTrigger padding: 12px 24px (px-3 py-1.5)
|
|
930
1051
|
* - Transition duration: 150ms (design system standard)
|
|
@@ -992,6 +1113,7 @@ type TabsContentProps = ComponentPropsWithoutRef<typeof Content$1>;
|
|
|
992
1113
|
* ```
|
|
993
1114
|
*
|
|
994
1115
|
* @see https://www.radix-ui.com/primitives/docs/components/tabs
|
|
1116
|
+
* @public
|
|
995
1117
|
*/
|
|
996
1118
|
declare const Tabs: react.ForwardRefExoticComponent<_radix_ui_react_tabs.TabsProps & react.RefAttributes<HTMLDivElement>>;
|
|
997
1119
|
/**
|
|
@@ -1002,8 +1124,11 @@ declare const Tabs: react.ForwardRefExoticComponent<_radix_ui_react_tabs.TabsPro
|
|
|
1002
1124
|
* - Border-radius: none (for underline style)
|
|
1003
1125
|
* - Background: transparent
|
|
1004
1126
|
* - Layout: inline-flex (horizontal by default, use orientation="vertical" on Tabs root for vertical)
|
|
1127
|
+
* @public
|
|
1005
1128
|
*/
|
|
1006
|
-
declare const TabsList: react.ForwardRefExoticComponent<Omit<_radix_ui_react_tabs.TabsListProps & react.RefAttributes<HTMLDivElement>, "ref"> &
|
|
1129
|
+
declare const TabsList: react.ForwardRefExoticComponent<Omit<_radix_ui_react_tabs.TabsListProps & react.RefAttributes<HTMLDivElement>, "ref"> & VariantProps<(props?: ({
|
|
1130
|
+
variant?: "default" | "ghost" | null | undefined;
|
|
1131
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string> & react.RefAttributes<HTMLDivElement>>;
|
|
1007
1132
|
/**
|
|
1008
1133
|
* TabsTrigger - Clickable tab button
|
|
1009
1134
|
*
|
|
@@ -1012,8 +1137,8 @@ declare const TabsList: react.ForwardRefExoticComponent<Omit<_radix_ui_react_tab
|
|
|
1012
1137
|
* - Padding: 6px 16px (px-4 py-2)
|
|
1013
1138
|
* - Font: text-sm (14px), font-medium (500)
|
|
1014
1139
|
* - Transition: 150ms (design system standard)
|
|
1015
|
-
* - Active state:
|
|
1016
|
-
* - Hover:
|
|
1140
|
+
* - Active state: the accent colour on the text and on the 2px trailing border
|
|
1141
|
+
* - Hover: the same accent, so the target reads before it is chosen
|
|
1017
1142
|
* - Gmail-inspired clean underline style
|
|
1018
1143
|
*
|
|
1019
1144
|
* Accessibility:
|
|
@@ -1021,8 +1146,11 @@ declare const TabsList: react.ForwardRefExoticComponent<Omit<_radix_ui_react_tab
|
|
|
1021
1146
|
* - Focus ring: 2px with offset (WCAG 2.2 compliant)
|
|
1022
1147
|
* - Disabled state: pointer-events-none, opacity-50
|
|
1023
1148
|
* - Data attributes: [data-state="active|inactive"], [data-disabled]
|
|
1149
|
+
* @public
|
|
1024
1150
|
*/
|
|
1025
|
-
declare const TabsTrigger: react.ForwardRefExoticComponent<Omit<_radix_ui_react_tabs.TabsTriggerProps & react.RefAttributes<HTMLButtonElement>, "ref"> &
|
|
1151
|
+
declare const TabsTrigger: react.ForwardRefExoticComponent<Omit<_radix_ui_react_tabs.TabsTriggerProps & react.RefAttributes<HTMLButtonElement>, "ref"> & VariantProps<(props?: ({
|
|
1152
|
+
size?: "default" | "sm" | null | undefined;
|
|
1153
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string> & react.RefAttributes<HTMLButtonElement>>;
|
|
1026
1154
|
/**
|
|
1027
1155
|
* TabsContent - Content panel for each tab
|
|
1028
1156
|
*
|
|
@@ -1034,17 +1162,46 @@ declare const TabsTrigger: react.ForwardRefExoticComponent<Omit<_radix_ui_react_
|
|
|
1034
1162
|
* - Focus indicator when navigating with Tab key
|
|
1035
1163
|
* - Data attributes: [data-state="active|inactive"], [data-orientation]
|
|
1036
1164
|
* - Only active content is visible, inactive content is hidden
|
|
1165
|
+
* @public
|
|
1037
1166
|
*/
|
|
1038
1167
|
declare const TabsContent: react.ForwardRefExoticComponent<Omit<_radix_ui_react_tabs.TabsContentProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
|
|
1039
1168
|
|
|
1169
|
+
/**
|
|
1170
|
+
* The public prop types, DERIVED from the components rather than restated.
|
|
1171
|
+
*
|
|
1172
|
+
* `../types/tabs` describes the Radix props alone, so an alias taken from there
|
|
1173
|
+
* rejects `variant` and `size` — and a consumer typing a wrapper around
|
|
1174
|
+
* `TabsList` would be told the prop it can see in the signature does not exist.
|
|
1175
|
+
* Reading the component's own props keeps the two from drifting: a variant
|
|
1176
|
+
* added later reaches every consumer without a second edit.
|
|
1177
|
+
*/
|
|
1178
|
+
/**
|
|
1179
|
+
* The list's props, including its `variant`.
|
|
1180
|
+
* @public
|
|
1181
|
+
*/
|
|
1182
|
+
type TabsListProps = ComponentPropsWithoutRef<typeof TabsList>;
|
|
1183
|
+
/**
|
|
1184
|
+
* The trigger's props, including its `size`.
|
|
1185
|
+
* @public
|
|
1186
|
+
*/
|
|
1187
|
+
type TabsTriggerProps = ComponentPropsWithoutRef<typeof TabsTrigger>;
|
|
1188
|
+
|
|
1189
|
+
/** @experimental */
|
|
1040
1190
|
declare const TooltipProvider: react.FC<_radix_ui_react_tooltip.TooltipProviderProps>;
|
|
1191
|
+
/** @public */
|
|
1041
1192
|
declare const Tooltip: react.FC<_radix_ui_react_tooltip.TooltipProps>;
|
|
1193
|
+
/** @public */
|
|
1042
1194
|
declare const TooltipTrigger: react.ForwardRefExoticComponent<_radix_ui_react_tooltip.TooltipTriggerProps & react.RefAttributes<HTMLButtonElement>>;
|
|
1195
|
+
/** @public */
|
|
1043
1196
|
declare const TooltipContent: react.ForwardRefExoticComponent<Omit<_radix_ui_react_tooltip.TooltipContentProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
|
|
1044
1197
|
|
|
1198
|
+
/** @experimental */
|
|
1045
1199
|
declare const Popover: react.FC<PopoverPrimitive.PopoverProps>;
|
|
1200
|
+
/** @experimental */
|
|
1046
1201
|
declare const PopoverTrigger: react.ForwardRefExoticComponent<PopoverPrimitive.PopoverTriggerProps & react.RefAttributes<HTMLButtonElement>>;
|
|
1202
|
+
/** @experimental */
|
|
1047
1203
|
declare const PopoverAnchor: react.ForwardRefExoticComponent<PopoverPrimitive.PopoverAnchorProps & react.RefAttributes<HTMLDivElement>>;
|
|
1204
|
+
/** @experimental */
|
|
1048
1205
|
declare const PopoverContent: react.ForwardRefExoticComponent<Omit<PopoverPrimitive.PopoverContentProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
|
|
1049
1206
|
|
|
1050
1207
|
/**
|
|
@@ -1078,9 +1235,9 @@ declare const PopoverContent: react.ForwardRefExoticComponent<Omit<PopoverPrimit
|
|
|
1078
1235
|
* ```
|
|
1079
1236
|
*
|
|
1080
1237
|
* @design-spec
|
|
1081
|
-
* - Border-radius:
|
|
1238
|
+
* - Border-radius: `rounded-lg`, the container step of the `--radius` scale
|
|
1082
1239
|
* - Max-width: 512px (default), responsive sizes available
|
|
1083
|
-
* - Backdrop:
|
|
1240
|
+
* - Backdrop: the `--nx-overlay` scrim with blur effect
|
|
1084
1241
|
* - Padding: 24px (p-6)
|
|
1085
1242
|
* - Shadow: xl for prominence (elevation level 4)
|
|
1086
1243
|
* - Transition: 150ms per design system
|
|
@@ -1093,15 +1250,22 @@ declare const PopoverContent: react.ForwardRefExoticComponent<Omit<PopoverPrimit
|
|
|
1093
1250
|
* - Includes ARIA labels and descriptions
|
|
1094
1251
|
* - Screen reader announcements via role="dialog"
|
|
1095
1252
|
* - Close button has sr-only text for screen readers
|
|
1253
|
+
* @public
|
|
1096
1254
|
*/
|
|
1097
1255
|
declare const Dialog: react.FC<DialogPrimitive.DialogProps>;
|
|
1256
|
+
/** @experimental */
|
|
1098
1257
|
declare const DialogTrigger: react.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & react.RefAttributes<HTMLButtonElement>>;
|
|
1258
|
+
/** @experimental */
|
|
1099
1259
|
declare const DialogPortal: react.FC<DialogPrimitive.DialogPortalProps>;
|
|
1260
|
+
/** @experimental */
|
|
1100
1261
|
declare const DialogClose: react.ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & react.RefAttributes<HTMLButtonElement>>;
|
|
1262
|
+
/** @experimental */
|
|
1101
1263
|
type DialogOverlayProps = ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>;
|
|
1102
1264
|
/**
|
|
1103
1265
|
* DialogOverlay - The backdrop overlay behind the dialog content.
|
|
1104
|
-
* Renders
|
|
1266
|
+
* Renders the `--nx-overlay` scrim with a blur effect. The opacity is the
|
|
1267
|
+
* token's, not a literal: it differs by mode and a host can retheme it.
|
|
1268
|
+
* @experimental
|
|
1105
1269
|
*/
|
|
1106
1270
|
declare const DialogOverlay: react.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogOverlayProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
|
|
1107
1271
|
/**
|
|
@@ -1112,10 +1276,12 @@ declare const DialogOverlay: react.ForwardRefExoticComponent<Omit<DialogPrimitiv
|
|
|
1112
1276
|
* @variant lg - Large dialog (672px / max-w-2xl) - complex forms, data tables
|
|
1113
1277
|
* @variant xl - Extra large dialog (896px / max-w-4xl) - content editors, media galleries
|
|
1114
1278
|
* @variant full - Full width with margin (responsive) - fullscreen on mobile
|
|
1279
|
+
* @experimental
|
|
1115
1280
|
*/
|
|
1116
1281
|
declare const dialogContentVariants: (props?: ({
|
|
1117
1282
|
size?: "sm" | "md" | "lg" | "xl" | "full" | null | undefined;
|
|
1118
1283
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
1284
|
+
/** @public */
|
|
1119
1285
|
type DialogContentProps = ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & VariantProps<typeof dialogContentVariants>;
|
|
1120
1286
|
/**
|
|
1121
1287
|
* DialogContent - The main dialog content container.
|
|
@@ -1128,16 +1294,20 @@ type DialogContentProps = ComponentPropsWithoutRef<typeof DialogPrimitive.Conten
|
|
|
1128
1294
|
* Your content here
|
|
1129
1295
|
* </DialogContent>
|
|
1130
1296
|
* ```
|
|
1297
|
+
* @public
|
|
1131
1298
|
*/
|
|
1132
1299
|
declare const DialogContent: react.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogContentProps & react.RefAttributes<HTMLDivElement>, "ref"> & VariantProps<(props?: ({
|
|
1133
1300
|
size?: "sm" | "md" | "lg" | "xl" | "full" | null | undefined;
|
|
1134
1301
|
} & class_variance_authority_types.ClassProp) | undefined) => string> & react.RefAttributes<HTMLDivElement>>;
|
|
1302
|
+
/** @public */
|
|
1135
1303
|
type DialogHeaderProps = HTMLAttributes<HTMLDivElement>;
|
|
1136
1304
|
/**
|
|
1137
1305
|
* DialogHeader - Container for dialog title and description.
|
|
1138
1306
|
* Provides consistent spacing and alignment (centered on mobile, left-aligned on desktop).
|
|
1307
|
+
* @public
|
|
1139
1308
|
*/
|
|
1140
1309
|
declare const DialogHeader: react.ForwardRefExoticComponent<DialogHeaderProps & react.RefAttributes<HTMLDivElement>>;
|
|
1310
|
+
/** @public */
|
|
1141
1311
|
type DialogFooterProps = HTMLAttributes<HTMLDivElement>;
|
|
1142
1312
|
/**
|
|
1143
1313
|
* DialogFooter - Container for dialog action buttons.
|
|
@@ -1150,16 +1320,20 @@ type DialogFooterProps = HTMLAttributes<HTMLDivElement>;
|
|
|
1150
1320
|
* <Button type="submit">Save Changes</Button>
|
|
1151
1321
|
* </DialogFooter>
|
|
1152
1322
|
* ```
|
|
1323
|
+
* @public
|
|
1153
1324
|
*/
|
|
1154
1325
|
declare const DialogFooter: react.ForwardRefExoticComponent<DialogFooterProps & react.RefAttributes<HTMLDivElement>>;
|
|
1326
|
+
/** @public */
|
|
1155
1327
|
type DialogTitleProps = ComponentPropsWithoutRef<typeof DialogPrimitive.Title>;
|
|
1156
1328
|
/**
|
|
1157
1329
|
* DialogTitle - The title of the dialog.
|
|
1158
1330
|
* Uses text-lg (18px) with semibold weight per design system.
|
|
1159
1331
|
*
|
|
1160
1332
|
* @accessibility Required for screen readers. Always include a DialogTitle.
|
|
1333
|
+
* @public
|
|
1161
1334
|
*/
|
|
1162
1335
|
declare const DialogTitle: react.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogTitleProps & react.RefAttributes<HTMLHeadingElement>, "ref"> & react.RefAttributes<HTMLHeadingElement>>;
|
|
1336
|
+
/** @public */
|
|
1163
1337
|
type DialogDescriptionProps = ComponentPropsWithoutRef<typeof DialogPrimitive.Description>;
|
|
1164
1338
|
/**
|
|
1165
1339
|
* DialogDescription - The description text of the dialog.
|
|
@@ -1167,52 +1341,72 @@ type DialogDescriptionProps = ComponentPropsWithoutRef<typeof DialogPrimitive.De
|
|
|
1167
1341
|
*
|
|
1168
1342
|
* @accessibility Provides additional context for screen readers.
|
|
1169
1343
|
* If not needed visually, you can use sr-only class.
|
|
1344
|
+
* @public
|
|
1170
1345
|
*/
|
|
1171
1346
|
declare const DialogDescription: react.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogDescriptionProps & react.RefAttributes<HTMLParagraphElement>, "ref"> & react.RefAttributes<HTMLParagraphElement>>;
|
|
1172
1347
|
|
|
1348
|
+
/** @experimental */
|
|
1173
1349
|
declare const AlertDialog: react.FC<AlertDialogPrimitive.AlertDialogProps>;
|
|
1350
|
+
/** @experimental */
|
|
1174
1351
|
declare const AlertDialogTrigger: react.ForwardRefExoticComponent<AlertDialogPrimitive.AlertDialogTriggerProps & react.RefAttributes<HTMLButtonElement>>;
|
|
1352
|
+
/** @experimental */
|
|
1175
1353
|
declare const AlertDialogPortal: react.FC<AlertDialogPrimitive.AlertDialogPortalProps>;
|
|
1354
|
+
/** @experimental */
|
|
1176
1355
|
type AlertDialogOverlayProps = ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>;
|
|
1177
1356
|
/**
|
|
1178
1357
|
* AlertDialogOverlay - The backdrop overlay behind the dialog content.
|
|
1358
|
+
* @experimental
|
|
1179
1359
|
*/
|
|
1180
1360
|
declare const AlertDialogOverlay: react.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogOverlayProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
|
|
1361
|
+
/** @experimental */
|
|
1181
1362
|
type AlertDialogContentProps = ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>;
|
|
1182
1363
|
/**
|
|
1183
1364
|
* AlertDialogContent - The main dialog content container.
|
|
1365
|
+
* @experimental
|
|
1184
1366
|
*/
|
|
1185
1367
|
declare const AlertDialogContent: react.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogContentProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
|
|
1368
|
+
/** @experimental */
|
|
1186
1369
|
type AlertDialogHeaderProps = HTMLAttributes<HTMLDivElement>;
|
|
1187
1370
|
/**
|
|
1188
1371
|
* AlertDialogHeader - Container for dialog title and description.
|
|
1372
|
+
* @experimental
|
|
1189
1373
|
*/
|
|
1190
1374
|
declare const AlertDialogHeader: react.ForwardRefExoticComponent<AlertDialogHeaderProps & react.RefAttributes<HTMLDivElement>>;
|
|
1375
|
+
/** @experimental */
|
|
1191
1376
|
type AlertDialogFooterProps = HTMLAttributes<HTMLDivElement>;
|
|
1192
1377
|
/**
|
|
1193
1378
|
* AlertDialogFooter - Container for dialog action buttons.
|
|
1379
|
+
* @experimental
|
|
1194
1380
|
*/
|
|
1195
1381
|
declare const AlertDialogFooter: react.ForwardRefExoticComponent<AlertDialogFooterProps & react.RefAttributes<HTMLDivElement>>;
|
|
1382
|
+
/** @experimental */
|
|
1196
1383
|
type AlertDialogTitleProps = ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>;
|
|
1197
1384
|
/**
|
|
1198
1385
|
* AlertDialogTitle - The title of the alert dialog.
|
|
1386
|
+
* @experimental
|
|
1199
1387
|
*/
|
|
1200
1388
|
declare const AlertDialogTitle: react.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogTitleProps & react.RefAttributes<HTMLHeadingElement>, "ref"> & react.RefAttributes<HTMLHeadingElement>>;
|
|
1389
|
+
/** @experimental */
|
|
1201
1390
|
type AlertDialogDescriptionProps = ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>;
|
|
1202
1391
|
/**
|
|
1203
1392
|
* AlertDialogDescription - The description text of the alert dialog.
|
|
1393
|
+
* @experimental
|
|
1204
1394
|
*/
|
|
1205
1395
|
declare const AlertDialogDescription: react.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogDescriptionProps & react.RefAttributes<HTMLParagraphElement>, "ref"> & react.RefAttributes<HTMLParagraphElement>>;
|
|
1396
|
+
/** @experimental */
|
|
1206
1397
|
type AlertDialogActionProps = ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>;
|
|
1207
1398
|
/**
|
|
1208
1399
|
* AlertDialogAction - The primary action button (e.g., "Delete", "Confirm").
|
|
1209
1400
|
* Styled as destructive by default.
|
|
1401
|
+
* @experimental
|
|
1210
1402
|
*/
|
|
1211
1403
|
declare const AlertDialogAction: react.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogActionProps & react.RefAttributes<HTMLButtonElement>, "ref"> & react.RefAttributes<HTMLButtonElement>>;
|
|
1404
|
+
/** @experimental */
|
|
1212
1405
|
type AlertDialogCancelProps = ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>;
|
|
1213
1406
|
/**
|
|
1214
1407
|
* AlertDialogCancel - The cancel button.
|
|
1215
1408
|
* Styled as outline variant.
|
|
1409
|
+
* @experimental
|
|
1216
1410
|
*/
|
|
1217
1411
|
declare const AlertDialogCancel: react.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogCancelProps & react.RefAttributes<HTMLButtonElement>, "ref"> & react.RefAttributes<HTMLButtonElement>>;
|
|
1218
1412
|
|
|
@@ -1223,7 +1417,7 @@ declare const AlertDialogCancel: react.ForwardRefExoticComponent<Omit<AlertDialo
|
|
|
1223
1417
|
* Provides context menus, action menus, and navigation menus with full keyboard support.
|
|
1224
1418
|
*
|
|
1225
1419
|
* **Design Specifications**:
|
|
1226
|
-
* - Border-radius:
|
|
1420
|
+
* - Border-radius: `rounded-lg` for the menu surface, `rounded-sm` for items
|
|
1227
1421
|
* - Padding: 4px (p-1) - compact spacing for menu items
|
|
1228
1422
|
* - Shadow: shadow-md - floating element elevation
|
|
1229
1423
|
* - Z-index: z-50 - above most content, below modals
|
|
@@ -1312,30 +1506,46 @@ declare const AlertDialogCancel: react.ForwardRefExoticComponent<Omit<AlertDialo
|
|
|
1312
1506
|
* @see https://www.radix-ui.com/docs/primitives/components/dropdown-menu - Radix UI DropdownMenu
|
|
1313
1507
|
*/
|
|
1314
1508
|
|
|
1509
|
+
/** @public */
|
|
1315
1510
|
declare const DropdownMenu: react.FC<DropdownMenuPrimitive.DropdownMenuProps>;
|
|
1511
|
+
/** @public */
|
|
1316
1512
|
declare const DropdownMenuTrigger: react.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuTriggerProps & react.RefAttributes<HTMLButtonElement>>;
|
|
1513
|
+
/** @experimental */
|
|
1317
1514
|
declare const DropdownMenuGroup: react.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuGroupProps & react.RefAttributes<HTMLDivElement>>;
|
|
1515
|
+
/** @experimental */
|
|
1318
1516
|
declare const DropdownMenuPortal: react.FC<DropdownMenuPrimitive.DropdownMenuPortalProps>;
|
|
1517
|
+
/** @experimental */
|
|
1319
1518
|
declare const DropdownMenuSub: react.FC<DropdownMenuPrimitive.DropdownMenuSubProps>;
|
|
1519
|
+
/** @experimental */
|
|
1320
1520
|
declare const DropdownMenuRadioGroup: react.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuRadioGroupProps & react.RefAttributes<HTMLDivElement>>;
|
|
1521
|
+
/** @experimental */
|
|
1321
1522
|
declare const DropdownMenuSubTrigger: react.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSubTriggerProps & react.RefAttributes<HTMLDivElement>, "ref"> & {
|
|
1322
1523
|
inset?: boolean;
|
|
1323
1524
|
} & react.RefAttributes<HTMLDivElement>>;
|
|
1525
|
+
/** @experimental */
|
|
1324
1526
|
declare const DropdownMenuSubContent: react.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSubContentProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
|
|
1527
|
+
/** @public */
|
|
1325
1528
|
declare const DropdownMenuContent: react.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuContentProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
|
|
1529
|
+
/** @public */
|
|
1326
1530
|
declare const DropdownMenuItem: react.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuItemProps & react.RefAttributes<HTMLDivElement>, "ref"> & {
|
|
1327
1531
|
inset?: boolean;
|
|
1328
1532
|
} & react.RefAttributes<HTMLDivElement>>;
|
|
1533
|
+
/** @public */
|
|
1329
1534
|
declare const DropdownMenuCheckboxItem: react.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuCheckboxItemProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
|
|
1535
|
+
/** @experimental */
|
|
1330
1536
|
declare const DropdownMenuRadioItem: react.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuRadioItemProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
|
|
1537
|
+
/** @experimental */
|
|
1331
1538
|
declare const DropdownMenuLabel: react.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuLabelProps & react.RefAttributes<HTMLDivElement>, "ref"> & {
|
|
1332
1539
|
inset?: boolean;
|
|
1333
1540
|
} & react.RefAttributes<HTMLDivElement>>;
|
|
1541
|
+
/** @public */
|
|
1334
1542
|
declare const DropdownMenuSeparator: react.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSeparatorProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
|
|
1543
|
+
/** @experimental */
|
|
1335
1544
|
declare const DropdownMenuShortcut: react.ForwardRefExoticComponent<react.HTMLAttributes<HTMLSpanElement> & react.RefAttributes<HTMLSpanElement>>;
|
|
1336
1545
|
|
|
1337
1546
|
/**
|
|
1338
1547
|
* Props for the DropdownMenuSubTrigger component
|
|
1548
|
+
* @experimental
|
|
1339
1549
|
*/
|
|
1340
1550
|
type DropdownMenuSubTriggerProps = react.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
|
|
1341
1551
|
/**
|
|
@@ -1345,14 +1555,17 @@ type DropdownMenuSubTriggerProps = react.ComponentPropsWithoutRef<typeof Dropdow
|
|
|
1345
1555
|
};
|
|
1346
1556
|
/**
|
|
1347
1557
|
* Props for the DropdownMenuSubContent component
|
|
1558
|
+
* @experimental
|
|
1348
1559
|
*/
|
|
1349
1560
|
type DropdownMenuSubContentProps = react.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>;
|
|
1350
1561
|
/**
|
|
1351
1562
|
* Props for the DropdownMenuContent component
|
|
1563
|
+
* @public
|
|
1352
1564
|
*/
|
|
1353
1565
|
type DropdownMenuContentProps = react.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>;
|
|
1354
1566
|
/**
|
|
1355
1567
|
* Props for the DropdownMenuItem component
|
|
1568
|
+
* @public
|
|
1356
1569
|
*/
|
|
1357
1570
|
type DropdownMenuItemProps = react.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
|
|
1358
1571
|
/**
|
|
@@ -1362,14 +1575,17 @@ type DropdownMenuItemProps = react.ComponentPropsWithoutRef<typeof DropdownMenuP
|
|
|
1362
1575
|
};
|
|
1363
1576
|
/**
|
|
1364
1577
|
* Props for the DropdownMenuCheckboxItem component
|
|
1578
|
+
* @public
|
|
1365
1579
|
*/
|
|
1366
1580
|
type DropdownMenuCheckboxItemProps = react.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>;
|
|
1367
1581
|
/**
|
|
1368
1582
|
* Props for the DropdownMenuRadioItem component
|
|
1583
|
+
* @experimental
|
|
1369
1584
|
*/
|
|
1370
1585
|
type DropdownMenuRadioItemProps = react.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>;
|
|
1371
1586
|
/**
|
|
1372
1587
|
* Props for the DropdownMenuLabel component
|
|
1588
|
+
* @experimental
|
|
1373
1589
|
*/
|
|
1374
1590
|
type DropdownMenuLabelProps = react.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
|
|
1375
1591
|
/**
|
|
@@ -1379,10 +1595,12 @@ type DropdownMenuLabelProps = react.ComponentPropsWithoutRef<typeof DropdownMenu
|
|
|
1379
1595
|
};
|
|
1380
1596
|
/**
|
|
1381
1597
|
* Props for the DropdownMenuSeparator component
|
|
1598
|
+
* @public
|
|
1382
1599
|
*/
|
|
1383
1600
|
type DropdownMenuSeparatorProps = react.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>;
|
|
1384
1601
|
/**
|
|
1385
1602
|
* Props for the DropdownMenuShortcut component
|
|
1603
|
+
* @experimental
|
|
1386
1604
|
*/
|
|
1387
1605
|
type DropdownMenuShortcutProps = react.HTMLAttributes<HTMLSpanElement>;
|
|
1388
1606
|
|
|
@@ -1400,15 +1618,15 @@ type DropdownMenuShortcutProps = react.HTMLAttributes<HTMLSpanElement>;
|
|
|
1400
1618
|
* - Disabled state support
|
|
1401
1619
|
*
|
|
1402
1620
|
* Design Specs:
|
|
1403
|
-
* - Height: sm=
|
|
1621
|
+
* - Height: sm=36px, default=40px, lg=44px (matches Input component)
|
|
1404
1622
|
* - Padding: Horizontal 12px, vertical varies by size
|
|
1405
|
-
* - Border radius:
|
|
1623
|
+
* - Border radius: `rounded-md` on the trigger, `rounded-lg` on the panel
|
|
1406
1624
|
* - Border: 1px solid, changes on focus/error
|
|
1407
1625
|
* - Transition: 150ms (consistent with design system)
|
|
1408
1626
|
* - Font size: sm/default=14px (text-sm), lg=16px (text-base)
|
|
1409
1627
|
*
|
|
1410
1628
|
* Size Variants:
|
|
1411
|
-
* - sm: Height
|
|
1629
|
+
* - sm: Height 36px - Compact forms and filters, matching a small Button
|
|
1412
1630
|
* - default: Height 40px (h-10) - Standard forms
|
|
1413
1631
|
* - lg: Height 44px (h-11) - Prominent selects
|
|
1414
1632
|
*
|
|
@@ -1419,23 +1637,101 @@ type DropdownMenuShortcutProps = react.HTMLAttributes<HTMLSpanElement>;
|
|
|
1419
1637
|
* - Grouping support with labels
|
|
1420
1638
|
* - Placeholder text support
|
|
1421
1639
|
* - Error state via aria-invalid
|
|
1640
|
+
* @public
|
|
1422
1641
|
*/
|
|
1423
1642
|
declare function Select({ ...props }: ComponentProps<typeof SelectPrimitive.Root>): react_jsx_runtime.JSX.Element;
|
|
1643
|
+
/** @experimental */
|
|
1424
1644
|
declare function SelectGroup({ ...props }: ComponentProps<typeof SelectPrimitive.Group>): react_jsx_runtime.JSX.Element;
|
|
1645
|
+
/** @public */
|
|
1425
1646
|
declare function SelectValue({ ...props }: ComponentProps<typeof SelectPrimitive.Value>): react_jsx_runtime.JSX.Element;
|
|
1647
|
+
/** @experimental */
|
|
1426
1648
|
declare const selectTriggerVariants: (props?: ({
|
|
1427
1649
|
size?: "default" | "sm" | "lg" | null | undefined;
|
|
1428
1650
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
1651
|
+
/** @public */
|
|
1429
1652
|
interface SelectTriggerProps extends ComponentProps<typeof SelectPrimitive.Trigger>, VariantProps<typeof selectTriggerVariants> {
|
|
1430
1653
|
}
|
|
1654
|
+
/** @public */
|
|
1431
1655
|
declare const SelectTrigger: react.ForwardRefExoticComponent<Omit<SelectTriggerProps, "ref"> & react.RefAttributes<HTMLButtonElement>>;
|
|
1656
|
+
/** @public */
|
|
1432
1657
|
declare function SelectContent({ className, children, position, ...props }: ComponentProps<typeof SelectPrimitive.Content>): react_jsx_runtime.JSX.Element;
|
|
1658
|
+
/** @experimental */
|
|
1433
1659
|
declare function SelectLabel({ className, ...props }: ComponentProps<typeof SelectPrimitive.Label>): react_jsx_runtime.JSX.Element;
|
|
1660
|
+
/** @public */
|
|
1434
1661
|
declare function SelectItem({ className, children, ...props }: ComponentProps<typeof SelectPrimitive.Item>): react_jsx_runtime.JSX.Element;
|
|
1662
|
+
/** @experimental */
|
|
1435
1663
|
declare function SelectSeparator({ className, ...props }: ComponentProps<typeof SelectPrimitive.Separator>): react_jsx_runtime.JSX.Element;
|
|
1664
|
+
/** @experimental */
|
|
1436
1665
|
declare function SelectScrollUpButton({ className, ...props }: ComponentProps<typeof SelectPrimitive.ScrollUpButton>): react_jsx_runtime.JSX.Element;
|
|
1666
|
+
/** @experimental */
|
|
1437
1667
|
declare function SelectScrollDownButton({ className, ...props }: ComponentProps<typeof SelectPrimitive.ScrollDownButton>): react_jsx_runtime.JSX.Element;
|
|
1438
1668
|
|
|
1669
|
+
/**
|
|
1670
|
+
* Sheet Component Types
|
|
1671
|
+
*
|
|
1672
|
+
* TypeScript type definitions for the Sheet component (Dialog variant).
|
|
1673
|
+
*/
|
|
1674
|
+
|
|
1675
|
+
/**
|
|
1676
|
+
* Sheet root component props
|
|
1677
|
+
* Extends Radix UI Dialog.Root props
|
|
1678
|
+
* @public
|
|
1679
|
+
*/
|
|
1680
|
+
type SheetProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Root>;
|
|
1681
|
+
/**
|
|
1682
|
+
* Sheet trigger component props
|
|
1683
|
+
* Extends Radix UI Dialog.Trigger props
|
|
1684
|
+
* @experimental
|
|
1685
|
+
*/
|
|
1686
|
+
type SheetTriggerProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Trigger>;
|
|
1687
|
+
/**
|
|
1688
|
+
* Sheet close component props
|
|
1689
|
+
* Extends Radix UI Dialog.Close props
|
|
1690
|
+
* @experimental
|
|
1691
|
+
*/
|
|
1692
|
+
type SheetCloseProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Close>;
|
|
1693
|
+
/**
|
|
1694
|
+
* Sheet overlay component props
|
|
1695
|
+
* Extends Radix UI Dialog.Overlay props
|
|
1696
|
+
* @experimental
|
|
1697
|
+
*/
|
|
1698
|
+
type SheetOverlayProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>;
|
|
1699
|
+
/**
|
|
1700
|
+
* Sheet header component props
|
|
1701
|
+
* Standard div props
|
|
1702
|
+
* @public
|
|
1703
|
+
*/
|
|
1704
|
+
type SheetHeaderProps = React.HTMLAttributes<HTMLDivElement>;
|
|
1705
|
+
/**
|
|
1706
|
+
* Sheet footer component props
|
|
1707
|
+
* Standard div props
|
|
1708
|
+
* @experimental
|
|
1709
|
+
*/
|
|
1710
|
+
type SheetFooterProps = React.HTMLAttributes<HTMLDivElement>;
|
|
1711
|
+
/**
|
|
1712
|
+
* Sheet title component props
|
|
1713
|
+
* Extends Radix UI Dialog.Title props
|
|
1714
|
+
* @public
|
|
1715
|
+
*/
|
|
1716
|
+
type SheetTitleProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>;
|
|
1717
|
+
/**
|
|
1718
|
+
* Sheet description component props
|
|
1719
|
+
* Extends Radix UI Dialog.Description props
|
|
1720
|
+
* @public
|
|
1721
|
+
*/
|
|
1722
|
+
type SheetDescriptionProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>;
|
|
1723
|
+
/**
|
|
1724
|
+
* Sheet component refs
|
|
1725
|
+
* @experimental
|
|
1726
|
+
*/
|
|
1727
|
+
type SheetOverlayRef = React.ElementRef<typeof DialogPrimitive.Overlay>;
|
|
1728
|
+
/** @experimental */
|
|
1729
|
+
type SheetContentRef = React.ElementRef<typeof DialogPrimitive.Content>;
|
|
1730
|
+
/** @experimental */
|
|
1731
|
+
type SheetTitleRef = React.ElementRef<typeof DialogPrimitive.Title>;
|
|
1732
|
+
/** @experimental */
|
|
1733
|
+
type SheetDescriptionRef = React.ElementRef<typeof DialogPrimitive.Description>;
|
|
1734
|
+
|
|
1439
1735
|
/**
|
|
1440
1736
|
* Sheet Component
|
|
1441
1737
|
*
|
|
@@ -1448,7 +1744,7 @@ declare function SelectScrollDownButton({ className, ...props }: ComponentProps<
|
|
|
1448
1744
|
*
|
|
1449
1745
|
* - **Width**: 320px (sm), 400px (default), 512px (lg), 672px (xl), 100% (full)
|
|
1450
1746
|
* - **Animation**: Slide-in from side (150ms duration)
|
|
1451
|
-
* - **Backdrop**:
|
|
1747
|
+
* - **Backdrop**: the `--nx-overlay` scrim, with backdrop blur
|
|
1452
1748
|
* - **z-index**: 50 (both overlay and content - content renders on top via DOM order)
|
|
1453
1749
|
* - **Border-radius**: 0 (full-screen edges)
|
|
1454
1750
|
*
|
|
@@ -1488,29 +1784,39 @@ declare function SelectScrollDownButton({ className, ...props }: ComponentProps<
|
|
|
1488
1784
|
* ```
|
|
1489
1785
|
*
|
|
1490
1786
|
* @see https://www.radix-ui.com/primitives/docs/components/dialog
|
|
1787
|
+
* @public
|
|
1491
1788
|
*/
|
|
1492
|
-
declare const Sheet:
|
|
1789
|
+
declare const Sheet: {
|
|
1790
|
+
({ modal, children, ...props }: SheetProps): react_jsx_runtime.JSX.Element;
|
|
1791
|
+
displayName: string;
|
|
1792
|
+
};
|
|
1793
|
+
/** @experimental */
|
|
1493
1794
|
declare const SheetTrigger: react.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & react.RefAttributes<HTMLButtonElement>>;
|
|
1795
|
+
/** @experimental */
|
|
1494
1796
|
declare const SheetClose: react.ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & react.RefAttributes<HTMLButtonElement>>;
|
|
1797
|
+
/** @experimental */
|
|
1495
1798
|
declare const SheetPortal: react.FC<DialogPrimitive.DialogPortalProps>;
|
|
1496
1799
|
/**
|
|
1497
1800
|
* SheetOverlay
|
|
1498
1801
|
*
|
|
1499
1802
|
* Semi-transparent backdrop that appears behind the sheet.
|
|
1500
1803
|
*
|
|
1501
|
-
* - **Background**:
|
|
1804
|
+
* - **Background**: the `--nx-overlay` scrim + backdrop blur
|
|
1502
1805
|
* - **Animation**: Fade in/out (150ms)
|
|
1503
1806
|
* - **z-index**: 50
|
|
1807
|
+
* @experimental
|
|
1504
1808
|
*/
|
|
1505
1809
|
declare const SheetOverlay: react.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogOverlayProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
|
|
1506
1810
|
/**
|
|
1507
1811
|
* Sheet Content Variants
|
|
1508
1812
|
*
|
|
1509
1813
|
* Defines slide-in animations for each side and size options.
|
|
1814
|
+
* @experimental
|
|
1510
1815
|
*/
|
|
1511
1816
|
declare const sheetVariants: (props?: ({
|
|
1512
1817
|
side?: "top" | "right" | "bottom" | "left" | null | undefined;
|
|
1513
1818
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
1819
|
+
/** @public */
|
|
1514
1820
|
interface SheetContentProps extends react.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>, VariantProps<typeof sheetVariants> {
|
|
1515
1821
|
}
|
|
1516
1822
|
/**
|
|
@@ -1525,6 +1831,7 @@ interface SheetContentProps extends react.ComponentPropsWithoutRef<typeof Dialog
|
|
|
1525
1831
|
* - **Close Button**: Positioned in top-right corner (16px from edges)
|
|
1526
1832
|
*
|
|
1527
1833
|
* @param side - Which edge to slide in from: "left", "right", "top", "bottom"
|
|
1834
|
+
* @public
|
|
1528
1835
|
*/
|
|
1529
1836
|
declare const SheetContent: react.ForwardRefExoticComponent<SheetContentProps & react.RefAttributes<HTMLDivElement>>;
|
|
1530
1837
|
/**
|
|
@@ -1534,6 +1841,7 @@ declare const SheetContent: react.ForwardRefExoticComponent<SheetContentProps &
|
|
|
1534
1841
|
*
|
|
1535
1842
|
* - **Layout**: Flex column with 6px gap
|
|
1536
1843
|
* - **Text Alignment**: Left (default) or center
|
|
1844
|
+
* @public
|
|
1537
1845
|
*/
|
|
1538
1846
|
declare const SheetHeader: {
|
|
1539
1847
|
({ className, ...props }: react.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
|
|
@@ -1546,6 +1854,7 @@ declare const SheetHeader: {
|
|
|
1546
1854
|
*
|
|
1547
1855
|
* - **Layout**: Flex row on desktop, column on mobile
|
|
1548
1856
|
* - **Alignment**: Right-aligned on desktop, stretched on mobile
|
|
1857
|
+
* @experimental
|
|
1549
1858
|
*/
|
|
1550
1859
|
declare const SheetFooter: {
|
|
1551
1860
|
({ className, ...props }: react.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
|
|
@@ -1559,6 +1868,7 @@ declare const SheetFooter: {
|
|
|
1559
1868
|
* - **Font**: text-lg font-semibold
|
|
1560
1869
|
* - **Color**: text-foreground
|
|
1561
1870
|
* - **Required**: For accessibility (screen readers)
|
|
1871
|
+
* @public
|
|
1562
1872
|
*/
|
|
1563
1873
|
declare const SheetTitle: react.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogTitleProps & react.RefAttributes<HTMLHeadingElement>, "ref"> & react.RefAttributes<HTMLHeadingElement>>;
|
|
1564
1874
|
/**
|
|
@@ -1569,63 +1879,10 @@ declare const SheetTitle: react.ForwardRefExoticComponent<Omit<DialogPrimitive.D
|
|
|
1569
1879
|
* - **Font**: text-sm
|
|
1570
1880
|
* - **Color**: text-muted-foreground
|
|
1571
1881
|
* - **Purpose**: Provide context for screen readers
|
|
1882
|
+
* @public
|
|
1572
1883
|
*/
|
|
1573
1884
|
declare const SheetDescription: react.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogDescriptionProps & react.RefAttributes<HTMLParagraphElement>, "ref"> & react.RefAttributes<HTMLParagraphElement>>;
|
|
1574
1885
|
|
|
1575
|
-
/**
|
|
1576
|
-
* Sheet Component Types
|
|
1577
|
-
*
|
|
1578
|
-
* TypeScript type definitions for the Sheet component (Dialog variant).
|
|
1579
|
-
*/
|
|
1580
|
-
|
|
1581
|
-
/**
|
|
1582
|
-
* Sheet root component props
|
|
1583
|
-
* Extends Radix UI Dialog.Root props
|
|
1584
|
-
*/
|
|
1585
|
-
type SheetProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Root>;
|
|
1586
|
-
/**
|
|
1587
|
-
* Sheet trigger component props
|
|
1588
|
-
* Extends Radix UI Dialog.Trigger props
|
|
1589
|
-
*/
|
|
1590
|
-
type SheetTriggerProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Trigger>;
|
|
1591
|
-
/**
|
|
1592
|
-
* Sheet close component props
|
|
1593
|
-
* Extends Radix UI Dialog.Close props
|
|
1594
|
-
*/
|
|
1595
|
-
type SheetCloseProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Close>;
|
|
1596
|
-
/**
|
|
1597
|
-
* Sheet overlay component props
|
|
1598
|
-
* Extends Radix UI Dialog.Overlay props
|
|
1599
|
-
*/
|
|
1600
|
-
type SheetOverlayProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>;
|
|
1601
|
-
/**
|
|
1602
|
-
* Sheet header component props
|
|
1603
|
-
* Standard div props
|
|
1604
|
-
*/
|
|
1605
|
-
type SheetHeaderProps = React.HTMLAttributes<HTMLDivElement>;
|
|
1606
|
-
/**
|
|
1607
|
-
* Sheet footer component props
|
|
1608
|
-
* Standard div props
|
|
1609
|
-
*/
|
|
1610
|
-
type SheetFooterProps = React.HTMLAttributes<HTMLDivElement>;
|
|
1611
|
-
/**
|
|
1612
|
-
* Sheet title component props
|
|
1613
|
-
* Extends Radix UI Dialog.Title props
|
|
1614
|
-
*/
|
|
1615
|
-
type SheetTitleProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>;
|
|
1616
|
-
/**
|
|
1617
|
-
* Sheet description component props
|
|
1618
|
-
* Extends Radix UI Dialog.Description props
|
|
1619
|
-
*/
|
|
1620
|
-
type SheetDescriptionProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>;
|
|
1621
|
-
/**
|
|
1622
|
-
* Sheet component refs
|
|
1623
|
-
*/
|
|
1624
|
-
type SheetOverlayRef = React.ElementRef<typeof DialogPrimitive.Overlay>;
|
|
1625
|
-
type SheetContentRef = React.ElementRef<typeof DialogPrimitive.Content>;
|
|
1626
|
-
type SheetTitleRef = React.ElementRef<typeof DialogPrimitive.Title>;
|
|
1627
|
-
type SheetDescriptionRef = React.ElementRef<typeof DialogPrimitive.Description>;
|
|
1628
|
-
|
|
1629
1886
|
/**
|
|
1630
1887
|
* Command Component
|
|
1631
1888
|
*
|
|
@@ -1651,7 +1908,7 @@ type SheetDescriptionRef = React.ElementRef<typeof DialogPrimitive.Description>;
|
|
|
1651
1908
|
* @design-spec
|
|
1652
1909
|
* - Input height: 48px (h-12) - larger for prominence
|
|
1653
1910
|
* - Item height: 36px (h-9) desktop, 44px (h-11) mobile for touch
|
|
1654
|
-
* - Border radius:
|
|
1911
|
+
* - Border radius: `rounded-lg` for the panel, `rounded-sm` for items
|
|
1655
1912
|
* - Max list height: 400px (max-h-[400px])
|
|
1656
1913
|
* - Transition: 150ms per design system
|
|
1657
1914
|
*
|
|
@@ -1661,11 +1918,13 @@ type SheetDescriptionRef = React.ElementRef<typeof DialogPrimitive.Description>;
|
|
|
1661
1918
|
* - Screen reader announcements for results
|
|
1662
1919
|
* - Focus management and visual focus indicators
|
|
1663
1920
|
* - WCAG 2.2 AA compliant (verified contrast ratios)
|
|
1921
|
+
* @experimental
|
|
1664
1922
|
*/
|
|
1665
1923
|
type CommandProps = ComponentPropsWithoutRef<typeof Command$1>;
|
|
1666
1924
|
/**
|
|
1667
1925
|
* Command - Root container for the command palette.
|
|
1668
1926
|
* Handles filtering, keyboard navigation, and accessibility.
|
|
1927
|
+
* @experimental
|
|
1669
1928
|
*/
|
|
1670
1929
|
declare const Command: react.ForwardRefExoticComponent<Omit<{
|
|
1671
1930
|
children?: React.ReactNode;
|
|
@@ -1684,7 +1943,31 @@ declare const Command: react.ForwardRefExoticComponent<Omit<{
|
|
|
1684
1943
|
disablePointerSelection?: boolean;
|
|
1685
1944
|
vimBindings?: boolean;
|
|
1686
1945
|
} & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
|
|
1687
|
-
|
|
1946
|
+
/** @experimental */
|
|
1947
|
+
interface CommandDialogProps extends DialogPrimitive.DialogProps {
|
|
1948
|
+
/**
|
|
1949
|
+
* Passed to the command root this dialog renders internally.
|
|
1950
|
+
*
|
|
1951
|
+
* A seam rather than a list of forwarded props, because the settings a caller needs from the
|
|
1952
|
+
* root are the ones this component happens not to have thought of: `label`, which supplies the
|
|
1953
|
+
* search input's accessible name (cmdk renders an EMPTY hidden label without it, and an empty
|
|
1954
|
+
* `aria-labelledby` reference is worse than none — it stops the placeholder naming the field);
|
|
1955
|
+
* `filter` and `shouldFilter`, which decide match order; and `vimBindings`, which claims Ctrl+K
|
|
1956
|
+
* and Ctrl+N inside the list.
|
|
1957
|
+
*
|
|
1958
|
+
* `children` is excluded because this component owns the dialog's contents.
|
|
1959
|
+
*/
|
|
1960
|
+
commandProps?: Omit<ComponentPropsWithoutRef<typeof Command>, "children">;
|
|
1961
|
+
/**
|
|
1962
|
+
* Passed to the dialog content this component renders internally.
|
|
1963
|
+
*
|
|
1964
|
+
* The seam that matters here is `onCloseAutoFocus`: this dialog has no trigger, so Radix has
|
|
1965
|
+
* nothing to hand focus back to, and it fires this at the point focus is actually being
|
|
1966
|
+
* returned — after the exit animation, which a timer set at close time cannot know the length
|
|
1967
|
+
* of. `className` is excluded because this component owns the dialog's own layout.
|
|
1968
|
+
*/
|
|
1969
|
+
contentProps?: Omit<ComponentPropsWithoutRef<typeof DialogPrimitive.Content>, "children" | "className">;
|
|
1970
|
+
}
|
|
1688
1971
|
/**
|
|
1689
1972
|
* CommandDialog - Command palette in a modal dialog.
|
|
1690
1973
|
* Use this variant for Cmd+K keyboard shortcut pattern.
|
|
@@ -1711,12 +1994,15 @@ type CommandDialogProps = DialogPrimitive.DialogProps;
|
|
|
1711
1994
|
* </CommandDialog>
|
|
1712
1995
|
* )
|
|
1713
1996
|
* ```
|
|
1997
|
+
* @experimental
|
|
1714
1998
|
*/
|
|
1715
|
-
declare const CommandDialog: ({ children, ...props }: CommandDialogProps) => react_jsx_runtime.JSX.Element;
|
|
1999
|
+
declare const CommandDialog: ({ children, commandProps, contentProps, ...props }: CommandDialogProps) => react_jsx_runtime.JSX.Element;
|
|
2000
|
+
/** @experimental */
|
|
1716
2001
|
type CommandInputProps = ComponentPropsWithoutRef<typeof Command$1.Input>;
|
|
1717
2002
|
/**
|
|
1718
2003
|
* CommandInput - Search input field for filtering commands.
|
|
1719
2004
|
* Includes search icon and styled per design system.
|
|
2005
|
+
* @experimental
|
|
1720
2006
|
*/
|
|
1721
2007
|
declare const CommandInput: react.ForwardRefExoticComponent<Omit<Omit<Pick<Pick<react.DetailedHTMLProps<react.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "key" | keyof react.InputHTMLAttributes<HTMLInputElement>> & {
|
|
1722
2008
|
ref?: React.Ref<HTMLInputElement>;
|
|
@@ -1726,10 +2012,12 @@ declare const CommandInput: react.ForwardRefExoticComponent<Omit<Omit<Pick<Pick<
|
|
|
1726
2012
|
value?: string;
|
|
1727
2013
|
onValueChange?: (search: string) => void;
|
|
1728
2014
|
} & react.RefAttributes<HTMLInputElement>, "ref"> & react.RefAttributes<HTMLInputElement>>;
|
|
2015
|
+
/** @experimental */
|
|
1729
2016
|
type CommandListProps = ComponentPropsWithoutRef<typeof Command$1.List>;
|
|
1730
2017
|
/**
|
|
1731
2018
|
* CommandList - Scrollable container for command results.
|
|
1732
2019
|
* Max height 400px per design spec to prevent tall dialogs.
|
|
2020
|
+
* @experimental
|
|
1733
2021
|
*/
|
|
1734
2022
|
declare const CommandList: react.ForwardRefExoticComponent<Omit<{
|
|
1735
2023
|
children?: React.ReactNode;
|
|
@@ -1740,10 +2028,12 @@ declare const CommandList: react.ForwardRefExoticComponent<Omit<{
|
|
|
1740
2028
|
}, "asChild" | "key" | keyof HTMLAttributes<HTMLDivElement>> & {
|
|
1741
2029
|
label?: string;
|
|
1742
2030
|
} & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
|
|
2031
|
+
/** @experimental */
|
|
1743
2032
|
type CommandEmptyProps = ComponentPropsWithoutRef<typeof Command$1.Empty>;
|
|
1744
2033
|
/**
|
|
1745
2034
|
* CommandEmpty - Empty state message when no results found.
|
|
1746
2035
|
* Centered text with muted color per design spec.
|
|
2036
|
+
* @experimental
|
|
1747
2037
|
*/
|
|
1748
2038
|
declare const CommandEmpty: react.ForwardRefExoticComponent<Omit<{
|
|
1749
2039
|
children?: React.ReactNode;
|
|
@@ -1752,10 +2042,12 @@ declare const CommandEmpty: react.ForwardRefExoticComponent<Omit<{
|
|
|
1752
2042
|
} & {
|
|
1753
2043
|
asChild?: boolean;
|
|
1754
2044
|
}, "asChild" | "key" | keyof HTMLAttributes<HTMLDivElement>> & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
|
|
2045
|
+
/** @experimental */
|
|
1755
2046
|
type CommandGroupProps = ComponentPropsWithoutRef<typeof Command$1.Group>;
|
|
1756
2047
|
/**
|
|
1757
2048
|
* CommandGroup - Grouped section of commands with optional heading.
|
|
1758
2049
|
* Heading styled as uppercase, small, semibold per design spec.
|
|
2050
|
+
* @experimental
|
|
1759
2051
|
*/
|
|
1760
2052
|
declare const CommandGroup: react.ForwardRefExoticComponent<Omit<{
|
|
1761
2053
|
children?: React.ReactNode;
|
|
@@ -1768,10 +2060,12 @@ declare const CommandGroup: react.ForwardRefExoticComponent<Omit<{
|
|
|
1768
2060
|
value?: string;
|
|
1769
2061
|
forceMount?: boolean;
|
|
1770
2062
|
} & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
|
|
2063
|
+
/** @experimental */
|
|
1771
2064
|
type CommandSeparatorProps = ComponentPropsWithoutRef<typeof Command$1.Separator>;
|
|
1772
2065
|
/**
|
|
1773
2066
|
* CommandSeparator - Visual divider between command groups.
|
|
1774
|
-
* 1px line with border border-
|
|
2067
|
+
* 1px line with border border-border color, 8px margin top/bottom.
|
|
2068
|
+
* @experimental
|
|
1775
2069
|
*/
|
|
1776
2070
|
declare const CommandSeparator: react.ForwardRefExoticComponent<Omit<Pick<Pick<react.DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof HTMLAttributes<HTMLDivElement>> & {
|
|
1777
2071
|
ref?: React.Ref<HTMLDivElement>;
|
|
@@ -1780,11 +2074,13 @@ declare const CommandSeparator: react.ForwardRefExoticComponent<Omit<Pick<Pick<r
|
|
|
1780
2074
|
}, "asChild" | "key" | keyof HTMLAttributes<HTMLDivElement>> & {
|
|
1781
2075
|
alwaysRender?: boolean;
|
|
1782
2076
|
} & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
|
|
2077
|
+
/** @experimental */
|
|
1783
2078
|
type CommandItemProps = ComponentPropsWithoutRef<typeof Command$1.Item>;
|
|
1784
2079
|
/**
|
|
1785
2080
|
* CommandItem - Individual selectable command item.
|
|
1786
2081
|
* Height: 36px desktop, 44px mobile per design spec.
|
|
1787
2082
|
* Includes hover, focus, and selected states.
|
|
2083
|
+
* @experimental
|
|
1788
2084
|
*/
|
|
1789
2085
|
declare const CommandItem: react.ForwardRefExoticComponent<Omit<{
|
|
1790
2086
|
children?: React.ReactNode;
|
|
@@ -1799,13 +2095,30 @@ declare const CommandItem: react.ForwardRefExoticComponent<Omit<{
|
|
|
1799
2095
|
keywords?: string[];
|
|
1800
2096
|
forceMount?: boolean;
|
|
1801
2097
|
} & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
|
|
2098
|
+
/** @experimental */
|
|
1802
2099
|
type CommandShortcutProps = HTMLAttributes<HTMLSpanElement>;
|
|
1803
2100
|
/**
|
|
1804
2101
|
* CommandShortcut - Keyboard shortcut display (e.g., "⌘K", "↵ Enter").
|
|
1805
2102
|
* Monospace font, subtle background, right-aligned per design spec.
|
|
2103
|
+
* @experimental
|
|
1806
2104
|
*/
|
|
1807
2105
|
declare const CommandShortcut: react.ForwardRefExoticComponent<CommandShortcutProps & react.RefAttributes<HTMLSpanElement>>;
|
|
1808
2106
|
|
|
2107
|
+
/**
|
|
2108
|
+
* The command palette's default match scorer, re-exported.
|
|
2109
|
+
*
|
|
2110
|
+
* A caller that overrides `filter` — to keep an opaque item value out of the scoring, say — still
|
|
2111
|
+
* wants the ranking that comes for free, and reaching for `cmdk` directly is not open to every
|
|
2112
|
+
* package here.
|
|
2113
|
+
*
|
|
2114
|
+
* Bound to a declaration rather than re-exported with `export { x as y }`: the bundler keeps a doc
|
|
2115
|
+
* comment attached to a declaration and drops one attached to an export statement, so the release
|
|
2116
|
+
* tag would not reach the published types.
|
|
2117
|
+
*
|
|
2118
|
+
* @experimental
|
|
2119
|
+
*/
|
|
2120
|
+
declare const commandDefaultFilter: (value: string, search: string, keywords?: string[]) => number;
|
|
2121
|
+
|
|
1809
2122
|
/**
|
|
1810
2123
|
* Spinner Component - Design System Specification
|
|
1811
2124
|
*
|
|
@@ -1849,6 +2162,7 @@ declare const CommandShortcut: react.ForwardRefExoticComponent<CommandShortcutPr
|
|
|
1849
2162
|
* @example
|
|
1850
2163
|
* // Custom color
|
|
1851
2164
|
* <Spinner className="text-primary" />
|
|
2165
|
+
* @experimental
|
|
1852
2166
|
*/
|
|
1853
2167
|
declare const spinnerVariants: (props?: ({
|
|
1854
2168
|
size?: "sm" | "md" | "lg" | null | undefined;
|
|
@@ -1858,6 +2172,7 @@ declare const spinnerVariants: (props?: ({
|
|
|
1858
2172
|
*
|
|
1859
2173
|
* Extends LucideProps to support all standard SVG attributes (data-*, id, etc.)
|
|
1860
2174
|
* while providing size variants and accessibility features.
|
|
2175
|
+
* @experimental
|
|
1861
2176
|
*/
|
|
1862
2177
|
type SpinnerProps = Omit<LucideProps, "size"> & VariantProps<typeof spinnerVariants> & {
|
|
1863
2178
|
/**
|
|
@@ -1868,6 +2183,7 @@ type SpinnerProps = Omit<LucideProps, "size"> & VariantProps<typeof spinnerVaria
|
|
|
1868
2183
|
};
|
|
1869
2184
|
/**
|
|
1870
2185
|
* Spinner component for loading states
|
|
2186
|
+
* @experimental
|
|
1871
2187
|
*/
|
|
1872
2188
|
declare const Spinner: react.ForwardRefExoticComponent<Omit<SpinnerProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
|
|
1873
2189
|
|
|
@@ -1936,9 +2252,9 @@ declare const Spinner: react.ForwardRefExoticComponent<Omit<SpinnerProps, "ref">
|
|
|
1936
2252
|
*
|
|
1937
2253
|
* Customization:
|
|
1938
2254
|
* All styling uses CSS variables from the design system:
|
|
1939
|
-
* - --normal-bg: Background color (uses --popover with fallback)
|
|
1940
|
-
* - --normal-text: Text color (uses --popover-foreground with fallback)
|
|
1941
|
-
* - --normal-border: Border color (uses --border with fallback)
|
|
2255
|
+
* - --normal-bg: Background color (uses --nx-popover with fallback)
|
|
2256
|
+
* - --normal-text: Text color (uses --nx-popover-foreground with fallback)
|
|
2257
|
+
* - --normal-border: Border color (uses --nx-border with fallback)
|
|
1942
2258
|
* - --border-radius: Border radius (uses --radius with fallback)
|
|
1943
2259
|
*
|
|
1944
2260
|
* Security:
|
|
@@ -1960,20 +2276,30 @@ declare const Spinner: react.ForwardRefExoticComponent<Omit<SpinnerProps, "ref">
|
|
|
1960
2276
|
*
|
|
1961
2277
|
* @see https://sonner.emilkowal.ski/ - Sonner documentation
|
|
1962
2278
|
* @see https://ui.shadcn.com/docs/components/sonner - shadcn/ui integration guide
|
|
2279
|
+
* @experimental
|
|
1963
2280
|
*/
|
|
1964
2281
|
declare function Toaster({ theme, ...props }: ToasterProps): react_jsx_runtime.JSX.Element;
|
|
1965
2282
|
|
|
2283
|
+
/** @experimental */
|
|
1966
2284
|
declare const Table: react.ForwardRefExoticComponent<react.HTMLAttributes<HTMLTableElement> & react.RefAttributes<HTMLTableElement>>;
|
|
2285
|
+
/** @experimental */
|
|
1967
2286
|
declare const TableHeader: react.ForwardRefExoticComponent<react.HTMLAttributes<HTMLTableSectionElement> & react.RefAttributes<HTMLTableSectionElement>>;
|
|
2287
|
+
/** @experimental */
|
|
1968
2288
|
declare const TableBody: react.ForwardRefExoticComponent<react.HTMLAttributes<HTMLTableSectionElement> & react.RefAttributes<HTMLTableSectionElement>>;
|
|
2289
|
+
/** @experimental */
|
|
1969
2290
|
declare const TableFooter: react.ForwardRefExoticComponent<react.HTMLAttributes<HTMLTableSectionElement> & react.RefAttributes<HTMLTableSectionElement>>;
|
|
2291
|
+
/** @experimental */
|
|
1970
2292
|
declare const TableRow: react.ForwardRefExoticComponent<react.HTMLAttributes<HTMLTableRowElement> & react.RefAttributes<HTMLTableRowElement>>;
|
|
2293
|
+
/** @experimental */
|
|
1971
2294
|
declare const TableHead: react.ForwardRefExoticComponent<react.ThHTMLAttributes<HTMLTableCellElement> & react.RefAttributes<HTMLTableCellElement>>;
|
|
2295
|
+
/** @experimental */
|
|
1972
2296
|
declare const TableCell: react.ForwardRefExoticComponent<react.TdHTMLAttributes<HTMLTableCellElement> & react.RefAttributes<HTMLTableCellElement>>;
|
|
2297
|
+
/** @experimental */
|
|
1973
2298
|
declare const TableCaption: react.ForwardRefExoticComponent<react.HTMLAttributes<HTMLTableCaptionElement> & react.RefAttributes<HTMLTableCaptionElement>>;
|
|
1974
2299
|
|
|
1975
2300
|
/**
|
|
1976
2301
|
* Props for TableSearch component
|
|
2302
|
+
* @experimental
|
|
1977
2303
|
*/
|
|
1978
2304
|
interface TableSearchProps {
|
|
1979
2305
|
/** Current search value */
|
|
@@ -2008,11 +2334,13 @@ interface TableSearchProps {
|
|
|
2008
2334
|
* isLoading={loading}
|
|
2009
2335
|
* />
|
|
2010
2336
|
* ```
|
|
2337
|
+
* @experimental
|
|
2011
2338
|
*/
|
|
2012
2339
|
declare function TableSearch({ value, onChange, onClear, placeholder, isLoading, inputRef, }: TableSearchProps): react_jsx_runtime.JSX.Element;
|
|
2013
2340
|
|
|
2014
2341
|
/**
|
|
2015
2342
|
* Props for TableError component
|
|
2343
|
+
* @experimental
|
|
2016
2344
|
*/
|
|
2017
2345
|
interface TableErrorProps {
|
|
2018
2346
|
/** Error message to display */
|
|
@@ -2020,14 +2348,17 @@ interface TableErrorProps {
|
|
|
2020
2348
|
}
|
|
2021
2349
|
/**
|
|
2022
2350
|
* Error state component for tables
|
|
2351
|
+
* @experimental
|
|
2023
2352
|
*/
|
|
2024
2353
|
declare function TableError({ message, }: TableErrorProps): react_jsx_runtime.JSX.Element;
|
|
2025
2354
|
/**
|
|
2026
2355
|
* Loading state component for tables
|
|
2356
|
+
* @experimental
|
|
2027
2357
|
*/
|
|
2028
2358
|
declare function TableLoading(): react_jsx_runtime.JSX.Element;
|
|
2029
2359
|
/**
|
|
2030
2360
|
* Props for TableEmpty component
|
|
2361
|
+
* @experimental
|
|
2031
2362
|
*/
|
|
2032
2363
|
interface TableEmptyProps {
|
|
2033
2364
|
/** Custom message to display when no data */
|
|
@@ -2035,9 +2366,97 @@ interface TableEmptyProps {
|
|
|
2035
2366
|
}
|
|
2036
2367
|
/**
|
|
2037
2368
|
* Empty state component for tables
|
|
2369
|
+
* @experimental
|
|
2038
2370
|
*/
|
|
2039
2371
|
declare function TableEmpty({ message }: TableEmptyProps): react_jsx_runtime.JSX.Element;
|
|
2040
2372
|
|
|
2373
|
+
/**
|
|
2374
|
+
* TableSkeleton Component
|
|
2375
|
+
*
|
|
2376
|
+
* Generic loading skeleton for data tables.
|
|
2377
|
+
* Renders header, body, and footer skeleton bars inside a card.
|
|
2378
|
+
* Unified with EntryTable skeleton pattern for consistency across all tables.
|
|
2379
|
+
*/
|
|
2380
|
+
|
|
2381
|
+
/** @experimental */
|
|
2382
|
+
interface TableSkeletonProps {
|
|
2383
|
+
columns?: number;
|
|
2384
|
+
rowCount?: number;
|
|
2385
|
+
hideWrapper?: boolean;
|
|
2386
|
+
hideFooter?: boolean;
|
|
2387
|
+
}
|
|
2388
|
+
/** @experimental */
|
|
2389
|
+
declare const TableSkeleton: react.FC<TableSkeletonProps>;
|
|
2390
|
+
|
|
2391
|
+
/**
|
|
2392
|
+
* One preset a host offers.
|
|
2393
|
+
*
|
|
2394
|
+
* `color` is what the swatch is PAINTED with. `value` is what `onSwatchSelect`
|
|
2395
|
+
* hands back, unread by this component — a host storing design tokens puts its
|
|
2396
|
+
* own token reference there and receives it unchanged, so choosing a swatch
|
|
2397
|
+
* never resolves a token into the colour it currently happens to be. Without
|
|
2398
|
+
* that, re-theming stops moving the values that pointed at it.
|
|
2399
|
+
*
|
|
2400
|
+
* @experimental
|
|
2401
|
+
*/
|
|
2402
|
+
interface ColorSwatch<TValue = string> {
|
|
2403
|
+
id: string;
|
|
2404
|
+
label: string;
|
|
2405
|
+
color: string;
|
|
2406
|
+
value?: TValue;
|
|
2407
|
+
}
|
|
2408
|
+
/**
|
|
2409
|
+
* Props for ColorPicker.
|
|
2410
|
+
* @experimental
|
|
2411
|
+
*/
|
|
2412
|
+
interface ColorPickerProps<TValue = string> {
|
|
2413
|
+
/** The colour shown on the surface, as hex. */
|
|
2414
|
+
color: string;
|
|
2415
|
+
/** A colour was chosen by editing — surface, hue, alpha or the hex field. */
|
|
2416
|
+
onColorChange: (color: string) => void;
|
|
2417
|
+
/** Presets. Painted from `color`, returned by `value`. */
|
|
2418
|
+
swatches?: ColorSwatch<TValue>[];
|
|
2419
|
+
/**
|
|
2420
|
+
* A preset was chosen. Separate from `onColorChange` because only the host
|
|
2421
|
+
* can say what a swatch MEANS: the two are different events, and collapsing
|
|
2422
|
+
* them is what loses a token reference.
|
|
2423
|
+
*/
|
|
2424
|
+
onSwatchSelect?: (swatch: ColorSwatch<TValue>) => void;
|
|
2425
|
+
/**
|
|
2426
|
+
* Recently used colours. Owned by the host, never by this component — the
|
|
2427
|
+
* admin scopes them per user, and a component writing `localStorage` at
|
|
2428
|
+
* render is unusable on a server and untestable without a DOM.
|
|
2429
|
+
*/
|
|
2430
|
+
recentColors?: string[];
|
|
2431
|
+
/** Alpha channel. Off by default: most call sites want an opaque colour. */
|
|
2432
|
+
showAlpha?: boolean;
|
|
2433
|
+
className?: string;
|
|
2434
|
+
}
|
|
2435
|
+
/**
|
|
2436
|
+
* A colour control: a saturation square, a hue strip, optional alpha, a hex
|
|
2437
|
+
* field, and any presets the host supplies.
|
|
2438
|
+
*
|
|
2439
|
+
* Deliberately knows nothing about design tokens. A swatch carries an opaque
|
|
2440
|
+
* `value` this component never reads and hands back untouched, so a host can
|
|
2441
|
+
* store a token reference and keep it. That is what lets one component serve
|
|
2442
|
+
* both a plain colour field and a token-aware surface without either learning
|
|
2443
|
+
* about the other.
|
|
2444
|
+
*
|
|
2445
|
+
* @experimental
|
|
2446
|
+
*
|
|
2447
|
+
* @example
|
|
2448
|
+
* ```tsx
|
|
2449
|
+
* <ColorPicker
|
|
2450
|
+
* color={color}
|
|
2451
|
+
* onColorChange={setColor}
|
|
2452
|
+
* swatches={tokens.map(t => ({ id: t.name, label: t.name, color: t.value, value: { $token: t.name } }))}
|
|
2453
|
+
* onSwatchSelect={s => store(s.value)}
|
|
2454
|
+
* />
|
|
2455
|
+
* ```
|
|
2456
|
+
*/
|
|
2457
|
+
declare function ColorPicker<TValue = string>({ color, onColorChange, swatches, onSwatchSelect, recentColors, showAlpha, className, }: ColorPickerProps<TValue>): react_jsx_runtime.JSX.Element;
|
|
2458
|
+
|
|
2459
|
+
/** @experimental */
|
|
2041
2460
|
interface PaginationMeta {
|
|
2042
2461
|
total: number;
|
|
2043
2462
|
page: number;
|
|
@@ -2046,14 +2465,17 @@ interface PaginationMeta {
|
|
|
2046
2465
|
hasNext: boolean;
|
|
2047
2466
|
hasPrev: boolean;
|
|
2048
2467
|
}
|
|
2468
|
+
/** @experimental */
|
|
2049
2469
|
interface SortInfo {
|
|
2050
2470
|
field: string;
|
|
2051
2471
|
direction: "asc" | "desc";
|
|
2052
2472
|
}
|
|
2473
|
+
/** @experimental */
|
|
2053
2474
|
interface FilterInfo {
|
|
2054
2475
|
search?: string;
|
|
2055
2476
|
filters?: Record<string, unknown>;
|
|
2056
2477
|
}
|
|
2478
|
+
/** @experimental */
|
|
2057
2479
|
interface TableParams {
|
|
2058
2480
|
pagination: {
|
|
2059
2481
|
page: number;
|
|
@@ -2062,258 +2484,741 @@ interface TableParams {
|
|
|
2062
2484
|
sorting?: SortInfo[];
|
|
2063
2485
|
filters?: FilterInfo;
|
|
2064
2486
|
}
|
|
2487
|
+
/** @experimental */
|
|
2065
2488
|
interface ListResponse<TData> {
|
|
2066
2489
|
items: TData[];
|
|
2067
2490
|
meta: PaginationMeta;
|
|
2068
2491
|
}
|
|
2492
|
+
/** @experimental */
|
|
2069
2493
|
interface PaginationConfig {
|
|
2070
2494
|
pageSize?: number;
|
|
2071
2495
|
pageSizeOptions?: number[];
|
|
2072
2496
|
showPageSizeSelector?: boolean;
|
|
2073
2497
|
maxVisiblePages?: number;
|
|
2074
2498
|
}
|
|
2499
|
+
/** @experimental */
|
|
2075
2500
|
interface ActionCallbacks<TData = unknown> {
|
|
2076
2501
|
onEdit?: (item: TData) => void;
|
|
2077
2502
|
onDelete?: (item: TData) => void;
|
|
2078
2503
|
onView?: (item: TData) => void;
|
|
2079
2504
|
}
|
|
2505
|
+
/** @experimental */
|
|
2080
2506
|
type DataFetcher<TData> = (params: TableParams) => Promise<ListResponse<TData>>;
|
|
2081
2507
|
|
|
2082
|
-
|
|
2083
|
-
|
|
2084
|
-
|
|
2085
|
-
|
|
2086
|
-
/** Pagination metadata from server */
|
|
2087
|
-
meta: PaginationMeta;
|
|
2088
|
-
/** Callback when page changes */
|
|
2089
|
-
onPageChange: (page: number) => void;
|
|
2090
|
-
/** Callback when page size changes */
|
|
2091
|
-
onPageSizeChange: (pageSize: number) => void;
|
|
2092
|
-
/** Pagination configuration */
|
|
2093
|
-
config?: Required<PaginationConfig>;
|
|
2094
|
-
/** Whether data is currently loading */
|
|
2095
|
-
isLoading?: boolean;
|
|
2508
|
+
interface PortalProviderProps {
|
|
2509
|
+
/** The DOM element to portal overlay content into. Defaults to document.body (Radix default). */
|
|
2510
|
+
container: HTMLElement | null;
|
|
2511
|
+
children: ReactNode;
|
|
2096
2512
|
}
|
|
2513
|
+
/** @public */
|
|
2514
|
+
declare function PortalProvider({ container, children }: PortalProviderProps): react_jsx_runtime.JSX.Element;
|
|
2515
|
+
/** @public */
|
|
2516
|
+
declare function usePortalContainer(): HTMLElement | undefined;
|
|
2517
|
+
|
|
2518
|
+
/** @experimental */
|
|
2519
|
+
declare const ContextMenu: react.FC<ContextMenuPrimitive.ContextMenuProps>;
|
|
2520
|
+
/** @experimental */
|
|
2521
|
+
declare const ContextMenuTrigger: react.ForwardRefExoticComponent<ContextMenuPrimitive.ContextMenuTriggerProps & react.RefAttributes<HTMLSpanElement>>;
|
|
2522
|
+
/** @experimental */
|
|
2523
|
+
declare const ContextMenuGroup: react.ForwardRefExoticComponent<ContextMenuPrimitive.ContextMenuGroupProps & react.RefAttributes<HTMLDivElement>>;
|
|
2524
|
+
/** @experimental */
|
|
2525
|
+
declare const ContextMenuSub: react.FC<ContextMenuPrimitive.ContextMenuSubProps>;
|
|
2526
|
+
/** @experimental */
|
|
2527
|
+
declare const ContextMenuRadioGroup: react.ForwardRefExoticComponent<ContextMenuPrimitive.ContextMenuRadioGroupProps & react.RefAttributes<HTMLDivElement>>;
|
|
2528
|
+
/** @experimental */
|
|
2529
|
+
declare const ContextMenuSubTrigger: react.ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuSubTriggerProps & react.RefAttributes<HTMLDivElement>, "ref"> & {
|
|
2530
|
+
inset?: boolean;
|
|
2531
|
+
} & react.RefAttributes<HTMLDivElement>>;
|
|
2532
|
+
/** @experimental */
|
|
2533
|
+
declare const ContextMenuSubContent: react.ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuSubContentProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
|
|
2534
|
+
/** @experimental */
|
|
2535
|
+
declare const ContextMenuContent: react.ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuContentProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
|
|
2536
|
+
/** @experimental */
|
|
2537
|
+
declare const ContextMenuItem: react.ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuItemProps & react.RefAttributes<HTMLDivElement>, "ref"> & {
|
|
2538
|
+
inset?: boolean;
|
|
2539
|
+
} & react.RefAttributes<HTMLDivElement>>;
|
|
2540
|
+
/** @experimental */
|
|
2541
|
+
declare const ContextMenuCheckboxItem: react.ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuCheckboxItemProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
|
|
2542
|
+
/** @experimental */
|
|
2543
|
+
declare const ContextMenuRadioItem: react.ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuRadioItemProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
|
|
2544
|
+
/** @experimental */
|
|
2545
|
+
declare const ContextMenuLabel: react.ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuLabelProps & react.RefAttributes<HTMLDivElement>, "ref"> & {
|
|
2546
|
+
inset?: boolean;
|
|
2547
|
+
} & react.RefAttributes<HTMLDivElement>>;
|
|
2548
|
+
/** @experimental */
|
|
2549
|
+
declare const ContextMenuSeparator: react.ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuSeparatorProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
|
|
2097
2550
|
/**
|
|
2098
|
-
*
|
|
2551
|
+
* A keyboard shortcut hint, right-aligned in the item.
|
|
2552
|
+
*
|
|
2553
|
+
* @experimental
|
|
2099
2554
|
*/
|
|
2100
|
-
declare
|
|
2555
|
+
declare const ContextMenuShortcut: {
|
|
2556
|
+
({ className, ...props }: react.HTMLAttributes<HTMLSpanElement>): react_jsx_runtime.JSX.Element;
|
|
2557
|
+
displayName: string;
|
|
2558
|
+
};
|
|
2101
2559
|
|
|
2102
2560
|
/**
|
|
2103
|
-
*
|
|
2561
|
+
* A group of resizable panels, laid out horizontally or vertically.
|
|
2104
2562
|
*
|
|
2105
|
-
*
|
|
2106
|
-
* Renders header, body, and footer skeleton bars inside a card.
|
|
2107
|
-
* Unified with EntryTable skeleton pattern for consistency across all tables.
|
|
2563
|
+
* @experimental
|
|
2108
2564
|
*/
|
|
2109
|
-
|
|
2110
|
-
|
|
2111
|
-
|
|
2112
|
-
|
|
2113
|
-
|
|
2114
|
-
|
|
2115
|
-
|
|
2116
|
-
|
|
2565
|
+
declare const ResizablePanelGroup: ({ className, ...props }: react.ComponentProps<typeof ResizablePrimitive.Group>) => react_jsx_runtime.JSX.Element;
|
|
2566
|
+
/**
|
|
2567
|
+
* One region of a panel group.
|
|
2568
|
+
*
|
|
2569
|
+
* @experimental
|
|
2570
|
+
*/
|
|
2571
|
+
declare const ResizablePanel: typeof ResizablePrimitive.Panel;
|
|
2572
|
+
/**
|
|
2573
|
+
* The draggable divider between two panels.
|
|
2574
|
+
*
|
|
2575
|
+
* The visible line is 1px; the element around it is wider and transparent, so the pointer target
|
|
2576
|
+
* is comfortably larger than the line it appears to grab. `withGrip` adds a visible handle, which
|
|
2577
|
+
* is worth it on a divider people are meant to discover rather than one they already expect.
|
|
2578
|
+
*
|
|
2579
|
+
* @experimental
|
|
2580
|
+
*/
|
|
2581
|
+
declare const ResizableHandle: ({ withGrip, className, children, ...props }: react.ComponentProps<typeof ResizablePrimitive.Separator> & {
|
|
2582
|
+
withGrip?: boolean;
|
|
2583
|
+
}) => react_jsx_runtime.JSX.Element;
|
|
2117
2584
|
|
|
2118
2585
|
/**
|
|
2119
|
-
*
|
|
2586
|
+
* TreeView
|
|
2587
|
+
*
|
|
2588
|
+
* A keyboard-operable, virtualized tree. The layers panel of an editor is this control: a
|
|
2589
|
+
* hierarchy that can hold thousands of nodes, that someone navigates with arrow keys as much as
|
|
2590
|
+
* with a pointer, and that has to stay responsive while they do.
|
|
2591
|
+
*
|
|
2592
|
+
* **Why virtualized, and why that decides the markup.** A document of a few thousand blocks
|
|
2593
|
+
* renders a few thousand rows, and the cost is not the React work — it is layout and paint on
|
|
2594
|
+
* every expand, scroll and selection. Only the visible window is rendered here.
|
|
2595
|
+
*
|
|
2596
|
+
* That has a consequence the accessibility notes below depend on: with only a window in the DOM,
|
|
2597
|
+
* the nested `role="group"` markup the tree pattern usually uses **cannot be built**, because an
|
|
2598
|
+
* item's children may not be rendered at all. The APG covers this exact case by allowing a FLAT
|
|
2599
|
+
* set of `treeitem`s that describe the hierarchy through `aria-level`, `aria-setsize` and
|
|
2600
|
+
* `aria-posinset` instead of through nesting. A screen reader reads depth and position from those
|
|
2601
|
+
* attributes, so they are not decoration — without them a virtualized tree announces itself as a
|
|
2602
|
+
* flat list of whatever happens to be on screen.
|
|
2603
|
+
*
|
|
2604
|
+
* **Why a headless virtualizer.** The markup above is the requirement, so anything that owns the
|
|
2605
|
+
* DOM is unusable. `@tanstack/react-virtual` computes offsets and renders nothing.
|
|
2120
2606
|
*
|
|
2121
|
-
*
|
|
2607
|
+
* **State is controllable, not controlled.** `expandedIds`/`selectedId` may be passed with their
|
|
2608
|
+
* `onChange` partners to drive the tree from a store — which an editor will do, since selection is
|
|
2609
|
+
* shared with the canvas and the inspector — or omitted entirely, in which case the tree keeps its
|
|
2610
|
+
* own. Requiring a store for a tree in a settings dialog would be a poor trade.
|
|
2122
2611
|
*
|
|
2123
|
-
*
|
|
2124
|
-
*
|
|
2612
|
+
* **Design specifications**:
|
|
2613
|
+
* - Row height: fixed 28px (`--tree-row`), so the virtualizer needs no measurement pass
|
|
2614
|
+
* - Indent: 12px per level, applied as padding so the whole row stays a hit target
|
|
2615
|
+
* - Selection: `bg-muted`, matching the menu highlight rather than a full-contrast flip
|
|
2616
|
+
* - Focus: `focus-visible` ring in the focus token
|
|
2617
|
+
*
|
|
2618
|
+
* **Accessibility**:
|
|
2619
|
+
* - `role="tree"` with flat `role="treeitem"` children carrying `aria-level`, `aria-setsize`,
|
|
2620
|
+
* `aria-posinset`, and `aria-expanded` on anything with children
|
|
2621
|
+
* - Roving tabindex: exactly one row is in the tab order, so Tab enters and leaves the tree once
|
|
2622
|
+
* rather than walking every node
|
|
2623
|
+
* - Arrow keys move and expand, per the APG tree pattern: Right expands then descends, Left
|
|
2624
|
+
* collapses then ascends, Home/End jump to the ends, `*` expands every sibling
|
|
2625
|
+
* - Typeahead focuses the next row whose label starts with what was typed
|
|
2626
|
+
* - Moving focus scrolls the row into view, which virtualization would otherwise prevent: a row
|
|
2627
|
+
* outside the window has no element to focus
|
|
2125
2628
|
*
|
|
2126
2629
|
* @example
|
|
2127
2630
|
* ```tsx
|
|
2128
|
-
*
|
|
2129
|
-
*
|
|
2130
|
-
*
|
|
2131
|
-
*
|
|
2132
|
-
*
|
|
2133
|
-
*
|
|
2134
|
-
*
|
|
2135
|
-
* const columns: Column<User>[] = [
|
|
2136
|
-
* {
|
|
2137
|
-
* key: "name",
|
|
2138
|
-
* label: "Name",
|
|
2139
|
-
* // value is inferred as string, not string | number
|
|
2140
|
-
* render: (value, user) => <strong>{value}</strong>
|
|
2141
|
-
* },
|
|
2142
|
-
* {
|
|
2143
|
-
* key: "age",
|
|
2144
|
-
* label: "Age",
|
|
2145
|
-
* // value is inferred as number, not string | number
|
|
2146
|
-
* render: (value) => `${value} years old`
|
|
2147
|
-
* }
|
|
2148
|
-
* ];
|
|
2631
|
+
* <TreeView
|
|
2632
|
+
* nodes={layers}
|
|
2633
|
+
* aria-label="Layers"
|
|
2634
|
+
* selectedId={selected}
|
|
2635
|
+
* onSelectedChange={setSelected}
|
|
2636
|
+
* className="h-full"
|
|
2637
|
+
* />
|
|
2149
2638
|
* ```
|
|
2639
|
+
*
|
|
2640
|
+
* @module
|
|
2150
2641
|
*/
|
|
2151
|
-
|
|
2152
|
-
/** Unique key for the column (must match a property in T) */
|
|
2153
|
-
key: K;
|
|
2154
|
-
/** Display label for the column header */
|
|
2155
|
-
label: react.ReactNode;
|
|
2156
|
-
/** Optional custom renderer for cell content with type-safe value */
|
|
2157
|
-
render?: (value: T[K], item: T) => react.ReactNode;
|
|
2158
|
-
/** Hide column on mobile card view (optional, default: false) */
|
|
2159
|
-
hideOnMobile?: boolean;
|
|
2160
|
-
/** Hide the label on mobile card view (optional, default: false) */
|
|
2161
|
-
hideLabelOnMobile?: boolean;
|
|
2162
|
-
/** Optional custom className for the table header cell */
|
|
2163
|
-
headerClassName?: string;
|
|
2164
|
-
/** Optional custom className for the table body cell */
|
|
2165
|
-
cellClassName?: string;
|
|
2166
|
-
};
|
|
2642
|
+
|
|
2167
2643
|
/**
|
|
2168
|
-
*
|
|
2644
|
+
* One node of the tree. Children are omitted or empty for a leaf.
|
|
2169
2645
|
*
|
|
2170
|
-
* @
|
|
2646
|
+
* @experimental
|
|
2171
2647
|
*/
|
|
2172
|
-
|
|
2648
|
+
interface TreeNode {
|
|
2649
|
+
/** Stable identity. What selection and expansion are keyed by. */
|
|
2173
2650
|
id: string;
|
|
2174
|
-
|
|
2175
|
-
|
|
2176
|
-
|
|
2177
|
-
|
|
2178
|
-
|
|
2179
|
-
|
|
2180
|
-
|
|
2181
|
-
|
|
2182
|
-
|
|
2183
|
-
/**
|
|
2184
|
-
|
|
2185
|
-
/**
|
|
2186
|
-
|
|
2187
|
-
/**
|
|
2188
|
-
|
|
2189
|
-
|
|
2190
|
-
|
|
2191
|
-
|
|
2192
|
-
|
|
2651
|
+
/** What the row shows. A string also feeds typeahead; anything else needs `textValue`. */
|
|
2652
|
+
label: react.ReactNode;
|
|
2653
|
+
/**
|
|
2654
|
+
* The text typeahead matches on, when `label` is not a string.
|
|
2655
|
+
*
|
|
2656
|
+
* Without it a row rendered as markup cannot be typed to, and a keyboard user loses the fastest
|
|
2657
|
+
* way through a long tree.
|
|
2658
|
+
*/
|
|
2659
|
+
textValue?: string;
|
|
2660
|
+
/** Children, if any. An empty array still marks the node as a parent. */
|
|
2661
|
+
children?: readonly TreeNode[];
|
|
2662
|
+
/** Shown before the label, after the twisty. */
|
|
2663
|
+
icon?: react.ReactNode;
|
|
2664
|
+
/** Skipped by every keyboard move and not selectable. */
|
|
2665
|
+
disabled?: boolean;
|
|
2666
|
+
}
|
|
2667
|
+
/** @experimental */
|
|
2668
|
+
interface TreeViewProps extends Omit<react.HTMLAttributes<HTMLDivElement>, "onSelect"> {
|
|
2669
|
+
/** The roots of the tree. */
|
|
2670
|
+
nodes: readonly TreeNode[];
|
|
2671
|
+
/** Expanded node ids, if the caller owns them. */
|
|
2672
|
+
expandedIds?: readonly string[];
|
|
2673
|
+
/** Which ids start expanded when the caller does not own expansion. */
|
|
2674
|
+
defaultExpandedIds?: readonly string[];
|
|
2675
|
+
/** Called with the full next set whenever a branch opens or closes. */
|
|
2676
|
+
onExpandedChange?: (ids: string[]) => void;
|
|
2677
|
+
/** The selected node id, if the caller owns it. */
|
|
2678
|
+
selectedId?: string | null;
|
|
2679
|
+
/** Which id starts selected when the caller does not own selection. */
|
|
2680
|
+
defaultSelectedId?: string | null;
|
|
2681
|
+
/** Called when a row is chosen, by pointer or by Enter. */
|
|
2682
|
+
onSelectedChange?: (id: string) => void;
|
|
2683
|
+
/**
|
|
2684
|
+
* Names the tree for a screen reader. One of this or `aria-labelledby` is required: a tree
|
|
2685
|
+
* announced only as "tree" tells a user nothing about which one they are in.
|
|
2686
|
+
*/
|
|
2687
|
+
"aria-label"?: string;
|
|
2688
|
+
}
|
|
2689
|
+
/**
|
|
2690
|
+
* A virtualized tree.
|
|
2691
|
+
*
|
|
2692
|
+
* @experimental
|
|
2693
|
+
*/
|
|
2694
|
+
declare const TreeView: react.ForwardRefExoticComponent<TreeViewProps & react.RefAttributes<HTMLDivElement>>;
|
|
2695
|
+
|
|
2696
|
+
/**
|
|
2697
|
+
* The assistive-technology attributes a single thumb can carry.
|
|
2698
|
+
*
|
|
2699
|
+
* @experimental
|
|
2700
|
+
*/
|
|
2701
|
+
interface SliderThumbProps {
|
|
2702
|
+
/** The thumb's accessible name. */
|
|
2703
|
+
"aria-label"?: string;
|
|
2704
|
+
/** An element naming the thumb, when the name is already on screen. */
|
|
2705
|
+
"aria-labelledby"?: string;
|
|
2706
|
+
/**
|
|
2707
|
+
* What the value MEANS, when the number alone does not say it — "40
|
|
2708
|
+
* percent", "Medium". Announced in place of the raw number.
|
|
2709
|
+
*/
|
|
2710
|
+
"aria-valuetext"?: string;
|
|
2711
|
+
/** An element carrying help text for this thumb. */
|
|
2712
|
+
"aria-describedby"?: string;
|
|
2713
|
+
}
|
|
2714
|
+
/**
|
|
2715
|
+
* The slider's props, mirroring the Radix root.
|
|
2716
|
+
*
|
|
2717
|
+
* @experimental
|
|
2718
|
+
*/
|
|
2719
|
+
type SliderProps = Omit<react.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>, "asChild"> & {
|
|
2720
|
+
/**
|
|
2721
|
+
* Assistive-technology attributes per thumb, in value order.
|
|
2722
|
+
*
|
|
2723
|
+
* The reason this exists at all: the focusable element with the `slider`
|
|
2724
|
+
* role is the THUMB, and none of these attributes are inherited from the
|
|
2725
|
+
* root. Anything a caller puts on the root is therefore announced by
|
|
2726
|
+
* nothing, and the thumbs are generated internally so they cannot be
|
|
2727
|
+
* reached any other way.
|
|
2728
|
+
*
|
|
2729
|
+
* Deliberately a curated set rather than the thumb's full prop type. This
|
|
2730
|
+
* is the surface assistive technology reads; opening it to arbitrary props
|
|
2731
|
+
* would let a caller replace the class names or the role the control
|
|
2732
|
+
* depends on, and every escape hatch in a design system eventually gets
|
|
2733
|
+
* used that way.
|
|
2734
|
+
*
|
|
2735
|
+
* Required for a RANGE: two thumbs sharing one name are announced
|
|
2736
|
+
* identically, so nothing says which end is held. A single thumb falls back
|
|
2737
|
+
* to the root's `aria-label`/`aria-labelledby`, so the one-thumb API stays
|
|
2738
|
+
* as documented.
|
|
2739
|
+
*/
|
|
2740
|
+
thumbs?: readonly SliderThumbProps[];
|
|
2193
2741
|
};
|
|
2194
2742
|
/**
|
|
2195
|
-
*
|
|
2743
|
+
* A bounded numeric value chosen by dragging.
|
|
2744
|
+
*
|
|
2745
|
+
* @experimental
|
|
2196
2746
|
*/
|
|
2197
|
-
|
|
2747
|
+
declare const Slider: react.ForwardRefExoticComponent<Omit<Omit<SliderPrimitive.SliderProps & react.RefAttributes<HTMLSpanElement>, "ref">, "asChild"> & {
|
|
2748
|
+
/**
|
|
2749
|
+
* Assistive-technology attributes per thumb, in value order.
|
|
2750
|
+
*
|
|
2751
|
+
* The reason this exists at all: the focusable element with the `slider`
|
|
2752
|
+
* role is the THUMB, and none of these attributes are inherited from the
|
|
2753
|
+
* root. Anything a caller puts on the root is therefore announced by
|
|
2754
|
+
* nothing, and the thumbs are generated internally so they cannot be
|
|
2755
|
+
* reached any other way.
|
|
2756
|
+
*
|
|
2757
|
+
* Deliberately a curated set rather than the thumb's full prop type. This
|
|
2758
|
+
* is the surface assistive technology reads; opening it to arbitrary props
|
|
2759
|
+
* would let a caller replace the class names or the role the control
|
|
2760
|
+
* depends on, and every escape hatch in a design system eventually gets
|
|
2761
|
+
* used that way.
|
|
2762
|
+
*
|
|
2763
|
+
* Required for a RANGE: two thumbs sharing one name are announced
|
|
2764
|
+
* identically, so nothing says which end is held. A single thumb falls back
|
|
2765
|
+
* to the root's `aria-label`/`aria-labelledby`, so the one-thumb API stays
|
|
2766
|
+
* as documented.
|
|
2767
|
+
*/
|
|
2768
|
+
thumbs?: readonly SliderThumbProps[];
|
|
2769
|
+
} & react.RefAttributes<HTMLSpanElement>>;
|
|
2198
2770
|
|
|
2199
|
-
|
|
2200
|
-
|
|
2201
|
-
|
|
2202
|
-
|
|
2203
|
-
|
|
2771
|
+
/**
|
|
2772
|
+
* The single owner of keyboard shortcuts for an application.
|
|
2773
|
+
*
|
|
2774
|
+
* ## Why this exists
|
|
2775
|
+
*
|
|
2776
|
+
* Shortcuts are usually registered by whoever needs them, each component adding its own
|
|
2777
|
+
* `document` listener. That works until two of them want the same key, and then it fails in a way
|
|
2778
|
+
* that is very hard to see: `stopPropagation()` does NOT stop other listeners on the same node —
|
|
2779
|
+
* that requires `stopImmediatePropagation()`, and even then only for listeners registered later.
|
|
2780
|
+
* So every global handler runs, in mount order, and mount order is not something a developer
|
|
2781
|
+
* chose. Pressing Escape during a drag can cancel the drag AND navigate away from the page,
|
|
2782
|
+
* because two independent listeners each believed they owned the key.
|
|
2783
|
+
*
|
|
2784
|
+
* This module replaces that with one listener and an explicit precedence rule.
|
|
2785
|
+
*
|
|
2786
|
+
* ## The model: a stack of layers
|
|
2787
|
+
*
|
|
2788
|
+
* A **layer** is a set of bindings belonging to one interactive context — the application shell,
|
|
2789
|
+
* a dialog, an editor canvas mid-drag. Layers are ordered, the topmost is offered each keystroke
|
|
2790
|
+
* first, and the first binding that matches consumes it.
|
|
2791
|
+
*
|
|
2792
|
+
* Precedence is `(depth, sequence)`: the deeper layer wins, and between layers at equal depth the
|
|
2793
|
+
* more recently registered wins.
|
|
2794
|
+
*
|
|
2795
|
+
* Of those two, **depth is declared and sequence is incidental** — and only declared properties
|
|
2796
|
+
* survive a refactor. A layer that unmounts and remounts takes a fresh sequence number, so a
|
|
2797
|
+
* subtree rebuilt for unrelated reasons can change equal-depth ordering. The guidance that falls
|
|
2798
|
+
* out: if relative order matters to you, express it as depth, because depth is the part of the
|
|
2799
|
+
* tuple you control. Equal-depth ordering is for stacking things that arrive in genuine
|
|
2800
|
+
* mount order, such as one dialog over another. Depth comes from how the application nests, so precedence
|
|
2801
|
+
* follows the component tree rather than a set of coordinated numbers — the z-index problem,
|
|
2802
|
+
* avoided. Equal-depth ordering is what stacks a second dialog above the first.
|
|
2803
|
+
*
|
|
2804
|
+
* A layer may be **blocking**, meaning it also swallows the keys it does NOT bind. That is the
|
|
2805
|
+
* property a drag or a modal needs: while it is up, nothing beneath it can act. This is the same
|
|
2806
|
+
* shape as a window manager's keyboard grab, and as the dismissable-layer stack this kit's
|
|
2807
|
+
* dialogs already sit on.
|
|
2808
|
+
*
|
|
2809
|
+
* ## What it deliberately does not do
|
|
2810
|
+
*
|
|
2811
|
+
* It listens in the BUBBLE phase, so a focused component that handles its own keys and calls
|
|
2812
|
+
* `stopPropagation()` wins without needing to know this module exists. React attaches its
|
|
2813
|
+
* handlers at the app root, below `document`, so an `onKeyDown` prop is a sufficient opt-out.
|
|
2814
|
+
* Capturing instead would make this module outrank every component in the tree, including the
|
|
2815
|
+
* kit's own dialogs, and there would be no way for a component to decline.
|
|
2816
|
+
*
|
|
2817
|
+
* @module lib/shortcuts/manager
|
|
2818
|
+
*/
|
|
2819
|
+
/**
|
|
2820
|
+
* One shortcut and what it does.
|
|
2821
|
+
*
|
|
2822
|
+
* @experimental
|
|
2823
|
+
*/
|
|
2824
|
+
interface ShortcutBinding {
|
|
2825
|
+
/** The keys, as understood by `parseKeys` — `"mod+s"`, `"Escape"`, `"g d"`. */
|
|
2826
|
+
keys: string;
|
|
2827
|
+
/**
|
|
2828
|
+
* What this does, in words, for a shortcuts help panel. Required because an undiscoverable
|
|
2829
|
+
* shortcut helps only the person who wrote it.
|
|
2830
|
+
*/
|
|
2831
|
+
description: string;
|
|
2832
|
+
/** Runs when the shortcut fires. */
|
|
2833
|
+
run: (event: KeyboardEvent) => void;
|
|
2834
|
+
/** Checked at press time; a binding whose condition is false is skipped and passes the key on. */
|
|
2835
|
+
when?: () => boolean;
|
|
2836
|
+
/**
|
|
2837
|
+
* Whether this fires while the user is typing in a field.
|
|
2838
|
+
*
|
|
2839
|
+
* Defaults to true for bindings whose FIRST chord carries a non-shift modifier or is Escape,
|
|
2840
|
+
* and false otherwise — the rule nearly every application converges on. `mod+s` must save
|
|
2841
|
+
* mid-sentence and Escape must dismiss, while a bare `n` must be able to be the letter n.
|
|
2842
|
+
*
|
|
2843
|
+
* The first chord decides because it is the keystroke that has to be taken from the field.
|
|
2844
|
+
* `mod+k c` is a command from its opening chord, so its bare `c` completes it in an input. A
|
|
2845
|
+
* sequence that OPENS on a plain character cannot fire while typing whatever it ends with:
|
|
2846
|
+
* allowing `g Escape` would mean swallowing the `g` of every word containing one.
|
|
2847
|
+
*/
|
|
2848
|
+
whenTyping?: boolean;
|
|
2849
|
+
/** Whether to call `preventDefault()` when it fires. Defaults to true. */
|
|
2850
|
+
preventDefault?: boolean;
|
|
2851
|
+
}
|
|
2852
|
+
/**
|
|
2853
|
+
* How a layer behaves for keys it does not bind.
|
|
2854
|
+
*
|
|
2855
|
+
* @experimental
|
|
2856
|
+
*/
|
|
2857
|
+
interface ShortcutLayerOptions {
|
|
2858
|
+
/** Identifies the layer in diagnostics and in a help panel. */
|
|
2859
|
+
name: string;
|
|
2860
|
+
/** Precedence: deeper layers are offered keystrokes first. */
|
|
2861
|
+
depth: number;
|
|
2862
|
+
/**
|
|
2863
|
+
* Whether unmatched keys stop here instead of reaching layers beneath.
|
|
2864
|
+
*
|
|
2865
|
+
* The reason a drag can be interrupted safely: everything below is inert for as long as this
|
|
2866
|
+
* is set, so no other context can act on a keystroke aimed at this one.
|
|
2867
|
+
*/
|
|
2868
|
+
blocking?: boolean;
|
|
2869
|
+
/**
|
|
2870
|
+
* Sorted ABOVE depth, so a layer can outrank one nested deeper than itself.
|
|
2871
|
+
*
|
|
2872
|
+
* Depth alone cannot express a modal. A modal wants to sit above every ordinary layer, but the
|
|
2873
|
+
* host chooses how deeply its own shortcuts are scoped, so any depth a modal picks can be tied
|
|
2874
|
+
* or beaten by a scope the host nests one level further. Priority is the axis the host does not
|
|
2875
|
+
* control: ordinary layers leave it at 0 and a modal raises it.
|
|
2876
|
+
*
|
|
2877
|
+
* KNOWN LIMIT, stated so it is not discovered: layers at EQUAL priority still compare depth
|
|
2878
|
+
* before registration order. Two modals therefore stack by how deeply each is scoped rather
|
|
2879
|
+
* than by which opened last, so a modal opened later at a shallower depth can sit under one
|
|
2880
|
+
* opened earlier and nested deeper — while whatever renders them puts the newer on top.
|
|
2881
|
+
*
|
|
2882
|
+
* Fixing it needs the manager to record when a layer is ACTIVATED, which registration order
|
|
2883
|
+
* does not capture: `useShortcuts` registers once at mount and updates its options in place, so
|
|
2884
|
+
* a layer enabled later still carries its mount-time sequence. Not attempted here because
|
|
2885
|
+
* nothing reaches it yet — `priority` is new and one layer sets it, so no two layers currently
|
|
2886
|
+
* share a nonzero value.
|
|
2887
|
+
*/
|
|
2888
|
+
priority?: number;
|
|
2889
|
+
/** Whether the layer participates at all. A disabled layer neither matches nor blocks. */
|
|
2890
|
+
enabled?: boolean;
|
|
2891
|
+
}
|
|
2892
|
+
/**
|
|
2893
|
+
* A layer's registration, held by whoever created it.
|
|
2894
|
+
*
|
|
2895
|
+
* @experimental
|
|
2896
|
+
*/
|
|
2897
|
+
interface ShortcutRegistration {
|
|
2898
|
+
/** Replace this layer's bindings and options without changing its precedence. */
|
|
2899
|
+
update: (bindings: readonly ShortcutBinding[], options: ShortcutLayerOptions) => void;
|
|
2900
|
+
/** Remove the layer. */
|
|
2901
|
+
dispose: () => void;
|
|
2902
|
+
}
|
|
2903
|
+
/**
|
|
2904
|
+
* Options for creating a manager.
|
|
2905
|
+
*
|
|
2906
|
+
* @experimental
|
|
2907
|
+
*/
|
|
2908
|
+
interface ShortcutManagerOptions {
|
|
2909
|
+
/** Whether `mod` means Command. Detected from the platform when omitted. */
|
|
2910
|
+
isApple?: boolean;
|
|
2911
|
+
/** How long a partially typed sequence waits for its next key, in milliseconds. */
|
|
2912
|
+
sequenceTimeoutMs?: number;
|
|
2913
|
+
/** Clock source, for tests that need to control sequence expiry. */
|
|
2914
|
+
now?: () => number;
|
|
2915
|
+
}
|
|
2916
|
+
/**
|
|
2917
|
+
* A shortcut manager: the registry, the matcher, and the one listener.
|
|
2918
|
+
*
|
|
2919
|
+
* @experimental
|
|
2920
|
+
*/
|
|
2921
|
+
interface ShortcutManager {
|
|
2922
|
+
/** Add a layer. */
|
|
2923
|
+
register: (bindings: readonly ShortcutBinding[], options: ShortcutLayerOptions) => ShortcutRegistration;
|
|
2924
|
+
/**
|
|
2925
|
+
* Offer a keystroke to the stack. Returns whether it was consumed.
|
|
2926
|
+
*
|
|
2927
|
+
* Public so the behaviour can be tested without a DOM, and so a host that already owns its
|
|
2928
|
+
* event plumbing can drive the manager itself.
|
|
2929
|
+
*/
|
|
2930
|
+
handle: (event: KeyboardEvent) => boolean;
|
|
2931
|
+
/** Install the single listener on a target, returning a function that removes it. */
|
|
2932
|
+
attach: (target: Pick<EventTarget, "addEventListener" | "removeEventListener">) => () => void;
|
|
2933
|
+
/**
|
|
2934
|
+
* Every active binding, most-precedent layer first, for a shortcuts help panel.
|
|
2935
|
+
*
|
|
2936
|
+
* The same array is returned until the layer stack changes, so it is safe to use as an external
|
|
2937
|
+
* store snapshot without re-rendering on every read.
|
|
2938
|
+
*/
|
|
2939
|
+
activeBindings: () => readonly ActiveShortcut[];
|
|
2940
|
+
/**
|
|
2941
|
+
* Watch for changes to the layer stack.
|
|
2942
|
+
*
|
|
2943
|
+
* A help panel mounting alongside the components that register shortcuts would otherwise read
|
|
2944
|
+
* BEFORE their effects run and show nothing, with no later render to correct it.
|
|
2945
|
+
*/
|
|
2946
|
+
subscribe: (onChange: () => void) => () => void;
|
|
2947
|
+
}
|
|
2948
|
+
/**
|
|
2949
|
+
* A binding as presented to a help panel, with the layer it came from.
|
|
2950
|
+
*
|
|
2951
|
+
* @experimental
|
|
2952
|
+
*/
|
|
2953
|
+
interface ActiveShortcut {
|
|
2954
|
+
keys: string;
|
|
2955
|
+
description: string;
|
|
2956
|
+
layer: string;
|
|
2957
|
+
}
|
|
2958
|
+
/**
|
|
2959
|
+
* Create a shortcut manager.
|
|
2960
|
+
*
|
|
2961
|
+
* @experimental
|
|
2962
|
+
*/
|
|
2963
|
+
declare function createShortcutManager(options?: ShortcutManagerOptions): ShortcutManager;
|
|
2204
2964
|
|
|
2205
|
-
|
|
2206
|
-
|
|
2207
|
-
|
|
2208
|
-
|
|
2965
|
+
/**
|
|
2966
|
+
* Props for {@link ShortcutProvider}.
|
|
2967
|
+
*
|
|
2968
|
+
* @experimental
|
|
2969
|
+
*/
|
|
2970
|
+
interface ShortcutProviderProps extends ShortcutManagerOptions {
|
|
2971
|
+
children?: react.ReactNode;
|
|
2972
|
+
/**
|
|
2973
|
+
* Where the listener is installed. Defaults to `document`.
|
|
2974
|
+
*
|
|
2975
|
+
* The bubble phase is deliberate: a component that handles its own keys and calls
|
|
2976
|
+
* `stopPropagation` wins without knowing this exists, because React attaches its handlers
|
|
2977
|
+
* below `document`.
|
|
2978
|
+
*/
|
|
2979
|
+
target?: Pick<EventTarget, "addEventListener" | "removeEventListener"> | null;
|
|
2209
2980
|
}
|
|
2210
|
-
|
|
2211
|
-
|
|
2981
|
+
/**
|
|
2982
|
+
* Installs the application's one keydown listener and roots the layer stack.
|
|
2983
|
+
*
|
|
2984
|
+
* @experimental
|
|
2985
|
+
*/
|
|
2986
|
+
declare function ShortcutProvider({ children, target, ...managerOptions }: ShortcutProviderProps): react.JSX.Element;
|
|
2987
|
+
/**
|
|
2988
|
+
* Raises the precedence of everything inside it by one level.
|
|
2989
|
+
*
|
|
2990
|
+
* @experimental
|
|
2991
|
+
*/
|
|
2992
|
+
declare function ShortcutScope({ children, }: {
|
|
2993
|
+
children?: react.ReactNode;
|
|
2994
|
+
}): react.JSX.Element;
|
|
2995
|
+
/**
|
|
2996
|
+
* Options for {@link useShortcuts}, minus the depth, which comes from the tree.
|
|
2997
|
+
*
|
|
2998
|
+
* @experimental
|
|
2999
|
+
*/
|
|
3000
|
+
interface UseShortcutsOptions {
|
|
3001
|
+
/** Identifies this layer in a help panel. */
|
|
3002
|
+
name: string;
|
|
3003
|
+
/** Whether the layer participates. A disabled layer neither matches nor blocks. */
|
|
3004
|
+
enabled?: boolean;
|
|
3005
|
+
/**
|
|
3006
|
+
* Whether unmatched keys stop here rather than reaching layers beneath.
|
|
3007
|
+
*
|
|
3008
|
+
* Set this while a drag or a modal interaction owns the keyboard.
|
|
3009
|
+
*/
|
|
3010
|
+
blocking?: boolean;
|
|
3011
|
+
/**
|
|
3012
|
+
* Sorted ABOVE depth, so a layer can outrank one nested deeper than itself.
|
|
3013
|
+
*
|
|
3014
|
+
* For a modal, whose hold must not be tied or beaten by a host scoping its own shortcuts one
|
|
3015
|
+
* level further. Ordinary layers leave this alone.
|
|
3016
|
+
*/
|
|
3017
|
+
priority?: number;
|
|
3018
|
+
}
|
|
3019
|
+
/**
|
|
3020
|
+
* Register shortcuts for as long as the calling component is mounted.
|
|
3021
|
+
*
|
|
3022
|
+
* The bindings array may be rebuilt on every render; it is re-read in place rather than
|
|
3023
|
+
* re-registered, so inline closures are fine and the layer keeps its position in the stack.
|
|
3024
|
+
*
|
|
3025
|
+
* @experimental
|
|
3026
|
+
*/
|
|
3027
|
+
declare function useShortcuts(bindings: readonly ShortcutBinding[], options: UseShortcutsOptions): void;
|
|
3028
|
+
/**
|
|
3029
|
+
* The manager itself, for a help panel that lists what is currently bound.
|
|
3030
|
+
*
|
|
3031
|
+
* @experimental
|
|
3032
|
+
*/
|
|
3033
|
+
declare function useShortcutManager(): ShortcutManager;
|
|
3034
|
+
/**
|
|
3035
|
+
* The shortcuts currently in effect, most precedent first.
|
|
3036
|
+
*
|
|
3037
|
+
* SUBSCRIBED rather than read once. A help panel mounting alongside the components that register
|
|
3038
|
+
* shortcuts reads before their effects have run, so a one-time read returns an empty list and no
|
|
3039
|
+
* later render corrects it — the panel simply shows nothing. The same applies whenever a layer is
|
|
3040
|
+
* enabled, disabled or replaced while the panel is open.
|
|
3041
|
+
*
|
|
3042
|
+
* The manager returns the same array until its stack changes, so this re-renders when the
|
|
3043
|
+
* shortcuts change and not on every read.
|
|
3044
|
+
*
|
|
3045
|
+
* @experimental
|
|
3046
|
+
*/
|
|
3047
|
+
declare function useActiveShortcuts(): readonly ActiveShortcut[];
|
|
2212
3048
|
|
|
2213
3049
|
/**
|
|
2214
|
-
*
|
|
3050
|
+
* Parsing and matching for keyboard shortcut specifications.
|
|
2215
3051
|
*
|
|
2216
|
-
*
|
|
2217
|
-
*
|
|
3052
|
+
* A spec is written the way it is spoken: `"mod+s"`, `"Escape"`, `"shift+alt+f"`, and — for a
|
|
3053
|
+
* sequence — `"g d"`, meaning `g` then `d`. Steps are separated by spaces; within a step,
|
|
3054
|
+
* modifiers are joined to the key with `+`.
|
|
2218
3055
|
*
|
|
2219
|
-
*
|
|
2220
|
-
*
|
|
2221
|
-
*
|
|
2222
|
-
*
|
|
2223
|
-
*
|
|
3056
|
+
* The space bar is written `"Space"`, because the character the browser reports for it is `" "`
|
|
3057
|
+
* and a spec split on whitespace has no way to carry that.
|
|
3058
|
+
*
|
|
3059
|
+
* **`mod` is the point of this module.** It resolves to Command on Apple platforms and Control
|
|
3060
|
+
* everywhere else, so a binding is written once. Writing `ctrl` or `meta` explicitly is still
|
|
3061
|
+
* possible and then means exactly that, which is what lets a platform-specific binding coexist
|
|
3062
|
+
* with a portable one — a distinction lost by any implementation that treats the two as
|
|
3063
|
+
* interchangeable.
|
|
3064
|
+
*
|
|
3065
|
+
* @module lib/shortcuts/key-spec
|
|
3066
|
+
*/
|
|
3067
|
+
/**
|
|
3068
|
+
* One keystroke: a key plus the modifier state required with it.
|
|
3069
|
+
*
|
|
3070
|
+
* @experimental
|
|
3071
|
+
*/
|
|
3072
|
+
interface KeyChord {
|
|
3073
|
+
/** The `KeyboardEvent.key` value, normalized to lower case for single characters. */
|
|
3074
|
+
readonly key: string;
|
|
3075
|
+
/** Command on Apple platforms, Control elsewhere. */
|
|
3076
|
+
readonly mod: boolean;
|
|
3077
|
+
readonly ctrl: boolean;
|
|
3078
|
+
readonly meta: boolean;
|
|
3079
|
+
readonly alt: boolean;
|
|
3080
|
+
readonly shift: boolean;
|
|
3081
|
+
}
|
|
3082
|
+
/**
|
|
3083
|
+
* A shortcut: one chord, or several pressed in order.
|
|
3084
|
+
*
|
|
3085
|
+
* @experimental
|
|
2224
3086
|
*/
|
|
2225
|
-
|
|
3087
|
+
type KeySequence = readonly KeyChord[];
|
|
3088
|
+
/**
|
|
3089
|
+
* Parse a spec into the sequence of chords it describes.
|
|
3090
|
+
*
|
|
3091
|
+
* @param spec - For example `"mod+s"`, `"Escape"`, or `"g d"`.
|
|
3092
|
+
* @throws If the spec is empty, or a step names modifiers but no key.
|
|
3093
|
+
*
|
|
3094
|
+
* @experimental
|
|
3095
|
+
*/
|
|
3096
|
+
declare function parseKeys(spec: string): KeySequence;
|
|
2226
3097
|
|
|
2227
3098
|
/**
|
|
2228
|
-
*
|
|
2229
|
-
*
|
|
2230
|
-
*
|
|
2231
|
-
*
|
|
2232
|
-
*
|
|
2233
|
-
*
|
|
2234
|
-
*
|
|
2235
|
-
|
|
2236
|
-
|
|
2237
|
-
|
|
2238
|
-
*
|
|
2239
|
-
*
|
|
2240
|
-
*
|
|
2241
|
-
|
|
2242
|
-
|
|
2243
|
-
|
|
2244
|
-
|
|
2245
|
-
|
|
2246
|
-
|
|
2247
|
-
|
|
2248
|
-
|
|
2249
|
-
|
|
2250
|
-
|
|
2251
|
-
|
|
2252
|
-
|
|
2253
|
-
|
|
2254
|
-
|
|
2255
|
-
|
|
2256
|
-
|
|
2257
|
-
|
|
2258
|
-
|
|
2259
|
-
|
|
2260
|
-
|
|
2261
|
-
|
|
2262
|
-
|
|
2263
|
-
|
|
2264
|
-
|
|
2265
|
-
|
|
2266
|
-
|
|
2267
|
-
|
|
2268
|
-
|
|
2269
|
-
|
|
2270
|
-
|
|
2271
|
-
|
|
2272
|
-
|
|
2273
|
-
|
|
2274
|
-
|
|
2275
|
-
|
|
2276
|
-
|
|
2277
|
-
|
|
2278
|
-
|
|
2279
|
-
|
|
2280
|
-
|
|
2281
|
-
|
|
2282
|
-
|
|
2283
|
-
|
|
2284
|
-
|
|
2285
|
-
|
|
2286
|
-
|
|
2287
|
-
|
|
2288
|
-
|
|
2289
|
-
|
|
2290
|
-
|
|
2291
|
-
|
|
2292
|
-
|
|
2293
|
-
|
|
2294
|
-
|
|
2295
|
-
|
|
2296
|
-
|
|
2297
|
-
|
|
2298
|
-
|
|
2299
|
-
|
|
2300
|
-
|
|
2301
|
-
|
|
2302
|
-
|
|
2303
|
-
|
|
2304
|
-
|
|
2305
|
-
|
|
2306
|
-
|
|
2307
|
-
|
|
2308
|
-
|
|
2309
|
-
|
|
2310
|
-
|
|
2311
|
-
|
|
2312
|
-
|
|
2313
|
-
|
|
2314
|
-
|
|
2315
|
-
|
|
2316
|
-
|
|
2317
|
-
|
|
3099
|
+
* How wide a field's CONTROL may grow.
|
|
3100
|
+
*
|
|
3101
|
+
* Named rather than measured so a page cannot invent a one-off width, which is
|
|
3102
|
+
* how the eight admin forms diverged. The caps read from custom properties with
|
|
3103
|
+
* literal fallbacks, so a theme can retune them centrally without this file
|
|
3104
|
+
* changing and without a page overriding them locally.
|
|
3105
|
+
* @experimental
|
|
3106
|
+
*/
|
|
3107
|
+
type FieldWidth = "half" | "full" | "fill";
|
|
3108
|
+
/**
|
|
3109
|
+
* The wiring `FieldShell` computes for its control: the id to attach, the
|
|
3110
|
+
* composed `aria-describedby` (`undefined` when nothing is rendered to point
|
|
3111
|
+
* at), and whether a rendered `error` forces the control invalid (`undefined`
|
|
3112
|
+
* when there is no error to force one way or the other).
|
|
3113
|
+
*
|
|
3114
|
+
* A render-function `children` (see `FieldShellProps`) receives exactly this
|
|
3115
|
+
* object — the SAME computation the element-clone path derives its
|
|
3116
|
+
* `cloneElement` overrides from — so a caller wiring a compound control (a
|
|
3117
|
+
* Radix `Select`'s trigger, for example) gets precisely the values the
|
|
3118
|
+
* simple, single-element case would have applied.
|
|
3119
|
+
* @experimental
|
|
3120
|
+
*/
|
|
3121
|
+
interface FieldShellRenderProps {
|
|
3122
|
+
id: string;
|
|
3123
|
+
describedBy: string | undefined;
|
|
3124
|
+
invalid: boolean | undefined;
|
|
3125
|
+
}
|
|
3126
|
+
/** @experimental */
|
|
3127
|
+
interface FieldShellProps {
|
|
3128
|
+
label?: React.ReactNode;
|
|
3129
|
+
/** Helper text under the control. Rendered only when present. */
|
|
3130
|
+
description?: React.ReactNode;
|
|
3131
|
+
/** Validation message under the control. Rendered only when present. */
|
|
3132
|
+
error?: React.ReactNode;
|
|
3133
|
+
/** Defaults to "half": most admin inputs are short values. */
|
|
3134
|
+
width?: FieldWidth;
|
|
3135
|
+
htmlFor?: string;
|
|
3136
|
+
className?: string;
|
|
3137
|
+
/**
|
|
3138
|
+
* Either a single element to clone, or a function that receives the
|
|
3139
|
+
* computed wiring and applies it itself.
|
|
3140
|
+
*
|
|
3141
|
+
* The element form is `FieldShell` cloning it with `cloneElement` to
|
|
3142
|
+
* attach the id, `aria-describedby` and `aria-invalid` it computes —
|
|
3143
|
+
* unchanged from before, and still the right choice for an atomic control
|
|
3144
|
+
* (`Input`, `Textarea`, `Switch`) that spreads its own props onto a real
|
|
3145
|
+
* DOM node. Typing this branch as `ReactNode` would let a composite field
|
|
3146
|
+
* (two inputs with a unit between them, for example) compile and then
|
|
3147
|
+
* crash on mount, so it stays a single `ReactElement` — wrap several
|
|
3148
|
+
* elements in one real element, a `<div>`, not a `<Fragment>`: a Fragment
|
|
3149
|
+
* forwards none of those props to what is inside it.
|
|
3150
|
+
*
|
|
3151
|
+
* The function form exists for a compound control built on a Radix `Root`
|
|
3152
|
+
* (`Select`, and by the same shape `RadioGroup`): `Root` destructures a
|
|
3153
|
+
* fixed, named prop list and never spreads the remainder, so `id` handed
|
|
3154
|
+
* to it via `cloneElement` is silently dropped rather than reaching the
|
|
3155
|
+
* actual focusable element two levels down (`Select` > `SelectTrigger` >
|
|
3156
|
+
* `SelectValue`). A render function is called with `FieldShellRenderProps`
|
|
3157
|
+
* and applies `id`/`describedBy`/`invalid` to whichever nested element is
|
|
3158
|
+
* the real control, instead of relying on a single top-level clone that
|
|
3159
|
+
* can never reach it.
|
|
3160
|
+
*/
|
|
3161
|
+
children: React.ReactElement | ((field: FieldShellRenderProps) => React.ReactNode);
|
|
3162
|
+
}
|
|
3163
|
+
/**
|
|
3164
|
+
* The page measure. "form" suits most pages; "wide" is opt-in for dense ones.
|
|
3165
|
+
* @experimental
|
|
3166
|
+
*/
|
|
3167
|
+
type FormMeasure = "form" | "wide";
|
|
3168
|
+
/** @experimental */
|
|
3169
|
+
interface FormLayoutProps {
|
|
3170
|
+
width?: FormMeasure;
|
|
3171
|
+
className?: string;
|
|
3172
|
+
children: React.ReactNode;
|
|
3173
|
+
}
|
|
3174
|
+
/** @experimental */
|
|
3175
|
+
interface FormActionsProps {
|
|
3176
|
+
/**
|
|
3177
|
+
* Whether the form has unsaved changes. Supplied by the page from the form
|
|
3178
|
+
* state that already tracks it; never computed here.
|
|
3179
|
+
*/
|
|
3180
|
+
dirty?: boolean;
|
|
3181
|
+
className?: string;
|
|
3182
|
+
children: React.ReactNode;
|
|
3183
|
+
}
|
|
3184
|
+
|
|
3185
|
+
/** @experimental */
|
|
3186
|
+
declare function FieldShell({ label, description, error, width, htmlFor, className, children, }: FieldShellProps): react_jsx_runtime.JSX.Element;
|
|
3187
|
+
|
|
3188
|
+
/** @experimental */
|
|
3189
|
+
interface FormSectionProps {
|
|
3190
|
+
/** Short label above the card, rendered uppercase. */
|
|
3191
|
+
label: string;
|
|
3192
|
+
/** Optional sentence under the label. */
|
|
3193
|
+
description?: react.ReactNode;
|
|
3194
|
+
className?: string;
|
|
3195
|
+
children: react.ReactNode;
|
|
3196
|
+
}
|
|
3197
|
+
/**
|
|
3198
|
+
* A labelled card holding a group of fields.
|
|
3199
|
+
*
|
|
3200
|
+
* Composes `Card` rather than hand-rolling its own border and background, so
|
|
3201
|
+
* a section carries the CONTAINER radius tier `Card` already defines instead
|
|
3202
|
+
* of a second, drifting copy of the same chrome. There is deliberately no
|
|
3203
|
+
* footer slot. A form commits as one document, so its action belongs to the
|
|
3204
|
+
* page rather than to a section.
|
|
3205
|
+
* @experimental
|
|
3206
|
+
*/
|
|
3207
|
+
declare function FormSection({ label, description, className, children, }: FormSectionProps): react_jsx_runtime.JSX.Element;
|
|
3208
|
+
|
|
3209
|
+
/**
|
|
3210
|
+
* @experimental
|
|
3211
|
+
*/
|
|
3212
|
+
declare function FormLayout({ width, className, children, }: FormLayoutProps): react_jsx_runtime.JSX.Element;
|
|
3213
|
+
/**
|
|
3214
|
+
* One action bar per form, at the end of the measure.
|
|
3215
|
+
*
|
|
3216
|
+
* A form commits as a single document, so there is one place to commit it. The
|
|
3217
|
+
* dirty flag arrives from the page because the form state already answers that
|
|
3218
|
+
* question, and a second implementation of it here would disagree with the
|
|
3219
|
+
* first as soon as either changed.
|
|
3220
|
+
* @experimental
|
|
3221
|
+
*/
|
|
3222
|
+
declare function FormActions({ dirty, className, children }: FormActionsProps): react_jsx_runtime.JSX.Element;
|
|
2318
3223
|
|
|
2319
|
-
export { Accordion, AccordionContent, type AccordionContentProps, AccordionItem, type AccordionItemProps, type AccordionProps, AccordionTrigger, type AccordionTriggerProps, type ActionCallbacks, Alert, AlertDescription, type AlertDescriptionProps, AlertDialog, AlertDialogAction, type AlertDialogActionProps, AlertDialogCancel, type AlertDialogCancelProps, AlertDialogContent, type AlertDialogContentProps, AlertDialogDescription, type AlertDialogDescriptionProps, AlertDialogFooter, type AlertDialogFooterProps, AlertDialogHeader, type AlertDialogHeaderProps, AlertDialogOverlay, type AlertDialogOverlayProps, AlertDialogPortal, AlertDialogTitle, type AlertDialogTitleProps, AlertDialogTrigger, type AlertProps, AlertTitle, type AlertTitleProps, Avatar, AvatarFallback, type AvatarFallbackProps, AvatarImage, type AvatarImageProps, type AvatarProps, Badge, type BadgeProps, Button, type ButtonProps, Card, CardAction, type CardActionProps, CardContent, type CardContentProps, CardDescription, type CardDescriptionProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, type CardProps, CardTitle, type CardTitleProps, Checkbox, Collapsible, CollapsibleContent, CollapsibleTrigger, type
|
|
3224
|
+
export { Accordion, AccordionContent, type AccordionContentProps, AccordionItem, type AccordionItemProps, type AccordionProps, AccordionTrigger, type AccordionTriggerProps, type ActionCallbacks, type ActiveShortcut, Alert, AlertDescription, type AlertDescriptionProps, AlertDialog, AlertDialogAction, type AlertDialogActionProps, AlertDialogCancel, type AlertDialogCancelProps, AlertDialogContent, type AlertDialogContentProps, AlertDialogDescription, type AlertDialogDescriptionProps, AlertDialogFooter, type AlertDialogFooterProps, AlertDialogHeader, type AlertDialogHeaderProps, AlertDialogOverlay, type AlertDialogOverlayProps, AlertDialogPortal, AlertDialogTitle, type AlertDialogTitleProps, AlertDialogTrigger, type AlertProps, AlertTitle, type AlertTitleProps, Avatar, AvatarFallback, type AvatarFallbackProps, AvatarImage, type AvatarImageProps, type AvatarProps, Badge, type BadgeProps, Button, type ButtonProps, Card, CardAction, type CardActionProps, CardContent, type CardContentProps, CardDescription, type CardDescriptionProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, type CardProps, CardTitle, type CardTitleProps, Checkbox, Collapsible, CollapsibleContent, CollapsibleTrigger, ColorPicker, type ColorPickerProps, type ColorSwatch, Command, CommandDialog, type CommandDialogProps, CommandEmpty, type CommandEmptyProps, CommandGroup, type CommandGroupProps, CommandInput, type CommandInputProps, CommandItem, type CommandItemProps, CommandList, type CommandListProps, type CommandProps, CommandSeparator, type CommandSeparatorProps, CommandShortcut, type CommandShortcutProps, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, type DataFetcher, Dialog, DialogClose, DialogContent, type DialogContentProps, DialogDescription, type DialogDescriptionProps, DialogFooter, type DialogFooterProps, DialogHeader, type DialogHeaderProps, DialogOverlay, type DialogOverlayProps, DialogPortal, DialogTitle, type DialogTitleProps, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, type DropdownMenuCheckboxItemProps, DropdownMenuContent, type DropdownMenuContentProps, DropdownMenuGroup, DropdownMenuItem, type DropdownMenuItemProps, DropdownMenuLabel, type DropdownMenuLabelProps, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, type DropdownMenuRadioItemProps, DropdownMenuSeparator, type DropdownMenuSeparatorProps, DropdownMenuShortcut, type DropdownMenuShortcutProps, DropdownMenuSub, DropdownMenuSubContent, type DropdownMenuSubContentProps, DropdownMenuSubTrigger, type DropdownMenuSubTriggerProps, DropdownMenuTrigger, FieldShell, type FieldShellProps, type FieldShellRenderProps, type FieldWidth, type FilterInfo, FormActions, type FormActionsProps, FormLabelWithTooltip, type FormLabelWithTooltipProps, FormLayout, type FormLayoutProps, type FormMeasure, FormSection, type FormSectionProps, Grid, type GridProps, Input, type InputProps, type KeyChord, type KeySequence, Label, type ListResponse, type PaginationConfig, type PaginationMeta, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, PortalProvider, Progress, type ProgressProps, RadioGroup, RadioGroupItem, ResizableHandle, ResizablePanel, ResizablePanelGroup, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, type SelectTriggerProps, SelectValue, Separator, Sheet, SheetClose, type SheetCloseProps, SheetContent, type SheetContentProps, type SheetContentRef, SheetDescription, type SheetDescriptionProps, type SheetDescriptionRef, SheetFooter, type SheetFooterProps, SheetHeader, type SheetHeaderProps, SheetOverlay, type SheetOverlayProps, type SheetOverlayRef, SheetPortal, type SheetProps, SheetTitle, type SheetTitleProps, type SheetTitleRef, SheetTrigger, type SheetTriggerProps, type ShortcutBinding, type ShortcutLayerOptions, type ShortcutManager, type ShortcutManagerOptions, ShortcutProvider, type ShortcutProviderProps, type ShortcutRegistration, ShortcutScope, Skeleton, type SkeletonProps, Slider, type SliderProps, type SliderThumbProps, type SortInfo, Spinner, type SpinnerProps, Stack, type StackProps, Stat, type StatProps, Switch, Table, TableBody, TableCaption, TableCell, TableEmpty, type TableEmptyProps, TableError, type TableErrorProps, TableFooter, TableHead, TableHeader, TableLoading, type TableParams, TableRow, TableSearch, type TableSearchProps, TableSkeleton, type TableSkeletonProps, Tabs, TabsContent, type TabsContentProps, TabsList, type TabsListProps, type TabsProps, TabsTrigger, type TabsTriggerProps, Textarea, Toaster, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, type TreeNode, TreeView, type TreeViewProps, type UseShortcutsOptions, alertVariants, avatarVariants, badgeVariants, buttonVariants, cardVariants, commandDefaultFilter, createShortcutManager, dialogContentVariants, inputVariants, parseKeys, progressVariants, selectTriggerVariants, sheetVariants, spinnerVariants, useActiveShortcuts, usePortalContainer, useShortcutManager, useShortcuts };
|