@okshaun/components 1.0.2 → 2.0.1

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