@granto-umbrella/umbrella-components 3.0.34 → 3.0.36

package/src/components/molecules/Calendar/Calendar.styles.ts

@@ -1,143 +1,143 @@
-import styled from "styled-components";
-import { DayPicker as RDPDayPicker } from "react-day-picker";
-
-export const StyledDayPicker = styled(RDPDayPicker)`
-  padding: 0.75rem; /* p-3 */
-
-  /* Estilo para o container dos meses */
-  .rdp-months {
-    display: flex;
-    flex-direction: column;
-    gap: 1rem; /* equivalente a space-y-4 */
-  }
-
-  @media (min-width: 640px) {
-    .rdp-months {
-      flex-direction: row;
-      gap: 0 1rem; /* sm:flex-row com space-x-4 e sm:space-y-0 */
-    }
-  }
-
-  /* Cada mês */
-  .rdp-month {
-    margin-bottom: 1rem;
-  }
-
-  /* Legenda (caption) do mês */
-  .rdp-caption {
-    display: flex;
-    justify-content: center;
-    padding-top: 0.25rem; /* pt-1 */
-    position: relative;
-    align-items: center;
-  }
-
-  .rdp-caption_label {
-    font-size: 0.875rem; /* text-sm */
-    font-weight: 500; /* font-medium */
-  }
-
-  /* Navegação */
-  .rdp-nav {
-    display: flex;
-    align-items: center;
-    gap: 0.25rem; /* space-x-1 */
-    position: relative;
-  }
-
-  .rdp-nav_button {
-    height: 1.75rem; /* h-7 */
-    width: 1.75rem; /* w-7 */
-    background: transparent;
-    padding: 0;
-    opacity: 0.5;
-    /* Pode-se definir aqui estilos de border se desejar imitar o buttonVariants({ variant: "outline" }) */
-    border: 1px solid #d1d5db;
-    cursor: pointer;
-    transition: opacity 0.2s ease;
-
-    &:hover {
-      opacity: 1;
-    }
-  }
-
-  .rdp-nav_button_previous {
-    position: absolute;
-    left: 0.25rem; /* left-1 */
-  }
-
-  .rdp-nav_button_next {
-    position: absolute;
-    right: 0.25rem; /* right-1 */
-  }
-
-  /* Tabela de dias */
-  .rdp-table {
-    width: 100%; /* w-full */
-    border-collapse: collapse;
-    margin-top: 0.25rem; /* espaço vertical */
-  }
-
-  .rdp-head_row {
-    display: flex;
-  }
-
-  .rdp-head_cell {
-    font-size: 0.8rem; /* text-[0.8rem] */
-    color: #6b7280; /* text-muted-foreground */
-    border-radius: 0.375rem; /* rounded-md */
-    width: 2.25rem; /* w-9 */
-    font-weight: 400; /* font-normal */
-  }
-
-  .rdp-row {
-    display: flex;
-    width: 100%;
-    margin-top: 0.5rem; /* mt-2 */
-  }
-
-  .rdp-cell {
-    height: 2.25rem; /* h-9 */
-    width: 2.25rem; /* w-9 */
-    text-align: center;
-    font-size: 0.875rem; /* text-sm */
-    padding: 0;
-    position: relative;
-
-    &:focus-within {
-      z-index: 20;
-    }
-  }
-
-  /* Botão do dia */
-  .rdp-day {
-    height: 2.25rem; /* h-9 */
-    width: 2.25rem; /* w-9 */
-    padding: 0;
-    font-size: 0.875rem;
-    font-weight: 400;
-    background: transparent;
-    border: none;
-    cursor: pointer;
-    /* Estilos adicionais podem ser aplicados conforme necessário */
-  }
-
-  .rdp-day_selected {
-    background: #3b82f6; /* bg-primary (substitua conforme seu tema) */
-    color: #ffffff; /* text-primary-foreground */
-  }
-
-  .rdp-day_today {
-    background: #f3f4f6; /* bg-accent */
-    color: #111827; /* text-accent-foreground */
-  }
-
-  .rdp-day_outside {
-    color: #6b7280; /* text-muted-foreground */
-  }
-
-  .rdp-day_disabled {
-    color: #6b7280;
-    opacity: 0.5;
-  }
-`;
+import styled from 'styled-components';
+import { DayPicker as RDPDayPicker } from 'react-day-picker';
+
+export const StyledDayPicker = styled(RDPDayPicker)`
+  padding: 0.75rem; /* p-3 */
+
+  /* Estilo para o container dos meses */
+  .rdp-months {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem; /* equivalente a space-y-4 */
+  }
+
+  @media (min-width: 640px) {
+    .rdp-months {
+      flex-direction: row;
+      gap: 0 1rem; /* sm:flex-row com space-x-4 e sm:space-y-0 */
+    }
+  }
+
+  /* Cada mês */
+  .rdp-month {
+    margin-bottom: 1rem;
+  }
+
+  /* Legenda (caption) do mês */
+  .rdp-caption {
+    display: flex;
+    justify-content: center;
+    padding-top: 0.25rem; /* pt-1 */
+    position: relative;
+    align-items: center;
+  }
+
+  .rdp-caption_label {
+    font-size: 0.875rem; /* text-sm */
+    font-weight: 500; /* font-medium */
+  }
+
+  /* Navegação */
+  .rdp-nav {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem; /* space-x-1 */
+    position: relative;
+  }
+
+  .rdp-nav_button {
+    height: 1.75rem; /* h-7 */
+    width: 1.75rem; /* w-7 */
+    background: transparent;
+    padding: 0;
+    opacity: 0.5;
+    /* Pode-se definir aqui estilos de border se desejar imitar o buttonVariants({ variant: "outline" }) */
+    border: 1px solid #d1d5db;
+    cursor: pointer;
+    transition: opacity 0.2s ease;
+
+    &:hover {
+      opacity: 1;
+    }
+  }
+
+  .rdp-nav_button_previous {
+    position: absolute;
+    left: 0.25rem; /* left-1 */
+  }
+
+  .rdp-nav_button_next {
+    position: absolute;
+    right: 0.25rem; /* right-1 */
+  }
+
+  /* Tabela de dias */
+  .rdp-table {
+    width: 100%; /* w-full */
+    border-collapse: collapse;
+    margin-top: 0.25rem; /* espaço vertical */
+  }
+
+  .rdp-head_row {
+    display: flex;
+  }
+
+  .rdp-head_cell {
+    font-size: 0.8rem; /* text-[0.8rem] */
+    color: #6b7280; /* text-muted-foreground */
+    border-radius: 0.375rem; /* rounded-md */
+    width: 2.25rem; /* w-9 */
+    font-weight: 400; /* font-normal */
+  }
+
+  .rdp-row {
+    display: flex;
+    width: 100%;
+    margin-top: 0.5rem; /* mt-2 */
+  }
+
+  .rdp-cell {
+    height: 2.25rem; /* h-9 */
+    width: 2.25rem; /* w-9 */
+    text-align: center;
+    font-size: 0.875rem; /* text-sm */
+    padding: 0;
+    position: relative;
+
+    &:focus-within {
+      z-index: 20;
+    }
+  }
+
+  /* Botão do dia */
+  .rdp-day {
+    height: 2.25rem; /* h-9 */
+    width: 2.25rem; /* w-9 */
+    padding: 0;
+    font-size: 0.875rem;
+    font-weight: 400;
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    /* Estilos adicionais podem ser aplicados conforme necessário */
+  }
+
+  .rdp-day_selected {
+    background: #3b82f6; /* bg-primary (substitua conforme seu tema) */
+    color: #ffffff; /* text-primary-foreground */
+  }
+
+  .rdp-day_today {
+    background: #f3f4f6; /* bg-accent */
+    color: #111827; /* text-accent-foreground */
+  }
+
+  .rdp-day_outside {
+    color: #6b7280; /* text-muted-foreground */
+  }
+
+  .rdp-day_disabled {
+    color: #6b7280;
+    opacity: 0.5;
+  }
+`;

package/src/components/molecules/Calendar/Calendar.tsx

@@ -1,31 +1,31 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import * as React from "react";
-import { ChevronLeft, ChevronRight } from "lucide-react";
-import { DayPicker as RDPDayPicker } from "react-day-picker";
-import { StyledDayPicker } from "./Calendar.styles";
-
-export type CalendarProps = React.ComponentProps<typeof RDPDayPicker>;
-
-function Calendar({ className, ...props }: CalendarProps) {
-  return (
-    <StyledDayPicker
-      className={className}
-      showOutsideDays={true}
-      components={
-        {
-          IconPrevious: ({ className, ...props }: { className?: string }) => (
-            <ChevronLeft className={className} {...props} />
-          ),
-          IconNext: ({ className, ...props }: { className?: string }) => (
-            <ChevronRight className={className} {...props} />
-          ),
-        } as unknown as any
-      }
-      {...props}
-    />
-  );
-}
-
-Calendar.displayName = "Calendar";
-
-export { Calendar };
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import * as React from 'react';
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+import { DayPicker as RDPDayPicker } from 'react-day-picker';
+import { StyledDayPicker } from './Calendar.styles';
+
+export type CalendarProps = React.ComponentProps<typeof RDPDayPicker>;
+
+function Calendar({ className, ...props }: CalendarProps) {
+  return (
+    <StyledDayPicker
+      className={className}
+      showOutsideDays={true}
+      components={
+        {
+          IconPrevious: ({ className, ...props }: { className?: string }) => (
+            <ChevronLeft className={className} {...props} />
+          ),
+          IconNext: ({ className, ...props }: { className?: string }) => (
+            <ChevronRight className={className} {...props} />
+          ),
+        } as unknown as any
+      }
+      {...props}
+    />
+  );
+}
+
+Calendar.displayName = 'Calendar';
+
+export { Calendar };

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

@@ -1,7 +1,7 @@
-import styled from "styled-components";
-import { semanticSizes } from "../../../styles/tokens";
-
-export const StyledCodeInputContainer = styled.div`
-  display: flex;
-  margin-bottom: ${semanticSizes.global.padding.xl};  
-`;
+import styled from 'styled-components';
+import { semanticSizes } from '../../../styles/tokens';
+
+export const StyledCodeInputContainer = styled.div`
+  display: flex;
+  margin-bottom: ${semanticSizes.global.padding.xl};
+`;

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

@@ -1,13 +1,13 @@
-import React from "react";
-
-export interface CodeInputContainerProps {
-  code: string[];
-  inputRefs: React.MutableRefObject<(HTMLInputElement | null)[]>;
-  handleChange: (value: string, index: number) => void;
-  handleKeyDown: (
-    event: React.KeyboardEvent<HTMLInputElement>,
-    index: number
-  ) => void;
-  handlePaste: (event: React.ClipboardEvent<HTMLInputElement>) => void;
-  testId?: string;
-}
+import React from 'react';
+
+export interface CodeInputContainerProps {
+  code: string[];
+  inputRefs: React.MutableRefObject<(HTMLInputElement | null)[]>;
+  handleChange: (value: string, index: number) => void;
+  handleKeyDown: (
+    event: React.KeyboardEvent<HTMLInputElement>,
+    index: number
+  ) => void;
+  handlePaste: (event: React.ClipboardEvent<HTMLInputElement>) => void;
+  testId?: string;
+}

package/src/components/molecules/CodeInputContainer/index.tsx

@@ -1,3 +1 @@
-
-
-export { CodeInputContainer } from "./CodeInputContainer";
+export { CodeInputContainer } from './CodeInputContainer';

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

@@ -1,118 +1,123 @@
-import styled from "styled-components"; 
-import * as Dialog from "@radix-ui/react-dialog";
-import { semanticRadius, semanticColors, typographyTokens, semanticSizes, semanticShadows } from "../../../styles/tokens"
-
-export const Overlay = styled(Dialog.Overlay)`
-    position: fixed;
-    inset: 0;
-    background-color: rgba(0, 0, 0, 0.6); 
-    z-index: 50;
-`;
-
-export const Content = styled(Dialog.Content)`
-  position: fixed;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  font-family: ${typographyTokens.fontFamily.base};
-  background: ${semanticColors.base.background};
-  border-radius: 12px;  
-  padding: ${semanticSizes.global.padding["3xl"]};
-  width: 100%;
-  max-width: 520px;
-  z-index: 1000;
-  box-shadow: ${semanticShadows.shadow.lg};
-  border-top: 6px solid #c53030;  
-`;
-
-export const Title = styled.h2`
-  font-size: 28px;  
-  font-weight: ${typographyTokens.fontWeights.semibold};
-  line-height: ${typographyTokens.lineHeights.displayM};
-  color: ${semanticColors.global.text.default.enabled};
-  margin-bottom: ${semanticSizes.global.gap.sm};
-  padding-right: ${semanticSizes.global.padding.md};
-`;
-
-export const Description = styled.p`
-  font-size: 1.1rem;  
-  line-height: 1.5; 
-  color: ${semanticColors.global.text.onSurface.subtitle};
-  margin-bottom: ${semanticSizes.global.gap.lg};
-
-  span {
-    cursor: pointer;
-    color: ${semanticColors.global.text.default.enabled};
-  }
-
-  strong {
-    font-weight: ${typographyTokens.fontWeights.semibold};
-    color: ${semanticColors.global.text.default.enabled};
-  }
-`;
-
-export const Footer = styled.div`
-  display: flex;
-  justify-content: flex-end;
-  gap: ${semanticSizes.global.gap.md};
-  margin-top: ${semanticSizes.global.gap.xl};
-`;
-
-
-export const CancelButton = styled(Dialog.Close)`
-  background: ${semanticColors.base.background};
-  border: 2px solid ${semanticColors.global.border.strong};
-  border-radius: ${semanticRadius.global.radius.md2};
-  padding: ${semanticSizes.global.padding.sm} ${semanticSizes.global.padding.lg};
-  font-weight: ${typographyTokens.fontWeights.semibold};
-  font-size: ${typographyTokens.fontSizes.labelM};
-  color: ${semanticColors.global.border.strong};
-  cursor: pointer;
-  transition: all 0.2s;
-
-  &:hover {
-    background: ${semanticColors.neutral[100]};
-  }
-`;
-
-export const ConfirmButton = styled.button`
-  background: #c53030;  
-  color: ${semanticColors.danger.text.onSurface};
-  border: none;
-  border-radius: ${semanticRadius.global.radius.md2};
-  padding: ${semanticSizes.global.padding.sm} ${semanticSizes.global.padding.lg};
-  font-weight: ${typographyTokens.fontWeights.semibold};
-  font-size: ${typographyTokens.fontSizes.labelM};
-  cursor: pointer;
-  transition: all 0.2s;
-
-  &:hover {
-    background: #b02828;  
-  }
-
-  &:active {
-    background: #952020; 
-  }
-
-  &:disabled {
-    background: #e2e2e2;  
-    cursor: not-allowed;
-  }
-`;
-
-export const CloseIcon = styled(Dialog.Close)`
-  position: absolute;
-  top: ${semanticSizes.global.padding["3xl"]};
-  right: ${semanticSizes.global.padding["3xl"]};
-  background: transparent;
-  border: none;
-  cursor: pointer;
-
-  svg {
-    color: ${semanticColors.global.text.onSurface.subtitle};
-  }
-
-  &:hover svg {
-    color: ${semanticColors.global.text.default.enabled};
-  }
-`;
+import styled from 'styled-components';
+import * as Dialog from '@radix-ui/react-dialog';
+import {
+  semanticRadius,
+  semanticColors,
+  typographyTokens,
+  semanticSizes,
+  semanticShadows,
+} from '../../../styles/tokens';
+
+export const Overlay = styled(Dialog.Overlay)`
+  position: fixed;
+  inset: 0;
+  background-color: rgba(0, 0, 0, 0.6);
+  z-index: 50;
+`;
+
+export const Content = styled(Dialog.Content)`
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  font-family: ${typographyTokens.fontFamily.base};
+  background: ${semanticColors.base.background};
+  border-radius: 12px;
+  padding: ${semanticSizes.global.padding['3xl']};
+  width: 100%;
+  max-width: 520px;
+  z-index: 1000;
+  box-shadow: ${semanticShadows.shadow.lg};
+  border-top: 6px solid #c53030;
+`;
+
+export const Title = styled.h2`
+  font-size: 28px;
+  font-weight: ${typographyTokens.fontWeights.semibold};
+  line-height: ${typographyTokens.lineHeights.displayM};
+  color: ${semanticColors.global.text.default.enabled};
+  margin-bottom: ${semanticSizes.global.gap.sm};
+  padding-right: ${semanticSizes.global.padding.md};
+`;
+
+export const Description = styled.p`
+  font-size: 1.1rem;
+  line-height: 1.5;
+  color: ${semanticColors.global.text.onSurface.subtitle};
+  margin-bottom: ${semanticSizes.global.gap.lg};
+
+  span {
+    cursor: pointer;
+    color: ${semanticColors.global.text.default.enabled};
+  }
+
+  strong {
+    font-weight: ${typographyTokens.fontWeights.semibold};
+    color: ${semanticColors.global.text.default.enabled};
+  }
+`;
+
+export const Footer = styled.div`
+  display: flex;
+  justify-content: flex-end;
+  gap: ${semanticSizes.global.gap.md};
+  margin-top: ${semanticSizes.global.gap.xl};
+`;
+
+export const CancelButton = styled(Dialog.Close)`
+  background: ${semanticColors.base.background};
+  border: 2px solid ${semanticColors.global.border.strong};
+  border-radius: ${semanticRadius.global.radius.md2};
+  padding: ${semanticSizes.global.padding.sm} ${semanticSizes.global.padding.lg};
+  font-weight: ${typographyTokens.fontWeights.semibold};
+  font-size: ${typographyTokens.fontSizes.labelM};
+  color: ${semanticColors.global.border.strong};
+  cursor: pointer;
+  transition: all 0.2s;
+
+  &:hover {
+    background: ${semanticColors.neutral[100]};
+  }
+`;
+
+export const ConfirmButton = styled.button`
+  background: #c53030;
+  color: ${semanticColors.danger.text.onSurface};
+  border: none;
+  border-radius: ${semanticRadius.global.radius.md2};
+  padding: ${semanticSizes.global.padding.sm} ${semanticSizes.global.padding.lg};
+  font-weight: ${typographyTokens.fontWeights.semibold};
+  font-size: ${typographyTokens.fontSizes.labelM};
+  cursor: pointer;
+  transition: all 0.2s;
+
+  &:hover {
+    background: #b02828;
+  }
+
+  &:active {
+    background: #952020;
+  }
+
+  &:disabled {
+    background: #e2e2e2;
+    cursor: not-allowed;
+  }
+`;
+
+export const CloseIcon = styled(Dialog.Close)`
+  position: absolute;
+  top: ${semanticSizes.global.padding['3xl']};
+  right: ${semanticSizes.global.padding['3xl']};
+  background: transparent;
+  border: none;
+  cursor: pointer;
+
+  svg {
+    color: ${semanticColors.global.text.onSurface.subtitle};
+  }
+
+  &:hover svg {
+    color: ${semanticColors.global.text.default.enabled};
+  }
+`;