@granto-umbrella/umbrella-components 3.0.34 → 3.0.36

package/src/components/molecules/TabToggle/TabToggle.tsx

@@ -1,35 +1,35 @@
-import React, { useState } from "react";
-import { ToggleContainer, Slider, TabButton } from "./TabToggle.styles";
-
-export type TabItem = {
-  title: string;
-  quantity: number;
-};
-
-export type TabToggleProps = {
-  items: TabItem[];
-};
-
-export const TabToggle: React.FC<TabToggleProps> = ({ items }) => {
-  const [activeIndex, setActiveIndex] = useState(0);
-  const count = items.length;
-
-  return (
-    <ToggleContainer>
-      {/* Slider agora sabe quantas abas existem */}
-      <Slider activeIndex={activeIndex} count={count} />
-
-      {items.map(({ title, quantity }, i) => (
-        <TabButton
-          key={title}
-          active={i === activeIndex}
-          onClick={() => setActiveIndex(i)}
-        >
-          {title} ({quantity})
-        </TabButton>
-      ))}
-    </ToggleContainer>
-  );
-};
-
-export default TabToggle;
+import React, { useState } from 'react';
+import { ToggleContainer, Slider, TabButton } from './TabToggle.styles';
+
+export type TabItem = {
+  title: string;
+  quantity: number;
+};
+
+export type TabToggleProps = {
+  items: TabItem[];
+};
+
+export const TabToggle: React.FC<TabToggleProps> = ({ items }) => {
+  const [activeIndex, setActiveIndex] = useState(0);
+  const count = items.length;
+
+  return (
+    <ToggleContainer>
+      {/* Slider agora sabe quantas abas existem */}
+      <Slider activeIndex={activeIndex} count={count} />
+
+      {items.map(({ title, quantity }, i) => (
+        <TabButton
+          key={title}
+          active={i === activeIndex}
+          onClick={() => setActiveIndex(i)}
+        >
+          {title} ({quantity})
+        </TabButton>
+      ))}
+    </ToggleContainer>
+  );
+};
+
+export default TabToggle;

package/src/components/organisms/AlertDialog/AlertDialog.styles.tsx

@@ -1,61 +1,61 @@
-import {
-  semanticColors,
-  semanticRadius,
-  semanticShadows,
-  semanticSizes,
-} from "../../../styles/tokens";
-import styled from "styled-components";
-
-export const DialogContainer = styled.div`
-  background: ${semanticColors.base.background};
-  padding: ${semanticSizes.global.padding["2xl"]};
-  border-radius: ${semanticRadius.global.radius.md};
-  box-shadow: ${semanticShadows.shadow};
-  border-top: 4px solid ${semanticColors.danger.border.enabled};
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: ${semanticSizes.global.gap.lg};
-  max-width: 440px;
-  text-align: left;
-  position: relative;
-`;
-
-export const ButtonContainer = styled.div`
-  display: flex;
-  width: 100%;
-  gap: ${semanticSizes.global.gap.lg};
-  margin-top: ${semanticSizes.global.spacings.lg};
-  justify-content: flex-end;
-`;
-
-export const Overlay = styled.div`
-  position: fixed;
-  inset: 0;
-  background: rgba(0, 0, 0, 0.5);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  z-index: 9999;
-`;
-
-export const CloseButton = styled.button`
-  background: none;
-  border: none;
-  cursor: pointer;
-  color: ${semanticColors.base.text};
-  font-size: ${semanticSizes.global.spacings.lg};
-
-  &:hover {
-    color: ${semanticColors.danger.border.enabled};
-  }
-`;
-
-export const TitleContainer = styled.div`
-  display: flex;
-  width: 100%;
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: flex-start;
-  gap: ${semanticSizes.global.gap.sm};
-`;
+import {
+  semanticColors,
+  semanticRadius,
+  semanticShadows,
+  semanticSizes,
+} from '../../../styles/tokens';
+import styled from 'styled-components';
+
+export const DialogContainer = styled.div`
+  background: ${semanticColors.base.background};
+  padding: ${semanticSizes.global.padding['2xl']};
+  border-radius: ${semanticRadius.global.radius.md};
+  box-shadow: ${semanticShadows.shadow};
+  border-top: 4px solid ${semanticColors.danger.border.enabled};
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: ${semanticSizes.global.gap.lg};
+  max-width: 440px;
+  text-align: left;
+  position: relative;
+`;
+
+export const ButtonContainer = styled.div`
+  display: flex;
+  width: 100%;
+  gap: ${semanticSizes.global.gap.lg};
+  margin-top: ${semanticSizes.global.spacings.lg};
+  justify-content: flex-end;
+`;
+
+export const Overlay = styled.div`
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 9999;
+`;
+
+export const CloseButton = styled.button`
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: ${semanticColors.base.text};
+  font-size: ${semanticSizes.global.spacings.lg};
+
+  &:hover {
+    color: ${semanticColors.danger.border.enabled};
+  }
+`;
+
+export const TitleContainer = styled.div`
+  display: flex;
+  width: 100%;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: ${semanticSizes.global.gap.sm};
+`;

package/src/components/organisms/AlertDialog/AlertDialog.tsx

@@ -1,70 +1,70 @@
-import React from "react";
-import Text from "../../atoms/Text/Text";
-import Button from "../../atoms/Button/Button";
-import {
-  ButtonContainer,
-  DialogContainer,
-  Overlay,
-  CloseButton,
-  TitleContainer,
-} from "./AlertDialog.styles";
-import { X } from "@phosphor-icons/react";
-import { AlertDialogProps } from "./AlertDialog.types";
-import { semanticColors } from "../../../styles/tokens";
-
-const AlertDialog: React.FC<AlertDialogProps> = ({
-  text,
-  isOpen,
-  buttons: { confirm, cancel, onClose, onConfirm },
-  testId,
-}) => {
-  if (!isOpen) return null;
-
-  return (
-    <Overlay>
-      <DialogContainer>
-        <TitleContainer>
-          <Text
-            size="lg"
-            weight="bold"
-            color={`${semanticColors.danger.border.enabled}`}
-          >
-            {text.title}
-          </Text>
-          <CloseButton onClick={onClose} aria-label="Fechar">
-            <X
-              size={20}
-              color={`${semanticColors.neutral[300]}`}
-              weight="bold"
-            />
-          </CloseButton>
-        </TitleContainer>
-        <Text size="md" color={`${semanticColors.neutral[500]}`}>
-          {text.description}
-        </Text>
-        <ButtonContainer>
-          {cancel && (
-            <Button
-              testId={`${testId}_cancelar`}
-              variant="alert"
-              onClick={onClose}
-            >
-              {cancel}
-            </Button>
-          )}
-          {confirm && (
-            <Button
-              testId={`${testId}_confirmar`}
-              variant="danger"
-              onClick={onConfirm}
-            >
-              {confirm}
-            </Button>
-          )}
-        </ButtonContainer>
-      </DialogContainer>
-    </Overlay>
-  );
-};
-
-export default AlertDialog;
+import React from 'react';
+import Text from '../../atoms/Text/Text';
+import Button from '../../atoms/Button/Button';
+import {
+  ButtonContainer,
+  DialogContainer,
+  Overlay,
+  CloseButton,
+  TitleContainer,
+} from './AlertDialog.styles';
+import { X } from '@phosphor-icons/react';
+import { AlertDialogProps } from './AlertDialog.types';
+import { semanticColors } from '../../../styles/tokens';
+
+const AlertDialog: React.FC<AlertDialogProps> = ({
+  text,
+  isOpen,
+  buttons: { confirm, cancel, onClose, onConfirm },
+  testId,
+}) => {
+  if (!isOpen) return null;
+
+  return (
+    <Overlay>
+      <DialogContainer>
+        <TitleContainer>
+          <Text
+            size="lg"
+            weight="bold"
+            color={`${semanticColors.danger.border.enabled}`}
+          >
+            {text.title}
+          </Text>
+          <CloseButton onClick={onClose} aria-label="Fechar">
+            <X
+              size={20}
+              color={`${semanticColors.neutral[300]}`}
+              weight="bold"
+            />
+          </CloseButton>
+        </TitleContainer>
+        <Text size="md" color={`${semanticColors.neutral[500]}`}>
+          {text.description}
+        </Text>
+        <ButtonContainer>
+          {cancel && (
+            <Button
+              testId={`${testId}_cancelar`}
+              variant="alert"
+              onClick={onClose}
+            >
+              {cancel}
+            </Button>
+          )}
+          {confirm && (
+            <Button
+              testId={`${testId}_confirmar`}
+              variant="danger"
+              onClick={onConfirm}
+            >
+              {confirm}
+            </Button>
+          )}
+        </ButtonContainer>
+      </DialogContainer>
+    </Overlay>
+  );
+};
+
+export default AlertDialog;

package/src/components/organisms/Dialog/Dialog.styles.ts

@@ -1,106 +1,107 @@
-// Dialog.styled.tsx
-import styled from "styled-components";
-import * as DialogPrimitive from "@radix-ui/react-dialog";
-
-/* ========================= */
-/* === Overlay Component === */
-/* ========================= */
-export const StyledDialogOverlay = styled(DialogPrimitive.Overlay)`
-  position: fixed;
-  inset: 0;
-  z-index: 50;
-  background-color: rgba(0, 0, 0, 0.8);
-  /* Você pode definir animações adicionais aqui, caso deseje */
-`;
-
-/* ========================== */
-/* === Content Component  === */
-/* ========================== */
-export const StyledDialogContent = styled(DialogPrimitive.Content)`
-  position: fixed;
-  left: 50%;
-  top: 50%;
-  z-index: 50;
-  display: grid;
-  width: 100%;
-  max-width: 32rem; /* Equivalente a max-w-lg */
-  transform: translate(-50%, -50%);
-  gap: 1rem; /* gap-4 */
-  border: 1px solid #e5e7eb;
-  background-color: #fff; /* bg-background */
-  padding: 1.5rem; /* p-6 */
-  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
-    0 4px 6px -2px rgba(0, 0, 0, 0.05);
-  border-radius: 0.5rem; /* sm:rounded-lg */
-  transition: all 0.2s ease;
-`;
-
-/* ============================ */
-/* === Close Button Component === */
-/* ============================ */
-export const StyledDialogClose = styled(DialogPrimitive.Close)`
-  position: absolute;
-  top: 1rem; /* top-4 */
-  right: 1rem; /* right-4 */
-  background: none;
-  border: none;
-  border-radius: 0.125rem; /* rounded-sm */
-  opacity: 0.7;
-  cursor: pointer;
-  transition: opacity 0.2s ease;
-
-  &:hover {
-    opacity: 1;
-  }
-
-  &:focus {
-    outline: none;
-    box-shadow: 0 0 0 2px #3b82f6; /* focus:ring-2 focus:ring-ring */
-  }
-`;
-
-/* ========================== */
-/* === Header Component  === */
-/* ========================== */
-export const StyledDialogHeader = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 0.375rem; /* Aproximadamente space-y-1.5 */
-  text-align: center;
-
-  @media (min-width: 640px) {
-    text-align: left;
-  }
-`;
-
-/* ========================== */
-/* === Footer Component  === */
-/* ========================== */
-export const StyledDialogFooter = styled.div`
-  display: flex;
-  flex-direction: column-reverse;
-  justify-content: flex-end;
-  gap: 0.5rem; /* Aproximadamente sm:space-x-2 */
-
-  @media (min-width: 640px) {
-    flex-direction: row;
-  }
-`;
-
-/* =========================== */
-/* === Title Component  === */
-/* =========================== */
-export const StyledDialogTitle = styled(DialogPrimitive.Title)`
-  font-size: 1.125rem; /* text-lg */
-  font-weight: 600; /* font-semibold */
-  line-height: 1; /* leading-none */
-  letter-spacing: -0.025em; /* tracking-tight */
-`;
-
-/* =============================== */
-/* === Description Component  === */
-/* =============================== */
-export const StyledDialogDescription = styled(DialogPrimitive.Description)`
-  font-size: 0.875rem; /* text-sm */
-  color: #6b7280; /* text-muted-foreground */
-`;
+// Dialog.styled.tsx
+import styled from 'styled-components';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+
+/* ========================= */
+/* === Overlay Component === */
+/* ========================= */
+export const StyledDialogOverlay = styled(DialogPrimitive.Overlay)`
+  position: fixed;
+  inset: 0;
+  z-index: 50;
+  background-color: rgba(0, 0, 0, 0.8);
+  /* Você pode definir animações adicionais aqui, caso deseje */
+`;
+
+/* ========================== */
+/* === Content Component  === */
+/* ========================== */
+export const StyledDialogContent = styled(DialogPrimitive.Content)`
+  position: fixed;
+  left: 50%;
+  top: 50%;
+  z-index: 50;
+  display: grid;
+  width: 100%;
+  max-width: 32rem; /* Equivalente a max-w-lg */
+  transform: translate(-50%, -50%);
+  gap: 1rem; /* gap-4 */
+  border: 1px solid #e5e7eb;
+  background-color: #fff; /* bg-background */
+  padding: 1.5rem; /* p-6 */
+  box-shadow:
+    0 10px 15px -3px rgba(0, 0, 0, 0.1),
+    0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  border-radius: 0.5rem; /* sm:rounded-lg */
+  transition: all 0.2s ease;
+`;
+
+/* ============================ */
+/* === Close Button Component === */
+/* ============================ */
+export const StyledDialogClose = styled(DialogPrimitive.Close)`
+  position: absolute;
+  top: 1rem; /* top-4 */
+  right: 1rem; /* right-4 */
+  background: none;
+  border: none;
+  border-radius: 0.125rem; /* rounded-sm */
+  opacity: 0.7;
+  cursor: pointer;
+  transition: opacity 0.2s ease;
+
+  &:hover {
+    opacity: 1;
+  }
+
+  &:focus {
+    outline: none;
+    box-shadow: 0 0 0 2px #3b82f6; /* focus:ring-2 focus:ring-ring */
+  }
+`;
+
+/* ========================== */
+/* === Header Component  === */
+/* ========================== */
+export const StyledDialogHeader = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 0.375rem; /* Aproximadamente space-y-1.5 */
+  text-align: center;
+
+  @media (min-width: 640px) {
+    text-align: left;
+  }
+`;
+
+/* ========================== */
+/* === Footer Component  === */
+/* ========================== */
+export const StyledDialogFooter = styled.div`
+  display: flex;
+  flex-direction: column-reverse;
+  justify-content: flex-end;
+  gap: 0.5rem; /* Aproximadamente sm:space-x-2 */
+
+  @media (min-width: 640px) {
+    flex-direction: row;
+  }
+`;
+
+/* =========================== */
+/* === Title Component  === */
+/* =========================== */
+export const StyledDialogTitle = styled(DialogPrimitive.Title)`
+  font-size: 1.125rem; /* text-lg */
+  font-weight: 600; /* font-semibold */
+  line-height: 1; /* leading-none */
+  letter-spacing: -0.025em; /* tracking-tight */
+`;
+
+/* =============================== */
+/* === Description Component  === */
+/* =============================== */
+export const StyledDialogDescription = styled(DialogPrimitive.Description)`
+  font-size: 0.875rem; /* text-sm */
+  color: #6b7280; /* text-muted-foreground */
+`;