analytica-frontend-lib 1.0.21 → 1.0.22

package/dist/index.css

@@ -22,8 +22,12 @@
       "Liberation Mono",
       "Courier New",
       monospace;
+    --color-red-700: oklch(50.5% 0.213 27.518);
+    --color-gray-800: oklch(27.8% 0.033 256.848);
     --color-white: #fff;
     --spacing: 0.25rem;
+    --container-md: 28rem;
+    --container-4xl: 56rem;
     --text-xs: 0.75rem;
     --text-xs--line-height: calc(1 / 0.75);
     --text-sm: 0.875rem;
@@ -433,6 +437,9 @@
   .mb-0\.5 {
     margin-bottom: calc(var(--spacing) * 0.5);
   }
+  .mb-1\.5 {
+    margin-bottom: calc(var(--spacing) * 1.5);
+  }
   .mb-2 {
     margin-bottom: calc(var(--spacing) * 2);
   }
@@ -451,6 +458,9 @@
   .ml-2 {
     margin-left: calc(var(--spacing) * 2);
   }
+  .box-border {
+    box-sizing: border-box;
+  }
   .block {
     display: block;
   }
@@ -496,6 +506,9 @@
   .h-10 {
     height: calc(var(--spacing) * 10);
   }
+  .h-24 {
+    height: calc(var(--spacing) * 24);
+  }
   .h-\[21px\] {
     height: 21px;
   }
@@ -523,15 +536,24 @@
   .w-10 {
     width: calc(var(--spacing) * 10);
   }
+  .w-72 {
+    width: calc(var(--spacing) * 72);
+  }
   .w-\[384px\] {
     width: 384px;
   }
   .w-full {
     width: 100%;
   }
+  .max-w-4xl {
+    max-width: var(--container-4xl);
+  }
   .max-w-\[390px\] {
     max-width: 390px;
   }
+  .max-w-md {
+    max-width: var(--container-md);
+  }
   .min-w-\[210px\] {
     min-width: 210px;
   }
@@ -551,6 +573,9 @@
   .cursor-pointer {
     cursor: pointer;
   }
+  .resize-none {
+    resize: none;
+  }
   .grid-cols-2 {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
@@ -611,6 +636,9 @@
   .rounded {
     border-radius: 0.25rem;
   }
+  .rounded-\[4px\] {
+    border-radius: 4px;
+  }
   .rounded-full {
     border-radius: calc(infinity * 1px);
   }
@@ -657,6 +685,10 @@
     --tw-border-style: none;
     border-style: none;
   }
+  .border-solid {
+    --tw-border-style: solid;
+    border-style: solid;
+  }
   .border-background-200 {
     border-color: var(--color-background-200);
   }
@@ -711,6 +743,9 @@
   .border-primary-950 {
     border-color: var(--color-primary-950);
   }
+  .border-red-700 {
+    border-color: var(--color-red-700);
+  }
   .border-success-200 {
     border-color: var(--color-success-200);
   }
@@ -792,6 +827,9 @@
   .bg-warning {
     background-color: var(--color-warning);
   }
+  .bg-white {
+    background-color: var(--color-white);
+  }
   .p-1 {
     padding: calc(var(--spacing) * 1);
   }
@@ -966,6 +1004,9 @@
   .text-error-800 {
     color: var(--color-error-800);
   }
+  .text-gray-800 {
+    color: var(--color-gray-800);
+  }
   .text-info-200 {
     color: var(--color-info-200);
   }
@@ -1100,6 +1141,10 @@
     outline-style: var(--tw-outline-style);
     outline-width: 1px;
   }
+  .blur {
+    --tw-blur: blur(8px);
+    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
+  }
   .transition-all {
     transition-property: all;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -1145,6 +1190,21 @@
       }
     }
   }
+  .placeholder\:text-text-600 {
+    &::-moz-placeholder {
+      color: var(--color-text-600);
+    }
+    &::placeholder {
+      color: var(--color-text-600);
+    }
+  }
+  .hover\:border-border-400 {
+    &:hover {
+      @media (hover: hover) {
+        border-color: var(--color-border-400);
+      }
+    }
+  }
   .hover\:border-border-500 {
     &:hover {
       @media (hover: hover) {
@@ -1180,6 +1240,13 @@
       }
     }
   }
+  .hover\:border-red-700 {
+    &:hover {
+      @media (hover: hover) {
+        border-color: var(--color-red-700);
+      }
+    }
+  }
   .hover\:border-success-400 {
     &:hover {
       @media (hover: hover) {
@@ -1291,6 +1358,16 @@
       }
     }
   }
+  .focus\:border-border-500 {
+    &:focus {
+      border-color: var(--color-border-500);
+    }
+  }
+  .focus\:border-red-700 {
+    &:focus {
+      border-color: var(--color-red-700);
+    }
+  }
   .focus\:outline-none {
     &:focus {
       --tw-outline-style: none;
@@ -1909,6 +1986,19 @@
 @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-blur { syntax: "*"; inherits: false; }
+@property --tw-brightness { syntax: "*"; inherits: false; }
+@property --tw-contrast { syntax: "*"; inherits: false; }
+@property --tw-grayscale { syntax: "*"; inherits: false; }
+@property --tw-hue-rotate { syntax: "*"; inherits: false; }
+@property --tw-invert { syntax: "*"; inherits: false; }
+@property --tw-opacity { syntax: "*"; inherits: false; }
+@property --tw-saturate { syntax: "*"; inherits: false; }
+@property --tw-sepia { syntax: "*"; inherits: false; }
+@property --tw-drop-shadow { syntax: "*"; inherits: false; }
+@property --tw-drop-shadow-color { syntax: "*"; inherits: false; }
+@property --tw-drop-shadow-alpha { syntax: "<percentage>"; inherits: false; initial-value: 100%; }
+@property --tw-drop-shadow-size { syntax: "*"; inherits: false; }
 @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)))) {
@@ -1942,6 +2032,19 @@
       --tw-ring-offset-color: #fff;
       --tw-ring-offset-shadow: 0 0 #0000;
       --tw-outline-style: solid;
+      --tw-blur: initial;
+      --tw-brightness: initial;
+      --tw-contrast: initial;
+      --tw-grayscale: initial;
+      --tw-hue-rotate: initial;
+      --tw-invert: initial;
+      --tw-opacity: initial;
+      --tw-saturate: initial;
+      --tw-sepia: initial;
+      --tw-drop-shadow: initial;
+      --tw-drop-shadow-color: initial;
+      --tw-drop-shadow-alpha: 100%;
+      --tw-drop-shadow-size: initial;
       --tw-duration: initial;
     }
   }

package/dist/index.d.mts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
-import { ReactNode, ButtonHTMLAttributes, ElementType, ComponentPropsWithoutRef, HTMLAttributes, InputHTMLAttributes, TdHTMLAttributes } from 'react';
+import react__default, { ReactNode, ButtonHTMLAttributes, ElementType, ComponentPropsWithoutRef, TextareaHTMLAttributes, HTMLAttributes, InputHTMLAttributes, TdHTMLAttributes } from 'react';
 import * as zustand from 'zustand';
 
 /**
@@ -185,6 +185,72 @@ 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;
 
+/**
+ * TextArea size variants
+ */
+type TextAreaSize = 'small' | 'medium' | 'large' | 'extraLarge';
+/**
+ * TextArea visual state
+ */
+type TextAreaState = 'default' | 'hovered' | 'focused' | 'invalid' | 'disabled';
+/**
+ * TextArea component props interface
+ */
+type TextAreaProps = {
+    /** Label text to display above the textarea */
+    label?: ReactNode;
+    /** Size variant of the textarea */
+    size?: TextAreaSize;
+    /** Visual state of the textarea */
+    state?: TextAreaState;
+    /** Error message to display */
+    errorMessage?: string;
+    /** Helper text to display */
+    helperMessage?: string;
+    /** Additional CSS classes */
+    className?: string;
+    /** Label CSS classes */
+    labelClassName?: string;
+} & Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'size'>;
+/**
+ * TextArea component for Analytica Ensino platforms
+ *
+ * A textarea component with essential states, sizes and themes.
+ * Uses exact design specifications with 288px width, 96px height, and specific
+ * color values. Includes Text component integration for consistent typography.
+ *
+ * @example
+ * ```tsx
+ * // Basic textarea
+ * <TextArea label="Description" placeholder="Enter description..." />
+ *
+ * // Small size
+ * <TextArea size="small" label="Comment" />
+ *
+ * // Invalid state
+ * <TextArea state="invalid" label="Required field" errorMessage="This field is required" />
+ *
+ * // Disabled state
+ * <TextArea disabled label="Read-only field" />
+ * ```
+ */
+declare const TextArea: react__default.ForwardRefExoticComponent<{
+    /** Label text to display above the textarea */
+    label?: ReactNode;
+    /** Size variant of the textarea */
+    size?: TextAreaSize;
+    /** Visual state of the textarea */
+    state?: TextAreaState;
+    /** Error message to display */
+    errorMessage?: string;
+    /** Helper text to display */
+    helperMessage?: string;
+    /** Additional CSS classes */
+    className?: string;
+    /** Label CSS classes */
+    labelClassName?: string;
+} & Omit<react__default.TextareaHTMLAttributes<HTMLTextAreaElement>, "size"> & react__default.RefAttributes<HTMLTextAreaElement>>;
+
 /**
  * Badge component props interface
  */
@@ -497,4 +563,4 @@ declare const useToast: () => {
     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 };
+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, TextArea, type TextAreaProps, Toast, type ToastData, Toaster, useToast, useToastStore };

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
-import { ReactNode, ButtonHTMLAttributes, ElementType, ComponentPropsWithoutRef, HTMLAttributes, InputHTMLAttributes, TdHTMLAttributes } from 'react';
+import react__default, { ReactNode, ButtonHTMLAttributes, ElementType, ComponentPropsWithoutRef, TextareaHTMLAttributes, HTMLAttributes, InputHTMLAttributes, TdHTMLAttributes } from 'react';
 import * as zustand from 'zustand';
 
 /**
@@ -185,6 +185,72 @@ 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;
 
+/**
+ * TextArea size variants
+ */
+type TextAreaSize = 'small' | 'medium' | 'large' | 'extraLarge';
+/**
+ * TextArea visual state
+ */
+type TextAreaState = 'default' | 'hovered' | 'focused' | 'invalid' | 'disabled';
+/**
+ * TextArea component props interface
+ */
+type TextAreaProps = {
+    /** Label text to display above the textarea */
+    label?: ReactNode;
+    /** Size variant of the textarea */
+    size?: TextAreaSize;
+    /** Visual state of the textarea */
+    state?: TextAreaState;
+    /** Error message to display */
+    errorMessage?: string;
+    /** Helper text to display */
+    helperMessage?: string;
+    /** Additional CSS classes */
+    className?: string;
+    /** Label CSS classes */
+    labelClassName?: string;
+} & Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'size'>;
+/**
+ * TextArea component for Analytica Ensino platforms
+ *
+ * A textarea component with essential states, sizes and themes.
+ * Uses exact design specifications with 288px width, 96px height, and specific
+ * color values. Includes Text component integration for consistent typography.
+ *
+ * @example
+ * ```tsx
+ * // Basic textarea
+ * <TextArea label="Description" placeholder="Enter description..." />
+ *
+ * // Small size
+ * <TextArea size="small" label="Comment" />
+ *
+ * // Invalid state
+ * <TextArea state="invalid" label="Required field" errorMessage="This field is required" />
+ *
+ * // Disabled state
+ * <TextArea disabled label="Read-only field" />
+ * ```
+ */
+declare const TextArea: react__default.ForwardRefExoticComponent<{
+    /** Label text to display above the textarea */
+    label?: ReactNode;
+    /** Size variant of the textarea */
+    size?: TextAreaSize;
+    /** Visual state of the textarea */
+    state?: TextAreaState;
+    /** Error message to display */
+    errorMessage?: string;
+    /** Helper text to display */
+    helperMessage?: string;
+    /** Additional CSS classes */
+    className?: string;
+    /** Label CSS classes */
+    labelClassName?: string;
+} & Omit<react__default.TextareaHTMLAttributes<HTMLTextAreaElement>, "size"> & react__default.RefAttributes<HTMLTextAreaElement>>;
+
 /**
  * Badge component props interface
  */
@@ -497,4 +563,4 @@ declare const useToast: () => {
     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 };
+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, TextArea, type TextAreaProps, Toast, type ToastData, Toaster, useToast, useToastStore };