analytica-frontend-lib 1.0.30 → 1.0.32

package/dist/index.d.ts

@@ -8,16 +8,100 @@ export { default as NavButton } from './NavButton/index.js';
 export { default as SelectionButton } from './SelectionButton/index.js';
 export { default as Table } from './Table/index.js';
 export { default as CheckBox } from './CheckBox/index.js';
+import * as react from 'react';
+import { ReactNode, InputHTMLAttributes, HTMLAttributes, ButtonHTMLAttributes } from 'react';
 export { default as TextArea } from './TextArea/index.js';
 export { default as Toast } from './Toast/index.js';
 export { default as Toaster } from './Toast/Toaster/index.js';
+import * as react_jsx_runtime from 'react/jsx-runtime';
 export { default as useToastStore } from './Toast/ToastStore/index.js';
-import * as react from 'react';
-import { ReactNode, InputHTMLAttributes } from 'react';
 export { default as DropdownMenu, MenuContent as DropdownMenuContent, MenuItem as DropdownMenuItem, MenuLabel as DropdownMenuLabel, MenuSeparator as DropdownMenuSeparator, DropdownMenuTrigger } from './DropdownMenu/index.js';
-import 'react/jsx-runtime';
 import 'zustand';
 
+/**
+ * Radio size variants
+ */
+type RadioSize = 'small' | 'medium' | 'large' | 'extraLarge';
+/**
+ * Radio visual state
+ */
+type RadioState = 'default' | 'hovered' | 'focused' | 'invalid' | 'disabled';
+/**
+ * Radio component for Analytica Ensino platforms
+ *
+ * A radio button 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 radio
+ * <Radio name="option" value="1" label="Option 1" />
+ *
+ * // Small size
+ * <Radio size="small" name="option" value="2" label="Small option" />
+ *
+ * // Invalid state
+ * <Radio state="invalid" name="option" value="3" label="Required field" />
+ *
+ * // Disabled state
+ * <Radio disabled name="option" value="4" label="Disabled option" />
+ *
+ * // Default checked (uncontrolled)
+ * <Radio defaultChecked name="option" value="5" label="Initially checked" />
+ * ```
+ */
+declare const Radio: react.ForwardRefExoticComponent<{
+    /** Label text to display next to the radio */
+    label?: ReactNode;
+    /** Size variant of the radio */
+    size?: RadioSize;
+    /** Visual state of the radio */
+    state?: RadioState;
+    /** Error message to display */
+    errorMessage?: string;
+    /** Helper text to display */
+    helperText?: string;
+    /** Additional CSS classes */
+    className?: string;
+    /** Label CSS classes */
+    labelClassName?: string;
+    /** Radio group name */
+    name?: string;
+    /** Radio value */
+    value?: string;
+    /** Default checked state for uncontrolled radios */
+    defaultChecked?: boolean;
+} & Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "defaultChecked" | "type"> & react.RefAttributes<HTMLInputElement>>;
+
+/**
+ * Divider component props interface
+ */
+type DividerProps = {
+    /** Orientation of the divider */
+    orientation?: 'horizontal' | 'vertical';
+    /** Additional CSS classes to apply */
+    className?: string;
+} & HTMLAttributes<HTMLHRElement>;
+/**
+ * Divider component for Analytica Ensino platforms
+ *
+ * A simple divider component that creates a visual separation between content sections.
+ * Can be used both horizontally and vertically.
+ *
+ * @param orientation - The orientation of the divider (horizontal or vertical)
+ * @param className - Additional CSS classes
+ * @param props - All other standard hr HTML attributes
+ * @returns A styled divider element
+ *
+ * @example
+ * ```tsx
+ * <Divider orientation="horizontal" />
+ * <Divider orientation="vertical" className="h-8" />
+ * ```
+ */
+declare const Divider: ({ orientation, className, ...props }: DividerProps) => react_jsx_runtime.JSX.Element;
+
 declare const Input: react.ForwardRefExoticComponent<{
     /** Label text displayed above the input */
     label?: string;
@@ -41,4 +125,41 @@ declare const Input: react.ForwardRefExoticComponent<{
     containerClassName?: string;
 } & Omit<InputHTMLAttributes<HTMLInputElement>, "size"> & react.RefAttributes<HTMLInputElement>>;
 
-export { Input };
+/**
+ * Chips component props interface
+ */
+type ChipsProps = {
+    /** Content to be displayed inside the chip */
+    children: ReactNode;
+    /** Se o chip está selecionado (mostra check automaticamente) */
+    selected?: boolean;
+    /** Additional CSS classes to apply */
+    className?: string;
+} & Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children'>;
+/**
+ * Chips component for Analytica Ensino platforms
+ *
+ * Um componente de chip seguindo exatamente o design do Figma.
+ * Suporte a dois estados principais: default (sem ícone) e selected (com ícone de check).
+ * Quando selecionado, automaticamente mostra o ícone de check.
+ *
+ * @param children - O conteúdo a ser exibido dentro do chip
+ * @param selected - Se o chip está selecionado (mostra check automaticamente)
+ * @param className - Classes CSS adicionais
+ * @param props - Todos os outros atributos padrão de button HTML
+ * @returns Um elemento de chip estilizado
+ *
+ * @example
+ * ```tsx
+ * <Chips onClick={() => console.log('clicked')}>
+ *   Label
+ * </Chips>
+ *
+ * <Chips selected onClick={() => console.log('selected')}>
+ *   Selected Label
+ * </Chips>
+ * ```
+ */
+declare const Chips: ({ children, selected, className, disabled, type, ...props }: ChipsProps) => react_jsx_runtime.JSX.Element;
+
+export { Chips, Divider, Input, Radio };