@komensal/ui 0.7.0 → 0.8.0
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.d.ts +94 -120
- package/dist/index.js +183 -342
- package/dist/index.js.map +1 -1
- package/dist/locales/index.d.ts +0 -3
- package/dist/locales/index.js +0 -3
- package/dist/locales/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -31,7 +31,7 @@ var inputFocus = cn(
|
|
|
31
31
|
var emitToast = null;
|
|
32
32
|
var toast = {
|
|
33
33
|
error(options) {
|
|
34
|
-
emit("
|
|
34
|
+
emit("destructive", options);
|
|
35
35
|
},
|
|
36
36
|
info(options) {
|
|
37
37
|
emit("info", options);
|
|
@@ -61,20 +61,20 @@ function emit(type, options) {
|
|
|
61
61
|
// src/components/alert.tsx
|
|
62
62
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
63
63
|
var variantStyles = {
|
|
64
|
-
|
|
64
|
+
destructive: { container: "bg-destructive-subtle text-destructive", icon: "text-destructive" },
|
|
65
65
|
info: { container: "bg-info-subtle text-info", icon: "text-info" },
|
|
66
66
|
success: { container: "bg-success-subtle text-success", icon: "text-success" },
|
|
67
67
|
warning: { container: "bg-warning-subtle text-warning", icon: "text-warning" }
|
|
68
68
|
};
|
|
69
69
|
var variantIcons = {
|
|
70
|
-
|
|
70
|
+
destructive: WarningCircleIcon,
|
|
71
71
|
info: InfoIcon,
|
|
72
72
|
success: CheckCircleIcon,
|
|
73
73
|
warning: WarningIcon
|
|
74
74
|
};
|
|
75
|
-
var Alert = ({ children, className, variant = "
|
|
75
|
+
var Alert = ({ children, className, variant = "destructive", ...props }) => {
|
|
76
76
|
const styles = variantStyles[variant];
|
|
77
|
-
const
|
|
77
|
+
const Icon = variantIcons[variant];
|
|
78
78
|
return /* @__PURE__ */ jsxs(
|
|
79
79
|
"div",
|
|
80
80
|
{
|
|
@@ -87,7 +87,7 @@ var Alert = ({ children, className, variant = "error", ...props }) => {
|
|
|
87
87
|
role: "alert",
|
|
88
88
|
...props,
|
|
89
89
|
children: [
|
|
90
|
-
/* @__PURE__ */ jsx(
|
|
90
|
+
/* @__PURE__ */ jsx(Icon, { className: cn("h-5 w-5 shrink-0", styles.icon) }),
|
|
91
91
|
/* @__PURE__ */ jsx("span", { children })
|
|
92
92
|
]
|
|
93
93
|
}
|
|
@@ -96,13 +96,19 @@ var Alert = ({ children, className, variant = "error", ...props }) => {
|
|
|
96
96
|
|
|
97
97
|
// src/components/auth-header.tsx
|
|
98
98
|
import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
|
|
99
|
-
var AuthHeader = ({
|
|
99
|
+
var AuthHeader = ({
|
|
100
|
+
children,
|
|
101
|
+
desktopLogoSrc = "/logo_color.svg",
|
|
102
|
+
logoAlt,
|
|
103
|
+
mobileClassName,
|
|
104
|
+
mobileLogoSrc = "/logotipo_color.svg"
|
|
105
|
+
}) => {
|
|
100
106
|
return /* @__PURE__ */ jsxs2(Fragment, { children: [
|
|
101
107
|
/* @__PURE__ */ jsxs2("div", { className: cn("flex min-h-0 shrink flex-col lg:hidden", mobileClassName), children: [
|
|
102
|
-
/* @__PURE__ */ jsx2("div", { className: "flex justify-center py-2", children: /* @__PURE__ */ jsx2("img", { alt: logoAlt, className: "h-11 md:h-12", src:
|
|
108
|
+
/* @__PURE__ */ jsx2("div", { className: "flex justify-center py-2", children: /* @__PURE__ */ jsx2("img", { alt: logoAlt, className: "h-11 md:h-12", src: mobileLogoSrc }) }),
|
|
103
109
|
children
|
|
104
110
|
] }),
|
|
105
|
-
/* @__PURE__ */ jsx2("div", { className: "absolute hidden p-10 lg:flex", children: /* @__PURE__ */ jsx2("img", { alt: logoAlt, className: "h-12.5 w-12.5", src:
|
|
111
|
+
/* @__PURE__ */ jsx2("div", { className: "absolute hidden p-10 lg:flex", children: /* @__PURE__ */ jsx2("img", { alt: logoAlt, className: "h-12.5 w-12.5", src: desktopLogoSrc }) })
|
|
106
112
|
] });
|
|
107
113
|
};
|
|
108
114
|
|
|
@@ -120,9 +126,6 @@ import { initReactI18next, useTranslation } from "react-i18next";
|
|
|
120
126
|
|
|
121
127
|
// src/locales/es/ui.json
|
|
122
128
|
var ui_default = {
|
|
123
|
-
otpField: {
|
|
124
|
-
description: "Se ha enviado un c\xF3digo OTP a tu correo . Revisa tu bandeja de entrada."
|
|
125
|
-
},
|
|
126
129
|
inputField: {
|
|
127
130
|
showPassword: "Mostrar contrase\xF1a",
|
|
128
131
|
hidePassword: "Ocultar contrase\xF1a",
|
|
@@ -480,30 +483,19 @@ CommandShortcut.displayName = "CommandShortcut";
|
|
|
480
483
|
|
|
481
484
|
// src/components/form.tsx
|
|
482
485
|
import { Slot as Slot2 } from "@radix-ui/react-slot";
|
|
483
|
-
import * as React6 from "react";
|
|
484
|
-
import { Controller, FormProvider, useFormContext } from "react-hook-form";
|
|
485
|
-
|
|
486
|
-
// src/components/label.tsx
|
|
487
|
-
import * as LabelPrimitive from "@radix-ui/react-label";
|
|
488
|
-
import { cva as cva2 } from "class-variance-authority";
|
|
489
486
|
import * as React5 from "react";
|
|
487
|
+
import { Controller, FormProvider, useFormContext } from "react-hook-form";
|
|
490
488
|
import { jsx as jsx8 } from "react/jsx-runtime";
|
|
491
|
-
var labelVariants = cva2("text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70");
|
|
492
|
-
var Label = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx8(LabelPrimitive.Root, { className: cn(labelVariants(), className), ref, ...props }));
|
|
493
|
-
Label.displayName = LabelPrimitive.Root.displayName;
|
|
494
|
-
|
|
495
|
-
// src/components/form.tsx
|
|
496
|
-
import { jsx as jsx9 } from "react/jsx-runtime";
|
|
497
489
|
var Form = FormProvider;
|
|
498
|
-
var FormFieldContext =
|
|
490
|
+
var FormFieldContext = React5.createContext(null);
|
|
499
491
|
var FormField = ({
|
|
500
492
|
...props
|
|
501
493
|
}) => {
|
|
502
|
-
return /* @__PURE__ */
|
|
494
|
+
return /* @__PURE__ */ jsx8(FormFieldContext.Provider, { value: { name: props.name }, children: /* @__PURE__ */ jsx8(Controller, { ...props }) });
|
|
503
495
|
};
|
|
504
496
|
var useFormField = () => {
|
|
505
|
-
const fieldContext =
|
|
506
|
-
const itemContext =
|
|
497
|
+
const fieldContext = React5.useContext(FormFieldContext);
|
|
498
|
+
const itemContext = React5.useContext(FormItemContext);
|
|
507
499
|
const { formState, getFieldState } = useFormContext();
|
|
508
500
|
if (!fieldContext) {
|
|
509
501
|
throw new Error("useFormField must be used within <FormField>");
|
|
@@ -522,23 +514,18 @@ var useFormField = () => {
|
|
|
522
514
|
...fieldState
|
|
523
515
|
};
|
|
524
516
|
};
|
|
525
|
-
var FormItemContext =
|
|
526
|
-
var FormItem =
|
|
517
|
+
var FormItemContext = React5.createContext(null);
|
|
518
|
+
var FormItem = React5.forwardRef(
|
|
527
519
|
({ className, ...props }, ref) => {
|
|
528
|
-
const id =
|
|
529
|
-
return /* @__PURE__ */
|
|
520
|
+
const id = React5.useId();
|
|
521
|
+
return /* @__PURE__ */ jsx8(FormItemContext.Provider, { value: { id }, children: /* @__PURE__ */ jsx8("div", { className: cn("space-y-1", className), ref, ...props }) });
|
|
530
522
|
}
|
|
531
523
|
);
|
|
532
524
|
FormItem.displayName = "FormItem";
|
|
533
|
-
var
|
|
534
|
-
const { error, formItemId } = useFormField();
|
|
535
|
-
return /* @__PURE__ */ jsx9(Label, { className: cn(error && "text-destructive", className), htmlFor: formItemId, ref, ...props });
|
|
536
|
-
});
|
|
537
|
-
FormLabel.displayName = "FormLabel";
|
|
538
|
-
var FormControl = React6.forwardRef(
|
|
525
|
+
var FormControl = React5.forwardRef(
|
|
539
526
|
({ ...props }, ref) => {
|
|
540
527
|
const { error, formDescriptionId, formItemId, formMessageId } = useFormField();
|
|
541
|
-
return /* @__PURE__ */
|
|
528
|
+
return /* @__PURE__ */ jsx8(
|
|
542
529
|
Slot2,
|
|
543
530
|
{
|
|
544
531
|
"aria-describedby": !error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`,
|
|
@@ -551,21 +538,14 @@ var FormControl = React6.forwardRef(
|
|
|
551
538
|
}
|
|
552
539
|
);
|
|
553
540
|
FormControl.displayName = "FormControl";
|
|
554
|
-
var
|
|
555
|
-
({ className, ...props }, ref) => {
|
|
556
|
-
const { formDescriptionId } = useFormField();
|
|
557
|
-
return /* @__PURE__ */ jsx9("p", { className: cn("text-muted text-[0.8rem]", className), id: formDescriptionId, ref, ...props });
|
|
558
|
-
}
|
|
559
|
-
);
|
|
560
|
-
FormDescription.displayName = "FormDescription";
|
|
561
|
-
var FormMessage = React6.forwardRef(
|
|
541
|
+
var FormMessage = React5.forwardRef(
|
|
562
542
|
({ children, className, ...props }, ref) => {
|
|
563
543
|
const { error, formMessageId } = useFormField();
|
|
564
544
|
const body = error?.message ? String(error.message) : children;
|
|
565
545
|
if (!body) {
|
|
566
546
|
return null;
|
|
567
547
|
}
|
|
568
|
-
return /* @__PURE__ */
|
|
548
|
+
return /* @__PURE__ */ jsx8(
|
|
569
549
|
"p",
|
|
570
550
|
{
|
|
571
551
|
className: cn("text-destructive text-[0.8rem] font-medium", className),
|
|
@@ -584,10 +564,10 @@ import { useState } from "react";
|
|
|
584
564
|
import { EyeIcon, EyeSlashIcon, XIcon } from "@phosphor-icons/react";
|
|
585
565
|
|
|
586
566
|
// src/components/input.tsx
|
|
587
|
-
import * as
|
|
588
|
-
import { jsx as
|
|
589
|
-
var Input =
|
|
590
|
-
return /* @__PURE__ */
|
|
567
|
+
import * as React6 from "react";
|
|
568
|
+
import { jsx as jsx9 } from "react/jsx-runtime";
|
|
569
|
+
var Input = React6.forwardRef(({ className, onKeyDown, type, ...props }, ref) => {
|
|
570
|
+
return /* @__PURE__ */ jsx9(
|
|
591
571
|
"input",
|
|
592
572
|
{
|
|
593
573
|
className: cn(
|
|
@@ -597,6 +577,8 @@ var Input = React7.forwardRef(({ className, type, ...props }, ref) => {
|
|
|
597
577
|
className
|
|
598
578
|
),
|
|
599
579
|
onKeyDown: (e) => {
|
|
580
|
+
onKeyDown?.(e);
|
|
581
|
+
if (e.defaultPrevented) return;
|
|
600
582
|
const key = e.key;
|
|
601
583
|
const allowedKeys = ["Backspace", "Tab", "Enter", "Escape", "ArrowLeft", "ArrowUp", "ArrowRight", "ArrowDown"];
|
|
602
584
|
if (allowedKeys.includes(key)) {
|
|
@@ -605,12 +587,6 @@ var Input = React7.forwardRef(({ className, type, ...props }, ref) => {
|
|
|
605
587
|
if (!(key >= "0" && key <= "9") && type === "number") {
|
|
606
588
|
e.preventDefault();
|
|
607
589
|
}
|
|
608
|
-
if (type === "onlyText") {
|
|
609
|
-
const regex = /^[a-zA-ZáéíóúÁÉÍÓÚñÑ ]*$/;
|
|
610
|
-
if (!regex.test(key)) {
|
|
611
|
-
e.preventDefault();
|
|
612
|
-
}
|
|
613
|
-
}
|
|
614
590
|
},
|
|
615
591
|
ref,
|
|
616
592
|
type,
|
|
@@ -620,6 +596,15 @@ var Input = React7.forwardRef(({ className, type, ...props }, ref) => {
|
|
|
620
596
|
});
|
|
621
597
|
Input.displayName = "Input";
|
|
622
598
|
|
|
599
|
+
// src/components/label.tsx
|
|
600
|
+
import * as LabelPrimitive from "@radix-ui/react-label";
|
|
601
|
+
import { cva as cva2 } from "class-variance-authority";
|
|
602
|
+
import * as React7 from "react";
|
|
603
|
+
import { jsx as jsx10 } from "react/jsx-runtime";
|
|
604
|
+
var labelVariants = cva2("text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70");
|
|
605
|
+
var Label = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx10(LabelPrimitive.Root, { className: cn(labelVariants(), className), ref, ...props }));
|
|
606
|
+
Label.displayName = LabelPrimitive.Root.displayName;
|
|
607
|
+
|
|
623
608
|
// src/components/form-fields/label-field.tsx
|
|
624
609
|
import { jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
|
|
625
610
|
var LabelField = ({ label, labelClassName, name, visualRequired }) => {
|
|
@@ -662,8 +647,7 @@ var InputField = ({
|
|
|
662
647
|
setIsPasswordVisible((prev) => !prev);
|
|
663
648
|
};
|
|
664
649
|
const isPassword = type === "password";
|
|
665
|
-
const inputType = isPassword ? isPasswordVisible ? "text" : "password" : type
|
|
666
|
-
const isPlate = type === "plate";
|
|
650
|
+
const inputType = isPassword ? isPasswordVisible ? "text" : "password" : type;
|
|
667
651
|
return /* @__PURE__ */ jsx12(
|
|
668
652
|
FormField,
|
|
669
653
|
{
|
|
@@ -689,21 +673,12 @@ var InputField = ({
|
|
|
689
673
|
autoComplete: isPassword ? "current-password" : void 0,
|
|
690
674
|
className: cn(
|
|
691
675
|
inputClassName,
|
|
692
|
-
isPlate && "uppercase",
|
|
693
676
|
hasError && "border-destructive",
|
|
694
677
|
isPassword && "pr-10 [&::-ms-reveal]:hidden"
|
|
695
678
|
),
|
|
696
679
|
"data-no-password-toggle": true,
|
|
697
680
|
disabled,
|
|
698
|
-
maxLength: isPlate ? 6 : void 0,
|
|
699
681
|
min: type === "number" ? 0 : void 0,
|
|
700
|
-
onChange: (e) => {
|
|
701
|
-
let value = e.target.value;
|
|
702
|
-
if (isPlate) {
|
|
703
|
-
value = value.toUpperCase().replace(/[^A-Z0-9]/g, "").slice(0, 6);
|
|
704
|
-
}
|
|
705
|
-
field.onChange(value);
|
|
706
|
-
},
|
|
707
682
|
placeholder,
|
|
708
683
|
type: inputType,
|
|
709
684
|
value: field.value ?? ""
|
|
@@ -740,12 +715,14 @@ var InputField = ({
|
|
|
740
715
|
};
|
|
741
716
|
|
|
742
717
|
// src/components/google-map-picker.tsx
|
|
743
|
-
import { AdvancedMarker, APIProvider, Map as Map2
|
|
718
|
+
import { AdvancedMarker, APIProvider, Map as Map2 } from "@vis.gl/react-google-maps";
|
|
719
|
+
|
|
720
|
+
// src/components/use-google-map-picker.ts
|
|
721
|
+
import { useMap, useMapsLibrary } from "@vis.gl/react-google-maps";
|
|
744
722
|
import { useCallback, useEffect, useMemo, useRef, useState as useState2 } from "react";
|
|
745
|
-
import { jsx as jsx13, jsxs as jsxs10 } from "react/jsx-runtime";
|
|
746
|
-
var DEFAULT_CENTER = { lat: 4.711, lng: -74.0721 };
|
|
747
723
|
var PICKER_MAP_ID = "komensal-restaurant-map";
|
|
748
724
|
var SELECTED_ZOOM = 15;
|
|
725
|
+
var CITY_ZOOM = 12;
|
|
749
726
|
var DEBOUNCE_MS = 300;
|
|
750
727
|
var parseComponents = (components) => {
|
|
751
728
|
const find = (type) => components.find((c) => c.types.includes(type));
|
|
@@ -759,19 +736,16 @@ var parseComponents = (components) => {
|
|
|
759
736
|
department: department?.long ?? null
|
|
760
737
|
};
|
|
761
738
|
};
|
|
762
|
-
|
|
763
|
-
var MapPickerContent = ({
|
|
739
|
+
function useGoogleMapPicker({
|
|
764
740
|
centerOn,
|
|
765
741
|
countryCode,
|
|
766
742
|
disabled,
|
|
767
|
-
hasError,
|
|
768
743
|
locationQuery,
|
|
769
744
|
locationZoom,
|
|
770
745
|
onAddressResolved,
|
|
771
746
|
onChange,
|
|
772
|
-
placeholder,
|
|
773
747
|
value
|
|
774
|
-
})
|
|
748
|
+
}) {
|
|
775
749
|
const placesLib = useMapsLibrary("places");
|
|
776
750
|
const geocodingLib = useMapsLibrary("geocoding");
|
|
777
751
|
const map = useMap(PICKER_MAP_ID);
|
|
@@ -920,6 +894,37 @@ var MapPickerContent = ({
|
|
|
920
894
|
},
|
|
921
895
|
[reverseGeocode]
|
|
922
896
|
);
|
|
897
|
+
return {
|
|
898
|
+
handleBlur,
|
|
899
|
+
handleInputChange,
|
|
900
|
+
handleMapClick,
|
|
901
|
+
handleMarkerDragEnd,
|
|
902
|
+
handleSelect,
|
|
903
|
+
inputValue,
|
|
904
|
+
position,
|
|
905
|
+
setShowDropdown,
|
|
906
|
+
showDropdown,
|
|
907
|
+
suggestions
|
|
908
|
+
};
|
|
909
|
+
}
|
|
910
|
+
|
|
911
|
+
// src/components/google-map-picker.tsx
|
|
912
|
+
import { jsx as jsx13, jsxs as jsxs10 } from "react/jsx-runtime";
|
|
913
|
+
var DEFAULT_CENTER = { lat: 4.711, lng: -74.0721 };
|
|
914
|
+
var MapPickerContent = (props) => {
|
|
915
|
+
const { disabled, hasError, placeholder } = props;
|
|
916
|
+
const {
|
|
917
|
+
handleBlur,
|
|
918
|
+
handleInputChange,
|
|
919
|
+
handleMapClick,
|
|
920
|
+
handleMarkerDragEnd,
|
|
921
|
+
handleSelect,
|
|
922
|
+
inputValue,
|
|
923
|
+
position,
|
|
924
|
+
setShowDropdown,
|
|
925
|
+
showDropdown,
|
|
926
|
+
suggestions
|
|
927
|
+
} = useGoogleMapPicker(props);
|
|
923
928
|
return /* @__PURE__ */ jsxs10("div", { className: "flex flex-col gap-3", children: [
|
|
924
929
|
/* @__PURE__ */ jsxs10("div", { className: "relative", children: [
|
|
925
930
|
/* @__PURE__ */ jsx13(
|
|
@@ -1098,7 +1103,7 @@ function OTPField({
|
|
|
1098
1103
|
|
|
1099
1104
|
// src/components/select-input.tsx
|
|
1100
1105
|
import { CaretDownIcon, CaretUpIcon, ClockIcon, XIcon as XIcon2 } from "@phosphor-icons/react";
|
|
1101
|
-
import { cloneElement, useCallback as useCallback2, useEffect as
|
|
1106
|
+
import { cloneElement, useCallback as useCallback2, useEffect as useEffect3, useMemo as useMemo3, useState as useState4 } from "react";
|
|
1102
1107
|
|
|
1103
1108
|
// src/components/popover.tsx
|
|
1104
1109
|
import * as PopoverPrimitive from "@radix-ui/react-popover";
|
|
@@ -1106,7 +1111,6 @@ import * as React9 from "react";
|
|
|
1106
1111
|
import { jsx as jsx17 } from "react/jsx-runtime";
|
|
1107
1112
|
var Popover = PopoverPrimitive.Root;
|
|
1108
1113
|
var PopoverTrigger = PopoverPrimitive.Trigger;
|
|
1109
|
-
var PopoverAnchor = PopoverPrimitive.Anchor;
|
|
1110
1114
|
var PopoverContent = React9.forwardRef(({ align = "center", className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx17(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx17(
|
|
1111
1115
|
PopoverPrimitive.Content,
|
|
1112
1116
|
{
|
|
@@ -1122,6 +1126,41 @@ var PopoverContent = React9.forwardRef(({ align = "center", className, sideOffse
|
|
|
1122
1126
|
) }));
|
|
1123
1127
|
PopoverContent.displayName = PopoverPrimitive.Content.displayName;
|
|
1124
1128
|
|
|
1129
|
+
// src/components/use-select-input.ts
|
|
1130
|
+
import { useEffect as useEffect2, useMemo as useMemo2, useRef as useRef2, useState as useState3 } from "react";
|
|
1131
|
+
var normalizeString = (str) => str.normalize("NFD").replace(/[̀-ͯ]/g, "").toLowerCase();
|
|
1132
|
+
function useSelectFilter(items, labelKey, valueKey) {
|
|
1133
|
+
const [query, setQuery] = useState3("");
|
|
1134
|
+
const normalizedItems = useMemo2(() => {
|
|
1135
|
+
if (!items) return [];
|
|
1136
|
+
return items.map((it) => ({
|
|
1137
|
+
...it,
|
|
1138
|
+
[labelKey]: String(it[labelKey]),
|
|
1139
|
+
[valueKey]: String(it[valueKey])
|
|
1140
|
+
}));
|
|
1141
|
+
}, [items, labelKey, valueKey]);
|
|
1142
|
+
const filteredOptions = useMemo2(() => {
|
|
1143
|
+
if (!query) return normalizedItems;
|
|
1144
|
+
return normalizedItems.filter(
|
|
1145
|
+
(el) => normalizeString(el[labelKey]).includes(normalizeString(query))
|
|
1146
|
+
);
|
|
1147
|
+
}, [normalizedItems, labelKey, query]);
|
|
1148
|
+
return { filteredOptions, normalizedItems, query, setQuery };
|
|
1149
|
+
}
|
|
1150
|
+
function usePopoverWidth() {
|
|
1151
|
+
const ref = useRef2(null);
|
|
1152
|
+
const [width, setWidth] = useState3(0);
|
|
1153
|
+
useEffect2(() => {
|
|
1154
|
+
const updateWidth = () => {
|
|
1155
|
+
if (ref.current) setWidth(ref.current.getBoundingClientRect().width);
|
|
1156
|
+
};
|
|
1157
|
+
updateWidth();
|
|
1158
|
+
window.addEventListener("resize", updateWidth);
|
|
1159
|
+
return () => window.removeEventListener("resize", updateWidth);
|
|
1160
|
+
}, []);
|
|
1161
|
+
return { ref, width };
|
|
1162
|
+
}
|
|
1163
|
+
|
|
1125
1164
|
// src/components/select-input.tsx
|
|
1126
1165
|
import { Fragment as Fragment3, jsx as jsx18, jsxs as jsxs14 } from "react/jsx-runtime";
|
|
1127
1166
|
var SelectInput = (props) => {
|
|
@@ -1149,26 +1188,14 @@ var SelectInput = (props) => {
|
|
|
1149
1188
|
valueKey = "value"
|
|
1150
1189
|
} = props;
|
|
1151
1190
|
const resolvedPlaceholder = placeholder ?? t("selectInput.placeholder");
|
|
1152
|
-
const
|
|
1153
|
-
const [
|
|
1154
|
-
const
|
|
1155
|
-
const
|
|
1156
|
-
|
|
1157
|
-
|
|
1158
|
-
|
|
1159
|
-
|
|
1160
|
-
return items.map((it) => ({
|
|
1161
|
-
...it,
|
|
1162
|
-
[labelKey]: String(it[labelKey]),
|
|
1163
|
-
[valueKey]: String(it[valueKey])
|
|
1164
|
-
}));
|
|
1165
|
-
}, [items, labelKey, valueKey]);
|
|
1166
|
-
const filteredOptions = useMemo2(() => {
|
|
1167
|
-
if (!query) return normalizedItems;
|
|
1168
|
-
return normalizedItems.filter(
|
|
1169
|
-
(el) => normalizeString(el[labelKey]).includes(normalizeString(query))
|
|
1170
|
-
);
|
|
1171
|
-
}, [normalizedItems, labelKey, query]);
|
|
1191
|
+
const [open, setOpen] = useState4(false);
|
|
1192
|
+
const [valueItem, setValueItem] = useState4(value);
|
|
1193
|
+
const { ref: divRef, width } = usePopoverWidth();
|
|
1194
|
+
const { filteredOptions, normalizedItems, query, setQuery } = useSelectFilter(
|
|
1195
|
+
items,
|
|
1196
|
+
labelKey,
|
|
1197
|
+
valueKey
|
|
1198
|
+
);
|
|
1172
1199
|
const onValueChange = useCallback2(
|
|
1173
1200
|
(val) => {
|
|
1174
1201
|
if (!normalizedItems.length) return;
|
|
@@ -1183,7 +1210,7 @@ var SelectInput = (props) => {
|
|
|
1183
1210
|
},
|
|
1184
1211
|
[normalizedItems, labelKey, valueKey, onValueChangeCallBack]
|
|
1185
1212
|
);
|
|
1186
|
-
const buttonClassName =
|
|
1213
|
+
const buttonClassName = useMemo3(
|
|
1187
1214
|
() => cn(
|
|
1188
1215
|
inputBase,
|
|
1189
1216
|
inputFocus,
|
|
@@ -1194,18 +1221,7 @@ var SelectInput = (props) => {
|
|
|
1194
1221
|
),
|
|
1195
1222
|
[disabled, error, className]
|
|
1196
1223
|
);
|
|
1197
|
-
|
|
1198
|
-
if (divRef.current) {
|
|
1199
|
-
const { width: width2 } = divRef.current.getBoundingClientRect();
|
|
1200
|
-
setWidth(width2);
|
|
1201
|
-
}
|
|
1202
|
-
};
|
|
1203
|
-
useEffect2(() => {
|
|
1204
|
-
updateWidth();
|
|
1205
|
-
window.addEventListener("resize", updateWidth);
|
|
1206
|
-
return () => window.removeEventListener("resize", updateWidth);
|
|
1207
|
-
}, []);
|
|
1208
|
-
useEffect2(() => {
|
|
1224
|
+
useEffect3(() => {
|
|
1209
1225
|
setValueItem(value);
|
|
1210
1226
|
}, [value]);
|
|
1211
1227
|
return /* @__PURE__ */ jsx18("div", { className: "flex flex-col gap-1", children: /* @__PURE__ */ jsx18("div", { className: "relative flex flex-col justify-center", children: /* @__PURE__ */ jsxs14(Popover, { onOpenChange: setOpen, open, children: [
|
|
@@ -1349,76 +1365,15 @@ var SelectField = ({
|
|
|
1349
1365
|
);
|
|
1350
1366
|
};
|
|
1351
1367
|
|
|
1352
|
-
// src/components/image.tsx
|
|
1353
|
-
import { useEffect as useEffect3, useRef as useRef3, useState as useState4 } from "react";
|
|
1354
|
-
import { jsx as jsx20, jsxs as jsxs16 } from "react/jsx-runtime";
|
|
1355
|
-
var Image = ({
|
|
1356
|
-
alt = "",
|
|
1357
|
-
aspectRatio,
|
|
1358
|
-
className,
|
|
1359
|
-
fallback,
|
|
1360
|
-
loading = "lazy",
|
|
1361
|
-
onError,
|
|
1362
|
-
onLoad,
|
|
1363
|
-
wrapperClassName,
|
|
1364
|
-
...props
|
|
1365
|
-
}) => {
|
|
1366
|
-
const ref = useRef3(null);
|
|
1367
|
-
const [loaded, setLoaded] = useState4(false);
|
|
1368
|
-
const [errored, setErrored] = useState4(false);
|
|
1369
|
-
useEffect3(() => {
|
|
1370
|
-
if (ref.current?.complete && ref.current.naturalWidth > 0) setLoaded(true);
|
|
1371
|
-
}, []);
|
|
1372
|
-
return /* @__PURE__ */ jsxs16(
|
|
1373
|
-
"div",
|
|
1374
|
-
{
|
|
1375
|
-
className: cn("bg-inactive relative overflow-hidden", wrapperClassName),
|
|
1376
|
-
style: aspectRatio ? { aspectRatio } : void 0,
|
|
1377
|
-
children: [
|
|
1378
|
-
!loaded && !errored && /* @__PURE__ */ jsx20("div", { className: "absolute inset-0 animate-pulse" }),
|
|
1379
|
-
errored ? fallback ?? null : /* @__PURE__ */ jsx20(
|
|
1380
|
-
"img",
|
|
1381
|
-
{
|
|
1382
|
-
alt,
|
|
1383
|
-
className: cn(
|
|
1384
|
-
"h-full w-full object-cover transition-opacity duration-300",
|
|
1385
|
-
loaded ? "opacity-100" : "opacity-0",
|
|
1386
|
-
className
|
|
1387
|
-
),
|
|
1388
|
-
decoding: "async",
|
|
1389
|
-
loading,
|
|
1390
|
-
onError: (e) => {
|
|
1391
|
-
setErrored(true);
|
|
1392
|
-
onError?.(e);
|
|
1393
|
-
},
|
|
1394
|
-
onLoad: (e) => {
|
|
1395
|
-
setLoaded(true);
|
|
1396
|
-
onLoad?.(e);
|
|
1397
|
-
},
|
|
1398
|
-
ref,
|
|
1399
|
-
...props
|
|
1400
|
-
}
|
|
1401
|
-
)
|
|
1402
|
-
]
|
|
1403
|
-
}
|
|
1404
|
-
);
|
|
1405
|
-
};
|
|
1406
|
-
|
|
1407
|
-
// src/components/loading.tsx
|
|
1408
|
-
import { jsx as jsx21 } from "react/jsx-runtime";
|
|
1409
|
-
function Loading({ className = "", isSpinner = true }) {
|
|
1410
|
-
return /* @__PURE__ */ jsx21("div", { className: cn("relative flex min-h-screen items-center justify-center gap-6", className), children: isSpinner && /* @__PURE__ */ jsx21("div", { className: "absolute right-0 bottom-0 m-10", children: /* @__PURE__ */ jsx21(Spinner, {}) }) });
|
|
1411
|
-
}
|
|
1412
|
-
|
|
1413
1368
|
// src/components/password-checklist.tsx
|
|
1414
1369
|
import { CheckCircleIcon as CheckCircleIcon2, XCircleIcon } from "@phosphor-icons/react";
|
|
1415
|
-
import { jsx as
|
|
1370
|
+
import { jsx as jsx20, jsxs as jsxs16 } from "react/jsx-runtime";
|
|
1416
1371
|
var PasswordChecklist = ({ className, rules, value }) => {
|
|
1417
1372
|
if (rules.length === 0) return null;
|
|
1418
|
-
return /* @__PURE__ */
|
|
1373
|
+
return /* @__PURE__ */ jsx20("ul", { className: cn("flex flex-col gap-1", className), children: rules.map((rule) => {
|
|
1419
1374
|
const isMet = rule.test(value);
|
|
1420
|
-
const
|
|
1421
|
-
return /* @__PURE__ */
|
|
1375
|
+
const Icon = isMet ? CheckCircleIcon2 : XCircleIcon;
|
|
1376
|
+
return /* @__PURE__ */ jsxs16(
|
|
1422
1377
|
"li",
|
|
1423
1378
|
{
|
|
1424
1379
|
className: cn(
|
|
@@ -1426,8 +1381,8 @@ var PasswordChecklist = ({ className, rules, value }) => {
|
|
|
1426
1381
|
isMet ? "text-success" : "text-inactive-text"
|
|
1427
1382
|
),
|
|
1428
1383
|
children: [
|
|
1429
|
-
/* @__PURE__ */
|
|
1430
|
-
/* @__PURE__ */
|
|
1384
|
+
/* @__PURE__ */ jsx20(Icon, { "aria-hidden": "true", className: "h-4 w-4 shrink-0" }),
|
|
1385
|
+
/* @__PURE__ */ jsx20("span", { children: rule.label })
|
|
1431
1386
|
]
|
|
1432
1387
|
},
|
|
1433
1388
|
rule.key
|
|
@@ -1435,116 +1390,23 @@ var PasswordChecklist = ({ className, rules, value }) => {
|
|
|
1435
1390
|
}) });
|
|
1436
1391
|
};
|
|
1437
1392
|
|
|
1438
|
-
// src/components/select.tsx
|
|
1439
|
-
import { CaretSortIcon, CheckIcon, ChevronDownIcon, ChevronUpIcon } from "@radix-ui/react-icons";
|
|
1440
|
-
import * as SelectPrimitive from "@radix-ui/react-select";
|
|
1441
|
-
import * as React11 from "react";
|
|
1442
|
-
import { jsx as jsx23, jsxs as jsxs18 } from "react/jsx-runtime";
|
|
1443
|
-
var Select = SelectPrimitive.Root;
|
|
1444
|
-
var SelectGroup = SelectPrimitive.Group;
|
|
1445
|
-
var SelectValue = SelectPrimitive.Value;
|
|
1446
|
-
var SelectTrigger = React11.forwardRef(({ children, className, ...props }, ref) => /* @__PURE__ */ jsxs18(
|
|
1447
|
-
SelectPrimitive.Trigger,
|
|
1448
|
-
{
|
|
1449
|
-
className: cn(
|
|
1450
|
-
"placeholder:text-placeholder border-border ring-offset-surface focus:ring-ring flex h-9 w-full items-center justify-between rounded-xl border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-sm focus:ring-0 focus:outline-none disabled:cursor-not-allowed [&>span]:line-clamp-1",
|
|
1451
|
-
className
|
|
1452
|
-
),
|
|
1453
|
-
ref,
|
|
1454
|
-
...props,
|
|
1455
|
-
children: [
|
|
1456
|
-
children,
|
|
1457
|
-
/* @__PURE__ */ jsx23(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx23(CaretSortIcon, { className: "h-4 w-4 opacity-50" }) })
|
|
1458
|
-
]
|
|
1459
|
-
}
|
|
1460
|
-
));
|
|
1461
|
-
SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
|
|
1462
|
-
var SelectScrollUpButton = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx23(
|
|
1463
|
-
SelectPrimitive.ScrollUpButton,
|
|
1464
|
-
{
|
|
1465
|
-
className: cn("flex cursor-default items-center justify-center py-1", className),
|
|
1466
|
-
ref,
|
|
1467
|
-
...props,
|
|
1468
|
-
children: /* @__PURE__ */ jsx23(ChevronUpIcon, {})
|
|
1469
|
-
}
|
|
1470
|
-
));
|
|
1471
|
-
SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
|
|
1472
|
-
var SelectScrollDownButton = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx23(
|
|
1473
|
-
SelectPrimitive.ScrollDownButton,
|
|
1474
|
-
{
|
|
1475
|
-
className: cn("flex cursor-default items-center justify-center py-1", className),
|
|
1476
|
-
ref,
|
|
1477
|
-
...props,
|
|
1478
|
-
children: /* @__PURE__ */ jsx23(ChevronDownIcon, {})
|
|
1479
|
-
}
|
|
1480
|
-
));
|
|
1481
|
-
SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
|
|
1482
|
-
var SelectContent = React11.forwardRef(({ children, className, position = "popper", ...props }, ref) => /* @__PURE__ */ jsx23(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs18(
|
|
1483
|
-
SelectPrimitive.Content,
|
|
1484
|
-
{
|
|
1485
|
-
className: cn(
|
|
1486
|
-
"border-border text-foreground bg-surface data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-96 min-w-32 overflow-hidden rounded-lg border shadow-md",
|
|
1487
|
-
position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
|
|
1488
|
-
className
|
|
1489
|
-
),
|
|
1490
|
-
position,
|
|
1491
|
-
ref,
|
|
1492
|
-
...props,
|
|
1493
|
-
children: [
|
|
1494
|
-
/* @__PURE__ */ jsx23(SelectScrollUpButton, {}),
|
|
1495
|
-
/* @__PURE__ */ jsx23(
|
|
1496
|
-
SelectPrimitive.Viewport,
|
|
1497
|
-
{
|
|
1498
|
-
className: cn(
|
|
1499
|
-
"p-1",
|
|
1500
|
-
position === "popper" && "h-(--radix-select-trigger-height) w-full min-w-(--radix-select-trigger-width)"
|
|
1501
|
-
),
|
|
1502
|
-
children
|
|
1503
|
-
}
|
|
1504
|
-
),
|
|
1505
|
-
/* @__PURE__ */ jsx23(SelectScrollDownButton, {})
|
|
1506
|
-
]
|
|
1507
|
-
}
|
|
1508
|
-
) }));
|
|
1509
|
-
SelectContent.displayName = SelectPrimitive.Content.displayName;
|
|
1510
|
-
var SelectLabel = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx23(SelectPrimitive.Label, { className: cn("px-2 py-1.5 text-sm font-semibold", className), ref, ...props }));
|
|
1511
|
-
SelectLabel.displayName = SelectPrimitive.Label.displayName;
|
|
1512
|
-
var SelectItem = React11.forwardRef(({ children, className, ...props }, ref) => /* @__PURE__ */ jsxs18(
|
|
1513
|
-
SelectPrimitive.Item,
|
|
1514
|
-
{
|
|
1515
|
-
className: cn(
|
|
1516
|
-
"focus:text-foreground focus:bg-hover relative flex w-full cursor-default items-center rounded-md py-1.5 pr-8 pl-2 text-sm outline-none select-none data-disabled:pointer-events-none data-disabled:opacity-50",
|
|
1517
|
-
className
|
|
1518
|
-
),
|
|
1519
|
-
ref,
|
|
1520
|
-
...props,
|
|
1521
|
-
children: [
|
|
1522
|
-
/* @__PURE__ */ jsx23("span", { className: "absolute right-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx23(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx23(CheckIcon, { className: "h-4 w-4" }) }) }),
|
|
1523
|
-
/* @__PURE__ */ jsx23(SelectPrimitive.ItemText, { children: /* @__PURE__ */ jsx23("span", { children }) })
|
|
1524
|
-
]
|
|
1525
|
-
}
|
|
1526
|
-
));
|
|
1527
|
-
SelectItem.displayName = SelectPrimitive.Item.displayName;
|
|
1528
|
-
var SelectSeparator = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx23(SelectPrimitive.Separator, { className: cn("bg-border -mx-1 my-1 h-px", className), ref, ...props }));
|
|
1529
|
-
SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
|
|
1530
|
-
|
|
1531
1393
|
// src/components/step-header.tsx
|
|
1532
|
-
import { jsx as
|
|
1533
|
-
var StepHeader = ({ subtitle, subtitleClassName, title }) => /* @__PURE__ */
|
|
1534
|
-
/* @__PURE__ */
|
|
1535
|
-
subtitle !== void 0 && /* @__PURE__ */
|
|
1394
|
+
import { jsx as jsx21, jsxs as jsxs17 } from "react/jsx-runtime";
|
|
1395
|
+
var StepHeader = ({ subtitle, subtitleClassName, title }) => /* @__PURE__ */ jsxs17("div", { className: "flex flex-col gap-1", children: [
|
|
1396
|
+
/* @__PURE__ */ jsx21("h1", { className: "text-title text-2xl font-bold", children: title }),
|
|
1397
|
+
subtitle !== void 0 && /* @__PURE__ */ jsx21("p", { className: cn("text-subtitle text-sm", subtitleClassName), children: subtitle })
|
|
1536
1398
|
] });
|
|
1537
1399
|
|
|
1538
1400
|
// src/components/stepper.tsx
|
|
1539
|
-
import { CheckIcon
|
|
1540
|
-
import { jsx as
|
|
1401
|
+
import { CheckIcon } from "@phosphor-icons/react";
|
|
1402
|
+
import { jsx as jsx22, jsxs as jsxs18 } from "react/jsx-runtime";
|
|
1541
1403
|
var Stepper = ({ activeIndex, className, intermediate = false, steps }) => {
|
|
1542
|
-
return /* @__PURE__ */
|
|
1404
|
+
return /* @__PURE__ */ jsx22("div", { className: cn("flex w-full items-start", className), children: steps.map((step, index) => {
|
|
1543
1405
|
const isCompleted = intermediate ? index <= activeIndex : index < activeIndex;
|
|
1544
1406
|
const isActive = !intermediate && index === activeIndex;
|
|
1545
|
-
return /* @__PURE__ */
|
|
1546
|
-
/* @__PURE__ */
|
|
1547
|
-
/* @__PURE__ */
|
|
1407
|
+
return /* @__PURE__ */ jsxs18("div", { className: "flex flex-1 flex-col items-center", children: [
|
|
1408
|
+
/* @__PURE__ */ jsxs18("div", { className: "flex w-full items-center", children: [
|
|
1409
|
+
/* @__PURE__ */ jsx22(
|
|
1548
1410
|
"div",
|
|
1549
1411
|
{
|
|
1550
1412
|
className: cn(
|
|
@@ -1554,7 +1416,7 @@ var Stepper = ({ activeIndex, className, intermediate = false, steps }) => {
|
|
|
1554
1416
|
)
|
|
1555
1417
|
}
|
|
1556
1418
|
),
|
|
1557
|
-
/* @__PURE__ */
|
|
1419
|
+
/* @__PURE__ */ jsx22(
|
|
1558
1420
|
"div",
|
|
1559
1421
|
{
|
|
1560
1422
|
"aria-current": isActive ? "step" : void 0,
|
|
@@ -1564,10 +1426,10 @@ var Stepper = ({ activeIndex, className, intermediate = false, steps }) => {
|
|
|
1564
1426
|
isActive && "bg-primary border-primary text-inverse",
|
|
1565
1427
|
!isCompleted && !isActive && "bg-inactive border-inactive text-surface"
|
|
1566
1428
|
),
|
|
1567
|
-
children: isCompleted ? /* @__PURE__ */
|
|
1429
|
+
children: isCompleted ? /* @__PURE__ */ jsx22(CheckIcon, { className: "h-4 w-4" }) : index + 1
|
|
1568
1430
|
}
|
|
1569
1431
|
),
|
|
1570
|
-
/* @__PURE__ */
|
|
1432
|
+
/* @__PURE__ */ jsx22(
|
|
1571
1433
|
"div",
|
|
1572
1434
|
{
|
|
1573
1435
|
className: cn(
|
|
@@ -1575,7 +1437,7 @@ var Stepper = ({ activeIndex, className, intermediate = false, steps }) => {
|
|
|
1575
1437
|
isCompleted ? "bg-primary" : "bg-inactive",
|
|
1576
1438
|
index === steps.length - 1 && "rounded-r-full"
|
|
1577
1439
|
),
|
|
1578
|
-
children: index === 0 && /* @__PURE__ */
|
|
1440
|
+
children: index === 0 && /* @__PURE__ */ jsx22(
|
|
1579
1441
|
"div",
|
|
1580
1442
|
{
|
|
1581
1443
|
className: cn(
|
|
@@ -1587,43 +1449,37 @@ var Stepper = ({ activeIndex, className, intermediate = false, steps }) => {
|
|
|
1587
1449
|
}
|
|
1588
1450
|
)
|
|
1589
1451
|
] }),
|
|
1590
|
-
/* @__PURE__ */
|
|
1452
|
+
/* @__PURE__ */ jsx22("span", { className: cn("mt-1 text-xs font-normal", isCompleted || isActive ? "text-primary" : "text-muted"), children: step.label })
|
|
1591
1453
|
] }, step.label);
|
|
1592
1454
|
}) });
|
|
1593
1455
|
};
|
|
1594
1456
|
|
|
1595
1457
|
// src/components/toast/toast.tsx
|
|
1596
|
-
import { CheckIcon as
|
|
1597
|
-
import { useEffect as useEffect4,
|
|
1598
|
-
import { jsx as
|
|
1458
|
+
import { CheckIcon as CheckIcon2, FileLockIcon, InfoIcon as InfoIcon2, WarningIcon as WarningIcon2, XIcon as XIcon3 } from "@phosphor-icons/react";
|
|
1459
|
+
import { useEffect as useEffect4, useRef as useRef3, useState as useState5 } from "react";
|
|
1460
|
+
import { jsx as jsx23, jsxs as jsxs19 } from "react/jsx-runtime";
|
|
1599
1461
|
var EXIT_ANIMATION_MS = 200;
|
|
1462
|
+
var typeIcons = {
|
|
1463
|
+
destructive: XIcon3,
|
|
1464
|
+
info: InfoIcon2,
|
|
1465
|
+
success: CheckIcon2,
|
|
1466
|
+
wait: FileLockIcon,
|
|
1467
|
+
warning: WarningIcon2
|
|
1468
|
+
};
|
|
1469
|
+
var typeStyles = {
|
|
1470
|
+
destructive: { border: "border-destructive", icon: "text-destructive", iconBorder: "border-destructive" },
|
|
1471
|
+
info: { border: "border-info", icon: "text-info", iconBorder: "border-info" },
|
|
1472
|
+
success: { border: "border-success", icon: "text-success", iconBorder: "border-success" },
|
|
1473
|
+
wait: { border: "border-wait", icon: "text-wait", iconBorder: "border-wait" },
|
|
1474
|
+
warning: { border: "border-warning", icon: "text-warning", iconBorder: "border-warning" }
|
|
1475
|
+
};
|
|
1600
1476
|
function Toast({ duration = 2500, id, onClose, subtitle, title, type }) {
|
|
1601
1477
|
const [leaving, setLeaving] = useState5(false);
|
|
1602
|
-
const startedAtRef =
|
|
1603
|
-
const timeoutRef =
|
|
1604
|
-
const exitRef =
|
|
1605
|
-
const
|
|
1606
|
-
|
|
1607
|
-
if (type === "error") return XIcon3;
|
|
1608
|
-
if (type === "warning") return WarningIcon2;
|
|
1609
|
-
if (type === "info") return InfoIcon2;
|
|
1610
|
-
return FileLockIcon;
|
|
1611
|
-
}, [type]);
|
|
1612
|
-
const styles = useMemo3(() => {
|
|
1613
|
-
if (type === "success") {
|
|
1614
|
-
return { border: "border-success", icon: "text-success", iconBorder: "border-success" };
|
|
1615
|
-
}
|
|
1616
|
-
if (type === "error") {
|
|
1617
|
-
return { border: "border-destructive", icon: "text-destructive", iconBorder: "border-destructive" };
|
|
1618
|
-
}
|
|
1619
|
-
if (type === "warning") {
|
|
1620
|
-
return { border: "border-warning", icon: "text-warning", iconBorder: "border-warning" };
|
|
1621
|
-
}
|
|
1622
|
-
if (type === "info") {
|
|
1623
|
-
return { border: "border-info", icon: "text-info", iconBorder: "border-info" };
|
|
1624
|
-
}
|
|
1625
|
-
return { border: "border-wait", icon: "text-wait", iconBorder: "border-wait" };
|
|
1626
|
-
}, [type]);
|
|
1478
|
+
const startedAtRef = useRef3(Date.now());
|
|
1479
|
+
const timeoutRef = useRef3(null);
|
|
1480
|
+
const exitRef = useRef3(null);
|
|
1481
|
+
const Icon = typeIcons[type];
|
|
1482
|
+
const styles = typeStyles[type];
|
|
1627
1483
|
useEffect4(() => {
|
|
1628
1484
|
if (timeoutRef.current) clearTimeout(timeoutRef.current);
|
|
1629
1485
|
if (exitRef.current) clearTimeout(exitRef.current);
|
|
@@ -1638,7 +1494,7 @@ function Toast({ duration = 2500, id, onClose, subtitle, title, type }) {
|
|
|
1638
1494
|
if (exitRef.current) clearTimeout(exitRef.current);
|
|
1639
1495
|
};
|
|
1640
1496
|
}, [id, duration, onClose]);
|
|
1641
|
-
return /* @__PURE__ */
|
|
1497
|
+
return /* @__PURE__ */ jsxs19(
|
|
1642
1498
|
"div",
|
|
1643
1499
|
{
|
|
1644
1500
|
"aria-live": "polite",
|
|
@@ -1656,9 +1512,9 @@ function Toast({ duration = 2500, id, onClose, subtitle, title, type }) {
|
|
|
1656
1512
|
].join(" "),
|
|
1657
1513
|
role: "status",
|
|
1658
1514
|
children: [
|
|
1659
|
-
/* @__PURE__ */
|
|
1660
|
-
subtitle ? /* @__PURE__ */
|
|
1661
|
-
/* @__PURE__ */
|
|
1515
|
+
/* @__PURE__ */ jsx23("div", { className: "min-w-0 pr-4", children: /* @__PURE__ */ jsx23("h4", { className: ["text-[16px] leading-normal font-semibold", "text-foreground", "line-clamp-2"].join(" "), children: title }) }),
|
|
1516
|
+
subtitle ? /* @__PURE__ */ jsx23("div", { className: "shrink-0 pr-4 text-left", children: /* @__PURE__ */ jsx23("div", { className: ["max-w-28 text-[14px] leading-[19.5px] font-normal", "text-body"].join(" "), children: subtitle }) }) : null,
|
|
1517
|
+
/* @__PURE__ */ jsx23(
|
|
1662
1518
|
"div",
|
|
1663
1519
|
{
|
|
1664
1520
|
className: [
|
|
@@ -1666,7 +1522,7 @@ function Toast({ duration = 2500, id, onClose, subtitle, title, type }) {
|
|
|
1666
1522
|
"flex h-8 w-8 min-w-8 items-center justify-center rounded-full border-2",
|
|
1667
1523
|
styles.iconBorder
|
|
1668
1524
|
].join(" "),
|
|
1669
|
-
children: /* @__PURE__ */
|
|
1525
|
+
children: /* @__PURE__ */ jsx23(Icon, { className: ["h-5 w-5", styles.icon].join(" ") })
|
|
1670
1526
|
}
|
|
1671
1527
|
)
|
|
1672
1528
|
]
|
|
@@ -1675,12 +1531,12 @@ function Toast({ duration = 2500, id, onClose, subtitle, title, type }) {
|
|
|
1675
1531
|
}
|
|
1676
1532
|
|
|
1677
1533
|
// src/components/toast/toast-provider.tsx
|
|
1678
|
-
import { useCallback as useCallback3, useEffect as useEffect5, useLayoutEffect, useMemo as useMemo4, useRef as
|
|
1679
|
-
import { Fragment as Fragment4, jsx as
|
|
1534
|
+
import { useCallback as useCallback3, useEffect as useEffect5, useLayoutEffect, useMemo as useMemo4, useRef as useRef4, useState as useState6 } from "react";
|
|
1535
|
+
import { Fragment as Fragment4, jsx as jsx24 } from "react/jsx-runtime";
|
|
1680
1536
|
function ToastProvider() {
|
|
1681
1537
|
const [toasts, setToasts] = useState6([]);
|
|
1682
|
-
const itemRefs =
|
|
1683
|
-
const prevRects =
|
|
1538
|
+
const itemRefs = useRef4(/* @__PURE__ */ new Map());
|
|
1539
|
+
const prevRects = useRef4(/* @__PURE__ */ new Map());
|
|
1684
1540
|
const showToast = useCallback3((type, options) => {
|
|
1685
1541
|
setToasts((prev) => [
|
|
1686
1542
|
...prev,
|
|
@@ -1737,7 +1593,7 @@ function ToastProvider() {
|
|
|
1737
1593
|
itemRefs.current.set(id, el);
|
|
1738
1594
|
};
|
|
1739
1595
|
}, []);
|
|
1740
|
-
return /* @__PURE__ */
|
|
1596
|
+
return /* @__PURE__ */ jsx24(Fragment4, { children: Object.entries(grouped).map(([position, list]) => /* @__PURE__ */ jsx24("div", { className: `fixed z-4000 ${getPositionClass(position)}`, children: /* @__PURE__ */ jsx24("div", { className: "relative flex flex-col gap-3", children: list.map((toast2) => /* @__PURE__ */ jsx24("div", { ref: setItemRef(toast2.id), children: /* @__PURE__ */ jsx24(
|
|
1741
1597
|
Toast,
|
|
1742
1598
|
{
|
|
1743
1599
|
duration: toast2.duration,
|
|
@@ -1765,9 +1621,9 @@ function getPositionClass(position) {
|
|
|
1765
1621
|
}
|
|
1766
1622
|
|
|
1767
1623
|
// src/components/wrapper.tsx
|
|
1768
|
-
import { jsx as
|
|
1624
|
+
import { jsx as jsx25 } from "react/jsx-runtime";
|
|
1769
1625
|
var Wrapper = ({ children, className }) => {
|
|
1770
|
-
return /* @__PURE__ */
|
|
1626
|
+
return /* @__PURE__ */ jsx25("div", { className: cn("mx-auto h-full w-full", className), children });
|
|
1771
1627
|
};
|
|
1772
1628
|
export {
|
|
1773
1629
|
Alert,
|
|
@@ -1794,13 +1650,10 @@ export {
|
|
|
1794
1650
|
DialogTrigger,
|
|
1795
1651
|
Form,
|
|
1796
1652
|
FormControl,
|
|
1797
|
-
FormDescription,
|
|
1798
1653
|
FormField,
|
|
1799
1654
|
FormItem,
|
|
1800
|
-
FormLabel,
|
|
1801
1655
|
FormMessage,
|
|
1802
1656
|
GoogleMapPicker,
|
|
1803
|
-
Image,
|
|
1804
1657
|
Input,
|
|
1805
1658
|
InputField,
|
|
1806
1659
|
InputOTP,
|
|
@@ -1808,26 +1661,14 @@ export {
|
|
|
1808
1661
|
InputOTPSlot,
|
|
1809
1662
|
Label,
|
|
1810
1663
|
LabelField,
|
|
1811
|
-
Loading,
|
|
1812
1664
|
MapPickerField,
|
|
1813
1665
|
OTPField,
|
|
1814
1666
|
PasswordChecklist,
|
|
1815
1667
|
Popover,
|
|
1816
|
-
PopoverAnchor,
|
|
1817
1668
|
PopoverContent,
|
|
1818
1669
|
PopoverTrigger,
|
|
1819
|
-
Select,
|
|
1820
|
-
SelectContent,
|
|
1821
1670
|
SelectField,
|
|
1822
|
-
SelectGroup,
|
|
1823
1671
|
SelectInput,
|
|
1824
|
-
SelectItem,
|
|
1825
|
-
SelectLabel,
|
|
1826
|
-
SelectScrollDownButton,
|
|
1827
|
-
SelectScrollUpButton,
|
|
1828
|
-
SelectSeparator,
|
|
1829
|
-
SelectTrigger,
|
|
1830
|
-
SelectValue,
|
|
1831
1672
|
Spinner,
|
|
1832
1673
|
StepHeader,
|
|
1833
1674
|
Stepper,
|