@okshaun/components 1.0.1 → 2.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/.mcp.json +2 -5
- package/dist/icon-metadata.json +5173 -0
- package/dist/index.js +17088 -9273
- package/dist/index.js.map +1 -1
- package/dist/panda.buildinfo.json +693 -0
- package/dist/playroom-static.css +187432 -0
- package/dist/{preset-BzrKiUEH.js → preset-Coz-VwQR.js} +4051 -3217
- package/dist/preset-Coz-VwQR.js.map +1 -0
- package/dist/preset.js +1 -1
- package/dist/specs/color-palette.json +22 -1
- package/dist/specs/patterns.json +0 -16
- package/dist/specs/recipes.json +411 -247
- package/dist/specs/semantic-tokens.json +330 -115
- package/dist/specs/text-styles.json +72 -0
- package/dist/specs/tokens.json +237 -27
- package/dist/sprite.svg +1 -1
- package/dist/sprite.symbol.html +6662 -320
- package/dist/styles.css +36938 -5
- package/dist/svgs/calendar-lock.svg +1 -0
- package/dist/svgs/computer.svg +1 -0
- package/dist/svgs/cookie.svg +1 -0
- package/dist/svgs/folder-check.svg +1 -0
- package/dist/svgs/folder-copy.svg +1 -0
- package/dist/svgs/folder-dashed.svg +1 -0
- package/dist/svgs/folder-open.svg +1 -0
- package/dist/svgs/folder-topic.svg +1 -0
- package/dist/svgs/folder.svg +1 -0
- package/dist/svgs/mobile.svg +1 -0
- package/dist/svgs/numpad.svg +1 -0
- package/dist/svgs/phone.svg +1 -0
- package/dist/svgs/qr-code.svg +1 -0
- package/dist/svgs/sparkle.svg +1 -0
- package/dist/svgs/trolley.svg +1 -0
- package/dist/types/index.d.ts +834 -347
- package/package.json +49 -36
- package/src/recipes/avatar.ts +4 -4
- package/src/recipes/badge.ts +22 -48
- package/src/recipes/box.ts +1 -7
- package/src/recipes/breadcrumbs.ts +42 -25
- package/src/recipes/button.ts +151 -85
- package/src/recipes/card.ts +5 -1
- package/src/recipes/checkbox.ts +23 -24
- package/src/recipes/checkboxInput.ts +25 -0
- package/src/recipes/chip.ts +35 -37
- package/src/recipes/code.ts +4 -4
- package/src/recipes/datePicker.ts +223 -0
- package/src/recipes/divider.ts +38 -31
- package/src/recipes/formField.ts +41 -23
- package/src/recipes/highlightText.ts +14 -0
- package/src/recipes/icon.ts +13 -0
- package/src/recipes/list.ts +14 -0
- package/src/recipes/listItem.ts +310 -0
- package/src/recipes/listItemGroup.ts +62 -0
- package/src/recipes/menu.ts +90 -163
- package/src/recipes/modal.ts +51 -18
- package/src/recipes/radio.ts +29 -20
- package/src/recipes/radioInput.ts +25 -0
- package/src/recipes/recipes-regular.ts +14 -0
- package/src/recipes/{index.ts → recipes-slot.ts} +14 -23
- package/src/recipes/select.ts +1 -1
- package/src/recipes/spinner.ts +49 -23
- package/src/recipes/tag.ts +80 -84
- package/src/recipes/text.ts +18 -19
- package/src/recipes/textInput.ts +205 -0
- package/src/recipes/textarea.ts +65 -138
- package/src/recipes/themeSwitcher.ts +3 -3
- package/src/recipes/timePicker.ts +199 -0
- package/src/recipes/toggle.ts +72 -99
- package/src/recipes/toggleInput.ts +26 -0
- package/src/recipes/tooltip.ts +52 -343
- package/src/styles/index.css +1 -1
- package/src/styles/primitives/borders.ts +7 -1
- package/src/styles/primitives/colors.ts +51 -0
- package/src/styles/primitives/fontSizes.ts +1 -0
- package/src/styles/primitives/index.ts +2 -1
- package/src/styles/primitives/radii.ts +1 -1
- package/src/styles/primitives/shadows.ts +9 -9
- package/src/styles/primitives/sizes.ts +1 -0
- package/src/styles/primitives/zIndex.ts +17 -0
- package/src/styles/semantics/colors.ts +137 -82
- package/src/styles/semantics/index.ts +1 -0
- package/src/styles/semantics/zIndex.ts +18 -0
- package/src/styles/utilities/breakpoints.ts +6 -6
- package/src/styles/utilities/index.ts +3 -0
- package/src/styles/utilities/textStyles.ts +71 -1
- package/src/utils/splitProps.ts +4 -4
- package/dist/preset-BzrKiUEH.js.map +0 -1
- package/dist/styles/global.css +0 -148
- package/dist/styles/recipes/avatar.css +0 -185
- package/dist/styles/recipes/badge.css +0 -85
- package/dist/styles/recipes/breadcrumbs.css +0 -38
- package/dist/styles/recipes/button.css +0 -195
- package/dist/styles/recipes/card.css +0 -57
- package/dist/styles/recipes/checkbox-input.css +0 -12
- package/dist/styles/recipes/checkbox.css +0 -90
- package/dist/styles/recipes/chip.css +0 -137
- package/dist/styles/recipes/code.css +0 -12
- package/dist/styles/recipes/divider.css +0 -43
- package/dist/styles/recipes/form-field.css +0 -39
- package/dist/styles/recipes/heading.css +0 -40
- package/dist/styles/recipes/icon-button.css +0 -181
- package/dist/styles/recipes/label.css +0 -14
- package/dist/styles/recipes/link.css +0 -49
- package/dist/styles/recipes/menu.css +0 -141
- package/dist/styles/recipes/modal.css +0 -99
- package/dist/styles/recipes/pre.css +0 -16
- package/dist/styles/recipes/radio-input.css +0 -7
- package/dist/styles/recipes/radio.css +0 -82
- package/dist/styles/recipes/select.css +0 -103
- package/dist/styles/recipes/spinner.css +0 -36
- package/dist/styles/recipes/tag.css +0 -27
- package/dist/styles/recipes/text.css +0 -46
- package/dist/styles/recipes/textarea.css +0 -91
- package/dist/styles/recipes/textinput.css +0 -87
- package/dist/styles/recipes/theme-switcher.css +0 -53
- package/dist/styles/recipes/toggle-input.css +0 -12
- package/dist/styles/recipes/toggle.css +0 -125
- package/dist/styles/recipes/tooltip.css +0 -133
- package/dist/styles/recipes.css +0 -30
- package/dist/styles/reset.css +0 -1
- package/dist/styles/tokens.css +0 -1016
- package/dist/styles/utilities.css +0 -1694
- package/src/recipes/checkboxinput.ts +0 -15
- package/src/recipes/radioinput.ts +0 -12
- package/src/recipes/textinput.ts +0 -100
- package/src/recipes/toggleinput.ts +0 -16
- package/src/utils/injectSprite.ts +0 -36
- package/src/utils/spriteContent.ts +0 -4
package/dist/types/index.d.ts
CHANGED
|
@@ -1,16 +1,16 @@
|
|
|
1
|
+
import { ChangeEvent } from 'react';
|
|
1
2
|
import { ChangeEventHandler } from 'react';
|
|
2
3
|
import { Component } from 'react';
|
|
3
4
|
import { ComponentPropsWithRef } from 'react';
|
|
4
5
|
import { ComponentType } from 'react';
|
|
5
6
|
import { Context } from 'react';
|
|
6
|
-
import { default as default_2 } from 'react';
|
|
7
7
|
import { ElementType } from 'react';
|
|
8
8
|
import { JSX } from 'react/jsx-runtime';
|
|
9
9
|
import { JSX as JSX_2 } from 'react';
|
|
10
10
|
import { JSXElementConstructor } from 'react';
|
|
11
|
+
import { MouseEvent as MouseEvent_2 } from 'react';
|
|
11
12
|
import { Placement } from '@floating-ui/react';
|
|
12
13
|
import { Preset } from '@pandacss/types';
|
|
13
|
-
import * as React_2 from 'react';
|
|
14
14
|
import { ReactElement } from 'react';
|
|
15
15
|
import { ReactNode } from 'react';
|
|
16
16
|
import { RefObject } from 'react';
|
|
@@ -68,6 +68,10 @@ declare type AriaAttributes =
|
|
|
68
68
|
|
|
69
69
|
declare type AspectRatioToken = "square" | "landscape" | "portrait" | "wide" | "ultrawide" | "golden"
|
|
70
70
|
|
|
71
|
+
declare type AsProp<T extends ElementType> = {
|
|
72
|
+
as?: T;
|
|
73
|
+
};
|
|
74
|
+
|
|
71
75
|
declare interface AsProps {
|
|
72
76
|
/**
|
|
73
77
|
* The element to render as
|
|
@@ -98,13 +102,17 @@ export declare interface AutocompleteOption {
|
|
|
98
102
|
disabled?: boolean;
|
|
99
103
|
}
|
|
100
104
|
|
|
101
|
-
export declare type AutocompleteProps =
|
|
105
|
+
export declare type AutocompleteProps = {
|
|
102
106
|
/** Input name attribute */
|
|
103
107
|
name: string;
|
|
104
108
|
/** Current input value */
|
|
105
109
|
value: string;
|
|
106
110
|
/** Callback when input value changes */
|
|
107
111
|
onChange: (value: string) => void;
|
|
112
|
+
/** Popup density */
|
|
113
|
+
density?: MenuDensity;
|
|
114
|
+
/** Deprecated alias for density */
|
|
115
|
+
packing?: MenuDensity;
|
|
108
116
|
/** Size of the input */
|
|
109
117
|
size?: 'sm' | 'md' | 'lg' | 'xl';
|
|
110
118
|
/** Available options to filter and display */
|
|
@@ -135,14 +143,11 @@ export declare type AutocompleteProps = MenuVariantProps & {
|
|
|
135
143
|
* Avatar component for displaying user or entity images with optional
|
|
136
144
|
* presence and status indicators.
|
|
137
145
|
*/
|
|
138
|
-
export declare const Avatar:
|
|
139
|
-
(props: AvatarProps): JSX.Element;
|
|
140
|
-
displayName: string;
|
|
141
|
-
};
|
|
146
|
+
export declare const Avatar: (props: AvatarProps) => JSX.Element;
|
|
142
147
|
|
|
143
148
|
export declare type AvatarPresence = 'online' | 'busy' | 'offline' | 'focus';
|
|
144
149
|
|
|
145
|
-
export declare type AvatarProps = BoxProps & Omit<AvatarVariantProps, 'size' | 'shape'> & {
|
|
150
|
+
export declare type AvatarProps = Omit<BoxProps, keyof AvatarVariantProps> & Omit<AvatarVariantProps, 'size' | 'shape'> & {
|
|
146
151
|
/** Image source URL */
|
|
147
152
|
src?: string;
|
|
148
153
|
/** Alt text for image */
|
|
@@ -158,11 +163,9 @@ export declare type AvatarProps = BoxProps & Omit<AvatarVariantProps, 'size' | '
|
|
|
158
163
|
/** Status indicator (top-right) */
|
|
159
164
|
status?: AvatarStatus;
|
|
160
165
|
/** Custom fallback content (overrides initials) */
|
|
161
|
-
fallback?:
|
|
166
|
+
fallback?: ReactNode;
|
|
162
167
|
/** Border color for the avatar */
|
|
163
|
-
borderColor?:
|
|
164
|
-
/** Additional class name */
|
|
165
|
-
className?: string;
|
|
168
|
+
borderColor?: BoxProps['borderColor'];
|
|
166
169
|
};
|
|
167
170
|
|
|
168
171
|
export declare type AvatarShape = 'circle' | 'square' | 'hexagon';
|
|
@@ -194,12 +197,9 @@ declare type AvatarVariantProps = {
|
|
|
194
197
|
* - Without count prop: shows as dot
|
|
195
198
|
* - With count prop: shows the number (or "99+" if exceeds overflowCount)
|
|
196
199
|
*/
|
|
197
|
-
export declare const Badge:
|
|
198
|
-
(props: BadgeProps): JSX.Element | null;
|
|
199
|
-
displayName: string;
|
|
200
|
-
};
|
|
200
|
+
export declare const Badge: (props: BadgeProps) => JSX.Element | null;
|
|
201
201
|
|
|
202
|
-
export declare type BadgeProps = BoxProps & Omit<BadgeVariantProps, 'standalone' | 'dot'> & {
|
|
202
|
+
export declare type BadgeProps = Omit<BoxProps, keyof BadgeVariantProps> & Omit<BadgeVariantProps, 'standalone' | 'dot'> & {
|
|
203
203
|
/** Number to show in badge. If provided, switches to count mode. */
|
|
204
204
|
count?: number;
|
|
205
205
|
/** Show badge when count is zero. Default: false */
|
|
@@ -208,13 +208,11 @@ export declare type BadgeProps = BoxProps & Omit<BadgeVariantProps, 'standalone'
|
|
|
208
208
|
overflowCount?: number;
|
|
209
209
|
/** Color scheme of the badge. Default: 'danger' */
|
|
210
210
|
variant?: BadgeVariant;
|
|
211
|
-
/** Additional class name */
|
|
212
|
-
className?: string;
|
|
213
211
|
/** Content to wrap with the badge */
|
|
214
|
-
children?:
|
|
212
|
+
children?: ReactNode;
|
|
215
213
|
};
|
|
216
214
|
|
|
217
|
-
export declare type BadgeVariant = 'neutral' | '
|
|
215
|
+
export declare type BadgeVariant = 'neutral' | 'subtle' | 'bold' | 'inverse' | 'success' | 'danger' | 'warning' | 'info';
|
|
218
216
|
|
|
219
217
|
declare interface BadgeVariant_2 {
|
|
220
218
|
/**
|
|
@@ -226,7 +224,7 @@ declare interface BadgeVariant_2 {
|
|
|
226
224
|
/**
|
|
227
225
|
* @default "danger"
|
|
228
226
|
*/
|
|
229
|
-
variant: "neutral" | "subtle" | "
|
|
227
|
+
variant: "neutral" | "subtle" | "bold" | "inverse" | "success" | "warning" | "danger" | "info"
|
|
230
228
|
}
|
|
231
229
|
|
|
232
230
|
declare type BadgeVariantProps = {
|
|
@@ -253,15 +251,19 @@ declare type BaseSlotRecipeConfig<S extends string = string, V extends SlotRecip
|
|
|
253
251
|
|
|
254
252
|
declare type BlurToken = "sm" | "base" | "md" | "lg" | "xl" | "2xl" | "3xl"
|
|
255
253
|
|
|
256
|
-
declare type BorderToken = "default" | "
|
|
254
|
+
declare type BorderToken = "default" | "bold" | "inverse" | "disabled" | "input" | "focused" | "success" | "warning" | "danger" | "info" | "none"
|
|
257
255
|
|
|
258
256
|
declare type BorderWidthToken = "0" | "1" | "2" | "4" | "8" | "16"
|
|
259
257
|
|
|
260
|
-
|
|
258
|
+
/**
|
|
259
|
+
* Our base polymorphic component, which provides the correct default props based on the rendered element type.
|
|
260
|
+
* Note: in React 19+, ref is passed through as a prop, and onClick is inherited based on the element type.
|
|
261
|
+
*/
|
|
262
|
+
export declare const Box: <T extends ElementType = "div">(props: BoxProps<T>) => ReactElement<any, string | JSXElementConstructor<any>>;
|
|
261
263
|
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
264
|
+
declare type BoxOwnProps = SystemStyleObject_2 & BoxVariantProps;
|
|
265
|
+
|
|
266
|
+
export declare type BoxProps<T extends ElementType = ElementType> = PolymorphicComponentProps<T, BoxOwnProps>;
|
|
265
267
|
|
|
266
268
|
declare interface BoxVariant {
|
|
267
269
|
|
|
@@ -273,7 +275,7 @@ declare type BoxVariantProps = {
|
|
|
273
275
|
|
|
274
276
|
export declare const Breadcrumbs: (props: BreadcrumbsProps) => JSX.Element;
|
|
275
277
|
|
|
276
|
-
export declare type BreadcrumbsProps = BoxProps & {
|
|
278
|
+
export declare type BreadcrumbsProps = Omit<BoxProps, keyof BreadcrumbsVariantProps> & BreadcrumbsVariantProps & {
|
|
277
279
|
items: {
|
|
278
280
|
id: string;
|
|
279
281
|
label: string;
|
|
@@ -281,6 +283,14 @@ export declare type BreadcrumbsProps = BoxProps & {
|
|
|
281
283
|
}[];
|
|
282
284
|
};
|
|
283
285
|
|
|
286
|
+
declare interface BreadcrumbsVariant {
|
|
287
|
+
|
|
288
|
+
}
|
|
289
|
+
|
|
290
|
+
declare type BreadcrumbsVariantProps = {
|
|
291
|
+
[key in keyof BreadcrumbsVariant]?: ConditionalValue<BreadcrumbsVariant[key]> | undefined
|
|
292
|
+
}
|
|
293
|
+
|
|
284
294
|
export declare function BreakpointIndicator(): JSX.Element;
|
|
285
295
|
|
|
286
296
|
declare type BreakpointKey = keyof typeof breakpoints;
|
|
@@ -303,7 +313,7 @@ export declare type ButtonProps = Omit<BoxProps, keyof ButtonVariantProps> & Omi
|
|
|
303
313
|
iconAfter?: IconNamesList;
|
|
304
314
|
href?: string;
|
|
305
315
|
loading?: boolean;
|
|
306
|
-
children
|
|
316
|
+
children: string | ReactNode;
|
|
307
317
|
disabled?: boolean;
|
|
308
318
|
type?: 'submit' | 'reset' | 'button';
|
|
309
319
|
gap?: NumericSizeToken;
|
|
@@ -313,11 +323,11 @@ declare interface ButtonVariant {
|
|
|
313
323
|
/**
|
|
314
324
|
* @default "default"
|
|
315
325
|
*/
|
|
316
|
-
variant: "default" | "primary" | "
|
|
326
|
+
variant: "default" | "primary" | "hollow" | "ghost" | "danger" | "selected" | "selectedBold"
|
|
317
327
|
/**
|
|
318
328
|
* @default "md"
|
|
319
329
|
*/
|
|
320
|
-
size: "
|
|
330
|
+
size: "sm" | "md" | "lg" | "xl"
|
|
321
331
|
iconBefore: boolean
|
|
322
332
|
iconAfter: boolean
|
|
323
333
|
}
|
|
@@ -328,7 +338,7 @@ declare type ButtonVariantProps = {
|
|
|
328
338
|
|
|
329
339
|
export declare const Card: (props: CardProps) => JSX.Element;
|
|
330
340
|
|
|
331
|
-
export declare type CardProps = BoxProps & CardVariantProps & {
|
|
341
|
+
export declare type CardProps = Omit<BoxProps, keyof CardVariantProps> & CardVariantProps & {
|
|
332
342
|
href?: string;
|
|
333
343
|
children?: string | ReactNode;
|
|
334
344
|
grabbed?: boolean;
|
|
@@ -341,9 +351,6 @@ declare interface CardVariant {
|
|
|
341
351
|
* @default "default"
|
|
342
352
|
*/
|
|
343
353
|
variant: "default" | "flat" | "sunken" | "ghost" | "overlay"
|
|
344
|
-
/**
|
|
345
|
-
* @default false
|
|
346
|
-
*/
|
|
347
354
|
interactive: boolean
|
|
348
355
|
}
|
|
349
356
|
|
|
@@ -369,7 +376,7 @@ export declare const Checkbox: (props: CheckboxProps) => JSX.Element;
|
|
|
369
376
|
* @example
|
|
370
377
|
* const handleChange: CheckboxChangeHandler = (e) => setChecked(e.target.checked);
|
|
371
378
|
*/
|
|
372
|
-
export declare type CheckboxChangeEvent =
|
|
379
|
+
export declare type CheckboxChangeEvent = ChangeEvent<HTMLInputElement>;
|
|
373
380
|
|
|
374
381
|
/**
|
|
375
382
|
* Helper type for checkbox change handler functions
|
|
@@ -383,7 +390,7 @@ export declare const CheckboxInput: (props: CheckboxInputProps) => JSX.Element;
|
|
|
383
390
|
export declare type CheckboxInputProps = Omit<BoxProps, keyof CheckboxInputVariantProps> & CheckboxInputVariantProps & {
|
|
384
391
|
name: string;
|
|
385
392
|
checked: boolean;
|
|
386
|
-
onChange:
|
|
393
|
+
onChange: CheckboxChangeHandler;
|
|
387
394
|
id?: string;
|
|
388
395
|
error?: boolean;
|
|
389
396
|
children?: string | ReactNode;
|
|
@@ -399,20 +406,13 @@ declare type CheckboxInputVariantProps = {
|
|
|
399
406
|
}
|
|
400
407
|
|
|
401
408
|
export declare type CheckboxProps = Omit<BoxProps, 'checked' | 'onChange' | keyof CheckboxVariantProps> & CheckboxVariantProps & {
|
|
402
|
-
/** Form field name */
|
|
403
409
|
name: string;
|
|
404
|
-
/** Controlled checked state (REQUIRED) */
|
|
405
410
|
checked: boolean;
|
|
406
|
-
|
|
407
|
-
onChange: ChangeEventHandler<HTMLInputElement>;
|
|
408
|
-
/** Unique identifier for the checkbox */
|
|
411
|
+
onChange: CheckboxChangeHandler;
|
|
409
412
|
id?: string;
|
|
410
|
-
/** Display indeterminate state (partially checked) */
|
|
411
|
-
indeterminate?: boolean;
|
|
412
|
-
/** Disable the checkbox */
|
|
413
|
-
disabled?: boolean;
|
|
414
|
-
/** Display error state */
|
|
415
413
|
error?: boolean;
|
|
414
|
+
disabled?: boolean;
|
|
415
|
+
indeterminate?: boolean;
|
|
416
416
|
};
|
|
417
417
|
|
|
418
418
|
declare interface CheckboxVariant {
|
|
@@ -425,9 +425,9 @@ declare type CheckboxVariantProps = {
|
|
|
425
425
|
|
|
426
426
|
export declare const Chip: (props: ChipProps) => JSX.Element;
|
|
427
427
|
|
|
428
|
-
export declare const ChipGroup:
|
|
428
|
+
export declare const ChipGroup: (props: ChipGroupProps) => JSX.Element;
|
|
429
429
|
|
|
430
|
-
export declare type ChipGroupProps = Omit<WrapProps, 'role'> & {
|
|
430
|
+
export declare type ChipGroupProps = Omit<WrapProps, 'role'> & Omit<BoxProps, keyof WrapProps> & {
|
|
431
431
|
type: ChipGroupType;
|
|
432
432
|
value: string | string[];
|
|
433
433
|
onChange: (value: string | string[]) => void;
|
|
@@ -458,7 +458,7 @@ declare interface ChipVariant {
|
|
|
458
458
|
/**
|
|
459
459
|
* @default "md"
|
|
460
460
|
*/
|
|
461
|
-
size: "
|
|
461
|
+
size: "sm" | "md" | "lg"
|
|
462
462
|
before: boolean
|
|
463
463
|
after: boolean
|
|
464
464
|
}
|
|
@@ -469,8 +469,8 @@ declare type ChipVariantProps = {
|
|
|
469
469
|
|
|
470
470
|
export declare const Code: (props: CodeProps) => JSX.Element;
|
|
471
471
|
|
|
472
|
-
export declare type CodeProps = Omit<BoxProps, keyof CodeVariantProps> & CodeVariantProps & {
|
|
473
|
-
children?: string |
|
|
472
|
+
export declare type CodeProps = Omit<BoxProps, keyof CodeVariantProps | keyof TextProps> & CodeVariantProps & TextProps & {
|
|
473
|
+
children?: string | ReactNode;
|
|
474
474
|
lang?: string;
|
|
475
475
|
};
|
|
476
476
|
|
|
@@ -482,7 +482,7 @@ declare type CodeVariantProps = {
|
|
|
482
482
|
[key in keyof CodeVariant]?: ConditionalValue<CodeVariant[key]> | undefined
|
|
483
483
|
}
|
|
484
484
|
|
|
485
|
-
declare type ColorToken = "transparent" | "current" | "inherit" | "neutral.0" | "neutral.10" | "neutral.20" | "neutral.30" | "neutral.40" | "neutral.50" | "neutral.60" | "neutral.70" | "neutral.80" | "neutral.90" | "neutral.100" | "neutral.110" | "neutralA.10" | "neutralA.20" | "neutralA.30" | "neutralA.40" | "neutralA.50" | "darkNeutral.0" | "darkNeutral.10" | "darkNeutral.20" | "darkNeutral.25" | "darkNeutral.30" | "darkNeutral.35" | "darkNeutral.40" | "darkNeutral.50" | "darkNeutral.60" | "darkNeutral.70" | "darkNeutral.80" | "darkNeutral.90" | "darkNeutral.100" | "darkNeutral.110" | "darkNeutralA.10" | "darkNeutralA.20" | "darkNeutralA.25" | "darkNeutralA.30" | "darkNeutralA.35" | "darkNeutralA.40" | "darkNeutralA.50" | "darkNeutralA.-10" | "gray.10" | "gray.20" | "gray.30" | "gray.40" | "gray.50" | "gray.60" | "gray.70" | "gray.80" | "gray.90" | "gray.100" | "red.10" | "red.20" | "red.30" | "red.40" | "red.50" | "red.60" | "red.70" | "red.80" | "red.90" | "red.100" | "orange.10" | "orange.20" | "orange.30" | "orange.40" | "orange.50" | "orange.60" | "orange.70" | "orange.80" | "orange.90" | "orange.100" | "yellow.10" | "yellow.20" | "yellow.30" | "yellow.40" | "yellow.50" | "yellow.60" | "yellow.70" | "yellow.80" | "yellow.90" | "yellow.100" | "lime.10" | "lime.20" | "lime.30" | "lime.40" | "lime.50" | "lime.60" | "lime.70" | "lime.80" | "lime.90" | "lime.100" | "green.10" | "green.20" | "green.30" | "green.40" | "green.50" | "green.60" | "green.70" | "green.80" | "green.90" | "green.100" | "teal.10" | "teal.20" | "teal.30" | "teal.40" | "teal.50" | "teal.60" | "teal.70" | "teal.80" | "teal.90" | "teal.100" | "blue.10" | "blue.20" | "blue.30" | "blue.40" | "blue.50" | "blue.60" | "blue.70" | "blue.80" | "blue.90" | "blue.100" | "indigo.10" | "indigo.20" | "indigo.30" | "indigo.40" | "indigo.50" | "indigo.60" | "indigo.70" | "indigo.80" | "indigo.90" | "indigo.100" | "purple.10" | "purple.20" | "purple.30" | "purple.40" | "purple.50" | "purple.60" | "purple.70" | "purple.80" | "purple.90" | "purple.100" | "magenta.10" | "magenta.20" | "magenta.30" | "magenta.40" | "magenta.50" | "magenta.60" | "magenta.70" | "magenta.80" | "magenta.90" | "magenta.100" | "tan.10" | "tan.20" | "tan.30" | "tan.40" | "tan.50" | "tan.60" | "tan.70" | "tan.80" | "tan.90" | "tan.100" | "slate.0" | "slate.1" | "slate.2" | "slate.3" | "slate.4" | "slate.5" | "slate.10" | "slate.20" | "slate.30" | "slate.40" | "slate.50" | "slate.60" | "slate.70" | "slate.80" | "slate.90" | "slate.100" | "brand.10" | "brand.20" | "brand.30" | "brand.40" | "brand.50" | "brand.60" | "brand.70" | "brand.80" | "brand.90" | "brand.100" | "bg.disabled" | "bg.neutral" | "bg.neutral.hovered" | "bg.neutral.pressed" | "bg.neutral.bold" | "bg.neutral.bold.hovered" | "bg.neutral.bold.pressed" | "bg.neutral.boldest" | "bg.neutral.subtle" | "bg.neutral.subtle.hovered" | "bg.neutral.subtle.pressed" | "bg.neutral.inverse" | "bg.neutral.inverse.subtle" | "bg.neutral.inverse.subtle.hovered" | "bg.selected" | "bg.selected.hovered" | "bg.selected.pressed" | "bg.selected.bold" | "bg.selected.bold.hovered" | "bg.selected.bold.pressed" | "bg.brand.bold" | "bg.brand.bold.hovered" | "bg.brand.bold.pressed" | "bg.brand.boldest" | "bg.brand.boldest.hovered" | "bg.brand.boldest.pressed" | "bg.brand.subtle" | "bg.brand.subtle.hovered" | "bg.brand.subtle.pressed" | "bg.success" | "bg.success.hovered" | "bg.success.pressed" | "bg.success.bold" | "bg.success.bold.hovered" | "bg.success.bold.pressed" | "bg.warning" | "bg.warning.hovered" | "bg.warning.pressed" | "bg.warning.bold" | "bg.warning.bold.hovered" | "bg.warning.bold.pressed" | "bg.danger" | "bg.danger.hovered" | "bg.danger.pressed" | "bg.danger.bold" | "bg.danger.bold.hovered" | "bg.danger.bold.pressed" | "bg.info" | "bg.info.hovered" | "bg.info.pressed" | "bg.info.bold" | "bg.info.bold.hovered" | "bg.info.bold.pressed" | "bg.input" | "bg.input.hovered" | "bg.input.pressed" | "bg.accent.neutral" | "bg.accent.neutral.subtle" | "bg.accent.neutral.subtlest" | "bg.accent.neutral.bold" | "bg.accent.blue" | "bg.accent.blue.subtle" | "bg.accent.blue.subtlest" | "bg.accent.blue.bold" | "bg.accent.green" | "bg.accent.green.subtle" | "bg.accent.green.subtlest" | "bg.accent.green.bold" | "bg.accent.indigo" | "bg.accent.indigo.subtle" | "bg.accent.indigo.subtlest" | "bg.accent.indigo.bold" | "bg.accent.lime" | "bg.accent.lime.subtle" | "bg.accent.lime.subtlest" | "bg.accent.lime.bold" | "bg.accent.magenta" | "bg.accent.magenta.subtle" | "bg.accent.magenta.subtlest" | "bg.accent.magenta.bold" | "bg.accent.orange" | "bg.accent.orange.subtle" | "bg.accent.orange.subtlest" | "bg.accent.orange.bold" | "bg.accent.purple" | "bg.accent.purple.subtle" | "bg.accent.purple.subtlest" | "bg.accent.purple.bold" | "bg.accent.red" | "bg.accent.red.subtle" | "bg.accent.red.subtlest" | "bg.accent.red.bold" | "bg.accent.tan" | "bg.accent.tan.subtle" | "bg.accent.tan.subtlest" | "bg.accent.tan.bold" | "bg.accent.teal" | "bg.accent.teal.subtle" | "bg.accent.teal.subtlest" | "bg.accent.teal.bold" | "bg.accent.yellow" | "bg.accent.yellow.subtle" | "bg.accent.yellow.subtlest" | "bg.accent.yellow.bold" | "blanket" | "blanket.danger" | "blanket.selected" | "border" | "border.bold" | "border.inverse" | "border.disabled" | "border.focused" | "border.focused.inverse" | "border.selected" | "border.input" | "border.success" | "border.warning" | "border.danger" | "border.info" | "icon" | "icon.subtle" | "icon.subtlest" | "icon.inverse" | "icon.selected" | "icon.disabled" | "icon.decorative" | "icon.decorative.hovered" | "icon.decorative.inverse" | "icon.decorative.inverse.hovered" | "icon.success" | "icon.warning" | "icon.warning.inverse" | "icon.danger" | "icon.info" | "link" | "link.pressed" | "surface" | "surface.hovered" | "surface.pressed" | "surface.sunken" | "surface.overlay" | "surface.overlay.hovered" | "surface.overlay.pressed" | "surface.raised" | "surface.raised.hovered" | "surface.raised.pressed" | "text" | "text.subtle" | "text.subtlest" | "text.placeholder" | "text.bold" | "text.inverse" | "text.selected" | "text.disabled" | "text.success" | "text.warning" | "text.warning.inverse" | "text.danger" | "text.info" | "text.accent.neutral" | "text.accent.neutral.bold" | "text.accent.red" | "text.accent.red.bold" | "text.accent.orange" | "text.accent.orange.bold" | "text.accent.yellow" | "text.accent.yellow.bold" | "text.accent.lime" | "text.accent.lime.bold" | "text.accent.green" | "text.accent.green.bold" | "text.accent.teal" | "text.accent.teal.bold" | "text.accent.blue" | "text.accent.blue.bold" | "text.accent.indigo" | "text.accent.indigo.bold" | "text.accent.purple" | "text.accent.purple.bold" | "text.accent.magenta" | "text.accent.magenta.bold" | "text.accent.tan" | "text.accent.tan.bold" | "utility.shadowColor" | "colorPalette" | "colorPalette.0" | "colorPalette.10" | "colorPalette.20" | "colorPalette.30" | "colorPalette.40" | "colorPalette.50" | "colorPalette.60" | "colorPalette.70" | "colorPalette.80" | "colorPalette.90" | "colorPalette.100" | "colorPalette.110" | "colorPalette.25" | "colorPalette.35" | "colorPalette.-10" | "colorPalette.1" | "colorPalette.2" | "colorPalette.3" | "colorPalette.4" | "colorPalette.5" | "colorPalette.disabled" | "colorPalette.neutral" | "colorPalette.neutral.hovered" | "colorPalette.hovered" | "colorPalette.neutral.pressed" | "colorPalette.pressed" | "colorPalette.neutral.bold" | "colorPalette.bold" | "colorPalette.neutral.bold.hovered" | "colorPalette.bold.hovered" | "colorPalette.neutral.bold.pressed" | "colorPalette.bold.pressed" | "colorPalette.neutral.boldest" | "colorPalette.boldest" | "colorPalette.neutral.subtle" | "colorPalette.subtle" | "colorPalette.neutral.subtle.hovered" | "colorPalette.subtle.hovered" | "colorPalette.neutral.subtle.pressed" | "colorPalette.subtle.pressed" | "colorPalette.neutral.inverse" | "colorPalette.inverse" | "colorPalette.neutral.inverse.subtle" | "colorPalette.inverse.subtle" | "colorPalette.neutral.inverse.subtle.hovered" | "colorPalette.inverse.subtle.hovered" | "colorPalette.selected" | "colorPalette.selected.hovered" | "colorPalette.selected.pressed" | "colorPalette.selected.bold" | "colorPalette.selected.bold.hovered" | "colorPalette.selected.bold.pressed" | "colorPalette.brand.bold" | "colorPalette.brand.bold.hovered" | "colorPalette.brand.bold.pressed" | "colorPalette.brand.boldest" | "colorPalette.brand.boldest.hovered" | "colorPalette.boldest.hovered" | "colorPalette.brand.boldest.pressed" | "colorPalette.boldest.pressed" | "colorPalette.brand.subtle" | "colorPalette.brand.subtle.hovered" | "colorPalette.brand.subtle.pressed" | "colorPalette.success" | "colorPalette.success.hovered" | "colorPalette.success.pressed" | "colorPalette.success.bold" | "colorPalette.success.bold.hovered" | "colorPalette.success.bold.pressed" | "colorPalette.warning" | "colorPalette.warning.hovered" | "colorPalette.warning.pressed" | "colorPalette.warning.bold" | "colorPalette.warning.bold.hovered" | "colorPalette.warning.bold.pressed" | "colorPalette.danger" | "colorPalette.danger.hovered" | "colorPalette.danger.pressed" | "colorPalette.danger.bold" | "colorPalette.danger.bold.hovered" | "colorPalette.danger.bold.pressed" | "colorPalette.info" | "colorPalette.info.hovered" | "colorPalette.info.pressed" | "colorPalette.info.bold" | "colorPalette.info.bold.hovered" | "colorPalette.info.bold.pressed" | "colorPalette.input" | "colorPalette.input.hovered" | "colorPalette.input.pressed" | "colorPalette.accent.neutral" | "colorPalette.accent.neutral.subtle" | "colorPalette.accent.neutral.subtlest" | "colorPalette.neutral.subtlest" | "colorPalette.subtlest" | "colorPalette.accent.neutral.bold" | "colorPalette.accent.blue" | "colorPalette.blue" | "colorPalette.accent.blue.subtle" | "colorPalette.blue.subtle" | "colorPalette.accent.blue.subtlest" | "colorPalette.blue.subtlest" | "colorPalette.accent.blue.bold" | "colorPalette.blue.bold" | "colorPalette.accent.green" | "colorPalette.green" | "colorPalette.accent.green.subtle" | "colorPalette.green.subtle" | "colorPalette.accent.green.subtlest" | "colorPalette.green.subtlest" | "colorPalette.accent.green.bold" | "colorPalette.green.bold" | "colorPalette.accent.indigo" | "colorPalette.indigo" | "colorPalette.accent.indigo.subtle" | "colorPalette.indigo.subtle" | "colorPalette.accent.indigo.subtlest" | "colorPalette.indigo.subtlest" | "colorPalette.accent.indigo.bold" | "colorPalette.indigo.bold" | "colorPalette.accent.lime" | "colorPalette.lime" | "colorPalette.accent.lime.subtle" | "colorPalette.lime.subtle" | "colorPalette.accent.lime.subtlest" | "colorPalette.lime.subtlest" | "colorPalette.accent.lime.bold" | "colorPalette.lime.bold" | "colorPalette.accent.magenta" | "colorPalette.magenta" | "colorPalette.accent.magenta.subtle" | "colorPalette.magenta.subtle" | "colorPalette.accent.magenta.subtlest" | "colorPalette.magenta.subtlest" | "colorPalette.accent.magenta.bold" | "colorPalette.magenta.bold" | "colorPalette.accent.orange" | "colorPalette.orange" | "colorPalette.accent.orange.subtle" | "colorPalette.orange.subtle" | "colorPalette.accent.orange.subtlest" | "colorPalette.orange.subtlest" | "colorPalette.accent.orange.bold" | "colorPalette.orange.bold" | "colorPalette.accent.purple" | "colorPalette.purple" | "colorPalette.accent.purple.subtle" | "colorPalette.purple.subtle" | "colorPalette.accent.purple.subtlest" | "colorPalette.purple.subtlest" | "colorPalette.accent.purple.bold" | "colorPalette.purple.bold" | "colorPalette.accent.red" | "colorPalette.red" | "colorPalette.accent.red.subtle" | "colorPalette.red.subtle" | "colorPalette.accent.red.subtlest" | "colorPalette.red.subtlest" | "colorPalette.accent.red.bold" | "colorPalette.red.bold" | "colorPalette.accent.tan" | "colorPalette.tan" | "colorPalette.accent.tan.subtle" | "colorPalette.tan.subtle" | "colorPalette.accent.tan.subtlest" | "colorPalette.tan.subtlest" | "colorPalette.accent.tan.bold" | "colorPalette.tan.bold" | "colorPalette.accent.teal" | "colorPalette.teal" | "colorPalette.accent.teal.subtle" | "colorPalette.teal.subtle" | "colorPalette.accent.teal.subtlest" | "colorPalette.teal.subtlest" | "colorPalette.accent.teal.bold" | "colorPalette.teal.bold" | "colorPalette.accent.yellow" | "colorPalette.yellow" | "colorPalette.accent.yellow.subtle" | "colorPalette.yellow.subtle" | "colorPalette.accent.yellow.subtlest" | "colorPalette.yellow.subtlest" | "colorPalette.accent.yellow.bold" | "colorPalette.yellow.bold" | "colorPalette.focused" | "colorPalette.focused.inverse" | "colorPalette.decorative" | "colorPalette.decorative.hovered" | "colorPalette.decorative.inverse" | "colorPalette.decorative.inverse.hovered" | "colorPalette.inverse.hovered" | "colorPalette.warning.inverse" | "colorPalette.sunken" | "colorPalette.overlay" | "colorPalette.overlay.hovered" | "colorPalette.overlay.pressed" | "colorPalette.raised" | "colorPalette.raised.hovered" | "colorPalette.raised.pressed" | "colorPalette.placeholder" | "colorPalette.shadowColor"
|
|
485
|
+
declare type ColorToken = "transparent" | "current" | "inherit" | "neutral.0" | "neutral.10" | "neutral.20" | "neutral.30" | "neutral.40" | "neutral.50" | "neutral.60" | "neutral.70" | "neutral.80" | "neutral.90" | "neutral.100" | "neutral.110" | "neutralA.10" | "neutralA.20" | "neutralA.30" | "neutralA.40" | "neutralA.50" | "darkNeutral.0" | "darkNeutral.10" | "darkNeutral.20" | "darkNeutral.25" | "darkNeutral.30" | "darkNeutral.35" | "darkNeutral.40" | "darkNeutral.50" | "darkNeutral.60" | "darkNeutral.70" | "darkNeutral.80" | "darkNeutral.90" | "darkNeutral.100" | "darkNeutral.110" | "darkNeutral.120" | "darkNeutralA.10" | "darkNeutralA.20" | "darkNeutralA.25" | "darkNeutralA.30" | "darkNeutralA.35" | "darkNeutralA.40" | "darkNeutralA.50" | "darkNeutralA.-10" | "gray.10" | "gray.20" | "gray.30" | "gray.40" | "gray.50" | "gray.60" | "gray.70" | "gray.80" | "gray.90" | "gray.100" | "red.10" | "red.20" | "red.30" | "red.40" | "red.50" | "red.60" | "red.70" | "red.80" | "red.90" | "red.100" | "orange.10" | "orange.20" | "orange.30" | "orange.40" | "orange.50" | "orange.60" | "orange.70" | "orange.80" | "orange.90" | "orange.100" | "yellow.10" | "yellow.20" | "yellow.30" | "yellow.40" | "yellow.50" | "yellow.60" | "yellow.70" | "yellow.80" | "yellow.90" | "yellow.100" | "lime.10" | "lime.20" | "lime.30" | "lime.40" | "lime.50" | "lime.60" | "lime.70" | "lime.80" | "lime.90" | "lime.100" | "green.10" | "green.20" | "green.30" | "green.40" | "green.50" | "green.60" | "green.70" | "green.80" | "green.90" | "green.100" | "teal.10" | "teal.20" | "teal.30" | "teal.40" | "teal.50" | "teal.60" | "teal.70" | "teal.80" | "teal.90" | "teal.100" | "blue.10" | "blue.20" | "blue.30" | "blue.40" | "blue.50" | "blue.60" | "blue.70" | "blue.80" | "blue.90" | "blue.100" | "indigo.10" | "indigo.20" | "indigo.30" | "indigo.40" | "indigo.50" | "indigo.60" | "indigo.70" | "indigo.80" | "indigo.90" | "indigo.100" | "purple.10" | "purple.20" | "purple.30" | "purple.40" | "purple.50" | "purple.60" | "purple.70" | "purple.80" | "purple.90" | "purple.100" | "magenta.10" | "magenta.20" | "magenta.30" | "magenta.40" | "magenta.50" | "magenta.60" | "magenta.70" | "magenta.80" | "magenta.90" | "magenta.100" | "tan.10" | "tan.20" | "tan.30" | "tan.40" | "tan.50" | "tan.60" | "tan.70" | "tan.80" | "tan.90" | "tan.100" | "slate.0" | "slate.1" | "slate.2" | "slate.3" | "slate.4" | "slate.5" | "slate.10" | "slate.20" | "slate.30" | "slate.40" | "slate.50" | "slate.60" | "slate.70" | "slate.80" | "slate.90" | "slate.100" | "shadow.raised.1.light" | "shadow.raised.1.dark" | "shadow.raised.2.light" | "shadow.raised.2.dark" | "shadow.elevated.1.light" | "shadow.elevated.1.dark" | "shadow.elevated.2.light" | "shadow.elevated.2.dark" | "shadow.elevated.3.light" | "shadow.elevated.3.dark" | "shadow.overlay.1.light" | "shadow.overlay.1.dark" | "shadow.overlay.2.light" | "shadow.overlay.2.dark" | "shadow.overlay.3.light" | "shadow.overlay.3.dark" | "shadow.overflow.1.light" | "shadow.overflow.1.dark" | "shadow.overflow.2.light" | "shadow.overflow.2.dark" | "brand.10" | "brand.20" | "brand.30" | "brand.40" | "brand.50" | "brand.60" | "brand.70" | "brand.80" | "brand.90" | "brand.100" | "bg.disabled" | "bg.neutral" | "bg.neutral.hovered" | "bg.neutral.pressed" | "bg.neutral.bold" | "bg.neutral.bold.hovered" | "bg.neutral.bold.pressed" | "bg.neutral.boldest" | "bg.neutral.subtle" | "bg.neutral.subtle.hovered" | "bg.neutral.subtle.pressed" | "bg.neutral.inverse" | "bg.neutral.inverse.subtle" | "bg.neutral.inverse.subtle.hovered" | "bg.neutral.solid" | "bg.selected" | "bg.selected.hovered" | "bg.selected.pressed" | "bg.selected.bold" | "bg.selected.bold.hovered" | "bg.selected.bold.pressed" | "bg.brand.bold" | "bg.brand.bold.hovered" | "bg.brand.bold.pressed" | "bg.brand.boldest" | "bg.brand.boldest.hovered" | "bg.brand.boldest.pressed" | "bg.brand.subtle" | "bg.brand.subtle.hovered" | "bg.brand.subtle.pressed" | "bg.success" | "bg.success.hovered" | "bg.success.pressed" | "bg.success.bold" | "bg.success.bold.hovered" | "bg.success.bold.pressed" | "bg.warning" | "bg.warning.hovered" | "bg.warning.pressed" | "bg.warning.bold" | "bg.warning.bold.hovered" | "bg.warning.bold.pressed" | "bg.danger" | "bg.danger.hovered" | "bg.danger.pressed" | "bg.danger.bold" | "bg.danger.bold.hovered" | "bg.danger.bold.pressed" | "bg.info" | "bg.info.hovered" | "bg.info.pressed" | "bg.info.bold" | "bg.info.bold.hovered" | "bg.info.bold.pressed" | "bg.input" | "bg.input.hovered" | "bg.input.pressed" | "bg.accent.neutral" | "bg.accent.neutral.subtle" | "bg.accent.neutral.subtlest" | "bg.accent.neutral.bold" | "bg.accent.blue" | "bg.accent.blue.subtle" | "bg.accent.blue.subtlest" | "bg.accent.blue.bold" | "bg.accent.green" | "bg.accent.green.subtle" | "bg.accent.green.subtlest" | "bg.accent.green.bold" | "bg.accent.indigo" | "bg.accent.indigo.subtle" | "bg.accent.indigo.subtlest" | "bg.accent.indigo.bold" | "bg.accent.lime" | "bg.accent.lime.subtle" | "bg.accent.lime.subtlest" | "bg.accent.lime.bold" | "bg.accent.magenta" | "bg.accent.magenta.subtle" | "bg.accent.magenta.subtlest" | "bg.accent.magenta.bold" | "bg.accent.orange" | "bg.accent.orange.subtle" | "bg.accent.orange.subtlest" | "bg.accent.orange.bold" | "bg.accent.purple" | "bg.accent.purple.subtle" | "bg.accent.purple.subtlest" | "bg.accent.purple.bold" | "bg.accent.red" | "bg.accent.red.subtle" | "bg.accent.red.subtlest" | "bg.accent.red.bold" | "bg.accent.tan" | "bg.accent.tan.subtle" | "bg.accent.tan.subtlest" | "bg.accent.tan.bold" | "bg.accent.teal" | "bg.accent.teal.subtle" | "bg.accent.teal.subtlest" | "bg.accent.teal.bold" | "bg.accent.yellow" | "bg.accent.yellow.subtle" | "bg.accent.yellow.subtlest" | "bg.accent.yellow.bold" | "blanket" | "blanket.danger" | "blanket.selected" | "border" | "border.bold" | "border.inverse" | "border.inverse.focused" | "border.disabled" | "border.focused" | "border.focused.inverse" | "border.selected" | "border.input" | "border.success" | "border.warning" | "border.danger" | "border.info" | "icon" | "icon.subtle" | "icon.subtlest" | "icon.inverse" | "icon.selected" | "icon.disabled" | "icon.decorative" | "icon.decorative.hovered" | "icon.decorative.inverse" | "icon.decorative.inverse.hovered" | "icon.decorative.subtle" | "icon.success" | "icon.warning" | "icon.warning.inverse" | "icon.danger" | "icon.danger.inverse" | "icon.info" | "link" | "link.pressed" | "surface" | "surface.hovered" | "surface.pressed" | "surface.sunken" | "surface.raised" | "surface.raised.hovered" | "surface.raised.pressed" | "surface.overlay" | "surface.overlay.hovered" | "surface.overlay.pressed" | "surface.selected" | "surface.selected.hovered" | "surface.selected.pressed" | "text" | "text.subtle" | "text.subtlest" | "text.bold" | "text.inverse" | "text.inverse.subtlest" | "text.selected" | "text.placeholder" | "text.disabled" | "text.success" | "text.success.inverse" | "text.warning" | "text.warning.inverse" | "text.danger" | "text.danger.inverse" | "text.info" | "text.info.inverse" | "text.accent.neutral" | "text.accent.neutral.bold" | "text.accent.red" | "text.accent.red.bold" | "text.accent.orange" | "text.accent.orange.bold" | "text.accent.yellow" | "text.accent.yellow.bold" | "text.accent.lime" | "text.accent.lime.bold" | "text.accent.green" | "text.accent.green.bold" | "text.accent.teal" | "text.accent.teal.bold" | "text.accent.blue" | "text.accent.blue.bold" | "text.accent.indigo" | "text.accent.indigo.bold" | "text.accent.purple" | "text.accent.purple.bold" | "text.accent.magenta" | "text.accent.magenta.bold" | "text.accent.tan" | "text.accent.tan.bold" | "colorPalette" | "colorPalette.0" | "colorPalette.10" | "colorPalette.20" | "colorPalette.30" | "colorPalette.40" | "colorPalette.50" | "colorPalette.60" | "colorPalette.70" | "colorPalette.80" | "colorPalette.90" | "colorPalette.100" | "colorPalette.110" | "colorPalette.25" | "colorPalette.35" | "colorPalette.120" | "colorPalette.-10" | "colorPalette.1" | "colorPalette.2" | "colorPalette.3" | "colorPalette.4" | "colorPalette.5" | "colorPalette.raised.1.light" | "colorPalette.1.light" | "colorPalette.light" | "colorPalette.raised.1.dark" | "colorPalette.1.dark" | "colorPalette.dark" | "colorPalette.raised.2.light" | "colorPalette.2.light" | "colorPalette.raised.2.dark" | "colorPalette.2.dark" | "colorPalette.elevated.1.light" | "colorPalette.elevated.1.dark" | "colorPalette.elevated.2.light" | "colorPalette.elevated.2.dark" | "colorPalette.elevated.3.light" | "colorPalette.3.light" | "colorPalette.elevated.3.dark" | "colorPalette.3.dark" | "colorPalette.overlay.1.light" | "colorPalette.overlay.1.dark" | "colorPalette.overlay.2.light" | "colorPalette.overlay.2.dark" | "colorPalette.overlay.3.light" | "colorPalette.overlay.3.dark" | "colorPalette.overflow.1.light" | "colorPalette.overflow.1.dark" | "colorPalette.overflow.2.light" | "colorPalette.overflow.2.dark" | "colorPalette.disabled" | "colorPalette.neutral" | "colorPalette.neutral.hovered" | "colorPalette.hovered" | "colorPalette.neutral.pressed" | "colorPalette.pressed" | "colorPalette.neutral.bold" | "colorPalette.bold" | "colorPalette.neutral.bold.hovered" | "colorPalette.bold.hovered" | "colorPalette.neutral.bold.pressed" | "colorPalette.bold.pressed" | "colorPalette.neutral.boldest" | "colorPalette.boldest" | "colorPalette.neutral.subtle" | "colorPalette.subtle" | "colorPalette.neutral.subtle.hovered" | "colorPalette.subtle.hovered" | "colorPalette.neutral.subtle.pressed" | "colorPalette.subtle.pressed" | "colorPalette.neutral.inverse" | "colorPalette.inverse" | "colorPalette.neutral.inverse.subtle" | "colorPalette.inverse.subtle" | "colorPalette.neutral.inverse.subtle.hovered" | "colorPalette.inverse.subtle.hovered" | "colorPalette.neutral.solid" | "colorPalette.solid" | "colorPalette.selected" | "colorPalette.selected.hovered" | "colorPalette.selected.pressed" | "colorPalette.selected.bold" | "colorPalette.selected.bold.hovered" | "colorPalette.selected.bold.pressed" | "colorPalette.brand.bold" | "colorPalette.brand.bold.hovered" | "colorPalette.brand.bold.pressed" | "colorPalette.brand.boldest" | "colorPalette.brand.boldest.hovered" | "colorPalette.boldest.hovered" | "colorPalette.brand.boldest.pressed" | "colorPalette.boldest.pressed" | "colorPalette.brand.subtle" | "colorPalette.brand.subtle.hovered" | "colorPalette.brand.subtle.pressed" | "colorPalette.success" | "colorPalette.success.hovered" | "colorPalette.success.pressed" | "colorPalette.success.bold" | "colorPalette.success.bold.hovered" | "colorPalette.success.bold.pressed" | "colorPalette.warning" | "colorPalette.warning.hovered" | "colorPalette.warning.pressed" | "colorPalette.warning.bold" | "colorPalette.warning.bold.hovered" | "colorPalette.warning.bold.pressed" | "colorPalette.danger" | "colorPalette.danger.hovered" | "colorPalette.danger.pressed" | "colorPalette.danger.bold" | "colorPalette.danger.bold.hovered" | "colorPalette.danger.bold.pressed" | "colorPalette.info" | "colorPalette.info.hovered" | "colorPalette.info.pressed" | "colorPalette.info.bold" | "colorPalette.info.bold.hovered" | "colorPalette.info.bold.pressed" | "colorPalette.input" | "colorPalette.input.hovered" | "colorPalette.input.pressed" | "colorPalette.accent.neutral" | "colorPalette.accent.neutral.subtle" | "colorPalette.accent.neutral.subtlest" | "colorPalette.neutral.subtlest" | "colorPalette.subtlest" | "colorPalette.accent.neutral.bold" | "colorPalette.accent.blue" | "colorPalette.blue" | "colorPalette.accent.blue.subtle" | "colorPalette.blue.subtle" | "colorPalette.accent.blue.subtlest" | "colorPalette.blue.subtlest" | "colorPalette.accent.blue.bold" | "colorPalette.blue.bold" | "colorPalette.accent.green" | "colorPalette.green" | "colorPalette.accent.green.subtle" | "colorPalette.green.subtle" | "colorPalette.accent.green.subtlest" | "colorPalette.green.subtlest" | "colorPalette.accent.green.bold" | "colorPalette.green.bold" | "colorPalette.accent.indigo" | "colorPalette.indigo" | "colorPalette.accent.indigo.subtle" | "colorPalette.indigo.subtle" | "colorPalette.accent.indigo.subtlest" | "colorPalette.indigo.subtlest" | "colorPalette.accent.indigo.bold" | "colorPalette.indigo.bold" | "colorPalette.accent.lime" | "colorPalette.lime" | "colorPalette.accent.lime.subtle" | "colorPalette.lime.subtle" | "colorPalette.accent.lime.subtlest" | "colorPalette.lime.subtlest" | "colorPalette.accent.lime.bold" | "colorPalette.lime.bold" | "colorPalette.accent.magenta" | "colorPalette.magenta" | "colorPalette.accent.magenta.subtle" | "colorPalette.magenta.subtle" | "colorPalette.accent.magenta.subtlest" | "colorPalette.magenta.subtlest" | "colorPalette.accent.magenta.bold" | "colorPalette.magenta.bold" | "colorPalette.accent.orange" | "colorPalette.orange" | "colorPalette.accent.orange.subtle" | "colorPalette.orange.subtle" | "colorPalette.accent.orange.subtlest" | "colorPalette.orange.subtlest" | "colorPalette.accent.orange.bold" | "colorPalette.orange.bold" | "colorPalette.accent.purple" | "colorPalette.purple" | "colorPalette.accent.purple.subtle" | "colorPalette.purple.subtle" | "colorPalette.accent.purple.subtlest" | "colorPalette.purple.subtlest" | "colorPalette.accent.purple.bold" | "colorPalette.purple.bold" | "colorPalette.accent.red" | "colorPalette.red" | "colorPalette.accent.red.subtle" | "colorPalette.red.subtle" | "colorPalette.accent.red.subtlest" | "colorPalette.red.subtlest" | "colorPalette.accent.red.bold" | "colorPalette.red.bold" | "colorPalette.accent.tan" | "colorPalette.tan" | "colorPalette.accent.tan.subtle" | "colorPalette.tan.subtle" | "colorPalette.accent.tan.subtlest" | "colorPalette.tan.subtlest" | "colorPalette.accent.tan.bold" | "colorPalette.tan.bold" | "colorPalette.accent.teal" | "colorPalette.teal" | "colorPalette.accent.teal.subtle" | "colorPalette.teal.subtle" | "colorPalette.accent.teal.subtlest" | "colorPalette.teal.subtlest" | "colorPalette.accent.teal.bold" | "colorPalette.teal.bold" | "colorPalette.accent.yellow" | "colorPalette.yellow" | "colorPalette.accent.yellow.subtle" | "colorPalette.yellow.subtle" | "colorPalette.accent.yellow.subtlest" | "colorPalette.yellow.subtlest" | "colorPalette.accent.yellow.bold" | "colorPalette.yellow.bold" | "colorPalette.inverse.focused" | "colorPalette.focused" | "colorPalette.focused.inverse" | "colorPalette.decorative" | "colorPalette.decorative.hovered" | "colorPalette.decorative.inverse" | "colorPalette.decorative.inverse.hovered" | "colorPalette.inverse.hovered" | "colorPalette.decorative.subtle" | "colorPalette.warning.inverse" | "colorPalette.danger.inverse" | "colorPalette.sunken" | "colorPalette.raised" | "colorPalette.raised.hovered" | "colorPalette.raised.pressed" | "colorPalette.overlay" | "colorPalette.overlay.hovered" | "colorPalette.overlay.pressed" | "colorPalette.inverse.subtlest" | "colorPalette.placeholder" | "colorPalette.success.inverse" | "colorPalette.info.inverse"
|
|
486
486
|
|
|
487
487
|
declare type ComponentProps<T extends ElementType> = T extends ComponentType<infer P> | Component<infer P>
|
|
488
488
|
? JSX_2.LibraryManagedAttributes<T, P>
|
|
@@ -1250,6 +1250,68 @@ declare namespace DataType {
|
|
|
1250
1250
|
type VisualBox = "border-box" | "content-box" | "padding-box";
|
|
1251
1251
|
}
|
|
1252
1252
|
|
|
1253
|
+
export declare const DatePicker: (props: DatePickerProps) => JSX.Element;
|
|
1254
|
+
|
|
1255
|
+
export declare type DatePickerProps = Omit<BoxProps, keyof DatePickerVariantProps | 'children'> & DatePickerVariantProps & {
|
|
1256
|
+
/** Controlled value */
|
|
1257
|
+
value?: DateValue | null;
|
|
1258
|
+
/** Called when the date changes */
|
|
1259
|
+
onChange?: (value: DateValue | null) => void;
|
|
1260
|
+
/** Earliest selectable date */
|
|
1261
|
+
minDate?: DateValue;
|
|
1262
|
+
/** Latest selectable date */
|
|
1263
|
+
maxDate?: DateValue;
|
|
1264
|
+
/** Accessible label for the input group */
|
|
1265
|
+
label?: string;
|
|
1266
|
+
disabled?: boolean;
|
|
1267
|
+
error?: boolean;
|
|
1268
|
+
id?: string;
|
|
1269
|
+
name?: string;
|
|
1270
|
+
/** Controlled popover open state */
|
|
1271
|
+
open?: boolean;
|
|
1272
|
+
onOpenChange?: (open: boolean) => void;
|
|
1273
|
+
};
|
|
1274
|
+
|
|
1275
|
+
declare interface DatePickerVariant {
|
|
1276
|
+
/**
|
|
1277
|
+
* @default "md"
|
|
1278
|
+
*/
|
|
1279
|
+
size: "sm" | "md" | "lg"
|
|
1280
|
+
}
|
|
1281
|
+
|
|
1282
|
+
declare type DatePickerVariantProps = {
|
|
1283
|
+
[key in keyof DatePickerVariant]?: ConditionalValue<DatePickerVariant[key]> | undefined
|
|
1284
|
+
}
|
|
1285
|
+
|
|
1286
|
+
export declare const DateRangePicker: (props: DateRangePickerProps) => JSX.Element;
|
|
1287
|
+
|
|
1288
|
+
export declare type DateRangePickerProps = {
|
|
1289
|
+
/** Start date value */
|
|
1290
|
+
startValue?: DateValue | null;
|
|
1291
|
+
/** End date value */
|
|
1292
|
+
endValue?: DateValue | null;
|
|
1293
|
+
/** Called when start date changes */
|
|
1294
|
+
onStartChange?: (value: DateValue | null) => void;
|
|
1295
|
+
/** Called when end date changes */
|
|
1296
|
+
onEndChange?: (value: DateValue | null) => void;
|
|
1297
|
+
/** Earliest selectable date (applies to both pickers) */
|
|
1298
|
+
minDate?: DateValue;
|
|
1299
|
+
/** Latest selectable date (applies to both pickers) */
|
|
1300
|
+
maxDate?: DateValue;
|
|
1301
|
+
disabled?: boolean;
|
|
1302
|
+
error?: boolean;
|
|
1303
|
+
/** Size passed to both DatePickers */
|
|
1304
|
+
size?: DatePickerProps['size'];
|
|
1305
|
+
/** Accessible label prefix — used to build "Start date" and "End date" labels */
|
|
1306
|
+
label?: string;
|
|
1307
|
+
};
|
|
1308
|
+
|
|
1309
|
+
export declare interface DateValue {
|
|
1310
|
+
year: number;
|
|
1311
|
+
month: number;
|
|
1312
|
+
day: number;
|
|
1313
|
+
}
|
|
1314
|
+
|
|
1253
1315
|
declare type DistributiveOmit<T, K extends keyof any> = T extends unknown ? Omit<T, K> : never
|
|
1254
1316
|
|
|
1255
1317
|
export declare const Divider: (props: DividerProps) => JSX.Element;
|
|
@@ -1284,7 +1346,7 @@ export declare type DropdownProps = MenuVariantProps & {
|
|
|
1284
1346
|
/** Offset distance from trigger (in pixels) */
|
|
1285
1347
|
offset?: number;
|
|
1286
1348
|
/** Children (MenuItem, MenuGroup, MenuDivider, etc.) */
|
|
1287
|
-
children:
|
|
1349
|
+
children: ReactNode;
|
|
1288
1350
|
/** Optional ID for ARIA attributes */
|
|
1289
1351
|
id?: string;
|
|
1290
1352
|
/** Disable the dropdown */
|
|
@@ -1299,7 +1361,7 @@ declare type EasingToken = "default" | "linear" | "in" | "out" | "in-out"
|
|
|
1299
1361
|
|
|
1300
1362
|
declare type Fallback<T> = { [P in keyof T]: T[P] | readonly NonNullable<T[P]>[] };
|
|
1301
1363
|
|
|
1302
|
-
declare type FontSizeToken = "12" | "14" | "16" | "20" | "24" | "32" | "40" | "48" | "64" | "72" | "80" | "96"
|
|
1364
|
+
declare type FontSizeToken = "10" | "12" | "14" | "16" | "20" | "24" | "32" | "40" | "48" | "64" | "72" | "80" | "96"
|
|
1303
1365
|
|
|
1304
1366
|
declare type FontToken = "heading" | "sans" | "body" | "serif" | "mono"
|
|
1305
1367
|
|
|
@@ -1308,17 +1370,17 @@ declare type FontWeightToken = "light" | "normal" | "medium" | "bold" | "black"
|
|
|
1308
1370
|
export declare const FormField: (props: FormFieldProps) => JSX.Element;
|
|
1309
1371
|
|
|
1310
1372
|
export declare type FormFieldProps = Omit<BoxProps, keyof FormFieldVariantProps> & FormFieldVariantProps & {
|
|
1311
|
-
label
|
|
1373
|
+
label: string;
|
|
1374
|
+
labelFor: string;
|
|
1375
|
+
children: ReactNode;
|
|
1312
1376
|
helpText?: string;
|
|
1313
1377
|
required?: boolean;
|
|
1314
1378
|
error?: boolean;
|
|
1315
1379
|
errorText?: string;
|
|
1316
1380
|
disabled?: boolean;
|
|
1317
|
-
tooltip?: boolean;
|
|
1318
|
-
tooltipCaret?: boolean;
|
|
1319
1381
|
tooltipTitle?: string;
|
|
1320
|
-
|
|
1321
|
-
|
|
1382
|
+
tooltipText?: string;
|
|
1383
|
+
size?: 'sm' | 'md' | 'lg' | 'xl';
|
|
1322
1384
|
};
|
|
1323
1385
|
|
|
1324
1386
|
declare interface FormFieldVariant {
|
|
@@ -1326,6 +1388,10 @@ declare interface FormFieldVariant {
|
|
|
1326
1388
|
* @default "default"
|
|
1327
1389
|
*/
|
|
1328
1390
|
layout: "default" | "inline"
|
|
1391
|
+
/**
|
|
1392
|
+
* @default "md"
|
|
1393
|
+
*/
|
|
1394
|
+
size: "sm" | "md" | "lg" | "xl"
|
|
1329
1395
|
}
|
|
1330
1396
|
|
|
1331
1397
|
declare type FormFieldVariantProps = {
|
|
@@ -1339,7 +1405,7 @@ export declare type GlobalStyleObject = Record<string, unknown>;
|
|
|
1339
1405
|
export declare const Heading: (props: HeadingProps) => JSX.Element;
|
|
1340
1406
|
|
|
1341
1407
|
export declare type HeadingProps = Omit<TextProps, keyof HeadingVariantProps> & HeadingVariantProps & {
|
|
1342
|
-
children?: string |
|
|
1408
|
+
children?: string | ReactNode;
|
|
1343
1409
|
level?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
|
|
1344
1410
|
};
|
|
1345
1411
|
|
|
@@ -1348,13 +1414,31 @@ declare interface HeadingVariant {
|
|
|
1348
1414
|
* @default "h2"
|
|
1349
1415
|
*/
|
|
1350
1416
|
level: "h1" | "h2" | "h3" | "h4"
|
|
1351
|
-
|
|
1417
|
+
allCaps: boolean
|
|
1352
1418
|
}
|
|
1353
1419
|
|
|
1354
1420
|
declare type HeadingVariantProps = {
|
|
1355
1421
|
[key in keyof HeadingVariant]?: ConditionalValue<HeadingVariant[key]> | undefined
|
|
1356
1422
|
}
|
|
1357
1423
|
|
|
1424
|
+
export declare const HighlightText: (props: HighlightTextProps) => JSX.Element;
|
|
1425
|
+
|
|
1426
|
+
export declare type HighlightTextProps = Omit<BoxProps, keyof HighlightTextVariantProps> & HighlightTextVariantProps & {
|
|
1427
|
+
value: string;
|
|
1428
|
+
query: string;
|
|
1429
|
+
enabled?: boolean;
|
|
1430
|
+
};
|
|
1431
|
+
|
|
1432
|
+
declare interface HighlightTextVariant {
|
|
1433
|
+
|
|
1434
|
+
}
|
|
1435
|
+
|
|
1436
|
+
declare type HighlightTextVariantProps = {
|
|
1437
|
+
[key in keyof HighlightTextVariant]?: ConditionalValue<HighlightTextVariant[key]> | undefined
|
|
1438
|
+
}
|
|
1439
|
+
|
|
1440
|
+
export declare type HourCycle = '12' | '24';
|
|
1441
|
+
|
|
1358
1442
|
declare type HTMLStyledProps<T extends ElementType> = JsxHTMLProps<ComponentProps<T> & UnstyledProps & AsProps, JsxStyleProps>
|
|
1359
1443
|
|
|
1360
1444
|
export declare const Icon: (props: IconProps) => JSX.Element;
|
|
@@ -1362,10 +1446,11 @@ export declare const Icon: (props: IconProps) => JSX.Element;
|
|
|
1362
1446
|
export declare const IconButton: (props: IconButtonProps) => JSX.Element;
|
|
1363
1447
|
|
|
1364
1448
|
export declare type IconButtonProps = Omit<BoxProps, keyof IconButtonVariantProps> & IconButtonVariantProps & {
|
|
1449
|
+
iconName: IconNamesList;
|
|
1450
|
+
altText: string;
|
|
1365
1451
|
href?: string;
|
|
1366
1452
|
loading?: boolean;
|
|
1367
1453
|
disabled?: boolean;
|
|
1368
|
-
iconName?: IconNamesList;
|
|
1369
1454
|
type?: 'submit' | 'reset' | 'button';
|
|
1370
1455
|
};
|
|
1371
1456
|
|
|
@@ -1373,11 +1458,11 @@ declare interface IconButtonVariant {
|
|
|
1373
1458
|
/**
|
|
1374
1459
|
* @default "default"
|
|
1375
1460
|
*/
|
|
1376
|
-
variant: "default" | "primary" | "
|
|
1461
|
+
variant: "default" | "primary" | "hollow" | "ghost" | "danger" | "selected" | "selectedBold"
|
|
1377
1462
|
/**
|
|
1378
1463
|
* @default "md"
|
|
1379
1464
|
*/
|
|
1380
|
-
size: "
|
|
1465
|
+
size: "sm" | "md" | "lg" | "xl"
|
|
1381
1466
|
}
|
|
1382
1467
|
|
|
1383
1468
|
declare type IconButtonVariantProps = {
|
|
@@ -1429,6 +1514,7 @@ export declare const IconNames: {
|
|
|
1429
1514
|
readonly broadcast: "broadcast";
|
|
1430
1515
|
readonly building: "building";
|
|
1431
1516
|
readonly 'calendar-add': "calendar-add";
|
|
1517
|
+
readonly 'calendar-lock': "calendar-lock";
|
|
1432
1518
|
readonly 'calendar-view-day': "calendar-view-day";
|
|
1433
1519
|
readonly 'calendar-view-month': "calendar-view-month";
|
|
1434
1520
|
readonly 'calendar-view-week': "calendar-view-week";
|
|
@@ -1466,8 +1552,10 @@ export declare const IconNames: {
|
|
|
1466
1552
|
readonly code: "code";
|
|
1467
1553
|
readonly color: "color";
|
|
1468
1554
|
readonly compass: "compass";
|
|
1555
|
+
readonly computer: "computer";
|
|
1469
1556
|
readonly cone: "cone";
|
|
1470
1557
|
readonly confetti: "confetti";
|
|
1558
|
+
readonly cookie: "cookie";
|
|
1471
1559
|
readonly copy: "copy";
|
|
1472
1560
|
readonly 'credit-card': "credit-card";
|
|
1473
1561
|
readonly 'cube-focus': "cube-focus";
|
|
@@ -1505,6 +1593,12 @@ export declare const IconNames: {
|
|
|
1505
1593
|
readonly 'fit-screen': "fit-screen";
|
|
1506
1594
|
readonly 'flag-checkered': "flag-checkered";
|
|
1507
1595
|
readonly flag: "flag";
|
|
1596
|
+
readonly 'folder-check': "folder-check";
|
|
1597
|
+
readonly 'folder-copy': "folder-copy";
|
|
1598
|
+
readonly 'folder-dashed': "folder-dashed";
|
|
1599
|
+
readonly 'folder-open': "folder-open";
|
|
1600
|
+
readonly 'folder-topic': "folder-topic";
|
|
1601
|
+
readonly folder: "folder";
|
|
1508
1602
|
readonly forklift: "forklift";
|
|
1509
1603
|
readonly 'fullscreen-exit': "fullscreen-exit";
|
|
1510
1604
|
readonly fullscreen: "fullscreen";
|
|
@@ -1561,6 +1655,7 @@ export declare const IconNames: {
|
|
|
1561
1655
|
readonly messages: "messages";
|
|
1562
1656
|
readonly 'minus-thick': "minus-thick";
|
|
1563
1657
|
readonly minus: "minus";
|
|
1658
|
+
readonly mobile: "mobile";
|
|
1564
1659
|
readonly money: "money";
|
|
1565
1660
|
readonly monitor: "monitor";
|
|
1566
1661
|
readonly moon: "moon";
|
|
@@ -1573,6 +1668,7 @@ export declare const IconNames: {
|
|
|
1573
1668
|
readonly note: "note";
|
|
1574
1669
|
readonly notepad: "notepad";
|
|
1575
1670
|
readonly notification: "notification";
|
|
1671
|
+
readonly numpad: "numpad";
|
|
1576
1672
|
readonly nut: "nut";
|
|
1577
1673
|
readonly order: "order";
|
|
1578
1674
|
readonly package: "package";
|
|
@@ -1584,11 +1680,13 @@ export declare const IconNames: {
|
|
|
1584
1680
|
readonly pause: "pause";
|
|
1585
1681
|
readonly pencil: "pencil";
|
|
1586
1682
|
readonly percent: "percent";
|
|
1683
|
+
readonly phone: "phone";
|
|
1587
1684
|
readonly 'play-pause': "play-pause";
|
|
1588
1685
|
readonly play: "play";
|
|
1589
1686
|
readonly plus: "plus";
|
|
1590
1687
|
readonly printer: "printer";
|
|
1591
1688
|
readonly prohibit: "prohibit";
|
|
1689
|
+
readonly 'qr-code': "qr-code";
|
|
1592
1690
|
readonly 'question-mark': "question-mark";
|
|
1593
1691
|
readonly quote: "quote";
|
|
1594
1692
|
readonly 'radio-checked': "radio-checked";
|
|
@@ -1631,6 +1729,7 @@ export declare const IconNames: {
|
|
|
1631
1729
|
readonly 'sort-descending': "sort-descending";
|
|
1632
1730
|
readonly 'sort-time-down': "sort-time-down";
|
|
1633
1731
|
readonly 'sort-time-up': "sort-time-up";
|
|
1732
|
+
readonly sparkle: "sparkle";
|
|
1634
1733
|
readonly 'square-add': "square-add";
|
|
1635
1734
|
readonly 'square-inside': "square-inside";
|
|
1636
1735
|
readonly 'square-select': "square-select";
|
|
@@ -1658,6 +1757,7 @@ export declare const IconNames: {
|
|
|
1658
1757
|
readonly toolbox: "toolbox";
|
|
1659
1758
|
readonly tools: "tools";
|
|
1660
1759
|
readonly trash: "trash";
|
|
1760
|
+
readonly trolley: "trolley";
|
|
1661
1761
|
readonly trophy: "trophy";
|
|
1662
1762
|
readonly 'truck-trailer': "truck-trailer";
|
|
1663
1763
|
readonly update: "update";
|
|
@@ -1689,14 +1789,346 @@ export declare const IconNames: {
|
|
|
1689
1789
|
readonly 'zoom-out': "zoom-out";
|
|
1690
1790
|
};
|
|
1691
1791
|
|
|
1692
|
-
declare type IconNamesList =
|
|
1693
|
-
|
|
1694
|
-
|
|
1792
|
+
declare type IconNamesList =
|
|
1793
|
+
| 'aa-placeholder'
|
|
1794
|
+
| 'alarm'
|
|
1795
|
+
| 'alt-route'
|
|
1796
|
+
| 'apps'
|
|
1797
|
+
| 'arrow-bubble'
|
|
1798
|
+
| 'arrow-down'
|
|
1799
|
+
| 'arrow-drop-down'
|
|
1800
|
+
| 'arrow-drop-up'
|
|
1801
|
+
| 'arrow-left'
|
|
1802
|
+
| 'arrow-line-down'
|
|
1803
|
+
| 'arrow-line-left'
|
|
1804
|
+
| 'arrow-line-right'
|
|
1805
|
+
| 'arrow-line-up'
|
|
1806
|
+
| 'arrow-prompt'
|
|
1807
|
+
| 'arrow-redo'
|
|
1808
|
+
| 'arrow-right'
|
|
1809
|
+
| 'arrow-square-in'
|
|
1810
|
+
| 'arrow-square-out'
|
|
1811
|
+
| 'arrow-undo'
|
|
1812
|
+
| 'arrow-up'
|
|
1813
|
+
| 'arrows-down-up'
|
|
1814
|
+
| 'arrows-left-right'
|
|
1815
|
+
| 'asterisk'
|
|
1816
|
+
| 'at'
|
|
1817
|
+
| 'attachment'
|
|
1818
|
+
| 'bank'
|
|
1819
|
+
| 'barcode-reader'
|
|
1820
|
+
| 'barcode'
|
|
1821
|
+
| 'barricade'
|
|
1822
|
+
| 'basket'
|
|
1823
|
+
| 'bell-active'
|
|
1824
|
+
| 'bell-slash'
|
|
1825
|
+
| 'bell'
|
|
1826
|
+
| 'bin'
|
|
1827
|
+
| 'blog-post'
|
|
1828
|
+
| 'blueprint'
|
|
1829
|
+
| 'book-a'
|
|
1830
|
+
| 'book'
|
|
1831
|
+
| 'bookmark-outlined'
|
|
1832
|
+
| 'bookmark'
|
|
1833
|
+
| 'bookmarks'
|
|
1834
|
+
| 'broadcast'
|
|
1835
|
+
| 'building'
|
|
1836
|
+
| 'calendar-add'
|
|
1837
|
+
| 'calendar-lock'
|
|
1838
|
+
| 'calendar-view-day'
|
|
1839
|
+
| 'calendar-view-month'
|
|
1840
|
+
| 'calendar-view-week'
|
|
1841
|
+
| 'calendar'
|
|
1842
|
+
| 'caret-down'
|
|
1843
|
+
| 'caret-left'
|
|
1844
|
+
| 'caret-right'
|
|
1845
|
+
| 'caret-up'
|
|
1846
|
+
| 'cart'
|
|
1847
|
+
| 'certificate'
|
|
1848
|
+
| 'check-all'
|
|
1849
|
+
| 'check-thick'
|
|
1850
|
+
| 'check'
|
|
1851
|
+
| 'checkbox-checked'
|
|
1852
|
+
| 'checkbox-focus'
|
|
1853
|
+
| 'checkbox-indeterminate'
|
|
1854
|
+
| 'checkbox'
|
|
1855
|
+
| 'chevron-down'
|
|
1856
|
+
| 'chevron-filled-down'
|
|
1857
|
+
| 'chevron-filled-left'
|
|
1858
|
+
| 'chevron-filled-right'
|
|
1859
|
+
| 'chevron-filled-up'
|
|
1860
|
+
| 'chevron-left'
|
|
1861
|
+
| 'chevron-right'
|
|
1862
|
+
| 'chevron-up'
|
|
1863
|
+
| 'circle-change'
|
|
1864
|
+
| 'circle-check'
|
|
1865
|
+
| 'circle'
|
|
1866
|
+
| 'circles-add'
|
|
1867
|
+
| 'circuit'
|
|
1868
|
+
| 'clipboard'
|
|
1869
|
+
| 'clock-countdown'
|
|
1870
|
+
| 'clock'
|
|
1871
|
+
| 'cloud-synced'
|
|
1872
|
+
| 'code'
|
|
1873
|
+
| 'color'
|
|
1874
|
+
| 'compass'
|
|
1875
|
+
| 'computer'
|
|
1876
|
+
| 'cone'
|
|
1877
|
+
| 'confetti'
|
|
1878
|
+
| 'cookie'
|
|
1879
|
+
| 'copy'
|
|
1880
|
+
| 'credit-card'
|
|
1881
|
+
| 'cube-focus'
|
|
1882
|
+
| 'cursor-click'
|
|
1883
|
+
| 'cursor'
|
|
1884
|
+
| 'cut'
|
|
1885
|
+
| 'data-object'
|
|
1886
|
+
| 'database'
|
|
1887
|
+
| 'devices'
|
|
1888
|
+
| 'dictionary'
|
|
1889
|
+
| 'dna'
|
|
1890
|
+
| 'donut'
|
|
1891
|
+
| 'dot'
|
|
1892
|
+
| 'dots'
|
|
1893
|
+
| 'download-cloud'
|
|
1894
|
+
| 'download'
|
|
1895
|
+
| 'edit'
|
|
1896
|
+
| 'encrypted'
|
|
1897
|
+
| 'envelope'
|
|
1898
|
+
| 'equal'
|
|
1899
|
+
| 'eraser'
|
|
1900
|
+
| 'error'
|
|
1901
|
+
| 'event-list'
|
|
1902
|
+
| 'export'
|
|
1903
|
+
| 'extension'
|
|
1904
|
+
| 'eye-slash'
|
|
1905
|
+
| 'eye'
|
|
1906
|
+
| 'faq'
|
|
1907
|
+
| 'file-add'
|
|
1908
|
+
| 'file'
|
|
1909
|
+
| 'files'
|
|
1910
|
+
| 'filter-remove'
|
|
1911
|
+
| 'filter'
|
|
1912
|
+
| 'finish'
|
|
1913
|
+
| 'fit-screen'
|
|
1914
|
+
| 'flag-checkered'
|
|
1915
|
+
| 'flag'
|
|
1916
|
+
| 'folder-check'
|
|
1917
|
+
| 'folder-copy'
|
|
1918
|
+
| 'folder-dashed'
|
|
1919
|
+
| 'folder-open'
|
|
1920
|
+
| 'folder-topic'
|
|
1921
|
+
| 'folder'
|
|
1922
|
+
| 'forklift'
|
|
1923
|
+
| 'fullscreen-exit'
|
|
1924
|
+
| 'fullscreen'
|
|
1925
|
+
| 'garage'
|
|
1926
|
+
| 'gauge'
|
|
1927
|
+
| 'globe-grid'
|
|
1928
|
+
| 'globe'
|
|
1929
|
+
| 'gripper'
|
|
1930
|
+
| 'handle-vertical'
|
|
1931
|
+
| 'handle'
|
|
1932
|
+
| 'hash'
|
|
1933
|
+
| 'heart-outlined'
|
|
1934
|
+
| 'heart'
|
|
1935
|
+
| 'help'
|
|
1936
|
+
| 'history'
|
|
1937
|
+
| 'home'
|
|
1938
|
+
| 'image'
|
|
1939
|
+
| 'images'
|
|
1940
|
+
| 'inbox'
|
|
1941
|
+
| 'infinity'
|
|
1942
|
+
| 'info'
|
|
1943
|
+
| 'inventory'
|
|
1944
|
+
| 'invoice'
|
|
1945
|
+
| 'jump-back'
|
|
1946
|
+
| 'jump-forward'
|
|
1947
|
+
| 'kanban'
|
|
1948
|
+
| 'kbd-backspace'
|
|
1949
|
+
| 'kbd-capslock'
|
|
1950
|
+
| 'kbd-command'
|
|
1951
|
+
| 'kbd-control'
|
|
1952
|
+
| 'kbd-hide'
|
|
1953
|
+
| 'kbd-option'
|
|
1954
|
+
| 'kbd-return'
|
|
1955
|
+
| 'kbd-shift'
|
|
1956
|
+
| 'kbd-space'
|
|
1957
|
+
| 'kbd'
|
|
1958
|
+
| 'lightning'
|
|
1959
|
+
| 'line-segment'
|
|
1960
|
+
| 'line-segments'
|
|
1961
|
+
| 'link-slash'
|
|
1962
|
+
| 'link'
|
|
1963
|
+
| 'linked-services'
|
|
1964
|
+
| 'list-bullets'
|
|
1965
|
+
| 'list-checks'
|
|
1966
|
+
| 'list-numbers'
|
|
1967
|
+
| 'lock-open'
|
|
1968
|
+
| 'lock'
|
|
1969
|
+
| 'map-pin'
|
|
1970
|
+
| 'map'
|
|
1971
|
+
| 'mark-unread'
|
|
1972
|
+
| 'menu-close'
|
|
1973
|
+
| 'menu'
|
|
1974
|
+
| 'message'
|
|
1975
|
+
| 'messages'
|
|
1976
|
+
| 'minus-thick'
|
|
1977
|
+
| 'minus'
|
|
1978
|
+
| 'mobile'
|
|
1979
|
+
| 'money'
|
|
1980
|
+
| 'monitor'
|
|
1981
|
+
| 'moon'
|
|
1982
|
+
| 'navigation'
|
|
1983
|
+
| 'network-x'
|
|
1984
|
+
| 'network'
|
|
1985
|
+
| 'newspaper-clipping'
|
|
1986
|
+
| 'newspaper'
|
|
1987
|
+
| 'note-stack'
|
|
1988
|
+
| 'note'
|
|
1989
|
+
| 'notepad'
|
|
1990
|
+
| 'notification'
|
|
1991
|
+
| 'numpad'
|
|
1992
|
+
| 'nut'
|
|
1993
|
+
| 'order'
|
|
1994
|
+
| 'package'
|
|
1995
|
+
| 'page-first'
|
|
1996
|
+
| 'page-last'
|
|
1997
|
+
| 'parts'
|
|
1998
|
+
| 'password'
|
|
1999
|
+
| 'path'
|
|
2000
|
+
| 'pause'
|
|
2001
|
+
| 'pencil'
|
|
2002
|
+
| 'percent'
|
|
2003
|
+
| 'phone'
|
|
2004
|
+
| 'play-pause'
|
|
2005
|
+
| 'play'
|
|
2006
|
+
| 'plus'
|
|
2007
|
+
| 'printer'
|
|
2008
|
+
| 'prohibit'
|
|
2009
|
+
| 'qr-code'
|
|
2010
|
+
| 'question-mark'
|
|
2011
|
+
| 'quote'
|
|
2012
|
+
| 'radio-checked'
|
|
2013
|
+
| 'radio-focus'
|
|
2014
|
+
| 'radio'
|
|
2015
|
+
| 'read-doc'
|
|
2016
|
+
| 'receipt'
|
|
2017
|
+
| 'recycle'
|
|
2018
|
+
| 'refresh'
|
|
2019
|
+
| 'repeat'
|
|
2020
|
+
| 'reply-all'
|
|
2021
|
+
| 'reply'
|
|
2022
|
+
| 'resize'
|
|
2023
|
+
| 'ribbon'
|
|
2024
|
+
| 'rows-add'
|
|
2025
|
+
| 'ruler'
|
|
2026
|
+
| 'rules'
|
|
2027
|
+
| 'scale'
|
|
2028
|
+
| 'schedule-backward'
|
|
2029
|
+
| 'schedule-forward'
|
|
2030
|
+
| 'screwdriver'
|
|
2031
|
+
| 'scroll'
|
|
2032
|
+
| 'search-check'
|
|
2033
|
+
| 'search-items'
|
|
2034
|
+
| 'search-objects'
|
|
2035
|
+
| 'search'
|
|
2036
|
+
| 'send'
|
|
2037
|
+
| 'settings'
|
|
2038
|
+
| 'shapes'
|
|
2039
|
+
| 'share'
|
|
2040
|
+
| 'shuffle'
|
|
2041
|
+
| 'signpost'
|
|
2042
|
+
| 'skip-back'
|
|
2043
|
+
| 'skip-forward'
|
|
2044
|
+
| 'skull'
|
|
2045
|
+
| 'sliders'
|
|
2046
|
+
| 'sort-alpha-down'
|
|
2047
|
+
| 'sort-alpha-up'
|
|
2048
|
+
| 'sort-ascending'
|
|
2049
|
+
| 'sort-descending'
|
|
2050
|
+
| 'sort-time-down'
|
|
2051
|
+
| 'sort-time-up'
|
|
2052
|
+
| 'sparkle'
|
|
2053
|
+
| 'square-add'
|
|
2054
|
+
| 'square-inside'
|
|
2055
|
+
| 'square-select'
|
|
2056
|
+
| 'square'
|
|
2057
|
+
| 'stamp'
|
|
2058
|
+
| 'star-outlined'
|
|
2059
|
+
| 'star'
|
|
2060
|
+
| 'start'
|
|
2061
|
+
| 'step'
|
|
2062
|
+
| 'stop'
|
|
2063
|
+
| 'story'
|
|
2064
|
+
| 'strategy'
|
|
2065
|
+
| 'success'
|
|
2066
|
+
| 'sun'
|
|
2067
|
+
| 'support'
|
|
2068
|
+
| 'sync'
|
|
2069
|
+
| 'tag'
|
|
2070
|
+
| 'target-2'
|
|
2071
|
+
| 'target'
|
|
2072
|
+
| 'task-alt'
|
|
2073
|
+
| 'text-add'
|
|
2074
|
+
| 'textbox'
|
|
2075
|
+
| 'time-add'
|
|
2076
|
+
| 'timer'
|
|
2077
|
+
| 'toolbox'
|
|
2078
|
+
| 'tools'
|
|
2079
|
+
| 'trash'
|
|
2080
|
+
| 'trolley'
|
|
2081
|
+
| 'trophy'
|
|
2082
|
+
| 'truck-trailer'
|
|
2083
|
+
| 'update'
|
|
2084
|
+
| 'upload-cloud'
|
|
2085
|
+
| 'upload'
|
|
2086
|
+
| 'user-add'
|
|
2087
|
+
| 'user-details'
|
|
2088
|
+
| 'user-group'
|
|
2089
|
+
| 'user-id-badge'
|
|
2090
|
+
| 'user-id-card'
|
|
2091
|
+
| 'user-recent'
|
|
2092
|
+
| 'user'
|
|
2093
|
+
| 'verified'
|
|
2094
|
+
| 'video'
|
|
2095
|
+
| 'view-cards'
|
|
2096
|
+
| 'view-doc'
|
|
2097
|
+
| 'view-grid'
|
|
2098
|
+
| 'view-rows'
|
|
2099
|
+
| 'view-table'
|
|
2100
|
+
| 'wand'
|
|
2101
|
+
| 'warning'
|
|
2102
|
+
| 'weight'
|
|
2103
|
+
| 'widgets'
|
|
2104
|
+
| 'work-order'
|
|
2105
|
+
| 'wrench-2'
|
|
2106
|
+
| 'wrench'
|
|
2107
|
+
| 'x'
|
|
2108
|
+
| 'zoom-in'
|
|
2109
|
+
| 'zoom-out';
|
|
2110
|
+
|
|
2111
|
+
declare type IconProps = Omit<BoxProps, IconNamesList | 'size'> & SVGAttributes<SVGElement> & IconVariantProps & {
|
|
1695
2112
|
name: IconNamesList;
|
|
1696
2113
|
size?: AllowedIconSizes;
|
|
1697
2114
|
fill?: ColorToken;
|
|
1698
2115
|
};
|
|
1699
2116
|
|
|
2117
|
+
export declare const IconProvider: ({ children, spritePath }: IconProviderProps) => JSX.Element;
|
|
2118
|
+
|
|
2119
|
+
export declare type IconProviderProps = {
|
|
2120
|
+
children: ReactNode;
|
|
2121
|
+
spritePath?: string;
|
|
2122
|
+
};
|
|
2123
|
+
|
|
2124
|
+
declare interface IconVariant {
|
|
2125
|
+
|
|
2126
|
+
}
|
|
2127
|
+
|
|
2128
|
+
declare type IconVariantProps = {
|
|
2129
|
+
[key in keyof IconVariant]?: ConditionalValue<IconVariant[key]> | undefined
|
|
2130
|
+
}
|
|
2131
|
+
|
|
1700
2132
|
declare type Important = ImportantMark | WhitespaceImportant
|
|
1701
2133
|
|
|
1702
2134
|
declare type ImportantMark = "!" | "!important"
|
|
@@ -1711,8 +2143,8 @@ declare type JsxStyleProps = SystemStyleObject_2 & WithCss
|
|
|
1711
2143
|
export declare const Label: (props: LabelProps) => JSX.Element;
|
|
1712
2144
|
|
|
1713
2145
|
export declare type LabelProps = Omit<BoxProps, keyof LabelVariantProps> & LabelVariantProps & {
|
|
1714
|
-
htmlFor
|
|
1715
|
-
children?: string |
|
|
2146
|
+
htmlFor: string;
|
|
2147
|
+
children?: string | ReactNode;
|
|
1716
2148
|
};
|
|
1717
2149
|
|
|
1718
2150
|
declare interface LabelVariant {
|
|
@@ -1724,8 +2156,8 @@ declare interface LabelVariant {
|
|
|
1724
2156
|
italic: boolean
|
|
1725
2157
|
underline: boolean
|
|
1726
2158
|
truncate: boolean
|
|
1727
|
-
|
|
1728
|
-
size: "12" | "14" | "16" | "20" | "24" | "32" | "40" | "48" | "64" | "72" | "80" | "96"
|
|
2159
|
+
allCaps: boolean
|
|
2160
|
+
size: "10" | "12" | "14" | "16" | "20" | "24" | "32" | "40" | "48" | "64" | "72" | "80" | "96"
|
|
1729
2161
|
weight: "light" | "normal" | "medium" | "bold" | "black"
|
|
1730
2162
|
_disabled: boolean
|
|
1731
2163
|
}
|
|
@@ -1752,20 +2184,17 @@ export declare type LinkProps = Omit<BoxProps, keyof LinkVariantProps> & LinkVar
|
|
|
1752
2184
|
bold?: boolean;
|
|
1753
2185
|
weight?: FontWeightToken;
|
|
1754
2186
|
className?: string;
|
|
1755
|
-
children?:
|
|
2187
|
+
children?: ReactNode;
|
|
1756
2188
|
};
|
|
1757
2189
|
|
|
1758
2190
|
declare interface LinkVariant {
|
|
1759
|
-
/**
|
|
1760
|
-
* @default "inherit"
|
|
1761
|
-
*/
|
|
1762
2191
|
family: "heading" | "body" | "sans" | "serif" | "mono" | "inherit"
|
|
1763
2192
|
bold: boolean
|
|
1764
2193
|
italic: boolean
|
|
1765
2194
|
underline: boolean
|
|
1766
2195
|
truncate: boolean
|
|
1767
|
-
|
|
1768
|
-
size: "12" | "14" | "16" | "20" | "24" | "32" | "40" | "48" | "64" | "72" | "80" | "96"
|
|
2196
|
+
allCaps: boolean
|
|
2197
|
+
size: "10" | "12" | "14" | "16" | "20" | "24" | "32" | "40" | "48" | "64" | "72" | "80" | "96"
|
|
1769
2198
|
weight: "light" | "normal" | "medium" | "bold" | "black"
|
|
1770
2199
|
_disabled: boolean
|
|
1771
2200
|
}
|
|
@@ -1774,173 +2203,182 @@ declare type LinkVariantProps = {
|
|
|
1774
2203
|
[key in keyof LinkVariant]?: ConditionalValue<LinkVariant[key]> | undefined
|
|
1775
2204
|
}
|
|
1776
2205
|
|
|
1777
|
-
export declare const
|
|
2206
|
+
export declare const List: (props: ListProps) => JSX.Element;
|
|
1778
2207
|
|
|
1779
|
-
declare
|
|
2208
|
+
export declare type ListDensity = 'compact' | 'comfortable' | 'spacious';
|
|
1780
2209
|
|
|
1781
|
-
export declare const
|
|
2210
|
+
export declare const ListItem: (props: ListItemProps) => JSX.Element;
|
|
1782
2211
|
|
|
1783
|
-
declare
|
|
1784
|
-
open: boolean;
|
|
1785
|
-
setOpen: (open: boolean) => void;
|
|
1786
|
-
refs: {
|
|
1787
|
-
setReference: (node: HTMLElement | null) => void;
|
|
1788
|
-
setFloating: (node: HTMLElement | null) => void;
|
|
1789
|
-
};
|
|
1790
|
-
floatingStyles: React.CSSProperties;
|
|
1791
|
-
getReferenceProps: (userProps?: React.HTMLProps<Element>) => Record<string, unknown>;
|
|
1792
|
-
getFloatingProps: (userProps?: React.HTMLProps<HTMLElement>) => Record<string, unknown>;
|
|
1793
|
-
getItemProps: (userProps?: React.HTMLProps<HTMLElement> & {
|
|
1794
|
-
index?: number;
|
|
1795
|
-
active?: boolean;
|
|
1796
|
-
}) => Record<string, unknown>;
|
|
1797
|
-
activeIndex: number | null;
|
|
1798
|
-
listRef: React.RefObject<(HTMLElement | null)[]>;
|
|
1799
|
-
classes: ReturnType<menu>;
|
|
1800
|
-
}
|
|
2212
|
+
export declare const ListItemGroup: (props: ListItemGroupProps) => JSX.Element;
|
|
1801
2213
|
|
|
1802
|
-
export declare
|
|
2214
|
+
export declare type ListItemGroupProps = Omit<BoxProps, keyof ListItemGroupVariantProps | 'children'> & ListItemGroupVariantProps & {
|
|
2215
|
+
label?: string;
|
|
2216
|
+
children: BoxProps['children'];
|
|
2217
|
+
divider?: boolean;
|
|
2218
|
+
};
|
|
1803
2219
|
|
|
1804
|
-
|
|
2220
|
+
declare interface ListItemGroupVariant {
|
|
2221
|
+
/**
|
|
2222
|
+
* @default "compact"
|
|
2223
|
+
*/
|
|
2224
|
+
density: "compact" | "comfortable" | "spacious"
|
|
2225
|
+
}
|
|
1805
2226
|
|
|
1806
|
-
|
|
2227
|
+
declare type ListItemGroupVariantProps = {
|
|
2228
|
+
[key in keyof ListItemGroupVariant]?: ConditionalValue<ListItemGroupVariant[key]> | undefined
|
|
2229
|
+
}
|
|
1807
2230
|
|
|
1808
|
-
export declare type
|
|
1809
|
-
|
|
2231
|
+
export declare type ListItemProps = Omit<BoxProps<'button'>, keyof ListItemVariantProps | 'as' | 'type'> & Omit<ListItemVariantProps, 'selected' | 'iconBefore' | 'iconAfter'> & {
|
|
2232
|
+
active?: boolean;
|
|
1810
2233
|
label?: string;
|
|
1811
|
-
|
|
1812
|
-
|
|
2234
|
+
description?: string;
|
|
2235
|
+
query?: string;
|
|
2236
|
+
highlightMatches?: boolean;
|
|
2237
|
+
controlName?: string;
|
|
2238
|
+
onControlChange?: ChangeEventHandler<HTMLInputElement>;
|
|
2239
|
+
selected?: boolean;
|
|
2240
|
+
variant?: ListItemVariantProps['variant'];
|
|
2241
|
+
density?: ListItemVariantProps['density'];
|
|
2242
|
+
iconBefore?: IconNamesList;
|
|
2243
|
+
iconAfter?: IconNamesList;
|
|
1813
2244
|
};
|
|
1814
2245
|
|
|
1815
|
-
|
|
2246
|
+
declare interface ListItemVariant {
|
|
2247
|
+
/**
|
|
2248
|
+
* @default "default"
|
|
2249
|
+
*/
|
|
2250
|
+
variant: "default" | "checkbox" | "toggle" | "divider"
|
|
2251
|
+
/**
|
|
2252
|
+
* @default "compact"
|
|
2253
|
+
*/
|
|
2254
|
+
density: "compact" | "comfortable" | "spacious"
|
|
2255
|
+
/**
|
|
2256
|
+
* @default false
|
|
2257
|
+
*/
|
|
2258
|
+
selected: boolean
|
|
2259
|
+
iconBefore: boolean
|
|
2260
|
+
iconAfter: boolean
|
|
2261
|
+
}
|
|
2262
|
+
|
|
2263
|
+
declare type ListItemVariantProps = {
|
|
2264
|
+
[key in keyof ListItemVariant]?: ListItemVariant[key] | undefined
|
|
2265
|
+
}
|
|
1816
2266
|
|
|
1817
|
-
export declare type
|
|
1818
|
-
|
|
1819
|
-
|
|
1820
|
-
|
|
1821
|
-
|
|
1822
|
-
/** Callback when item is selected/activated */
|
|
1823
|
-
onSelect?: () => void;
|
|
1824
|
-
/** Disable the item */
|
|
1825
|
-
disabled?: boolean;
|
|
1826
|
-
/** Primary label (required) */
|
|
1827
|
-
label: string | default_2.ReactNode;
|
|
1828
|
-
/** Secondary description text */
|
|
1829
|
-
description?: string;
|
|
1830
|
-
/** Icon on the left side */
|
|
1831
|
-
iconLeft?: IconNamesList;
|
|
1832
|
-
/** Icon on the right side */
|
|
1833
|
-
iconRight?: IconNamesList;
|
|
1834
|
-
/** Text to highlight (for autocomplete/search scenarios) */
|
|
1835
|
-
highlightMatch?: string;
|
|
1836
|
-
/** Selection indicator style (only for select types) */
|
|
1837
|
-
selectionIndicator?: SelectionIndicator;
|
|
1838
|
-
/** Index for keyboard navigation (managed internally via context) */
|
|
1839
|
-
index?: number;
|
|
2267
|
+
export declare type ListProps = Omit<BoxProps, keyof ListVariantProps | 'children'> & ListVariantProps & {
|
|
2268
|
+
children: ReactNode;
|
|
2269
|
+
density?: ListDensity;
|
|
2270
|
+
query?: string;
|
|
2271
|
+
highlightMatches?: boolean;
|
|
1840
2272
|
};
|
|
1841
2273
|
|
|
1842
|
-
|
|
2274
|
+
declare interface ListVariant {
|
|
2275
|
+
|
|
2276
|
+
}
|
|
2277
|
+
|
|
2278
|
+
declare type ListVariantProps = {
|
|
2279
|
+
[key in keyof ListVariant]?: ConditionalValue<ListVariant[key]> | undefined
|
|
2280
|
+
}
|
|
1843
2281
|
|
|
1844
|
-
export declare const
|
|
1845
|
-
|
|
1846
|
-
|
|
2282
|
+
export declare const Menu: (props: MenuProps) => JSX.Element;
|
|
2283
|
+
|
|
2284
|
+
export declare type MenuContext = {
|
|
2285
|
+
density: MenuDensity;
|
|
2286
|
+
panel?: MenuVariantProps['panel'];
|
|
2287
|
+
closeOnSelect: boolean;
|
|
2288
|
+
subMenuInteraction: SubMenuInteraction;
|
|
2289
|
+
inline: boolean;
|
|
2290
|
+
onCloseMenu: () => void;
|
|
2291
|
+
onPushDiginLevel: (title: string, levelChildren: ReactNode) => void;
|
|
2292
|
+
onPopDiginLevel: () => void;
|
|
2293
|
+
diginDepth: number;
|
|
1847
2294
|
};
|
|
1848
2295
|
|
|
1849
|
-
export declare
|
|
2296
|
+
export declare type MenuDensity = 'compact' | 'comfortable' | 'spacious';
|
|
1850
2297
|
|
|
1851
|
-
|
|
2298
|
+
declare type MenuFilterContextValue = {
|
|
2299
|
+
query: string;
|
|
2300
|
+
filterMode: MenuFilterMode;
|
|
2301
|
+
highlightMatches: boolean;
|
|
2302
|
+
getItemText: (item: {
|
|
2303
|
+
label?: string;
|
|
2304
|
+
description?: string;
|
|
2305
|
+
}) => string;
|
|
2306
|
+
};
|
|
1852
2307
|
|
|
1853
|
-
|
|
2308
|
+
declare type MenuFilterMode = 'none' | 'contains';
|
|
1854
2309
|
|
|
1855
|
-
export declare
|
|
1856
|
-
|
|
2310
|
+
export declare const MenuGroup: (props: MenuGroupProps) => JSX.Element | null;
|
|
2311
|
+
|
|
2312
|
+
export declare type MenuGroupProps = BoxProps & {
|
|
1857
2313
|
label?: string;
|
|
1858
|
-
|
|
1859
|
-
|
|
2314
|
+
children: ReactNode;
|
|
2315
|
+
divider?: boolean;
|
|
1860
2316
|
};
|
|
1861
2317
|
|
|
1862
|
-
export declare const
|
|
1863
|
-
(props: MenuListItemProps): JSX.Element;
|
|
1864
|
-
displayName: string;
|
|
1865
|
-
};
|
|
2318
|
+
export declare const MenuItem: (props: MenuItemProps) => JSX.Element | null;
|
|
1866
2319
|
|
|
1867
|
-
export declare type
|
|
1868
|
-
|
|
1869
|
-
type?: MenuItemType;
|
|
1870
|
-
/** Selected state (for single-select and multi-select) */
|
|
1871
|
-
selected?: boolean;
|
|
1872
|
-
/** Active highlight state (controlled externally) */
|
|
1873
|
-
active?: boolean;
|
|
1874
|
-
/** Click handler */
|
|
1875
|
-
onClick?: default_2.MouseEventHandler<HTMLDivElement>;
|
|
1876
|
-
/** Disable the item */
|
|
1877
|
-
disabled?: boolean;
|
|
1878
|
-
/** Primary label (required) */
|
|
1879
|
-
label: string | default_2.ReactNode;
|
|
1880
|
-
/** Secondary description text */
|
|
2320
|
+
export declare type MenuItemProps = Omit<BoxProps<'button'>, 'as' | 'ref' | 'onClick' | 'type'> & Omit<MenuVariantProps, 'iconBefore' | 'iconAfter'> & {
|
|
2321
|
+
label?: string;
|
|
1881
2322
|
description?: string;
|
|
1882
|
-
|
|
1883
|
-
|
|
1884
|
-
|
|
1885
|
-
|
|
1886
|
-
|
|
1887
|
-
|
|
1888
|
-
|
|
1889
|
-
|
|
2323
|
+
variant?: MenuItemVariant;
|
|
2324
|
+
disabled?: boolean;
|
|
2325
|
+
selected?: boolean;
|
|
2326
|
+
iconBefore?: IconNamesList;
|
|
2327
|
+
iconAfter?: IconNamesList;
|
|
2328
|
+
href?: string;
|
|
2329
|
+
target?: string;
|
|
2330
|
+
rel?: string;
|
|
2331
|
+
closeOnSelect?: boolean;
|
|
2332
|
+
density?: MenuDensity;
|
|
2333
|
+
textValue?: string;
|
|
2334
|
+
onClick?: (event: MouseEvent_2<HTMLElement>) => void;
|
|
1890
2335
|
};
|
|
1891
2336
|
|
|
1892
|
-
export declare type
|
|
2337
|
+
export declare type MenuItemVariant = 'default' | 'checkbox' | 'toggle' | 'divider';
|
|
1893
2338
|
|
|
1894
|
-
export declare type MenuProps =
|
|
1895
|
-
|
|
1896
|
-
|
|
1897
|
-
|
|
1898
|
-
|
|
1899
|
-
|
|
2339
|
+
export declare type MenuProps = {
|
|
2340
|
+
trigger?: ReactElement;
|
|
2341
|
+
children: ReactNode;
|
|
2342
|
+
open?: boolean;
|
|
2343
|
+
defaultOpen?: boolean;
|
|
2344
|
+
onOpenChange?: (open: boolean) => void;
|
|
1900
2345
|
placement?: Placement;
|
|
1901
|
-
|
|
1902
|
-
|
|
1903
|
-
|
|
1904
|
-
|
|
1905
|
-
|
|
1906
|
-
|
|
2346
|
+
strategy?: 'absolute' | 'fixed';
|
|
2347
|
+
closeOnSelect?: boolean;
|
|
2348
|
+
inline?: boolean;
|
|
2349
|
+
triggerInteraction?: MenuTriggerInteraction;
|
|
2350
|
+
triggerOpenDelay?: number;
|
|
2351
|
+
triggerCloseDelay?: number;
|
|
2352
|
+
subMenuInteraction?: SubMenuInteraction;
|
|
2353
|
+
density?: MenuDensity;
|
|
2354
|
+
query?: string;
|
|
2355
|
+
onQueryChange?: (query: string) => void;
|
|
2356
|
+
filterMode?: MenuFilterMode;
|
|
2357
|
+
renderNoResults?: ReactNode;
|
|
2358
|
+
highlightMatches?: boolean;
|
|
2359
|
+
getItemText?: (item: {
|
|
2360
|
+
label?: string;
|
|
2361
|
+
description?: string;
|
|
2362
|
+
}) => string;
|
|
2363
|
+
panel?: MenuVariantProps['panel'];
|
|
2364
|
+
} & BoxProps;
|
|
2365
|
+
|
|
2366
|
+
export declare const MenuProvider: ({ children, root, filter }: MenuProviderProps) => JSX.Element;
|
|
2367
|
+
|
|
2368
|
+
export declare type MenuProviderProps = {
|
|
2369
|
+
children: ReactNode;
|
|
2370
|
+
root?: Partial<MenuContext>;
|
|
2371
|
+
filter?: Partial<MenuFilterContextValue>;
|
|
1907
2372
|
};
|
|
1908
2373
|
|
|
1909
|
-
declare
|
|
1910
|
-
__slot: MenuSlot
|
|
1911
|
-
__type: MenuVariantProps
|
|
1912
|
-
(props?: MenuVariantProps): Pretty<Record<MenuSlot, string>>
|
|
1913
|
-
raw: (props?: MenuVariantProps) => MenuVariantProps
|
|
1914
|
-
variantMap: MenuVariantMap
|
|
1915
|
-
variantKeys: Array<keyof MenuVariant>
|
|
1916
|
-
splitVariantProps<Props extends MenuVariantProps>(props: Props): [MenuVariantProps, Pretty<DistributiveOmit<Props, keyof MenuVariantProps>>]
|
|
1917
|
-
getVariantProps: (props?: MenuVariantProps) => MenuVariantProps
|
|
1918
|
-
}
|
|
1919
|
-
|
|
1920
|
-
declare type MenuSlot = "menu" | "menuItem" | "menuItemIndicator" | "menuItemIconLeft" | "menuItemIconRight" | "menuItemContent" | "menuItemLabel" | "menuItemDescription" | "menuDivider" | "menuGroup" | "menuGroupLabel"
|
|
1921
|
-
|
|
1922
|
-
export declare const MenuTrigger: (props: MenuTriggerProps) => default_2.ReactElement<Record<string, unknown>, string | default_2.JSXElementConstructor<any>>;
|
|
1923
|
-
|
|
1924
|
-
export declare type MenuTriggerProps = Omit<BoxProps, 'children'> & {
|
|
1925
|
-
/** Trigger element (button, custom component, etc.) */
|
|
1926
|
-
children: default_2.ReactElement;
|
|
1927
|
-
/** Disable the trigger */
|
|
1928
|
-
disabled?: boolean;
|
|
1929
|
-
};
|
|
2374
|
+
declare type MenuTriggerInteraction = 'click' | 'hover';
|
|
1930
2375
|
|
|
1931
2376
|
declare interface MenuVariant {
|
|
1932
2377
|
/**
|
|
1933
|
-
* @default "
|
|
2378
|
+
* @default "compact"
|
|
1934
2379
|
*/
|
|
1935
|
-
|
|
1936
|
-
|
|
1937
|
-
* @default "left"
|
|
1938
|
-
*/
|
|
1939
|
-
indicatorPosition: "left" | "right"
|
|
1940
|
-
}
|
|
1941
|
-
|
|
1942
|
-
declare type MenuVariantMap = {
|
|
1943
|
-
[key in keyof MenuVariant]: Array<MenuVariant[key]>
|
|
2380
|
+
density: "compact" | "comfortable" | "spacious"
|
|
2381
|
+
panel: boolean
|
|
1944
2382
|
}
|
|
1945
2383
|
|
|
1946
2384
|
declare type MenuVariantProps = {
|
|
@@ -1953,7 +2391,7 @@ export declare const ModalBody: (props: ModalBodyProps) => JSX.Element;
|
|
|
1953
2391
|
|
|
1954
2392
|
export declare type ModalBodyProps = Omit<BoxProps, 'children'> & {
|
|
1955
2393
|
/** Body content */
|
|
1956
|
-
children:
|
|
2394
|
+
children: ReactNode;
|
|
1957
2395
|
};
|
|
1958
2396
|
|
|
1959
2397
|
export declare const ModalContext: Context<ModalContextValue | null>;
|
|
@@ -1971,18 +2409,18 @@ export declare const ModalFooter: (props: ModalFooterProps) => JSX.Element;
|
|
|
1971
2409
|
|
|
1972
2410
|
export declare type ModalFooterProps = Omit<BoxProps, 'children'> & {
|
|
1973
2411
|
/** Footer content (typically action buttons) */
|
|
1974
|
-
children:
|
|
2412
|
+
children: ReactNode;
|
|
1975
2413
|
};
|
|
1976
2414
|
|
|
1977
2415
|
export declare const ModalHeader: (props: ModalHeaderProps) => JSX.Element;
|
|
1978
2416
|
|
|
1979
2417
|
export declare type ModalHeaderProps = Omit<BoxProps, 'children'> & {
|
|
1980
2418
|
/** Title text */
|
|
1981
|
-
title?: string
|
|
2419
|
+
title?: string;
|
|
1982
2420
|
/** Whether to show the close button */
|
|
1983
2421
|
showCloseButton?: boolean;
|
|
1984
2422
|
/** Children (custom header content) */
|
|
1985
|
-
children?:
|
|
2423
|
+
children?: ReactNode;
|
|
1986
2424
|
};
|
|
1987
2425
|
|
|
1988
2426
|
export declare type ModalProps = Omit<BoxProps, keyof ModalVariantProps> & ModalVariantProps & {
|
|
@@ -1993,7 +2431,7 @@ export declare type ModalProps = Omit<BoxProps, keyof ModalVariantProps> & Modal
|
|
|
1993
2431
|
/** Whether clicking the overlay should close the modal */
|
|
1994
2432
|
preventOverlayClose?: boolean;
|
|
1995
2433
|
/** Children (ModalHeader, ModalBody, ModalFooter) */
|
|
1996
|
-
children:
|
|
2434
|
+
children: ReactNode;
|
|
1997
2435
|
/** Optional ID for ARIA attributes */
|
|
1998
2436
|
id?: string;
|
|
1999
2437
|
};
|
|
@@ -2002,7 +2440,11 @@ declare interface ModalVariant {
|
|
|
2002
2440
|
/**
|
|
2003
2441
|
* @default "md"
|
|
2004
2442
|
*/
|
|
2005
|
-
size: "sm" | "md" | "lg"
|
|
2443
|
+
size: "sm" | "md" | "lg" | "xl" | "full" | "mobile"
|
|
2444
|
+
/**
|
|
2445
|
+
* @default "default"
|
|
2446
|
+
*/
|
|
2447
|
+
variant: "default" | "confirmation"
|
|
2006
2448
|
}
|
|
2007
2449
|
|
|
2008
2450
|
declare type ModalVariantProps = {
|
|
@@ -2163,6 +2605,9 @@ declare const numericSizes: {
|
|
|
2163
2605
|
'24': {
|
|
2164
2606
|
value: string;
|
|
2165
2607
|
};
|
|
2608
|
+
'28': {
|
|
2609
|
+
value: string;
|
|
2610
|
+
};
|
|
2166
2611
|
'32': {
|
|
2167
2612
|
value: string;
|
|
2168
2613
|
};
|
|
@@ -2261,7 +2706,7 @@ declare const numericSizes: {
|
|
|
2261
2706
|
};
|
|
2262
2707
|
};
|
|
2263
2708
|
|
|
2264
|
-
declare type NumericSizeToken = "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "22" | "24" | "32" | "40" | "48" | "56" | "64" | "72" | "80" | "88" | "96" | "104" | "112" | "120" | "128" | "136" | "144" | "152" | "160" | "168" | "176" | "184" | "192" | "200" | "208" | "216" | "224" | "232" | "240" | "248" | "256" | "264" | "272" | "280"
|
|
2709
|
+
declare type NumericSizeToken = "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "22" | "24" | "28" | "32" | "40" | "48" | "56" | "64" | "72" | "80" | "88" | "96" | "104" | "112" | "120" | "128" | "136" | "144" | "152" | "160" | "168" | "176" | "184" | "192" | "200" | "208" | "216" | "224" | "232" | "240" | "248" | "256" | "264" | "272" | "280"
|
|
2265
2710
|
|
|
2266
2711
|
declare interface ObsoleteProperties<TLength = (string & {}) | 0, TTime = string & {}> {
|
|
2267
2712
|
/**
|
|
@@ -3339,7 +3784,7 @@ export declare type PatternConfig<T extends PatternProperties = PatternPropertie
|
|
|
3339
3784
|
|
|
3340
3785
|
export declare type PatternProperties = Record<string, unknown>;
|
|
3341
3786
|
|
|
3342
|
-
declare type
|
|
3787
|
+
declare type PolymorphicComponentProps<T extends ElementType, Props extends object = object> = Props & AsProp<T> & Omit<ComponentPropsWithRef<T>, PropsToOmit<T, Props>>;
|
|
3343
3788
|
|
|
3344
3789
|
declare type PositionAreaAxis =
|
|
3345
3790
|
| 'left'
|
|
@@ -3408,12 +3853,11 @@ declare type PositionTry =
|
|
|
3408
3853
|
export declare const Pre: (props: PreProps) => JSX.Element;
|
|
3409
3854
|
|
|
3410
3855
|
export declare type PreProps = BoxProps & {
|
|
3411
|
-
children: string |
|
|
3856
|
+
children: string | ReactNode;
|
|
3412
3857
|
lang?: string;
|
|
3858
|
+
as?: string;
|
|
3413
3859
|
};
|
|
3414
3860
|
|
|
3415
|
-
declare type Pretty<T> = { [K in keyof T]: T[K] } & {}
|
|
3416
|
-
|
|
3417
3861
|
declare interface PropertiesFallback<TLength = (string & {}) | 0, TTime = string & {}>
|
|
3418
3862
|
extends StandardPropertiesFallback<TLength, TTime>,
|
|
3419
3863
|
VendorPropertiesFallback<TLength, TTime>,
|
|
@@ -5164,6 +5608,10 @@ declare namespace Property {
|
|
|
5164
5608
|
type VectorEffect = Globals | "non-scaling-stroke" | "none";
|
|
5165
5609
|
}
|
|
5166
5610
|
|
|
5611
|
+
declare type PropsRecord = Record<string, unknown>;
|
|
5612
|
+
|
|
5613
|
+
declare type PropsToOmit<T extends ElementType, P extends object> = keyof (AsProp<T> & P);
|
|
5614
|
+
|
|
5167
5615
|
declare type Pseudos = AdvancedPseudos | SimplePseudos;
|
|
5168
5616
|
|
|
5169
5617
|
declare type QueryDirection = 'min' | 'max';
|
|
@@ -5183,12 +5631,26 @@ declare type QueryDirection_2 = 'min' | 'max';
|
|
|
5183
5631
|
*/
|
|
5184
5632
|
export declare const Radio: (props: RadioProps) => JSX.Element;
|
|
5185
5633
|
|
|
5634
|
+
/**
|
|
5635
|
+
* Helper type for radio change events
|
|
5636
|
+
* @example
|
|
5637
|
+
* const handleChange: RadioChangeHandler = (e) => setChecked(e.target.checked);
|
|
5638
|
+
*/
|
|
5639
|
+
declare type RadioChangeEvent = ChangeEvent<HTMLInputElement>;
|
|
5640
|
+
|
|
5641
|
+
/**
|
|
5642
|
+
* Helper type for radio change handler functions
|
|
5643
|
+
* @example
|
|
5644
|
+
* const handleChange: RadioChangeHandler = (e) => setChecked(e.target.checked);
|
|
5645
|
+
*/
|
|
5646
|
+
declare type RadioChangeHandler = (e: RadioChangeEvent) => void;
|
|
5647
|
+
|
|
5186
5648
|
export declare const RadioInput: (props: RadioInputProps) => JSX.Element;
|
|
5187
5649
|
|
|
5188
5650
|
export declare type RadioInputProps = Omit<BoxProps, keyof RadioInputVariantProps> & RadioInputVariantProps & {
|
|
5189
5651
|
name: string;
|
|
5190
5652
|
checked: boolean;
|
|
5191
|
-
onChange:
|
|
5653
|
+
onChange: RadioChangeHandler;
|
|
5192
5654
|
id?: string;
|
|
5193
5655
|
error?: boolean;
|
|
5194
5656
|
children?: string | ReactNode;
|
|
@@ -5203,13 +5665,13 @@ declare type RadioInputVariantProps = {
|
|
|
5203
5665
|
[key in keyof RadioInputVariant]?: ConditionalValue<RadioInputVariant[key]> | undefined
|
|
5204
5666
|
}
|
|
5205
5667
|
|
|
5206
|
-
export declare type RadioProps = Omit<BoxProps, keyof RadioVariantProps> & RadioVariantProps & {
|
|
5668
|
+
export declare type RadioProps = Omit<BoxProps, 'checked' | 'onChange' | keyof RadioVariantProps> & RadioVariantProps & {
|
|
5207
5669
|
name: string;
|
|
5208
5670
|
checked: boolean;
|
|
5209
|
-
onChange:
|
|
5671
|
+
onChange: RadioChangeHandler;
|
|
5210
5672
|
id?: string;
|
|
5211
|
-
disabled?: boolean;
|
|
5212
5673
|
error?: boolean;
|
|
5674
|
+
disabled?: boolean;
|
|
5213
5675
|
};
|
|
5214
5676
|
|
|
5215
5677
|
declare interface RadioVariant {
|
|
@@ -5241,8 +5703,6 @@ declare interface SelectContextValue {
|
|
|
5241
5703
|
placeholder: string;
|
|
5242
5704
|
}
|
|
5243
5705
|
|
|
5244
|
-
export declare type SelectionIndicator = 'checkmark' | 'checkbox';
|
|
5245
|
-
|
|
5246
5706
|
/**
|
|
5247
5707
|
* SelectOption component used within Select
|
|
5248
5708
|
* Note: This component doesn't render directly - the Select parent component
|
|
@@ -5269,47 +5729,33 @@ export declare type SelectOptionProps = Omit<BoxProps, 'children'> & {
|
|
|
5269
5729
|
|
|
5270
5730
|
declare type Selectors = AttributeSelector | ParentSelector
|
|
5271
5731
|
|
|
5272
|
-
export declare type SelectProps = Omit<BoxProps
|
|
5273
|
-
|
|
5274
|
-
|
|
5275
|
-
/** Callback when value changes */
|
|
5276
|
-
onChange?: (value: string | string[] | null) => void;
|
|
5277
|
-
/** Allow multiple selections */
|
|
5732
|
+
export declare type SelectProps = Omit<BoxProps<'button'>, keyof SelectVariantProps | 'children' | 'onChange' | 'type' | 'value'> & SelectVariantProps & {
|
|
5733
|
+
value?: SelectValue;
|
|
5734
|
+
onChange?: (value: SelectValue) => void;
|
|
5278
5735
|
multiple?: boolean;
|
|
5279
|
-
/** Placeholder text when no selection */
|
|
5280
5736
|
placeholder?: string;
|
|
5281
|
-
/** Controlled open state */
|
|
5282
5737
|
open?: boolean;
|
|
5283
|
-
/** Callback when open state should change */
|
|
5284
5738
|
onOpenChange?: (open: boolean) => void;
|
|
5285
|
-
/** Floating UI placement */
|
|
5286
5739
|
placement?: Placement;
|
|
5287
|
-
/** Offset distance from trigger (in pixels) */
|
|
5288
5740
|
offset?: number;
|
|
5289
|
-
|
|
5290
|
-
children: React.ReactNode;
|
|
5291
|
-
/** Optional ID for ARIA attributes */
|
|
5741
|
+
children: ReactNode;
|
|
5292
5742
|
id?: string;
|
|
5293
|
-
/** Disabled state */
|
|
5294
5743
|
disabled?: boolean;
|
|
5295
|
-
/** Error state */
|
|
5296
5744
|
error?: boolean;
|
|
5297
|
-
|
|
5298
|
-
size?: 'sm' | 'md' | 'lg' | 'xl';
|
|
5299
|
-
/** Selection indicator position */
|
|
5300
|
-
indicatorPosition?: 'left' | 'right';
|
|
5301
|
-
packing?: 'default' | 'compact' | 'comfortable';
|
|
5745
|
+
density?: MenuDensity;
|
|
5302
5746
|
};
|
|
5303
5747
|
|
|
5304
|
-
export declare const SelectTrigger: (props: SelectTriggerProps) => ReactElement<
|
|
5748
|
+
export declare const SelectTrigger: (props: SelectTriggerProps) => ReactElement<unknown, string | JSXElementConstructor<any>>;
|
|
5305
5749
|
|
|
5306
5750
|
export declare type SelectTriggerProps = Omit<BoxProps, 'children'> & {
|
|
5307
5751
|
/** Trigger element (button, custom component, etc.) */
|
|
5308
|
-
children:
|
|
5752
|
+
children: ReactElement;
|
|
5309
5753
|
/** Disable the trigger */
|
|
5310
5754
|
disabled?: boolean;
|
|
5311
5755
|
};
|
|
5312
5756
|
|
|
5757
|
+
declare type SelectValue = string | string[] | null;
|
|
5758
|
+
|
|
5313
5759
|
declare interface SelectVariant {
|
|
5314
5760
|
/**
|
|
5315
5761
|
* @default "md"
|
|
@@ -5435,18 +5881,19 @@ declare type SimplePseudos =
|
|
|
5435
5881
|
| ":valid"
|
|
5436
5882
|
| ":visited";
|
|
5437
5883
|
|
|
5438
|
-
declare type SizeToken = "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "22" | "24" | "32" | "40" | "48" | "56" | "64" | "72" | "80" | "88" | "96" | "104" | "112" | "120" | "128" | "136" | "144" | "152" | "160" | "168" | "176" | "184" | "192" | "200" | "208" | "216" | "224" | "232" | "240" | "248" | "256" | "264" | "272" | "280" | "full" | "half" | "min" | "max" | "fit" | "prose" | "auto" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "breakpoint-xs" | "breakpoint-sm" | "breakpoint-md" | "breakpoint-lg" | "breakpoint-xl" | "breakpoint-2xl"
|
|
5884
|
+
declare type SizeToken = "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "22" | "24" | "28" | "32" | "40" | "48" | "56" | "64" | "72" | "80" | "88" | "96" | "104" | "112" | "120" | "128" | "136" | "144" | "152" | "160" | "168" | "176" | "184" | "192" | "200" | "208" | "216" | "224" | "232" | "240" | "248" | "256" | "264" | "272" | "280" | "full" | "half" | "min" | "max" | "fit" | "prose" | "auto" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "breakpoint-xs" | "breakpoint-sm" | "breakpoint-md" | "breakpoint-lg" | "breakpoint-xl" | "breakpoint-2xl"
|
|
5439
5885
|
|
|
5440
5886
|
export declare type SlotRecipeConfig<S extends string = string, V extends SlotRecipeVariantRecord<S> = SlotRecipeVariantRecord<S>> = BaseSlotRecipeConfig<S, V>;
|
|
5441
5887
|
|
|
5442
5888
|
export declare type SlotRecipeVariantRecord<S extends string = string> = Record<S, Record<string, unknown>>;
|
|
5443
5889
|
|
|
5444
|
-
declare type SpacingToken = "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "22" | "24" | "32" | "40" | "48" | "56" | "64" | "72" | "80" | "88" | "96" | "104" | "112" | "120" | "128" | "136" | "144" | "152" | "160" | "168" | "176" | "184" | "192" | "200" | "208" | "216" | "224" | "232" | "240" | "248" | "256" | "264" | "272" | "280" | "full" | "half" | "min" | "max" | "fit" | "prose" | "auto" | "-0" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9" | "-10" | "-12" | "-14" | "-16" | "-20" | "-22" | "-24" | "-32" | "-40" | "-48" | "-56" | "-64" | "-72" | "-80" | "-88" | "-96" | "-104" | "-112" | "-120" | "-128" | "-136" | "-144" | "-152" | "-160" | "-168" | "-176" | "-184" | "-192" | "-200" | "-208" | "-216" | "-224" | "-232" | "-240" | "-248" | "-256" | "-264" | "-272" | "-280" | "-full" | "-half" | "-min" | "-max" | "-fit" | "-prose" | "-auto"
|
|
5890
|
+
declare type SpacingToken = "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "22" | "24" | "28" | "32" | "40" | "48" | "56" | "64" | "72" | "80" | "88" | "96" | "104" | "112" | "120" | "128" | "136" | "144" | "152" | "160" | "168" | "176" | "184" | "192" | "200" | "208" | "216" | "224" | "232" | "240" | "248" | "256" | "264" | "272" | "280" | "full" | "half" | "min" | "max" | "fit" | "prose" | "auto" | "-0" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9" | "-10" | "-12" | "-14" | "-16" | "-20" | "-22" | "-24" | "-28" | "-32" | "-40" | "-48" | "-56" | "-64" | "-72" | "-80" | "-88" | "-96" | "-104" | "-112" | "-120" | "-128" | "-136" | "-144" | "-152" | "-160" | "-168" | "-176" | "-184" | "-192" | "-200" | "-208" | "-216" | "-224" | "-232" | "-240" | "-248" | "-256" | "-264" | "-272" | "-280" | "-full" | "-half" | "-min" | "-max" | "-fit" | "-prose" | "-auto"
|
|
5445
5891
|
|
|
5446
5892
|
export declare const Spinner: (props: SpinnerProps) => JSX.Element;
|
|
5447
5893
|
|
|
5448
5894
|
export declare type SpinnerProps = Omit<BoxProps, keyof SpinnerVariantProps> & SpinnerVariantProps & {
|
|
5449
5895
|
inverse?: boolean;
|
|
5896
|
+
centered?: boolean;
|
|
5450
5897
|
};
|
|
5451
5898
|
|
|
5452
5899
|
declare interface SpinnerVariant {
|
|
@@ -5455,13 +5902,14 @@ declare interface SpinnerVariant {
|
|
|
5455
5902
|
*/
|
|
5456
5903
|
size: "xs" | "sm" | "md" | "lg"
|
|
5457
5904
|
inverse: boolean
|
|
5905
|
+
centered: boolean
|
|
5458
5906
|
}
|
|
5459
5907
|
|
|
5460
5908
|
declare type SpinnerVariantProps = {
|
|
5461
5909
|
[key in keyof SpinnerVariant]?: ConditionalValue<SpinnerVariant[key]> | undefined
|
|
5462
5910
|
}
|
|
5463
5911
|
|
|
5464
|
-
export declare const splitProps: (props:
|
|
5912
|
+
export declare const splitProps: (props: PropsRecord) => [string, PropsRecord];
|
|
5465
5913
|
|
|
5466
5914
|
declare interface StandardLonghandProperties<TLength = (string & {}) | 0, TTime = string & {}> {
|
|
5467
5915
|
/**
|
|
@@ -11575,6 +12023,22 @@ declare type String_2 = string & {}
|
|
|
11575
12023
|
|
|
11576
12024
|
declare type StringToMultiple<T extends string> = T | `${T}, ${T}`
|
|
11577
12025
|
|
|
12026
|
+
export declare const SubMenu: (props: SubMenuProps) => JSX.Element | null;
|
|
12027
|
+
|
|
12028
|
+
declare type SubMenuInteraction = 'hover' | 'digin';
|
|
12029
|
+
|
|
12030
|
+
export declare type SubMenuProps = Omit<BoxProps, 'as'> & Omit<MenuVariantProps, 'iconBefore' | 'iconAfter'> & {
|
|
12031
|
+
label: string;
|
|
12032
|
+
description?: string;
|
|
12033
|
+
disabled?: boolean;
|
|
12034
|
+
selected?: boolean;
|
|
12035
|
+
iconBefore?: IconNamesList;
|
|
12036
|
+
interaction?: SubMenuInteraction;
|
|
12037
|
+
placement?: Placement;
|
|
12038
|
+
children: ReactNode;
|
|
12039
|
+
textValue?: string;
|
|
12040
|
+
};
|
|
12041
|
+
|
|
11578
12042
|
declare interface SvgProperties<TLength = (string & {}) | 0, TTime = string & {}> {
|
|
11579
12043
|
alignmentBaseline?: Property.AlignmentBaseline | undefined;
|
|
11580
12044
|
baselineShift?: Property.BaselineShift<TLength> | undefined;
|
|
@@ -17829,7 +18293,7 @@ declare interface SystemProperties {
|
|
|
17829
18293
|
*
|
|
17830
18294
|
* @see https://developer.mozilla.org/docs/Web/CSS/z-index
|
|
17831
18295
|
*/
|
|
17832
|
-
zIndex?: ConditionalValue<WithEscapeHatch<
|
|
18296
|
+
zIndex?: ConditionalValue<WithEscapeHatch<UtilityValues["zIndex"] | CssVars>>
|
|
17833
18297
|
/**
|
|
17834
18298
|
* The non-standard **`zoom`** CSS property can be used to control the magnification level of an element. `transform: scale()` should be used instead of this property, if possible. However, unlike CSS Transforms, `zoom` affects the layout size of the element.
|
|
17835
18299
|
*
|
|
@@ -19137,27 +19601,23 @@ declare type SystemStyleObject_2 = Omit<Nested<SystemProperties & CssVarProperti
|
|
|
19137
19601
|
|
|
19138
19602
|
export declare const Tag: (props: TagProps) => JSX.Element;
|
|
19139
19603
|
|
|
19140
|
-
export declare type TagProps = Omit<BoxProps, keyof TagVariantProps> & TagVariantProps & {
|
|
19141
|
-
children: string
|
|
19142
|
-
|
|
19604
|
+
export declare type TagProps = Omit<BoxProps, keyof TagVariantProps> & Omit<TagVariantProps, 'iconBefore' | 'iconAfter'> & {
|
|
19605
|
+
children: string;
|
|
19606
|
+
iconBefore?: IconNamesList;
|
|
19607
|
+
iconAfter?: IconNamesList;
|
|
19143
19608
|
};
|
|
19144
19609
|
|
|
19145
19610
|
declare interface TagVariant {
|
|
19146
19611
|
/**
|
|
19147
19612
|
* @default "default"
|
|
19148
19613
|
*/
|
|
19149
|
-
|
|
19614
|
+
variant: "default" | "bold"
|
|
19150
19615
|
/**
|
|
19151
19616
|
* @default "gray"
|
|
19152
19617
|
*/
|
|
19153
19618
|
hue: "gray" | "red" | "orange" | "yellow" | "lime" | "green" | "teal" | "blue" | "indigo" | "purple" | "magenta" | "tan"
|
|
19154
|
-
|
|
19155
|
-
|
|
19156
|
-
*/
|
|
19157
|
-
iconPosition: "left" | "right"
|
|
19158
|
-
/**
|
|
19159
|
-
* @default false
|
|
19160
|
-
*/
|
|
19619
|
+
iconBefore: boolean
|
|
19620
|
+
iconAfter: boolean
|
|
19161
19621
|
hasIcon: boolean
|
|
19162
19622
|
}
|
|
19163
19623
|
|
|
@@ -19182,7 +19642,7 @@ declare interface TextareaVariant {
|
|
|
19182
19642
|
/**
|
|
19183
19643
|
* @default "md"
|
|
19184
19644
|
*/
|
|
19185
|
-
size: "
|
|
19645
|
+
size: "sm" | "md" | "lg" | "xl"
|
|
19186
19646
|
autoSize: boolean
|
|
19187
19647
|
}
|
|
19188
19648
|
|
|
@@ -19192,24 +19652,28 @@ declare type TextareaVariantProps = {
|
|
|
19192
19652
|
|
|
19193
19653
|
export declare const TextInput: (props: TextInputProps) => JSX.Element;
|
|
19194
19654
|
|
|
19195
|
-
export declare type TextInputProps = Omit<BoxProps, keyof
|
|
19655
|
+
export declare type TextInputProps = Omit<BoxProps, keyof TextInputVariantProps> & Omit<TextInputVariantProps, 'iconBefore' | 'iconAfter'> & {
|
|
19196
19656
|
name: string;
|
|
19197
|
-
|
|
19657
|
+
id?: string;
|
|
19658
|
+
iconBefore?: IconNamesList;
|
|
19659
|
+
iconAfter?: IconNamesList;
|
|
19198
19660
|
error?: boolean;
|
|
19199
19661
|
disabled?: boolean;
|
|
19200
|
-
|
|
19662
|
+
type?: 'text' | 'number' | 'email' | 'password' | 'search' | 'tel' | 'url' | 'date' | 'time' | 'datetime-local' | 'month' | 'week';
|
|
19201
19663
|
};
|
|
19202
19664
|
|
|
19203
|
-
declare interface
|
|
19665
|
+
declare interface TextInputVariant {
|
|
19204
19666
|
/**
|
|
19205
19667
|
* @default "md"
|
|
19206
19668
|
*/
|
|
19207
|
-
size: "
|
|
19669
|
+
size: "sm" | "md" | "lg" | "xl"
|
|
19670
|
+
iconBefore: boolean
|
|
19671
|
+
iconAfter: boolean
|
|
19208
19672
|
autoSize: boolean
|
|
19209
19673
|
}
|
|
19210
19674
|
|
|
19211
|
-
declare type
|
|
19212
|
-
[key in keyof
|
|
19675
|
+
declare type TextInputVariantProps = {
|
|
19676
|
+
[key in keyof TextInputVariant]?: TextInputVariant[key] | undefined
|
|
19213
19677
|
}
|
|
19214
19678
|
|
|
19215
19679
|
export declare type TextProps = Omit<BoxProps, keyof TextVariantProps> & TextVariantProps & {
|
|
@@ -19222,16 +19686,13 @@ export declare type TextProps = Omit<BoxProps, keyof TextVariantProps> & TextVar
|
|
|
19222
19686
|
export declare type TextStyles = Record<string, SystemStyleObject>;
|
|
19223
19687
|
|
|
19224
19688
|
declare interface TextVariant {
|
|
19225
|
-
/**
|
|
19226
|
-
* @default "inherit"
|
|
19227
|
-
*/
|
|
19228
19689
|
family: "heading" | "body" | "sans" | "serif" | "mono" | "inherit"
|
|
19229
19690
|
bold: boolean
|
|
19230
19691
|
italic: boolean
|
|
19231
19692
|
underline: boolean
|
|
19232
19693
|
truncate: boolean
|
|
19233
|
-
|
|
19234
|
-
size: "12" | "14" | "16" | "20" | "24" | "32" | "40" | "48" | "64" | "72" | "80" | "96"
|
|
19694
|
+
allCaps: boolean
|
|
19695
|
+
size: "10" | "12" | "14" | "16" | "20" | "24" | "32" | "40" | "48" | "64" | "72" | "80" | "96"
|
|
19235
19696
|
weight: "light" | "normal" | "medium" | "bold" | "black"
|
|
19236
19697
|
}
|
|
19237
19698
|
|
|
@@ -19247,13 +19708,72 @@ declare interface ThemeContextType {
|
|
|
19247
19708
|
}
|
|
19248
19709
|
|
|
19249
19710
|
export declare function ThemeProvider({ children }: {
|
|
19250
|
-
children:
|
|
19711
|
+
children: ReactNode;
|
|
19251
19712
|
}): JSX.Element;
|
|
19252
19713
|
|
|
19253
19714
|
export declare const ThemeSwitcher: (props: ThemeSwitcherProps) => JSX.Element;
|
|
19254
19715
|
|
|
19255
19716
|
declare type ThemeSwitcherProps = BoxProps;
|
|
19256
19717
|
|
|
19718
|
+
export declare const TimePicker: (props: TimePickerProps) => JSX.Element;
|
|
19719
|
+
|
|
19720
|
+
export declare type TimePickerProps = Omit<BoxProps, keyof TimePickerVariantProps | 'children'> & TimePickerVariantProps & {
|
|
19721
|
+
/** Controlled value — hour is always 24h (0–23) internally */
|
|
19722
|
+
value?: TimeValue | null;
|
|
19723
|
+
/** Called when the time changes */
|
|
19724
|
+
onChange?: (value: TimeValue | null) => void;
|
|
19725
|
+
/** 12-hour or 24-hour display */
|
|
19726
|
+
hourCycle?: HourCycle;
|
|
19727
|
+
/** Minute snap interval (default 1 = any minute) */
|
|
19728
|
+
minuteStep?: number;
|
|
19729
|
+
/** Accessible label for the input group */
|
|
19730
|
+
label?: string;
|
|
19731
|
+
disabled?: boolean;
|
|
19732
|
+
error?: boolean;
|
|
19733
|
+
id?: string;
|
|
19734
|
+
name?: string;
|
|
19735
|
+
/** Controlled popover open state */
|
|
19736
|
+
open?: boolean;
|
|
19737
|
+
onOpenChange?: (open: boolean) => void;
|
|
19738
|
+
};
|
|
19739
|
+
|
|
19740
|
+
declare interface TimePickerVariant {
|
|
19741
|
+
/**
|
|
19742
|
+
* @default "md"
|
|
19743
|
+
*/
|
|
19744
|
+
size: "sm" | "md" | "lg"
|
|
19745
|
+
}
|
|
19746
|
+
|
|
19747
|
+
declare type TimePickerVariantProps = {
|
|
19748
|
+
[key in keyof TimePickerVariant]?: ConditionalValue<TimePickerVariant[key]> | undefined
|
|
19749
|
+
}
|
|
19750
|
+
|
|
19751
|
+
export declare const TimeRangePicker: ({ startValue, endValue, onStartChange, onEndChange, hourCycle, minuteStep, disabled, error, size, label, }: TimeRangePickerProps) => JSX.Element;
|
|
19752
|
+
|
|
19753
|
+
export declare type TimeRangePickerProps = {
|
|
19754
|
+
/** Start time value (hour in 24h format, 0–23) */
|
|
19755
|
+
startValue?: TimeValue | null;
|
|
19756
|
+
/** End time value (hour in 24h format, 0–23) */
|
|
19757
|
+
endValue?: TimeValue | null;
|
|
19758
|
+
/** Called when start time changes */
|
|
19759
|
+
onStartChange?: (value: TimeValue | null) => void;
|
|
19760
|
+
/** Called when end time changes */
|
|
19761
|
+
onEndChange?: (value: TimeValue | null) => void;
|
|
19762
|
+
hourCycle?: HourCycle;
|
|
19763
|
+
minuteStep?: number;
|
|
19764
|
+
disabled?: boolean;
|
|
19765
|
+
error?: boolean;
|
|
19766
|
+
/** Size passed to both TimePickers */
|
|
19767
|
+
size?: TimePickerProps['size'];
|
|
19768
|
+
/** Accessible label prefix — used to build "Start time" and "End time" labels */
|
|
19769
|
+
label?: string;
|
|
19770
|
+
};
|
|
19771
|
+
|
|
19772
|
+
export declare interface TimeValue {
|
|
19773
|
+
hour: number;
|
|
19774
|
+
minute: number;
|
|
19775
|
+
}
|
|
19776
|
+
|
|
19257
19777
|
/**
|
|
19258
19778
|
* Toggle is a controlled component.
|
|
19259
19779
|
* You must pass `checked` and `onChange` props.
|
|
@@ -19261,7 +19781,6 @@ declare type ThemeSwitcherProps = BoxProps;
|
|
|
19261
19781
|
* @example
|
|
19262
19782
|
* const [checked, setChecked] = useState(false);
|
|
19263
19783
|
* <Toggle
|
|
19264
|
-
* name="notifications"
|
|
19265
19784
|
* checked={checked}
|
|
19266
19785
|
* onChange={(e) => setChecked(e.target.checked)}
|
|
19267
19786
|
* />
|
|
@@ -19273,7 +19792,7 @@ export declare const Toggle: (props: ToggleProps) => JSX.Element;
|
|
|
19273
19792
|
* @example
|
|
19274
19793
|
* const handleChange: ToggleChangeHandler = (e) => setChecked(e.target.checked);
|
|
19275
19794
|
*/
|
|
19276
|
-
export declare type ToggleChangeEvent =
|
|
19795
|
+
export declare type ToggleChangeEvent = ChangeEvent<HTMLInputElement>;
|
|
19277
19796
|
|
|
19278
19797
|
/**
|
|
19279
19798
|
* Helper type for toggle change handler functions
|
|
@@ -19287,11 +19806,11 @@ export declare const ToggleInput: (props: ToggleInputProps) => JSX.Element;
|
|
|
19287
19806
|
export declare type ToggleInputProps = Omit<BoxProps, keyof ToggleInputVariantProps> & ToggleInputVariantProps & {
|
|
19288
19807
|
name: string;
|
|
19289
19808
|
checked: boolean;
|
|
19290
|
-
onChange:
|
|
19809
|
+
onChange: ToggleChangeHandler;
|
|
19291
19810
|
id?: string;
|
|
19292
19811
|
error?: boolean;
|
|
19293
|
-
children?: string | ReactNode;
|
|
19294
19812
|
disabled?: boolean;
|
|
19813
|
+
children?: string | ReactNode;
|
|
19295
19814
|
};
|
|
19296
19815
|
|
|
19297
19816
|
declare interface ToggleInputVariant {
|
|
@@ -19303,18 +19822,12 @@ declare type ToggleInputVariantProps = {
|
|
|
19303
19822
|
}
|
|
19304
19823
|
|
|
19305
19824
|
export declare type ToggleProps = Omit<BoxProps, 'checked' | 'onChange' | keyof ToggleVariantProps> & ToggleVariantProps & {
|
|
19306
|
-
/** Form field name */
|
|
19307
19825
|
name: string;
|
|
19308
|
-
/** Controlled checked state (REQUIRED) */
|
|
19309
19826
|
checked: boolean;
|
|
19310
|
-
|
|
19311
|
-
onChange: ChangeEventHandler<HTMLInputElement>;
|
|
19312
|
-
/** Unique identifier for the toggle */
|
|
19827
|
+
onChange: ToggleChangeHandler;
|
|
19313
19828
|
id?: string;
|
|
19314
|
-
/** Disable the toggle */
|
|
19315
|
-
disabled?: boolean;
|
|
19316
|
-
/** Display error state */
|
|
19317
19829
|
error?: boolean;
|
|
19830
|
+
disabled?: boolean;
|
|
19318
19831
|
};
|
|
19319
19832
|
|
|
19320
19833
|
declare interface ToggleVariant {
|
|
@@ -19325,7 +19838,7 @@ declare type ToggleVariantProps = {
|
|
|
19325
19838
|
[key in keyof ToggleVariant]?: ConditionalValue<ToggleVariant[key]> | undefined
|
|
19326
19839
|
}
|
|
19327
19840
|
|
|
19328
|
-
declare type Token = `animations.${AnimationToken}` | `aspectRatios.${AspectRatioToken}` | `blurs.${BlurToken}` | `borderWidths.${BorderWidthToken}` | `borders.${BorderToken}` | `colors.${ColorToken}` | `containerSizeTokens.${ContainerSizeTokenToken}` | `durations.${DurationToken}` | `easings.${EasingToken}` | `fontSizes.${FontSizeToken}` | `fontWeights.${FontWeightToken}` | `fonts.${FontToken}` | `letterSpacings.${LetterSpacingToken}` | `lineHeights.${LineHeightToken}` | `numericSizes.${NumericSizeToken}` | `radii.${RadiusToken}` | `shadows.${ShadowToken}` | `sizes.${SizeToken}` | `spacing.${SpacingToken}` | `utilitySizes.${UtilitySizeToken}` | `breakpoints.${BreakpointToken}`
|
|
19841
|
+
declare type Token = `animations.${AnimationToken}` | `aspectRatios.${AspectRatioToken}` | `blurs.${BlurToken}` | `borderWidths.${BorderWidthToken}` | `borders.${BorderToken}` | `colors.${ColorToken}` | `containerSizeTokens.${ContainerSizeTokenToken}` | `durations.${DurationToken}` | `easings.${EasingToken}` | `fontSizes.${FontSizeToken}` | `fontWeights.${FontWeightToken}` | `fonts.${FontToken}` | `letterSpacings.${LetterSpacingToken}` | `lineHeights.${LineHeightToken}` | `numericSizes.${NumericSizeToken}` | `radii.${RadiusToken}` | `shadows.${ShadowToken}` | `sizes.${SizeToken}` | `spacing.${SpacingToken}` | `utilitySizes.${UtilitySizeToken}` | `zIndex.${ZIndexToken}` | `breakpoints.${BreakpointToken}`
|
|
19329
19842
|
|
|
19330
19843
|
declare type Tokens = {
|
|
19331
19844
|
animations: AnimationToken
|
|
@@ -19348,37 +19861,45 @@ declare type Tokens = {
|
|
|
19348
19861
|
sizes: SizeToken
|
|
19349
19862
|
spacing: SpacingToken
|
|
19350
19863
|
utilitySizes: UtilitySizeToken
|
|
19864
|
+
zIndex: ZIndexToken
|
|
19351
19865
|
breakpoints: BreakpointToken
|
|
19352
19866
|
} & { [token: string]: never }
|
|
19353
19867
|
|
|
19354
19868
|
export declare const Tooltip: (props: TooltipProps) => JSX.Element;
|
|
19355
19869
|
|
|
19356
|
-
export declare type TooltipProps = Omit<BoxProps, keyof TooltipVariantProps> & TooltipVariantProps & {
|
|
19870
|
+
export declare type TooltipProps = Omit<BoxProps, keyof TooltipVariantProps | 'children'> & TooltipVariantProps & {
|
|
19871
|
+
/** Tooltip body text (required) */
|
|
19357
19872
|
text: string;
|
|
19873
|
+
/** Optional bold title rendered above the text */
|
|
19358
19874
|
title?: string;
|
|
19875
|
+
/** Show/hide the arrow caret. Default: true */
|
|
19359
19876
|
caret?: boolean;
|
|
19360
|
-
|
|
19877
|
+
/** Floating UI placement. Automatically flips if it doesn't fit. Default: 'bottom' */
|
|
19878
|
+
placement?: Placement;
|
|
19879
|
+
/** Distance in px between trigger and tooltip. Default: 8 */
|
|
19880
|
+
offset?: number;
|
|
19881
|
+
/** Hover open/close delay in ms, or { open, close } for separate delays */
|
|
19882
|
+
delay?: number | {
|
|
19883
|
+
open: number;
|
|
19884
|
+
close: number;
|
|
19885
|
+
};
|
|
19886
|
+
/** Trigger element. Wrapped in a <span> to attach the floating ref. */
|
|
19361
19887
|
children?: ReactNode;
|
|
19362
|
-
trigger?: 'onHover' | 'onClick';
|
|
19363
19888
|
};
|
|
19364
19889
|
|
|
19365
19890
|
declare interface TooltipVariant {
|
|
19366
|
-
/**
|
|
19367
|
-
* @default "bottom"
|
|
19368
|
-
*/
|
|
19369
|
-
position: "top" | "bottom" | "left" | "right" | "top-start" | "bottom-start" | "left-start" | "right-start" | "top-end" | "bottom-end" | "left-end" | "right-end"
|
|
19370
|
-
/**
|
|
19371
|
-
* @default true
|
|
19372
|
-
*/
|
|
19373
|
-
caret: boolean
|
|
19374
19891
|
/**
|
|
19375
19892
|
* @default "md"
|
|
19376
19893
|
*/
|
|
19377
19894
|
size: "sm" | "md" | "lg"
|
|
19895
|
+
/**
|
|
19896
|
+
* @default false
|
|
19897
|
+
*/
|
|
19898
|
+
hasTitle: boolean
|
|
19378
19899
|
}
|
|
19379
19900
|
|
|
19380
19901
|
declare type TooltipVariantProps = {
|
|
19381
|
-
[key in keyof TooltipVariant]?: TooltipVariant[key] | undefined
|
|
19902
|
+
[key in keyof TooltipVariant]?: ConditionalValue<TooltipVariant[key]> | undefined
|
|
19382
19903
|
}
|
|
19383
19904
|
|
|
19384
19905
|
declare interface UnstyledProps {
|
|
@@ -19388,48 +19909,11 @@ declare interface UnstyledProps {
|
|
|
19388
19909
|
unstyled?: boolean | undefined
|
|
19389
19910
|
}
|
|
19390
19911
|
|
|
19391
|
-
|
|
19392
|
-
* Token-aware container query hook for conditional rendering based on container sizes.
|
|
19393
|
-
* Requires a ref to the container element and the container must have container-type set.
|
|
19394
|
-
*
|
|
19395
|
-
* @example
|
|
19396
|
-
* // Component with container query
|
|
19397
|
-
* function MyComponent() {
|
|
19398
|
-
* const containerRef = useRef<HTMLDivElement>(null);
|
|
19399
|
-
* const isLarge = useContainerQuery(containerRef, 'lg');
|
|
19400
|
-
*
|
|
19401
|
-
* return (
|
|
19402
|
-
* <div ref={containerRef} style={{ containerType: 'inline-size' }}>
|
|
19403
|
-
* {isLarge && <LargeLayout />}
|
|
19404
|
-
* {!isLarge && <SmallLayout />}
|
|
19405
|
-
* </div>
|
|
19406
|
-
* );
|
|
19407
|
-
* }
|
|
19408
|
-
*
|
|
19409
|
-
* @example
|
|
19410
|
-
* // Max-width: matches when container is < xl size
|
|
19411
|
-
* const isSmall = useContainerQuery(containerRef, 'xl', 'max');
|
|
19412
|
-
*/
|
|
19413
|
-
export declare function useContainerQuery(containerRef: RefObject<HTMLElement>, size: ContainerSizeKey, direction?: QueryDirection_2): boolean;
|
|
19912
|
+
export declare function useContainerQuery(containerRef: RefObject<HTMLElement>, size: ContainerSizeKey, direction?: QueryDirection): boolean;
|
|
19414
19913
|
|
|
19415
|
-
|
|
19416
|
-
* Token-aware media query hook for conditional rendering based on breakpoints.
|
|
19417
|
-
*
|
|
19418
|
-
* @example
|
|
19419
|
-
* // Mobile-first: matches when viewport is >= md (768px)
|
|
19420
|
-
* const isDesktop = useMediaQuery('md');
|
|
19421
|
-
*
|
|
19422
|
-
* @example
|
|
19423
|
-
* // Max-width: matches when viewport is < lg (1024px)
|
|
19424
|
-
* const isMobile = useMediaQuery('lg', 'max');
|
|
19425
|
-
*
|
|
19426
|
-
* @example
|
|
19427
|
-
* // In JSX
|
|
19428
|
-
* {isDesktop && <DesktopOnlyComponent />}
|
|
19429
|
-
*/
|
|
19430
|
-
export declare function useMediaQuery(breakpoint: BreakpointKey, direction?: QueryDirection): boolean;
|
|
19914
|
+
export declare function useMediaQuery(breakpoint: BreakpointKey, direction?: QueryDirection_2): boolean;
|
|
19431
19915
|
|
|
19432
|
-
export declare const useMenuContext: () =>
|
|
19916
|
+
export declare const useMenuContext: () => MenuContext;
|
|
19433
19917
|
|
|
19434
19918
|
export declare const useModalContext: () => ModalContextValue;
|
|
19435
19919
|
|
|
@@ -19441,6 +19925,7 @@ declare type UtilitySizeToken = "full" | "half" | "min" | "max" | "fit" | "prose
|
|
|
19441
19925
|
|
|
19442
19926
|
declare interface UtilityValues {
|
|
19443
19927
|
aspectRatio: Tokens["aspectRatios"];
|
|
19928
|
+
zIndex: Tokens["zIndex"];
|
|
19444
19929
|
top: Tokens["spacing"];
|
|
19445
19930
|
left: Tokens["spacing"];
|
|
19446
19931
|
inset: "auto" | Tokens["spacing"];
|
|
@@ -19648,8 +20133,8 @@ declare interface UtilityValues {
|
|
|
19648
20133
|
strokeWidth: Tokens["borderWidths"];
|
|
19649
20134
|
srOnly: boolean;
|
|
19650
20135
|
debug: boolean;
|
|
19651
|
-
colorPalette: "transparent" | "current" | "inherit" | "neutral" | "neutralA" | "darkNeutral" | "darkNeutralA" | "gray" | "red" | "orange" | "yellow" | "lime" | "green" | "teal" | "blue" | "indigo" | "purple" | "magenta" | "tan" | "slate" | "brand" | "bg" | "bg.neutral" | "bg.neutral.bold" | "bg.neutral.boldest" | "bg.neutral.subtle" | "bg.neutral.inverse" | "bg.neutral.inverse.subtle" | "bg.selected" | "bg.selected.bold" | "bg.brand.bold" | "bg.brand" | "bg.brand.boldest" | "bg.brand.subtle" | "bg.success" | "bg.success.bold" | "bg.warning" | "bg.warning.bold" | "bg.danger" | "bg.danger.bold" | "bg.info" | "bg.info.bold" | "bg.input" | "bg.accent.neutral" | "bg.accent" | "bg.accent.blue" | "bg.accent.green" | "bg.accent.indigo" | "bg.accent.lime" | "bg.accent.magenta" | "bg.accent.orange" | "bg.accent.purple" | "bg.accent.red" | "bg.accent.tan" | "bg.accent.teal" | "bg.accent.yellow" | "blanket" | "border" | "border.focused" | "icon" | "icon.decorative" | "icon.decorative.inverse" | "icon.warning" | "link" | "surface" | "surface.overlay" | "surface.
|
|
19652
|
-
textStyle: "display.lg" | "display.md" | "display.sm" | "display.xs" | "heading.lg" | "heading.md" | "heading.sm" | "heading.xs" | "body.lg" | "body.md" | "body.sm" | "body.xs" | "mono.lg" | "mono.md" | "mono.sm" | "mono.xs";
|
|
20136
|
+
colorPalette: "transparent" | "current" | "inherit" | "neutral" | "neutralA" | "darkNeutral" | "darkNeutralA" | "gray" | "red" | "orange" | "yellow" | "lime" | "green" | "teal" | "blue" | "indigo" | "purple" | "magenta" | "tan" | "slate" | "shadow" | "shadow.raised" | "shadow.raised.1" | "shadow.raised.2" | "shadow.elevated" | "shadow.elevated.1" | "shadow.elevated.2" | "shadow.elevated.3" | "shadow.overlay" | "shadow.overlay.1" | "shadow.overlay.2" | "shadow.overlay.3" | "shadow.overflow" | "shadow.overflow.1" | "shadow.overflow.2" | "brand" | "bg" | "bg.neutral" | "bg.neutral.bold" | "bg.neutral.boldest" | "bg.neutral.subtle" | "bg.neutral.inverse" | "bg.neutral.inverse.subtle" | "bg.selected" | "bg.selected.bold" | "bg.brand.bold" | "bg.brand" | "bg.brand.boldest" | "bg.brand.subtle" | "bg.success" | "bg.success.bold" | "bg.warning" | "bg.warning.bold" | "bg.danger" | "bg.danger.bold" | "bg.info" | "bg.info.bold" | "bg.input" | "bg.accent.neutral" | "bg.accent" | "bg.accent.blue" | "bg.accent.green" | "bg.accent.indigo" | "bg.accent.lime" | "bg.accent.magenta" | "bg.accent.orange" | "bg.accent.purple" | "bg.accent.red" | "bg.accent.tan" | "bg.accent.teal" | "bg.accent.yellow" | "blanket" | "border" | "border.inverse" | "border.focused" | "icon" | "icon.decorative" | "icon.decorative.inverse" | "icon.warning" | "icon.danger" | "link" | "surface" | "surface.raised" | "surface.overlay" | "surface.selected" | "text" | "text.inverse" | "text.success" | "text.warning" | "text.danger" | "text.info" | "text.accent.neutral" | "text.accent" | "text.accent.red" | "text.accent.orange" | "text.accent.yellow" | "text.accent.lime" | "text.accent.green" | "text.accent.teal" | "text.accent.blue" | "text.accent.indigo" | "text.accent.purple" | "text.accent.magenta" | "text.accent.tan";
|
|
20137
|
+
textStyle: "display.lg" | "display.md" | "display.sm" | "display.xs" | "heading.lg" | "heading.md" | "heading.sm" | "heading.xs" | "body.lg" | "body.md" | "body.sm" | "body.xs" | "sans.lg" | "sans.md" | "sans.sm" | "sans.xs" | "serif.lg" | "serif.md" | "serif.sm" | "serif.xs" | "mono.lg" | "mono.md" | "mono.sm" | "mono.xs";
|
|
19653
20138
|
layerStyle: "surface.raised" | "surface.overlay";
|
|
19654
20139
|
}
|
|
19655
20140
|
|
|
@@ -21609,6 +22094,8 @@ declare interface WrapProperties {
|
|
|
21609
22094
|
|
|
21610
22095
|
declare interface WrapProps extends WrapProperties, DistributiveOmit<HTMLStyledProps<'div'>, keyof WrapProperties > {}
|
|
21611
22096
|
|
|
22097
|
+
declare type ZIndexToken = "0" | "1" | "2" | "3" | "4" | "5" | "10" | "1000" | "1100" | "1101" | "1200" | "-1" | "base" | "raised" | "elevated" | "overlay" | "modal" | "tooltip"
|
|
22098
|
+
|
|
21612
22099
|
export { }
|
|
21613
22100
|
|
|
21614
22101
|
|