analytica-frontend-lib 1.0.16 → 1.0.18

package/dist/index.css

@@ -68,6 +68,7 @@
     --color-primary-950: #080808;
     --color-text: #fefeff;
     --color-text-400: #a3a3a3;
+    --color-text-500: #8c8c8c;
     --color-text-600: #737373;
     --color-text-700: #525252;
     --color-text-800: #404040;
@@ -77,20 +78,32 @@
     --color-background-50: #f6f6f6;
     --color-background-100: #f2f1f1;
     --color-background-200: #dcdbdb;
+    --color-background-500: #8e8e8e;
     --color-background-muted: #f7f8f7;
     --color-border-50: #f3f3f3;
     --color-border-100: #e6e6e6;
     --color-border-200: #dddcdb;
+    --color-border-400: #a5a3a3;
+    --color-border-500: #8c8d8d;
+    --color-success: #e4fff4;
+    --color-success-200: #84d3a2;
     --color-success-300: #66b584;
     --color-success-400: #489766;
     --color-success-500: #348352;
     --color-success-600: #2a7948;
     --color-success-700: #206f3e;
+    --color-success-800: #166534;
     --color-error-300: #f87171;
     --color-error-400: #ef4444;
     --color-error-500: #e63535;
     --color-error-600: #dc2626;
     --color-error-700: #b91c1c;
+    --color-warning: #fff9f5;
+    --color-warning-200: #fecdaa;
+    --color-warning-800: #824417;
+    --color-info: #ecf8fe;
+    --color-info-200: #7ccff8;
+    --color-info-800: #075a83;
     --color-indicator-primary: #373737;
     --color-indicator-info: #5399ec;
     --color-indicator-error: #b91c1c;
@@ -321,12 +334,21 @@
   .relative {
     position: relative;
   }
+  .top-4 {
+    top: calc(var(--spacing) * 4);
+  }
   .top-full {
     top: 100%;
   }
   .right-0 {
     right: calc(var(--spacing) * 0);
   }
+  .right-4 {
+    right: calc(var(--spacing) * 4);
+  }
+  .bottom-4 {
+    bottom: calc(var(--spacing) * 4);
+  }
   .bottom-full {
     bottom: 100%;
   }
@@ -336,6 +358,9 @@
   .left-1\/2 {
     left: calc(1/2 * 100%);
   }
+  .left-4 {
+    left: calc(var(--spacing) * 4);
+  }
   .z-50 {
     z-index: 50;
   }
@@ -366,6 +391,12 @@
   .my-4 {
     margin-block: calc(var(--spacing) * 4);
   }
+  .mt-1 {
+    margin-top: calc(var(--spacing) * 1);
+  }
+  .mt-1\.5 {
+    margin-top: calc(var(--spacing) * 1.5);
+  }
   .mt-2 {
     margin-top: calc(var(--spacing) * 2);
   }
@@ -384,18 +415,30 @@
   .mb-4 {
     margin-bottom: calc(var(--spacing) * 4);
   }
+  .mb-6 {
+    margin-bottom: calc(var(--spacing) * 6);
+  }
+  .mb-8 {
+    margin-bottom: calc(var(--spacing) * 8);
+  }
   .ml-2 {
     margin-left: calc(var(--spacing) * 2);
   }
   .flex {
     display: flex;
   }
+  .grid {
+    display: grid;
+  }
   .inline-flex {
     display: inline-flex;
   }
   .table {
     display: table;
   }
+  .h-4 {
+    height: calc(var(--spacing) * 4);
+  }
   .h-5 {
     height: calc(var(--spacing) * 5);
   }
@@ -408,9 +451,18 @@
   .h-10 {
     height: calc(var(--spacing) * 10);
   }
+  .h-\[21px\] {
+    height: 21px;
+  }
+  .h-\[27px\] {
+    height: 27px;
+  }
   .h-px {
     height: 1px;
   }
+  .w-4 {
+    width: calc(var(--spacing) * 4);
+  }
   .w-5 {
     width: calc(var(--spacing) * 5);
   }
@@ -426,6 +478,9 @@
   .w-full {
     width: 100%;
   }
+  .max-w-\[390px\] {
+    max-width: 390px;
+  }
   .min-w-\[210px\] {
     min-width: 210px;
   }
@@ -445,6 +500,9 @@
   .cursor-pointer {
     cursor: pointer;
   }
+  .grid-cols-2 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
   .flex-col {
     flex-direction: column;
   }
@@ -457,6 +515,15 @@
   .items-center {
     align-items: center;
   }
+  .items-end {
+    align-items: flex-end;
+  }
+  .items-start {
+    align-items: flex-start;
+  }
+  .justify-between {
+    justify-content: space-between;
+  }
   .justify-center {
     justify-content: center;
   }
@@ -466,6 +533,9 @@
   .gap-0\.5 {
     gap: calc(var(--spacing) * 0.5);
   }
+  .gap-1\.5 {
+    gap: calc(var(--spacing) * 1.5);
+  }
   .gap-2 {
     gap: calc(var(--spacing) * 2);
   }
@@ -484,6 +554,9 @@
   .overflow-hidden {
     overflow: hidden;
   }
+  .rounded {
+    border-radius: 0.25rem;
+  }
   .rounded-full {
     border-radius: calc(infinity * 1px);
   }
@@ -503,6 +576,14 @@
     border-style: var(--tw-border-style);
     border-width: 1px;
   }
+  .border-2 {
+    border-style: var(--tw-border-style);
+    border-width: 2px;
+  }
+  .border-\[3px\] {
+    border-style: var(--tw-border-style);
+    border-width: 3px;
+  }
   .border-t {
     border-top-style: var(--tw-border-style);
     border-top-width: 1px;
@@ -515,6 +596,10 @@
     border-bottom-style: var(--tw-border-style);
     border-bottom-width: 2px;
   }
+  .border-none {
+    --tw-border-style: none;
+    border-style: none;
+  }
   .border-background-200 {
     border-color: var(--color-background-200);
   }
@@ -527,27 +612,54 @@
   .border-border-200 {
     border-color: var(--color-border-200);
   }
+  .border-border-400 {
+    border-color: var(--color-border-400);
+  }
+  .border-border-500 {
+    border-color: var(--color-border-500);
+  }
   .border-error-300 {
     border-color: var(--color-error-300);
   }
   .border-error-500 {
     border-color: var(--color-error-500);
   }
+  .border-error-700 {
+    border-color: var(--color-error-700);
+  }
   .border-indicator-error {
     border-color: var(--color-indicator-error);
   }
+  .border-indicator-info {
+    border-color: var(--color-indicator-info);
+  }
   .border-indicator-primary {
     border-color: var(--color-indicator-primary);
   }
+  .border-info-200 {
+    border-color: var(--color-info-200);
+  }
+  .border-primary-600 {
+    border-color: var(--color-primary-600);
+  }
+  .border-primary-800 {
+    border-color: var(--color-primary-800);
+  }
   .border-primary-950 {
     border-color: var(--color-primary-950);
   }
+  .border-success-200 {
+    border-color: var(--color-success-200);
+  }
   .border-success-300 {
     border-color: var(--color-success-300);
   }
   .border-success-500 {
     border-color: var(--color-success-500);
   }
+  .border-warning-200 {
+    border-color: var(--color-warning-200);
+  }
   .\!bg-primary-50 {
     background-color: var(--color-primary-50) !important;
   }
@@ -566,18 +678,33 @@
   .bg-error-500 {
     background-color: var(--color-error-500);
   }
+  .bg-info {
+    background-color: var(--color-info);
+  }
   .bg-primary-50 {
     background-color: var(--color-primary-50);
   }
+  .bg-primary-600 {
+    background-color: var(--color-primary-600);
+  }
+  .bg-primary-800 {
+    background-color: var(--color-primary-800);
+  }
   .bg-primary-950 {
     background-color: var(--color-primary-950);
   }
+  .bg-success {
+    background-color: var(--color-success);
+  }
   .bg-success-500 {
     background-color: var(--color-success-500);
   }
   .bg-transparent {
     background-color: transparent;
   }
+  .bg-warning {
+    background-color: var(--color-warning);
+  }
   .p-1 {
     padding: calc(var(--spacing) * 1);
   }
@@ -590,6 +717,9 @@
   .p-4 {
     padding: calc(var(--spacing) * 4);
   }
+  .p-6 {
+    padding: calc(var(--spacing) * 6);
+  }
   .p-8 {
     padding: calc(var(--spacing) * 8);
   }
@@ -686,6 +816,10 @@
     font-size: var(--text-xs);
     line-height: var(--tw-leading, var(--text-xs--line-height));
   }
+  .leading-\[150\%\] {
+    --tw-leading: 150%;
+    line-height: 150%;
+  }
   .font-black {
     --tw-font-weight: var(--font-weight-black);
     font-weight: var(--font-weight-black);
@@ -724,21 +858,36 @@
   .\!text-primary-950 {
     color: var(--color-primary-950) !important;
   }
+  .text-background-500 {
+    color: var(--color-background-500);
+  }
   .text-error-500 {
     color: var(--color-error-500);
   }
+  .text-error-600 {
+    color: var(--color-error-600);
+  }
+  .text-info-800 {
+    color: var(--color-info-800);
+  }
   .text-primary-950 {
     color: var(--color-primary-950);
   }
   .text-success-500 {
     color: var(--color-success-500);
   }
+  .text-success-800 {
+    color: var(--color-success-800);
+  }
   .text-text {
     color: var(--color-text);
   }
   .text-text-400 {
     color: var(--color-text-400);
   }
+  .text-text-500 {
+    color: var(--color-text-500);
+  }
   .text-text-600 {
     color: var(--color-text-600);
   }
@@ -754,15 +903,33 @@
   .text-text-950 {
     color: var(--color-text-950);
   }
+  .text-warning-800 {
+    color: var(--color-warning-800);
+  }
   .capitalize {
     text-transform: capitalize;
   }
   .italic {
     font-style: italic;
   }
+  .opacity-0 {
+    opacity: 0%;
+  }
+  .opacity-40 {
+    opacity: 40%;
+  }
   .opacity-50 {
     opacity: 50%;
   }
+  .shadow-lg {
+    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
+    box-shadow:
+      var(--tw-inset-shadow),
+      var(--tw-inset-ring-shadow),
+      var(--tw-ring-offset-shadow),
+      var(--tw-ring-shadow),
+      var(--tw-shadow);
+  }
   .shadow-md {
     --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
     box-shadow:
@@ -799,6 +966,12 @@
       var(--tw-ring-shadow),
       var(--tw-shadow);
   }
+  .ring-indicator-info\/20 {
+    --tw-ring-color: color-mix(in srgb, #5399ec 20%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      --tw-ring-color: color-mix(in oklab, var(--color-indicator-info) 20%, transparent);
+    }
+  }
   .ring-primary-950 {
     --tw-ring-color: var(--color-primary-950);
   }
@@ -810,6 +983,11 @@
     outline-style: var(--tw-outline-style);
     outline-width: 1px;
   }
+  .transition-all {
+    transition-property: all;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
   .transition-colors {
     transition-property:
       color,
@@ -825,6 +1003,15 @@
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
+  .transition-opacity {
+    transition-property: opacity;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
+  .duration-200 {
+    --tw-duration: 200ms;
+    transition-duration: 200ms;
+  }
   .outline-none {
     --tw-outline-style: none;
     outline-style: none;
@@ -834,6 +1021,20 @@
     -moz-user-select: none;
     user-select: none;
   }
+  .group-hover\:opacity-100 {
+    &:is(:where(.group):hover *) {
+      @media (hover: hover) {
+        opacity: 100%;
+      }
+    }
+  }
+  .hover\:border-border-500 {
+    &:hover {
+      @media (hover: hover) {
+        border-color: var(--color-border-500);
+      }
+    }
+  }
   .hover\:border-error-400 {
     &:hover {
       @media (hover: hover) {
@@ -973,6 +1174,12 @@
       }
     }
   }
+  .focus\:outline-none {
+    &:focus {
+      --tw-outline-style: none;
+      outline-style: none;
+    }
+  }
   .focus-visible\:border-0 {
     &:focus-visible {
       border-style: var(--tw-border-style);
@@ -1559,6 +1766,7 @@
 @property --tw-skew-x { syntax: "*"; inherits: false; }
 @property --tw-skew-y { syntax: "*"; inherits: false; }
 @property --tw-border-style { syntax: "*"; inherits: false; initial-value: solid; }
+@property --tw-leading { syntax: "*"; inherits: false; }
 @property --tw-font-weight { syntax: "*"; inherits: false; }
 @property --tw-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }
 @property --tw-shadow-color { syntax: "*"; inherits: false; }
@@ -1575,6 +1783,7 @@
 @property --tw-ring-offset-color { syntax: "*"; inherits: false; initial-value: #fff; }
 @property --tw-ring-offset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }
 @property --tw-outline-style { syntax: "*"; inherits: false; initial-value: solid; }
+@property --tw-duration { syntax: "*"; inherits: false; }
 @layer properties {
   @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
     *,
@@ -1590,6 +1799,7 @@
       --tw-skew-x: initial;
       --tw-skew-y: initial;
       --tw-border-style: solid;
+      --tw-leading: initial;
       --tw-font-weight: initial;
       --tw-shadow: 0 0 #0000;
       --tw-shadow-color: initial;
@@ -1606,6 +1816,7 @@
       --tw-ring-offset-color: #fff;
       --tw-ring-offset-shadow: 0 0 #0000;
       --tw-outline-style: solid;
+      --tw-duration: initial;
     }
   }
 }

package/dist/index.d.mts

@@ -1,6 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
-import { ReactNode, ButtonHTMLAttributes, ElementType, ComponentPropsWithoutRef, HTMLAttributes, TdHTMLAttributes } from 'react';
+import { ReactNode, ButtonHTMLAttributes, ElementType, ComponentPropsWithoutRef, HTMLAttributes, InputHTMLAttributes, TdHTMLAttributes } from 'react';
+import * as zustand from 'zustand';
 
 /**
  * Button component props interface
@@ -184,6 +185,111 @@ 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;
+    /** 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;
+};
+
+/**
+ * CheckBox size variants
+ */
+type CheckBoxSize = 'small' | 'medium' | 'large';
+/**
+ * CheckBox visual state
+ */
+type CheckBoxState = 'default' | 'hovered' | 'focused' | 'invalid' | 'disabled';
+/**
+ * CheckBox component props interface
+ */
+type CheckBoxProps = {
+    /** Label text to display next to the checkbox */
+    label?: ReactNode;
+    /** Size variant of the checkbox */
+    size?: CheckBoxSize;
+    /** Visual state of the checkbox */
+    state?: CheckBoxState;
+    /** Indeterminate state for partial selections */
+    indeterminate?: boolean;
+    /** Error message to display */
+    errorMessage?: string;
+    /** Helper text to display */
+    helperText?: string;
+    /** Additional CSS classes */
+    className?: string;
+    /** Label CSS classes */
+    labelClassName?: string;
+} & Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'type'>;
+/**
+ * CheckBox component for Analytica Ensino platforms
+ *
+ * A checkbox component with essential states, sizes and themes.
+ * Uses the Analytica Ensino Design System colors from styles.css with automatic
+ * light/dark mode support. Includes Text component integration for consistent typography.
+ *
+ * @example
+ * ```tsx
+ * // Basic checkbox
+ * <CheckBox label="Option" />
+ *
+ * // Small size
+ * <CheckBox size="small" label="Small option" />
+ *
+ * // Invalid state
+ * <CheckBox state="invalid" label="Required field" />
+ *
+ * // Disabled state
+ * <CheckBox disabled label="Disabled option" />
+ * ```
+ */
+declare const CheckBox: react.ForwardRefExoticComponent<{
+    /** Label text to display next to the checkbox */
+    label?: ReactNode;
+    /** Size variant of the checkbox */
+    size?: CheckBoxSize;
+    /** Visual state of the checkbox */
+    state?: CheckBoxState;
+    /** Indeterminate state for partial selections */
+    indeterminate?: boolean;
+    /** Error message to display */
+    errorMessage?: string;
+    /** Helper text to display */
+    helperText?: string;
+    /** Additional CSS classes */
+    className?: string;
+    /** Label CSS classes */
+    labelClassName?: string;
+} & Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "type"> & react.RefAttributes<HTMLInputElement>>;
+
 type TableRowState = 'default' | 'selected' | 'invalid' | 'disabled';
 interface TableRowProps extends HTMLAttributes<HTMLTableRowElement> {
     state?: TableRowState;
@@ -348,4 +454,4 @@ declare const IconButton: react.ForwardRefExoticComponent<{
     className?: string;
 } & ButtonHTMLAttributes<HTMLButtonElement> & react.RefAttributes<HTMLButtonElement>>;
 
-export { Button, DropdownMenu, DropdownMenuTrigger, IconButton, type IconButtonProps, IconRoundedButton, MenuContent, MenuItem, MenuLabel, MenuSeparator, NavButton, SelectionButton, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Text };
+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 };