@bricks-toolkit/toolkit 0.1.19 → 0.1.21

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 (100) hide show
  1. package/dist/chunk-4PRNRENN.mjs +104 -0
  2. package/dist/chunk-62JXQJBD.cjs +533 -0
  3. package/dist/chunk-6LBTRQZD.mjs +806 -0
  4. package/dist/chunk-J53N2LAE.cjs +115 -0
  5. package/dist/chunk-M6XPQ5BE.cjs +808 -0
  6. package/dist/chunk-UPSMZISM.mjs +567 -0
  7. package/dist/chunk-YV3WWKQY.cjs +569 -0
  8. package/dist/chunk-Z5FRCULF.mjs +531 -0
  9. package/dist/date-picker/index.cjs +3 -2
  10. package/dist/date-picker/index.mjs +2 -1
  11. package/dist/date-time-picker/index.cjs +12 -0
  12. package/dist/date-time-picker/index.mjs +3 -0
  13. package/dist/index.cjs +27 -21
  14. package/dist/index.mjs +7 -5
  15. package/dist/time-picker/index.cjs +2 -2
  16. package/dist/time-picker/index.mjs +1 -1
  17. package/package.json +11 -1
  18. package/dist/Button.types-BsQYqZml.d.ts +0 -27
  19. package/dist/Button.types-D-srlWFf.d.mts +0 -27
  20. package/dist/TextInput.types-DRI8HQza.d.mts +0 -32
  21. package/dist/TextInput.types-DRI8HQza.d.ts +0 -32
  22. package/dist/Tooltip.types-PbUasE3C.d.mts +0 -36
  23. package/dist/Tooltip.types-PbUasE3C.d.ts +0 -36
  24. package/dist/avatar/index.d.mts +0 -29
  25. package/dist/avatar/index.d.ts +0 -29
  26. package/dist/badge/index.d.mts +0 -57
  27. package/dist/badge/index.d.ts +0 -57
  28. package/dist/breadcrumbs/index.d.mts +0 -32
  29. package/dist/breadcrumbs/index.d.ts +0 -32
  30. package/dist/button/index.d.mts +0 -8
  31. package/dist/button/index.d.ts +0 -8
  32. package/dist/card/index.d.mts +0 -42
  33. package/dist/card/index.d.ts +0 -42
  34. package/dist/checkbox/index.d.mts +0 -36
  35. package/dist/checkbox/index.d.ts +0 -36
  36. package/dist/chunk-7WNJ7L4Z.mjs +0 -335
  37. package/dist/chunk-DHC5LI2P.cjs +0 -338
  38. package/dist/chunk-VKQDW7C2.mjs +0 -336
  39. package/dist/chunk-W2ZAPLQH.cjs +0 -337
  40. package/dist/combo-box/index.d.mts +0 -62
  41. package/dist/combo-box/index.d.ts +0 -62
  42. package/dist/date-picker/index.d.mts +0 -32
  43. package/dist/date-picker/index.d.ts +0 -32
  44. package/dist/dialog/index.d.mts +0 -61
  45. package/dist/dialog/index.d.ts +0 -61
  46. package/dist/dropdown-menu/index.d.mts +0 -34
  47. package/dist/dropdown-menu/index.d.ts +0 -34
  48. package/dist/email/index.d.mts +0 -38
  49. package/dist/email/index.d.ts +0 -38
  50. package/dist/file-upload/index.d.mts +0 -27
  51. package/dist/file-upload/index.d.ts +0 -27
  52. package/dist/header/index.d.mts +0 -28
  53. package/dist/header/index.d.ts +0 -28
  54. package/dist/icon-button/index.d.mts +0 -16
  55. package/dist/icon-button/index.d.ts +0 -16
  56. package/dist/image/index.d.mts +0 -48
  57. package/dist/image/index.d.ts +0 -48
  58. package/dist/index.d.mts +0 -141
  59. package/dist/index.d.ts +0 -141
  60. package/dist/link/index.d.mts +0 -25
  61. package/dist/link/index.d.ts +0 -25
  62. package/dist/loader/index.d.mts +0 -21
  63. package/dist/loader/index.d.ts +0 -21
  64. package/dist/modal/index.d.mts +0 -116
  65. package/dist/modal/index.d.ts +0 -116
  66. package/dist/multi-select/index.d.mts +0 -59
  67. package/dist/multi-select/index.d.ts +0 -59
  68. package/dist/otp-input/index.d.mts +0 -57
  69. package/dist/otp-input/index.d.ts +0 -57
  70. package/dist/password-input/index.d.mts +0 -32
  71. package/dist/password-input/index.d.ts +0 -32
  72. package/dist/phone/index.d.mts +0 -41
  73. package/dist/phone/index.d.ts +0 -41
  74. package/dist/radio-button/index.d.mts +0 -56
  75. package/dist/radio-button/index.d.ts +0 -56
  76. package/dist/search-input/index.d.mts +0 -22
  77. package/dist/search-input/index.d.ts +0 -22
  78. package/dist/select/index.d.mts +0 -36
  79. package/dist/select/index.d.ts +0 -36
  80. package/dist/sidebar/index.d.mts +0 -96
  81. package/dist/sidebar/index.d.ts +0 -96
  82. package/dist/skeleton/index.d.mts +0 -76
  83. package/dist/skeleton/index.d.ts +0 -76
  84. package/dist/styles.d.mts +0 -2
  85. package/dist/styles.d.ts +0 -2
  86. package/dist/table/index.d.mts +0 -92
  87. package/dist/table/index.d.ts +0 -92
  88. package/dist/tabs/index.d.mts +0 -26
  89. package/dist/tabs/index.d.ts +0 -26
  90. package/dist/text-input/index.d.mts +0 -7
  91. package/dist/text-input/index.d.ts +0 -7
  92. package/dist/theme-provider/index.d.mts +0 -122
  93. package/dist/theme-provider/index.d.ts +0 -122
  94. package/dist/theme.css +0 -62
  95. package/dist/time-picker/index.d.mts +0 -32
  96. package/dist/time-picker/index.d.ts +0 -32
  97. package/dist/toaster/index.d.mts +0 -28
  98. package/dist/toaster/index.d.ts +0 -28
  99. package/dist/tooltip/index.d.mts +0 -7
  100. package/dist/tooltip/index.d.ts +0 -7
@@ -1,338 +0,0 @@
1
- 'use strict';
2
-
3
- var chunkL5VQZZVR_cjs = require('./chunk-L5VQZZVR.cjs');
4
- var react = require('react');
5
- var outline = require('@heroicons/react/24/outline');
6
- var jsxRuntime = require('react/jsx-runtime');
7
-
8
- var sizeClasses = {
9
- xs: "h-6 px-2 text-xs",
10
- sm: "h-8 px-3 text-sm",
11
- md: "h-10 px-3 text-sm",
12
- lg: "h-11 px-4 text-base",
13
- xl: "h-12 px-4 text-lg"
14
- };
15
- var labelSizeClasses = {
16
- xs: "text-xs",
17
- sm: "text-xs",
18
- md: "text-sm",
19
- lg: "text-sm",
20
- xl: "text-base"
21
- };
22
- var variantClasses = {
23
- default: "rounded-md border border-border bg-surface shadow-sm focus:outline-none focus:ring-2 focus:ring-primary/40 focus:ring-offset-0 transition-all duration-normal",
24
- filled: "rounded-md border border-transparent bg-surface-secondary focus:bg-surface focus:outline-none focus:ring-2 focus:ring-primary/40 focus:ring-offset-0 transition-all duration-normal",
25
- flushed: "rounded-none border-0 border-b border-border bg-transparent focus:outline-none focus:ring-0",
26
- unstyled: "border-0 bg-transparent p-0 focus:outline-none focus:ring-0"
27
- };
28
- var stateVariantClasses = {
29
- default: {
30
- default: "border-border focus:border-primary focus:ring-primary/40",
31
- filled: "focus:border-primary focus:ring-primary/40",
32
- flushed: "border-border focus:border-primary",
33
- unstyled: ""
34
- },
35
- error: {
36
- default: "border-error focus:border-error focus:ring-error/20",
37
- filled: "bg-error/5 focus:border-error focus:ring-error/20",
38
- flushed: "border-error focus:border-error",
39
- unstyled: ""
40
- },
41
- success: {
42
- default: "border-success focus:border-success focus:ring-success/20",
43
- filled: "bg-success/5 focus:border-success focus:ring-success/20",
44
- flushed: "border-success focus:border-success",
45
- unstyled: ""
46
- },
47
- warning: {
48
- default: "border-warning focus:border-warning focus:ring-warning/20",
49
- filled: "bg-warning/5 focus:border-warning focus:ring-warning/20",
50
- flushed: "border-warning focus:border-warning",
51
- unstyled: ""
52
- }
53
- };
54
- var stateMessageClasses = {
55
- default: "text-text-muted",
56
- error: "text-error font-medium",
57
- success: "text-success font-medium",
58
- warning: "text-warning font-medium"
59
- };
60
- var disabledClasses = "disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-surface-secondary";
61
- function getAddonPadding(hasLeft, hasRight, size) {
62
- const leftPad = {
63
- xs: "pl-6",
64
- sm: "pl-8",
65
- md: "pl-9",
66
- lg: "pl-10",
67
- xl: "pl-11"
68
- };
69
- const rightPad = {
70
- xs: "pr-8",
71
- sm: "pr-10",
72
- md: "pr-11",
73
- lg: "pr-12",
74
- xl: "pr-12"
75
- };
76
- const parts = [];
77
- if (hasLeft) parts.push(leftPad[size]);
78
- if (hasRight) parts.push(rightPad[size]);
79
- return parts.join(" ");
80
- }
81
- function getStateMessage(state, errorMessage, successMessage, warningMessage) {
82
- if (state === "error" && errorMessage) return errorMessage;
83
- if (state === "success" && successMessage) return successMessage;
84
- if (state === "warning" && warningMessage) return warningMessage;
85
- return void 0;
86
- }
87
- function AddonIcon({
88
- children,
89
- side,
90
- size,
91
- pointerEvents = false
92
- }) {
93
- const iconSizeClasses = {
94
- xs: "w-3.5 h-3.5",
95
- sm: "w-4 h-4",
96
- md: "w-4 h-4",
97
- lg: "w-5 h-5",
98
- xl: "w-5 h-5"
99
- };
100
- return /* @__PURE__ */ jsxRuntime.jsx(
101
- "span",
102
- {
103
- "aria-hidden": "true",
104
- className: chunkL5VQZZVR_cjs.cn(
105
- "absolute top-1/2 -translate-y-1/2 text-text-secondary flex items-center justify-center",
106
- !pointerEvents && "pointer-events-none",
107
- side === "left" ? "left-3" : "right-3",
108
- iconSizeClasses[size]
109
- ),
110
- children
111
- }
112
- );
113
- }
114
- function Addon({ children, side }) {
115
- return /* @__PURE__ */ jsxRuntime.jsx(
116
- "span",
117
- {
118
- "aria-hidden": "true",
119
- className: chunkL5VQZZVR_cjs.cn(
120
- "inline-flex items-center border border-border bg-surface-secondary px-3 text-sm text-text-secondary select-none",
121
- side === "left" ? "rounded-l-md border-r-0" : "rounded-r-md border-l-0"
122
- ),
123
- children
124
- }
125
- );
126
- }
127
- var TimePicker = react.forwardRef(function TimePicker2({
128
- label,
129
- required = false,
130
- helperText,
131
- errorMessage,
132
- successMessage,
133
- warningMessage,
134
- variant = "default",
135
- size = "md",
136
- state = "default",
137
- fullWidth = true,
138
- leftElement,
139
- rightElement,
140
- prefix,
141
- suffix,
142
- wrapperClassName,
143
- inputGroupClassName,
144
- inputClassName,
145
- labelClassName,
146
- helperClassName,
147
- id: idProp,
148
- disabled,
149
- className,
150
- clearable,
151
- isLoading,
152
- value,
153
- onChange,
154
- ...rest
155
- }, ref) {
156
- const generatedId = react.useId();
157
- const inputId = idProp ?? generatedId;
158
- const helperId = `${inputId}-helper`;
159
- const stateMessageId = `${inputId}-state`;
160
- const isValueString = typeof value === "string";
161
- const showClear = clearable && isValueString && value.length > 0;
162
- const hasLeftElement = leftElement !== void 0;
163
- const hasRightElement = rightElement !== void 0 || Boolean(showClear) || Boolean(isLoading);
164
- const stateMessage = getStateMessage(state, errorMessage, successMessage, warningMessage);
165
- const describedBy = [helperText ? helperId : null, stateMessage ? stateMessageId : null].filter(Boolean).join(" ") || void 0;
166
- const handleClear = () => {
167
- if (ref && typeof ref !== "function" && ref.current) {
168
- const descriptor = Reflect.getOwnPropertyDescriptor(
169
- window.HTMLInputElement.prototype,
170
- "value"
171
- );
172
- const nativeInputValueSetter = descriptor?.set;
173
- if (nativeInputValueSetter) {
174
- Reflect.apply(nativeInputValueSetter, ref.current, [""]);
175
- }
176
- const event = new Event("input", { bubbles: true });
177
- ref.current.dispatchEvent(event);
178
- } else if (onChange) {
179
- const e = {
180
- target: { value: "" },
181
- currentTarget: { value: "" },
182
- preventDefault: () => {
183
- },
184
- stopPropagation: () => {
185
- }
186
- };
187
- onChange(e);
188
- }
189
- };
190
- const renderRightIcon = () => {
191
- if (isLoading) {
192
- return /* @__PURE__ */ jsxRuntime.jsxs(
193
- "svg",
194
- {
195
- className: "animate-spin h-full w-full text-text-muted",
196
- xmlns: "http://www.w3.org/2000/svg",
197
- fill: "none",
198
- viewBox: "0 0 24 24",
199
- children: [
200
- /* @__PURE__ */ jsxRuntime.jsx(
201
- "circle",
202
- {
203
- className: "opacity-25",
204
- cx: "12",
205
- cy: "12",
206
- r: "10",
207
- stroke: "currentColor",
208
- strokeWidth: "4"
209
- }
210
- ),
211
- /* @__PURE__ */ jsxRuntime.jsx(
212
- "path",
213
- {
214
- className: "opacity-75",
215
- fill: "currentColor",
216
- d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
217
- }
218
- )
219
- ]
220
- }
221
- );
222
- }
223
- if (showClear) {
224
- return /* @__PURE__ */ jsxRuntime.jsx(
225
- "button",
226
- {
227
- type: "button",
228
- onClick: handleClear,
229
- className: "pointer-events-auto flex items-center justify-center rounded-full text-text-muted hover:text-text hover:bg-hover p-0.5 transition-all duration-fast",
230
- "aria-label": "Clear time",
231
- children: /* @__PURE__ */ jsxRuntime.jsx(outline.XMarkIcon, { className: "w-full h-full", strokeWidth: 2.5 })
232
- }
233
- );
234
- }
235
- return rightElement;
236
- };
237
- const inputElement = /* @__PURE__ */ jsxRuntime.jsx(
238
- "input",
239
- {
240
- ref,
241
- id: inputId,
242
- disabled: Boolean(disabled) || Boolean(isLoading),
243
- type: "time",
244
- value,
245
- onChange,
246
- "aria-invalid": state === "error" ? true : void 0,
247
- "aria-describedby": describedBy,
248
- "aria-required": required,
249
- className: chunkL5VQZZVR_cjs.cn(
250
- "w-full transition-colors duration-150",
251
- "[&::-webkit-calendar-picker-indicator]:cursor-pointer [&::-webkit-calendar-picker-indicator]:opacity-60 hover:[&::-webkit-calendar-picker-indicator]:opacity-100",
252
- sizeClasses[size],
253
- variantClasses[variant],
254
- stateVariantClasses[state][variant],
255
- disabledClasses,
256
- getAddonPadding(hasLeftElement, hasRightElement, size),
257
- inputClassName
258
- ),
259
- ...rest
260
- }
261
- );
262
- return /* @__PURE__ */ jsxRuntime.jsxs(
263
- "div",
264
- {
265
- className: chunkL5VQZZVR_cjs.cn(
266
- "flex flex-col gap-1",
267
- fullWidth ? "w-full" : "w-fit",
268
- wrapperClassName,
269
- className
270
- ),
271
- children: [
272
- label !== void 0 && /* @__PURE__ */ jsxRuntime.jsxs(
273
- "label",
274
- {
275
- htmlFor: inputId,
276
- className: chunkL5VQZZVR_cjs.cn(
277
- "font-black leading-none text-text uppercase tracking-widest",
278
- labelSizeClasses[size],
279
- labelClassName
280
- ),
281
- children: [
282
- label,
283
- required && /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", className: "ml-1 text-error", children: "*" })
284
- ]
285
- }
286
- ),
287
- /* @__PURE__ */ jsxRuntime.jsxs(
288
- "div",
289
- {
290
- className: chunkL5VQZZVR_cjs.cn("flex items-stretch", fullWidth ? "w-full" : "w-fit", inputGroupClassName),
291
- children: [
292
- prefix !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(Addon, { side: "left", children: prefix }),
293
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex flex-1 items-center", children: [
294
- hasLeftElement && /* @__PURE__ */ jsxRuntime.jsx(AddonIcon, { side: "left", size, children: leftElement }),
295
- /* @__PURE__ */ jsxRuntime.jsx(
296
- "div",
297
- {
298
- className: chunkL5VQZZVR_cjs.cn(
299
- "flex-1",
300
- prefix !== void 0 && suffix !== void 0 ? "[&>input]:rounded-none" : prefix !== void 0 ? "[&>input]:rounded-l-none" : suffix !== void 0 ? "[&>input]:rounded-r-none" : ""
301
- ),
302
- children: inputElement
303
- }
304
- ),
305
- hasRightElement && /* @__PURE__ */ jsxRuntime.jsx(AddonIcon, { side: "right", size, pointerEvents: !rightElement && Boolean(showClear), children: renderRightIcon() })
306
- ] }),
307
- suffix !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(Addon, { side: "right", children: suffix })
308
- ]
309
- }
310
- ),
311
- helperText !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(
312
- "p",
313
- {
314
- id: helperId,
315
- className: chunkL5VQZZVR_cjs.cn("text-xs leading-tight text-text-muted font-medium", helperClassName),
316
- children: helperText
317
- }
318
- ),
319
- stateMessage !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(
320
- "p",
321
- {
322
- id: stateMessageId,
323
- role: state === "error" ? "alert" : void 0,
324
- className: chunkL5VQZZVR_cjs.cn(
325
- "text-xs leading-tight mt-1 font-medium",
326
- stateMessageClasses[state],
327
- helperClassName
328
- ),
329
- children: stateMessage
330
- }
331
- )
332
- ]
333
- }
334
- );
335
- });
336
- TimePicker.displayName = "TimePicker";
337
-
338
- exports.TimePicker = TimePicker;
@@ -1,336 +0,0 @@
1
- import { cn } from './chunk-OCPFOFJ4.mjs';
2
- import { forwardRef, useId } from 'react';
3
- import { XMarkIcon } from '@heroicons/react/24/outline';
4
- import { jsx, jsxs } from 'react/jsx-runtime';
5
-
6
- var sizeClasses = {
7
- xs: "h-6 px-2 text-xs",
8
- sm: "h-8 px-3 text-sm",
9
- md: "h-10 px-3 text-sm",
10
- lg: "h-11 px-4 text-base",
11
- xl: "h-12 px-4 text-lg"
12
- };
13
- var labelSizeClasses = {
14
- xs: "text-xs",
15
- sm: "text-xs",
16
- md: "text-sm",
17
- lg: "text-sm",
18
- xl: "text-base"
19
- };
20
- var variantClasses = {
21
- default: "rounded-md border border-border bg-surface shadow-sm focus:outline-none focus:ring-2 focus:ring-primary/40 focus:ring-offset-0 transition-all duration-normal",
22
- filled: "rounded-md border border-transparent bg-surface-secondary focus:bg-surface focus:outline-none focus:ring-2 focus:ring-primary/40 focus:ring-offset-0 transition-all duration-normal",
23
- flushed: "rounded-none border-0 border-b border-border bg-transparent focus:outline-none focus:ring-0",
24
- unstyled: "border-0 bg-transparent p-0 focus:outline-none focus:ring-0"
25
- };
26
- var stateVariantClasses = {
27
- default: {
28
- default: "border-border focus:border-primary focus:ring-primary/40",
29
- filled: "focus:border-primary focus:ring-primary/40",
30
- flushed: "border-border focus:border-primary",
31
- unstyled: ""
32
- },
33
- error: {
34
- default: "border-error focus:border-error focus:ring-error/20",
35
- filled: "bg-error/5 focus:border-error focus:ring-error/20",
36
- flushed: "border-error focus:border-error",
37
- unstyled: ""
38
- },
39
- success: {
40
- default: "border-success focus:border-success focus:ring-success/20",
41
- filled: "bg-success/5 focus:border-success focus:ring-success/20",
42
- flushed: "border-success focus:border-success",
43
- unstyled: ""
44
- },
45
- warning: {
46
- default: "border-warning focus:border-warning focus:ring-warning/20",
47
- filled: "bg-warning/5 focus:border-warning focus:ring-warning/20",
48
- flushed: "border-warning focus:border-warning",
49
- unstyled: ""
50
- }
51
- };
52
- var stateMessageClasses = {
53
- default: "text-text-muted",
54
- error: "text-error font-medium",
55
- success: "text-success font-medium",
56
- warning: "text-warning font-medium"
57
- };
58
- var disabledClasses = "disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-surface-secondary";
59
- function getAddonPadding(hasLeft, hasRight, size) {
60
- const leftPad = {
61
- xs: "pl-6",
62
- sm: "pl-8",
63
- md: "pl-9",
64
- lg: "pl-10",
65
- xl: "pl-11"
66
- };
67
- const rightPad = {
68
- xs: "pr-8",
69
- sm: "pr-10",
70
- md: "pr-11",
71
- lg: "pr-12",
72
- xl: "pr-12"
73
- };
74
- const parts = [];
75
- if (hasLeft) parts.push(leftPad[size]);
76
- if (hasRight) parts.push(rightPad[size]);
77
- return parts.join(" ");
78
- }
79
- function getStateMessage(state, errorMessage, successMessage, warningMessage) {
80
- if (state === "error" && errorMessage) return errorMessage;
81
- if (state === "success" && successMessage) return successMessage;
82
- if (state === "warning" && warningMessage) return warningMessage;
83
- return void 0;
84
- }
85
- function AddonIcon({
86
- children,
87
- side,
88
- size,
89
- pointerEvents = false
90
- }) {
91
- const iconSizeClasses = {
92
- xs: "w-3.5 h-3.5",
93
- sm: "w-4 h-4",
94
- md: "w-4 h-4",
95
- lg: "w-5 h-5",
96
- xl: "w-5 h-5"
97
- };
98
- return /* @__PURE__ */ jsx(
99
- "span",
100
- {
101
- "aria-hidden": "true",
102
- className: cn(
103
- "absolute top-1/2 -translate-y-1/2 text-text-secondary flex items-center justify-center",
104
- !pointerEvents && "pointer-events-none",
105
- side === "left" ? "left-3" : "right-3",
106
- iconSizeClasses[size]
107
- ),
108
- children
109
- }
110
- );
111
- }
112
- function Addon({ children, side }) {
113
- return /* @__PURE__ */ jsx(
114
- "span",
115
- {
116
- "aria-hidden": "true",
117
- className: cn(
118
- "inline-flex items-center border border-border bg-surface-secondary px-3 text-sm text-text-secondary select-none",
119
- side === "left" ? "rounded-l-md border-r-0" : "rounded-r-md border-l-0"
120
- ),
121
- children
122
- }
123
- );
124
- }
125
- var TimePicker = forwardRef(function TimePicker2({
126
- label,
127
- required = false,
128
- helperText,
129
- errorMessage,
130
- successMessage,
131
- warningMessage,
132
- variant = "default",
133
- size = "md",
134
- state = "default",
135
- fullWidth = true,
136
- leftElement,
137
- rightElement,
138
- prefix,
139
- suffix,
140
- wrapperClassName,
141
- inputGroupClassName,
142
- inputClassName,
143
- labelClassName,
144
- helperClassName,
145
- id: idProp,
146
- disabled,
147
- className,
148
- clearable,
149
- isLoading,
150
- value,
151
- onChange,
152
- ...rest
153
- }, ref) {
154
- const generatedId = useId();
155
- const inputId = idProp ?? generatedId;
156
- const helperId = `${inputId}-helper`;
157
- const stateMessageId = `${inputId}-state`;
158
- const isValueString = typeof value === "string";
159
- const showClear = clearable && isValueString && value.length > 0;
160
- const hasLeftElement = leftElement !== void 0;
161
- const hasRightElement = rightElement !== void 0 || Boolean(showClear) || Boolean(isLoading);
162
- const stateMessage = getStateMessage(state, errorMessage, successMessage, warningMessage);
163
- const describedBy = [helperText ? helperId : null, stateMessage ? stateMessageId : null].filter(Boolean).join(" ") || void 0;
164
- const handleClear = () => {
165
- if (ref && typeof ref !== "function" && ref.current) {
166
- const descriptor = Reflect.getOwnPropertyDescriptor(
167
- window.HTMLInputElement.prototype,
168
- "value"
169
- );
170
- const nativeInputValueSetter = descriptor?.set;
171
- if (nativeInputValueSetter) {
172
- Reflect.apply(nativeInputValueSetter, ref.current, [""]);
173
- }
174
- const event = new Event("input", { bubbles: true });
175
- ref.current.dispatchEvent(event);
176
- } else if (onChange) {
177
- const e = {
178
- target: { value: "" },
179
- currentTarget: { value: "" },
180
- preventDefault: () => {
181
- },
182
- stopPropagation: () => {
183
- }
184
- };
185
- onChange(e);
186
- }
187
- };
188
- const renderRightIcon = () => {
189
- if (isLoading) {
190
- return /* @__PURE__ */ jsxs(
191
- "svg",
192
- {
193
- className: "animate-spin h-full w-full text-text-muted",
194
- xmlns: "http://www.w3.org/2000/svg",
195
- fill: "none",
196
- viewBox: "0 0 24 24",
197
- children: [
198
- /* @__PURE__ */ jsx(
199
- "circle",
200
- {
201
- className: "opacity-25",
202
- cx: "12",
203
- cy: "12",
204
- r: "10",
205
- stroke: "currentColor",
206
- strokeWidth: "4"
207
- }
208
- ),
209
- /* @__PURE__ */ jsx(
210
- "path",
211
- {
212
- className: "opacity-75",
213
- fill: "currentColor",
214
- d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
215
- }
216
- )
217
- ]
218
- }
219
- );
220
- }
221
- if (showClear) {
222
- return /* @__PURE__ */ jsx(
223
- "button",
224
- {
225
- type: "button",
226
- onClick: handleClear,
227
- className: "pointer-events-auto flex items-center justify-center rounded-full text-text-muted hover:text-text hover:bg-hover p-0.5 transition-all duration-fast",
228
- "aria-label": "Clear time",
229
- children: /* @__PURE__ */ jsx(XMarkIcon, { className: "w-full h-full", strokeWidth: 2.5 })
230
- }
231
- );
232
- }
233
- return rightElement;
234
- };
235
- const inputElement = /* @__PURE__ */ jsx(
236
- "input",
237
- {
238
- ref,
239
- id: inputId,
240
- disabled: Boolean(disabled) || Boolean(isLoading),
241
- type: "time",
242
- value,
243
- onChange,
244
- "aria-invalid": state === "error" ? true : void 0,
245
- "aria-describedby": describedBy,
246
- "aria-required": required,
247
- className: cn(
248
- "w-full transition-colors duration-150",
249
- "[&::-webkit-calendar-picker-indicator]:cursor-pointer [&::-webkit-calendar-picker-indicator]:opacity-60 hover:[&::-webkit-calendar-picker-indicator]:opacity-100",
250
- sizeClasses[size],
251
- variantClasses[variant],
252
- stateVariantClasses[state][variant],
253
- disabledClasses,
254
- getAddonPadding(hasLeftElement, hasRightElement, size),
255
- inputClassName
256
- ),
257
- ...rest
258
- }
259
- );
260
- return /* @__PURE__ */ jsxs(
261
- "div",
262
- {
263
- className: cn(
264
- "flex flex-col gap-1",
265
- fullWidth ? "w-full" : "w-fit",
266
- wrapperClassName,
267
- className
268
- ),
269
- children: [
270
- label !== void 0 && /* @__PURE__ */ jsxs(
271
- "label",
272
- {
273
- htmlFor: inputId,
274
- className: cn(
275
- "font-black leading-none text-text uppercase tracking-widest",
276
- labelSizeClasses[size],
277
- labelClassName
278
- ),
279
- children: [
280
- label,
281
- required && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "ml-1 text-error", children: "*" })
282
- ]
283
- }
284
- ),
285
- /* @__PURE__ */ jsxs(
286
- "div",
287
- {
288
- className: cn("flex items-stretch", fullWidth ? "w-full" : "w-fit", inputGroupClassName),
289
- children: [
290
- prefix !== void 0 && /* @__PURE__ */ jsx(Addon, { side: "left", children: prefix }),
291
- /* @__PURE__ */ jsxs("div", { className: "relative flex flex-1 items-center", children: [
292
- hasLeftElement && /* @__PURE__ */ jsx(AddonIcon, { side: "left", size, children: leftElement }),
293
- /* @__PURE__ */ jsx(
294
- "div",
295
- {
296
- className: cn(
297
- "flex-1",
298
- prefix !== void 0 && suffix !== void 0 ? "[&>input]:rounded-none" : prefix !== void 0 ? "[&>input]:rounded-l-none" : suffix !== void 0 ? "[&>input]:rounded-r-none" : ""
299
- ),
300
- children: inputElement
301
- }
302
- ),
303
- hasRightElement && /* @__PURE__ */ jsx(AddonIcon, { side: "right", size, pointerEvents: !rightElement && Boolean(showClear), children: renderRightIcon() })
304
- ] }),
305
- suffix !== void 0 && /* @__PURE__ */ jsx(Addon, { side: "right", children: suffix })
306
- ]
307
- }
308
- ),
309
- helperText !== void 0 && /* @__PURE__ */ jsx(
310
- "p",
311
- {
312
- id: helperId,
313
- className: cn("text-xs leading-tight text-text-muted font-medium", helperClassName),
314
- children: helperText
315
- }
316
- ),
317
- stateMessage !== void 0 && /* @__PURE__ */ jsx(
318
- "p",
319
- {
320
- id: stateMessageId,
321
- role: state === "error" ? "alert" : void 0,
322
- className: cn(
323
- "text-xs leading-tight mt-1 font-medium",
324
- stateMessageClasses[state],
325
- helperClassName
326
- ),
327
- children: stateMessage
328
- }
329
- )
330
- ]
331
- }
332
- );
333
- });
334
- TimePicker.displayName = "TimePicker";
335
-
336
- export { TimePicker };