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