@granto-umbrella/umbrella-components 3.0.28 → 3.0.30

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@granto-umbrella/umbrella-components",
-  "version": "3.0.28",
+  "version": "3.0.30",
   "description": "Umbrella Components for React",
   "type": "module",
   "main": "src/index.js",
@@ -36,8 +36,10 @@
     "@radix-ui/react-label": "^2.1.3",
     "@radix-ui/react-popover": "^1.1.11",
     "@radix-ui/react-radio-group": "^1.2.4",
+    "cpf-cnpj-validator": "^1.0.3",
     "date-fns": "^4.1.0",
     "lucide-react": "^0.488.0",
+    "make-mask": "^1.0.3",
     "phosphor-react": "^1.4.1",
     "radix": "^0.0.0",
     "react": "^18.3.1",
@@ -76,7 +78,6 @@
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "react-icons": "^5.4.0",
-    "storybook": "8.4.7",
     "styled-components": "^6.1.19",
     "ts-jest": "^29.2.5",
     "typescript": "~5.6.2",

package/src/components/atoms/{Tapbar/Tapbar.tsx → TabBar/TabBar.tsx}

@@ -1,6 +1,6 @@
-import React from "react";
-import { Count, Tab, Wrapper } from "./Tapbar.styles";
-import { TapbarProps } from "./Tapbar.types";
+import React from 'react';
+import { Count, Tab, Wrapper } from './TabBar.styles';
+import { TapbarProps } from './TabBar.types';
 
 export const Tapbar: React.FC<TapbarProps> = ({
   items,
@@ -17,8 +17,8 @@ export const Tapbar: React.FC<TapbarProps> = ({
         id={item.testId}
       >
         <span>{item.title}</span>
-        {typeof item.quantity === "number" && <Count>({item.quantity})</Count>}
+        {typeof item.quantity === 'number' && <Count>({item.quantity})</Count>}
       </Tab>
     ))}
   </Wrapper>
-);
+);

package/src/components/atoms/TabBar/index.tsx

@@ -0,0 +1,2 @@
+export { Tapbar } from './TabBar';
+export type { TapbarProps, TabItem } from './TabBar.types';

package/src/components/molecules/InsuranceCard/InsuranceCard.styles.tsx

@@ -1,63 +1,121 @@
 /* eslint-disable react-refresh/only-export-components */
-import styled from "styled-components";
-import { StatusVariant } from "./InsuranceCard.types";
-import {
-  semanticColors,
-  primitiveColors,
-  semanticSizes,
-  semanticRadius,
-} from "../../../styles/tokens";
-
-// Movendo os Records para o topo antes dos componentes
-export const variantColors: Record<StatusVariant, string> = {
-  primary: semanticColors.info.border.feedback,
-  success: semanticColors.global.border.feedback.success,
-  warning: semanticColors.border.feedback,
-  danger: semanticColors.global.border.feedback.error,
-};
+import styled from 'styled-components';
+import { semanticColors } from '@granto-umbrella/umbrella-components';
+import { StatusVariant } from './InsuranceCard.types';
 
-export const variantColorsText: Record<StatusVariant, string> = {
-  primary: semanticColors.global.text.onSurface.enabled,
-  success: semanticColors.global.text.feedback.success,
-  warning: semanticColors.global.text.feedback.warning,
-  danger: semanticColors.global.text.feedback.error,
-};
+export const PageContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  max-width: 600px;
+  margin: 0 auto;
+  padding: 24px;
+`;
+
+export const Title = styled.h2`
+  font-size: 1.25rem;
+  font-weight: 600;
+  color: #2d3748;
+`;
+
+export const TabBar = styled.div`
+  display: flex;
+  gap: 12px;
+`;
+
+export const Tab = styled.button<{ active?: boolean }>`
+  padding: 8px 16px;
+  font-size: 0.875rem;
+  font-weight: 600;
+  border: none;
+  border-bottom: 2px solid transparent;
+  background: none;
+  cursor: pointer;
+  color: ${(props) =>
+    props.active ? semanticColors.branding.surface.enabled : '#718096'};
+  border-color: ${(props) =>
+    props.active ? semanticColors.branding.border.enabled : 'transparent'};
+`;
+
+export const ListContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+`;
 
 export const CardContainer = styled.div<{ $variant: StatusVariant }>`
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   width: 100%;
-  gap: ${semanticSizes.global.gap.sm};
-  padding: ${semanticSizes.global.padding.lg};
+  gap: 8px;
+  padding: 16px;
   border-top: 4px solid ${(props) => variantColors[props.$variant]};
-  border-radius: ${semanticRadius.global.radius.md2};
-  background-color: ${semanticColors.global.surface.default};
+  border-radius: 8px;
+  background-color: #fff;
 `;
 
 export const HeaderRow = styled.div`
   display: flex;
   align-items: center;
-  gap: ${semanticSizes.global.gap.xl};
+  gap: 24px;
 `;
 
 export const BodyRow = styled.div`
   display: flex;
-  gap: ${semanticSizes.global.gap.xl};
+  gap: 24px;
   justify-content: space-between;
 
   @media (max-width: 768px) {
     flex-direction: column;
-    gap: ${semanticSizes.global.gap.lg};
+    gap: 16px;
   }
 `;
 
+export const variantColors: Record<StatusVariant, string> = {
+  primary: semanticColors.global.border.feedback.info,
+  success: semanticColors.global.border.feedback.success,
+  warning: semanticColors.global.border.feedback.warning,
+  danger: semanticColors.global.border.feedback.error,
+};
+
+export const variantColorsText: Record<StatusVariant, string> = {
+  primary: semanticColors.global.text.onSurface.enabled,
+  success: semanticColors.global.text.feedback.success,
+  warning: semanticColors.global.text.feedback.warning,
+  danger: semanticColors.global.text.feedback.error,
+};
+
 export const Text = styled.span<{ $variant?: StatusVariant }>`
   font-size: 10px;
   color: ${(props) =>
     props.$variant ? variantColors[props.$variant] : variantColorsText.primary};
 `;
 
+export const StatusBadge = styled.span<{ $variant: StatusVariant }>`
+  padding: 4px 8px;
+  font-size: 0.75rem;
+  font-weight: 600;
+  border-radius: 4px;
+  color: #fff;
+  background-color: ${(props) => variantColors[props.$variant]};
+`;
+export const InfoGroup = styled.div`
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+  gap: 32px;
+  align-items: start;
+  width: 100%;
+  @media (max-width: 1200px) {
+    gap: 24px;
+  }
+
+  @media (max-width: 768px) {
+    grid-template-columns: 1fr;
+    gap: 16px;
+  }
+`;
+
 export const InfoRow = styled.div`
   display: flex;
   width: 100%;
@@ -69,14 +127,14 @@ export const InfoRow = styled.div`
 
 export const InfoLabel = styled.span`
   font-size: 12px;
-  color: ${primitiveColors.gray[600]};
-  margin-bottom: ${semanticSizes.global.gap.md};
+  color: #4a5568;
+  margin-bottom: 12px;
 `;
 
 export const InfoValue = styled.span`
   font-size: 14px;
   font-weight: 900;
-  color: ${primitiveColors.gray[900]};
+  color: #2d3748;
 `;
 
 export const TruncatedValue = styled(InfoValue)`
@@ -102,7 +160,7 @@ export const ProcessValue = styled(InfoValue)`
 
 export const InfoSubValue = styled.span`
   font-size: 12px;
-  color: ${primitiveColors.gray[900]};
+  color: #2d3748;
   line-height: 1.4;
 `;
 
@@ -121,14 +179,14 @@ export const ActionButton = styled.button`
   min-width: 170px;
   max-width: 100%;
   align-items: center;
-  gap: ${semanticSizes.global.gap.sm};
-  padding: ${semanticSizes.global.padding.sm} ${semanticSizes.global.padding.md};
+  gap: 0.5rem;
+  padding: 8px 12px;
   font-size: 0.875rem;
   font-weight: 600;
   border: none;
-  border-radius: ${semanticRadius.global.radius.md};
+  border-radius: 4px;
   background-color: ${semanticColors.branding.border.enabled};
-  color: ${primitiveColors.base.white};
+  color: #fff;
   cursor: pointer;
   transition: opacity 0.2s;
 
@@ -144,31 +202,36 @@ export const ActionButton = styled.button`
 export const DropdownMenu = styled.div`
   position: absolute;
   right: 0;
-  background-color: ${semanticColors.global.surface.default};
-  border-radius: ${semanticRadius.global.radius.md};
+  background-color: #fff;
+  border-radius: 4px;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
   display: grid;
-  gap: ${semanticSizes.global.gap.xs};
-  padding: ${semanticSizes.global.padding.sm} 0;
+  gap: 4px;
+  padding: 8px 0;
   width: 100%;
   z-index: 10;
 `;
 
+export interface MenuItemProps {
+  icon: React.ReactNode;
+  danger?: boolean;
+  children: React.ReactNode;
+  onClick?: () => void;
+  id?: string;
+}
+
 export const StyledMenuItem = styled.div<{ $danger?: boolean }>`
   color: ${(props) =>
-    props.$danger
-      ? semanticColors.danger.text.enabled
-      : primitiveColors.gray[900]};
+    props.$danger ? semanticColors.danger.text.enabled : '#2d3748'};
   display: inline-grid;
   grid-auto-flow: column;
   align-items: center;
   justify-content: flex-start;
-  gap: ${semanticSizes.global.gap.sm};
-  padding: ${semanticSizes.global.padding.sm} ${semanticSizes.global.padding.md};
+  gap: 8px;
+  padding: 8px 12px;
   font-size: 0.875rem;
   cursor: pointer;
-  
   &:hover {
-    background-color: ${primitiveColors.gray[100]};
+    background-color: rgba(0, 0, 0, 0.05);
   }
-`;
+`;