analytica-frontend-lib 1.0.58 → 1.0.60

package/dist/Card/index.d.mts

@@ -1,6 +1,15 @@
 import * as react from 'react';
 import { HTMLAttributes, ReactNode } from 'react';
 
+interface CardBaseProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+    variant?: 'default' | 'compact' | 'minimal';
+    layout?: 'horizontal' | 'vertical';
+    padding?: 'none' | 'small' | 'medium' | 'large';
+    minHeight?: 'none' | 'small' | 'medium' | 'large';
+    cursor?: 'default' | 'pointer';
+}
+declare const CardBase: react.ForwardRefExoticComponent<CardBaseProps & react.RefAttributes<HTMLDivElement>>;
 interface CardActivesResultsProps extends HTMLAttributes<HTMLDivElement> {
     icon: ReactNode;
     title: string;
@@ -100,4 +109,4 @@ interface CardAudioProps extends HTMLAttributes<HTMLDivElement> {
 }
 declare const CardAudio: react.ForwardRefExoticComponent<CardAudioProps & react.RefAttributes<HTMLDivElement>>;
 
-export { CardActivesResults, CardAudio, CardForum, CardPerformance, CardProgress, CardQuestions, CardResults, CardSettings, CardStatus, CardSupport, CardTopic };
+export { CardActivesResults, CardAudio, CardBase, CardForum, CardPerformance, CardProgress, CardQuestions, CardResults, CardSettings, CardStatus, CardSupport, CardTopic };

package/dist/Card/index.d.ts

@@ -1,6 +1,15 @@
 import * as react from 'react';
 import { HTMLAttributes, ReactNode } from 'react';
 
+interface CardBaseProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+    variant?: 'default' | 'compact' | 'minimal';
+    layout?: 'horizontal' | 'vertical';
+    padding?: 'none' | 'small' | 'medium' | 'large';
+    minHeight?: 'none' | 'small' | 'medium' | 'large';
+    cursor?: 'default' | 'pointer';
+}
+declare const CardBase: react.ForwardRefExoticComponent<CardBaseProps & react.RefAttributes<HTMLDivElement>>;
 interface CardActivesResultsProps extends HTMLAttributes<HTMLDivElement> {
     icon: ReactNode;
     title: string;
@@ -100,4 +109,4 @@ interface CardAudioProps extends HTMLAttributes<HTMLDivElement> {
 }
 declare const CardAudio: react.ForwardRefExoticComponent<CardAudioProps & react.RefAttributes<HTMLDivElement>>;
 
-export { CardActivesResults, CardAudio, CardForum, CardPerformance, CardProgress, CardQuestions, CardResults, CardSettings, CardStatus, CardSupport, CardTopic };
+export { CardActivesResults, CardAudio, CardBase, CardForum, CardPerformance, CardProgress, CardQuestions, CardResults, CardSettings, CardStatus, CardSupport, CardTopic };

package/dist/Card/index.js

@@ -22,6 +22,7 @@ var Card_exports = {};
 __export(Card_exports, {
   CardActivesResults: () => CardActivesResults,
   CardAudio: () => CardAudio,
+  CardBase: () => CardBase,
   CardForum: () => CardForum,
   CardPerformance: () => CardPerformance,
   CardProgress: () => CardProgress,
@@ -673,6 +674,58 @@ var ProgressBar_default = ProgressBar;
 // src/components/Card/Card.tsx
 var import_phosphor_react2 = require("phosphor-react");
 var import_jsx_runtime5 = require("react/jsx-runtime");
+var CARD_BASE_CLASSES = {
+  default: "w-full bg-background border border-border-50 rounded-xl",
+  compact: "w-full bg-background border border-border-50 rounded-lg",
+  minimal: "w-full bg-background border border-border-100 rounded-md"
+};
+var CARD_PADDING_CLASSES = {
+  none: "",
+  small: "p-2",
+  medium: "p-4",
+  large: "p-6"
+};
+var CARD_MIN_HEIGHT_CLASSES = {
+  none: "",
+  small: "min-h-16",
+  medium: "min-h-20",
+  large: "min-h-24"
+};
+var CARD_LAYOUT_CLASSES = {
+  horizontal: "flex flex-row",
+  vertical: "flex flex-col"
+};
+var CARD_CURSOR_CLASSES = {
+  default: "",
+  pointer: "cursor-pointer"
+};
+var CardBase = (0, import_react.forwardRef)(
+  ({
+    children,
+    variant = "default",
+    layout = "horizontal",
+    padding = "medium",
+    minHeight = "medium",
+    cursor = "default",
+    className = "",
+    ...props
+  }, ref) => {
+    const baseClasses = CARD_BASE_CLASSES[variant];
+    const paddingClasses = CARD_PADDING_CLASSES[padding];
+    const minHeightClasses = CARD_MIN_HEIGHT_CLASSES[minHeight];
+    const layoutClasses = CARD_LAYOUT_CLASSES[layout];
+    const cursorClasses = CARD_CURSOR_CLASSES[cursor];
+    const combinedClasses = [
+      baseClasses,
+      paddingClasses,
+      minHeightClasses,
+      layoutClasses,
+      cursorClasses,
+      className
+    ].filter(Boolean).join(" ");
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { ref, className: combinedClasses, ...props, children });
+  }
+);
 var ACTION_CARD_CLASSES = {
   warning: "bg-warning-background",
   success: "bg-success-300",
@@ -735,7 +788,7 @@ var CardActivesResults = (0, import_react.forwardRef)(
                     children: icon
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "text-text-800 font-medium uppercase text-2xs", children: title }),
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Text_default, { size: "2xs", weight: "medium", className: "text-text-800 uppercase", children: title }),
                 /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: `text-lg font-bold ${actionSubTitleClasses}`, children: subTitle })
               ]
             }
@@ -768,13 +821,13 @@ var CardQuestions = (0, import_react.forwardRef)(
     const stateLabel = isDone ? "Realizado" : "N\xE3o Realizado";
     const buttonLabel = isDone ? "Ver Quest\xE3o" : "Responder";
     return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
-      "div",
+      CardBase,
       {
         ref,
-        className: `
-          w-full flex flex-row justify-between rounded-xl p-4 gap-4 bg-background border border-border-50
-          ${className}
-        `,
+        layout: "horizontal",
+        padding: "medium",
+        minHeight: "medium",
+        className: `justify-between gap-4 ${className}`,
         ...props,
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("section", { className: "flex flex-col gap-1", children: [
@@ -834,35 +887,48 @@ var CardProgress = (0, import_react.forwardRef)(
             /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "text-text-600", children: endDate })
           ] })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-          ProgressBar_default,
-          {
-            size: "medium",
-            showPercentage: true,
-            value: progress,
-            "data-testid": "progress-bar"
-          }
-        )
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "grid grid-cols-[1fr_auto] items-center gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            ProgressBar_default,
+            {
+              size: "small",
+              value: progress,
+              "data-testid": "progress-bar"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+            Text_default,
+            {
+              size: "xs",
+              weight: "medium",
+              className: `text-text-950 leading-none tracking-normal text-center flex-none`,
+              children: [
+                Math.round(progress),
+                "%"
+              ]
+            }
+          )
+        ] })
       ] }),
       vertical: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "text-sm text-text-800", children: subhead })
     };
     return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
-      "div",
+      CardBase,
       {
         ref,
-        className: `
-          w-full flex border border-border-50 bg-background rounded-xl cursor-pointer
-          ${isHorizontal ? "flex-row h-20" : "flex-col"}
-          ${className}
-        `,
+        layout: isHorizontal ? "horizontal" : "vertical",
+        padding: "none",
+        minHeight: "medium",
+        cursor: "pointer",
+        className: `${isHorizontal ? "h-20" : ""} ${className}`,
         ...props,
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
             "div",
             {
               className: `
-            flex justify-center items-center [&>svg]:size-8 text-text-950
-            ${isHorizontal ? "w-20 h-full rounded-l-xl" : "min-h-[50px] w-full rounded-t-xl"}
+            flex justify-center items-center [&>svg]:size-6 text-text-950
+            ${isHorizontal ? "min-w-[80px] min-h-[80px] rounded-l-xl" : "min-h-[50px] w-full rounded-t-xl"}
           `,
               style: {
                 backgroundColor: color
@@ -878,7 +944,7 @@ var CardProgress = (0, import_react.forwardRef)(
             ${!isHorizontal && "gap-4"}
           `,
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "text-xs font-bold text-text-950", children: header }),
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Text_default, { size: "sm", weight: "bold", className: "text-text-950", children: header }),
                 contentComponent[direction]
               ]
             }
@@ -898,18 +964,43 @@ var CardTopic = (0, import_react.forwardRef)(
     ...props
   }, ref) => {
     return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
-      "div",
+      CardBase,
       {
         ref,
-        className: `cursor-pointer w-full py-2 px-4 flex flex-col justify-center gap-2 bg-background border border-border-50 rounded-xl min-h-20 ${className}`,
+        layout: "vertical",
+        padding: "small",
+        minHeight: "medium",
+        cursor: "pointer",
+        className: `justify-center gap-2  py-2 px-4 ${className}`,
         ...props,
         children: [
           subHead && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "text-text-600 text-2xs flex flex-row gap-1", children: subHead.map((text, index) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_react.Fragment, { children: [
             /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { children: text }),
             index < subHead.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { children: "\u2022" })
           ] }, `${text} - ${index}`)) }),
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "text-xs text-text-950 font-bold", children: header }),
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ProgressBar_default, { showPercentage, value: progress })
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "text-sm text-text-950 font-bold", children: header }),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "grid grid-cols-[1fr_auto] items-center gap-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              ProgressBar_default,
+              {
+                size: "small",
+                value: progress,
+                "data-testid": "progress-bar"
+              }
+            ),
+            showPercentage && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+              Text_default,
+              {
+                size: "xs",
+                weight: "medium",
+                className: `text-text-950 leading-none tracking-normal text-center flex-none`,
+                children: [
+                  Math.round(progress),
+                  "%"
+                ]
+              }
+            )
+          ] })
         ]
       }
     );
@@ -927,15 +1018,18 @@ var CardPerformance = (0, import_react.forwardRef)(
   }, ref) => {
     const hasProgress = progress !== void 0;
     return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
-      "div",
+      CardBase,
       {
         ref,
-        className: `w-full min-h-20.5 flex flex-row justify-between p-4 gap-2 bg-background border border-border-50 ${className}`,
+        layout: "horizontal",
+        padding: "medium",
+        minHeight: "large",
+        className: `justify-between gap-2 ${className}`,
         ...props,
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "w-full flex flex-col justify-between gap-2", children: [
             /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex flex-row justify-between items-center", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "text-md font-bold text-text-950", children: header }),
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "text-lg font-bold text-text-950", children: header }),
               hasProgress && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                 Button_default,
                 {
@@ -974,13 +1068,13 @@ var CardResults = (0, import_react.forwardRef)(
   }, ref) => {
     const isRow = direction == "row";
     return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
-      "div",
+      CardBase,
       {
         ref,
-        className: `
-          w-full flex border border-border-50 bg-background rounded-xl min-h-20 flex-row items-center pr-4
-          ${className}
-        `,
+        layout: "horizontal",
+        padding: "none",
+        minHeight: "medium",
+        className: `items-center pr-4 ${className}`,
         ...props,
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
@@ -1003,7 +1097,7 @@ var CardResults = (0, import_react.forwardRef)(
             ${isRow ? "flex-row items-center" : "flex-col"}
           `,
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "text-xs font-bold text-text-950", children: header }),
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "text-sm font-bold text-text-950", children: header }),
                 /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "flex flex-row gap-1 items-center", children: [
                   /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
                     Badge_default,
@@ -1044,13 +1138,13 @@ var CardResults = (0, import_react.forwardRef)(
 var CardStatus = (0, import_react.forwardRef)(
   ({ header, className, status, ...props }, ref) => {
     return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
-      "div",
+      CardBase,
       {
         ref,
-        className: `
-          w-full flex border border-border-50 bg-background rounded-xl min-h-20 flex-row items-center pr-4
-          ${className}
-        `,
+        layout: "horizontal",
+        padding: "none",
+        minHeight: "medium",
+        className: `items-center pr-4 ${className}`,
         ...props,
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
@@ -1060,7 +1154,7 @@ var CardStatus = (0, import_react.forwardRef)(
             p-4 flex justify-between w-full h-full flex-row items-center
           `,
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "text-xs font-bold text-text-950", children: header }),
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "text-sm font-bold text-text-950", children: header }),
                 status && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "flex flex-row gap-1 items-center", children: [
                   /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                     Badge_default,
@@ -1086,14 +1180,17 @@ var CardStatus = (0, import_react.forwardRef)(
 var CardSettings = (0, import_react.forwardRef)(
   ({ header, className, icon, ...props }, ref) => {
     return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
-      "div",
+      CardBase,
       {
         ref,
-        className: `w-full p-2 flex flex-row items-center gap-2 text-text-700 bg-background rounded-xl ${className}`,
+        layout: "horizontal",
+        padding: "small",
+        minHeight: "none",
+        className: `border-none items-center gap-2 text-text-700 ${className}`,
         ...props,
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "[&>svg]:size-6", children: icon }),
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "w-full text-md", children: header }),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "w-full text-sm", children: header }),
           /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_phosphor_react2.CaretRight, { size: 24, className: "cursor-pointer" })
         ]
       }
@@ -1103,10 +1200,13 @@ var CardSettings = (0, import_react.forwardRef)(
 var CardSupport = (0, import_react.forwardRef)(
   ({ header, className, direction = "col", children, ...props }, ref) => {
     return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
-      "div",
+      CardBase,
       {
         ref,
-        className: `w-full p-4 flex flex-row items-center gap-2 text-text-700  bg-background rounded-xl ${className}`,
+        layout: "horizontal",
+        padding: "medium",
+        minHeight: "none",
+        className: `border-none items-center gap-2 text-text-700 ${className}`,
         ...props,
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
@@ -1116,7 +1216,7 @@ var CardSupport = (0, import_react.forwardRef)(
               w-full flex ${direction == "col" ? "flex-col" : "flex-row items-center"}  gap-2
           `,
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "w-full", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "text-xs text-text-950 font-bold", children: header }) }),
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "w-full", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "text-sm text-text-950 font-bold", children: header }) }),
                 /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "flex flex-row gap-1", children })
               ]
             }
@@ -1142,10 +1242,14 @@ var CardForum = (0, import_react.forwardRef)(
     ...props
   }, ref) => {
     return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
-      "div",
+      CardBase,
       {
         ref,
-        className: `w-auto h-auto p-4 rounded-lg flex flex-row gap-3 border border-border-100 bg-background ${className}`,
+        layout: "horizontal",
+        padding: "medium",
+        minHeight: "none",
+        variant: "minimal",
+        className: `w-auto h-auto gap-3 ${className}`,
         ...props,
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
@@ -1272,10 +1376,13 @@ var CardAudio = (0, import_react.forwardRef)(
       return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_phosphor_react2.SpeakerHigh, {});
     };
     return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
-      "div",
+      CardBase,
       {
         ref,
-        className: `w-auto h-14 p-4 flex flex-row bg-background items-center gap-2 ${className}`,
+        layout: "horizontal",
+        padding: "medium",
+        minHeight: "none",
+        className: `w-auto h-14 items-center gap-2 border-none ${className}`,
         ...props,
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
@@ -1431,6 +1538,7 @@ var CardAudio = (0, import_react.forwardRef)(
 0 && (module.exports = {
   CardActivesResults,
   CardAudio,
+  CardBase,
   CardForum,
   CardPerformance,
   CardProgress,