@dynamic-mockups/design-system 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (117) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +396 -0
  3. package/dist/.storybook/ColorTokenSelect.d.ts +14 -0
  4. package/dist/.storybook/colorTokenOptions.d.ts +28 -0
  5. package/dist/.storybook/iconOptions.d.ts +54 -0
  6. package/dist/design-system.css +1 -0
  7. package/dist/index.d.ts +1 -0
  8. package/dist/index.js +87 -0
  9. package/dist/index.js.map +1 -0
  10. package/dist/index.mjs +11635 -0
  11. package/dist/index.mjs.map +1 -0
  12. package/dist/src/components/atoms/Accordion/Accordion.d.ts +52 -0
  13. package/dist/src/components/atoms/Accordion/Accordion.stories.d.ts +109 -0
  14. package/dist/src/components/atoms/Accordion/index.d.ts +2 -0
  15. package/dist/src/components/atoms/AlertDialog/AlertDialog.d.ts +66 -0
  16. package/dist/src/components/atoms/AlertDialog/AlertDialog.stories.d.ts +144 -0
  17. package/dist/src/components/atoms/AlertDialog/index.d.ts +2 -0
  18. package/dist/src/components/atoms/Avatar/Avatar.d.ts +54 -0
  19. package/dist/src/components/atoms/Avatar/Avatar.stories.d.ts +119 -0
  20. package/dist/src/components/atoms/Avatar/index.d.ts +2 -0
  21. package/dist/src/components/atoms/Badge/Badge.d.ts +58 -0
  22. package/dist/src/components/atoms/Badge/Badge.stories.d.ts +706 -0
  23. package/dist/src/components/atoms/Badge/index.d.ts +2 -0
  24. package/dist/src/components/atoms/Button/Button.d.ts +63 -0
  25. package/dist/src/components/atoms/Button/Button.stories.d.ts +763 -0
  26. package/dist/src/components/atoms/Button/index.d.ts +2 -0
  27. package/dist/src/components/atoms/Card/Card.d.ts +44 -0
  28. package/dist/src/components/atoms/Card/Card.stories.d.ts +103 -0
  29. package/dist/src/components/atoms/Card/index.d.ts +2 -0
  30. package/dist/src/components/atoms/Checkbox/Checkbox.d.ts +52 -0
  31. package/dist/src/components/atoms/Checkbox/Checkbox.stories.d.ts +168 -0
  32. package/dist/src/components/atoms/Checkbox/index.d.ts +2 -0
  33. package/dist/src/components/atoms/Dialog/Dialog.d.ts +53 -0
  34. package/dist/src/components/atoms/Dialog/Dialog.stories.d.ts +122 -0
  35. package/dist/src/components/atoms/Dialog/index.d.ts +2 -0
  36. package/dist/src/components/atoms/DropdownMenu/DropdownMenu.d.ts +61 -0
  37. package/dist/src/components/atoms/DropdownMenu/DropdownMenu.stories.d.ts +109 -0
  38. package/dist/src/components/atoms/DropdownMenu/index.d.ts +2 -0
  39. package/dist/src/components/atoms/HoverCard/HoverCard.d.ts +38 -0
  40. package/dist/src/components/atoms/HoverCard/HoverCard.stories.d.ts +86 -0
  41. package/dist/src/components/atoms/HoverCard/index.d.ts +2 -0
  42. package/dist/src/components/atoms/Label/Label.d.ts +19 -0
  43. package/dist/src/components/atoms/Label/Label.stories.d.ts +100 -0
  44. package/dist/src/components/atoms/Label/index.d.ts +2 -0
  45. package/dist/src/components/atoms/Popover/Popover.d.ts +44 -0
  46. package/dist/src/components/atoms/Popover/Popover.stories.d.ts +94 -0
  47. package/dist/src/components/atoms/Popover/index.d.ts +2 -0
  48. package/dist/src/components/atoms/Progress/Progress.d.ts +45 -0
  49. package/dist/src/components/atoms/Progress/Progress.stories.d.ts +108 -0
  50. package/dist/src/components/atoms/Progress/index.d.ts +2 -0
  51. package/dist/src/components/atoms/ProgressBar/ProgressBar.d.ts +66 -0
  52. package/dist/src/components/atoms/ProgressBar/ProgressBar.stories.d.ts +439 -0
  53. package/dist/src/components/atoms/ProgressBar/index.d.ts +2 -0
  54. package/dist/src/components/atoms/RadioGroup/RadioGroup.d.ts +46 -0
  55. package/dist/src/components/atoms/RadioGroup/RadioGroup.stories.d.ts +104 -0
  56. package/dist/src/components/atoms/RadioGroup/index.d.ts +2 -0
  57. package/dist/src/components/atoms/ScrollArea/ScrollArea.d.ts +36 -0
  58. package/dist/src/components/atoms/ScrollArea/ScrollArea.stories.d.ts +85 -0
  59. package/dist/src/components/atoms/ScrollArea/index.d.ts +2 -0
  60. package/dist/src/components/atoms/Select/Select.d.ts +55 -0
  61. package/dist/src/components/atoms/Select/Select.stories.d.ts +101 -0
  62. package/dist/src/components/atoms/Select/index.d.ts +2 -0
  63. package/dist/src/components/atoms/Separator/Separator.d.ts +17 -0
  64. package/dist/src/components/atoms/Separator/Separator.stories.d.ts +79 -0
  65. package/dist/src/components/atoms/Separator/index.d.ts +2 -0
  66. package/dist/src/components/atoms/Slider/Slider.d.ts +55 -0
  67. package/dist/src/components/atoms/Slider/Slider.stories.d.ts +115 -0
  68. package/dist/src/components/atoms/Slider/index.d.ts +2 -0
  69. package/dist/src/components/atoms/Stepper/Stepper.d.ts +100 -0
  70. package/dist/src/components/atoms/Stepper/Stepper.stories.d.ts +496 -0
  71. package/dist/src/components/atoms/Stepper/index.d.ts +2 -0
  72. package/dist/src/components/atoms/Switch/Switch.d.ts +49 -0
  73. package/dist/src/components/atoms/Switch/Switch.stories.d.ts +165 -0
  74. package/dist/src/components/atoms/Switch/index.d.ts +2 -0
  75. package/dist/src/components/atoms/Tabs/Tabs.d.ts +35 -0
  76. package/dist/src/components/atoms/Tabs/Tabs.stories.d.ts +83 -0
  77. package/dist/src/components/atoms/Tabs/index.d.ts +2 -0
  78. package/dist/src/components/atoms/Toast/Toast.d.ts +59 -0
  79. package/dist/src/components/atoms/Toast/Toast.stories.d.ts +118 -0
  80. package/dist/src/components/atoms/Toast/index.d.ts +2 -0
  81. package/dist/src/components/atoms/Toggle/Toggle.d.ts +20 -0
  82. package/dist/src/components/atoms/Toggle/Toggle.stories.d.ts +118 -0
  83. package/dist/src/components/atoms/Toggle/index.d.ts +2 -0
  84. package/dist/src/components/atoms/Tooltip/Tooltip.d.ts +32 -0
  85. package/dist/src/components/atoms/Tooltip/Tooltip.stories.d.ts +87 -0
  86. package/dist/src/components/atoms/Tooltip/index.d.ts +2 -0
  87. package/dist/src/components/atoms/index.d.ts +29 -0
  88. package/dist/src/components/index.d.ts +9 -0
  89. package/dist/src/components/molecules/CheckboxChip/CheckboxChip.d.ts +65 -0
  90. package/dist/src/components/molecules/CheckboxChip/CheckboxChip.stories.d.ts +90 -0
  91. package/dist/src/components/molecules/CheckboxChip/CheckboxChipGroup.d.ts +63 -0
  92. package/dist/src/components/molecules/RadioSelector/RadioSelector.d.ts +72 -0
  93. package/dist/src/components/molecules/RadioSelector/RadioSelector.stories.d.ts +118 -0
  94. package/dist/src/components/molecules/index.d.ts +10 -0
  95. package/dist/src/components/organisms/CTABox/CTABox.d.ts +69 -0
  96. package/dist/src/components/organisms/CTABox/CTABox.stories.d.ts +117 -0
  97. package/dist/src/components/organisms/OnboardingInfoBox/OnboardingInfoBox.d.ts +65 -0
  98. package/dist/src/components/organisms/OnboardingInfoBox/OnboardingInfoBox.stories.d.ts +93 -0
  99. package/dist/src/components/organisms/index.d.ts +8 -0
  100. package/dist/src/components/pages/index.d.ts +5 -0
  101. package/dist/src/components/templates/OnboardingTemplate/OnboardingTemplate.d.ts +185 -0
  102. package/dist/src/components/templates/OnboardingTemplate/OnboardingTemplate.stories.d.ts +26 -0
  103. package/dist/src/components/templates/index.d.ts +6 -0
  104. package/dist/src/index.d.ts +21 -0
  105. package/dist/src/tests/storybook/ColorTokenSelect.test.d.ts +4 -0
  106. package/dist/src/theme/ThemeProvider.d.ts +36 -0
  107. package/dist/src/theme/index.d.ts +2 -0
  108. package/dist/src/theme/theme.d.ts +18 -0
  109. package/dist/src/tokens/colorTokens.d.ts +58 -0
  110. package/dist/src/tokens/colorTokens.test.d.ts +4 -0
  111. package/dist/src/tokens/colors.d.ts +168 -0
  112. package/dist/src/tokens/index.d.ts +270 -0
  113. package/dist/src/tokens/radii.d.ts +17 -0
  114. package/dist/src/tokens/shadows.d.ts +16 -0
  115. package/dist/src/tokens/spacing.d.ts +38 -0
  116. package/dist/src/tokens/typography.d.ts +57 -0
  117. package/package.json +104 -0
@@ -0,0 +1,496 @@
1
+ import type { StoryObj } from "@storybook/react-vite";
2
+ import React from "react";
3
+ import type { ColorToken } from "./Stepper";
4
+ declare const meta: {
5
+ title: string;
6
+ component: React.ForwardRefExoticComponent<import("./Stepper").StepperProps & React.RefAttributes<HTMLDivElement>>;
7
+ parameters: {
8
+ layout: string;
9
+ };
10
+ tags: string[];
11
+ argTypes: {
12
+ variant: {
13
+ control: "select";
14
+ options: string[];
15
+ description: string;
16
+ table: {
17
+ category: string;
18
+ };
19
+ };
20
+ color: {
21
+ control: "select";
22
+ options: string[];
23
+ description: string;
24
+ table: {
25
+ category: string;
26
+ };
27
+ };
28
+ barColorToken: {
29
+ control: "select";
30
+ options: ColorToken[];
31
+ description: string;
32
+ table: {
33
+ category: string;
34
+ };
35
+ };
36
+ backgroundColorToken: {
37
+ control: "select";
38
+ options: ColorToken[];
39
+ description: string;
40
+ table: {
41
+ category: string;
42
+ };
43
+ };
44
+ size: {
45
+ control: "select";
46
+ options: string[];
47
+ description: string;
48
+ table: {
49
+ category: string;
50
+ };
51
+ };
52
+ displayType: {
53
+ control: "select";
54
+ options: string[];
55
+ description: string;
56
+ table: {
57
+ category: string;
58
+ };
59
+ };
60
+ textPosition: {
61
+ control: "select";
62
+ options: string[];
63
+ description: string;
64
+ table: {
65
+ category: string;
66
+ };
67
+ };
68
+ textColorToken: {
69
+ control: "select";
70
+ options: ColorToken[];
71
+ description: string;
72
+ table: {
73
+ category: string;
74
+ };
75
+ };
76
+ currentStep: {
77
+ control: {
78
+ type: "number";
79
+ min: number;
80
+ max: number;
81
+ step: number;
82
+ };
83
+ description: string;
84
+ table: {
85
+ category: string;
86
+ };
87
+ };
88
+ totalSteps: {
89
+ control: {
90
+ type: "number";
91
+ min: number;
92
+ max: number;
93
+ step: number;
94
+ };
95
+ description: string;
96
+ table: {
97
+ category: string;
98
+ };
99
+ };
100
+ showStepText: {
101
+ control: "boolean";
102
+ description: string;
103
+ table: {
104
+ category: string;
105
+ };
106
+ };
107
+ stepTextFormat: {
108
+ control: "text";
109
+ description: string;
110
+ table: {
111
+ category: string;
112
+ };
113
+ };
114
+ startText: {
115
+ control: "text";
116
+ description: string;
117
+ table: {
118
+ category: string;
119
+ };
120
+ };
121
+ endText: {
122
+ control: "text";
123
+ description: string;
124
+ table: {
125
+ category: string;
126
+ };
127
+ };
128
+ highContrast: {
129
+ control: "boolean";
130
+ description: string;
131
+ table: {
132
+ category: string;
133
+ };
134
+ };
135
+ radius: {
136
+ control: "select";
137
+ options: string[];
138
+ description: string;
139
+ table: {
140
+ category: string;
141
+ };
142
+ };
143
+ duration: {
144
+ control: "text";
145
+ description: string;
146
+ table: {
147
+ category: string;
148
+ };
149
+ };
150
+ m: {
151
+ table: {
152
+ disable: boolean;
153
+ };
154
+ };
155
+ mx: {
156
+ table: {
157
+ disable: boolean;
158
+ };
159
+ };
160
+ my: {
161
+ table: {
162
+ disable: boolean;
163
+ };
164
+ };
165
+ mt: {
166
+ table: {
167
+ disable: boolean;
168
+ };
169
+ };
170
+ mr: {
171
+ table: {
172
+ disable: boolean;
173
+ };
174
+ };
175
+ mb: {
176
+ table: {
177
+ disable: boolean;
178
+ };
179
+ };
180
+ ml: {
181
+ table: {
182
+ disable: boolean;
183
+ };
184
+ };
185
+ };
186
+ decorators: ((Story: import("storybook/internal/csf").PartialStoryFn<import("@storybook/react").ReactRenderer, {
187
+ variant?: import("./Stepper").StepperVariant | undefined;
188
+ size?: import("./Stepper").StepperSize | undefined;
189
+ color?: import("./Stepper").StepperColor | undefined;
190
+ barColorToken?: ColorToken | undefined;
191
+ backgroundColorToken?: ColorToken | undefined;
192
+ highContrast?: boolean | undefined;
193
+ currentStep?: number | undefined;
194
+ totalSteps?: number | undefined;
195
+ duration?: `${number}ms` | `${number}s` | undefined;
196
+ radius?: "none" | "small" | "medium" | "large" | "full" | undefined;
197
+ displayType?: import("./Stepper").DisplayType | undefined;
198
+ textPosition?: import("./Stepper").TextPosition | undefined;
199
+ textColorToken?: ColorToken | undefined;
200
+ showStepText?: boolean | undefined;
201
+ stepTextFormat?: string | undefined;
202
+ startText?: string | undefined;
203
+ endText?: string | undefined;
204
+ dir?: string | undefined | undefined;
205
+ slot?: string | undefined | undefined;
206
+ style?: React.CSSProperties | undefined;
207
+ title?: string | undefined | undefined;
208
+ key?: React.Key | null | undefined;
209
+ suppressContentEditableWarning?: boolean | undefined | undefined;
210
+ suppressHydrationWarning?: boolean | undefined | undefined;
211
+ accessKey?: string | undefined | undefined;
212
+ autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {}) | undefined;
213
+ autoFocus?: boolean | undefined | undefined;
214
+ className?: string | undefined | undefined;
215
+ contentEditable?: "inherit" | (boolean | "true" | "false") | "plaintext-only" | undefined;
216
+ contextMenu?: string | undefined | undefined;
217
+ draggable?: (boolean | "true" | "false") | undefined;
218
+ enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
219
+ hidden?: boolean | undefined | undefined;
220
+ id?: string | undefined | undefined;
221
+ lang?: string | undefined | undefined;
222
+ nonce?: string | undefined | undefined;
223
+ spellCheck?: (boolean | "true" | "false") | undefined;
224
+ tabIndex?: number | undefined | undefined;
225
+ translate?: "yes" | "no" | undefined | undefined;
226
+ radioGroup?: string | undefined | undefined;
227
+ role?: React.AriaRole | undefined;
228
+ about?: string | undefined | undefined;
229
+ content?: string | undefined | undefined;
230
+ datatype?: string | undefined | undefined;
231
+ inlist?: any;
232
+ prefix?: string | undefined | undefined;
233
+ property?: string | undefined | undefined;
234
+ rel?: string | undefined | undefined;
235
+ resource?: string | undefined | undefined;
236
+ rev?: string | undefined | undefined;
237
+ typeof?: string | undefined | undefined;
238
+ vocab?: string | undefined | undefined;
239
+ autoCorrect?: string | undefined | undefined;
240
+ autoSave?: string | undefined | undefined;
241
+ itemProp?: string | undefined | undefined;
242
+ itemScope?: boolean | undefined | undefined;
243
+ itemType?: string | undefined | undefined;
244
+ itemID?: string | undefined | undefined;
245
+ itemRef?: string | undefined | undefined;
246
+ results?: number | undefined | undefined;
247
+ security?: string | undefined | undefined;
248
+ unselectable?: "on" | "off" | undefined | undefined;
249
+ inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined | undefined;
250
+ is?: string | undefined | undefined;
251
+ exportparts?: string | undefined | undefined;
252
+ part?: string | undefined | undefined;
253
+ "aria-activedescendant"?: string | undefined | undefined;
254
+ "aria-atomic"?: (boolean | "true" | "false") | undefined;
255
+ "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined | undefined;
256
+ "aria-braillelabel"?: string | undefined | undefined;
257
+ "aria-brailleroledescription"?: string | undefined | undefined;
258
+ "aria-busy"?: (boolean | "true" | "false") | undefined;
259
+ "aria-checked"?: boolean | "false" | "mixed" | "true" | undefined | undefined;
260
+ "aria-colcount"?: number | undefined | undefined;
261
+ "aria-colindex"?: number | undefined | undefined;
262
+ "aria-colindextext"?: string | undefined | undefined;
263
+ "aria-colspan"?: number | undefined | undefined;
264
+ "aria-controls"?: string | undefined | undefined;
265
+ "aria-current"?: boolean | "false" | "true" | "page" | "step" | "location" | "date" | "time" | undefined | undefined;
266
+ "aria-describedby"?: string | undefined | undefined;
267
+ "aria-description"?: string | undefined | undefined;
268
+ "aria-details"?: string | undefined | undefined;
269
+ "aria-disabled"?: (boolean | "true" | "false") | undefined;
270
+ "aria-dropeffect"?: "none" | "copy" | "execute" | "link" | "move" | "popup" | undefined | undefined;
271
+ "aria-errormessage"?: string | undefined | undefined;
272
+ "aria-expanded"?: (boolean | "true" | "false") | undefined;
273
+ "aria-flowto"?: string | undefined | undefined;
274
+ "aria-grabbed"?: (boolean | "true" | "false") | undefined;
275
+ "aria-haspopup"?: boolean | "false" | "true" | "menu" | "listbox" | "tree" | "grid" | "dialog" | undefined | undefined;
276
+ "aria-hidden"?: (boolean | "true" | "false") | undefined;
277
+ "aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling" | undefined | undefined;
278
+ "aria-keyshortcuts"?: string | undefined | undefined;
279
+ "aria-label"?: string | undefined | undefined;
280
+ "aria-labelledby"?: string | undefined | undefined;
281
+ "aria-level"?: number | undefined | undefined;
282
+ "aria-live"?: "off" | "assertive" | "polite" | undefined | undefined;
283
+ "aria-modal"?: (boolean | "true" | "false") | undefined;
284
+ "aria-multiline"?: (boolean | "true" | "false") | undefined;
285
+ "aria-multiselectable"?: (boolean | "true" | "false") | undefined;
286
+ "aria-orientation"?: "horizontal" | "vertical" | undefined | undefined;
287
+ "aria-owns"?: string | undefined | undefined;
288
+ "aria-placeholder"?: string | undefined | undefined;
289
+ "aria-posinset"?: number | undefined | undefined;
290
+ "aria-pressed"?: boolean | "false" | "mixed" | "true" | undefined | undefined;
291
+ "aria-readonly"?: (boolean | "true" | "false") | undefined;
292
+ "aria-relevant"?: "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text" | "text additions" | "text removals" | undefined | undefined;
293
+ "aria-required"?: (boolean | "true" | "false") | undefined;
294
+ "aria-roledescription"?: string | undefined | undefined;
295
+ "aria-rowcount"?: number | undefined | undefined;
296
+ "aria-rowindex"?: number | undefined | undefined;
297
+ "aria-rowindextext"?: string | undefined | undefined;
298
+ "aria-rowspan"?: number | undefined | undefined;
299
+ "aria-selected"?: (boolean | "true" | "false") | undefined;
300
+ "aria-setsize"?: number | undefined | undefined;
301
+ "aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined | undefined;
302
+ "aria-valuemax"?: number | undefined | undefined;
303
+ "aria-valuemin"?: number | undefined | undefined;
304
+ "aria-valuenow"?: number | undefined | undefined;
305
+ "aria-valuetext"?: string | undefined | undefined;
306
+ dangerouslySetInnerHTML?: {
307
+ __html: string | TrustedHTML;
308
+ } | undefined | undefined;
309
+ onCopy?: React.ClipboardEventHandler<HTMLDivElement> | undefined;
310
+ onCopyCapture?: React.ClipboardEventHandler<HTMLDivElement> | undefined;
311
+ onCut?: React.ClipboardEventHandler<HTMLDivElement> | undefined;
312
+ onCutCapture?: React.ClipboardEventHandler<HTMLDivElement> | undefined;
313
+ onPaste?: React.ClipboardEventHandler<HTMLDivElement> | undefined;
314
+ onPasteCapture?: React.ClipboardEventHandler<HTMLDivElement> | undefined;
315
+ onCompositionEnd?: React.CompositionEventHandler<HTMLDivElement> | undefined;
316
+ onCompositionEndCapture?: React.CompositionEventHandler<HTMLDivElement> | undefined;
317
+ onCompositionStart?: React.CompositionEventHandler<HTMLDivElement> | undefined;
318
+ onCompositionStartCapture?: React.CompositionEventHandler<HTMLDivElement> | undefined;
319
+ onCompositionUpdate?: React.CompositionEventHandler<HTMLDivElement> | undefined;
320
+ onCompositionUpdateCapture?: React.CompositionEventHandler<HTMLDivElement> | undefined;
321
+ onFocus?: React.FocusEventHandler<HTMLDivElement> | undefined;
322
+ onFocusCapture?: React.FocusEventHandler<HTMLDivElement> | undefined;
323
+ onBlur?: React.FocusEventHandler<HTMLDivElement> | undefined;
324
+ onBlurCapture?: React.FocusEventHandler<HTMLDivElement> | undefined;
325
+ onChange?: React.FormEventHandler<HTMLDivElement> | undefined;
326
+ onChangeCapture?: React.FormEventHandler<HTMLDivElement> | undefined;
327
+ onBeforeInput?: React.InputEventHandler<HTMLDivElement> | undefined;
328
+ onBeforeInputCapture?: React.FormEventHandler<HTMLDivElement> | undefined;
329
+ onInput?: React.FormEventHandler<HTMLDivElement> | undefined;
330
+ onInputCapture?: React.FormEventHandler<HTMLDivElement> | undefined;
331
+ onReset?: React.FormEventHandler<HTMLDivElement> | undefined;
332
+ onResetCapture?: React.FormEventHandler<HTMLDivElement> | undefined;
333
+ onSubmit?: React.FormEventHandler<HTMLDivElement> | undefined;
334
+ onSubmitCapture?: React.FormEventHandler<HTMLDivElement> | undefined;
335
+ onInvalid?: React.FormEventHandler<HTMLDivElement> | undefined;
336
+ onInvalidCapture?: React.FormEventHandler<HTMLDivElement> | undefined;
337
+ onLoad?: React.ReactEventHandler<HTMLDivElement> | undefined;
338
+ onLoadCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
339
+ onError?: React.ReactEventHandler<HTMLDivElement> | undefined;
340
+ onErrorCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
341
+ onKeyDown?: React.KeyboardEventHandler<HTMLDivElement> | undefined;
342
+ onKeyDownCapture?: React.KeyboardEventHandler<HTMLDivElement> | undefined;
343
+ onKeyPress?: React.KeyboardEventHandler<HTMLDivElement> | undefined;
344
+ onKeyPressCapture?: React.KeyboardEventHandler<HTMLDivElement> | undefined;
345
+ onKeyUp?: React.KeyboardEventHandler<HTMLDivElement> | undefined;
346
+ onKeyUpCapture?: React.KeyboardEventHandler<HTMLDivElement> | undefined;
347
+ onAbort?: React.ReactEventHandler<HTMLDivElement> | undefined;
348
+ onAbortCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
349
+ onCanPlay?: React.ReactEventHandler<HTMLDivElement> | undefined;
350
+ onCanPlayCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
351
+ onCanPlayThrough?: React.ReactEventHandler<HTMLDivElement> | undefined;
352
+ onCanPlayThroughCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
353
+ onDurationChange?: React.ReactEventHandler<HTMLDivElement> | undefined;
354
+ onDurationChangeCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
355
+ onEmptied?: React.ReactEventHandler<HTMLDivElement> | undefined;
356
+ onEmptiedCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
357
+ onEncrypted?: React.ReactEventHandler<HTMLDivElement> | undefined;
358
+ onEncryptedCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
359
+ onEnded?: React.ReactEventHandler<HTMLDivElement> | undefined;
360
+ onEndedCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
361
+ onLoadedData?: React.ReactEventHandler<HTMLDivElement> | undefined;
362
+ onLoadedDataCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
363
+ onLoadedMetadata?: React.ReactEventHandler<HTMLDivElement> | undefined;
364
+ onLoadedMetadataCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
365
+ onLoadStart?: React.ReactEventHandler<HTMLDivElement> | undefined;
366
+ onLoadStartCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
367
+ onPause?: React.ReactEventHandler<HTMLDivElement> | undefined;
368
+ onPauseCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
369
+ onPlay?: React.ReactEventHandler<HTMLDivElement> | undefined;
370
+ onPlayCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
371
+ onPlaying?: React.ReactEventHandler<HTMLDivElement> | undefined;
372
+ onPlayingCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
373
+ onProgress?: React.ReactEventHandler<HTMLDivElement> | undefined;
374
+ onProgressCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
375
+ onRateChange?: React.ReactEventHandler<HTMLDivElement> | undefined;
376
+ onRateChangeCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
377
+ onSeeked?: React.ReactEventHandler<HTMLDivElement> | undefined;
378
+ onSeekedCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
379
+ onSeeking?: React.ReactEventHandler<HTMLDivElement> | undefined;
380
+ onSeekingCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
381
+ onStalled?: React.ReactEventHandler<HTMLDivElement> | undefined;
382
+ onStalledCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
383
+ onSuspend?: React.ReactEventHandler<HTMLDivElement> | undefined;
384
+ onSuspendCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
385
+ onTimeUpdate?: React.ReactEventHandler<HTMLDivElement> | undefined;
386
+ onTimeUpdateCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
387
+ onVolumeChange?: React.ReactEventHandler<HTMLDivElement> | undefined;
388
+ onVolumeChangeCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
389
+ onWaiting?: React.ReactEventHandler<HTMLDivElement> | undefined;
390
+ onWaitingCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
391
+ onAuxClick?: React.MouseEventHandler<HTMLDivElement> | undefined;
392
+ onAuxClickCapture?: React.MouseEventHandler<HTMLDivElement> | undefined;
393
+ onClick?: React.MouseEventHandler<HTMLDivElement> | undefined;
394
+ onClickCapture?: React.MouseEventHandler<HTMLDivElement> | undefined;
395
+ onContextMenu?: React.MouseEventHandler<HTMLDivElement> | undefined;
396
+ onContextMenuCapture?: React.MouseEventHandler<HTMLDivElement> | undefined;
397
+ onDoubleClick?: React.MouseEventHandler<HTMLDivElement> | undefined;
398
+ onDoubleClickCapture?: React.MouseEventHandler<HTMLDivElement> | undefined;
399
+ onDrag?: React.DragEventHandler<HTMLDivElement> | undefined;
400
+ onDragCapture?: React.DragEventHandler<HTMLDivElement> | undefined;
401
+ onDragEnd?: React.DragEventHandler<HTMLDivElement> | undefined;
402
+ onDragEndCapture?: React.DragEventHandler<HTMLDivElement> | undefined;
403
+ onDragEnter?: React.DragEventHandler<HTMLDivElement> | undefined;
404
+ onDragEnterCapture?: React.DragEventHandler<HTMLDivElement> | undefined;
405
+ onDragExit?: React.DragEventHandler<HTMLDivElement> | undefined;
406
+ onDragExitCapture?: React.DragEventHandler<HTMLDivElement> | undefined;
407
+ onDragLeave?: React.DragEventHandler<HTMLDivElement> | undefined;
408
+ onDragLeaveCapture?: React.DragEventHandler<HTMLDivElement> | undefined;
409
+ onDragOver?: React.DragEventHandler<HTMLDivElement> | undefined;
410
+ onDragOverCapture?: React.DragEventHandler<HTMLDivElement> | undefined;
411
+ onDragStart?: React.DragEventHandler<HTMLDivElement> | undefined;
412
+ onDragStartCapture?: React.DragEventHandler<HTMLDivElement> | undefined;
413
+ onDrop?: React.DragEventHandler<HTMLDivElement> | undefined;
414
+ onDropCapture?: React.DragEventHandler<HTMLDivElement> | undefined;
415
+ onMouseDown?: React.MouseEventHandler<HTMLDivElement> | undefined;
416
+ onMouseDownCapture?: React.MouseEventHandler<HTMLDivElement> | undefined;
417
+ onMouseEnter?: React.MouseEventHandler<HTMLDivElement> | undefined;
418
+ onMouseLeave?: React.MouseEventHandler<HTMLDivElement> | undefined;
419
+ onMouseMove?: React.MouseEventHandler<HTMLDivElement> | undefined;
420
+ onMouseMoveCapture?: React.MouseEventHandler<HTMLDivElement> | undefined;
421
+ onMouseOut?: React.MouseEventHandler<HTMLDivElement> | undefined;
422
+ onMouseOutCapture?: React.MouseEventHandler<HTMLDivElement> | undefined;
423
+ onMouseOver?: React.MouseEventHandler<HTMLDivElement> | undefined;
424
+ onMouseOverCapture?: React.MouseEventHandler<HTMLDivElement> | undefined;
425
+ onMouseUp?: React.MouseEventHandler<HTMLDivElement> | undefined;
426
+ onMouseUpCapture?: React.MouseEventHandler<HTMLDivElement> | undefined;
427
+ onSelect?: React.ReactEventHandler<HTMLDivElement> | undefined;
428
+ onSelectCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
429
+ onTouchCancel?: React.TouchEventHandler<HTMLDivElement> | undefined;
430
+ onTouchCancelCapture?: React.TouchEventHandler<HTMLDivElement> | undefined;
431
+ onTouchEnd?: React.TouchEventHandler<HTMLDivElement> | undefined;
432
+ onTouchEndCapture?: React.TouchEventHandler<HTMLDivElement> | undefined;
433
+ onTouchMove?: React.TouchEventHandler<HTMLDivElement> | undefined;
434
+ onTouchMoveCapture?: React.TouchEventHandler<HTMLDivElement> | undefined;
435
+ onTouchStart?: React.TouchEventHandler<HTMLDivElement> | undefined;
436
+ onTouchStartCapture?: React.TouchEventHandler<HTMLDivElement> | undefined;
437
+ onPointerDown?: React.PointerEventHandler<HTMLDivElement> | undefined;
438
+ onPointerDownCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
439
+ onPointerMove?: React.PointerEventHandler<HTMLDivElement> | undefined;
440
+ onPointerMoveCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
441
+ onPointerUp?: React.PointerEventHandler<HTMLDivElement> | undefined;
442
+ onPointerUpCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
443
+ onPointerCancel?: React.PointerEventHandler<HTMLDivElement> | undefined;
444
+ onPointerCancelCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
445
+ onPointerEnter?: React.PointerEventHandler<HTMLDivElement> | undefined;
446
+ onPointerLeave?: React.PointerEventHandler<HTMLDivElement> | undefined;
447
+ onPointerOver?: React.PointerEventHandler<HTMLDivElement> | undefined;
448
+ onPointerOverCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
449
+ onPointerOut?: React.PointerEventHandler<HTMLDivElement> | undefined;
450
+ onPointerOutCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
451
+ onGotPointerCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
452
+ onGotPointerCaptureCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
453
+ onLostPointerCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
454
+ onLostPointerCaptureCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
455
+ onScroll?: React.UIEventHandler<HTMLDivElement> | undefined;
456
+ onScrollCapture?: React.UIEventHandler<HTMLDivElement> | undefined;
457
+ onWheel?: React.WheelEventHandler<HTMLDivElement> | undefined;
458
+ onWheelCapture?: React.WheelEventHandler<HTMLDivElement> | undefined;
459
+ onAnimationStart?: React.AnimationEventHandler<HTMLDivElement> | undefined;
460
+ onAnimationStartCapture?: React.AnimationEventHandler<HTMLDivElement> | undefined;
461
+ onAnimationEnd?: React.AnimationEventHandler<HTMLDivElement> | undefined;
462
+ onAnimationEndCapture?: React.AnimationEventHandler<HTMLDivElement> | undefined;
463
+ onAnimationIteration?: React.AnimationEventHandler<HTMLDivElement> | undefined;
464
+ onAnimationIterationCapture?: React.AnimationEventHandler<HTMLDivElement> | undefined;
465
+ onTransitionEnd?: React.TransitionEventHandler<HTMLDivElement> | undefined;
466
+ onTransitionEndCapture?: React.TransitionEventHandler<HTMLDivElement> | undefined;
467
+ getValueLabel?: ((value: number, max: number) => string) | undefined;
468
+ ref?: React.LegacyRef<HTMLDivElement> | undefined;
469
+ }>) => import("react/jsx-runtime").JSX.Element)[];
470
+ };
471
+ export default meta;
472
+ type Story = StoryObj<typeof meta>;
473
+ export declare const Default: Story;
474
+ export declare const StepsDisplay: Story;
475
+ export declare const PercentageDisplay: Story;
476
+ export declare const TextLeft: Story;
477
+ export declare const TextRight: Story;
478
+ export declare const TextTopLeft: Story;
479
+ export declare const TextTopCenter: Story;
480
+ export declare const TextTopRight: Story;
481
+ export declare const TextBottomLeft: Story;
482
+ export declare const TextBottomCenter: Story;
483
+ export declare const TextBottomRight: Story;
484
+ export declare const WithStartEndText: Story;
485
+ export declare const WithStartEndTextPercentage: Story;
486
+ export declare const WithColorTokens: Story;
487
+ export declare const CustomTokenColors: Story;
488
+ export declare const TextPositions: Story;
489
+ export declare const DisplayTypes: Story;
490
+ export declare const StartEndTextVariations: Story;
491
+ export declare const OnboardingFlow: Story;
492
+ export declare const FileUploadProgress: Story;
493
+ export declare const CustomTextColor: Story;
494
+ export declare const AllSizes: Story;
495
+ export declare const Showcase: Story;
496
+ export declare const InteractiveColorPicker: Story;
@@ -0,0 +1,2 @@
1
+ export { Stepper } from "./Stepper";
2
+ export type { StepperProps, StepperVariant, StepperSize, StepperColor, ColorToken, DisplayType, TextPosition, } from "./Stepper";
@@ -0,0 +1,49 @@
1
+ /**
2
+ * Switch Component
3
+ * A toggle switch component that extends Radix UI Switch
4
+ */
5
+ import React from "react";
6
+ import type { SwitchProps as RadixSwitchProps } from "@radix-ui/themes";
7
+ import { type ColorToken } from "../../../tokens";
8
+ import "./Switch.scss";
9
+ export type { ColorToken } from "../../../tokens";
10
+ export type SwitchSize = "1" | "2" | "3";
11
+ export type SwitchColor = "primary" | "secondary" | "accent" | "success" | "error" | "warning";
12
+ export interface SwitchProps extends Omit<RadixSwitchProps, "size" | "color" | "m" | "mx" | "my" | "mt" | "mr" | "mb" | "ml"> {
13
+ /**
14
+ * Switch size
15
+ * @default '2'
16
+ */
17
+ size?: SwitchSize;
18
+ /**
19
+ * Switch color
20
+ * @default 'primary'
21
+ */
22
+ color?: SwitchColor;
23
+ /**
24
+ * Label text for the switch
25
+ */
26
+ label?: string;
27
+ /**
28
+ * Helper text displayed below the switch
29
+ */
30
+ helperText?: string;
31
+ /**
32
+ * Position of the label relative to the switch
33
+ * @default 'right'
34
+ */
35
+ labelPosition?: "left" | "right";
36
+ /**
37
+ * Color token for the switch track background (unchecked state)
38
+ */
39
+ backgroundColorToken?: ColorToken;
40
+ /**
41
+ * Color token for the switch track background (checked state)
42
+ */
43
+ checkedColorToken?: ColorToken;
44
+ /**
45
+ * Color token for the switch thumb/handle
46
+ */
47
+ thumbColorToken?: ColorToken;
48
+ }
49
+ export declare const Switch: React.ForwardRefExoticComponent<SwitchProps & React.RefAttributes<HTMLButtonElement>>;