@liguelead/design-system 0.0.10 → 0.0.11

package/components/RadioButton/RadioButton.types.ts

@@ -0,0 +1,33 @@
+import { FieldValues, UseFormRegisterReturn } from 'react-hook-form'
+import React from 'react'
+
+export type RadioButtonVariant = 'default' | 'box'
+
+export interface RadioButtonProps<TFieldValues extends FieldValues = FieldValues>
+    extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type'> {
+    label: string
+    description?: string
+    value: string
+    checked?: boolean
+    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void
+    disabled?: boolean
+    className?: string
+    name?: string
+    error?: TFieldValues
+    register?: UseFormRegisterReturn<string>
+    rightIcon?: React.ReactNode
+    variant?: RadioButtonVariant
+}
+
+export interface RadioButtonVariantProps {
+  $disabled?: boolean
+  $error?: boolean
+  $checked?: boolean
+}
+
+export interface RadioWrapperProps {
+    $disabled?: boolean
+    $error?: boolean
+    $variant?: 'default' | 'box'
+    $checked?: boolean
+}

package/components/RadioButton/RadioButton.variants.ts

@@ -0,0 +1,67 @@
+import { css } from 'styled-components'
+import { parseColor } from '../../utils'
+import { RadioButtonVariantProps } from './RadioButton.types'
+import { spacing, radius} from "@liguelead/foundation"
+
+export const RadioButtonVariant = (variant: 'default' | 'box') => {
+  const variants = {
+    default: css<RadioButtonVariantProps>`
+      /* Estilo padrão - sem bordas adicionais no wrapper */
+    `,
+
+    box: css<RadioButtonVariantProps>`
+      padding: ${spacing.spacing12}px;
+      border: 1px solid ${({ theme, $error }) => 
+        $error 
+          ? parseColor(theme.colors.danger200)
+          : parseColor(theme.colors.neutral400)
+      };
+      border-radius: ${radius.radius8}px;
+      background: ${({ theme }) => parseColor(theme.colors.white)};
+      
+      /* Quando o input interno está checked, muda o estilo do wrapper */
+      input[type="radio"]:checked ~ * {
+        /* Força re-render no wrapper quando input muda */
+      }
+      
+      /* Usa seletor CSS para detectar radio checked */
+      &:has(input[type="radio"]:checked) {
+        border-color: ${({ theme, $error }) => 
+          $error 
+            ? parseColor(theme.colors.danger200)
+            : parseColor(theme.colors.primary)
+        };
+        background: ${({ theme, $error }) => 
+          $error 
+            ? parseColor(theme.colors.white)
+            : `${parseColor(theme.colors.primaryLight)}`
+        };
+      }
+      
+      &:hover {
+        border-color: ${({ theme, $error }) => 
+          $error 
+            ? parseColor(theme.colors.danger200) 
+            : parseColor(theme.colors.primary)
+        };
+        
+        &:has(input[type="radio"]:checked) {
+          background: ${({ theme, $error }) => 
+            $error
+              ? parseColor(theme.colors.white)
+              : `${parseColor(theme.colors.primaryLight)}`
+          };
+        }
+        
+        &:not(:has(input[type="radio"]:checked)) {
+          background: ${({ theme, $error }) => 
+            $error
+              ? `${parseColor(theme.colors.danger200)}10`
+              : `${parseColor(theme.colors.white)}`
+          };
+        }
+      }`
+  }
+
+  return variants[variant] || variants.default
+}

package/components/RadioButton/index.ts

@@ -0,0 +1 @@
+export { default } from './RadioButton'

package/components/SegmentedButton/SegmentedButton.tsx

@@ -4,7 +4,6 @@ import {
     RightButton,
     WrapperSegmentedButton
 } from './SegmentedButton.styles'
-import { useState } from 'react'
 
 const SegmentedButton: React.FC<SegmentedButtonProps> = ({
     options,
@@ -14,17 +13,14 @@ const SegmentedButton: React.FC<SegmentedButtonProps> = ({
     ...rest
 }) => {
     const { leftButton, rightButton } = options
-    const [selected, setSelected] = useState<string>('left')
 
     return (
         <WrapperSegmentedButton {...rest}>
             <LeftButton
                 color={color}
                 disabled={disabled}
-                appearance={selected === 'left' ? 'solid' : 'outline'}
                 size={size}
                 onClick={() => {
-                    setSelected('left')
                     leftButton.action?.()
                 }}
                 type="button">
@@ -32,10 +28,8 @@ const SegmentedButton: React.FC<SegmentedButtonProps> = ({
             </LeftButton>
             <RightButton
                 color={color}
-                appearance={selected === 'right' ? 'solid' : 'outline'}
                 disabled={disabled}
                 onClick={() => {
-                    setSelected('right')
                     rightButton.action?.()
                 }}
                 size={size}

package/components/Select/Select.sizes.ts

@@ -1,4 +1,4 @@
-import { fontSize, lineHeight, spacing } from '@liguelead/foundation'
+import { fontSize, lineHeight, spacing, fontWeight } from '@liguelead/foundation'
 import { TextFieldSize } from './Select.types'
 
 export const textFieldSizes = (
@@ -16,15 +16,16 @@ export const textFieldSizes = (
     const sizes = {
         sm: {
             input: `
-        font-size: ${fontSize.fontSize14}px;    
-        line-height: ${lineHeight.lineHeight22}px;    
+        font-size: ${fontSize.fontSize14}px;
+        line-height: ${lineHeight.lineHeight22}px;
         padding: ${spacing.spacing8}px ${spacing.spacing12}px;
         padding-left: ${leftIcon ? withIconPadding.sm : spacing.spacing12}px;
         padding-right: ${rightIcon ? withIconPadding.sm : spacing.spacing12}px;
-      `,
-            label: `font-size: ${fontSize.fontSize14}px;
-              margin-left: ${leftIcon ? withIconMargin : 0}px;
-              margin-right: ${rightIcon ? withIconMargin : 0}px;`
+    `,
+            label: `
+                font-size: ${fontSize.fontSize14}px;
+                font-weight: ${fontWeight.fontWeight500};
+            `
         },
         md: {
             input: `
@@ -35,8 +36,7 @@ export const textFieldSizes = (
       padding-right: ${rightIcon ? withIconPadding.md : spacing.spacing16}px;
     `,
             label: `font-size: ${fontSize.fontSize14}px;
-            margin-left: ${leftIcon ? withIconMargin : 0}px;
-            margin-right: ${rightIcon ? withIconMargin : 0}px;`
+            font-weight: ${fontWeight.fontWeight500}`
         },
         lg: {
             input: `
@@ -47,8 +47,7 @@ export const textFieldSizes = (
       padding-right: ${rightIcon ? withIconPadding.lg : spacing.spacing16}px;
     `,
             label: `font-size: ${fontSize.fontSize16}px;
-            margin-left: ${leftIcon ? withIconMargin : 0}px;
-            margin-right: ${rightIcon ? withIconMargin : 0}px;`
+            font-weight: ${fontWeight.fontWeight500}`
         }
     }
 

package/components/Select/Select.states.tsx

@@ -1,6 +1,5 @@
 import { parseColor } from '../../utils'
 import { useTheme } from 'styled-components'
-import { fontWeight, fontSize } from '@liguelead/foundation'
 import { TextFieldStates } from './Select.types'
 
 export const SelectStates = (state: keyof TextFieldStates) => {
@@ -9,60 +8,32 @@ export const SelectStates = (state: keyof TextFieldStates) => {
         error: {
             input: `
                 border: 1px solid ${parseColor(theme.colors.danger100)};
-                color: ${parseColor(theme.colors.neutral1000)};
+                color: ${parseColor(theme.colors.textDark)};
                 &:focus {
                     border-color: ${parseColor(theme.colors.danger100)};
                 }
-                &:focus + label {
-                    color: ${parseColor(theme.colors.danger100)};
-                }
             `,
             label: `color: ${parseColor(theme.colors.danger100)};`,
-            helperText: `color: ${parseColor(theme.colors.danger100)};`,
-            animation: `
-                &:focus div + label,
-                &:not(:placeholder-shown) + label {
-                    top: 0px;
-                    left: 12px;
-                    font-size: ${fontSize.fontSize12}px;
-                }`
+            helperText: `color: ${parseColor(theme.colors.danger100)};`
         },
         default: {
             input: `
                 border: 1px solid ${parseColor(theme.colors.neutral700)};
-                color: ${parseColor(theme.colors.neutral1000)};
-             
+                color: ${parseColor(theme.colors.textDark)};
                 &:focus {
                     border-color: ${parseColor(theme.colors.primary)};
                 }
-                &:focus label,
-                &:focus-within label {
-                    color: ${parseColor(theme.colors.primary)} !important;
-                    font-weight: ${fontWeight.fontWeight600};
-                    .select-label {
-                        color: ${parseColor(theme.colors.primary)};
-                    }
-                }
             `,
-            label: `color: ${parseColor(theme.colors.neutral800)};`,
-            helperText: `color: ${parseColor(theme.colors.neutral700)};`,
-            animation: `
-                &:focus + label,
-                &:not(:placeholder-shown) + label {
-                    top: 0px;
-                    left: 12px;
-                    font-size: ${fontSize.fontSize12}px;
-                }`
+            label: `color: ${parseColor(theme.colors.textDark)};`,
+            helperText: `color: ${parseColor(theme.colors.textMedium)};`
         },
         disabled: {
             input: `
-                border: 2px solid ${parseColor(theme.colors.neutral500)};
+                border: 1px solid ${parseColor(theme.colors.neutral400)};
                 color: ${parseColor(theme.colors.neutral600)};
             `,
-            label: `color: ${parseColor(theme.colors.neutral500)};
-                    background: transparent;`,
-            helperText: `color: ${parseColor(theme.colors.neutral500)};`,
-            animation: ``
+            label: `color: ${parseColor(theme.colors.neutral1100)};`,
+            helperText: `color: ${parseColor(theme.colors.textMedium)};`
         }
     }
     return states[state]

package/components/Select/Select.styles.ts

@@ -4,7 +4,8 @@ import {
     fontSize,
     fontWeight,
     lineHeight,
-    spacing
+    spacing,
+    shadow
 } from '@liguelead/foundation'
 import { parseColor } from '../../utils'
 import { Content, Item } from '@radix-ui/react-select'
@@ -19,28 +20,23 @@ export const InputWrapper = styled.div`
     width: 100%;
 `
 
-export const FloatingLabel = styled.label`
-    position: absolute;
-    top: 50%;
-    left: 12px;
-    transform: translateY(-50%);
+export const Label = styled.label`
+    display: block;
     font-weight: ${fontWeight.fontWeight600};
-    transition: all 0.2s ease;
-    pointer-events: none;
-    background-color: white;
-    padding: 0 4px;
-    &.is-open {
-        color: ${({ theme }) => parseColor(theme.colors.primary)} !important;
-    }
+    margin-bottom: ${spacing.spacing4}px;
+    font-size: ${fontSize.fontSize14}px;
 `
 
 export const HelperText = styled.span<{ error?: boolean }>`
     font-size: ${fontSize.fontSize12}px;
     line-height: ${lineHeight.lineHeight12}px;
-    padding-left: ${spacing.spacing16}px;
 `
 
-export const IconWrapper = styled.div<{ $right?: boolean; $error?: boolean }>`
+export const IconWrapper = styled.div<{ 
+    $right?: boolean;
+    $error?: boolean;
+    $disabled?: boolean;
+}>` ${({theme, $error, $disabled, $right }) =>`
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -48,18 +44,21 @@ export const IconWrapper = styled.div<{ $right?: boolean; $error?: boolean }>`
     top: 0px;
     height: 100%;
     cursor: pointer;
-    ${({ $right }) => ($right ? 'right: 0px;' : 'left: 0px;')}
+    ${$right ? 'right: 0px;' : 'left: 0px;'}
     padding: 0px ${spacing.spacing16}px;
 
     & svg {
-        width: 20px;
-        height: 20px;
-        fill: ${({ theme, $error }) =>
-            $error
-                ? parseColor(theme.colors.danger100)
-                : parseColor(theme.colors.neutral700)};
+        width: 16px;
+        height: 16px;
+        fill: ${$error
+                ? parseColor(theme.colors.danger200)
+                : $disabled
+                ? parseColor(theme.colors.neutral400)
+                : parseColor(theme.colors.neutral800)};
         transition: fill 0.2s ease;
+        cursor: ${$disabled ? 'not-allowed' : 'pointer'};
     }
+`}
 `
 
 export const StyledContent = styled(Content)`
@@ -73,6 +72,7 @@ export const StyledContent = styled(Content)`
     max-height: var(--radix-select-content-height, 314px);
     overflow-y: scroll !important;
     z-index: 10;
+
     & .RadixSelectViewport {
         max-height: 200px; /* Limite de altura do dropdown */
         overflow-y: auto; /* Adiciona o scroll quando necessário */
@@ -84,15 +84,19 @@ export const StyledItem = styled(Item)`
     padding: ${spacing.spacing12}px ${spacing.spacing20}px;
     display: flex;
     align-items: center;
-    gap: 8px;
+    justify-content: space-between;
+    gap: 8px; /* mantém espaçamento interno caso adicionemos ícones à esquerda futuramente */
     transition: all 0.2s ease;
     cursor: pointer;
+
     &:hover {
-        background-color: ${({ theme }) => parseColor(theme.colors.neutral200)};
+        background-color: ${({ theme }) => parseColor(theme.colors.primaryLight)};
     }
+
     &[data-state='checked'] {
         background-color: ${({ theme }) =>
-            parseColor(theme.colors.primaryLight)};
+            parseColor(theme.colors.primary)};
+        color: ${({ theme }) => parseColor(theme.colors.white)};
     }
 `
 
@@ -104,9 +108,20 @@ export const StyledInput = styled.input.withConfig({
     outline: none;
     transition: border-color 0.2s ease;
     background: transparent;
+    cursor: pointer;
+
+    &:focus {
+        box-shadow: ${shadow.focusShadow}
+    }
+
     &.is-open {
         border-color: ${({ theme }) =>
-            parseColor(theme.colors.primary)} !important;
+            parseColor(theme.colors.neutral800)} !important;
+        box-shadow: ${shadow.focusShadow}
+    }
+
+    &:disabled {
+        cursor: not-allowed;
     }
 `
 
@@ -132,17 +147,16 @@ export const Wrapper = styled.div<StyledInputProps>`
     width: 100%;
     cursor: pointer;
     ${({ $themefication, size }) => `
-            ${StyledInput} {
-                ${$themefication.animation}
-                ${$themefication.input}
-                ${size.input}
-            }
-            ${FloatingLabel} {
-                ${$themefication.label}
-                ${size.label}
-            }
-            ${HelperText} {
-                ${$themefication.label} 
-            }
-        `}
+        ${StyledInput} {
+            ${$themefication.input}
+            ${size.input}
+        }
+        ${HelperText} {
+            ${$themefication.helperText}
+        }
+        ${Label} {
+            ${$themefication.label}
+            ${size.label}
+        }
+    `}
 `

package/components/Select/Select.tsx

@@ -1,19 +1,18 @@
 import { forwardRef, useState } from 'react'
 import * as RadixSelect from '@radix-ui/react-select'
-import { CaretDown, Plus } from '@phosphor-icons/react'
+import { CaretDownIcon, CheckIcon } from '@phosphor-icons/react'
 import {
-    FloatingLabel,
     HelperText,
     IconWrapper,
     InputWrapper,
     StyledContent,
     StyledInput,
     StyledItem,
-    Wrapper
+    Wrapper,
+    Label
 } from './Select.styles'
 import { SelectStates } from './Select.states'
 import { textFieldSizes } from './Select.sizes'
-import TextField from '../TextField/TextField'
 import { SelectProps, StateInterface } from './Select.types'
 import getState from '../TextField/utils/getState'
 
@@ -76,7 +75,25 @@ const Select = forwardRef<HTMLInputElement, SelectProps>(
                     onChange={register?.onChange}
                     onBlur={register?.onBlur}
                 />
-                {!disabled ? (
+                <Label>{label}</Label>
+                {disabled ? (
+                    <InputWrapper className="is-disabled">
+                        {leftIcon && (
+                            <IconWrapper onClick={handleLeftIcon} $disabled={disabled}>
+                                {leftIcon}
+                            </IconWrapper>
+                        )}
+                        <IconWrapper $right $error={!!error} $disabled={disabled}>
+                            <CaretDownIcon weight="fill" size={14} />
+                        </IconWrapper>
+                        <StyledInput
+                            disabled
+                            readOnly
+                            value={selectedLabel}
+                            className="is-disabled"
+                        />
+                    </InputWrapper>
+                ) : (
                     <RadixSelect.Root
                         value={selectValue}
                         onOpenChange={open => setOpen(open)}
@@ -84,7 +101,7 @@ const Select = forwardRef<HTMLInputElement, SelectProps>(
                         onValueChange={(value: string) =>
                             handleOnChange(value)
                         }>
-                        <RadixSelect.Trigger asChild>
+                        <RadixSelect.Trigger asChild disabled={disabled}>
                             <InputWrapper>
                                 {leftIcon && (
                                     <IconWrapper onClick={handleLeftIcon}>
@@ -92,19 +109,14 @@ const Select = forwardRef<HTMLInputElement, SelectProps>(
                                     </IconWrapper>
                                 )}
                                 <IconWrapper $right $error={!!error}>
-                                    <CaretDown weight="fill" size={14} />
+                                    <CaretDownIcon weight="fill" size={14} />
                                 </IconWrapper>
                                 <StyledInput
                                     readOnly
                                     style={{ cursor: 'pointer !important' }}
                                     value={selectedLabel}
-                                    placeholder=" "
                                     className={open ? 'is-open' : ''}
                                 />
-                                <FloatingLabel
-                                    className={open ? 'is-open' : ''}>
-                                    {label}
-                                </FloatingLabel>
                             </InputWrapper>
                         </RadixSelect.Trigger>
                         <StyledContent
@@ -117,22 +129,17 @@ const Select = forwardRef<HTMLInputElement, SelectProps>(
                                 {options.map(option => (
                                     <StyledItem
                                         key={option.value}
-                                        value={option.value}>
-                                        <Plus width={20} />
-                                        {option.label}
+                                        value={option.value}
+                                    >
+                                        <span>{option.label}</span>
+                                        {option.value === selectValue && (
+                                            <CheckIcon weight="bold" />
+                                        )}
                                     </StyledItem>
                                 ))}
                             </RadixSelect.Viewport>
                         </StyledContent>
                     </RadixSelect.Root>
-                ) : (
-                    <TextField
-                        leftIcon={leftIcon}
-                        rightIcon={<CaretDown weight="fill" size={14} />}
-                        label={label}
-                        size={size}
-                        disabled
-                    />
                 )}
                 {(helperText || error) && (
                     <HelperText>{error?.message || helperText}</HelperText>

package/components/Select/Select.types.ts

@@ -3,7 +3,7 @@ export interface SelectProps<TFieldValues extends FieldValues = FieldValues> {
     className?: string
     disabled?: boolean
     error?: TFieldValues
-    label: string
+    label?: string
     options: Array<{ label: string; value: string }>
     value?: string
     defaultValue?: string
@@ -19,7 +19,6 @@ export interface StateInterface {
     input: string
     label: string
     helperText: string
-    animation?: string
 }
 
 export interface TextFieldStates {

package/components/Text/Text.styles.ts

@@ -20,22 +20,25 @@ const Body = styled.p.withConfig({
 
     ${({
         align = 'left',
-        color = 'neutral800',
+        color = 'textMedium',
         isTitle,
         theme,
-        size = 'body01'
+        size = 'body01',
+        weight
     }) => css`
         text-align: ${align};
-        color: ${parseColor(theme.colors[color] || theme.colors.neutral800)};
+        color: ${parseColor(theme.colors[color] || theme.colors.textMedium)};
         font-family: '${isTitle
-                ? fontFamily[theme.fonts.headings]
-                : fontFamily[theme.fonts.default]}',
+                ? fontFamily[theme.fonts?.headings as keyof typeof fontFamily]
+                : fontFamily[theme.fonts?.default as keyof typeof fontFamily]}',
             sans-serif;
-        font-weight: ${fontWeight[theme.typography[size]?.fontWeight] ||
+        font-weight: ${weight 
+            ? fontWeight[weight as keyof typeof fontWeight]
+            : fontWeight[theme.typography[size]?.fontWeight as keyof typeof fontWeight] ||
         'normal'};
-        font-size: ${fontSize[theme.typography[size]?.fontSize] ||
+        font-size: ${fontSize[theme.typography[size]?.fontSize as keyof typeof fontSize] ||
         fontSize.fontSize16}px;
-        line-height: ${lineHeight[theme.typography[size]?.lineHeight] ||
+        line-height: ${lineHeight[theme.typography[size]?.lineHeight as keyof typeof lineHeight] ||
         lineHeight.lineHeight24}px;
     `}
 `

package/components/Text/Text.tsx

@@ -5,7 +5,7 @@ import { TextProps } from './Text.types'
 const Text: React.FC<TextProps> = ({
     align,
     children,
-    color = 'neutral1000',
+    color = 'textDark',
     isTitle = false,
     tag = 'p',
     size,
@@ -15,7 +15,7 @@ const Text: React.FC<TextProps> = ({
         <Body
             as={isTitle ? 'h2' : tag}
             align={align}
-            color={color}
+            color={color as string}
             size={size}
             isTitle={isTitle}
             {...rest}>

package/components/Text/Text.types.ts

@@ -30,6 +30,8 @@ type TagType =
     | 'div'
     | 'a'
 
+type WeightType = 'fontWeight400' | 'fontWeight500' | 'fontWeight600' | 'fontWeight700'
+
 export interface TextProps {
     align?: AlignType
     children?: ReactNode
@@ -37,6 +39,6 @@ export interface TextProps {
     isTitle?: boolean
     tag?: TagType
     size?: SizeType
-    weight?: string
+    weight?: WeightType
     className?: string
 }

package/components/TextField/TextField.sizes.ts

@@ -24,9 +24,7 @@ export const textFieldSizes = (size: TextFieldSize, leftIcon: boolean, rightIcon
         padding-left: ${leftIcon ? withIconPadding.sm : spacing.spacing12}px;
         padding-right: ${rightIcon ? withIconPadding.sm : spacing.spacing12}px;
       `,
-      label: `font-size: ${fontSize.fontSize14}px;
-              margin-left: ${leftIcon ? withIconMargin : 0}px;
-              margin-right: ${rightIcon ? withIconMargin : 0}px;`
+      label: `font-size: ${fontSize.fontSize14}px;`
     },
     md: {
       input: `
@@ -36,9 +34,7 @@ export const textFieldSizes = (size: TextFieldSize, leftIcon: boolean, rightIcon
       padding-left: ${leftIcon ? withIconPadding.md : spacing.spacing16}px;
       padding-right: ${rightIcon ? withIconPadding.md : spacing.spacing16}px;
     `,
-      label: `font-size: ${fontSize.fontSize14}px;
-            margin-left: ${leftIcon ? withIconMargin : 0}px;
-            margin-right: ${rightIcon ? withIconMargin : 0}px;`
+      label: `font-size: ${fontSize.fontSize14}px;`
     },
     lg: {
       input: `
@@ -48,9 +44,7 @@ export const textFieldSizes = (size: TextFieldSize, leftIcon: boolean, rightIcon
       padding-left: ${leftIcon ? withIconPadding.lg : spacing.spacing16}px;
       padding-right: ${rightIcon ? withIconPadding.lg : spacing.spacing16}px;
     `,
-      label: `font-size: ${fontSize.fontSize16}px;
-            margin-left: ${leftIcon ? withIconMargin : 0}px;
-            margin-right: ${rightIcon ? withIconMargin : 0}px;`
+      label: `font-size: ${fontSize.fontSize16}px;`
     }
   }