analytica-frontend-lib 1.0.70 → 1.0.72

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