@rovula/ui 0.0.8 → 0.0.10

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