@axzydev/axzy_ui_system 1.0.165 → 1.0.166
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.cjs +365 -195
- package/dist/index.cjs.map +1 -1
- package/dist/index.css +10 -0
- package/dist/index.css.map +1 -1
- package/dist/index.d.cts +52 -2
- package/dist/index.d.ts +52 -2
- package/dist/index.js +363 -194
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.cjs
CHANGED
|
@@ -44,6 +44,7 @@ __export(index_exports, {
|
|
|
44
44
|
ITLoader: () => ITLoader,
|
|
45
45
|
ITNavbar: () => ITNavbar,
|
|
46
46
|
ITPagination: () => ITPagination,
|
|
47
|
+
ITSearchSelect: () => ITSearchSelect,
|
|
47
48
|
ITSelect: () => ITSelect,
|
|
48
49
|
ITSlideToggle: () => ITSlideToggle,
|
|
49
50
|
ITStepper: () => ITStepper,
|
|
@@ -3760,10 +3761,178 @@ function ITNavbar({
|
|
|
3760
3761
|
] });
|
|
3761
3762
|
}
|
|
3762
3763
|
|
|
3763
|
-
// src/components/
|
|
3764
|
+
// src/components/search-select/search-select.tsx
|
|
3764
3765
|
var import_react19 = require("react");
|
|
3765
3766
|
var import_clsx14 = __toESM(require("clsx"), 1);
|
|
3767
|
+
var import_fa11 = require("react-icons/fa");
|
|
3766
3768
|
var import_jsx_runtime19 = require("react/jsx-runtime");
|
|
3769
|
+
function ITSearchSelect({
|
|
3770
|
+
name,
|
|
3771
|
+
options = [],
|
|
3772
|
+
label,
|
|
3773
|
+
placeholder = "Selecciona una opci\xF3n",
|
|
3774
|
+
valueField = "value",
|
|
3775
|
+
labelField = "label",
|
|
3776
|
+
value,
|
|
3777
|
+
onChange,
|
|
3778
|
+
onBlur,
|
|
3779
|
+
disabled = false,
|
|
3780
|
+
className,
|
|
3781
|
+
touched,
|
|
3782
|
+
required,
|
|
3783
|
+
error,
|
|
3784
|
+
readOnly = false,
|
|
3785
|
+
onSearch,
|
|
3786
|
+
isLoading = false,
|
|
3787
|
+
noResultsMessage = "No se encontraron resultados"
|
|
3788
|
+
}) {
|
|
3789
|
+
const [isOpen, setIsOpen] = (0, import_react19.useState)(false);
|
|
3790
|
+
const [searchTerm, setSearchTerm] = (0, import_react19.useState)("");
|
|
3791
|
+
const [isFocused, setIsFocused] = (0, import_react19.useState)(false);
|
|
3792
|
+
const containerRef = (0, import_react19.useRef)(null);
|
|
3793
|
+
const timeoutRef = (0, import_react19.useRef)(null);
|
|
3794
|
+
const selectedOption = (0, import_react19.useMemo)(() => {
|
|
3795
|
+
return options.find((opt) => opt[valueField] === value);
|
|
3796
|
+
}, [options, value, valueField]);
|
|
3797
|
+
(0, import_react19.useEffect)(() => {
|
|
3798
|
+
if (!isFocused) {
|
|
3799
|
+
setSearchTerm(selectedOption ? String(selectedOption[labelField]) : "");
|
|
3800
|
+
}
|
|
3801
|
+
}, [selectedOption, isFocused, labelField]);
|
|
3802
|
+
(0, import_react19.useEffect)(() => {
|
|
3803
|
+
function handleClickOutside(event) {
|
|
3804
|
+
if (containerRef.current && !containerRef.current.contains(event.target)) {
|
|
3805
|
+
setIsOpen(false);
|
|
3806
|
+
}
|
|
3807
|
+
}
|
|
3808
|
+
document.addEventListener("mousedown", handleClickOutside);
|
|
3809
|
+
return () => document.removeEventListener("mousedown", handleClickOutside);
|
|
3810
|
+
}, []);
|
|
3811
|
+
const filteredOptions = (0, import_react19.useMemo)(() => {
|
|
3812
|
+
if (onSearch) return options;
|
|
3813
|
+
if (!searchTerm || !isFocused) return options;
|
|
3814
|
+
return options.filter(
|
|
3815
|
+
(opt) => String(opt[labelField]).toLowerCase().includes(searchTerm.toLowerCase())
|
|
3816
|
+
);
|
|
3817
|
+
}, [options, searchTerm, onSearch, labelField, isFocused]);
|
|
3818
|
+
const handleInputChange = (e) => {
|
|
3819
|
+
const query = e.target.value;
|
|
3820
|
+
setSearchTerm(query);
|
|
3821
|
+
setIsOpen(true);
|
|
3822
|
+
if (onSearch) {
|
|
3823
|
+
if (timeoutRef.current) clearTimeout(timeoutRef.current);
|
|
3824
|
+
timeoutRef.current = setTimeout(() => {
|
|
3825
|
+
onSearch(query);
|
|
3826
|
+
}, 500);
|
|
3827
|
+
}
|
|
3828
|
+
};
|
|
3829
|
+
const handleSelect = (option) => {
|
|
3830
|
+
if (onChange) {
|
|
3831
|
+
onChange(option[valueField], option);
|
|
3832
|
+
}
|
|
3833
|
+
setSearchTerm(String(option[labelField]));
|
|
3834
|
+
setIsOpen(false);
|
|
3835
|
+
};
|
|
3836
|
+
const handleFocus = () => {
|
|
3837
|
+
if (disabled || readOnly) return;
|
|
3838
|
+
setIsFocused(true);
|
|
3839
|
+
setIsOpen(true);
|
|
3840
|
+
};
|
|
3841
|
+
const handleInputBlur = (e) => {
|
|
3842
|
+
setTimeout(() => {
|
|
3843
|
+
setIsFocused(false);
|
|
3844
|
+
onBlur?.(e);
|
|
3845
|
+
}, 200);
|
|
3846
|
+
};
|
|
3847
|
+
const inputTheme = theme.input || {};
|
|
3848
|
+
const getInputStyle = () => {
|
|
3849
|
+
const style = {
|
|
3850
|
+
backgroundColor: inputTheme.backgroundColor || "#ffffff",
|
|
3851
|
+
borderColor: inputTheme.borderColor || "#e2e8f0",
|
|
3852
|
+
borderRadius: inputTheme.borderRadius || "0.5rem",
|
|
3853
|
+
padding: inputTheme.padding || "0.5rem 0.75rem",
|
|
3854
|
+
fontSize: inputTheme.fontSize || "0.875rem",
|
|
3855
|
+
borderWidth: "1px",
|
|
3856
|
+
borderStyle: "solid",
|
|
3857
|
+
transition: "all 0.2s",
|
|
3858
|
+
color: theme.colors.gray[900],
|
|
3859
|
+
width: "100%"
|
|
3860
|
+
};
|
|
3861
|
+
if (disabled) {
|
|
3862
|
+
style.backgroundColor = inputTheme.disabled?.backgroundColor || "#f1f5f9";
|
|
3863
|
+
style.borderColor = inputTheme.disabled?.borderColor || "#e2e8f0";
|
|
3864
|
+
style.opacity = 0.7;
|
|
3865
|
+
style.cursor = "not-allowed";
|
|
3866
|
+
}
|
|
3867
|
+
if (touched && error) {
|
|
3868
|
+
style.borderColor = inputTheme.error?.borderColor || "red";
|
|
3869
|
+
if (isFocused) {
|
|
3870
|
+
style.boxShadow = inputTheme.error?.ring;
|
|
3871
|
+
}
|
|
3872
|
+
} else if (isFocused && !readOnly) {
|
|
3873
|
+
style.boxShadow = inputTheme.focus?.ring;
|
|
3874
|
+
style.borderColor = inputTheme.focus?.borderColor;
|
|
3875
|
+
}
|
|
3876
|
+
return style;
|
|
3877
|
+
};
|
|
3878
|
+
return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: (0, import_clsx14.default)("w-full flex flex-col gap-1.5", className), ref: containerRef, children: [
|
|
3879
|
+
label && /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
|
|
3880
|
+
"label",
|
|
3881
|
+
{
|
|
3882
|
+
className: (0, import_clsx14.default)("text-sm font-medium text-gray-700", {
|
|
3883
|
+
"text-red-500": touched && error
|
|
3884
|
+
}),
|
|
3885
|
+
children: [
|
|
3886
|
+
label,
|
|
3887
|
+
required && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "text-red-500 ml-1", children: "*" })
|
|
3888
|
+
]
|
|
3889
|
+
}
|
|
3890
|
+
),
|
|
3891
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "relative", children: [
|
|
3892
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "relative flex items-center", children: [
|
|
3893
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
|
|
3894
|
+
"input",
|
|
3895
|
+
{
|
|
3896
|
+
type: "text",
|
|
3897
|
+
name,
|
|
3898
|
+
value: searchTerm,
|
|
3899
|
+
onChange: handleInputChange,
|
|
3900
|
+
onFocus: handleFocus,
|
|
3901
|
+
onBlur: handleInputBlur,
|
|
3902
|
+
disabled,
|
|
3903
|
+
readOnly,
|
|
3904
|
+
placeholder,
|
|
3905
|
+
className: "outline-none pr-10",
|
|
3906
|
+
style: getInputStyle(),
|
|
3907
|
+
autoComplete: "off"
|
|
3908
|
+
}
|
|
3909
|
+
),
|
|
3910
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "absolute right-3 flex items-center gap-2 text-gray-400 pointer-events-none", children: [
|
|
3911
|
+
isLoading && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "animate-spin h-4 w-4 border-2 border-primary-500 border-t-transparent rounded-full" }),
|
|
3912
|
+
!isLoading && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_fa11.FaSearch, { size: 14, className: (0, import_clsx14.default)({ "text-primary-500": isFocused }) })
|
|
3913
|
+
] })
|
|
3914
|
+
] }),
|
|
3915
|
+
isOpen && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "absolute z-50 w-full mt-1 bg-white border border-gray-200 rounded-lg shadow-xl overflow-hidden animate-in fade-in zoom-in duration-200 origin-top", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "max-h-60 overflow-y-auto", children: filteredOptions.length > 0 ? filteredOptions.map((option) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
|
|
3916
|
+
"div",
|
|
3917
|
+
{
|
|
3918
|
+
onClick: () => handleSelect(option),
|
|
3919
|
+
className: (0, import_clsx14.default)(
|
|
3920
|
+
"px-4 py-2 text-sm cursor-pointer transition-colors",
|
|
3921
|
+
value === option[valueField] ? "bg-primary-50 text-primary-700 font-medium" : "hover:bg-gray-50 text-gray-700"
|
|
3922
|
+
),
|
|
3923
|
+
children: option[labelField]
|
|
3924
|
+
},
|
|
3925
|
+
option[valueField]
|
|
3926
|
+
)) : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "px-4 py-6 text-sm text-center text-gray-500 italic", children: isLoading ? "Cargando..." : noResultsMessage }) }) })
|
|
3927
|
+
] }),
|
|
3928
|
+
touched && error && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { className: "text-red-500 text-xs mt-1", children: error })
|
|
3929
|
+
] });
|
|
3930
|
+
}
|
|
3931
|
+
|
|
3932
|
+
// src/components/slide/slide.tsx
|
|
3933
|
+
var import_react20 = require("react");
|
|
3934
|
+
var import_clsx15 = __toESM(require("clsx"), 1);
|
|
3935
|
+
var import_jsx_runtime20 = require("react/jsx-runtime");
|
|
3767
3936
|
function ITSlideToggle({
|
|
3768
3937
|
onToggle,
|
|
3769
3938
|
isOn: controlledIsOn,
|
|
@@ -3776,8 +3945,8 @@ function ITSlideToggle({
|
|
|
3776
3945
|
className = ""
|
|
3777
3946
|
}) {
|
|
3778
3947
|
const isControlled = controlledIsOn !== void 0;
|
|
3779
|
-
const [internalIsOn, setInternalIsOn] = (0,
|
|
3780
|
-
(0,
|
|
3948
|
+
const [internalIsOn, setInternalIsOn] = (0, import_react20.useState)(initialState);
|
|
3949
|
+
(0, import_react20.useEffect)(() => {
|
|
3781
3950
|
if (isControlled) {
|
|
3782
3951
|
setInternalIsOn(controlledIsOn);
|
|
3783
3952
|
}
|
|
@@ -3816,11 +3985,11 @@ function ITSlideToggle({
|
|
|
3816
3985
|
}
|
|
3817
3986
|
};
|
|
3818
3987
|
const { container, knob, translate } = sizeClasses2[size];
|
|
3819
|
-
return /* @__PURE__ */ (0,
|
|
3988
|
+
return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
|
|
3820
3989
|
"div",
|
|
3821
3990
|
{
|
|
3822
3991
|
onClick: toggleSwitch,
|
|
3823
|
-
className: (0,
|
|
3992
|
+
className: (0, import_clsx15.default)(
|
|
3824
3993
|
"flex items-center rounded-full p-1 transition-colors duration-300",
|
|
3825
3994
|
container,
|
|
3826
3995
|
disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer",
|
|
@@ -3836,10 +4005,10 @@ function ITSlideToggle({
|
|
|
3836
4005
|
toggleSwitch();
|
|
3837
4006
|
}
|
|
3838
4007
|
},
|
|
3839
|
-
children: /* @__PURE__ */ (0,
|
|
4008
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
|
|
3840
4009
|
"div",
|
|
3841
4010
|
{
|
|
3842
|
-
className: (0,
|
|
4011
|
+
className: (0, import_clsx15.default)(
|
|
3843
4012
|
"bg-white rounded-full shadow-md transform transition-transform duration-300 pointer-events-none",
|
|
3844
4013
|
knob,
|
|
3845
4014
|
isOn ? translate : "translate-x-0"
|
|
@@ -3851,9 +4020,9 @@ function ITSlideToggle({
|
|
|
3851
4020
|
}
|
|
3852
4021
|
|
|
3853
4022
|
// src/components/text/text.tsx
|
|
3854
|
-
var
|
|
4023
|
+
var import_jsx_runtime21 = require("react/jsx-runtime");
|
|
3855
4024
|
function ITText({ children, className = "" }) {
|
|
3856
|
-
return /* @__PURE__ */ (0,
|
|
4025
|
+
return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { className: `${className} text-gray-900 `, children });
|
|
3857
4026
|
}
|
|
3858
4027
|
|
|
3859
4028
|
// src/types/toast.types.ts
|
|
@@ -3867,10 +4036,10 @@ var positionStyles = {
|
|
|
3867
4036
|
};
|
|
3868
4037
|
|
|
3869
4038
|
// src/components/toast/toast.tsx
|
|
3870
|
-
var
|
|
3871
|
-
var
|
|
3872
|
-
var
|
|
3873
|
-
var
|
|
4039
|
+
var import_clsx16 = __toESM(require("clsx"), 1);
|
|
4040
|
+
var import_react21 = require("react");
|
|
4041
|
+
var import_fa12 = require("react-icons/fa");
|
|
4042
|
+
var import_jsx_runtime22 = require("react/jsx-runtime");
|
|
3874
4043
|
function ITToast({
|
|
3875
4044
|
message,
|
|
3876
4045
|
type = "info",
|
|
@@ -3878,8 +4047,8 @@ function ITToast({
|
|
|
3878
4047
|
position = "top-right",
|
|
3879
4048
|
onClose
|
|
3880
4049
|
}) {
|
|
3881
|
-
const [isVisible, setIsVisible] = (0,
|
|
3882
|
-
(0,
|
|
4050
|
+
const [isVisible, setIsVisible] = (0, import_react21.useState)(true);
|
|
4051
|
+
(0, import_react21.useEffect)(() => {
|
|
3883
4052
|
const timer = setTimeout(() => {
|
|
3884
4053
|
setIsVisible(false);
|
|
3885
4054
|
setTimeout(() => {
|
|
@@ -3899,21 +4068,21 @@ function ITToast({
|
|
|
3899
4068
|
const TypeIcon = () => {
|
|
3900
4069
|
switch (type) {
|
|
3901
4070
|
case "success":
|
|
3902
|
-
return /* @__PURE__ */ (0,
|
|
4071
|
+
return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_fa12.FaCheckCircle, { className: "w-5 h-5 flex-shrink-0" });
|
|
3903
4072
|
case "error":
|
|
3904
4073
|
case "danger":
|
|
3905
|
-
return /* @__PURE__ */ (0,
|
|
4074
|
+
return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_fa12.FaTimesCircle, { className: "w-5 h-5 flex-shrink-0" });
|
|
3906
4075
|
case "warning":
|
|
3907
|
-
return /* @__PURE__ */ (0,
|
|
4076
|
+
return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_fa12.FaExclamationTriangle, { className: "w-5 h-5 flex-shrink-0" });
|
|
3908
4077
|
case "info":
|
|
3909
4078
|
default:
|
|
3910
|
-
return /* @__PURE__ */ (0,
|
|
4079
|
+
return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_fa12.FaInfoCircle, { className: "w-5 h-5 flex-shrink-0" });
|
|
3911
4080
|
}
|
|
3912
4081
|
};
|
|
3913
|
-
return /* @__PURE__ */ (0,
|
|
4082
|
+
return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
|
|
3914
4083
|
"div",
|
|
3915
4084
|
{
|
|
3916
|
-
className: (0,
|
|
4085
|
+
className: (0, import_clsx16.default)(
|
|
3917
4086
|
"fixed z-50 p-4 rounded-xl shadow-xl flex items-center justify-between gap-4 transition-all duration-300 text-white min-w-[300px]",
|
|
3918
4087
|
positionStyles[position],
|
|
3919
4088
|
{
|
|
@@ -3926,17 +4095,17 @@ function ITToast({
|
|
|
3926
4095
|
style: { backgroundColor },
|
|
3927
4096
|
role: "alert",
|
|
3928
4097
|
children: [
|
|
3929
|
-
/* @__PURE__ */ (0,
|
|
3930
|
-
/* @__PURE__ */ (0,
|
|
3931
|
-
/* @__PURE__ */ (0,
|
|
4098
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex items-center gap-3", children: [
|
|
4099
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)(TypeIcon, {}),
|
|
4100
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "font-medium text-sm sm:text-base leading-snug", children: message })
|
|
3932
4101
|
] }),
|
|
3933
|
-
/* @__PURE__ */ (0,
|
|
4102
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
|
3934
4103
|
"button",
|
|
3935
4104
|
{
|
|
3936
4105
|
onClick: handleClose,
|
|
3937
4106
|
className: "p-1.5 rounded-full hover:bg-black/15 transition-colors focus:outline-none focus:ring-2 focus:ring-white/50",
|
|
3938
4107
|
"aria-label": "Close notification",
|
|
3939
|
-
children: /* @__PURE__ */ (0,
|
|
4108
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_fa12.FaTimes, { className: "w-4 h-4" })
|
|
3940
4109
|
}
|
|
3941
4110
|
)
|
|
3942
4111
|
]
|
|
@@ -3945,10 +4114,10 @@ function ITToast({
|
|
|
3945
4114
|
}
|
|
3946
4115
|
|
|
3947
4116
|
// src/components/dropfile/dropfile.tsx
|
|
3948
|
-
var
|
|
4117
|
+
var import_react22 = require("react");
|
|
3949
4118
|
var import_react_dropzone = require("react-dropzone");
|
|
3950
|
-
var
|
|
3951
|
-
var
|
|
4119
|
+
var import_clsx17 = __toESM(require("clsx"), 1);
|
|
4120
|
+
var import_jsx_runtime23 = require("react/jsx-runtime");
|
|
3952
4121
|
var ITDropfile = ({
|
|
3953
4122
|
onFileSelect,
|
|
3954
4123
|
onCancel,
|
|
@@ -3961,15 +4130,15 @@ var ITDropfile = ({
|
|
|
3961
4130
|
onStatusChange,
|
|
3962
4131
|
initialPreviewUrl
|
|
3963
4132
|
}) => {
|
|
3964
|
-
const [selectedFile, setSelectedFile] = (0,
|
|
3965
|
-
const [fileType, setFileType] = (0,
|
|
3966
|
-
const [imagePreview, setImagePreview] = (0,
|
|
3967
|
-
const [isConfirmed, setIsConfirmed] = (0,
|
|
3968
|
-
const [internalUploadStatus, setInternalUploadStatus] = (0,
|
|
4133
|
+
const [selectedFile, setSelectedFile] = (0, import_react22.useState)(null);
|
|
4134
|
+
const [fileType, setFileType] = (0, import_react22.useState)(null);
|
|
4135
|
+
const [imagePreview, setImagePreview] = (0, import_react22.useState)(initialPreviewUrl || null);
|
|
4136
|
+
const [isConfirmed, setIsConfirmed] = (0, import_react22.useState)(false);
|
|
4137
|
+
const [internalUploadStatus, setInternalUploadStatus] = (0, import_react22.useState)(
|
|
3969
4138
|
initialPreviewUrl ? "subido" /* UPLOADED */ : "pendiente" /* PENDING */
|
|
3970
4139
|
);
|
|
3971
|
-
const canvasRef = (0,
|
|
3972
|
-
(0,
|
|
4140
|
+
const canvasRef = (0, import_react22.useRef)(null);
|
|
4141
|
+
(0, import_react22.useEffect)(() => {
|
|
3973
4142
|
if (initialPreviewUrl && !selectedFile) {
|
|
3974
4143
|
setImagePreview(initialPreviewUrl);
|
|
3975
4144
|
if (externalStatus === void 0) setInternalUploadStatus("subido" /* UPLOADED */);
|
|
@@ -4058,9 +4227,9 @@ var ITDropfile = ({
|
|
|
4058
4227
|
}
|
|
4059
4228
|
};
|
|
4060
4229
|
const { label, color, dotColor } = config[status];
|
|
4061
|
-
return /* @__PURE__ */ (0,
|
|
4062
|
-
/* @__PURE__ */ (0,
|
|
4063
|
-
/* @__PURE__ */ (0,
|
|
4230
|
+
return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: `inline-flex items-center gap-2 px-2.5 py-1 rounded-full border ${color}`, children: [
|
|
4231
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: `w-2 h-2 rounded-full ${dotColor}` }),
|
|
4232
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "text-xs font-medium flex items-center gap-1.5", children: label })
|
|
4064
4233
|
] });
|
|
4065
4234
|
};
|
|
4066
4235
|
const onDrop = (acceptedFiles) => {
|
|
@@ -4092,12 +4261,12 @@ var ITDropfile = ({
|
|
|
4092
4261
|
accept: getAcceptedFileTypes(),
|
|
4093
4262
|
maxFiles: 1
|
|
4094
4263
|
});
|
|
4095
|
-
(0,
|
|
4264
|
+
(0, import_react22.useEffect)(() => {
|
|
4096
4265
|
const renderPDF = async () => {
|
|
4097
4266
|
};
|
|
4098
4267
|
renderPDF();
|
|
4099
4268
|
}, [selectedFile, fileType]);
|
|
4100
|
-
(0,
|
|
4269
|
+
(0, import_react22.useEffect)(() => {
|
|
4101
4270
|
return () => {
|
|
4102
4271
|
if (imagePreview) {
|
|
4103
4272
|
URL.revokeObjectURL(imagePreview);
|
|
@@ -4135,19 +4304,19 @@ var ITDropfile = ({
|
|
|
4135
4304
|
handleCancel();
|
|
4136
4305
|
};
|
|
4137
4306
|
const isImage = fileType && fileType.startsWith("image/");
|
|
4138
|
-
return /* @__PURE__ */ (0,
|
|
4139
|
-
/* @__PURE__ */ (0,
|
|
4140
|
-
/* @__PURE__ */ (0,
|
|
4307
|
+
return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: (0, import_clsx17.default)("w-full transition-all duration-300", containerClassName), children: [
|
|
4308
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex items-center justify-between mb-2", children: [
|
|
4309
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("label", { className: "block text-sm font-semibold text-gray-700", children: [
|
|
4141
4310
|
"Subir archivo ",
|
|
4142
|
-
/* @__PURE__ */ (0,
|
|
4311
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("span", { className: "text-gray-400 font-normal text-xs", children: [
|
|
4143
4312
|
"(",
|
|
4144
4313
|
getFileExtensions(),
|
|
4145
4314
|
")"
|
|
4146
4315
|
] })
|
|
4147
4316
|
] }),
|
|
4148
|
-
showStatusBadge && selectedFile && /* @__PURE__ */ (0,
|
|
4317
|
+
showStatusBadge && selectedFile && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(StatusBadge, { status: uploadStatus })
|
|
4149
4318
|
] }),
|
|
4150
|
-
!selectedFile && !imagePreview ? /* @__PURE__ */ (0,
|
|
4319
|
+
!selectedFile && !imagePreview ? /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
|
|
4151
4320
|
"div",
|
|
4152
4321
|
{
|
|
4153
4322
|
...getRootProps(),
|
|
@@ -4157,41 +4326,41 @@ var ITDropfile = ({
|
|
|
4157
4326
|
${isDragActive ? "border-primary-500 bg-primary-50 scale-[1.01]" : "border-gray-300 bg-white hover:border-primary-400 hover:bg-gray-50"}
|
|
4158
4327
|
`,
|
|
4159
4328
|
children: [
|
|
4160
|
-
/* @__PURE__ */ (0,
|
|
4161
|
-
/* @__PURE__ */ (0,
|
|
4329
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("input", { ...getInputProps() }),
|
|
4330
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: `mb-3 p-3 rounded-full transition-colors duration-300 ${isDragActive ? "bg-primary-100" : "bg-gray-100 group-hover:bg-primary-50"}`, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
|
|
4162
4331
|
"svg",
|
|
4163
4332
|
{
|
|
4164
4333
|
className: `w-6 h-6 transition-colors duration-300 ${isDragActive ? "text-primary-600" : "text-gray-400 group-hover:text-primary-500"}`,
|
|
4165
4334
|
fill: "none",
|
|
4166
4335
|
viewBox: "0 0 24 24",
|
|
4167
4336
|
stroke: "currentColor",
|
|
4168
|
-
children: /* @__PURE__ */ (0,
|
|
4337
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" })
|
|
4169
4338
|
}
|
|
4170
4339
|
) }),
|
|
4171
|
-
/* @__PURE__ */ (0,
|
|
4340
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "text-center space-y-1", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("p", { className: `text-sm font-medium transition-colors duration-300 ${isDragActive ? "text-primary-700" : "text-gray-700"}`, children: isDragActive ? "\xA1Suelta aqu\xED!" : "Haz clic o arrastra" }) })
|
|
4172
4341
|
]
|
|
4173
4342
|
}
|
|
4174
|
-
) : /* @__PURE__ */ (0,
|
|
4175
|
-
/* @__PURE__ */ (0,
|
|
4176
|
-
/* @__PURE__ */ (0,
|
|
4177
|
-
/* @__PURE__ */ (0,
|
|
4178
|
-
/* @__PURE__ */ (0,
|
|
4179
|
-
/* @__PURE__ */ (0,
|
|
4343
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "w-full bg-white border border-gray-200 rounded-xl shadow-sm overflow-hidden animate-fade-in", children: [
|
|
4344
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "flex items-center justify-between p-3 bg-gray-50 border-b border-gray-100", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex items-center gap-3 overflow-hidden", children: [
|
|
4345
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "flex-shrink-0 w-8 h-8 rounded-lg bg-primary-100 flex items-center justify-center text-primary-600", children: selectedFile && fileType?.startsWith("image/") || !selectedFile && imagePreview ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("svg", { className: "w-5 h-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" }) }) : /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("svg", { className: "w-5 h-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" }) }) }),
|
|
4346
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "min-w-0", children: [
|
|
4347
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("p", { className: "text-xs font-medium text-gray-900 truncate", title: selectedFile?.name || "Imagen cargada", children: selectedFile?.name || "Imagen cargada" }),
|
|
4348
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("p", { className: "text-[10px] text-gray-500", children: selectedFile ? (selectedFile.size / 1024 / 1024).toFixed(2) + " MB" : "" })
|
|
4180
4349
|
] })
|
|
4181
4350
|
] }) }),
|
|
4182
|
-
/* @__PURE__ */ (0,
|
|
4351
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: (0, import_clsx17.default)("relative bg-gray-100 flex items-center justify-center", !contentClassName ? "max-h-[200px] min-h-[100px] overflow-auto" : contentClassName), children: selectedFile && fileType?.startsWith("image/") || !selectedFile && imagePreview ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
|
|
4183
4352
|
"img",
|
|
4184
4353
|
{
|
|
4185
4354
|
src: imagePreview,
|
|
4186
4355
|
alt: "Vista previa",
|
|
4187
4356
|
className: "w-full h-full object-contain max-h-[200px]"
|
|
4188
4357
|
}
|
|
4189
|
-
) : /* @__PURE__ */ (0,
|
|
4190
|
-
/* @__PURE__ */ (0,
|
|
4191
|
-
/* @__PURE__ */ (0,
|
|
4358
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "py-8 flex flex-col items-center text-gray-400", children: [
|
|
4359
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("svg", { className: "w-10 h-10 mb-2 opacity-50", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z" }) }),
|
|
4360
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "text-xs", children: "Sin vista previa" })
|
|
4192
4361
|
] }) }),
|
|
4193
|
-
/* @__PURE__ */ (0,
|
|
4194
|
-
/* @__PURE__ */ (0,
|
|
4362
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "px-3 py-2 bg-white border-t border-gray-100 flex justify-end gap-2", children: !isConfirmed ? /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_jsx_runtime23.Fragment, { children: [
|
|
4363
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
|
|
4195
4364
|
"button",
|
|
4196
4365
|
{
|
|
4197
4366
|
type: "button",
|
|
@@ -4200,31 +4369,31 @@ var ITDropfile = ({
|
|
|
4200
4369
|
children: "Cancelar"
|
|
4201
4370
|
}
|
|
4202
4371
|
),
|
|
4203
|
-
/* @__PURE__ */ (0,
|
|
4372
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
|
|
4204
4373
|
"button",
|
|
4205
4374
|
{
|
|
4206
4375
|
type: "button",
|
|
4207
4376
|
onClick: handleConfirm,
|
|
4208
4377
|
className: "px-3 py-1.5 text-xs font-medium text-white bg-primary-600 rounded-lg hover:bg-primary-700 shadow-sm transition-colors flex items-center gap-1",
|
|
4209
4378
|
children: [
|
|
4210
|
-
/* @__PURE__ */ (0,
|
|
4211
|
-
/* @__PURE__ */ (0,
|
|
4379
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { children: "Confirmar" }),
|
|
4380
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("svg", { className: "w-3 h-3", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 13l4 4L19 7" }) })
|
|
4212
4381
|
]
|
|
4213
4382
|
}
|
|
4214
4383
|
)
|
|
4215
|
-
] }) : /* @__PURE__ */ (0,
|
|
4384
|
+
] }) : /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
|
|
4216
4385
|
"button",
|
|
4217
4386
|
{
|
|
4218
4387
|
type: "button",
|
|
4219
4388
|
onClick: handleDelete,
|
|
4220
4389
|
className: "px-3 py-1.5 text-xs font-medium text-danger-600 bg-danger-50 border border-danger-100 rounded-lg hover:bg-danger-100 transition-colors flex items-center gap-1",
|
|
4221
4390
|
children: [
|
|
4222
|
-
/* @__PURE__ */ (0,
|
|
4223
|
-
/* @__PURE__ */ (0,
|
|
4391
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("svg", { className: "w-3 h-3", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" }) }),
|
|
4392
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { children: "Eliminar" })
|
|
4224
4393
|
]
|
|
4225
4394
|
}
|
|
4226
4395
|
) }),
|
|
4227
|
-
uploadStatus === "subiendo" /* UPLOADING */ && /* @__PURE__ */ (0,
|
|
4396
|
+
uploadStatus === "subiendo" /* UPLOADING */ && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "px-4 pb-2", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "w-full bg-gray-200 rounded-full h-1.5", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
|
|
4228
4397
|
"div",
|
|
4229
4398
|
{
|
|
4230
4399
|
className: "bg-primary-600 h-1.5 rounded-full transition-all duration-1000 ease-out",
|
|
@@ -4240,12 +4409,12 @@ var ITDropfile = ({
|
|
|
4240
4409
|
var dropfile_default = ITDropfile;
|
|
4241
4410
|
|
|
4242
4411
|
// src/components/layout/layout.tsx
|
|
4243
|
-
var
|
|
4412
|
+
var import_react25 = require("react");
|
|
4244
4413
|
|
|
4245
4414
|
// src/components/topbar/topbar.tsx
|
|
4246
|
-
var
|
|
4247
|
-
var
|
|
4248
|
-
var
|
|
4415
|
+
var import_fa13 = require("react-icons/fa");
|
|
4416
|
+
var import_react23 = require("react");
|
|
4417
|
+
var import_jsx_runtime24 = require("react/jsx-runtime");
|
|
4249
4418
|
function ITTopBar({
|
|
4250
4419
|
logo,
|
|
4251
4420
|
logoText,
|
|
@@ -4255,10 +4424,10 @@ function ITTopBar({
|
|
|
4255
4424
|
navItems,
|
|
4256
4425
|
onNavItemClick
|
|
4257
4426
|
}) {
|
|
4258
|
-
const [isUserMenuOpen, setIsUserMenuOpen] = (0,
|
|
4259
|
-
const userMenuRef = (0,
|
|
4427
|
+
const [isUserMenuOpen, setIsUserMenuOpen] = (0, import_react23.useState)(false);
|
|
4428
|
+
const userMenuRef = (0, import_react23.useRef)(null);
|
|
4260
4429
|
useClickOutside_default(userMenuRef, () => setIsUserMenuOpen(false));
|
|
4261
|
-
return /* @__PURE__ */ (0,
|
|
4430
|
+
return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
4262
4431
|
"header",
|
|
4263
4432
|
{
|
|
4264
4433
|
className: "sticky top-0 z-40 backdrop-blur-md transition-all duration-300",
|
|
@@ -4267,9 +4436,9 @@ function ITTopBar({
|
|
|
4267
4436
|
borderBottom: `1px solid ${theme.topbar?.borderColor || "#e2e8f0"}`,
|
|
4268
4437
|
boxShadow: theme.topbar?.shadow || "none"
|
|
4269
4438
|
},
|
|
4270
|
-
children: /* @__PURE__ */ (0,
|
|
4271
|
-
/* @__PURE__ */ (0,
|
|
4272
|
-
showMobileMenuButton && /* @__PURE__ */ (0,
|
|
4439
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex items-center justify-between h-[72px] px-6 lg:px-8", children: [
|
|
4440
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex items-center gap-5", children: [
|
|
4441
|
+
showMobileMenuButton && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
4273
4442
|
"button",
|
|
4274
4443
|
{
|
|
4275
4444
|
className: "lg:hidden p-2.5 rounded-xl transition-colors duration-200",
|
|
@@ -4279,12 +4448,12 @@ function ITTopBar({
|
|
|
4279
4448
|
onMouseEnter: (e) => e.currentTarget.style.backgroundColor = theme.topbar?.userMenu?.hoverBackground || "#f1f5f9",
|
|
4280
4449
|
onMouseLeave: (e) => e.currentTarget.style.backgroundColor = "transparent",
|
|
4281
4450
|
onClick: onToggleMobileMenu,
|
|
4282
|
-
children: /* @__PURE__ */ (0,
|
|
4451
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_fa13.FaBars, { className: "w-[1.125rem] h-[1.125rem]" })
|
|
4283
4452
|
}
|
|
4284
4453
|
),
|
|
4285
|
-
/* @__PURE__ */ (0,
|
|
4286
|
-
logo && /* @__PURE__ */ (0,
|
|
4287
|
-
logoText && /* @__PURE__ */ (0,
|
|
4454
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex items-center gap-3", children: [
|
|
4455
|
+
logo && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "flex-shrink-0 drop-shadow-sm", children: logo }),
|
|
4456
|
+
logoText && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
4288
4457
|
"span",
|
|
4289
4458
|
{
|
|
4290
4459
|
className: "text-[1.15rem] font-bold tracking-tight",
|
|
@@ -4293,7 +4462,7 @@ function ITTopBar({
|
|
|
4293
4462
|
}
|
|
4294
4463
|
)
|
|
4295
4464
|
] }),
|
|
4296
|
-
navItems && navItems.length > 0 && /* @__PURE__ */ (0,
|
|
4465
|
+
navItems && navItems.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("nav", { className: "hidden md:flex ml-8 space-x-1 border-l pl-8", style: { borderColor: theme.topbar?.borderColor || "#e2e8f0" }, children: navItems.map((item) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
4297
4466
|
"button",
|
|
4298
4467
|
{
|
|
4299
4468
|
onClick: () => onNavItemClick?.(item.id),
|
|
@@ -4307,16 +4476,16 @@ function ITTopBar({
|
|
|
4307
4476
|
e.currentTarget.style.color = theme.topbar?.textColor || "#475569";
|
|
4308
4477
|
e.currentTarget.style.backgroundColor = "transparent";
|
|
4309
4478
|
},
|
|
4310
|
-
children: /* @__PURE__ */ (0,
|
|
4311
|
-
item.icon && /* @__PURE__ */ (0,
|
|
4479
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex items-center gap-2", children: [
|
|
4480
|
+
item.icon && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "opacity-70", children: item.icon }),
|
|
4312
4481
|
item.label
|
|
4313
4482
|
] })
|
|
4314
4483
|
},
|
|
4315
4484
|
item.id
|
|
4316
4485
|
)) })
|
|
4317
4486
|
] }),
|
|
4318
|
-
userMenu && /* @__PURE__ */ (0,
|
|
4319
|
-
/* @__PURE__ */ (0,
|
|
4487
|
+
userMenu && /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "relative", children: [
|
|
4488
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
|
|
4320
4489
|
"button",
|
|
4321
4490
|
{
|
|
4322
4491
|
type: "button",
|
|
@@ -4332,19 +4501,19 @@ function ITTopBar({
|
|
|
4332
4501
|
},
|
|
4333
4502
|
onClick: () => setIsUserMenuOpen(!isUserMenuOpen),
|
|
4334
4503
|
children: [
|
|
4335
|
-
/* @__PURE__ */ (0,
|
|
4336
|
-
userMenu.userImage ? /* @__PURE__ */ (0,
|
|
4504
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "relative", children: [
|
|
4505
|
+
userMenu.userImage ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
4337
4506
|
"img",
|
|
4338
4507
|
{
|
|
4339
4508
|
className: "w-9 h-9 rounded-full object-cover ring-2 ring-white shadow-sm",
|
|
4340
4509
|
src: userMenu.userImage,
|
|
4341
4510
|
alt: "Current user"
|
|
4342
4511
|
}
|
|
4343
|
-
) : /* @__PURE__ */ (0,
|
|
4344
|
-
/* @__PURE__ */ (0,
|
|
4512
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "w-9 h-9 rounded-full bg-slate-100 flex items-center justify-center ring-2 ring-white shadow-sm", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_fa13.FaUserCircle, { className: "w-6 h-6", style: { color: theme.topbar?.iconColor || "#94a3b8" } }) }),
|
|
4513
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "absolute bottom-0 right-0 w-2.5 h-2.5 bg-green-500 border-2 border-white rounded-full" })
|
|
4345
4514
|
] }),
|
|
4346
|
-
/* @__PURE__ */ (0,
|
|
4347
|
-
/* @__PURE__ */ (0,
|
|
4515
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "hidden sm:flex flex-col text-left py-0.5", children: [
|
|
4516
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
4348
4517
|
"span",
|
|
4349
4518
|
{
|
|
4350
4519
|
className: "font-semibold text-[0.85rem] leading-tight",
|
|
@@ -4352,7 +4521,7 @@ function ITTopBar({
|
|
|
4352
4521
|
children: userMenu.userName
|
|
4353
4522
|
}
|
|
4354
4523
|
),
|
|
4355
|
-
/* @__PURE__ */ (0,
|
|
4524
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
4356
4525
|
"span",
|
|
4357
4526
|
{
|
|
4358
4527
|
className: "text-[0.7rem] font-medium",
|
|
@@ -4364,7 +4533,7 @@ function ITTopBar({
|
|
|
4364
4533
|
]
|
|
4365
4534
|
}
|
|
4366
4535
|
),
|
|
4367
|
-
/* @__PURE__ */ (0,
|
|
4536
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
|
|
4368
4537
|
"div",
|
|
4369
4538
|
{
|
|
4370
4539
|
ref: userMenuRef,
|
|
@@ -4377,15 +4546,15 @@ function ITTopBar({
|
|
|
4377
4546
|
border: `1px solid ${theme.topbar?.userMenu?.dropdown?.borderColor || "#f1f5f9"}`
|
|
4378
4547
|
},
|
|
4379
4548
|
children: [
|
|
4380
|
-
/* @__PURE__ */ (0,
|
|
4381
|
-
/* @__PURE__ */ (0,
|
|
4382
|
-
/* @__PURE__ */ (0,
|
|
4549
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "px-5 py-4 border-b bg-slate-50/50", style: { borderColor: theme.topbar?.userMenu?.dropdown?.borderColor || "#f1f5f9" }, children: [
|
|
4550
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "block font-bold text-[0.9rem]", style: { color: theme.topbar?.userMenu?.textColor || "#0f172a" }, children: userMenu.userName }),
|
|
4551
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "block text-xs font-medium truncate mt-0.5", style: { color: theme.topbar?.userMenu?.subtitleColor || "#64748b" }, children: userMenu.userEmail })
|
|
4383
4552
|
] }),
|
|
4384
|
-
/* @__PURE__ */ (0,
|
|
4553
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)("ul", { className: "py-2", children: userMenu.menuItems.map((m, i) => {
|
|
4385
4554
|
const isDestructive = m.label.toLowerCase().includes("salir") || m.label.toLowerCase().includes("cerrar") || m.label.toLowerCase().includes("logout");
|
|
4386
|
-
return /* @__PURE__ */ (0,
|
|
4387
|
-
i === userMenu.menuItems.length - 1 && isDestructive && i > 0 && /* @__PURE__ */ (0,
|
|
4388
|
-
/* @__PURE__ */ (0,
|
|
4555
|
+
return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("li", { className: "px-2", children: [
|
|
4556
|
+
i === userMenu.menuItems.length - 1 && isDestructive && i > 0 && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "h-px bg-slate-100 my-1 mx-2" }),
|
|
4557
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
4389
4558
|
"button",
|
|
4390
4559
|
{
|
|
4391
4560
|
onClick: (e) => {
|
|
@@ -4415,9 +4584,9 @@ function ITTopBar({
|
|
|
4415
4584
|
}
|
|
4416
4585
|
|
|
4417
4586
|
// src/components/sidebar/sidebar.tsx
|
|
4418
|
-
var
|
|
4419
|
-
var
|
|
4420
|
-
var
|
|
4587
|
+
var import_react24 = require("react");
|
|
4588
|
+
var import_fa14 = require("react-icons/fa");
|
|
4589
|
+
var import_jsx_runtime25 = require("react/jsx-runtime");
|
|
4421
4590
|
function ITSidebar({
|
|
4422
4591
|
navigationItems = [],
|
|
4423
4592
|
isCollapsed = false,
|
|
@@ -4425,12 +4594,12 @@ function ITSidebar({
|
|
|
4425
4594
|
className = "",
|
|
4426
4595
|
visibleOnMobile = false
|
|
4427
4596
|
}) {
|
|
4428
|
-
const [expandedItems, setExpandedItems] = (0,
|
|
4429
|
-
const [isHovering, setIsHovering] = (0,
|
|
4430
|
-
const sidebarRef = (0,
|
|
4431
|
-
const hoverTimeoutRef = (0,
|
|
4432
|
-
const leaveTimeoutRef = (0,
|
|
4433
|
-
(0,
|
|
4597
|
+
const [expandedItems, setExpandedItems] = (0, import_react24.useState)(/* @__PURE__ */ new Set());
|
|
4598
|
+
const [isHovering, setIsHovering] = (0, import_react24.useState)(false);
|
|
4599
|
+
const sidebarRef = (0, import_react24.useRef)(null);
|
|
4600
|
+
const hoverTimeoutRef = (0, import_react24.useRef)(null);
|
|
4601
|
+
const leaveTimeoutRef = (0, import_react24.useRef)(null);
|
|
4602
|
+
(0, import_react24.useEffect)(() => {
|
|
4434
4603
|
const handleMouseEnter = () => {
|
|
4435
4604
|
if (hoverTimeoutRef.current) clearTimeout(hoverTimeoutRef.current);
|
|
4436
4605
|
if (leaveTimeoutRef.current) clearTimeout(leaveTimeoutRef.current);
|
|
@@ -4470,7 +4639,7 @@ function ITSidebar({
|
|
|
4470
4639
|
};
|
|
4471
4640
|
const isSidebarCollapsed = visibleOnMobile ? false : !isHovering && isCollapsed;
|
|
4472
4641
|
const sidebarWidth = isSidebarCollapsed ? "w-[88px]" : "w-[280px]";
|
|
4473
|
-
return /* @__PURE__ */ (0,
|
|
4642
|
+
return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
|
|
4474
4643
|
"aside",
|
|
4475
4644
|
{
|
|
4476
4645
|
ref: sidebarRef,
|
|
@@ -4489,8 +4658,8 @@ function ITSidebar({
|
|
|
4489
4658
|
WebkitBackdropFilter: "blur(12px)",
|
|
4490
4659
|
backdropFilter: "blur(12px)"
|
|
4491
4660
|
},
|
|
4492
|
-
children: /* @__PURE__ */ (0,
|
|
4493
|
-
/* @__PURE__ */ (0,
|
|
4661
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("nav", { className: "flex-1 py-6 overflow-y-auto overflow-x-hidden custom-scrollbar px-4", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("ul", { className: "space-y-2", children: navigationItems.map((item) => /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("li", { className: "relative group/navitem", children: [
|
|
4662
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
|
|
4494
4663
|
"div",
|
|
4495
4664
|
{
|
|
4496
4665
|
className: `flex items-center cursor-pointer
|
|
@@ -4511,15 +4680,15 @@ function ITSidebar({
|
|
|
4511
4680
|
},
|
|
4512
4681
|
onClick: () => handleItemClick(item),
|
|
4513
4682
|
children: [
|
|
4514
|
-
item.isActive && !isSidebarCollapsed && /* @__PURE__ */ (0,
|
|
4683
|
+
item.isActive && !isSidebarCollapsed && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
|
|
4515
4684
|
"div",
|
|
4516
4685
|
{
|
|
4517
4686
|
className: "absolute left-0 top-1/4 bottom-1/4 w-[3px] rounded-r-full transition-all",
|
|
4518
4687
|
style: { backgroundColor: theme.sidebar?.active?.iconColor || "#10b981", boxShadow: `0 0 10px ${theme.sidebar?.active?.iconColor || "#10b981"}` }
|
|
4519
4688
|
}
|
|
4520
4689
|
),
|
|
4521
|
-
/* @__PURE__ */ (0,
|
|
4522
|
-
item.icon && /* @__PURE__ */ (0,
|
|
4690
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: `flex items-center ${!isSidebarCollapsed ? "gap-3.5" : "justify-center"} relative z-10 w-full`, children: [
|
|
4691
|
+
item.icon && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
|
|
4523
4692
|
"div",
|
|
4524
4693
|
{
|
|
4525
4694
|
className: `transition-all duration-300 flex-shrink-0 flex items-center justify-center`,
|
|
@@ -4532,7 +4701,7 @@ function ITSidebar({
|
|
|
4532
4701
|
children: item.icon
|
|
4533
4702
|
}
|
|
4534
4703
|
),
|
|
4535
|
-
!isSidebarCollapsed && /* @__PURE__ */ (0,
|
|
4704
|
+
!isSidebarCollapsed && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
|
|
4536
4705
|
"span",
|
|
4537
4706
|
{
|
|
4538
4707
|
className: `transition-all duration-300 truncate tracking-wide`,
|
|
@@ -4545,15 +4714,15 @@ function ITSidebar({
|
|
|
4545
4714
|
}
|
|
4546
4715
|
)
|
|
4547
4716
|
] }),
|
|
4548
|
-
!isSidebarCollapsed && item.subitems && item.subitems.length > 0 && /* @__PURE__ */ (0,
|
|
4717
|
+
!isSidebarCollapsed && item.subitems && item.subitems.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
|
|
4549
4718
|
"div",
|
|
4550
4719
|
{
|
|
4551
4720
|
className: `flex-shrink-0 transition-transform duration-300 ease-[cubic-bezier(0.2,0,0,1)] ${expandedItems.has(item.id) ? "rotate-180" : ""}`,
|
|
4552
4721
|
style: { color: item.isActive ? theme.sidebar?.active?.color || "#0f172a" : theme.sidebar?.icon?.color || "#64748b", opacity: 0.7 },
|
|
4553
|
-
children: /* @__PURE__ */ (0,
|
|
4722
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_fa14.FaChevronDown, { className: "w-3 h-3" })
|
|
4554
4723
|
}
|
|
4555
4724
|
),
|
|
4556
|
-
item.badge && /* @__PURE__ */ (0,
|
|
4725
|
+
item.badge && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
|
|
4557
4726
|
"span",
|
|
4558
4727
|
{
|
|
4559
4728
|
className: `
|
|
@@ -4571,7 +4740,7 @@ function ITSidebar({
|
|
|
4571
4740
|
]
|
|
4572
4741
|
}
|
|
4573
4742
|
),
|
|
4574
|
-
isSidebarCollapsed && /* @__PURE__ */ (0,
|
|
4743
|
+
isSidebarCollapsed && /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
|
|
4575
4744
|
"div",
|
|
4576
4745
|
{
|
|
4577
4746
|
className: "absolute left-full top-0 ml-4 rounded-2xl opacity-0 invisible group-hover/navitem:opacity-100 group-hover/navitem:visible transition-all duration-300 pointer-events-none z-50 min-w-[220px] overflow-hidden -translate-x-2 group-hover/navitem:translate-x-0 shadow-[0_10px_40px_-10px_rgba(0,0,0,0.15)]",
|
|
@@ -4582,27 +4751,27 @@ function ITSidebar({
|
|
|
4582
4751
|
backdropFilter: "blur(16px)"
|
|
4583
4752
|
},
|
|
4584
4753
|
children: [
|
|
4585
|
-
/* @__PURE__ */ (0,
|
|
4586
|
-
item.icon && /* @__PURE__ */ (0,
|
|
4587
|
-
/* @__PURE__ */ (0,
|
|
4754
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "px-5 py-4 flex items-center gap-3 font-semibold border-b", style: { borderColor: theme.sidebar?.borderColor || "#e2e8f0", color: theme.sidebar?.active?.color || "#0f172a" }, children: [
|
|
4755
|
+
item.icon && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { style: { color: theme.sidebar?.active?.iconColor || "#10b981" }, className: "text-xl drop-shadow-sm", children: item.icon }),
|
|
4756
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "tracking-wide text-[15px]", children: item.label })
|
|
4588
4757
|
] }),
|
|
4589
|
-
item.subitems && item.subitems.length > 0 ? /* @__PURE__ */ (0,
|
|
4758
|
+
item.subitems && item.subitems.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "py-2", children: item.subitems.map((subitem) => /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
|
|
4590
4759
|
"div",
|
|
4591
4760
|
{
|
|
4592
4761
|
className: `px-5 py-2.5 text-sm flex items-center gap-3 transition-colors`,
|
|
4593
4762
|
children: [
|
|
4594
|
-
/* @__PURE__ */ (0,
|
|
4595
|
-
/* @__PURE__ */ (0,
|
|
4763
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: `w-1.5 h-1.5 rounded-full transition-all ${subitem.isActive ? "scale-125" : ""}`, style: { backgroundColor: subitem.isActive ? theme.sidebar?.active?.iconColor || "#10b981" : theme.sidebar?.icon?.color || "#94a3b8" } }),
|
|
4764
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { style: { color: subitem.isActive ? theme.sidebar?.active?.color || "#0f172a" : theme.sidebar?.label?.color || "#475569", fontWeight: subitem.isActive ? 600 : 500 }, children: subitem.label })
|
|
4596
4765
|
]
|
|
4597
4766
|
},
|
|
4598
4767
|
subitem.id
|
|
4599
|
-
)) }) : /* @__PURE__ */ (0,
|
|
4768
|
+
)) }) : /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "px-5 py-3 text-sm text-zinc-500 italic", children: "No hay submen\xFA" })
|
|
4600
4769
|
]
|
|
4601
4770
|
}
|
|
4602
4771
|
),
|
|
4603
|
-
!isSidebarCollapsed && item.subitems && item.subitems.length > 0 && /* @__PURE__ */ (0,
|
|
4604
|
-
subitem.isActive && /* @__PURE__ */ (0,
|
|
4605
|
-
/* @__PURE__ */ (0,
|
|
4772
|
+
!isSidebarCollapsed && item.subitems && item.subitems.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: `overflow-hidden transition-all duration-400 ease-[cubic-bezier(0.2,0,0,1)] ${expandedItems.has(item.id) ? "max-h-[500px] opacity-100 mt-1" : "max-h-0 opacity-0"}`, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("ul", { className: "ml-5 pl-4 space-y-1 py-1", style: { borderLeft: `2px solid ${theme.sidebar?.borderColor || "#e2e8f0"}` }, children: item.subitems.map((subitem) => /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("li", { className: "relative", children: [
|
|
4773
|
+
subitem.isActive && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "absolute -left-[18px] top-1/2 -translate-y-1/2 w-4 h-[2px] rounded-r-full", style: { backgroundColor: theme.sidebar?.active?.iconColor || "#10b981" } }),
|
|
4774
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
|
|
4606
4775
|
"button",
|
|
4607
4776
|
{
|
|
4608
4777
|
onClick: subitem.action,
|
|
@@ -4636,7 +4805,7 @@ function ITSidebar({
|
|
|
4636
4805
|
}
|
|
4637
4806
|
|
|
4638
4807
|
// src/components/layout/layout.tsx
|
|
4639
|
-
var
|
|
4808
|
+
var import_jsx_runtime26 = require("react/jsx-runtime");
|
|
4640
4809
|
function ITLayout({
|
|
4641
4810
|
topBar,
|
|
4642
4811
|
sidebar,
|
|
@@ -4644,10 +4813,10 @@ function ITLayout({
|
|
|
4644
4813
|
className = "",
|
|
4645
4814
|
contentClassName = ""
|
|
4646
4815
|
}) {
|
|
4647
|
-
const [desktopCollapsed, setDesktopCollapsed] = (0,
|
|
4648
|
-
const [mobileSidebarOpen, setMobileSidebarOpen] = (0,
|
|
4649
|
-
return /* @__PURE__ */ (0,
|
|
4650
|
-
/* @__PURE__ */ (0,
|
|
4816
|
+
const [desktopCollapsed, setDesktopCollapsed] = (0, import_react25.useState)(true);
|
|
4817
|
+
const [mobileSidebarOpen, setMobileSidebarOpen] = (0, import_react25.useState)(false);
|
|
4818
|
+
return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: `flex flex-col h-screen overflow-hidden w-full ${className}`, children: [
|
|
4819
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
|
|
4651
4820
|
ITTopBar,
|
|
4652
4821
|
{
|
|
4653
4822
|
...topBar,
|
|
@@ -4655,10 +4824,10 @@ function ITLayout({
|
|
|
4655
4824
|
onToggleMobileMenu: () => setMobileSidebarOpen((v) => !v)
|
|
4656
4825
|
}
|
|
4657
4826
|
),
|
|
4658
|
-
/* @__PURE__ */ (0,
|
|
4659
|
-
/* @__PURE__ */ (0,
|
|
4660
|
-
/* @__PURE__ */ (0,
|
|
4661
|
-
/* @__PURE__ */ (0,
|
|
4827
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "flex flex-1 overflow-hidden relative", style: { backgroundColor: theme.layout?.backgroundColor || "#f8fafc" }, children: [
|
|
4828
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "hidden lg:block relative z-40 h-full", children: [
|
|
4829
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "w-[88px] h-full flex-shrink-0" }),
|
|
4830
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "absolute top-0 left-0 h-full", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
|
|
4662
4831
|
ITSidebar,
|
|
4663
4832
|
{
|
|
4664
4833
|
...sidebar,
|
|
@@ -4669,17 +4838,17 @@ function ITLayout({
|
|
|
4669
4838
|
}
|
|
4670
4839
|
) })
|
|
4671
4840
|
] }),
|
|
4672
|
-
mobileSidebarOpen && /* @__PURE__ */ (0,
|
|
4841
|
+
mobileSidebarOpen && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
|
|
4673
4842
|
"div",
|
|
4674
4843
|
{
|
|
4675
4844
|
className: "lg:hidden fixed inset-0 z-50 transition-opacity duration-300 backdrop-blur-sm bg-black/40",
|
|
4676
4845
|
onClick: () => setMobileSidebarOpen(false),
|
|
4677
|
-
children: /* @__PURE__ */ (0,
|
|
4846
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
|
|
4678
4847
|
"div",
|
|
4679
4848
|
{
|
|
4680
4849
|
className: "h-full w-auto transform transition-transform duration-300 ease-[cubic-bezier(0.2,0,0,1)]",
|
|
4681
4850
|
onClick: (e) => e.stopPropagation(),
|
|
4682
|
-
children: /* @__PURE__ */ (0,
|
|
4851
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
|
|
4683
4852
|
ITSidebar,
|
|
4684
4853
|
{
|
|
4685
4854
|
...sidebar,
|
|
@@ -4693,7 +4862,7 @@ function ITLayout({
|
|
|
4693
4862
|
)
|
|
4694
4863
|
}
|
|
4695
4864
|
),
|
|
4696
|
-
/* @__PURE__ */ (0,
|
|
4865
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)("main", { className: "flex-1 overflow-y-auto w-full custom-scrollbar relative z-0", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
|
|
4697
4866
|
"div",
|
|
4698
4867
|
{
|
|
4699
4868
|
className: `mx-auto w-full h-full ${contentClassName}`,
|
|
@@ -4714,7 +4883,7 @@ var sizeClasses = {
|
|
|
4714
4883
|
};
|
|
4715
4884
|
|
|
4716
4885
|
// src/components/loader/loader.tsx
|
|
4717
|
-
var
|
|
4886
|
+
var import_jsx_runtime27 = require("react/jsx-runtime");
|
|
4718
4887
|
function ITLoader({
|
|
4719
4888
|
size = "md",
|
|
4720
4889
|
variant = "spinner",
|
|
@@ -4729,22 +4898,22 @@ function ITLoader({
|
|
|
4729
4898
|
const bgStyle = isCssValue ? { backgroundColor: resolvedColor } : {};
|
|
4730
4899
|
const colorClass = !isCssValue ? color : "";
|
|
4731
4900
|
if (variant === "spinner") {
|
|
4732
|
-
return /* @__PURE__ */ (0,
|
|
4901
|
+
return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
4733
4902
|
"div",
|
|
4734
4903
|
{
|
|
4735
4904
|
className: `inline-block ${sizeClasses[size]} animate-spin rounded-full border-2 border-solid border-current border-r-transparent align-[-0.125em] motion-reduce:animate-[spin_1.5s_linear_infinite] ${colorClass} ${className}`,
|
|
4736
4905
|
role: "status",
|
|
4737
4906
|
style,
|
|
4738
|
-
children: /* @__PURE__ */ (0,
|
|
4907
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "!absolute !-m-px !h-px !w-px !overflow-hidden !whitespace-nowrap !border-0 !p-0 ![clip:rect(0,0,0,0)]", children: "Loading..." })
|
|
4739
4908
|
}
|
|
4740
4909
|
);
|
|
4741
4910
|
}
|
|
4742
4911
|
if (variant === "dots") {
|
|
4743
|
-
return /* @__PURE__ */ (0,
|
|
4912
|
+
return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
4744
4913
|
"div",
|
|
4745
4914
|
{
|
|
4746
4915
|
className: `flex items-center justify-center space-x-2 ${className}`,
|
|
4747
|
-
children: [...Array(3)].map((_, i) => /* @__PURE__ */ (0,
|
|
4916
|
+
children: [...Array(3)].map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
4748
4917
|
"div",
|
|
4749
4918
|
{
|
|
4750
4919
|
className: `${sizeClasses[size.replace(/l|g/, "")]} animate-bounce rounded-full ${colorClass}`,
|
|
@@ -4759,11 +4928,11 @@ function ITLoader({
|
|
|
4759
4928
|
);
|
|
4760
4929
|
}
|
|
4761
4930
|
if (variant === "bar") {
|
|
4762
|
-
return /* @__PURE__ */ (0,
|
|
4931
|
+
return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
4763
4932
|
"div",
|
|
4764
4933
|
{
|
|
4765
4934
|
className: `w-full ${size === "sm" ? "h-1" : size === "md" ? "h-1.5" : size === "lg" ? "h-2" : "h-2.5"} bg-gray-200 rounded-full overflow-hidden ${className}`,
|
|
4766
|
-
children: /* @__PURE__ */ (0,
|
|
4935
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
4767
4936
|
"div",
|
|
4768
4937
|
{
|
|
4769
4938
|
className: `h-full animate-progress ${colorClass}`,
|
|
@@ -4779,7 +4948,7 @@ function ITLoader({
|
|
|
4779
4948
|
);
|
|
4780
4949
|
}
|
|
4781
4950
|
if (variant === "pulse") {
|
|
4782
|
-
return /* @__PURE__ */ (0,
|
|
4951
|
+
return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
4783
4952
|
"div",
|
|
4784
4953
|
{
|
|
4785
4954
|
className: `rounded-full ${sizeClasses[size]} animate-pulse ${colorClass} ${className}`,
|
|
@@ -4791,10 +4960,10 @@ function ITLoader({
|
|
|
4791
4960
|
}
|
|
4792
4961
|
|
|
4793
4962
|
// src/components/stepper/stepper.tsx
|
|
4794
|
-
var
|
|
4795
|
-
var
|
|
4796
|
-
var
|
|
4797
|
-
var
|
|
4963
|
+
var import_clsx18 = __toESM(require("clsx"), 1);
|
|
4964
|
+
var import_react26 = require("react");
|
|
4965
|
+
var import_fa15 = require("react-icons/fa");
|
|
4966
|
+
var import_jsx_runtime28 = require("react/jsx-runtime");
|
|
4798
4967
|
function ITStepper({
|
|
4799
4968
|
steps,
|
|
4800
4969
|
currentStep,
|
|
@@ -4809,15 +4978,15 @@ function ITStepper({
|
|
|
4809
4978
|
maxContentHeight = "400px",
|
|
4810
4979
|
color = "primary"
|
|
4811
4980
|
}) {
|
|
4812
|
-
const [direction, setDirection] = (0,
|
|
4813
|
-
const contentRef = (0,
|
|
4814
|
-
const progressRef = (0,
|
|
4981
|
+
const [direction, setDirection] = (0, import_react26.useState)("next");
|
|
4982
|
+
const contentRef = (0, import_react26.useRef)(null);
|
|
4983
|
+
const progressRef = (0, import_react26.useRef)(null);
|
|
4815
4984
|
const isThemeColor = color in theme.colors;
|
|
4816
4985
|
const resolvedColor = isThemeColor ? theme.colors[color][500] : color;
|
|
4817
|
-
(0,
|
|
4986
|
+
(0, import_react26.useEffect)(() => {
|
|
4818
4987
|
onStepChange?.(currentStep);
|
|
4819
4988
|
}, [currentStep, onStepChange]);
|
|
4820
|
-
(0,
|
|
4989
|
+
(0, import_react26.useEffect)(() => {
|
|
4821
4990
|
const pct = currentStep / Math.max(1, steps.length - 1) * 100;
|
|
4822
4991
|
if (progressRef.current) {
|
|
4823
4992
|
progressRef.current.style.width = `${pct}%`;
|
|
@@ -4861,23 +5030,23 @@ function ITStepper({
|
|
|
4861
5030
|
const renderStepContent = (index, isCompleted, isActive) => {
|
|
4862
5031
|
const step = steps[index];
|
|
4863
5032
|
if (isCompleted) {
|
|
4864
|
-
return /* @__PURE__ */ (0,
|
|
5033
|
+
return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_fa15.FaCheck, { className: "w-4 h-4" });
|
|
4865
5034
|
}
|
|
4866
5035
|
if (step.icon && useIcons) {
|
|
4867
|
-
return /* @__PURE__ */ (0,
|
|
5036
|
+
return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "flex items-center justify-center w-5 h-5", children: step.icon });
|
|
4868
5037
|
}
|
|
4869
|
-
return /* @__PURE__ */ (0,
|
|
5038
|
+
return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "text-sm font-semibold", children: index + 1 });
|
|
4870
5039
|
};
|
|
4871
|
-
return /* @__PURE__ */ (0,
|
|
4872
|
-
/* @__PURE__ */ (0,
|
|
4873
|
-
/* @__PURE__ */ (0,
|
|
5040
|
+
return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: (0, import_clsx18.default)("w-full max-w-5xl mx-auto px-4", containerClassName), children: [
|
|
5041
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "relative mb-8", children: [
|
|
5042
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
|
|
4874
5043
|
"div",
|
|
4875
5044
|
{
|
|
4876
5045
|
className: "absolute left-6 right-6 top-5 h-1 bg-gray-200 rounded-full z-0",
|
|
4877
5046
|
"aria-hidden": true
|
|
4878
5047
|
}
|
|
4879
5048
|
),
|
|
4880
|
-
/* @__PURE__ */ (0,
|
|
5049
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
|
|
4881
5050
|
"div",
|
|
4882
5051
|
{
|
|
4883
5052
|
ref: progressRef,
|
|
@@ -4885,11 +5054,11 @@ function ITStepper({
|
|
|
4885
5054
|
"aria-hidden": true
|
|
4886
5055
|
}
|
|
4887
5056
|
),
|
|
4888
|
-
/* @__PURE__ */ (0,
|
|
5057
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "flex items-start justify-between space-x-2 relative z-20", children: steps.map((step, idx) => {
|
|
4889
5058
|
const isActive = idx === currentStep;
|
|
4890
5059
|
const isCompleted = idx < currentStep;
|
|
4891
5060
|
const hasIcon = step.icon && useIcons;
|
|
4892
|
-
return /* @__PURE__ */ (0,
|
|
5061
|
+
return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
|
|
4893
5062
|
"button",
|
|
4894
5063
|
{
|
|
4895
5064
|
type: "button",
|
|
@@ -4899,11 +5068,11 @@ function ITStepper({
|
|
|
4899
5068
|
"aria-label": `Paso ${idx + 1} ${step.label}`,
|
|
4900
5069
|
className: "flex-1 group",
|
|
4901
5070
|
title: step.label,
|
|
4902
|
-
children: /* @__PURE__ */ (0,
|
|
4903
|
-
/* @__PURE__ */ (0,
|
|
5071
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex flex-col items-center", children: [
|
|
5072
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
|
|
4904
5073
|
"div",
|
|
4905
5074
|
{
|
|
4906
|
-
className: (0,
|
|
5075
|
+
className: (0, import_clsx18.default)(
|
|
4907
5076
|
"flex items-center justify-center w-11 h-11 rounded-full border-2 transition-all duration-300 transform",
|
|
4908
5077
|
hasIcon && "p-2",
|
|
4909
5078
|
isCompleted && "bg-slate-400 border-slate-400 text-white scale-100 shadow",
|
|
@@ -4914,10 +5083,10 @@ function ITStepper({
|
|
|
4914
5083
|
children: renderStepContent(idx, isCompleted, isActive)
|
|
4915
5084
|
}
|
|
4916
5085
|
),
|
|
4917
|
-
/* @__PURE__ */ (0,
|
|
5086
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
|
|
4918
5087
|
"span",
|
|
4919
5088
|
{
|
|
4920
|
-
className: (0,
|
|
5089
|
+
className: (0, import_clsx18.default)(
|
|
4921
5090
|
"mt-2 text-xs sm:text-sm font-medium transition-colors text-center",
|
|
4922
5091
|
isCompleted ? "text-slate-400" : !isActive && "text-gray-400"
|
|
4923
5092
|
),
|
|
@@ -4931,14 +5100,14 @@ function ITStepper({
|
|
|
4931
5100
|
);
|
|
4932
5101
|
}) })
|
|
4933
5102
|
] }),
|
|
4934
|
-
/* @__PURE__ */ (0,
|
|
5103
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
|
|
4935
5104
|
"div",
|
|
4936
5105
|
{
|
|
4937
5106
|
ref: contentRef,
|
|
4938
5107
|
tabIndex: -1,
|
|
4939
5108
|
role: "region",
|
|
4940
5109
|
"aria-labelledby": `step-${currentStep}`,
|
|
4941
|
-
className: (0,
|
|
5110
|
+
className: (0, import_clsx18.default)(
|
|
4942
5111
|
stepClassName,
|
|
4943
5112
|
"bg-white border border-gray-100 rounded-2xl shadow-lg min-h-[280px] transition-transform duration-400 no-scrollbar p-6",
|
|
4944
5113
|
scrollableContent && "overflow-y-auto hide-scrollbar"
|
|
@@ -4947,37 +5116,37 @@ function ITStepper({
|
|
|
4947
5116
|
children: steps[currentStep].content
|
|
4948
5117
|
}
|
|
4949
5118
|
),
|
|
4950
|
-
/* @__PURE__ */ (0,
|
|
4951
|
-
/* @__PURE__ */ (0,
|
|
5119
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex justify-between items-center mt-6", children: [
|
|
5120
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
|
|
4952
5121
|
ITButton,
|
|
4953
5122
|
{
|
|
4954
5123
|
variant: "outlined",
|
|
4955
5124
|
color: "secondary",
|
|
4956
5125
|
disabled: currentStep === 0,
|
|
4957
5126
|
onClick: prevStep,
|
|
4958
|
-
children: /* @__PURE__ */ (0,
|
|
4959
|
-
/* @__PURE__ */ (0,
|
|
5127
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex items-center gap-2", children: [
|
|
5128
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_fa15.FaChevronLeft, {}),
|
|
4960
5129
|
"Atr\xE1s"
|
|
4961
5130
|
] })
|
|
4962
5131
|
}
|
|
4963
5132
|
),
|
|
4964
|
-
/* @__PURE__ */ (0,
|
|
4965
|
-
/* @__PURE__ */ (0,
|
|
5133
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex items-center gap-3", children: [
|
|
5134
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "text-sm text-gray-500 mr-2 hidden sm:block", children: [
|
|
4966
5135
|
"Paso ",
|
|
4967
5136
|
currentStep + 1,
|
|
4968
5137
|
" de ",
|
|
4969
5138
|
steps.length
|
|
4970
5139
|
] }),
|
|
4971
|
-
/* @__PURE__ */ (0,
|
|
5140
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
|
|
4972
5141
|
ITButton,
|
|
4973
5142
|
{
|
|
4974
5143
|
variant: "solid",
|
|
4975
5144
|
color,
|
|
4976
5145
|
disabled: disableNext,
|
|
4977
5146
|
onClick: nextStep,
|
|
4978
|
-
children: /* @__PURE__ */ (0,
|
|
5147
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex items-center gap-2", children: [
|
|
4979
5148
|
currentStep === steps.length - 1 ? "Finalizar" : "Siguiente",
|
|
4980
|
-
currentStep === steps.length - 1 ? /* @__PURE__ */ (0,
|
|
5149
|
+
currentStep === steps.length - 1 ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_fa15.FaCheck, {}) : /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_fa15.FaChevronRight, {})
|
|
4981
5150
|
] })
|
|
4982
5151
|
}
|
|
4983
5152
|
)
|
|
@@ -4987,10 +5156,10 @@ function ITStepper({
|
|
|
4987
5156
|
}
|
|
4988
5157
|
|
|
4989
5158
|
// src/components/theme-provider/themeProvider.tsx
|
|
4990
|
-
var
|
|
4991
|
-
var
|
|
5159
|
+
var import_react27 = require("react");
|
|
5160
|
+
var import_jsx_runtime29 = require("react/jsx-runtime");
|
|
4992
5161
|
function ITThemeProvider({ theme: theme2, children }) {
|
|
4993
|
-
const activeThemeContext = (0,
|
|
5162
|
+
const activeThemeContext = (0, import_react27.useMemo)(() => {
|
|
4994
5163
|
const baseColors = {
|
|
4995
5164
|
primary: palette.blue,
|
|
4996
5165
|
secondary: palette.gray,
|
|
@@ -5011,7 +5180,7 @@ function ITThemeProvider({ theme: theme2, children }) {
|
|
|
5011
5180
|
}
|
|
5012
5181
|
};
|
|
5013
5182
|
}, [theme2]);
|
|
5014
|
-
const cssVariables = (0,
|
|
5183
|
+
const cssVariables = (0, import_react27.useMemo)(() => {
|
|
5015
5184
|
let variablesString = "";
|
|
5016
5185
|
Object.entries(activeThemeContext.colors).forEach(([colorName, scale]) => {
|
|
5017
5186
|
Object.entries(scale).forEach(([shade, hexValue]) => {
|
|
@@ -5130,8 +5299,8 @@ function ITThemeProvider({ theme: theme2, children }) {
|
|
|
5130
5299
|
return `:root {
|
|
5131
5300
|
${variablesString}}`;
|
|
5132
5301
|
}, [activeThemeContext]);
|
|
5133
|
-
return /* @__PURE__ */ (0,
|
|
5134
|
-
/* @__PURE__ */ (0,
|
|
5302
|
+
return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_jsx_runtime29.Fragment, { children: [
|
|
5303
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)("style", { suppressHydrationWarning: true, children: cssVariables }),
|
|
5135
5304
|
children
|
|
5136
5305
|
] });
|
|
5137
5306
|
}
|
|
@@ -5163,6 +5332,7 @@ var createValidationSchema = (fields) => Yup.object().shape(
|
|
|
5163
5332
|
ITLoader,
|
|
5164
5333
|
ITNavbar,
|
|
5165
5334
|
ITPagination,
|
|
5335
|
+
ITSearchSelect,
|
|
5166
5336
|
ITSelect,
|
|
5167
5337
|
ITSlideToggle,
|
|
5168
5338
|
ITStepper,
|