@granto-umbrella/umbrella-components 3.0.33 → 3.0.36

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

@@ -1,101 +1,106 @@
-import styled, { css } from 'styled-components';
-import {
-  semanticColors,
-  semanticShadows,
-  semanticRadius,
-  primitiveSizes,
-  semanticSizes,
-  semanticBorders,
-  typographyTokens,
-} 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;
-  flex-direction: column;
-  gap: ${primitiveSizes.size.x1};
-`;
-
-export const Label = styled.label`
-  font-size: ${typographyTokens.fontSizes.labelS};
-  color: ${semanticColors.global.text.subtitle.enabled};
-  font-weight: ${typographyTokens.fontWeights.medium};
-`;
-
-export const SupportText = styled.span<{ $error?: boolean }>`
-  font-size: ${typographyTokens.fontSizes.captionM};
-  color: ${({ $error }) =>
-    $error
-      ? semanticColors.danger.text.enabled
-      : semanticColors.global.text.subtitle.enabled};
-`;
-
-export const InputWrapper = styled.div<{
-  $error?: boolean;
-  $disabled?: boolean;
-  $radius?: keyof typeof semanticRadius.global.radius;
-  $shadow?: keyof typeof semanticShadows.shadow;
-  $size: keyof typeof inputSizes;
-}>`
-  display: flex;
-  align-items: center;
-
-  ${({ $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.global.border.medium};
-  background-color: ${({ $disabled }) =>
-    $disabled ? semanticColors.neutral[100] : semanticColors.base.background};
-  transition: border-color 0.2s, box-shadow 0.2s;
-
-  &:focus-within {
-    border-color: ${({ $error }) =>
-      $error
-        ? semanticColors.danger.border.enabled
-        : semanticColors.branding.border.enabled};
-  }
-`;
-
-export const StyledInput = styled.input`
-  display: flex;
-  width: 100%;
-  border: none;
-  outline: none;
-  font-size: ${typographyTokens.fontSizes.labelM};
-  color: ${semanticColors.global.text.default.enabled};
-
-  &::placeholder {
-    color: ${semanticColors.global.text.onSurface.enabled};
-  }
-
-  &:disabled {
-    background-color: transparent;
-    cursor: not-allowed;
-  }
-`;
-
-export const Icon = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: ${semanticColors.neutral[400]};
-`;
+import styled, { css } from 'styled-components';
+import {
+  semanticColors,
+  semanticShadows,
+  semanticRadius,
+  primitiveSizes,
+  semanticSizes,
+  semanticBorders,
+  typographyTokens,
+} 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;
+  flex-direction: column;
+  gap: ${primitiveSizes.size.x1};
+`;
+
+export const Label = styled.label`
+  font-size: ${typographyTokens.fontSizes.labelS};
+  color: ${semanticColors.global.text.subtitle.enabled};
+  font-weight: ${typographyTokens.fontWeights.medium};
+`;
+
+export const SupportText = styled.span<{ $error?: boolean }>`
+  font-size: ${typographyTokens.fontSizes.captionM};
+  color: ${({ $error }) =>
+    $error
+      ? semanticColors.danger.text.enabled
+      : semanticColors.global.text.subtitle.enabled};
+`;
+
+export const InputWrapper = styled.div<{
+  $error?: boolean;
+  $disabled?: boolean;
+  $radius?: keyof typeof semanticRadius.global.radius;
+  $shadow?: keyof typeof semanticShadows.shadow;
+  $size: keyof typeof inputSizes;
+}>`
+  display: flex;
+  align-items: center;
+
+  ${({ $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.global.border.medium};
+  background-color: ${({ $disabled }) =>
+    $disabled ? semanticColors.neutral[100] : semanticColors.base.background};
+  transition:
+    border-color 0.2s,
+    box-shadow 0.2s;
+
+  &:focus-within {
+    border-color: ${({ $error }) =>
+      $error
+        ? semanticColors.danger.border.enabled
+        : semanticColors.branding.border.enabled};
+  }
+`;
+
+export const StyledInput = styled.input`
+  display: flex;
+  width: 100%;
+  border: none;
+  outline: none;
+  font-size: ${typographyTokens.fontSizes.labelM};
+  color: ${semanticColors.global.text.default.enabled};
+
+  &::placeholder {
+    color: ${semanticColors.global.text.onSurface.enabled};
+  }
+
+  &:disabled {
+    background-color: transparent;
+    cursor: not-allowed;
+  }
+`;
+
+export const Icon = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: ${semanticColors.neutral[400]};
+`;

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

@@ -1 +1 @@
-export { default } from "./Input";
+export { default } from './Input';

package/src/components/atoms/Label/Label.tsx

@@ -1,16 +1,16 @@
-// Label.tsx
-import * as React from "react";
-import { StyledLabel } from "./Label.styles";
-
-export type LabelProps = React.ComponentProps<typeof StyledLabel>;
-
-export const Label = React.forwardRef<HTMLLabelElement, LabelProps>(
-  ({ children, ...props }, ref) => {
-    return (
-      <StyledLabel ref={ref} {...props}>
-        {children}
-      </StyledLabel>
-    );
-  }
-);
-Label.displayName = "Label";
+// Label.tsx
+import * as React from 'react';
+import { StyledLabel } from './Label.styles';
+
+export type LabelProps = React.ComponentProps<typeof StyledLabel>;
+
+export const Label = React.forwardRef<HTMLLabelElement, LabelProps>(
+  ({ children, ...props }, ref) => {
+    return (
+      <StyledLabel ref={ref} {...props}>
+        {children}
+      </StyledLabel>
+    );
+  }
+);
+Label.displayName = 'Label';

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

@@ -1,23 +1,25 @@
-import styled, { keyframes } from "styled-components";
-import {
-  semanticBorders,
-  semanticColors,
-  semanticRadius,
-  semanticSizes,
-} from "@/styles/tokens";
-
-const spin = keyframes`
-  to { 
-    transform: rotate(360deg); 
-  }
-`;
-
-export const StyledLoader = styled.div`
-  margin: ${semanticSizes.global.spacings.lg} auto;
-  border: ${semanticBorders.global.lg} solid ${semanticColors.global.border.default};
-  border-top: ${semanticBorders.global.lg} solid ${semanticColors.info.border.feedback};
-  border-radius: ${semanticRadius.global.radius.full};
-  width: ${semanticSizes.global.spacings.md};
-  height: ${semanticSizes.global.spacings.md};
-  animation: ${spin} 1s linear infinite;
-`;
+import styled, { keyframes } from 'styled-components';
+import {
+  semanticBorders,
+  semanticColors,
+  semanticRadius,
+  semanticSizes,
+} from '../../../styles/tokens';
+
+const spin = keyframes`
+  to { 
+    transform: rotate(360deg); 
+  }
+`;
+
+export const StyledLoader = styled.div`
+  margin: ${semanticSizes.global.spacings.lg} auto;
+  border: ${semanticBorders.global.lg} solid
+    ${semanticColors.global.border.default};
+  border-top: ${semanticBorders.global.lg} solid
+    ${semanticColors.info.border.feedback};
+  border-radius: ${semanticRadius.global.radius.full};
+  width: ${semanticSizes.global.spacings.md};
+  height: ${semanticSizes.global.spacings.md};
+  animation: ${spin} 1s linear infinite;
+`;

package/src/components/atoms/Loading/Loading.tsx

@@ -1,8 +1,8 @@
-import React from "react";
-import { StyledLoader } from "./Loading.styles";
-
-const Loader: React.FC = () => {
-  return <StyledLoader />;
-};
-
-export default Loader;
+import React from 'react';
+import { StyledLoader } from './Loading.styles';
+
+const Loader: React.FC = () => {
+  return <StyledLoader />;
+};
+
+export default Loader;

package/src/components/atoms/LogoContainer/LogoContainer.Types.tsx

@@ -1,5 +1,5 @@
-export interface LogoContainerProps {
-  src: string;
-  alt?: string;
-  margintBottom?: string;
-}
+export interface LogoContainerProps {
+  src: string;
+  alt?: string;
+  margintBottom?: string;
+}

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

@@ -1,11 +1,11 @@
-import styled from "styled-components";
-import { primitiveSizes } from "@/styles/tokens";
-
-export const Logo = styled.img<{ marginBottom?: string }>`
-  margin-bottom: ${(props) => props.marginBottom || primitiveSizes.size.x6};
-  width: 112px;
-  
-  @media (max-width: 768px) {
-    width: 114.12px;
-  }
-`;
+import styled from 'styled-components';
+import { primitiveSizes } from '../../../styles/tokens';
+
+export const Logo = styled.img<{ marginBottom?: string }>`
+  margin-bottom: ${(props) => props.marginBottom || primitiveSizes.size.x6};
+  width: 112px;
+
+  @media (max-width: 768px) {
+    width: 114.12px;
+  }
+`;

package/src/components/atoms/LogoContainer/LogoContainer.tsx

@@ -1,11 +1,11 @@
-import React from "react";
-import { Logo } from "./LogoContainer.styles";
-import { LogoContainerProps } from "./LogoContainer.Types";
-
-export const LogoContainer: React.FC<LogoContainerProps> = ({ 
-  src, 
-  alt, 
-  margintBottom 
-}) => {
-  return <Logo src={src} alt={alt} marginBottom={margintBottom} />;
-};
+import React from 'react';
+import { Logo } from './LogoContainer.styles';
+import { LogoContainerProps } from './LogoContainer.Types';
+
+export const LogoContainer: React.FC<LogoContainerProps> = ({
+  src,
+  alt,
+  margintBottom,
+}) => {
+  return <Logo src={src} alt={alt} marginBottom={margintBottom} />;
+};

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

@@ -1 +1 @@
-export { LogoContainer } from "./LogoContainer";
+export { LogoContainer } from './LogoContainer';

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

@@ -1,55 +1,56 @@
-// ModalAviso.styles.tsx
-import styled from "styled-components";
-import { 
-  primitiveColors,
-  semanticSizes,
-  semanticRadius,
-  typographyTokens, 
-  semanticBorders
-}  from "../../../styles/tokens";
-import { semanticColors } from "@/styles/tokens";
-
-export const Wrapper = styled.div`
-  position: fixed;
-  bottom: calc(${semanticSizes.global.spacings.lg} + 10px); 
-  right: ${semanticSizes.global.padding.lg};
-  z-index: 9999;
-`;
-
-export const Container = styled.div`
-  background-color: ${semanticColors.info.surface.feedback};
-  border-radius: ${semanticRadius.global.radius.md2};
-  border: ${semanticBorders.global.md} solid ${semanticColors.info.border.feedback};
-  padding: ${semanticSizes.global.padding.md} ${semanticSizes.global.padding.lg};
-  display: flex;
-  align-items: start;
-  justify-content: space-between;
-  gap: ${semanticSizes.global.gap.md};
-  max-width: 600px;
-`;
-
-export const Content = styled.div`
-  flex: 1;
-`;
-
-export const Title = styled.p`
-  color: ${semanticColors.info.text.feedback.strong};
-  font-weight: ${typographyTokens.fontWeights.semibold};
-  font-size: ${typographyTokens.fontSizes.bodyM};
-  margin: 0 0 ${semanticSizes.global.gap.xs} 0;
-`;
-
-export const Description = styled.p`
-  color: ${primitiveColors.gray[800]};
-  font-size: ${typographyTokens.fontSizes.bodyS};
-  margin: 0;
-`;
-
-export const CloseButton = styled.button`
-  background: transparent;
-  border: none;
-  padding: 0;
-  cursor: pointer;
-  color: ${primitiveColors.gray[600]};
-  line-height: 0;
-`;
+// ModalAviso.styles.tsx
+import styled from 'styled-components';
+import {
+  primitiveColors,
+  semanticSizes,
+  semanticRadius,
+  typographyTokens,
+  semanticBorders,
+} from '../../../styles/tokens';
+import { semanticColors } from '../../../styles/tokens';
+
+export const Wrapper = styled.div`
+  position: fixed;
+  bottom: calc(${semanticSizes.global.spacings.lg} + 10px);
+  right: ${semanticSizes.global.padding.lg};
+  z-index: 9999;
+`;
+
+export const Container = styled.div`
+  background-color: ${semanticColors.info.surface.feedback};
+  border-radius: ${semanticRadius.global.radius.md2};
+  border: ${semanticBorders.global.md} solid
+    ${semanticColors.info.border.feedback};
+  padding: ${semanticSizes.global.padding.md} ${semanticSizes.global.padding.lg};
+  display: flex;
+  align-items: start;
+  justify-content: space-between;
+  gap: ${semanticSizes.global.gap.md};
+  max-width: 600px;
+`;
+
+export const Content = styled.div`
+  flex: 1;
+`;
+
+export const Title = styled.p`
+  color: ${semanticColors.info.text.feedback.strong};
+  font-weight: ${typographyTokens.fontWeights.semibold};
+  font-size: ${typographyTokens.fontSizes.bodyM};
+  margin: 0 0 ${semanticSizes.global.gap.xs} 0;
+`;
+
+export const Description = styled.p`
+  color: ${primitiveColors.gray[800]};
+  font-size: ${typographyTokens.fontSizes.bodyS};
+  margin: 0;
+`;
+
+export const CloseButton = styled.button`
+  background: transparent;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+  color: ${primitiveColors.gray[600]};
+  line-height: 0;
+`;

package/src/components/atoms/ModalAviso/ModalAviso.tsx

@@ -1,37 +1,43 @@
-import React, { useEffect } from "react";
-import { X } from "lucide-react";
-import { CloseButton, Container, Content, Description, Title, Wrapper } from "./ModalAviso.styles";
-import { ModalAvisoProps } from "./ModalAviso.types";
-
-export const ModalAviso: React.FC<ModalAvisoProps> = ({
-  title,
-  description,
-  onClose,
-}) => {
-  
-  useEffect(() => {
-    if (onClose) {
-      const timer = setTimeout(() => {
-        onClose();
-      }, 3000);
-
-      return () => clearTimeout(timer);
-    }
-  }, [onClose]);
-
-  return (
-    <Wrapper>
-      <Container>
-        <Content>
-          <Title>{title}</Title>
-          <Description>{description}</Description>
-        </Content>
-        {onClose && (
-          <CloseButton onClick={onClose}>
-            <X size={22} />
-          </CloseButton>
-        )}
-      </Container>
-    </Wrapper>
-  );
-};
+import React, { useEffect } from 'react';
+import { X } from 'lucide-react';
+import {
+  CloseButton,
+  Container,
+  Content,
+  Description,
+  Title,
+  Wrapper,
+} from './ModalAviso.styles';
+import { ModalAvisoProps } from './ModalAviso.types';
+
+export const ModalAviso: React.FC<ModalAvisoProps> = ({
+  title,
+  description,
+  onClose,
+}) => {
+  useEffect(() => {
+    if (onClose) {
+      const timer = setTimeout(() => {
+        onClose();
+      }, 3000);
+
+      return () => clearTimeout(timer);
+    }
+  }, [onClose]);
+
+  return (
+    <Wrapper>
+      <Container>
+        <Content>
+          <Title>{title}</Title>
+          <Description>{description}</Description>
+        </Content>
+        {onClose && (
+          <CloseButton onClick={onClose}>
+            <X size={22} />
+          </CloseButton>
+        )}
+      </Container>
+    </Wrapper>
+  );
+};

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

@@ -1,5 +1,5 @@
-export interface ModalAvisoProps {
-  title: string;
-  description: string;
-  onClose?: () => void;
-}
+export interface ModalAvisoProps {
+  title: string;
+  description: string;
+  onClose?: () => void;
+}

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

@@ -1 +1 @@
-export { ModalAviso } from "./ModalAviso";
+export { ModalAviso } from './ModalAviso';