@granto-umbrella/umbrella-components 3.0.34 → 3.0.36

package/src/components/atoms/Button/Button.tsx

@@ -1,76 +1,76 @@
-import React from "react";
-import { StyledButton } from "./Button.styles";
-import { ButtonProps } from "./Button.types";
-import * as Icons from "@phosphor-icons/react";
-import { semanticSizes } from "../../../styles/tokens";
-
-const Button: React.FC<ButtonProps> = ({
-  children,
-  size = "md",
-  variant = "primary",
-  radius = "md",
-  isLoading = false,
-  iconSize = "lg",
-  leftIcon,
-  rightIcon,
-  width,
-  height,
-  testId,
-  ...props
-}) => {
-  const IconComponentLeft =
-    leftIcon && (Icons[leftIcon as keyof typeof Icons] as React.ElementType);
-  const IconComponentRight =
-    rightIcon && (Icons[rightIcon as keyof typeof Icons] as React.ElementType);
-
-  return (
-    <StyledButton
-      $size={size}
-      $variant={variant}
-      $radius={radius}
-      $width={width}
-      $height={height}
-      data-testid={testId}
-      id={testId}
-      {...props}
-    >
-      {isLoading ? (
-        <Icons.Spinner
-          size={
-            semanticSizes.global.padding[
-              iconSize as keyof typeof semanticSizes.global.padding
-            ]
-          }
-        />
-      ) : (
-        <>
-          {IconComponentLeft && (
-            <span className="icon-left">
-              <IconComponentLeft
-                size={
-                  semanticSizes.global.padding[
-                    iconSize as keyof typeof semanticSizes.global.padding
-                  ]
-                }
-              />
-            </span>
-          )}
-          {children}
-          {IconComponentRight && (
-            <span className="icon-right">
-              <IconComponentRight
-                size={
-                  semanticSizes.global.padding[
-                    iconSize as keyof typeof semanticSizes.global.padding
-                  ]
-                }
-              />
-            </span>
-          )}
-        </>
-      )}
-    </StyledButton>
-  );
-};
-
-export default Button;
+import React from 'react';
+import { StyledButton } from './Button.styles';
+import { ButtonProps } from './Button.types';
+import * as Icons from '@phosphor-icons/react';
+import { semanticSizes } from '../../../styles/tokens';
+
+const Button: React.FC<ButtonProps> = ({
+  children,
+  size = 'md',
+  variant = 'primary',
+  radius = 'md',
+  isLoading = false,
+  iconSize = 'lg',
+  leftIcon,
+  rightIcon,
+  width,
+  height,
+  testId,
+  ...props
+}) => {
+  const IconComponentLeft =
+    leftIcon && (Icons[leftIcon as keyof typeof Icons] as React.ElementType);
+  const IconComponentRight =
+    rightIcon && (Icons[rightIcon as keyof typeof Icons] as React.ElementType);
+
+  return (
+    <StyledButton
+      $size={size}
+      $variant={variant}
+      $radius={radius}
+      $width={width}
+      $height={height}
+      data-testid={testId}
+      id={testId}
+      {...props}
+    >
+      {isLoading ? (
+        <Icons.Spinner
+          size={
+            semanticSizes.global.padding[
+              iconSize as keyof typeof semanticSizes.global.padding
+            ]
+          }
+        />
+      ) : (
+        <>
+          {IconComponentLeft && (
+            <span className="icon-left">
+              <IconComponentLeft
+                size={
+                  semanticSizes.global.padding[
+                    iconSize as keyof typeof semanticSizes.global.padding
+                  ]
+                }
+              />
+            </span>
+          )}
+          {children}
+          {IconComponentRight && (
+            <span className="icon-right">
+              <IconComponentRight
+                size={
+                  semanticSizes.global.padding[
+                    iconSize as keyof typeof semanticSizes.global.padding
+                  ]
+                }
+              />
+            </span>
+          )}
+        </>
+      )}
+    </StyledButton>
+  );
+};
+
+export default Button;

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

@@ -1,28 +1,28 @@
-export interface ButtonProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-  size?: "sm" | "md" | "lg";
-  variant?:
-    | "primary"
-    | "outline"
-    | "outline_ghost"
-    | "outline_ghost_disabled"
-    | "outline_danger"
-    | "danger"
-    | "ghost"
-    | "ghost_alert"
-    | "alert"
-    | "danger-no-fill" 
-    | "accent-outline" 
-    | "accent-fill" 
-    | "secondary-outline" 
-    | "danger-fill"; 
-  radius?: string;
-  isLoading?: boolean;
-  leftIcon?: string;
-  rightIcon?: string;
-  iconSize?: string;
-  fontSize?: string;
-  width?: string;
-  height?: string;
-  testId?: string;
-}
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  size?: 'sm' | 'md' | 'lg';
+  variant?:
+    | 'primary'
+    | 'outline'
+    | 'outline_ghost'
+    | 'outline_ghost_disabled'
+    | 'outline_danger'
+    | 'danger'
+    | 'ghost'
+    | 'ghost_alert'
+    | 'alert'
+    | 'danger-no-fill'
+    | 'accent-outline'
+    | 'accent-fill'
+    | 'secondary-outline'
+    | 'danger-fill';
+  radius?: string;
+  isLoading?: boolean;
+  leftIcon?: string;
+  rightIcon?: string;
+  iconSize?: string;
+  fontSize?: string;
+  width?: string;
+  height?: string;
+  testId?: string;
+}

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

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

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

@@ -1,72 +1,72 @@
-import styled from "styled-components";
-import {
-  semanticColors,
-  semanticSizes,
-  semanticRadius,
-  typographyTokens,
-} from "../../../styles/tokens";
-
-export const CheckboxWrapper = styled.label`
-  display: flex;
-  align-items: center;
-  gap: ${semanticSizes.global.gap.sm};
-  cursor: pointer;
-  font-size: ${typographyTokens.fontSizes.labelS};
-  color: ${semanticColors.neutral[600]};
-  user-select: none;
-`;
-
-export const StyledCheckbox = styled.input`
-  width: ${semanticSizes.global.padding.xl};
-  height: ${semanticSizes.global.padding.xl};
-  border: 2px solid ${semanticColors.neutral[400]};
-  border-radius: ${semanticRadius.global.radius.sm};
-  appearance: none;
-  cursor: pointer;
-  position: relative;
-  transition: all 0.2s ease-in-out;
-
-  &:checked {
-    background: ${semanticColors.branding.surface.enabled};
-    border-color: ${semanticColors.branding.surface.enabled};
-  }
-`;
-
-export const CheckboxIconWrapper = styled.div<{ checked?: boolean }>`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  position: absolute;
-  width: ${semanticSizes.global.padding.xl};
-  height: ${semanticSizes.global.padding.xl};
-  left: 0;
-  top: 50%;
-  transform: translateY(-50%);
-  pointer-events: none;
-  color: ${({ checked }) =>
-    checked ? semanticColors.base.background : "transparent"};
-`;
-
-export const CheckboxLabel = styled.span`
-  font-size: ${typographyTokens.fontSizes.labelS};
-  color: ${semanticColors.base.text};
-`;
-
-export const CheckboxGroupWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: ${semanticSizes.global.gap.sm};
-`;
-
-export const CheckboxGroupHorizontal = styled(CheckboxGroupWrapper)`
-  flex-direction: row;
-  flex-wrap: wrap;
-`;
-
-export const SelectAllWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: ${semanticSizes.global.gap.sm};
-  font-weight: bold;
-  font-size: ${typographyTokens.fontSizes.labelS};
-`;
+import styled from 'styled-components';
+import {
+  semanticColors,
+  semanticSizes,
+  semanticRadius,
+  typographyTokens,
+} from '../../../styles/tokens';
+
+export const CheckboxWrapper = styled.label`
+  display: flex;
+  align-items: center;
+  gap: ${semanticSizes.global.gap.sm};
+  cursor: pointer;
+  font-size: ${typographyTokens.fontSizes.labelS};
+  color: ${semanticColors.neutral[600]};
+  user-select: none;
+`;
+
+export const StyledCheckbox = styled.input`
+  width: ${semanticSizes.global.padding.xl};
+  height: ${semanticSizes.global.padding.xl};
+  border: 2px solid ${semanticColors.neutral[400]};
+  border-radius: ${semanticRadius.global.radius.sm};
+  appearance: none;
+  cursor: pointer;
+  position: relative;
+  transition: all 0.2s ease-in-out;
+
+  &:checked {
+    background: ${semanticColors.branding.surface.enabled};
+    border-color: ${semanticColors.branding.surface.enabled};
+  }
+`;
+
+export const CheckboxIconWrapper = styled.div<{ checked?: boolean }>`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  width: ${semanticSizes.global.padding.xl};
+  height: ${semanticSizes.global.padding.xl};
+  left: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  pointer-events: none;
+  color: ${({ checked }) =>
+    checked ? semanticColors.base.background : 'transparent'};
+`;
+
+export const CheckboxLabel = styled.span`
+  font-size: ${typographyTokens.fontSizes.labelS};
+  color: ${semanticColors.base.text};
+`;
+
+export const CheckboxGroupWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${semanticSizes.global.gap.sm};
+`;
+
+export const CheckboxGroupHorizontal = styled(CheckboxGroupWrapper)`
+  flex-direction: row;
+  flex-wrap: wrap;
+`;
+
+export const SelectAllWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${semanticSizes.global.gap.sm};
+  font-weight: bold;
+  font-size: ${typographyTokens.fontSizes.labelS};
+`;

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

@@ -1,36 +1,36 @@
-import React from "react";
-import { Check } from "@phosphor-icons/react";
-import {
-  CheckboxWrapper,
-  StyledCheckbox,
-  CheckboxLabel,
-  CheckboxIconWrapper,
-} from "./Checkbox.styles";
-import { CheckboxProps } from "./Checkbox.types";
-import { semanticSizes } from "../../../styles/tokens"; 
-
-export const Checkbox: React.FC<CheckboxProps> = ({
-  label,
-  checked,
-  onChange,
-  disabled = false,
-  ...props
-}) => {
-  return (
-    <CheckboxWrapper>
-      <StyledCheckbox
-        type="checkbox"
-        checked={checked}
-        onChange={onChange}
-        disabled={disabled}
-        {...props}
-      />
-      {checked && (
-        <CheckboxIconWrapper>
-          <Check size={semanticSizes.global.padding.sm} weight="bold" />
-        </CheckboxIconWrapper>
-      )}
-      {label && <CheckboxLabel>{label}</CheckboxLabel>}
-    </CheckboxWrapper>
-  );
-};
+import React from 'react';
+import { Check } from '@phosphor-icons/react';
+import {
+  CheckboxWrapper,
+  StyledCheckbox,
+  CheckboxLabel,
+  CheckboxIconWrapper,
+} from './Checkbox.styles';
+import { CheckboxProps } from './Checkbox.types';
+import { semanticSizes } from '../../../styles/tokens';
+
+export const Checkbox: React.FC<CheckboxProps> = ({
+  label,
+  checked,
+  onChange,
+  disabled = false,
+  ...props
+}) => {
+  return (
+    <CheckboxWrapper>
+      <StyledCheckbox
+        type="checkbox"
+        checked={checked}
+        onChange={onChange}
+        disabled={disabled}
+        {...props}
+      />
+      {checked && (
+        <CheckboxIconWrapper>
+          <Check size={semanticSizes.global.padding.sm} weight="bold" />
+        </CheckboxIconWrapper>
+      )}
+      {label && <CheckboxLabel>{label}</CheckboxLabel>}
+    </CheckboxWrapper>
+  );
+};

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

@@ -1,14 +1,14 @@
-export interface CheckboxProps
-  extends React.InputHTMLAttributes<HTMLInputElement> {
-  label?: string;
-  checked?: boolean;
-  onChange?: () => void;
-  disabled?: boolean;
-}
-
-export interface CheckboxGroupProps {
-  options: { label: string; value: string }[];
-  selected: string[];
-  setSelected: (values: string[]) => void;
-  direction?: "vertical" | "horizontal";
-}
+export interface CheckboxProps
+  extends React.InputHTMLAttributes<HTMLInputElement> {
+  label?: string;
+  checked?: boolean;
+  onChange?: () => void;
+  disabled?: boolean;
+}
+
+export interface CheckboxGroupProps {
+  options: { label: string; value: string }[];
+  selected: string[];
+  setSelected: (values: string[]) => void;
+  direction?: 'vertical' | 'horizontal';
+}

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

@@ -1,30 +1,30 @@
-import React from "react";
-import { Checkbox } from "./Checkbox";
-import { CheckboxGroupProps } from "./Checkbox.types";
-import { CheckboxGroupWrapper } from "./Checkbox.styles";
-
-export const CheckboxGroup: React.FC<CheckboxGroupProps> = ({
-  options,
-  selected,
-  setSelected,
-}) => {
-  const handleChange = (value: string) => {
-    const newSelected = selected.includes(value)
-      ? selected.filter((v: string) => v !== value)
-      : [...selected, value];
-    setSelected(newSelected);
-  };
-
-  return (
-    <CheckboxGroupWrapper>
-      {options.map((option) => (
-        <Checkbox
-          key={option.value}
-          label={option.label}
-          checked={selected.includes(option.value)}
-          onChange={() => handleChange(option.value)}
-        />
-      ))}
-    </CheckboxGroupWrapper>
-  );
-};
+import React from 'react';
+import { Checkbox } from './Checkbox';
+import { CheckboxGroupProps } from './Checkbox.types';
+import { CheckboxGroupWrapper } from './Checkbox.styles';
+
+export const CheckboxGroup: React.FC<CheckboxGroupProps> = ({
+  options,
+  selected,
+  setSelected,
+}) => {
+  const handleChange = (value: string) => {
+    const newSelected = selected.includes(value)
+      ? selected.filter((v: string) => v !== value)
+      : [...selected, value];
+    setSelected(newSelected);
+  };
+
+  return (
+    <CheckboxGroupWrapper>
+      {options.map((option) => (
+        <Checkbox
+          key={option.value}
+          label={option.label}
+          checked={selected.includes(option.value)}
+          onChange={() => handleChange(option.value)}
+        />
+      ))}
+    </CheckboxGroupWrapper>
+  );
+};

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

@@ -1,32 +1,32 @@
-import React from "react";
-import { Checkbox } from "./Checkbox";
-import { CheckboxGroup } from "./CheckboxGroup";
-import { CheckboxGroupProps } from "./Checkbox.types";
-import { SelectAllWrapper } from "./Checkbox.styles";
-
-export const CheckboxSelectAll: React.FC<CheckboxGroupProps> = ({
-  options,
-  selected,
-  setSelected,
-}) => {
-  const allSelected = selected.length === options.length;
-
-  const handleSelectAll = () => {
-    setSelected(allSelected ? [] : options.map((option) => option.value));
-  };
-
-  return (
-    <SelectAllWrapper>
-      <Checkbox
-        label="Selecionar todos"
-        checked={allSelected}
-        onChange={handleSelectAll}
-      />
-      <CheckboxGroup
-        options={options}
-        selected={selected}
-        setSelected={setSelected}
-      />
-    </SelectAllWrapper>
-  );
-};
+import React from 'react';
+import { Checkbox } from './Checkbox';
+import { CheckboxGroup } from './CheckboxGroup';
+import { CheckboxGroupProps } from './Checkbox.types';
+import { SelectAllWrapper } from './Checkbox.styles';
+
+export const CheckboxSelectAll: React.FC<CheckboxGroupProps> = ({
+  options,
+  selected,
+  setSelected,
+}) => {
+  const allSelected = selected.length === options.length;
+
+  const handleSelectAll = () => {
+    setSelected(allSelected ? [] : options.map((option) => option.value));
+  };
+
+  return (
+    <SelectAllWrapper>
+      <Checkbox
+        label="Selecionar todos"
+        checked={allSelected}
+        onChange={handleSelectAll}
+      />
+      <CheckboxGroup
+        options={options}
+        selected={selected}
+        setSelected={setSelected}
+      />
+    </SelectAllWrapper>
+  );
+};

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

@@ -1,39 +1,38 @@
-
-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};
-  }
-`;
+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};
+  }
+`;