@granto-umbrella/umbrella-components 3.0.34 → 3.0.36

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

@@ -1,139 +1,139 @@
-import styled from "styled-components"
-import * as Dialog from "@radix-ui/react-dialog"
-
-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: "Mulish", sans-serif;
-  background: white;
-  border-radius: 12px;
-  padding: 32px;
-  width: 100%;
-  max-width: 520px;
-  z-index: 1000;
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
-  border-top: 6px solid #c53030;
-`
-
-export const Title = styled.h2`
-  font-size: 28px;
-  font-weight: 600;
-  color: #1a1a1a;
-  margin-bottom: 8px;
-  font-family: "Mulish", sans-serif;
-  padding-right: 12px;
-`
-
-export const Description = styled.p`
-  font-size: 1rem;
-  line-height: 1.5;
-  color: #888;
-  margin-bottom: 16px;
-  font-family: "Mulish", sans-serif;
-  
-  span {
-    cursor: pointer;
-    color: #1a1a1a;
-  }
-
-  strong {
-    font-weight: 600;
-    color: #1a1a1a;
-  }
-`
-
-export const Label = styled.label`
-  font-size: 1rem;
-  margin-top: 16px;
-  margin-bottom: 4px;
-  display: block;
-  color: #888;
-  font-family: "Mulish", sans-serif;
-`
-
-export const Select = styled.select`
-  width: 100%;
-  color: #777;
-  padding: 12px;
-  font-size: 1rem;
-  border: 1px solid #d9d9d9;
-  border-radius: 8px;
-  background-color: white;
-  appearance: none;
-  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 20 20' fill='none' stroke='gray' strokeWidth='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
-  background-repeat: no-repeat;
-  background-position: right 12px center;
-  background-size: 16px;
-  cursor: pointer;
-`
-
-export const TextArea = styled.textarea`
-  width: 100%;
-  min-height: 80px;
-  padding: 12px;
-  font-size: 14px;
-  border: 1px solid #d9d9d9;
-  border-radius: 8px;
-  resize: none;
-  margin-top: 8px;
-`
-
-export const HelpText = styled.p`
-  font-size: 0.9rem;
-  color: #888;
-  margin-top: 4px;
-`
-
-export const CancelButton = styled(Dialog.Close)`
-  background: #fff;
-  border: 2px solid #7f7f7f;
-  border-radius: 8px;
-  padding: 10px 16px;
-  font-weight: 600;
-  color: #7f7f7f;
-  cursor: pointer;
-`
-
-export const ConfirmButton = styled.button`
-  background: #c53030;
-  color: white;
-  border: none;
-  border-radius: 8px;
-  padding: 10px 16px;
-  font-weight: 600;
-  cursor: pointer;
-
-  &:disabled {
-    background: #e2e2e2;
-    cursor: not-allowed;
-  }
-`
-
-export const CloseIcon = styled(Dialog.Close)`
-  position: absolute;
-  top: 32px;
-  right: 32px;
-  background: transparent;
-  border: none;
-  cursor: pointer;
-
-  svg {
-    color: #888;
-  }
-`
-
-export const Footer = styled.div`
-  display: flex;
-  justify-content: flex-end;
-  gap: 12px;
-  margin-top: 24px;
-`
+import styled from 'styled-components';
+import * as Dialog from '@radix-ui/react-dialog';
+
+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: 'Mulish', sans-serif;
+  background: white;
+  border-radius: 12px;
+  padding: 32px;
+  width: 100%;
+  max-width: 520px;
+  z-index: 1000;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
+  border-top: 6px solid #c53030;
+`;
+
+export const Title = styled.h2`
+  font-size: 28px;
+  font-weight: 600;
+  color: #1a1a1a;
+  margin-bottom: 8px;
+  font-family: 'Mulish', sans-serif;
+  padding-right: 12px;
+`;
+
+export const Description = styled.p`
+  font-size: 1rem;
+  line-height: 1.5;
+  color: #888;
+  margin-bottom: 16px;
+  font-family: 'Mulish', sans-serif;
+
+  span {
+    cursor: pointer;
+    color: #1a1a1a;
+  }
+
+  strong {
+    font-weight: 600;
+    color: #1a1a1a;
+  }
+`;
+
+export const Label = styled.label`
+  font-size: 1rem;
+  margin-top: 16px;
+  margin-bottom: 4px;
+  display: block;
+  color: #888;
+  font-family: 'Mulish', sans-serif;
+`;
+
+export const Select = styled.select`
+  width: 100%;
+  color: #777;
+  padding: 12px;
+  font-size: 1rem;
+  border: 1px solid #d9d9d9;
+  border-radius: 8px;
+  background-color: white;
+  appearance: none;
+  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 20 20' fill='none' stroke='gray' strokeWidth='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 12px center;
+  background-size: 16px;
+  cursor: pointer;
+`;
+
+export const TextArea = styled.textarea`
+  width: 100%;
+  min-height: 80px;
+  padding: 12px;
+  font-size: 14px;
+  border: 1px solid #d9d9d9;
+  border-radius: 8px;
+  resize: none;
+  margin-top: 8px;
+`;
+
+export const HelpText = styled.p`
+  font-size: 0.9rem;
+  color: #888;
+  margin-top: 4px;
+`;
+
+export const CancelButton = styled(Dialog.Close)`
+  background: #fff;
+  border: 2px solid #7f7f7f;
+  border-radius: 8px;
+  padding: 10px 16px;
+  font-weight: 600;
+  color: #7f7f7f;
+  cursor: pointer;
+`;
+
+export const ConfirmButton = styled.button`
+  background: #c53030;
+  color: white;
+  border: none;
+  border-radius: 8px;
+  padding: 10px 16px;
+  font-weight: 600;
+  cursor: pointer;
+
+  &:disabled {
+    background: #e2e2e2;
+    cursor: not-allowed;
+  }
+`;
+
+export const CloseIcon = styled(Dialog.Close)`
+  position: absolute;
+  top: 32px;
+  right: 32px;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+
+  svg {
+    color: #888;
+  }
+`;
+
+export const Footer = styled.div`
+  display: flex;
+  justify-content: flex-end;
+  gap: 12px;
+  margin-top: 24px;
+`;

package/src/components/molecules/RefuseModal/RefuseModal.tsx

@@ -1,76 +1,92 @@
-"use client"
-
-import * as Dialog from "@radix-ui/react-dialog"
-import { X } from "lucide-react"
-import { useState } from "react"
-import {
-  CancelButton,
-  CloseIcon,
-  ConfirmButton,
-  Content,
-  Description,
-  Footer,
-  HelpText,
-  Label,
-  Overlay,
-  Select,
-  TextArea,
-  Title,
-} from "./RefuseModal.styles"
-import { type RefuseModalProps, motivos } from "./RefuseModal.types"
-
-export const RefuseModal = ({ open, onOpenChange, onConfirm, onClose, orderId }: RefuseModalProps) => {
-  const [motivo, setMotivo] = useState("")
-  const [detalhes, setDetalhes] = useState("")
-
-  const handleConfirm = () => {
-    console.log("Proposta recusada:", { orderId, motivo, detalhes })
-    onConfirm()
-    onClose()
-    setMotivo("")
-    setDetalhes("")
-  }
-
-  return (
-    <Dialog.Root open={open} onOpenChange={onOpenChange}>
-      <Dialog.Portal>
-        <Overlay />
-        <Content>
-          <CloseIcon aria-label="Fechar" onClick={onClose}>
-            <X size={28} color="#BDBDBD" />
-          </CloseIcon>
-
-          <Title>Tem certeza de que deseja recusar esta proposta?</Title>
-
-          <Description>
-            Após recusar, você pode voltar e continuar de onde parou acessando{" "}
-            <span onClick={() => onClose()}>Minhas apólices</span>.<br />
-            <strong>Nota:</strong> pode ser que as condições oferecidas sejam diferentes das atuais.
-          </Description>
-
-          <Label>Nos ajude a entender o motivo da recusa:</Label>
-          <Select value={motivo} onChange={(e) => setMotivo(e.target.value)}>
-            <option value="">Selecione o motivo</option>
-            {motivos.map((item) => (
-              <option key={item} value={item}>
-                {item}
-              </option>
-            ))}
-          </Select>
-          <HelpText>Sua resposta ajuda a melhorar nosso processo para você e outros usuários.</HelpText>
-
-          <Label>Se quiser, conte mais detalhes</Label>
-          <TextArea placeholder="Escreva aqui..." value={detalhes} onChange={(e) => setDetalhes(e.target.value)} />
-          <HelpText>Essas informações nos ajudam a melhorar sua experiência.</HelpText>
-
-          <Footer>
-            <CancelButton onClick={onClose}>Cancelar</CancelButton>
-            <ConfirmButton onClick={handleConfirm} disabled={!motivo}>
-              Sim, recusar
-            </ConfirmButton>
-          </Footer>
-        </Content>
-      </Dialog.Portal>
-    </Dialog.Root>
-  )
-}
+'use client';
+
+import * as Dialog from '@radix-ui/react-dialog';
+import { X } from 'lucide-react';
+import { useState } from 'react';
+import {
+  CancelButton,
+  CloseIcon,
+  ConfirmButton,
+  Content,
+  Description,
+  Footer,
+  HelpText,
+  Label,
+  Overlay,
+  Select,
+  TextArea,
+  Title,
+} from './RefuseModal.styles';
+import { type RefuseModalProps, motivos } from './RefuseModal.types';
+
+export const RefuseModal = ({
+  open,
+  onOpenChange,
+  onConfirm,
+  onClose,
+  orderId,
+}: RefuseModalProps) => {
+  const [motivo, setMotivo] = useState('');
+  const [detalhes, setDetalhes] = useState('');
+
+  const handleConfirm = () => {
+    console.log('Proposta recusada:', { orderId, motivo, detalhes });
+    onConfirm();
+    onClose();
+    setMotivo('');
+    setDetalhes('');
+  };
+
+  return (
+    <Dialog.Root open={open} onOpenChange={onOpenChange}>
+      <Dialog.Portal>
+        <Overlay />
+        <Content>
+          <CloseIcon aria-label="Fechar" onClick={onClose}>
+            <X size={28} color="#BDBDBD" />
+          </CloseIcon>
+
+          <Title>Tem certeza de que deseja recusar esta proposta?</Title>
+
+          <Description>
+            Após recusar, você pode voltar e continuar de onde parou acessando{' '}
+            <span onClick={() => onClose()}>Minhas apólices</span>.<br />
+            <strong>Nota:</strong> pode ser que as condições oferecidas sejam
+            diferentes das atuais.
+          </Description>
+
+          <Label>Nos ajude a entender o motivo da recusa:</Label>
+          <Select value={motivo} onChange={(e) => setMotivo(e.target.value)}>
+            <option value="">Selecione o motivo</option>
+            {motivos.map((item) => (
+              <option key={item} value={item}>
+                {item}
+              </option>
+            ))}
+          </Select>
+          <HelpText>
+            Sua resposta ajuda a melhorar nosso processo para você e outros
+            usuários.
+          </HelpText>
+
+          <Label>Se quiser, conte mais detalhes</Label>
+          <TextArea
+            placeholder="Escreva aqui..."
+            value={detalhes}
+            onChange={(e) => setDetalhes(e.target.value)}
+          />
+          <HelpText>
+            Essas informações nos ajudam a melhorar sua experiência.
+          </HelpText>
+
+          <Footer>
+            <CancelButton onClick={onClose}>Cancelar</CancelButton>
+            <ConfirmButton onClick={handleConfirm} disabled={!motivo}>
+              Sim, recusar
+            </ConfirmButton>
+          </Footer>
+        </Content>
+      </Dialog.Portal>
+    </Dialog.Root>
+  );
+};

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

@@ -1,15 +1,15 @@
-export interface RefuseModalProps {
-  open: boolean
-  onOpenChange: (open: boolean) => void
-  onClose: () => void
-  onConfirm: () => void
-  orderId: string
-}
-
-export const motivos = [
-  "Preço muito alto",
-  "Encontrei uma opção melhor",
-  "Não preciso mais do serviço",
-  "Condições não atendem minhas necessidades",
-  "Outro motivo",
-]
+export interface RefuseModalProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onClose: () => void;
+  onConfirm: () => void;
+  orderId: string;
+}
+
+export const motivos = [
+  'Preço muito alto',
+  'Encontrei uma opção melhor',
+  'Não preciso mais do serviço',
+  'Condições não atendem minhas necessidades',
+  'Outro motivo',
+];

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

@@ -1,2 +1,2 @@
-export { RefuseModal } from "./RefuseModal"
-export type { RefuseModalProps } from "./RefuseModal.types"
+export { RefuseModal } from './RefuseModal';
+export type { RefuseModalProps } from './RefuseModal.types';

package/src/components/molecules/ResultsChart/ResultsChart.tsx

@@ -1,19 +1,23 @@
-import { TrendingDown, TrendingUp } from 'lucide-react'
-import { Results } from "./ResultsChart.styles"
-import type { ResultsChartProps } from "./ResultsChart.types"
-
-const ResultsChart = ({ value }: ResultsChartProps) => {
-  const isPositive = value >= 0
-  const trendIcon = isPositive ? <TrendingUp size={16} /> : <TrendingDown size={16} />
-  const trendText = isPositive
-    ? `${value}% a mais do que o mês anterior`
-    : `${Math.abs(value)}% a menos do que o mês anterior`
-
-  return (
-    <Results $isPositive={isPositive}>
-      {trendIcon} {trendText}
-    </Results>
-  )
-}
-
-export default ResultsChart
+import { TrendingDown, TrendingUp } from 'lucide-react';
+import { Results } from './ResultsChart.styles';
+import type { ResultsChartProps } from './ResultsChart.types';
+
+const ResultsChart = ({ value }: ResultsChartProps) => {
+  const isPositive = value >= 0;
+  const trendIcon = isPositive ? (
+    <TrendingUp size={16} />
+  ) : (
+    <TrendingDown size={16} />
+  );
+  const trendText = isPositive
+    ? `${value}% a mais do que o mês anterior`
+    : `${Math.abs(value)}% a menos do que o mês anterior`;
+
+  return (
+    <Results $isPositive={isPositive}>
+      {trendIcon} {trendText}
+    </Results>
+  );
+};
+
+export default ResultsChart;

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

@@ -1,3 +1,3 @@
-export interface ResultsChartProps {
-  value: number
-}
+export interface ResultsChartProps {
+  value: number;
+}

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

@@ -1,2 +1,2 @@
-export { default } from "./ResultsChart"
-export type { ResultsChartProps } from "./ResultsChart.types"
+export { default } from './ResultsChart';
+export type { ResultsChartProps } from './ResultsChart.types';

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

@@ -1,54 +1,54 @@
-import {
-  semanticColors,
-  semanticRadius,
-  semanticSizes,
-  typographyTokens,
-} from "../../../styles/tokens";
-import styled from "styled-components";
-
-export const ToggleContainer = styled.div`
-  position: relative;
-  display: inline-flex;
-  background: transparent;
-  border-radius: ${semanticRadius.global.radius.md2};
-  padding: ${semanticSizes.global.padding.xs};
-  white-space: nowrap;
-`;
-
-export const Slider = styled.div<{
-  activeIndex: number;
-  count: number;
-}>`
-  position: absolute;
-  top: ${semanticSizes.global.padding.xs};
-  left: ${({ activeIndex, count }) => (activeIndex * 100) / count}%;
-  width: ${({ count }) => 100 / count}%;
-  height: calc(100% - ${semanticSizes.global.padding.xs} * 2);
-  background: ${semanticColors.base.background};
-  border-radius: ${semanticRadius.global.radius.md2};
-  transition: left 200ms ease-in-out;
-  z-index: 0;
-`;
-
-export const TabButton = styled.button<{ active: boolean }>`
-  position: relative;
-  z-index: 1;
-  display: flex;
-  width: 230px;
-  justify-content: center;
-  align-items: center;
-  padding: ${semanticSizes.global.padding.sm} ${semanticSizes.global.gap["3xl"]};
-  font-size: ${typographyTokens.fontSizes.bodyS};
-  color: ${({ active }) =>
-    active ? semanticColors.base.text : semanticColors.neutral[400]};
-  background: none;
-  border: none;
-  cursor: pointer;
-  transition: color 200ms;
-
-  white-space: nowrap;
-
-  &:focus {
-    outline: none;
-  }
-`;
+import {
+  semanticColors,
+  semanticRadius,
+  semanticSizes,
+  typographyTokens,
+} from '../../../styles/tokens';
+import styled from 'styled-components';
+
+export const ToggleContainer = styled.div`
+  position: relative;
+  display: inline-flex;
+  background: transparent;
+  border-radius: ${semanticRadius.global.radius.md2};
+  padding: ${semanticSizes.global.padding.xs};
+  white-space: nowrap;
+`;
+
+export const Slider = styled.div<{
+  activeIndex: number;
+  count: number;
+}>`
+  position: absolute;
+  top: ${semanticSizes.global.padding.xs};
+  left: ${({ activeIndex, count }) => (activeIndex * 100) / count}%;
+  width: ${({ count }) => 100 / count}%;
+  height: calc(100% - ${semanticSizes.global.padding.xs} * 2);
+  background: ${semanticColors.base.background};
+  border-radius: ${semanticRadius.global.radius.md2};
+  transition: left 200ms ease-in-out;
+  z-index: 0;
+`;
+
+export const TabButton = styled.button<{ active: boolean }>`
+  position: relative;
+  z-index: 1;
+  display: flex;
+  width: 230px;
+  justify-content: center;
+  align-items: center;
+  padding: ${semanticSizes.global.padding.sm} ${semanticSizes.global.gap['3xl']};
+  font-size: ${typographyTokens.fontSizes.bodyS};
+  color: ${({ active }) =>
+    active ? semanticColors.base.text : semanticColors.neutral[400]};
+  background: none;
+  border: none;
+  cursor: pointer;
+  transition: color 200ms;
+
+  white-space: nowrap;
+
+  &:focus {
+    outline: none;
+  }
+`;