@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.
- package/dist/chunk-4PRNRENN.mjs +104 -0
- package/dist/chunk-62JXQJBD.cjs +533 -0
- package/dist/chunk-6LBTRQZD.mjs +806 -0
- package/dist/chunk-J53N2LAE.cjs +115 -0
- package/dist/chunk-M6XPQ5BE.cjs +808 -0
- package/dist/chunk-UPSMZISM.mjs +567 -0
- package/dist/chunk-YV3WWKQY.cjs +569 -0
- package/dist/chunk-Z5FRCULF.mjs +531 -0
- package/dist/date-picker/index.cjs +3 -2
- package/dist/date-picker/index.mjs +2 -1
- package/dist/date-time-picker/index.cjs +12 -0
- package/dist/date-time-picker/index.mjs +3 -0
- package/dist/index.cjs +27 -21
- package/dist/index.mjs +7 -5
- package/dist/time-picker/index.cjs +2 -2
- package/dist/time-picker/index.mjs +1 -1
- package/package.json +11 -1
- package/dist/Button.types-BsQYqZml.d.ts +0 -27
- package/dist/Button.types-D-srlWFf.d.mts +0 -27
- package/dist/TextInput.types-DRI8HQza.d.mts +0 -32
- package/dist/TextInput.types-DRI8HQza.d.ts +0 -32
- package/dist/Tooltip.types-PbUasE3C.d.mts +0 -36
- package/dist/Tooltip.types-PbUasE3C.d.ts +0 -36
- package/dist/avatar/index.d.mts +0 -29
- package/dist/avatar/index.d.ts +0 -29
- package/dist/badge/index.d.mts +0 -57
- package/dist/badge/index.d.ts +0 -57
- package/dist/breadcrumbs/index.d.mts +0 -32
- package/dist/breadcrumbs/index.d.ts +0 -32
- package/dist/button/index.d.mts +0 -8
- package/dist/button/index.d.ts +0 -8
- package/dist/card/index.d.mts +0 -42
- package/dist/card/index.d.ts +0 -42
- package/dist/checkbox/index.d.mts +0 -36
- package/dist/checkbox/index.d.ts +0 -36
- package/dist/chunk-7WNJ7L4Z.mjs +0 -335
- package/dist/chunk-DHC5LI2P.cjs +0 -338
- package/dist/chunk-VKQDW7C2.mjs +0 -336
- package/dist/chunk-W2ZAPLQH.cjs +0 -337
- package/dist/combo-box/index.d.mts +0 -62
- package/dist/combo-box/index.d.ts +0 -62
- package/dist/date-picker/index.d.mts +0 -32
- package/dist/date-picker/index.d.ts +0 -32
- package/dist/dialog/index.d.mts +0 -61
- package/dist/dialog/index.d.ts +0 -61
- package/dist/dropdown-menu/index.d.mts +0 -34
- package/dist/dropdown-menu/index.d.ts +0 -34
- package/dist/email/index.d.mts +0 -38
- package/dist/email/index.d.ts +0 -38
- package/dist/file-upload/index.d.mts +0 -27
- package/dist/file-upload/index.d.ts +0 -27
- package/dist/header/index.d.mts +0 -28
- package/dist/header/index.d.ts +0 -28
- package/dist/icon-button/index.d.mts +0 -16
- package/dist/icon-button/index.d.ts +0 -16
- package/dist/image/index.d.mts +0 -48
- package/dist/image/index.d.ts +0 -48
- package/dist/index.d.mts +0 -141
- package/dist/index.d.ts +0 -141
- package/dist/link/index.d.mts +0 -25
- package/dist/link/index.d.ts +0 -25
- package/dist/loader/index.d.mts +0 -21
- package/dist/loader/index.d.ts +0 -21
- package/dist/modal/index.d.mts +0 -116
- package/dist/modal/index.d.ts +0 -116
- package/dist/multi-select/index.d.mts +0 -59
- package/dist/multi-select/index.d.ts +0 -59
- package/dist/otp-input/index.d.mts +0 -57
- package/dist/otp-input/index.d.ts +0 -57
- package/dist/password-input/index.d.mts +0 -32
- package/dist/password-input/index.d.ts +0 -32
- package/dist/phone/index.d.mts +0 -41
- package/dist/phone/index.d.ts +0 -41
- package/dist/radio-button/index.d.mts +0 -56
- package/dist/radio-button/index.d.ts +0 -56
- package/dist/search-input/index.d.mts +0 -22
- package/dist/search-input/index.d.ts +0 -22
- package/dist/select/index.d.mts +0 -36
- package/dist/select/index.d.ts +0 -36
- package/dist/sidebar/index.d.mts +0 -96
- package/dist/sidebar/index.d.ts +0 -96
- package/dist/skeleton/index.d.mts +0 -76
- package/dist/skeleton/index.d.ts +0 -76
- package/dist/styles.d.mts +0 -2
- package/dist/styles.d.ts +0 -2
- package/dist/table/index.d.mts +0 -92
- package/dist/table/index.d.ts +0 -92
- package/dist/tabs/index.d.mts +0 -26
- package/dist/tabs/index.d.ts +0 -26
- package/dist/text-input/index.d.mts +0 -7
- package/dist/text-input/index.d.ts +0 -7
- package/dist/theme-provider/index.d.mts +0 -122
- package/dist/theme-provider/index.d.ts +0 -122
- package/dist/theme.css +0 -62
- package/dist/time-picker/index.d.mts +0 -32
- package/dist/time-picker/index.d.ts +0 -32
- package/dist/toaster/index.d.mts +0 -28
- package/dist/toaster/index.d.ts +0 -28
- package/dist/tooltip/index.d.mts +0 -7
- package/dist/tooltip/index.d.ts +0 -7
|
@@ -0,0 +1,531 @@
|
|
|
1
|
+
import { cn } from './chunk-OCPFOFJ4.mjs';
|
|
2
|
+
import { forwardRef, useId, useState, useEffect, useCallback, useRef } from 'react';
|
|
3
|
+
import { ClockIcon, XMarkIcon, ChevronUpIcon, ChevronDownIcon } from '@heroicons/react/24/outline';
|
|
4
|
+
import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
|
|
5
|
+
|
|
6
|
+
function parseTime(value) {
|
|
7
|
+
if (!value) return { hours: 0, minutes: 0 };
|
|
8
|
+
const numbers = value.split(":").map(Number);
|
|
9
|
+
const h = numbers[0];
|
|
10
|
+
const m = numbers[1];
|
|
11
|
+
return {
|
|
12
|
+
hours: h === void 0 || isNaN(h) ? 0 : h,
|
|
13
|
+
minutes: m === void 0 || isNaN(m) ? 0 : m
|
|
14
|
+
};
|
|
15
|
+
}
|
|
16
|
+
function toTimeString(hours, minutes) {
|
|
17
|
+
return `${String(hours).padStart(2, "0")}:${String(minutes).padStart(2, "0")}`;
|
|
18
|
+
}
|
|
19
|
+
function formatDisplay(value, use12Hour) {
|
|
20
|
+
if (!value) return "";
|
|
21
|
+
const { hours, minutes } = parseTime(value);
|
|
22
|
+
if (use12Hour) {
|
|
23
|
+
const ampm = hours >= 12 ? "PM" : "AM";
|
|
24
|
+
const h = hours % 12 || 12;
|
|
25
|
+
return `${String(h).padStart(2, "0")}:${String(minutes).padStart(2, "0")} ${ampm}`;
|
|
26
|
+
}
|
|
27
|
+
return toTimeString(hours, minutes);
|
|
28
|
+
}
|
|
29
|
+
var ITEM_HEIGHT = 36;
|
|
30
|
+
var sizeClasses = {
|
|
31
|
+
xs: "h-6 px-2 text-xs",
|
|
32
|
+
sm: "h-8 px-3 text-sm",
|
|
33
|
+
md: "h-10 px-3 text-sm",
|
|
34
|
+
lg: "h-11 px-4 text-base",
|
|
35
|
+
xl: "h-12 px-4 text-lg"
|
|
36
|
+
};
|
|
37
|
+
var labelSizeClasses = {
|
|
38
|
+
xs: "text-xs",
|
|
39
|
+
sm: "text-xs",
|
|
40
|
+
md: "text-sm",
|
|
41
|
+
lg: "text-sm",
|
|
42
|
+
xl: "text-base"
|
|
43
|
+
};
|
|
44
|
+
var variantClasses = {
|
|
45
|
+
default: "rounded-md border border-border bg-surface shadow-sm focus-within:outline-none focus-within:ring-2 focus-within:ring-primary/40 transition-all duration-200",
|
|
46
|
+
filled: "rounded-md border border-transparent bg-surface-secondary focus-within:bg-surface focus-within:ring-2 focus-within:ring-primary/40 transition-all duration-200",
|
|
47
|
+
flushed: "rounded-none border-0 border-b border-border bg-transparent",
|
|
48
|
+
unstyled: "border-0 bg-transparent p-0"
|
|
49
|
+
};
|
|
50
|
+
var stateVariantClasses = {
|
|
51
|
+
default: {
|
|
52
|
+
default: "border-border focus-within:border-primary",
|
|
53
|
+
filled: "focus-within:border-primary",
|
|
54
|
+
flushed: "border-border focus-within:border-primary",
|
|
55
|
+
unstyled: ""
|
|
56
|
+
},
|
|
57
|
+
error: {
|
|
58
|
+
default: "border-error focus-within:border-error focus-within:ring-error/20",
|
|
59
|
+
filled: "bg-error/5 focus-within:border-error focus-within:ring-error/20",
|
|
60
|
+
flushed: "border-error",
|
|
61
|
+
unstyled: ""
|
|
62
|
+
},
|
|
63
|
+
success: {
|
|
64
|
+
default: "border-success focus-within:border-success focus-within:ring-success/20",
|
|
65
|
+
filled: "bg-success/5 focus-within:border-success focus-within:ring-success/20",
|
|
66
|
+
flushed: "border-success",
|
|
67
|
+
unstyled: ""
|
|
68
|
+
},
|
|
69
|
+
warning: {
|
|
70
|
+
default: "border-warning focus-within:border-warning focus-within:ring-warning/20",
|
|
71
|
+
filled: "bg-warning/5 focus-within:border-warning focus-within:ring-warning/20",
|
|
72
|
+
flushed: "border-warning",
|
|
73
|
+
unstyled: ""
|
|
74
|
+
}
|
|
75
|
+
};
|
|
76
|
+
var stateMessageClasses = {
|
|
77
|
+
default: "text-text-muted",
|
|
78
|
+
error: "text-error font-medium",
|
|
79
|
+
success: "text-success font-medium",
|
|
80
|
+
warning: "text-warning font-medium"
|
|
81
|
+
};
|
|
82
|
+
function ScrollColumn({ items, selected, onSelect, label }) {
|
|
83
|
+
const listRef = useRef(null);
|
|
84
|
+
const scrollToSelected = useCallback(
|
|
85
|
+
(behavior = "smooth") => {
|
|
86
|
+
if (!listRef.current) return;
|
|
87
|
+
const idx = items.indexOf(selected);
|
|
88
|
+
if (idx < 0) return;
|
|
89
|
+
const top = idx * ITEM_HEIGHT - ITEM_HEIGHT * 2;
|
|
90
|
+
if (typeof listRef.current.scrollTo === "function") {
|
|
91
|
+
listRef.current.scrollTo({ top: Math.max(0, top), behavior });
|
|
92
|
+
}
|
|
93
|
+
},
|
|
94
|
+
[items, selected]
|
|
95
|
+
);
|
|
96
|
+
useEffect(() => {
|
|
97
|
+
scrollToSelected("instant");
|
|
98
|
+
}, []);
|
|
99
|
+
useEffect(() => {
|
|
100
|
+
scrollToSelected("smooth");
|
|
101
|
+
}, [scrollToSelected]);
|
|
102
|
+
const step = (dir) => {
|
|
103
|
+
const idx = items.indexOf(selected);
|
|
104
|
+
const next = items[(idx + dir + items.length) % items.length];
|
|
105
|
+
if (next) onSelect(next);
|
|
106
|
+
};
|
|
107
|
+
return /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-0.5", "aria-label": label, role: "group", children: [
|
|
108
|
+
/* @__PURE__ */ jsx(
|
|
109
|
+
"button",
|
|
110
|
+
{
|
|
111
|
+
type: "button",
|
|
112
|
+
onClick: () => {
|
|
113
|
+
step(-1);
|
|
114
|
+
},
|
|
115
|
+
className: "p-1 rounded hover:bg-hover text-text-secondary hover:text-text transition-colors",
|
|
116
|
+
"aria-label": `Decrease ${label}`,
|
|
117
|
+
children: /* @__PURE__ */ jsx(ChevronUpIcon, { className: "w-4 h-4" })
|
|
118
|
+
}
|
|
119
|
+
),
|
|
120
|
+
/* @__PURE__ */ jsxs("div", { className: "relative", children: [
|
|
121
|
+
/* @__PURE__ */ jsx(
|
|
122
|
+
"div",
|
|
123
|
+
{
|
|
124
|
+
className: "absolute inset-x-0 rounded-lg bg-primary/10 border-y border-primary/20 pointer-events-none",
|
|
125
|
+
style: { top: ITEM_HEIGHT * 2, height: ITEM_HEIGHT }
|
|
126
|
+
}
|
|
127
|
+
),
|
|
128
|
+
/* @__PURE__ */ jsxs(
|
|
129
|
+
"div",
|
|
130
|
+
{
|
|
131
|
+
ref: listRef,
|
|
132
|
+
className: "overflow-y-auto scrollbar-none",
|
|
133
|
+
style: { height: ITEM_HEIGHT * 5, width: 56 },
|
|
134
|
+
children: [
|
|
135
|
+
/* @__PURE__ */ jsx("div", { style: { height: ITEM_HEIGHT * 2 } }),
|
|
136
|
+
items.map((item) => /* @__PURE__ */ jsx(
|
|
137
|
+
"button",
|
|
138
|
+
{
|
|
139
|
+
type: "button",
|
|
140
|
+
onClick: () => {
|
|
141
|
+
onSelect(item);
|
|
142
|
+
},
|
|
143
|
+
className: cn(
|
|
144
|
+
"w-full flex items-center justify-center rounded-lg text-sm font-medium transition-colors duration-150",
|
|
145
|
+
"hover:bg-hover",
|
|
146
|
+
selected === item ? "text-primary font-bold" : "text-text-secondary"
|
|
147
|
+
),
|
|
148
|
+
style: { height: ITEM_HEIGHT },
|
|
149
|
+
"aria-pressed": selected === item,
|
|
150
|
+
"aria-label": `${label} ${item}`,
|
|
151
|
+
children: item
|
|
152
|
+
},
|
|
153
|
+
item
|
|
154
|
+
)),
|
|
155
|
+
/* @__PURE__ */ jsx("div", { style: { height: ITEM_HEIGHT * 2 } })
|
|
156
|
+
]
|
|
157
|
+
}
|
|
158
|
+
)
|
|
159
|
+
] }),
|
|
160
|
+
/* @__PURE__ */ jsx(
|
|
161
|
+
"button",
|
|
162
|
+
{
|
|
163
|
+
type: "button",
|
|
164
|
+
onClick: () => {
|
|
165
|
+
step(1);
|
|
166
|
+
},
|
|
167
|
+
className: "p-1 rounded hover:bg-hover text-text-secondary hover:text-text transition-colors",
|
|
168
|
+
"aria-label": `Increase ${label}`,
|
|
169
|
+
children: /* @__PURE__ */ jsx(ChevronDownIcon, { className: "w-4 h-4" })
|
|
170
|
+
}
|
|
171
|
+
)
|
|
172
|
+
] });
|
|
173
|
+
}
|
|
174
|
+
function AddonIcon({ children, side, size, onClick, asButton = false, ariaLabel }) {
|
|
175
|
+
const iconSize = {
|
|
176
|
+
xs: "w-3.5 h-3.5",
|
|
177
|
+
sm: "w-4 h-4",
|
|
178
|
+
md: "w-4 h-4",
|
|
179
|
+
lg: "w-5 h-5",
|
|
180
|
+
xl: "w-5 h-5"
|
|
181
|
+
};
|
|
182
|
+
const base = cn(
|
|
183
|
+
"absolute top-1/2 -translate-y-1/2 text-text-secondary flex items-center justify-center",
|
|
184
|
+
side === "left" ? "left-3" : "right-3",
|
|
185
|
+
iconSize[size]
|
|
186
|
+
);
|
|
187
|
+
if (asButton && onClick) {
|
|
188
|
+
return /* @__PURE__ */ jsx(
|
|
189
|
+
"button",
|
|
190
|
+
{
|
|
191
|
+
type: "button",
|
|
192
|
+
onClick,
|
|
193
|
+
className: cn(base, "cursor-pointer hover:text-text transition-colors"),
|
|
194
|
+
tabIndex: -1,
|
|
195
|
+
"aria-label": ariaLabel,
|
|
196
|
+
children
|
|
197
|
+
}
|
|
198
|
+
);
|
|
199
|
+
}
|
|
200
|
+
return /* @__PURE__ */ jsx(
|
|
201
|
+
"span",
|
|
202
|
+
{
|
|
203
|
+
"aria-hidden": !ariaLabel,
|
|
204
|
+
className: cn(base, "pointer-events-none"),
|
|
205
|
+
"aria-label": ariaLabel,
|
|
206
|
+
children
|
|
207
|
+
}
|
|
208
|
+
);
|
|
209
|
+
}
|
|
210
|
+
function Addon({ children, side }) {
|
|
211
|
+
return /* @__PURE__ */ jsx(
|
|
212
|
+
"span",
|
|
213
|
+
{
|
|
214
|
+
"aria-hidden": "true",
|
|
215
|
+
className: cn(
|
|
216
|
+
"inline-flex items-center border border-border bg-surface-secondary px-3 text-sm text-text-secondary select-none",
|
|
217
|
+
side === "left" ? "rounded-l-md border-r-0" : "rounded-r-md border-l-0"
|
|
218
|
+
),
|
|
219
|
+
children
|
|
220
|
+
}
|
|
221
|
+
);
|
|
222
|
+
}
|
|
223
|
+
var TimePicker = forwardRef(
|
|
224
|
+
({
|
|
225
|
+
label,
|
|
226
|
+
required = false,
|
|
227
|
+
helperText,
|
|
228
|
+
errorMessage,
|
|
229
|
+
successMessage,
|
|
230
|
+
warningMessage,
|
|
231
|
+
variant = "default",
|
|
232
|
+
size = "md",
|
|
233
|
+
state = "default",
|
|
234
|
+
fullWidth = true,
|
|
235
|
+
leftElement,
|
|
236
|
+
rightElement,
|
|
237
|
+
prefix,
|
|
238
|
+
suffix,
|
|
239
|
+
wrapperClassName,
|
|
240
|
+
inputGroupClassName,
|
|
241
|
+
inputClassName,
|
|
242
|
+
labelClassName,
|
|
243
|
+
helperClassName,
|
|
244
|
+
id: idProp,
|
|
245
|
+
disabled,
|
|
246
|
+
className,
|
|
247
|
+
clearable,
|
|
248
|
+
isLoading,
|
|
249
|
+
value,
|
|
250
|
+
defaultValue,
|
|
251
|
+
onChange,
|
|
252
|
+
onTimeChange,
|
|
253
|
+
placeholder = "Select time",
|
|
254
|
+
minuteStep = 1,
|
|
255
|
+
use12Hour = false,
|
|
256
|
+
name,
|
|
257
|
+
"aria-label": ariaLabel,
|
|
258
|
+
"aria-describedby": ariaDescribedby
|
|
259
|
+
}, ref) => {
|
|
260
|
+
const generatedId = useId();
|
|
261
|
+
const inputId = idProp ?? generatedId;
|
|
262
|
+
const helperId = `${inputId}-helper`;
|
|
263
|
+
const stateMessageId = `${inputId}-state`;
|
|
264
|
+
const popoverId = `${inputId}-popover`;
|
|
265
|
+
const isControlled = value !== void 0;
|
|
266
|
+
const [internalValue, setInternalValue] = useState(defaultValue ?? "");
|
|
267
|
+
const displayValue = isControlled ? value : internalValue;
|
|
268
|
+
const { hours: selHours, minutes: selMinutes } = parseTime(displayValue);
|
|
269
|
+
const selAmpm = selHours >= 12 ? "PM" : "AM";
|
|
270
|
+
const selHours12 = selHours % 12 || 12;
|
|
271
|
+
const pickerHour = String(use12Hour ? selHours12 : selHours).padStart(2, "0");
|
|
272
|
+
const pickerMinute = String(selMinutes).padStart(2, "0");
|
|
273
|
+
const pickerAmpm = selAmpm;
|
|
274
|
+
const [isOpen, setIsOpen] = useState(false);
|
|
275
|
+
useEffect(() => {
|
|
276
|
+
if (!isOpen) return;
|
|
277
|
+
function handleClick(e) {
|
|
278
|
+
const wrapper = ref?.current;
|
|
279
|
+
if (wrapper && !wrapper.contains(e.target)) {
|
|
280
|
+
setIsOpen(false);
|
|
281
|
+
}
|
|
282
|
+
}
|
|
283
|
+
document.addEventListener("mousedown", handleClick);
|
|
284
|
+
return () => {
|
|
285
|
+
document.removeEventListener("mousedown", handleClick);
|
|
286
|
+
};
|
|
287
|
+
}, [isOpen]);
|
|
288
|
+
const hourItems = use12Hour ? Array.from({ length: 12 }, (_, i) => String(i + 1).padStart(2, "0")) : Array.from({ length: 24 }, (_, i) => String(i).padStart(2, "0"));
|
|
289
|
+
const minuteItems = Array.from(
|
|
290
|
+
{ length: Math.ceil(60 / minuteStep) },
|
|
291
|
+
(_, i) => String(i * minuteStep).padStart(2, "0")
|
|
292
|
+
);
|
|
293
|
+
const applyTime = useCallback(
|
|
294
|
+
(h, m, ap) => {
|
|
295
|
+
let hours24 = parseInt(h, 10);
|
|
296
|
+
if (use12Hour) {
|
|
297
|
+
if (ap === "AM" && hours24 === 12) hours24 = 0;
|
|
298
|
+
if (ap === "PM" && hours24 !== 12) hours24 += 12;
|
|
299
|
+
}
|
|
300
|
+
const iso = toTimeString(hours24, parseInt(m, 10));
|
|
301
|
+
if (!isControlled) setInternalValue(iso);
|
|
302
|
+
onChange?.(iso);
|
|
303
|
+
onTimeChange?.(iso);
|
|
304
|
+
},
|
|
305
|
+
[isControlled, onChange, onTimeChange, use12Hour]
|
|
306
|
+
);
|
|
307
|
+
const handleHourSelect = (h) => {
|
|
308
|
+
applyTime(h, pickerMinute, pickerAmpm);
|
|
309
|
+
};
|
|
310
|
+
const handleMinuteSelect = (m) => {
|
|
311
|
+
applyTime(pickerHour, m, pickerAmpm);
|
|
312
|
+
};
|
|
313
|
+
const handleAmpmSelect = (ap) => {
|
|
314
|
+
const a = ap;
|
|
315
|
+
applyTime(pickerHour, pickerMinute, a);
|
|
316
|
+
};
|
|
317
|
+
const handleClear = () => {
|
|
318
|
+
if (!isControlled) setInternalValue("");
|
|
319
|
+
onChange?.("");
|
|
320
|
+
onTimeChange?.(null);
|
|
321
|
+
};
|
|
322
|
+
const toggleOpen = () => {
|
|
323
|
+
if (disabled || isLoading) return;
|
|
324
|
+
setIsOpen((prev) => !prev);
|
|
325
|
+
};
|
|
326
|
+
const showClear = clearable && displayValue.length > 0 && !disabled && !isLoading;
|
|
327
|
+
const rightPad = {
|
|
328
|
+
xs: "pr-6",
|
|
329
|
+
sm: "pr-8",
|
|
330
|
+
md: "pr-9",
|
|
331
|
+
lg: "pr-10",
|
|
332
|
+
xl: "pr-11"
|
|
333
|
+
};
|
|
334
|
+
const stateMessage = state === "error" ? errorMessage : state === "success" ? successMessage : state === "warning" ? warningMessage : void 0;
|
|
335
|
+
const describedBy = [helperText ? helperId : null, stateMessage ? stateMessageId : null, ariaDescribedby ?? null].filter(Boolean).join(" ") || void 0;
|
|
336
|
+
return /* @__PURE__ */ jsxs(
|
|
337
|
+
"div",
|
|
338
|
+
{
|
|
339
|
+
ref,
|
|
340
|
+
className: cn(
|
|
341
|
+
"flex flex-col gap-1 relative",
|
|
342
|
+
fullWidth ? "w-full" : "w-fit",
|
|
343
|
+
wrapperClassName,
|
|
344
|
+
className
|
|
345
|
+
),
|
|
346
|
+
children: [
|
|
347
|
+
label !== void 0 && /* @__PURE__ */ jsxs(
|
|
348
|
+
"label",
|
|
349
|
+
{
|
|
350
|
+
htmlFor: inputId,
|
|
351
|
+
className: cn(
|
|
352
|
+
"font-black leading-none text-text uppercase tracking-widest",
|
|
353
|
+
labelSizeClasses[size],
|
|
354
|
+
labelClassName
|
|
355
|
+
),
|
|
356
|
+
children: [
|
|
357
|
+
label,
|
|
358
|
+
required && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "ml-1 text-error", children: "*" })
|
|
359
|
+
]
|
|
360
|
+
}
|
|
361
|
+
),
|
|
362
|
+
/* @__PURE__ */ jsxs(
|
|
363
|
+
"div",
|
|
364
|
+
{
|
|
365
|
+
className: cn("flex items-stretch", fullWidth ? "w-full" : "w-fit", inputGroupClassName),
|
|
366
|
+
children: [
|
|
367
|
+
prefix !== void 0 && /* @__PURE__ */ jsx(Addon, { side: "left", children: prefix }),
|
|
368
|
+
/* @__PURE__ */ jsxs("div", { className: "relative flex flex-1 items-center", children: [
|
|
369
|
+
/* @__PURE__ */ jsx(AddonIcon, { side: "left", size, children: leftElement ?? /* @__PURE__ */ jsx(ClockIcon, { className: "w-full h-full" }) }),
|
|
370
|
+
/* @__PURE__ */ jsx(
|
|
371
|
+
"button",
|
|
372
|
+
{
|
|
373
|
+
id: inputId,
|
|
374
|
+
type: "button",
|
|
375
|
+
role: "combobox",
|
|
376
|
+
"aria-expanded": isOpen,
|
|
377
|
+
"aria-haspopup": "dialog",
|
|
378
|
+
"aria-controls": popoverId,
|
|
379
|
+
"aria-label": ariaLabel ?? label ?? "Time picker",
|
|
380
|
+
"aria-describedby": describedBy,
|
|
381
|
+
"aria-required": required,
|
|
382
|
+
"aria-invalid": state === "error" ? true : void 0,
|
|
383
|
+
disabled: Boolean(disabled) || Boolean(isLoading),
|
|
384
|
+
onClick: toggleOpen,
|
|
385
|
+
name,
|
|
386
|
+
className: cn(
|
|
387
|
+
"w-full flex items-center text-left transition-colors duration-150 cursor-pointer",
|
|
388
|
+
"disabled:cursor-not-allowed disabled:opacity-50",
|
|
389
|
+
sizeClasses[size],
|
|
390
|
+
variantClasses[variant],
|
|
391
|
+
stateVariantClasses[state][variant],
|
|
392
|
+
"pl-9",
|
|
393
|
+
showClear || rightElement ? rightPad[size] : "",
|
|
394
|
+
prefix !== void 0 && suffix !== void 0 ? "rounded-none" : prefix !== void 0 ? "rounded-l-none" : suffix !== void 0 ? "rounded-r-none" : "",
|
|
395
|
+
inputClassName
|
|
396
|
+
),
|
|
397
|
+
children: displayValue ? /* @__PURE__ */ jsx("span", { className: "text-text", children: formatDisplay(displayValue, use12Hour) }) : /* @__PURE__ */ jsx("span", { className: "text-text-muted", children: placeholder })
|
|
398
|
+
}
|
|
399
|
+
),
|
|
400
|
+
isLoading ? /* @__PURE__ */ jsx(AddonIcon, { side: "right", size, children: /* @__PURE__ */ jsxs(
|
|
401
|
+
"svg",
|
|
402
|
+
{
|
|
403
|
+
className: "animate-spin h-full w-full text-text-muted",
|
|
404
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
405
|
+
fill: "none",
|
|
406
|
+
viewBox: "0 0 24 24",
|
|
407
|
+
children: [
|
|
408
|
+
/* @__PURE__ */ jsx(
|
|
409
|
+
"circle",
|
|
410
|
+
{
|
|
411
|
+
className: "opacity-25",
|
|
412
|
+
cx: "12",
|
|
413
|
+
cy: "12",
|
|
414
|
+
r: "10",
|
|
415
|
+
stroke: "currentColor",
|
|
416
|
+
strokeWidth: "4"
|
|
417
|
+
}
|
|
418
|
+
),
|
|
419
|
+
/* @__PURE__ */ jsx(
|
|
420
|
+
"path",
|
|
421
|
+
{
|
|
422
|
+
className: "opacity-75",
|
|
423
|
+
fill: "currentColor",
|
|
424
|
+
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"
|
|
425
|
+
}
|
|
426
|
+
)
|
|
427
|
+
]
|
|
428
|
+
}
|
|
429
|
+
) }) : showClear ? /* @__PURE__ */ jsx(
|
|
430
|
+
AddonIcon,
|
|
431
|
+
{
|
|
432
|
+
side: "right",
|
|
433
|
+
size,
|
|
434
|
+
asButton: true,
|
|
435
|
+
onClick: handleClear,
|
|
436
|
+
ariaLabel: "Clear time",
|
|
437
|
+
children: /* @__PURE__ */ jsx(XMarkIcon, { className: "w-full h-full", strokeWidth: 2.5 })
|
|
438
|
+
}
|
|
439
|
+
) : rightElement ? /* @__PURE__ */ jsx(AddonIcon, { side: "right", size, children: rightElement }) : null
|
|
440
|
+
] }),
|
|
441
|
+
suffix !== void 0 && /* @__PURE__ */ jsx(Addon, { side: "right", children: suffix })
|
|
442
|
+
]
|
|
443
|
+
}
|
|
444
|
+
),
|
|
445
|
+
helperText !== void 0 && /* @__PURE__ */ jsx(
|
|
446
|
+
"p",
|
|
447
|
+
{
|
|
448
|
+
id: helperId,
|
|
449
|
+
className: cn("text-xs leading-tight text-text-muted font-medium", helperClassName),
|
|
450
|
+
children: helperText
|
|
451
|
+
}
|
|
452
|
+
),
|
|
453
|
+
stateMessage !== void 0 && /* @__PURE__ */ jsx(
|
|
454
|
+
"p",
|
|
455
|
+
{
|
|
456
|
+
id: stateMessageId,
|
|
457
|
+
role: state === "error" ? "alert" : void 0,
|
|
458
|
+
className: cn(
|
|
459
|
+
"text-xs leading-tight mt-0.5 font-medium",
|
|
460
|
+
stateMessageClasses[state],
|
|
461
|
+
helperClassName
|
|
462
|
+
),
|
|
463
|
+
children: stateMessage
|
|
464
|
+
}
|
|
465
|
+
),
|
|
466
|
+
/* @__PURE__ */ jsx(
|
|
467
|
+
"div",
|
|
468
|
+
{
|
|
469
|
+
id: popoverId,
|
|
470
|
+
role: "dialog",
|
|
471
|
+
"aria-label": "Time picker",
|
|
472
|
+
"aria-modal": "true",
|
|
473
|
+
className: cn(
|
|
474
|
+
"absolute top-full left-0 z-50 mt-1",
|
|
475
|
+
"bg-surface border border-border rounded-xl shadow-xl",
|
|
476
|
+
"transition-all duration-200 origin-top",
|
|
477
|
+
isOpen ? "opacity-100 scale-100 pointer-events-auto" : "opacity-0 scale-95 pointer-events-none"
|
|
478
|
+
),
|
|
479
|
+
children: /* @__PURE__ */ jsxs("div", { className: "p-4", children: [
|
|
480
|
+
/* @__PURE__ */ jsx("p", { className: "text-xs font-bold text-text-muted uppercase tracking-widest mb-3 text-center", children: "Select Time" }),
|
|
481
|
+
/* @__PURE__ */ jsxs("div", { className: "flex items-start gap-1", children: [
|
|
482
|
+
/* @__PURE__ */ jsx(
|
|
483
|
+
ScrollColumn,
|
|
484
|
+
{
|
|
485
|
+
items: hourItems,
|
|
486
|
+
selected: pickerHour,
|
|
487
|
+
onSelect: handleHourSelect,
|
|
488
|
+
label: "Hour"
|
|
489
|
+
}
|
|
490
|
+
),
|
|
491
|
+
/* @__PURE__ */ jsx(
|
|
492
|
+
"div",
|
|
493
|
+
{
|
|
494
|
+
className: "flex items-center self-center pb-2 text-text-muted font-bold text-lg select-none",
|
|
495
|
+
style: { height: ITEM_HEIGHT },
|
|
496
|
+
children: ":"
|
|
497
|
+
}
|
|
498
|
+
),
|
|
499
|
+
/* @__PURE__ */ jsx(
|
|
500
|
+
ScrollColumn,
|
|
501
|
+
{
|
|
502
|
+
items: minuteItems,
|
|
503
|
+
selected: pickerMinute,
|
|
504
|
+
onSelect: handleMinuteSelect,
|
|
505
|
+
label: "Minute"
|
|
506
|
+
}
|
|
507
|
+
),
|
|
508
|
+
use12Hour && /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
509
|
+
/* @__PURE__ */ jsx("div", { className: "w-px self-stretch bg-border mx-1" }),
|
|
510
|
+
/* @__PURE__ */ jsx(
|
|
511
|
+
ScrollColumn,
|
|
512
|
+
{
|
|
513
|
+
items: ["AM", "PM"],
|
|
514
|
+
selected: pickerAmpm,
|
|
515
|
+
onSelect: handleAmpmSelect,
|
|
516
|
+
label: "AM/PM"
|
|
517
|
+
}
|
|
518
|
+
)
|
|
519
|
+
] })
|
|
520
|
+
] }),
|
|
521
|
+
/* @__PURE__ */ jsx("div", { className: "mt-3 pt-3 border-t border-border text-center", children: /* @__PURE__ */ jsx("span", { className: "text-sm font-bold text-primary font-mono", children: displayValue ? formatDisplay(displayValue, use12Hour) : "\u2013\u2013:\u2013\u2013" }) })
|
|
522
|
+
] })
|
|
523
|
+
}
|
|
524
|
+
)
|
|
525
|
+
]
|
|
526
|
+
}
|
|
527
|
+
);
|
|
528
|
+
}
|
|
529
|
+
);
|
|
530
|
+
|
|
531
|
+
export { TimePicker };
|
|
@@ -1,11 +1,12 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var
|
|
3
|
+
var chunkYV3WWKQY_cjs = require('../chunk-YV3WWKQY.cjs');
|
|
4
|
+
require('../chunk-J53N2LAE.cjs');
|
|
4
5
|
require('../chunk-L5VQZZVR.cjs');
|
|
5
6
|
|
|
6
7
|
|
|
7
8
|
|
|
8
9
|
Object.defineProperty(exports, "DatePicker", {
|
|
9
10
|
enumerable: true,
|
|
10
|
-
get: function () { return
|
|
11
|
+
get: function () { return chunkYV3WWKQY_cjs.DatePicker; }
|
|
11
12
|
});
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var chunkM6XPQ5BE_cjs = require('../chunk-M6XPQ5BE.cjs');
|
|
4
|
+
require('../chunk-J53N2LAE.cjs');
|
|
5
|
+
require('../chunk-L5VQZZVR.cjs');
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
Object.defineProperty(exports, "DateTimePicker", {
|
|
10
|
+
enumerable: true,
|
|
11
|
+
get: function () { return chunkM6XPQ5BE_cjs.DateTimePicker; }
|
|
12
|
+
});
|
package/dist/index.cjs
CHANGED
|
@@ -4,14 +4,16 @@ var chunkPCYGJNEQ_cjs = require('./chunk-PCYGJNEQ.cjs');
|
|
|
4
4
|
var chunk7DDDQ3RH_cjs = require('./chunk-7DDDQ3RH.cjs');
|
|
5
5
|
var chunkLTG6YP5I_cjs = require('./chunk-LTG6YP5I.cjs');
|
|
6
6
|
require('./chunk-NMJ5CVZH.cjs');
|
|
7
|
+
var chunkOEU5VG3D_cjs = require('./chunk-OEU5VG3D.cjs');
|
|
7
8
|
var chunkY6AN7AWX_cjs = require('./chunk-Y6AN7AWX.cjs');
|
|
8
9
|
var chunkXFNRKHHF_cjs = require('./chunk-XFNRKHHF.cjs');
|
|
9
|
-
var
|
|
10
|
+
var chunk62JXQJBD_cjs = require('./chunk-62JXQJBD.cjs');
|
|
10
11
|
var chunkYMMNWJT6_cjs = require('./chunk-YMMNWJT6.cjs');
|
|
11
12
|
var chunkQ3IFXFFD_cjs = require('./chunk-Q3IFXFFD.cjs');
|
|
12
13
|
var chunkYK7IS7JL_cjs = require('./chunk-YK7IS7JL.cjs');
|
|
13
|
-
var chunkPJWELBN2_cjs = require('./chunk-PJWELBN2.cjs');
|
|
14
14
|
var chunkTNGW5YHA_cjs = require('./chunk-TNGW5YHA.cjs');
|
|
15
|
+
var chunkPJWELBN2_cjs = require('./chunk-PJWELBN2.cjs');
|
|
16
|
+
var chunkMVUNJPGH_cjs = require('./chunk-MVUNJPGH.cjs');
|
|
15
17
|
var chunkS7VEND5Z_cjs = require('./chunk-S7VEND5Z.cjs');
|
|
16
18
|
var chunk56ILK7Y4_cjs = require('./chunk-56ILK7Y4.cjs');
|
|
17
19
|
var chunkNRZIXK35_cjs = require('./chunk-NRZIXK35.cjs');
|
|
@@ -19,15 +21,15 @@ var chunk5RKET2JO_cjs = require('./chunk-5RKET2JO.cjs');
|
|
|
19
21
|
var chunkBIKJK4L4_cjs = require('./chunk-BIKJK4L4.cjs');
|
|
20
22
|
var chunkVRZFAKSV_cjs = require('./chunk-VRZFAKSV.cjs');
|
|
21
23
|
var chunk7R5JRJ2W_cjs = require('./chunk-7R5JRJ2W.cjs');
|
|
22
|
-
var chunkOEU5VG3D_cjs = require('./chunk-OEU5VG3D.cjs');
|
|
23
24
|
var chunkKLBABQEJ_cjs = require('./chunk-KLBABQEJ.cjs');
|
|
24
|
-
var
|
|
25
|
+
var chunkYV3WWKQY_cjs = require('./chunk-YV3WWKQY.cjs');
|
|
26
|
+
var chunkM6XPQ5BE_cjs = require('./chunk-M6XPQ5BE.cjs');
|
|
27
|
+
require('./chunk-J53N2LAE.cjs');
|
|
25
28
|
var chunkOPOCCRJG_cjs = require('./chunk-OPOCCRJG.cjs');
|
|
26
29
|
var chunkAJXVELXK_cjs = require('./chunk-AJXVELXK.cjs');
|
|
27
30
|
var chunkVC7MOPU6_cjs = require('./chunk-VC7MOPU6.cjs');
|
|
28
31
|
var chunk6R3OYBQ6_cjs = require('./chunk-6R3OYBQ6.cjs');
|
|
29
32
|
var chunkBBVWG5GH_cjs = require('./chunk-BBVWG5GH.cjs');
|
|
30
|
-
var chunkMVUNJPGH_cjs = require('./chunk-MVUNJPGH.cjs');
|
|
31
33
|
var chunkHIWJDLIS_cjs = require('./chunk-HIWJDLIS.cjs');
|
|
32
34
|
var chunk5J3OMAO4_cjs = require('./chunk-5J3OMAO4.cjs');
|
|
33
35
|
var chunkNRCNRHXL_cjs = require('./chunk-NRCNRHXL.cjs');
|
|
@@ -631,6 +633,14 @@ Object.defineProperty(exports, "useTheme", {
|
|
|
631
633
|
enumerable: true,
|
|
632
634
|
get: function () { return chunkLTG6YP5I_cjs.useTheme; }
|
|
633
635
|
});
|
|
636
|
+
Object.defineProperty(exports, "Pagination", {
|
|
637
|
+
enumerable: true,
|
|
638
|
+
get: function () { return chunkOEU5VG3D_cjs.Pagination; }
|
|
639
|
+
});
|
|
640
|
+
Object.defineProperty(exports, "Table", {
|
|
641
|
+
enumerable: true,
|
|
642
|
+
get: function () { return chunkOEU5VG3D_cjs.Table; }
|
|
643
|
+
});
|
|
634
644
|
Object.defineProperty(exports, "Tabs", {
|
|
635
645
|
enumerable: true,
|
|
636
646
|
get: function () { return chunkY6AN7AWX_cjs.Tabs; }
|
|
@@ -641,7 +651,7 @@ Object.defineProperty(exports, "TextInput", {
|
|
|
641
651
|
});
|
|
642
652
|
Object.defineProperty(exports, "TimePicker", {
|
|
643
653
|
enumerable: true,
|
|
644
|
-
get: function () { return
|
|
654
|
+
get: function () { return chunk62JXQJBD_cjs.TimePicker; }
|
|
645
655
|
});
|
|
646
656
|
Object.defineProperty(exports, "Toaster", {
|
|
647
657
|
enumerable: true,
|
|
@@ -655,13 +665,17 @@ Object.defineProperty(exports, "Header", {
|
|
|
655
665
|
enumerable: true,
|
|
656
666
|
get: function () { return chunkYK7IS7JL_cjs.Header; }
|
|
657
667
|
});
|
|
668
|
+
Object.defineProperty(exports, "IconButton", {
|
|
669
|
+
enumerable: true,
|
|
670
|
+
get: function () { return chunkTNGW5YHA_cjs.IconButton; }
|
|
671
|
+
});
|
|
658
672
|
Object.defineProperty(exports, "Image", {
|
|
659
673
|
enumerable: true,
|
|
660
674
|
get: function () { return chunkPJWELBN2_cjs.Image; }
|
|
661
675
|
});
|
|
662
|
-
Object.defineProperty(exports, "
|
|
676
|
+
Object.defineProperty(exports, "Loader", {
|
|
663
677
|
enumerable: true,
|
|
664
|
-
get: function () { return
|
|
678
|
+
get: function () { return chunkMVUNJPGH_cjs.Loader; }
|
|
665
679
|
});
|
|
666
680
|
Object.defineProperty(exports, "Skeleton", {
|
|
667
681
|
enumerable: true,
|
|
@@ -707,21 +721,17 @@ Object.defineProperty(exports, "Select", {
|
|
|
707
721
|
enumerable: true,
|
|
708
722
|
get: function () { return chunk7R5JRJ2W_cjs.Select; }
|
|
709
723
|
});
|
|
710
|
-
Object.defineProperty(exports, "Pagination", {
|
|
711
|
-
enumerable: true,
|
|
712
|
-
get: function () { return chunkOEU5VG3D_cjs.Pagination; }
|
|
713
|
-
});
|
|
714
|
-
Object.defineProperty(exports, "Table", {
|
|
715
|
-
enumerable: true,
|
|
716
|
-
get: function () { return chunkOEU5VG3D_cjs.Table; }
|
|
717
|
-
});
|
|
718
724
|
Object.defineProperty(exports, "ComboBox", {
|
|
719
725
|
enumerable: true,
|
|
720
726
|
get: function () { return chunkKLBABQEJ_cjs.ComboBox; }
|
|
721
727
|
});
|
|
722
728
|
Object.defineProperty(exports, "DatePicker", {
|
|
723
729
|
enumerable: true,
|
|
724
|
-
get: function () { return
|
|
730
|
+
get: function () { return chunkYV3WWKQY_cjs.DatePicker; }
|
|
731
|
+
});
|
|
732
|
+
Object.defineProperty(exports, "DateTimePicker", {
|
|
733
|
+
enumerable: true,
|
|
734
|
+
get: function () { return chunkM6XPQ5BE_cjs.DateTimePicker; }
|
|
725
735
|
});
|
|
726
736
|
Object.defineProperty(exports, "Dialog", {
|
|
727
737
|
enumerable: true,
|
|
@@ -775,10 +785,6 @@ Object.defineProperty(exports, "Link", {
|
|
|
775
785
|
enumerable: true,
|
|
776
786
|
get: function () { return chunkBBVWG5GH_cjs.Link; }
|
|
777
787
|
});
|
|
778
|
-
Object.defineProperty(exports, "Loader", {
|
|
779
|
-
enumerable: true,
|
|
780
|
-
get: function () { return chunkMVUNJPGH_cjs.Loader; }
|
|
781
|
-
});
|
|
782
788
|
Object.defineProperty(exports, "Avatar", {
|
|
783
789
|
enumerable: true,
|
|
784
790
|
get: function () { return chunkHIWJDLIS_cjs.Avatar; }
|