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.
Files changed (47) hide show
  1. package/dist/Accordation/index.d.mts +12 -0
  2. package/dist/Accordation/index.d.ts +12 -0
  3. package/dist/Accordation/index.js +1663 -0
  4. package/dist/Accordation/index.js.map +1 -0
  5. package/dist/Accordation/index.mjs +1654 -0
  6. package/dist/Accordation/index.mjs.map +1 -0
  7. package/dist/AlertDialog/index.d.mts +40 -0
  8. package/dist/AlertDialog/index.d.ts +40 -0
  9. package/dist/AlertDialog/index.js +233 -0
  10. package/dist/AlertDialog/index.js.map +1 -0
  11. package/dist/AlertDialog/index.mjs +212 -0
  12. package/dist/AlertDialog/index.mjs.map +1 -0
  13. package/dist/Alternative/index.d.mts +81 -0
  14. package/dist/Alternative/index.d.ts +81 -0
  15. package/dist/Alternative/index.js +745 -0
  16. package/dist/Alternative/index.js.map +1 -0
  17. package/dist/Alternative/index.mjs +728 -0
  18. package/dist/Alternative/index.mjs.map +1 -0
  19. package/dist/Badge/index.js +1 -1
  20. package/dist/Badge/index.js.map +1 -1
  21. package/dist/Badge/index.mjs +1 -1
  22. package/dist/Badge/index.mjs.map +1 -1
  23. package/dist/Card/index.js +1 -1
  24. package/dist/Card/index.js.map +1 -1
  25. package/dist/Card/index.mjs +1 -1
  26. package/dist/Card/index.mjs.map +1 -1
  27. package/dist/Radio/index.d.mts +120 -2
  28. package/dist/Radio/index.d.ts +120 -2
  29. package/dist/Radio/index.js +176 -3
  30. package/dist/Radio/index.js.map +1 -1
  31. package/dist/Radio/index.mjs +176 -4
  32. package/dist/Radio/index.mjs.map +1 -1
  33. package/dist/Skeleton/index.d.mts +10 -9
  34. package/dist/Skeleton/index.d.ts +10 -9
  35. package/dist/Skeleton/index.js.map +1 -1
  36. package/dist/Skeleton/index.mjs.map +1 -1
  37. package/dist/index.css +174 -0
  38. package/dist/index.css.map +1 -1
  39. package/dist/index.d.mts +4 -1
  40. package/dist/index.d.ts +4 -1
  41. package/dist/index.js +2383 -1778
  42. package/dist/index.js.map +1 -1
  43. package/dist/index.mjs +2441 -1832
  44. package/dist/index.mjs.map +1 -1
  45. package/dist/styles.css +174 -0
  46. package/dist/styles.css.map +1 -1
  47. 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)("label", { htmlFor: inputId, className: radioClasses, children: checked && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: dotClasses }) }),
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 import_zustand = require("zustand");
1255
- var useToastStore = (0, import_zustand.create)((set) => ({
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/DropdownMenu/DropdownMenu.tsx
3001
- var import_phosphor_react10 = require("phosphor-react");
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 import_zustand2 = require("zustand");
3174
+ var import_phosphor_react10 = require("phosphor-react");
3004
3175
  var import_jsx_runtime23 = require("react/jsx-runtime");
3005
- function createDropdownStore() {
3006
- return (0, import_zustand2.create)((set) => ({
3007
- open: false,
3008
- setOpen: (open) => set({ open })
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
- DropdownMenuTrigger.displayName = "DropdownMenuTrigger";
3127
- var ITEM_SIZE_CLASSES = {
3128
- small: "text-sm",
3129
- medium: "text-md"
3181
+ var CARD_PADDING_CLASSES = {
3182
+ none: "",
3183
+ small: "p-2",
3184
+ medium: "p-4",
3185
+ large: "p-6"
3130
3186
  };
3131
- var SIDE_CLASSES = {
3132
- top: "bottom-full",
3133
- right: "top-full",
3134
- bottom: "top-full",
3135
- left: "top-full"
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 ALIGN_CLASSES = {
3138
- start: "left-0",
3139
- center: "left-1/2 -translate-x-1/2",
3140
- end: "right-0"
3193
+ var CARD_LAYOUT_CLASSES = {
3194
+ horizontal: "flex flex-row",
3195
+ vertical: "flex flex-col"
3141
3196
  };
3142
- var MENUCONTENT_VARIANT_CLASSES = {
3143
- menu: "p-1",
3144
- profile: "p-6"
3197
+ var CARD_CURSOR_CLASSES = {
3198
+ default: "",
3199
+ pointer: "cursor-pointer"
3145
3200
  };
3146
- var MenuLabel = (0, import_react11.forwardRef)(({ className, inset, store: _store, ...props }, ref) => {
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
- store: externalStore,
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 store = useDropdownStore(externalStore);
3169
- const open = (0, import_zustand2.useStore)(store, (s) => s.open);
3170
- const [isVisible, setIsVisible] = (0, import_react11.useState)(open);
3171
- (0, import_react11.useEffect)(() => {
3172
- if (open) {
3173
- setIsVisible(true);
3174
- } else {
3175
- const timer = setTimeout(() => setIsVisible(false), 200);
3176
- return () => clearTimeout(timer);
3177
- }
3178
- }, [open]);
3179
- if (!isVisible) return null;
3180
- const getPositionClasses = () => {
3181
- const vertical = SIDE_CLASSES[side];
3182
- const horizontal = ALIGN_CLASSES[align];
3183
- return `absolute ${vertical} ${horizontal}`;
3184
- };
3185
- const variantClasses = MENUCONTENT_VARIANT_CLASSES[variant];
3186
- return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
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
- role: "menu",
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
- DropdownMenuContent.displayName = "DropdownMenuContent";
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
- size = "small",
3215
- children,
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 store = useDropdownStore(externalStore);
3225
- const setOpen = (0, import_zustand2.useStore)(store, (s) => s.setOpen);
3226
- const sizeClasses = ITEM_SIZE_CLASSES[size];
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
- "div",
3331
+ CardBase,
3247
3332
  {
3248
3333
  ref,
3249
- role: "menuitem",
3250
- ...getVariantProps(),
3251
- "aria-disabled": disabled,
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
- iconLeft,
3267
- /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "w-full text-md", children }),
3268
- iconRight
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
- DropdownMenuItem.displayName = "DropdownMenuItem";
3275
- var DropdownMenuSeparator = (0, import_react11.forwardRef)(({ className, store: _store, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
3276
- "div",
3277
- {
3278
- ref,
3279
- className: `my-1 h-px bg-border-200 ${className}`,
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
- DropdownMenuSeparator.displayName = "DropdownMenuSeparator";
3284
- var ProfileMenuTrigger = (0, import_react11.forwardRef)(({ className, onClick, store: externalStore, ...props }, ref) => {
3285
- const store = useDropdownStore(externalStore);
3286
- const open = (0, import_zustand2.useStore)(store, (s) => s.open);
3287
- const toggleOpen = () => store.setState({ open: !open });
3288
- return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
3289
- "button",
3290
- {
3291
- ref,
3292
- className: `rounded-lg size-10 bg-primary-50 flex items-center justify-center cursor-pointer ${className}`,
3293
- onClick: (e) => {
3294
- e.stopPropagation();
3295
- toggleOpen();
3296
- onClick?.(e);
3297
- },
3298
- "aria-expanded": open,
3299
- ...props,
3300
- children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "size-6 rounded-full bg-primary-100 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_phosphor_react10.User, { className: "text-primary-950", size: 18 }) })
3301
- }
3302
- );
3303
- });
3304
- ProfileMenuTrigger.displayName = "ProfileMenuTrigger";
3305
- var ProfileMenuHeader = (0, import_react11.forwardRef)(({ className, name, email, store: _store, ...props }, ref) => {
3306
- return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
3307
- "div",
3308
- {
3309
- ref,
3310
- "data-component": "ProfileMenuHeader",
3311
- className: `
3312
- flex flex-row gap-4 items-center
3313
- ${className}
3314
- `,
3315
- ...props,
3316
- children: [
3317
- /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "size-16 bg-primary-100 rounded-full flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_phosphor_react10.User, { size: 34, className: "text-primary-950" }) }),
3318
- /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex flex-col ", children: [
3319
- /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("p", { className: "text-xl font-bold text-text-950", children: name }),
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
- const handleArrowKeys = (event) => {
3510
- const selectContent = selectRef.current?.querySelector('[role="menu"]');
3511
- if (selectContent) {
3512
- event.preventDefault();
3513
- const items = Array.from(
3514
- selectContent.querySelectorAll(
3515
- '[role="menuitem"]:not([aria-disabled="true"])'
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
- ).filter((el) => el instanceof HTMLElement);
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
- if (open) {
3530
- document.addEventListener("mousedown", handleClickOutside);
3531
- document.addEventListener("keydown", handleArrowKeys);
3532
- }
3533
- return () => {
3534
- document.removeEventListener("mousedown", handleClickOutside);
3535
- document.removeEventListener("keydown", handleArrowKeys);
3536
- };
3537
- }, [open]);
3538
- (0, import_react12.useEffect)(() => {
3539
- if (propValue) {
3540
- setValue(propValue);
3541
- const label2 = findLabelForValue(children, propValue);
3542
- if (label2) store.setState({ selectedLabel: label2 });
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
- htmlFor: selectId,
3551
- className: `block font-bold text-text-900 mb-1.5 ${sizeClasses}`,
3552
- children: label
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
- /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: `relative ${sizeClasses}`, ref: selectRef, children: injectStore2(children, store, size, selectId) }),
3556
- /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "mt-1.5 gap-1.5", children: [
3557
- helperText && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("p", { className: "text-sm text-text-500", children: helperText }),
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
- className,
3578
- invalid = false,
3579
- variant = "outlined",
3580
- store: externalStore,
3581
- disabled,
3582
- size = "medium",
3583
- selectId,
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 store = useSelectStore(externalStore);
3587
- const open = (0, import_zustand3.useStore)(store, (s) => s.open);
3588
- const toggleOpen = () => store.setState({ open: !open });
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
- id: selectId,
3597
- className: `
3598
- flex min-w-[220px] w-full items-center justify-between border-border-300
3599
- ${heightClasses} ${paddingClasses}
3600
- ${invalid && `${variant == "underlined" ? "border-b-2" : "border-2"} border-indicator-error text-text-600`}
3601
- ${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"}
3602
- ${!invalid && !disabled ? "text-text-700" : ""}
3603
- ${variantClasses}
3604
- ${className}
3605
- `,
3606
- onClick: toggleOpen,
3607
- "aria-expanded": open,
3608
- "aria-haspopup": "listbox",
3609
- "aria-controls": open ? "select-content" : void 0,
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
- props.children,
3613
- /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
3614
- import_phosphor_react11.CaretDown,
3604
+ /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
3605
+ "div",
3615
3606
  {
3616
- className: `h-[1em] w-[1em] opacity-50 transition-transform ${open ? "rotate-180" : ""}`
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
- SelectTrigger.displayName = "SelectTrigger";
3625
- var SelectContent = (0, import_react12.forwardRef)(
3626
- ({
3627
- children,
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
- 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}`,
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
- SelectContent.displayName = "SelectContent";
3651
- var SelectItem = (0, import_react12.forwardRef)(
3652
- ({
3653
- className,
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
- className: `
3685
- focus-visible:bg-background-50
3686
- relative flex select-none items-center gap-2 rounded-sm p-3 outline-none transition-colors [&>svg]:size-4 [&>svg]:shrink-0
3687
- ${className}
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, import_jsx_runtime24.jsx)("span", { className: "absolute right-2 flex h-3.5 w-3.5 items-center justify-center", children: selectedValue === value && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_phosphor_react11.Check, { className: "" }) }),
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
- SelectItem.displayName = "SelectItem";
3706
- var Select_default = Select;
3707
-
3708
- // src/components/Menu/Menu.tsx
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
- className: `
3754
- ${baseClasses}
3755
- ${variantClasses}
3756
- ${className ?? ""}
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: injectStore3(children, store)
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
- Menu.displayName = "Menu";
3765
- var MenuContent = (0, import_react13.forwardRef)(
3766
- ({ className, children, variant = "menu", ...props }, ref) => {
3767
- const baseClasses = "w-full flex flex-row items-center gap-2";
3768
- const variantClasses = variant === "menu2" ? "overflow-x-auto scroll-smooth" : "";
3769
- return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
3770
- "ul",
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
- className: `
3774
- ${baseClasses}
3775
- ${variantClasses}
3776
- ${variant == "breadcrumb" ? "flex-wrap" : ""}
3777
- ${className ?? ""}
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
- MenuContent.displayName = "MenuContent";
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 store = useMenuStore(externalStore);
3799
- const { value: selectedValue, setValue } = (0, import_zustand4.useStore)(store, (s) => s);
3800
- const handleClick = (e) => {
3801
- if (!disabled) {
3802
- setValue(value);
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 commonProps = {
3807
- role: "menuitem",
3808
- "aria-disabled": disabled,
3809
- ref,
3810
- onClick: handleClick,
3811
- onKeyDown: (e) => {
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 variants = {
3821
- menu: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
3822
- "li",
3823
- {
3824
- "data-variant": "menu",
3825
- className: `
3826
- w-full flex flex-col items-center justify-center gap-0.5 py-1 px-2 rounded-sm font-medium text-xs
3827
- [&>svg]:size-6 cursor-pointer hover:bg-primary-600 hover:text-text
3828
- focus:outline-none focus:border-indicator-info focus:border-2
3829
- ${selectedValue === value ? "bg-primary-50 text-primary-950" : "text-text-950"}
3830
- ${className ?? ""}
3831
- `,
3832
- ...commonProps,
3833
- children
3834
- }
3835
- ),
3836
- menu2: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
3837
- "li",
3838
- {
3839
- "data-variant": "menu2",
3840
- className: `
3841
- 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
3842
- focus:outline-none focus:border-indicator-info focus:border-2
3843
- ${selectedValue === value ? "" : "pb-4"}
3844
- `,
3845
- ...commonProps,
3846
- children: [
3847
- /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
3848
- "span",
3849
- {
3850
- className: `flex flex-row items-center gap-2 px-4 text-text-950 text-xs font-bold ${className ?? ""}`,
3851
- children
3852
- }
3853
- ),
3854
- selectedValue === value && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "h-1 w-full bg-primary-950 rounded-lg" })
3855
- ]
3856
- }
3857
- ),
3858
- breadcrumb: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
3859
- "li",
3860
- {
3861
- "data-variant": "breadcrumb",
3862
- className: `
3863
- flex flex-row gap-2 items-center w-fit p-2 rounded-lg hover:text-primary-600 cursor-pointer font-bold text-xs
3864
- focus:outline-none focus:border-indicator-info focus:border-2
3865
- ${selectedValue === value ? "text-text-950" : "text-text-600"}
3866
- ${className ?? ""}
3867
- `,
3868
- ...commonProps,
3869
- children: [
3870
- /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
3871
- "span",
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
- className: `
3874
- border-b border-text-600 hover:border-primary-600 text-inherit text-xs
3875
- ${selectedValue === value ? "border-b-0 font-bold" : "border-b-text-600"}
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
- separator && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
3881
- import_phosphor_react12.CaretRight,
3988
+ showVolumeControl && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
3989
+ "button",
3882
3990
  {
3883
- size: 16,
3884
- className: "text-text-600",
3885
- "data-testid": "separator"
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
- return variants[variant] ?? variants["menu"];
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
- MenuItem.displayName = "MenuItem";
3896
- var internalScroll = (container, direction) => {
3897
- if (!container) return;
3898
- container.scrollBy({
3899
- left: direction === "left" ? -150 : 150,
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 MenuOverflow = ({
3910
- children,
3911
- className,
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
- ...props
4177
+ disabled = false,
4178
+ layout = "default",
4179
+ className = "",
4180
+ mode = "interactive",
4181
+ selectedValue
3916
4182
  }) => {
3917
- const containerRef = (0, import_react13.useRef)(null);
3918
- const [showLeftArrow, setShowLeftArrow] = (0, import_react13.useState)(false);
3919
- const [showRightArrow, setShowRightArrow] = (0, import_react13.useState)(false);
3920
- (0, import_react13.useEffect)(() => {
3921
- const checkScroll = () => internalCheckScroll(
3922
- containerRef.current,
3923
- setShowLeftArrow,
3924
- setShowRightArrow
3925
- );
3926
- checkScroll();
3927
- const container = containerRef.current;
3928
- container?.addEventListener("scroll", checkScroll);
3929
- window.addEventListener("resize", checkScroll);
3930
- return () => {
3931
- container?.removeEventListener("scroll", checkScroll);
3932
- window.removeEventListener("resize", checkScroll);
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
- return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
3936
- "div",
3937
- {
3938
- "data-testid": "menu-overflow-wrapper",
3939
- className: `relative w-full overflow-hidden ${className ?? ""}`,
3940
- children: [
3941
- showLeftArrow && /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
3942
- "button",
3943
- {
3944
- onClick: () => internalScroll(containerRef.current, "left"),
3945
- 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",
3946
- "data-testid": "scroll-left-button",
3947
- children: [
3948
- /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_phosphor_react12.CaretLeft, { size: 16 }),
3949
- /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "sr-only", children: "Scroll left" })
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
- var injectStore3 = (children, store) => import_react13.Children.map(children, (child) => {
3981
- if (!(0, import_react13.isValidElement)(child)) return child;
3982
- const typedChild = child;
3983
- const shouldInject = typedChild.type === MenuItem;
3984
- return (0, import_react13.cloneElement)(typedChild, {
3985
- ...shouldInject ? { store } : {},
3986
- ...typedChild.props.children ? { children: injectStore3(typedChild.props.children, store) } : {}
3987
- });
3988
- });
3989
- var Menu_default = Menu;
3990
-
3991
- // src/components/Card/Card.tsx
3992
- var import_react14 = require("react");
3993
- var import_phosphor_react13 = require("phosphor-react");
3994
- var import_jsx_runtime26 = require("react/jsx-runtime");
3995
- var CARD_BASE_CLASSES = {
3996
- default: "w-full bg-background border border-border-50 rounded-xl",
3997
- compact: "w-full bg-background border border-border-50 rounded-lg",
3998
- minimal: "w-full bg-background border border-border-100 rounded-md"
3999
- };
4000
- var CARD_PADDING_CLASSES = {
4001
- none: "",
4002
- small: "p-2",
4003
- medium: "p-4",
4004
- large: "p-6"
4005
- };
4006
- var CARD_MIN_HEIGHT_CLASSES = {
4007
- none: "",
4008
- small: "min-h-16",
4009
- medium: "min-h-20",
4010
- large: "min-h-24"
4011
- };
4012
- var CARD_LAYOUT_CLASSES = {
4013
- horizontal: "flex flex-row",
4014
- vertical: "flex flex-col"
4015
- };
4016
- var CARD_CURSOR_CLASSES = {
4017
- default: "",
4018
- pointer: "cursor-pointer"
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 CardBase = (0, import_react14.forwardRef)(
4021
- ({
4022
- children,
4023
- variant = "default",
4024
- layout = "horizontal",
4025
- padding = "medium",
4026
- minHeight = "medium",
4027
- cursor = "default",
4028
- className = "",
4029
- ...props
4030
- }, ref) => {
4031
- const baseClasses = CARD_BASE_CLASSES[variant];
4032
- const paddingClasses = CARD_PADDING_CLASSES[padding];
4033
- const minHeightClasses = CARD_MIN_HEIGHT_CLASSES[minHeight];
4034
- const layoutClasses = CARD_LAYOUT_CLASSES[layout];
4035
- const cursorClasses = CARD_CURSOR_CLASSES[cursor];
4036
- const combinedClasses = [
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
- var ACTION_CARD_CLASSES = {
4048
- warning: "bg-warning-background",
4049
- success: "bg-success-300",
4050
- error: "bg-error-100",
4051
- info: "bg-info-background"
4052
- };
4053
- var ACTION_ICON_CLASSES = {
4054
- warning: "bg-warning-300 text-text",
4055
- success: "bg-yellow-300 text-text-950",
4056
- error: "bg-error-500 text-text",
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 CardActivitiesResults = (0, import_react14.forwardRef)(
4388
+ var AlertDialog = (0, import_react14.forwardRef)(
4072
4389
  ({
4073
- icon,
4074
- title,
4075
- subTitle,
4076
- header,
4077
- extended = false,
4078
- action = "success",
4390
+ trigger,
4079
4391
  description,
4080
- className,
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 actionCardClasses = ACTION_CARD_CLASSES[action];
4084
- const actionIconClasses = ACTION_ICON_CLASSES[action];
4085
- const actionSubTitleClasses = ACTION_SUBTITLE_CLASSES[action];
4086
- const actionHeaderClasses = ACTION_HEADER_CLASSES[action];
4087
- return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
4088
- "div",
4089
- {
4090
- ref,
4091
- className: `w-full flex flex-col border border-border-50 bg-background rounded-xl ${className}`,
4092
- ...props,
4093
- children: [
4094
- /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
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
- className: `
4098
- flex flex-col gap-1 items-center justify-center p-4
4099
- ${actionCardClasses}
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
- "span",
4485
+ "h2",
4104
4486
  {
4105
- className: `size-7.5 rounded-full flex items-center justify-center ${actionIconClasses}`,
4106
- children: icon
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
- Text_default,
4493
+ "p",
4111
4494
  {
4112
- size: "2xs",
4113
- weight: "medium",
4114
- className: "text-text-800 uppercase truncate",
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.jsx)("p", { className: `text-lg font-bold truncate ${actionSubTitleClasses}`, children: subTitle })
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
- extended && /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "flex flex-col items-center gap-2.5 pb-9.5 pt-2.5", children: [
4123
- /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
4124
- "p",
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
- var CardQuestions = (0, import_react14.forwardRef)(
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
- onClickButton,
4143
- valueButton,
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 isDone = state === "done";
4147
- const stateLabel = isDone ? "Realizado" : "N\xE3o Realizado";
4148
- const buttonLabel = isDone ? "Ver Quest\xE3o" : "Responder";
4149
- return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
4150
- CardBase,
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
- layout: "horizontal",
4154
- padding: "medium",
4155
- minHeight: "medium",
4156
- className: `justify-between gap-4 ${className}`,
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
- var CardProgress = (0, import_react14.forwardRef)(
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 isHorizontal = direction === "horizontal";
4207
- const contentComponent = {
4208
- horizontal: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_jsx_runtime26.Fragment, { children: [
4209
- showDates && /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "flex flex-row gap-6 items-center", children: [
4210
- initialDate && /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("span", { className: "flex flex-row gap-1 items-center text-2xs", children: [
4211
- /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("p", { className: "text-text-800 font-semibold", children: "In\xEDcio" }),
4212
- /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("p", { className: "text-text-600", children: initialDate })
4213
- ] }),
4214
- endDate && /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("span", { className: "flex flex-row gap-1 items-center text-2xs", children: [
4215
- /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("p", { className: "text-text-800 font-semibold", children: "Fim" }),
4216
- /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("p", { className: "text-text-600", children: endDate })
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
- return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
4246
- CardBase,
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
- var CardTopic = (0, import_react14.forwardRef)(
4288
- ({
4289
- header,
4290
- subHead,
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
- layout: "vertical",
4302
- padding: "small",
4303
- minHeight: "medium",
4304
- cursor: "pointer",
4305
- className: `justify-center gap-2 py-2 px-4 ${className}`,
4306
- ...props,
4307
- children: [
4308
- subHead && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "text-text-600 text-2xs flex flex-row gap-1", children: subHead.map((text, index) => /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_react14.Fragment, { children: [
4309
- /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("p", { children: text }),
4310
- index < subHead.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("p", { children: "\u2022" })
4311
- ] }, `${text} - ${index}`)) }),
4312
- /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("p", { className: "text-sm text-text-950 font-bold truncate", children: header }),
4313
- /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("span", { className: "grid grid-cols-[1fr_auto] items-center gap-2", children: [
4314
- /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
4315
- ProgressBar_default,
4316
- {
4317
- size: "small",
4318
- value: progress,
4319
- variant: progressVariant,
4320
- "data-testid": "progress-bar"
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
- var CardPerformance = (0, import_react14.forwardRef)(
4342
- ({
4343
- header,
4344
- progress,
4345
- description = "Sem dados ainda! Voc\xEA ainda n\xE3o fez um question\xE1rio neste assunto.",
4346
- actionVariant = "button",
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
- }, ref) => {
4354
- const hasProgress = progress !== void 0;
4355
- return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
4356
- CardBase,
4357
- {
4358
- ref,
4359
- layout: "horizontal",
4360
- padding: "medium",
4361
- minHeight: "none",
4362
- className: `justify-between gap-2 ${actionVariant == "caret" ? "cursor-pointer" : ""} ${className}`,
4363
- onClick: () => actionVariant == "caret" && onClickButton?.(valueButton),
4364
- ...props,
4365
- children: [
4366
- /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "w-full flex flex-col justify-between gap-2", children: [
4367
- /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "flex flex-row justify-between items-center gap-2", children: [
4368
- /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("p", { className: "text-lg font-bold text-text-950 truncate flex-1 min-w-0", children: header }),
4369
- actionVariant === "button" && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
4370
- Button_default,
4371
- {
4372
- variant: "outline",
4373
- size: "extra-small",
4374
- onClick: () => onClickButton?.(valueButton),
4375
- className: "min-w-fit flex-shrink-0",
4376
- children: "Ver Aula"
4377
- }
4378
- )
4379
- ] }),
4380
- /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "w-full", children: hasProgress ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
4381
- ProgressBar_default,
4382
- {
4383
- value: progress,
4384
- label: `${progress}% ${labelProgress}`,
4385
- variant: progressVariant
4386
- }
4387
- ) : /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("p", { className: "text-xs text-text-600 truncate", children: description }) })
4388
- ] }),
4389
- actionVariant == "caret" && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
4390
- import_phosphor_react13.CaretRight,
4391
- {
4392
- className: "size-4.5 text-text-800 cursor-pointer",
4393
- "data-testid": "caret-icon"
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
- var CardResults = (0, import_react14.forwardRef)(
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 isRow = direction == "row";
4413
- return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
4414
- CardBase,
4415
- {
4416
- ref,
4417
- layout: "horizontal",
4418
- padding: "none",
4419
- minHeight: "medium",
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
- layout: "horizontal",
4540
- padding: "medium",
4541
- minHeight: "none",
4542
- className: `border-none items-center gap-2 text-text-700 ${className}`,
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
- /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
4546
- "div",
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
- var CardForum = (0, import_react14.forwardRef)(
5147
+ SelectTrigger.displayName = "SelectTrigger";
5148
+ var SelectContent = (0, import_react16.forwardRef)(
4564
5149
  ({
4565
- title,
4566
- content,
4567
- comments,
4568
- onClickComments,
4569
- valueComments,
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
- return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
4578
- CardBase,
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
- ref,
4581
- layout: "horizontal",
4582
- padding: "medium",
4583
- minHeight: "none",
4584
- variant: "minimal",
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
- var CardAudio = (0, import_react14.forwardRef)(
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 [isPlaying, setIsPlaying] = (0, import_react14.useState)(false);
4645
- const [currentTime, setCurrentTime] = (0, import_react14.useState)(0);
4646
- const [duration, setDuration] = (0, import_react14.useState)(0);
4647
- const [volume, setVolume] = (0, import_react14.useState)(1);
4648
- const [showVolumeControl, setShowVolumeControl] = (0, import_react14.useState)(false);
4649
- const audioRef = (0, import_react14.useRef)(null);
4650
- const formatTime = (time) => {
4651
- const minutes = Math.floor(time / 60);
4652
- const seconds = Math.floor(time % 60);
4653
- return `${minutes}:${seconds.toString().padStart(2, "0")}`;
4654
- };
4655
- const handlePlayPause = () => {
4656
- if (isPlaying) {
4657
- audioRef.current?.pause();
4658
- setIsPlaying(false);
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
- return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_phosphor_react13.SpeakerHigh, {});
5199
+ props.onClick?.(e);
4710
5200
  };
4711
- return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
4712
- CardBase,
5201
+ return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
5202
+ "div",
4713
5203
  {
5204
+ role: "menuitem",
5205
+ "aria-disabled": disabled,
4714
5206
  ref,
4715
- layout: "horizontal",
4716
- padding: "medium",
4717
- minHeight: "none",
4718
- className: `w-auto h-14 items-center gap-2 ${className}`,
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, import_jsx_runtime26.jsx)(
4722
- "audio",
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
- var SIMULADO_BACKGROUND_CLASSES = {
4871
- enem: "bg-exam-1",
4872
- prova: "bg-exam-2",
4873
- simuladao: "bg-exam-3",
4874
- vestibular: "bg-exam-4"
4875
- };
4876
- var CardSimulado = (0, import_react14.forwardRef)(
4877
- ({ title, duration, info, backgroundColor, className, ...props }, ref) => {
4878
- const backgroundClass = SIMULADO_BACKGROUND_CLASSES[backgroundColor];
4879
- return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
4880
- CardBase,
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
- layout: "horizontal",
4884
- padding: "medium",
4885
- minHeight: "none",
4886
- cursor: "pointer",
4887
- className: `${backgroundClass} hover:shadow-soft-shadow-2 transition-shadow duration-200 ${className}`,
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: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "flex justify-between items-center w-full gap-4", 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 import_react15 = require("react");
4916
- var import_jsx_runtime27 = require("react/jsx-runtime");
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, import_react15.forwardRef)(
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, import_jsx_runtime27.jsx)(
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, import_jsx_runtime27.jsx)(
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, import_jsx_runtime27.jsx)(
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, import_react15.forwardRef)(
4983
- (props, ref) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Skeleton, { ref, variant: "text", ...props })
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, import_react15.forwardRef)((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Skeleton, { ref, variant: "circular", ...props }));
4986
- var SkeletonRectangle = (0, import_react15.forwardRef)((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Skeleton, { ref, variant: "rectangular", ...props }));
4987
- var SkeletonRounded = (0, import_react15.forwardRef)((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Skeleton, { ref, variant: "rounded", ...props }));
4988
- var SkeletonCard = (0, import_react15.forwardRef)(
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, import_jsx_runtime27.jsxs)(
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, import_jsx_runtime27.jsxs)("div", { className: "flex items-start space-x-3", children: [
5006
- showAvatar && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(SkeletonCircle, { width: 40, height: 40 }),
5007
- /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex-1 space-y-2", children: [
5008
- showTitle && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(SkeletonText, { width: "60%", height: 20 }),
5009
- showDescription && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(SkeletonText, { lines, spacing: "small" })
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, import_jsx_runtime27.jsxs)("div", { className: "flex justify-end space-x-2 mt-4", children: [
5013
- /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(SkeletonRectangle, { width: 80, height: 32 }),
5014
- /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(SkeletonRectangle, { width: 80, height: 32 })
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, import_react15.forwardRef)(
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, import_jsx_runtime27.jsx)("div", { ref, className: `space-y-3 ${className}`, ...props, children: Array.from({ length: items }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex items-start space-x-3 p-3", children: [
5032
- showAvatar && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(SkeletonCircle, { width: 32, height: 32 }),
5033
- /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex-1 space-y-2", children: [
5034
- showTitle && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(SkeletonText, { width: "40%", height: 16 }),
5035
- showDescription && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(SkeletonText, { lines, spacing: "small" })
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, import_react15.forwardRef)(
5640
+ var SkeletonTable = (0, import_react18.forwardRef)(
5041
5641
  ({ rows = 5, columns = 4, showHeader = true, className = "", ...props }, ref) => {
5042
- return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { ref, className: `w-full ${className}`, ...props, children: [
5043
- showHeader && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "flex space-x-2 mb-3", children: Array.from({ length: columns }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
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, import_jsx_runtime27.jsx)("div", { className: "space-y-2", children: Array.from({ length: rows }, (_, rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "flex space-x-2", children: Array.from({ length: columns }, (_2, colIndex) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
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 import_react16 = require("react");
5664
+ var import_react19 = require("react");
5065
5665
  var import_react_router_dom = require("react-router-dom");
5066
- var import_jsx_runtime28 = require("react/jsx-runtime");
5067
- var AuthContext = (0, import_react16.createContext)(void 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, import_react16.useState)({
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, import_react16.useCallback)(async () => {
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, import_react16.useCallback)(() => {
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, import_react16.useEffect)(() => {
5725
+ (0, import_react19.useEffect)(() => {
5126
5726
  checkAuth();
5127
5727
  }, [checkAuth]);
5128
- const contextValue = (0, import_react16.useMemo)(
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, import_jsx_runtime28.jsx)(AuthContext.Provider, { value: contextValue, children });
5736
+ return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(AuthContext.Provider, { value: contextValue, children });
5137
5737
  };
5138
5738
  var useAuth = () => {
5139
- const context = (0, import_react16.useContext)(AuthContext);
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, import_jsx_runtime28.jsx)("div", { className: "flex items-center justify-center min-h-screen", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "text-text-950 text-lg", children: "Carregando..." }) });
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, import_jsx_runtime28.jsx)(import_jsx_runtime28.Fragment, { children: loadingComponent || defaultLoadingComponent });
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, import_jsx_runtime28.jsx)(import_react_router_dom.Navigate, { to: redirectTo, replace: true });
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, import_jsx_runtime28.jsx)(import_react_router_dom.Navigate, { to: redirectTo, replace: true });
5760
+ return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_react_router_dom.Navigate, { to: redirectTo, replace: true });
5161
5761
  }
5162
- return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_jsx_runtime28.Fragment, { children });
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, import_jsx_runtime28.jsx)("div", { className: "flex items-center justify-center min-h-screen", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "text-text-950 text-lg", children: "Carregando..." }) });
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, import_jsx_runtime28.jsx)(import_react_router_dom.Navigate, { to: redirectTo, replace: true });
5775
+ return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_react_router_dom.Navigate, { to: redirectTo, replace: true });
5176
5776
  }
5177
- return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_jsx_runtime28.Fragment, { children });
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, import_jsx_runtime28.jsx)(ProtectedRoute, { ...options, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Component, { ...props }) });
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, import_jsx_runtime28.jsx)(import_react_router_dom.Navigate, { to: fallbackPath, state: { from: location }, replace: true });
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 import_react17 = require("react");
5205
- var import_jsx_runtime29 = require("react/jsx-runtime");
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, import_react17.forwardRef)(
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, import_jsx_runtime29.jsx)(
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, import_jsx_runtime29.jsxs)(
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, import_jsx_runtime29.jsx)("span", { className: "font-bold leading-4 tracking-[0.2px] truncate", children: responsive && tab.mobileLabel ? /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_jsx_runtime29.Fragment, { children: [
5339
- /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "sm:hidden", children: tab.mobileLabel }),
5340
- /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "hidden sm:inline", children: tab.label })
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, import_jsx_runtime29.jsx)(
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,