analytica-frontend-lib 1.0.70 → 1.0.72
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/Accordation/index.d.mts +12 -0
- package/dist/Accordation/index.d.ts +12 -0
- package/dist/Accordation/index.js +1663 -0
- package/dist/Accordation/index.js.map +1 -0
- package/dist/Accordation/index.mjs +1654 -0
- package/dist/Accordation/index.mjs.map +1 -0
- package/dist/AlertDialog/index.d.mts +40 -0
- package/dist/AlertDialog/index.d.ts +40 -0
- package/dist/AlertDialog/index.js +233 -0
- package/dist/AlertDialog/index.js.map +1 -0
- package/dist/AlertDialog/index.mjs +212 -0
- package/dist/AlertDialog/index.mjs.map +1 -0
- package/dist/Alternative/index.d.mts +81 -0
- package/dist/Alternative/index.d.ts +81 -0
- package/dist/Alternative/index.js +745 -0
- package/dist/Alternative/index.js.map +1 -0
- package/dist/Alternative/index.mjs +728 -0
- package/dist/Alternative/index.mjs.map +1 -0
- package/dist/Badge/index.js +1 -1
- package/dist/Badge/index.js.map +1 -1
- package/dist/Badge/index.mjs +1 -1
- package/dist/Badge/index.mjs.map +1 -1
- package/dist/Card/index.js +1 -1
- package/dist/Card/index.js.map +1 -1
- package/dist/Card/index.mjs +1 -1
- package/dist/Card/index.mjs.map +1 -1
- package/dist/Radio/index.d.mts +120 -2
- package/dist/Radio/index.d.ts +120 -2
- package/dist/Radio/index.js +176 -3
- package/dist/Radio/index.js.map +1 -1
- package/dist/Radio/index.mjs +176 -4
- package/dist/Radio/index.mjs.map +1 -1
- package/dist/Skeleton/index.d.mts +10 -9
- package/dist/Skeleton/index.d.ts +10 -9
- package/dist/Skeleton/index.js.map +1 -1
- package/dist/Skeleton/index.mjs.map +1 -1
- package/dist/index.css +173 -83
- package/dist/index.css.map +1 -1
- package/dist/index.d.mts +4 -2
- package/dist/index.d.ts +4 -2
- package/dist/index.js +2361 -1916
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +2412 -1962
- package/dist/index.mjs.map +1 -1
- package/dist/styles.css +173 -83
- package/dist/styles.css.map +1 -1
- package/package.json +4 -2
- package/dist/Tab/index.d.mts +0 -37
- package/dist/Tab/index.d.ts +0 -37
- package/dist/Tab/index.js +0 -182
- package/dist/Tab/index.js.map +0 -1
- package/dist/Tab/index.mjs +0 -161
- package/dist/Tab/index.mjs.map +0 -1
package/dist/index.mjs
CHANGED
|
@@ -112,7 +112,7 @@ import { Bell } from "phosphor-react";
|
|
|
112
112
|
import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
|
|
113
113
|
var VARIANT_ACTION_CLASSES2 = {
|
|
114
114
|
solid: {
|
|
115
|
-
error: "bg-error text-error-700 focus-visible:outline-none",
|
|
115
|
+
error: "bg-error-background text-error-700 focus-visible:outline-none",
|
|
116
116
|
warning: "bg-warning text-warning-800 focus-visible:outline-none",
|
|
117
117
|
success: "bg-success text-success-800 focus-visible:outline-none",
|
|
118
118
|
info: "bg-info text-info-800 focus-visible:outline-none",
|
|
@@ -770,8 +770,14 @@ var CheckBox_default = CheckBox;
|
|
|
770
770
|
import {
|
|
771
771
|
forwardRef as forwardRef6,
|
|
772
772
|
useState as useState2,
|
|
773
|
-
useId as useId2
|
|
773
|
+
useId as useId2,
|
|
774
|
+
useEffect,
|
|
775
|
+
useRef,
|
|
776
|
+
Children,
|
|
777
|
+
cloneElement,
|
|
778
|
+
isValidElement
|
|
774
779
|
} from "react";
|
|
780
|
+
import { create, useStore } from "zustand";
|
|
775
781
|
import { jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
|
|
776
782
|
var SIZE_CLASSES4 = {
|
|
777
783
|
small: {
|
|
@@ -857,6 +863,7 @@ var Radio = forwardRef6(
|
|
|
857
863
|
}, ref) => {
|
|
858
864
|
const generatedId = useId2();
|
|
859
865
|
const inputId = id ?? `radio-${generatedId}`;
|
|
866
|
+
const inputRef = useRef(null);
|
|
860
867
|
const [internalChecked, setInternalChecked] = useState2(defaultChecked);
|
|
861
868
|
const isControlled = checkedProp !== void 0;
|
|
862
869
|
const checked = isControlled ? checkedProp : internalChecked;
|
|
@@ -865,6 +872,9 @@ var Radio = forwardRef6(
|
|
|
865
872
|
if (!isControlled) {
|
|
866
873
|
setInternalChecked(newChecked);
|
|
867
874
|
}
|
|
875
|
+
if (event.target) {
|
|
876
|
+
event.target.blur();
|
|
877
|
+
}
|
|
868
878
|
onChange?.(event);
|
|
869
879
|
};
|
|
870
880
|
const currentState = disabled ? "disabled" : state;
|
|
@@ -905,7 +915,11 @@ var Radio = forwardRef6(
|
|
|
905
915
|
/* @__PURE__ */ jsx11(
|
|
906
916
|
"input",
|
|
907
917
|
{
|
|
908
|
-
ref
|
|
918
|
+
ref: (node) => {
|
|
919
|
+
inputRef.current = node;
|
|
920
|
+
if (typeof ref === "function") ref(node);
|
|
921
|
+
else if (ref) ref.current = node;
|
|
922
|
+
},
|
|
909
923
|
type: "radio",
|
|
910
924
|
id: inputId,
|
|
911
925
|
checked,
|
|
@@ -914,10 +928,42 @@ var Radio = forwardRef6(
|
|
|
914
928
|
value,
|
|
915
929
|
onChange: handleChange,
|
|
916
930
|
className: "sr-only",
|
|
931
|
+
style: {
|
|
932
|
+
position: "absolute",
|
|
933
|
+
left: "-9999px",
|
|
934
|
+
visibility: "hidden"
|
|
935
|
+
},
|
|
917
936
|
...props
|
|
918
937
|
}
|
|
919
938
|
),
|
|
920
|
-
/* @__PURE__ */ jsx11(
|
|
939
|
+
/* @__PURE__ */ jsx11(
|
|
940
|
+
"button",
|
|
941
|
+
{
|
|
942
|
+
type: "button",
|
|
943
|
+
className: radioClasses,
|
|
944
|
+
disabled,
|
|
945
|
+
"aria-pressed": checked,
|
|
946
|
+
onClick: (e) => {
|
|
947
|
+
e.preventDefault();
|
|
948
|
+
if (!disabled) {
|
|
949
|
+
if (inputRef.current) {
|
|
950
|
+
inputRef.current.click();
|
|
951
|
+
inputRef.current.blur();
|
|
952
|
+
}
|
|
953
|
+
}
|
|
954
|
+
},
|
|
955
|
+
onKeyDown: (e) => {
|
|
956
|
+
if ((e.key === "Enter" || e.key === " ") && !disabled) {
|
|
957
|
+
e.preventDefault();
|
|
958
|
+
if (inputRef.current) {
|
|
959
|
+
inputRef.current.click();
|
|
960
|
+
inputRef.current.blur();
|
|
961
|
+
}
|
|
962
|
+
}
|
|
963
|
+
},
|
|
964
|
+
children: checked && /* @__PURE__ */ jsx11("div", { className: dotClasses })
|
|
965
|
+
}
|
|
966
|
+
),
|
|
921
967
|
label && /* @__PURE__ */ jsx11(
|
|
922
968
|
"div",
|
|
923
969
|
{
|
|
@@ -963,6 +1009,129 @@ var Radio = forwardRef6(
|
|
|
963
1009
|
}
|
|
964
1010
|
);
|
|
965
1011
|
Radio.displayName = "Radio";
|
|
1012
|
+
var createRadioGroupStore = (name, defaultValue, disabled, onValueChange) => create((set, get) => ({
|
|
1013
|
+
value: defaultValue,
|
|
1014
|
+
setValue: (value) => {
|
|
1015
|
+
if (!get().disabled) {
|
|
1016
|
+
set({ value });
|
|
1017
|
+
get().onValueChange?.(value);
|
|
1018
|
+
}
|
|
1019
|
+
},
|
|
1020
|
+
onValueChange,
|
|
1021
|
+
disabled,
|
|
1022
|
+
name
|
|
1023
|
+
}));
|
|
1024
|
+
var useRadioGroupStore = (externalStore) => {
|
|
1025
|
+
if (!externalStore) {
|
|
1026
|
+
throw new Error("RadioGroupItem must be used within a RadioGroup");
|
|
1027
|
+
}
|
|
1028
|
+
return externalStore;
|
|
1029
|
+
};
|
|
1030
|
+
var injectStore = (children, store) => Children.map(children, (child) => {
|
|
1031
|
+
if (!isValidElement(child)) return child;
|
|
1032
|
+
const typedChild = child;
|
|
1033
|
+
const shouldInject = typedChild.type === RadioGroupItem;
|
|
1034
|
+
return cloneElement(typedChild, {
|
|
1035
|
+
...shouldInject ? { store } : {},
|
|
1036
|
+
...typedChild.props.children ? { children: injectStore(typedChild.props.children, store) } : {}
|
|
1037
|
+
});
|
|
1038
|
+
});
|
|
1039
|
+
var RadioGroup = forwardRef6(
|
|
1040
|
+
({
|
|
1041
|
+
value: propValue,
|
|
1042
|
+
defaultValue = "",
|
|
1043
|
+
onValueChange,
|
|
1044
|
+
name: propName,
|
|
1045
|
+
disabled = false,
|
|
1046
|
+
className = "",
|
|
1047
|
+
children,
|
|
1048
|
+
...props
|
|
1049
|
+
}, ref) => {
|
|
1050
|
+
const generatedId = useId2();
|
|
1051
|
+
const name = propName || `radio-group-${generatedId}`;
|
|
1052
|
+
const storeRef = useRef(null);
|
|
1053
|
+
storeRef.current ??= createRadioGroupStore(
|
|
1054
|
+
name,
|
|
1055
|
+
defaultValue,
|
|
1056
|
+
disabled,
|
|
1057
|
+
onValueChange
|
|
1058
|
+
);
|
|
1059
|
+
const store = storeRef.current;
|
|
1060
|
+
const { setValue } = useStore(store, (s) => s);
|
|
1061
|
+
useEffect(() => {
|
|
1062
|
+
const currentValue = store.getState().value;
|
|
1063
|
+
if (currentValue && onValueChange) {
|
|
1064
|
+
onValueChange(currentValue);
|
|
1065
|
+
}
|
|
1066
|
+
}, []);
|
|
1067
|
+
useEffect(() => {
|
|
1068
|
+
if (propValue !== void 0) {
|
|
1069
|
+
setValue(propValue);
|
|
1070
|
+
}
|
|
1071
|
+
}, [propValue, setValue]);
|
|
1072
|
+
useEffect(() => {
|
|
1073
|
+
store.setState({ disabled });
|
|
1074
|
+
}, [disabled, store]);
|
|
1075
|
+
return /* @__PURE__ */ jsx11(
|
|
1076
|
+
"div",
|
|
1077
|
+
{
|
|
1078
|
+
ref,
|
|
1079
|
+
className,
|
|
1080
|
+
role: "radiogroup",
|
|
1081
|
+
"aria-label": name,
|
|
1082
|
+
...props,
|
|
1083
|
+
children: injectStore(children, store)
|
|
1084
|
+
}
|
|
1085
|
+
);
|
|
1086
|
+
}
|
|
1087
|
+
);
|
|
1088
|
+
RadioGroup.displayName = "RadioGroup";
|
|
1089
|
+
var RadioGroupItem = forwardRef6(
|
|
1090
|
+
({
|
|
1091
|
+
value,
|
|
1092
|
+
store: externalStore,
|
|
1093
|
+
disabled: itemDisabled,
|
|
1094
|
+
size = "medium",
|
|
1095
|
+
state = "default",
|
|
1096
|
+
className = "",
|
|
1097
|
+
id,
|
|
1098
|
+
...props
|
|
1099
|
+
}, ref) => {
|
|
1100
|
+
const store = useRadioGroupStore(externalStore);
|
|
1101
|
+
const {
|
|
1102
|
+
value: groupValue,
|
|
1103
|
+
setValue,
|
|
1104
|
+
disabled: groupDisabled,
|
|
1105
|
+
name
|
|
1106
|
+
} = useStore(store);
|
|
1107
|
+
const generatedId = useId2();
|
|
1108
|
+
const inputId = id ?? `radio-item-${generatedId}`;
|
|
1109
|
+
const isChecked = groupValue === value;
|
|
1110
|
+
const isDisabled = groupDisabled || itemDisabled;
|
|
1111
|
+
const currentState = isDisabled ? "disabled" : state;
|
|
1112
|
+
return /* @__PURE__ */ jsx11(
|
|
1113
|
+
Radio,
|
|
1114
|
+
{
|
|
1115
|
+
ref,
|
|
1116
|
+
id: inputId,
|
|
1117
|
+
name,
|
|
1118
|
+
value,
|
|
1119
|
+
checked: isChecked,
|
|
1120
|
+
disabled: isDisabled,
|
|
1121
|
+
size,
|
|
1122
|
+
state: currentState,
|
|
1123
|
+
className,
|
|
1124
|
+
onChange: (e) => {
|
|
1125
|
+
if (e.target.checked && !isDisabled) {
|
|
1126
|
+
setValue(value);
|
|
1127
|
+
}
|
|
1128
|
+
},
|
|
1129
|
+
...props
|
|
1130
|
+
}
|
|
1131
|
+
);
|
|
1132
|
+
}
|
|
1133
|
+
);
|
|
1134
|
+
RadioGroupItem.displayName = "RadioGroupItem";
|
|
966
1135
|
var Radio_default = Radio;
|
|
967
1136
|
|
|
968
1137
|
// src/components/TextArea/TextArea.tsx
|
|
@@ -1172,8 +1341,8 @@ var Toast = ({
|
|
|
1172
1341
|
var Toast_default = Toast;
|
|
1173
1342
|
|
|
1174
1343
|
// src/components/Toast/utils/ToastStore.ts
|
|
1175
|
-
import { create } from "zustand";
|
|
1176
|
-
var useToastStore =
|
|
1344
|
+
import { create as create2 } from "zustand";
|
|
1345
|
+
var useToastStore = create2((set) => ({
|
|
1177
1346
|
toasts: [],
|
|
1178
1347
|
addToast: (toast) => {
|
|
1179
1348
|
const id = crypto.randomUUID();
|
|
@@ -2341,8 +2510,8 @@ var Stepper_default = Stepper;
|
|
|
2341
2510
|
import {
|
|
2342
2511
|
useState as useState5,
|
|
2343
2512
|
useMemo as useMemo2,
|
|
2344
|
-
useEffect,
|
|
2345
|
-
useRef
|
|
2513
|
+
useEffect as useEffect2,
|
|
2514
|
+
useRef as useRef2
|
|
2346
2515
|
} from "react";
|
|
2347
2516
|
import { jsx as jsx21, jsxs as jsxs16 } from "react/jsx-runtime";
|
|
2348
2517
|
var WEEK_DAYS = ["SEG", "TER", "QUA", "QUI", "SEX", "S\xC1B", "DOM"];
|
|
@@ -2445,9 +2614,9 @@ var Calendar = ({
|
|
|
2445
2614
|
}) => {
|
|
2446
2615
|
const [currentDate, setCurrentDate] = useState5(selectedDate || /* @__PURE__ */ new Date());
|
|
2447
2616
|
const [isMonthPickerOpen, setIsMonthPickerOpen] = useState5(false);
|
|
2448
|
-
const monthPickerRef =
|
|
2449
|
-
const monthPickerContainerRef =
|
|
2450
|
-
|
|
2617
|
+
const monthPickerRef = useRef2(null);
|
|
2618
|
+
const monthPickerContainerRef = useRef2(null);
|
|
2619
|
+
useEffect2(() => {
|
|
2451
2620
|
const handleClickOutside = (event) => {
|
|
2452
2621
|
if (monthPickerContainerRef.current && !monthPickerContainerRef.current.contains(event.target)) {
|
|
2453
2622
|
setIsMonthPickerOpen(false);
|
|
@@ -2840,7 +3009,7 @@ var Calendar = ({
|
|
|
2840
3009
|
var Calendar_default = Calendar;
|
|
2841
3010
|
|
|
2842
3011
|
// src/components/Modal/Modal.tsx
|
|
2843
|
-
import { useEffect as
|
|
3012
|
+
import { useEffect as useEffect3 } from "react";
|
|
2844
3013
|
import { X as X2 } from "phosphor-react";
|
|
2845
3014
|
import { jsx as jsx22, jsxs as jsxs17 } from "react/jsx-runtime";
|
|
2846
3015
|
var SIZE_CLASSES10 = {
|
|
@@ -2862,7 +3031,7 @@ var Modal = ({
|
|
|
2862
3031
|
footer,
|
|
2863
3032
|
hideCloseButton = false
|
|
2864
3033
|
}) => {
|
|
2865
|
-
|
|
3034
|
+
useEffect3(() => {
|
|
2866
3035
|
if (!isOpen || !closeOnEscape) return;
|
|
2867
3036
|
const handleEscape = (event) => {
|
|
2868
3037
|
if (event.key === "Escape") {
|
|
@@ -2872,7 +3041,7 @@ var Modal = ({
|
|
|
2872
3041
|
document.addEventListener("keydown", handleEscape);
|
|
2873
3042
|
return () => document.removeEventListener("keydown", handleEscape);
|
|
2874
3043
|
}, [isOpen, closeOnEscape, onClose]);
|
|
2875
|
-
|
|
3044
|
+
useEffect3(() => {
|
|
2876
3045
|
const originalOverflow = document.body.style.overflow;
|
|
2877
3046
|
if (isOpen) {
|
|
2878
3047
|
document.body.style.overflow = "hidden";
|
|
@@ -2928,639 +3097,897 @@ var Modal = ({
|
|
|
2928
3097
|
};
|
|
2929
3098
|
var Modal_default = Modal;
|
|
2930
3099
|
|
|
2931
|
-
// src/components/
|
|
2932
|
-
import {
|
|
3100
|
+
// src/components/Accordation/Accordation.tsx
|
|
3101
|
+
import { forwardRef as forwardRef10, useId as useId5, useState as useState7 } from "react";
|
|
3102
|
+
|
|
3103
|
+
// src/components/Card/Card.tsx
|
|
2933
3104
|
import {
|
|
2934
3105
|
forwardRef as forwardRef9,
|
|
2935
|
-
|
|
2936
|
-
|
|
2937
|
-
|
|
2938
|
-
Children,
|
|
2939
|
-
cloneElement,
|
|
2940
|
-
useState as useState6
|
|
3106
|
+
Fragment as Fragment3,
|
|
3107
|
+
useState as useState6,
|
|
3108
|
+
useRef as useRef3
|
|
2941
3109
|
} from "react";
|
|
2942
|
-
import {
|
|
2943
|
-
|
|
2944
|
-
|
|
2945
|
-
|
|
2946
|
-
|
|
2947
|
-
|
|
2948
|
-
|
|
2949
|
-
|
|
2950
|
-
|
|
2951
|
-
|
|
2952
|
-
|
|
2953
|
-
|
|
2954
|
-
|
|
2955
|
-
|
|
2956
|
-
|
|
2957
|
-
|
|
2958
|
-
|
|
2959
|
-
return Children.map(children, (child) => {
|
|
2960
|
-
if (isValidElement(child)) {
|
|
2961
|
-
const typedChild = child;
|
|
2962
|
-
const newProps = {
|
|
2963
|
-
store
|
|
2964
|
-
};
|
|
2965
|
-
if (typedChild.props.children) {
|
|
2966
|
-
newProps.children = injectStore(typedChild.props.children, store);
|
|
2967
|
-
}
|
|
2968
|
-
return cloneElement(typedChild, newProps);
|
|
2969
|
-
}
|
|
2970
|
-
return child;
|
|
2971
|
-
});
|
|
2972
|
-
};
|
|
2973
|
-
var DropdownMenu = ({
|
|
2974
|
-
children,
|
|
2975
|
-
open: propOpen,
|
|
2976
|
-
onOpenChange
|
|
2977
|
-
}) => {
|
|
2978
|
-
const storeRef = useRef2(null);
|
|
2979
|
-
storeRef.current ??= createDropdownStore();
|
|
2980
|
-
const store = storeRef.current;
|
|
2981
|
-
const { open, setOpen: storeSetOpen } = useStore(store, (s) => s);
|
|
2982
|
-
const setOpen = (newOpen) => {
|
|
2983
|
-
storeSetOpen(newOpen);
|
|
2984
|
-
};
|
|
2985
|
-
const menuRef = useRef2(null);
|
|
2986
|
-
const handleArrowDownOrArrowUp = (event) => {
|
|
2987
|
-
const menuContent = menuRef.current?.querySelector('[role="menu"]');
|
|
2988
|
-
if (menuContent) {
|
|
2989
|
-
event.preventDefault();
|
|
2990
|
-
const items = Array.from(
|
|
2991
|
-
menuContent.querySelectorAll(
|
|
2992
|
-
'[role="menuitem"]:not([aria-disabled="true"])'
|
|
2993
|
-
)
|
|
2994
|
-
).filter((el) => el instanceof HTMLElement);
|
|
2995
|
-
if (items.length === 0) return;
|
|
2996
|
-
const focusedItem = document.activeElement;
|
|
2997
|
-
const currentIndex = items.findIndex((item) => item === focusedItem);
|
|
2998
|
-
let nextIndex;
|
|
2999
|
-
if (event.key === "ArrowDown") {
|
|
3000
|
-
nextIndex = currentIndex === -1 ? 0 : (currentIndex + 1) % items.length;
|
|
3001
|
-
} else {
|
|
3002
|
-
nextIndex = currentIndex === -1 ? items.length - 1 : (currentIndex - 1 + items.length) % items.length;
|
|
3003
|
-
}
|
|
3004
|
-
items[nextIndex]?.focus();
|
|
3005
|
-
}
|
|
3006
|
-
};
|
|
3007
|
-
const handleDownkey = (event) => {
|
|
3008
|
-
if (event.key === "Escape") {
|
|
3009
|
-
setOpen(false);
|
|
3010
|
-
} else if (event.key === "ArrowDown" || event.key === "ArrowUp") {
|
|
3011
|
-
handleArrowDownOrArrowUp(event);
|
|
3012
|
-
}
|
|
3013
|
-
};
|
|
3014
|
-
const handleClickOutside = (event) => {
|
|
3015
|
-
if (menuRef.current && !menuRef.current.contains(event.target)) {
|
|
3016
|
-
setOpen(false);
|
|
3017
|
-
}
|
|
3018
|
-
};
|
|
3019
|
-
useEffect3(() => {
|
|
3020
|
-
if (open) {
|
|
3021
|
-
document.addEventListener("mousedown", handleClickOutside);
|
|
3022
|
-
document.addEventListener("keydown", handleDownkey);
|
|
3023
|
-
}
|
|
3024
|
-
return () => {
|
|
3025
|
-
document.removeEventListener("mousedown", handleClickOutside);
|
|
3026
|
-
document.removeEventListener("keydown", handleDownkey);
|
|
3027
|
-
};
|
|
3028
|
-
}, [open]);
|
|
3029
|
-
useEffect3(() => {
|
|
3030
|
-
setOpen(open);
|
|
3031
|
-
onOpenChange?.(open);
|
|
3032
|
-
}, [open, onOpenChange]);
|
|
3033
|
-
useEffect3(() => {
|
|
3034
|
-
if (propOpen) {
|
|
3035
|
-
setOpen(propOpen);
|
|
3036
|
-
}
|
|
3037
|
-
}, [propOpen]);
|
|
3038
|
-
return /* @__PURE__ */ jsx23("div", { className: "relative", ref: menuRef, children: injectStore(children, store) });
|
|
3039
|
-
};
|
|
3040
|
-
var DropdownMenuTrigger = ({
|
|
3041
|
-
className,
|
|
3042
|
-
children,
|
|
3043
|
-
onClick,
|
|
3044
|
-
store: externalStore,
|
|
3045
|
-
...props
|
|
3046
|
-
}) => {
|
|
3047
|
-
const store = useDropdownStore(externalStore);
|
|
3048
|
-
const open = useStore(store, (s) => s.open);
|
|
3049
|
-
const toggleOpen = () => store.setState({ open: !open });
|
|
3050
|
-
return /* @__PURE__ */ jsx23(
|
|
3051
|
-
"button",
|
|
3052
|
-
{
|
|
3053
|
-
onClick: (e) => {
|
|
3054
|
-
e.stopPropagation();
|
|
3055
|
-
toggleOpen();
|
|
3056
|
-
if (onClick) onClick(e);
|
|
3057
|
-
},
|
|
3058
|
-
"aria-expanded": open,
|
|
3059
|
-
className: `${className}`,
|
|
3060
|
-
...props,
|
|
3061
|
-
children
|
|
3062
|
-
}
|
|
3063
|
-
);
|
|
3110
|
+
import {
|
|
3111
|
+
CaretRight,
|
|
3112
|
+
ChatCircleText,
|
|
3113
|
+
CheckCircle as CheckCircle3,
|
|
3114
|
+
Clock,
|
|
3115
|
+
DotsThreeVertical,
|
|
3116
|
+
Play,
|
|
3117
|
+
SpeakerHigh,
|
|
3118
|
+
SpeakerLow,
|
|
3119
|
+
SpeakerSimpleX,
|
|
3120
|
+
XCircle as XCircle2
|
|
3121
|
+
} from "phosphor-react";
|
|
3122
|
+
import { Fragment as Fragment4, jsx as jsx23, jsxs as jsxs18 } from "react/jsx-runtime";
|
|
3123
|
+
var CARD_BASE_CLASSES = {
|
|
3124
|
+
default: "w-full bg-background border border-border-50 rounded-xl",
|
|
3125
|
+
compact: "w-full bg-background border border-border-50 rounded-lg",
|
|
3126
|
+
minimal: "w-full bg-background border border-border-100 rounded-md"
|
|
3064
3127
|
};
|
|
3065
|
-
|
|
3066
|
-
|
|
3067
|
-
small: "
|
|
3068
|
-
medium: "
|
|
3128
|
+
var CARD_PADDING_CLASSES = {
|
|
3129
|
+
none: "",
|
|
3130
|
+
small: "p-2",
|
|
3131
|
+
medium: "p-4",
|
|
3132
|
+
large: "p-6"
|
|
3069
3133
|
};
|
|
3070
|
-
var
|
|
3071
|
-
|
|
3072
|
-
|
|
3073
|
-
|
|
3074
|
-
|
|
3134
|
+
var CARD_MIN_HEIGHT_CLASSES = {
|
|
3135
|
+
none: "",
|
|
3136
|
+
small: "min-h-16",
|
|
3137
|
+
medium: "min-h-20",
|
|
3138
|
+
large: "min-h-24"
|
|
3075
3139
|
};
|
|
3076
|
-
var
|
|
3077
|
-
|
|
3078
|
-
|
|
3079
|
-
end: "right-0"
|
|
3140
|
+
var CARD_LAYOUT_CLASSES = {
|
|
3141
|
+
horizontal: "flex flex-row",
|
|
3142
|
+
vertical: "flex flex-col"
|
|
3080
3143
|
};
|
|
3081
|
-
var
|
|
3082
|
-
|
|
3083
|
-
|
|
3144
|
+
var CARD_CURSOR_CLASSES = {
|
|
3145
|
+
default: "",
|
|
3146
|
+
pointer: "cursor-pointer"
|
|
3084
3147
|
};
|
|
3085
|
-
var
|
|
3086
|
-
return /* @__PURE__ */ jsx23(
|
|
3087
|
-
"div",
|
|
3088
|
-
{
|
|
3089
|
-
ref,
|
|
3090
|
-
className: `text-sm w-full ${inset ? "pl-8" : ""} ${className ?? ""}`,
|
|
3091
|
-
...props
|
|
3092
|
-
}
|
|
3093
|
-
);
|
|
3094
|
-
});
|
|
3095
|
-
MenuLabel.displayName = "MenuLabel";
|
|
3096
|
-
var DropdownMenuContent = forwardRef9(
|
|
3148
|
+
var CardBase = forwardRef9(
|
|
3097
3149
|
({
|
|
3098
|
-
className,
|
|
3099
|
-
align = "start",
|
|
3100
|
-
side = "bottom",
|
|
3101
|
-
variant = "menu",
|
|
3102
|
-
sideOffset = 4,
|
|
3103
3150
|
children,
|
|
3104
|
-
|
|
3151
|
+
variant = "default",
|
|
3152
|
+
layout = "horizontal",
|
|
3153
|
+
padding = "medium",
|
|
3154
|
+
minHeight = "medium",
|
|
3155
|
+
cursor = "default",
|
|
3156
|
+
className = "",
|
|
3105
3157
|
...props
|
|
3106
3158
|
}, ref) => {
|
|
3107
|
-
const
|
|
3108
|
-
const
|
|
3109
|
-
const
|
|
3110
|
-
|
|
3111
|
-
|
|
3112
|
-
|
|
3113
|
-
|
|
3114
|
-
|
|
3115
|
-
|
|
3116
|
-
|
|
3117
|
-
|
|
3118
|
-
|
|
3119
|
-
|
|
3120
|
-
|
|
3121
|
-
|
|
3122
|
-
|
|
3123
|
-
|
|
3124
|
-
|
|
3125
|
-
|
|
3159
|
+
const baseClasses = CARD_BASE_CLASSES[variant];
|
|
3160
|
+
const paddingClasses = CARD_PADDING_CLASSES[padding];
|
|
3161
|
+
const minHeightClasses = CARD_MIN_HEIGHT_CLASSES[minHeight];
|
|
3162
|
+
const layoutClasses = CARD_LAYOUT_CLASSES[layout];
|
|
3163
|
+
const cursorClasses = CARD_CURSOR_CLASSES[cursor];
|
|
3164
|
+
const combinedClasses = [
|
|
3165
|
+
baseClasses,
|
|
3166
|
+
paddingClasses,
|
|
3167
|
+
minHeightClasses,
|
|
3168
|
+
layoutClasses,
|
|
3169
|
+
cursorClasses,
|
|
3170
|
+
className
|
|
3171
|
+
].filter(Boolean).join(" ");
|
|
3172
|
+
return /* @__PURE__ */ jsx23("div", { ref, className: combinedClasses, ...props, children });
|
|
3173
|
+
}
|
|
3174
|
+
);
|
|
3175
|
+
var ACTION_CARD_CLASSES = {
|
|
3176
|
+
warning: "bg-warning-background",
|
|
3177
|
+
success: "bg-success-300",
|
|
3178
|
+
error: "bg-error-100",
|
|
3179
|
+
info: "bg-info-background"
|
|
3180
|
+
};
|
|
3181
|
+
var ACTION_ICON_CLASSES = {
|
|
3182
|
+
warning: "bg-warning-300 text-text",
|
|
3183
|
+
success: "bg-yellow-300 text-text-950",
|
|
3184
|
+
error: "bg-error-500 text-text",
|
|
3185
|
+
info: "bg-info-500 text-text"
|
|
3186
|
+
};
|
|
3187
|
+
var ACTION_SUBTITLE_CLASSES = {
|
|
3188
|
+
warning: "text-warning-600",
|
|
3189
|
+
success: "text-success-700",
|
|
3190
|
+
error: "text-error-700",
|
|
3191
|
+
info: "text-info-700"
|
|
3192
|
+
};
|
|
3193
|
+
var ACTION_HEADER_CLASSES = {
|
|
3194
|
+
warning: "text-warning-300",
|
|
3195
|
+
success: "text-success-300",
|
|
3196
|
+
error: "text-error-300",
|
|
3197
|
+
info: "text-info-300"
|
|
3198
|
+
};
|
|
3199
|
+
var CardActivitiesResults = forwardRef9(
|
|
3200
|
+
({
|
|
3201
|
+
icon,
|
|
3202
|
+
title,
|
|
3203
|
+
subTitle,
|
|
3204
|
+
header,
|
|
3205
|
+
extended = false,
|
|
3206
|
+
action = "success",
|
|
3207
|
+
description,
|
|
3208
|
+
className,
|
|
3209
|
+
...props
|
|
3210
|
+
}, ref) => {
|
|
3211
|
+
const actionCardClasses = ACTION_CARD_CLASSES[action];
|
|
3212
|
+
const actionIconClasses = ACTION_ICON_CLASSES[action];
|
|
3213
|
+
const actionSubTitleClasses = ACTION_SUBTITLE_CLASSES[action];
|
|
3214
|
+
const actionHeaderClasses = ACTION_HEADER_CLASSES[action];
|
|
3215
|
+
return /* @__PURE__ */ jsxs18(
|
|
3126
3216
|
"div",
|
|
3127
3217
|
{
|
|
3128
3218
|
ref,
|
|
3129
|
-
|
|
3130
|
-
className: `
|
|
3131
|
-
bg-background z-50 min-w-[210px] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md border-border-100
|
|
3132
|
-
${open ? "animate-in fade-in-0 zoom-in-95" : "animate-out fade-out-0 zoom-out-95"}
|
|
3133
|
-
${getPositionClasses()}
|
|
3134
|
-
${variantClasses}
|
|
3135
|
-
${className}
|
|
3136
|
-
`,
|
|
3137
|
-
style: {
|
|
3138
|
-
marginTop: side === "bottom" ? sideOffset : void 0,
|
|
3139
|
-
marginBottom: side === "top" ? sideOffset : void 0,
|
|
3140
|
-
marginLeft: side === "right" ? sideOffset : void 0,
|
|
3141
|
-
marginRight: side === "left" ? sideOffset : void 0
|
|
3142
|
-
},
|
|
3219
|
+
className: `w-full flex flex-col border border-border-50 bg-background rounded-xl ${className}`,
|
|
3143
3220
|
...props,
|
|
3144
|
-
children
|
|
3221
|
+
children: [
|
|
3222
|
+
/* @__PURE__ */ jsxs18(
|
|
3223
|
+
"div",
|
|
3224
|
+
{
|
|
3225
|
+
className: `
|
|
3226
|
+
flex flex-col gap-1 items-center justify-center p-4
|
|
3227
|
+
${actionCardClasses}
|
|
3228
|
+
${extended ? "rounded-t-xl" : "rounded-xl"}`,
|
|
3229
|
+
children: [
|
|
3230
|
+
/* @__PURE__ */ jsx23(
|
|
3231
|
+
"span",
|
|
3232
|
+
{
|
|
3233
|
+
className: `size-7.5 rounded-full flex items-center justify-center ${actionIconClasses}`,
|
|
3234
|
+
children: icon
|
|
3235
|
+
}
|
|
3236
|
+
),
|
|
3237
|
+
/* @__PURE__ */ jsx23(
|
|
3238
|
+
Text_default,
|
|
3239
|
+
{
|
|
3240
|
+
size: "2xs",
|
|
3241
|
+
weight: "medium",
|
|
3242
|
+
className: "text-text-800 uppercase truncate",
|
|
3243
|
+
children: title
|
|
3244
|
+
}
|
|
3245
|
+
),
|
|
3246
|
+
/* @__PURE__ */ jsx23("p", { className: `text-lg font-bold truncate ${actionSubTitleClasses}`, children: subTitle })
|
|
3247
|
+
]
|
|
3248
|
+
}
|
|
3249
|
+
),
|
|
3250
|
+
extended && /* @__PURE__ */ jsxs18("div", { className: "flex flex-col items-center gap-2.5 pb-9.5 pt-2.5", children: [
|
|
3251
|
+
/* @__PURE__ */ jsx23(
|
|
3252
|
+
"p",
|
|
3253
|
+
{
|
|
3254
|
+
className: `text-2xs font-medium uppercase truncate ${actionHeaderClasses}`,
|
|
3255
|
+
children: header
|
|
3256
|
+
}
|
|
3257
|
+
),
|
|
3258
|
+
/* @__PURE__ */ jsx23(Badge_default, { size: "large", action: "info", children: description })
|
|
3259
|
+
] })
|
|
3260
|
+
]
|
|
3145
3261
|
}
|
|
3146
3262
|
);
|
|
3147
3263
|
}
|
|
3148
3264
|
);
|
|
3149
|
-
|
|
3150
|
-
var DropdownMenuItem = forwardRef9(
|
|
3265
|
+
var CardQuestions = forwardRef9(
|
|
3151
3266
|
({
|
|
3267
|
+
header,
|
|
3268
|
+
state = "undone",
|
|
3152
3269
|
className,
|
|
3153
|
-
|
|
3154
|
-
|
|
3155
|
-
iconRight,
|
|
3156
|
-
iconLeft,
|
|
3157
|
-
disabled = false,
|
|
3158
|
-
onClick,
|
|
3159
|
-
variant = "menu",
|
|
3160
|
-
store: externalStore,
|
|
3270
|
+
onClickButton,
|
|
3271
|
+
valueButton,
|
|
3161
3272
|
...props
|
|
3162
3273
|
}, ref) => {
|
|
3163
|
-
const
|
|
3164
|
-
const
|
|
3165
|
-
const
|
|
3166
|
-
const handleClick = (e) => {
|
|
3167
|
-
if (disabled) {
|
|
3168
|
-
e.preventDefault();
|
|
3169
|
-
e.stopPropagation();
|
|
3170
|
-
return;
|
|
3171
|
-
}
|
|
3172
|
-
onClick?.(e);
|
|
3173
|
-
setOpen(false);
|
|
3174
|
-
};
|
|
3175
|
-
const getVariantClasses = () => {
|
|
3176
|
-
if (variant === "profile") {
|
|
3177
|
-
return "relative flex flex-row justify-between select-none items-center gap-2 rounded-sm p-4 text-sm outline-none transition-colors [&>svg]:size-6 [&>svg]:shrink-0";
|
|
3178
|
-
}
|
|
3179
|
-
return "relative flex select-none items-center gap-2 rounded-sm p-3 text-sm outline-none transition-colors [&>svg]:size-4 [&>svg]:shrink-0";
|
|
3180
|
-
};
|
|
3181
|
-
const getVariantProps = () => {
|
|
3182
|
-
return variant === "profile" ? { "data-variant": "profile" } : {};
|
|
3183
|
-
};
|
|
3274
|
+
const isDone = state === "done";
|
|
3275
|
+
const stateLabel = isDone ? "Realizado" : "N\xE3o Realizado";
|
|
3276
|
+
const buttonLabel = isDone ? "Ver Quest\xE3o" : "Responder";
|
|
3184
3277
|
return /* @__PURE__ */ jsxs18(
|
|
3185
|
-
|
|
3278
|
+
CardBase,
|
|
3186
3279
|
{
|
|
3187
3280
|
ref,
|
|
3188
|
-
|
|
3189
|
-
|
|
3190
|
-
"
|
|
3191
|
-
className: `
|
|
3192
|
-
focus-visible:bg-background-50
|
|
3193
|
-
${getVariantClasses()}
|
|
3194
|
-
${sizeClasses}
|
|
3195
|
-
${className}
|
|
3196
|
-
${disabled ? "cursor-not-allowed text-text-400" : "cursor-pointer hover:bg-background-50 text-text-700 focus:bg-accent focus:text-accent-foreground hover:bg-accent hover:text-accent-foreground"}
|
|
3197
|
-
`,
|
|
3198
|
-
onClick: handleClick,
|
|
3199
|
-
onKeyDown: (e) => {
|
|
3200
|
-
if (e.key === "Enter" || e.key === " ") handleClick(e);
|
|
3201
|
-
},
|
|
3202
|
-
tabIndex: disabled ? -1 : 0,
|
|
3281
|
+
layout: "horizontal",
|
|
3282
|
+
padding: "medium",
|
|
3283
|
+
minHeight: "medium",
|
|
3284
|
+
className: `justify-between gap-4 ${className}`,
|
|
3203
3285
|
...props,
|
|
3204
3286
|
children: [
|
|
3205
|
-
|
|
3206
|
-
|
|
3207
|
-
|
|
3287
|
+
/* @__PURE__ */ jsxs18("section", { className: "flex flex-col gap-1 flex-1 min-w-0", children: [
|
|
3288
|
+
/* @__PURE__ */ jsx23("p", { className: "font-bold text-xs text-text-950 truncate", children: header }),
|
|
3289
|
+
/* @__PURE__ */ jsxs18("div", { className: "flex flex-row gap-6 items-center", children: [
|
|
3290
|
+
/* @__PURE__ */ jsx23(
|
|
3291
|
+
Badge_default,
|
|
3292
|
+
{
|
|
3293
|
+
size: "medium",
|
|
3294
|
+
variant: "solid",
|
|
3295
|
+
action: isDone ? "success" : "error",
|
|
3296
|
+
children: stateLabel
|
|
3297
|
+
}
|
|
3298
|
+
),
|
|
3299
|
+
/* @__PURE__ */ jsxs18("span", { className: "flex flex-row items-center gap-1 text-text-700 text-xs", children: [
|
|
3300
|
+
isDone ? "Nota" : "Sem nota",
|
|
3301
|
+
isDone && /* @__PURE__ */ jsx23(Badge_default, { size: "medium", action: "success", children: "00" })
|
|
3302
|
+
] })
|
|
3303
|
+
] })
|
|
3304
|
+
] }),
|
|
3305
|
+
/* @__PURE__ */ jsx23("span", { className: "flex-shrink-0", children: /* @__PURE__ */ jsx23(
|
|
3306
|
+
Button_default,
|
|
3307
|
+
{
|
|
3308
|
+
size: "extra-small",
|
|
3309
|
+
onClick: () => onClickButton?.(valueButton),
|
|
3310
|
+
className: "min-w-fit",
|
|
3311
|
+
children: buttonLabel
|
|
3312
|
+
}
|
|
3313
|
+
) })
|
|
3208
3314
|
]
|
|
3209
3315
|
}
|
|
3210
3316
|
);
|
|
3211
3317
|
}
|
|
3212
3318
|
);
|
|
3213
|
-
|
|
3214
|
-
|
|
3215
|
-
|
|
3216
|
-
|
|
3217
|
-
|
|
3218
|
-
|
|
3319
|
+
var CardProgress = forwardRef9(
|
|
3320
|
+
({
|
|
3321
|
+
header,
|
|
3322
|
+
subhead,
|
|
3323
|
+
initialDate,
|
|
3324
|
+
endDate,
|
|
3325
|
+
progress = 0,
|
|
3326
|
+
direction = "horizontal",
|
|
3327
|
+
icon,
|
|
3328
|
+
color = "#B7DFFF",
|
|
3329
|
+
progressVariant = "blue",
|
|
3330
|
+
showDates = true,
|
|
3331
|
+
className,
|
|
3219
3332
|
...props
|
|
3220
|
-
}
|
|
3221
|
-
|
|
3222
|
-
|
|
3223
|
-
|
|
3224
|
-
|
|
3225
|
-
|
|
3226
|
-
|
|
3227
|
-
|
|
3228
|
-
|
|
3229
|
-
|
|
3230
|
-
|
|
3231
|
-
|
|
3232
|
-
|
|
3233
|
-
|
|
3234
|
-
|
|
3235
|
-
|
|
3236
|
-
|
|
3237
|
-
|
|
3238
|
-
|
|
3239
|
-
|
|
3240
|
-
|
|
3241
|
-
|
|
3242
|
-
}
|
|
3243
|
-
|
|
3244
|
-
|
|
3245
|
-
|
|
3246
|
-
|
|
3247
|
-
|
|
3248
|
-
|
|
3249
|
-
|
|
3250
|
-
|
|
3251
|
-
|
|
3252
|
-
|
|
3253
|
-
|
|
3254
|
-
|
|
3255
|
-
|
|
3256
|
-
/* @__PURE__ */ jsx23("span", { className: "size-16 bg-primary-100 rounded-full flex items-center justify-center", children: /* @__PURE__ */ jsx23(User, { size: 34, className: "text-primary-950" }) }),
|
|
3257
|
-
/* @__PURE__ */ jsxs18("div", { className: "flex flex-col ", children: [
|
|
3258
|
-
/* @__PURE__ */ jsx23("p", { className: "text-xl font-bold text-text-950", children: name }),
|
|
3259
|
-
/* @__PURE__ */ jsx23("p", { className: "text-md text-text-600", children: email })
|
|
3333
|
+
}, ref) => {
|
|
3334
|
+
const isHorizontal = direction === "horizontal";
|
|
3335
|
+
const contentComponent = {
|
|
3336
|
+
horizontal: /* @__PURE__ */ jsxs18(Fragment4, { children: [
|
|
3337
|
+
showDates && /* @__PURE__ */ jsxs18("div", { className: "flex flex-row gap-6 items-center", children: [
|
|
3338
|
+
initialDate && /* @__PURE__ */ jsxs18("span", { className: "flex flex-row gap-1 items-center text-2xs", children: [
|
|
3339
|
+
/* @__PURE__ */ jsx23("p", { className: "text-text-800 font-semibold", children: "In\xEDcio" }),
|
|
3340
|
+
/* @__PURE__ */ jsx23("p", { className: "text-text-600", children: initialDate })
|
|
3341
|
+
] }),
|
|
3342
|
+
endDate && /* @__PURE__ */ jsxs18("span", { className: "flex flex-row gap-1 items-center text-2xs", children: [
|
|
3343
|
+
/* @__PURE__ */ jsx23("p", { className: "text-text-800 font-semibold", children: "Fim" }),
|
|
3344
|
+
/* @__PURE__ */ jsx23("p", { className: "text-text-600", children: endDate })
|
|
3345
|
+
] })
|
|
3346
|
+
] }),
|
|
3347
|
+
/* @__PURE__ */ jsxs18("span", { className: "grid grid-cols-[1fr_auto] items-center gap-2", children: [
|
|
3348
|
+
/* @__PURE__ */ jsx23(
|
|
3349
|
+
ProgressBar_default,
|
|
3350
|
+
{
|
|
3351
|
+
size: "small",
|
|
3352
|
+
value: progress,
|
|
3353
|
+
variant: progressVariant,
|
|
3354
|
+
"data-testid": "progress-bar"
|
|
3355
|
+
}
|
|
3356
|
+
),
|
|
3357
|
+
/* @__PURE__ */ jsxs18(
|
|
3358
|
+
Text_default,
|
|
3359
|
+
{
|
|
3360
|
+
size: "xs",
|
|
3361
|
+
weight: "medium",
|
|
3362
|
+
className: `text-text-950 leading-none tracking-normal text-center flex-none`,
|
|
3363
|
+
children: [
|
|
3364
|
+
Math.round(progress),
|
|
3365
|
+
"%"
|
|
3366
|
+
]
|
|
3367
|
+
}
|
|
3368
|
+
)
|
|
3260
3369
|
] })
|
|
3261
|
-
]
|
|
3262
|
-
|
|
3263
|
-
|
|
3264
|
-
|
|
3265
|
-
|
|
3266
|
-
|
|
3267
|
-
|
|
3268
|
-
|
|
3269
|
-
|
|
3270
|
-
|
|
3271
|
-
|
|
3272
|
-
|
|
3273
|
-
|
|
3274
|
-
|
|
3275
|
-
|
|
3276
|
-
|
|
3277
|
-
|
|
3278
|
-
|
|
3279
|
-
|
|
3280
|
-
|
|
3281
|
-
|
|
3282
|
-
|
|
3283
|
-
|
|
3284
|
-
|
|
3285
|
-
|
|
3286
|
-
|
|
3287
|
-
|
|
3288
|
-
|
|
3289
|
-
|
|
3290
|
-
|
|
3291
|
-
|
|
3292
|
-
|
|
3293
|
-
|
|
3294
|
-
|
|
3295
|
-
|
|
3296
|
-
|
|
3297
|
-
|
|
3298
|
-
|
|
3299
|
-
|
|
3300
|
-
|
|
3301
|
-
|
|
3302
|
-
|
|
3303
|
-
/* @__PURE__ */ jsx23("span", { children: "Sair" })
|
|
3304
|
-
]
|
|
3305
|
-
}
|
|
3306
|
-
);
|
|
3307
|
-
};
|
|
3308
|
-
ProfileMenuFooter.displayName = "ProfileMenuFooter";
|
|
3309
|
-
var DropdownMenu_default = DropdownMenu;
|
|
3310
|
-
|
|
3311
|
-
// src/components/Select/Select.tsx
|
|
3312
|
-
import { create as create3, useStore as useStore2 } from "zustand";
|
|
3313
|
-
import {
|
|
3314
|
-
useEffect as useEffect4,
|
|
3315
|
-
useRef as useRef3,
|
|
3316
|
-
forwardRef as forwardRef10,
|
|
3317
|
-
isValidElement as isValidElement2,
|
|
3318
|
-
Children as Children2,
|
|
3319
|
-
cloneElement as cloneElement2,
|
|
3320
|
-
useId as useId5
|
|
3321
|
-
} from "react";
|
|
3322
|
-
import { CaretDown, Check as Check4, WarningCircle as WarningCircle5 } from "phosphor-react";
|
|
3323
|
-
import { Fragment as Fragment3, jsx as jsx24, jsxs as jsxs19 } from "react/jsx-runtime";
|
|
3324
|
-
var VARIANT_CLASSES4 = {
|
|
3325
|
-
outlined: "border rounded-lg focus:border-primary-950",
|
|
3326
|
-
underlined: "border-b focus:border-primary-950",
|
|
3327
|
-
rounded: "border rounded-full focus:border-primary-950"
|
|
3328
|
-
};
|
|
3329
|
-
var SIZE_CLASSES11 = {
|
|
3330
|
-
small: "text-sm",
|
|
3331
|
-
medium: "text-md",
|
|
3332
|
-
large: "text-lg",
|
|
3333
|
-
"extra-large": "text-lg"
|
|
3334
|
-
};
|
|
3335
|
-
var HEIGHT_CLASSES = {
|
|
3336
|
-
small: "h-8",
|
|
3337
|
-
medium: "h-9",
|
|
3338
|
-
large: "h-10",
|
|
3339
|
-
"extra-large": "h-12"
|
|
3340
|
-
};
|
|
3341
|
-
var PADDING_CLASSES = {
|
|
3342
|
-
small: "px-2 py-1",
|
|
3343
|
-
medium: "px-3 py-2",
|
|
3344
|
-
large: "px-4 py-3",
|
|
3345
|
-
"extra-large": "px-5 py-4"
|
|
3346
|
-
};
|
|
3347
|
-
var SIDE_CLASSES2 = {
|
|
3348
|
-
top: "bottom-full -translate-y-1",
|
|
3349
|
-
right: "top-full translate-y-1",
|
|
3350
|
-
bottom: "top-full translate-y-1",
|
|
3351
|
-
left: "top-full translate-y-1"
|
|
3352
|
-
};
|
|
3353
|
-
var ALIGN_CLASSES2 = {
|
|
3354
|
-
start: "left-0",
|
|
3355
|
-
center: "left-1/2 -translate-x-1/2",
|
|
3356
|
-
end: "right-0"
|
|
3357
|
-
};
|
|
3358
|
-
function createSelectStore(onValueChange) {
|
|
3359
|
-
return create3((set) => ({
|
|
3360
|
-
open: false,
|
|
3361
|
-
setOpen: (open) => set({ open }),
|
|
3362
|
-
value: "",
|
|
3363
|
-
setValue: (value) => set({ value }),
|
|
3364
|
-
selectedLabel: "",
|
|
3365
|
-
setSelectedLabel: (label) => set({ selectedLabel: label }),
|
|
3366
|
-
onValueChange
|
|
3367
|
-
}));
|
|
3368
|
-
}
|
|
3369
|
-
var useSelectStore = (externalStore) => {
|
|
3370
|
-
if (!externalStore) {
|
|
3371
|
-
throw new Error(
|
|
3372
|
-
"Component must be used within a Select (store is missing)"
|
|
3370
|
+
] }),
|
|
3371
|
+
vertical: /* @__PURE__ */ jsx23("p", { className: "text-sm text-text-800", children: subhead })
|
|
3372
|
+
};
|
|
3373
|
+
return /* @__PURE__ */ jsxs18(
|
|
3374
|
+
CardBase,
|
|
3375
|
+
{
|
|
3376
|
+
ref,
|
|
3377
|
+
layout: isHorizontal ? "horizontal" : "vertical",
|
|
3378
|
+
padding: "none",
|
|
3379
|
+
minHeight: "medium",
|
|
3380
|
+
cursor: "pointer",
|
|
3381
|
+
className: `${isHorizontal ? "h-20" : ""} ${className}`,
|
|
3382
|
+
...props,
|
|
3383
|
+
children: [
|
|
3384
|
+
/* @__PURE__ */ jsx23(
|
|
3385
|
+
"div",
|
|
3386
|
+
{
|
|
3387
|
+
className: `
|
|
3388
|
+
flex justify-center items-center [&>svg]:size-6 text-text-950
|
|
3389
|
+
${isHorizontal ? "min-w-[80px] min-h-[80px] rounded-l-xl" : "min-h-[50px] w-full rounded-t-xl"}
|
|
3390
|
+
${!color.startsWith("#") ? `bg-${color}` : ""}
|
|
3391
|
+
`,
|
|
3392
|
+
style: color.startsWith("#") ? { backgroundColor: color } : void 0,
|
|
3393
|
+
"data-testid": "icon-container",
|
|
3394
|
+
children: icon
|
|
3395
|
+
}
|
|
3396
|
+
),
|
|
3397
|
+
/* @__PURE__ */ jsxs18(
|
|
3398
|
+
"div",
|
|
3399
|
+
{
|
|
3400
|
+
className: `
|
|
3401
|
+
p-4 flex flex-col justify-between w-full h-full
|
|
3402
|
+
${!isHorizontal && "gap-4"}
|
|
3403
|
+
`,
|
|
3404
|
+
children: [
|
|
3405
|
+
/* @__PURE__ */ jsx23(Text_default, { size: "sm", weight: "bold", className: "text-text-950 truncate", children: header }),
|
|
3406
|
+
contentComponent[direction]
|
|
3407
|
+
]
|
|
3408
|
+
}
|
|
3409
|
+
)
|
|
3410
|
+
]
|
|
3411
|
+
}
|
|
3373
3412
|
);
|
|
3374
3413
|
}
|
|
3375
|
-
|
|
3376
|
-
|
|
3377
|
-
|
|
3378
|
-
|
|
3379
|
-
|
|
3414
|
+
);
|
|
3415
|
+
var CardTopic = forwardRef9(
|
|
3416
|
+
({
|
|
3417
|
+
header,
|
|
3418
|
+
subHead,
|
|
3419
|
+
progress,
|
|
3420
|
+
showPercentage = false,
|
|
3421
|
+
progressVariant = "blue",
|
|
3422
|
+
className = "",
|
|
3423
|
+
...props
|
|
3424
|
+
}, ref) => {
|
|
3425
|
+
return /* @__PURE__ */ jsxs18(
|
|
3426
|
+
CardBase,
|
|
3427
|
+
{
|
|
3428
|
+
ref,
|
|
3429
|
+
layout: "vertical",
|
|
3430
|
+
padding: "small",
|
|
3431
|
+
minHeight: "medium",
|
|
3432
|
+
cursor: "pointer",
|
|
3433
|
+
className: `justify-center gap-2 py-2 px-4 ${className}`,
|
|
3434
|
+
...props,
|
|
3435
|
+
children: [
|
|
3436
|
+
subHead && /* @__PURE__ */ jsx23("span", { className: "text-text-600 text-2xs flex flex-row gap-1", children: subHead.map((text, index) => /* @__PURE__ */ jsxs18(Fragment3, { children: [
|
|
3437
|
+
/* @__PURE__ */ jsx23("p", { children: text }),
|
|
3438
|
+
index < subHead.length - 1 && /* @__PURE__ */ jsx23("p", { children: "\u2022" })
|
|
3439
|
+
] }, `${text} - ${index}`)) }),
|
|
3440
|
+
/* @__PURE__ */ jsx23("p", { className: "text-sm text-text-950 font-bold truncate", children: header }),
|
|
3441
|
+
/* @__PURE__ */ jsxs18("span", { className: "grid grid-cols-[1fr_auto] items-center gap-2", children: [
|
|
3442
|
+
/* @__PURE__ */ jsx23(
|
|
3443
|
+
ProgressBar_default,
|
|
3444
|
+
{
|
|
3445
|
+
size: "small",
|
|
3446
|
+
value: progress,
|
|
3447
|
+
variant: progressVariant,
|
|
3448
|
+
"data-testid": "progress-bar"
|
|
3449
|
+
}
|
|
3450
|
+
),
|
|
3451
|
+
showPercentage && /* @__PURE__ */ jsxs18(
|
|
3452
|
+
Text_default,
|
|
3453
|
+
{
|
|
3454
|
+
size: "xs",
|
|
3455
|
+
weight: "medium",
|
|
3456
|
+
className: `text-text-950 leading-none tracking-normal text-center flex-none`,
|
|
3457
|
+
children: [
|
|
3458
|
+
Math.round(progress),
|
|
3459
|
+
"%"
|
|
3460
|
+
]
|
|
3461
|
+
}
|
|
3462
|
+
)
|
|
3463
|
+
] })
|
|
3464
|
+
]
|
|
3465
|
+
}
|
|
3466
|
+
);
|
|
3380
3467
|
}
|
|
3381
|
-
|
|
3382
|
-
|
|
3383
|
-
|
|
3384
|
-
|
|
3385
|
-
|
|
3386
|
-
|
|
3387
|
-
|
|
3388
|
-
|
|
3389
|
-
|
|
3390
|
-
|
|
3391
|
-
|
|
3392
|
-
|
|
3393
|
-
|
|
3394
|
-
|
|
3468
|
+
);
|
|
3469
|
+
var CardPerformance = forwardRef9(
|
|
3470
|
+
({
|
|
3471
|
+
header,
|
|
3472
|
+
progress,
|
|
3473
|
+
description = "Sem dados ainda! Voc\xEA ainda n\xE3o fez um question\xE1rio neste assunto.",
|
|
3474
|
+
actionVariant = "button",
|
|
3475
|
+
progressVariant = "blue",
|
|
3476
|
+
labelProgress = "",
|
|
3477
|
+
className = "",
|
|
3478
|
+
onClickButton,
|
|
3479
|
+
valueButton,
|
|
3480
|
+
...props
|
|
3481
|
+
}, ref) => {
|
|
3482
|
+
const hasProgress = progress !== void 0;
|
|
3483
|
+
return /* @__PURE__ */ jsxs18(
|
|
3484
|
+
CardBase,
|
|
3485
|
+
{
|
|
3486
|
+
ref,
|
|
3487
|
+
layout: "horizontal",
|
|
3488
|
+
padding: "medium",
|
|
3489
|
+
minHeight: "none",
|
|
3490
|
+
className: `justify-between gap-2 ${actionVariant == "caret" ? "cursor-pointer" : ""} ${className}`,
|
|
3491
|
+
onClick: () => actionVariant == "caret" && onClickButton?.(valueButton),
|
|
3492
|
+
...props,
|
|
3493
|
+
children: [
|
|
3494
|
+
/* @__PURE__ */ jsxs18("div", { className: "w-full flex flex-col justify-between gap-2", children: [
|
|
3495
|
+
/* @__PURE__ */ jsxs18("div", { className: "flex flex-row justify-between items-center gap-2", children: [
|
|
3496
|
+
/* @__PURE__ */ jsx23("p", { className: "text-lg font-bold text-text-950 truncate flex-1 min-w-0", children: header }),
|
|
3497
|
+
actionVariant === "button" && /* @__PURE__ */ jsx23(
|
|
3498
|
+
Button_default,
|
|
3499
|
+
{
|
|
3500
|
+
variant: "outline",
|
|
3501
|
+
size: "extra-small",
|
|
3502
|
+
onClick: () => onClickButton?.(valueButton),
|
|
3503
|
+
className: "min-w-fit flex-shrink-0",
|
|
3504
|
+
children: "Ver Aula"
|
|
3505
|
+
}
|
|
3506
|
+
)
|
|
3507
|
+
] }),
|
|
3508
|
+
/* @__PURE__ */ jsx23("div", { className: "w-full", children: hasProgress ? /* @__PURE__ */ jsx23(
|
|
3509
|
+
ProgressBar_default,
|
|
3510
|
+
{
|
|
3511
|
+
value: progress,
|
|
3512
|
+
label: `${progress}% ${labelProgress}`,
|
|
3513
|
+
variant: progressVariant
|
|
3514
|
+
}
|
|
3515
|
+
) : /* @__PURE__ */ jsx23("p", { className: "text-xs text-text-600 truncate", children: description }) })
|
|
3516
|
+
] }),
|
|
3517
|
+
actionVariant == "caret" && /* @__PURE__ */ jsx23(
|
|
3518
|
+
CaretRight,
|
|
3519
|
+
{
|
|
3520
|
+
className: "size-4.5 text-text-800 cursor-pointer",
|
|
3521
|
+
"data-testid": "caret-icon"
|
|
3522
|
+
}
|
|
3523
|
+
)
|
|
3524
|
+
]
|
|
3395
3525
|
}
|
|
3396
|
-
|
|
3397
|
-
|
|
3398
|
-
|
|
3399
|
-
|
|
3400
|
-
|
|
3401
|
-
|
|
3402
|
-
|
|
3526
|
+
);
|
|
3527
|
+
}
|
|
3528
|
+
);
|
|
3529
|
+
var CardResults = forwardRef9(
|
|
3530
|
+
({
|
|
3531
|
+
header,
|
|
3532
|
+
correct_answers,
|
|
3533
|
+
incorrect_answers,
|
|
3534
|
+
icon,
|
|
3535
|
+
direction = "col",
|
|
3536
|
+
color = "#B7DFFF",
|
|
3537
|
+
className,
|
|
3538
|
+
...props
|
|
3539
|
+
}, ref) => {
|
|
3540
|
+
const isRow = direction == "row";
|
|
3541
|
+
return /* @__PURE__ */ jsxs18(
|
|
3542
|
+
CardBase,
|
|
3543
|
+
{
|
|
3544
|
+
ref,
|
|
3545
|
+
layout: "horizontal",
|
|
3546
|
+
padding: "none",
|
|
3547
|
+
minHeight: "medium",
|
|
3548
|
+
className: `items-center pr-4 ${className}`,
|
|
3549
|
+
...props,
|
|
3550
|
+
children: [
|
|
3551
|
+
/* @__PURE__ */ jsx23(
|
|
3552
|
+
"div",
|
|
3553
|
+
{
|
|
3554
|
+
className: `
|
|
3555
|
+
flex justify-center items-center [&>svg]:size-8 text-text-950 min-w-20 max-w-20 min-h-20 h-full rounded-l-xl
|
|
3556
|
+
`,
|
|
3557
|
+
style: {
|
|
3558
|
+
backgroundColor: color
|
|
3559
|
+
},
|
|
3560
|
+
children: icon
|
|
3561
|
+
}
|
|
3562
|
+
),
|
|
3563
|
+
/* @__PURE__ */ jsxs18(
|
|
3564
|
+
"div",
|
|
3565
|
+
{
|
|
3566
|
+
className: `
|
|
3567
|
+
p-4 flex justify-between w-full h-full
|
|
3568
|
+
${isRow ? "flex-row items-center gap-2" : "flex-col"}
|
|
3569
|
+
`,
|
|
3570
|
+
children: [
|
|
3571
|
+
/* @__PURE__ */ jsx23("p", { className: "text-sm font-bold text-text-950 truncate flex-1 min-w-0", children: header }),
|
|
3572
|
+
/* @__PURE__ */ jsxs18("span", { className: "flex flex-row gap-1 items-center", children: [
|
|
3573
|
+
/* @__PURE__ */ jsxs18(
|
|
3574
|
+
Badge_default,
|
|
3575
|
+
{
|
|
3576
|
+
action: "success",
|
|
3577
|
+
variant: "solid",
|
|
3578
|
+
size: "medium",
|
|
3579
|
+
iconLeft: /* @__PURE__ */ jsx23(CheckCircle3, {}),
|
|
3580
|
+
children: [
|
|
3581
|
+
correct_answers,
|
|
3582
|
+
" Corretas"
|
|
3583
|
+
]
|
|
3584
|
+
}
|
|
3585
|
+
),
|
|
3586
|
+
/* @__PURE__ */ jsxs18(
|
|
3587
|
+
Badge_default,
|
|
3588
|
+
{
|
|
3589
|
+
action: "error",
|
|
3590
|
+
variant: "solid",
|
|
3591
|
+
size: "medium",
|
|
3592
|
+
iconLeft: /* @__PURE__ */ jsx23(XCircle2, {}),
|
|
3593
|
+
children: [
|
|
3594
|
+
incorrect_answers,
|
|
3595
|
+
" Incorretas"
|
|
3596
|
+
]
|
|
3597
|
+
}
|
|
3598
|
+
)
|
|
3599
|
+
] })
|
|
3600
|
+
]
|
|
3601
|
+
}
|
|
3602
|
+
),
|
|
3603
|
+
/* @__PURE__ */ jsx23(CaretRight, { className: "min-w-6 min-h-6 text-text-800 cursor-pointer" })
|
|
3604
|
+
]
|
|
3605
|
+
}
|
|
3606
|
+
);
|
|
3607
|
+
}
|
|
3608
|
+
);
|
|
3609
|
+
var CardStatus = forwardRef9(
|
|
3610
|
+
({ header, className, status, ...props }, ref) => {
|
|
3611
|
+
return /* @__PURE__ */ jsx23(
|
|
3612
|
+
CardBase,
|
|
3613
|
+
{
|
|
3614
|
+
ref,
|
|
3615
|
+
layout: "horizontal",
|
|
3616
|
+
padding: "medium",
|
|
3617
|
+
minHeight: "medium",
|
|
3618
|
+
className: `items-center ${className}`,
|
|
3619
|
+
...props,
|
|
3620
|
+
children: /* @__PURE__ */ jsxs18("div", { className: "flex justify-between w-full h-full flex-row items-center gap-2", children: [
|
|
3621
|
+
/* @__PURE__ */ jsx23("p", { className: "text-sm font-bold text-text-950 truncate flex-1 min-w-0", children: header }),
|
|
3622
|
+
status && /* @__PURE__ */ jsxs18("span", { className: "flex flex-row gap-1 items-center flex-shrink-0", children: [
|
|
3623
|
+
/* @__PURE__ */ jsx23(
|
|
3624
|
+
Badge_default,
|
|
3625
|
+
{
|
|
3626
|
+
action: status == "correct" ? "success" : "error",
|
|
3627
|
+
variant: "solid",
|
|
3628
|
+
size: "medium",
|
|
3629
|
+
iconLeft: /* @__PURE__ */ jsx23(CheckCircle3, {}),
|
|
3630
|
+
children: status == "correct" ? "Correta" : "Incorreta"
|
|
3631
|
+
}
|
|
3632
|
+
),
|
|
3633
|
+
/* @__PURE__ */ jsx23("p", { className: "text-sm text-text-800", children: "Respondida" })
|
|
3634
|
+
] }),
|
|
3635
|
+
/* @__PURE__ */ jsx23(CaretRight, { className: "min-w-6 min-h-6 text-text-800 cursor-pointer flex-shrink-0 ml-2" })
|
|
3636
|
+
] })
|
|
3637
|
+
}
|
|
3638
|
+
);
|
|
3639
|
+
}
|
|
3640
|
+
);
|
|
3641
|
+
var CardSettings = forwardRef9(
|
|
3642
|
+
({ header, className, icon, ...props }, ref) => {
|
|
3643
|
+
return /* @__PURE__ */ jsxs18(
|
|
3644
|
+
CardBase,
|
|
3645
|
+
{
|
|
3646
|
+
ref,
|
|
3647
|
+
layout: "horizontal",
|
|
3648
|
+
padding: "small",
|
|
3649
|
+
minHeight: "none",
|
|
3650
|
+
className: `border-none items-center gap-2 text-text-700 ${className}`,
|
|
3651
|
+
...props,
|
|
3652
|
+
children: [
|
|
3653
|
+
/* @__PURE__ */ jsx23("span", { className: "[&>svg]:size-6", children: icon }),
|
|
3654
|
+
/* @__PURE__ */ jsx23("p", { className: "w-full text-sm truncate", children: header }),
|
|
3655
|
+
/* @__PURE__ */ jsx23(CaretRight, { size: 24, className: "cursor-pointer" })
|
|
3656
|
+
]
|
|
3657
|
+
}
|
|
3658
|
+
);
|
|
3659
|
+
}
|
|
3660
|
+
);
|
|
3661
|
+
var CardSupport = forwardRef9(
|
|
3662
|
+
({ header, className, direction = "col", children, ...props }, ref) => {
|
|
3663
|
+
return /* @__PURE__ */ jsxs18(
|
|
3664
|
+
CardBase,
|
|
3665
|
+
{
|
|
3666
|
+
ref,
|
|
3667
|
+
layout: "horizontal",
|
|
3668
|
+
padding: "medium",
|
|
3669
|
+
minHeight: "none",
|
|
3670
|
+
className: `border-none items-center gap-2 text-text-700 ${className}`,
|
|
3671
|
+
...props,
|
|
3672
|
+
children: [
|
|
3673
|
+
/* @__PURE__ */ jsxs18(
|
|
3674
|
+
"div",
|
|
3675
|
+
{
|
|
3676
|
+
className: `
|
|
3677
|
+
w-full flex ${direction == "col" ? "flex-col" : "flex-row items-center"} gap-2
|
|
3678
|
+
`,
|
|
3679
|
+
children: [
|
|
3680
|
+
/* @__PURE__ */ jsx23("span", { className: "w-full min-w-0", children: /* @__PURE__ */ jsx23("p", { className: "text-sm text-text-950 font-bold truncate", children: header }) }),
|
|
3681
|
+
/* @__PURE__ */ jsx23("span", { className: "flex flex-row gap-1", children })
|
|
3682
|
+
]
|
|
3683
|
+
}
|
|
3684
|
+
),
|
|
3685
|
+
/* @__PURE__ */ jsx23(CaretRight, { className: "text-text-800 cursor-pointer", size: 24 })
|
|
3686
|
+
]
|
|
3687
|
+
}
|
|
3688
|
+
);
|
|
3689
|
+
}
|
|
3690
|
+
);
|
|
3691
|
+
var CardForum = forwardRef9(
|
|
3692
|
+
({
|
|
3693
|
+
title,
|
|
3694
|
+
content,
|
|
3695
|
+
comments,
|
|
3696
|
+
onClickComments,
|
|
3697
|
+
valueComments,
|
|
3698
|
+
onClickProfile,
|
|
3699
|
+
valueProfile,
|
|
3700
|
+
className = "",
|
|
3701
|
+
date,
|
|
3702
|
+
hour,
|
|
3703
|
+
...props
|
|
3704
|
+
}, ref) => {
|
|
3705
|
+
return /* @__PURE__ */ jsxs18(
|
|
3706
|
+
CardBase,
|
|
3707
|
+
{
|
|
3708
|
+
ref,
|
|
3709
|
+
layout: "horizontal",
|
|
3710
|
+
padding: "medium",
|
|
3711
|
+
minHeight: "none",
|
|
3712
|
+
variant: "minimal",
|
|
3713
|
+
className: `w-auto h-auto gap-3 ${className}`,
|
|
3714
|
+
...props,
|
|
3715
|
+
children: [
|
|
3716
|
+
/* @__PURE__ */ jsx23(
|
|
3717
|
+
"button",
|
|
3718
|
+
{
|
|
3719
|
+
type: "button",
|
|
3720
|
+
"aria-label": "Ver perfil",
|
|
3721
|
+
onClick: () => onClickProfile?.(valueProfile),
|
|
3722
|
+
className: "min-w-8 h-8 rounded-full bg-background-950"
|
|
3723
|
+
}
|
|
3724
|
+
),
|
|
3725
|
+
/* @__PURE__ */ jsxs18("div", { className: "flex flex-col gap-2 flex-1 min-w-0", children: [
|
|
3726
|
+
/* @__PURE__ */ jsxs18("div", { className: "flex flex-row gap-1 items-center flex-wrap", children: [
|
|
3727
|
+
/* @__PURE__ */ jsx23("p", { className: "text-xs font-semibold text-primary-700 truncate", children: title }),
|
|
3728
|
+
/* @__PURE__ */ jsxs18("p", { className: "text-xs text-text-600", children: [
|
|
3729
|
+
"\u2022 ",
|
|
3730
|
+
date,
|
|
3731
|
+
" \u2022 ",
|
|
3732
|
+
hour
|
|
3733
|
+
] })
|
|
3734
|
+
] }),
|
|
3735
|
+
/* @__PURE__ */ jsx23("p", { className: "text-text-950 text-sm line-clamp-2 truncate", children: content }),
|
|
3736
|
+
/* @__PURE__ */ jsxs18(
|
|
3737
|
+
"button",
|
|
3738
|
+
{
|
|
3739
|
+
type: "button",
|
|
3740
|
+
"aria-label": "Ver coment\xE1rios",
|
|
3741
|
+
onClick: () => onClickComments?.(valueComments),
|
|
3742
|
+
className: "text-text-600 flex flex-row gap-2 items-center",
|
|
3743
|
+
children: [
|
|
3744
|
+
/* @__PURE__ */ jsx23(ChatCircleText, { "aria-hidden": "true", size: 16 }),
|
|
3745
|
+
/* @__PURE__ */ jsxs18("p", { className: "text-xs", children: [
|
|
3746
|
+
comments,
|
|
3747
|
+
" respostas"
|
|
3748
|
+
] })
|
|
3749
|
+
]
|
|
3750
|
+
}
|
|
3751
|
+
)
|
|
3752
|
+
] })
|
|
3753
|
+
]
|
|
3754
|
+
}
|
|
3755
|
+
);
|
|
3756
|
+
}
|
|
3757
|
+
);
|
|
3758
|
+
var CardAudio = forwardRef9(
|
|
3759
|
+
({
|
|
3760
|
+
src,
|
|
3761
|
+
title,
|
|
3762
|
+
onPlay,
|
|
3763
|
+
onPause,
|
|
3764
|
+
onEnded,
|
|
3765
|
+
onAudioTimeUpdate,
|
|
3766
|
+
loop = false,
|
|
3767
|
+
preload = "metadata",
|
|
3768
|
+
tracks,
|
|
3769
|
+
className,
|
|
3770
|
+
...props
|
|
3771
|
+
}, ref) => {
|
|
3772
|
+
const [isPlaying, setIsPlaying] = useState6(false);
|
|
3773
|
+
const [currentTime, setCurrentTime] = useState6(0);
|
|
3774
|
+
const [duration, setDuration] = useState6(0);
|
|
3775
|
+
const [volume, setVolume] = useState6(1);
|
|
3776
|
+
const [showVolumeControl, setShowVolumeControl] = useState6(false);
|
|
3777
|
+
const audioRef = useRef3(null);
|
|
3778
|
+
const formatTime = (time) => {
|
|
3779
|
+
const minutes = Math.floor(time / 60);
|
|
3780
|
+
const seconds = Math.floor(time % 60);
|
|
3781
|
+
return `${minutes}:${seconds.toString().padStart(2, "0")}`;
|
|
3782
|
+
};
|
|
3783
|
+
const handlePlayPause = () => {
|
|
3784
|
+
if (isPlaying) {
|
|
3785
|
+
audioRef.current?.pause();
|
|
3786
|
+
setIsPlaying(false);
|
|
3787
|
+
onPause?.();
|
|
3788
|
+
} else {
|
|
3789
|
+
audioRef.current?.play();
|
|
3790
|
+
setIsPlaying(true);
|
|
3791
|
+
onPlay?.();
|
|
3403
3792
|
}
|
|
3404
|
-
return cloneElement2(typedChild, newProps);
|
|
3405
|
-
}
|
|
3406
|
-
return child;
|
|
3407
|
-
});
|
|
3408
|
-
};
|
|
3409
|
-
var Select = ({
|
|
3410
|
-
children,
|
|
3411
|
-
defaultValue = "",
|
|
3412
|
-
value: propValue,
|
|
3413
|
-
onValueChange,
|
|
3414
|
-
size = "small",
|
|
3415
|
-
label,
|
|
3416
|
-
helperText,
|
|
3417
|
-
errorMessage,
|
|
3418
|
-
id
|
|
3419
|
-
}) => {
|
|
3420
|
-
const storeRef = useRef3(null);
|
|
3421
|
-
storeRef.current ??= createSelectStore(onValueChange);
|
|
3422
|
-
const store = storeRef.current;
|
|
3423
|
-
const selectRef = useRef3(null);
|
|
3424
|
-
const { open, setOpen, setValue, selectedLabel } = useStore2(store, (s) => s);
|
|
3425
|
-
const generatedId = useId5();
|
|
3426
|
-
const selectId = id ?? `select-${generatedId}`;
|
|
3427
|
-
const findLabelForValue = (children2, targetValue) => {
|
|
3428
|
-
let found = null;
|
|
3429
|
-
const search = (nodes) => {
|
|
3430
|
-
Children2.forEach(nodes, (child) => {
|
|
3431
|
-
if (!isValidElement2(child)) return;
|
|
3432
|
-
const typedChild = child;
|
|
3433
|
-
if (typedChild.type === SelectItem && typedChild.props.value === targetValue) {
|
|
3434
|
-
if (typeof typedChild.props.children === "string")
|
|
3435
|
-
found = typedChild.props.children;
|
|
3436
|
-
}
|
|
3437
|
-
if (typedChild.props.children && !found)
|
|
3438
|
-
search(typedChild.props.children);
|
|
3439
|
-
});
|
|
3440
3793
|
};
|
|
3441
|
-
|
|
3442
|
-
|
|
3443
|
-
|
|
3444
|
-
|
|
3445
|
-
|
|
3446
|
-
|
|
3447
|
-
|
|
3448
|
-
|
|
3449
|
-
|
|
3450
|
-
|
|
3451
|
-
const
|
|
3452
|
-
|
|
3453
|
-
|
|
3794
|
+
const handleTimeUpdate = () => {
|
|
3795
|
+
const current = audioRef.current?.currentTime ?? 0;
|
|
3796
|
+
const total = audioRef.current?.duration ?? 0;
|
|
3797
|
+
setCurrentTime(current);
|
|
3798
|
+
setDuration(total);
|
|
3799
|
+
onAudioTimeUpdate?.(current, total);
|
|
3800
|
+
};
|
|
3801
|
+
const handleLoadedMetadata = () => {
|
|
3802
|
+
setDuration(audioRef.current?.duration ?? 0);
|
|
3803
|
+
};
|
|
3804
|
+
const handleEnded = () => {
|
|
3805
|
+
setIsPlaying(false);
|
|
3806
|
+
setCurrentTime(0);
|
|
3807
|
+
onEnded?.();
|
|
3808
|
+
};
|
|
3809
|
+
const handleProgressClick = (e) => {
|
|
3810
|
+
const rect = e.currentTarget.getBoundingClientRect();
|
|
3811
|
+
const clickX = e.clientX - rect.left;
|
|
3812
|
+
const width = rect.width;
|
|
3813
|
+
const percentage = clickX / width;
|
|
3814
|
+
const newTime = percentage * duration;
|
|
3815
|
+
if (audioRef.current) {
|
|
3816
|
+
audioRef.current.currentTime = newTime;
|
|
3454
3817
|
}
|
|
3818
|
+
setCurrentTime(newTime);
|
|
3455
3819
|
};
|
|
3456
|
-
const
|
|
3457
|
-
const
|
|
3458
|
-
|
|
3459
|
-
|
|
3460
|
-
|
|
3461
|
-
selectContent.querySelectorAll(
|
|
3462
|
-
'[role="menuitem"]:not([aria-disabled="true"])'
|
|
3463
|
-
)
|
|
3464
|
-
).filter((el) => el instanceof HTMLElement);
|
|
3465
|
-
const focused = document.activeElement;
|
|
3466
|
-
const currentIndex = items.findIndex((item) => item === focused);
|
|
3467
|
-
let nextIndex = 0;
|
|
3468
|
-
if (event.key === "ArrowDown") {
|
|
3469
|
-
nextIndex = currentIndex === -1 ? 0 : (currentIndex + 1) % items.length;
|
|
3470
|
-
} else {
|
|
3471
|
-
nextIndex = currentIndex === -1 ? items.length - 1 : (currentIndex - 1 + items.length) % items.length;
|
|
3472
|
-
}
|
|
3473
|
-
items[nextIndex]?.focus();
|
|
3820
|
+
const handleVolumeChange = (e) => {
|
|
3821
|
+
const newVolume = parseFloat(e.target.value);
|
|
3822
|
+
setVolume(newVolume);
|
|
3823
|
+
if (audioRef.current) {
|
|
3824
|
+
audioRef.current.volume = newVolume;
|
|
3474
3825
|
}
|
|
3475
3826
|
};
|
|
3476
|
-
|
|
3477
|
-
|
|
3478
|
-
document.addEventListener("keydown", handleArrowKeys);
|
|
3479
|
-
}
|
|
3480
|
-
return () => {
|
|
3481
|
-
document.removeEventListener("mousedown", handleClickOutside);
|
|
3482
|
-
document.removeEventListener("keydown", handleArrowKeys);
|
|
3827
|
+
const toggleVolumeControl = () => {
|
|
3828
|
+
setShowVolumeControl(!showVolumeControl);
|
|
3483
3829
|
};
|
|
3484
|
-
|
|
3485
|
-
|
|
3486
|
-
|
|
3487
|
-
setValue(propValue);
|
|
3488
|
-
const label2 = findLabelForValue(children, propValue);
|
|
3489
|
-
if (label2) store.setState({ selectedLabel: label2 });
|
|
3490
|
-
}
|
|
3491
|
-
}, [propValue]);
|
|
3492
|
-
const sizeClasses = SIZE_CLASSES11[size];
|
|
3493
|
-
return /* @__PURE__ */ jsxs19("div", { className: "w-full", children: [
|
|
3494
|
-
label && /* @__PURE__ */ jsx24(
|
|
3495
|
-
"label",
|
|
3496
|
-
{
|
|
3497
|
-
htmlFor: selectId,
|
|
3498
|
-
className: `block font-bold text-text-900 mb-1.5 ${sizeClasses}`,
|
|
3499
|
-
children: label
|
|
3830
|
+
const getVolumeIcon = () => {
|
|
3831
|
+
if (volume === 0) {
|
|
3832
|
+
return /* @__PURE__ */ jsx23(SpeakerSimpleX, {});
|
|
3500
3833
|
}
|
|
3501
|
-
|
|
3502
|
-
|
|
3503
|
-
|
|
3504
|
-
|
|
3505
|
-
|
|
3506
|
-
|
|
3507
|
-
|
|
3508
|
-
errorMessage
|
|
3509
|
-
] })
|
|
3510
|
-
] })
|
|
3511
|
-
] });
|
|
3512
|
-
};
|
|
3513
|
-
var SelectValue = ({
|
|
3514
|
-
placeholder,
|
|
3515
|
-
store: externalStore
|
|
3516
|
-
}) => {
|
|
3517
|
-
const store = useSelectStore(externalStore);
|
|
3518
|
-
const selectedLabel = useStore2(store, (s) => s.selectedLabel);
|
|
3519
|
-
const value = useStore2(store, (s) => s.value);
|
|
3520
|
-
return /* @__PURE__ */ jsx24("span", { className: "text-inherit", children: selectedLabel || placeholder || value });
|
|
3521
|
-
};
|
|
3522
|
-
var SelectTrigger = forwardRef10(
|
|
3523
|
-
({
|
|
3524
|
-
className,
|
|
3525
|
-
invalid = false,
|
|
3526
|
-
variant = "outlined",
|
|
3527
|
-
store: externalStore,
|
|
3528
|
-
disabled,
|
|
3529
|
-
size = "medium",
|
|
3530
|
-
selectId,
|
|
3531
|
-
...props
|
|
3532
|
-
}, ref) => {
|
|
3533
|
-
const store = useSelectStore(externalStore);
|
|
3534
|
-
const open = useStore2(store, (s) => s.open);
|
|
3535
|
-
const toggleOpen = () => store.setState({ open: !open });
|
|
3536
|
-
const variantClasses = VARIANT_CLASSES4[variant];
|
|
3537
|
-
const heightClasses = HEIGHT_CLASSES[size];
|
|
3538
|
-
const paddingClasses = PADDING_CLASSES[size];
|
|
3539
|
-
return /* @__PURE__ */ jsxs19(
|
|
3540
|
-
"button",
|
|
3834
|
+
if (volume < 0.5) {
|
|
3835
|
+
return /* @__PURE__ */ jsx23(SpeakerLow, {});
|
|
3836
|
+
}
|
|
3837
|
+
return /* @__PURE__ */ jsx23(SpeakerHigh, {});
|
|
3838
|
+
};
|
|
3839
|
+
return /* @__PURE__ */ jsxs18(
|
|
3840
|
+
CardBase,
|
|
3541
3841
|
{
|
|
3542
3842
|
ref,
|
|
3543
|
-
|
|
3544
|
-
|
|
3545
|
-
|
|
3546
|
-
|
|
3547
|
-
${invalid && `${variant == "underlined" ? "border-b-2" : "border-2"} border-indicator-error text-text-600`}
|
|
3548
|
-
${disabled ? "cursor-not-allowed text-text-400 pointer-events-none opacity-50" : "cursor-pointer hover:bg-background-50 focus:bg-accent focus:text-accent-foreground hover:bg-accent hover:text-accent-foreground"}
|
|
3549
|
-
${!invalid && !disabled ? "text-text-700" : ""}
|
|
3550
|
-
${variantClasses}
|
|
3551
|
-
${className}
|
|
3552
|
-
`,
|
|
3553
|
-
onClick: toggleOpen,
|
|
3554
|
-
"aria-expanded": open,
|
|
3555
|
-
"aria-haspopup": "listbox",
|
|
3556
|
-
"aria-controls": open ? "select-content" : void 0,
|
|
3843
|
+
layout: "horizontal",
|
|
3844
|
+
padding: "medium",
|
|
3845
|
+
minHeight: "none",
|
|
3846
|
+
className: `w-auto h-14 items-center gap-2 ${className}`,
|
|
3557
3847
|
...props,
|
|
3558
3848
|
children: [
|
|
3559
|
-
|
|
3560
|
-
|
|
3561
|
-
|
|
3849
|
+
/* @__PURE__ */ jsx23(
|
|
3850
|
+
"audio",
|
|
3851
|
+
{
|
|
3852
|
+
ref: audioRef,
|
|
3853
|
+
src,
|
|
3854
|
+
loop,
|
|
3855
|
+
preload,
|
|
3856
|
+
onTimeUpdate: handleTimeUpdate,
|
|
3857
|
+
onLoadedMetadata: handleLoadedMetadata,
|
|
3858
|
+
onEnded: handleEnded,
|
|
3859
|
+
"data-testid": "audio-element",
|
|
3860
|
+
"aria-label": title,
|
|
3861
|
+
children: tracks ? tracks.map((track) => /* @__PURE__ */ jsx23(
|
|
3862
|
+
"track",
|
|
3863
|
+
{
|
|
3864
|
+
kind: track.kind,
|
|
3865
|
+
src: track.src,
|
|
3866
|
+
srcLang: track.srcLang,
|
|
3867
|
+
label: track.label,
|
|
3868
|
+
default: track.default
|
|
3869
|
+
},
|
|
3870
|
+
track.src
|
|
3871
|
+
)) : /* @__PURE__ */ jsx23(
|
|
3872
|
+
"track",
|
|
3873
|
+
{
|
|
3874
|
+
kind: "captions",
|
|
3875
|
+
src: "data:text/vtt;base64,",
|
|
3876
|
+
srcLang: "pt",
|
|
3877
|
+
label: "Sem legendas dispon\xEDveis"
|
|
3878
|
+
}
|
|
3879
|
+
)
|
|
3880
|
+
}
|
|
3881
|
+
),
|
|
3882
|
+
/* @__PURE__ */ jsx23(
|
|
3883
|
+
"button",
|
|
3884
|
+
{
|
|
3885
|
+
type: "button",
|
|
3886
|
+
onClick: handlePlayPause,
|
|
3887
|
+
disabled: !src,
|
|
3888
|
+
className: "cursor-pointer text-text-950 hover:text-primary-600 disabled:text-text-400 disabled:cursor-not-allowed",
|
|
3889
|
+
"aria-label": isPlaying ? "Pausar" : "Reproduzir",
|
|
3890
|
+
children: isPlaying ? /* @__PURE__ */ jsx23("div", { className: "w-6 h-6 flex items-center justify-center", children: /* @__PURE__ */ jsxs18("div", { className: "flex gap-0.5", children: [
|
|
3891
|
+
/* @__PURE__ */ jsx23("div", { className: "w-1 h-4 bg-current rounded-sm" }),
|
|
3892
|
+
/* @__PURE__ */ jsx23("div", { className: "w-1 h-4 bg-current rounded-sm" })
|
|
3893
|
+
] }) }) : /* @__PURE__ */ jsx23(Play, { size: 24 })
|
|
3894
|
+
}
|
|
3895
|
+
),
|
|
3896
|
+
/* @__PURE__ */ jsx23("p", { className: "text-text-800 text-sm font-medium min-w-[2.5rem]", children: formatTime(currentTime) }),
|
|
3897
|
+
/* @__PURE__ */ jsx23("div", { className: "flex-1 relative", "data-testid": "progress-bar", children: /* @__PURE__ */ jsx23(
|
|
3898
|
+
"button",
|
|
3899
|
+
{
|
|
3900
|
+
type: "button",
|
|
3901
|
+
className: "w-full h-2 bg-border-100 rounded-full cursor-pointer",
|
|
3902
|
+
onClick: handleProgressClick,
|
|
3903
|
+
onKeyDown: (e) => {
|
|
3904
|
+
if (e.key === "Enter" || e.key === " ") {
|
|
3905
|
+
e.preventDefault();
|
|
3906
|
+
handleProgressClick(
|
|
3907
|
+
e
|
|
3908
|
+
);
|
|
3909
|
+
}
|
|
3910
|
+
},
|
|
3911
|
+
"aria-label": "Barra de progresso do \xE1udio",
|
|
3912
|
+
children: /* @__PURE__ */ jsx23(
|
|
3913
|
+
"div",
|
|
3914
|
+
{
|
|
3915
|
+
className: "h-full bg-primary-600 rounded-full transition-all duration-100",
|
|
3916
|
+
style: {
|
|
3917
|
+
width: duration > 0 ? `${currentTime / duration * 100}%` : "0%"
|
|
3918
|
+
}
|
|
3919
|
+
}
|
|
3920
|
+
)
|
|
3921
|
+
}
|
|
3922
|
+
) }),
|
|
3923
|
+
/* @__PURE__ */ jsx23("p", { className: "text-text-800 text-sm font-medium min-w-[2.5rem]", children: formatTime(duration) }),
|
|
3924
|
+
/* @__PURE__ */ jsxs18("div", { className: "relative", children: [
|
|
3925
|
+
/* @__PURE__ */ jsx23(
|
|
3926
|
+
"button",
|
|
3927
|
+
{
|
|
3928
|
+
type: "button",
|
|
3929
|
+
onClick: toggleVolumeControl,
|
|
3930
|
+
className: "cursor-pointer text-text-950 hover:text-primary-600",
|
|
3931
|
+
"aria-label": "Controle de volume",
|
|
3932
|
+
children: /* @__PURE__ */ jsx23("div", { className: "w-6 h-6 flex items-center justify-center", children: getVolumeIcon() })
|
|
3933
|
+
}
|
|
3934
|
+
),
|
|
3935
|
+
showVolumeControl && /* @__PURE__ */ jsx23(
|
|
3936
|
+
"button",
|
|
3937
|
+
{
|
|
3938
|
+
type: "button",
|
|
3939
|
+
className: "absolute bottom-full right-0 mb-2 p-2 bg-background border border-border-100 rounded-lg shadow-lg focus:outline-none focus:ring-2 focus:ring-primary-500",
|
|
3940
|
+
onKeyDown: (e) => {
|
|
3941
|
+
if (e.key === "Escape") {
|
|
3942
|
+
setShowVolumeControl(false);
|
|
3943
|
+
}
|
|
3944
|
+
},
|
|
3945
|
+
children: /* @__PURE__ */ jsx23(
|
|
3946
|
+
"input",
|
|
3947
|
+
{
|
|
3948
|
+
type: "range",
|
|
3949
|
+
min: "0",
|
|
3950
|
+
max: "1",
|
|
3951
|
+
step: "0.1",
|
|
3952
|
+
value: volume,
|
|
3953
|
+
onChange: handleVolumeChange,
|
|
3954
|
+
onKeyDown: (e) => {
|
|
3955
|
+
if (e.key === "ArrowUp" || e.key === "ArrowRight") {
|
|
3956
|
+
e.preventDefault();
|
|
3957
|
+
const newVolume = Math.min(
|
|
3958
|
+
1,
|
|
3959
|
+
Math.round((volume + 0.1) * 10) / 10
|
|
3960
|
+
);
|
|
3961
|
+
setVolume(newVolume);
|
|
3962
|
+
if (audioRef.current) audioRef.current.volume = newVolume;
|
|
3963
|
+
} else if (e.key === "ArrowDown" || e.key === "ArrowLeft") {
|
|
3964
|
+
e.preventDefault();
|
|
3965
|
+
const newVolume = Math.max(
|
|
3966
|
+
0,
|
|
3967
|
+
Math.round((volume - 0.1) * 10) / 10
|
|
3968
|
+
);
|
|
3969
|
+
setVolume(newVolume);
|
|
3970
|
+
if (audioRef.current) audioRef.current.volume = newVolume;
|
|
3971
|
+
}
|
|
3972
|
+
},
|
|
3973
|
+
className: "w-20 h-2 bg-border-100 rounded-lg appearance-none cursor-pointer",
|
|
3974
|
+
style: {
|
|
3975
|
+
background: `linear-gradient(to right, #3b82f6 0%, #3b82f6 ${volume * 100}%, #e5e7eb ${volume * 100}%, #e5e7eb 100%)`
|
|
3976
|
+
},
|
|
3977
|
+
"aria-label": "Volume",
|
|
3978
|
+
"aria-valuenow": Math.round(volume * 100),
|
|
3979
|
+
"aria-valuemin": 0,
|
|
3980
|
+
"aria-valuemax": 100
|
|
3981
|
+
}
|
|
3982
|
+
)
|
|
3983
|
+
}
|
|
3984
|
+
)
|
|
3985
|
+
] }),
|
|
3986
|
+
/* @__PURE__ */ jsx23(
|
|
3987
|
+
DotsThreeVertical,
|
|
3562
3988
|
{
|
|
3563
|
-
|
|
3989
|
+
size: 24,
|
|
3990
|
+
className: "text-text-950 cursor-pointer hover:text-primary-600"
|
|
3564
3991
|
}
|
|
3565
3992
|
)
|
|
3566
3993
|
]
|
|
@@ -3568,800 +3995,1115 @@ var SelectTrigger = forwardRef10(
|
|
|
3568
3995
|
);
|
|
3569
3996
|
}
|
|
3570
3997
|
);
|
|
3571
|
-
|
|
3572
|
-
|
|
3573
|
-
|
|
3574
|
-
|
|
3575
|
-
|
|
3576
|
-
|
|
3577
|
-
|
|
3578
|
-
|
|
3579
|
-
|
|
3580
|
-
|
|
3581
|
-
|
|
3582
|
-
const open = useStore2(store, (s) => s.open);
|
|
3583
|
-
if (!open) return null;
|
|
3584
|
-
const getPositionClasses = () => `w-full min-w-full absolute ${SIDE_CLASSES2[side]} ${ALIGN_CLASSES2[align]}`;
|
|
3585
|
-
return /* @__PURE__ */ jsx24(
|
|
3586
|
-
"div",
|
|
3998
|
+
var SIMULADO_BACKGROUND_CLASSES = {
|
|
3999
|
+
enem: "bg-exam-1",
|
|
4000
|
+
prova: "bg-exam-2",
|
|
4001
|
+
simuladao: "bg-exam-3",
|
|
4002
|
+
vestibular: "bg-exam-4"
|
|
4003
|
+
};
|
|
4004
|
+
var CardSimulado = forwardRef9(
|
|
4005
|
+
({ title, duration, info, backgroundColor, className, ...props }, ref) => {
|
|
4006
|
+
const backgroundClass = SIMULADO_BACKGROUND_CLASSES[backgroundColor];
|
|
4007
|
+
return /* @__PURE__ */ jsx23(
|
|
4008
|
+
CardBase,
|
|
3587
4009
|
{
|
|
3588
|
-
role: "menu",
|
|
3589
4010
|
ref,
|
|
3590
|
-
|
|
4011
|
+
layout: "horizontal",
|
|
4012
|
+
padding: "medium",
|
|
4013
|
+
minHeight: "none",
|
|
4014
|
+
cursor: "pointer",
|
|
4015
|
+
className: `${backgroundClass} hover:shadow-soft-shadow-2 transition-shadow duration-200 ${className}`,
|
|
3591
4016
|
...props,
|
|
3592
|
-
children
|
|
4017
|
+
children: /* @__PURE__ */ jsxs18("div", { className: "flex justify-between items-center w-full gap-4", children: [
|
|
4018
|
+
/* @__PURE__ */ jsxs18("div", { className: "flex flex-col gap-1 flex-1 min-w-0", children: [
|
|
4019
|
+
/* @__PURE__ */ jsx23(Text_default, { size: "lg", weight: "bold", className: "text-text-950 truncate", children: title }),
|
|
4020
|
+
/* @__PURE__ */ jsxs18("div", { className: "flex items-center gap-4 text-text-700", children: [
|
|
4021
|
+
duration && /* @__PURE__ */ jsxs18("div", { className: "flex items-center gap-1", children: [
|
|
4022
|
+
/* @__PURE__ */ jsx23(Clock, { size: 16, className: "flex-shrink-0" }),
|
|
4023
|
+
/* @__PURE__ */ jsx23(Text_default, { size: "sm", children: duration })
|
|
4024
|
+
] }),
|
|
4025
|
+
/* @__PURE__ */ jsx23(Text_default, { size: "sm", className: "truncate", children: info })
|
|
4026
|
+
] })
|
|
4027
|
+
] }),
|
|
4028
|
+
/* @__PURE__ */ jsx23(
|
|
4029
|
+
CaretRight,
|
|
4030
|
+
{
|
|
4031
|
+
size: 24,
|
|
4032
|
+
className: "text-text-800 flex-shrink-0",
|
|
4033
|
+
"data-testid": "caret-icon"
|
|
4034
|
+
}
|
|
4035
|
+
)
|
|
4036
|
+
] })
|
|
3593
4037
|
}
|
|
3594
4038
|
);
|
|
3595
4039
|
}
|
|
3596
4040
|
);
|
|
3597
|
-
|
|
3598
|
-
|
|
4041
|
+
|
|
4042
|
+
// src/components/Accordation/Accordation.tsx
|
|
4043
|
+
import { CaretRight as CaretRight2 } from "phosphor-react";
|
|
4044
|
+
import { jsx as jsx24, jsxs as jsxs19 } from "react/jsx-runtime";
|
|
4045
|
+
var CardAccordation = forwardRef10(
|
|
3599
4046
|
({
|
|
3600
|
-
|
|
4047
|
+
title,
|
|
3601
4048
|
children,
|
|
3602
|
-
|
|
3603
|
-
|
|
3604
|
-
|
|
4049
|
+
className,
|
|
4050
|
+
defaultExpanded = false,
|
|
4051
|
+
onToggleExpanded,
|
|
3605
4052
|
...props
|
|
3606
4053
|
}, ref) => {
|
|
3607
|
-
const
|
|
3608
|
-
const
|
|
3609
|
-
|
|
3610
|
-
|
|
3611
|
-
|
|
3612
|
-
|
|
3613
|
-
onValueChange
|
|
3614
|
-
} = useStore2(store, (s) => s);
|
|
3615
|
-
const handleClick = (e) => {
|
|
3616
|
-
const labelNode = getLabelAsNode(children);
|
|
3617
|
-
if (!disabled) {
|
|
3618
|
-
setValue(value);
|
|
3619
|
-
setSelectedLabel(labelNode);
|
|
3620
|
-
setOpen(false);
|
|
3621
|
-
onValueChange?.(value);
|
|
3622
|
-
}
|
|
3623
|
-
props.onClick?.(e);
|
|
4054
|
+
const [isExpanded, setIsExpanded] = useState7(defaultExpanded);
|
|
4055
|
+
const contentId = useId5();
|
|
4056
|
+
const handleToggle = () => {
|
|
4057
|
+
const newExpanded = !isExpanded;
|
|
4058
|
+
setIsExpanded(newExpanded);
|
|
4059
|
+
onToggleExpanded?.(newExpanded);
|
|
3624
4060
|
};
|
|
3625
4061
|
return /* @__PURE__ */ jsxs19(
|
|
3626
|
-
|
|
4062
|
+
CardBase,
|
|
3627
4063
|
{
|
|
3628
|
-
role: "menuitem",
|
|
3629
|
-
"aria-disabled": disabled,
|
|
3630
4064
|
ref,
|
|
3631
|
-
|
|
3632
|
-
|
|
3633
|
-
|
|
3634
|
-
|
|
3635
|
-
${disabled ? "cursor-not-allowed text-text-400 pointer-events-none opacity-50" : "cursor-pointer hover:bg-background-50 text-text-700 focus:bg-accent focus:text-accent-foreground hover:bg-accent hover:text-accent-foreground"}
|
|
3636
|
-
${selectedValue === value && "bg-background-50"}
|
|
3637
|
-
`,
|
|
3638
|
-
onClick: handleClick,
|
|
3639
|
-
onKeyDown: (e) => {
|
|
3640
|
-
if (e.key === "Enter" || e.key === " ") handleClick(e);
|
|
3641
|
-
},
|
|
3642
|
-
tabIndex: disabled ? -1 : 0,
|
|
4065
|
+
layout: "vertical",
|
|
4066
|
+
padding: "none",
|
|
4067
|
+
minHeight: "none",
|
|
4068
|
+
className: `overflow-hidden ${className}`,
|
|
3643
4069
|
...props,
|
|
3644
4070
|
children: [
|
|
3645
|
-
/* @__PURE__ */
|
|
3646
|
-
|
|
4071
|
+
/* @__PURE__ */ jsxs19(
|
|
4072
|
+
"button",
|
|
4073
|
+
{
|
|
4074
|
+
onClick: handleToggle,
|
|
4075
|
+
className: "w-full cursor-pointer p-4 flex items-center justify-between gap-3 text-left transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-inset",
|
|
4076
|
+
"aria-expanded": isExpanded,
|
|
4077
|
+
"aria-controls": "accordion-content",
|
|
4078
|
+
children: [
|
|
4079
|
+
/* @__PURE__ */ jsx24(
|
|
4080
|
+
Text_default,
|
|
4081
|
+
{
|
|
4082
|
+
size: "sm",
|
|
4083
|
+
weight: "bold",
|
|
4084
|
+
className: "text-text-950 truncate flex-1",
|
|
4085
|
+
children: title
|
|
4086
|
+
}
|
|
4087
|
+
),
|
|
4088
|
+
/* @__PURE__ */ jsx24(
|
|
4089
|
+
CaretRight2,
|
|
4090
|
+
{
|
|
4091
|
+
size: 20,
|
|
4092
|
+
className: `text-text-700 transition-transform duration-200 flex-shrink-0 ${isExpanded ? "rotate-90" : "rotate-0"}`,
|
|
4093
|
+
"data-testid": "accordion-caret"
|
|
4094
|
+
}
|
|
4095
|
+
)
|
|
4096
|
+
]
|
|
4097
|
+
}
|
|
4098
|
+
),
|
|
4099
|
+
/* @__PURE__ */ jsx24(
|
|
4100
|
+
"div",
|
|
4101
|
+
{
|
|
4102
|
+
id: contentId,
|
|
4103
|
+
className: `transition-all duration-300 ease-in-out overflow-hidden ${isExpanded ? "max-h-screen opacity-100" : "max-h-0 opacity-0"}`,
|
|
4104
|
+
"data-testid": "accordion-content",
|
|
4105
|
+
children: /* @__PURE__ */ jsx24("div", { className: "p-4 pt-0 border-border-50", children })
|
|
4106
|
+
}
|
|
4107
|
+
)
|
|
3647
4108
|
]
|
|
3648
4109
|
}
|
|
3649
4110
|
);
|
|
3650
4111
|
}
|
|
3651
4112
|
);
|
|
3652
|
-
SelectItem.displayName = "SelectItem";
|
|
3653
|
-
var Select_default = Select;
|
|
3654
4113
|
|
|
3655
|
-
// src/components/
|
|
3656
|
-
import {
|
|
3657
|
-
import {
|
|
3658
|
-
useEffect as useEffect5,
|
|
3659
|
-
useRef as useRef4,
|
|
3660
|
-
forwardRef as forwardRef11,
|
|
3661
|
-
isValidElement as isValidElement3,
|
|
3662
|
-
Children as Children3,
|
|
3663
|
-
cloneElement as cloneElement3,
|
|
3664
|
-
useState as useState7
|
|
3665
|
-
} from "react";
|
|
3666
|
-
import { CaretLeft, CaretRight } from "phosphor-react";
|
|
4114
|
+
// src/components/Alternative/Alternative.tsx
|
|
4115
|
+
import { CheckCircle as CheckCircle4, XCircle as XCircle3 } from "phosphor-react";
|
|
4116
|
+
import { forwardRef as forwardRef11, useId as useId6 } from "react";
|
|
3667
4117
|
import { jsx as jsx25, jsxs as jsxs20 } from "react/jsx-runtime";
|
|
3668
|
-
var
|
|
3669
|
-
|
|
3670
|
-
|
|
3671
|
-
|
|
3672
|
-
|
|
3673
|
-
|
|
3674
|
-
|
|
3675
|
-
|
|
3676
|
-
|
|
3677
|
-
|
|
3678
|
-
|
|
3679
|
-
}
|
|
3680
|
-
|
|
3681
|
-
|
|
3682
|
-
|
|
3683
|
-
|
|
3684
|
-
|
|
3685
|
-
|
|
3686
|
-
|
|
3687
|
-
|
|
3688
|
-
|
|
3689
|
-
|
|
3690
|
-
|
|
3691
|
-
|
|
3692
|
-
|
|
3693
|
-
|
|
3694
|
-
|
|
3695
|
-
|
|
3696
|
-
|
|
3697
|
-
|
|
3698
|
-
|
|
3699
|
-
|
|
3700
|
-
|
|
3701
|
-
|
|
3702
|
-
|
|
3703
|
-
|
|
4118
|
+
var AlternativesList = ({
|
|
4119
|
+
alternatives,
|
|
4120
|
+
name,
|
|
4121
|
+
defaultValue,
|
|
4122
|
+
value,
|
|
4123
|
+
onValueChange,
|
|
4124
|
+
disabled = false,
|
|
4125
|
+
layout = "default",
|
|
4126
|
+
className = "",
|
|
4127
|
+
mode = "interactive",
|
|
4128
|
+
selectedValue
|
|
4129
|
+
}) => {
|
|
4130
|
+
const uniqueId = useId6();
|
|
4131
|
+
const groupName = name || `alternatives-${uniqueId}`;
|
|
4132
|
+
const isReadonly = mode === "readonly";
|
|
4133
|
+
const getStatusStyles = (status, isReadonly2) => {
|
|
4134
|
+
const hoverClass = isReadonly2 ? "" : "hover:bg-background-50";
|
|
4135
|
+
switch (status) {
|
|
4136
|
+
case "correct":
|
|
4137
|
+
return "bg-success-background border-success-300";
|
|
4138
|
+
case "incorrect":
|
|
4139
|
+
return "bg-error-background border-error-300";
|
|
4140
|
+
default:
|
|
4141
|
+
return `bg-background border-border-100 ${hoverClass}`;
|
|
4142
|
+
}
|
|
4143
|
+
};
|
|
4144
|
+
const getStatusBadge = (status) => {
|
|
4145
|
+
switch (status) {
|
|
4146
|
+
case "correct":
|
|
4147
|
+
return /* @__PURE__ */ jsx25(Badge_default, { variant: "solid", action: "success", iconLeft: /* @__PURE__ */ jsx25(CheckCircle4, {}), children: "Resposta correta" });
|
|
4148
|
+
case "incorrect":
|
|
4149
|
+
return /* @__PURE__ */ jsx25(Badge_default, { variant: "solid", action: "error", iconLeft: /* @__PURE__ */ jsx25(XCircle3, {}), children: "Resposta incorreta" });
|
|
4150
|
+
default:
|
|
4151
|
+
return null;
|
|
4152
|
+
}
|
|
4153
|
+
};
|
|
4154
|
+
const getLayoutClasses = () => {
|
|
4155
|
+
switch (layout) {
|
|
4156
|
+
case "compact":
|
|
4157
|
+
return "gap-2";
|
|
4158
|
+
case "detailed":
|
|
4159
|
+
return "gap-4";
|
|
4160
|
+
default:
|
|
4161
|
+
return "gap-3.5";
|
|
4162
|
+
}
|
|
4163
|
+
};
|
|
4164
|
+
const renderReadonlyAlternative = (alternative) => {
|
|
4165
|
+
const alternativeId = alternative.value;
|
|
4166
|
+
const isUserSelected = selectedValue === alternative.value;
|
|
4167
|
+
const isCorrectAnswer = alternative.status === "correct";
|
|
4168
|
+
let displayStatus = void 0;
|
|
4169
|
+
if (isUserSelected && !isCorrectAnswer) {
|
|
4170
|
+
displayStatus = "incorrect";
|
|
4171
|
+
} else if (isCorrectAnswer) {
|
|
4172
|
+
displayStatus = "correct";
|
|
4173
|
+
}
|
|
4174
|
+
const statusStyles = getStatusStyles(displayStatus, true);
|
|
4175
|
+
const statusBadge = getStatusBadge(displayStatus);
|
|
4176
|
+
const renderRadio = () => {
|
|
4177
|
+
const radioClasses = `w-6 h-6 rounded-full border-2 cursor-default transition-all duration-200 flex items-center justify-center ${isUserSelected ? "border-primary-950 bg-background" : "border-border-400 bg-background"}`;
|
|
4178
|
+
const dotClasses = "w-3 h-3 rounded-full bg-primary-950 transition-all duration-200";
|
|
4179
|
+
return /* @__PURE__ */ jsx25("div", { className: radioClasses, children: isUserSelected && /* @__PURE__ */ jsx25("div", { className: dotClasses }) });
|
|
4180
|
+
};
|
|
4181
|
+
if (layout === "detailed") {
|
|
4182
|
+
return /* @__PURE__ */ jsx25(
|
|
4183
|
+
"div",
|
|
4184
|
+
{
|
|
4185
|
+
className: `border-2 rounded-lg p-4 w-full ${statusStyles} ${alternative.disabled ? "opacity-50" : ""}`,
|
|
4186
|
+
children: /* @__PURE__ */ jsxs20("div", { className: "flex items-start justify-between gap-3", children: [
|
|
4187
|
+
/* @__PURE__ */ jsxs20("div", { className: "flex items-start gap-3 flex-1", children: [
|
|
4188
|
+
/* @__PURE__ */ jsx25("div", { className: "mt-1", children: renderRadio() }),
|
|
4189
|
+
/* @__PURE__ */ jsxs20("div", { className: "flex-1", children: [
|
|
4190
|
+
/* @__PURE__ */ jsx25("p", { className: "block font-medium text-text-950", children: alternative.label }),
|
|
4191
|
+
alternative.description && /* @__PURE__ */ jsx25("p", { className: "text-sm text-text-600 mt-1", children: alternative.description })
|
|
4192
|
+
] })
|
|
4193
|
+
] }),
|
|
4194
|
+
statusBadge && /* @__PURE__ */ jsx25("div", { className: "flex-shrink-0", children: statusBadge })
|
|
4195
|
+
] })
|
|
4196
|
+
},
|
|
4197
|
+
alternativeId
|
|
4198
|
+
);
|
|
4199
|
+
}
|
|
4200
|
+
return /* @__PURE__ */ jsxs20(
|
|
4201
|
+
"div",
|
|
4202
|
+
{
|
|
4203
|
+
className: `flex flex-row justify-between items-start gap-2 p-2 rounded-lg w-full ${statusStyles} ${alternative.disabled ? "opacity-50" : ""}`,
|
|
4204
|
+
children: [
|
|
4205
|
+
/* @__PURE__ */ jsxs20("div", { className: "flex items-center gap-2 flex-1", children: [
|
|
4206
|
+
renderRadio(),
|
|
4207
|
+
/* @__PURE__ */ jsx25("span", { className: "flex-1", children: alternative.label })
|
|
4208
|
+
] }),
|
|
4209
|
+
statusBadge && /* @__PURE__ */ jsx25("div", { className: "flex-shrink-0", children: statusBadge })
|
|
4210
|
+
]
|
|
4211
|
+
},
|
|
4212
|
+
alternativeId
|
|
4213
|
+
);
|
|
4214
|
+
};
|
|
4215
|
+
if (isReadonly) {
|
|
3704
4216
|
return /* @__PURE__ */ jsx25(
|
|
4217
|
+
"div",
|
|
4218
|
+
{
|
|
4219
|
+
className: `flex flex-col ${getLayoutClasses()} w-full ${className}`,
|
|
4220
|
+
children: alternatives.map(
|
|
4221
|
+
(alternative) => renderReadonlyAlternative(alternative)
|
|
4222
|
+
)
|
|
4223
|
+
}
|
|
4224
|
+
);
|
|
4225
|
+
}
|
|
4226
|
+
return /* @__PURE__ */ jsx25(
|
|
4227
|
+
RadioGroup,
|
|
4228
|
+
{
|
|
4229
|
+
name: groupName,
|
|
4230
|
+
defaultValue,
|
|
4231
|
+
value,
|
|
4232
|
+
onValueChange,
|
|
4233
|
+
disabled,
|
|
4234
|
+
className: `flex flex-col ${getLayoutClasses()} ${className}`,
|
|
4235
|
+
children: alternatives.map((alternative, index) => {
|
|
4236
|
+
const alternativeId = alternative.value || `alt-${index}`;
|
|
4237
|
+
const statusStyles = getStatusStyles(alternative.status, false);
|
|
4238
|
+
const statusBadge = getStatusBadge(alternative.status);
|
|
4239
|
+
if (layout === "detailed") {
|
|
4240
|
+
return /* @__PURE__ */ jsx25(
|
|
4241
|
+
"div",
|
|
4242
|
+
{
|
|
4243
|
+
className: `border-2 rounded-lg p-4 transition-all ${statusStyles} ${alternative.disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer"}`,
|
|
4244
|
+
children: /* @__PURE__ */ jsxs20("div", { className: "flex items-start justify-between gap-3", children: [
|
|
4245
|
+
/* @__PURE__ */ jsxs20("div", { className: "flex items-start gap-3 flex-1", children: [
|
|
4246
|
+
/* @__PURE__ */ jsx25(
|
|
4247
|
+
RadioGroupItem,
|
|
4248
|
+
{
|
|
4249
|
+
value: alternative.value,
|
|
4250
|
+
id: alternativeId,
|
|
4251
|
+
disabled: alternative.disabled,
|
|
4252
|
+
className: "mt-1"
|
|
4253
|
+
}
|
|
4254
|
+
),
|
|
4255
|
+
/* @__PURE__ */ jsxs20("div", { className: "flex-1", children: [
|
|
4256
|
+
/* @__PURE__ */ jsx25(
|
|
4257
|
+
"label",
|
|
4258
|
+
{
|
|
4259
|
+
htmlFor: alternativeId,
|
|
4260
|
+
className: `block font-medium text-text-950 ${alternative.disabled ? "cursor-not-allowed" : "cursor-pointer"}`,
|
|
4261
|
+
children: alternative.label
|
|
4262
|
+
}
|
|
4263
|
+
),
|
|
4264
|
+
alternative.description && /* @__PURE__ */ jsx25("p", { className: "text-sm text-text-600 mt-1", children: alternative.description })
|
|
4265
|
+
] })
|
|
4266
|
+
] }),
|
|
4267
|
+
statusBadge && /* @__PURE__ */ jsx25("div", { className: "flex-shrink-0", children: statusBadge })
|
|
4268
|
+
] })
|
|
4269
|
+
},
|
|
4270
|
+
alternativeId
|
|
4271
|
+
);
|
|
4272
|
+
}
|
|
4273
|
+
return /* @__PURE__ */ jsxs20(
|
|
4274
|
+
"div",
|
|
4275
|
+
{
|
|
4276
|
+
className: `flex flex-row justify-between gap-2 items-start p-2 rounded-lg transition-all ${statusStyles} ${alternative.disabled ? "opacity-50 cursor-not-allowed" : ""}`,
|
|
4277
|
+
children: [
|
|
4278
|
+
/* @__PURE__ */ jsxs20("div", { className: "flex items-center gap-2 flex-1", children: [
|
|
4279
|
+
/* @__PURE__ */ jsx25(
|
|
4280
|
+
RadioGroupItem,
|
|
4281
|
+
{
|
|
4282
|
+
value: alternative.value,
|
|
4283
|
+
id: alternativeId,
|
|
4284
|
+
disabled: alternative.disabled
|
|
4285
|
+
}
|
|
4286
|
+
),
|
|
4287
|
+
/* @__PURE__ */ jsx25(
|
|
4288
|
+
"label",
|
|
4289
|
+
{
|
|
4290
|
+
htmlFor: alternativeId,
|
|
4291
|
+
className: `flex-1 ${alternative.disabled ? "cursor-not-allowed" : "cursor-pointer"}`,
|
|
4292
|
+
children: alternative.label
|
|
4293
|
+
}
|
|
4294
|
+
)
|
|
4295
|
+
] }),
|
|
4296
|
+
statusBadge && /* @__PURE__ */ jsx25("div", { className: "flex-shrink-0", children: statusBadge })
|
|
4297
|
+
]
|
|
4298
|
+
},
|
|
4299
|
+
alternativeId
|
|
4300
|
+
);
|
|
4301
|
+
})
|
|
4302
|
+
}
|
|
4303
|
+
);
|
|
4304
|
+
};
|
|
4305
|
+
var HeaderAlternative = forwardRef11(
|
|
4306
|
+
({ className, title, subTitle, content, ...props }, ref) => {
|
|
4307
|
+
return /* @__PURE__ */ jsxs20(
|
|
3705
4308
|
"div",
|
|
3706
4309
|
{
|
|
3707
4310
|
ref,
|
|
3708
|
-
className: `
|
|
3709
|
-
${baseClasses}
|
|
3710
|
-
${variantClasses}
|
|
3711
|
-
${className ?? ""}
|
|
3712
|
-
`,
|
|
3713
|
-
...props,
|
|
3714
|
-
children: injectStore3(children, store)
|
|
3715
|
-
}
|
|
3716
|
-
);
|
|
3717
|
-
}
|
|
3718
|
-
);
|
|
3719
|
-
Menu.displayName = "Menu";
|
|
3720
|
-
var MenuContent = forwardRef11(
|
|
3721
|
-
({ className, children, variant = "menu", ...props }, ref) => {
|
|
3722
|
-
const baseClasses = "w-full flex flex-row items-center gap-2";
|
|
3723
|
-
const variantClasses = variant === "menu2" ? "overflow-x-auto scroll-smooth" : "";
|
|
3724
|
-
return /* @__PURE__ */ jsx25(
|
|
3725
|
-
"ul",
|
|
3726
|
-
{
|
|
3727
|
-
ref,
|
|
3728
|
-
className: `
|
|
3729
|
-
${baseClasses}
|
|
3730
|
-
${variantClasses}
|
|
3731
|
-
${variant == "breadcrumb" ? "flex-wrap" : ""}
|
|
3732
|
-
${className ?? ""}
|
|
3733
|
-
`,
|
|
3734
|
-
style: variant === "menu2" ? { scrollbarWidth: "none", msOverflowStyle: "none" } : void 0,
|
|
4311
|
+
className: `bg-background p-4 flex flex-col gap-4 rounded-xl ${className}`,
|
|
3735
4312
|
...props,
|
|
3736
|
-
children
|
|
4313
|
+
children: [
|
|
4314
|
+
/* @__PURE__ */ jsxs20("span", { className: "flex flex-col", children: [
|
|
4315
|
+
/* @__PURE__ */ jsx25("p", { className: "text-text-950 font-bold text-lg", children: title }),
|
|
4316
|
+
/* @__PURE__ */ jsx25("p", { className: "text-text-700 text-sm ", children: subTitle })
|
|
4317
|
+
] }),
|
|
4318
|
+
/* @__PURE__ */ jsx25("p", { className: "text-text-950 text-md", children: content })
|
|
4319
|
+
]
|
|
3737
4320
|
}
|
|
3738
4321
|
);
|
|
3739
4322
|
}
|
|
3740
4323
|
);
|
|
3741
|
-
|
|
3742
|
-
|
|
4324
|
+
|
|
4325
|
+
// src/components/AlertDialog/AlertDialog.tsx
|
|
4326
|
+
import {
|
|
4327
|
+
forwardRef as forwardRef12,
|
|
4328
|
+
useState as useState8,
|
|
4329
|
+
useEffect as useEffect4
|
|
4330
|
+
} from "react";
|
|
4331
|
+
import { Fragment as Fragment5, jsx as jsx26, jsxs as jsxs21 } from "react/jsx-runtime";
|
|
4332
|
+
var SIZE_CLASSES11 = {
|
|
4333
|
+
"extra-small": "w-screen max-w-[324px]",
|
|
4334
|
+
small: "w-screen max-w-[378px]",
|
|
4335
|
+
medium: "w-screen max-w-[459px]",
|
|
4336
|
+
large: "w-screen max-w-[578px]",
|
|
4337
|
+
"extra-large": "w-screen max-w-[912px]"
|
|
4338
|
+
};
|
|
4339
|
+
var AlertDialog = forwardRef12(
|
|
3743
4340
|
({
|
|
3744
|
-
|
|
3745
|
-
|
|
3746
|
-
|
|
3747
|
-
|
|
3748
|
-
|
|
3749
|
-
|
|
3750
|
-
|
|
4341
|
+
trigger,
|
|
4342
|
+
description,
|
|
4343
|
+
cancelButtonLabel = "Cancelar",
|
|
4344
|
+
submitButtonLabel = "Deletar",
|
|
4345
|
+
title,
|
|
4346
|
+
isOpen: controlledIsOpen,
|
|
4347
|
+
onOpen,
|
|
4348
|
+
onClose,
|
|
4349
|
+
closeOnBackdropClick = true,
|
|
4350
|
+
closeOnEscape = true,
|
|
4351
|
+
className = "",
|
|
4352
|
+
onSubmit,
|
|
4353
|
+
submitValue,
|
|
4354
|
+
onCancel,
|
|
4355
|
+
cancelValue,
|
|
4356
|
+
size = "medium",
|
|
3751
4357
|
...props
|
|
3752
4358
|
}, ref) => {
|
|
3753
|
-
const
|
|
3754
|
-
const
|
|
3755
|
-
const
|
|
3756
|
-
if (
|
|
3757
|
-
|
|
4359
|
+
const [internalIsOpen, setInternalIsOpen] = useState8(false);
|
|
4360
|
+
const isOpen = controlledIsOpen ?? internalIsOpen;
|
|
4361
|
+
const setIsOpen = (open) => {
|
|
4362
|
+
if (controlledIsOpen === void 0) {
|
|
4363
|
+
setInternalIsOpen(open);
|
|
3758
4364
|
}
|
|
3759
|
-
|
|
4365
|
+
if (open && onOpen) onOpen();
|
|
4366
|
+
if (!open && onClose) onClose();
|
|
3760
4367
|
};
|
|
3761
|
-
|
|
3762
|
-
|
|
3763
|
-
|
|
3764
|
-
|
|
3765
|
-
|
|
3766
|
-
onKeyDown: (e) => {
|
|
3767
|
-
if (["Enter", " "].includes(e.key)) handleClick(e);
|
|
3768
|
-
},
|
|
3769
|
-
tabIndex: disabled ? -1 : 0,
|
|
3770
|
-
onMouseDown: (e) => {
|
|
3771
|
-
e.preventDefault();
|
|
3772
|
-
},
|
|
3773
|
-
...props
|
|
3774
|
-
};
|
|
3775
|
-
const variants = {
|
|
3776
|
-
menu: /* @__PURE__ */ jsx25(
|
|
3777
|
-
"li",
|
|
3778
|
-
{
|
|
3779
|
-
"data-variant": "menu",
|
|
3780
|
-
className: `
|
|
3781
|
-
w-full flex flex-col items-center justify-center gap-0.5 py-1 px-2 rounded-sm font-medium text-xs
|
|
3782
|
-
[&>svg]:size-6 cursor-pointer hover:bg-primary-600 hover:text-text
|
|
3783
|
-
focus:outline-none focus:border-indicator-info focus:border-2
|
|
3784
|
-
${selectedValue === value ? "bg-primary-50 text-primary-950" : "text-text-950"}
|
|
3785
|
-
${className ?? ""}
|
|
3786
|
-
`,
|
|
3787
|
-
...commonProps,
|
|
3788
|
-
children
|
|
4368
|
+
useEffect4(() => {
|
|
4369
|
+
if (!isOpen || !closeOnEscape) return;
|
|
4370
|
+
const handleEscape = (event) => {
|
|
4371
|
+
if (event.key === "Escape") {
|
|
4372
|
+
setIsOpen(false);
|
|
3789
4373
|
}
|
|
3790
|
-
|
|
3791
|
-
|
|
3792
|
-
|
|
4374
|
+
};
|
|
4375
|
+
document.addEventListener("keydown", handleEscape);
|
|
4376
|
+
return () => document.removeEventListener("keydown", handleEscape);
|
|
4377
|
+
}, [isOpen, closeOnEscape]);
|
|
4378
|
+
useEffect4(() => {
|
|
4379
|
+
if (isOpen) {
|
|
4380
|
+
document.body.style.overflow = "hidden";
|
|
4381
|
+
} else {
|
|
4382
|
+
document.body.style.overflow = "unset";
|
|
4383
|
+
}
|
|
4384
|
+
return () => {
|
|
4385
|
+
document.body.style.overflow = "unset";
|
|
4386
|
+
};
|
|
4387
|
+
}, [isOpen]);
|
|
4388
|
+
const handleBackdropClick = (event) => {
|
|
4389
|
+
if (event.target === event.currentTarget && closeOnBackdropClick) {
|
|
4390
|
+
setIsOpen(false);
|
|
4391
|
+
}
|
|
4392
|
+
};
|
|
4393
|
+
const handleBackdropKeyDown = (event) => {
|
|
4394
|
+
if (event.key === "Escape" && closeOnEscape) {
|
|
4395
|
+
setIsOpen(false);
|
|
4396
|
+
}
|
|
4397
|
+
};
|
|
4398
|
+
const handleTriggerClick = () => {
|
|
4399
|
+
setIsOpen(true);
|
|
4400
|
+
};
|
|
4401
|
+
const handleSubmit = () => {
|
|
4402
|
+
setIsOpen(false);
|
|
4403
|
+
onSubmit?.(submitValue);
|
|
4404
|
+
};
|
|
4405
|
+
const handleCancel = () => {
|
|
4406
|
+
setIsOpen(false);
|
|
4407
|
+
onCancel?.(cancelValue);
|
|
4408
|
+
};
|
|
4409
|
+
const sizeClasses = SIZE_CLASSES11[size];
|
|
4410
|
+
return /* @__PURE__ */ jsxs21(Fragment5, { children: [
|
|
4411
|
+
/* @__PURE__ */ jsx26(
|
|
4412
|
+
"button",
|
|
3793
4413
|
{
|
|
3794
|
-
|
|
3795
|
-
|
|
3796
|
-
|
|
3797
|
-
|
|
3798
|
-
|
|
3799
|
-
`,
|
|
3800
|
-
...commonProps,
|
|
3801
|
-
children: [
|
|
3802
|
-
/* @__PURE__ */ jsx25(
|
|
3803
|
-
"span",
|
|
3804
|
-
{
|
|
3805
|
-
className: `flex flex-row items-center gap-2 px-4 text-text-950 text-xs font-bold ${className ?? ""}`,
|
|
3806
|
-
children
|
|
3807
|
-
}
|
|
3808
|
-
),
|
|
3809
|
-
selectedValue === value && /* @__PURE__ */ jsx25("div", { className: "h-1 w-full bg-primary-950 rounded-lg" })
|
|
3810
|
-
]
|
|
4414
|
+
onClick: handleTriggerClick,
|
|
4415
|
+
"aria-label": "Open dialog",
|
|
4416
|
+
type: "button",
|
|
4417
|
+
className: "border-none bg-transparent p-0 cursor-pointer",
|
|
4418
|
+
children: trigger
|
|
3811
4419
|
}
|
|
3812
4420
|
),
|
|
3813
|
-
|
|
3814
|
-
"
|
|
4421
|
+
isOpen && /* @__PURE__ */ jsx26(
|
|
4422
|
+
"div",
|
|
3815
4423
|
{
|
|
3816
|
-
"
|
|
3817
|
-
|
|
3818
|
-
|
|
3819
|
-
|
|
3820
|
-
|
|
3821
|
-
|
|
3822
|
-
|
|
3823
|
-
|
|
3824
|
-
|
|
3825
|
-
|
|
3826
|
-
|
|
3827
|
-
|
|
3828
|
-
|
|
3829
|
-
|
|
3830
|
-
|
|
3831
|
-
|
|
3832
|
-
|
|
3833
|
-
|
|
3834
|
-
|
|
3835
|
-
|
|
3836
|
-
|
|
3837
|
-
|
|
3838
|
-
|
|
3839
|
-
|
|
3840
|
-
|
|
3841
|
-
|
|
3842
|
-
|
|
3843
|
-
|
|
4424
|
+
className: "fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm",
|
|
4425
|
+
onClick: handleBackdropClick,
|
|
4426
|
+
onKeyDown: handleBackdropKeyDown,
|
|
4427
|
+
"data-testid": "alert-dialog-overlay",
|
|
4428
|
+
children: /* @__PURE__ */ jsxs21(
|
|
4429
|
+
"div",
|
|
4430
|
+
{
|
|
4431
|
+
ref,
|
|
4432
|
+
className: `bg-background border border-border-100 rounded-lg shadow-lg p-6 m-3 ${sizeClasses} ${className}`,
|
|
4433
|
+
...props,
|
|
4434
|
+
children: [
|
|
4435
|
+
/* @__PURE__ */ jsx26(
|
|
4436
|
+
"h2",
|
|
4437
|
+
{
|
|
4438
|
+
id: "alert-dialog-title",
|
|
4439
|
+
className: "pb-3 text-xl font-semibold",
|
|
4440
|
+
children: title
|
|
4441
|
+
}
|
|
4442
|
+
),
|
|
4443
|
+
/* @__PURE__ */ jsx26(
|
|
4444
|
+
"p",
|
|
4445
|
+
{
|
|
4446
|
+
id: "alert-dialog-description",
|
|
4447
|
+
className: "text-text-700 text-sm",
|
|
4448
|
+
children: description
|
|
4449
|
+
}
|
|
4450
|
+
),
|
|
4451
|
+
/* @__PURE__ */ jsxs21("div", { className: "flex flex-row items-center justify-end pt-4 gap-3", children: [
|
|
4452
|
+
/* @__PURE__ */ jsx26(Button_default, { variant: "outline", size: "small", onClick: handleCancel, children: cancelButtonLabel }),
|
|
4453
|
+
/* @__PURE__ */ jsx26(
|
|
4454
|
+
Button_default,
|
|
4455
|
+
{
|
|
4456
|
+
variant: "solid",
|
|
4457
|
+
size: "small",
|
|
4458
|
+
action: "negative",
|
|
4459
|
+
onClick: handleSubmit,
|
|
4460
|
+
children: submitButtonLabel
|
|
4461
|
+
}
|
|
4462
|
+
)
|
|
4463
|
+
] })
|
|
4464
|
+
]
|
|
4465
|
+
}
|
|
4466
|
+
)
|
|
3844
4467
|
}
|
|
3845
4468
|
)
|
|
4469
|
+
] });
|
|
4470
|
+
}
|
|
4471
|
+
);
|
|
4472
|
+
AlertDialog.displayName = "AlertDialog";
|
|
4473
|
+
|
|
4474
|
+
// src/components/DropdownMenu/DropdownMenu.tsx
|
|
4475
|
+
import { SignOut, User } from "phosphor-react";
|
|
4476
|
+
import {
|
|
4477
|
+
forwardRef as forwardRef13,
|
|
4478
|
+
useEffect as useEffect5,
|
|
4479
|
+
useRef as useRef4,
|
|
4480
|
+
isValidElement as isValidElement2,
|
|
4481
|
+
Children as Children2,
|
|
4482
|
+
cloneElement as cloneElement2,
|
|
4483
|
+
useState as useState9
|
|
4484
|
+
} from "react";
|
|
4485
|
+
import { create as create3, useStore as useStore2 } from "zustand";
|
|
4486
|
+
import { jsx as jsx27, jsxs as jsxs22 } from "react/jsx-runtime";
|
|
4487
|
+
function createDropdownStore() {
|
|
4488
|
+
return create3((set) => ({
|
|
4489
|
+
open: false,
|
|
4490
|
+
setOpen: (open) => set({ open })
|
|
4491
|
+
}));
|
|
4492
|
+
}
|
|
4493
|
+
var useDropdownStore = (externalStore) => {
|
|
4494
|
+
if (!externalStore) {
|
|
4495
|
+
throw new Error(
|
|
4496
|
+
"Component must be used within a DropdownMenu (store is missing)"
|
|
4497
|
+
);
|
|
4498
|
+
}
|
|
4499
|
+
return externalStore;
|
|
4500
|
+
};
|
|
4501
|
+
var injectStore2 = (children, store) => {
|
|
4502
|
+
return Children2.map(children, (child) => {
|
|
4503
|
+
if (isValidElement2(child)) {
|
|
4504
|
+
const typedChild = child;
|
|
4505
|
+
const newProps = {
|
|
4506
|
+
store
|
|
4507
|
+
};
|
|
4508
|
+
if (typedChild.props.children) {
|
|
4509
|
+
newProps.children = injectStore2(typedChild.props.children, store);
|
|
4510
|
+
}
|
|
4511
|
+
return cloneElement2(typedChild, newProps);
|
|
4512
|
+
}
|
|
4513
|
+
return child;
|
|
4514
|
+
});
|
|
4515
|
+
};
|
|
4516
|
+
var DropdownMenu = ({
|
|
4517
|
+
children,
|
|
4518
|
+
open: propOpen,
|
|
4519
|
+
onOpenChange
|
|
4520
|
+
}) => {
|
|
4521
|
+
const storeRef = useRef4(null);
|
|
4522
|
+
storeRef.current ??= createDropdownStore();
|
|
4523
|
+
const store = storeRef.current;
|
|
4524
|
+
const { open, setOpen: storeSetOpen } = useStore2(store, (s) => s);
|
|
4525
|
+
const setOpen = (newOpen) => {
|
|
4526
|
+
storeSetOpen(newOpen);
|
|
4527
|
+
};
|
|
4528
|
+
const menuRef = useRef4(null);
|
|
4529
|
+
const handleArrowDownOrArrowUp = (event) => {
|
|
4530
|
+
const menuContent = menuRef.current?.querySelector('[role="menu"]');
|
|
4531
|
+
if (menuContent) {
|
|
4532
|
+
event.preventDefault();
|
|
4533
|
+
const items = Array.from(
|
|
4534
|
+
menuContent.querySelectorAll(
|
|
4535
|
+
'[role="menuitem"]:not([aria-disabled="true"])'
|
|
4536
|
+
)
|
|
4537
|
+
).filter((el) => el instanceof HTMLElement);
|
|
4538
|
+
if (items.length === 0) return;
|
|
4539
|
+
const focusedItem = document.activeElement;
|
|
4540
|
+
const currentIndex = items.findIndex((item) => item === focusedItem);
|
|
4541
|
+
let nextIndex;
|
|
4542
|
+
if (event.key === "ArrowDown") {
|
|
4543
|
+
nextIndex = currentIndex === -1 ? 0 : (currentIndex + 1) % items.length;
|
|
4544
|
+
} else {
|
|
4545
|
+
nextIndex = currentIndex === -1 ? items.length - 1 : (currentIndex - 1 + items.length) % items.length;
|
|
4546
|
+
}
|
|
4547
|
+
items[nextIndex]?.focus();
|
|
4548
|
+
}
|
|
4549
|
+
};
|
|
4550
|
+
const handleDownkey = (event) => {
|
|
4551
|
+
if (event.key === "Escape") {
|
|
4552
|
+
setOpen(false);
|
|
4553
|
+
} else if (event.key === "ArrowDown" || event.key === "ArrowUp") {
|
|
4554
|
+
handleArrowDownOrArrowUp(event);
|
|
4555
|
+
}
|
|
4556
|
+
};
|
|
4557
|
+
const handleClickOutside = (event) => {
|
|
4558
|
+
if (menuRef.current && !menuRef.current.contains(event.target)) {
|
|
4559
|
+
setOpen(false);
|
|
4560
|
+
}
|
|
4561
|
+
};
|
|
4562
|
+
useEffect5(() => {
|
|
4563
|
+
if (open) {
|
|
4564
|
+
document.addEventListener("mousedown", handleClickOutside);
|
|
4565
|
+
document.addEventListener("keydown", handleDownkey);
|
|
4566
|
+
}
|
|
4567
|
+
return () => {
|
|
4568
|
+
document.removeEventListener("mousedown", handleClickOutside);
|
|
4569
|
+
document.removeEventListener("keydown", handleDownkey);
|
|
3846
4570
|
};
|
|
3847
|
-
|
|
3848
|
-
|
|
3849
|
-
);
|
|
3850
|
-
|
|
3851
|
-
|
|
3852
|
-
|
|
3853
|
-
|
|
3854
|
-
|
|
3855
|
-
|
|
3856
|
-
});
|
|
3857
|
-
};
|
|
3858
|
-
var internalCheckScroll = (container, setShowLeftArrow, setShowRightArrow) => {
|
|
3859
|
-
if (!container) return;
|
|
3860
|
-
const { scrollLeft, scrollWidth, clientWidth } = container;
|
|
3861
|
-
setShowLeftArrow(scrollLeft > 0);
|
|
3862
|
-
setShowRightArrow(scrollLeft + clientWidth < scrollWidth);
|
|
4571
|
+
}, [open]);
|
|
4572
|
+
useEffect5(() => {
|
|
4573
|
+
setOpen(open);
|
|
4574
|
+
onOpenChange?.(open);
|
|
4575
|
+
}, [open, onOpenChange]);
|
|
4576
|
+
useEffect5(() => {
|
|
4577
|
+
if (propOpen) {
|
|
4578
|
+
setOpen(propOpen);
|
|
4579
|
+
}
|
|
4580
|
+
}, [propOpen]);
|
|
4581
|
+
return /* @__PURE__ */ jsx27("div", { className: "relative", ref: menuRef, children: injectStore2(children, store) });
|
|
3863
4582
|
};
|
|
3864
|
-
var
|
|
3865
|
-
children,
|
|
4583
|
+
var DropdownMenuTrigger = ({
|
|
3866
4584
|
className,
|
|
3867
|
-
|
|
3868
|
-
|
|
3869
|
-
|
|
4585
|
+
children,
|
|
4586
|
+
onClick,
|
|
4587
|
+
store: externalStore,
|
|
3870
4588
|
...props
|
|
3871
4589
|
}) => {
|
|
3872
|
-
const
|
|
3873
|
-
const
|
|
3874
|
-
const
|
|
3875
|
-
|
|
3876
|
-
|
|
3877
|
-
containerRef.current,
|
|
3878
|
-
setShowLeftArrow,
|
|
3879
|
-
setShowRightArrow
|
|
3880
|
-
);
|
|
3881
|
-
checkScroll();
|
|
3882
|
-
const container = containerRef.current;
|
|
3883
|
-
container?.addEventListener("scroll", checkScroll);
|
|
3884
|
-
window.addEventListener("resize", checkScroll);
|
|
3885
|
-
return () => {
|
|
3886
|
-
container?.removeEventListener("scroll", checkScroll);
|
|
3887
|
-
window.removeEventListener("resize", checkScroll);
|
|
3888
|
-
};
|
|
3889
|
-
}, []);
|
|
3890
|
-
return /* @__PURE__ */ jsxs20(
|
|
3891
|
-
"div",
|
|
4590
|
+
const store = useDropdownStore(externalStore);
|
|
4591
|
+
const open = useStore2(store, (s) => s.open);
|
|
4592
|
+
const toggleOpen = () => store.setState({ open: !open });
|
|
4593
|
+
return /* @__PURE__ */ jsx27(
|
|
4594
|
+
"button",
|
|
3892
4595
|
{
|
|
3893
|
-
|
|
3894
|
-
|
|
3895
|
-
|
|
3896
|
-
|
|
3897
|
-
|
|
3898
|
-
|
|
3899
|
-
|
|
3900
|
-
|
|
3901
|
-
|
|
3902
|
-
children: [
|
|
3903
|
-
/* @__PURE__ */ jsx25(CaretLeft, { size: 16 }),
|
|
3904
|
-
/* @__PURE__ */ jsx25("span", { className: "sr-only", children: "Scroll left" })
|
|
3905
|
-
]
|
|
3906
|
-
}
|
|
3907
|
-
),
|
|
3908
|
-
/* @__PURE__ */ jsx25(
|
|
3909
|
-
Menu,
|
|
3910
|
-
{
|
|
3911
|
-
defaultValue,
|
|
3912
|
-
onValueChange,
|
|
3913
|
-
value,
|
|
3914
|
-
variant: "menu2",
|
|
3915
|
-
...props,
|
|
3916
|
-
children: /* @__PURE__ */ jsx25(MenuContent, { ref: containerRef, variant: "menu2", children })
|
|
3917
|
-
}
|
|
3918
|
-
),
|
|
3919
|
-
showRightArrow && /* @__PURE__ */ jsxs20(
|
|
3920
|
-
"button",
|
|
3921
|
-
{
|
|
3922
|
-
onClick: () => internalScroll(containerRef.current, "right"),
|
|
3923
|
-
className: "absolute right-0 top-1/2 -translate-y-1/2 z-10 flex h-8 w-8 items-center justify-center rounded-full bg-white shadow-md cursor-pointer",
|
|
3924
|
-
"data-testid": "scroll-right-button",
|
|
3925
|
-
children: [
|
|
3926
|
-
/* @__PURE__ */ jsx25(CaretRight, { size: 16 }),
|
|
3927
|
-
/* @__PURE__ */ jsx25("span", { className: "sr-only", children: "Scroll right" })
|
|
3928
|
-
]
|
|
3929
|
-
}
|
|
3930
|
-
)
|
|
3931
|
-
]
|
|
4596
|
+
onClick: (e) => {
|
|
4597
|
+
e.stopPropagation();
|
|
4598
|
+
toggleOpen();
|
|
4599
|
+
if (onClick) onClick(e);
|
|
4600
|
+
},
|
|
4601
|
+
"aria-expanded": open,
|
|
4602
|
+
className: `${className}`,
|
|
4603
|
+
...props,
|
|
4604
|
+
children
|
|
3932
4605
|
}
|
|
3933
4606
|
);
|
|
3934
4607
|
};
|
|
3935
|
-
|
|
3936
|
-
|
|
3937
|
-
|
|
3938
|
-
|
|
3939
|
-
return cloneElement3(typedChild, {
|
|
3940
|
-
...shouldInject ? { store } : {},
|
|
3941
|
-
...typedChild.props.children ? { children: injectStore3(typedChild.props.children, store) } : {}
|
|
3942
|
-
});
|
|
3943
|
-
});
|
|
3944
|
-
var Menu_default = Menu;
|
|
3945
|
-
|
|
3946
|
-
// src/components/Card/Card.tsx
|
|
3947
|
-
import {
|
|
3948
|
-
forwardRef as forwardRef12,
|
|
3949
|
-
Fragment as Fragment4,
|
|
3950
|
-
useState as useState8,
|
|
3951
|
-
useRef as useRef5
|
|
3952
|
-
} from "react";
|
|
3953
|
-
import {
|
|
3954
|
-
CaretRight as CaretRight2,
|
|
3955
|
-
ChatCircleText,
|
|
3956
|
-
CheckCircle as CheckCircle3,
|
|
3957
|
-
Clock,
|
|
3958
|
-
DotsThreeVertical,
|
|
3959
|
-
Play,
|
|
3960
|
-
SpeakerHigh,
|
|
3961
|
-
SpeakerLow,
|
|
3962
|
-
SpeakerSimpleX,
|
|
3963
|
-
XCircle as XCircle2
|
|
3964
|
-
} from "phosphor-react";
|
|
3965
|
-
import { Fragment as Fragment5, jsx as jsx26, jsxs as jsxs21 } from "react/jsx-runtime";
|
|
3966
|
-
var CARD_BASE_CLASSES = {
|
|
3967
|
-
default: "w-full bg-background border border-border-50 rounded-xl",
|
|
3968
|
-
compact: "w-full bg-background border border-border-50 rounded-lg",
|
|
3969
|
-
minimal: "w-full bg-background border border-border-100 rounded-md"
|
|
3970
|
-
};
|
|
3971
|
-
var CARD_PADDING_CLASSES = {
|
|
3972
|
-
none: "",
|
|
3973
|
-
small: "p-2",
|
|
3974
|
-
medium: "p-4",
|
|
3975
|
-
large: "p-6"
|
|
3976
|
-
};
|
|
3977
|
-
var CARD_MIN_HEIGHT_CLASSES = {
|
|
3978
|
-
none: "",
|
|
3979
|
-
small: "min-h-16",
|
|
3980
|
-
medium: "min-h-20",
|
|
3981
|
-
large: "min-h-24"
|
|
3982
|
-
};
|
|
3983
|
-
var CARD_LAYOUT_CLASSES = {
|
|
3984
|
-
horizontal: "flex flex-row",
|
|
3985
|
-
vertical: "flex flex-col"
|
|
3986
|
-
};
|
|
3987
|
-
var CARD_CURSOR_CLASSES = {
|
|
3988
|
-
default: "",
|
|
3989
|
-
pointer: "cursor-pointer"
|
|
3990
|
-
};
|
|
3991
|
-
var CardBase = forwardRef12(
|
|
3992
|
-
({
|
|
3993
|
-
children,
|
|
3994
|
-
variant = "default",
|
|
3995
|
-
layout = "horizontal",
|
|
3996
|
-
padding = "medium",
|
|
3997
|
-
minHeight = "medium",
|
|
3998
|
-
cursor = "default",
|
|
3999
|
-
className = "",
|
|
4000
|
-
...props
|
|
4001
|
-
}, ref) => {
|
|
4002
|
-
const baseClasses = CARD_BASE_CLASSES[variant];
|
|
4003
|
-
const paddingClasses = CARD_PADDING_CLASSES[padding];
|
|
4004
|
-
const minHeightClasses = CARD_MIN_HEIGHT_CLASSES[minHeight];
|
|
4005
|
-
const layoutClasses = CARD_LAYOUT_CLASSES[layout];
|
|
4006
|
-
const cursorClasses = CARD_CURSOR_CLASSES[cursor];
|
|
4007
|
-
const combinedClasses = [
|
|
4008
|
-
baseClasses,
|
|
4009
|
-
paddingClasses,
|
|
4010
|
-
minHeightClasses,
|
|
4011
|
-
layoutClasses,
|
|
4012
|
-
cursorClasses,
|
|
4013
|
-
className
|
|
4014
|
-
].filter(Boolean).join(" ");
|
|
4015
|
-
return /* @__PURE__ */ jsx26("div", { ref, className: combinedClasses, ...props, children });
|
|
4016
|
-
}
|
|
4017
|
-
);
|
|
4018
|
-
var ACTION_CARD_CLASSES = {
|
|
4019
|
-
warning: "bg-warning-background",
|
|
4020
|
-
success: "bg-success-300",
|
|
4021
|
-
error: "bg-error-100",
|
|
4022
|
-
info: "bg-info-background"
|
|
4608
|
+
DropdownMenuTrigger.displayName = "DropdownMenuTrigger";
|
|
4609
|
+
var ITEM_SIZE_CLASSES = {
|
|
4610
|
+
small: "text-sm",
|
|
4611
|
+
medium: "text-md"
|
|
4023
4612
|
};
|
|
4024
|
-
var
|
|
4025
|
-
|
|
4026
|
-
|
|
4027
|
-
|
|
4028
|
-
|
|
4613
|
+
var SIDE_CLASSES = {
|
|
4614
|
+
top: "bottom-full",
|
|
4615
|
+
right: "top-full",
|
|
4616
|
+
bottom: "top-full",
|
|
4617
|
+
left: "top-full"
|
|
4029
4618
|
};
|
|
4030
|
-
var
|
|
4031
|
-
|
|
4032
|
-
|
|
4033
|
-
|
|
4034
|
-
info: "text-info-700"
|
|
4619
|
+
var ALIGN_CLASSES = {
|
|
4620
|
+
start: "left-0",
|
|
4621
|
+
center: "left-1/2 -translate-x-1/2",
|
|
4622
|
+
end: "right-0"
|
|
4035
4623
|
};
|
|
4036
|
-
var
|
|
4037
|
-
|
|
4038
|
-
|
|
4039
|
-
error: "text-error-300",
|
|
4040
|
-
info: "text-info-300"
|
|
4624
|
+
var MENUCONTENT_VARIANT_CLASSES = {
|
|
4625
|
+
menu: "p-1",
|
|
4626
|
+
profile: "p-6"
|
|
4041
4627
|
};
|
|
4042
|
-
var
|
|
4628
|
+
var MenuLabel = forwardRef13(({ className, inset, store: _store, ...props }, ref) => {
|
|
4629
|
+
return /* @__PURE__ */ jsx27(
|
|
4630
|
+
"div",
|
|
4631
|
+
{
|
|
4632
|
+
ref,
|
|
4633
|
+
className: `text-sm w-full ${inset ? "pl-8" : ""} ${className ?? ""}`,
|
|
4634
|
+
...props
|
|
4635
|
+
}
|
|
4636
|
+
);
|
|
4637
|
+
});
|
|
4638
|
+
MenuLabel.displayName = "MenuLabel";
|
|
4639
|
+
var DropdownMenuContent = forwardRef13(
|
|
4043
4640
|
({
|
|
4044
|
-
icon,
|
|
4045
|
-
title,
|
|
4046
|
-
subTitle,
|
|
4047
|
-
header,
|
|
4048
|
-
extended = false,
|
|
4049
|
-
action = "success",
|
|
4050
|
-
description,
|
|
4051
4641
|
className,
|
|
4642
|
+
align = "start",
|
|
4643
|
+
side = "bottom",
|
|
4644
|
+
variant = "menu",
|
|
4645
|
+
sideOffset = 4,
|
|
4646
|
+
children,
|
|
4647
|
+
store: externalStore,
|
|
4052
4648
|
...props
|
|
4053
4649
|
}, ref) => {
|
|
4054
|
-
const
|
|
4055
|
-
const
|
|
4056
|
-
const
|
|
4057
|
-
|
|
4058
|
-
|
|
4650
|
+
const store = useDropdownStore(externalStore);
|
|
4651
|
+
const open = useStore2(store, (s) => s.open);
|
|
4652
|
+
const [isVisible, setIsVisible] = useState9(open);
|
|
4653
|
+
useEffect5(() => {
|
|
4654
|
+
if (open) {
|
|
4655
|
+
setIsVisible(true);
|
|
4656
|
+
} else {
|
|
4657
|
+
const timer = setTimeout(() => setIsVisible(false), 200);
|
|
4658
|
+
return () => clearTimeout(timer);
|
|
4659
|
+
}
|
|
4660
|
+
}, [open]);
|
|
4661
|
+
if (!isVisible) return null;
|
|
4662
|
+
const getPositionClasses = () => {
|
|
4663
|
+
const vertical = SIDE_CLASSES[side];
|
|
4664
|
+
const horizontal = ALIGN_CLASSES[align];
|
|
4665
|
+
return `absolute ${vertical} ${horizontal}`;
|
|
4666
|
+
};
|
|
4667
|
+
const variantClasses = MENUCONTENT_VARIANT_CLASSES[variant];
|
|
4668
|
+
return /* @__PURE__ */ jsx27(
|
|
4059
4669
|
"div",
|
|
4060
4670
|
{
|
|
4061
4671
|
ref,
|
|
4062
|
-
|
|
4672
|
+
role: "menu",
|
|
4673
|
+
className: `
|
|
4674
|
+
bg-background z-50 min-w-[210px] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md border-border-100
|
|
4675
|
+
${open ? "animate-in fade-in-0 zoom-in-95" : "animate-out fade-out-0 zoom-out-95"}
|
|
4676
|
+
${getPositionClasses()}
|
|
4677
|
+
${variantClasses}
|
|
4678
|
+
${className}
|
|
4679
|
+
`,
|
|
4680
|
+
style: {
|
|
4681
|
+
marginTop: side === "bottom" ? sideOffset : void 0,
|
|
4682
|
+
marginBottom: side === "top" ? sideOffset : void 0,
|
|
4683
|
+
marginLeft: side === "right" ? sideOffset : void 0,
|
|
4684
|
+
marginRight: side === "left" ? sideOffset : void 0
|
|
4685
|
+
},
|
|
4063
4686
|
...props,
|
|
4064
|
-
children
|
|
4065
|
-
/* @__PURE__ */ jsxs21(
|
|
4066
|
-
"div",
|
|
4067
|
-
{
|
|
4068
|
-
className: `
|
|
4069
|
-
flex flex-col gap-1 items-center justify-center p-4
|
|
4070
|
-
${actionCardClasses}
|
|
4071
|
-
${extended ? "rounded-t-xl" : "rounded-xl"}`,
|
|
4072
|
-
children: [
|
|
4073
|
-
/* @__PURE__ */ jsx26(
|
|
4074
|
-
"span",
|
|
4075
|
-
{
|
|
4076
|
-
className: `size-7.5 rounded-full flex items-center justify-center ${actionIconClasses}`,
|
|
4077
|
-
children: icon
|
|
4078
|
-
}
|
|
4079
|
-
),
|
|
4080
|
-
/* @__PURE__ */ jsx26(
|
|
4081
|
-
Text_default,
|
|
4082
|
-
{
|
|
4083
|
-
size: "2xs",
|
|
4084
|
-
weight: "medium",
|
|
4085
|
-
className: "text-text-800 uppercase truncate",
|
|
4086
|
-
children: title
|
|
4087
|
-
}
|
|
4088
|
-
),
|
|
4089
|
-
/* @__PURE__ */ jsx26("p", { className: `text-lg font-bold truncate ${actionSubTitleClasses}`, children: subTitle })
|
|
4090
|
-
]
|
|
4091
|
-
}
|
|
4092
|
-
),
|
|
4093
|
-
extended && /* @__PURE__ */ jsxs21("div", { className: "flex flex-col items-center gap-2.5 pb-9.5 pt-2.5", children: [
|
|
4094
|
-
/* @__PURE__ */ jsx26(
|
|
4095
|
-
"p",
|
|
4096
|
-
{
|
|
4097
|
-
className: `text-2xs font-medium uppercase truncate ${actionHeaderClasses}`,
|
|
4098
|
-
children: header
|
|
4099
|
-
}
|
|
4100
|
-
),
|
|
4101
|
-
/* @__PURE__ */ jsx26(Badge_default, { size: "large", action: "info", children: description })
|
|
4102
|
-
] })
|
|
4103
|
-
]
|
|
4687
|
+
children
|
|
4104
4688
|
}
|
|
4105
4689
|
);
|
|
4106
4690
|
}
|
|
4107
4691
|
);
|
|
4108
|
-
|
|
4692
|
+
DropdownMenuContent.displayName = "DropdownMenuContent";
|
|
4693
|
+
var DropdownMenuItem = forwardRef13(
|
|
4109
4694
|
({
|
|
4110
|
-
header,
|
|
4111
|
-
state = "undone",
|
|
4112
4695
|
className,
|
|
4113
|
-
|
|
4114
|
-
|
|
4696
|
+
size = "small",
|
|
4697
|
+
children,
|
|
4698
|
+
iconRight,
|
|
4699
|
+
iconLeft,
|
|
4700
|
+
disabled = false,
|
|
4701
|
+
onClick,
|
|
4702
|
+
variant = "menu",
|
|
4703
|
+
store: externalStore,
|
|
4115
4704
|
...props
|
|
4116
4705
|
}, ref) => {
|
|
4117
|
-
const
|
|
4118
|
-
const
|
|
4119
|
-
const
|
|
4120
|
-
|
|
4121
|
-
|
|
4706
|
+
const store = useDropdownStore(externalStore);
|
|
4707
|
+
const setOpen = useStore2(store, (s) => s.setOpen);
|
|
4708
|
+
const sizeClasses = ITEM_SIZE_CLASSES[size];
|
|
4709
|
+
const handleClick = (e) => {
|
|
4710
|
+
if (disabled) {
|
|
4711
|
+
e.preventDefault();
|
|
4712
|
+
e.stopPropagation();
|
|
4713
|
+
return;
|
|
4714
|
+
}
|
|
4715
|
+
onClick?.(e);
|
|
4716
|
+
setOpen(false);
|
|
4717
|
+
};
|
|
4718
|
+
const getVariantClasses = () => {
|
|
4719
|
+
if (variant === "profile") {
|
|
4720
|
+
return "relative flex flex-row justify-between select-none items-center gap-2 rounded-sm p-4 text-sm outline-none transition-colors [&>svg]:size-6 [&>svg]:shrink-0";
|
|
4721
|
+
}
|
|
4722
|
+
return "relative flex select-none items-center gap-2 rounded-sm p-3 text-sm outline-none transition-colors [&>svg]:size-4 [&>svg]:shrink-0";
|
|
4723
|
+
};
|
|
4724
|
+
const getVariantProps = () => {
|
|
4725
|
+
return variant === "profile" ? { "data-variant": "profile" } : {};
|
|
4726
|
+
};
|
|
4727
|
+
return /* @__PURE__ */ jsxs22(
|
|
4728
|
+
"div",
|
|
4122
4729
|
{
|
|
4123
4730
|
ref,
|
|
4124
|
-
|
|
4125
|
-
|
|
4126
|
-
|
|
4127
|
-
className: `
|
|
4731
|
+
role: "menuitem",
|
|
4732
|
+
...getVariantProps(),
|
|
4733
|
+
"aria-disabled": disabled,
|
|
4734
|
+
className: `
|
|
4735
|
+
focus-visible:bg-background-50
|
|
4736
|
+
${getVariantClasses()}
|
|
4737
|
+
${sizeClasses}
|
|
4738
|
+
${className}
|
|
4739
|
+
${disabled ? "cursor-not-allowed text-text-400" : "cursor-pointer hover:bg-background-50 text-text-700 focus:bg-accent focus:text-accent-foreground hover:bg-accent hover:text-accent-foreground"}
|
|
4740
|
+
`,
|
|
4741
|
+
onClick: handleClick,
|
|
4742
|
+
onKeyDown: (e) => {
|
|
4743
|
+
if (e.key === "Enter" || e.key === " ") handleClick(e);
|
|
4744
|
+
},
|
|
4745
|
+
tabIndex: disabled ? -1 : 0,
|
|
4128
4746
|
...props,
|
|
4129
4747
|
children: [
|
|
4130
|
-
|
|
4131
|
-
|
|
4132
|
-
|
|
4133
|
-
/* @__PURE__ */ jsx26(
|
|
4134
|
-
Badge_default,
|
|
4135
|
-
{
|
|
4136
|
-
size: "medium",
|
|
4137
|
-
variant: "solid",
|
|
4138
|
-
action: isDone ? "success" : "error",
|
|
4139
|
-
children: stateLabel
|
|
4140
|
-
}
|
|
4141
|
-
),
|
|
4142
|
-
/* @__PURE__ */ jsxs21("span", { className: "flex flex-row items-center gap-1 text-text-700 text-xs", children: [
|
|
4143
|
-
isDone ? "Nota" : "Sem nota",
|
|
4144
|
-
isDone && /* @__PURE__ */ jsx26(Badge_default, { size: "medium", action: "success", children: "00" })
|
|
4145
|
-
] })
|
|
4146
|
-
] })
|
|
4147
|
-
] }),
|
|
4148
|
-
/* @__PURE__ */ jsx26("span", { className: "flex-shrink-0", children: /* @__PURE__ */ jsx26(
|
|
4149
|
-
Button_default,
|
|
4150
|
-
{
|
|
4151
|
-
size: "extra-small",
|
|
4152
|
-
onClick: () => onClickButton?.(valueButton),
|
|
4153
|
-
className: "min-w-fit",
|
|
4154
|
-
children: buttonLabel
|
|
4155
|
-
}
|
|
4156
|
-
) })
|
|
4748
|
+
iconLeft,
|
|
4749
|
+
/* @__PURE__ */ jsx27("span", { className: "w-full text-md", children }),
|
|
4750
|
+
iconRight
|
|
4157
4751
|
]
|
|
4158
4752
|
}
|
|
4159
4753
|
);
|
|
4160
4754
|
}
|
|
4161
|
-
);
|
|
4162
|
-
|
|
4163
|
-
|
|
4164
|
-
|
|
4165
|
-
|
|
4166
|
-
|
|
4167
|
-
|
|
4168
|
-
|
|
4169
|
-
|
|
4170
|
-
|
|
4171
|
-
|
|
4172
|
-
|
|
4173
|
-
|
|
4174
|
-
|
|
4175
|
-
|
|
4176
|
-
|
|
4177
|
-
|
|
4178
|
-
|
|
4179
|
-
|
|
4180
|
-
|
|
4181
|
-
|
|
4182
|
-
|
|
4183
|
-
|
|
4184
|
-
|
|
4185
|
-
|
|
4186
|
-
|
|
4187
|
-
|
|
4188
|
-
|
|
4189
|
-
|
|
4190
|
-
|
|
4191
|
-
|
|
4192
|
-
|
|
4193
|
-
|
|
4194
|
-
|
|
4195
|
-
|
|
4196
|
-
|
|
4197
|
-
|
|
4198
|
-
|
|
4199
|
-
|
|
4200
|
-
|
|
4201
|
-
|
|
4202
|
-
|
|
4203
|
-
|
|
4204
|
-
|
|
4205
|
-
|
|
4206
|
-
|
|
4207
|
-
|
|
4208
|
-
|
|
4209
|
-
|
|
4210
|
-
|
|
4211
|
-
|
|
4212
|
-
|
|
4213
|
-
|
|
4214
|
-
|
|
4755
|
+
);
|
|
4756
|
+
DropdownMenuItem.displayName = "DropdownMenuItem";
|
|
4757
|
+
var DropdownMenuSeparator = forwardRef13(({ className, store: _store, ...props }, ref) => /* @__PURE__ */ jsx27(
|
|
4758
|
+
"div",
|
|
4759
|
+
{
|
|
4760
|
+
ref,
|
|
4761
|
+
className: `my-1 h-px bg-border-200 ${className}`,
|
|
4762
|
+
...props
|
|
4763
|
+
}
|
|
4764
|
+
));
|
|
4765
|
+
DropdownMenuSeparator.displayName = "DropdownMenuSeparator";
|
|
4766
|
+
var ProfileMenuTrigger = forwardRef13(({ className, onClick, store: externalStore, ...props }, ref) => {
|
|
4767
|
+
const store = useDropdownStore(externalStore);
|
|
4768
|
+
const open = useStore2(store, (s) => s.open);
|
|
4769
|
+
const toggleOpen = () => store.setState({ open: !open });
|
|
4770
|
+
return /* @__PURE__ */ jsx27(
|
|
4771
|
+
"button",
|
|
4772
|
+
{
|
|
4773
|
+
ref,
|
|
4774
|
+
className: `rounded-lg size-10 bg-primary-50 flex items-center justify-center cursor-pointer ${className}`,
|
|
4775
|
+
onClick: (e) => {
|
|
4776
|
+
e.stopPropagation();
|
|
4777
|
+
toggleOpen();
|
|
4778
|
+
onClick?.(e);
|
|
4779
|
+
},
|
|
4780
|
+
"aria-expanded": open,
|
|
4781
|
+
...props,
|
|
4782
|
+
children: /* @__PURE__ */ jsx27("span", { className: "size-6 rounded-full bg-primary-100 flex items-center justify-center", children: /* @__PURE__ */ jsx27(User, { className: "text-primary-950", size: 18 }) })
|
|
4783
|
+
}
|
|
4784
|
+
);
|
|
4785
|
+
});
|
|
4786
|
+
ProfileMenuTrigger.displayName = "ProfileMenuTrigger";
|
|
4787
|
+
var ProfileMenuHeader = forwardRef13(({ className, name, email, store: _store, ...props }, ref) => {
|
|
4788
|
+
return /* @__PURE__ */ jsxs22(
|
|
4789
|
+
"div",
|
|
4790
|
+
{
|
|
4791
|
+
ref,
|
|
4792
|
+
"data-component": "ProfileMenuHeader",
|
|
4793
|
+
className: `
|
|
4794
|
+
flex flex-row gap-4 items-center
|
|
4795
|
+
${className}
|
|
4796
|
+
`,
|
|
4797
|
+
...props,
|
|
4798
|
+
children: [
|
|
4799
|
+
/* @__PURE__ */ jsx27("span", { className: "size-16 bg-primary-100 rounded-full flex items-center justify-center", children: /* @__PURE__ */ jsx27(User, { size: 34, className: "text-primary-950" }) }),
|
|
4800
|
+
/* @__PURE__ */ jsxs22("div", { className: "flex flex-col ", children: [
|
|
4801
|
+
/* @__PURE__ */ jsx27("p", { className: "text-xl font-bold text-text-950", children: name }),
|
|
4802
|
+
/* @__PURE__ */ jsx27("p", { className: "text-md text-text-600", children: email })
|
|
4803
|
+
] })
|
|
4804
|
+
]
|
|
4805
|
+
}
|
|
4806
|
+
);
|
|
4807
|
+
});
|
|
4808
|
+
ProfileMenuHeader.displayName = "ProfileMenuHeader";
|
|
4809
|
+
var ProfileMenuSection = forwardRef13(({ className, children, store: _store, ...props }, ref) => {
|
|
4810
|
+
return /* @__PURE__ */ jsx27(
|
|
4811
|
+
"div",
|
|
4812
|
+
{
|
|
4813
|
+
ref,
|
|
4814
|
+
className: `
|
|
4815
|
+
flex flex-col p-2
|
|
4816
|
+
${className}
|
|
4817
|
+
`,
|
|
4818
|
+
...props,
|
|
4819
|
+
children
|
|
4820
|
+
}
|
|
4821
|
+
);
|
|
4822
|
+
});
|
|
4823
|
+
ProfileMenuSection.displayName = "ProfileMenuSection";
|
|
4824
|
+
var ProfileMenuFooter = ({
|
|
4825
|
+
className,
|
|
4826
|
+
disabled = false,
|
|
4827
|
+
onClick,
|
|
4828
|
+
store: externalStore,
|
|
4829
|
+
...props
|
|
4830
|
+
}) => {
|
|
4831
|
+
const store = useDropdownStore(externalStore);
|
|
4832
|
+
const setOpen = useStore2(store, (s) => s.setOpen);
|
|
4833
|
+
return /* @__PURE__ */ jsxs22(
|
|
4834
|
+
Button_default,
|
|
4835
|
+
{
|
|
4836
|
+
variant: "outline",
|
|
4837
|
+
className: `w-full ${className}`,
|
|
4838
|
+
disabled,
|
|
4839
|
+
onClick: (e) => {
|
|
4840
|
+
setOpen(false);
|
|
4841
|
+
onClick?.(e);
|
|
4842
|
+
},
|
|
4843
|
+
...props,
|
|
4844
|
+
children: [
|
|
4845
|
+
/* @__PURE__ */ jsx27("span", { className: "mr-2 flex items-center", children: /* @__PURE__ */ jsx27(SignOut, {}) }),
|
|
4846
|
+
/* @__PURE__ */ jsx27("span", { children: "Sair" })
|
|
4847
|
+
]
|
|
4848
|
+
}
|
|
4849
|
+
);
|
|
4850
|
+
};
|
|
4851
|
+
ProfileMenuFooter.displayName = "ProfileMenuFooter";
|
|
4852
|
+
var DropdownMenu_default = DropdownMenu;
|
|
4853
|
+
|
|
4854
|
+
// src/components/Select/Select.tsx
|
|
4855
|
+
import { create as create4, useStore as useStore3 } from "zustand";
|
|
4856
|
+
import {
|
|
4857
|
+
useEffect as useEffect6,
|
|
4858
|
+
useRef as useRef5,
|
|
4859
|
+
forwardRef as forwardRef14,
|
|
4860
|
+
isValidElement as isValidElement3,
|
|
4861
|
+
Children as Children3,
|
|
4862
|
+
cloneElement as cloneElement3,
|
|
4863
|
+
useId as useId7
|
|
4864
|
+
} from "react";
|
|
4865
|
+
import { CaretDown, Check as Check4, WarningCircle as WarningCircle5 } from "phosphor-react";
|
|
4866
|
+
import { Fragment as Fragment6, jsx as jsx28, jsxs as jsxs23 } from "react/jsx-runtime";
|
|
4867
|
+
var VARIANT_CLASSES4 = {
|
|
4868
|
+
outlined: "border rounded-lg focus:border-primary-950",
|
|
4869
|
+
underlined: "border-b focus:border-primary-950",
|
|
4870
|
+
rounded: "border rounded-full focus:border-primary-950"
|
|
4871
|
+
};
|
|
4872
|
+
var SIZE_CLASSES12 = {
|
|
4873
|
+
small: "text-sm",
|
|
4874
|
+
medium: "text-md",
|
|
4875
|
+
large: "text-lg",
|
|
4876
|
+
"extra-large": "text-lg"
|
|
4877
|
+
};
|
|
4878
|
+
var HEIGHT_CLASSES = {
|
|
4879
|
+
small: "h-8",
|
|
4880
|
+
medium: "h-9",
|
|
4881
|
+
large: "h-10",
|
|
4882
|
+
"extra-large": "h-12"
|
|
4883
|
+
};
|
|
4884
|
+
var PADDING_CLASSES = {
|
|
4885
|
+
small: "px-2 py-1",
|
|
4886
|
+
medium: "px-3 py-2",
|
|
4887
|
+
large: "px-4 py-3",
|
|
4888
|
+
"extra-large": "px-5 py-4"
|
|
4889
|
+
};
|
|
4890
|
+
var SIDE_CLASSES2 = {
|
|
4891
|
+
top: "bottom-full -translate-y-1",
|
|
4892
|
+
right: "top-full translate-y-1",
|
|
4893
|
+
bottom: "top-full translate-y-1",
|
|
4894
|
+
left: "top-full translate-y-1"
|
|
4895
|
+
};
|
|
4896
|
+
var ALIGN_CLASSES2 = {
|
|
4897
|
+
start: "left-0",
|
|
4898
|
+
center: "left-1/2 -translate-x-1/2",
|
|
4899
|
+
end: "right-0"
|
|
4900
|
+
};
|
|
4901
|
+
function createSelectStore(onValueChange) {
|
|
4902
|
+
return create4((set) => ({
|
|
4903
|
+
open: false,
|
|
4904
|
+
setOpen: (open) => set({ open }),
|
|
4905
|
+
value: "",
|
|
4906
|
+
setValue: (value) => set({ value }),
|
|
4907
|
+
selectedLabel: "",
|
|
4908
|
+
setSelectedLabel: (label) => set({ selectedLabel: label }),
|
|
4909
|
+
onValueChange
|
|
4910
|
+
}));
|
|
4911
|
+
}
|
|
4912
|
+
var useSelectStore = (externalStore) => {
|
|
4913
|
+
if (!externalStore) {
|
|
4914
|
+
throw new Error(
|
|
4915
|
+
"Component must be used within a Select (store is missing)"
|
|
4916
|
+
);
|
|
4917
|
+
}
|
|
4918
|
+
return externalStore;
|
|
4919
|
+
};
|
|
4920
|
+
function getLabelAsNode(children) {
|
|
4921
|
+
if (typeof children === "string" || typeof children === "number") {
|
|
4922
|
+
return children;
|
|
4923
|
+
}
|
|
4924
|
+
const flattened = Children3.toArray(children);
|
|
4925
|
+
if (flattened.length === 1) return flattened[0];
|
|
4926
|
+
return /* @__PURE__ */ jsx28(Fragment6, { children: flattened });
|
|
4927
|
+
}
|
|
4928
|
+
var injectStore3 = (children, store, size, selectId) => {
|
|
4929
|
+
return Children3.map(children, (child) => {
|
|
4930
|
+
if (isValidElement3(child)) {
|
|
4931
|
+
const typedChild = child;
|
|
4932
|
+
const newProps = {
|
|
4933
|
+
store
|
|
4934
|
+
};
|
|
4935
|
+
if (typedChild.type === SelectTrigger) {
|
|
4936
|
+
newProps.size = size;
|
|
4937
|
+
newProps.selectId = selectId;
|
|
4938
|
+
}
|
|
4939
|
+
if (typedChild.props.children) {
|
|
4940
|
+
newProps.children = injectStore3(
|
|
4941
|
+
typedChild.props.children,
|
|
4942
|
+
store,
|
|
4943
|
+
size,
|
|
4944
|
+
selectId
|
|
4945
|
+
);
|
|
4946
|
+
}
|
|
4947
|
+
return cloneElement3(typedChild, newProps);
|
|
4948
|
+
}
|
|
4949
|
+
return child;
|
|
4950
|
+
});
|
|
4951
|
+
};
|
|
4952
|
+
var Select = ({
|
|
4953
|
+
children,
|
|
4954
|
+
defaultValue = "",
|
|
4955
|
+
value: propValue,
|
|
4956
|
+
onValueChange,
|
|
4957
|
+
size = "small",
|
|
4958
|
+
label,
|
|
4959
|
+
helperText,
|
|
4960
|
+
errorMessage,
|
|
4961
|
+
id
|
|
4962
|
+
}) => {
|
|
4963
|
+
const storeRef = useRef5(null);
|
|
4964
|
+
storeRef.current ??= createSelectStore(onValueChange);
|
|
4965
|
+
const store = storeRef.current;
|
|
4966
|
+
const selectRef = useRef5(null);
|
|
4967
|
+
const { open, setOpen, setValue, selectedLabel } = useStore3(store, (s) => s);
|
|
4968
|
+
const generatedId = useId7();
|
|
4969
|
+
const selectId = id ?? `select-${generatedId}`;
|
|
4970
|
+
const findLabelForValue = (children2, targetValue) => {
|
|
4971
|
+
let found = null;
|
|
4972
|
+
const search = (nodes) => {
|
|
4973
|
+
Children3.forEach(nodes, (child) => {
|
|
4974
|
+
if (!isValidElement3(child)) return;
|
|
4975
|
+
const typedChild = child;
|
|
4976
|
+
if (typedChild.type === SelectItem && typedChild.props.value === targetValue) {
|
|
4977
|
+
if (typeof typedChild.props.children === "string")
|
|
4978
|
+
found = typedChild.props.children;
|
|
4979
|
+
}
|
|
4980
|
+
if (typedChild.props.children && !found)
|
|
4981
|
+
search(typedChild.props.children);
|
|
4982
|
+
});
|
|
4215
4983
|
};
|
|
4216
|
-
|
|
4217
|
-
|
|
4218
|
-
|
|
4219
|
-
|
|
4220
|
-
|
|
4221
|
-
|
|
4222
|
-
|
|
4223
|
-
|
|
4224
|
-
|
|
4225
|
-
|
|
4226
|
-
|
|
4227
|
-
|
|
4228
|
-
|
|
4229
|
-
|
|
4230
|
-
|
|
4231
|
-
|
|
4232
|
-
|
|
4233
|
-
|
|
4234
|
-
|
|
4235
|
-
|
|
4236
|
-
|
|
4237
|
-
|
|
4238
|
-
}
|
|
4239
|
-
),
|
|
4240
|
-
/* @__PURE__ */ jsxs21(
|
|
4241
|
-
"div",
|
|
4242
|
-
{
|
|
4243
|
-
className: `
|
|
4244
|
-
p-4 flex flex-col justify-between w-full h-full
|
|
4245
|
-
${!isHorizontal && "gap-4"}
|
|
4246
|
-
`,
|
|
4247
|
-
children: [
|
|
4248
|
-
/* @__PURE__ */ jsx26(Text_default, { size: "sm", weight: "bold", className: "text-text-950 truncate", children: header }),
|
|
4249
|
-
contentComponent[direction]
|
|
4250
|
-
]
|
|
4251
|
-
}
|
|
4984
|
+
search(children2);
|
|
4985
|
+
return found;
|
|
4986
|
+
};
|
|
4987
|
+
useEffect6(() => {
|
|
4988
|
+
if (!selectedLabel && defaultValue) {
|
|
4989
|
+
const label2 = findLabelForValue(children, defaultValue);
|
|
4990
|
+
if (label2) store.setState({ selectedLabel: label2 });
|
|
4991
|
+
}
|
|
4992
|
+
}, [children, defaultValue, selectedLabel]);
|
|
4993
|
+
useEffect6(() => {
|
|
4994
|
+
const handleClickOutside = (event) => {
|
|
4995
|
+
if (selectRef.current && !selectRef.current.contains(event.target)) {
|
|
4996
|
+
setOpen(false);
|
|
4997
|
+
}
|
|
4998
|
+
};
|
|
4999
|
+
const handleArrowKeys = (event) => {
|
|
5000
|
+
const selectContent = selectRef.current?.querySelector('[role="menu"]');
|
|
5001
|
+
if (selectContent) {
|
|
5002
|
+
event.preventDefault();
|
|
5003
|
+
const items = Array.from(
|
|
5004
|
+
selectContent.querySelectorAll(
|
|
5005
|
+
'[role="menuitem"]:not([aria-disabled="true"])'
|
|
4252
5006
|
)
|
|
4253
|
-
|
|
5007
|
+
).filter((el) => el instanceof HTMLElement);
|
|
5008
|
+
const focused = document.activeElement;
|
|
5009
|
+
const currentIndex = items.findIndex((item) => item === focused);
|
|
5010
|
+
let nextIndex = 0;
|
|
5011
|
+
if (event.key === "ArrowDown") {
|
|
5012
|
+
nextIndex = currentIndex === -1 ? 0 : (currentIndex + 1) % items.length;
|
|
5013
|
+
} else {
|
|
5014
|
+
nextIndex = currentIndex === -1 ? items.length - 1 : (currentIndex - 1 + items.length) % items.length;
|
|
5015
|
+
}
|
|
5016
|
+
items[nextIndex]?.focus();
|
|
4254
5017
|
}
|
|
4255
|
-
|
|
4256
|
-
|
|
4257
|
-
);
|
|
4258
|
-
|
|
4259
|
-
|
|
4260
|
-
|
|
4261
|
-
|
|
4262
|
-
|
|
4263
|
-
|
|
4264
|
-
|
|
4265
|
-
|
|
4266
|
-
|
|
4267
|
-
|
|
4268
|
-
|
|
4269
|
-
|
|
5018
|
+
};
|
|
5019
|
+
if (open) {
|
|
5020
|
+
document.addEventListener("mousedown", handleClickOutside);
|
|
5021
|
+
document.addEventListener("keydown", handleArrowKeys);
|
|
5022
|
+
}
|
|
5023
|
+
return () => {
|
|
5024
|
+
document.removeEventListener("mousedown", handleClickOutside);
|
|
5025
|
+
document.removeEventListener("keydown", handleArrowKeys);
|
|
5026
|
+
};
|
|
5027
|
+
}, [open]);
|
|
5028
|
+
useEffect6(() => {
|
|
5029
|
+
if (propValue) {
|
|
5030
|
+
setValue(propValue);
|
|
5031
|
+
const label2 = findLabelForValue(children, propValue);
|
|
5032
|
+
if (label2) store.setState({ selectedLabel: label2 });
|
|
5033
|
+
}
|
|
5034
|
+
}, [propValue]);
|
|
5035
|
+
const sizeClasses = SIZE_CLASSES12[size];
|
|
5036
|
+
return /* @__PURE__ */ jsxs23("div", { className: "w-full", children: [
|
|
5037
|
+
label && /* @__PURE__ */ jsx28(
|
|
5038
|
+
"label",
|
|
4270
5039
|
{
|
|
4271
|
-
|
|
4272
|
-
|
|
4273
|
-
|
|
4274
|
-
minHeight: "medium",
|
|
4275
|
-
cursor: "pointer",
|
|
4276
|
-
className: `justify-center gap-2 py-2 px-4 ${className}`,
|
|
4277
|
-
...props,
|
|
4278
|
-
children: [
|
|
4279
|
-
subHead && /* @__PURE__ */ jsx26("span", { className: "text-text-600 text-2xs flex flex-row gap-1", children: subHead.map((text, index) => /* @__PURE__ */ jsxs21(Fragment4, { children: [
|
|
4280
|
-
/* @__PURE__ */ jsx26("p", { children: text }),
|
|
4281
|
-
index < subHead.length - 1 && /* @__PURE__ */ jsx26("p", { children: "\u2022" })
|
|
4282
|
-
] }, `${text} - ${index}`)) }),
|
|
4283
|
-
/* @__PURE__ */ jsx26("p", { className: "text-sm text-text-950 font-bold truncate", children: header }),
|
|
4284
|
-
/* @__PURE__ */ jsxs21("span", { className: "grid grid-cols-[1fr_auto] items-center gap-2", children: [
|
|
4285
|
-
/* @__PURE__ */ jsx26(
|
|
4286
|
-
ProgressBar_default,
|
|
4287
|
-
{
|
|
4288
|
-
size: "small",
|
|
4289
|
-
value: progress,
|
|
4290
|
-
variant: progressVariant,
|
|
4291
|
-
"data-testid": "progress-bar"
|
|
4292
|
-
}
|
|
4293
|
-
),
|
|
4294
|
-
showPercentage && /* @__PURE__ */ jsxs21(
|
|
4295
|
-
Text_default,
|
|
4296
|
-
{
|
|
4297
|
-
size: "xs",
|
|
4298
|
-
weight: "medium",
|
|
4299
|
-
className: `text-text-950 leading-none tracking-normal text-center flex-none`,
|
|
4300
|
-
children: [
|
|
4301
|
-
Math.round(progress),
|
|
4302
|
-
"%"
|
|
4303
|
-
]
|
|
4304
|
-
}
|
|
4305
|
-
)
|
|
4306
|
-
] })
|
|
4307
|
-
]
|
|
5040
|
+
htmlFor: selectId,
|
|
5041
|
+
className: `block font-bold text-text-900 mb-1.5 ${sizeClasses}`,
|
|
5042
|
+
children: label
|
|
4308
5043
|
}
|
|
4309
|
-
)
|
|
4310
|
-
|
|
4311
|
-
|
|
4312
|
-
|
|
4313
|
-
|
|
4314
|
-
|
|
4315
|
-
|
|
4316
|
-
|
|
4317
|
-
|
|
4318
|
-
|
|
4319
|
-
|
|
4320
|
-
|
|
4321
|
-
|
|
4322
|
-
|
|
5044
|
+
),
|
|
5045
|
+
/* @__PURE__ */ jsx28("div", { className: `relative ${sizeClasses}`, ref: selectRef, children: injectStore3(children, store, size, selectId) }),
|
|
5046
|
+
/* @__PURE__ */ jsxs23("div", { className: "mt-1.5 gap-1.5", children: [
|
|
5047
|
+
helperText && /* @__PURE__ */ jsx28("p", { className: "text-sm text-text-500", children: helperText }),
|
|
5048
|
+
errorMessage && /* @__PURE__ */ jsxs23("p", { className: "flex gap-1 items-center text-sm text-indicator-error", children: [
|
|
5049
|
+
/* @__PURE__ */ jsx28(WarningCircle5, { size: 16 }),
|
|
5050
|
+
" ",
|
|
5051
|
+
errorMessage
|
|
5052
|
+
] })
|
|
5053
|
+
] })
|
|
5054
|
+
] });
|
|
5055
|
+
};
|
|
5056
|
+
var SelectValue = ({
|
|
5057
|
+
placeholder,
|
|
5058
|
+
store: externalStore
|
|
5059
|
+
}) => {
|
|
5060
|
+
const store = useSelectStore(externalStore);
|
|
5061
|
+
const selectedLabel = useStore3(store, (s) => s.selectedLabel);
|
|
5062
|
+
const value = useStore3(store, (s) => s.value);
|
|
5063
|
+
return /* @__PURE__ */ jsx28("span", { className: "text-inherit", children: selectedLabel || placeholder || value });
|
|
5064
|
+
};
|
|
5065
|
+
var SelectTrigger = forwardRef14(
|
|
5066
|
+
({
|
|
5067
|
+
className,
|
|
5068
|
+
invalid = false,
|
|
5069
|
+
variant = "outlined",
|
|
5070
|
+
store: externalStore,
|
|
5071
|
+
disabled,
|
|
5072
|
+
size = "medium",
|
|
5073
|
+
selectId,
|
|
4323
5074
|
...props
|
|
4324
5075
|
}, ref) => {
|
|
4325
|
-
const
|
|
4326
|
-
|
|
4327
|
-
|
|
5076
|
+
const store = useSelectStore(externalStore);
|
|
5077
|
+
const open = useStore3(store, (s) => s.open);
|
|
5078
|
+
const toggleOpen = () => store.setState({ open: !open });
|
|
5079
|
+
const variantClasses = VARIANT_CLASSES4[variant];
|
|
5080
|
+
const heightClasses = HEIGHT_CLASSES[size];
|
|
5081
|
+
const paddingClasses = PADDING_CLASSES[size];
|
|
5082
|
+
return /* @__PURE__ */ jsxs23(
|
|
5083
|
+
"button",
|
|
4328
5084
|
{
|
|
4329
5085
|
ref,
|
|
4330
|
-
|
|
4331
|
-
|
|
4332
|
-
|
|
4333
|
-
|
|
4334
|
-
|
|
5086
|
+
id: selectId,
|
|
5087
|
+
className: `
|
|
5088
|
+
flex min-w-[220px] w-full items-center justify-between border-border-300
|
|
5089
|
+
${heightClasses} ${paddingClasses}
|
|
5090
|
+
${invalid && `${variant == "underlined" ? "border-b-2" : "border-2"} border-indicator-error text-text-600`}
|
|
5091
|
+
${disabled ? "cursor-not-allowed text-text-400 pointer-events-none opacity-50" : "cursor-pointer hover:bg-background-50 focus:bg-accent focus:text-accent-foreground hover:bg-accent hover:text-accent-foreground"}
|
|
5092
|
+
${!invalid && !disabled ? "text-text-700" : ""}
|
|
5093
|
+
${variantClasses}
|
|
5094
|
+
${className}
|
|
5095
|
+
`,
|
|
5096
|
+
onClick: toggleOpen,
|
|
5097
|
+
"aria-expanded": open,
|
|
5098
|
+
"aria-haspopup": "listbox",
|
|
5099
|
+
"aria-controls": open ? "select-content" : void 0,
|
|
4335
5100
|
...props,
|
|
4336
5101
|
children: [
|
|
4337
|
-
|
|
4338
|
-
|
|
4339
|
-
|
|
4340
|
-
actionVariant === "button" && /* @__PURE__ */ jsx26(
|
|
4341
|
-
Button_default,
|
|
4342
|
-
{
|
|
4343
|
-
variant: "outline",
|
|
4344
|
-
size: "extra-small",
|
|
4345
|
-
onClick: () => onClickButton?.(valueButton),
|
|
4346
|
-
className: "min-w-fit flex-shrink-0",
|
|
4347
|
-
children: "Ver Aula"
|
|
4348
|
-
}
|
|
4349
|
-
)
|
|
4350
|
-
] }),
|
|
4351
|
-
/* @__PURE__ */ jsx26("div", { className: "w-full", children: hasProgress ? /* @__PURE__ */ jsx26(
|
|
4352
|
-
ProgressBar_default,
|
|
4353
|
-
{
|
|
4354
|
-
value: progress,
|
|
4355
|
-
label: `${progress}% ${labelProgress}`,
|
|
4356
|
-
variant: progressVariant
|
|
4357
|
-
}
|
|
4358
|
-
) : /* @__PURE__ */ jsx26("p", { className: "text-xs text-text-600 truncate", children: description }) })
|
|
4359
|
-
] }),
|
|
4360
|
-
actionVariant == "caret" && /* @__PURE__ */ jsx26(
|
|
4361
|
-
CaretRight2,
|
|
5102
|
+
props.children,
|
|
5103
|
+
/* @__PURE__ */ jsx28(
|
|
5104
|
+
CaretDown,
|
|
4362
5105
|
{
|
|
4363
|
-
className:
|
|
4364
|
-
"data-testid": "caret-icon"
|
|
5106
|
+
className: `h-[1em] w-[1em] opacity-50 transition-transform ${open ? "rotate-180" : ""}`
|
|
4365
5107
|
}
|
|
4366
5108
|
)
|
|
4367
5109
|
]
|
|
@@ -4369,522 +5111,384 @@ var CardPerformance = forwardRef12(
|
|
|
4369
5111
|
);
|
|
4370
5112
|
}
|
|
4371
5113
|
);
|
|
4372
|
-
|
|
5114
|
+
SelectTrigger.displayName = "SelectTrigger";
|
|
5115
|
+
var SelectContent = forwardRef14(
|
|
4373
5116
|
({
|
|
4374
|
-
|
|
4375
|
-
correct_answers,
|
|
4376
|
-
incorrect_answers,
|
|
4377
|
-
icon,
|
|
4378
|
-
direction = "col",
|
|
4379
|
-
color = "#B7DFFF",
|
|
5117
|
+
children,
|
|
4380
5118
|
className,
|
|
5119
|
+
align = "start",
|
|
5120
|
+
side = "bottom",
|
|
5121
|
+
store: externalStore,
|
|
4381
5122
|
...props
|
|
4382
5123
|
}, ref) => {
|
|
4383
|
-
const
|
|
4384
|
-
|
|
4385
|
-
|
|
5124
|
+
const store = useSelectStore(externalStore);
|
|
5125
|
+
const open = useStore3(store, (s) => s.open);
|
|
5126
|
+
if (!open) return null;
|
|
5127
|
+
const getPositionClasses = () => `w-full min-w-full absolute ${SIDE_CLASSES2[side]} ${ALIGN_CLASSES2[align]}`;
|
|
5128
|
+
return /* @__PURE__ */ jsx28(
|
|
5129
|
+
"div",
|
|
4386
5130
|
{
|
|
5131
|
+
role: "menu",
|
|
4387
5132
|
ref,
|
|
4388
|
-
|
|
4389
|
-
padding: "none",
|
|
4390
|
-
minHeight: "medium",
|
|
4391
|
-
className: `items-center pr-4 ${className}`,
|
|
5133
|
+
className: `bg-background z-50 min-w-[210px] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md border-border-100 ${getPositionClasses()} ${className}`,
|
|
4392
5134
|
...props,
|
|
4393
|
-
children
|
|
4394
|
-
/* @__PURE__ */ jsx26(
|
|
4395
|
-
"div",
|
|
4396
|
-
{
|
|
4397
|
-
className: `
|
|
4398
|
-
flex justify-center items-center [&>svg]:size-8 text-text-950 min-w-20 max-w-20 min-h-20 h-full rounded-l-xl
|
|
4399
|
-
`,
|
|
4400
|
-
style: {
|
|
4401
|
-
backgroundColor: color
|
|
4402
|
-
},
|
|
4403
|
-
children: icon
|
|
4404
|
-
}
|
|
4405
|
-
),
|
|
4406
|
-
/* @__PURE__ */ jsxs21(
|
|
4407
|
-
"div",
|
|
4408
|
-
{
|
|
4409
|
-
className: `
|
|
4410
|
-
p-4 flex justify-between w-full h-full
|
|
4411
|
-
${isRow ? "flex-row items-center gap-2" : "flex-col"}
|
|
4412
|
-
`,
|
|
4413
|
-
children: [
|
|
4414
|
-
/* @__PURE__ */ jsx26("p", { className: "text-sm font-bold text-text-950 truncate flex-1 min-w-0", children: header }),
|
|
4415
|
-
/* @__PURE__ */ jsxs21("span", { className: "flex flex-row gap-1 items-center", children: [
|
|
4416
|
-
/* @__PURE__ */ jsxs21(
|
|
4417
|
-
Badge_default,
|
|
4418
|
-
{
|
|
4419
|
-
action: "success",
|
|
4420
|
-
variant: "solid",
|
|
4421
|
-
size: "medium",
|
|
4422
|
-
iconLeft: /* @__PURE__ */ jsx26(CheckCircle3, {}),
|
|
4423
|
-
children: [
|
|
4424
|
-
correct_answers,
|
|
4425
|
-
" Corretas"
|
|
4426
|
-
]
|
|
4427
|
-
}
|
|
4428
|
-
),
|
|
4429
|
-
/* @__PURE__ */ jsxs21(
|
|
4430
|
-
Badge_default,
|
|
4431
|
-
{
|
|
4432
|
-
action: "error",
|
|
4433
|
-
variant: "solid",
|
|
4434
|
-
size: "medium",
|
|
4435
|
-
iconLeft: /* @__PURE__ */ jsx26(XCircle2, {}),
|
|
4436
|
-
children: [
|
|
4437
|
-
incorrect_answers,
|
|
4438
|
-
" Incorretas"
|
|
4439
|
-
]
|
|
4440
|
-
}
|
|
4441
|
-
)
|
|
4442
|
-
] })
|
|
4443
|
-
]
|
|
4444
|
-
}
|
|
4445
|
-
),
|
|
4446
|
-
/* @__PURE__ */ jsx26(CaretRight2, { className: "min-w-6 min-h-6 text-text-800 cursor-pointer" })
|
|
4447
|
-
]
|
|
5135
|
+
children
|
|
4448
5136
|
}
|
|
4449
5137
|
);
|
|
4450
5138
|
}
|
|
4451
5139
|
);
|
|
4452
|
-
|
|
4453
|
-
|
|
4454
|
-
|
|
4455
|
-
|
|
4456
|
-
|
|
4457
|
-
|
|
4458
|
-
|
|
4459
|
-
|
|
4460
|
-
|
|
4461
|
-
|
|
4462
|
-
|
|
4463
|
-
|
|
4464
|
-
|
|
4465
|
-
|
|
4466
|
-
|
|
4467
|
-
|
|
4468
|
-
|
|
4469
|
-
|
|
4470
|
-
|
|
4471
|
-
|
|
4472
|
-
|
|
4473
|
-
|
|
4474
|
-
|
|
4475
|
-
|
|
4476
|
-
|
|
4477
|
-
] }),
|
|
4478
|
-
/* @__PURE__ */ jsx26(CaretRight2, { className: "min-w-6 min-h-6 text-text-800 cursor-pointer flex-shrink-0 ml-2" })
|
|
4479
|
-
] })
|
|
5140
|
+
SelectContent.displayName = "SelectContent";
|
|
5141
|
+
var SelectItem = forwardRef14(
|
|
5142
|
+
({
|
|
5143
|
+
className,
|
|
5144
|
+
children,
|
|
5145
|
+
value,
|
|
5146
|
+
disabled = false,
|
|
5147
|
+
store: externalStore,
|
|
5148
|
+
...props
|
|
5149
|
+
}, ref) => {
|
|
5150
|
+
const store = useSelectStore(externalStore);
|
|
5151
|
+
const {
|
|
5152
|
+
value: selectedValue,
|
|
5153
|
+
setValue,
|
|
5154
|
+
setOpen,
|
|
5155
|
+
setSelectedLabel,
|
|
5156
|
+
onValueChange
|
|
5157
|
+
} = useStore3(store, (s) => s);
|
|
5158
|
+
const handleClick = (e) => {
|
|
5159
|
+
const labelNode = getLabelAsNode(children);
|
|
5160
|
+
if (!disabled) {
|
|
5161
|
+
setValue(value);
|
|
5162
|
+
setSelectedLabel(labelNode);
|
|
5163
|
+
setOpen(false);
|
|
5164
|
+
onValueChange?.(value);
|
|
4480
5165
|
}
|
|
4481
|
-
|
|
4482
|
-
|
|
4483
|
-
|
|
4484
|
-
|
|
4485
|
-
({ header, className, icon, ...props }, ref) => {
|
|
4486
|
-
return /* @__PURE__ */ jsxs21(
|
|
4487
|
-
CardBase,
|
|
5166
|
+
props.onClick?.(e);
|
|
5167
|
+
};
|
|
5168
|
+
return /* @__PURE__ */ jsxs23(
|
|
5169
|
+
"div",
|
|
4488
5170
|
{
|
|
5171
|
+
role: "menuitem",
|
|
5172
|
+
"aria-disabled": disabled,
|
|
4489
5173
|
ref,
|
|
4490
|
-
|
|
4491
|
-
|
|
4492
|
-
|
|
4493
|
-
|
|
5174
|
+
className: `
|
|
5175
|
+
focus-visible:bg-background-50
|
|
5176
|
+
relative flex select-none items-center gap-2 rounded-sm p-3 outline-none transition-colors [&>svg]:size-4 [&>svg]:shrink-0
|
|
5177
|
+
${className}
|
|
5178
|
+
${disabled ? "cursor-not-allowed text-text-400 pointer-events-none opacity-50" : "cursor-pointer hover:bg-background-50 text-text-700 focus:bg-accent focus:text-accent-foreground hover:bg-accent hover:text-accent-foreground"}
|
|
5179
|
+
${selectedValue === value && "bg-background-50"}
|
|
5180
|
+
`,
|
|
5181
|
+
onClick: handleClick,
|
|
5182
|
+
onKeyDown: (e) => {
|
|
5183
|
+
if (e.key === "Enter" || e.key === " ") handleClick(e);
|
|
5184
|
+
},
|
|
5185
|
+
tabIndex: disabled ? -1 : 0,
|
|
4494
5186
|
...props,
|
|
4495
5187
|
children: [
|
|
4496
|
-
/* @__PURE__ */
|
|
4497
|
-
|
|
4498
|
-
/* @__PURE__ */ jsx26(CaretRight2, { size: 24, className: "cursor-pointer" })
|
|
5188
|
+
/* @__PURE__ */ jsx28("span", { className: "absolute right-2 flex h-3.5 w-3.5 items-center justify-center", children: selectedValue === value && /* @__PURE__ */ jsx28(Check4, { className: "" }) }),
|
|
5189
|
+
children
|
|
4499
5190
|
]
|
|
4500
5191
|
}
|
|
4501
5192
|
);
|
|
4502
5193
|
}
|
|
4503
5194
|
);
|
|
4504
|
-
|
|
4505
|
-
|
|
4506
|
-
|
|
4507
|
-
|
|
5195
|
+
SelectItem.displayName = "SelectItem";
|
|
5196
|
+
var Select_default = Select;
|
|
5197
|
+
|
|
5198
|
+
// src/components/Menu/Menu.tsx
|
|
5199
|
+
import { create as create5, useStore as useStore4 } from "zustand";
|
|
5200
|
+
import {
|
|
5201
|
+
useEffect as useEffect7,
|
|
5202
|
+
useRef as useRef6,
|
|
5203
|
+
forwardRef as forwardRef15,
|
|
5204
|
+
isValidElement as isValidElement4,
|
|
5205
|
+
Children as Children4,
|
|
5206
|
+
cloneElement as cloneElement4,
|
|
5207
|
+
useState as useState10
|
|
5208
|
+
} from "react";
|
|
5209
|
+
import { CaretLeft, CaretRight as CaretRight3 } from "phosphor-react";
|
|
5210
|
+
import { jsx as jsx29, jsxs as jsxs24 } from "react/jsx-runtime";
|
|
5211
|
+
var createMenuStore = (onValueChange) => create5((set) => ({
|
|
5212
|
+
value: "",
|
|
5213
|
+
setValue: (value) => {
|
|
5214
|
+
set({ value });
|
|
5215
|
+
onValueChange?.(value);
|
|
5216
|
+
},
|
|
5217
|
+
onValueChange
|
|
5218
|
+
}));
|
|
5219
|
+
var useMenuStore = (externalStore) => {
|
|
5220
|
+
if (!externalStore) throw new Error("MenuItem must be inside Menu");
|
|
5221
|
+
return externalStore;
|
|
5222
|
+
};
|
|
5223
|
+
var VARIANT_CLASSES5 = {
|
|
5224
|
+
menu: "bg-background shadow-soft-shadow-1 px-6",
|
|
5225
|
+
menu2: "",
|
|
5226
|
+
breadcrumb: ""
|
|
5227
|
+
};
|
|
5228
|
+
var Menu = forwardRef15(
|
|
5229
|
+
({
|
|
5230
|
+
className,
|
|
5231
|
+
children,
|
|
5232
|
+
defaultValue,
|
|
5233
|
+
value: propValue,
|
|
5234
|
+
variant = "menu",
|
|
5235
|
+
onValueChange,
|
|
5236
|
+
...props
|
|
5237
|
+
}, ref) => {
|
|
5238
|
+
const storeRef = useRef6(null);
|
|
5239
|
+
storeRef.current ??= createMenuStore(onValueChange);
|
|
5240
|
+
const store = storeRef.current;
|
|
5241
|
+
const { setValue } = useStore4(store, (s) => s);
|
|
5242
|
+
useEffect7(() => {
|
|
5243
|
+
setValue(propValue ?? defaultValue);
|
|
5244
|
+
}, [defaultValue, propValue, setValue]);
|
|
5245
|
+
const baseClasses = "w-full py-2 flex flex-row items-center justify-center";
|
|
5246
|
+
const variantClasses = VARIANT_CLASSES5[variant];
|
|
5247
|
+
return /* @__PURE__ */ jsx29(
|
|
5248
|
+
"div",
|
|
4508
5249
|
{
|
|
4509
|
-
ref,
|
|
4510
|
-
|
|
4511
|
-
|
|
4512
|
-
|
|
4513
|
-
|
|
4514
|
-
|
|
4515
|
-
|
|
4516
|
-
|
|
4517
|
-
"div",
|
|
4518
|
-
{
|
|
4519
|
-
className: `
|
|
4520
|
-
w-full flex ${direction == "col" ? "flex-col" : "flex-row items-center"} gap-2
|
|
4521
|
-
`,
|
|
4522
|
-
children: [
|
|
4523
|
-
/* @__PURE__ */ jsx26("span", { className: "w-full min-w-0", children: /* @__PURE__ */ jsx26("p", { className: "text-sm text-text-950 font-bold truncate", children: header }) }),
|
|
4524
|
-
/* @__PURE__ */ jsx26("span", { className: "flex flex-row gap-1", children })
|
|
4525
|
-
]
|
|
4526
|
-
}
|
|
4527
|
-
),
|
|
4528
|
-
/* @__PURE__ */ jsx26(CaretRight2, { className: "text-text-800 cursor-pointer", size: 24 })
|
|
4529
|
-
]
|
|
5250
|
+
ref,
|
|
5251
|
+
className: `
|
|
5252
|
+
${baseClasses}
|
|
5253
|
+
${variantClasses}
|
|
5254
|
+
${className ?? ""}
|
|
5255
|
+
`,
|
|
5256
|
+
...props,
|
|
5257
|
+
children: injectStore4(children, store)
|
|
4530
5258
|
}
|
|
4531
5259
|
);
|
|
4532
5260
|
}
|
|
4533
5261
|
);
|
|
4534
|
-
|
|
4535
|
-
|
|
4536
|
-
|
|
4537
|
-
|
|
4538
|
-
|
|
4539
|
-
|
|
4540
|
-
|
|
4541
|
-
onClickProfile,
|
|
4542
|
-
valueProfile,
|
|
4543
|
-
className = "",
|
|
4544
|
-
date,
|
|
4545
|
-
hour,
|
|
4546
|
-
...props
|
|
4547
|
-
}, ref) => {
|
|
4548
|
-
return /* @__PURE__ */ jsxs21(
|
|
4549
|
-
CardBase,
|
|
5262
|
+
Menu.displayName = "Menu";
|
|
5263
|
+
var MenuContent = forwardRef15(
|
|
5264
|
+
({ className, children, variant = "menu", ...props }, ref) => {
|
|
5265
|
+
const baseClasses = "w-full flex flex-row items-center gap-2";
|
|
5266
|
+
const variantClasses = variant === "menu2" ? "overflow-x-auto scroll-smooth" : "";
|
|
5267
|
+
return /* @__PURE__ */ jsx29(
|
|
5268
|
+
"ul",
|
|
4550
5269
|
{
|
|
4551
5270
|
ref,
|
|
4552
|
-
|
|
4553
|
-
|
|
4554
|
-
|
|
4555
|
-
|
|
4556
|
-
|
|
5271
|
+
className: `
|
|
5272
|
+
${baseClasses}
|
|
5273
|
+
${variantClasses}
|
|
5274
|
+
${variant == "breadcrumb" ? "flex-wrap" : ""}
|
|
5275
|
+
${className ?? ""}
|
|
5276
|
+
`,
|
|
5277
|
+
style: variant === "menu2" ? { scrollbarWidth: "none", msOverflowStyle: "none" } : void 0,
|
|
4557
5278
|
...props,
|
|
4558
|
-
children
|
|
4559
|
-
/* @__PURE__ */ jsx26(
|
|
4560
|
-
"button",
|
|
4561
|
-
{
|
|
4562
|
-
type: "button",
|
|
4563
|
-
"aria-label": "Ver perfil",
|
|
4564
|
-
onClick: () => onClickProfile?.(valueProfile),
|
|
4565
|
-
className: "min-w-8 h-8 rounded-full bg-background-950"
|
|
4566
|
-
}
|
|
4567
|
-
),
|
|
4568
|
-
/* @__PURE__ */ jsxs21("div", { className: "flex flex-col gap-2 flex-1 min-w-0", children: [
|
|
4569
|
-
/* @__PURE__ */ jsxs21("div", { className: "flex flex-row gap-1 items-center flex-wrap", children: [
|
|
4570
|
-
/* @__PURE__ */ jsx26("p", { className: "text-xs font-semibold text-primary-700 truncate", children: title }),
|
|
4571
|
-
/* @__PURE__ */ jsxs21("p", { className: "text-xs text-text-600", children: [
|
|
4572
|
-
"\u2022 ",
|
|
4573
|
-
date,
|
|
4574
|
-
" \u2022 ",
|
|
4575
|
-
hour
|
|
4576
|
-
] })
|
|
4577
|
-
] }),
|
|
4578
|
-
/* @__PURE__ */ jsx26("p", { className: "text-text-950 text-sm line-clamp-2 truncate", children: content }),
|
|
4579
|
-
/* @__PURE__ */ jsxs21(
|
|
4580
|
-
"button",
|
|
4581
|
-
{
|
|
4582
|
-
type: "button",
|
|
4583
|
-
"aria-label": "Ver coment\xE1rios",
|
|
4584
|
-
onClick: () => onClickComments?.(valueComments),
|
|
4585
|
-
className: "text-text-600 flex flex-row gap-2 items-center",
|
|
4586
|
-
children: [
|
|
4587
|
-
/* @__PURE__ */ jsx26(ChatCircleText, { "aria-hidden": "true", size: 16 }),
|
|
4588
|
-
/* @__PURE__ */ jsxs21("p", { className: "text-xs", children: [
|
|
4589
|
-
comments,
|
|
4590
|
-
" respostas"
|
|
4591
|
-
] })
|
|
4592
|
-
]
|
|
4593
|
-
}
|
|
4594
|
-
)
|
|
4595
|
-
] })
|
|
4596
|
-
]
|
|
5279
|
+
children
|
|
4597
5280
|
}
|
|
4598
5281
|
);
|
|
4599
5282
|
}
|
|
4600
5283
|
);
|
|
4601
|
-
|
|
5284
|
+
MenuContent.displayName = "MenuContent";
|
|
5285
|
+
var MenuItem = forwardRef15(
|
|
4602
5286
|
({
|
|
4603
|
-
src,
|
|
4604
|
-
title,
|
|
4605
|
-
onPlay,
|
|
4606
|
-
onPause,
|
|
4607
|
-
onEnded,
|
|
4608
|
-
onAudioTimeUpdate,
|
|
4609
|
-
loop = false,
|
|
4610
|
-
preload = "metadata",
|
|
4611
|
-
tracks,
|
|
4612
5287
|
className,
|
|
5288
|
+
children,
|
|
5289
|
+
value,
|
|
5290
|
+
disabled = false,
|
|
5291
|
+
store: externalStore,
|
|
5292
|
+
variant = "menu",
|
|
5293
|
+
separator = false,
|
|
4613
5294
|
...props
|
|
4614
5295
|
}, ref) => {
|
|
4615
|
-
const
|
|
4616
|
-
const
|
|
4617
|
-
const
|
|
4618
|
-
|
|
4619
|
-
|
|
4620
|
-
const audioRef = useRef5(null);
|
|
4621
|
-
const formatTime = (time) => {
|
|
4622
|
-
const minutes = Math.floor(time / 60);
|
|
4623
|
-
const seconds = Math.floor(time % 60);
|
|
4624
|
-
return `${minutes}:${seconds.toString().padStart(2, "0")}`;
|
|
4625
|
-
};
|
|
4626
|
-
const handlePlayPause = () => {
|
|
4627
|
-
if (isPlaying) {
|
|
4628
|
-
audioRef.current?.pause();
|
|
4629
|
-
setIsPlaying(false);
|
|
4630
|
-
onPause?.();
|
|
4631
|
-
} else {
|
|
4632
|
-
audioRef.current?.play();
|
|
4633
|
-
setIsPlaying(true);
|
|
4634
|
-
onPlay?.();
|
|
4635
|
-
}
|
|
4636
|
-
};
|
|
4637
|
-
const handleTimeUpdate = () => {
|
|
4638
|
-
const current = audioRef.current?.currentTime ?? 0;
|
|
4639
|
-
const total = audioRef.current?.duration ?? 0;
|
|
4640
|
-
setCurrentTime(current);
|
|
4641
|
-
setDuration(total);
|
|
4642
|
-
onAudioTimeUpdate?.(current, total);
|
|
4643
|
-
};
|
|
4644
|
-
const handleLoadedMetadata = () => {
|
|
4645
|
-
setDuration(audioRef.current?.duration ?? 0);
|
|
4646
|
-
};
|
|
4647
|
-
const handleEnded = () => {
|
|
4648
|
-
setIsPlaying(false);
|
|
4649
|
-
setCurrentTime(0);
|
|
4650
|
-
onEnded?.();
|
|
4651
|
-
};
|
|
4652
|
-
const handleProgressClick = (e) => {
|
|
4653
|
-
const rect = e.currentTarget.getBoundingClientRect();
|
|
4654
|
-
const clickX = e.clientX - rect.left;
|
|
4655
|
-
const width = rect.width;
|
|
4656
|
-
const percentage = clickX / width;
|
|
4657
|
-
const newTime = percentage * duration;
|
|
4658
|
-
if (audioRef.current) {
|
|
4659
|
-
audioRef.current.currentTime = newTime;
|
|
4660
|
-
}
|
|
4661
|
-
setCurrentTime(newTime);
|
|
4662
|
-
};
|
|
4663
|
-
const handleVolumeChange = (e) => {
|
|
4664
|
-
const newVolume = parseFloat(e.target.value);
|
|
4665
|
-
setVolume(newVolume);
|
|
4666
|
-
if (audioRef.current) {
|
|
4667
|
-
audioRef.current.volume = newVolume;
|
|
5296
|
+
const store = useMenuStore(externalStore);
|
|
5297
|
+
const { value: selectedValue, setValue } = useStore4(store, (s) => s);
|
|
5298
|
+
const handleClick = (e) => {
|
|
5299
|
+
if (!disabled) {
|
|
5300
|
+
setValue(value);
|
|
4668
5301
|
}
|
|
5302
|
+
props.onClick?.(e);
|
|
4669
5303
|
};
|
|
4670
|
-
const
|
|
4671
|
-
|
|
4672
|
-
|
|
4673
|
-
|
|
4674
|
-
|
|
4675
|
-
|
|
4676
|
-
|
|
4677
|
-
|
|
4678
|
-
|
|
4679
|
-
|
|
4680
|
-
|
|
5304
|
+
const commonProps = {
|
|
5305
|
+
role: "menuitem",
|
|
5306
|
+
"aria-disabled": disabled,
|
|
5307
|
+
ref,
|
|
5308
|
+
onClick: handleClick,
|
|
5309
|
+
onKeyDown: (e) => {
|
|
5310
|
+
if (["Enter", " "].includes(e.key)) handleClick(e);
|
|
5311
|
+
},
|
|
5312
|
+
tabIndex: disabled ? -1 : 0,
|
|
5313
|
+
onMouseDown: (e) => {
|
|
5314
|
+
e.preventDefault();
|
|
5315
|
+
},
|
|
5316
|
+
...props
|
|
4681
5317
|
};
|
|
4682
|
-
|
|
4683
|
-
|
|
4684
|
-
|
|
4685
|
-
|
|
4686
|
-
|
|
4687
|
-
|
|
4688
|
-
|
|
4689
|
-
|
|
4690
|
-
|
|
4691
|
-
|
|
4692
|
-
|
|
4693
|
-
|
|
4694
|
-
|
|
4695
|
-
|
|
4696
|
-
|
|
4697
|
-
|
|
4698
|
-
|
|
4699
|
-
|
|
4700
|
-
|
|
4701
|
-
|
|
4702
|
-
|
|
4703
|
-
|
|
4704
|
-
|
|
4705
|
-
|
|
4706
|
-
|
|
4707
|
-
|
|
4708
|
-
|
|
4709
|
-
|
|
4710
|
-
|
|
4711
|
-
default: track.default
|
|
4712
|
-
},
|
|
4713
|
-
track.src
|
|
4714
|
-
)) : /* @__PURE__ */ jsx26(
|
|
4715
|
-
"track",
|
|
4716
|
-
{
|
|
4717
|
-
kind: "captions",
|
|
4718
|
-
src: "data:text/vtt;base64,",
|
|
4719
|
-
srcLang: "pt",
|
|
4720
|
-
label: "Sem legendas dispon\xEDveis"
|
|
4721
|
-
}
|
|
4722
|
-
)
|
|
4723
|
-
}
|
|
4724
|
-
),
|
|
4725
|
-
/* @__PURE__ */ jsx26(
|
|
4726
|
-
"button",
|
|
4727
|
-
{
|
|
4728
|
-
type: "button",
|
|
4729
|
-
onClick: handlePlayPause,
|
|
4730
|
-
disabled: !src,
|
|
4731
|
-
className: "cursor-pointer text-text-950 hover:text-primary-600 disabled:text-text-400 disabled:cursor-not-allowed",
|
|
4732
|
-
"aria-label": isPlaying ? "Pausar" : "Reproduzir",
|
|
4733
|
-
children: isPlaying ? /* @__PURE__ */ jsx26("div", { className: "w-6 h-6 flex items-center justify-center", children: /* @__PURE__ */ jsxs21("div", { className: "flex gap-0.5", children: [
|
|
4734
|
-
/* @__PURE__ */ jsx26("div", { className: "w-1 h-4 bg-current rounded-sm" }),
|
|
4735
|
-
/* @__PURE__ */ jsx26("div", { className: "w-1 h-4 bg-current rounded-sm" })
|
|
4736
|
-
] }) }) : /* @__PURE__ */ jsx26(Play, { size: 24 })
|
|
4737
|
-
}
|
|
4738
|
-
),
|
|
4739
|
-
/* @__PURE__ */ jsx26("p", { className: "text-text-800 text-sm font-medium min-w-[2.5rem]", children: formatTime(currentTime) }),
|
|
4740
|
-
/* @__PURE__ */ jsx26("div", { className: "flex-1 relative", "data-testid": "progress-bar", children: /* @__PURE__ */ jsx26(
|
|
4741
|
-
"button",
|
|
4742
|
-
{
|
|
4743
|
-
type: "button",
|
|
4744
|
-
className: "w-full h-2 bg-border-100 rounded-full cursor-pointer",
|
|
4745
|
-
onClick: handleProgressClick,
|
|
4746
|
-
onKeyDown: (e) => {
|
|
4747
|
-
if (e.key === "Enter" || e.key === " ") {
|
|
4748
|
-
e.preventDefault();
|
|
4749
|
-
handleProgressClick(
|
|
4750
|
-
e
|
|
4751
|
-
);
|
|
4752
|
-
}
|
|
4753
|
-
},
|
|
4754
|
-
"aria-label": "Barra de progresso do \xE1udio",
|
|
4755
|
-
children: /* @__PURE__ */ jsx26(
|
|
4756
|
-
"div",
|
|
4757
|
-
{
|
|
4758
|
-
className: "h-full bg-primary-600 rounded-full transition-all duration-100",
|
|
4759
|
-
style: {
|
|
4760
|
-
width: duration > 0 ? `${currentTime / duration * 100}%` : "0%"
|
|
4761
|
-
}
|
|
4762
|
-
}
|
|
4763
|
-
)
|
|
4764
|
-
}
|
|
4765
|
-
) }),
|
|
4766
|
-
/* @__PURE__ */ jsx26("p", { className: "text-text-800 text-sm font-medium min-w-[2.5rem]", children: formatTime(duration) }),
|
|
4767
|
-
/* @__PURE__ */ jsxs21("div", { className: "relative", children: [
|
|
4768
|
-
/* @__PURE__ */ jsx26(
|
|
4769
|
-
"button",
|
|
5318
|
+
const variants = {
|
|
5319
|
+
menu: /* @__PURE__ */ jsx29(
|
|
5320
|
+
"li",
|
|
5321
|
+
{
|
|
5322
|
+
"data-variant": "menu",
|
|
5323
|
+
className: `
|
|
5324
|
+
w-full flex flex-col items-center justify-center gap-0.5 py-1 px-2 rounded-sm font-medium text-xs
|
|
5325
|
+
[&>svg]:size-6 cursor-pointer hover:bg-primary-600 hover:text-text
|
|
5326
|
+
focus:outline-none focus:border-indicator-info focus:border-2
|
|
5327
|
+
${selectedValue === value ? "bg-primary-50 text-primary-950" : "text-text-950"}
|
|
5328
|
+
${className ?? ""}
|
|
5329
|
+
`,
|
|
5330
|
+
...commonProps,
|
|
5331
|
+
children
|
|
5332
|
+
}
|
|
5333
|
+
),
|
|
5334
|
+
menu2: /* @__PURE__ */ jsxs24(
|
|
5335
|
+
"li",
|
|
5336
|
+
{
|
|
5337
|
+
"data-variant": "menu2",
|
|
5338
|
+
className: `
|
|
5339
|
+
w-full flex flex-col items-center px-2 pt-4 gap-3 cursor-pointer focus:rounded-sm justify-center hover:bg-background-100 rounded-lg
|
|
5340
|
+
focus:outline-none focus:border-indicator-info focus:border-2
|
|
5341
|
+
${selectedValue === value ? "" : "pb-4"}
|
|
5342
|
+
`,
|
|
5343
|
+
...commonProps,
|
|
5344
|
+
children: [
|
|
5345
|
+
/* @__PURE__ */ jsx29(
|
|
5346
|
+
"span",
|
|
4770
5347
|
{
|
|
4771
|
-
|
|
4772
|
-
|
|
4773
|
-
className: "cursor-pointer text-text-950 hover:text-primary-600",
|
|
4774
|
-
"aria-label": "Controle de volume",
|
|
4775
|
-
children: /* @__PURE__ */ jsx26("div", { className: "w-6 h-6 flex items-center justify-center", children: getVolumeIcon() })
|
|
5348
|
+
className: `flex flex-row items-center gap-2 px-4 text-text-950 text-xs font-bold ${className ?? ""}`,
|
|
5349
|
+
children
|
|
4776
5350
|
}
|
|
4777
5351
|
),
|
|
4778
|
-
|
|
4779
|
-
|
|
5352
|
+
selectedValue === value && /* @__PURE__ */ jsx29("div", { className: "h-1 w-full bg-primary-950 rounded-lg" })
|
|
5353
|
+
]
|
|
5354
|
+
}
|
|
5355
|
+
),
|
|
5356
|
+
breadcrumb: /* @__PURE__ */ jsxs24(
|
|
5357
|
+
"li",
|
|
5358
|
+
{
|
|
5359
|
+
"data-variant": "breadcrumb",
|
|
5360
|
+
className: `
|
|
5361
|
+
flex flex-row gap-2 items-center w-fit p-2 rounded-lg hover:text-primary-600 cursor-pointer font-bold text-xs
|
|
5362
|
+
focus:outline-none focus:border-indicator-info focus:border-2
|
|
5363
|
+
${selectedValue === value ? "text-text-950" : "text-text-600"}
|
|
5364
|
+
${className ?? ""}
|
|
5365
|
+
`,
|
|
5366
|
+
...commonProps,
|
|
5367
|
+
children: [
|
|
5368
|
+
/* @__PURE__ */ jsx29(
|
|
5369
|
+
"span",
|
|
4780
5370
|
{
|
|
4781
|
-
|
|
4782
|
-
|
|
4783
|
-
|
|
4784
|
-
|
|
4785
|
-
|
|
4786
|
-
|
|
4787
|
-
|
|
4788
|
-
|
|
4789
|
-
|
|
4790
|
-
|
|
4791
|
-
|
|
4792
|
-
|
|
4793
|
-
|
|
4794
|
-
step: "0.1",
|
|
4795
|
-
value: volume,
|
|
4796
|
-
onChange: handleVolumeChange,
|
|
4797
|
-
onKeyDown: (e) => {
|
|
4798
|
-
if (e.key === "ArrowUp" || e.key === "ArrowRight") {
|
|
4799
|
-
e.preventDefault();
|
|
4800
|
-
const newVolume = Math.min(
|
|
4801
|
-
1,
|
|
4802
|
-
Math.round((volume + 0.1) * 10) / 10
|
|
4803
|
-
);
|
|
4804
|
-
setVolume(newVolume);
|
|
4805
|
-
if (audioRef.current) audioRef.current.volume = newVolume;
|
|
4806
|
-
} else if (e.key === "ArrowDown" || e.key === "ArrowLeft") {
|
|
4807
|
-
e.preventDefault();
|
|
4808
|
-
const newVolume = Math.max(
|
|
4809
|
-
0,
|
|
4810
|
-
Math.round((volume - 0.1) * 10) / 10
|
|
4811
|
-
);
|
|
4812
|
-
setVolume(newVolume);
|
|
4813
|
-
if (audioRef.current) audioRef.current.volume = newVolume;
|
|
4814
|
-
}
|
|
4815
|
-
},
|
|
4816
|
-
className: "w-20 h-2 bg-border-100 rounded-lg appearance-none cursor-pointer",
|
|
4817
|
-
style: {
|
|
4818
|
-
background: `linear-gradient(to right, #3b82f6 0%, #3b82f6 ${volume * 100}%, #e5e7eb ${volume * 100}%, #e5e7eb 100%)`
|
|
4819
|
-
},
|
|
4820
|
-
"aria-label": "Volume",
|
|
4821
|
-
"aria-valuenow": Math.round(volume * 100),
|
|
4822
|
-
"aria-valuemin": 0,
|
|
4823
|
-
"aria-valuemax": 100
|
|
4824
|
-
}
|
|
4825
|
-
)
|
|
5371
|
+
className: `
|
|
5372
|
+
border-b border-text-600 hover:border-primary-600 text-inherit text-xs
|
|
5373
|
+
${selectedValue === value ? "border-b-0 font-bold" : "border-b-text-600"}
|
|
5374
|
+
`,
|
|
5375
|
+
children
|
|
5376
|
+
}
|
|
5377
|
+
),
|
|
5378
|
+
separator && /* @__PURE__ */ jsx29(
|
|
5379
|
+
CaretRight3,
|
|
5380
|
+
{
|
|
5381
|
+
size: 16,
|
|
5382
|
+
className: "text-text-600",
|
|
5383
|
+
"data-testid": "separator"
|
|
4826
5384
|
}
|
|
4827
5385
|
)
|
|
4828
|
-
]
|
|
4829
|
-
|
|
4830
|
-
|
|
4831
|
-
|
|
4832
|
-
|
|
4833
|
-
className: "text-text-950 cursor-pointer hover:text-primary-600"
|
|
4834
|
-
}
|
|
4835
|
-
)
|
|
4836
|
-
]
|
|
4837
|
-
}
|
|
4838
|
-
);
|
|
5386
|
+
]
|
|
5387
|
+
}
|
|
5388
|
+
)
|
|
5389
|
+
};
|
|
5390
|
+
return variants[variant] ?? variants["menu"];
|
|
4839
5391
|
}
|
|
4840
5392
|
);
|
|
4841
|
-
|
|
4842
|
-
|
|
4843
|
-
|
|
4844
|
-
|
|
4845
|
-
|
|
5393
|
+
MenuItem.displayName = "MenuItem";
|
|
5394
|
+
var internalScroll = (container, direction) => {
|
|
5395
|
+
if (!container) return;
|
|
5396
|
+
container.scrollBy({
|
|
5397
|
+
left: direction === "left" ? -150 : 150,
|
|
5398
|
+
behavior: "smooth"
|
|
5399
|
+
});
|
|
4846
5400
|
};
|
|
4847
|
-
var
|
|
4848
|
-
(
|
|
4849
|
-
|
|
4850
|
-
|
|
4851
|
-
|
|
4852
|
-
|
|
4853
|
-
|
|
4854
|
-
|
|
4855
|
-
|
|
4856
|
-
|
|
4857
|
-
|
|
4858
|
-
|
|
4859
|
-
|
|
4860
|
-
|
|
4861
|
-
|
|
4862
|
-
|
|
4863
|
-
|
|
4864
|
-
|
|
4865
|
-
|
|
4866
|
-
|
|
4867
|
-
|
|
4868
|
-
|
|
4869
|
-
] })
|
|
4870
|
-
] }),
|
|
4871
|
-
/* @__PURE__ */ jsx26(
|
|
4872
|
-
CaretRight2,
|
|
4873
|
-
{
|
|
4874
|
-
size: 24,
|
|
4875
|
-
className: "text-text-800 flex-shrink-0",
|
|
4876
|
-
"data-testid": "caret-icon"
|
|
4877
|
-
}
|
|
4878
|
-
)
|
|
4879
|
-
] })
|
|
4880
|
-
}
|
|
5401
|
+
var internalCheckScroll = (container, setShowLeftArrow, setShowRightArrow) => {
|
|
5402
|
+
if (!container) return;
|
|
5403
|
+
const { scrollLeft, scrollWidth, clientWidth } = container;
|
|
5404
|
+
setShowLeftArrow(scrollLeft > 0);
|
|
5405
|
+
setShowRightArrow(scrollLeft + clientWidth < scrollWidth);
|
|
5406
|
+
};
|
|
5407
|
+
var MenuOverflow = ({
|
|
5408
|
+
children,
|
|
5409
|
+
className,
|
|
5410
|
+
defaultValue,
|
|
5411
|
+
value,
|
|
5412
|
+
onValueChange,
|
|
5413
|
+
...props
|
|
5414
|
+
}) => {
|
|
5415
|
+
const containerRef = useRef6(null);
|
|
5416
|
+
const [showLeftArrow, setShowLeftArrow] = useState10(false);
|
|
5417
|
+
const [showRightArrow, setShowRightArrow] = useState10(false);
|
|
5418
|
+
useEffect7(() => {
|
|
5419
|
+
const checkScroll = () => internalCheckScroll(
|
|
5420
|
+
containerRef.current,
|
|
5421
|
+
setShowLeftArrow,
|
|
5422
|
+
setShowRightArrow
|
|
4881
5423
|
);
|
|
4882
|
-
|
|
4883
|
-
|
|
5424
|
+
checkScroll();
|
|
5425
|
+
const container = containerRef.current;
|
|
5426
|
+
container?.addEventListener("scroll", checkScroll);
|
|
5427
|
+
window.addEventListener("resize", checkScroll);
|
|
5428
|
+
return () => {
|
|
5429
|
+
container?.removeEventListener("scroll", checkScroll);
|
|
5430
|
+
window.removeEventListener("resize", checkScroll);
|
|
5431
|
+
};
|
|
5432
|
+
}, []);
|
|
5433
|
+
return /* @__PURE__ */ jsxs24(
|
|
5434
|
+
"div",
|
|
5435
|
+
{
|
|
5436
|
+
"data-testid": "menu-overflow-wrapper",
|
|
5437
|
+
className: `relative w-full overflow-hidden ${className ?? ""}`,
|
|
5438
|
+
children: [
|
|
5439
|
+
showLeftArrow && /* @__PURE__ */ jsxs24(
|
|
5440
|
+
"button",
|
|
5441
|
+
{
|
|
5442
|
+
onClick: () => internalScroll(containerRef.current, "left"),
|
|
5443
|
+
className: "absolute left-0 top-1/2 -translate-y-1/2 z-10 flex h-8 w-8 items-center justify-center rounded-full bg-white shadow-md cursor-pointer",
|
|
5444
|
+
"data-testid": "scroll-left-button",
|
|
5445
|
+
children: [
|
|
5446
|
+
/* @__PURE__ */ jsx29(CaretLeft, { size: 16 }),
|
|
5447
|
+
/* @__PURE__ */ jsx29("span", { className: "sr-only", children: "Scroll left" })
|
|
5448
|
+
]
|
|
5449
|
+
}
|
|
5450
|
+
),
|
|
5451
|
+
/* @__PURE__ */ jsx29(
|
|
5452
|
+
Menu,
|
|
5453
|
+
{
|
|
5454
|
+
defaultValue,
|
|
5455
|
+
onValueChange,
|
|
5456
|
+
value,
|
|
5457
|
+
variant: "menu2",
|
|
5458
|
+
...props,
|
|
5459
|
+
children: /* @__PURE__ */ jsx29(MenuContent, { ref: containerRef, variant: "menu2", children })
|
|
5460
|
+
}
|
|
5461
|
+
),
|
|
5462
|
+
showRightArrow && /* @__PURE__ */ jsxs24(
|
|
5463
|
+
"button",
|
|
5464
|
+
{
|
|
5465
|
+
onClick: () => internalScroll(containerRef.current, "right"),
|
|
5466
|
+
className: "absolute right-0 top-1/2 -translate-y-1/2 z-10 flex h-8 w-8 items-center justify-center rounded-full bg-white shadow-md cursor-pointer",
|
|
5467
|
+
"data-testid": "scroll-right-button",
|
|
5468
|
+
children: [
|
|
5469
|
+
/* @__PURE__ */ jsx29(CaretRight3, { size: 16 }),
|
|
5470
|
+
/* @__PURE__ */ jsx29("span", { className: "sr-only", children: "Scroll right" })
|
|
5471
|
+
]
|
|
5472
|
+
}
|
|
5473
|
+
)
|
|
5474
|
+
]
|
|
5475
|
+
}
|
|
5476
|
+
);
|
|
5477
|
+
};
|
|
5478
|
+
var injectStore4 = (children, store) => Children4.map(children, (child) => {
|
|
5479
|
+
if (!isValidElement4(child)) return child;
|
|
5480
|
+
const typedChild = child;
|
|
5481
|
+
const shouldInject = typedChild.type === MenuItem;
|
|
5482
|
+
return cloneElement4(typedChild, {
|
|
5483
|
+
...shouldInject ? { store } : {},
|
|
5484
|
+
...typedChild.props.children ? { children: injectStore4(typedChild.props.children, store) } : {}
|
|
5485
|
+
});
|
|
5486
|
+
});
|
|
5487
|
+
var Menu_default = Menu;
|
|
4884
5488
|
|
|
4885
5489
|
// src/components/Skeleton/Skeleton.tsx
|
|
4886
|
-
import { forwardRef as
|
|
4887
|
-
import { jsx as
|
|
5490
|
+
import { forwardRef as forwardRef16 } from "react";
|
|
5491
|
+
import { jsx as jsx30, jsxs as jsxs25 } from "react/jsx-runtime";
|
|
4888
5492
|
var SKELETON_ANIMATION_CLASSES = {
|
|
4889
5493
|
pulse: "animate-pulse",
|
|
4890
5494
|
none: ""
|
|
@@ -4901,7 +5505,7 @@ var SPACING_CLASSES = {
|
|
|
4901
5505
|
medium: "space-y-2",
|
|
4902
5506
|
large: "space-y-3"
|
|
4903
5507
|
};
|
|
4904
|
-
var Skeleton =
|
|
5508
|
+
var Skeleton = forwardRef16(
|
|
4905
5509
|
({
|
|
4906
5510
|
variant = "text",
|
|
4907
5511
|
width,
|
|
@@ -4921,13 +5525,13 @@ var Skeleton = forwardRef13(
|
|
|
4921
5525
|
height: typeof height === "number" ? `${height}px` : height
|
|
4922
5526
|
};
|
|
4923
5527
|
if (variant === "text" && lines > 1) {
|
|
4924
|
-
return /* @__PURE__ */
|
|
5528
|
+
return /* @__PURE__ */ jsx30(
|
|
4925
5529
|
"div",
|
|
4926
5530
|
{
|
|
4927
5531
|
ref,
|
|
4928
5532
|
className: `flex flex-col ${spacingClass} ${className}`,
|
|
4929
5533
|
...props,
|
|
4930
|
-
children: Array.from({ length: lines }, (_, index) => /* @__PURE__ */
|
|
5534
|
+
children: Array.from({ length: lines }, (_, index) => /* @__PURE__ */ jsx30(
|
|
4931
5535
|
"div",
|
|
4932
5536
|
{
|
|
4933
5537
|
className: `${variantClass} ${animationClass}`,
|
|
@@ -4938,7 +5542,7 @@ var Skeleton = forwardRef13(
|
|
|
4938
5542
|
}
|
|
4939
5543
|
);
|
|
4940
5544
|
}
|
|
4941
|
-
return /* @__PURE__ */
|
|
5545
|
+
return /* @__PURE__ */ jsx30(
|
|
4942
5546
|
"div",
|
|
4943
5547
|
{
|
|
4944
5548
|
ref,
|
|
@@ -4950,13 +5554,13 @@ var Skeleton = forwardRef13(
|
|
|
4950
5554
|
);
|
|
4951
5555
|
}
|
|
4952
5556
|
);
|
|
4953
|
-
var SkeletonText =
|
|
4954
|
-
(props, ref) => /* @__PURE__ */
|
|
5557
|
+
var SkeletonText = forwardRef16(
|
|
5558
|
+
(props, ref) => /* @__PURE__ */ jsx30(Skeleton, { ref, variant: "text", ...props })
|
|
4955
5559
|
);
|
|
4956
|
-
var SkeletonCircle =
|
|
4957
|
-
var SkeletonRectangle =
|
|
4958
|
-
var SkeletonRounded =
|
|
4959
|
-
var SkeletonCard =
|
|
5560
|
+
var SkeletonCircle = forwardRef16((props, ref) => /* @__PURE__ */ jsx30(Skeleton, { ref, variant: "circular", ...props }));
|
|
5561
|
+
var SkeletonRectangle = forwardRef16((props, ref) => /* @__PURE__ */ jsx30(Skeleton, { ref, variant: "rectangular", ...props }));
|
|
5562
|
+
var SkeletonRounded = forwardRef16((props, ref) => /* @__PURE__ */ jsx30(Skeleton, { ref, variant: "rounded", ...props }));
|
|
5563
|
+
var SkeletonCard = forwardRef16(
|
|
4960
5564
|
({
|
|
4961
5565
|
showAvatar = true,
|
|
4962
5566
|
showTitle = true,
|
|
@@ -4966,30 +5570,30 @@ var SkeletonCard = forwardRef13(
|
|
|
4966
5570
|
className = "",
|
|
4967
5571
|
...props
|
|
4968
5572
|
}, ref) => {
|
|
4969
|
-
return /* @__PURE__ */
|
|
5573
|
+
return /* @__PURE__ */ jsxs25(
|
|
4970
5574
|
"div",
|
|
4971
5575
|
{
|
|
4972
5576
|
ref,
|
|
4973
5577
|
className: `w-full p-4 bg-background border border-border-200 rounded-lg ${className}`,
|
|
4974
5578
|
...props,
|
|
4975
5579
|
children: [
|
|
4976
|
-
/* @__PURE__ */
|
|
4977
|
-
showAvatar && /* @__PURE__ */
|
|
4978
|
-
/* @__PURE__ */
|
|
4979
|
-
showTitle && /* @__PURE__ */
|
|
4980
|
-
showDescription && /* @__PURE__ */
|
|
5580
|
+
/* @__PURE__ */ jsxs25("div", { className: "flex items-start space-x-3", children: [
|
|
5581
|
+
showAvatar && /* @__PURE__ */ jsx30(SkeletonCircle, { width: 40, height: 40 }),
|
|
5582
|
+
/* @__PURE__ */ jsxs25("div", { className: "flex-1 space-y-2", children: [
|
|
5583
|
+
showTitle && /* @__PURE__ */ jsx30(SkeletonText, { width: "60%", height: 20 }),
|
|
5584
|
+
showDescription && /* @__PURE__ */ jsx30(SkeletonText, { lines, spacing: "small" })
|
|
4981
5585
|
] })
|
|
4982
5586
|
] }),
|
|
4983
|
-
showActions && /* @__PURE__ */
|
|
4984
|
-
/* @__PURE__ */
|
|
4985
|
-
/* @__PURE__ */
|
|
5587
|
+
showActions && /* @__PURE__ */ jsxs25("div", { className: "flex justify-end space-x-2 mt-4", children: [
|
|
5588
|
+
/* @__PURE__ */ jsx30(SkeletonRectangle, { width: 80, height: 32 }),
|
|
5589
|
+
/* @__PURE__ */ jsx30(SkeletonRectangle, { width: 80, height: 32 })
|
|
4986
5590
|
] })
|
|
4987
5591
|
]
|
|
4988
5592
|
}
|
|
4989
5593
|
);
|
|
4990
5594
|
}
|
|
4991
5595
|
);
|
|
4992
|
-
var SkeletonList =
|
|
5596
|
+
var SkeletonList = forwardRef16(
|
|
4993
5597
|
({
|
|
4994
5598
|
items = 3,
|
|
4995
5599
|
showAvatar = true,
|
|
@@ -4999,19 +5603,19 @@ var SkeletonList = forwardRef13(
|
|
|
4999
5603
|
className = "",
|
|
5000
5604
|
...props
|
|
5001
5605
|
}, ref) => {
|
|
5002
|
-
return /* @__PURE__ */
|
|
5003
|
-
showAvatar && /* @__PURE__ */
|
|
5004
|
-
/* @__PURE__ */
|
|
5005
|
-
showTitle && /* @__PURE__ */
|
|
5006
|
-
showDescription && /* @__PURE__ */
|
|
5606
|
+
return /* @__PURE__ */ jsx30("div", { ref, className: `space-y-3 ${className}`, ...props, children: Array.from({ length: items }, (_, index) => /* @__PURE__ */ jsxs25("div", { className: "flex items-start space-x-3 p-3", children: [
|
|
5607
|
+
showAvatar && /* @__PURE__ */ jsx30(SkeletonCircle, { width: 32, height: 32 }),
|
|
5608
|
+
/* @__PURE__ */ jsxs25("div", { className: "flex-1 space-y-2", children: [
|
|
5609
|
+
showTitle && /* @__PURE__ */ jsx30(SkeletonText, { width: "40%", height: 16 }),
|
|
5610
|
+
showDescription && /* @__PURE__ */ jsx30(SkeletonText, { lines, spacing: "small" })
|
|
5007
5611
|
] })
|
|
5008
5612
|
] }, index)) });
|
|
5009
5613
|
}
|
|
5010
5614
|
);
|
|
5011
|
-
var SkeletonTable =
|
|
5615
|
+
var SkeletonTable = forwardRef16(
|
|
5012
5616
|
({ rows = 5, columns = 4, showHeader = true, className = "", ...props }, ref) => {
|
|
5013
|
-
return /* @__PURE__ */
|
|
5014
|
-
showHeader && /* @__PURE__ */
|
|
5617
|
+
return /* @__PURE__ */ jsxs25("div", { ref, className: `w-full ${className}`, ...props, children: [
|
|
5618
|
+
showHeader && /* @__PURE__ */ jsx30("div", { className: "flex space-x-2 mb-3", children: Array.from({ length: columns }, (_, index) => /* @__PURE__ */ jsx30(
|
|
5015
5619
|
SkeletonText,
|
|
5016
5620
|
{
|
|
5017
5621
|
width: `${100 / columns}%`,
|
|
@@ -5019,7 +5623,7 @@ var SkeletonTable = forwardRef13(
|
|
|
5019
5623
|
},
|
|
5020
5624
|
index
|
|
5021
5625
|
)) }),
|
|
5022
|
-
/* @__PURE__ */
|
|
5626
|
+
/* @__PURE__ */ jsx30("div", { className: "space-y-2", children: Array.from({ length: rows }, (_, rowIndex) => /* @__PURE__ */ jsx30("div", { className: "flex space-x-2", children: Array.from({ length: columns }, (_2, colIndex) => /* @__PURE__ */ jsx30(
|
|
5023
5627
|
SkeletonText,
|
|
5024
5628
|
{
|
|
5025
5629
|
width: `${100 / columns}%`,
|
|
@@ -5035,13 +5639,13 @@ var SkeletonTable = forwardRef13(
|
|
|
5035
5639
|
import {
|
|
5036
5640
|
createContext,
|
|
5037
5641
|
useContext,
|
|
5038
|
-
useEffect as
|
|
5039
|
-
useState as
|
|
5642
|
+
useEffect as useEffect8,
|
|
5643
|
+
useState as useState11,
|
|
5040
5644
|
useCallback,
|
|
5041
5645
|
useMemo as useMemo3
|
|
5042
5646
|
} from "react";
|
|
5043
5647
|
import { useLocation, Navigate } from "react-router-dom";
|
|
5044
|
-
import { Fragment as
|
|
5648
|
+
import { Fragment as Fragment7, jsx as jsx31 } from "react/jsx-runtime";
|
|
5045
5649
|
var AuthContext = createContext(void 0);
|
|
5046
5650
|
var AuthProvider = ({
|
|
5047
5651
|
children,
|
|
@@ -5052,7 +5656,7 @@ var AuthProvider = ({
|
|
|
5052
5656
|
getSessionFn,
|
|
5053
5657
|
getTokensFn
|
|
5054
5658
|
}) => {
|
|
5055
|
-
const [authState, setAuthState] =
|
|
5659
|
+
const [authState, setAuthState] = useState11({
|
|
5056
5660
|
isAuthenticated: false,
|
|
5057
5661
|
isLoading: true,
|
|
5058
5662
|
...initialAuthState
|
|
@@ -5100,7 +5704,7 @@ var AuthProvider = ({
|
|
|
5100
5704
|
tokens: void 0
|
|
5101
5705
|
}));
|
|
5102
5706
|
}, [signOutFn]);
|
|
5103
|
-
|
|
5707
|
+
useEffect8(() => {
|
|
5104
5708
|
checkAuth();
|
|
5105
5709
|
}, [checkAuth]);
|
|
5106
5710
|
const contextValue = useMemo3(
|
|
@@ -5111,7 +5715,7 @@ var AuthProvider = ({
|
|
|
5111
5715
|
}),
|
|
5112
5716
|
[authState, checkAuth, signOut]
|
|
5113
5717
|
);
|
|
5114
|
-
return /* @__PURE__ */
|
|
5718
|
+
return /* @__PURE__ */ jsx31(AuthContext.Provider, { value: contextValue, children });
|
|
5115
5719
|
};
|
|
5116
5720
|
var useAuth = () => {
|
|
5117
5721
|
const context = useContext(AuthContext);
|
|
@@ -5127,17 +5731,17 @@ var ProtectedRoute = ({
|
|
|
5127
5731
|
additionalCheck
|
|
5128
5732
|
}) => {
|
|
5129
5733
|
const { isAuthenticated, isLoading, ...authState } = useAuth();
|
|
5130
|
-
const defaultLoadingComponent = /* @__PURE__ */
|
|
5734
|
+
const defaultLoadingComponent = /* @__PURE__ */ jsx31("div", { className: "flex items-center justify-center min-h-screen", children: /* @__PURE__ */ jsx31("div", { className: "text-text-950 text-lg", children: "Carregando..." }) });
|
|
5131
5735
|
if (isLoading) {
|
|
5132
|
-
return /* @__PURE__ */
|
|
5736
|
+
return /* @__PURE__ */ jsx31(Fragment7, { children: loadingComponent || defaultLoadingComponent });
|
|
5133
5737
|
}
|
|
5134
5738
|
if (!isAuthenticated) {
|
|
5135
|
-
return /* @__PURE__ */
|
|
5739
|
+
return /* @__PURE__ */ jsx31(Navigate, { to: redirectTo, replace: true });
|
|
5136
5740
|
}
|
|
5137
5741
|
if (additionalCheck && !additionalCheck({ isAuthenticated, isLoading, ...authState })) {
|
|
5138
|
-
return /* @__PURE__ */
|
|
5742
|
+
return /* @__PURE__ */ jsx31(Navigate, { to: redirectTo, replace: true });
|
|
5139
5743
|
}
|
|
5140
|
-
return /* @__PURE__ */
|
|
5744
|
+
return /* @__PURE__ */ jsx31(Fragment7, { children });
|
|
5141
5745
|
};
|
|
5142
5746
|
var PublicRoute = ({
|
|
5143
5747
|
children,
|
|
@@ -5147,15 +5751,15 @@ var PublicRoute = ({
|
|
|
5147
5751
|
}) => {
|
|
5148
5752
|
const { isAuthenticated, isLoading } = useAuth();
|
|
5149
5753
|
if (checkAuthBeforeRender && isLoading) {
|
|
5150
|
-
return /* @__PURE__ */
|
|
5754
|
+
return /* @__PURE__ */ jsx31("div", { className: "flex items-center justify-center min-h-screen", children: /* @__PURE__ */ jsx31("div", { className: "text-text-950 text-lg", children: "Carregando..." }) });
|
|
5151
5755
|
}
|
|
5152
5756
|
if (isAuthenticated && redirectIfAuthenticated) {
|
|
5153
|
-
return /* @__PURE__ */
|
|
5757
|
+
return /* @__PURE__ */ jsx31(Navigate, { to: redirectTo, replace: true });
|
|
5154
5758
|
}
|
|
5155
|
-
return /* @__PURE__ */
|
|
5759
|
+
return /* @__PURE__ */ jsx31(Fragment7, { children });
|
|
5156
5760
|
};
|
|
5157
5761
|
var withAuth = (Component, options = {}) => {
|
|
5158
|
-
return (props) => /* @__PURE__ */
|
|
5762
|
+
return (props) => /* @__PURE__ */ jsx31(ProtectedRoute, { ...options, children: /* @__PURE__ */ jsx31(Component, { ...props }) });
|
|
5159
5763
|
};
|
|
5160
5764
|
var useAuthGuard = (options = {}) => {
|
|
5161
5765
|
const authState = useAuth();
|
|
@@ -5170,177 +5774,22 @@ var useAuthGuard = (options = {}) => {
|
|
|
5170
5774
|
var useRouteAuth = (fallbackPath = "/") => {
|
|
5171
5775
|
const { isAuthenticated, isLoading } = useAuth();
|
|
5172
5776
|
const location = useLocation();
|
|
5173
|
-
const redirectToLogin = () => /* @__PURE__ */
|
|
5777
|
+
const redirectToLogin = () => /* @__PURE__ */ jsx31(Navigate, { to: fallbackPath, state: { from: location }, replace: true });
|
|
5174
5778
|
return {
|
|
5175
5779
|
isAuthenticated,
|
|
5176
5780
|
isLoading,
|
|
5177
5781
|
redirectToLogin
|
|
5178
5782
|
};
|
|
5179
5783
|
};
|
|
5180
|
-
|
|
5181
|
-
// src/components/Tab/Tab.tsx
|
|
5182
|
-
import { forwardRef as forwardRef14 } from "react";
|
|
5183
|
-
import { Fragment as Fragment7, jsx as jsx29, jsxs as jsxs23 } from "react/jsx-runtime";
|
|
5184
|
-
var TAB_SIZE_CLASSES = {
|
|
5185
|
-
small: {
|
|
5186
|
-
container: "h-10 gap-1",
|
|
5187
|
-
tab: "px-3 py-2 text-sm",
|
|
5188
|
-
indicator: "h-0.5"
|
|
5189
|
-
},
|
|
5190
|
-
medium: {
|
|
5191
|
-
container: "h-12 gap-2",
|
|
5192
|
-
tab: "px-4 py-4 text-sm",
|
|
5193
|
-
indicator: "h-1"
|
|
5194
|
-
},
|
|
5195
|
-
large: {
|
|
5196
|
-
container: "h-14 gap-2",
|
|
5197
|
-
tab: "px-6 py-4 text-base",
|
|
5198
|
-
indicator: "h-1"
|
|
5199
|
-
}
|
|
5200
|
-
};
|
|
5201
|
-
var RESPONSIVE_WIDTH_CLASSES = {
|
|
5202
|
-
twoTabs: "w-[115px] sm:w-[204px]",
|
|
5203
|
-
threeTabs: "w-[100px] sm:w-[160px]",
|
|
5204
|
-
fourTabs: "w-[80px] sm:w-[140px]",
|
|
5205
|
-
fiveTabs: "w-[70px] sm:w-[120px]",
|
|
5206
|
-
default: "flex-1"
|
|
5207
|
-
};
|
|
5208
|
-
var Tab = forwardRef14(
|
|
5209
|
-
({
|
|
5210
|
-
tabs,
|
|
5211
|
-
activeTab,
|
|
5212
|
-
onTabChange,
|
|
5213
|
-
size = "medium",
|
|
5214
|
-
responsive = true,
|
|
5215
|
-
className = "",
|
|
5216
|
-
...props
|
|
5217
|
-
}, ref) => {
|
|
5218
|
-
const sizeClasses = TAB_SIZE_CLASSES[size];
|
|
5219
|
-
const getResponsiveWidthClass = (tabCount) => {
|
|
5220
|
-
if (!responsive) return RESPONSIVE_WIDTH_CLASSES.default;
|
|
5221
|
-
switch (tabCount) {
|
|
5222
|
-
case 2:
|
|
5223
|
-
return RESPONSIVE_WIDTH_CLASSES.twoTabs;
|
|
5224
|
-
case 3:
|
|
5225
|
-
return RESPONSIVE_WIDTH_CLASSES.threeTabs;
|
|
5226
|
-
case 4:
|
|
5227
|
-
return RESPONSIVE_WIDTH_CLASSES.fourTabs;
|
|
5228
|
-
case 5:
|
|
5229
|
-
return RESPONSIVE_WIDTH_CLASSES.fiveTabs;
|
|
5230
|
-
default:
|
|
5231
|
-
return RESPONSIVE_WIDTH_CLASSES.default;
|
|
5232
|
-
}
|
|
5233
|
-
};
|
|
5234
|
-
const handleTabClick = (tabId) => {
|
|
5235
|
-
const tab = tabs.find((t) => t.id === tabId);
|
|
5236
|
-
if (tab && !tab.disabled) {
|
|
5237
|
-
onTabChange(tabId);
|
|
5238
|
-
}
|
|
5239
|
-
};
|
|
5240
|
-
const wrapAroundIndex = (index, maxLength) => {
|
|
5241
|
-
if (index < 0) return maxLength - 1;
|
|
5242
|
-
if (index >= maxLength) return 0;
|
|
5243
|
-
return index;
|
|
5244
|
-
};
|
|
5245
|
-
const findNextValidTab = (startIndex, direction) => {
|
|
5246
|
-
let nextIndex = wrapAroundIndex(startIndex + direction, tabs.length);
|
|
5247
|
-
let attempts = 0;
|
|
5248
|
-
while (tabs[nextIndex]?.disabled && attempts < tabs.length) {
|
|
5249
|
-
nextIndex = wrapAroundIndex(nextIndex + direction, tabs.length);
|
|
5250
|
-
attempts++;
|
|
5251
|
-
}
|
|
5252
|
-
return nextIndex;
|
|
5253
|
-
};
|
|
5254
|
-
const handleArrowNavigation = (direction) => {
|
|
5255
|
-
const currentIndex = tabs.findIndex((tab) => tab.id === activeTab);
|
|
5256
|
-
const nextIndex = findNextValidTab(currentIndex, direction);
|
|
5257
|
-
if (!tabs[nextIndex]?.disabled && nextIndex !== currentIndex) {
|
|
5258
|
-
handleTabClick(tabs[nextIndex].id);
|
|
5259
|
-
}
|
|
5260
|
-
};
|
|
5261
|
-
const handleKeyDown = (event, tabId) => {
|
|
5262
|
-
if (event.key === "Enter" || event.key === " ") {
|
|
5263
|
-
event.preventDefault();
|
|
5264
|
-
handleTabClick(tabId);
|
|
5265
|
-
return;
|
|
5266
|
-
}
|
|
5267
|
-
if (event.key === "ArrowLeft" || event.key === "ArrowRight") {
|
|
5268
|
-
event.preventDefault();
|
|
5269
|
-
const direction = event.key === "ArrowLeft" ? -1 : 1;
|
|
5270
|
-
handleArrowNavigation(direction);
|
|
5271
|
-
}
|
|
5272
|
-
};
|
|
5273
|
-
const getTabClassNames = (isDisabled, isActive) => {
|
|
5274
|
-
if (isDisabled) {
|
|
5275
|
-
return "text-text-400 cursor-not-allowed opacity-50";
|
|
5276
|
-
}
|
|
5277
|
-
if (isActive) {
|
|
5278
|
-
return "text-text-950";
|
|
5279
|
-
}
|
|
5280
|
-
return "text-text-700 hover:text-text-800";
|
|
5281
|
-
};
|
|
5282
|
-
const tabWidthClass = getResponsiveWidthClass(tabs.length);
|
|
5283
|
-
const containerWidth = responsive && tabs.length <= 2 ? "w-[240px] sm:w-[416px]" : "w-full";
|
|
5284
|
-
return /* @__PURE__ */ jsx29(
|
|
5285
|
-
"div",
|
|
5286
|
-
{
|
|
5287
|
-
ref,
|
|
5288
|
-
className: `flex flex-row items-start ${sizeClasses.container} ${containerWidth} ${className}`,
|
|
5289
|
-
role: "tablist",
|
|
5290
|
-
...props,
|
|
5291
|
-
children: tabs.map((tab) => {
|
|
5292
|
-
const isActive = tab.id === activeTab;
|
|
5293
|
-
const isDisabled = Boolean(tab.disabled);
|
|
5294
|
-
const tabClassNames = getTabClassNames(isDisabled, isActive);
|
|
5295
|
-
return /* @__PURE__ */ jsxs23(
|
|
5296
|
-
"button",
|
|
5297
|
-
{
|
|
5298
|
-
type: "button",
|
|
5299
|
-
role: "tab",
|
|
5300
|
-
"aria-selected": isActive,
|
|
5301
|
-
"aria-disabled": isDisabled,
|
|
5302
|
-
tabIndex: isActive ? 0 : -1,
|
|
5303
|
-
className: `
|
|
5304
|
-
relative flex flex-row justify-center items-center gap-2 rounded transition-colors isolate
|
|
5305
|
-
${sizeClasses.tab}
|
|
5306
|
-
${tabWidthClass}
|
|
5307
|
-
${tabClassNames}
|
|
5308
|
-
${!isDisabled && !isActive ? "hover:bg-background-50" : ""}
|
|
5309
|
-
focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2
|
|
5310
|
-
`,
|
|
5311
|
-
onClick: () => handleTabClick(tab.id),
|
|
5312
|
-
onKeyDown: (e) => handleKeyDown(e, tab.id),
|
|
5313
|
-
disabled: isDisabled,
|
|
5314
|
-
"data-testid": `tab-${tab.id}`,
|
|
5315
|
-
children: [
|
|
5316
|
-
/* @__PURE__ */ jsx29("span", { className: "font-bold leading-4 tracking-[0.2px] truncate", children: responsive && tab.mobileLabel ? /* @__PURE__ */ jsxs23(Fragment7, { children: [
|
|
5317
|
-
/* @__PURE__ */ jsx29("span", { className: "sm:hidden", children: tab.mobileLabel }),
|
|
5318
|
-
/* @__PURE__ */ jsx29("span", { className: "hidden sm:inline", children: tab.label })
|
|
5319
|
-
] }) : tab.label }),
|
|
5320
|
-
isActive && /* @__PURE__ */ jsx29(
|
|
5321
|
-
"div",
|
|
5322
|
-
{
|
|
5323
|
-
className: `absolute bottom-0 left-2 right-2 bg-primary-700 rounded-lg z-[2] ${sizeClasses.indicator}`,
|
|
5324
|
-
"data-testid": "active-indicator"
|
|
5325
|
-
}
|
|
5326
|
-
)
|
|
5327
|
-
]
|
|
5328
|
-
},
|
|
5329
|
-
tab.id
|
|
5330
|
-
);
|
|
5331
|
-
})
|
|
5332
|
-
}
|
|
5333
|
-
);
|
|
5334
|
-
}
|
|
5335
|
-
);
|
|
5336
|
-
Tab.displayName = "Tab";
|
|
5337
|
-
var Tab_default = Tab;
|
|
5338
5784
|
export {
|
|
5339
5785
|
Alert_default as Alert,
|
|
5786
|
+
AlertDialog,
|
|
5787
|
+
AlternativesList,
|
|
5340
5788
|
AuthProvider,
|
|
5341
5789
|
Badge_default as Badge,
|
|
5342
5790
|
Button_default as Button,
|
|
5343
5791
|
Calendar_default as Calendar,
|
|
5792
|
+
CardAccordation,
|
|
5344
5793
|
CardActivitiesResults,
|
|
5345
5794
|
CardPerformance,
|
|
5346
5795
|
CardProgress,
|
|
@@ -5376,6 +5825,8 @@ export {
|
|
|
5376
5825
|
ProtectedRoute,
|
|
5377
5826
|
PublicRoute,
|
|
5378
5827
|
Radio_default as Radio,
|
|
5828
|
+
RadioGroup,
|
|
5829
|
+
RadioGroupItem,
|
|
5379
5830
|
Select_default as Select,
|
|
5380
5831
|
SelectContent,
|
|
5381
5832
|
SelectItem,
|
|
@@ -5391,7 +5842,6 @@ export {
|
|
|
5391
5842
|
SkeletonTable,
|
|
5392
5843
|
SkeletonText,
|
|
5393
5844
|
Stepper_default as Stepper,
|
|
5394
|
-
Tab_default as Tab,
|
|
5395
5845
|
Table_default as Table,
|
|
5396
5846
|
Text_default as Text,
|
|
5397
5847
|
TextArea_default as TextArea,
|