visits-style 2.0.0 → 2.0.2

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/index.esm.js DELETED
@@ -1,1199 +0,0 @@
1
- import clsx8 from 'clsx';
2
- export { default as clsx } from 'clsx';
3
- import { forwardRef, useMemo, useState, useRef, useCallback, useEffect, useImperativeHandle, cloneElement, Children, startTransition, createElement, useLayoutEffect } from 'react';
4
- import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
5
- import { useId, useFloating, shift, flip, offset, autoUpdate, useTransitionStyles, useInteractions, useClick, FloatingOverlay, useHover, useClientPoint, useDismiss } from '@floating-ui/react';
6
- import { createPortal } from 'react-dom';
7
-
8
- // src/index.ts
9
-
10
- // src/utils/merge.ts
11
- function merge(a, b) {
12
- if (!b) return a;
13
- return a + " " + b;
14
- }
15
- function FormLabel({ className, ...rest }) {
16
- const name = useMemo(() => clsx8("leading-none peer-disabled:opacity-70", className), [className]);
17
- return /* @__PURE__ */ jsx("label", { className: name, ...rest });
18
- }
19
- function Field({
20
- label,
21
- children,
22
- required,
23
- htmlFor,
24
- error,
25
- help,
26
- helpBefore,
27
- className,
28
- innerClass,
29
- ...rest
30
- }) {
31
- const labelName = useMemo(() => clsx8(
32
- "font-medium",
33
- required ? 'after:content-["*"] after:text-danger after:text-sm after:pl-0.5' : ""
34
- ), [required]);
35
- const wrapperName = useMemo(() => merge("flex flex-col space-y-2", className), [className]);
36
- return /* @__PURE__ */ jsxs("div", { className: wrapperName, ...rest, children: [
37
- label ? /* @__PURE__ */ jsx(FormLabel, { className: labelName, htmlFor, children: label }) : null,
38
- help && helpBefore ? /* @__PURE__ */ jsx("p", { className: "text-xs text-muted pb-2", children: help }) : null,
39
- /* @__PURE__ */ jsx("div", { className: innerClass, children: cloneChildren(children, !!error) }),
40
- help && !helpBefore && !error ? /* @__PURE__ */ jsx("p", { className: "text-xs text-muted", children: help }) : null,
41
- error ? /* @__PURE__ */ jsx("p", { className: "text-xs text-danger", children: error }) : null
42
- ] });
43
- }
44
- function cloneChildren(children, error) {
45
- const len = Children.count(children);
46
- if (!len) return null;
47
- if (len === 1) {
48
- return cloneElement(children, { error });
49
- }
50
- const arr = Children.toArray(children);
51
- arr[0] = cloneElement(arr[0], { error });
52
- return arr;
53
- }
54
- function InputField({ error, unstyled, className, ...rest }) {
55
- const name = useMemo(() => unstyled ? className : merge(clsx8(
56
- "flex rounded-md border bg-background px-3 py-2 w-full [&_input]:placeholder:text-muted",
57
- "[&_input]:disabled:opacity-50 [&_input]:focus-visible:outline-none",
58
- error ? "border-danger hover:border-danger-fore" : "border-input"
59
- ), className), [className, error, unstyled]);
60
- return /* @__PURE__ */ jsx("div", { className: name, ...rest });
61
- }
62
- var Input = forwardRef(({
63
- className,
64
- type,
65
- error,
66
- unstyled,
67
- ...rest
68
- }, ref) => {
69
- const name = useMemo(() => unstyled ? className : merge(clsx8(
70
- "flex rounded-md border bg-background px-3 py-2 w-full placeholder:text-muted",
71
- "disabled:cursor-not-allowed disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ring",
72
- error ? "border-danger hover:border-danger-fore" : "border-input not-disabled:hover:border-input-fore",
73
- type === "file" ? "file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground" : null
74
- ), className), [className, type, error, unstyled]);
75
- return /* @__PURE__ */ jsx("input", { ref, type, className: name, ...rest });
76
- });
77
- Input.displayName = "Input";
78
- var Input_default = Input;
79
- var Textarea = forwardRef(({
80
- className,
81
- error,
82
- unstyled,
83
- ...rest
84
- }, ref) => {
85
- const name = useMemo(() => unstyled ? className : merge(clsx8(
86
- "flex rounded-md border bg-background px-3 py-2 w-full",
87
- "disabled:cursor-not-allowed disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ring",
88
- error ? "border-danger hover:border-danger-fore" : "border-input not-disabled:hover:border-input-fore"
89
- ), className), [className, error, unstyled]);
90
- return /* @__PURE__ */ jsx("textarea", { ref, className: name, ...rest });
91
- });
92
- Textarea.displayName = "Textarea";
93
- var Textarea_default = Textarea;
94
- function Check(props) {
95
- return /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "30", height: "30", viewBox: "0 0 30 30", ...props, children: /* @__PURE__ */ jsx("path", { d: "M11.5 18.5l-3.9-4L6 16l5.6 5.6 11.6-11.5-1.7-1.6z", fill: "currentColor" }) });
96
- }
97
- function Indeterminate() {
98
- return /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "30", height: "30", viewBox: "0 0 30 30", children: /* @__PURE__ */ jsx("rect", { width: "20", height: "3", y: "13.5", x: "4.5", fill: "currentColor", stroke: "none", rx: "2" }) });
99
- }
100
- function Checkbox({
101
- checked,
102
- indeterminate,
103
- className,
104
- id,
105
- name,
106
- onChange,
107
- value,
108
- ...rest
109
- }) {
110
- const innerClass = useMemo(() => merge(clsx8(
111
- "inline-flex justify-center items-center border w-4.5 h-4.5 rounded",
112
- "cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed",
113
- checked || indeterminate ? "bg-primary text-inverted disabled:text-text disabled:bg-input disabled:border-input" : "border-input not-disabled:hover:border-input-fore"
114
- ), className), [checked, indeterminate, className]);
115
- const handleChange = () => {
116
- if (rest.disabled) return;
117
- onChange?.(!checked);
118
- };
119
- return /* @__PURE__ */ jsxs(
120
- "button",
121
- {
122
- type: "button",
123
- role: "checkbox",
124
- id: id || name,
125
- className: innerClass,
126
- onClick: handleChange,
127
- "aria-checked": checked,
128
- ...rest,
129
- children: [
130
- checked ? /* @__PURE__ */ jsx(Check, {}) : null,
131
- indeterminate && !checked ? /* @__PURE__ */ jsx(Indeterminate, {}) : null,
132
- /* @__PURE__ */ jsx(
133
- "input",
134
- {
135
- type: "checkbox",
136
- "aria-hidden": "true",
137
- name,
138
- checked,
139
- value,
140
- onChange: handleChange,
141
- disabled: rest.disabled,
142
- style: { position: "absolute", pointerEvents: "none", top: 0, left: 0, width: 1, height: 1, opacity: 0 }
143
- }
144
- )
145
- ]
146
- }
147
- );
148
- }
149
-
150
- // src/utils/isClient.ts
151
- var isClient_default = typeof window !== "undefined" && typeof window.document !== "undefined" && typeof window.document.createElement !== "undefined";
152
-
153
- // src/hooks/useIsomorphicLayoutEffect.ts
154
- var useIsomorphicLayoutEffect_default = isClient_default ? useLayoutEffect : useEffect;
155
-
156
- // src/components/Portal/index.tsx
157
- function Portal({ children, container, disabled }) {
158
- const [mountNode, setMountNode] = useState(null);
159
- useIsomorphicLayoutEffect_default(() => {
160
- if (!container) {
161
- let dom = document.getElementById("visits-style-portals");
162
- if (!dom) {
163
- dom = document.createElement("div");
164
- dom.id = "visits-style-portals";
165
- document.body.appendChild(dom);
166
- }
167
- return setMountNode(dom);
168
- }
169
- setMountNode(container);
170
- }, [container]);
171
- if (disabled || !mountNode) return null;
172
- return createPortal(children, mountNode);
173
- }
174
-
175
- // src/utils/stopPropagation.ts
176
- function stopPropagation(e) {
177
- if (!e) return;
178
- e.stopPropagation();
179
- e.preventDefault();
180
- }
181
- var defaultTimeout = { open: 150, close: 75 };
182
- var Popover = forwardRef(({
183
- position,
184
- label,
185
- children,
186
- color = "background",
187
- disabled,
188
- offset: offset$1 = { x: 0, y: 6 },
189
- onOpen,
190
- onClose,
191
- onManualClose,
192
- timeout = defaultTimeout,
193
- unstyled,
194
- zIndex = 9996,
195
- role,
196
- ...rest
197
- }, ref) => {
198
- const [open, setOpen] = useState(false);
199
- const nodeId = useId();
200
- const openRef = useRef(onOpen);
201
- const closeRef = useRef(onClose);
202
- const { refs, floatingStyles, context } = useFloating({
203
- nodeId,
204
- placement: position,
205
- middleware: [
206
- shift(),
207
- flip({ fallbackAxisSideDirection: "end" }),
208
- offset({ mainAxis: offset$1.y, crossAxis: offset$1.x })
209
- ],
210
- open,
211
- onOpenChange: (value) => {
212
- if (value) {
213
- openRef.current?.(refs.reference.current, refs.floating.current);
214
- } else {
215
- closeRef.current?.(refs.reference.current, refs.floating.current);
216
- }
217
- setOpen(value);
218
- },
219
- whileElementsMounted: autoUpdate
220
- });
221
- const { isMounted, styles } = useTransitionStyles(context, {
222
- duration: timeout,
223
- initial({ side }) {
224
- let transform = "";
225
- if (side === "top") {
226
- transform = "translateY(5%) scale(0.95)";
227
- } else if (side === "bottom") {
228
- transform = "translateY(-5%) scale(0.95)";
229
- } else if (side === "left") {
230
- transform = "translateX(5%) scale(0.95)";
231
- } else {
232
- transform = "translateX(-5%) scale(0.95)";
233
- }
234
- return { opacity: 0, transform };
235
- }
236
- });
237
- const handleBlur = useCallback((e) => {
238
- stopPropagation(e);
239
- if (onManualClose) return onManualClose();
240
- setOpen(false);
241
- closeRef.current?.(refs.reference.current, refs.floating.current);
242
- }, [onManualClose]);
243
- useEffect(() => {
244
- if (disabled && open) return setOpen(false);
245
- }, [disabled, open]);
246
- useImperativeHandle(ref, () => ({
247
- open: () => {
248
- setOpen(true);
249
- openRef.current?.(refs.reference.current, refs.floating.current);
250
- },
251
- close: () => {
252
- setOpen(false);
253
- closeRef.current?.(refs.reference.current, refs.floating.current);
254
- }
255
- // eslint-disable-next-line react-hooks/exhaustive-deps
256
- }), []);
257
- const { getFloatingProps, getReferenceProps } = useInteractions([
258
- useClick(context, { enabled: !disabled })
259
- ]);
260
- openRef.current = onOpen;
261
- closeRef.current = onClose;
262
- return /* @__PURE__ */ jsxs(Fragment, { children: [
263
- cloneElement(Children.only(label), getReferenceProps({
264
- ref: refs.setReference,
265
- tabIndex: 0,
266
- role: "button",
267
- "aria-expanded": open,
268
- disabled,
269
- onClick: stopPropagation
270
- })),
271
- /* @__PURE__ */ jsx(Portal, { disabled: disabled || !isMounted, children: /* @__PURE__ */ jsx(FloatingOverlay, { "data-testid": "vs-popover-shadow", onClick: handleBlur, style: { zIndex }, autoFocus: true, children: /* @__PURE__ */ jsx("div", { role: role || "region", ref: refs.setFloating, style: floatingStyles, children: /* @__PURE__ */ jsx(
272
- PopoverContent,
273
- {
274
- unstyled,
275
- styles,
276
- ...getFloatingProps({ ...rest, onClick: stopPropagation }),
277
- children
278
- }
279
- ) }) }) })
280
- ] });
281
- });
282
- Popover.displayName = "Popover";
283
- var Popover_default = Popover;
284
- var PopoverContent = forwardRef(({
285
- className,
286
- unstyled,
287
- styles,
288
- style = {},
289
- ...rest
290
- }, ref) => {
291
- const popoverName = useMemo(() => clsx8(
292
- "z-20 w-auto h-auto outline-none transition-transform ease-in-out",
293
- unstyled ? null : "border border-accent rounded-md shadow-lg p-1 bg-background",
294
- className
295
- ), [className, unstyled]);
296
- return /* @__PURE__ */ jsx("div", { ref, className: popoverName, style: { ...styles, ...style }, ...rest });
297
- });
298
- PopoverContent.displayName = "PopoverContent";
299
- function ChevronDown(props) {
300
- return /* @__PURE__ */ jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [
301
- /* @__PURE__ */ jsx("path", { d: "M11.7 14.8 7 9.8a.5.5 0 0 1 0-.7c.2-.2.5-.2.7 0l4.5 5c.2.2.2.6 0 .8-.1.2-.4.2-.6 0Z", fill: "currentColor" }),
302
- /* @__PURE__ */ jsx("path", { d: "m16.9 9.9-4.6 5c-.2.2-.4.2-.6 0a.5.5 0 0 1 0-.8l4.5-5c.2-.2.5-.2.7 0 .1.2.1.6 0 .8Z", fill: "currentColor" })
303
- ] });
304
- }
305
- function Close(props) {
306
- return /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 30 30", ...props, children: /* @__PURE__ */ jsxs("g", { fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", children: [
307
- /* @__PURE__ */ jsx("path", { d: "M26 26l-12.5-12.5L26 1" }),
308
- /* @__PURE__ */ jsx("path", { d: "M1 26l12.5-12.5L1 1" })
309
- ] }) });
310
- }
311
- function Select({
312
- className,
313
- placeholder = "",
314
- options = [],
315
- error,
316
- unstyled,
317
- disabled,
318
- value,
319
- maxHeight = 408,
320
- arrow,
321
- onChange,
322
- onClear,
323
- renderItem,
324
- ...rest
325
- }) {
326
- const ref = useRef(null);
327
- const [width, setWidth] = useState(0);
328
- const btnName = useMemo(() => unstyled ? className : merge(clsx8(
329
- "flex items-center justify-between rounded-md border bg-background px-3 py-2 w-full overflow-hidden cursor-pointer",
330
- "disabled:cursor-not-allowed disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ring",
331
- error ? "border-danger hover:border-danger-fore" : "border-input not-disabled:hover:border-input-fore"
332
- ), className), [className, error, unstyled]);
333
- const isMultiple = useMemo(() => Array.isArray(value), []);
334
- const handleChange = useCallback((val) => {
335
- onChange?.(val);
336
- if (!isMultiple) ref.current?.close();
337
- }, [onChange, isMultiple]);
338
- const isSelected = useCallback((item) => {
339
- if (Array.isArray(value)) return value.indexOf(item) > -1;
340
- return value === item;
341
- }, [value]);
342
- const optionMap = useMemo(() => {
343
- const map = {};
344
- const items = options.filter((item) => typeof item !== "string");
345
- for (let i = 0, len = items.length; i < len; i += 1) {
346
- const item = items[i];
347
- map[`${item.value}`] = item.label;
348
- }
349
- return map;
350
- }, [options]);
351
- const selectedLabel = useMemo(() => {
352
- if (!value) return placeholder;
353
- if (Array.isArray(value)) {
354
- if (!value.length) return placeholder;
355
- const sorted = [...value].sort();
356
- const arr = [];
357
- for (let i = 0, len = sorted.length; i < len; i += 1) {
358
- arr[i] = optionMap[`${sorted[i]}`] || "";
359
- }
360
- return arr.filter(Boolean).join(",") || placeholder;
361
- }
362
- return optionMap[`${value}`] || placeholder;
363
- }, [placeholder, value, optionMap]);
364
- const isEmpty = selectedLabel === placeholder;
365
- const btnLabelClass = useMemo(() => clsx8(
366
- "overflow-hidden overflow-ellipsis whitespace-nowrap",
367
- isEmpty ? "text-muted" : "text-text"
368
- ), [isEmpty]);
369
- const Arrow = useMemo(() => {
370
- if (arrow) return arrow;
371
- return /* @__PURE__ */ jsx(ChevronDown, { className: "absolute right-0 text-muted size-5" });
372
- }, [arrow]);
373
- const handleRender = useCallback((item, index) => {
374
- if (renderItem) {
375
- if (typeof item === "string") {
376
- return renderItem(item, { index, selected: false, onChange: () => {
377
- } });
378
- }
379
- return renderItem(item, {
380
- index,
381
- selected: isSelected(item.value),
382
- onChange: () => handleChange(item.value)
383
- });
384
- }
385
- if (typeof item === "string") {
386
- return /* @__PURE__ */ jsx("h5", { className: "font-medium py-1 px-2 text-muted", children: item }, `optionheader-${index}`);
387
- }
388
- return /* @__PURE__ */ jsx(
389
- SelectItem,
390
- {
391
- selected: isSelected(item.value),
392
- onChange: handleChange,
393
- ...item
394
- },
395
- item.label
396
- );
397
- }, [renderItem, handleChange, isSelected]);
398
- return /* @__PURE__ */ jsx(
399
- Popover_default,
400
- {
401
- label: /* @__PURE__ */ jsxs("button", { type: "button", className: btnName, disabled, ...rest, children: [
402
- /* @__PURE__ */ jsx("span", { className: btnLabelClass, children: selectedLabel }),
403
- /* @__PURE__ */ jsxs("div", { className: "relative flex items-center pl-8 pr-3 space-x-2", children: [
404
- onClear && !isEmpty ? /* @__PURE__ */ jsx(
405
- "div",
406
- {
407
- tabIndex: -1,
408
- role: "button",
409
- className: "size-6 p-1.5 rounded hover:bg-accent",
410
- "aria-label": "clear selected values",
411
- onKeyDown: (e) => {
412
- if (e.key !== "Enter" && e.key !== "Space") return;
413
- onClear();
414
- },
415
- onClick: (e) => {
416
- e.stopPropagation();
417
- onClear();
418
- },
419
- children: /* @__PURE__ */ jsx(Close, {})
420
- }
421
- ) : null,
422
- Arrow
423
- ] })
424
- ] }),
425
- ref,
426
- onOpen: (elem) => setWidth(elem?.getBoundingClientRect().width || 0),
427
- disabled,
428
- children: /* @__PURE__ */ jsx(
429
- "ul",
430
- {
431
- className: "overflow-y-auto flex flex-col",
432
- role: "listbox",
433
- style: { minWidth: width, maxWidth: "calc(100vw - 3rem)", maxHeight },
434
- children: options.map(handleRender)
435
- }
436
- )
437
- }
438
- );
439
- }
440
- function SelectItem({ className, value, label, selected, onChange }) {
441
- const name = useMemo(() => clsx8(
442
- "flex items-center w-full hover:bg-accent rounded p-1",
443
- className
444
- ), [className]);
445
- return /* @__PURE__ */ jsxs(
446
- "button",
447
- {
448
- type: "button",
449
- role: "option",
450
- className: name,
451
- "aria-selected": selected,
452
- onClick: () => onChange?.(value),
453
- children: [
454
- selected ? /* @__PURE__ */ jsx(Check, { className: "w-5 h-5 mr-1" }) : /* @__PURE__ */ jsx("div", { className: "w-5 h-1 mr-1" }),
455
- label
456
- ]
457
- }
458
- );
459
- }
460
- function Radio({ checked, className, id, name, onChange, value, ...rest }) {
461
- const innerClass = useMemo(() => clsx8(
462
- "relative inline-flex justify-center items-center border border-input w-4.5 h-4.5 rounded-full",
463
- "cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed not-disabled:hover:border-input-fore",
464
- checked ? "[&_i]:bg-primary disabled:[&_i]:bg-text disabled:border-input" : "",
465
- className
466
- ), [className, checked]);
467
- const handleChange = () => {
468
- if (rest.disabled) return;
469
- onChange?.(!checked);
470
- };
471
- return /* @__PURE__ */ jsxs(
472
- "button",
473
- {
474
- type: "button",
475
- role: "radio",
476
- id: id || name,
477
- className: innerClass,
478
- onClick: handleChange,
479
- "aria-checked": checked,
480
- ...rest,
481
- children: [
482
- /* @__PURE__ */ jsx(
483
- "i",
484
- {
485
- className: "block w-2.5 h-2.5 rounded-full transition-transform",
486
- style: { transform: checked ? "" : "scale(0.8)", opacity: checked ? 1 : 0 }
487
- }
488
- ),
489
- /* @__PURE__ */ jsx(
490
- "input",
491
- {
492
- type: "radio",
493
- "aria-hidden": "true",
494
- name,
495
- checked,
496
- value,
497
- onChange: handleChange,
498
- disabled: rest.disabled,
499
- style: { position: "absolute", pointerEvents: "none", top: 0, left: 0, width: 1, height: 1, opacity: 0 }
500
- }
501
- )
502
- ]
503
- }
504
- );
505
- }
506
- var Switch = forwardRef(({
507
- className,
508
- checked,
509
- onChange,
510
- value,
511
- id,
512
- name,
513
- ...rest
514
- }, ref) => {
515
- const buttonName = useMemo(() => merge(clsx8(
516
- "inline-flex shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors",
517
- "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50",
518
- "w-11",
519
- checked ? "bg-primary" : "bg-input"
520
- ), className), [className, checked]);
521
- const pointerName = useMemo(() => merge(
522
- "pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform",
523
- className
524
- ), [className]);
525
- const handleChange = () => {
526
- if (rest.disabled) return;
527
- onChange?.(!checked);
528
- };
529
- return /* @__PURE__ */ jsxs(
530
- "button",
531
- {
532
- type: "button",
533
- role: "switch",
534
- id: id || name,
535
- className: buttonName,
536
- onClick: handleChange,
537
- "aria-checked": checked,
538
- ...rest,
539
- children: [
540
- /* @__PURE__ */ jsx("span", { className: pointerName, style: { transform: checked ? "translateX(100%)" : "" } }),
541
- /* @__PURE__ */ jsx(
542
- "input",
543
- {
544
- ref,
545
- type: "checkbox",
546
- "aria-hidden": "true",
547
- name,
548
- checked,
549
- value,
550
- onChange: handleChange,
551
- disabled: rest.disabled,
552
- style: { position: "absolute", pointerEvents: "none", top: 0, left: 0, width: 1, height: 1, opacity: 0 }
553
- }
554
- )
555
- ]
556
- }
557
- );
558
- });
559
- Switch.displayName = "Switch";
560
- var Switch_default = Switch;
561
- function Accordion({ header, show, children, timeout = 300, ...rest }) {
562
- const ref = useRef(null);
563
- const prevHeight = useRef(0);
564
- const timeoutRef = useRef(0);
565
- const init = useRef(true);
566
- useEffect(() => {
567
- timeoutRef.current = timeout;
568
- }, [timeout]);
569
- useIsomorphicLayoutEffect_default(() => {
570
- if (!ref.current) return;
571
- ref.current.style.overflow = "hidden";
572
- ref.current.style.opacity = "1";
573
- if (init.current) {
574
- init.current = false;
575
- ref.current.style.height = show ? "auto" : "0px";
576
- if (show) {
577
- window.requestAnimationFrame(() => {
578
- if (!ref.current) return;
579
- prevHeight.current = ref.current.offsetHeight;
580
- });
581
- } else {
582
- window.requestAnimationFrame(() => {
583
- if (!ref.current) return;
584
- ref.current.style.height = "auto";
585
- prevHeight.current = ref.current.offsetHeight;
586
- ref.current.style.height = "0px";
587
- });
588
- ref.current.style.opacity = "0";
589
- }
590
- return;
591
- }
592
- if (!show) {
593
- ref.current.style.height = `${prevHeight.current}px`;
594
- }
595
- const frameIds = [];
596
- frameIds[0] = window.requestAnimationFrame(() => {
597
- frameIds[1] = window.requestAnimationFrame(() => {
598
- if (!ref.current) return;
599
- ref.current.style.height = `${show ? prevHeight.current : 0}px`;
600
- ref.current.style.opacity = show ? "1" : "0";
601
- });
602
- });
603
- let timeoutId;
604
- const timeoutCallback = () => {
605
- if (!ref.current) return;
606
- if (show) {
607
- ref.current.style.height = "auto";
608
- ref.current.style.overflow = "";
609
- ref.current.style.opacity = "";
610
- window.requestAnimationFrame(() => {
611
- if (ref.current) {
612
- prevHeight.current = ref.current.offsetHeight;
613
- }
614
- });
615
- } else {
616
- ref.current.style.height = "0px";
617
- }
618
- };
619
- if (timeoutRef.current === 0) {
620
- timeoutCallback();
621
- } else {
622
- timeoutId = window.setTimeout(timeoutCallback, timeoutRef.current);
623
- }
624
- return () => {
625
- frameIds.forEach(window.cancelAnimationFrame);
626
- if (timeoutId) window.clearTimeout(timeoutId);
627
- };
628
- }, [show]);
629
- return /* @__PURE__ */ jsxs("div", { ...rest, children: [
630
- header,
631
- /* @__PURE__ */ jsx(
632
- "div",
633
- {
634
- className: "transition-all ease-in-out overflow-hidden",
635
- role: "region",
636
- "aria-hidden": !show,
637
- ref,
638
- style: { transitionDuration: `${timeout}ms` },
639
- children
640
- }
641
- )
642
- ] });
643
- }
644
- var Tooltip = forwardRef(({
645
- children,
646
- position = "bottom",
647
- label,
648
- className,
649
- timeout = 150,
650
- offset: offset$1 = { x: 0, y: 6 },
651
- clientPoint = false,
652
- disabled
653
- }, ref) => {
654
- const [open, setOpen] = useState(false);
655
- const nodeId = useId();
656
- const { refs, floatingStyles, context } = useFloating({
657
- nodeId,
658
- open,
659
- placement: position,
660
- middleware: [
661
- shift(),
662
- flip(),
663
- offset({ mainAxis: offset$1.y, crossAxis: offset$1.x })
664
- ],
665
- whileElementsMounted: disabled ? undefined : autoUpdate,
666
- onOpenChange: setOpen
667
- });
668
- const { getReferenceProps, getFloatingProps } = useInteractions([
669
- useHover(context, { enabled: !disabled }),
670
- useClientPoint(context, { enabled: clientPoint })
671
- ]);
672
- const { isMounted, styles } = useTransitionStyles(context, {
673
- duration: timeout,
674
- initial: { opacity: 0, transform: "scale(0.8)" }
675
- });
676
- useImperativeHandle(ref, () => ({
677
- floating: refs.floating,
678
- reference: refs.reference,
679
- open: () => setOpen(true),
680
- close: () => setOpen(false)
681
- }));
682
- const child = typeof children === "string" ? /* @__PURE__ */ jsx("span", { children }) : children;
683
- return /* @__PURE__ */ jsxs(Fragment, { children: [
684
- cloneElement(Children.only(child), {
685
- ref: refs.setReference,
686
- ...getReferenceProps()
687
- }),
688
- /* @__PURE__ */ jsx(Portal, { disabled: disabled || !isMounted, children: /* @__PURE__ */ jsx("div", { role: "tooltip", className: "z-[9999]", ref: refs.setFloating, ...getFloatingProps({ style: floatingStyles }), children: /* @__PURE__ */ jsx(TooltipContent, { className, style: styles, children: label }) }) })
689
- ] });
690
- });
691
- var Tooltip_default = Tooltip;
692
- var TooltipContent = forwardRef(({
693
- className,
694
- custom,
695
- ...rest
696
- }, ref) => {
697
- const tooltipName = useMemo(() => clsx8(
698
- "relative w-auto h-auto outline-none transition-transform ease-in-out whitespace-pre",
699
- custom ? null : "border border-accent rounded shadow-md px-3 py-1 bg-background",
700
- className
701
- ), [className, custom]);
702
- return /* @__PURE__ */ jsx("div", { ref, className: tooltipName, ...rest });
703
- });
704
- function varientButton({ variant, size }) {
705
- return clsx8(
706
- "inline-flex items-center justify-center whitespace-nowrap transition-colors rounded-md cursor-pointer",
707
- "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
708
- "disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-auto",
709
- {
710
- "bg-primary text-inverted hover:bg-primary-fore": !variant || variant === "primary",
711
- "bg-info text-inverted hover:bg-info-fore": variant === "info",
712
- "bg-warn text-inverted hover:bg-warn-fore": variant === "warn",
713
- "bg-danger text-inverted hover:bg-danger-fore": variant === "danger",
714
- "hover:bg-accent": variant === "ghost",
715
- "hover:underline": variant === "link",
716
- "border border-input hover:bg-accent": variant === "outline"
717
- },
718
- {
719
- "px-2 py-1": !size,
720
- "p-1.5": size === "icon"
721
- }
722
- );
723
- }
724
- function Button({ size, variant, className, ...rest }) {
725
- const buttonClass = useMemo(() => clsx8(varientButton({ size, variant }), className), [size, variant, className]);
726
- return /* @__PURE__ */ jsx("button", { className: buttonClass, type: "button", ...rest });
727
- }
728
- function Dialog({
729
- open,
730
- children,
731
- timeout = 150,
732
- padding = "0.85rem",
733
- verticalAlign = "center",
734
- closeOnOverlay,
735
- closeOnEsc,
736
- onExited,
737
- className,
738
- onOpenChange,
739
- size,
740
- ...rest
741
- }) {
742
- const exitRef = useRef(onExited);
743
- const isTransMountedRef = useRef(false);
744
- const nodeId = useId();
745
- const { refs, context } = useFloating({ open, onOpenChange, nodeId });
746
- const { getFloatingProps } = useInteractions([
747
- useDismiss(context, {
748
- enabled: closeOnEsc,
749
- escapeKey: closeOnEsc,
750
- outsidePress: false
751
- })
752
- ]);
753
- const { isMounted, styles } = useTransitionStyles(context, {
754
- duration: timeout,
755
- initial: { opacity: 0, transform: "scale(0.8)" }
756
- });
757
- useEffect(() => {
758
- if (isTransMountedRef.current === isMounted) return;
759
- isTransMountedRef.current = isMounted;
760
- if (isMounted) return;
761
- exitRef.current?.();
762
- }, [isMounted]);
763
- const handleOverlayClose = useCallback(() => {
764
- if (!closeOnOverlay) return;
765
- onOpenChange?.(false);
766
- }, [onOpenChange, closeOnOverlay]);
767
- exitRef.current = onExited;
768
- const overlayClass = useMemo(() => clsx8("grid bg-backdrop z-40 justify-items-center", {
769
- "place-items-start items-start": verticalAlign === "start",
770
- "place-items-end": verticalAlign === "end",
771
- "place-items-center": verticalAlign === "center" || !verticalAlign
772
- }), [verticalAlign]);
773
- const dialogClass = useMemo(() => merge("transition ease-in-out", className), [className]);
774
- return /* @__PURE__ */ jsx(Portal, { disabled: !isMounted, children: /* @__PURE__ */ jsx(
775
- FloatingOverlay,
776
- {
777
- className: overlayClass,
778
- "data-testid": "vs-dialog-overlay",
779
- onClick: handleOverlayClose,
780
- style: { padding, opacity: styles.opacity },
781
- lockScroll: true,
782
- children: /* @__PURE__ */ jsx(
783
- DialogContent,
784
- {
785
- ref: refs.setFloating,
786
- className: dialogClass,
787
- role: "dialog",
788
- size,
789
- ...getFloatingProps({ ...rest, style: styles, onClick: stopPropagation }),
790
- children
791
- }
792
- )
793
- }
794
- ) });
795
- }
796
- var DialogContent = forwardRef(({
797
- size,
798
- className,
799
- ...rest
800
- }, ref) => {
801
- const dialogClass = useMemo(() => clsx8(
802
- size ? "flex flex-col bg-background shadow-lg p-5 rounded" : null,
803
- {
804
- "w-full max-w-sm": size === "small",
805
- "w-full max-w-lg": size === "medium",
806
- "w-full max-w-2xl": size === "large"
807
- },
808
- className
809
- ), [size, className]);
810
- return /* @__PURE__ */ jsx("div", { ref, className: dialogClass, ...rest });
811
- });
812
- DialogContent.displayName = "DialogContent";
813
- var defaultTimeout2 = { open: 300, close: 150 };
814
- function Sheet({ open, timeout = defaultTimeout2, onOpenChange, position = "right", overlay, ...rest }) {
815
- const nodeId = useId();
816
- const { refs, context } = useFloating({ open, onOpenChange, nodeId });
817
- const { isMounted, styles } = useTransitionStyles(context, {
818
- duration: timeout,
819
- initial() {
820
- let transform = "translateX(75%)";
821
- if (position === "left") {
822
- transform = "translateX(-75%)";
823
- } else if (position === "top") {
824
- transform = "translateY(-75%)";
825
- } else if (position === "bottom") {
826
- transform = "translateY(75%)";
827
- }
828
- return { opacity: 0, transform };
829
- }
830
- });
831
- const name = useMemo(() => clsx8(
832
- "fixed transition-transform z-30",
833
- {
834
- "top-0 right-0 h-full max-h-screen": position === "right",
835
- "top-0 left-0 h-full max-h-screen": position === "left",
836
- "top-0 left-0 right-0 w-full max-w-screen": position === "top",
837
- "bottom-0 left-0 right-0 w-full max-w-screen": position === "bottom"
838
- }
839
- ), [position]);
840
- return /* @__PURE__ */ jsxs(Portal, { disabled: !isMounted, children: [
841
- overlay ? /* @__PURE__ */ jsx(
842
- FloatingOverlay,
843
- {
844
- className: "bg-backdrop",
845
- style: { opacity: styles.opacity },
846
- onClick: () => onOpenChange?.(false)
847
- }
848
- ) : null,
849
- /* @__PURE__ */ jsx(
850
- "div",
851
- {
852
- ref: refs.setFloating,
853
- className: name,
854
- role: "dialog",
855
- style: styles,
856
- children: /* @__PURE__ */ jsx(SheetContent, { ...rest })
857
- }
858
- )
859
- ] });
860
- }
861
- function SheetContent({ className, unstyled, ...rest }) {
862
- const name = useMemo(() => unstyled ? className : merge(clsx8(
863
- "relative bg-background min-w-full min-h-full border border-input shadow-lg"
864
- ), className), [unstyled, className]);
865
- return /* @__PURE__ */ jsx("div", { className: name, ...rest });
866
- }
867
- function Approved(props) {
868
- return /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "30", height: "30", viewBox: "0 0 30 30", ...props, children: [
869
- /* @__PURE__ */ jsx("path", { d: "M15 29a14 14 0 0 1-9.9-4.1A14 14 0 0 1 1 15a14 14 0 0 1 4.1-9.9A14 14 0 0 1 15 1a14 14 0 0 1 9.9 4.1A14 14 0 0 1 29 15a14 14 0 0 1-4.1 9.9A14 14 0 0 1 15 29z", fill: "none" }),
870
- /* @__PURE__ */ jsx("path", { d: "M15 2a13 13 0 0 0-9.2 3.8A13 13 0 0 0 2 15a13 13 0 0 0 3.8 9.2A13 13 0 0 0 15 28a13 13 0 0 0 9.2-3.8A13 13 0 0 0 28 15a13 13 0 0 0-3.8-9.2A13 13 0 0 0 15 2m0-2a15 15 0 1 1 0 30 15 15 0 0 1 0-30z", fill: "currentColor" }),
871
- /* @__PURE__ */ jsx("path", { d: "m11.5 18.5-3.9-4L6 16l5.6 5.6L23.2 10l-1.7-1.6z", fill: "currentColor" })
872
- ] });
873
- }
874
- function Alert(props) {
875
- return /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "30", height: "30", viewBox: "0 0 32 32", ...props, children: [
876
- /* @__PURE__ */ jsx("path", { d: "M16 0C7.16 0 0 7.16 0 16C0 24.84 7.16 32 16 32C24.84 32 32 24.84 32 16C32 7.16 24.84 0 16 0ZM16 31C7.73 31 1 24.27 1 16C1 7.73 7.73 1 16 1C24.27 1 31 7.73 31 16C31 24.27 24.27 31 16 31Z", fill: "currentColor" }),
877
- /* @__PURE__ */ jsx("path", { d: "M15.5 19.55V8.54999C15.5 8.26999 15.72 8.04999 16 8.04999C16.28 8.04999 16.5 8.26999 16.5 8.54999V19.55C16.5 19.83 16.28 20.05 16 20.05C15.72 20.05 15.5 19.83 15.5 19.55Z", fill: "currentColor" }),
878
- /* @__PURE__ */ jsx("path", { d: "M16 23.95C16.5523 23.95 17 23.5023 17 22.95C17 22.3977 16.5523 21.95 16 21.95C15.4477 21.95 15 22.3977 15 22.95C15 23.5023 15.4477 23.95 16 23.95Z", fill: "currentColor" })
879
- ] });
880
- }
881
- function Caution(props) {
882
- return /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "30", height: "30", viewBox: "0 0 52 45", ...props, children: /* @__PURE__ */ jsx("path", { d: "M50.6 37.8 29.3 2c-1.5-2.6-5.1-2.8-6.7-.3l-21.2 36c-1.7 2.6.2 6.6 3.4 6.6h42.4c3.1 0 5-4 3.4-6.6Zm-24.7.6a2.7 2.7 0 1 1 0-5.5 2.7 2.7 0 0 1 0 5.5Zm2.9-10.1c0 1.5-1.3 2.7-2.8 2.7a2.8 2.8 0 0 1-2.8-2.7V13.9c0-1.5 1.3-2.7 2.8-2.7 1.5 0 2.8 1.2 2.8 2.7v14.4Z", fill: "currentColor" }) });
883
- }
884
- function Spinner({ size = 20, label = "Loading...", ...rest }) {
885
- return /* @__PURE__ */ jsxs("div", { role: "status", ...rest, children: [
886
- /* @__PURE__ */ jsxs("svg", { "aria-hidden": "true", className: "text-accent animate-spin fill-primary", width: size, height: size, viewBox: "0 0 100 101", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
887
- /* @__PURE__ */ jsx("path", { d: "M100 50.6a50 50 0 1 1-100 0 50 50 0 0 1 100 0Zm-91 0a41 41 0 1 0 82 0 41 41 0 0 0-82 0Z", fill: "currentColor" }),
888
- /* @__PURE__ */ jsx("path", { d: "M94 39a4.2 4.2 0 0 0 3-5.4A50 50 0 0 0 41.7 1.3c-2.4.4-3.9 2.9-3.2 5.3a5 5 0 0 0 5.6 3.5A41 41 0 0 1 88 36 5 5 0 0 0 94 39Z", fill: "currentFill" })
889
- ] }),
890
- /* @__PURE__ */ jsx("span", { className: "sr-only", children: label })
891
- ] });
892
- }
893
- function ToastItem({ type, label, message }) {
894
- return /* @__PURE__ */ jsxs("div", { className: "flex items-center px-4 py-3 w-80 text-sm bg-background border border-input rounded-lg shadow-md m-2", children: [
895
- type ? /* @__PURE__ */ jsxs("figure", { className: "mr-2", children: [
896
- type === "success" ? /* @__PURE__ */ jsx(Approved, { className: "text-primary size-5" }) : null,
897
- type === "info" ? /* @__PURE__ */ jsx(Alert, { className: "text-info size-5" }) : null,
898
- type === "error" ? /* @__PURE__ */ jsx(Alert, { className: "text-danger size-5" }) : null,
899
- type === "warn" ? /* @__PURE__ */ jsx(Caution, { className: "text-warn size-5" }) : null,
900
- type === "loading" ? /* @__PURE__ */ jsx(Spinner, { size: 20 }) : null
901
- ] }) : null,
902
- /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
903
- /* @__PURE__ */ jsx("p", { className: "font-medium leading-none", children: label }),
904
- message ? /* @__PURE__ */ jsx("p", { children: message }) : null
905
- ] })
906
- ] });
907
- }
908
-
909
- // src/components/Toast/observer.ts
910
- function noop() {
911
- }
912
- var ToastObserver = class {
913
- /** システムで1つしか存在しない前提とする */
914
- notify = noop;
915
- lastId = 0;
916
- /** internal use only */
917
- subscribe = (callback) => {
918
- this.notify = callback;
919
- return () => {
920
- this.notify = noop;
921
- };
922
- };
923
- add = (label, config = {}) => {
924
- this.lastId += 1;
925
- const id = `${this.lastId}`;
926
- this.notify({ id, type: "add", config: { id, label, ...config } });
927
- return id;
928
- };
929
- /** 表示中のtoastを修正します。promiseのロード状態を表示することなどに使います */
930
- update = (id, config) => {
931
- this.notify({ id, type: "update", config });
932
- };
933
- remove = (id) => {
934
- this.notify({ id, type: "remove" });
935
- };
936
- clear = () => {
937
- this.lastId = 0;
938
- };
939
- };
940
- var observer = new ToastObserver();
941
- var observer_default = observer;
942
- function ToastContainer({
943
- id,
944
- type,
945
- index,
946
- duration,
947
- className,
948
- children,
949
- inverted,
950
- timeout = 250,
951
- max = 3
952
- }) {
953
- const isPrevMountedRef = useRef(false);
954
- const [open, setOpen] = useState(false);
955
- const { context, refs } = useFloating({ open, onOpenChange: setOpen, nodeId: id });
956
- const { isMounted, styles } = useTransitionStyles(context, {
957
- duration: timeout,
958
- initial: { opacity: 0, transform: `translateY(${inverted ? "" : "-"}50%)` }
959
- });
960
- useLayoutEffect(() => {
961
- setOpen(index <= max);
962
- }, [index, max]);
963
- useEffect(() => {
964
- if (isPrevMountedRef.current === isMounted) return;
965
- if (!isMounted) {
966
- observer_default.remove(id);
967
- }
968
- isPrevMountedRef.current = isMounted;
969
- }, [isMounted, id]);
970
- useEffect(() => {
971
- if (!duration) return;
972
- const tId = window.setTimeout(() => setOpen(false), duration);
973
- return () => window.clearTimeout(tId);
974
- }, [duration, id]);
975
- const handleClose = useCallback(() => {
976
- if (type === "loading") return;
977
- setOpen(false);
978
- }, [type]);
979
- const name = useMemo(() => clsx8(
980
- "relative flex w-fit transition-transform ease-in-out cursor-pointer",
981
- className
982
- ), [className]);
983
- if (!isMounted) return null;
984
- return /* @__PURE__ */ jsx(
985
- "li",
986
- {
987
- role: "log",
988
- tabIndex: -1,
989
- ref: refs.setFloating,
990
- className: name,
991
- style: styles,
992
- onClick: handleClose,
993
- children
994
- }
995
- );
996
- }
997
- function Toast({
998
- className,
999
- margin = 16,
1000
- position = "top-left",
1001
- max,
1002
- ListItem = ToastItem
1003
- }) {
1004
- const style = useMemo(() => {
1005
- const base = { position: "fixed" };
1006
- if (position.indexOf("top") > -1) {
1007
- base.top = margin;
1008
- } else if (position.indexOf("bottom") > -1) {
1009
- base.bottom = margin;
1010
- }
1011
- if (position.indexOf("left") > -1) {
1012
- base.left = margin;
1013
- base.alignItems = "flex-start";
1014
- } else if (position.indexOf("right") > -1) {
1015
- base.right = margin;
1016
- base.alignItems = "flex-end";
1017
- } else {
1018
- base.left = "50%";
1019
- base.alignItems = "center";
1020
- base.transform = "translateX(-50%)";
1021
- }
1022
- return base;
1023
- }, [margin, position]);
1024
- const name = useMemo(() => clsx8(
1025
- "flex flex-col z-40 overflow-hidden",
1026
- className
1027
- ), [className]);
1028
- const isInvertedOrder = useMemo(() => position?.startsWith("bottom") || false, [position]);
1029
- const data = useRef(/* @__PURE__ */ new Map());
1030
- const [order, setOrder] = useState([]);
1031
- const update = useState(0)[1];
1032
- useIsomorphicLayoutEffect_default(() => observer_default.subscribe((payload) => {
1033
- startTransition(() => {
1034
- if (payload.type === "add") {
1035
- data.current.set(payload.id, payload.config);
1036
- setOrder((prev) => [...prev, payload.id]);
1037
- } else if (payload.type === "remove") {
1038
- const isDeleted = data.current.delete(payload.id);
1039
- if (!isDeleted) return;
1040
- setOrder((prev) => {
1041
- const next = new Set(prev);
1042
- if (!next.has(payload.id)) return prev;
1043
- next.delete(payload.id);
1044
- return Array.from(next);
1045
- });
1046
- } else if (payload.type === "update") {
1047
- const d = data.current.get(payload.id);
1048
- if (!d) return;
1049
- data.current.set(payload.id, { ...d, ...payload.config });
1050
- update((prev) => prev + 1);
1051
- }
1052
- });
1053
- }), []);
1054
- const size = order.length;
1055
- return /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx("ol", { className: name, style, "aria-live": "polite", children: order.map((id, i) => {
1056
- const item = data.current.get(id);
1057
- if (!item) return null;
1058
- const { className: innerClass, duration, ...props } = item;
1059
- return /* @__PURE__ */ jsx(
1060
- ToastContainer,
1061
- {
1062
- id,
1063
- index: size - i,
1064
- className: innerClass,
1065
- duration,
1066
- inverted: isInvertedOrder,
1067
- max,
1068
- children: createElement(ListItem, props)
1069
- },
1070
- id
1071
- );
1072
- }) }) });
1073
- }
1074
- function Skeleton({ className, ...props }) {
1075
- const name = useMemo(() => merge(
1076
- "inline-block animate-pulse rounded-md bg-accent",
1077
- className
1078
- ), [className]);
1079
- return /* @__PURE__ */ jsx("span", { className: name, ...props });
1080
- }
1081
- function ButtonGroup({ className, ...rest }) {
1082
- const name = useMemo(() => clsx8(
1083
- "flex items-center justify-center",
1084
- "[&_button]:rounded-none [&_:first-child]:rounded-bl [&_:first-child]:rounded-tl [&_:last-child]:rounded-br [&_:last-child]:rounded-tr",
1085
- "[&_:first-child]:border-r-0 [&_:last-child]:border-l-0",
1086
- className
1087
- ), [className]);
1088
- return /* @__PURE__ */ jsx("div", { role: "group", className: name, ...rest });
1089
- }
1090
- function Progress({ value, max, className, ...rest }) {
1091
- const percent = useMemo(() => value ? Math.round(value / max * 100) : 0, [value, max]);
1092
- const name = useMemo(() => merge("relative overflow-hidden rounded-full bg-primary", className), [className]);
1093
- return /* @__PURE__ */ jsx("div", { role: "progressbar", className: name, "aria-valuemax": max, "aria-valuemin": 0, ...rest, children: /* @__PURE__ */ jsx(
1094
- "div",
1095
- {
1096
- className: "h-full w-full flex-1 bg-input transition-all origin-right",
1097
- style: { transform: `translateX(${percent > 100 ? 100 : percent}%)` }
1098
- }
1099
- ) });
1100
- }
1101
- function Divider({ className, orientation = "horizontal", ...props }) {
1102
- const name = useMemo(() => merge(clsx8(
1103
- "border-0 p-0 shrink-0 bg-input",
1104
- orientation === "horizontal" ? "h-[1px] w-full" : "w-[1px] h-full"
1105
- ), className), [className, orientation]);
1106
- return /* @__PURE__ */ jsx("hr", { className: name, role: "none", ...props });
1107
- }
1108
- function IconChevronRound(props) {
1109
- return /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "30", height: "30", viewBox: "0 0 30 30", ...props, children: [
1110
- /* @__PURE__ */ jsxs("g", { fill: "none", children: [
1111
- /* @__PURE__ */ jsx("path", { d: "M15 29c-3.74 0-7.255-1.456-9.9-4.1A13.908 13.908 0 011 15c0-3.74 1.456-7.255 4.1-9.9A13.908 13.908 0 0115 1c3.74 0 7.255 1.456 9.9 4.1A13.908 13.908 0 0129 15c0 3.74-1.456 7.255-4.1 9.9A13.908 13.908 0 0115 29z" }),
1112
- /* @__PURE__ */ jsx(
1113
- "path",
1114
- {
1115
- d: "M15 2a12.915 12.915 0 00-9.192 3.808A12.915 12.915 0 002 15c0 3.472 1.352 6.737 3.808 9.192A12.915 12.915 0 0015 28c3.472 0 6.737-1.352 9.192-3.808A12.915 12.915 0 0028 15c0-3.472-1.352-6.737-3.808-9.192A12.915 12.915 0 0015 2m0-2c8.284 0 15 6.716 15 15 0 8.284-6.716 15-15 15-8.284 0-15-6.716-15-15C0 6.716 6.716 0 15 0z",
1116
- fill: "currentColor"
1117
- }
1118
- )
1119
- ] }),
1120
- /* @__PURE__ */ jsx(
1121
- "path",
1122
- {
1123
- d: "M18.066 8.5l-7.567 6.731 7.567 6.2",
1124
- fill: "none",
1125
- stroke: "currentColor",
1126
- strokeWidth: "2"
1127
- }
1128
- )
1129
- ] });
1130
- }
1131
- function FileRound(props) {
1132
- return /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "30", height: "30", viewBox: "0 0 30 30", ...props, children: [
1133
- /* @__PURE__ */ jsxs("g", { fill: "none", children: [
1134
- /* @__PURE__ */ jsx("path", { d: "M15 29c-3.74 0-7.255-1.456-9.9-4.1A13.908 13.908 0 011 15c0-3.74 1.456-7.255 4.1-9.9A13.908 13.908 0 0115 1c3.74 0 7.255 1.456 9.9 4.1A13.908 13.908 0 0129 15c0 3.74-1.456 7.255-4.1 9.9A13.908 13.908 0 0115 29z" }),
1135
- /* @__PURE__ */ jsx(
1136
- "path",
1137
- {
1138
- d: "M15 2a12.915 12.915 0 00-9.192 3.808A12.915 12.915 0 002 15c0 3.472 1.352 6.737 3.808 9.192A12.915 12.915 0 0015 28c3.472 0 6.737-1.352 9.192-3.808A12.915 12.915 0 0028 15c0-3.472-1.352-6.737-3.808-9.192A12.915 12.915 0 0015 2m0-2c8.284 0 15 6.716 15 15 0 8.284-6.716 15-15 15-8.284 0-15-6.716-15-15C0 6.716 6.716 0 15 0z",
1139
- fill: "currentColor"
1140
- }
1141
- )
1142
- ] }),
1143
- /* @__PURE__ */ jsxs("g", { transform: "translate(9 7)", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
1144
- /* @__PURE__ */ jsx("rect", { width: "12", height: "16", rx: "1", stroke: "none" }),
1145
- /* @__PURE__ */ jsx("path", { d: "M1 1h10v14H1z" })
1146
- ] }),
1147
- /* @__PURE__ */ jsx(
1148
- "path",
1149
- {
1150
- fill: "currentColor",
1151
- d: "M13 11h4v1.3h-4zM13 14h4v1.3h-4zM13 17h4v1.3h-4z"
1152
- }
1153
- )
1154
- ] });
1155
- }
1156
- function Pencil(props) {
1157
- return /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "17.796", height: "17.908", viewBox: "0 0 17.796 17.908", ...props, children: /* @__PURE__ */ jsx(
1158
- "path",
1159
- {
1160
- d: "M1.254 12.674L.5 17.408l4.726-.8L17.3 4.472 13.281.5zM1.375 12.766l3.851 3.838M10.949 2.959l3.836 3.801",
1161
- fill: "none",
1162
- stroke: "currentColor"
1163
- }
1164
- ) });
1165
- }
1166
- function User(props) {
1167
- return /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "30", height: "30", viewBox: "0 0 30 30", ...props, children: [
1168
- /* @__PURE__ */ jsxs("g", { fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
1169
- /* @__PURE__ */ jsx("circle", { cx: "15", cy: "15", r: "15", stroke: "none" }),
1170
- /* @__PURE__ */ jsx("circle", { cx: "15", cy: "15", r: "14" })
1171
- ] }),
1172
- /* @__PURE__ */ jsx(
1173
- "path",
1174
- {
1175
- d: "M8 23a6.018 6.018 0 016-6h2a6.018 6.018 0 016 6zm2.6-2h8.9a4.033 4.033 0 00-3.5-2h-1.9a4.035 4.035 0 00-3.5 2zm.4-9v-1a4.012 4.012 0 014-4 4.012 4.012 0 014 4v1a4.012 4.012 0 01-4 4 4.012 4.012 0 01-4-4zm2-1v1a2.006 2.006 0 002 2 2.006 2.006 0 002-2v-1a2.006 2.006 0 00-2-2 2.006 2.006 0 00-2 2z",
1176
- fill: "currentColor"
1177
- }
1178
- )
1179
- ] });
1180
- }
1181
- function Refresh(props) {
1182
- return /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "30", height: "30", viewBox: "0 0 30 30", ...props, children: /* @__PURE__ */ jsx(
1183
- "path",
1184
- {
1185
- d: "M15.065 0A15.069 15.069 0 00.142 13.105a1.256 1.256 0 102.478.406c0-.027.008-.055.01-.082a12.52 12.52 0 0121.3-7.226l-2.584 2.584 7.532 1.255-1.255-7.532-1.92 1.92A15 15 0 0015.065 0zm13.7 15.589A1.255 1.255 0 0027.5 16.7a12.512 12.512 0 01-21.893 6.569l1.927-1.927L0 20.086l1.255 7.532 2.572-2.572a15.02 15.02 0 0026.16-8.023 1.256 1.256 0 00-1.064-1.423 1.273 1.273 0 00-.16-.011z",
1186
- fill: "currentColor"
1187
- }
1188
- ) });
1189
- }
1190
- function Plus(props) {
1191
- return /* @__PURE__ */ jsxs("svg", { width: "30", height: "30", viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [
1192
- /* @__PURE__ */ jsx("rect", { x: "16.5", y: "9", width: "14", height: "1", rx: ".5", transform: "rotate(90 16.5 9)", fill: "currentColor" }),
1193
- /* @__PURE__ */ jsx("rect", { x: "9", y: "15.5", width: "14", height: "1", rx: ".5", fill: "currentColor" })
1194
- ] });
1195
- }
1196
-
1197
- export { Accordion, Button, ButtonGroup, Checkbox, Dialog, Divider, Field as FormField, FormLabel, Alert as IconAlert, Approved as IconApproved, ChevronDown as IconArrowDown, Caution as IconCaution, Check as IconCheck, IconChevronRound, Close as IconClose, FileRound as IconFileRound, Pencil as IconPencil, Plus as IconPlus, Refresh as IconRefresh, User as IconUser, Input_default as Input, InputField, Skeleton as Placeholder, Popover_default as Popover, Portal, Progress, Radio, Select, Sheet, Spinner, Switch_default as Switch, Textarea_default as Textarea, Toast, ToastItem, Tooltip_default as Tooltip, merge, observer_default as toast };
1198
- //# sourceMappingURL=index.esm.js.map
1199
- //# sourceMappingURL=index.esm.js.map