analytica-frontend-lib 1.0.18 → 1.0.20

package/dist/index.css

@@ -22,6 +22,7 @@
       "Liberation Mono",
       "Courier New",
       monospace;
+    --color-white: #fff;
     --spacing: 0.25rem;
     --text-xs: 0.75rem;
     --text-xs--line-height: calc(1 / 0.75);
@@ -50,6 +51,7 @@
     --font-weight-bold: 700;
     --font-weight-extrabold: 800;
     --font-weight-black: 900;
+    --radius-xs: 0.125rem;
     --radius-sm: 0.25rem;
     --radius-md: 0.375rem;
     --radius-lg: 0.5rem;
@@ -58,6 +60,7 @@
     --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
     --default-font-family: var(--font-sans);
     --default-mono-font-family: var(--font-mono);
+    --color-primary: #b3b3b3;
     --color-primary-50: #999999;
     --color-primary-100: #808080;
     --color-primary-400: #525252;
@@ -79,10 +82,12 @@
     --color-background-100: #f2f1f1;
     --color-background-200: #dcdbdb;
     --color-background-500: #8e8e8e;
+    --color-background-800: #414040;
     --color-background-muted: #f7f8f7;
     --color-border-50: #f3f3f3;
     --color-border-100: #e6e6e6;
     --color-border-200: #dddcdb;
+    --color-border-300: #d3d3d3;
     --color-border-400: #a5a3a3;
     --color-border-500: #8c8d8d;
     --color-success: #e4fff4;
@@ -93,20 +98,30 @@
     --color-success-600: #2a7948;
     --color-success-700: #206f3e;
     --color-success-800: #166534;
+    --color-error: #fee9e9;
     --color-error-300: #f87171;
     --color-error-400: #ef4444;
     --color-error-500: #e63535;
     --color-error-600: #dc2626;
     --color-error-700: #b91c1c;
+    --color-error-800: #991b1b;
     --color-warning: #fff9f5;
     --color-warning-200: #fecdaa;
+    --color-warning-300: #fdad74;
     --color-warning-800: #824417;
     --color-info: #ecf8fe;
     --color-info-200: #7ccff8;
+    --color-info-300: #57c2f6;
     --color-info-800: #075a83;
     --color-indicator-primary: #373737;
     --color-indicator-info: #5399ec;
     --color-indicator-error: #b91c1c;
+    --color-exam-1: #e3f1fb;
+    --color-exam-2: #fde5fa;
+    --color-exam-3: #fff4d1;
+    --color-exam-4: #ddf5e5;
+    --color-typography-1: #b00c9e;
+    --color-typography-2: #745A07;
     --font-weight-hairline: 100;
     --text-2xs: 0.625rem;
     --text-2xs--line-height: calc(1 / 0.625);
@@ -337,6 +352,9 @@
   .top-4 {
     top: calc(var(--spacing) * 4);
   }
+  .top-\[5px\] {
+    top: 5px;
+  }
   .top-full {
     top: 100%;
   }
@@ -346,6 +364,9 @@
   .right-4 {
     right: calc(var(--spacing) * 4);
   }
+  .right-\[10px\] {
+    right: 10px;
+  }
   .bottom-4 {
     bottom: calc(var(--spacing) * 4);
   }
@@ -391,6 +412,9 @@
   .my-4 {
     margin-block: calc(var(--spacing) * 4);
   }
+  .mt-0\.5 {
+    margin-top: calc(var(--spacing) * 0.5);
+  }
   .mt-1 {
     margin-top: calc(var(--spacing) * 1);
   }
@@ -406,6 +430,9 @@
   .mr-2 {
     margin-right: calc(var(--spacing) * 2);
   }
+  .mb-0\.5 {
+    margin-bottom: calc(var(--spacing) * 0.5);
+  }
   .mb-2 {
     margin-bottom: calc(var(--spacing) * 2);
   }
@@ -424,6 +451,9 @@
   .ml-2 {
     margin-left: calc(var(--spacing) * 2);
   }
+  .block {
+    display: block;
+  }
   .flex {
     display: flex;
   }
@@ -436,6 +466,21 @@
   .table {
     display: table;
   }
+  .size-3 {
+    width: calc(var(--spacing) * 3);
+    height: calc(var(--spacing) * 3);
+  }
+  .size-3\.5 {
+    width: calc(var(--spacing) * 3.5);
+    height: calc(var(--spacing) * 3.5);
+  }
+  .size-4 {
+    width: calc(var(--spacing) * 4);
+    height: calc(var(--spacing) * 4);
+  }
+  .h-2 {
+    height: calc(var(--spacing) * 2);
+  }
   .h-4 {
     height: calc(var(--spacing) * 4);
   }
@@ -460,6 +505,9 @@
   .h-px {
     height: 1px;
   }
+  .w-2 {
+    width: calc(var(--spacing) * 2);
+  }
   .w-4 {
     width: calc(var(--spacing) * 4);
   }
@@ -475,6 +523,9 @@
   .w-10 {
     width: calc(var(--spacing) * 10);
   }
+  .w-\[384px\] {
+    width: 384px;
+  }
   .w-full {
     width: 100%;
   }
@@ -533,6 +584,9 @@
   .gap-0\.5 {
     gap: calc(var(--spacing) * 0.5);
   }
+  .gap-1 {
+    gap: calc(var(--spacing) * 1);
+  }
   .gap-1\.5 {
     gap: calc(var(--spacing) * 1.5);
   }
@@ -572,6 +626,9 @@
   .rounded-xl {
     border-radius: var(--radius-xl);
   }
+  .rounded-xs {
+    border-radius: var(--radius-xs);
+  }
   .border {
     border-style: var(--tw-border-style);
     border-width: 1px;
@@ -612,6 +669,9 @@
   .border-border-200 {
     border-color: var(--color-border-200);
   }
+  .border-border-300 {
+    border-color: var(--color-border-300);
+  }
   .border-border-400 {
     border-color: var(--color-border-400);
   }
@@ -639,6 +699,9 @@
   .border-info-200 {
     border-color: var(--color-info-200);
   }
+  .border-info-300 {
+    border-color: var(--color-info-300);
+  }
   .border-primary-600 {
     border-color: var(--color-primary-600);
   }
@@ -657,9 +720,15 @@
   .border-success-500 {
     border-color: var(--color-success-500);
   }
+  .border-transparent {
+    border-color: transparent;
+  }
   .border-warning-200 {
     border-color: var(--color-warning-200);
   }
+  .border-warning-300 {
+    border-color: var(--color-warning-300);
+  }
   .\!bg-primary-50 {
     background-color: var(--color-primary-50) !important;
   }
@@ -675,9 +744,27 @@
   .bg-border-200 {
     background-color: var(--color-border-200);
   }
+  .bg-error {
+    background-color: var(--color-error);
+  }
   .bg-error-500 {
     background-color: var(--color-error-500);
   }
+  .bg-exam-1 {
+    background-color: var(--color-exam-1);
+  }
+  .bg-exam-2 {
+    background-color: var(--color-exam-2);
+  }
+  .bg-exam-3 {
+    background-color: var(--color-exam-3);
+  }
+  .bg-exam-4 {
+    background-color: var(--color-exam-4);
+  }
+  .bg-indicator-error {
+    background-color: var(--color-indicator-error);
+  }
   .bg-info {
     background-color: var(--color-info);
   }
@@ -723,6 +810,9 @@
   .p-8 {
     padding: calc(var(--spacing) * 8);
   }
+  .px-2 {
+    padding-inline: calc(var(--spacing) * 2);
+  }
   .px-3\.5 {
     padding-inline: calc(var(--spacing) * 3.5);
   }
@@ -861,21 +951,39 @@
   .text-background-500 {
     color: var(--color-background-500);
   }
+  .text-background-800 {
+    color: var(--color-background-800);
+  }
   .text-error-500 {
     color: var(--color-error-500);
   }
   .text-error-600 {
     color: var(--color-error-600);
   }
+  .text-error-700 {
+    color: var(--color-error-700);
+  }
+  .text-error-800 {
+    color: var(--color-error-800);
+  }
+  .text-info-200 {
+    color: var(--color-info-200);
+  }
   .text-info-800 {
     color: var(--color-info-800);
   }
+  .text-primary {
+    color: var(--color-primary);
+  }
   .text-primary-950 {
     color: var(--color-primary-950);
   }
   .text-success-500 {
     color: var(--color-success-500);
   }
+  .text-success-700 {
+    color: var(--color-success-700);
+  }
   .text-success-800 {
     color: var(--color-success-800);
   }
@@ -903,6 +1011,12 @@
   .text-text-950 {
     color: var(--color-text-950);
   }
+  .text-typography-1 {
+    color: var(--color-typography-1);
+  }
+  .text-typography-2 {
+    color: var(--color-typography-2);
+  }
   .text-warning-800 {
     color: var(--color-warning-800);
   }
@@ -975,6 +1089,9 @@
   .ring-primary-950 {
     --tw-ring-color: var(--color-primary-950);
   }
+  .ring-white {
+    --tw-ring-color: var(--color-white);
+  }
   .ring-offset-0 {
     --tw-ring-offset-width: 0px;
     --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
@@ -1186,6 +1303,11 @@
       border-width: 0px;
     }
   }
+  .focus-visible\:bg-background-50 {
+    &:focus-visible {
+      background-color: var(--color-background-50);
+    }
+  }
   .focus-visible\:bg-error-500 {
     &:focus-visible {
       background-color: var(--color-error-500);
@@ -1567,10 +1689,10 @@
     --color-indicator-primary: #f7f7f7;
     --color-indicator-info: #a1c7f5;
     --color-indicator-error: #e84645;
-    --color-exame-1: #e3f1fb;
-    --color-exame-2: #fde5fa;
-    --color-exame-3: #fff4d1;
-    --color-exame-4: #ddf5e5;
+    --color-exam-1: #e3f1fb;
+    --color-exam-2: #fde5fa;
+    --color-exam-3: #fff4d1;
+    --color-exam-4: #ddf5e5;
     --color-subject-1: #b7dfff;
     --color-subject-2: #fbd1a5;
     --color-subject-3: #b2e7e8;
@@ -1587,6 +1709,8 @@
     --color-subject-14: #e7ec85;
     --color-subject-15: #a2d7e2;
     --color-subject-16: #badfc8;
+    --color-typography-1: #b00c9e;
+    --color-typography-2: #745A07;
     --shadow-hard-shadow-1: -2px 2px 8px rgba(255, 255, 255, 0.1);
     --shadow-hard-shadow-2: 0px 3px 10px rgba(255, 255, 255, 0.1);
     --shadow-hard-shadow-3: 2px 2px 8px rgba(255, 255, 255, 0.1);
@@ -1726,10 +1850,10 @@
     --color-indicator-primary: #373737;
     --color-indicator-info: #5399ec;
     --color-indicator-error: #b91c1c;
-    --color-exame-1: #e3f1fb;
-    --color-exame-2: #fde5fa;
-    --color-exame-3: #fff4d1;
-    --color-exame-4: #ddf5e5;
+    --color-exam-1: #e3f1fb;
+    --color-exam-2: #fde5fa;
+    --color-exam-3: #fff4d1;
+    --color-exam-4: #ddf5e5;
     --color-subject-1: #b7dfff;
     --color-subject-2: #fbd1a5;
     --color-subject-3: #b2e7e8;
@@ -1746,6 +1870,8 @@
     --color-subject-14: #e7ec85;
     --color-subject-15: #a2d7e2;
     --color-subject-16: #badfc8;
+    --color-typography-1: #b00c9e;
+    --color-typography-2: #745A07;
     --shadow-hard-shadow-1: -2px 2px 8px rgba(38, 38, 38, 0.2);
     --shadow-hard-shadow-2: 0px 3px 10px rgba(38, 38, 38, 0.2);
     --shadow-hard-shadow-3: 2px 2px 8px rgba(38, 38, 38, 0.2);

package/dist/index.d.mts

@@ -185,40 +185,48 @@ type TextProps<T extends ElementType = 'p'> = BaseTextProps & {
  */
 declare const Text: <T extends ElementType = "p">({ children, size, weight, color, as, className, ...props }: TextProps<T>) => react_jsx_runtime.JSX.Element;
 
-type ToastPosition$1 = 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right' | 'default';
-type ToastProps = {
-    title: string;
-    description?: string;
-    onClose: () => void;
+/**
+ * Badge component props interface
+ */
+type BadgeProps = {
+    /** Content to be displayed inside the badge */
+    children?: ReactNode;
+    /** Ícone à direita do texto */
+    iconRight?: ReactNode;
+    /** Ícone à esquerda do texto */
+    iconLeft?: ReactNode;
+    /** Size of the badge */
+    size?: 'small' | 'medium' | 'large';
     /** Visual variant of the badge */
-    variant?: 'solid' | 'outlined';
+    variant?: 'solid' | 'outlined' | 'exams' | 'resultStatus' | 'notification';
     /** Action type of the badge  */
-    action?: 'warning' | 'success' | 'info';
-    position?: ToastPosition$1;
+    action?: 'error' | 'warning' | 'success' | 'info' | 'muted' | 'exam1' | 'exam2' | 'exam3' | 'exam4' | 'positive' | 'negative';
+    /** Additional CSS classes to apply */
+    className?: string;
+    notificationActive?: boolean;
 } & HTMLAttributes<HTMLDivElement>;
-declare const Toast: ({ variant, action, className, onClose, title, description, position, ...props }: ToastProps) => react_jsx_runtime.JSX.Element;
-
-type ToastPosition = 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right' | 'default';
-type ToastData = {
-    id: string;
-    title: string;
-    description?: string;
-    variant?: 'solid' | 'outlined';
-    action?: 'warning' | 'success' | 'info';
-    position?: ToastPosition;
-};
-type ToastStore = {
-    toasts: ToastData[];
-    addToast: (toast: Omit<ToastData, 'id'>) => void;
-    removeToast: (id: string) => void;
-};
-declare const useToastStore: zustand.UseBoundStore<zustand.StoreApi<ToastStore>>;
-
-declare const Toaster: () => react_jsx_runtime.JSX.Element;
-declare const useToast: () => {
-    addToast: (toast: Omit<ToastData, "id">) => void;
-    removeToast: (id: string) => void;
-};
+/**
+ * Badge component for Analytica Ensino platforms
+ *
+ * A flexible button component with multiple variants, sizes and actions.
+ * Fully compatible with Next.js 15 and React 19.
+ *
+ * @param children - The content to display inside the badge
+ * @param size - The size variant (extra-small, small, medium, large, extra-large)
+ * @param variant - The visual style variant (solid, outline, link)
+ * @param action - The action type (primary, positive, negative)
+ * @param className - Additional CSS classes
+ * @param props - All other standard div HTML attributes
+ * @returns A styled badge element
+ *
+ * @example
+ * ```tsx
+ * <Badge variant="solid" action="info" size="medium">
+ *   Information
+ * </Badge>
+ * ```
+ */
+declare const Badge: ({ children, iconLeft, iconRight, size, variant, action, className, notificationActive, ...props }: BadgeProps) => react_jsx_runtime.JSX.Element;
 
 /**
  * CheckBox size variants
@@ -454,4 +462,39 @@ declare const IconButton: react.ForwardRefExoticComponent<{
     className?: string;
 } & ButtonHTMLAttributes<HTMLButtonElement> & react.RefAttributes<HTMLButtonElement>>;
 
-export { Button, CheckBox, type CheckBoxProps, DropdownMenu, DropdownMenuTrigger, IconButton, type IconButtonProps, IconRoundedButton, MenuContent, MenuItem, MenuLabel, MenuSeparator, NavButton, SelectionButton, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Text, Toast, type ToastData, Toaster, useToast, useToastStore };
+type ToastPosition$1 = 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right' | 'default';
+type ToastProps = {
+    title: string;
+    description?: string;
+    onClose: () => void;
+    /** Visual variant of the badge */
+    variant?: 'solid' | 'outlined';
+    /** Action type of the badge  */
+    action?: 'warning' | 'success' | 'info';
+    position?: ToastPosition$1;
+} & HTMLAttributes<HTMLDivElement>;
+declare const Toast: ({ variant, action, className, onClose, title, description, position, ...props }: ToastProps) => react_jsx_runtime.JSX.Element;
+
+type ToastPosition = 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right' | 'default';
+type ToastData = {
+    id: string;
+    title: string;
+    description?: string;
+    variant?: 'solid' | 'outlined';
+    action?: 'warning' | 'success' | 'info';
+    position?: ToastPosition;
+};
+type ToastStore = {
+    toasts: ToastData[];
+    addToast: (toast: Omit<ToastData, 'id'>) => void;
+    removeToast: (id: string) => void;
+};
+declare const useToastStore: zustand.UseBoundStore<zustand.StoreApi<ToastStore>>;
+
+declare const Toaster: () => react_jsx_runtime.JSX.Element;
+declare const useToast: () => {
+    addToast: (toast: Omit<ToastData, "id">) => void;
+    removeToast: (id: string) => void;
+};
+
+export { Badge, Button, CheckBox, type CheckBoxProps, DropdownMenu, DropdownMenuTrigger, IconButton, type IconButtonProps, IconRoundedButton, MenuContent, MenuItem, MenuLabel, MenuSeparator, NavButton, SelectionButton, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Text, Toast, type ToastData, Toaster, useToast, useToastStore };

package/dist/index.d.ts

@@ -185,40 +185,48 @@ type TextProps<T extends ElementType = 'p'> = BaseTextProps & {
  */
 declare const Text: <T extends ElementType = "p">({ children, size, weight, color, as, className, ...props }: TextProps<T>) => react_jsx_runtime.JSX.Element;
 
-type ToastPosition$1 = 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right' | 'default';
-type ToastProps = {
-    title: string;
-    description?: string;
-    onClose: () => void;
+/**
+ * Badge component props interface
+ */
+type BadgeProps = {
+    /** Content to be displayed inside the badge */
+    children?: ReactNode;
+    /** Ícone à direita do texto */
+    iconRight?: ReactNode;
+    /** Ícone à esquerda do texto */
+    iconLeft?: ReactNode;
+    /** Size of the badge */
+    size?: 'small' | 'medium' | 'large';
     /** Visual variant of the badge */
-    variant?: 'solid' | 'outlined';
+    variant?: 'solid' | 'outlined' | 'exams' | 'resultStatus' | 'notification';
     /** Action type of the badge  */
-    action?: 'warning' | 'success' | 'info';
-    position?: ToastPosition$1;
+    action?: 'error' | 'warning' | 'success' | 'info' | 'muted' | 'exam1' | 'exam2' | 'exam3' | 'exam4' | 'positive' | 'negative';
+    /** Additional CSS classes to apply */
+    className?: string;
+    notificationActive?: boolean;
 } & HTMLAttributes<HTMLDivElement>;
-declare const Toast: ({ variant, action, className, onClose, title, description, position, ...props }: ToastProps) => react_jsx_runtime.JSX.Element;
-
-type ToastPosition = 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right' | 'default';
-type ToastData = {
-    id: string;
-    title: string;
-    description?: string;
-    variant?: 'solid' | 'outlined';
-    action?: 'warning' | 'success' | 'info';
-    position?: ToastPosition;
-};
-type ToastStore = {
-    toasts: ToastData[];
-    addToast: (toast: Omit<ToastData, 'id'>) => void;
-    removeToast: (id: string) => void;
-};
-declare const useToastStore: zustand.UseBoundStore<zustand.StoreApi<ToastStore>>;
-
-declare const Toaster: () => react_jsx_runtime.JSX.Element;
-declare const useToast: () => {
-    addToast: (toast: Omit<ToastData, "id">) => void;
-    removeToast: (id: string) => void;
-};
+/**
+ * Badge component for Analytica Ensino platforms
+ *
+ * A flexible button component with multiple variants, sizes and actions.
+ * Fully compatible with Next.js 15 and React 19.
+ *
+ * @param children - The content to display inside the badge
+ * @param size - The size variant (extra-small, small, medium, large, extra-large)
+ * @param variant - The visual style variant (solid, outline, link)
+ * @param action - The action type (primary, positive, negative)
+ * @param className - Additional CSS classes
+ * @param props - All other standard div HTML attributes
+ * @returns A styled badge element
+ *
+ * @example
+ * ```tsx
+ * <Badge variant="solid" action="info" size="medium">
+ *   Information
+ * </Badge>
+ * ```
+ */
+declare const Badge: ({ children, iconLeft, iconRight, size, variant, action, className, notificationActive, ...props }: BadgeProps) => react_jsx_runtime.JSX.Element;
 
 /**
  * CheckBox size variants
@@ -454,4 +462,39 @@ declare const IconButton: react.ForwardRefExoticComponent<{
     className?: string;
 } & ButtonHTMLAttributes<HTMLButtonElement> & react.RefAttributes<HTMLButtonElement>>;
 
-export { Button, CheckBox, type CheckBoxProps, DropdownMenu, DropdownMenuTrigger, IconButton, type IconButtonProps, IconRoundedButton, MenuContent, MenuItem, MenuLabel, MenuSeparator, NavButton, SelectionButton, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Text, Toast, type ToastData, Toaster, useToast, useToastStore };
+type ToastPosition$1 = 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right' | 'default';
+type ToastProps = {
+    title: string;
+    description?: string;
+    onClose: () => void;
+    /** Visual variant of the badge */
+    variant?: 'solid' | 'outlined';
+    /** Action type of the badge  */
+    action?: 'warning' | 'success' | 'info';
+    position?: ToastPosition$1;
+} & HTMLAttributes<HTMLDivElement>;
+declare const Toast: ({ variant, action, className, onClose, title, description, position, ...props }: ToastProps) => react_jsx_runtime.JSX.Element;
+
+type ToastPosition = 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right' | 'default';
+type ToastData = {
+    id: string;
+    title: string;
+    description?: string;
+    variant?: 'solid' | 'outlined';
+    action?: 'warning' | 'success' | 'info';
+    position?: ToastPosition;
+};
+type ToastStore = {
+    toasts: ToastData[];
+    addToast: (toast: Omit<ToastData, 'id'>) => void;
+    removeToast: (id: string) => void;
+};
+declare const useToastStore: zustand.UseBoundStore<zustand.StoreApi<ToastStore>>;
+
+declare const Toaster: () => react_jsx_runtime.JSX.Element;
+declare const useToast: () => {
+    addToast: (toast: Omit<ToastData, "id">) => void;
+    removeToast: (id: string) => void;
+};
+
+export { Badge, Button, CheckBox, type CheckBoxProps, DropdownMenu, DropdownMenuTrigger, IconButton, type IconButtonProps, IconRoundedButton, MenuContent, MenuItem, MenuLabel, MenuSeparator, NavButton, SelectionButton, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Text, Toast, type ToastData, Toaster, useToast, useToastStore };