@granto-umbrella/umbrella-components 3.0.53 → 3.0.55

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@granto-umbrella/umbrella-components",
-  "version": "3.0.53",
+  "version": "3.0.55",
   "description": "Umbrella Components for React",
   "type": "module",
   "main": "src/index.js",
@@ -79,6 +79,7 @@
     "@storybook/addon-docs": "10.1.6",
     "@storybook/addon-essentials": "^8.6.14",
     "@storybook/addon-onboarding": "10.1.6",
+    "@storybook/cli": "^10.1.10",
     "@storybook/react-vite": "^10.1.6",
     "@storybook/test": "^8.6.14",
     "@testing-library/dom": "^10.4.1",
@@ -115,7 +116,8 @@
     "ts-node": "^10.9.2",
     "typescript": "~5.6.2",
     "typescript-eslint": "^8.18.1",
-    "vite": "^6.0.3"
+    "vite": "^6.0.3",
+    "vite-plugin-dts": "^4.5.4"
   },
   "keywords": [
     "cli",

package/src/components/atoms/Button/Button.types.ts

@@ -1,28 +1,27 @@
-export interface ButtonProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-  size?: 'sm' | 'md' | 'lg';
-  variant?:
-    | 'primary'
-    | 'outline'
-    | 'outline_ghost'
-    | 'outline_ghost_disabled'
-    | 'outline_danger'
-    | 'danger'
-    | 'ghost'
-    | 'ghost_alert'
-    | 'alert'
-    | 'danger-no-fill'
-    | 'accent-outline'
-    | 'accent-fill'
-    | 'secondary-outline'
-    | 'danger-fill';
-  radius?: string;
-  isLoading?: boolean;
-  leftIcon?: string;
-  rightIcon?: string;
-  iconSize?: string;
-  fontSize?: string;
-  width?: string;
-  height?: string;
-  testId?: string;
-}
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  size?: 'sm' | 'md' | 'lg';
+  variant?:
+    | 'primary'
+    | 'outline'
+    | 'outline_ghost'
+    | 'outline_ghost_disabled'
+    | 'outline_danger'
+    | 'danger'
+    | 'ghost'
+    | 'ghost_alert'
+    | 'alert'
+    | 'danger-no-fill'
+    | 'accent-outline'
+    | 'accent-fill'
+    | 'secondary-outline'
+    | 'danger-fill';
+  radius?: string;
+  isLoading?: boolean;
+  leftIcon?: string;
+  rightIcon?: string;
+  iconSize?: string;
+  fontSize?: string;
+  width?: string;
+  height?: string;
+  testId?: string;
+}

package/src/components/atoms/Checkbox/Checkbox.types.ts

@@ -1,14 +1,13 @@
-export interface CheckboxProps
-  extends React.InputHTMLAttributes<HTMLInputElement> {
-  label?: string;
-  checked?: boolean;
-  onChange?: () => void;
-  disabled?: boolean;
-}
-
-export interface CheckboxGroupProps {
-  options: { label: string; value: string }[];
-  selected: string[];
-  setSelected: (values: string[]) => void;
-  direction?: 'vertical' | 'horizontal';
-}
+export interface CheckboxProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  label?: string;
+  checked?: boolean;
+  onChange?: () => void;
+  disabled?: boolean;
+}
+
+export interface CheckboxGroupProps {
+  options: { label: string; value: string }[];
+  selected: string[];
+  setSelected: (values: string[]) => void;
+  direction?: 'vertical' | 'horizontal';
+}

package/src/components/atoms/Textarea/Textarea.types.ts

@@ -1,7 +1,6 @@
-export interface TextareaProps
-  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
-  label?: string;
-  supportingText?: string;
-  testId?: string;
-  info?: string;
-}
+export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+  label?: string;
+  supportingText?: string;
+  testId?: string;
+  info?: string;
+}

package/src/components/atoms/Tooltip/Tooltip.tsx

@@ -1,4 +1,3 @@
-
 import React, { useState } from 'react';
 import {
   TooltipContainer,
@@ -9,7 +8,7 @@ import {
 } from '../Tooltip/Tootip.styles';
 import { TooltipProps } from './tooltip.types';
 import { ArrowSquareOut } from '@phosphor-icons/react';
-import info from "../../../assets/info.png"; 
+import info from '../../../assets/info.png';
 
 const Tooltip: React.FC<TooltipProps> = ({
   children,
@@ -44,7 +43,11 @@ const Tooltip: React.FC<TooltipProps> = ({
       >
         <TooltipText>{content}</TooltipText>
         {helpLink && (
-          <TooltipLink href={helpLink} target="_blank" rel="noopener noreferrer">
+          <TooltipLink
+            href={helpLink}
+            target="_blank"
+            rel="noopener noreferrer"
+          >
             Saiba mais
             <ArrowSquareOut size={12} weight="bold" />
           </TooltipLink>

package/src/components/atoms/Tooltip/Tootip.styles.ts

@@ -1,4 +1,3 @@
-
 import styled, { css } from 'styled-components';
 import {
   semanticColors,
@@ -123,7 +122,9 @@ export const TooltipContent = styled.div<{
 
   opacity: ${({ $visible }) => ($visible ? '1' : '0')};
   visibility: ${({ $visible }) => ($visible ? 'visible' : 'hidden')};
-  transition: opacity 0.2s ease, visibility 0.2s ease;
+  transition:
+    opacity 0.2s ease,
+    visibility 0.2s ease;
   pointer-events: ${({ $visible }) => ($visible ? 'auto' : 'none')};
 
   ${({ $position }) => positionStyles[$position]}
@@ -150,4 +151,3 @@ export const TooltipLink = styled.a`
     color: ${primitiveColors.blue[800]};
   }
 `;
-

package/src/components/atoms/Tooltip/tooltip.types.ts

@@ -1,4 +1,3 @@
-
 export type TooltipPosition = 'top' | 'bottom' | 'left' | 'right';
 
 export interface TooltipProps {
@@ -7,4 +6,3 @@ export interface TooltipProps {
   position?: TooltipPosition;
   helpLink?: string;
 }
-

package/src/components/molecules/RadioGroupField/RadioGroupField.types.ts

@@ -5,6 +5,8 @@ export interface RadioOption {
   label: string;
   iconActive?: ReactNode;
   iconInactive?: ReactNode;
+  iconDesactive?: ReactNode;
+  testId?: string;
 }
 
 export interface RadioGroupFieldProps {

package/src/index.ts

@@ -1,161 +1,159 @@
-import { Form } from 'react-hook-form';
-
-// Import all components
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogPortal,
-  DialogTitle,
-  DialogTrigger,
-} from '@radix-ui/react-dialog';
-
-import Badge from './components/atoms/Badge/Badge';
-import Breadcrumb from './components/atoms/Breadcrumb/Breadcrumb';
-import Button from './components/atoms/Button';
-import { Checkbox } from './components/atoms/Checkbox/Checkbox';
-import CodeInput from './components/atoms/CodeInput/CodeInput';
-import { DatePickerInput } from './components/atoms/DatePickerInput/DatePickerInput';
-import { DropdownMenu } from './components/atoms/DropDownMenu/DropdownMenu';
-import ErrorMessage from './components/atoms/ErrorMessage';
-import Footer from './components/atoms/Footer/Footer';
-import { GenericContainer } from './components/atoms/GenericContainer';
-import Icon from './components/atoms/Icon';
-import Input from './components/atoms/Input';
-import { Label } from './components/atoms/Label/Label';
-import Loading from './components/atoms/Loading';
-import { LogoContainer } from './components/atoms/LogoContainer';
-import { ModalAviso } from './components/atoms/ModalAviso';
-import { MultiSelect } from './components/atoms/MultiSelect';
-import Pill from './components/atoms/Pill/Pill';
-import RadioButton from './components/atoms/RadioButton/RadioButton';
-import { ResendLink } from './components/atoms/ResendLink';
-import Select from './components/atoms/Select';
-import { Subtitle } from './components/atoms/Subtitle';
-import Switch from './components/atoms/Switch/Switch';
-import { TabBar } from './components/atoms/TabBar';
-import Text from './components/atoms/Text';
-import Textarea from './components/atoms/Textarea/Textarea';
-import { Title } from './components/atoms/Title';
-import { BannerAjuda } from './components/molecules/BannerAjuda';
-import ButtonGroup from './components/molecules/ButtonGroup/ButtonGroup';
-import { Calendar } from './components/molecules/Calendar/Calendar';
-import { CodeInputContainer } from './components/molecules/CodeInputContainer';
-import FieldSelector from './components/molecules/FieldSelector/FieldSelector';
-import { HighlightsCard } from './components/molecules/HighlightsCard/HighlightsCard';
-import { InsuranceCard } from './components/molecules/InsuranceCard/InsuranceCard';
-import { PieChartComponent } from './components/molecules/PieChartComponent/PieChartComponent';
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from './components/molecules/Popover/Popover';
-import RadioGroup from './components/molecules/RadioBoxGroup/RadioBoxGroup';
-import { RadioGroupField } from './components/molecules/RadioGroupField';
-import { TabToggle } from './components/molecules/TabToggle/TabToggle';
-import { Timeline } from './components/molecules/TimeLine/TimeLine';
-import AlertDialog from './components/organisms/AlertDialog/AlertDialog';
-import {
-  DialogFooter,
-  DialogHeader,
-} from './components/organisms/Dialog/Dialog';
-import {
-  StyledDialogClose,
-  StyledDialogOverlay,
-} from './components/organisms/Dialog/Dialog.styles';
-import DonutEmissionsChart from './components/organisms/DonutEmissionsChart';
-import { ExportExcelModal } from './components/organisms/ExportExcelModal/ExportExcelModal';
-import {
-  FormControl,
-  FormDescription,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-  useFormField,
-} from './components/organisms/Form/Form';
-import { ListagemUltimasEmissoes } from './components/organisms/ListagemUltimasEmissoes/ListagemUltimasEmissoes';
-import NavbarContainer from './components/organisms/Navbar/Navbar';
-import { TimelineModal } from './components/organisms/TimelineModal/TimelineModal';
-
-// Export all components
-export {
-  InsuranceCard,
-  DonutEmissionsChart,
-  RadioGroupField,
-  PieChartComponent,
-  AlertDialog,
-  FieldSelector,
-  BannerAjuda,
-  Badge,
-  ExportExcelModal,
-  Breadcrumb,
-  Button,
-  ButtonGroup,
-  Calendar,
-  CodeInput,
-  CodeInputContainer,
-  Checkbox,
-  DatePickerInput,
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  ListagemUltimasEmissoes,
-  DialogFooter,
-  DialogHeader,
-  DialogPortal,
-  DialogTitle,
-  DialogTrigger,
-  DropdownMenu,
-  ErrorMessage,
-  HighlightsCard,
-  Footer,
-  Form,
-  FormControl,
-  FormDescription,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-  GenericContainer,
-  Loading,
-  LogoContainer,
-  ModalAviso,
-  MultiSelect,
-  Icon,
-  Input,
-  Label,
-  Pill,
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-  RadioButton,
-  RadioGroup,
-  ResendLink,
-  Select,
-  Subtitle,
-  StyledDialogClose,
-  StyledDialogOverlay,
-  Switch,
-  TabBar,
-  TabToggle,
-  Text,
-  Textarea,
-  Title,
-  useFormField,
-  Timeline,
-  TimelineModal,
-  NavbarContainer,
-};
-
-// Export all tokens from a new file
-export { primitiveBorders, semanticBorders } from './styles/tokens/borders';
-export { primitiveColors, semanticColors } from './styles/tokens/colors';
-export { primitiveRadius, semanticRadius } from './styles/tokens/radius';
-export { primitiveShadows, semanticShadows } from './styles/tokens/shadows';
-export { primitiveSizes, semanticSizes } from './styles/tokens/sizes';
-export { typographyTokens } from './styles/tokens/typography';
-
-// Export all types
-export type { Radius } from './types/radius.types';
-export type { Shadows } from './types/shadows.types';
+import { Form } from 'react-hook-form';
+
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+} from '@radix-ui/react-dialog';
+
+import Badge from './components/atoms/Badge/Badge';
+import Breadcrumb from './components/atoms/Breadcrumb/Breadcrumb';
+import Button from './components/atoms/Button';
+import { Checkbox } from './components/atoms/Checkbox/Checkbox';
+import CodeInput from './components/atoms/CodeInput/CodeInput';
+import { DatePickerInput } from './components/atoms/DatePickerInput/DatePickerInput';
+import { DropdownMenu } from './components/atoms/DropDownMenu/DropdownMenu';
+import ErrorMessage from './components/atoms/ErrorMessage';
+import Footer from './components/atoms/Footer/Footer';
+import { GenericContainer } from './components/atoms/GenericContainer';
+import Icon from './components/atoms/Icon';
+import Input from './components/atoms/Input';
+import { Label } from './components/atoms/Label/Label';
+import Loading from './components/atoms/Loading';
+import { LogoContainer } from './components/atoms/LogoContainer';
+import { ModalAviso } from './components/atoms/ModalAviso';
+import { MultiSelect } from './components/atoms/MultiSelect';
+import Pill from './components/atoms/Pill/Pill';
+import RadioButton from './components/atoms/RadioButton/RadioButton';
+import { ResendLink } from './components/atoms/ResendLink';
+import Select from './components/atoms/Select';
+import { Subtitle } from './components/atoms/Subtitle';
+import Switch from './components/atoms/Switch/Switch';
+import { TabBar } from './components/atoms/TabBar';
+import Text from './components/atoms/Text';
+import Textarea from './components/atoms/Textarea/Textarea';
+import { Title } from './components/atoms/Title';
+import { BannerAjuda } from './components/molecules/BannerAjuda';
+import ButtonGroup from './components/molecules/ButtonGroup/ButtonGroup';
+import { Calendar } from './components/molecules/Calendar/Calendar';
+import { CodeInputContainer } from './components/molecules/CodeInputContainer';
+import FieldSelector from './components/molecules/FieldSelector/FieldSelector';
+import { HighlightsCard } from './components/molecules/HighlightsCard/HighlightsCard';
+import { InsuranceCard } from './components/molecules/InsuranceCard/InsuranceCard';
+import { PieChartComponent } from './components/molecules/PieChartComponent/PieChartComponent';
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from './components/molecules/Popover/Popover';
+import RadioGroup from './components/molecules/RadioBoxGroup/RadioBoxGroup';
+import { RadioGroupField } from './components/molecules/RadioGroupField';
+import { TabToggle } from './components/molecules/TabToggle/TabToggle';
+import { Timeline } from './components/molecules/TimeLine/TimeLine';
+import AlertDialog from './components/organisms/AlertDialog/AlertDialog';
+import {
+  DialogFooter,
+  DialogHeader,
+} from './components/organisms/Dialog/Dialog';
+import {
+  StyledDialogClose,
+  StyledDialogOverlay,
+} from './components/organisms/Dialog/Dialog.styles';
+import DonutEmissionsChart from './components/organisms/DonutEmissionsChart';
+import { ExportExcelModal } from './components/organisms/ExportExcelModal/ExportExcelModal';
+import {
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+  useFormField,
+} from './components/organisms/Form/Form';
+import { ListagemUltimasEmissoes } from './components/organisms/ListagemUltimasEmissoes/ListagemUltimasEmissoes';
+import NavbarContainer from './components/organisms/Navbar/Navbar';
+import { TimelineModal } from './components/organisms/TimelineModal/TimelineModal';
+import Tooltip from './components/atoms/Tooltip/Tooltip';
+
+export {
+  InsuranceCard,
+  DonutEmissionsChart,
+  RadioGroupField,
+  PieChartComponent,
+  AlertDialog,
+  FieldSelector,
+  BannerAjuda,
+  Badge,
+  ExportExcelModal,
+  Breadcrumb,
+  Button,
+  ButtonGroup,
+  Calendar,
+  CodeInput,
+  CodeInputContainer,
+  Checkbox,
+  DatePickerInput,
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  ListagemUltimasEmissoes,
+  DialogFooter,
+  DialogHeader,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+  DropdownMenu,
+  ErrorMessage,
+  HighlightsCard,
+  Footer,
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+  GenericContainer,
+  Loading,
+  LogoContainer,
+  ModalAviso,
+  MultiSelect,
+  Icon,
+  Input,
+  Label,
+  Pill,
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+  RadioButton,
+  RadioGroup,
+  ResendLink,
+  Select,
+  Subtitle,
+  StyledDialogClose,
+  StyledDialogOverlay,
+  Switch,
+  TabBar,
+  TabToggle,
+  Text,
+  Textarea,
+  Title,
+  useFormField,
+  Timeline,
+  TimelineModal,
+  NavbarContainer,
+  Tooltip,
+};
+
+export { primitiveBorders, semanticBorders } from './styles/tokens/borders';
+export { primitiveColors, semanticColors } from './styles/tokens/colors';
+export { primitiveRadius, semanticRadius } from './styles/tokens/radius';
+export { primitiveShadows, semanticShadows } from './styles/tokens/shadows';
+export { primitiveSizes, semanticSizes } from './styles/tokens/sizes';
+export { typographyTokens } from './styles/tokens/typography';
+
+export type { Radius } from './types/radius.types';
+export type { Shadows } from './types/shadows.types';