@arbor-education/design-system.components 0.3.5 → 0.4.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 (106) hide show
  1. package/CHANGELOG.md +20 -0
  2. package/dist/components/banner/Banner.d.ts +19 -0
  3. package/dist/components/banner/Banner.d.ts.map +1 -0
  4. package/dist/components/banner/Banner.js +33 -0
  5. package/dist/components/banner/Banner.js.map +1 -0
  6. package/dist/components/banner/Banner.stories.d.ts +72 -0
  7. package/dist/components/banner/Banner.stories.d.ts.map +1 -0
  8. package/dist/components/banner/Banner.stories.js +84 -0
  9. package/dist/components/banner/Banner.stories.js.map +1 -0
  10. package/dist/components/banner/Banner.test.d.ts +2 -0
  11. package/dist/components/banner/Banner.test.d.ts.map +1 -0
  12. package/dist/components/banner/Banner.test.js +72 -0
  13. package/dist/components/banner/Banner.test.js.map +1 -0
  14. package/dist/components/editableText/EditableText.d.ts +10 -0
  15. package/dist/components/editableText/EditableText.d.ts.map +1 -0
  16. package/dist/components/editableText/EditableText.js +36 -0
  17. package/dist/components/editableText/EditableText.js.map +1 -0
  18. package/dist/components/editableText/EditableText.stories.d.ts +44 -0
  19. package/dist/components/editableText/EditableText.stories.d.ts.map +1 -0
  20. package/dist/components/editableText/EditableText.stories.js +94 -0
  21. package/dist/components/editableText/EditableText.stories.js.map +1 -0
  22. package/dist/components/editableText/EditableText.test.d.ts +2 -0
  23. package/dist/components/editableText/EditableText.test.d.ts.map +1 -0
  24. package/dist/components/editableText/EditableText.test.js +187 -0
  25. package/dist/components/editableText/EditableText.test.js.map +1 -0
  26. package/dist/components/heading/Heading.stories.d.ts +26 -0
  27. package/dist/components/heading/Heading.stories.d.ts.map +1 -1
  28. package/dist/components/heading/Heading.stories.js +35 -0
  29. package/dist/components/heading/Heading.stories.js.map +1 -1
  30. package/dist/components/progress/Progress.d.ts +6 -0
  31. package/dist/components/progress/Progress.d.ts.map +1 -0
  32. package/dist/components/progress/Progress.js +9 -0
  33. package/dist/components/progress/Progress.js.map +1 -0
  34. package/dist/components/progress/Progress.stories.d.ts +324 -0
  35. package/dist/components/progress/Progress.stories.d.ts.map +1 -0
  36. package/dist/components/progress/Progress.stories.js +77 -0
  37. package/dist/components/progress/Progress.stories.js.map +1 -0
  38. package/dist/components/progress/Progress.test.d.ts +2 -0
  39. package/dist/components/progress/Progress.test.d.ts.map +1 -0
  40. package/dist/components/progress/Progress.test.js +77 -0
  41. package/dist/components/progress/Progress.test.js.map +1 -0
  42. package/dist/components/toast/Toast.d.ts +10 -0
  43. package/dist/components/toast/Toast.d.ts.map +1 -0
  44. package/dist/components/toast/Toast.js +20 -0
  45. package/dist/components/toast/Toast.js.map +1 -0
  46. package/dist/components/toast/Toast.stories.d.ts +12 -0
  47. package/dist/components/toast/Toast.stories.d.ts.map +1 -0
  48. package/dist/components/toast/Toast.stories.js +73 -0
  49. package/dist/components/toast/Toast.stories.js.map +1 -0
  50. package/dist/components/toast/Toast.test.d.ts +2 -0
  51. package/dist/components/toast/Toast.test.d.ts.map +1 -0
  52. package/dist/components/toast/Toast.test.js +87 -0
  53. package/dist/components/toast/Toast.test.js.map +1 -0
  54. package/dist/components/toast/ToastViewport.d.ts +3 -0
  55. package/dist/components/toast/ToastViewport.d.ts.map +1 -0
  56. package/dist/components/toast/ToastViewport.js +5 -0
  57. package/dist/components/toast/ToastViewport.js.map +1 -0
  58. package/dist/index.css +202 -56
  59. package/dist/index.css.map +1 -1
  60. package/dist/index.d.ts +4 -0
  61. package/dist/index.d.ts.map +1 -1
  62. package/dist/index.js +4 -0
  63. package/dist/index.js.map +1 -1
  64. package/package.json +2 -1
  65. package/setupTestRuntime.ts +7 -0
  66. package/src/components/banner/Banner.stories.tsx +96 -0
  67. package/src/components/banner/Banner.test.tsx +86 -0
  68. package/src/components/banner/Banner.tsx +81 -0
  69. package/src/components/banner/banner.scss +67 -0
  70. package/src/components/button/button.scss +1 -5
  71. package/src/components/card/card.scss +0 -3
  72. package/src/components/dropdown/dropdown.scss +0 -3
  73. package/src/components/editableText/EditableText.stories.tsx +136 -0
  74. package/src/components/editableText/EditableText.test.tsx +242 -0
  75. package/src/components/editableText/EditableText.tsx +73 -0
  76. package/src/components/editableText/editableText.scss +54 -0
  77. package/src/components/formField/fieldset/fieldset.scss +0 -2
  78. package/src/components/formField/formField.scss +0 -2
  79. package/src/components/formField/inputs/checkbox/checkboxInput.scss +0 -2
  80. package/src/components/formField/inputs/input.scss +0 -3
  81. package/src/components/formField/inputs/radio/radioButtonInput.scss +0 -2
  82. package/src/components/formField/inputs/selectDropdown/selectDropdown.scss +0 -1
  83. package/src/components/formField/label/label.scss +0 -2
  84. package/src/components/heading/Heading.stories.tsx +58 -0
  85. package/src/components/heading/heading.scss +4 -4
  86. package/src/components/modal/modal.scss +0 -3
  87. package/src/components/pill/pill.scss +0 -3
  88. package/src/components/progress/Progress.stories.tsx +90 -0
  89. package/src/components/progress/Progress.test.tsx +88 -0
  90. package/src/components/progress/Progress.tsx +16 -0
  91. package/src/components/progress/progress.scss +13 -0
  92. package/src/components/searchBar/searchBar.scss +0 -3
  93. package/src/components/table/columnFilters/columnFilters.scss +0 -6
  94. package/src/components/table/pagination/pagination.scss +0 -4
  95. package/src/components/tabs/tabs.scss +0 -2
  96. package/src/components/tag/tag.scss +0 -3
  97. package/src/components/toast/Toast.stories.tsx +113 -0
  98. package/src/components/toast/Toast.test.tsx +126 -0
  99. package/src/components/toast/Toast.tsx +35 -0
  100. package/src/components/toast/ToastViewport.tsx +6 -0
  101. package/src/components/toast/toast.scss +79 -0
  102. package/src/components/tooltip/tooltip.scss +0 -3
  103. package/src/global.scss +9 -1
  104. package/src/index.scss +4 -0
  105. package/src/index.ts +4 -0
  106. package/src/tokens.scss +2 -0
@@ -0,0 +1,324 @@
1
+ import type { StoryObj } from '@storybook/react-vite';
2
+ declare const meta: {
3
+ title: string;
4
+ component: (props: import("./Progress").ProgressProps) => import("react/jsx-runtime").JSX.Element;
5
+ parameters: {
6
+ layout: string;
7
+ };
8
+ tags: string[];
9
+ args: {
10
+ 'aria-label': string;
11
+ };
12
+ argTypes: {
13
+ value: {
14
+ control: {
15
+ type: "number";
16
+ min: number;
17
+ max: number;
18
+ };
19
+ description: string;
20
+ };
21
+ max: {
22
+ control: "number";
23
+ description: string;
24
+ };
25
+ };
26
+ decorators: ((Story: import("storybook/internal/csf").PartialStoryFn<import("@storybook/react-vite").ReactRenderer, {
27
+ value?: number | null | undefined | undefined;
28
+ max?: number | undefined;
29
+ getValueLabel?: ((value: number, max: number) => string) | undefined;
30
+ color?: string | undefined | undefined;
31
+ role?: import("react").AriaRole | undefined;
32
+ className?: string | undefined | undefined;
33
+ prefix?: string | undefined | undefined;
34
+ suppressHydrationWarning?: boolean | undefined | undefined;
35
+ id?: string | undefined | undefined;
36
+ lang?: string | undefined | undefined;
37
+ style?: import("react").CSSProperties | undefined;
38
+ tabIndex?: number | undefined | undefined;
39
+ "aria-activedescendant"?: string | undefined | undefined;
40
+ "aria-atomic"?: (boolean | "true" | "false") | undefined;
41
+ "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined | undefined;
42
+ "aria-braillelabel"?: string | undefined | undefined;
43
+ "aria-brailleroledescription"?: string | undefined | undefined;
44
+ "aria-busy"?: (boolean | "true" | "false") | undefined;
45
+ "aria-checked"?: boolean | "false" | "mixed" | "true" | undefined | undefined;
46
+ "aria-colcount"?: number | undefined | undefined;
47
+ "aria-colindex"?: number | undefined | undefined;
48
+ "aria-colindextext"?: string | undefined | undefined;
49
+ "aria-colspan"?: number | undefined | undefined;
50
+ "aria-controls"?: string | undefined | undefined;
51
+ "aria-current"?: boolean | "false" | "true" | "page" | "step" | "location" | "date" | "time" | undefined | undefined;
52
+ "aria-describedby"?: string | undefined | undefined;
53
+ "aria-description"?: string | undefined | undefined;
54
+ "aria-details"?: string | undefined | undefined;
55
+ "aria-disabled"?: (boolean | "true" | "false") | undefined;
56
+ "aria-dropeffect"?: "none" | "copy" | "execute" | "link" | "move" | "popup" | undefined | undefined;
57
+ "aria-errormessage"?: string | undefined | undefined;
58
+ "aria-expanded"?: (boolean | "true" | "false") | undefined;
59
+ "aria-flowto"?: string | undefined | undefined;
60
+ "aria-grabbed"?: (boolean | "true" | "false") | undefined;
61
+ "aria-haspopup"?: boolean | "false" | "true" | "menu" | "listbox" | "tree" | "grid" | "dialog" | undefined | undefined;
62
+ "aria-hidden"?: (boolean | "true" | "false") | undefined;
63
+ "aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling" | undefined | undefined;
64
+ "aria-keyshortcuts"?: string | undefined | undefined;
65
+ "aria-label"?: string | undefined | undefined;
66
+ "aria-labelledby"?: string | undefined | undefined;
67
+ "aria-level"?: number | undefined | undefined;
68
+ "aria-live"?: "off" | "assertive" | "polite" | undefined | undefined;
69
+ "aria-modal"?: (boolean | "true" | "false") | undefined;
70
+ "aria-multiline"?: (boolean | "true" | "false") | undefined;
71
+ "aria-multiselectable"?: (boolean | "true" | "false") | undefined;
72
+ "aria-orientation"?: "horizontal" | "vertical" | undefined | undefined;
73
+ "aria-owns"?: string | undefined | undefined;
74
+ "aria-placeholder"?: string | undefined | undefined;
75
+ "aria-posinset"?: number | undefined | undefined;
76
+ "aria-pressed"?: boolean | "false" | "mixed" | "true" | undefined | undefined;
77
+ "aria-readonly"?: (boolean | "true" | "false") | undefined;
78
+ "aria-relevant"?: "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text" | "text additions" | "text removals" | undefined | undefined;
79
+ "aria-required"?: (boolean | "true" | "false") | undefined;
80
+ "aria-roledescription"?: string | undefined | undefined;
81
+ "aria-rowcount"?: number | undefined | undefined;
82
+ "aria-rowindex"?: number | undefined | undefined;
83
+ "aria-rowindextext"?: string | undefined | undefined;
84
+ "aria-rowspan"?: number | undefined | undefined;
85
+ "aria-selected"?: (boolean | "true" | "false") | undefined;
86
+ "aria-setsize"?: number | undefined | undefined;
87
+ "aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined | undefined;
88
+ "aria-valuemax"?: number | undefined | undefined;
89
+ "aria-valuemin"?: number | undefined | undefined;
90
+ "aria-valuenow"?: number | undefined | undefined;
91
+ "aria-valuetext"?: string | undefined | undefined;
92
+ children?: import("react").ReactNode;
93
+ dangerouslySetInnerHTML?: {
94
+ __html: string | TrustedHTML;
95
+ } | undefined | undefined;
96
+ onCopy?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
97
+ onCopyCapture?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
98
+ onCut?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
99
+ onCutCapture?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
100
+ onPaste?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
101
+ onPasteCapture?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
102
+ onCompositionEnd?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
103
+ onCompositionEndCapture?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
104
+ onCompositionStart?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
105
+ onCompositionStartCapture?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
106
+ onCompositionUpdate?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
107
+ onCompositionUpdateCapture?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
108
+ onFocus?: import("react").FocusEventHandler<HTMLDivElement> | undefined;
109
+ onFocusCapture?: import("react").FocusEventHandler<HTMLDivElement> | undefined;
110
+ onBlur?: import("react").FocusEventHandler<HTMLDivElement> | undefined;
111
+ onBlurCapture?: import("react").FocusEventHandler<HTMLDivElement> | undefined;
112
+ onChange?: import("react").FormEventHandler<HTMLDivElement> | undefined;
113
+ onChangeCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
114
+ onBeforeInput?: import("react").InputEventHandler<HTMLDivElement> | undefined;
115
+ onBeforeInputCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
116
+ onInput?: import("react").FormEventHandler<HTMLDivElement> | undefined;
117
+ onInputCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
118
+ onReset?: import("react").FormEventHandler<HTMLDivElement> | undefined;
119
+ onResetCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
120
+ onSubmit?: import("react").FormEventHandler<HTMLDivElement> | undefined;
121
+ onSubmitCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
122
+ onInvalid?: import("react").FormEventHandler<HTMLDivElement> | undefined;
123
+ onInvalidCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
124
+ onLoad?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
125
+ onLoadCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
126
+ onError?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
127
+ onErrorCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
128
+ onKeyDown?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
129
+ onKeyDownCapture?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
130
+ onKeyPress?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
131
+ onKeyPressCapture?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
132
+ onKeyUp?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
133
+ onKeyUpCapture?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
134
+ onAbort?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
135
+ onAbortCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
136
+ onCanPlay?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
137
+ onCanPlayCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
138
+ onCanPlayThrough?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
139
+ onCanPlayThroughCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
140
+ onDurationChange?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
141
+ onDurationChangeCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
142
+ onEmptied?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
143
+ onEmptiedCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
144
+ onEncrypted?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
145
+ onEncryptedCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
146
+ onEnded?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
147
+ onEndedCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
148
+ onLoadedData?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
149
+ onLoadedDataCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
150
+ onLoadedMetadata?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
151
+ onLoadedMetadataCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
152
+ onLoadStart?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
153
+ onLoadStartCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
154
+ onPause?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
155
+ onPauseCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
156
+ onPlay?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
157
+ onPlayCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
158
+ onPlaying?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
159
+ onPlayingCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
160
+ onProgress?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
161
+ onProgressCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
162
+ onRateChange?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
163
+ onRateChangeCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
164
+ onSeeked?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
165
+ onSeekedCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
166
+ onSeeking?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
167
+ onSeekingCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
168
+ onStalled?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
169
+ onStalledCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
170
+ onSuspend?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
171
+ onSuspendCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
172
+ onTimeUpdate?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
173
+ onTimeUpdateCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
174
+ onVolumeChange?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
175
+ onVolumeChangeCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
176
+ onWaiting?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
177
+ onWaitingCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
178
+ onAuxClick?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
179
+ onAuxClickCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
180
+ onClick?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
181
+ onClickCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
182
+ onContextMenu?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
183
+ onContextMenuCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
184
+ onDoubleClick?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
185
+ onDoubleClickCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
186
+ onDrag?: import("react").DragEventHandler<HTMLDivElement> | undefined;
187
+ onDragCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
188
+ onDragEnd?: import("react").DragEventHandler<HTMLDivElement> | undefined;
189
+ onDragEndCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
190
+ onDragEnter?: import("react").DragEventHandler<HTMLDivElement> | undefined;
191
+ onDragEnterCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
192
+ onDragExit?: import("react").DragEventHandler<HTMLDivElement> | undefined;
193
+ onDragExitCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
194
+ onDragLeave?: import("react").DragEventHandler<HTMLDivElement> | undefined;
195
+ onDragLeaveCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
196
+ onDragOver?: import("react").DragEventHandler<HTMLDivElement> | undefined;
197
+ onDragOverCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
198
+ onDragStart?: import("react").DragEventHandler<HTMLDivElement> | undefined;
199
+ onDragStartCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
200
+ onDrop?: import("react").DragEventHandler<HTMLDivElement> | undefined;
201
+ onDropCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
202
+ onMouseDown?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
203
+ onMouseDownCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
204
+ onMouseEnter?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
205
+ onMouseLeave?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
206
+ onMouseMove?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
207
+ onMouseMoveCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
208
+ onMouseOut?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
209
+ onMouseOutCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
210
+ onMouseOver?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
211
+ onMouseOverCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
212
+ onMouseUp?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
213
+ onMouseUpCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
214
+ onSelect?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
215
+ onSelectCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
216
+ onTouchCancel?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
217
+ onTouchCancelCapture?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
218
+ onTouchEnd?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
219
+ onTouchEndCapture?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
220
+ onTouchMove?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
221
+ onTouchMoveCapture?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
222
+ onTouchStart?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
223
+ onTouchStartCapture?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
224
+ onPointerDown?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
225
+ onPointerDownCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
226
+ onPointerMove?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
227
+ onPointerMoveCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
228
+ onPointerUp?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
229
+ onPointerUpCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
230
+ onPointerCancel?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
231
+ onPointerCancelCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
232
+ onPointerEnter?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
233
+ onPointerLeave?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
234
+ onPointerOver?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
235
+ onPointerOverCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
236
+ onPointerOut?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
237
+ onPointerOutCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
238
+ onGotPointerCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
239
+ onGotPointerCaptureCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
240
+ onLostPointerCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
241
+ onLostPointerCaptureCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
242
+ onScroll?: import("react").UIEventHandler<HTMLDivElement> | undefined;
243
+ onScrollCapture?: import("react").UIEventHandler<HTMLDivElement> | undefined;
244
+ onScrollEnd?: import("react").UIEventHandler<HTMLDivElement> | undefined;
245
+ onScrollEndCapture?: import("react").UIEventHandler<HTMLDivElement> | undefined;
246
+ onWheel?: import("react").WheelEventHandler<HTMLDivElement> | undefined;
247
+ onWheelCapture?: import("react").WheelEventHandler<HTMLDivElement> | undefined;
248
+ onAnimationStart?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
249
+ onAnimationStartCapture?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
250
+ onAnimationEnd?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
251
+ onAnimationEndCapture?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
252
+ onAnimationIteration?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
253
+ onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
254
+ onToggle?: import("react").ToggleEventHandler<HTMLDivElement> | undefined;
255
+ onBeforeToggle?: import("react").ToggleEventHandler<HTMLDivElement> | undefined;
256
+ onTransitionCancel?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
257
+ onTransitionCancelCapture?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
258
+ onTransitionEnd?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
259
+ onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
260
+ onTransitionRun?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
261
+ onTransitionRunCapture?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
262
+ onTransitionStart?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
263
+ onTransitionStartCapture?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
264
+ key?: import("react").Key | null | undefined;
265
+ defaultChecked?: boolean | undefined | undefined;
266
+ defaultValue?: string | number | readonly string[] | undefined;
267
+ suppressContentEditableWarning?: boolean | undefined | undefined;
268
+ accessKey?: string | undefined | undefined;
269
+ autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {}) | undefined;
270
+ autoFocus?: boolean | undefined | undefined;
271
+ contentEditable?: "inherit" | (boolean | "true" | "false") | "plaintext-only" | undefined;
272
+ contextMenu?: string | undefined | undefined;
273
+ dir?: string | undefined | undefined;
274
+ draggable?: (boolean | "true" | "false") | undefined;
275
+ enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
276
+ hidden?: boolean | undefined | undefined;
277
+ nonce?: string | undefined | undefined;
278
+ slot?: string | undefined | undefined;
279
+ spellCheck?: (boolean | "true" | "false") | undefined;
280
+ title?: string | undefined | undefined;
281
+ translate?: "yes" | "no" | undefined | undefined;
282
+ radioGroup?: string | undefined | undefined;
283
+ about?: string | undefined | undefined;
284
+ content?: string | undefined | undefined;
285
+ datatype?: string | undefined | undefined;
286
+ inlist?: any;
287
+ property?: string | undefined | undefined;
288
+ rel?: string | undefined | undefined;
289
+ resource?: string | undefined | undefined;
290
+ rev?: string | undefined | undefined;
291
+ typeof?: string | undefined | undefined;
292
+ vocab?: string | undefined | undefined;
293
+ autoCorrect?: string | undefined | undefined;
294
+ autoSave?: string | undefined | undefined;
295
+ itemProp?: string | undefined | undefined;
296
+ itemScope?: boolean | undefined | undefined;
297
+ itemType?: string | undefined | undefined;
298
+ itemID?: string | undefined | undefined;
299
+ itemRef?: string | undefined | undefined;
300
+ results?: number | undefined | undefined;
301
+ security?: string | undefined | undefined;
302
+ unselectable?: "on" | "off" | undefined | undefined;
303
+ popover?: "" | "auto" | "manual" | undefined | undefined;
304
+ popoverTargetAction?: "toggle" | "show" | "hide" | undefined | undefined;
305
+ popoverTarget?: string | undefined | undefined;
306
+ inert?: boolean | undefined | undefined;
307
+ inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined | undefined;
308
+ is?: string | undefined | undefined;
309
+ exportparts?: string | undefined | undefined;
310
+ part?: string | undefined | undefined;
311
+ asChild?: boolean | undefined;
312
+ indicatorClassName?: string | undefined;
313
+ }>) => import("react/jsx-runtime").JSX.Element)[];
314
+ };
315
+ export default meta;
316
+ type Story = StoryObj<typeof meta>;
317
+ export declare const Default: Story;
318
+ export declare const Empty: Story;
319
+ export declare const Quarter: Story;
320
+ export declare const Half: Story;
321
+ export declare const ThreeQuarters: Story;
322
+ export declare const Complete: Story;
323
+ export declare const CustomMax: Story;
324
+ //# sourceMappingURL=Progress.stories.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Progress.stories.d.ts","sourceRoot":"","sources":["../../../src/components/progress/Progress.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAG5D,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2BuB,CAAC;AAElC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAGnC,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC;AAGF,eAAO,MAAM,KAAK,EAAE,KAKnB,CAAC;AAGF,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC;AAGF,eAAO,MAAM,IAAI,EAAE,KAKlB,CAAC;AAGF,eAAO,MAAM,aAAa,EAAE,KAK3B,CAAC;AAGF,eAAO,MAAM,QAAQ,EAAE,KAKtB,CAAC;AAGF,eAAO,MAAM,SAAS,EAAE,KAKvB,CAAC"}
@@ -0,0 +1,77 @@
1
+ import { jsx as _jsx } from "react/jsx-runtime";
2
+ import { Progress } from './Progress';
3
+ const meta = {
4
+ title: 'Components/Progress',
5
+ component: Progress,
6
+ parameters: {
7
+ layout: 'centered',
8
+ },
9
+ tags: ['autodocs'],
10
+ args: {
11
+ 'aria-label': 'Progress bar',
12
+ },
13
+ argTypes: {
14
+ value: {
15
+ control: { type: 'number', min: 0, max: 100 },
16
+ description: 'Current progress value',
17
+ },
18
+ max: {
19
+ control: 'number',
20
+ description: 'Maximum progress value',
21
+ },
22
+ },
23
+ decorators: [
24
+ Story => (_jsx("div", { style: { width: '400px' }, children: _jsx(Story, {}) })),
25
+ ],
26
+ };
27
+ export default meta;
28
+ // Default progress
29
+ export const Default = {
30
+ args: {
31
+ value: 50,
32
+ max: 100,
33
+ },
34
+ };
35
+ // Empty progress
36
+ export const Empty = {
37
+ args: {
38
+ value: 0,
39
+ max: 100,
40
+ },
41
+ };
42
+ // Quarter progress
43
+ export const Quarter = {
44
+ args: {
45
+ value: 25,
46
+ max: 100,
47
+ },
48
+ };
49
+ // Half progress
50
+ export const Half = {
51
+ args: {
52
+ value: 50,
53
+ max: 100,
54
+ },
55
+ };
56
+ // Three quarters progress
57
+ export const ThreeQuarters = {
58
+ args: {
59
+ value: 75,
60
+ max: 100,
61
+ },
62
+ };
63
+ // Complete progress
64
+ export const Complete = {
65
+ args: {
66
+ value: 100,
67
+ max: 100,
68
+ },
69
+ };
70
+ // Custom max value
71
+ export const CustomMax = {
72
+ args: {
73
+ value: 30,
74
+ max: 50,
75
+ },
76
+ };
77
+ //# sourceMappingURL=Progress.stories.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Progress.stories.js","sourceRoot":"","sources":["../../../src/components/progress/Progress.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEtC,MAAM,IAAI,GAAG;IACX,KAAK,EAAE,qBAAqB;IAC5B,SAAS,EAAE,QAAQ;IACnB,UAAU,EAAE;QACV,MAAM,EAAE,UAAU;KACnB;IACD,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,IAAI,EAAE;QACJ,YAAY,EAAE,cAAc;KAC7B;IACD,QAAQ,EAAE;QACR,KAAK,EAAE;YACL,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,GAAG,EAAE;YAC7C,WAAW,EAAE,wBAAwB;SACtC;QACD,GAAG,EAAE;YACH,OAAO,EAAE,QAAQ;YACjB,WAAW,EAAE,wBAAwB;SACtC;KACF;IACD,UAAU,EAAE;QACV,KAAK,CAAC,EAAE,CAAC,CACP,cAAK,KAAK,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,YAC5B,KAAC,KAAK,KAAG,GACL,CACP;KACF;CAC8B,CAAC;AAElC,eAAe,IAAI,CAAC;AAGpB,mBAAmB;AACnB,MAAM,CAAC,MAAM,OAAO,GAAU;IAC5B,IAAI,EAAE;QACJ,KAAK,EAAE,EAAE;QACT,GAAG,EAAE,GAAG;KACT;CACF,CAAC;AAEF,iBAAiB;AACjB,MAAM,CAAC,MAAM,KAAK,GAAU;IAC1B,IAAI,EAAE;QACJ,KAAK,EAAE,CAAC;QACR,GAAG,EAAE,GAAG;KACT;CACF,CAAC;AAEF,mBAAmB;AACnB,MAAM,CAAC,MAAM,OAAO,GAAU;IAC5B,IAAI,EAAE;QACJ,KAAK,EAAE,EAAE;QACT,GAAG,EAAE,GAAG;KACT;CACF,CAAC;AAEF,gBAAgB;AAChB,MAAM,CAAC,MAAM,IAAI,GAAU;IACzB,IAAI,EAAE;QACJ,KAAK,EAAE,EAAE;QACT,GAAG,EAAE,GAAG;KACT;CACF,CAAC;AAEF,0BAA0B;AAC1B,MAAM,CAAC,MAAM,aAAa,GAAU;IAClC,IAAI,EAAE;QACJ,KAAK,EAAE,EAAE;QACT,GAAG,EAAE,GAAG;KACT;CACF,CAAC;AAEF,oBAAoB;AACpB,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC7B,IAAI,EAAE;QACJ,KAAK,EAAE,GAAG;QACV,GAAG,EAAE,GAAG;KACT;CACF,CAAC;AAEF,mBAAmB;AACnB,MAAM,CAAC,MAAM,SAAS,GAAU;IAC9B,IAAI,EAAE;QACJ,KAAK,EAAE,EAAE;QACT,GAAG,EAAE,EAAE;KACR;CACF,CAAC"}
@@ -0,0 +1,2 @@
1
+ import '@testing-library/jest-dom/vitest';
2
+ //# sourceMappingURL=Progress.test.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Progress.test.d.ts","sourceRoot":"","sources":["../../../src/components/progress/Progress.test.tsx"],"names":[],"mappings":"AAGA,OAAO,kCAAkC,CAAC"}
@@ -0,0 +1,77 @@
1
+ import { jsx as _jsx } from "react/jsx-runtime";
2
+ import { expect, test, describe } from 'vitest';
3
+ import { Progress } from './Progress';
4
+ import { render } from '@testing-library/react';
5
+ import '@testing-library/jest-dom/vitest';
6
+ describe('Progress component', () => {
7
+ test('renders progress bar with default values', () => {
8
+ const { container } = render(_jsx(Progress, {}));
9
+ const progressRoot = container.querySelector('.ds-progress');
10
+ expect(progressRoot).toBeInTheDocument();
11
+ });
12
+ test('renders progress indicator', () => {
13
+ const { container } = render(_jsx(Progress, { value: 50 }));
14
+ const indicator = container.querySelector('.ds-progress__indicator');
15
+ expect(indicator).toBeInTheDocument();
16
+ });
17
+ test('applies correct transform style for 0% progress', () => {
18
+ const { container } = render(_jsx(Progress, { value: 0, max: 100 }));
19
+ const indicator = container.querySelector('.ds-progress__indicator');
20
+ expect(indicator).toHaveStyle({ transform: 'translateX(-100%)' });
21
+ });
22
+ test('applies correct transform style for 50% progress', () => {
23
+ const { container } = render(_jsx(Progress, { value: 50, max: 100 }));
24
+ const indicator = container.querySelector('.ds-progress__indicator');
25
+ expect(indicator).toHaveStyle({ transform: 'translateX(-50%)' });
26
+ });
27
+ test('applies correct transform style for 100% progress', () => {
28
+ const { container } = render(_jsx(Progress, { value: 100, max: 100 }));
29
+ const indicator = container.querySelector('.ds-progress__indicator');
30
+ expect(indicator).toHaveStyle({ transform: 'translateX(-0%)' });
31
+ });
32
+ test('applies correct transform style for 25% progress', () => {
33
+ const { container } = render(_jsx(Progress, { value: 25, max: 100 }));
34
+ const indicator = container.querySelector('.ds-progress__indicator');
35
+ expect(indicator).toHaveStyle({ transform: 'translateX(-75%)' });
36
+ });
37
+ test('applies correct transform style for 75% progress', () => {
38
+ const { container } = render(_jsx(Progress, { value: 75, max: 100 }));
39
+ const indicator = container.querySelector('.ds-progress__indicator');
40
+ expect(indicator).toHaveStyle({ transform: 'translateX(-25%)' });
41
+ });
42
+ test('handles custom max value correctly', () => {
43
+ const { container } = render(_jsx(Progress, { value: 30, max: 200 }));
44
+ const indicator = container.querySelector('.ds-progress__indicator');
45
+ // 30/200 = 15% progress, so translateX should be -85%
46
+ expect(indicator).toHaveStyle({ transform: 'translateX(-85%)' });
47
+ });
48
+ test('calculates percentage correctly with custom max', () => {
49
+ const { container } = render(_jsx(Progress, { value: 25, max: 50 }));
50
+ const indicator = container.querySelector('.ds-progress__indicator');
51
+ // 25/50 = 50% progress, so translateX should be -50%
52
+ expect(indicator).toHaveStyle({ transform: 'translateX(-50%)' });
53
+ });
54
+ test('passes through value and max props to Radix component', () => {
55
+ const { container } = render(_jsx(Progress, { value: 60, max: 100 }));
56
+ const progressRoot = container.querySelector('.ds-progress');
57
+ expect(progressRoot).toHaveAttribute('data-value', '60');
58
+ expect(progressRoot).toHaveAttribute('data-max', '100');
59
+ });
60
+ test('uses default value of 0 when not provided', () => {
61
+ const { container } = render(_jsx(Progress, { max: 100 }));
62
+ const progressRoot = container.querySelector('.ds-progress');
63
+ expect(progressRoot).toHaveAttribute('data-value', '0');
64
+ });
65
+ test('uses default max of 100 when not provided', () => {
66
+ const { container } = render(_jsx(Progress, { value: 50 }));
67
+ const progressRoot = container.querySelector('.ds-progress');
68
+ expect(progressRoot).toHaveAttribute('data-max', '100');
69
+ });
70
+ test('applies additional props to root element', () => {
71
+ const { container } = render(_jsx(Progress, { value: 50, "data-testid": "custom-progress" }));
72
+ const progressRoot = container.querySelector('[data-testid="custom-progress"]');
73
+ expect(progressRoot).toBeInTheDocument();
74
+ expect(progressRoot).toHaveClass('ds-progress');
75
+ });
76
+ });
77
+ //# sourceMappingURL=Progress.test.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Progress.test.js","sourceRoot":"","sources":["../../../src/components/progress/Progress.test.tsx"],"names":[],"mappings":"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"}
@@ -0,0 +1,10 @@
1
+ import { Toast as RadixToast } from 'radix-ui';
2
+ export type ToastProps = RadixToast.ToastProps & {
3
+ variant?: 'information' | 'danger' | 'success' | 'warning';
4
+ };
5
+ export declare const Toast: {
6
+ (props: ToastProps): import("react/jsx-runtime").JSX.Element;
7
+ Provider: import("react").FC<RadixToast.ToastProviderProps>;
8
+ Viewport: ({ className, ...rest }: RadixToast.ToastViewportProps) => import("react/jsx-runtime").JSX.Element;
9
+ };
10
+ //# sourceMappingURL=Toast.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Toast.d.ts","sourceRoot":"","sources":["../../../src/components/toast/Toast.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,IAAI,UAAU,EAAE,MAAM,UAAU,CAAC;AAI/C,MAAM,MAAM,UAAU,GAAG,UAAU,CAAC,UAAU,GAAG;IAC/C,OAAO,CAAC,EAAE,aAAa,GAAG,QAAQ,GAAG,SAAS,GAAG,SAAS,CAAC;CAC5D,CAAC;AAEF,eAAO,MAAM,KAAK;YAAW,UAAU;;;CAsBtC,CAAC"}
@@ -0,0 +1,20 @@
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import classNames from 'classnames';
3
+ import { Toast as RadixToast } from 'radix-ui';
4
+ import { ToastViewport } from './ToastViewport';
5
+ import { Icon } from '../icon/Icon';
6
+ export const Toast = (props) => {
7
+ const { children, variant = 'information', ...rest } = props;
8
+ const classes = classNames('ds-toast', `ds-toast--${variant}`);
9
+ const iconName = {
10
+ information: 'info',
11
+ danger: 'circle-alert',
12
+ success: 'circle-check',
13
+ warning: 'triangle-alert',
14
+ };
15
+ const icon = iconName[variant];
16
+ return (_jsxs(RadixToast.Root, { ...rest, className: classes, children: [_jsx(Icon, { className: "ds-toast__icon", name: icon }), _jsx(RadixToast.Title, { className: "ds-toast__title", children: children }), _jsx(RadixToast.Close, { className: "ds-toast__close ds-button ds-button--secondary ds-button--icon-only ds-button--borderless", children: _jsx(Icon, { name: "x", screenReaderText: "Close" }) })] }));
17
+ };
18
+ Toast.Provider = RadixToast.Provider;
19
+ Toast.Viewport = ToastViewport;
20
+ //# sourceMappingURL=Toast.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Toast.js","sourceRoot":"","sources":["../../../src/components/toast/Toast.tsx"],"names":[],"mappings":";AAAA,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,EAAE,KAAK,IAAI,UAAU,EAAE,MAAM,UAAU,CAAC;AAC/C,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAM5C,MAAM,CAAC,MAAM,KAAK,GAAG,CAAC,KAAiB,EAAE,EAAE;IACzC,MAAM,EAAE,QAAQ,EAAE,OAAO,GAAG,aAAa,EAAE,GAAG,IAAI,EAAE,GAAG,KAAK,CAAC;IAC7D,MAAM,OAAO,GAAG,UAAU,CAAC,UAAU,EAAE,aAAa,OAAO,EAAE,CAAC,CAAC;IAE/D,MAAM,QAAQ,GAAG;QACf,WAAW,EAAE,MAAM;QACnB,MAAM,EAAE,cAAc;QACtB,OAAO,EAAE,cAAc;QACvB,OAAO,EAAE,gBAAgB;KACjB,CAAC;IAEX,MAAM,IAAI,GAAG,QAAQ,CAAC,OAAO,CAAC,CAAC;IAE/B,OAAO,CACL,MAAC,UAAU,CAAC,IAAI,OAAK,IAAI,EAAE,SAAS,EAAE,OAAO,aAC3C,KAAC,IAAI,IAAC,SAAS,EAAC,gBAAgB,EAAC,IAAI,EAAE,IAAI,GAAI,EAC/C,KAAC,UAAU,CAAC,KAAK,IAAC,SAAS,EAAC,iBAAiB,YAAE,QAAQ,GAAoB,EAC3E,KAAC,UAAU,CAAC,KAAK,IAAC,SAAS,EAAC,2FAA2F,YACrH,KAAC,IAAI,IAAC,IAAI,EAAC,GAAG,EAAC,gBAAgB,EAAC,OAAO,GAAG,GACzB,IACH,CACnB,CAAC;AACJ,CAAC,CAAC;AAEF,KAAK,CAAC,QAAQ,GAAG,UAAU,CAAC,QAAQ,CAAC;AACrC,KAAK,CAAC,QAAQ,GAAG,aAAa,CAAC"}
@@ -0,0 +1,12 @@
1
+ import type { Meta, StoryObj } from '@storybook/react-vite';
2
+ import { Toast } from './Toast';
3
+ declare const meta: Meta<typeof Toast>;
4
+ type Story = StoryObj<typeof Toast>;
5
+ export declare const Information: Story;
6
+ export declare const Success: Story;
7
+ export declare const Warning: Story;
8
+ export declare const Danger: Story;
9
+ export declare const LongContent: Story;
10
+ export declare const MultipleToasts: Story;
11
+ export default meta;
12
+ //# sourceMappingURL=Toast.stories.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Toast.stories.d.ts","sourceRoot":"","sources":["../../../src/components/toast/Toast.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,KAAK,EAAmB,MAAM,SAAS,CAAC;AAIjD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,KAAK,CAkB5B,CAAC;AAEF,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,KAAK,CAAC,CAAC;AAapC,eAAO,MAAM,WAAW,EAAE,KAMzB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAMrB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAMrB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAMpB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAOzB,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KA+B5B,CAAC;AAEF,eAAe,IAAI,CAAC"}