@rovula/ui 0.1.20 → 0.1.22

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 (99) hide show
  1. package/dist/cjs/bundle.css +316 -43
  2. package/dist/cjs/bundle.js +675 -675
  3. package/dist/cjs/bundle.js.map +1 -1
  4. package/dist/cjs/types/components/Badge/Badge.d.ts +40 -0
  5. package/dist/cjs/types/components/Badge/Badge.stories.d.ts +295 -0
  6. package/dist/cjs/types/components/Badge/Badge.styles.d.ts +7 -0
  7. package/dist/cjs/types/components/Badge/index.d.ts +2 -0
  8. package/dist/cjs/types/components/Dropdown/Dropdown.d.ts +4 -8
  9. package/dist/cjs/types/components/Dropdown/Dropdown.stories.d.ts +1 -6
  10. package/dist/cjs/types/components/DropdownMenu/DropdownMenu.d.ts +5 -1
  11. package/dist/cjs/types/components/DropdownMenu/DropdownMenu.stories.d.ts +45 -30
  12. package/dist/cjs/types/components/Form/Form.d.ts +2 -1
  13. package/dist/cjs/types/components/Form/Form.stories.d.ts +4 -0
  14. package/dist/cjs/types/components/ScrollArea/ScrollArea.d.ts +38 -0
  15. package/dist/cjs/types/components/ScrollArea/ScrollArea.stories.d.ts +301 -0
  16. package/dist/cjs/types/index.d.ts +4 -1
  17. package/dist/cjs/types/patterns/menu/Menu.d.ts +70 -0
  18. package/dist/cjs/types/{components/Menu → patterns/menu}/Menu.stories.d.ts +17 -10
  19. package/dist/cjs/types/utils/mergeRefs.d.ts +20 -0
  20. package/dist/components/Avatar/Avatar.styles.js +2 -2
  21. package/dist/components/Badge/Badge.js +36 -0
  22. package/dist/components/Badge/Badge.stories.js +51 -0
  23. package/dist/components/Badge/Badge.styles.js +62 -0
  24. package/dist/components/Badge/index.js +2 -0
  25. package/dist/components/Dropdown/Dropdown.js +54 -163
  26. package/dist/components/Dropdown/Dropdown.stories.js +29 -0
  27. package/dist/components/DropdownMenu/DropdownMenu.js +24 -13
  28. package/dist/components/DropdownMenu/DropdownMenu.stories.js +120 -88
  29. package/dist/components/Form/Form.js +11 -4
  30. package/dist/components/Form/Form.stories.js +27 -0
  31. package/dist/components/ScrollArea/ScrollArea.js +50 -0
  32. package/dist/components/ScrollArea/ScrollArea.stories.js +56 -0
  33. package/dist/components/TextInput/TextInput.js +6 -3
  34. package/dist/esm/bundle.css +316 -43
  35. package/dist/esm/bundle.js +1545 -1545
  36. package/dist/esm/bundle.js.map +1 -1
  37. package/dist/esm/types/components/Badge/Badge.d.ts +40 -0
  38. package/dist/esm/types/components/Badge/Badge.stories.d.ts +295 -0
  39. package/dist/esm/types/components/Badge/Badge.styles.d.ts +7 -0
  40. package/dist/esm/types/components/Badge/index.d.ts +2 -0
  41. package/dist/esm/types/components/Dropdown/Dropdown.d.ts +4 -8
  42. package/dist/esm/types/components/Dropdown/Dropdown.stories.d.ts +1 -6
  43. package/dist/esm/types/components/DropdownMenu/DropdownMenu.d.ts +5 -1
  44. package/dist/esm/types/components/DropdownMenu/DropdownMenu.stories.d.ts +45 -30
  45. package/dist/esm/types/components/Form/Form.d.ts +2 -1
  46. package/dist/esm/types/components/Form/Form.stories.d.ts +4 -0
  47. package/dist/esm/types/components/ScrollArea/ScrollArea.d.ts +38 -0
  48. package/dist/esm/types/components/ScrollArea/ScrollArea.stories.d.ts +301 -0
  49. package/dist/esm/types/index.d.ts +4 -1
  50. package/dist/esm/types/patterns/menu/Menu.d.ts +70 -0
  51. package/dist/esm/types/{components/Menu → patterns/menu}/Menu.stories.d.ts +17 -10
  52. package/dist/esm/types/utils/mergeRefs.d.ts +20 -0
  53. package/dist/index.d.ts +156 -74
  54. package/dist/index.js +3 -1
  55. package/dist/patterns/menu/Menu.js +95 -0
  56. package/dist/patterns/menu/Menu.stories.js +611 -0
  57. package/dist/src/theme/global.css +485 -57
  58. package/dist/utils/mergeRefs.js +42 -0
  59. package/package.json +1 -1
  60. package/src/components/Avatar/Avatar.styles.ts +2 -2
  61. package/src/components/Badge/Badge.stories.tsx +128 -0
  62. package/src/components/Badge/Badge.styles.ts +70 -0
  63. package/src/components/Badge/Badge.tsx +103 -0
  64. package/src/components/Badge/index.ts +3 -0
  65. package/src/components/Dropdown/Dropdown.stories.tsx +170 -1
  66. package/src/components/Dropdown/Dropdown.tsx +186 -276
  67. package/src/components/DropdownMenu/DropdownMenu.stories.tsx +1375 -253
  68. package/src/components/DropdownMenu/DropdownMenu.tsx +118 -55
  69. package/src/components/Form/Form.stories.tsx +70 -0
  70. package/src/components/Form/Form.tsx +23 -0
  71. package/src/components/ScrollArea/ScrollArea.stories.tsx +229 -0
  72. package/src/components/ScrollArea/ScrollArea.tsx +72 -0
  73. package/src/components/TextInput/TextInput.tsx +6 -3
  74. package/src/index.ts +4 -1
  75. package/src/patterns/menu/Menu.stories.tsx +1100 -0
  76. package/src/patterns/menu/Menu.tsx +282 -0
  77. package/src/theme/global.css +84 -11
  78. package/src/theme/themes/xspector/baseline.css +1 -1
  79. package/src/theme/themes/xspector/components/scrollbar.css +12 -0
  80. package/src/theme/tokens/baseline.css +3 -1
  81. package/src/theme/tokens/components/badge.css +54 -0
  82. package/src/theme/tokens/components/dropdown-menu.css +16 -5
  83. package/src/theme/tokens/components/scrollbar.css +18 -0
  84. package/src/utils/mergeRefs.ts +46 -0
  85. package/dist/cjs/types/components/Menu/Menu.d.ts +0 -65
  86. package/dist/cjs/types/components/Menu/helpers.d.ts +0 -19
  87. package/dist/cjs/types/components/Menu/index.d.ts +0 -4
  88. package/dist/components/Menu/Menu.js +0 -64
  89. package/dist/components/Menu/Menu.stories.js +0 -406
  90. package/dist/components/Menu/helpers.js +0 -28
  91. package/dist/components/Menu/index.js +0 -3
  92. package/dist/esm/types/components/Menu/Menu.d.ts +0 -65
  93. package/dist/esm/types/components/Menu/helpers.d.ts +0 -19
  94. package/dist/esm/types/components/Menu/index.d.ts +0 -4
  95. package/src/components/Menu/Menu.stories.tsx +0 -586
  96. package/src/components/Menu/Menu.tsx +0 -235
  97. package/src/components/Menu/helpers.ts +0 -45
  98. package/src/components/Menu/index.ts +0 -7
  99. package/src/theme/themes/xspector/components/dropdown-menu.css +0 -28
@@ -0,0 +1,40 @@
1
+ import * as React from "react";
2
+ export type BadgeColor = "default" | "success" | "warning" | "info" | "error";
3
+ export type BadgeProps = {
4
+ /** Badge text label */
5
+ label: string;
6
+ /** Color variant */
7
+ color?: BadgeColor;
8
+ /**
9
+ * Show a dropdown chevron — use when the badge acts as a clickable trigger.
10
+ * Automatically adds a border to indicate interactivity.
11
+ */
12
+ clickable?: boolean;
13
+ /** Optional percentage value shown below the label */
14
+ percent?: number;
15
+ className?: string;
16
+ } & React.HTMLAttributes<HTMLSpanElement>;
17
+ declare const Badge: React.ForwardRefExoticComponent<{
18
+ /** Badge text label */
19
+ label: string;
20
+ /** Color variant */
21
+ color?: BadgeColor;
22
+ /**
23
+ * Show a dropdown chevron — use when the badge acts as a clickable trigger.
24
+ * Automatically adds a border to indicate interactivity.
25
+ */
26
+ clickable?: boolean;
27
+ /** Optional percentage value shown below the label */
28
+ percent?: number;
29
+ className?: string;
30
+ } & React.HTMLAttributes<HTMLSpanElement> & React.RefAttributes<HTMLSpanElement>>;
31
+ export type SeverityLevel = "highest" | "high" | "medium" | "low" | "lowest";
32
+ export type SeverityBadgeProps = {
33
+ severity: SeverityLevel;
34
+ className?: string;
35
+ } & React.HTMLAttributes<HTMLSpanElement>;
36
+ declare const SeverityBadge: React.ForwardRefExoticComponent<{
37
+ severity: SeverityLevel;
38
+ className?: string;
39
+ } & React.HTMLAttributes<HTMLSpanElement> & React.RefAttributes<HTMLSpanElement>>;
40
+ export { Badge, SeverityBadge };
@@ -0,0 +1,295 @@
1
+ import React from "react";
2
+ import type { StoryObj } from "@storybook/react";
3
+ import type { BadgeColor } from "./Badge";
4
+ declare const meta: {
5
+ title: string;
6
+ component: React.ForwardRefExoticComponent<{
7
+ label: string;
8
+ color?: BadgeColor;
9
+ clickable?: boolean;
10
+ percent?: number;
11
+ className?: string;
12
+ } & React.HTMLAttributes<HTMLSpanElement> & React.RefAttributes<HTMLSpanElement>>;
13
+ tags: string[];
14
+ parameters: {
15
+ layout: string;
16
+ };
17
+ decorators: ((Story: import("@storybook/csf").PartialStoryFn<import("@storybook/react").ReactRenderer, {
18
+ label: string;
19
+ color?: "default" | "success" | "info" | "warning" | "error" | undefined;
20
+ clickable?: boolean | undefined;
21
+ percent?: number | undefined;
22
+ className?: string | undefined;
23
+ defaultChecked?: boolean | undefined | undefined;
24
+ defaultValue?: string | number | readonly string[] | undefined;
25
+ suppressContentEditableWarning?: boolean | undefined | undefined;
26
+ suppressHydrationWarning?: boolean | undefined | undefined;
27
+ accessKey?: string | undefined | undefined;
28
+ autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {}) | undefined;
29
+ autoFocus?: boolean | undefined | undefined;
30
+ contentEditable?: "inherit" | (boolean | "true" | "false") | "plaintext-only" | undefined;
31
+ contextMenu?: string | undefined | undefined;
32
+ dir?: string | undefined | undefined;
33
+ draggable?: (boolean | "true" | "false") | undefined;
34
+ enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
35
+ hidden?: boolean | undefined | undefined;
36
+ id?: string | undefined | undefined;
37
+ lang?: string | undefined | undefined;
38
+ nonce?: string | undefined | undefined;
39
+ slot?: string | undefined | undefined;
40
+ spellCheck?: (boolean | "true" | "false") | undefined;
41
+ style?: React.CSSProperties | undefined;
42
+ tabIndex?: number | undefined | undefined;
43
+ title?: string | undefined | undefined;
44
+ translate?: "yes" | "no" | undefined | undefined;
45
+ radioGroup?: string | undefined | undefined;
46
+ role?: React.AriaRole | undefined;
47
+ about?: string | undefined | undefined;
48
+ content?: string | undefined | undefined;
49
+ datatype?: string | undefined | undefined;
50
+ inlist?: any;
51
+ prefix?: string | undefined | undefined;
52
+ property?: string | undefined | undefined;
53
+ rel?: string | undefined | undefined;
54
+ resource?: string | undefined | undefined;
55
+ rev?: string | undefined | undefined;
56
+ typeof?: string | undefined | undefined;
57
+ vocab?: string | undefined | undefined;
58
+ autoCorrect?: string | undefined | undefined;
59
+ autoSave?: string | undefined | undefined;
60
+ itemProp?: string | undefined | undefined;
61
+ itemScope?: boolean | undefined | undefined;
62
+ itemType?: string | undefined | undefined;
63
+ itemID?: string | undefined | undefined;
64
+ itemRef?: string | undefined | undefined;
65
+ results?: number | undefined | undefined;
66
+ security?: string | undefined | undefined;
67
+ unselectable?: "on" | "off" | undefined | undefined;
68
+ inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined | undefined;
69
+ is?: string | undefined | undefined;
70
+ "aria-activedescendant"?: string | undefined | undefined;
71
+ "aria-atomic"?: (boolean | "true" | "false") | undefined;
72
+ "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined | undefined;
73
+ "aria-braillelabel"?: string | undefined | undefined;
74
+ "aria-brailleroledescription"?: string | undefined | undefined;
75
+ "aria-busy"?: (boolean | "true" | "false") | undefined;
76
+ "aria-checked"?: boolean | "false" | "mixed" | "true" | undefined | undefined;
77
+ "aria-colcount"?: number | undefined | undefined;
78
+ "aria-colindex"?: number | undefined | undefined;
79
+ "aria-colindextext"?: string | undefined | undefined;
80
+ "aria-colspan"?: number | undefined | undefined;
81
+ "aria-controls"?: string | undefined | undefined;
82
+ "aria-current"?: boolean | "false" | "true" | "page" | "step" | "location" | "date" | "time" | undefined | undefined;
83
+ "aria-describedby"?: string | undefined | undefined;
84
+ "aria-description"?: string | undefined | undefined;
85
+ "aria-details"?: string | undefined | undefined;
86
+ "aria-disabled"?: (boolean | "true" | "false") | undefined;
87
+ "aria-dropeffect"?: "none" | "copy" | "execute" | "link" | "move" | "popup" | undefined | undefined;
88
+ "aria-errormessage"?: string | undefined | undefined;
89
+ "aria-expanded"?: (boolean | "true" | "false") | undefined;
90
+ "aria-flowto"?: string | undefined | undefined;
91
+ "aria-grabbed"?: (boolean | "true" | "false") | undefined;
92
+ "aria-haspopup"?: boolean | "false" | "true" | "menu" | "listbox" | "tree" | "grid" | "dialog" | undefined | undefined;
93
+ "aria-hidden"?: (boolean | "true" | "false") | undefined;
94
+ "aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling" | undefined | undefined;
95
+ "aria-keyshortcuts"?: string | undefined | undefined;
96
+ "aria-label"?: string | undefined | undefined;
97
+ "aria-labelledby"?: string | undefined | undefined;
98
+ "aria-level"?: number | undefined | undefined;
99
+ "aria-live"?: "off" | "assertive" | "polite" | undefined | undefined;
100
+ "aria-modal"?: (boolean | "true" | "false") | undefined;
101
+ "aria-multiline"?: (boolean | "true" | "false") | undefined;
102
+ "aria-multiselectable"?: (boolean | "true" | "false") | undefined;
103
+ "aria-orientation"?: "horizontal" | "vertical" | undefined | undefined;
104
+ "aria-owns"?: string | undefined | undefined;
105
+ "aria-placeholder"?: string | undefined | undefined;
106
+ "aria-posinset"?: number | undefined | undefined;
107
+ "aria-pressed"?: boolean | "false" | "mixed" | "true" | undefined | undefined;
108
+ "aria-readonly"?: (boolean | "true" | "false") | undefined;
109
+ "aria-relevant"?: "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text" | "text additions" | "text removals" | undefined | undefined;
110
+ "aria-required"?: (boolean | "true" | "false") | undefined;
111
+ "aria-roledescription"?: string | undefined | undefined;
112
+ "aria-rowcount"?: number | undefined | undefined;
113
+ "aria-rowindex"?: number | undefined | undefined;
114
+ "aria-rowindextext"?: string | undefined | undefined;
115
+ "aria-rowspan"?: number | undefined | undefined;
116
+ "aria-selected"?: (boolean | "true" | "false") | undefined;
117
+ "aria-setsize"?: number | undefined | undefined;
118
+ "aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined | undefined;
119
+ "aria-valuemax"?: number | undefined | undefined;
120
+ "aria-valuemin"?: number | undefined | undefined;
121
+ "aria-valuenow"?: number | undefined | undefined;
122
+ "aria-valuetext"?: string | undefined | undefined;
123
+ children?: React.ReactNode;
124
+ dangerouslySetInnerHTML?: {
125
+ __html: string | TrustedHTML;
126
+ } | undefined | undefined;
127
+ onCopy?: React.ClipboardEventHandler<HTMLSpanElement> | undefined;
128
+ onCopyCapture?: React.ClipboardEventHandler<HTMLSpanElement> | undefined;
129
+ onCut?: React.ClipboardEventHandler<HTMLSpanElement> | undefined;
130
+ onCutCapture?: React.ClipboardEventHandler<HTMLSpanElement> | undefined;
131
+ onPaste?: React.ClipboardEventHandler<HTMLSpanElement> | undefined;
132
+ onPasteCapture?: React.ClipboardEventHandler<HTMLSpanElement> | undefined;
133
+ onCompositionEnd?: React.CompositionEventHandler<HTMLSpanElement> | undefined;
134
+ onCompositionEndCapture?: React.CompositionEventHandler<HTMLSpanElement> | undefined;
135
+ onCompositionStart?: React.CompositionEventHandler<HTMLSpanElement> | undefined;
136
+ onCompositionStartCapture?: React.CompositionEventHandler<HTMLSpanElement> | undefined;
137
+ onCompositionUpdate?: React.CompositionEventHandler<HTMLSpanElement> | undefined;
138
+ onCompositionUpdateCapture?: React.CompositionEventHandler<HTMLSpanElement> | undefined;
139
+ onFocus?: React.FocusEventHandler<HTMLSpanElement> | undefined;
140
+ onFocusCapture?: React.FocusEventHandler<HTMLSpanElement> | undefined;
141
+ onBlur?: React.FocusEventHandler<HTMLSpanElement> | undefined;
142
+ onBlurCapture?: React.FocusEventHandler<HTMLSpanElement> | undefined;
143
+ onChange?: React.FormEventHandler<HTMLSpanElement> | undefined;
144
+ onChangeCapture?: React.FormEventHandler<HTMLSpanElement> | undefined;
145
+ onBeforeInput?: React.FormEventHandler<HTMLSpanElement> | undefined;
146
+ onBeforeInputCapture?: React.FormEventHandler<HTMLSpanElement> | undefined;
147
+ onInput?: React.FormEventHandler<HTMLSpanElement> | undefined;
148
+ onInputCapture?: React.FormEventHandler<HTMLSpanElement> | undefined;
149
+ onReset?: React.FormEventHandler<HTMLSpanElement> | undefined;
150
+ onResetCapture?: React.FormEventHandler<HTMLSpanElement> | undefined;
151
+ onSubmit?: React.FormEventHandler<HTMLSpanElement> | undefined;
152
+ onSubmitCapture?: React.FormEventHandler<HTMLSpanElement> | undefined;
153
+ onInvalid?: React.FormEventHandler<HTMLSpanElement> | undefined;
154
+ onInvalidCapture?: React.FormEventHandler<HTMLSpanElement> | undefined;
155
+ onLoad?: React.ReactEventHandler<HTMLSpanElement> | undefined;
156
+ onLoadCapture?: React.ReactEventHandler<HTMLSpanElement> | undefined;
157
+ onError?: React.ReactEventHandler<HTMLSpanElement> | undefined;
158
+ onErrorCapture?: React.ReactEventHandler<HTMLSpanElement> | undefined;
159
+ onKeyDown?: React.KeyboardEventHandler<HTMLSpanElement> | undefined;
160
+ onKeyDownCapture?: React.KeyboardEventHandler<HTMLSpanElement> | undefined;
161
+ onKeyPress?: React.KeyboardEventHandler<HTMLSpanElement> | undefined;
162
+ onKeyPressCapture?: React.KeyboardEventHandler<HTMLSpanElement> | undefined;
163
+ onKeyUp?: React.KeyboardEventHandler<HTMLSpanElement> | undefined;
164
+ onKeyUpCapture?: React.KeyboardEventHandler<HTMLSpanElement> | undefined;
165
+ onAbort?: React.ReactEventHandler<HTMLSpanElement> | undefined;
166
+ onAbortCapture?: React.ReactEventHandler<HTMLSpanElement> | undefined;
167
+ onCanPlay?: React.ReactEventHandler<HTMLSpanElement> | undefined;
168
+ onCanPlayCapture?: React.ReactEventHandler<HTMLSpanElement> | undefined;
169
+ onCanPlayThrough?: React.ReactEventHandler<HTMLSpanElement> | undefined;
170
+ onCanPlayThroughCapture?: React.ReactEventHandler<HTMLSpanElement> | undefined;
171
+ onDurationChange?: React.ReactEventHandler<HTMLSpanElement> | undefined;
172
+ onDurationChangeCapture?: React.ReactEventHandler<HTMLSpanElement> | undefined;
173
+ onEmptied?: React.ReactEventHandler<HTMLSpanElement> | undefined;
174
+ onEmptiedCapture?: React.ReactEventHandler<HTMLSpanElement> | undefined;
175
+ onEncrypted?: React.ReactEventHandler<HTMLSpanElement> | undefined;
176
+ onEncryptedCapture?: React.ReactEventHandler<HTMLSpanElement> | undefined;
177
+ onEnded?: React.ReactEventHandler<HTMLSpanElement> | undefined;
178
+ onEndedCapture?: React.ReactEventHandler<HTMLSpanElement> | undefined;
179
+ onLoadedData?: React.ReactEventHandler<HTMLSpanElement> | undefined;
180
+ onLoadedDataCapture?: React.ReactEventHandler<HTMLSpanElement> | undefined;
181
+ onLoadedMetadata?: React.ReactEventHandler<HTMLSpanElement> | undefined;
182
+ onLoadedMetadataCapture?: React.ReactEventHandler<HTMLSpanElement> | undefined;
183
+ onLoadStart?: React.ReactEventHandler<HTMLSpanElement> | undefined;
184
+ onLoadStartCapture?: React.ReactEventHandler<HTMLSpanElement> | undefined;
185
+ onPause?: React.ReactEventHandler<HTMLSpanElement> | undefined;
186
+ onPauseCapture?: React.ReactEventHandler<HTMLSpanElement> | undefined;
187
+ onPlay?: React.ReactEventHandler<HTMLSpanElement> | undefined;
188
+ onPlayCapture?: React.ReactEventHandler<HTMLSpanElement> | undefined;
189
+ onPlaying?: React.ReactEventHandler<HTMLSpanElement> | undefined;
190
+ onPlayingCapture?: React.ReactEventHandler<HTMLSpanElement> | undefined;
191
+ onProgress?: React.ReactEventHandler<HTMLSpanElement> | undefined;
192
+ onProgressCapture?: React.ReactEventHandler<HTMLSpanElement> | undefined;
193
+ onRateChange?: React.ReactEventHandler<HTMLSpanElement> | undefined;
194
+ onRateChangeCapture?: React.ReactEventHandler<HTMLSpanElement> | undefined;
195
+ onResize?: React.ReactEventHandler<HTMLSpanElement> | undefined;
196
+ onResizeCapture?: React.ReactEventHandler<HTMLSpanElement> | undefined;
197
+ onSeeked?: React.ReactEventHandler<HTMLSpanElement> | undefined;
198
+ onSeekedCapture?: React.ReactEventHandler<HTMLSpanElement> | undefined;
199
+ onSeeking?: React.ReactEventHandler<HTMLSpanElement> | undefined;
200
+ onSeekingCapture?: React.ReactEventHandler<HTMLSpanElement> | undefined;
201
+ onStalled?: React.ReactEventHandler<HTMLSpanElement> | undefined;
202
+ onStalledCapture?: React.ReactEventHandler<HTMLSpanElement> | undefined;
203
+ onSuspend?: React.ReactEventHandler<HTMLSpanElement> | undefined;
204
+ onSuspendCapture?: React.ReactEventHandler<HTMLSpanElement> | undefined;
205
+ onTimeUpdate?: React.ReactEventHandler<HTMLSpanElement> | undefined;
206
+ onTimeUpdateCapture?: React.ReactEventHandler<HTMLSpanElement> | undefined;
207
+ onVolumeChange?: React.ReactEventHandler<HTMLSpanElement> | undefined;
208
+ onVolumeChangeCapture?: React.ReactEventHandler<HTMLSpanElement> | undefined;
209
+ onWaiting?: React.ReactEventHandler<HTMLSpanElement> | undefined;
210
+ onWaitingCapture?: React.ReactEventHandler<HTMLSpanElement> | undefined;
211
+ onAuxClick?: React.MouseEventHandler<HTMLSpanElement> | undefined;
212
+ onAuxClickCapture?: React.MouseEventHandler<HTMLSpanElement> | undefined;
213
+ onClick?: React.MouseEventHandler<HTMLSpanElement> | undefined;
214
+ onClickCapture?: React.MouseEventHandler<HTMLSpanElement> | undefined;
215
+ onContextMenu?: React.MouseEventHandler<HTMLSpanElement> | undefined;
216
+ onContextMenuCapture?: React.MouseEventHandler<HTMLSpanElement> | undefined;
217
+ onDoubleClick?: React.MouseEventHandler<HTMLSpanElement> | undefined;
218
+ onDoubleClickCapture?: React.MouseEventHandler<HTMLSpanElement> | undefined;
219
+ onDrag?: React.DragEventHandler<HTMLSpanElement> | undefined;
220
+ onDragCapture?: React.DragEventHandler<HTMLSpanElement> | undefined;
221
+ onDragEnd?: React.DragEventHandler<HTMLSpanElement> | undefined;
222
+ onDragEndCapture?: React.DragEventHandler<HTMLSpanElement> | undefined;
223
+ onDragEnter?: React.DragEventHandler<HTMLSpanElement> | undefined;
224
+ onDragEnterCapture?: React.DragEventHandler<HTMLSpanElement> | undefined;
225
+ onDragExit?: React.DragEventHandler<HTMLSpanElement> | undefined;
226
+ onDragExitCapture?: React.DragEventHandler<HTMLSpanElement> | undefined;
227
+ onDragLeave?: React.DragEventHandler<HTMLSpanElement> | undefined;
228
+ onDragLeaveCapture?: React.DragEventHandler<HTMLSpanElement> | undefined;
229
+ onDragOver?: React.DragEventHandler<HTMLSpanElement> | undefined;
230
+ onDragOverCapture?: React.DragEventHandler<HTMLSpanElement> | undefined;
231
+ onDragStart?: React.DragEventHandler<HTMLSpanElement> | undefined;
232
+ onDragStartCapture?: React.DragEventHandler<HTMLSpanElement> | undefined;
233
+ onDrop?: React.DragEventHandler<HTMLSpanElement> | undefined;
234
+ onDropCapture?: React.DragEventHandler<HTMLSpanElement> | undefined;
235
+ onMouseDown?: React.MouseEventHandler<HTMLSpanElement> | undefined;
236
+ onMouseDownCapture?: React.MouseEventHandler<HTMLSpanElement> | undefined;
237
+ onMouseEnter?: React.MouseEventHandler<HTMLSpanElement> | undefined;
238
+ onMouseLeave?: React.MouseEventHandler<HTMLSpanElement> | undefined;
239
+ onMouseMove?: React.MouseEventHandler<HTMLSpanElement> | undefined;
240
+ onMouseMoveCapture?: React.MouseEventHandler<HTMLSpanElement> | undefined;
241
+ onMouseOut?: React.MouseEventHandler<HTMLSpanElement> | undefined;
242
+ onMouseOutCapture?: React.MouseEventHandler<HTMLSpanElement> | undefined;
243
+ onMouseOver?: React.MouseEventHandler<HTMLSpanElement> | undefined;
244
+ onMouseOverCapture?: React.MouseEventHandler<HTMLSpanElement> | undefined;
245
+ onMouseUp?: React.MouseEventHandler<HTMLSpanElement> | undefined;
246
+ onMouseUpCapture?: React.MouseEventHandler<HTMLSpanElement> | undefined;
247
+ onSelect?: React.ReactEventHandler<HTMLSpanElement> | undefined;
248
+ onSelectCapture?: React.ReactEventHandler<HTMLSpanElement> | undefined;
249
+ onTouchCancel?: React.TouchEventHandler<HTMLSpanElement> | undefined;
250
+ onTouchCancelCapture?: React.TouchEventHandler<HTMLSpanElement> | undefined;
251
+ onTouchEnd?: React.TouchEventHandler<HTMLSpanElement> | undefined;
252
+ onTouchEndCapture?: React.TouchEventHandler<HTMLSpanElement> | undefined;
253
+ onTouchMove?: React.TouchEventHandler<HTMLSpanElement> | undefined;
254
+ onTouchMoveCapture?: React.TouchEventHandler<HTMLSpanElement> | undefined;
255
+ onTouchStart?: React.TouchEventHandler<HTMLSpanElement> | undefined;
256
+ onTouchStartCapture?: React.TouchEventHandler<HTMLSpanElement> | undefined;
257
+ onPointerDown?: React.PointerEventHandler<HTMLSpanElement> | undefined;
258
+ onPointerDownCapture?: React.PointerEventHandler<HTMLSpanElement> | undefined;
259
+ onPointerMove?: React.PointerEventHandler<HTMLSpanElement> | undefined;
260
+ onPointerMoveCapture?: React.PointerEventHandler<HTMLSpanElement> | undefined;
261
+ onPointerUp?: React.PointerEventHandler<HTMLSpanElement> | undefined;
262
+ onPointerUpCapture?: React.PointerEventHandler<HTMLSpanElement> | undefined;
263
+ onPointerCancel?: React.PointerEventHandler<HTMLSpanElement> | undefined;
264
+ onPointerCancelCapture?: React.PointerEventHandler<HTMLSpanElement> | undefined;
265
+ onPointerEnter?: React.PointerEventHandler<HTMLSpanElement> | undefined;
266
+ onPointerLeave?: React.PointerEventHandler<HTMLSpanElement> | undefined;
267
+ onPointerOver?: React.PointerEventHandler<HTMLSpanElement> | undefined;
268
+ onPointerOverCapture?: React.PointerEventHandler<HTMLSpanElement> | undefined;
269
+ onPointerOut?: React.PointerEventHandler<HTMLSpanElement> | undefined;
270
+ onPointerOutCapture?: React.PointerEventHandler<HTMLSpanElement> | undefined;
271
+ onGotPointerCapture?: React.PointerEventHandler<HTMLSpanElement> | undefined;
272
+ onGotPointerCaptureCapture?: React.PointerEventHandler<HTMLSpanElement> | undefined;
273
+ onLostPointerCapture?: React.PointerEventHandler<HTMLSpanElement> | undefined;
274
+ onLostPointerCaptureCapture?: React.PointerEventHandler<HTMLSpanElement> | undefined;
275
+ onScroll?: React.UIEventHandler<HTMLSpanElement> | undefined;
276
+ onScrollCapture?: React.UIEventHandler<HTMLSpanElement> | undefined;
277
+ onWheel?: React.WheelEventHandler<HTMLSpanElement> | undefined;
278
+ onWheelCapture?: React.WheelEventHandler<HTMLSpanElement> | undefined;
279
+ onAnimationStart?: React.AnimationEventHandler<HTMLSpanElement> | undefined;
280
+ onAnimationStartCapture?: React.AnimationEventHandler<HTMLSpanElement> | undefined;
281
+ onAnimationEnd?: React.AnimationEventHandler<HTMLSpanElement> | undefined;
282
+ onAnimationEndCapture?: React.AnimationEventHandler<HTMLSpanElement> | undefined;
283
+ onAnimationIteration?: React.AnimationEventHandler<HTMLSpanElement> | undefined;
284
+ onAnimationIterationCapture?: React.AnimationEventHandler<HTMLSpanElement> | undefined;
285
+ onTransitionEnd?: React.TransitionEventHandler<HTMLSpanElement> | undefined;
286
+ onTransitionEndCapture?: React.TransitionEventHandler<HTMLSpanElement> | undefined;
287
+ ref?: React.LegacyRef<HTMLSpanElement> | undefined;
288
+ key?: React.Key | null | undefined;
289
+ }>) => import("react/jsx-runtime").JSX.Element)[];
290
+ };
291
+ export default meta;
292
+ type Story = StoryObj<typeof meta>;
293
+ export declare const Default: Story;
294
+ export declare const StatusBadges: StoryObj;
295
+ export declare const SeverityBadges: StoryObj;
@@ -0,0 +1,7 @@
1
+ export declare const badgeVariants: (props?: ({
2
+ color?: "default" | "success" | "info" | "warning" | "error" | null | undefined;
3
+ clickable?: boolean | null | undefined;
4
+ } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
5
+ export declare const severityBadgeVariants: (props?: ({
6
+ severity?: "high" | "low" | "medium" | "highest" | "lowest" | null | undefined;
7
+ } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
@@ -0,0 +1,2 @@
1
+ import { Badge, SeverityBadge } from "./Badge";
2
+ export { Badge, SeverityBadge };
@@ -1,6 +1,6 @@
1
- import React, { CSSProperties, ReactNode } from "react";
1
+ import React, { ReactNode } from "react";
2
2
  import { InputProps } from "../TextInput/TextInput";
3
- import { MenuOption } from "../Menu/Menu";
3
+ export declare const menuItemBaseStyles: string;
4
4
  type RenderLabelCallbackArg = {
5
5
  value: string;
6
6
  label: string;
@@ -18,7 +18,6 @@ export type DropdownProps = {
18
18
  size?: "sm" | "md" | "lg";
19
19
  rounded?: "none" | "normal" | "full";
20
20
  variant?: "flat" | "outline" | "underline";
21
- defaultMenuItemType?: MenuOption["type"];
22
21
  helperText?: string;
23
22
  errorMessage?: string;
24
23
  filterMode?: boolean;
@@ -26,6 +25,7 @@ export type DropdownProps = {
26
25
  disabled?: boolean;
27
26
  error?: boolean;
28
27
  required?: boolean;
28
+ /** @deprecated no longer needed */
29
29
  modal?: boolean;
30
30
  className?: string;
31
31
  optionContainerClassName?: string;
@@ -40,8 +40,6 @@ export type DropdownProps = {
40
40
  optionsFiltered: Options[];
41
41
  selectedOption: Options | null | undefined;
42
42
  onClick: (option: Options) => void;
43
- style?: CSSProperties;
44
- dropdownRef?: React.RefObject<HTMLUListElement>;
45
43
  }) => ReactNode;
46
44
  } & Omit<InputProps, "value" | "onSelect">;
47
45
  declare const Dropdown: React.ForwardRefExoticComponent<{
@@ -50,7 +48,6 @@ declare const Dropdown: React.ForwardRefExoticComponent<{
50
48
  size?: "sm" | "md" | "lg";
51
49
  rounded?: "none" | "normal" | "full";
52
50
  variant?: "flat" | "outline" | "underline";
53
- defaultMenuItemType?: MenuOption["type"];
54
51
  helperText?: string;
55
52
  errorMessage?: string;
56
53
  filterMode?: boolean;
@@ -58,6 +55,7 @@ declare const Dropdown: React.ForwardRefExoticComponent<{
58
55
  disabled?: boolean;
59
56
  error?: boolean;
60
57
  required?: boolean;
58
+ /** @deprecated no longer needed */
61
59
  modal?: boolean;
62
60
  className?: string;
63
61
  optionContainerClassName?: string;
@@ -72,8 +70,6 @@ declare const Dropdown: React.ForwardRefExoticComponent<{
72
70
  optionsFiltered: Options[];
73
71
  selectedOption: Options | null | undefined;
74
72
  onClick: (option: Options) => void;
75
- style?: CSSProperties;
76
- dropdownRef?: React.RefObject<HTMLUListElement>;
77
73
  }) => ReactNode;
78
74
  } & Omit<InputProps, "onSelect" | "value"> & React.RefAttributes<HTMLInputElement>>;
79
75
  export default Dropdown;
@@ -9,7 +9,6 @@ declare const meta: {
9
9
  size?: "sm" | "md" | "lg";
10
10
  rounded?: "none" | "normal" | "full";
11
11
  variant?: "flat" | "outline" | "underline";
12
- defaultMenuItemType?: import("../Menu/Menu").MenuOption["type"];
13
12
  helperText?: string;
14
13
  errorMessage?: string;
15
14
  filterMode?: boolean;
@@ -31,8 +30,6 @@ declare const meta: {
31
30
  optionsFiltered: Options[];
32
31
  selectedOption: Options | null | undefined;
33
32
  onClick: (option: Options) => void;
34
- style?: React.CSSProperties;
35
- dropdownRef?: React.RefObject<HTMLUListElement>;
36
33
  }) => React.ReactNode;
37
34
  } & Omit<import("../..").InputProps, "onSelect" | "value"> & React.RefAttributes<HTMLInputElement>>;
38
35
  tags: string[];
@@ -45,7 +42,6 @@ declare const meta: {
45
42
  size?: "sm" | "md" | "lg" | undefined;
46
43
  rounded?: "none" | "normal" | "full" | undefined;
47
44
  variant?: "flat" | "outline" | "underline" | undefined;
48
- defaultMenuItemType?: "checkbox" | "radio" | "default" | undefined;
49
45
  helperText?: string | undefined;
50
46
  errorMessage?: string | undefined;
51
47
  filterMode?: boolean | undefined;
@@ -67,8 +63,6 @@ declare const meta: {
67
63
  optionsFiltered: Options[];
68
64
  selectedOption: Options | null | undefined;
69
65
  onClick: (option: Options) => void;
70
- style?: React.CSSProperties;
71
- dropdownRef?: React.RefObject<HTMLUListElement>;
72
66
  }) => React.ReactNode) | undefined;
73
67
  suppressHydrationWarning?: boolean | undefined | undefined;
74
68
  color?: string | undefined | undefined;
@@ -419,3 +413,4 @@ export declare const CustomOption: {
419
413
  render: (args: {}) => import("react/jsx-runtime").JSX.Element;
420
414
  };
421
415
  export declare const WithIcons: StoryObj<typeof Dropdown>;
416
+ export declare const InsideDialog: StoryObj<typeof Dropdown>;
@@ -13,9 +13,13 @@ declare const DropdownMenuSubContent: React.ForwardRefExoticComponent<Omit<Dropd
13
13
  declare const DropdownMenuContent: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
14
14
  declare const DropdownMenuItem: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
15
15
  inset?: boolean;
16
+ selected?: boolean;
17
+ icon?: React.ReactNode;
16
18
  } & React.RefAttributes<HTMLDivElement>>;
17
19
  declare const DropdownMenuCheckboxItem: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuCheckboxItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
18
- declare const DropdownMenuRadioItem: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuRadioItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
20
+ declare const DropdownMenuRadioItem: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuRadioItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
21
+ icon?: React.ReactNode;
22
+ } & React.RefAttributes<HTMLDivElement>>;
19
23
  declare const DropdownMenuLabel: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuLabelProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
20
24
  inset?: boolean;
21
25
  } & React.RefAttributes<HTMLDivElement>>;
@@ -15,40 +15,55 @@ declare const meta: {
15
15
  }>) => import("react/jsx-runtime").JSX.Element)[];
16
16
  };
17
17
  export default meta;
18
- export declare const Default: {
19
- args: {};
20
- render: (args: {}) => import("react/jsx-runtime").JSX.Element;
18
+ export declare const AllStates: {
19
+ name: string;
20
+ render: () => import("react/jsx-runtime").JSX.Element;
21
21
  };
22
22
  export declare const WithIcon: {
23
- args: {};
24
- render: (args: {}) => import("react/jsx-runtime").JSX.Element;
23
+ name: string;
24
+ render: () => import("react/jsx-runtime").JSX.Element;
25
25
  };
26
- export declare const WithLabel: {
27
- args: {};
28
- render: (args: {}) => import("react/jsx-runtime").JSX.Element;
26
+ export declare const WithCheckbox: {
27
+ name: string;
28
+ render: () => import("react/jsx-runtime").JSX.Element;
29
29
  };
30
- export declare const Checkboxes: {
31
- args: {};
32
- render: (args: {}) => import("react/jsx-runtime").JSX.Element;
30
+ export declare const WithSection: {
31
+ name: string;
32
+ render: () => import("react/jsx-runtime").JSX.Element;
33
+ };
34
+ export declare const WithSearch: {
35
+ name: string;
36
+ render: () => import("react/jsx-runtime").JSX.Element;
37
+ };
38
+ export declare const CanScroll: {
39
+ name: string;
40
+ render: () => import("react/jsx-runtime").JSX.Element;
41
+ };
42
+ export declare const DoubleScroll: {
43
+ name: string;
44
+ render: () => import("react/jsx-runtime").JSX.Element;
33
45
  };
34
46
  export declare const SubMenu: {
35
- args: {};
36
- render: (args: {}) => import("react/jsx-runtime").JSX.Element;
37
- };
38
- export declare const OnIcon: {
39
- args: {};
40
- render: (args: {}) => import("react/jsx-runtime").JSX.Element;
41
- };
42
- export declare const AsChild: {
43
- args: {};
44
- render: (args: {}) => import("react/jsx-runtime").JSX.Element;
45
- };
46
- export declare const Position: {
47
- args: {
48
- side: string;
49
- align: string;
50
- sideOffset: number;
51
- alignOffset: number;
52
- };
53
- render: (args: {}) => import("react/jsx-runtime").JSX.Element;
47
+ name: string;
48
+ render: () => import("react/jsx-runtime").JSX.Element;
49
+ };
50
+ export declare const WithRadio: {
51
+ name: string;
52
+ render: () => import("react/jsx-runtime").JSX.Element;
53
+ };
54
+ export declare const WithRadioAndIcon: {
55
+ name: string;
56
+ render: () => import("react/jsx-runtime").JSX.Element;
57
+ };
58
+ export declare const WithShortcut: {
59
+ name: string;
60
+ render: () => import("react/jsx-runtime").JSX.Element;
61
+ };
62
+ export declare const TriggerVariants: {
63
+ name: string;
64
+ render: () => import("react/jsx-runtime").JSX.Element;
65
+ };
66
+ export declare const ComplexShowcase: {
67
+ name: string;
68
+ render: () => import("react/jsx-runtime").JSX.Element;
54
69
  };
@@ -1,5 +1,5 @@
1
1
  import React, { FormHTMLAttributes, ReactNode } from "react";
2
- import { DefaultValues, FieldValues, Mode, Resolver, SubmitErrorHandler, SubmitHandler, UseFormReturn } from "react-hook-form";
2
+ import { DefaultValues, FieldValues, FormState, Mode, Resolver, SubmitErrorHandler, SubmitHandler, UseFormReturn } from "react-hook-form";
3
3
  import * as yup from "yup";
4
4
  type FormChildren<TFieldValues extends FieldValues> = ReactNode | ((methods: UseFormReturn<TFieldValues>) => ReactNode);
5
5
  export type FormController<TFieldValues extends FieldValues> = {
@@ -16,6 +16,7 @@ export type FormProps<TFieldValues extends FieldValues> = Omit<FormHTMLAttribute
16
16
  controllerRef?: React.MutableRefObject<FormController<TFieldValues> | null>;
17
17
  onSubmit: SubmitHandler<TFieldValues>;
18
18
  onInvalidSubmit?: SubmitErrorHandler<TFieldValues>;
19
+ onFormStateChange?: (formState: FormState<TFieldValues>) => void;
19
20
  resolver?: Resolver<TFieldValues>;
20
21
  validationSchema?: yup.ObjectSchema<any>;
21
22
  mode?: Mode;
@@ -17,6 +17,10 @@ export declare const RenderPropsCodeControl: {
17
17
  args: {};
18
18
  render: () => import("react/jsx-runtime").JSX.Element;
19
19
  };
20
+ export declare const FormStateChangeCallback: {
21
+ args: {};
22
+ render: () => import("react/jsx-runtime").JSX.Element;
23
+ };
20
24
  export declare const HigherLayerCodeControl: {
21
25
  args: {};
22
26
  render: () => import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1,38 @@
1
+ import * as React from "react";
2
+ export type ScrollbarSize = "m" | "s" | "xs";
3
+ export interface ScrollAreaProps extends React.HTMLAttributes<HTMLDivElement> {
4
+ /**
5
+ * Scrollbar thickness.
6
+ * - `m` — 12 px (shows track border)
7
+ * - `s` — 6 px (default, shows no track border)
8
+ * - `xs` — 2 px (shows no track border)
9
+ */
10
+ scrollbarSize?: ScrollbarSize;
11
+ /**
12
+ * Direction(s) the area can scroll.
13
+ * Defaults to `"vertical"`.
14
+ */
15
+ direction?: "vertical" | "horizontal" | "both";
16
+ }
17
+ /**
18
+ * ScrollArea
19
+ *
20
+ * A thin wrapper that applies the design-system scrollbar style to any
21
+ * scrollable container. Use `scrollbarSize` to pick the Figma size variant
22
+ * and `direction` to control which axis scrolls.
23
+ *
24
+ * **Client usage:**
25
+ * ```tsx
26
+ * <ScrollArea className="max-h-[270px]">
27
+ * {items.map(item => <div key={item.id}>{item.label}</div>)}
28
+ * </ScrollArea>
29
+ * ```
30
+ *
31
+ * For a double-scroll layout (two independent sections inside one dropdown),
32
+ * wrap each section individually:
33
+ * ```tsx
34
+ * <ScrollArea className="max-h-[160px]">...section A items...</ScrollArea>
35
+ * <ScrollArea className="max-h-[160px]">...section B items...</ScrollArea>
36
+ * ```
37
+ */
38
+ export declare const ScrollArea: React.ForwardRefExoticComponent<ScrollAreaProps & React.RefAttributes<HTMLDivElement>>;