@liguelead/design-system 0.0.9 → 0.0.11

package/components/RadioButton/RadioButton.tsx

@@ -0,0 +1,88 @@
+import { forwardRef } from 'react'
+import { RadioButtonProps } from './RadioButton.types'
+import {
+    RadioWrapper,
+    RadioInput,
+    RadioContent,
+    RadioContentWithIcon,
+    RadioLabel,
+    RadioDescription,
+    RadioIconWrapper
+} from './RadioButton.styles'
+
+const RadioButton = forwardRef<HTMLInputElement, RadioButtonProps>(
+    (
+        {
+            className,
+            disabled = false,
+            error,
+            label,
+            description,
+            value,
+            checked,
+            onChange,
+            name,
+            register,
+            rightIcon,
+            variant = 'default',
+            ...props
+        },
+        ref
+    ) => {
+        const hasError = !!error
+
+        const contentElement = (
+            <RadioContent>
+                <RadioLabel $error={hasError}>
+                    {label}
+                </RadioLabel>
+                {description && (
+                    <RadioDescription $error={hasError}>
+                        {description}
+                    </RadioDescription>
+                )}
+            </RadioContent>
+        )
+
+        return (
+            <RadioWrapper
+                className={className}
+                $disabled={disabled}
+                $error={hasError}
+                $variant={variant}
+                $checked={checked}
+            >
+                <RadioInput
+                    ref={ref}
+                    type="radio"
+                    value={value}
+                    $variant={variant}
+                    checked={checked}
+                    disabled={disabled}
+                    name={name}
+                    $error={hasError}
+                    {...props}
+                    {...register}
+                    onChange={(e) => {
+                        register?.onChange(e)
+                        onChange?.(e)
+                    }}
+                />
+                {rightIcon ? (
+                    <RadioContentWithIcon>
+                        {contentElement}
+                        <RadioIconWrapper $error={hasError}>
+                            {rightIcon}
+                        </RadioIconWrapper>
+                    </RadioContentWithIcon>
+                ) : (
+                    contentElement
+                )}
+            </RadioWrapper>
+        )
+    }
+)
+
+RadioButton.displayName = 'RadioButton'
+
+export default RadioButton

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.styles.ts

@@ -1,29 +1,29 @@
-import styled from 'styled-components'
-import Button from '../Button'
-import { parseColor } from '../../utils'
-
-export const WrapperSegmentedButton = styled.div`
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    border-radius: 8px;
-    width: fit-content;
-`
-
-export const LeftButton = styled(Button)`
-    border-radius: 4px 0 0 4px;
-    box-shadow: none;
-    border-right: none;
-
-    &:disabled {
-        border-color: ${({ theme }) => parseColor(theme.colors.neutral500)};
-    }
-`
-
-export const RightButton = styled(Button)`
-    border-radius: 0 4px 4px 0;
-    border-left: none;
-    &:focus {
-        box-shadow: none;
-    }
-`
+import styled from 'styled-components'
+import Button from '../Button'
+import { parseColor } from '../../utils'
+
+export const WrapperSegmentedButton = styled.div`
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 8px;
+    width: fit-content;
+`
+
+export const LeftButton = styled(Button)`
+    border-radius: 4px 0 0 4px;
+    box-shadow: none;
+    border-right: none;
+
+    &:disabled {
+        border-color: ${({ theme }) => parseColor(theme.colors.neutral500)};
+    }
+`
+
+export const RightButton = styled(Button)`
+    border-radius: 0 4px 4px 0;
+    border-left: none;
+    &:focus {
+        box-shadow: none;
+    }
+`

package/components/SegmentedButton/SegmentedButton.tsx

@@ -1,49 +1,43 @@
-import { SegmentedButtonProps } from './SegmentedButton.types'
-import {
-    LeftButton,
-    RightButton,
-    WrapperSegmentedButton
-} from './SegmentedButton.styles'
-import { useState } from 'react'
-
-const SegmentedButton: React.FC<SegmentedButtonProps> = ({
-    options,
-    disabled = false,
-    color = 'primary',
-    size = 'md',
-    ...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">
-                {leftButton.label}
-            </LeftButton>
-            <RightButton
-                color={color}
-                appearance={selected === 'right' ? 'solid' : 'outline'}
-                disabled={disabled}
-                onClick={() => {
-                    setSelected('right')
-                    rightButton.action?.()
-                }}
-                size={size}
-                type="button">
-                {rightButton.label}
-            </RightButton>
-        </WrapperSegmentedButton>
-    )
-}
-
-export default SegmentedButton
+import { SegmentedButtonProps } from './SegmentedButton.types'
+import {
+    LeftButton,
+    RightButton,
+    WrapperSegmentedButton
+} from './SegmentedButton.styles'
+
+const SegmentedButton: React.FC<SegmentedButtonProps> = ({
+    options,
+    disabled = false,
+    color = 'primary',
+    size = 'md',
+    ...rest
+}) => {
+    const { leftButton, rightButton } = options
+
+    return (
+        <WrapperSegmentedButton {...rest}>
+            <LeftButton
+                color={color}
+                disabled={disabled}
+                size={size}
+                onClick={() => {
+                    leftButton.action?.()
+                }}
+                type="button">
+                {leftButton.label}
+            </LeftButton>
+            <RightButton
+                color={color}
+                disabled={disabled}
+                onClick={() => {
+                    rightButton.action?.()
+                }}
+                size={size}
+                type="button">
+                {rightButton.label}
+            </RightButton>
+        </WrapperSegmentedButton>
+    )
+}
+
+export default SegmentedButton

package/components/SegmentedButton/SegmentedButton.types.ts

@@ -1,20 +1,20 @@
-import { colorType } from 'types'
-type SegmentedButtonType = {
-    label: string
-    action?: () => void
-}
-
-interface SegmentedButtons {
-    leftButton: SegmentedButtonType
-    rightButton: SegmentedButtonType
-}
-
-export interface SegmentedButtonProps {
-    className?: string
-    options: SegmentedButtons
-    disabled?: boolean
-    color?: colorType
-    size?: SegmentedButtonSizeTypes
-}
-
-export type SegmentedButtonSizeTypes = 'sm' | 'md' | 'lg'
+import { colorType } from 'types'
+type SegmentedButtonType = {
+    label: string
+    action?: () => void
+}
+
+interface SegmentedButtons {
+    leftButton: SegmentedButtonType
+    rightButton: SegmentedButtonType
+}
+
+export interface SegmentedButtonProps {
+    className?: string
+    options: SegmentedButtons
+    disabled?: boolean
+    color?: colorType
+    size?: SegmentedButtonSizeTypes
+}
+
+export type SegmentedButtonSizeTypes = 'sm' | 'md' | 'lg'

package/components/SegmentedButton/index.ts

@@ -1 +1 @@
-export { default } from './SegmentedButton'
+export { default } from './SegmentedButton'

package/components/Select/Select.sizes.ts

@@ -1,56 +1,55 @@
-import { fontSize, lineHeight, spacing } from '@liguelead/foundation'
-import { TextFieldSize } from './Select.types'
-
-export const textFieldSizes = (
-    size: TextFieldSize,
-    leftIcon: boolean,
-    rightIcon: boolean
-) => {
-    const withIconMargin = Number(spacing.spacing8) + 20
-    const withIconPadding = {
-        sm: Number(spacing.spacing12) + Number(withIconMargin),
-        md: Number(spacing.spacing16) + Number(withIconMargin),
-        lg: Number(spacing.spacing16) + Number(withIconMargin)
-    }
-
-    const sizes = {
-        sm: {
-            input: `
-        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;`
-        },
-        md: {
-            input: `
-      font-size: ${fontSize.fontSize14}px;
-      line-height: ${lineHeight.lineHeight20}px;
-      padding: ${spacing.spacing12}px ${spacing.spacing16}px;
-      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;`
-        },
-        lg: {
-            input: `
-      font-size: ${fontSize.fontSize16}px;
-      line-height: ${lineHeight.lineHeight24}px;
-      padding: ${spacing.spacing12}px ${spacing.spacing16}px;
-      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;`
-        }
-    }
-
-    return sizes[size]
-}
+import { fontSize, lineHeight, spacing, fontWeight } from '@liguelead/foundation'
+import { TextFieldSize } from './Select.types'
+
+export const textFieldSizes = (
+    size: TextFieldSize,
+    leftIcon: boolean,
+    rightIcon: boolean
+) => {
+    const withIconMargin = Number(spacing.spacing8) + 20
+    const withIconPadding = {
+        sm: Number(spacing.spacing12) + Number(withIconMargin),
+        md: Number(spacing.spacing16) + Number(withIconMargin),
+        lg: Number(spacing.spacing16) + Number(withIconMargin)
+    }
+
+    const sizes = {
+        sm: {
+            input: `
+        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;
+                font-weight: ${fontWeight.fontWeight500};
+            `
+        },
+        md: {
+            input: `
+      font-size: ${fontSize.fontSize14}px;
+      line-height: ${lineHeight.lineHeight20}px;
+      padding: ${spacing.spacing12}px ${spacing.spacing16}px;
+      padding-left: ${leftIcon ? withIconPadding.md : spacing.spacing16}px;
+      padding-right: ${rightIcon ? withIconPadding.md : spacing.spacing16}px;
+    `,
+            label: `font-size: ${fontSize.fontSize14}px;
+            font-weight: ${fontWeight.fontWeight500}`
+        },
+        lg: {
+            input: `
+      font-size: ${fontSize.fontSize16}px;
+      line-height: ${lineHeight.lineHeight24}px;
+      padding: ${spacing.spacing12}px ${spacing.spacing16}px;
+      padding-left: ${leftIcon ? withIconPadding.lg : spacing.spacing16}px;
+      padding-right: ${rightIcon ? withIconPadding.lg : spacing.spacing16}px;
+    `,
+            label: `font-size: ${fontSize.fontSize16}px;
+            font-weight: ${fontWeight.fontWeight500}`
+        }
+    }
+
+    return sizes[size]
+}

package/components/Select/Select.states.tsx

@@ -1,69 +1,40 @@
-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) => {
-    const theme = useTheme()
-    const states: TextFieldStates = {
-        error: {
-            input: `
-                border: 1px solid ${parseColor(theme.colors.danger100)};
-                color: ${parseColor(theme.colors.neutral1000)};
-                &: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;
-                }`
-        },
-        default: {
-            input: `
-                border: 1px solid ${parseColor(theme.colors.neutral700)};
-                color: ${parseColor(theme.colors.neutral1000)};
-             
-                &: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;
-                }`
-        },
-        disabled: {
-            input: `
-                border: 2px solid ${parseColor(theme.colors.neutral500)};
-                color: ${parseColor(theme.colors.neutral600)};
-            `,
-            label: `color: ${parseColor(theme.colors.neutral500)};
-                    background: transparent;`,
-            helperText: `color: ${parseColor(theme.colors.neutral500)};`,
-            animation: ``
-        }
-    }
-    return states[state]
-}
+import { parseColor } from '../../utils'
+import { useTheme } from 'styled-components'
+import { TextFieldStates } from './Select.types'
+
+export const SelectStates = (state: keyof TextFieldStates) => {
+    const theme = useTheme()
+    const states: TextFieldStates = {
+        error: {
+            input: `
+                border: 1px solid ${parseColor(theme.colors.danger100)};
+                color: ${parseColor(theme.colors.textDark)};
+                &:focus {
+                    border-color: ${parseColor(theme.colors.danger100)};
+                }
+            `,
+            label: `color: ${parseColor(theme.colors.danger100)};`,
+            helperText: `color: ${parseColor(theme.colors.danger100)};`
+        },
+        default: {
+            input: `
+                border: 1px solid ${parseColor(theme.colors.neutral700)};
+                color: ${parseColor(theme.colors.textDark)};
+                &:focus {
+                    border-color: ${parseColor(theme.colors.primary)};
+                }
+            `,
+            label: `color: ${parseColor(theme.colors.textDark)};`,
+            helperText: `color: ${parseColor(theme.colors.textMedium)};`
+        },
+        disabled: {
+            input: `
+                border: 1px solid ${parseColor(theme.colors.neutral400)};
+                color: ${parseColor(theme.colors.neutral600)};
+            `,
+            label: `color: ${parseColor(theme.colors.neutral1100)};`,
+            helperText: `color: ${parseColor(theme.colors.textMedium)};`
+        }
+    }
+    return states[state]
+}