@granto-umbrella/umbrella-components 3.0.34 → 3.0.36

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

@@ -1,149 +1,153 @@
-import styled from 'styled-components';
-import Select from 'react-select';
-import {
-  semanticSizes,
-  semanticShadows,
-  primitiveSizes,
-  typographyTokens,
-  semanticBorders,
-  semanticColors,
-  semanticRadius,
-} from '../../../styles/tokens/index';
-
-export const Container = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: ${primitiveSizes.size.x1};
-  width: 100%;
-`;
-
-export const Label = styled.label`
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  font-size: ${typographyTokens.fontSizes.labelS};
-  color: ${semanticColors.global.text.subtitle.enabled};
-  font-weight: ${typographyTokens.fontWeights.medium};
-`;
-
-export const SupportingText = styled.span<{ $error?: boolean }>`
-  font-size: ${typographyTokens.fontSizes.captionM};
-  color: ${({ $error }) =>
-    $error
-      ? semanticColors.global.text.feedback.strong.error
-      : semanticColors.global.text.subtitle.enabled};
-`;
-
-export const CustomSelect = styled(Select).attrs({
-  classNamePrefix: 'react-select',
-})<{
-  $size?: keyof typeof semanticSizes.global.padding;
-  $error?: boolean;
-}>`
-  .react-select__control {
-    background: ${semanticColors.base.background};
-    border: ${semanticBorders.global.sm} solid
-      ${({ $error }) =>
-        $error
-          ? semanticColors.global.border.danger.enabled
-          : semanticColors.global.border.medium};
-    border-radius: ${semanticRadius.global.radius.md};
-    transition: border-color 0.2s, box-shadow 0.2s;
-    min-height: ${primitiveSizes.size.x12};
-
-    &:hover {
-      border-color: ${({ $error }) =>
-        $error
-          ? semanticColors.danger.border.hover
-          : semanticColors.branding.border.hover};
-    }
-
-    &:focus-within {
-      border-color: ${({ $error }) =>
-        $error
-          ? semanticColors.danger.border.enabled
-          : semanticColors.branding.border.enabled};
-      box-shadow: ${semanticShadows.shadow.md};
-    }
-
-    &.react-select__control--is-disabled {
-      background: ${semanticColors.global.surface.disabled};
-      border-color: ${semanticColors.global.border.strong};
-      color: ${semanticColors.global.text.onSurface.enabled};
-      cursor: not-allowed;
-    }
-  }
-
-  .react-select__value-container {
-    padding: ${({ $size = 'md' }) => semanticSizes.global.padding[$size]};
-    font-size: ${typographyTokens.fontSizes.labelM};
-    color: ${semanticColors.base.text};
-  }
-
-  .react-select__placeholder {
-    color: ${semanticColors.global.text.onSurface.subtitle};
-    font-size: ${typographyTokens.fontSizes.labelM};
-  }
-
-  .react-select__menu {
-    background: ${semanticColors.base.background};
-    border-radius: ${semanticRadius.global.radius.md};
-    box-shadow: ${semanticShadows.shadow.lg};
-    border: ${semanticBorders.global.sm} solid
-      ${semanticColors.global.border.default};
-    z-index: 1000;
-  }
-
-  .react-select__option {
-    padding: ${({ $size = 'md' }) => semanticSizes.global.padding[$size]};
-    font-size: ${typographyTokens.fontSizes.labelM};
-    cursor: pointer;
-    transition: background 0.2s, color 0.2s;
-    color: ${semanticColors.base.text};
-
-    &:hover {
-      background: ${semanticColors.branding.surface.hover};
-      color: ${semanticColors.branding.text.onSurfaceAccent.enabled};
-    }
-
-    &:active {
-      background: ${semanticColors.branding.surface.pressed};
-      color: ${semanticColors.branding.text.onSurfaceAccent.enabled};
-    }
-  }
-
-  .react-select__option--is-selected {
-    background: ${semanticColors.branding.surface.enabled};
-    color: ${semanticColors.branding.text.onSurfaceAccent.enabled};
-    font-weight: ${typographyTokens.fontWeights.semibold};
-
-    &:hover {
-      background: ${semanticColors.branding.surface.hover};
-    }
-  }
-
-  .react-select__option--is-focused {
-    background: ${semanticColors.neutral[100]};
-    color: ${semanticColors.base.text};
-  }
-
-  .react-select__indicator-separator {
-    background-color: ${semanticColors.global.border.medium};
-  }
-
-  .react-select__dropdown-indicator {
-    color: ${semanticColors.global.text.onSurface.enabled};
-
-    &:hover {
-      color: ${semanticColors.branding.text.accent.enabled};
-    }
-  }
-
-  .react-select__clear-indicator {
-    color: ${semanticColors.global.text.onSurface.enabled};
-
-    &:hover {
-      color: ${semanticColors.danger.text.enabled};
-    }
-  }
-`;
+import styled from 'styled-components';
+import Select from 'react-select';
+import {
+  semanticSizes,
+  semanticShadows,
+  primitiveSizes,
+  typographyTokens,
+  semanticBorders,
+  semanticColors,
+  semanticRadius,
+} from '../../../styles/tokens/index';
+
+export const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${primitiveSizes.size.x1};
+  width: 100%;
+`;
+
+export const Label = styled.label`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: ${typographyTokens.fontSizes.labelS};
+  color: ${semanticColors.global.text.subtitle.enabled};
+  font-weight: ${typographyTokens.fontWeights.medium};
+`;
+
+export const SupportingText = styled.span<{ $error?: boolean }>`
+  font-size: ${typographyTokens.fontSizes.captionM};
+  color: ${({ $error }) =>
+    $error
+      ? semanticColors.global.text.feedback.strong.error
+      : semanticColors.global.text.subtitle.enabled};
+`;
+
+export const CustomSelect = styled(Select).attrs({
+  classNamePrefix: 'react-select',
+})<{
+  $size?: keyof typeof semanticSizes.global.padding;
+  $error?: boolean;
+}>`
+  .react-select__control {
+    background: ${semanticColors.base.background};
+    border: ${semanticBorders.global.sm} solid
+      ${({ $error }) =>
+        $error
+          ? semanticColors.global.border.danger.enabled
+          : semanticColors.global.border.medium};
+    border-radius: ${semanticRadius.global.radius.md};
+    transition:
+      border-color 0.2s,
+      box-shadow 0.2s;
+    min-height: ${primitiveSizes.size.x12};
+
+    &:hover {
+      border-color: ${({ $error }) =>
+        $error
+          ? semanticColors.danger.border.hover
+          : semanticColors.branding.border.hover};
+    }
+
+    &:focus-within {
+      border-color: ${({ $error }) =>
+        $error
+          ? semanticColors.danger.border.enabled
+          : semanticColors.branding.border.enabled};
+      box-shadow: ${semanticShadows.shadow.md};
+    }
+
+    &.react-select__control--is-disabled {
+      background: ${semanticColors.global.surface.disabled};
+      border-color: ${semanticColors.global.border.strong};
+      color: ${semanticColors.global.text.onSurface.enabled};
+      cursor: not-allowed;
+    }
+  }
+
+  .react-select__value-container {
+    padding: ${({ $size = 'md' }) => semanticSizes.global.padding[$size]};
+    font-size: ${typographyTokens.fontSizes.labelM};
+    color: ${semanticColors.base.text};
+  }
+
+  .react-select__placeholder {
+    color: ${semanticColors.global.text.onSurface.subtitle};
+    font-size: ${typographyTokens.fontSizes.labelM};
+  }
+
+  .react-select__menu {
+    background: ${semanticColors.base.background};
+    border-radius: ${semanticRadius.global.radius.md};
+    box-shadow: ${semanticShadows.shadow.lg};
+    border: ${semanticBorders.global.sm} solid
+      ${semanticColors.global.border.default};
+    z-index: 1000;
+  }
+
+  .react-select__option {
+    padding: ${({ $size = 'md' }) => semanticSizes.global.padding[$size]};
+    font-size: ${typographyTokens.fontSizes.labelM};
+    cursor: pointer;
+    transition:
+      background 0.2s,
+      color 0.2s;
+    color: ${semanticColors.base.text};
+
+    &:hover {
+      background: ${semanticColors.branding.surface.hover};
+      color: ${semanticColors.branding.text.onSurfaceAccent.enabled};
+    }
+
+    &:active {
+      background: ${semanticColors.branding.surface.pressed};
+      color: ${semanticColors.branding.text.onSurfaceAccent.enabled};
+    }
+  }
+
+  .react-select__option--is-selected {
+    background: ${semanticColors.branding.surface.enabled};
+    color: ${semanticColors.branding.text.onSurfaceAccent.enabled};
+    font-weight: ${typographyTokens.fontWeights.semibold};
+
+    &:hover {
+      background: ${semanticColors.branding.surface.hover};
+    }
+  }
+
+  .react-select__option--is-focused {
+    background: ${semanticColors.neutral[100]};
+    color: ${semanticColors.base.text};
+  }
+
+  .react-select__indicator-separator {
+    background-color: ${semanticColors.global.border.medium};
+  }
+
+  .react-select__dropdown-indicator {
+    color: ${semanticColors.global.text.onSurface.enabled};
+
+    &:hover {
+      color: ${semanticColors.branding.text.accent.enabled};
+    }
+  }
+
+  .react-select__clear-indicator {
+    color: ${semanticColors.global.text.onSurface.enabled};
+
+    &:hover {
+      color: ${semanticColors.danger.text.enabled};
+    }
+  }
+`;

package/src/components/atoms/Select/Select.tsx

@@ -1,43 +1,52 @@
-"use client"
-
-import type React from "react"
-import { Container, Label, SupportingText, CustomSelect } from "./Select.styles"
-import type { SelectProps } from "./Select.types"
-
-interface Option {
-  label: string
-  value: string
-}
-
-const Select: React.FC<SelectProps> = ({
-  label,
-  supportingText,
-  options,
-  placeholder,
-  onChange,
-  value,
-  testId,
-  size = "md",
-  disabled = false,
-  error = false,
-}) => {
-  return (
-    <Container data-testid={testId} id={testId}>
-      {label && <Label>{label}</Label>}
-      <CustomSelect
-        $size={size}
-        $error={error}
-        classNamePrefix="react-select"
-        options={options}
-        placeholder={placeholder || "Selecione"}
-        onChange={(newValue, actionMeta) => onChange && onChange(newValue as Option | null, actionMeta)}
-        value={value}
-        isSearchable
-        isDisabled={disabled}
-      />
-      {supportingText && <SupportingText $error={error}>{supportingText}</SupportingText>}
-    </Container>
-  )
-}
-
-export default Select
+'use client';
+
+import type React from 'react';
+import {
+  Container,
+  Label,
+  SupportingText,
+  CustomSelect,
+} from './Select.styles';
+import type { SelectProps } from './Select.types';
+
+interface Option {
+  label: string;
+  value: string;
+}
+
+const Select: React.FC<SelectProps> = ({
+  label,
+  supportingText,
+  options,
+  placeholder,
+  onChange,
+  value,
+  testId,
+  size = 'md',
+  disabled = false,
+  error = false,
+}) => {
+  return (
+    <Container data-testid={testId} id={testId}>
+      {label && <Label>{label}</Label>}
+      <CustomSelect
+        $size={size}
+        $error={error}
+        classNamePrefix="react-select"
+        options={options}
+        placeholder={placeholder || 'Selecione'}
+        onChange={(newValue, actionMeta) =>
+          onChange && onChange(newValue as Option | null, actionMeta)
+        }
+        value={value}
+        isSearchable
+        isDisabled={disabled}
+      />
+      {supportingText && (
+        <SupportingText $error={error}>{supportingText}</SupportingText>
+      )}
+    </Container>
+  );
+};
+
+export default Select;

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

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

package/src/components/atoms/Subtitle/Subtitle.tsx

@@ -1,7 +1,7 @@
-import React from "react";
-import { Container } from "./Subtitle.styles";
-import { SubtitleProps } from "./Subtitle.types";
-
-export const Subtitle: React.FC<SubtitleProps> = ({ children }) => {
-  return <Container>{children}</Container>;
-};
+import React from 'react';
+import { Container } from './Subtitle.styles';
+import { SubtitleProps } from './Subtitle.types';
+
+export const Subtitle: React.FC<SubtitleProps> = ({ children }) => {
+  return <Container>{children}</Container>;
+};

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

@@ -1,5 +1,5 @@
-import React from "react";
-
-export interface SubtitleProps {
-  children: React.ReactNode;
-}
+import React from 'react';
+
+export interface SubtitleProps {
+  children: React.ReactNode;
+}

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

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

package/src/components/atoms/Switch/Switch.tsx

@@ -1,25 +1,25 @@
-import React from "react";
-import { SwitchWrapper, SwitchInput, SwitchLabel } from "./Switch.styles";
-
-interface SwitchProps extends React.InputHTMLAttributes<HTMLInputElement> {
-  label?: string;
-  testId?: string;
-  text?: string;
-}
-
-export const Switch: React.FC<SwitchProps> = ({
-  label,
-  text,
-  testId,
-  ...props
-}) => {
-  return (
-    <SwitchWrapper>
-      {label && <SwitchLabel>{label}</SwitchLabel>}
-      <SwitchInput data-testid={testId} id={testId} {...props} />
-      {text && <SwitchLabel>{text}</SwitchLabel>}
-    </SwitchWrapper>
-  );
-};
-
-export default Switch;
+import React from 'react';
+import { SwitchWrapper, SwitchInput, SwitchLabel } from './Switch.styles';
+
+interface SwitchProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  label?: string;
+  testId?: string;
+  text?: string;
+}
+
+export const Switch: React.FC<SwitchProps> = ({
+  label,
+  text,
+  testId,
+  ...props
+}) => {
+  return (
+    <SwitchWrapper>
+      {label && <SwitchLabel>{label}</SwitchLabel>}
+      <SwitchInput data-testid={testId} id={testId} {...props} />
+      {text && <SwitchLabel>{text}</SwitchLabel>}
+    </SwitchWrapper>
+  );
+};
+
+export default Switch;

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

@@ -1,57 +1,64 @@
-import styled, { css } from "styled-components"
-import { semanticColors, semanticSizes, semanticBorders, typographyTokens } from "../../../styles/tokens"
-
-export const Wrapper = styled.nav`
-  display: flex;
-  width: 100%;
-  align-items: center;
-  border-bottom: ${semanticBorders.global.lg} solid ${semanticColors.global.border.medium};
-`
-
-export const Tab = styled.button<{ $active: boolean }>`
-  display: flex;
-  height: ${semanticSizes.global.spacings.lg};
-  padding: ${semanticSizes.global.padding.lg} ${semanticSizes.global.padding["3xl"]};
-  justify-content: center;
-  align-items: center;
-  gap: ${semanticSizes.global.gap.sm};
-  background: none;
-  border: none;
-  cursor: pointer;
-  font-family: ${typographyTokens.fontFamily.base};
-  font-size: ${typographyTokens.fontSizes.bodyM};
-  font-weight: ${typographyTokens.fontWeights.regular};
-  line-height: ${typographyTokens.lineHeights.bodyM};
-  color: ${semanticColors.global.text.onSurface.subtitle};
-  margin-bottom: calc(-1 * ${semanticBorders.global.lg});
-  border-bottom: ${semanticBorders.global.lg} solid transparent;
-  
-  & + & {
-    margin-left: ${semanticSizes.global.padding.lg};
-  }
-  
-  ${(p) =>
-    p.$active &&
-    css`
-      border-bottom-color: ${semanticColors.branding.border.enabled};
-      color: ${semanticColors.branding.text.accent.enabled};
-    `}
-    
-  &:hover:not(:disabled) {
-    color: ${semanticColors.branding.text.accent.hover};
-    ${(p) =>
-      p.$active &&
-      css`
-        border-bottom-color: ${semanticColors.branding.border.hover};
-      `}
-  }
-  
-  &:focus {
-    outline: none;
-  }
-`
-
-export const Count = styled.span`
-  font-weight: ${typographyTokens.fontWeights.medium};
-  color: inherit;
-`
+import styled, { css } from 'styled-components';
+import {
+  semanticColors,
+  semanticSizes,
+  semanticBorders,
+  typographyTokens,
+} from '../../../styles/tokens';
+
+export const Wrapper = styled.nav`
+  display: flex;
+  width: 100%;
+  align-items: center;
+  border-bottom: ${semanticBorders.global.lg} solid
+    ${semanticColors.global.border.medium};
+`;
+
+export const Tab = styled.button<{ $active: boolean }>`
+  display: flex;
+  height: ${semanticSizes.global.spacings.lg};
+  padding: ${semanticSizes.global.padding.lg}
+    ${semanticSizes.global.padding['3xl']};
+  justify-content: center;
+  align-items: center;
+  gap: ${semanticSizes.global.gap.sm};
+  background: none;
+  border: none;
+  cursor: pointer;
+  font-family: ${typographyTokens.fontFamily.base};
+  font-size: ${typographyTokens.fontSizes.bodyM};
+  font-weight: ${typographyTokens.fontWeights.regular};
+  line-height: ${typographyTokens.lineHeights.bodyM};
+  color: ${semanticColors.global.text.onSurface.subtitle};
+  margin-bottom: calc(-1 * ${semanticBorders.global.lg});
+  border-bottom: ${semanticBorders.global.lg} solid transparent;
+
+  & + & {
+    margin-left: ${semanticSizes.global.padding.lg};
+  }
+
+  ${(p) =>
+    p.$active &&
+    css`
+      border-bottom-color: ${semanticColors.branding.border.enabled};
+      color: ${semanticColors.branding.text.accent.enabled};
+    `}
+
+  &:hover:not(:disabled) {
+    color: ${semanticColors.branding.text.accent.hover};
+    ${(p) =>
+      p.$active &&
+      css`
+        border-bottom-color: ${semanticColors.branding.border.hover};
+      `}
+  }
+
+  &:focus {
+    outline: none;
+  }
+`;
+
+export const Count = styled.span`
+  font-weight: ${typographyTokens.fontWeights.medium};
+  color: inherit;
+`;

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

@@ -1,2 +1,2 @@
-export { TabBar } from './TabBar';
-export type {  TabBarProps, TabItem } from './TabBar.types';
+export { TabBar } from './TabBar';
+export type { TabBarProps, TabItem } from './TabBar.types';