analytica-frontend-lib 1.0.46 → 1.0.48

package/dist/index.d.mts

@@ -20,74 +20,11 @@ export { default as ProgressBar } from './ProgressBar/index.mjs';
 export { default as ProgressCircle } from './ProgressCircle/index.mjs';
 export { default as Stepper } from './Stepper/index.mjs';
 export { default as Calendar } from './Calendar/index.mjs';
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { ReactNode } from 'react';
+export { default as Modal } from './Modal/index.mjs';
 export { default as DropdownMenu, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger, MenuContent, MenuLabel, ProfileMenuFooter, ProfileMenuHeader, ProfileMenuSection, ProfileMenuTrigger } from './DropdownMenu/index.mjs';
 export { default as Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from './Select/index.mjs';
 export { default as Menu, MenuItem, MenuSeparator } from './Menu/index.mjs';
 export { CardActivesResults, CardPerformance, CardProgress, CardQuestions, CardResults, CardStatus, CardTopic } from './Card/index.mjs';
+import 'react/jsx-runtime';
+import 'react';
 import 'zustand';
-
-/**
- * Modal component props interface
- */
-type ModalProps = {
-    /** Whether the modal is open */
-    isOpen: boolean;
-    /** Function to close the modal */
-    onClose: () => void;
-    /** Modal title */
-    title: string;
-    /** Modal description/content */
-    children: ReactNode;
-    /** Size of the modal */
-    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-    /** Additional CSS classes for the modal content */
-    className?: string;
-    /** Whether clicking the backdrop should close the modal */
-    closeOnBackdropClick?: boolean;
-    /** Whether pressing Escape should close the modal */
-    closeOnEscape?: boolean;
-    /** Footer content (typically buttons) */
-    footer?: ReactNode;
-    /** Hide the close button */
-    hideCloseButton?: boolean;
-};
-/**
- * Modal component for Analytica Ensino platforms
- *
- * A flexible modal component with multiple size variants and customizable behavior.
- *
- * @param isOpen - Whether the modal is currently open
- * @param onClose - Callback function called when the modal should be closed
- * @param title - The title displayed at the top of the modal
- * @param children - The main content of the modal
- * @param size - The size variant (xs, sm, md, lg, xl)
- * @param className - Additional CSS classes for the modal content
- * @param closeOnBackdropClick - Whether clicking the backdrop closes the modal (default: true)
- * @param closeOnEscape - Whether pressing Escape closes the modal (default: true)
- * @param footer - Footer content, typically action buttons
- * @param hideCloseButton - Whether to hide the X close button (default: false)
- * @returns A modal overlay with content
- *
- * @example
- * ```tsx
- * <Modal
- *   isOpen={isModalOpen}
- *   onClose={() => setIsModalOpen(false)}
- *   title="Invite your team"
- *   size="md"
- *   footer={
- *     <div className="flex gap-3">
- *       <Button variant="outline" onClick={() => setIsModalOpen(false)}>Cancel</Button>
- *       <Button variant="solid" onClick={handleExplore}>Explore</Button>
- *     </div>
- *   }
- * >
- *   Elevate user interactions with our versatile modals.
- * </Modal>
- * ```
- */
-declare const Modal: ({ isOpen, onClose, title, children, size, className, closeOnBackdropClick, closeOnEscape, footer, hideCloseButton, }: ModalProps) => react_jsx_runtime.JSX.Element | null;
-
-export { Modal };

package/dist/index.d.ts

@@ -20,74 +20,11 @@ export { default as ProgressBar } from './ProgressBar/index.js';
 export { default as ProgressCircle } from './ProgressCircle/index.js';
 export { default as Stepper } from './Stepper/index.js';
 export { default as Calendar } from './Calendar/index.js';
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { ReactNode } from 'react';
+export { default as Modal } from './Modal/index.js';
 export { default as DropdownMenu, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger, MenuContent, MenuLabel, ProfileMenuFooter, ProfileMenuHeader, ProfileMenuSection, ProfileMenuTrigger } from './DropdownMenu/index.js';
 export { default as Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from './Select/index.js';
 export { default as Menu, MenuItem, MenuSeparator } from './Menu/index.js';
 export { CardActivesResults, CardPerformance, CardProgress, CardQuestions, CardResults, CardStatus, CardTopic } from './Card/index.js';
+import 'react/jsx-runtime';
+import 'react';
 import 'zustand';
-
-/**
- * Modal component props interface
- */
-type ModalProps = {
-    /** Whether the modal is open */
-    isOpen: boolean;
-    /** Function to close the modal */
-    onClose: () => void;
-    /** Modal title */
-    title: string;
-    /** Modal description/content */
-    children: ReactNode;
-    /** Size of the modal */
-    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-    /** Additional CSS classes for the modal content */
-    className?: string;
-    /** Whether clicking the backdrop should close the modal */
-    closeOnBackdropClick?: boolean;
-    /** Whether pressing Escape should close the modal */
-    closeOnEscape?: boolean;
-    /** Footer content (typically buttons) */
-    footer?: ReactNode;
-    /** Hide the close button */
-    hideCloseButton?: boolean;
-};
-/**
- * Modal component for Analytica Ensino platforms
- *
- * A flexible modal component with multiple size variants and customizable behavior.
- *
- * @param isOpen - Whether the modal is currently open
- * @param onClose - Callback function called when the modal should be closed
- * @param title - The title displayed at the top of the modal
- * @param children - The main content of the modal
- * @param size - The size variant (xs, sm, md, lg, xl)
- * @param className - Additional CSS classes for the modal content
- * @param closeOnBackdropClick - Whether clicking the backdrop closes the modal (default: true)
- * @param closeOnEscape - Whether pressing Escape closes the modal (default: true)
- * @param footer - Footer content, typically action buttons
- * @param hideCloseButton - Whether to hide the X close button (default: false)
- * @returns A modal overlay with content
- *
- * @example
- * ```tsx
- * <Modal
- *   isOpen={isModalOpen}
- *   onClose={() => setIsModalOpen(false)}
- *   title="Invite your team"
- *   size="md"
- *   footer={
- *     <div className="flex gap-3">
- *       <Button variant="outline" onClick={() => setIsModalOpen(false)}>Cancel</Button>
- *       <Button variant="solid" onClick={handleExplore}>Explore</Button>
- *     </div>
- *   }
- * >
- *   Elevate user interactions with our versatile modals.
- * </Modal>
- * ```
- */
-declare const Modal: ({ isOpen, onClose, title, children, size, className, closeOnBackdropClick, closeOnEscape, footer, hideCloseButton, }: ModalProps) => react_jsx_runtime.JSX.Element | null;
-
-export { Modal };

package/dist/index.js

@@ -1035,29 +1035,21 @@ var import_react7 = require("react");
 var import_jsx_runtime12 = require("react/jsx-runtime");
 var SIZE_CLASSES5 = {
   small: {
-    container: "w-72",
-    // 288px width
     textarea: "h-24 text-sm",
     // 96px height, 14px font
     textSize: "sm"
   },
   medium: {
-    container: "w-72",
-    // 288px width
     textarea: "h-24 text-base",
     // 96px height, 16px font
     textSize: "md"
   },
   large: {
-    container: "w-72",
-    // 288px width
     textarea: "h-24 text-lg",
     // 96px height, 18px font
     textSize: "lg"
   },
   extraLarge: {
-    container: "w-72",
-    // 288px width
     textarea: "h-24 text-xl",
     // 96px height, 20px font
     textSize: "xl"
@@ -1127,7 +1119,7 @@ var TextArea = (0, import_react7.forwardRef)(
     const sizeClasses = SIZE_CLASSES5[size];
     const stateClasses = STATE_CLASSES3[currentState];
     const textareaClasses = `${BASE_TEXTAREA_CLASSES} ${sizeClasses.textarea} ${stateClasses.base} ${stateClasses.hover} ${stateClasses.focus} ${className}`;
-    return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: `flex flex-col ${sizeClasses.container}`, children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: `flex flex-col`, children: [
       label && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
         Text_default,
         {
@@ -2950,40 +2942,33 @@ var Modal = ({
   if (!isOpen) return null;
   const sizeClasses = SIZE_CLASSES10[size];
   const baseClasses = "bg-background rounded-3xl shadow-hard-shadow-2 border border-border-100 w-full mx-4";
-  const modalClasses = `${baseClasses} ${sizeClasses} ${className}`;
+  const dialogResetClasses = "p-0 m-0 border-none outline-none max-h-none static";
+  const modalClasses = `${baseClasses} ${sizeClasses} ${dialogResetClasses} ${className}`;
   return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
     "div",
     {
       className: "fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-xs",
       onClick: handleBackdropClick,
       onKeyDown: handleBackdropKeyDown,
-      role: "none",
-      "aria-hidden": "true",
-      children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
-        "div",
-        {
-          className: modalClasses,
-          role: "dialog",
-          "aria-modal": "true",
-          "aria-labelledby": "modal-title",
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex items-center justify-between px-6 py-6", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("h2", { id: "modal-title", className: "text-lg font-semibold text-text-950", children: title }),
-              !hideCloseButton && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
-                "button",
-                {
-                  onClick: onClose,
-                  className: "p-1 text-text-500 hover:text-text-700 hover:bg-background-50 rounded-md transition-colors focus:outline-none focus:ring-2 focus:ring-indicator-info focus:ring-offset-2",
-                  "aria-label": "Fechar modal",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_phosphor_react8.X, { size: 18 })
-                }
-              )
-            ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "px-6 pb-6", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "text-text-500 font-normal text-sm leading-6", children }) }),
-            footer && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "flex justify-end gap-3 px-6 pb-6", children: footer })
-          ]
-        }
-      )
+      role: "button",
+      tabIndex: closeOnBackdropClick ? 0 : -1,
+      "aria-label": "Fechar modal clicando no fundo",
+      children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("dialog", { className: modalClasses, "aria-labelledby": "modal-title", open: true, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex items-center justify-between px-6 py-6", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("h2", { id: "modal-title", className: "text-lg font-semibold text-text-950", children: title }),
+          !hideCloseButton && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+            "button",
+            {
+              onClick: onClose,
+              className: "p-1 text-text-500 hover:text-text-700 hover:bg-background-50 rounded-md transition-colors focus:outline-none focus:ring-2 focus:ring-indicator-info focus:ring-offset-2",
+              "aria-label": "Fechar modal",
+              children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_phosphor_react8.X, { size: 18 })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "px-6 pb-6", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "text-text-500 font-normal text-sm leading-6", children }) }),
+        footer && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "flex justify-end gap-3 px-6 pb-6", children: footer })
+      ] })
     }
   );
 };
@@ -3368,9 +3353,9 @@ var import_react12 = require("react");
 var import_phosphor_react10 = require("phosphor-react");
 var import_jsx_runtime24 = require("react/jsx-runtime");
 var VARIANT_CLASSES4 = {
-  outlined: "border-2 rounded-sm focus:border-primary-950",
-  underlined: "border-b-2 focus:border-primary-950",
-  rounded: "border-2 rounded-4xl focus:border-primary-950"
+  outlined: "border rounded-sm focus:border-primary-950",
+  underlined: "border-b focus:border-primary-950",
+  rounded: "border rounded-4xl focus:border-primary-950"
 };
 var SIZE_CLASSES11 = {
   small: "text-sm",
@@ -3544,7 +3529,7 @@ var SelectTrigger = (0, import_react12.forwardRef)(
         ref,
         className: `
         flex h-9 min-w-[220px] w-full items-center justify-between border-border-300 px-3 py-2
-        ${invalid && "border-indicator-error text-text-600"}
+        ${invalid && `${variant == "underlined" ? "border-b-2" : "border-2"} border-indicator-error text-text-600`}
         ${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"}
         ${!invalid && !disabled ? "text-text-700" : ""}
         ${variantClasses}
@@ -3732,6 +3717,9 @@ var MenuItem = (0, import_react13.forwardRef)(
         if (["Enter", " "].includes(e.key)) handleClick(e);
       },
       tabIndex: disabled ? -1 : 0,
+      onMouseDown: (e) => {
+        e.preventDefault();
+      },
       ...props
     };
     const variants = {
@@ -3940,7 +3928,14 @@ var CardQuestions = (0, import_react14.forwardRef)(
               ] })
             ] })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Button_default, { size: "extra-small", onClick: () => onClickButton?.(valueButton), children: buttonLabel })
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+            Button_default,
+            {
+              size: "extra-small",
+              onClick: () => onClickButton?.(valueButton),
+              children: buttonLabel
+            }
+          ) })
         ]
       }
     );
@@ -4068,7 +4063,7 @@ var CardPerformance = (0, import_react14.forwardRef)(
       "div",
       {
         ref,
-        className: `w-full h-20.5 flex flex-row justify-between p-4 gap-2 bg-background border border-border-50 ${className}`,
+        className: `w-full min-h-20.5 flex flex-row justify-between p-4 gap-2 bg-background border border-border-50 ${className}`,
         ...props,
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "w-full flex flex-col justify-between gap-2", children: [
@@ -4089,7 +4084,7 @@ var CardPerformance = (0, import_react14.forwardRef)(
           !hasProgress && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
             import_phosphor_react12.CaretRight,
             {
-              className: "size-4.5",
+              className: "size-4.5 text-text-800",
               "data-testid": "caret-icon",
               onClick: () => onClickButton?.(valueButton)
             }
@@ -4173,7 +4168,7 @@ var CardResults = (0, import_react14.forwardRef)(
               ]
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_phosphor_react12.CaretRight, { className: "min-w-6 min-h-6" })
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_phosphor_react12.CaretRight, { className: "min-w-6 min-h-6 text-text-800" })
         ]
       }
     );
@@ -4215,7 +4210,114 @@ var CardStatus = (0, import_react14.forwardRef)(
               ]
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_phosphor_react12.CaretRight, { className: "min-w-6 min-h-6" })
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_phosphor_react12.CaretRight, { className: "min-w-6 min-h-6 text-text-800" })
+        ]
+      }
+    );
+  }
+);
+var CardSettings = (0, import_react14.forwardRef)(
+  ({ header, className, icon, ...props }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
+      "div",
+      {
+        ref,
+        className: `w-full p-2 flex flex-row items-center gap-2 text-text-700 bg-background rounded-xl ${className}`,
+        ...props,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "[&>svg]:size-6", children: icon }),
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("p", { className: "w-full text-md", children: header }),
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_phosphor_react12.CaretRight, { size: 24 })
+        ]
+      }
+    );
+  }
+);
+var CardSupport = (0, import_react14.forwardRef)(
+  ({ header, className, direction = "col", children, ...props }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
+      "div",
+      {
+        ref,
+        className: `w-full p-4 flex flex-row items-center gap-2 text-text-700  bg-background rounded-xl ${className}`,
+        ...props,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
+            "div",
+            {
+              className: `
+              w-full flex ${direction == "col" ? "flex-col" : "flex-row items-center"}  gap-2
+          `,
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "w-full", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("p", { className: "text-xs text-text-950 font-bold", children: header }) }),
+                /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "flex flex-row gap-1", children })
+              ]
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_phosphor_react12.CaretRight, { className: "text-text-800", size: 24 })
+        ]
+      }
+    );
+  }
+);
+var CardForum = (0, import_react14.forwardRef)(
+  ({
+    title,
+    content,
+    comments,
+    onClickComments,
+    valueComments,
+    onClickProfile,
+    valueProfile,
+    className = "",
+    date,
+    hour,
+    ...props
+  }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
+      "div",
+      {
+        ref,
+        className: `w-auto h-auto p-4 rounded-lg flex flex-row gap-3 border border-border-100 bg-background ${className}`,
+        ...props,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+            "button",
+            {
+              type: "button",
+              "aria-label": "Ver perfil",
+              onClick: () => onClickProfile?.(valueProfile),
+              className: "min-w-8 h-8 rounded-full bg-background-950"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "flex flex-col gap-2 flex-1", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "flex flex-row gap-1 items-center flex-wrap", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("p", { className: "text-xs font-semibold text-primary-700 truncate", children: title }),
+              /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("p", { className: "text-xs text-text-600", children: [
+                "\u2022 ",
+                date,
+                " \u2022 ",
+                hour
+              ] })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("p", { className: "text-text-950 text-sm line-clamp-2", children: content }),
+            /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
+              "button",
+              {
+                type: "button",
+                "aria-label": "Ver coment\xE1rios",
+                onClick: () => onClickComments?.(valueComments),
+                className: "text-text-600 flex flex-row gap-2 items-center",
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_phosphor_react12.ChatCircleText, { "aria-hidden": "true", size: 16 }),
+                  /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("p", { className: "text-xs", children: [
+                    comments,
+                    " respostas"
+                  ] })
+                ]
+              }
+            )
+          ] })
         ]
       }
     );