@okshaun/components 1.0.1 → 2.0.0

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