@rovula/ui 0.0.4 → 0.0.6

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 (84) hide show
  1. package/dist/cjs/bundle.css +1477 -0
  2. package/dist/cjs/bundle.js +2 -0
  3. package/dist/cjs/bundle.js.map +1 -0
  4. package/dist/cjs/types/components/Button/Button.d.ts +15 -0
  5. package/dist/cjs/types/components/Button/Button.styles.d.ts +7 -0
  6. package/dist/cjs/types/components/Button/Buttons.stories.d.ts +375 -0
  7. package/dist/cjs/types/components/Text/Text.d.ts +12 -0
  8. package/dist/cjs/types/components/Text/Text.stories.d.ts +35 -0
  9. package/dist/cjs/types/components/TextInput/TextInput.d.ts +19 -0
  10. package/dist/cjs/types/components/TextInput/TextInput.stories.d.ts +338 -0
  11. package/dist/cjs/types/components/TextInput/TextInput.styles.d.ts +26 -0
  12. package/dist/cjs/types/index.d.ts +7 -0
  13. package/dist/components/Button/Button.js +31 -0
  14. package/dist/components/Button/Button.styles.js +90 -0
  15. package/dist/components/Button/Buttons.stories.js +66 -0
  16. package/dist/components/Form/Form.js +106 -0
  17. package/dist/components/Form/Text.js +6 -0
  18. package/dist/components/Form/TextInput.js +6 -0
  19. package/dist/components/Table/Table.js +6 -0
  20. package/dist/components/Tabs/Tabs.js +8 -0
  21. package/dist/components/Text/Text.js +6 -0
  22. package/dist/components/Text/Text.stories.js +73 -0
  23. package/dist/components/TextInput/TextInput.js +61 -0
  24. package/dist/components/TextInput/TextInput.stories.js +39 -0
  25. package/dist/components/TextInput/TextInput.styles.js +155 -0
  26. package/dist/esm/bundle.css +1477 -0
  27. package/dist/esm/bundle.js +2 -0
  28. package/dist/esm/bundle.js.map +1 -0
  29. package/dist/esm/types/components/Button/Button.d.ts +15 -0
  30. package/dist/esm/types/components/Button/Button.styles.d.ts +7 -0
  31. package/dist/esm/types/components/Button/Buttons.stories.d.ts +375 -0
  32. package/dist/esm/types/components/Form/Form.d.ts +12 -0
  33. package/dist/esm/types/components/Form/Text.d.ts +9 -0
  34. package/dist/esm/types/components/Form/TextInput.d.ts +11 -0
  35. package/dist/esm/types/components/Table/Table.d.ts +11 -0
  36. package/dist/esm/types/components/Tabs/Tabs.d.ts +11 -0
  37. package/dist/esm/types/components/Text/Text.d.ts +12 -0
  38. package/dist/esm/types/components/Text/Text.stories.d.ts +35 -0
  39. package/dist/esm/types/components/TextInput/TextInput.d.ts +19 -0
  40. package/dist/esm/types/components/TextInput/TextInput.stories.d.ts +338 -0
  41. package/dist/esm/types/components/TextInput/TextInput.styles.d.ts +26 -0
  42. package/dist/esm/types/index.d.ts +7 -0
  43. package/dist/esm/types/utils/datetime.d.ts +9 -0
  44. package/dist/index.d.ts +67 -0
  45. package/dist/index.js +12 -0
  46. package/dist/src/theme/global.css +1825 -0
  47. package/dist/theme/global.css +149 -0
  48. package/dist/theme/main-preset.js +159 -0
  49. package/dist/theme/plugins/utilities/typography.js +69 -0
  50. package/dist/theme/presets/colors.js +166 -0
  51. package/dist/utils/datetime.js +30 -0
  52. package/package.json +41 -10
  53. package/src/components/Button/Button.styles.ts +98 -0
  54. package/src/components/Button/Button.tsx +48 -18
  55. package/src/components/Button/Buttons.stories.tsx +120 -0
  56. package/src/components/Text/Text.stories.tsx +112 -0
  57. package/src/components/Text/Text.tsx +59 -0
  58. package/src/components/TextInput/TextInput.stories.tsx +44 -0
  59. package/src/components/TextInput/TextInput.styles.ts +177 -0
  60. package/src/components/TextInput/TextInput.tsx +119 -0
  61. package/src/index.ts +21 -0
  62. package/src/stories/Typography.mdx +160 -0
  63. package/src/theme/global.css +149 -0
  64. package/src/theme/main-preset.js +159 -0
  65. package/src/theme/plugins/utilities/typography.js +69 -0
  66. package/src/theme/presets/colors.js +166 -0
  67. package/dist/main.d.ts +0 -7
  68. package/dist/main.js +0 -25
  69. package/dist/src/components/Button/Button.d.ts +0 -12
  70. package/dist/src/components/Button/Button.js +0 -10
  71. package/dist/src/components/Form/Form.js +0 -91
  72. package/dist/src/components/Form/Text.js +0 -10
  73. package/dist/src/components/Form/TextInput.js +0 -10
  74. package/dist/src/components/Table/Table.js +0 -13
  75. package/dist/src/components/Tabs/Tabs.js +0 -33
  76. package/dist/src/style.css +0 -3
  77. package/dist/src/utils/datetime.js +0 -37
  78. package/src/style.css +0 -3
  79. /package/dist/{src → cjs/types}/components/Form/Form.d.ts +0 -0
  80. /package/dist/{src → cjs/types}/components/Form/Text.d.ts +0 -0
  81. /package/dist/{src → cjs/types}/components/Form/TextInput.d.ts +0 -0
  82. /package/dist/{src → cjs/types}/components/Table/Table.d.ts +0 -0
  83. /package/dist/{src → cjs/types}/components/Tabs/Tabs.d.ts +0 -0
  84. /package/dist/{src → cjs/types}/utils/datetime.d.ts +0 -0
@@ -0,0 +1,338 @@
1
+ import React from "react";
2
+ declare const meta: {
3
+ title: string;
4
+ component: React.FC<{
5
+ id?: string | undefined;
6
+ label?: string | undefined;
7
+ size?: "sm" | "md" | "lg" | undefined;
8
+ rounded?: "none" | "normal" | "full" | undefined;
9
+ variant?: "outline" | "flat" | "underline" | undefined;
10
+ type?: React.HTMLInputTypeAttribute | undefined;
11
+ helperText?: string | undefined;
12
+ errorMessage?: string | undefined;
13
+ fullwidth?: boolean | undefined;
14
+ disabled?: boolean | undefined;
15
+ error?: boolean | undefined;
16
+ required?: boolean | undefined;
17
+ hasClearIcon?: boolean | undefined;
18
+ className?: string | undefined;
19
+ } & Omit<React.InputHTMLAttributes<HTMLInputElement>, "size">>;
20
+ tags: string[];
21
+ parameters: {
22
+ layout: string;
23
+ };
24
+ decorators: ((Story: import("@storybook/types").PartialStoryFn<import("@storybook/react").ReactRenderer, {
25
+ id?: string | undefined;
26
+ label?: string | undefined;
27
+ size?: "sm" | "md" | "lg" | undefined;
28
+ rounded?: "none" | "normal" | "full" | undefined;
29
+ variant?: "outline" | "flat" | "underline" | undefined;
30
+ type?: React.HTMLInputTypeAttribute | undefined;
31
+ helperText?: string | undefined;
32
+ errorMessage?: string | undefined;
33
+ fullwidth?: boolean | undefined;
34
+ disabled?: boolean | undefined;
35
+ error?: boolean | undefined;
36
+ required?: boolean | undefined;
37
+ hasClearIcon?: boolean | undefined;
38
+ className?: string | undefined;
39
+ color?: string | undefined;
40
+ title?: string | undefined;
41
+ children?: React.ReactNode;
42
+ form?: string | undefined;
43
+ formAction?: string | undefined;
44
+ formEncType?: string | undefined;
45
+ formMethod?: string | undefined;
46
+ formNoValidate?: boolean | undefined;
47
+ formTarget?: string | undefined;
48
+ name?: string | undefined;
49
+ value?: string | number | readonly string[] | undefined;
50
+ defaultChecked?: boolean | undefined;
51
+ defaultValue?: string | number | readonly string[] | undefined;
52
+ suppressContentEditableWarning?: boolean | undefined;
53
+ suppressHydrationWarning?: boolean | undefined;
54
+ accessKey?: string | undefined;
55
+ autoFocus?: boolean | undefined;
56
+ contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
57
+ contextMenu?: string | undefined;
58
+ dir?: string | undefined;
59
+ draggable?: (boolean | "true" | "false") | undefined;
60
+ hidden?: boolean | undefined;
61
+ lang?: string | undefined;
62
+ nonce?: string | undefined;
63
+ slot?: string | undefined;
64
+ spellCheck?: (boolean | "true" | "false") | undefined;
65
+ style?: React.CSSProperties | undefined;
66
+ tabIndex?: number | undefined;
67
+ translate?: "yes" | "no" | undefined;
68
+ radioGroup?: string | undefined;
69
+ role?: React.AriaRole | undefined;
70
+ about?: string | undefined;
71
+ content?: string | undefined;
72
+ datatype?: string | undefined;
73
+ inlist?: any;
74
+ prefix?: string | undefined;
75
+ property?: string | undefined;
76
+ rel?: string | undefined;
77
+ resource?: string | undefined;
78
+ rev?: string | undefined;
79
+ typeof?: string | undefined;
80
+ vocab?: string | undefined;
81
+ autoCapitalize?: string | undefined;
82
+ autoCorrect?: string | undefined;
83
+ autoSave?: string | undefined;
84
+ itemProp?: string | undefined;
85
+ itemScope?: boolean | undefined;
86
+ itemType?: string | undefined;
87
+ itemID?: string | undefined;
88
+ itemRef?: string | undefined;
89
+ results?: number | undefined;
90
+ security?: string | undefined;
91
+ unselectable?: "on" | "off" | undefined;
92
+ inputMode?: "search" | "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
93
+ is?: string | undefined;
94
+ "aria-activedescendant"?: string | undefined;
95
+ "aria-atomic"?: (boolean | "true" | "false") | undefined;
96
+ "aria-autocomplete"?: "list" | "none" | "inline" | "both" | undefined;
97
+ "aria-braillelabel"?: string | undefined;
98
+ "aria-brailleroledescription"?: string | undefined;
99
+ "aria-busy"?: (boolean | "true" | "false") | undefined;
100
+ "aria-checked"?: boolean | "true" | "false" | "mixed" | undefined;
101
+ "aria-colcount"?: number | undefined;
102
+ "aria-colindex"?: number | undefined;
103
+ "aria-colindextext"?: string | undefined;
104
+ "aria-colspan"?: number | undefined;
105
+ "aria-controls"?: string | undefined;
106
+ "aria-current"?: boolean | "true" | "false" | "date" | "time" | "page" | "step" | "location" | undefined;
107
+ "aria-describedby"?: string | undefined;
108
+ "aria-description"?: string | undefined;
109
+ "aria-details"?: string | undefined;
110
+ "aria-disabled"?: (boolean | "true" | "false") | undefined;
111
+ "aria-dropeffect"?: "link" | "none" | "copy" | "execute" | "move" | "popup" | undefined;
112
+ "aria-errormessage"?: string | undefined;
113
+ "aria-expanded"?: (boolean | "true" | "false") | undefined;
114
+ "aria-flowto"?: string | undefined;
115
+ "aria-grabbed"?: (boolean | "true" | "false") | undefined;
116
+ "aria-haspopup"?: boolean | "true" | "false" | "dialog" | "grid" | "listbox" | "menu" | "tree" | undefined;
117
+ "aria-hidden"?: (boolean | "true" | "false") | undefined;
118
+ "aria-invalid"?: boolean | "true" | "false" | "grammar" | "spelling" | undefined;
119
+ "aria-keyshortcuts"?: string | undefined;
120
+ "aria-label"?: string | undefined;
121
+ "aria-labelledby"?: string | undefined;
122
+ "aria-level"?: number | undefined;
123
+ "aria-live"?: "off" | "assertive" | "polite" | undefined;
124
+ "aria-modal"?: (boolean | "true" | "false") | undefined;
125
+ "aria-multiline"?: (boolean | "true" | "false") | undefined;
126
+ "aria-multiselectable"?: (boolean | "true" | "false") | undefined;
127
+ "aria-orientation"?: "horizontal" | "vertical" | undefined;
128
+ "aria-owns"?: string | undefined;
129
+ "aria-placeholder"?: string | undefined;
130
+ "aria-posinset"?: number | undefined;
131
+ "aria-pressed"?: boolean | "true" | "false" | "mixed" | undefined;
132
+ "aria-readonly"?: (boolean | "true" | "false") | undefined;
133
+ "aria-relevant"?: "text" | "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined;
134
+ "aria-required"?: (boolean | "true" | "false") | undefined;
135
+ "aria-roledescription"?: string | undefined;
136
+ "aria-rowcount"?: number | undefined;
137
+ "aria-rowindex"?: number | undefined;
138
+ "aria-rowindextext"?: string | undefined;
139
+ "aria-rowspan"?: number | undefined;
140
+ "aria-selected"?: (boolean | "true" | "false") | undefined;
141
+ "aria-setsize"?: number | undefined;
142
+ "aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined;
143
+ "aria-valuemax"?: number | undefined;
144
+ "aria-valuemin"?: number | undefined;
145
+ "aria-valuenow"?: number | undefined;
146
+ "aria-valuetext"?: string | undefined;
147
+ dangerouslySetInnerHTML?: {
148
+ __html: string | TrustedHTML;
149
+ } | undefined;
150
+ onCopy?: React.ClipboardEventHandler<HTMLInputElement> | undefined;
151
+ onCopyCapture?: React.ClipboardEventHandler<HTMLInputElement> | undefined;
152
+ onCut?: React.ClipboardEventHandler<HTMLInputElement> | undefined;
153
+ onCutCapture?: React.ClipboardEventHandler<HTMLInputElement> | undefined;
154
+ onPaste?: React.ClipboardEventHandler<HTMLInputElement> | undefined;
155
+ onPasteCapture?: React.ClipboardEventHandler<HTMLInputElement> | undefined;
156
+ onCompositionEnd?: React.CompositionEventHandler<HTMLInputElement> | undefined;
157
+ onCompositionEndCapture?: React.CompositionEventHandler<HTMLInputElement> | undefined;
158
+ onCompositionStart?: React.CompositionEventHandler<HTMLInputElement> | undefined;
159
+ onCompositionStartCapture?: React.CompositionEventHandler<HTMLInputElement> | undefined;
160
+ onCompositionUpdate?: React.CompositionEventHandler<HTMLInputElement> | undefined;
161
+ onCompositionUpdateCapture?: React.CompositionEventHandler<HTMLInputElement> | undefined;
162
+ onFocus?: React.FocusEventHandler<HTMLInputElement> | undefined;
163
+ onFocusCapture?: React.FocusEventHandler<HTMLInputElement> | undefined;
164
+ onBlur?: React.FocusEventHandler<HTMLInputElement> | undefined;
165
+ onBlurCapture?: React.FocusEventHandler<HTMLInputElement> | undefined;
166
+ onChange?: React.ChangeEventHandler<HTMLInputElement> | undefined;
167
+ onChangeCapture?: React.FormEventHandler<HTMLInputElement> | undefined;
168
+ onBeforeInput?: React.FormEventHandler<HTMLInputElement> | undefined;
169
+ onBeforeInputCapture?: React.FormEventHandler<HTMLInputElement> | undefined;
170
+ onInput?: React.FormEventHandler<HTMLInputElement> | undefined;
171
+ onInputCapture?: React.FormEventHandler<HTMLInputElement> | undefined;
172
+ onReset?: React.FormEventHandler<HTMLInputElement> | undefined;
173
+ onResetCapture?: React.FormEventHandler<HTMLInputElement> | undefined;
174
+ onSubmit?: React.FormEventHandler<HTMLInputElement> | undefined;
175
+ onSubmitCapture?: React.FormEventHandler<HTMLInputElement> | undefined;
176
+ onInvalid?: React.FormEventHandler<HTMLInputElement> | undefined;
177
+ onInvalidCapture?: React.FormEventHandler<HTMLInputElement> | undefined;
178
+ onLoad?: React.ReactEventHandler<HTMLInputElement> | undefined;
179
+ onLoadCapture?: React.ReactEventHandler<HTMLInputElement> | undefined;
180
+ onError?: React.ReactEventHandler<HTMLInputElement> | undefined;
181
+ onErrorCapture?: React.ReactEventHandler<HTMLInputElement> | undefined;
182
+ onKeyDown?: React.KeyboardEventHandler<HTMLInputElement> | undefined;
183
+ onKeyDownCapture?: React.KeyboardEventHandler<HTMLInputElement> | undefined;
184
+ onKeyPress?: React.KeyboardEventHandler<HTMLInputElement> | undefined;
185
+ onKeyPressCapture?: React.KeyboardEventHandler<HTMLInputElement> | undefined;
186
+ onKeyUp?: React.KeyboardEventHandler<HTMLInputElement> | undefined;
187
+ onKeyUpCapture?: React.KeyboardEventHandler<HTMLInputElement> | undefined;
188
+ onAbort?: React.ReactEventHandler<HTMLInputElement> | undefined;
189
+ onAbortCapture?: React.ReactEventHandler<HTMLInputElement> | undefined;
190
+ onCanPlay?: React.ReactEventHandler<HTMLInputElement> | undefined;
191
+ onCanPlayCapture?: React.ReactEventHandler<HTMLInputElement> | undefined;
192
+ onCanPlayThrough?: React.ReactEventHandler<HTMLInputElement> | undefined;
193
+ onCanPlayThroughCapture?: React.ReactEventHandler<HTMLInputElement> | undefined;
194
+ onDurationChange?: React.ReactEventHandler<HTMLInputElement> | undefined;
195
+ onDurationChangeCapture?: React.ReactEventHandler<HTMLInputElement> | undefined;
196
+ onEmptied?: React.ReactEventHandler<HTMLInputElement> | undefined;
197
+ onEmptiedCapture?: React.ReactEventHandler<HTMLInputElement> | undefined;
198
+ onEncrypted?: React.ReactEventHandler<HTMLInputElement> | undefined;
199
+ onEncryptedCapture?: React.ReactEventHandler<HTMLInputElement> | undefined;
200
+ onEnded?: React.ReactEventHandler<HTMLInputElement> | undefined;
201
+ onEndedCapture?: React.ReactEventHandler<HTMLInputElement> | undefined;
202
+ onLoadedData?: React.ReactEventHandler<HTMLInputElement> | undefined;
203
+ onLoadedDataCapture?: React.ReactEventHandler<HTMLInputElement> | undefined;
204
+ onLoadedMetadata?: React.ReactEventHandler<HTMLInputElement> | undefined;
205
+ onLoadedMetadataCapture?: React.ReactEventHandler<HTMLInputElement> | undefined;
206
+ onLoadStart?: React.ReactEventHandler<HTMLInputElement> | undefined;
207
+ onLoadStartCapture?: React.ReactEventHandler<HTMLInputElement> | undefined;
208
+ onPause?: React.ReactEventHandler<HTMLInputElement> | undefined;
209
+ onPauseCapture?: React.ReactEventHandler<HTMLInputElement> | undefined;
210
+ onPlay?: React.ReactEventHandler<HTMLInputElement> | undefined;
211
+ onPlayCapture?: React.ReactEventHandler<HTMLInputElement> | undefined;
212
+ onPlaying?: React.ReactEventHandler<HTMLInputElement> | undefined;
213
+ onPlayingCapture?: React.ReactEventHandler<HTMLInputElement> | undefined;
214
+ onProgress?: React.ReactEventHandler<HTMLInputElement> | undefined;
215
+ onProgressCapture?: React.ReactEventHandler<HTMLInputElement> | undefined;
216
+ onRateChange?: React.ReactEventHandler<HTMLInputElement> | undefined;
217
+ onRateChangeCapture?: React.ReactEventHandler<HTMLInputElement> | undefined;
218
+ onResize?: React.ReactEventHandler<HTMLInputElement> | undefined;
219
+ onResizeCapture?: React.ReactEventHandler<HTMLInputElement> | undefined;
220
+ onSeeked?: React.ReactEventHandler<HTMLInputElement> | undefined;
221
+ onSeekedCapture?: React.ReactEventHandler<HTMLInputElement> | undefined;
222
+ onSeeking?: React.ReactEventHandler<HTMLInputElement> | undefined;
223
+ onSeekingCapture?: React.ReactEventHandler<HTMLInputElement> | undefined;
224
+ onStalled?: React.ReactEventHandler<HTMLInputElement> | undefined;
225
+ onStalledCapture?: React.ReactEventHandler<HTMLInputElement> | undefined;
226
+ onSuspend?: React.ReactEventHandler<HTMLInputElement> | undefined;
227
+ onSuspendCapture?: React.ReactEventHandler<HTMLInputElement> | undefined;
228
+ onTimeUpdate?: React.ReactEventHandler<HTMLInputElement> | undefined;
229
+ onTimeUpdateCapture?: React.ReactEventHandler<HTMLInputElement> | undefined;
230
+ onVolumeChange?: React.ReactEventHandler<HTMLInputElement> | undefined;
231
+ onVolumeChangeCapture?: React.ReactEventHandler<HTMLInputElement> | undefined;
232
+ onWaiting?: React.ReactEventHandler<HTMLInputElement> | undefined;
233
+ onWaitingCapture?: React.ReactEventHandler<HTMLInputElement> | undefined;
234
+ onAuxClick?: React.MouseEventHandler<HTMLInputElement> | undefined;
235
+ onAuxClickCapture?: React.MouseEventHandler<HTMLInputElement> | undefined;
236
+ onClick?: React.MouseEventHandler<HTMLInputElement> | undefined;
237
+ onClickCapture?: React.MouseEventHandler<HTMLInputElement> | undefined;
238
+ onContextMenu?: React.MouseEventHandler<HTMLInputElement> | undefined;
239
+ onContextMenuCapture?: React.MouseEventHandler<HTMLInputElement> | undefined;
240
+ onDoubleClick?: React.MouseEventHandler<HTMLInputElement> | undefined;
241
+ onDoubleClickCapture?: React.MouseEventHandler<HTMLInputElement> | undefined;
242
+ onDrag?: React.DragEventHandler<HTMLInputElement> | undefined;
243
+ onDragCapture?: React.DragEventHandler<HTMLInputElement> | undefined;
244
+ onDragEnd?: React.DragEventHandler<HTMLInputElement> | undefined;
245
+ onDragEndCapture?: React.DragEventHandler<HTMLInputElement> | undefined;
246
+ onDragEnter?: React.DragEventHandler<HTMLInputElement> | undefined;
247
+ onDragEnterCapture?: React.DragEventHandler<HTMLInputElement> | undefined;
248
+ onDragExit?: React.DragEventHandler<HTMLInputElement> | undefined;
249
+ onDragExitCapture?: React.DragEventHandler<HTMLInputElement> | undefined;
250
+ onDragLeave?: React.DragEventHandler<HTMLInputElement> | undefined;
251
+ onDragLeaveCapture?: React.DragEventHandler<HTMLInputElement> | undefined;
252
+ onDragOver?: React.DragEventHandler<HTMLInputElement> | undefined;
253
+ onDragOverCapture?: React.DragEventHandler<HTMLInputElement> | undefined;
254
+ onDragStart?: React.DragEventHandler<HTMLInputElement> | undefined;
255
+ onDragStartCapture?: React.DragEventHandler<HTMLInputElement> | undefined;
256
+ onDrop?: React.DragEventHandler<HTMLInputElement> | undefined;
257
+ onDropCapture?: React.DragEventHandler<HTMLInputElement> | undefined;
258
+ onMouseDown?: React.MouseEventHandler<HTMLInputElement> | undefined;
259
+ onMouseDownCapture?: React.MouseEventHandler<HTMLInputElement> | undefined;
260
+ onMouseEnter?: React.MouseEventHandler<HTMLInputElement> | undefined;
261
+ onMouseLeave?: React.MouseEventHandler<HTMLInputElement> | undefined;
262
+ onMouseMove?: React.MouseEventHandler<HTMLInputElement> | undefined;
263
+ onMouseMoveCapture?: React.MouseEventHandler<HTMLInputElement> | undefined;
264
+ onMouseOut?: React.MouseEventHandler<HTMLInputElement> | undefined;
265
+ onMouseOutCapture?: React.MouseEventHandler<HTMLInputElement> | undefined;
266
+ onMouseOver?: React.MouseEventHandler<HTMLInputElement> | undefined;
267
+ onMouseOverCapture?: React.MouseEventHandler<HTMLInputElement> | undefined;
268
+ onMouseUp?: React.MouseEventHandler<HTMLInputElement> | undefined;
269
+ onMouseUpCapture?: React.MouseEventHandler<HTMLInputElement> | undefined;
270
+ onSelect?: React.ReactEventHandler<HTMLInputElement> | undefined;
271
+ onSelectCapture?: React.ReactEventHandler<HTMLInputElement> | undefined;
272
+ onTouchCancel?: React.TouchEventHandler<HTMLInputElement> | undefined;
273
+ onTouchCancelCapture?: React.TouchEventHandler<HTMLInputElement> | undefined;
274
+ onTouchEnd?: React.TouchEventHandler<HTMLInputElement> | undefined;
275
+ onTouchEndCapture?: React.TouchEventHandler<HTMLInputElement> | undefined;
276
+ onTouchMove?: React.TouchEventHandler<HTMLInputElement> | undefined;
277
+ onTouchMoveCapture?: React.TouchEventHandler<HTMLInputElement> | undefined;
278
+ onTouchStart?: React.TouchEventHandler<HTMLInputElement> | undefined;
279
+ onTouchStartCapture?: React.TouchEventHandler<HTMLInputElement> | undefined;
280
+ onPointerDown?: React.PointerEventHandler<HTMLInputElement> | undefined;
281
+ onPointerDownCapture?: React.PointerEventHandler<HTMLInputElement> | undefined;
282
+ onPointerMove?: React.PointerEventHandler<HTMLInputElement> | undefined;
283
+ onPointerMoveCapture?: React.PointerEventHandler<HTMLInputElement> | undefined;
284
+ onPointerUp?: React.PointerEventHandler<HTMLInputElement> | undefined;
285
+ onPointerUpCapture?: React.PointerEventHandler<HTMLInputElement> | undefined;
286
+ onPointerCancel?: React.PointerEventHandler<HTMLInputElement> | undefined;
287
+ onPointerCancelCapture?: React.PointerEventHandler<HTMLInputElement> | undefined;
288
+ onPointerEnter?: React.PointerEventHandler<HTMLInputElement> | undefined;
289
+ onPointerLeave?: React.PointerEventHandler<HTMLInputElement> | undefined;
290
+ onPointerOver?: React.PointerEventHandler<HTMLInputElement> | undefined;
291
+ onPointerOverCapture?: React.PointerEventHandler<HTMLInputElement> | undefined;
292
+ onPointerOut?: React.PointerEventHandler<HTMLInputElement> | undefined;
293
+ onPointerOutCapture?: React.PointerEventHandler<HTMLInputElement> | undefined;
294
+ onGotPointerCapture?: React.PointerEventHandler<HTMLInputElement> | undefined;
295
+ onGotPointerCaptureCapture?: React.PointerEventHandler<HTMLInputElement> | undefined;
296
+ onLostPointerCapture?: React.PointerEventHandler<HTMLInputElement> | undefined;
297
+ onLostPointerCaptureCapture?: React.PointerEventHandler<HTMLInputElement> | undefined;
298
+ onScroll?: React.UIEventHandler<HTMLInputElement> | undefined;
299
+ onScrollCapture?: React.UIEventHandler<HTMLInputElement> | undefined;
300
+ onWheel?: React.WheelEventHandler<HTMLInputElement> | undefined;
301
+ onWheelCapture?: React.WheelEventHandler<HTMLInputElement> | undefined;
302
+ onAnimationStart?: React.AnimationEventHandler<HTMLInputElement> | undefined;
303
+ onAnimationStartCapture?: React.AnimationEventHandler<HTMLInputElement> | undefined;
304
+ onAnimationEnd?: React.AnimationEventHandler<HTMLInputElement> | undefined;
305
+ onAnimationEndCapture?: React.AnimationEventHandler<HTMLInputElement> | undefined;
306
+ onAnimationIteration?: React.AnimationEventHandler<HTMLInputElement> | undefined;
307
+ onAnimationIterationCapture?: React.AnimationEventHandler<HTMLInputElement> | undefined;
308
+ onTransitionEnd?: React.TransitionEventHandler<HTMLInputElement> | undefined;
309
+ onTransitionEndCapture?: React.TransitionEventHandler<HTMLInputElement> | undefined;
310
+ list?: string | undefined;
311
+ placeholder?: string | undefined;
312
+ pattern?: string | undefined;
313
+ autoComplete?: React.HTMLInputAutoCompleteAttribute | undefined;
314
+ alt?: string | undefined;
315
+ accept?: string | undefined;
316
+ capture?: boolean | "user" | "environment" | undefined;
317
+ checked?: boolean | undefined;
318
+ enterKeyHint?: "search" | "enter" | "done" | "go" | "next" | "previous" | "send" | undefined;
319
+ multiple?: boolean | undefined;
320
+ maxLength?: number | undefined;
321
+ minLength?: number | undefined;
322
+ src?: string | undefined;
323
+ step?: string | number | undefined;
324
+ height?: string | number | undefined;
325
+ max?: string | number | undefined;
326
+ min?: string | number | undefined;
327
+ readOnly?: boolean | undefined;
328
+ width?: string | number | undefined;
329
+ }>) => import("react/jsx-runtime").JSX.Element)[];
330
+ };
331
+ export default meta;
332
+ export declare const Default: {
333
+ args: {
334
+ label: string;
335
+ fullwidth: boolean;
336
+ };
337
+ render: (args: {}) => import("react/jsx-runtime").JSX.Element;
338
+ };
@@ -0,0 +1,26 @@
1
+ export declare const inputVariant: (props?: ({
2
+ size?: "sm" | "md" | "lg" | null | undefined;
3
+ rounded?: "none" | "normal" | "full" | null | undefined;
4
+ variant?: "outline" | "flat" | "underline" | null | undefined;
5
+ fullwidth?: boolean | null | undefined;
6
+ disabled?: boolean | null | undefined;
7
+ error?: boolean | null | undefined;
8
+ hasClearIcon?: boolean | null | undefined;
9
+ } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
10
+ export declare const labelVariant: (props?: ({
11
+ size?: "sm" | "md" | "lg" | null | undefined;
12
+ disabled?: boolean | null | undefined;
13
+ error?: boolean | null | undefined;
14
+ isFloating?: boolean | null | undefined;
15
+ } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
16
+ export declare const helperTextVariant: (props?: ({
17
+ size?: "sm" | "md" | "lg" | null | undefined;
18
+ disabled?: boolean | null | undefined;
19
+ error?: boolean | null | undefined;
20
+ } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
21
+ export declare const iconWrapperVariant: (props?: ({
22
+ size?: "sm" | "md" | "lg" | null | undefined;
23
+ } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
24
+ export declare const iconVariant: (props?: ({
25
+ size?: "sm" | "md" | "lg" | null | undefined;
26
+ } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
@@ -0,0 +1,7 @@
1
+ import "./theme/global.css";
2
+ export { default as Button } from "./components/Button/Button";
3
+ export { default as Table } from "./components/Table/Table";
4
+ export { default as TextInput } from "./components/Form/TextInput";
5
+ export { default as Text } from "./components/Text/Text";
6
+ export { default as Tabs } from "./components/Tabs/Tabs";
7
+ export { resloveTimestamp, getStartDateOfDay, getEndDateOfDay, getStartEndTimestampOfDay, getTimestampUTC, } from "./utils/datetime";
@@ -0,0 +1,31 @@
1
+ var __assign = (this && this.__assign) || function () {
2
+ __assign = Object.assign || function(t) {
3
+ for (var s, i = 1, n = arguments.length; i < n; i++) {
4
+ s = arguments[i];
5
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
6
+ t[p] = s[p];
7
+ }
8
+ return t;
9
+ };
10
+ return __assign.apply(this, arguments);
11
+ };
12
+ var __rest = (this && this.__rest) || function (s, e) {
13
+ var t = {};
14
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
15
+ t[p] = s[p];
16
+ if (s != null && typeof Object.getOwnPropertySymbols === "function")
17
+ for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
18
+ if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
19
+ t[p[i]] = s[p[i]];
20
+ }
21
+ return t;
22
+ };
23
+ import { Fragment as _Fragment, jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
24
+ import { twMerge } from "tailwind-merge";
25
+ import { buttonCva } from "./Button.styles";
26
+ var Button = function (_a) {
27
+ var _b = _a.size, size = _b === void 0 ? "md" : _b, _c = _a.color, color = _c === void 0 ? "primary" : _c, _d = _a.variant, variant = _d === void 0 ? "solid" : _d, title = _a.title, children = _a.children, startIcon = _a.startIcon, endIcon = _a.endIcon, _e = _a.disabled, disabled = _e === void 0 ? false : _e, _f = _a.fullwidth, fullwidth = _f === void 0 ? false : _f, _g = _a.isLoading, isLoading = _g === void 0 ? false : _g, className = _a.className, props = __rest(_a, ["size", "color", "variant", "title", "children", "startIcon", "endIcon", "disabled", "fullwidth", "isLoading", "className"]);
28
+ var isDisabled = disabled || isLoading;
29
+ return (_jsx("button", __assign({ type: "button" }, props, { "aria-disabled": isDisabled || undefined, tabIndex: isDisabled ? -1 : 0, className: twMerge(buttonCva({ size: size, color: color, variant: variant, disabled: disabled, fullwidth: fullwidth }), className), disabled: isDisabled, children: _jsxs(_Fragment, { children: [startIcon, children || title, endIcon] }) })));
30
+ };
31
+ export default Button;
@@ -0,0 +1,90 @@
1
+ import { cva } from "class-variance-authority";
2
+ export var buttonCva = cva([
3
+ // "inline-flex items-center justify-center align-middle no-underline transition-colors ease-in-out duration-300",
4
+ // "font-sans appearance-none select-none rounded-sm border font-medium tracking-[.02857em]",
5
+ // "aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-disabled:cursor-not-allowed",
6
+ "gap-2 font-bold text-white hover:bg-opacity-90 active:scale-[98%]",
7
+ ], {
8
+ variants: {
9
+ color: {
10
+ primary: "bg-primary border-primary text-primary hover:bg-primary-80",
11
+ secondary: "border-secondary bg-secondary-100 text-secondary-foreground hover:bg-secondary-120",
12
+ tertiary: "border-tertiary-120 bg-tertiary-120 text-tertiary-120 hover:bg-tertiary-100",
13
+ success: "border-success bg-success text-success hover:bg-success-120",
14
+ info: "border-info bg-info text-info hover:bg-info-100",
15
+ warning: "border-warning bg-warning text-warning hover:bg-warning-100 hover:border-warning-100",
16
+ error: "border-error bg-error text-error hover:bg-error-120 hover:border-error-120",
17
+ },
18
+ size: {
19
+ sm: "px-3 py-1 text-sm rounded-[--btn-rounded-sm]",
20
+ md: "px-4 py-2 text-sm rounded-[--btn-rounded-md]",
21
+ lg: "px-6 py-4 text-base rounded-[--btn-rounded-lg]",
22
+ },
23
+ variant: {
24
+ solid: "border",
25
+ outline: "border bg-transparent hover:bg-opacity-20",
26
+ flat: "bg-transparent hover:bg-opacity-20",
27
+ link: "bg-transparent underline underline-offset-4 hover:bg-transparent hover:text-opacity-80",
28
+ },
29
+ disabled: {
30
+ true: "pointer-events-none border-transparent bg-secondary-110 text-secondary-130",
31
+ },
32
+ fullwidth: {
33
+ true: "w-full",
34
+ },
35
+ },
36
+ compoundVariants: [
37
+ {
38
+ variant: ["flat", "link"],
39
+ disabled: true,
40
+ class: "border-transparent bg-transparent",
41
+ },
42
+ {
43
+ variant: "solid",
44
+ color: "primary",
45
+ class: "text-primary-foreground",
46
+ },
47
+ {
48
+ variant: "solid",
49
+ color: "secondary",
50
+ class: "text-secondary-foreground",
51
+ },
52
+ {
53
+ variant: "solid",
54
+ disabled: true,
55
+ color: "secondary",
56
+ class: "text-white",
57
+ },
58
+ {
59
+ variant: "solid",
60
+ color: "tertiary",
61
+ class: "text-tertiary-foreground",
62
+ },
63
+ {
64
+ variant: "solid",
65
+ color: "success",
66
+ class: "text-success-foreground",
67
+ },
68
+ {
69
+ variant: "solid",
70
+ color: "info",
71
+ class: "text-info-foreground",
72
+ },
73
+ {
74
+ variant: "solid",
75
+ color: "warning",
76
+ class: "text-warning-foreground",
77
+ },
78
+ {
79
+ variant: "solid",
80
+ color: "error",
81
+ class: "text-error-foreground",
82
+ },
83
+ ],
84
+ defaultVariants: {
85
+ size: "md",
86
+ color: "primary",
87
+ variant: "solid",
88
+ fullwidth: true,
89
+ },
90
+ });
@@ -0,0 +1,66 @@
1
+ var __assign = (this && this.__assign) || function () {
2
+ __assign = Object.assign || function(t) {
3
+ for (var s, i = 1, n = arguments.length; i < n; i++) {
4
+ s = arguments[i];
5
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
6
+ t[p] = s[p];
7
+ }
8
+ return t;
9
+ };
10
+ return __assign.apply(this, arguments);
11
+ };
12
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
13
+ import Button from "./Button";
14
+ // More on how to set up stories at: https://storybook.js.org/docs/7.0/react/writing-stories/introduction
15
+ var meta = {
16
+ title: "Components/Button",
17
+ component: Button,
18
+ tags: ["autodocs"],
19
+ parameters: {
20
+ // More on how to position stories at: https://storybook.js.org/docs/7.0/react/configure/story-layout
21
+ layout: "fullscreen",
22
+ },
23
+ decorators: [
24
+ function (Story) { return (_jsx("div", { className: "p-5", children: _jsx(Story, {}) })); },
25
+ ],
26
+ };
27
+ export default meta;
28
+ export var Solid = {
29
+ args: {
30
+ title: "Button",
31
+ },
32
+ render: function (args) {
33
+ var props = __assign(__assign({}, args), { className: "capitalize" });
34
+ return (_jsxs("div", { className: "flex gap-2", children: [_jsx(Button, __assign({ color: "primary" }, props, { title: "primary" })), _jsx(Button, __assign({ color: "secondary" }, props, { title: "secondary" })), _jsx(Button, __assign({ color: "tertiary" }, props, { title: "tertiary" })), _jsx(Button, __assign({ color: "info" }, props, { title: "info" })), _jsx(Button, __assign({ color: "success" }, props, { title: "success" })), _jsx(Button, __assign({ color: "warning" }, props, { title: "warning" })), _jsx(Button, __assign({ color: "error" }, props, { title: "error" }))] }));
35
+ },
36
+ };
37
+ export var Outline = {
38
+ args: {
39
+ title: "Button",
40
+ variant: "outline",
41
+ },
42
+ render: function (args) {
43
+ var props = __assign(__assign({}, args), { className: "capitalize" });
44
+ return (_jsxs("div", { className: "flex gap-2", children: [_jsx(Button, __assign({ color: "primary" }, props, { title: "primary" })), _jsx(Button, __assign({ color: "secondary" }, props, { title: "secondary" })), _jsx(Button, __assign({ color: "tertiary" }, props, { title: "tertiary" })), _jsx(Button, __assign({ color: "info" }, props, { title: "info" })), _jsx(Button, __assign({ color: "success" }, props, { title: "success" })), _jsx(Button, __assign({ color: "warning" }, props, { title: "warning" })), _jsx(Button, __assign({ color: "error" }, props, { title: "error" }))] }));
45
+ },
46
+ };
47
+ export var Flat = {
48
+ args: {
49
+ title: "Button",
50
+ variant: "flat",
51
+ },
52
+ render: function (args) {
53
+ var props = __assign(__assign({}, args), { className: "capitalize" });
54
+ return (_jsxs("div", { className: "flex gap-2", children: [_jsx(Button, __assign({ color: "primary" }, props, { title: "primary" })), _jsx(Button, __assign({ color: "secondary" }, props, { title: "secondary" })), _jsx(Button, __assign({ color: "tertiary" }, props, { title: "tertiary" })), _jsx(Button, __assign({ color: "info" }, props, { title: "info" })), _jsx(Button, __assign({ color: "success" }, props, { title: "success" })), _jsx(Button, __assign({ color: "warning" }, props, { title: "warning" })), _jsx(Button, __assign({ color: "error" }, props, { title: "error" }))] }));
55
+ },
56
+ };
57
+ export var Link = {
58
+ args: {
59
+ title: "Button",
60
+ variant: "link",
61
+ },
62
+ render: function (args) {
63
+ var props = __assign(__assign({}, args), { className: "capitalize" });
64
+ return (_jsxs("div", { className: "flex gap-2", children: [_jsx(Button, __assign({ color: "primary" }, props, { title: "primary" })), _jsx(Button, __assign({ color: "secondary" }, props, { title: "secondary" })), _jsx(Button, __assign({ color: "tertiary" }, props, { title: "tertiary" })), _jsx(Button, __assign({ color: "info" }, props, { title: "info" })), _jsx(Button, __assign({ color: "success" }, props, { title: "success" })), _jsx(Button, __assign({ color: "warning" }, props, { title: "warning" })), _jsx(Button, __assign({ color: "error" }, props, { title: "error" }))] }));
65
+ },
66
+ };