@granto-umbrella/umbrella-components 3.0.34 → 3.0.36

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

@@ -1,65 +1,66 @@
-import styled, { keyframes } from "styled-components";
-import * as PopoverPrimitive from "@radix-ui/react-popover";
-
-const animateIn = keyframes`
-  from { opacity: 0; transform: scale(0.95); }
-  to { opacity: 1; transform: scale(1); }
-`;
-
-const animateOut = keyframes`
-  from { opacity: 1; transform: scale(1); }
-  to { opacity: 0; transform: scale(0.95); }
-`;
-
-const slideInFromTop2 = keyframes`
-  from { transform: translateY(-10px); opacity: 0; }
-  to { transform: translateY(0); opacity: 1; }
-`;
-
-const slideInFromRight2 = keyframes`
-  from { transform: translateX(10px); opacity: 0; }
-  to { transform: translateX(0); opacity: 1; }
-`;
-
-const slideInFromLeft2 = keyframes`
-  from { transform: translateX(-10px); opacity: 0; }
-  to { transform: translateX(0); opacity: 1; }
-`;
-
-const slideInFromBottom2 = keyframes`
-  from { transform: translateY(10px); opacity: 0; }
-  to { transform: translateY(0); opacity: 1; }
-`;
-
-export const StyledPopoverContent = styled(PopoverPrimitive.Content)`
-  z-index: 50;
-  width: 18rem;
-  border-radius: 0.375rem;
-  border: 1px solid #e5e7eb;
-  background-color: var(--popover-bg, #fff);
-  padding: 1rem;
-  color: var(--popover-foreground, #000);
-  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
-    0 2px 4px -1px rgba(0, 0, 0, 0.06);
-  outline: none;
-
-  &[data-state="open"] {
-    animation: ${animateIn} 0.3s ease-out forwards;
-  }
-  &[data-state="closed"] {
-    animation: ${animateOut} 0.3s ease-in forwards;
-  }
-
-  &[data-side="bottom"] {
-    animation: ${slideInFromTop2} 0.3s ease-out forwards;
-  }
-  &[data-side="left"] {
-    animation: ${slideInFromRight2} 0.3s ease-out forwards;
-  }
-  &[data-side="right"] {
-    animation: ${slideInFromLeft2} 0.3s ease-out forwards;
-  }
-  &[data-side="top"] {
-    animation: ${slideInFromBottom2} 0.3s ease-out forwards;
-  }
-`;
+import styled, { keyframes } from 'styled-components';
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+
+const animateIn = keyframes`
+  from { opacity: 0; transform: scale(0.95); }
+  to { opacity: 1; transform: scale(1); }
+`;
+
+const animateOut = keyframes`
+  from { opacity: 1; transform: scale(1); }
+  to { opacity: 0; transform: scale(0.95); }
+`;
+
+const slideInFromTop2 = keyframes`
+  from { transform: translateY(-10px); opacity: 0; }
+  to { transform: translateY(0); opacity: 1; }
+`;
+
+const slideInFromRight2 = keyframes`
+  from { transform: translateX(10px); opacity: 0; }
+  to { transform: translateX(0); opacity: 1; }
+`;
+
+const slideInFromLeft2 = keyframes`
+  from { transform: translateX(-10px); opacity: 0; }
+  to { transform: translateX(0); opacity: 1; }
+`;
+
+const slideInFromBottom2 = keyframes`
+  from { transform: translateY(10px); opacity: 0; }
+  to { transform: translateY(0); opacity: 1; }
+`;
+
+export const StyledPopoverContent = styled(PopoverPrimitive.Content)`
+  z-index: 50;
+  width: 18rem;
+  border-radius: 0.375rem;
+  border: 1px solid #e5e7eb;
+  background-color: var(--popover-bg, #fff);
+  padding: 1rem;
+  color: var(--popover-foreground, #000);
+  box-shadow:
+    0 4px 6px -1px rgba(0, 0, 0, 0.1),
+    0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  outline: none;
+
+  &[data-state='open'] {
+    animation: ${animateIn} 0.3s ease-out forwards;
+  }
+  &[data-state='closed'] {
+    animation: ${animateOut} 0.3s ease-in forwards;
+  }
+
+  &[data-side='bottom'] {
+    animation: ${slideInFromTop2} 0.3s ease-out forwards;
+  }
+  &[data-side='left'] {
+    animation: ${slideInFromRight2} 0.3s ease-out forwards;
+  }
+  &[data-side='right'] {
+    animation: ${slideInFromLeft2} 0.3s ease-out forwards;
+  }
+  &[data-side='top'] {
+    animation: ${slideInFromBottom2} 0.3s ease-out forwards;
+  }
+`;

package/src/components/molecules/Popover/Popover.tsx

@@ -1,23 +1,23 @@
-import * as React from "react";
-import * as PopoverPrimitive from "@radix-ui/react-popover";
-import { StyledPopoverContent } from "./Popover.styles";
-
-const Popover = PopoverPrimitive.Root;
-const PopoverTrigger = PopoverPrimitive.Trigger;
-
-const PopoverContent = React.forwardRef<
-  React.ElementRef<typeof PopoverPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
->(({ align = "center", sideOffset = 4, ...props }, ref) => (
-  <PopoverPrimitive.Portal>
-    <StyledPopoverContent
-      ref={ref}
-      align={align}
-      sideOffset={sideOffset}
-      {...props}
-    />
-  </PopoverPrimitive.Portal>
-));
-PopoverContent.displayName = PopoverPrimitive.Content.displayName;
-
-export { Popover, PopoverTrigger, PopoverContent };
+import * as React from 'react';
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+import { StyledPopoverContent } from './Popover.styles';
+
+const Popover = PopoverPrimitive.Root;
+const PopoverTrigger = PopoverPrimitive.Trigger;
+
+const PopoverContent = React.forwardRef<
+  React.ElementRef<typeof PopoverPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
+>(({ align = 'center', sideOffset = 4, ...props }, ref) => (
+  <PopoverPrimitive.Portal>
+    <StyledPopoverContent
+      ref={ref}
+      align={align}
+      sideOffset={sideOffset}
+      {...props}
+    />
+  </PopoverPrimitive.Portal>
+));
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;
+
+export { Popover, PopoverTrigger, PopoverContent };

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

@@ -1,11 +1,11 @@
-import styled from "styled-components";
-import { semanticSizes } from "../../../styles/tokens";
-
-export const Container = styled.div<{
-  orientation?: "horizontal" | "vertical";
-}>`
-  display: flex;
-  flex-direction: ${({ orientation = "horizontal" }) =>
-    orientation === "vertical" ? "column" : "row"};
-  gap: ${semanticSizes.global.padding.sm};
-`;
+import styled from 'styled-components';
+import { semanticSizes } from '../../../styles/tokens';
+
+export const Container = styled.div<{
+  orientation?: 'horizontal' | 'vertical';
+}>`
+  display: flex;
+  flex-direction: ${({ orientation = 'horizontal' }) =>
+    orientation === 'vertical' ? 'column' : 'row'};
+  gap: ${semanticSizes.global.padding.sm};
+`;

package/src/components/molecules/RadioBoxGroup/RadioBoxGroup.tsx

@@ -1,43 +1,43 @@
-import React from "react";
-import { Container } from "./RadioBoxGroup.styles";
-import RadioButton from "../../../components/atoms/RadioButton/RadioButton";
-
-export interface Option {
-  label: string;
-  value: string | number;
-  disabled?: boolean;
-}
-
-export interface RadioBoxGroupProps {
-  name: string;
-  options: Option[];
-  value: string;
-  onChange: (value: string) => void;
-  orientation?: "horizontal" | "vertical";
-}
-
-const RadioBoxGroup: React.FC<RadioBoxGroupProps> = ({
-  name,
-  options,
-  value,
-  onChange,
-  orientation = "horizontal",
-}) => {
-  return (
-    <Container orientation={orientation}>
-      {options.map((opt) => (
-        <RadioButton
-          key={opt.value}
-          name={name}
-          value={`${opt.value}`}
-          label={opt.label}
-          checked={opt.value === value}
-          disabled={opt.disabled}
-          onChange={(e) => onChange(e.currentTarget.value)}
-        />
-      ))}
-    </Container>
-  );
-};
-
-export default RadioBoxGroup;
+import React from 'react';
+import { Container } from './RadioBoxGroup.styles';
+import RadioButton from '../../../components/atoms/RadioButton/RadioButton';
+
+export interface Option {
+  label: string;
+  value: string | number;
+  disabled?: boolean;
+}
+
+export interface RadioBoxGroupProps {
+  name: string;
+  options: Option[];
+  value: string;
+  onChange: (value: string) => void;
+  orientation?: 'horizontal' | 'vertical';
+}
+
+const RadioBoxGroup: React.FC<RadioBoxGroupProps> = ({
+  name,
+  options,
+  value,
+  onChange,
+  orientation = 'horizontal',
+}) => {
+  return (
+    <Container orientation={orientation}>
+      {options.map((opt) => (
+        <RadioButton
+          key={opt.value}
+          name={name}
+          value={`${opt.value}`}
+          label={opt.label}
+          checked={opt.value === value}
+          disabled={opt.disabled}
+          onChange={(e) => onChange(e.currentTarget.value)}
+        />
+      ))}
+    </Container>
+  );
+};
+
+export default RadioBoxGroup;

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

@@ -1,64 +1,65 @@
-import styled from "styled-components";
-import {
-  semanticColors,
-  semanticRadius,
-  semanticSizes,
-  typographyTokens,
-} from "../../../styles/tokens";
-
-export const RadioGroupContainer = styled.div`
-  display: flex;
-  flex-wrap: wrap;
-  gap: ${semanticSizes.global.gap.md};
-  width: 100%;
-`;
-
-export const RadioButton = styled.div<{ isSelected: boolean }>`
-  min-width: 274px;
-  padding: ${semanticSizes.global.padding.md} ${semanticSizes.global.padding["2xl"]};
-  height: 40px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  border-radius: ${semanticRadius.global.radius.md2};
-  transition: all 0.2s;
-  font-size: ${typographyTokens.fontSizes.bodyS};
-  font-weight: ${typographyTokens.fontWeights.regular};
-
-  ${({ isSelected }) =>
-    isSelected
-      ? `
-    background-color: ${semanticColors.branding.surface.enabled};
-    color: ${semanticColors.branding.text.onSurfaceAccent.enabled};
-    border: none;
-  `
-      : `
-    background-color: ${semanticColors.base.background};
-    color: ${semanticColors.neutral[700]};
-    border: 1px solid ${semanticColors.global.border.default};
-    
-    &:hover {
-      border-color: ${semanticColors.global.border.medium};
-    }
-  `}
-
-  &:disabled {
-    cursor: not-allowed;
-    opacity: 0.5;
-  }
-`;
-
-export const RadioLabel = styled.label`
-  display: inline-flex;
-  align-items: center;
-  gap: ${semanticSizes.global.gap.lg};
-  cursor: pointer;
-  margin: 0;
-`;
-
-export const HiddenRadioInput = styled.input`
-  position: absolute;
-  opacity: 0;
-  pointer-events: none;
-`;
+import styled from 'styled-components';
+import {
+  semanticColors,
+  semanticRadius,
+  semanticSizes,
+  typographyTokens,
+} from '../../../styles/tokens';
+
+export const RadioGroupContainer = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  gap: ${semanticSizes.global.gap.md};
+  width: 100%;
+`;
+
+export const RadioButton = styled.div<{ isSelected: boolean }>`
+  min-width: 274px;
+  padding: ${semanticSizes.global.padding.md}
+    ${semanticSizes.global.padding['2xl']};
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  border-radius: ${semanticRadius.global.radius.md2};
+  transition: all 0.2s;
+  font-size: ${typographyTokens.fontSizes.bodyS};
+  font-weight: ${typographyTokens.fontWeights.regular};
+
+  ${({ isSelected }) =>
+    isSelected
+      ? `
+    background-color: ${semanticColors.branding.surface.enabled};
+    color: ${semanticColors.branding.text.onSurfaceAccent.enabled};
+    border: none;
+  `
+      : `
+    background-color: ${semanticColors.base.background};
+    color: ${semanticColors.neutral[700]};
+    border: 1px solid ${semanticColors.global.border.default};
+    
+    &:hover {
+      border-color: ${semanticColors.global.border.medium};
+    }
+  `}
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+`;
+
+export const RadioLabel = styled.label`
+  display: inline-flex;
+  align-items: center;
+  gap: ${semanticSizes.global.gap.lg};
+  cursor: pointer;
+  margin: 0;
+`;
+
+export const HiddenRadioInput = styled.input`
+  position: absolute;
+  opacity: 0;
+  pointer-events: none;
+`;

package/src/components/molecules/RadioGroupField/RadioGroupField.tsx

@@ -1,69 +1,69 @@
-import React, { useState } from "react";
-import {
-  RadioGroupContainer,
-  RadioButton,
-  RadioLabel,
-  HiddenRadioInput,
-} from "./RadioGroupField.styles";
-import { RadioGroupFieldProps } from "./RadioGroupField.types";
-
-const RadioGroupField: React.FC<RadioGroupFieldProps> = ({
-  options,
-  value: controlledValue,
-  defaultValue,
-  onChange,
-  name = "radio-group",
-  disabled = false,
-}) => {
-  const [internalValue, setInternalValue] = useState(defaultValue || "");
-  
-  // Componente controlado ou não-controlado
-  const isControlled = controlledValue !== undefined;
-  const currentValue = isControlled ? controlledValue : internalValue;
-
-  const handleChange = (optionValue: string) => {
-    if (disabled) return;
-    
-    if (!isControlled) {
-      setInternalValue(optionValue);
-    }
-    
-    onChange?.(optionValue);
-  };
-
-  return (
-    <RadioGroupContainer>
-      {options.map((option) => {
-        const isSelected = currentValue === option.value;
-        
-        return (
-          <RadioButton
-            key={option.value}
-            isSelected={isSelected}
-            onClick={() => handleChange(option.value)}
-            role="radio"
-            aria-checked={isSelected}
-            aria-disabled={disabled}
-          >
-            <RadioLabel>
-              <HiddenRadioInput
-                type="radio"
-                name={name}
-                value={option.value}
-                checked={isSelected}
-                onChange={() => handleChange(option.value)}
-                disabled={disabled}
-              />
-              
-              {isSelected ? option.iconActive : option.iconInactive}
-              
-              <span>{option.label}</span>
-            </RadioLabel>
-          </RadioButton>
-        );
-      })}
-    </RadioGroupContainer>
-  );
-};
-
-export { RadioGroupField };
+import React, { useState } from 'react';
+import {
+  RadioGroupContainer,
+  RadioButton,
+  RadioLabel,
+  HiddenRadioInput,
+} from './RadioGroupField.styles';
+import { RadioGroupFieldProps } from './RadioGroupField.types';
+
+const RadioGroupField: React.FC<RadioGroupFieldProps> = ({
+  options,
+  value: controlledValue,
+  defaultValue,
+  onChange,
+  name = 'radio-group',
+  disabled = false,
+}) => {
+  const [internalValue, setInternalValue] = useState(defaultValue || '');
+
+  // Componente controlado ou não-controlado
+  const isControlled = controlledValue !== undefined;
+  const currentValue = isControlled ? controlledValue : internalValue;
+
+  const handleChange = (optionValue: string) => {
+    if (disabled) return;
+
+    if (!isControlled) {
+      setInternalValue(optionValue);
+    }
+
+    onChange?.(optionValue);
+  };
+
+  return (
+    <RadioGroupContainer>
+      {options.map((option) => {
+        const isSelected = currentValue === option.value;
+
+        return (
+          <RadioButton
+            key={option.value}
+            isSelected={isSelected}
+            onClick={() => handleChange(option.value)}
+            role="radio"
+            aria-checked={isSelected}
+            aria-disabled={disabled}
+          >
+            <RadioLabel>
+              <HiddenRadioInput
+                type="radio"
+                name={name}
+                value={option.value}
+                checked={isSelected}
+                onChange={() => handleChange(option.value)}
+                disabled={disabled}
+              />
+
+              {isSelected ? option.iconActive : option.iconInactive}
+
+              <span>{option.label}</span>
+            </RadioLabel>
+          </RadioButton>
+        );
+      })}
+    </RadioGroupContainer>
+  );
+};
+
+export { RadioGroupField };

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

@@ -1,17 +1,17 @@
-import { ReactNode } from "react";
-
-export interface RadioOption {
-  value: string;
-  label: string;
-  iconActive?: ReactNode;
-  iconInactive?: ReactNode;
-}
-
-export interface RadioGroupFieldProps {
-  options: RadioOption[];
-  value?: string;
-  defaultValue?: string;
-  onChange?: (value: string) => void;
-  name?: string;
-  disabled?: boolean;
-}
+import { ReactNode } from 'react';
+
+export interface RadioOption {
+  value: string;
+  label: string;
+  iconActive?: ReactNode;
+  iconInactive?: ReactNode;
+}
+
+export interface RadioGroupFieldProps {
+  options: RadioOption[];
+  value?: string;
+  defaultValue?: string;
+  onChange?: (value: string) => void;
+  name?: string;
+  disabled?: boolean;
+}

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

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