@okshaun/components 1.0.2 → 2.0.1
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 +17118 -9339
- package/dist/index.js.map +1 -1
- package/dist/panda.buildinfo.json +696 -0
- package/dist/playroom-static.css +187432 -0
- package/dist/{preset-DCCViEDs.js → preset-Df8i1OIQ.js} +3651 -2776
- package/dist/preset-Df8i1OIQ.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 -239
- package/dist/specs/semantic-tokens.json +347 -146
- package/dist/specs/text-styles.json +72 -0
- package/dist/specs/tokens.json +267 -67
- package/dist/sprite.svg +1 -1
- package/dist/sprite.symbol.html +6662 -320
- package/dist/styles.css +36925 -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 +837 -337
- package/package.json +49 -24
- package/src/recipes/avatar.ts +98 -98
- package/src/recipes/badge.ts +22 -39
- package/src/recipes/box.ts +1 -7
- package/src/recipes/breadcrumbs.ts +42 -25
- package/src/recipes/button.ts +201 -105
- 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 +212 -0
- package/src/recipes/divider.ts +38 -32
- 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 +55 -25
- 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/recipes-slot.ts +19 -0
- 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 -10
- 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/shadows.ts +28 -37
- 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/shadows.ts +27 -16
- 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 +70 -0
- package/src/utils/splitProps.ts +3 -3
- package/dist/preset-DCCViEDs.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 -40
- 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/index.ts +0 -28
- 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
|
@@ -4,14 +4,13 @@ import { Component } from 'react';
|
|
|
4
4
|
import { ComponentPropsWithRef } from 'react';
|
|
5
5
|
import { ComponentType } from 'react';
|
|
6
6
|
import { Context } from 'react';
|
|
7
|
-
import { default as default_2 } from 'react';
|
|
8
7
|
import { ElementType } from 'react';
|
|
9
8
|
import { JSX } from 'react/jsx-runtime';
|
|
10
9
|
import { JSX as JSX_2 } from 'react';
|
|
11
10
|
import { JSXElementConstructor } from 'react';
|
|
11
|
+
import { MouseEvent as MouseEvent_2 } from 'react';
|
|
12
12
|
import { Placement } from '@floating-ui/react';
|
|
13
13
|
import { Preset } from '@pandacss/types';
|
|
14
|
-
import * as React_2 from 'react';
|
|
15
14
|
import { ReactElement } from 'react';
|
|
16
15
|
import { ReactNode } from 'react';
|
|
17
16
|
import { RefObject } from 'react';
|
|
@@ -69,6 +68,10 @@ declare type AriaAttributes =
|
|
|
69
68
|
|
|
70
69
|
declare type AspectRatioToken = "square" | "landscape" | "portrait" | "wide" | "ultrawide" | "golden"
|
|
71
70
|
|
|
71
|
+
declare type AsProp<T extends ElementType> = {
|
|
72
|
+
as?: T;
|
|
73
|
+
};
|
|
74
|
+
|
|
72
75
|
declare interface AsProps {
|
|
73
76
|
/**
|
|
74
77
|
* The element to render as
|
|
@@ -99,15 +102,19 @@ export declare interface AutocompleteOption {
|
|
|
99
102
|
disabled?: boolean;
|
|
100
103
|
}
|
|
101
104
|
|
|
102
|
-
export declare type AutocompleteProps =
|
|
105
|
+
export declare type AutocompleteProps = {
|
|
103
106
|
/** Input name attribute */
|
|
104
107
|
name: string;
|
|
105
108
|
/** Current input value */
|
|
106
109
|
value: string;
|
|
107
110
|
/** Callback when input value changes */
|
|
108
111
|
onChange: (value: string) => void;
|
|
112
|
+
/** Popup density */
|
|
113
|
+
density?: MenuDensity;
|
|
114
|
+
/** Deprecated alias for density */
|
|
115
|
+
packing?: MenuDensity;
|
|
109
116
|
/** Size of the input */
|
|
110
|
-
size?:
|
|
117
|
+
size?: 'sm' | 'md' | 'lg' | 'xl';
|
|
111
118
|
/** Available options to filter and display */
|
|
112
119
|
options: AutocompleteOption[];
|
|
113
120
|
/** Callback when an option is selected */
|
|
@@ -129,21 +136,18 @@ export declare type AutocompleteProps = MenuVariantProps & {
|
|
|
129
136
|
/** Message to show when no options match */
|
|
130
137
|
noResultsMessage?: string;
|
|
131
138
|
/** Props to pass to the TextInput */
|
|
132
|
-
inputProps?: Omit<TextInputProps,
|
|
139
|
+
inputProps?: Omit<TextInputProps, 'name' | 'value' | 'onChange' | 'disabled' | 'error' | 'id'>;
|
|
133
140
|
};
|
|
134
141
|
|
|
135
142
|
/**
|
|
136
143
|
* Avatar component for displaying user or entity images with optional
|
|
137
144
|
* presence and status indicators.
|
|
138
145
|
*/
|
|
139
|
-
export declare const Avatar:
|
|
140
|
-
(props: AvatarProps): JSX.Element;
|
|
141
|
-
displayName: string;
|
|
142
|
-
};
|
|
146
|
+
export declare const Avatar: (props: AvatarProps) => JSX.Element;
|
|
143
147
|
|
|
144
148
|
export declare type AvatarPresence = 'online' | 'busy' | 'offline' | 'focus';
|
|
145
149
|
|
|
146
|
-
export declare type AvatarProps = BoxProps & Omit<AvatarVariantProps, 'size' | 'shape'> & {
|
|
150
|
+
export declare type AvatarProps = Omit<BoxProps, keyof AvatarVariantProps> & Omit<AvatarVariantProps, 'size' | 'shape'> & {
|
|
147
151
|
/** Image source URL */
|
|
148
152
|
src?: string;
|
|
149
153
|
/** Alt text for image */
|
|
@@ -159,11 +163,9 @@ export declare type AvatarProps = BoxProps & Omit<AvatarVariantProps, 'size' | '
|
|
|
159
163
|
/** Status indicator (top-right) */
|
|
160
164
|
status?: AvatarStatus;
|
|
161
165
|
/** Custom fallback content (overrides initials) */
|
|
162
|
-
fallback?:
|
|
166
|
+
fallback?: ReactNode;
|
|
163
167
|
/** Border color for the avatar */
|
|
164
|
-
borderColor?:
|
|
165
|
-
/** Additional class name */
|
|
166
|
-
className?: string;
|
|
168
|
+
borderColor?: BoxProps['borderColor'];
|
|
167
169
|
};
|
|
168
170
|
|
|
169
171
|
export declare type AvatarShape = 'circle' | 'square' | 'hexagon';
|
|
@@ -207,10 +209,10 @@ export declare type BadgeProps = Omit<BoxProps, keyof BadgeVariantProps> & Omit<
|
|
|
207
209
|
/** Color scheme of the badge. Default: 'danger' */
|
|
208
210
|
variant?: BadgeVariant;
|
|
209
211
|
/** Content to wrap with the badge */
|
|
210
|
-
children?:
|
|
212
|
+
children?: ReactNode;
|
|
211
213
|
};
|
|
212
214
|
|
|
213
|
-
export declare type BadgeVariant = 'neutral' | '
|
|
215
|
+
export declare type BadgeVariant = 'neutral' | 'subtle' | 'bold' | 'inverse' | 'success' | 'danger' | 'warning' | 'info';
|
|
214
216
|
|
|
215
217
|
declare interface BadgeVariant_2 {
|
|
216
218
|
/**
|
|
@@ -222,7 +224,7 @@ declare interface BadgeVariant_2 {
|
|
|
222
224
|
/**
|
|
223
225
|
* @default "danger"
|
|
224
226
|
*/
|
|
225
|
-
variant: "neutral" | "subtle" | "
|
|
227
|
+
variant: "neutral" | "subtle" | "bold" | "inverse" | "success" | "warning" | "danger" | "info"
|
|
226
228
|
}
|
|
227
229
|
|
|
228
230
|
declare type BadgeVariantProps = {
|
|
@@ -249,15 +251,19 @@ declare type BaseSlotRecipeConfig<S extends string = string, V extends SlotRecip
|
|
|
249
251
|
|
|
250
252
|
declare type BlurToken = "sm" | "base" | "md" | "lg" | "xl" | "2xl" | "3xl"
|
|
251
253
|
|
|
252
|
-
declare type BorderToken = "default" | "
|
|
254
|
+
declare type BorderToken = "default" | "bold" | "inverse" | "disabled" | "input" | "focused" | "success" | "warning" | "danger" | "info" | "none"
|
|
253
255
|
|
|
254
256
|
declare type BorderWidthToken = "0" | "1" | "2" | "4" | "8" | "16"
|
|
255
257
|
|
|
256
|
-
|
|
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>>;
|
|
257
263
|
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
264
|
+
declare type BoxOwnProps = SystemStyleObject_2 & BoxVariantProps;
|
|
265
|
+
|
|
266
|
+
export declare type BoxProps<T extends ElementType = ElementType> = PolymorphicComponentProps<T, BoxOwnProps>;
|
|
261
267
|
|
|
262
268
|
declare interface BoxVariant {
|
|
263
269
|
|
|
@@ -269,7 +275,7 @@ declare type BoxVariantProps = {
|
|
|
269
275
|
|
|
270
276
|
export declare const Breadcrumbs: (props: BreadcrumbsProps) => JSX.Element;
|
|
271
277
|
|
|
272
|
-
export declare type BreadcrumbsProps = BoxProps & {
|
|
278
|
+
export declare type BreadcrumbsProps = Omit<BoxProps, keyof BreadcrumbsVariantProps> & BreadcrumbsVariantProps & {
|
|
273
279
|
items: {
|
|
274
280
|
id: string;
|
|
275
281
|
label: string;
|
|
@@ -277,6 +283,14 @@ export declare type BreadcrumbsProps = BoxProps & {
|
|
|
277
283
|
}[];
|
|
278
284
|
};
|
|
279
285
|
|
|
286
|
+
declare interface BreadcrumbsVariant {
|
|
287
|
+
|
|
288
|
+
}
|
|
289
|
+
|
|
290
|
+
declare type BreadcrumbsVariantProps = {
|
|
291
|
+
[key in keyof BreadcrumbsVariant]?: ConditionalValue<BreadcrumbsVariant[key]> | undefined
|
|
292
|
+
}
|
|
293
|
+
|
|
280
294
|
export declare function BreakpointIndicator(): JSX.Element;
|
|
281
295
|
|
|
282
296
|
declare type BreakpointKey = keyof typeof breakpoints;
|
|
@@ -299,7 +313,7 @@ export declare type ButtonProps = Omit<BoxProps, keyof ButtonVariantProps> & Omi
|
|
|
299
313
|
iconAfter?: IconNamesList;
|
|
300
314
|
href?: string;
|
|
301
315
|
loading?: boolean;
|
|
302
|
-
children
|
|
316
|
+
children: string | ReactNode;
|
|
303
317
|
disabled?: boolean;
|
|
304
318
|
type?: 'submit' | 'reset' | 'button';
|
|
305
319
|
gap?: NumericSizeToken;
|
|
@@ -309,11 +323,11 @@ declare interface ButtonVariant {
|
|
|
309
323
|
/**
|
|
310
324
|
* @default "default"
|
|
311
325
|
*/
|
|
312
|
-
variant: "default" | "primary" | "subtle" | "hollow"
|
|
326
|
+
variant: "default" | "primary" | "ghost" | "subtle" | "hollow" | "danger" | "selected" | "selectedBold" | "selectedSubtle"
|
|
313
327
|
/**
|
|
314
328
|
* @default "md"
|
|
315
329
|
*/
|
|
316
|
-
size: "
|
|
330
|
+
size: "sm" | "md" | "lg" | "xl"
|
|
317
331
|
iconBefore: boolean
|
|
318
332
|
iconAfter: boolean
|
|
319
333
|
}
|
|
@@ -324,7 +338,7 @@ declare type ButtonVariantProps = {
|
|
|
324
338
|
|
|
325
339
|
export declare const Card: (props: CardProps) => JSX.Element;
|
|
326
340
|
|
|
327
|
-
export declare type CardProps = BoxProps & CardVariantProps & {
|
|
341
|
+
export declare type CardProps = Omit<BoxProps, keyof CardVariantProps> & CardVariantProps & {
|
|
328
342
|
href?: string;
|
|
329
343
|
children?: string | ReactNode;
|
|
330
344
|
grabbed?: boolean;
|
|
@@ -337,9 +351,6 @@ declare interface CardVariant {
|
|
|
337
351
|
* @default "default"
|
|
338
352
|
*/
|
|
339
353
|
variant: "default" | "flat" | "sunken" | "ghost" | "overlay"
|
|
340
|
-
/**
|
|
341
|
-
* @default false
|
|
342
|
-
*/
|
|
343
354
|
interactive: boolean
|
|
344
355
|
}
|
|
345
356
|
|
|
@@ -379,7 +390,7 @@ export declare const CheckboxInput: (props: CheckboxInputProps) => JSX.Element;
|
|
|
379
390
|
export declare type CheckboxInputProps = Omit<BoxProps, keyof CheckboxInputVariantProps> & CheckboxInputVariantProps & {
|
|
380
391
|
name: string;
|
|
381
392
|
checked: boolean;
|
|
382
|
-
onChange:
|
|
393
|
+
onChange: CheckboxChangeHandler;
|
|
383
394
|
id?: string;
|
|
384
395
|
error?: boolean;
|
|
385
396
|
children?: string | ReactNode;
|
|
@@ -395,20 +406,13 @@ declare type CheckboxInputVariantProps = {
|
|
|
395
406
|
}
|
|
396
407
|
|
|
397
408
|
export declare type CheckboxProps = Omit<BoxProps, 'checked' | 'onChange' | keyof CheckboxVariantProps> & CheckboxVariantProps & {
|
|
398
|
-
/** Form field name */
|
|
399
409
|
name: string;
|
|
400
|
-
/** Controlled checked state (REQUIRED) */
|
|
401
410
|
checked: boolean;
|
|
402
|
-
|
|
403
|
-
onChange: ChangeEventHandler<HTMLInputElement>;
|
|
404
|
-
/** Unique identifier for the checkbox */
|
|
411
|
+
onChange: CheckboxChangeHandler;
|
|
405
412
|
id?: string;
|
|
406
|
-
/** Display indeterminate state (partially checked) */
|
|
407
|
-
indeterminate?: boolean;
|
|
408
|
-
/** Disable the checkbox */
|
|
409
|
-
disabled?: boolean;
|
|
410
|
-
/** Display error state */
|
|
411
413
|
error?: boolean;
|
|
414
|
+
disabled?: boolean;
|
|
415
|
+
indeterminate?: boolean;
|
|
412
416
|
};
|
|
413
417
|
|
|
414
418
|
declare interface CheckboxVariant {
|
|
@@ -421,9 +425,9 @@ declare type CheckboxVariantProps = {
|
|
|
421
425
|
|
|
422
426
|
export declare const Chip: (props: ChipProps) => JSX.Element;
|
|
423
427
|
|
|
424
|
-
export declare const ChipGroup:
|
|
428
|
+
export declare const ChipGroup: (props: ChipGroupProps) => JSX.Element;
|
|
425
429
|
|
|
426
|
-
export declare type ChipGroupProps = Omit<WrapProps, 'role'> & {
|
|
430
|
+
export declare type ChipGroupProps = Omit<WrapProps, 'role'> & Omit<BoxProps, keyof WrapProps> & {
|
|
427
431
|
type: ChipGroupType;
|
|
428
432
|
value: string | string[];
|
|
429
433
|
onChange: (value: string | string[]) => void;
|
|
@@ -454,7 +458,7 @@ declare interface ChipVariant {
|
|
|
454
458
|
/**
|
|
455
459
|
* @default "md"
|
|
456
460
|
*/
|
|
457
|
-
size: "
|
|
461
|
+
size: "sm" | "md" | "lg"
|
|
458
462
|
before: boolean
|
|
459
463
|
after: boolean
|
|
460
464
|
}
|
|
@@ -465,8 +469,8 @@ declare type ChipVariantProps = {
|
|
|
465
469
|
|
|
466
470
|
export declare const Code: (props: CodeProps) => JSX.Element;
|
|
467
471
|
|
|
468
|
-
export declare type CodeProps = Omit<BoxProps, keyof CodeVariantProps> & CodeVariantProps & {
|
|
469
|
-
children?: string |
|
|
472
|
+
export declare type CodeProps = Omit<BoxProps, keyof CodeVariantProps | keyof TextProps> & CodeVariantProps & TextProps & {
|
|
473
|
+
children?: string | ReactNode;
|
|
470
474
|
lang?: string;
|
|
471
475
|
};
|
|
472
476
|
|
|
@@ -478,7 +482,7 @@ declare type CodeVariantProps = {
|
|
|
478
482
|
[key in keyof CodeVariant]?: ConditionalValue<CodeVariant[key]> | undefined
|
|
479
483
|
}
|
|
480
484
|
|
|
481
|
-
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"
|
|
482
486
|
|
|
483
487
|
declare type ComponentProps<T extends ElementType> = T extends ComponentType<infer P> | Component<infer P>
|
|
484
488
|
? JSX_2.LibraryManagedAttributes<T, P>
|
|
@@ -1246,11 +1250,76 @@ declare namespace DataType {
|
|
|
1246
1250
|
type VisualBox = "border-box" | "content-box" | "padding-box";
|
|
1247
1251
|
}
|
|
1248
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
|
+
|
|
1249
1315
|
declare type DistributiveOmit<T, K extends keyof any> = T extends unknown ? Omit<T, K> : never
|
|
1250
1316
|
|
|
1251
1317
|
export declare const Divider: (props: DividerProps) => JSX.Element;
|
|
1252
1318
|
|
|
1253
|
-
export declare type DividerProps = Omit<BoxProps, keyof DividerVariantProps> & DividerVariantProps
|
|
1319
|
+
export declare type DividerProps = Omit<BoxProps, keyof DividerVariantProps> & DividerVariantProps & {
|
|
1320
|
+
direction?: string;
|
|
1321
|
+
weight?: string;
|
|
1322
|
+
};
|
|
1254
1323
|
|
|
1255
1324
|
declare interface DividerVariant {
|
|
1256
1325
|
/**
|
|
@@ -1277,7 +1346,7 @@ export declare type DropdownProps = MenuVariantProps & {
|
|
|
1277
1346
|
/** Offset distance from trigger (in pixels) */
|
|
1278
1347
|
offset?: number;
|
|
1279
1348
|
/** Children (MenuItem, MenuGroup, MenuDivider, etc.) */
|
|
1280
|
-
children:
|
|
1349
|
+
children: ReactNode;
|
|
1281
1350
|
/** Optional ID for ARIA attributes */
|
|
1282
1351
|
id?: string;
|
|
1283
1352
|
/** Disable the dropdown */
|
|
@@ -1292,7 +1361,7 @@ declare type EasingToken = "default" | "linear" | "in" | "out" | "in-out"
|
|
|
1292
1361
|
|
|
1293
1362
|
declare type Fallback<T> = { [P in keyof T]: T[P] | readonly NonNullable<T[P]>[] };
|
|
1294
1363
|
|
|
1295
|
-
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"
|
|
1296
1365
|
|
|
1297
1366
|
declare type FontToken = "heading" | "sans" | "body" | "serif" | "mono"
|
|
1298
1367
|
|
|
@@ -1301,17 +1370,17 @@ declare type FontWeightToken = "light" | "normal" | "medium" | "bold" | "black"
|
|
|
1301
1370
|
export declare const FormField: (props: FormFieldProps) => JSX.Element;
|
|
1302
1371
|
|
|
1303
1372
|
export declare type FormFieldProps = Omit<BoxProps, keyof FormFieldVariantProps> & FormFieldVariantProps & {
|
|
1304
|
-
label
|
|
1373
|
+
label: string;
|
|
1374
|
+
labelFor: string;
|
|
1375
|
+
children: ReactNode;
|
|
1305
1376
|
helpText?: string;
|
|
1306
1377
|
required?: boolean;
|
|
1307
1378
|
error?: boolean;
|
|
1308
1379
|
errorText?: string;
|
|
1309
1380
|
disabled?: boolean;
|
|
1310
|
-
tooltip?: boolean;
|
|
1311
|
-
tooltipCaret?: boolean;
|
|
1312
1381
|
tooltipTitle?: string;
|
|
1313
|
-
|
|
1314
|
-
|
|
1382
|
+
tooltipText?: string;
|
|
1383
|
+
size?: 'sm' | 'md' | 'lg' | 'xl';
|
|
1315
1384
|
};
|
|
1316
1385
|
|
|
1317
1386
|
declare interface FormFieldVariant {
|
|
@@ -1319,6 +1388,10 @@ declare interface FormFieldVariant {
|
|
|
1319
1388
|
* @default "default"
|
|
1320
1389
|
*/
|
|
1321
1390
|
layout: "default" | "inline"
|
|
1391
|
+
/**
|
|
1392
|
+
* @default "md"
|
|
1393
|
+
*/
|
|
1394
|
+
size: "sm" | "md" | "lg" | "xl"
|
|
1322
1395
|
}
|
|
1323
1396
|
|
|
1324
1397
|
declare type FormFieldVariantProps = {
|
|
@@ -1332,7 +1405,7 @@ export declare type GlobalStyleObject = Record<string, unknown>;
|
|
|
1332
1405
|
export declare const Heading: (props: HeadingProps) => JSX.Element;
|
|
1333
1406
|
|
|
1334
1407
|
export declare type HeadingProps = Omit<TextProps, keyof HeadingVariantProps> & HeadingVariantProps & {
|
|
1335
|
-
children?: string |
|
|
1408
|
+
children?: string | ReactNode;
|
|
1336
1409
|
level?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
|
|
1337
1410
|
};
|
|
1338
1411
|
|
|
@@ -1341,13 +1414,31 @@ declare interface HeadingVariant {
|
|
|
1341
1414
|
* @default "h2"
|
|
1342
1415
|
*/
|
|
1343
1416
|
level: "h1" | "h2" | "h3" | "h4"
|
|
1344
|
-
|
|
1417
|
+
allCaps: boolean
|
|
1345
1418
|
}
|
|
1346
1419
|
|
|
1347
1420
|
declare type HeadingVariantProps = {
|
|
1348
1421
|
[key in keyof HeadingVariant]?: ConditionalValue<HeadingVariant[key]> | undefined
|
|
1349
1422
|
}
|
|
1350
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
|
+
|
|
1351
1442
|
declare type HTMLStyledProps<T extends ElementType> = JsxHTMLProps<ComponentProps<T> & UnstyledProps & AsProps, JsxStyleProps>
|
|
1352
1443
|
|
|
1353
1444
|
export declare const Icon: (props: IconProps) => JSX.Element;
|
|
@@ -1355,10 +1446,11 @@ export declare const Icon: (props: IconProps) => JSX.Element;
|
|
|
1355
1446
|
export declare const IconButton: (props: IconButtonProps) => JSX.Element;
|
|
1356
1447
|
|
|
1357
1448
|
export declare type IconButtonProps = Omit<BoxProps, keyof IconButtonVariantProps> & IconButtonVariantProps & {
|
|
1449
|
+
iconName: IconNamesList;
|
|
1450
|
+
altText: string;
|
|
1358
1451
|
href?: string;
|
|
1359
1452
|
loading?: boolean;
|
|
1360
1453
|
disabled?: boolean;
|
|
1361
|
-
iconName?: IconNamesList;
|
|
1362
1454
|
type?: 'submit' | 'reset' | 'button';
|
|
1363
1455
|
};
|
|
1364
1456
|
|
|
@@ -1366,11 +1458,11 @@ declare interface IconButtonVariant {
|
|
|
1366
1458
|
/**
|
|
1367
1459
|
* @default "default"
|
|
1368
1460
|
*/
|
|
1369
|
-
variant: "default" | "primary" | "subtle" | "hollow"
|
|
1461
|
+
variant: "default" | "primary" | "ghost" | "subtle" | "hollow" | "danger" | "selected" | "selectedBold" | "selectedSubtle"
|
|
1370
1462
|
/**
|
|
1371
1463
|
* @default "md"
|
|
1372
1464
|
*/
|
|
1373
|
-
size: "
|
|
1465
|
+
size: "sm" | "md" | "lg" | "xl"
|
|
1374
1466
|
}
|
|
1375
1467
|
|
|
1376
1468
|
declare type IconButtonVariantProps = {
|
|
@@ -1422,6 +1514,7 @@ export declare const IconNames: {
|
|
|
1422
1514
|
readonly broadcast: "broadcast";
|
|
1423
1515
|
readonly building: "building";
|
|
1424
1516
|
readonly 'calendar-add': "calendar-add";
|
|
1517
|
+
readonly 'calendar-lock': "calendar-lock";
|
|
1425
1518
|
readonly 'calendar-view-day': "calendar-view-day";
|
|
1426
1519
|
readonly 'calendar-view-month': "calendar-view-month";
|
|
1427
1520
|
readonly 'calendar-view-week': "calendar-view-week";
|
|
@@ -1459,8 +1552,10 @@ export declare const IconNames: {
|
|
|
1459
1552
|
readonly code: "code";
|
|
1460
1553
|
readonly color: "color";
|
|
1461
1554
|
readonly compass: "compass";
|
|
1555
|
+
readonly computer: "computer";
|
|
1462
1556
|
readonly cone: "cone";
|
|
1463
1557
|
readonly confetti: "confetti";
|
|
1558
|
+
readonly cookie: "cookie";
|
|
1464
1559
|
readonly copy: "copy";
|
|
1465
1560
|
readonly 'credit-card': "credit-card";
|
|
1466
1561
|
readonly 'cube-focus': "cube-focus";
|
|
@@ -1498,6 +1593,12 @@ export declare const IconNames: {
|
|
|
1498
1593
|
readonly 'fit-screen': "fit-screen";
|
|
1499
1594
|
readonly 'flag-checkered': "flag-checkered";
|
|
1500
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";
|
|
1501
1602
|
readonly forklift: "forklift";
|
|
1502
1603
|
readonly 'fullscreen-exit': "fullscreen-exit";
|
|
1503
1604
|
readonly fullscreen: "fullscreen";
|
|
@@ -1554,6 +1655,7 @@ export declare const IconNames: {
|
|
|
1554
1655
|
readonly messages: "messages";
|
|
1555
1656
|
readonly 'minus-thick': "minus-thick";
|
|
1556
1657
|
readonly minus: "minus";
|
|
1658
|
+
readonly mobile: "mobile";
|
|
1557
1659
|
readonly money: "money";
|
|
1558
1660
|
readonly monitor: "monitor";
|
|
1559
1661
|
readonly moon: "moon";
|
|
@@ -1566,6 +1668,7 @@ export declare const IconNames: {
|
|
|
1566
1668
|
readonly note: "note";
|
|
1567
1669
|
readonly notepad: "notepad";
|
|
1568
1670
|
readonly notification: "notification";
|
|
1671
|
+
readonly numpad: "numpad";
|
|
1569
1672
|
readonly nut: "nut";
|
|
1570
1673
|
readonly order: "order";
|
|
1571
1674
|
readonly package: "package";
|
|
@@ -1577,11 +1680,13 @@ export declare const IconNames: {
|
|
|
1577
1680
|
readonly pause: "pause";
|
|
1578
1681
|
readonly pencil: "pencil";
|
|
1579
1682
|
readonly percent: "percent";
|
|
1683
|
+
readonly phone: "phone";
|
|
1580
1684
|
readonly 'play-pause': "play-pause";
|
|
1581
1685
|
readonly play: "play";
|
|
1582
1686
|
readonly plus: "plus";
|
|
1583
1687
|
readonly printer: "printer";
|
|
1584
1688
|
readonly prohibit: "prohibit";
|
|
1689
|
+
readonly 'qr-code': "qr-code";
|
|
1585
1690
|
readonly 'question-mark': "question-mark";
|
|
1586
1691
|
readonly quote: "quote";
|
|
1587
1692
|
readonly 'radio-checked': "radio-checked";
|
|
@@ -1624,6 +1729,7 @@ export declare const IconNames: {
|
|
|
1624
1729
|
readonly 'sort-descending': "sort-descending";
|
|
1625
1730
|
readonly 'sort-time-down': "sort-time-down";
|
|
1626
1731
|
readonly 'sort-time-up': "sort-time-up";
|
|
1732
|
+
readonly sparkle: "sparkle";
|
|
1627
1733
|
readonly 'square-add': "square-add";
|
|
1628
1734
|
readonly 'square-inside': "square-inside";
|
|
1629
1735
|
readonly 'square-select': "square-select";
|
|
@@ -1651,6 +1757,7 @@ export declare const IconNames: {
|
|
|
1651
1757
|
readonly toolbox: "toolbox";
|
|
1652
1758
|
readonly tools: "tools";
|
|
1653
1759
|
readonly trash: "trash";
|
|
1760
|
+
readonly trolley: "trolley";
|
|
1654
1761
|
readonly trophy: "trophy";
|
|
1655
1762
|
readonly 'truck-trailer': "truck-trailer";
|
|
1656
1763
|
readonly update: "update";
|
|
@@ -1682,14 +1789,346 @@ export declare const IconNames: {
|
|
|
1682
1789
|
readonly 'zoom-out': "zoom-out";
|
|
1683
1790
|
};
|
|
1684
1791
|
|
|
1685
|
-
declare type IconNamesList =
|
|
1686
|
-
|
|
1687
|
-
|
|
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 & {
|
|
1688
2112
|
name: IconNamesList;
|
|
1689
2113
|
size?: AllowedIconSizes;
|
|
1690
2114
|
fill?: ColorToken;
|
|
1691
2115
|
};
|
|
1692
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
|
+
|
|
1693
2132
|
declare type Important = ImportantMark | WhitespaceImportant
|
|
1694
2133
|
|
|
1695
2134
|
declare type ImportantMark = "!" | "!important"
|
|
@@ -1704,8 +2143,8 @@ declare type JsxStyleProps = SystemStyleObject_2 & WithCss
|
|
|
1704
2143
|
export declare const Label: (props: LabelProps) => JSX.Element;
|
|
1705
2144
|
|
|
1706
2145
|
export declare type LabelProps = Omit<BoxProps, keyof LabelVariantProps> & LabelVariantProps & {
|
|
1707
|
-
htmlFor
|
|
1708
|
-
children?: string |
|
|
2146
|
+
htmlFor: string;
|
|
2147
|
+
children?: string | ReactNode;
|
|
1709
2148
|
};
|
|
1710
2149
|
|
|
1711
2150
|
declare interface LabelVariant {
|
|
@@ -1717,8 +2156,8 @@ declare interface LabelVariant {
|
|
|
1717
2156
|
italic: boolean
|
|
1718
2157
|
underline: boolean
|
|
1719
2158
|
truncate: boolean
|
|
1720
|
-
|
|
1721
|
-
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"
|
|
1722
2161
|
weight: "light" | "normal" | "medium" | "bold" | "black"
|
|
1723
2162
|
_disabled: boolean
|
|
1724
2163
|
}
|
|
@@ -1745,7 +2184,7 @@ export declare type LinkProps = Omit<BoxProps, keyof LinkVariantProps> & LinkVar
|
|
|
1745
2184
|
bold?: boolean;
|
|
1746
2185
|
weight?: FontWeightToken;
|
|
1747
2186
|
className?: string;
|
|
1748
|
-
children?:
|
|
2187
|
+
children?: ReactNode;
|
|
1749
2188
|
};
|
|
1750
2189
|
|
|
1751
2190
|
declare interface LinkVariant {
|
|
@@ -1757,8 +2196,8 @@ declare interface LinkVariant {
|
|
|
1757
2196
|
italic: boolean
|
|
1758
2197
|
underline: boolean
|
|
1759
2198
|
truncate: boolean
|
|
1760
|
-
|
|
1761
|
-
size: "12" | "14" | "16" | "20" | "24" | "32" | "40" | "48" | "64" | "72" | "80" | "96"
|
|
2199
|
+
allCaps: boolean
|
|
2200
|
+
size: "10" | "12" | "14" | "16" | "20" | "24" | "32" | "40" | "48" | "64" | "72" | "80" | "96"
|
|
1762
2201
|
weight: "light" | "normal" | "medium" | "bold" | "black"
|
|
1763
2202
|
_disabled: boolean
|
|
1764
2203
|
}
|
|
@@ -1767,173 +2206,182 @@ declare type LinkVariantProps = {
|
|
|
1767
2206
|
[key in keyof LinkVariant]?: ConditionalValue<LinkVariant[key]> | undefined
|
|
1768
2207
|
}
|
|
1769
2208
|
|
|
1770
|
-
export declare const
|
|
2209
|
+
export declare const List: (props: ListProps) => JSX.Element;
|
|
1771
2210
|
|
|
1772
|
-
declare
|
|
2211
|
+
export declare type ListDensity = 'compact' | 'comfortable' | 'spacious';
|
|
1773
2212
|
|
|
1774
|
-
export declare const
|
|
2213
|
+
export declare const ListItem: (props: ListItemProps) => JSX.Element;
|
|
1775
2214
|
|
|
1776
|
-
declare
|
|
1777
|
-
open: boolean;
|
|
1778
|
-
setOpen: (open: boolean) => void;
|
|
1779
|
-
refs: {
|
|
1780
|
-
setReference: (node: HTMLElement | null) => void;
|
|
1781
|
-
setFloating: (node: HTMLElement | null) => void;
|
|
1782
|
-
};
|
|
1783
|
-
floatingStyles: React.CSSProperties;
|
|
1784
|
-
getReferenceProps: (userProps?: React.HTMLProps<Element>) => Record<string, unknown>;
|
|
1785
|
-
getFloatingProps: (userProps?: React.HTMLProps<HTMLElement>) => Record<string, unknown>;
|
|
1786
|
-
getItemProps: (userProps?: React.HTMLProps<HTMLElement> & {
|
|
1787
|
-
index?: number;
|
|
1788
|
-
active?: boolean;
|
|
1789
|
-
}) => Record<string, unknown>;
|
|
1790
|
-
activeIndex: number | null;
|
|
1791
|
-
listRef: React.RefObject<(HTMLElement | null)[]>;
|
|
1792
|
-
classes: ReturnType<menu>;
|
|
1793
|
-
}
|
|
2215
|
+
export declare const ListItemGroup: (props: ListItemGroupProps) => JSX.Element;
|
|
1794
2216
|
|
|
1795
|
-
export declare
|
|
2217
|
+
export declare type ListItemGroupProps = Omit<BoxProps, keyof ListItemGroupVariantProps | 'children'> & ListItemGroupVariantProps & {
|
|
2218
|
+
label?: string;
|
|
2219
|
+
children: BoxProps['children'];
|
|
2220
|
+
divider?: boolean;
|
|
2221
|
+
};
|
|
1796
2222
|
|
|
1797
|
-
|
|
2223
|
+
declare interface ListItemGroupVariant {
|
|
2224
|
+
/**
|
|
2225
|
+
* @default "compact"
|
|
2226
|
+
*/
|
|
2227
|
+
density: "compact" | "comfortable" | "spacious"
|
|
2228
|
+
}
|
|
1798
2229
|
|
|
1799
|
-
|
|
2230
|
+
declare type ListItemGroupVariantProps = {
|
|
2231
|
+
[key in keyof ListItemGroupVariant]?: ConditionalValue<ListItemGroupVariant[key]> | undefined
|
|
2232
|
+
}
|
|
1800
2233
|
|
|
1801
|
-
export declare type
|
|
1802
|
-
|
|
2234
|
+
export declare type ListItemProps = Omit<BoxProps<'button'>, keyof ListItemVariantProps | 'as' | 'type'> & Omit<ListItemVariantProps, 'selected' | 'iconBefore' | 'iconAfter'> & {
|
|
2235
|
+
active?: boolean;
|
|
1803
2236
|
label?: string;
|
|
1804
|
-
|
|
1805
|
-
|
|
2237
|
+
description?: string;
|
|
2238
|
+
query?: string;
|
|
2239
|
+
highlightMatches?: boolean;
|
|
2240
|
+
controlName?: string;
|
|
2241
|
+
onControlChange?: ChangeEventHandler<HTMLInputElement>;
|
|
2242
|
+
selected?: boolean;
|
|
2243
|
+
variant?: ListItemVariantProps['variant'];
|
|
2244
|
+
density?: ListItemVariantProps['density'];
|
|
2245
|
+
iconBefore?: IconNamesList;
|
|
2246
|
+
iconAfter?: IconNamesList;
|
|
1806
2247
|
};
|
|
1807
2248
|
|
|
1808
|
-
|
|
2249
|
+
declare interface ListItemVariant {
|
|
2250
|
+
/**
|
|
2251
|
+
* @default "default"
|
|
2252
|
+
*/
|
|
2253
|
+
variant: "default" | "checkbox" | "toggle" | "divider"
|
|
2254
|
+
/**
|
|
2255
|
+
* @default "compact"
|
|
2256
|
+
*/
|
|
2257
|
+
density: "compact" | "comfortable" | "spacious"
|
|
2258
|
+
/**
|
|
2259
|
+
* @default false
|
|
2260
|
+
*/
|
|
2261
|
+
selected: boolean
|
|
2262
|
+
iconBefore: boolean
|
|
2263
|
+
iconAfter: boolean
|
|
2264
|
+
}
|
|
1809
2265
|
|
|
1810
|
-
|
|
1811
|
-
|
|
1812
|
-
|
|
1813
|
-
|
|
1814
|
-
|
|
1815
|
-
|
|
1816
|
-
|
|
1817
|
-
|
|
1818
|
-
|
|
1819
|
-
/** Primary label (required) */
|
|
1820
|
-
label: string | default_2.ReactNode;
|
|
1821
|
-
/** Secondary description text */
|
|
1822
|
-
description?: string;
|
|
1823
|
-
/** Icon on the left side */
|
|
1824
|
-
iconLeft?: IconNamesList;
|
|
1825
|
-
/** Icon on the right side */
|
|
1826
|
-
iconRight?: IconNamesList;
|
|
1827
|
-
/** Text to highlight (for autocomplete/search scenarios) */
|
|
1828
|
-
highlightMatch?: string;
|
|
1829
|
-
/** Selection indicator style (only for select types) */
|
|
1830
|
-
selectionIndicator?: SelectionIndicator;
|
|
1831
|
-
/** Index for keyboard navigation (managed internally via context) */
|
|
1832
|
-
index?: number;
|
|
2266
|
+
declare type ListItemVariantProps = {
|
|
2267
|
+
[key in keyof ListItemVariant]?: ListItemVariant[key] | undefined
|
|
2268
|
+
}
|
|
2269
|
+
|
|
2270
|
+
export declare type ListProps = Omit<BoxProps, keyof ListVariantProps | 'children'> & ListVariantProps & {
|
|
2271
|
+
children: ReactNode;
|
|
2272
|
+
density?: ListDensity;
|
|
2273
|
+
query?: string;
|
|
2274
|
+
highlightMatches?: boolean;
|
|
1833
2275
|
};
|
|
1834
2276
|
|
|
1835
|
-
|
|
2277
|
+
declare interface ListVariant {
|
|
2278
|
+
|
|
2279
|
+
}
|
|
2280
|
+
|
|
2281
|
+
declare type ListVariantProps = {
|
|
2282
|
+
[key in keyof ListVariant]?: ConditionalValue<ListVariant[key]> | undefined
|
|
2283
|
+
}
|
|
2284
|
+
|
|
2285
|
+
export declare const Menu: (props: MenuProps) => JSX.Element;
|
|
1836
2286
|
|
|
1837
|
-
export declare
|
|
1838
|
-
|
|
1839
|
-
|
|
2287
|
+
export declare type MenuContext = {
|
|
2288
|
+
density: MenuDensity;
|
|
2289
|
+
panel?: MenuVariantProps['panel'];
|
|
2290
|
+
closeOnSelect: boolean;
|
|
2291
|
+
subMenuInteraction: SubMenuInteraction;
|
|
2292
|
+
inline: boolean;
|
|
2293
|
+
onCloseMenu: () => void;
|
|
2294
|
+
onPushDiginLevel: (title: string, levelChildren: ReactNode) => void;
|
|
2295
|
+
onPopDiginLevel: () => void;
|
|
2296
|
+
diginDepth: number;
|
|
1840
2297
|
};
|
|
1841
2298
|
|
|
1842
|
-
export declare
|
|
2299
|
+
export declare type MenuDensity = 'compact' | 'comfortable' | 'spacious';
|
|
1843
2300
|
|
|
1844
|
-
|
|
2301
|
+
declare type MenuFilterContextValue = {
|
|
2302
|
+
query: string;
|
|
2303
|
+
filterMode: MenuFilterMode;
|
|
2304
|
+
highlightMatches: boolean;
|
|
2305
|
+
getItemText: (item: {
|
|
2306
|
+
label?: string;
|
|
2307
|
+
description?: string;
|
|
2308
|
+
}) => string;
|
|
2309
|
+
};
|
|
1845
2310
|
|
|
1846
|
-
|
|
2311
|
+
declare type MenuFilterMode = 'none' | 'contains';
|
|
1847
2312
|
|
|
1848
|
-
export declare
|
|
1849
|
-
|
|
2313
|
+
export declare const MenuGroup: (props: MenuGroupProps) => JSX.Element | null;
|
|
2314
|
+
|
|
2315
|
+
export declare type MenuGroupProps = BoxProps & {
|
|
1850
2316
|
label?: string;
|
|
1851
|
-
|
|
1852
|
-
|
|
2317
|
+
children: ReactNode;
|
|
2318
|
+
divider?: boolean;
|
|
1853
2319
|
};
|
|
1854
2320
|
|
|
1855
|
-
export declare const
|
|
1856
|
-
(props: MenuListItemProps): JSX.Element;
|
|
1857
|
-
displayName: string;
|
|
1858
|
-
};
|
|
2321
|
+
export declare const MenuItem: (props: MenuItemProps) => JSX.Element | null;
|
|
1859
2322
|
|
|
1860
|
-
export declare type
|
|
1861
|
-
|
|
1862
|
-
type?: MenuItemType;
|
|
1863
|
-
/** Selected state (for single-select and multi-select) */
|
|
1864
|
-
selected?: boolean;
|
|
1865
|
-
/** Active highlight state (controlled externally) */
|
|
1866
|
-
active?: boolean;
|
|
1867
|
-
/** Click handler */
|
|
1868
|
-
onClick?: default_2.MouseEventHandler<HTMLDivElement>;
|
|
1869
|
-
/** Disable the item */
|
|
1870
|
-
disabled?: boolean;
|
|
1871
|
-
/** Primary label (required) */
|
|
1872
|
-
label: string | default_2.ReactNode;
|
|
1873
|
-
/** Secondary description text */
|
|
2323
|
+
export declare type MenuItemProps = Omit<BoxProps<'button'>, 'as' | 'ref' | 'onClick' | 'type'> & Omit<MenuVariantProps, 'iconBefore' | 'iconAfter'> & {
|
|
2324
|
+
label?: string;
|
|
1874
2325
|
description?: string;
|
|
1875
|
-
|
|
1876
|
-
|
|
1877
|
-
|
|
1878
|
-
|
|
1879
|
-
|
|
1880
|
-
|
|
1881
|
-
|
|
1882
|
-
|
|
2326
|
+
variant?: MenuItemVariant;
|
|
2327
|
+
disabled?: boolean;
|
|
2328
|
+
selected?: boolean;
|
|
2329
|
+
iconBefore?: IconNamesList;
|
|
2330
|
+
iconAfter?: IconNamesList;
|
|
2331
|
+
href?: string;
|
|
2332
|
+
target?: string;
|
|
2333
|
+
rel?: string;
|
|
2334
|
+
closeOnSelect?: boolean;
|
|
2335
|
+
density?: MenuDensity;
|
|
2336
|
+
textValue?: string;
|
|
2337
|
+
onClick?: (event: MouseEvent_2<HTMLElement>) => void;
|
|
1883
2338
|
};
|
|
1884
2339
|
|
|
1885
|
-
export declare type
|
|
2340
|
+
export declare type MenuItemVariant = 'default' | 'checkbox' | 'toggle' | 'divider';
|
|
1886
2341
|
|
|
1887
|
-
export declare type MenuProps =
|
|
1888
|
-
|
|
1889
|
-
|
|
1890
|
-
|
|
1891
|
-
|
|
1892
|
-
|
|
2342
|
+
export declare type MenuProps = {
|
|
2343
|
+
trigger?: ReactElement;
|
|
2344
|
+
children: ReactNode;
|
|
2345
|
+
open?: boolean;
|
|
2346
|
+
defaultOpen?: boolean;
|
|
2347
|
+
onOpenChange?: (open: boolean) => void;
|
|
1893
2348
|
placement?: Placement;
|
|
1894
|
-
|
|
1895
|
-
|
|
1896
|
-
|
|
1897
|
-
|
|
1898
|
-
|
|
1899
|
-
|
|
2349
|
+
strategy?: 'absolute' | 'fixed';
|
|
2350
|
+
closeOnSelect?: boolean;
|
|
2351
|
+
inline?: boolean;
|
|
2352
|
+
triggerInteraction?: MenuTriggerInteraction;
|
|
2353
|
+
triggerOpenDelay?: number;
|
|
2354
|
+
triggerCloseDelay?: number;
|
|
2355
|
+
subMenuInteraction?: SubMenuInteraction;
|
|
2356
|
+
density?: MenuDensity;
|
|
2357
|
+
query?: string;
|
|
2358
|
+
onQueryChange?: (query: string) => void;
|
|
2359
|
+
filterMode?: MenuFilterMode;
|
|
2360
|
+
renderNoResults?: ReactNode;
|
|
2361
|
+
highlightMatches?: boolean;
|
|
2362
|
+
getItemText?: (item: {
|
|
2363
|
+
label?: string;
|
|
2364
|
+
description?: string;
|
|
2365
|
+
}) => string;
|
|
2366
|
+
panel?: MenuVariantProps['panel'];
|
|
2367
|
+
} & BoxProps;
|
|
2368
|
+
|
|
2369
|
+
export declare const MenuProvider: ({ children, root, filter }: MenuProviderProps) => JSX.Element;
|
|
2370
|
+
|
|
2371
|
+
export declare type MenuProviderProps = {
|
|
2372
|
+
children: ReactNode;
|
|
2373
|
+
root?: Partial<MenuContext>;
|
|
2374
|
+
filter?: Partial<MenuFilterContextValue>;
|
|
1900
2375
|
};
|
|
1901
2376
|
|
|
1902
|
-
declare
|
|
1903
|
-
__slot: MenuSlot
|
|
1904
|
-
__type: MenuVariantProps
|
|
1905
|
-
(props?: MenuVariantProps): Pretty<Record<MenuSlot, string>>
|
|
1906
|
-
raw: (props?: MenuVariantProps) => MenuVariantProps
|
|
1907
|
-
variantMap: MenuVariantMap
|
|
1908
|
-
variantKeys: Array<keyof MenuVariant>
|
|
1909
|
-
splitVariantProps<Props extends MenuVariantProps>(props: Props): [MenuVariantProps, Pretty<DistributiveOmit<Props, keyof MenuVariantProps>>]
|
|
1910
|
-
getVariantProps: (props?: MenuVariantProps) => MenuVariantProps
|
|
1911
|
-
}
|
|
1912
|
-
|
|
1913
|
-
declare type MenuSlot = "menu" | "menuItem" | "menuItemIndicator" | "menuItemIconLeft" | "menuItemIconRight" | "menuItemContent" | "menuItemLabel" | "menuItemDescription" | "menuDivider" | "menuGroup" | "menuGroupLabel"
|
|
1914
|
-
|
|
1915
|
-
export declare const MenuTrigger: (props: MenuTriggerProps) => default_2.ReactElement<Record<string, unknown>, string | default_2.JSXElementConstructor<any>>;
|
|
1916
|
-
|
|
1917
|
-
export declare type MenuTriggerProps = Omit<BoxProps, 'children'> & {
|
|
1918
|
-
/** Trigger element (button, custom component, etc.) */
|
|
1919
|
-
children: default_2.ReactElement;
|
|
1920
|
-
/** Disable the trigger */
|
|
1921
|
-
disabled?: boolean;
|
|
1922
|
-
};
|
|
2377
|
+
declare type MenuTriggerInteraction = 'click' | 'hover';
|
|
1923
2378
|
|
|
1924
2379
|
declare interface MenuVariant {
|
|
1925
2380
|
/**
|
|
1926
|
-
* @default "
|
|
2381
|
+
* @default "compact"
|
|
1927
2382
|
*/
|
|
1928
|
-
|
|
1929
|
-
|
|
1930
|
-
* @default "left"
|
|
1931
|
-
*/
|
|
1932
|
-
indicatorPosition: "left" | "right"
|
|
1933
|
-
}
|
|
1934
|
-
|
|
1935
|
-
declare type MenuVariantMap = {
|
|
1936
|
-
[key in keyof MenuVariant]: Array<MenuVariant[key]>
|
|
2383
|
+
density: "compact" | "comfortable" | "spacious"
|
|
2384
|
+
panel: boolean
|
|
1937
2385
|
}
|
|
1938
2386
|
|
|
1939
2387
|
declare type MenuVariantProps = {
|
|
@@ -1946,7 +2394,7 @@ export declare const ModalBody: (props: ModalBodyProps) => JSX.Element;
|
|
|
1946
2394
|
|
|
1947
2395
|
export declare type ModalBodyProps = Omit<BoxProps, 'children'> & {
|
|
1948
2396
|
/** Body content */
|
|
1949
|
-
children:
|
|
2397
|
+
children: ReactNode;
|
|
1950
2398
|
};
|
|
1951
2399
|
|
|
1952
2400
|
export declare const ModalContext: Context<ModalContextValue | null>;
|
|
@@ -1964,18 +2412,18 @@ export declare const ModalFooter: (props: ModalFooterProps) => JSX.Element;
|
|
|
1964
2412
|
|
|
1965
2413
|
export declare type ModalFooterProps = Omit<BoxProps, 'children'> & {
|
|
1966
2414
|
/** Footer content (typically action buttons) */
|
|
1967
|
-
children:
|
|
2415
|
+
children: ReactNode;
|
|
1968
2416
|
};
|
|
1969
2417
|
|
|
1970
2418
|
export declare const ModalHeader: (props: ModalHeaderProps) => JSX.Element;
|
|
1971
2419
|
|
|
1972
2420
|
export declare type ModalHeaderProps = Omit<BoxProps, 'children'> & {
|
|
1973
2421
|
/** Title text */
|
|
1974
|
-
title?: string
|
|
2422
|
+
title?: string;
|
|
1975
2423
|
/** Whether to show the close button */
|
|
1976
2424
|
showCloseButton?: boolean;
|
|
1977
2425
|
/** Children (custom header content) */
|
|
1978
|
-
children?:
|
|
2426
|
+
children?: ReactNode;
|
|
1979
2427
|
};
|
|
1980
2428
|
|
|
1981
2429
|
export declare type ModalProps = Omit<BoxProps, keyof ModalVariantProps> & ModalVariantProps & {
|
|
@@ -1986,7 +2434,7 @@ export declare type ModalProps = Omit<BoxProps, keyof ModalVariantProps> & Modal
|
|
|
1986
2434
|
/** Whether clicking the overlay should close the modal */
|
|
1987
2435
|
preventOverlayClose?: boolean;
|
|
1988
2436
|
/** Children (ModalHeader, ModalBody, ModalFooter) */
|
|
1989
|
-
children:
|
|
2437
|
+
children: ReactNode;
|
|
1990
2438
|
/** Optional ID for ARIA attributes */
|
|
1991
2439
|
id?: string;
|
|
1992
2440
|
};
|
|
@@ -1995,7 +2443,11 @@ declare interface ModalVariant {
|
|
|
1995
2443
|
/**
|
|
1996
2444
|
* @default "md"
|
|
1997
2445
|
*/
|
|
1998
|
-
size: "sm" | "md" | "lg"
|
|
2446
|
+
size: "sm" | "md" | "lg" | "xl" | "full" | "mobile"
|
|
2447
|
+
/**
|
|
2448
|
+
* @default "default"
|
|
2449
|
+
*/
|
|
2450
|
+
variant: "default" | "confirmation"
|
|
1999
2451
|
}
|
|
2000
2452
|
|
|
2001
2453
|
declare type ModalVariantProps = {
|
|
@@ -2156,6 +2608,9 @@ declare const numericSizes: {
|
|
|
2156
2608
|
'24': {
|
|
2157
2609
|
value: string;
|
|
2158
2610
|
};
|
|
2611
|
+
'28': {
|
|
2612
|
+
value: string;
|
|
2613
|
+
};
|
|
2159
2614
|
'32': {
|
|
2160
2615
|
value: string;
|
|
2161
2616
|
};
|
|
@@ -2254,7 +2709,7 @@ declare const numericSizes: {
|
|
|
2254
2709
|
};
|
|
2255
2710
|
};
|
|
2256
2711
|
|
|
2257
|
-
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"
|
|
2712
|
+
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"
|
|
2258
2713
|
|
|
2259
2714
|
declare interface ObsoleteProperties<TLength = (string & {}) | 0, TTime = string & {}> {
|
|
2260
2715
|
/**
|
|
@@ -3332,7 +3787,7 @@ export declare type PatternConfig<T extends PatternProperties = PatternPropertie
|
|
|
3332
3787
|
|
|
3333
3788
|
export declare type PatternProperties = Record<string, unknown>;
|
|
3334
3789
|
|
|
3335
|
-
declare type
|
|
3790
|
+
declare type PolymorphicComponentProps<T extends ElementType, Props extends object = object> = Props & AsProp<T> & Omit<ComponentPropsWithRef<T>, PropsToOmit<T, Props>>;
|
|
3336
3791
|
|
|
3337
3792
|
declare type PositionAreaAxis =
|
|
3338
3793
|
| 'left'
|
|
@@ -3401,12 +3856,11 @@ declare type PositionTry =
|
|
|
3401
3856
|
export declare const Pre: (props: PreProps) => JSX.Element;
|
|
3402
3857
|
|
|
3403
3858
|
export declare type PreProps = BoxProps & {
|
|
3404
|
-
children: string |
|
|
3859
|
+
children: string | ReactNode;
|
|
3405
3860
|
lang?: string;
|
|
3861
|
+
as?: string;
|
|
3406
3862
|
};
|
|
3407
3863
|
|
|
3408
|
-
declare type Pretty<T> = { [K in keyof T]: T[K] } & {}
|
|
3409
|
-
|
|
3410
3864
|
declare interface PropertiesFallback<TLength = (string & {}) | 0, TTime = string & {}>
|
|
3411
3865
|
extends StandardPropertiesFallback<TLength, TTime>,
|
|
3412
3866
|
VendorPropertiesFallback<TLength, TTime>,
|
|
@@ -5157,6 +5611,10 @@ declare namespace Property {
|
|
|
5157
5611
|
type VectorEffect = Globals | "non-scaling-stroke" | "none";
|
|
5158
5612
|
}
|
|
5159
5613
|
|
|
5614
|
+
declare type PropsRecord = Record<string, unknown>;
|
|
5615
|
+
|
|
5616
|
+
declare type PropsToOmit<T extends ElementType, P extends object> = keyof (AsProp<T> & P);
|
|
5617
|
+
|
|
5160
5618
|
declare type Pseudos = AdvancedPseudos | SimplePseudos;
|
|
5161
5619
|
|
|
5162
5620
|
declare type QueryDirection = 'min' | 'max';
|
|
@@ -5176,12 +5634,26 @@ declare type QueryDirection_2 = 'min' | 'max';
|
|
|
5176
5634
|
*/
|
|
5177
5635
|
export declare const Radio: (props: RadioProps) => JSX.Element;
|
|
5178
5636
|
|
|
5637
|
+
/**
|
|
5638
|
+
* Helper type for radio change events
|
|
5639
|
+
* @example
|
|
5640
|
+
* const handleChange: RadioChangeHandler = (e) => setChecked(e.target.checked);
|
|
5641
|
+
*/
|
|
5642
|
+
declare type RadioChangeEvent = ChangeEvent<HTMLInputElement>;
|
|
5643
|
+
|
|
5644
|
+
/**
|
|
5645
|
+
* Helper type for radio change handler functions
|
|
5646
|
+
* @example
|
|
5647
|
+
* const handleChange: RadioChangeHandler = (e) => setChecked(e.target.checked);
|
|
5648
|
+
*/
|
|
5649
|
+
declare type RadioChangeHandler = (e: RadioChangeEvent) => void;
|
|
5650
|
+
|
|
5179
5651
|
export declare const RadioInput: (props: RadioInputProps) => JSX.Element;
|
|
5180
5652
|
|
|
5181
5653
|
export declare type RadioInputProps = Omit<BoxProps, keyof RadioInputVariantProps> & RadioInputVariantProps & {
|
|
5182
5654
|
name: string;
|
|
5183
5655
|
checked: boolean;
|
|
5184
|
-
onChange:
|
|
5656
|
+
onChange: RadioChangeHandler;
|
|
5185
5657
|
id?: string;
|
|
5186
5658
|
error?: boolean;
|
|
5187
5659
|
children?: string | ReactNode;
|
|
@@ -5196,13 +5668,13 @@ declare type RadioInputVariantProps = {
|
|
|
5196
5668
|
[key in keyof RadioInputVariant]?: ConditionalValue<RadioInputVariant[key]> | undefined
|
|
5197
5669
|
}
|
|
5198
5670
|
|
|
5199
|
-
export declare type RadioProps = Omit<BoxProps, keyof RadioVariantProps> & RadioVariantProps & {
|
|
5671
|
+
export declare type RadioProps = Omit<BoxProps, 'checked' | 'onChange' | keyof RadioVariantProps> & RadioVariantProps & {
|
|
5200
5672
|
name: string;
|
|
5201
5673
|
checked: boolean;
|
|
5202
|
-
onChange:
|
|
5674
|
+
onChange: RadioChangeHandler;
|
|
5203
5675
|
id?: string;
|
|
5204
|
-
disabled?: boolean;
|
|
5205
5676
|
error?: boolean;
|
|
5677
|
+
disabled?: boolean;
|
|
5206
5678
|
};
|
|
5207
5679
|
|
|
5208
5680
|
declare interface RadioVariant {
|
|
@@ -5234,8 +5706,6 @@ declare interface SelectContextValue {
|
|
|
5234
5706
|
placeholder: string;
|
|
5235
5707
|
}
|
|
5236
5708
|
|
|
5237
|
-
export declare type SelectionIndicator = 'checkmark' | 'checkbox';
|
|
5238
|
-
|
|
5239
5709
|
/**
|
|
5240
5710
|
* SelectOption component used within Select
|
|
5241
5711
|
* Note: This component doesn't render directly - the Select parent component
|
|
@@ -5262,47 +5732,33 @@ export declare type SelectOptionProps = Omit<BoxProps, 'children'> & {
|
|
|
5262
5732
|
|
|
5263
5733
|
declare type Selectors = AttributeSelector | ParentSelector
|
|
5264
5734
|
|
|
5265
|
-
export declare type SelectProps = Omit<BoxProps
|
|
5266
|
-
|
|
5267
|
-
|
|
5268
|
-
/** Callback when value changes */
|
|
5269
|
-
onChange?: (value: string | string[] | null) => void;
|
|
5270
|
-
/** Allow multiple selections */
|
|
5735
|
+
export declare type SelectProps = Omit<BoxProps<'button'>, keyof SelectVariantProps | 'children' | 'onChange' | 'type' | 'value'> & SelectVariantProps & {
|
|
5736
|
+
value?: SelectValue;
|
|
5737
|
+
onChange?: (value: SelectValue) => void;
|
|
5271
5738
|
multiple?: boolean;
|
|
5272
|
-
/** Placeholder text when no selection */
|
|
5273
5739
|
placeholder?: string;
|
|
5274
|
-
/** Controlled open state */
|
|
5275
5740
|
open?: boolean;
|
|
5276
|
-
/** Callback when open state should change */
|
|
5277
5741
|
onOpenChange?: (open: boolean) => void;
|
|
5278
|
-
/** Floating UI placement */
|
|
5279
5742
|
placement?: Placement;
|
|
5280
|
-
/** Offset distance from trigger (in pixels) */
|
|
5281
5743
|
offset?: number;
|
|
5282
|
-
|
|
5283
|
-
children: React.ReactNode;
|
|
5284
|
-
/** Optional ID for ARIA attributes */
|
|
5744
|
+
children: ReactNode;
|
|
5285
5745
|
id?: string;
|
|
5286
|
-
/** Disabled state */
|
|
5287
5746
|
disabled?: boolean;
|
|
5288
|
-
/** Error state */
|
|
5289
5747
|
error?: boolean;
|
|
5290
|
-
|
|
5291
|
-
size?: 'sm' | 'md' | 'lg' | 'xl';
|
|
5292
|
-
/** Selection indicator position */
|
|
5293
|
-
indicatorPosition?: 'left' | 'right';
|
|
5294
|
-
packing?: 'default' | 'compact' | 'comfortable';
|
|
5748
|
+
density?: MenuDensity;
|
|
5295
5749
|
};
|
|
5296
5750
|
|
|
5297
|
-
export declare const SelectTrigger: (props: SelectTriggerProps) => ReactElement<
|
|
5751
|
+
export declare const SelectTrigger: (props: SelectTriggerProps) => ReactElement<unknown, string | JSXElementConstructor<any>>;
|
|
5298
5752
|
|
|
5299
5753
|
export declare type SelectTriggerProps = Omit<BoxProps, 'children'> & {
|
|
5300
5754
|
/** Trigger element (button, custom component, etc.) */
|
|
5301
|
-
children:
|
|
5755
|
+
children: ReactElement;
|
|
5302
5756
|
/** Disable the trigger */
|
|
5303
5757
|
disabled?: boolean;
|
|
5304
5758
|
};
|
|
5305
5759
|
|
|
5760
|
+
declare type SelectValue = string | string[] | null;
|
|
5761
|
+
|
|
5306
5762
|
declare interface SelectVariant {
|
|
5307
5763
|
/**
|
|
5308
5764
|
* @default "md"
|
|
@@ -5314,7 +5770,7 @@ declare type SelectVariantProps = {
|
|
|
5314
5770
|
[key in keyof SelectVariant]?: ConditionalValue<SelectVariant[key]> | undefined
|
|
5315
5771
|
}
|
|
5316
5772
|
|
|
5317
|
-
declare type ShadowToken = "zeroShadow" | "raisedLight" | "
|
|
5773
|
+
declare type ShadowToken = "zeroShadow" | "raisedLight" | "raisedLightUp" | "raisedDark" | "raisedDarkUp" | "elevatedLight" | "elevatedLightUp" | "elevatedDark" | "elevatedDarkUp" | "overlayLight" | "overlayLightUp" | "overlayDark" | "overlayDarkUp" | "overflowLight" | "overflowDark" | "zero" | "raised" | "raised.up" | "elevated" | "elevated.up" | "overlay" | "overlay.dark" | "overflow"
|
|
5318
5774
|
|
|
5319
5775
|
declare type SimplePseudos =
|
|
5320
5776
|
| ":-khtml-any-link"
|
|
@@ -5428,18 +5884,19 @@ declare type SimplePseudos =
|
|
|
5428
5884
|
| ":valid"
|
|
5429
5885
|
| ":visited";
|
|
5430
5886
|
|
|
5431
|
-
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"
|
|
5887
|
+
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"
|
|
5432
5888
|
|
|
5433
5889
|
export declare type SlotRecipeConfig<S extends string = string, V extends SlotRecipeVariantRecord<S> = SlotRecipeVariantRecord<S>> = BaseSlotRecipeConfig<S, V>;
|
|
5434
5890
|
|
|
5435
5891
|
export declare type SlotRecipeVariantRecord<S extends string = string> = Record<S, Record<string, unknown>>;
|
|
5436
5892
|
|
|
5437
|
-
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"
|
|
5893
|
+
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"
|
|
5438
5894
|
|
|
5439
5895
|
export declare const Spinner: (props: SpinnerProps) => JSX.Element;
|
|
5440
5896
|
|
|
5441
5897
|
export declare type SpinnerProps = Omit<BoxProps, keyof SpinnerVariantProps> & SpinnerVariantProps & {
|
|
5442
5898
|
inverse?: boolean;
|
|
5899
|
+
centered?: boolean;
|
|
5443
5900
|
};
|
|
5444
5901
|
|
|
5445
5902
|
declare interface SpinnerVariant {
|
|
@@ -5448,13 +5905,14 @@ declare interface SpinnerVariant {
|
|
|
5448
5905
|
*/
|
|
5449
5906
|
size: "xs" | "sm" | "md" | "lg"
|
|
5450
5907
|
inverse: boolean
|
|
5908
|
+
centered: boolean
|
|
5451
5909
|
}
|
|
5452
5910
|
|
|
5453
5911
|
declare type SpinnerVariantProps = {
|
|
5454
5912
|
[key in keyof SpinnerVariant]?: ConditionalValue<SpinnerVariant[key]> | undefined
|
|
5455
5913
|
}
|
|
5456
5914
|
|
|
5457
|
-
export declare const splitProps: (props:
|
|
5915
|
+
export declare const splitProps: (props: PropsRecord) => [string, PropsRecord];
|
|
5458
5916
|
|
|
5459
5917
|
declare interface StandardLonghandProperties<TLength = (string & {}) | 0, TTime = string & {}> {
|
|
5460
5918
|
/**
|
|
@@ -11568,6 +12026,22 @@ declare type String_2 = string & {}
|
|
|
11568
12026
|
|
|
11569
12027
|
declare type StringToMultiple<T extends string> = T | `${T}, ${T}`
|
|
11570
12028
|
|
|
12029
|
+
export declare const SubMenu: (props: SubMenuProps) => JSX.Element | null;
|
|
12030
|
+
|
|
12031
|
+
declare type SubMenuInteraction = 'hover' | 'digin';
|
|
12032
|
+
|
|
12033
|
+
export declare type SubMenuProps = Omit<BoxProps, 'as'> & Omit<MenuVariantProps, 'iconBefore' | 'iconAfter'> & {
|
|
12034
|
+
label: string;
|
|
12035
|
+
description?: string;
|
|
12036
|
+
disabled?: boolean;
|
|
12037
|
+
selected?: boolean;
|
|
12038
|
+
iconBefore?: IconNamesList;
|
|
12039
|
+
interaction?: SubMenuInteraction;
|
|
12040
|
+
placement?: Placement;
|
|
12041
|
+
children: ReactNode;
|
|
12042
|
+
textValue?: string;
|
|
12043
|
+
};
|
|
12044
|
+
|
|
11571
12045
|
declare interface SvgProperties<TLength = (string & {}) | 0, TTime = string & {}> {
|
|
11572
12046
|
alignmentBaseline?: Property.AlignmentBaseline | undefined;
|
|
11573
12047
|
baselineShift?: Property.BaselineShift<TLength> | undefined;
|
|
@@ -17822,7 +18296,7 @@ declare interface SystemProperties {
|
|
|
17822
18296
|
*
|
|
17823
18297
|
* @see https://developer.mozilla.org/docs/Web/CSS/z-index
|
|
17824
18298
|
*/
|
|
17825
|
-
zIndex?: ConditionalValue<WithEscapeHatch<
|
|
18299
|
+
zIndex?: ConditionalValue<WithEscapeHatch<UtilityValues["zIndex"] | CssVars>>
|
|
17826
18300
|
/**
|
|
17827
18301
|
* 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.
|
|
17828
18302
|
*
|
|
@@ -19130,27 +19604,23 @@ declare type SystemStyleObject_2 = Omit<Nested<SystemProperties & CssVarProperti
|
|
|
19130
19604
|
|
|
19131
19605
|
export declare const Tag: (props: TagProps) => JSX.Element;
|
|
19132
19606
|
|
|
19133
|
-
export declare type TagProps = Omit<BoxProps, keyof TagVariantProps> & TagVariantProps & {
|
|
19134
|
-
children: string
|
|
19135
|
-
|
|
19607
|
+
export declare type TagProps = Omit<BoxProps, keyof TagVariantProps> & Omit<TagVariantProps, 'iconBefore' | 'iconAfter'> & {
|
|
19608
|
+
children: string;
|
|
19609
|
+
iconBefore?: IconNamesList;
|
|
19610
|
+
iconAfter?: IconNamesList;
|
|
19136
19611
|
};
|
|
19137
19612
|
|
|
19138
19613
|
declare interface TagVariant {
|
|
19139
19614
|
/**
|
|
19140
19615
|
* @default "default"
|
|
19141
19616
|
*/
|
|
19142
|
-
|
|
19617
|
+
variant: "default" | "bold"
|
|
19143
19618
|
/**
|
|
19144
19619
|
* @default "gray"
|
|
19145
19620
|
*/
|
|
19146
19621
|
hue: "gray" | "red" | "orange" | "yellow" | "lime" | "green" | "teal" | "blue" | "indigo" | "purple" | "magenta" | "tan"
|
|
19147
|
-
|
|
19148
|
-
|
|
19149
|
-
*/
|
|
19150
|
-
iconPosition: "left" | "right"
|
|
19151
|
-
/**
|
|
19152
|
-
* @default false
|
|
19153
|
-
*/
|
|
19622
|
+
iconBefore: boolean
|
|
19623
|
+
iconAfter: boolean
|
|
19154
19624
|
hasIcon: boolean
|
|
19155
19625
|
}
|
|
19156
19626
|
|
|
@@ -19175,7 +19645,7 @@ declare interface TextareaVariant {
|
|
|
19175
19645
|
/**
|
|
19176
19646
|
* @default "md"
|
|
19177
19647
|
*/
|
|
19178
|
-
size: "
|
|
19648
|
+
size: "sm" | "md" | "lg" | "xl"
|
|
19179
19649
|
autoSize: boolean
|
|
19180
19650
|
}
|
|
19181
19651
|
|
|
@@ -19185,24 +19655,28 @@ declare type TextareaVariantProps = {
|
|
|
19185
19655
|
|
|
19186
19656
|
export declare const TextInput: (props: TextInputProps) => JSX.Element;
|
|
19187
19657
|
|
|
19188
|
-
export declare type TextInputProps = Omit<BoxProps, keyof
|
|
19658
|
+
export declare type TextInputProps = Omit<BoxProps, keyof TextInputVariantProps> & Omit<TextInputVariantProps, 'iconBefore' | 'iconAfter'> & {
|
|
19189
19659
|
name: string;
|
|
19190
|
-
|
|
19660
|
+
id?: string;
|
|
19661
|
+
iconBefore?: IconNamesList;
|
|
19662
|
+
iconAfter?: IconNamesList;
|
|
19191
19663
|
error?: boolean;
|
|
19192
19664
|
disabled?: boolean;
|
|
19193
|
-
|
|
19665
|
+
type?: 'text' | 'number' | 'email' | 'password' | 'search' | 'tel' | 'url' | 'date' | 'time' | 'datetime-local' | 'month' | 'week';
|
|
19194
19666
|
};
|
|
19195
19667
|
|
|
19196
|
-
declare interface
|
|
19668
|
+
declare interface TextInputVariant {
|
|
19197
19669
|
/**
|
|
19198
19670
|
* @default "md"
|
|
19199
19671
|
*/
|
|
19200
|
-
size: "
|
|
19672
|
+
size: "sm" | "md" | "lg" | "xl"
|
|
19673
|
+
iconBefore: boolean
|
|
19674
|
+
iconAfter: boolean
|
|
19201
19675
|
autoSize: boolean
|
|
19202
19676
|
}
|
|
19203
19677
|
|
|
19204
|
-
declare type
|
|
19205
|
-
[key in keyof
|
|
19678
|
+
declare type TextInputVariantProps = {
|
|
19679
|
+
[key in keyof TextInputVariant]?: TextInputVariant[key] | undefined
|
|
19206
19680
|
}
|
|
19207
19681
|
|
|
19208
19682
|
export declare type TextProps = Omit<BoxProps, keyof TextVariantProps> & TextVariantProps & {
|
|
@@ -19223,8 +19697,8 @@ declare interface TextVariant {
|
|
|
19223
19697
|
italic: boolean
|
|
19224
19698
|
underline: boolean
|
|
19225
19699
|
truncate: boolean
|
|
19226
|
-
|
|
19227
|
-
size: "12" | "14" | "16" | "20" | "24" | "32" | "40" | "48" | "64" | "72" | "80" | "96"
|
|
19700
|
+
allCaps: boolean
|
|
19701
|
+
size: "10" | "12" | "14" | "16" | "20" | "24" | "32" | "40" | "48" | "64" | "72" | "80" | "96"
|
|
19228
19702
|
weight: "light" | "normal" | "medium" | "bold" | "black"
|
|
19229
19703
|
}
|
|
19230
19704
|
|
|
@@ -19240,13 +19714,72 @@ declare interface ThemeContextType {
|
|
|
19240
19714
|
}
|
|
19241
19715
|
|
|
19242
19716
|
export declare function ThemeProvider({ children }: {
|
|
19243
|
-
children:
|
|
19717
|
+
children: ReactNode;
|
|
19244
19718
|
}): JSX.Element;
|
|
19245
19719
|
|
|
19246
19720
|
export declare const ThemeSwitcher: (props: ThemeSwitcherProps) => JSX.Element;
|
|
19247
19721
|
|
|
19248
19722
|
declare type ThemeSwitcherProps = BoxProps;
|
|
19249
19723
|
|
|
19724
|
+
export declare const TimePicker: (props: TimePickerProps) => JSX.Element;
|
|
19725
|
+
|
|
19726
|
+
export declare type TimePickerProps = Omit<BoxProps, keyof TimePickerVariantProps | 'children'> & TimePickerVariantProps & {
|
|
19727
|
+
/** Controlled value — hour is always 24h (0–23) internally */
|
|
19728
|
+
value?: TimeValue | null;
|
|
19729
|
+
/** Called when the time changes */
|
|
19730
|
+
onChange?: (value: TimeValue | null) => void;
|
|
19731
|
+
/** 12-hour or 24-hour display */
|
|
19732
|
+
hourCycle?: HourCycle;
|
|
19733
|
+
/** Minute snap interval (default 1 = any minute) */
|
|
19734
|
+
minuteStep?: number;
|
|
19735
|
+
/** Accessible label for the input group */
|
|
19736
|
+
label?: string;
|
|
19737
|
+
disabled?: boolean;
|
|
19738
|
+
error?: boolean;
|
|
19739
|
+
id?: string;
|
|
19740
|
+
name?: string;
|
|
19741
|
+
/** Controlled popover open state */
|
|
19742
|
+
open?: boolean;
|
|
19743
|
+
onOpenChange?: (open: boolean) => void;
|
|
19744
|
+
};
|
|
19745
|
+
|
|
19746
|
+
declare interface TimePickerVariant {
|
|
19747
|
+
/**
|
|
19748
|
+
* @default "md"
|
|
19749
|
+
*/
|
|
19750
|
+
size: "sm" | "md" | "lg"
|
|
19751
|
+
}
|
|
19752
|
+
|
|
19753
|
+
declare type TimePickerVariantProps = {
|
|
19754
|
+
[key in keyof TimePickerVariant]?: ConditionalValue<TimePickerVariant[key]> | undefined
|
|
19755
|
+
}
|
|
19756
|
+
|
|
19757
|
+
export declare const TimeRangePicker: ({ startValue, endValue, onStartChange, onEndChange, hourCycle, minuteStep, disabled, error, size, label, }: TimeRangePickerProps) => JSX.Element;
|
|
19758
|
+
|
|
19759
|
+
export declare type TimeRangePickerProps = {
|
|
19760
|
+
/** Start time value (hour in 24h format, 0–23) */
|
|
19761
|
+
startValue?: TimeValue | null;
|
|
19762
|
+
/** End time value (hour in 24h format, 0–23) */
|
|
19763
|
+
endValue?: TimeValue | null;
|
|
19764
|
+
/** Called when start time changes */
|
|
19765
|
+
onStartChange?: (value: TimeValue | null) => void;
|
|
19766
|
+
/** Called when end time changes */
|
|
19767
|
+
onEndChange?: (value: TimeValue | null) => void;
|
|
19768
|
+
hourCycle?: HourCycle;
|
|
19769
|
+
minuteStep?: number;
|
|
19770
|
+
disabled?: boolean;
|
|
19771
|
+
error?: boolean;
|
|
19772
|
+
/** Size passed to both TimePickers */
|
|
19773
|
+
size?: TimePickerProps['size'];
|
|
19774
|
+
/** Accessible label prefix — used to build "Start time" and "End time" labels */
|
|
19775
|
+
label?: string;
|
|
19776
|
+
};
|
|
19777
|
+
|
|
19778
|
+
export declare interface TimeValue {
|
|
19779
|
+
hour: number;
|
|
19780
|
+
minute: number;
|
|
19781
|
+
}
|
|
19782
|
+
|
|
19250
19783
|
/**
|
|
19251
19784
|
* Toggle is a controlled component.
|
|
19252
19785
|
* You must pass `checked` and `onChange` props.
|
|
@@ -19254,7 +19787,6 @@ declare type ThemeSwitcherProps = BoxProps;
|
|
|
19254
19787
|
* @example
|
|
19255
19788
|
* const [checked, setChecked] = useState(false);
|
|
19256
19789
|
* <Toggle
|
|
19257
|
-
* name="notifications"
|
|
19258
19790
|
* checked={checked}
|
|
19259
19791
|
* onChange={(e) => setChecked(e.target.checked)}
|
|
19260
19792
|
* />
|
|
@@ -19266,7 +19798,7 @@ export declare const Toggle: (props: ToggleProps) => JSX.Element;
|
|
|
19266
19798
|
* @example
|
|
19267
19799
|
* const handleChange: ToggleChangeHandler = (e) => setChecked(e.target.checked);
|
|
19268
19800
|
*/
|
|
19269
|
-
export declare type ToggleChangeEvent =
|
|
19801
|
+
export declare type ToggleChangeEvent = ChangeEvent<HTMLInputElement>;
|
|
19270
19802
|
|
|
19271
19803
|
/**
|
|
19272
19804
|
* Helper type for toggle change handler functions
|
|
@@ -19280,11 +19812,11 @@ export declare const ToggleInput: (props: ToggleInputProps) => JSX.Element;
|
|
|
19280
19812
|
export declare type ToggleInputProps = Omit<BoxProps, keyof ToggleInputVariantProps> & ToggleInputVariantProps & {
|
|
19281
19813
|
name: string;
|
|
19282
19814
|
checked: boolean;
|
|
19283
|
-
onChange:
|
|
19815
|
+
onChange: ToggleChangeHandler;
|
|
19284
19816
|
id?: string;
|
|
19285
19817
|
error?: boolean;
|
|
19286
|
-
children?: string | ReactNode;
|
|
19287
19818
|
disabled?: boolean;
|
|
19819
|
+
children?: string | ReactNode;
|
|
19288
19820
|
};
|
|
19289
19821
|
|
|
19290
19822
|
declare interface ToggleInputVariant {
|
|
@@ -19296,18 +19828,12 @@ declare type ToggleInputVariantProps = {
|
|
|
19296
19828
|
}
|
|
19297
19829
|
|
|
19298
19830
|
export declare type ToggleProps = Omit<BoxProps, 'checked' | 'onChange' | keyof ToggleVariantProps> & ToggleVariantProps & {
|
|
19299
|
-
/** Form field name */
|
|
19300
19831
|
name: string;
|
|
19301
|
-
/** Controlled checked state (REQUIRED) */
|
|
19302
19832
|
checked: boolean;
|
|
19303
|
-
|
|
19304
|
-
onChange: ChangeEventHandler<HTMLInputElement>;
|
|
19305
|
-
/** Unique identifier for the toggle */
|
|
19833
|
+
onChange: ToggleChangeHandler;
|
|
19306
19834
|
id?: string;
|
|
19307
|
-
/** Disable the toggle */
|
|
19308
|
-
disabled?: boolean;
|
|
19309
|
-
/** Display error state */
|
|
19310
19835
|
error?: boolean;
|
|
19836
|
+
disabled?: boolean;
|
|
19311
19837
|
};
|
|
19312
19838
|
|
|
19313
19839
|
declare interface ToggleVariant {
|
|
@@ -19318,7 +19844,7 @@ declare type ToggleVariantProps = {
|
|
|
19318
19844
|
[key in keyof ToggleVariant]?: ConditionalValue<ToggleVariant[key]> | undefined
|
|
19319
19845
|
}
|
|
19320
19846
|
|
|
19321
|
-
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}`
|
|
19847
|
+
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}`
|
|
19322
19848
|
|
|
19323
19849
|
declare type Tokens = {
|
|
19324
19850
|
animations: AnimationToken
|
|
@@ -19341,37 +19867,45 @@ declare type Tokens = {
|
|
|
19341
19867
|
sizes: SizeToken
|
|
19342
19868
|
spacing: SpacingToken
|
|
19343
19869
|
utilitySizes: UtilitySizeToken
|
|
19870
|
+
zIndex: ZIndexToken
|
|
19344
19871
|
breakpoints: BreakpointToken
|
|
19345
19872
|
} & { [token: string]: never }
|
|
19346
19873
|
|
|
19347
19874
|
export declare const Tooltip: (props: TooltipProps) => JSX.Element;
|
|
19348
19875
|
|
|
19349
|
-
export declare type TooltipProps = Omit<BoxProps, keyof TooltipVariantProps> & TooltipVariantProps & {
|
|
19876
|
+
export declare type TooltipProps = Omit<BoxProps, keyof TooltipVariantProps | 'children'> & TooltipVariantProps & {
|
|
19877
|
+
/** Tooltip body text (required) */
|
|
19350
19878
|
text: string;
|
|
19879
|
+
/** Optional bold title rendered above the text */
|
|
19351
19880
|
title?: string;
|
|
19881
|
+
/** Show/hide the arrow caret. Default: true */
|
|
19352
19882
|
caret?: boolean;
|
|
19353
|
-
|
|
19883
|
+
/** Floating UI placement. Automatically flips if it doesn't fit. Default: 'bottom' */
|
|
19884
|
+
placement?: Placement;
|
|
19885
|
+
/** Distance in px between trigger and tooltip. Default: 8 */
|
|
19886
|
+
offset?: number;
|
|
19887
|
+
/** Hover open/close delay in ms, or { open, close } for separate delays */
|
|
19888
|
+
delay?: number | {
|
|
19889
|
+
open: number;
|
|
19890
|
+
close: number;
|
|
19891
|
+
};
|
|
19892
|
+
/** Trigger element. Wrapped in a <span> to attach the floating ref. */
|
|
19354
19893
|
children?: ReactNode;
|
|
19355
|
-
trigger?: 'onHover' | 'onClick';
|
|
19356
19894
|
};
|
|
19357
19895
|
|
|
19358
19896
|
declare interface TooltipVariant {
|
|
19359
|
-
/**
|
|
19360
|
-
* @default "bottom"
|
|
19361
|
-
*/
|
|
19362
|
-
position: "top" | "bottom" | "left" | "right" | "top-start" | "bottom-start" | "left-start" | "right-start" | "top-end" | "bottom-end" | "left-end" | "right-end"
|
|
19363
|
-
/**
|
|
19364
|
-
* @default true
|
|
19365
|
-
*/
|
|
19366
|
-
caret: boolean
|
|
19367
19897
|
/**
|
|
19368
19898
|
* @default "md"
|
|
19369
19899
|
*/
|
|
19370
19900
|
size: "sm" | "md" | "lg"
|
|
19901
|
+
/**
|
|
19902
|
+
* @default false
|
|
19903
|
+
*/
|
|
19904
|
+
hasTitle: boolean
|
|
19371
19905
|
}
|
|
19372
19906
|
|
|
19373
19907
|
declare type TooltipVariantProps = {
|
|
19374
|
-
[key in keyof TooltipVariant]?: TooltipVariant[key] | undefined
|
|
19908
|
+
[key in keyof TooltipVariant]?: ConditionalValue<TooltipVariant[key]> | undefined
|
|
19375
19909
|
}
|
|
19376
19910
|
|
|
19377
19911
|
declare interface UnstyledProps {
|
|
@@ -19381,48 +19915,11 @@ declare interface UnstyledProps {
|
|
|
19381
19915
|
unstyled?: boolean | undefined
|
|
19382
19916
|
}
|
|
19383
19917
|
|
|
19384
|
-
|
|
19385
|
-
* Token-aware container query hook for conditional rendering based on container sizes.
|
|
19386
|
-
* Requires a ref to the container element and the container must have container-type set.
|
|
19387
|
-
*
|
|
19388
|
-
* @example
|
|
19389
|
-
* // Component with container query
|
|
19390
|
-
* function MyComponent() {
|
|
19391
|
-
* const containerRef = useRef<HTMLDivElement>(null);
|
|
19392
|
-
* const isLarge = useContainerQuery(containerRef, 'lg');
|
|
19393
|
-
*
|
|
19394
|
-
* return (
|
|
19395
|
-
* <div ref={containerRef} style={{ containerType: 'inline-size' }}>
|
|
19396
|
-
* {isLarge && <LargeLayout />}
|
|
19397
|
-
* {!isLarge && <SmallLayout />}
|
|
19398
|
-
* </div>
|
|
19399
|
-
* );
|
|
19400
|
-
* }
|
|
19401
|
-
*
|
|
19402
|
-
* @example
|
|
19403
|
-
* // Max-width: matches when container is < xl size
|
|
19404
|
-
* const isSmall = useContainerQuery(containerRef, 'xl', 'max');
|
|
19405
|
-
*/
|
|
19406
|
-
export declare function useContainerQuery(containerRef: RefObject<HTMLElement>, size: ContainerSizeKey, direction?: QueryDirection_2): boolean;
|
|
19918
|
+
export declare function useContainerQuery(containerRef: RefObject<HTMLElement>, size: ContainerSizeKey, direction?: QueryDirection): boolean;
|
|
19407
19919
|
|
|
19408
|
-
|
|
19409
|
-
* Token-aware media query hook for conditional rendering based on breakpoints.
|
|
19410
|
-
*
|
|
19411
|
-
* @example
|
|
19412
|
-
* // Mobile-first: matches when viewport is >= md (768px)
|
|
19413
|
-
* const isDesktop = useMediaQuery('md');
|
|
19414
|
-
*
|
|
19415
|
-
* @example
|
|
19416
|
-
* // Max-width: matches when viewport is < lg (1024px)
|
|
19417
|
-
* const isMobile = useMediaQuery('lg', 'max');
|
|
19418
|
-
*
|
|
19419
|
-
* @example
|
|
19420
|
-
* // In JSX
|
|
19421
|
-
* {isDesktop && <DesktopOnlyComponent />}
|
|
19422
|
-
*/
|
|
19423
|
-
export declare function useMediaQuery(breakpoint: BreakpointKey, direction?: QueryDirection): boolean;
|
|
19920
|
+
export declare function useMediaQuery(breakpoint: BreakpointKey, direction?: QueryDirection_2): boolean;
|
|
19424
19921
|
|
|
19425
|
-
export declare const useMenuContext: () =>
|
|
19922
|
+
export declare const useMenuContext: () => MenuContext;
|
|
19426
19923
|
|
|
19427
19924
|
export declare const useModalContext: () => ModalContextValue;
|
|
19428
19925
|
|
|
@@ -19434,6 +19931,7 @@ declare type UtilitySizeToken = "full" | "half" | "min" | "max" | "fit" | "prose
|
|
|
19434
19931
|
|
|
19435
19932
|
declare interface UtilityValues {
|
|
19436
19933
|
aspectRatio: Tokens["aspectRatios"];
|
|
19934
|
+
zIndex: Tokens["zIndex"];
|
|
19437
19935
|
top: Tokens["spacing"];
|
|
19438
19936
|
left: Tokens["spacing"];
|
|
19439
19937
|
inset: "auto" | Tokens["spacing"];
|
|
@@ -19641,8 +20139,8 @@ declare interface UtilityValues {
|
|
|
19641
20139
|
strokeWidth: Tokens["borderWidths"];
|
|
19642
20140
|
srOnly: boolean;
|
|
19643
20141
|
debug: boolean;
|
|
19644
|
-
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.
|
|
19645
|
-
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";
|
|
20142
|
+
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";
|
|
20143
|
+
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";
|
|
19646
20144
|
layerStyle: "surface.raised" | "surface.overlay";
|
|
19647
20145
|
}
|
|
19648
20146
|
|
|
@@ -21602,6 +22100,8 @@ declare interface WrapProperties {
|
|
|
21602
22100
|
|
|
21603
22101
|
declare interface WrapProps extends WrapProperties, DistributiveOmit<HTMLStyledProps<'div'>, keyof WrapProperties > {}
|
|
21604
22102
|
|
|
22103
|
+
declare type ZIndexToken = "0" | "1" | "2" | "3" | "4" | "5" | "10" | "1000" | "1100" | "1101" | "1200" | "-1" | "base" | "raised" | "elevated" | "overlay" | "modal" | "tooltip"
|
|
22104
|
+
|
|
21605
22105
|
export { }
|
|
21606
22106
|
|
|
21607
22107
|
|