@granto-umbrella/umbrella-components 2.3.21 → 2.3.23

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@granto-umbrella/umbrella-components",
-  "version": "2.3.21",
+  "version": "2.3.23",
   "description": "Umbrella Components for React",
   "type": "module",
   "main": "src/index.js",
@@ -30,8 +30,9 @@
     "bump:major": "npm version major"
   },
   "dependencies": {
+    "@granto-umbrella/umbrella-components": "^2.3.21",
     "@phosphor-icons/react": "^2.1.7",
-    "@radix-ui/react-dialog": "^1.1.7",
+    "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-label": "^2.1.3",
     "@radix-ui/react-popover": "^1.1.11",
     "@radix-ui/react-radio-group": "^1.2.4",
@@ -41,7 +42,7 @@
     "react-datepicker": "^8.3.0",
     "react-day-picker": "^9.6.7",
     "react-dom": "^18.3.1",
-    "react-hook-form": "^7.54.2",
+    "react-hook-form": "^7.63.0",
     "react-select": "^5.10.0",
     "tailwind-merge": "^3.2.0"
   },

package/src/components/atoms/Badge/Badge.styles.ts

@@ -19,6 +19,7 @@ const badgeVariants = {
   danger: css`
     background: ${semanticColors.global.surface.danger.disabled};
     color: ${semanticColors.global.text.feedback.strong.error};
+    
   `,
   success: css`
     background: ${semanticColors.success.surface.feedback};
@@ -32,23 +33,33 @@ const badgeVariants = {
     background: ${semanticColors.neutral[200]};
     color: ${semanticColors.neutral[700]};
   `,
+  info: css`
+    background: ${semanticColors.info.surface.feedback};
+    color: ${semanticColors.info.text.feedback.strong};
+  `,
 };
 
 const badgeSizes = {
   sm: css`
-    padding: ${semanticSizes.global.padding.xs}${" "}${semanticSizes.global
-        .padding.sm};
+    padding: ${semanticSizes.global.padding.xs} ${semanticSizes.global.padding.sm};
     font-size: ${typographyTokens.fontSizes.labelS};
+    font-weight: ${typographyTokens.fontWeights.medium};
+    line-height: ${typographyTokens.lineHeights.labelS};
+    font-family: ${typographyTokens.fontFamily.base};
   `,
   md: css`
-    padding: ${semanticSizes.global.padding.sm}${" "}${semanticSizes.global
-        .padding.md};
+    padding: ${semanticSizes.global.padding.sm} ${semanticSizes.global.padding.md};
     font-size: ${typographyTokens.fontSizes.labelM};
+    font-weight: ${typographyTokens.fontWeights.medium};
+    line-height: ${typographyTokens.lineHeights.labelM};
+    font-family: ${typographyTokens.fontFamily.base};
   `,
   lg: css`
-    padding: ${semanticSizes.global.padding.md}${" "}${semanticSizes.global
-        .padding.lg};
+    padding: ${semanticSizes.global.padding.md} ${semanticSizes.global.padding.lg};
     font-size: ${typographyTokens.fontSizes.labelL};
+    font-weight: ${typographyTokens.fontWeights.medium};
+    line-height: ${typographyTokens.lineHeights.labelL};
+    font-family: ${typographyTokens.fontFamily.base};
   `,
 };
 
@@ -60,20 +71,16 @@ export const StyledBadge = styled.span<{
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  font-weight: 500;
   border-radius: ${({ $radius }) => semanticRadius.global.radius[$radius]};
+  gap: ${semanticSizes.global.gap.xs};
+  
   ${({ $size }) => badgeSizes[$size]}
   ${({ $variant }) => badgeVariants[$variant]}
 
-  gap: ${semanticSizes.global.gap.xs};
-
-  .icon-left {
-    margin-right: ${semanticSizes.global.padding.xs};
-    margin-top: ${semanticSizes.global.padding.xs};
-  }
-
+  .icon-left,
   .icon-right {
-    margin-left: ${semanticSizes.global.padding.xs};
-    margin-top: ${semanticSizes.global.padding.xs};
+    display: flex;
+    align-items: center;
+    line-height: 1;
   }
-`;
+`;;

package/src/components/atoms/Badge/Badge.tsx

@@ -2,6 +2,18 @@ import React from "react";
 import { StyledBadge } from "./Badge.styles";
 import { BadgeProps } from "./Badge.types";
 import * as Icons from "@phosphor-icons/react";
+import { semanticSizes } from "../../../styles/tokens/sizes"; 
+
+const getIconSize = (size: BadgeProps["size"]) => {
+  switch (size) {
+    case "sm":
+      return semanticSizes.global.padding.lg; 
+    case "lg":
+      return semanticSizes.global.padding['2xl']; 
+    default: // Caso 'md'
+      return semanticSizes.global.padding.xl; 
+  }
+};
 
 const Badge: React.FC<BadgeProps> = ({
   children,
@@ -11,26 +23,22 @@ const Badge: React.FC<BadgeProps> = ({
   leftIcon,
   rightIcon,
 }) => {
-  const IconComponentLeft =
-    leftIcon && (Icons[leftIcon as keyof typeof Icons] as React.ElementType);
-  const IconComponentRight =
-    rightIcon && (Icons[rightIcon as keyof typeof Icons] as React.ElementType);
+  const IconComponentLeft = leftIcon && (Icons[leftIcon as keyof typeof Icons] as React.ElementType);
+  const IconComponentRight = rightIcon && (Icons[rightIcon as keyof typeof Icons] as React.ElementType);
+  
+  const iconSize = getIconSize(size);
 
   return (
     <StyledBadge $size={size} $variant={variant} $radius={radius}>
       {IconComponentLeft && (
-        <span className="icon-left">
-          <IconComponentLeft size={16} />
-        </span>
+        <IconComponentLeft size={parseInt(iconSize)} />
       )}
       {children}
       {IconComponentRight && (
-        <span className="icon-right">
-          <IconComponentRight size={16} />
-        </span>
+        <IconComponentRight size={parseInt(iconSize)} />
       )}
     </StyledBadge>
   );
 };
 
-export default Badge;
+export default Badge;

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

@@ -7,8 +7,9 @@ export interface BadgeProps {
     | "danger"
     | "success"
     | "warning"
-    | "neutral";
+    | "neutral"
+    | "info"; 
   radius?: "sm" | "md" | "lg" | "full";
   leftIcon?: string;
   rightIcon?: string;
-}
+}

package/src/components/atoms/Breadcrumb/Breadcrumb.styles.ts

@@ -1,36 +1,43 @@
-import styled from "styled-components";
+import styled, { css } from "styled-components";
 import {
   semanticColors,
   semanticSizes,
   typographyTokens,
 } from "../../../styles/tokens";
 
+import { textStyles } from "../../../styles/tokens/typography"; 
+
 export const BreadcrumbContainer = styled.nav`
   display: flex;
   align-items: center;
-  font-size: ${typographyTokens.fontSizes.labelS};
-  color: ${semanticColors.neutral[500]};
+  font-family: ${typographyTokens.fontFamily.base};
+  ${css(textStyles.labelS)};
 `;
 
 export const BreadcrumbItem = styled.span<{ $isActive?: boolean }>`
   display: flex;
   align-items: center;
-  gap: ${semanticSizes.global.spacings.sm};
+  gap: ${semanticSizes.global.gap.xs};
   cursor: pointer;
+  
   color: ${({ $isActive }) =>
     $isActive
-      ? semanticColors.branding.text.accent.pressed
-      : semanticColors.neutral[500]};
-  font-weight: ${({ $isActive }) => ($isActive ? "bold" : "normal")};
+      ? semanticColors.branding.text.accent.enabled 
+      : semanticColors.global.text.onSurface.subtitle}; 
+
+  font-weight: ${({ $isActive }) => 
+    $isActive 
+      ? typographyTokens.fontWeights.semibold 
+      : typographyTokens.fontWeights.regular};
 
   &:hover {
-    color: ${semanticColors.branding.text.accent.hover};
+    color: ${semanticColors.branding.text.accent.hover}; 
   }
 `;
 
 export const BreadcrumbSeparator = styled.span`
   display: flex;
   align-items: center;
-  margin: 0 ${semanticSizes.global.spacings.sm};
-  color: ${semanticColors.neutral[400]};
-`;
+  margin: 0 ${semanticSizes.global.gap.xs}; 
+  color: ${semanticColors.global.text.onSurface.subtitle}; 
+`;

package/src/components/atoms/Breadcrumb/Breadcrumb.tsx

@@ -1,3 +1,5 @@
+// src/components/atoms/Breadcrumb/Breadcrumb.tsx
+
 import React from "react";
 import * as Icons from "@phosphor-icons/react";
 import { BreadcrumbProps } from "./Breadcrumb.types";
@@ -7,6 +9,9 @@ import {
   BreadcrumbSeparator,
 } from "./Breadcrumb.styles";
 
+
+import { semanticSizes } from "../../../styles/tokens/sizes"; 
+
 const Breadcrumb: React.FC<BreadcrumbProps> = ({
   items,
   separator = "chevron-right",
@@ -15,6 +20,9 @@ const Breadcrumb: React.FC<BreadcrumbProps> = ({
     separator as keyof typeof Icons
   ] as React.ElementType;
 
+
+  const iconSize = parseInt(semanticSizes.global.padding.lg);
+
   return (
     <BreadcrumbContainer>
       {items.map((item, index) => (
@@ -23,12 +31,12 @@ const Breadcrumb: React.FC<BreadcrumbProps> = ({
             onClick={() => item.onClick && item.onClick()}
             $isActive={index === items.length - 1}
           >
-            {item.icon && <item.icon size={16} />}
+            {item.icon && <item.icon size={iconSize} />}
             {item.label}
           </BreadcrumbItem>
           {index < items.length - 1 && (
             <BreadcrumbSeparator>
-              {SeparatorIcon && <SeparatorIcon size={16} />}
+              {SeparatorIcon && <SeparatorIcon size={iconSize} />}
             </BreadcrumbSeparator>
           )}
         </React.Fragment>
@@ -37,4 +45,4 @@ const Breadcrumb: React.FC<BreadcrumbProps> = ({
   );
 };
 
-export default Breadcrumb;
+export default Breadcrumb;

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

@@ -1,28 +1,26 @@
-import styled, { css } from "styled-components";
+import styled, { css } from 'styled-components';
 import {
   semanticColors,
   semanticSizes,
   semanticRadius,
   typographyTokens,
-} from "../../../styles/tokens";
+} from '../../../styles/tokens';
 
 const buttonSizes = {
   sm: css`
     padding: ${semanticSizes.global.padding.md};
     font-size: ${typographyTokens.fontSizes.labelS};
-    icon-size: ${semanticSizes.global.padding.lg};
+    
   `,
   md: css`
-    padding: ${semanticSizes.global.padding.md}${" "}${semanticSizes.global
-        .padding.lg};
+    padding: ${semanticSizes.global.padding.md}${' '}${semanticSizes.global.padding.xl};
     font-size: ${typographyTokens.fontSizes.bodyS};
-    icon-size: ${semanticSizes.global.padding.lg};
+    
   `,
   lg: css`
-    padding: ${semanticSizes.global.padding.md}${" "}${semanticSizes.global
-        .padding.xl};
+    padding: ${semanticSizes.global.padding.md}${' '}${semanticSizes.global.padding.xl};
     font-size: ${typographyTokens.fontSizes.bodyL};
-    icon-size: ${semanticSizes.global.padding.xl};
+   
   `,
 };
 
@@ -169,6 +167,82 @@ const buttonVariants = {
       color: ${semanticColors.neutral[400]};
     }
   `,
+
+  'danger-no-fill': css`
+    background: transparent;
+    color: ${semanticColors.danger.text.enabled};
+    border: none;
+    &:hover {
+      color: ${semanticColors.danger.text.hover};
+    }
+    &:active {
+      color: ${semanticColors.danger.text.pressed};
+    }
+    &:disabled {
+      color: ${semanticColors.danger.text.disabled};
+    }
+  `,
+  'accent-outline': css`
+    background: transparent;
+    color: ${semanticColors.branding.text.accent.enabled};
+    border: 1px solid ${semanticColors.branding.border.enabled};
+    &:hover {
+      color: ${semanticColors.branding.text.accent.hover};
+      border: 1px solid ${semanticColors.branding.border.hover};
+    }
+    &:active {
+      color: ${semanticColors.branding.text.accent.pressed};
+      border: 1px solid ${semanticColors.branding.border.pressed};
+    }
+    &:disabled {
+      color: ${semanticColors.branding.text.accent.disabled};
+      border: 1px solid ${semanticColors.branding.border.disabled};
+    }
+  `,
+  'accent-fill': css`
+    background: ${semanticColors.branding.surface.enabled};
+    color: ${semanticColors.branding.text.onSurfaceAccent.enabled};
+    border: none;
+    &:hover {
+      background: ${semanticColors.branding.surface.hover};
+    }
+    &:active {
+      background: ${semanticColors.branding.surface.pressed};
+    }
+    &:disabled {
+      background: ${semanticColors.branding.surface.disabled};
+    }
+  `,
+  'secondary-outline': css`
+    background: transparent;
+    color: ${semanticColors.global.text.subtitle.enabled};
+    border: 1px solid ${semanticColors.global.border.strong};
+    &:hover {
+      background: ${semanticColors.neutral[200]};
+    }
+    &:active {
+      background: ${semanticColors.neutral[300]};
+    }
+    &:disabled {
+      color: ${semanticColors.global.text.onSurface.enabled};
+      border: 1px solid ${semanticColors.global.text.onSurface.enabled};
+      background: ${semanticColors.global.surface.disabled};
+    }
+  `,
+  'danger-fill': css`
+    background: ${semanticColors.danger.surface.enabled};
+    color: ${semanticColors.danger.text.onSurface};
+    border: none;
+    &:hover {
+      background: ${semanticColors.danger.surface.hover};
+    }
+    &:active {
+      background: ${semanticColors.danger.surface.pressed};
+    }
+    &:disabled {
+      background: ${semanticColors.danger.surface.disabled};
+    }
+  `,
 };
 
 export const StyledButton = styled.button<{
@@ -186,7 +260,7 @@ export const StyledButton = styled.button<{
   font-weight: 500;
   border-radius: ${({ $radius }) =>
     semanticRadius.global.radius[
-      ($radius as keyof typeof semanticRadius.global.radius) || "md"
+      ($radius as keyof typeof semanticRadius.global.radius) || 'md'
     ]};
   cursor: pointer;
   transition: all 0.2s ease-in-out;
@@ -196,8 +270,8 @@ export const StyledButton = styled.button<{
   ${({ $size }) => buttonSizes[$size]}
   ${({ $variant }) => buttonVariants[$variant]}
 
-  width: ${({ $width }) => $width || "auto"};
-  height: ${({ $height }) => $height || "auto"};
+  width: ${({ $width }) => $width || 'auto'};
+  height: ${({ $height }) => $height || 'auto'};
 
   &:disabled {
     cursor: not-allowed;

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

@@ -10,7 +10,12 @@ export interface ButtonProps
     | "danger"
     | "ghost"
     | "ghost_alert"
-    | "alert";
+    | "alert"
+    | "danger-no-fill" 
+    | "accent-outline" 
+    | "accent-fill" 
+    | "secondary-outline" 
+    | "danger-fill"; 
   radius?: string;
   isLoading?: boolean;
   leftIcon?: string;

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

@@ -17,8 +17,8 @@ export const CheckboxWrapper = styled.label`
 `;
 
 export const StyledCheckbox = styled.input`
-  width: ${semanticSizes.global.padding.lg};
-  height: ${semanticSizes.global.padding.lg};
+  width: ${semanticSizes.global.padding.xl};
+  height: ${semanticSizes.global.padding.xl};
   border: 2px solid ${semanticColors.neutral[400]};
   border-radius: ${semanticRadius.global.radius.sm};
   appearance: none;
@@ -37,8 +37,8 @@ export const CheckboxIconWrapper = styled.div<{ checked?: boolean }>`
   align-items: center;
   justify-content: center;
   position: absolute;
-  width: ${semanticSizes.global.padding.lg};
-  height: ${semanticSizes.global.padding.lg};
+  width: ${semanticSizes.global.padding.xl};
+  height: ${semanticSizes.global.padding.xl};
   left: 0;
   top: 50%;
   transform: translateY(-50%);

package/src/components/atoms/Checkbox/Checkbox.tsx

@@ -7,6 +7,7 @@ import {
   CheckboxIconWrapper,
 } from "./Checkbox.styles";
 import { CheckboxProps } from "./Checkbox.types";
+import { semanticSizes } from "../../../styles/tokens"; 
 
 export const Checkbox: React.FC<CheckboxProps> = ({
   label,
@@ -26,7 +27,7 @@ export const Checkbox: React.FC<CheckboxProps> = ({
       />
       {checked && (
         <CheckboxIconWrapper>
-          <Check size={8} weight="bold" />
+          <Check size={semanticSizes.global.padding.sm} weight="bold" />
         </CheckboxIconWrapper>
       )}
       {label && <CheckboxLabel>{label}</CheckboxLabel>}

package/src/components/atoms/CodeInput/CodeInput.styles.tsx

@@ -0,0 +1,39 @@
+
+import {
+  primitiveSizes,
+  semanticBorders,
+  semanticColors,
+  semanticSizes,
+  semanticRadius,
+  typographyTokens,
+} from "../../../styles/tokens";
+import { styled } from "styled-components";
+
+const borderColor = semanticColors.global.border.strong;
+const inputWidth = semanticSizes.global.spacings.lg;
+const inputHeight = primitiveSizes.size.x14;
+const fontSize = typographyTokens.fontSizes.labelL;
+const borderRadius = semanticRadius.global.radius.md;
+const borderStyle = semanticBorders.global.sm;
+
+export const StyledCodeInput = styled.input`
+  width: ${inputWidth};
+  height: ${inputHeight};
+  font-size: ${fontSize};
+  text-align: center;
+  border-top: ${borderStyle} solid ${borderColor};
+  border-bottom: ${borderStyle} solid ${borderColor};
+  border-left: 0;
+  border-right: ${borderStyle} solid ${borderColor};
+  
+  &:first-child {
+    border-top-left-radius: ${borderRadius};
+    border-bottom-left-radius: ${borderRadius};
+    border-left: ${borderStyle} solid ${borderColor};
+  }
+  
+  &:last-child {
+    border-top-right-radius: ${borderRadius};
+    border-bottom-right-radius: ${borderRadius};
+  }
+`;

package/src/components/atoms/CodeInput/CodeInput.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+import { StyledCodeInput } from "./CodeInput.styles";
+import { CodeInputProps } from "./CodeInput.types";
+
+const CodeInput = React.forwardRef<HTMLInputElement, CodeInputProps>(
+  ({ ...props }, ref) => {
+    return (
+      <StyledCodeInput
+        ref={ref}
+        type="text"
+        {...props}
+      />
+    );
+  }
+);
+
+CodeInput.displayName = "CodeInput";
+
+export default CodeInput;

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

@@ -0,0 +1,3 @@
+import { InputHTMLAttributes } from "react";
+
+export type CodeInputProps = InputHTMLAttributes<HTMLInputElement>;

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

@@ -0,0 +1 @@
+export { default } from "./CodeInput";

package/src/components/atoms/Input/Input.styles.ts

@@ -1,4 +1,4 @@
-import styled from "styled-components";
+import styled, { css } from 'styled-components';
 import {
   semanticColors,
   semanticShadows,
@@ -7,7 +7,22 @@ import {
   semanticSizes,
   semanticBorders,
   typographyTokens,
-} from "../../../styles/tokens";
+} from '../../../styles/tokens';
+
+const inputSizes = {
+sm: css`
+padding: ${semanticSizes.global.padding.md} ${semanticSizes.global.padding.lg};
+gap: ${semanticSizes.global.gap.sm};
+`,
+md: css`
+padding: ${semanticSizes.global.padding.lg} ${semanticSizes.global.padding.xl};
+gap: ${semanticSizes.global.gap.md};
+`,
+lg: css`
+padding: ${semanticSizes.global.padding['2xl']} ${semanticSizes.global.padding['3xl']};
+gap: ${semanticSizes.global.gap.lg};
+`,
+};
 
 export const Container = styled.div`
   display: flex;
@@ -34,19 +49,20 @@ export const InputWrapper = styled.div<{
   $disabled?: boolean;
   $radius?: keyof typeof semanticRadius.global.radius;
   $shadow?: keyof typeof semanticShadows.shadow;
+  $size: keyof typeof inputSizes;
 }>`
   display: flex;
   align-items: center;
-  padding: ${semanticSizes.global.padding.md} ${semanticSizes.global.padding.lg};
-  gap: ${semanticSizes.global.gap.md};
 
-  box-shadow: ${({ $shadow }) => semanticShadows.shadow[$shadow || "default"]};
+  ${({ $size }) => inputSizes[$size]}
+
+  box-shadow: ${({ $shadow }) => semanticShadows.shadow[$shadow || 'default']};
   border-radius: ${semanticBorders.global.lg};
   border: 1px solid
     ${({ $error }) =>
       $error
         ? semanticColors.danger.border.enabled
-        : semanticColors.neutral[300]};
+        : semanticColors.global.border.medium};
   background-color: ${({ $disabled }) =>
     $disabled ? semanticColors.neutral[100] : semanticColors.base.background};
   transition: border-color 0.2s, box-shadow 0.2s;
@@ -65,10 +81,10 @@ export const StyledInput = styled.input`
   border: none;
   outline: none;
   font-size: ${typographyTokens.fontSizes.labelM};
-  color: ${semanticColors.global.text.onSurface.enabled};
+  color: ${semanticColors.global.text.default.enabled};
 
   &::placeholder {
-    color: ${semanticColors.neutral[300]};
+    color: ${semanticColors.global.text.onSurface.enabled};
   }
 
   &:disabled {

package/src/components/atoms/Input/Input.tsx

@@ -1,5 +1,5 @@
-import React, { forwardRef } from "react";
-import { InputProps } from "./Input.types";
+import React, { forwardRef } from 'react';
+import { InputProps } from './Input.types';
 import {
   Container,
   Label,
@@ -7,14 +7,14 @@ import {
   StyledInput,
   Icon,
   SupportText,
-} from "./Input.styles";
+} from './Input.styles';
 
 function mergeRefs<T>(
   ...refs: (React.Ref<T> | null | undefined)[]
 ): React.RefCallback<T> {
   return (value: T) => {
     refs.forEach((ref) => {
-      if (typeof ref === "function") {
+      if (typeof ref === 'function') {
         ref(value);
       } else if (ref != null) {
         (ref as React.MutableRefObject<T | null>).current = value;
@@ -26,8 +26,8 @@ function mergeRefs<T>(
 const Input = forwardRef<HTMLInputElement, InputProps>(
   (
     {
-      type = "text",
-      placeholder = "",
+      type = 'text',
+      placeholder = '',
       value,
       onChange,
       error = false,
@@ -35,8 +35,9 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
       icon,
       label,
       supportText,
-      radius = "md" as "md" | "lg" | "sm" | "full",
-      shadow = "default" as "none" | "default" | "md" | "lg",
+      size = 'md',
+      radius = 'md' as 'md' | 'lg' | 'sm' | 'full',
+      shadow = 'default' as 'none' | 'default' | 'md' | 'lg',
       style,
       register,
       testId,
@@ -53,6 +54,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
           $disabled={disabled}
           $radius={radius}
           $shadow={shadow}
+          $size={size}
         >
           {icon && <Icon>{icon}</Icon>}
           <StyledInput
@@ -75,5 +77,4 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
     );
   }
 );
-
 export default Input;