UNPKG

analytica-frontend-lib

Version:

Repositório público dos componentes utilizados nas plataformas da Analytica Ensino

155 lines (149 loc) 6.41 kB
export { default as Text } from './Text/index.js'; export { default as Button } from './Button/index.js'; export { default as Badge } from './Badge/index.js'; export { default as Alert } from './Alert/index.js'; export { default as IconButton } from './IconButton/index.js'; export { default as IconRoundedButton } from './IconRoundedButton/index.js'; 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'; export { default as Radio } from './Radio/index.js'; 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'; import * as react from 'react'; import { HTMLAttributes, ReactNode, InputHTMLAttributes, ButtonHTMLAttributes } from 'react'; export { default as useToastStore } from './Toast/ToastStore/index.js'; export { default as ProgressBar } from './ProgressBar/index.js'; export { default as ProgressCircle } from './ProgressCircle/index.js'; export { default as DropdownMenu, DropdownMenuTrigger, MenuContent, MenuItem, MenuLabel, MenuSeparator, ProfileMenuFooter, ProfileMenuHeader, ProfileMenuSection, ProfileMenuTrigger } from './DropdownMenu/index.js'; import { StoreApi } from 'zustand'; /** * 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; /** Helper text displayed below the input */ helperText?: string; /** Error message displayed below the input */ errorMessage?: string; /** Size of the input */ size?: "small" | "medium" | "large" | "extra-large"; /** Visual variant of the input */ variant?: "outlined" | "underlined" | "rounded"; /** Current state of the input */ state?: "default" | "error" | "disabled" | "read-only"; /** Icon to display on the left side of the input */ iconLeft?: ReactNode; /** Icon to display on the right side of the input */ iconRight?: ReactNode; /** Additional CSS classes to apply to the input */ className?: string; /** Additional CSS classes to apply to the container */ containerClassName?: string; } & Omit<InputHTMLAttributes<HTMLInputElement>, "size"> & react.RefAttributes<HTMLInputElement>>; /** * 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; interface SelectStore { open: boolean; setOpen: (open: boolean) => void; value: string; setValue: (value: string) => void; selectedLabel: ReactNode; setSelectedLabel: (label: ReactNode) => void; } type SelectStoreApi = StoreApi<SelectStore>; interface SelectProps { children: ReactNode; defaultValue?: string; value?: string; onValueChange?: (value: string) => void; size?: 'small' | 'medium' | 'large'; } declare const Select: ({ children, defaultValue, value: propValue, onValueChange, size, }: SelectProps) => react_jsx_runtime.JSX.Element; declare const SelectValue: ({ placeholder, store: externalStore, }: { placeholder?: string; store?: SelectStoreApi; }) => react_jsx_runtime.JSX.Element; interface SelectTriggerProps extends ButtonHTMLAttributes<HTMLButtonElement> { className?: string; invalid?: boolean; variant?: 'outlined' | 'underlined' | 'rounded'; store?: SelectStoreApi; } declare const SelectTrigger: react.ForwardRefExoticComponent<SelectTriggerProps & react.RefAttributes<HTMLButtonElement>>; interface SelectContentProps extends HTMLAttributes<HTMLDivElement> { className?: string; align?: 'start' | 'center' | 'end'; side?: 'top' | 'right' | 'bottom' | 'left'; store?: SelectStoreApi; } declare const SelectContent: react.ForwardRefExoticComponent<SelectContentProps & react.RefAttributes<HTMLDivElement>>; interface SelectItemProps extends HTMLAttributes<HTMLDivElement> { value: string; disabled?: boolean; store?: SelectStoreApi; } declare const SelectItem: react.ForwardRefExoticComponent<SelectItemProps & react.RefAttributes<HTMLDivElement>>; export { Chips, Divider, Input, Select, SelectContent, SelectItem, SelectTrigger, SelectValue };