@granto-umbrella/umbrella-components 3.0.34 → 3.0.36

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

@@ -1,243 +1,243 @@
-import {
-  primitiveColors,
-  primitiveShadows,
-  primitiveSizes,
-  semanticBorders,
-  semanticColors,
-  semanticShadows,
-} from '../../../styles/tokens';
-import styled from 'styled-components';
-import { Search } from 'lucide-react';
-//
-export const NavbarContainer = styled.nav`
-  height: 72px;
-  display: flex;
-  width: 100%;
-  align-items: center;
-  justify-content: space-between;
-  padding: ${primitiveSizes.size.x2} ${primitiveSizes.size.x6};
-  background-color: ${semanticColors.base.background};
-  position: relative;
-`;
-
-export const LogoContainer = styled.div`
-  display: flex;
-  align-items: center;
-  gap: ${primitiveSizes.size.x4};
-  justify-content: center;
-`;
-
-const SvgBarra = () => (
-  <svg
-    width="1"
-    height="34"
-    viewBox="0 0 1 34"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      d="M0.5 0.5V33.5"
-      stroke="#E0E3E8"
-      strokeLinecap="round"
-      strokeDasharray="1 1"
-    />
-  </svg>
-);
-
-export const BarraSeparadora = styled(SvgBarra)`
-  width: 1px;
-  height: 34px;
-  margin: 0;
-`;
-
-export const Menu = styled.div`
-  display: flex;
-  align-items: center;
-  gap: ${primitiveSizes.size.x6};
-  margin-left: ${primitiveSizes.size.x4};
-  align-items: center;
-
-  a {
-    text-decoration: none;
-    color: ${semanticColors.base.text};
-    font-family: var(--Font-Family-Brand, Mulish);
-    font-size: ${primitiveSizes.size.x4};
-    font-weight: 400;
-    line-height: 125%;
-    font-style: normal;
-
-    &:hover {
-      color: ${semanticColors.branding.text.accent.hover};
-    }
-  }
-`;
-
-export const SearchBar = styled.div`
-  display: flex;
-  align-items: center;
-  border: ${semanticBorders.global.sm} solid ${primitiveColors.gray[200]};
-  border-radius: ${primitiveSizes.size.x2};
-  padding: ${primitiveSizes.size.x2} ${primitiveSizes.size.x4};
-  width: 300px;
-
-  input {
-    border: none;
-    outline: none;
-    width: 100%;
-    margin-left: ${primitiveSizes.size.x2};
-  }
-`;
-
-export const SearchContainer = styled.div`
-  display: flex;
-  height: 40px;
-  padding: ${primitiveSizes.size.x3};
-  align-items: center;
-  gap: ${primitiveSizes.size.x2};
-  align-self: stretch;
-  border-radius: ${primitiveSizes.size.x1};
-  border: ${semanticBorders.global.sm} solid ${primitiveColors.gray[300]};
-  background: ${semanticColors.base.background};
-  position: relative;
-
-  input {
-    width: 100%;
-    border: none;
-    outline: none;
-    color: ${semanticColors.global.text.onSurface.enabled};
-    font-family: var(--Font-Family-Brand, Mulish);
-    font-size: ${primitiveSizes.size.x4};
-    font-style: normal;
-    font-weight: 500;
-    line-height: 115%;
-    background: transparent;
-
-    &::placeholder {
-      color: #606060;
-    }
-
-    &:focus {
-      outline: none;
-    }
-  }
-
-  @media (max-width: 600px) {
-    width: 100%;
-    margin-left: 1.5rem;
-  }
-`;
-
-export const SearchWrapper = styled.div`
-  // alterado
-  @media (max-width: 600px) {
-    width: 100%;
-    position: fixed;
-    top: 0;
-    background-color: ${semanticColors.base.background};
-    height: 7rem;
-    padding: ${primitiveSizes.size.x6} ${primitiveSizes.size.x12};
-    display: flex;
-    align-items: center;
-    box-shadow: ${semanticShadows.shadow.md};
-    z-index: 100;
-  }
-`;
-
-export const SearchIconStyled = styled(Search)`
-  color: ${semanticColors.global.text.onSurface.enabled};
-  width: ${primitiveSizes.size.x4};
-  height: ${primitiveSizes.size.x4};
-`;
-
-export const UserProfile = styled.div`
-  display: flex;
-  align-items: center;
-  gap: ${primitiveSizes.size.x2};
-  position: relative;
-  border-left: 1px solid ${primitiveColors.gray[200]};
-  padding-left: ${primitiveSizes.size.x4};
-  margin-left: ${primitiveSizes.size.x6};
-
-  .avatar {
-    display: flex;
-    width: ${primitiveSizes.size.x10};
-    height: ${primitiveSizes.size.x10};
-    align-items: center;
-    gap: ${primitiveSizes.size.x2};
-    aspect-ratio: 1/1;
-    border-radius: 50%;
-    background-color: ${primitiveColors.gray[300]};
-    overflow: hidden;
-
-    img {
-      width: 100%;
-      height: 100%;
-      object-fit: cover;
-      border-radius: 50%;
-      border: ${semanticBorders.global.md} solid ${semanticColors.base.text};
-      box-shadow: ${semanticShadows.shadow.md};
-    }
-  }
-
-  .details {
-    display: flex;
-    flex-direction: column;
-
-    span {
-      color: ${semanticColors.base.text};
-      font-family: var(--Font-Family-Brand, Mulish);
-      font-size: ${primitiveSizes.size.x4};
-      font-style: normal;
-      font-weight: 500;
-      line-height: 115%;
-    }
-
-    small {
-      color: ${semanticColors.global.text.onSurface.enabled};
-      font-family: var(--Font-Family-Brand, Mulish);
-      font-size: ${primitiveSizes.size.x3};
-      font-style: normal;
-      font-weight: 500;
-      line-height: 120%;
-      color: ${semanticColors.global.text.onSurface.enabled};
-    }
-  }
-
-  .initials {
-    display: flex;
-    width: 100%;
-    height: 100%;
-    color: ${primitiveColors.base.white};
-    justify-content: center;
-    align-items: center;
-    font-size: ${primitiveSizes.size.x4};
-  }
-`;
-
-export const Dropdown = styled.div`
-  position: absolute;
-  top: 100%;
-  right: 0;
-  background-color: ${semanticColors.base.background};
-  box-shadow: ${primitiveShadows.shadow.md};
-  border-radius: ${primitiveSizes.size.x2};
-  overflow: hidden;
-  z-index: 1000;
-`;
-
-export const DropdownItem = styled.div<{ $type?: 'default' | 'logout' }>`
-  display: flex;
-  align-items: center;
-  flex-direction: row;
-  padding: ${primitiveSizes.size.x3} ${primitiveSizes.size.x4};
-  cursor: pointer;
-  color: ${(props) =>
-    props.$type === 'default'
-      ? semanticColors.global.text.default.enabled
-      : primitiveColors.red[600]};
-
-  &:hover {
-    background-color: ${primitiveColors.gray[200]};
-    color: ${semanticColors.branding.text.accent.hover};
-  }
-`;
+import {
+  primitiveColors,
+  primitiveShadows,
+  primitiveSizes,
+  semanticBorders,
+  semanticColors,
+  semanticShadows,
+} from '../../../styles/tokens';
+import styled from 'styled-components';
+import { Search } from 'lucide-react';
+//
+export const NavbarContainer = styled.nav`
+  height: 72px;
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: space-between;
+  padding: ${primitiveSizes.size.x2} ${primitiveSizes.size.x6};
+  background-color: ${semanticColors.base.background};
+  position: relative;
+`;
+
+export const LogoContainer = styled.div`
+  display: flex;
+  align-items: center;
+  gap: ${primitiveSizes.size.x4};
+  justify-content: center;
+`;
+
+const SvgBarra = () => (
+  <svg
+    width="1"
+    height="34"
+    viewBox="0 0 1 34"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M0.5 0.5V33.5"
+      stroke="#E0E3E8"
+      strokeLinecap="round"
+      strokeDasharray="1 1"
+    />
+  </svg>
+);
+
+export const BarraSeparadora = styled(SvgBarra)`
+  width: 1px;
+  height: 34px;
+  margin: 0;
+`;
+
+export const Menu = styled.div`
+  display: flex;
+  align-items: center;
+  gap: ${primitiveSizes.size.x6};
+  margin-left: ${primitiveSizes.size.x4};
+  align-items: center;
+
+  a {
+    text-decoration: none;
+    color: ${semanticColors.base.text};
+    font-family: var(--Font-Family-Brand, Mulish);
+    font-size: ${primitiveSizes.size.x4};
+    font-weight: 400;
+    line-height: 125%;
+    font-style: normal;
+
+    &:hover {
+      color: ${semanticColors.branding.text.accent.hover};
+    }
+  }
+`;
+
+export const SearchBar = styled.div`
+  display: flex;
+  align-items: center;
+  border: ${semanticBorders.global.sm} solid ${primitiveColors.gray[200]};
+  border-radius: ${primitiveSizes.size.x2};
+  padding: ${primitiveSizes.size.x2} ${primitiveSizes.size.x4};
+  width: 300px;
+
+  input {
+    border: none;
+    outline: none;
+    width: 100%;
+    margin-left: ${primitiveSizes.size.x2};
+  }
+`;
+
+export const SearchContainer = styled.div`
+  display: flex;
+  height: 40px;
+  padding: ${primitiveSizes.size.x3};
+  align-items: center;
+  gap: ${primitiveSizes.size.x2};
+  align-self: stretch;
+  border-radius: ${primitiveSizes.size.x1};
+  border: ${semanticBorders.global.sm} solid ${primitiveColors.gray[300]};
+  background: ${semanticColors.base.background};
+  position: relative;
+
+  input {
+    width: 100%;
+    border: none;
+    outline: none;
+    color: ${semanticColors.global.text.onSurface.enabled};
+    font-family: var(--Font-Family-Brand, Mulish);
+    font-size: ${primitiveSizes.size.x4};
+    font-style: normal;
+    font-weight: 500;
+    line-height: 115%;
+    background: transparent;
+
+    &::placeholder {
+      color: #606060;
+    }
+
+    &:focus {
+      outline: none;
+    }
+  }
+
+  @media (max-width: 600px) {
+    width: 100%;
+    margin-left: 1.5rem;
+  }
+`;
+
+export const SearchWrapper = styled.div`
+  // alterado
+  @media (max-width: 600px) {
+    width: 100%;
+    position: fixed;
+    top: 0;
+    background-color: ${semanticColors.base.background};
+    height: 7rem;
+    padding: ${primitiveSizes.size.x6} ${primitiveSizes.size.x12};
+    display: flex;
+    align-items: center;
+    box-shadow: ${semanticShadows.shadow.md};
+    z-index: 100;
+  }
+`;
+
+export const SearchIconStyled = styled(Search)`
+  color: ${semanticColors.global.text.onSurface.enabled};
+  width: ${primitiveSizes.size.x4};
+  height: ${primitiveSizes.size.x4};
+`;
+
+export const UserProfile = styled.div`
+  display: flex;
+  align-items: center;
+  gap: ${primitiveSizes.size.x2};
+  position: relative;
+  border-left: 1px solid ${primitiveColors.gray[200]};
+  padding-left: ${primitiveSizes.size.x4};
+  margin-left: ${primitiveSizes.size.x6};
+
+  .avatar {
+    display: flex;
+    width: ${primitiveSizes.size.x10};
+    height: ${primitiveSizes.size.x10};
+    align-items: center;
+    gap: ${primitiveSizes.size.x2};
+    aspect-ratio: 1/1;
+    border-radius: 50%;
+    background-color: ${primitiveColors.gray[300]};
+    overflow: hidden;
+
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      border-radius: 50%;
+      border: ${semanticBorders.global.md} solid ${semanticColors.base.text};
+      box-shadow: ${semanticShadows.shadow.md};
+    }
+  }
+
+  .details {
+    display: flex;
+    flex-direction: column;
+
+    span {
+      color: ${semanticColors.base.text};
+      font-family: var(--Font-Family-Brand, Mulish);
+      font-size: ${primitiveSizes.size.x4};
+      font-style: normal;
+      font-weight: 500;
+      line-height: 115%;
+    }
+
+    small {
+      color: ${semanticColors.global.text.onSurface.enabled};
+      font-family: var(--Font-Family-Brand, Mulish);
+      font-size: ${primitiveSizes.size.x3};
+      font-style: normal;
+      font-weight: 500;
+      line-height: 120%;
+      color: ${semanticColors.global.text.onSurface.enabled};
+    }
+  }
+
+  .initials {
+    display: flex;
+    width: 100%;
+    height: 100%;
+    color: ${primitiveColors.base.white};
+    justify-content: center;
+    align-items: center;
+    font-size: ${primitiveSizes.size.x4};
+  }
+`;
+
+export const Dropdown = styled.div`
+  position: absolute;
+  top: 100%;
+  right: 0;
+  background-color: ${semanticColors.base.background};
+  box-shadow: ${primitiveShadows.shadow.md};
+  border-radius: ${primitiveSizes.size.x2};
+  overflow: hidden;
+  z-index: 1000;
+`;
+
+export const DropdownItem = styled.div<{ $type?: 'default' | 'logout' }>`
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+  padding: ${primitiveSizes.size.x3} ${primitiveSizes.size.x4};
+  cursor: pointer;
+  color: ${(props) =>
+    props.$type === 'default'
+      ? semanticColors.global.text.default.enabled
+      : primitiveColors.red[600]};
+
+  &:hover {
+    background-color: ${primitiveColors.gray[200]};
+    color: ${semanticColors.branding.text.accent.hover};
+  }
+`;

package/src/global.d.ts

@@ -1,9 +1,9 @@
-// src/global.d.ts
-// Allow import of any ".css" file
-declare module "*.css";
-
-// Allow import of any ".svg" file
-declare module "*.svg" {
-  const content: string;
-  export default content;
-}
+// src/global.d.ts
+// Allow import of any ".css" file
+declare module '*.css';
+
+// Allow import of any ".svg" file
+declare module '*.svg' {
+  const content: string;
+  export default content;
+}

package/src/index.ts

@@ -41,6 +41,7 @@ import { BannerAjuda } from './components/molecules/BannerAjuda';
 import ButtonGroup from './components/molecules/ButtonGroup/ButtonGroup';
 import { Calendar } from './components/molecules/Calendar/Calendar';
 import { CodeInputContainer } from './components/molecules/CodeInputContainer';
+import FieldSelector from './components/molecules/FieldSelector/FieldSelector';
 import { HighlightsCard } from './components/molecules/HighlightsCard/HighlightsCard';
 import { InsuranceCard } from './components/molecules/InsuranceCard/InsuranceCard';
 import { PieChartComponent } from './components/molecules/PieChartComponent/PieChartComponent';
@@ -83,6 +84,7 @@ export {
   RadioGroupField,
   PieChartComponent,
   AlertDialog,
+  FieldSelector,
   BannerAjuda,
   Badge,
   Breadcrumb,

package/src/lib/utils.ts

@@ -1,6 +1,6 @@
-import { clsx, type ClassValue } from "clsx"
-import { twMerge } from "tailwind-merge"
-
-export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs))
-}
+import { clsx, type ClassValue } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

package/src/styles/tokens/borders.ts

@@ -1,17 +1,17 @@
-export const primitiveBorders = {
-  width: {
-    none: "0rem", // 0px
-    half: "0.0625rem", // 1px
-    x1: "0.125rem", // 2px
-    x2: "0.25rem", // 4px
-  },
-};
-
-export const semanticBorders = {
-  global: {
-    none: primitiveBorders.width.none,
-    sm: primitiveBorders.width.half,
-    md: primitiveBorders.width.x1,
-    lg: primitiveBorders.width.x2,
-  },
-};
+export const primitiveBorders = {
+  width: {
+    none: '0rem', // 0px
+    half: '0.0625rem', // 1px
+    x1: '0.125rem', // 2px
+    x2: '0.25rem', // 4px
+  },
+};
+
+export const semanticBorders = {
+  global: {
+    none: primitiveBorders.width.none,
+    sm: primitiveBorders.width.half,
+    md: primitiveBorders.width.x1,
+    lg: primitiveBorders.width.x2,
+  },
+};

package/src/styles/tokens/index.tsx

@@ -1,6 +1,6 @@
-export { primitiveBorders, semanticBorders } from "./borders";
-export { primitiveColors, semanticColors } from "./colors";
-export { primitiveRadius, semanticRadius } from "./radius";
-export { primitiveShadows, semanticShadows } from "./shadows";
-export { primitiveSizes, semanticSizes } from "./sizes";
-export { typographyTokens } from "./typography";
+export { primitiveBorders, semanticBorders } from './borders';
+export { primitiveColors, semanticColors } from './colors';
+export { primitiveRadius, semanticRadius } from './radius';
+export { primitiveShadows, semanticShadows } from './shadows';
+export { primitiveSizes, semanticSizes } from './sizes';
+export { typographyTokens } from './typography';

package/src/styles/tokens/radius.ts

@@ -1,22 +1,22 @@
-export const primitiveRadius = {
-  radius: {
-    half: "0.0625rem", // 1px
-    x1: "0.125rem", // 2px
-    x2: "0.25rem", // 4px
-    x3: "0.5rem", // 8px
-    x4: "1rem", // 16px
-    x1000: "62.4375rem", // 9999px (Full radius, para bordas arredondadas completas)
-  },
-};
-
-export const semanticRadius = {
-  global: {
-    radius: {
-      sm: primitiveRadius.radius.x1, // 2px
-      md: primitiveRadius.radius.x2, // 4px
-      md2: primitiveRadius.radius.x3, // 8px
-      lg: primitiveRadius.radius.x4, // 16px
-      full: primitiveRadius.radius.x1000, // 9999px para bordas completamente arredondadas
-    },
-  },
-};
+export const primitiveRadius = {
+  radius: {
+    half: '0.0625rem', // 1px
+    x1: '0.125rem', // 2px
+    x2: '0.25rem', // 4px
+    x3: '0.5rem', // 8px
+    x4: '1rem', // 16px
+    x1000: '62.4375rem', // 9999px (Full radius, para bordas arredondadas completas)
+  },
+};
+
+export const semanticRadius = {
+  global: {
+    radius: {
+      sm: primitiveRadius.radius.x1, // 2px
+      md: primitiveRadius.radius.x2, // 4px
+      md2: primitiveRadius.radius.x3, // 8px
+      lg: primitiveRadius.radius.x4, // 16px
+      full: primitiveRadius.radius.x1000, // 9999px para bordas completamente arredondadas
+    },
+  },
+};

package/src/styles/tokens/shadows.ts

@@ -1,22 +1,22 @@
-import { semanticColors } from "./colors";
-
-export const primitiveShadows = {
-  shadow: {
-    primary: `0px 0px 0px 2px ${semanticColors.branding.border.enabled}`,
-    danger: `0px 0px 0px 2px ${semanticColors.danger.border.enabled}`,
-    none: "none",
-    default:
-      "0px 2px 4px rgba(158, 158, 158, 0.05), 0px 7px 7px rgba(158, 158, 158, 0.04), 0px 16px 9px rgba(158, 158, 158, 0.03), 0px 28px 11px rgba(158, 158, 158, 0.01), 0px 44px 12px rgba(158, 158, 158, 0)",
-    md: "0px 2px 4px rgba(158, 158, 158, 0.2), 0px 8px 8px rgba(158, 158, 158, 0.17), 0px 17px 10px rgba(158, 158, 158, 0.1), 0px 30px 12px rgba(158, 158, 158, 0.03), 0px 47px 13px rgba(158, 158, 158, 0)",
-    lg: "1px 1px 3px rgba(214, 214, 214, 0.2), 4px 4px 6px rgba(214, 214, 214, 0.17), 9px 10px 8px rgba(214, 214, 214, 0.1), 15px 17px 9px rgba(214, 214, 214, 0.03), 24px 26px 10px rgba(214, 214, 214, 0)",
-  },
-};
-
-export const semanticShadows = {
-  shadow: {
-    none: primitiveShadows.shadow.none,
-    default: primitiveShadows.shadow.default,
-    md: primitiveShadows.shadow.md,
-    lg: primitiveShadows.shadow.lg,
-  },
-};
+import { semanticColors } from './colors';
+
+export const primitiveShadows = {
+  shadow: {
+    primary: `0px 0px 0px 2px ${semanticColors.branding.border.enabled}`,
+    danger: `0px 0px 0px 2px ${semanticColors.danger.border.enabled}`,
+    none: 'none',
+    default:
+      '0px 2px 4px rgba(158, 158, 158, 0.05), 0px 7px 7px rgba(158, 158, 158, 0.04), 0px 16px 9px rgba(158, 158, 158, 0.03), 0px 28px 11px rgba(158, 158, 158, 0.01), 0px 44px 12px rgba(158, 158, 158, 0)',
+    md: '0px 2px 4px rgba(158, 158, 158, 0.2), 0px 8px 8px rgba(158, 158, 158, 0.17), 0px 17px 10px rgba(158, 158, 158, 0.1), 0px 30px 12px rgba(158, 158, 158, 0.03), 0px 47px 13px rgba(158, 158, 158, 0)',
+    lg: '1px 1px 3px rgba(214, 214, 214, 0.2), 4px 4px 6px rgba(214, 214, 214, 0.17), 9px 10px 8px rgba(214, 214, 214, 0.1), 15px 17px 9px rgba(214, 214, 214, 0.03), 24px 26px 10px rgba(214, 214, 214, 0)',
+  },
+};
+
+export const semanticShadows = {
+  shadow: {
+    none: primitiveShadows.shadow.none,
+    default: primitiveShadows.shadow.default,
+    md: primitiveShadows.shadow.md,
+    lg: primitiveShadows.shadow.lg,
+  },
+};