@liguelead/design-system 0.0.10 → 0.0.11

package/components/Button/Button.appearance.ts

@@ -1,11 +1,11 @@
-import {ButtonAppearanceTypes} from './Button.types'
+import { ButtonVariantTypes} from './Button.types'
 import {colorType} from 'types'
 import {useTheme} from 'styled-components'
 import {darkenOrLighten, getTextColor, parseColor} from '../../utils'
 
-export const ButtonAppearance = (
+export const ButtonVariant = (
     color: colorType,
-    appearance: ButtonAppearanceTypes
+    variant: ButtonVariantTypes
 ) => {
     const theme = useTheme()
     const parsedColor = parseColor(theme.colors[color])
@@ -14,7 +14,7 @@ export const ButtonAppearance = (
 
     const colorHover = darkenOrLighten(0.2, parsedColor)
 
-    const appearances = {
+    const variants = {
         solid: `
         background-color: ${parsedColor};
         color: ${solidtextColor};
@@ -24,24 +24,26 @@ export const ButtonAppearance = (
             border-color: ${colorHover};
         }
         &:disabled {
-            background-color: ${parseColor(theme.colors.neutral200)};
-            color: ${parseColor(theme.colors.neutral500)};
-            border-color: ${parseColor(theme.colors.neutral200)};
+            background-color: ${parsedColor}80;
+            color: ${solidtextColor}cc;
+            cursor: not-allowed;
+            border: none;
         }
-      `,
+    `,
         outline: `
         background-color: transparent;
         color: ${parsedColor};
         border: 1px solid ${parsedColor};
         &:hover {
-            background-color: ${parsedColor};
-            border-color: ${parsedColor};
-            color: white;
+            background-color: ${parseColor(theme.colors.primaryDarker)};
+            border-color: transparent;
+            color: ${parseColor(theme.colors.white)};
         }
         &:disabled {
             background-color: transparent;
-            color: ${parseColor(theme.colors.neutral500)};
-            border-color: ${parseColor(theme.colors.neutral500)};
+            color: ${parseColor(theme.colors.neutral1100)}80;
+            border-color: ${parseColor(theme.colors.neutral400)};
+            cursor: not-allowed;
         }
     `,
         ghost: `
@@ -49,14 +51,16 @@ export const ButtonAppearance = (
         color: ${parsedColor};
         border: 1px solid transparent;
         &:hover {
-            background-color: rgba(0,0,0,0.05)
+            background-color: ${parseColor(theme.colors.primaryDarker)};
+            color: ${parseColor(theme.colors.white)};
         }
         &:disabled {
             background-color: transparent;
-            color: ${parseColor(theme.colors.neutral500)};
+            color: ${parseColor(theme.colors.neutral1100)}80;
+            cursor: not-allowed;
         }
     `
     }
 
-    return appearances[appearance]
+    return variants[variant]
 }

package/components/Button/Button.sizes.ts

@@ -1,39 +1,40 @@
-import { fontSize, fontWeight, lineHeight, spacing } from '@liguelead/foundation'
+import { 
+  fontSize, 
+  fontWeight, 
+  lineHeight, 
+  spacing, 
+  radius 
+} from '@liguelead/foundation'
 import { ButtonSizeTypes } from './Button.types'
 
 export const ButtonSizes = (size: ButtonSizeTypes) => {
   const sizes = {
-    xs: `
-      padding: ${spacing.spacing4}px ${spacing.spacing8}px;
-      font-size: ${fontSize.fontSize10}px;
-      font-weight: ${fontWeight.fontWeight600};
-      line-height: ${lineHeight.lineHeight14}px;
-      gap: ${spacing.spacing8}px;
-      border-radius: ${spacing.spacing4}px;
-      `,
     sm: `
       padding: ${spacing.spacing8}px ${spacing.spacing12}px;
       font-size: ${fontSize.fontSize14}px;
-      font-weight: ${fontWeight.fontWeight600};
+      font-weight: ${fontWeight.fontWeight500};
       line-height: ${lineHeight.lineHeight22}px;
       gap: ${spacing.spacing8}px;
-      border-radius: ${spacing.spacing4}px;
+      min-width: ${spacing.spacing64}px;
+      border-radius: ${radius.radius4}px;
       `,
     md: `
-      padding: ${spacing.spacing12}px ${spacing.spacing20}px;
+      padding: ${spacing.spacing8}px ${spacing.spacing16}px;
       font-size: ${fontSize.fontSize14}px;
-      font-weight: ${fontWeight.fontWeight600};
+      font-weight: ${fontWeight.fontWeight500};
       line-height: ${lineHeight.lineHeight22}px;
       gap: ${spacing.spacing8}px;
-      border-radius: ${spacing.spacing4}px;
+      min-width: ${spacing.spacing76}px;
+      border-radius: ${radius.radius4}px;
     `,
     lg: `
-      padding: ${spacing.spacing16}px ${spacing.spacing24}px;
+      padding: ${spacing.spacing8}px ${spacing.spacing32}px;
       font-size: ${fontSize.fontSize16}px;
-      font-weight: ${fontWeight.fontWeight600};
+      font-weight: ${fontWeight.fontWeight500};
       line-height: ${lineHeight.lineHeight24}px;
       gap: ${spacing.spacing8}px;
-      border-radius: ${spacing.spacing4}px;
+      min-width: ${spacing.spacing108}px;
+      border-radius: ${radius.radius4}px;
     `
   }
 

package/components/Button/Button.styles.ts

@@ -1,8 +1,9 @@
 import styled from 'styled-components'
 import { ButtonProps } from './Button.types'
+import { shadow } from '@liguelead/foundation'
 
-interface StyledButtonProps extends ButtonProps {
-    $appearance: string
+export interface StyledButtonProps extends ButtonProps {
+    $variant: string
     $buttonSize: string
     $fluid: boolean
 }
@@ -19,26 +20,21 @@ export const StyledButton = styled.button<StyledButtonProps>`
     cursor: pointer;
     outline: none;
     transition: background-color 0.3s, box-shadow 0.3s;
-    ${({ $appearance }) => $appearance}
+    ${({ $variant }) => $variant}
 
     &:focus {
-        outline: none;
-        box-shadow: 0px 0px 0px var(--2, 2px) rgba(255, 255, 255, 0.1),
-            0px 0px 0px var(--4, 4px) rgba(255, 255, 255, 0.1);
+        box-shadow: ${shadow.focusShadow};
     }
 `
 
 export const RippleContainer = styled.span<{
-    $appearance: string
+    $variant: string
 }>`
     position: absolute;
     border-radius: 50%;
     transform: scale(0);
     animation: ripple 0.4s linear;
-    background-color: ${({ $appearance }) =>
-        $appearance === 'solid'
-            ? 'rgba(255, 255, 255, 0.5)'
-            : 'rgba(0, 0, 0, 0.2)'};
+    background-color:rgba(255, 255, 255, 0.5);
     pointer-events: none;
 
     @keyframes ripple {

package/components/Button/Button.tsx

@@ -2,10 +2,10 @@ import { useState } from 'react'
 import { StyledButton, RippleContainer } from './Button.styles'
 import { RippleInterface, ButtonProps } from './Button.types'
 import { ButtonSizes } from './Button.sizes'
-import { ButtonAppearance } from './Button.appearance'
+import { ButtonVariant } from './Button.appearance'
 
 const Button: React.FC<ButtonProps> = ({
-    appearance = 'solid',
+    variant = 'solid',
     children,
     className,
     color = 'primary',
@@ -19,7 +19,7 @@ const Button: React.FC<ButtonProps> = ({
     const [ripples, setRipples] = useState<RippleInterface[]>([])
 
     const buttonSize = ButtonSizes(size)
-    const buttonAppearance = ButtonAppearance(color, appearance)
+    const buttonVariant = ButtonVariant(color, variant)
 
     const removeRipple = (ripples: RippleInterface[], rippleId: string) => {
         return ripples.filter(r => r.id !== rippleId)
@@ -48,7 +48,7 @@ const Button: React.FC<ButtonProps> = ({
             disabled={disabled}
             className={className}
             $fluid={fluid}
-            $appearance={buttonAppearance}
+            $variant={buttonVariant}
             onClick={handleClick}
             $buttonSize={buttonSize}
             type={type}
@@ -56,7 +56,7 @@ const Button: React.FC<ButtonProps> = ({
             {children}
             {ripples.map(ripple => (
                 <RippleContainer
-                    $appearance={appearance}
+                    $variant={variant}
                     key={ripple.id}
                     style={{
                         top: ripple.y - 10,

package/components/Button/Button.types.ts

@@ -1,10 +1,10 @@
 import { colorType } from 'types'
 
-export type ButtonSizeTypes = 'xs' | 'sm' | 'md' | 'lg'
-export type ButtonAppearanceTypes = 'solid' | 'outline' | 'ghost'
+export type ButtonSizeTypes = 'sm' | 'md' | 'lg'
+export type ButtonVariantTypes = 'solid' | 'outline' | 'ghost'
 
 export interface ButtonProps {
-    appearance?: ButtonAppearanceTypes
+    variant?: ButtonVariantTypes
     children: React.ReactNode
     className?: string
     disabled?: boolean

package/components/Checkbox/Checkbox.styles.ts

@@ -1,15 +1,21 @@
-import { spacing } from '@liguelead/foundation'
+import {
+    spacing,
+    fontSize,
+    fontWeight,
+    radius
+} from '@liguelead/foundation'
 import { parseColor } from '../../utils'
-import styled from 'styled-components'
+import styled, { css } from 'styled-components'
+import Text from '../Text'
 
 export const CheckboxWrapper = styled.label`
     display: flex;
-    align-items: center;
+    align-items: start;
     cursor: pointer;
     position: relative;
     user-select: none;
     gap: 8px;
-    font-size: 14px;
+    font-size: ${fontSize.fontSize14}px;
 
     input {
         position: absolute;
@@ -17,50 +23,93 @@ export const CheckboxWrapper = styled.label`
         width: 0;
         height: 0;
     }
+
+    input:focus + span {
+        box-shadow: 0 0 0 3px #A3A3A350}
+    }
 `
 
 export const CustomCheckbox = styled.span<{
     checked: boolean
     disabled?: boolean
 }>`
-    width: ${spacing.spacing20}px;
-    height: ${spacing.spacing20}px;
-    border: 2px solid ${({ theme }) => parseColor(theme.colors.primary)};
-    border-radius: 2px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    transition: all 0.2s ease-in-out;
-    background-color: ${({ checked, theme }) =>
-        checked ? parseColor(theme.colors.primary) : 'transparent'};
+    ${({ checked, theme, disabled }) => css`
+        width: ${spacing.spacing16}px;
+        height: ${spacing.spacing16}px;
+        border: 1px solid ${checked
+            ? parseColor(theme.colors.primary)
+            : parseColor(theme.colors.neutral400)};
+        border-radius: ${radius.radius4}px;
+        display: flex;
+        top: 2px;
+        align-items: center;
+        justify-content: center;
+        transition: all 0.2s ease-in-out;
+        background-color: ${checked
+            ? parseColor(theme.colors.primary)
+            : 'transparent'};
+        position: relative;
+        overflow: hidden;
+
+        ${disabled &&
+        css`
+            background-color: transparent;
+            border-color: ${parseColor(theme.colors.neutral400)}70;
+            cursor: not-allowed;
+        `}
 
-    ${({ disabled, theme }) =>
-        disabled &&
-        `
-    border-color: ${parseColor(theme.colors.neutral300)};
-    background-color: ${parseColor(theme.colors.neutral100)};
-    cursor: not-allowed;
-  `}
+        &::after {
+            content: '';
+            width: 16px;
+            height: 16px;
+            display: ${checked ? 'block' : 'none'};
+            background-color: white;
+            z-index: 1;
+
+            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9 16.2l-4.2-4.2-1.4 1.4 5.6 5.6L21 7.8l-1.4-1.4z'/%3E%3C/svg%3E")
+                no-repeat center / contain;
+            -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9 16.2l-4.2-4.2-1.4 1.4 5.6 5.6L21 7.8l-1.4-1.4z'/%3E%3C/svg%3E")
+                no-repeat center / contain;
+        }
+
+    `}
+`
 
-    &::after {
-        content: '';
-        width: 16px;
-        height: 16px;
-        display: ${({ checked }) => (checked ? 'block' : 'none')};
-        background-color: white;
+export const RippleContainer = styled.span`
+    position: absolute;
+    border-radius: 50%;
+    transform: scale(0);
+    animation: ripple 0.4s linear;
+    background-color: rgba(255, 255, 255, 0.6);
+    pointer-events: none;
+    z-index: 0;
 
-        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9 16.2l-4.2-4.2-1.4 1.4 5.6 5.6L21 7.8l-1.4-1.4z'/%3E%3C/svg%3E")
-            no-repeat center / contain;
-        -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9 16.2l-4.2-4.2-1.4 1.4 5.6 5.6L21 7.8l-1.4-1.4z'/%3E%3C/svg%3E")
-            no-repeat center / contain;
+    @keyframes ripple {
+        to {
+            transform: scale(3.5);
+            opacity: 0;
+        }
     }
 `
 
 export const Label = styled.span<{ disabled?: boolean }>`
-    font-size: 14px;
-    font-weight: 500;
+    font-size: ${fontSize.fontSize14}px;
+    font-weight: ${fontWeight.fontWeight500};
+
     color: ${({ theme, disabled }) =>
         disabled
-            ? parseColor(theme.colors.neutral500)
-            : parseColor(theme.colors.neutral900)};
+            ? `${parseColor(theme.colors.neutral1100)}70`
+            : parseColor(theme.colors.neutral1100)};
+`
+
+export const CustomLabel = styled(Text)<{ disabled?: boolean }>`
+    font-size: ${fontSize.fontSize12}px;
+    font-weight: ${fontWeight.fontWeight400};
+    line-height: 8px;
+
+    color: ${({ theme, disabled }) =>
+        disabled
+            ? `${parseColor(theme.colors.textMedium)}70`
+            : parseColor(theme.colors.textMedium)};
+
 `

package/components/Checkbox/Checkbox.tsx

@@ -1,6 +1,18 @@
 import React, { useState } from 'react'
 import { CheckboxProps } from './Checkbox.types'
-import { CheckboxWrapper, CustomCheckbox, Label } from './Checkbox.styles'
+import {
+    CheckboxWrapper,
+    CustomCheckbox,
+    CustomLabel,
+    Label,
+    RippleContainer
+} from './Checkbox.styles'
+
+interface RippleInterface {
+    id: string
+    x: number
+    y: number
+}
 
 const Checkbox: React.FC<CheckboxProps> = ({
     label,
@@ -9,16 +21,34 @@ const Checkbox: React.FC<CheckboxProps> = ({
     disabled = false,
     register,
     className,
+    description,
     ...rest
 }) => {
-    // Estado interno para alternar caso `checked` não seja controlado externamente
     const [internalChecked, setInternalChecked] = useState<boolean>(
         checked || false
     )
+    const [ripples, setRipples] = useState<RippleInterface[]>([])
+
+    const removeRipple = (ripples: RippleInterface[], rippleId: string) => {
+        return ripples.filter(r => r.id !== rippleId)
+    }
 
     const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
         onChange?.(e)
-        setInternalChecked(!internalChecked) // Alterna o estado internamente
+        setInternalChecked(!internalChecked)
+    }
+
+    const handleRipple = (e: React.MouseEvent<HTMLSpanElement>) => {
+        if (disabled) return
+        const rect = e.currentTarget.getBoundingClientRect()
+        const x = e.clientX - rect.left
+        const y = e.clientY - rect.top
+        const newRipple: RippleInterface = {
+            id: `${Date.now()}-${Math.random()}`,
+            x,
+            y
+        }
+        setRipples(prev => [...prev, newRipple])
     }
 
     return (
@@ -31,8 +61,35 @@ const Checkbox: React.FC<CheckboxProps> = ({
                 disabled={disabled}
                 {...rest}
             />
-            <CustomCheckbox checked={internalChecked} disabled={disabled} />
-            {label && <Label disabled={disabled}>{label}</Label>}
+            <CustomCheckbox
+                checked={internalChecked}
+                disabled={disabled}
+                onClick={handleRipple}
+            >
+                {ripples.map(ripple => (
+                    <RippleContainer
+                        key={ripple.id}
+                        style={{
+                            top: ripple.y - 10,
+                            left: ripple.x - 10,
+                            width: 20,
+                            height: 20
+                        }}
+                        onAnimationEnd={() =>
+                            setRipples(prev => removeRipple(prev, ripple.id))
+                        }
+                    />
+                ))}
+            </CustomCheckbox>
+            <div>
+                {label && <Label disabled={disabled}>{label}</Label>}
+                <CustomLabel
+                    disabled={disabled}
+                    weight="fontWeight400"
+                >
+                    {description}
+                </CustomLabel>
+            </div>
         </CheckboxWrapper>
     )
 }

package/components/Checkbox/Checkbox.types.ts

@@ -3,6 +3,7 @@ import { UseFormRegisterReturn } from 'react-hook-form'
 export interface CheckboxProps {
     label?: string
     checked?: boolean
+    description?: string
     onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void
     disabled?: boolean
     register?: UseFormRegisterReturn<string>

package/components/IconButton/IconButton.sizes.ts

@@ -3,14 +3,6 @@ import { ButtonSizeTypes } from '../Button/Button.types'
 
 export const IconButtonSizes = (size: ButtonSizeTypes) => {
   const sizes = {
-    xs: `
-        padding: ${spacing.spacing8}px ${spacing.spacing8}px;
-        border-radius: ${spacing.spacing4}px;
-        & svg {
-            width: ${spacing.spacing12}px !important;
-            height: ${spacing.spacing12}px;
-        }
-      `,
     sm: `
         padding: ${spacing.spacing12}px ${spacing.spacing12}px;
         border-radius: ${spacing.spacing4}px;
@@ -20,19 +12,20 @@ export const IconButtonSizes = (size: ButtonSizeTypes) => {
         }
       `,
     md: `
-        padding: ${spacing.spacing12}px ${spacing.spacing12}px;
+        padding: ${spacing.spacing8}px ${spacing.spacing4}px;
         border-radius: ${spacing.spacing4}px;
+        min-width: ${spacing.spacing36}px;
         & svg {
-            width: ${spacing.spacing20}px;
-            height: ${spacing.spacing20}px;
+            width: ${spacing.spacing16}px;
+            height: ${spacing.spacing16}px;
         }
     `,
     lg: `
         padding: ${spacing.spacing12}px ${spacing.spacing12}px;
         border-radius: ${spacing.spacing4}px;
         & svg {
-            width: ${spacing.spacing32}px;
-            height: ${spacing.spacing32}px;
+            width: ${spacing.spacing16}px;
+            height: ${spacing.spacing16}px;
         }
     `
   }

package/components/IconButton/IconButton.tsx

@@ -1,11 +1,11 @@
 import { useState } from 'react'
 import { ButtonProps, RippleInterface } from '../Button/Button.types'
-import { ButtonAppearance } from '../Button/Button.appearance'
+import { ButtonVariant } from '../Button/Button.appearance'
 import { IconButtonSizes } from './IconButton.sizes'
 import { RippleContainer, StyledButton } from '../Button/Button.styles'
 
 const IconButton: React.FC<ButtonProps> = ({
-    appearance = 'solid',
+    variant = 'solid',
     children,
     className,
     color = 'primary',
@@ -18,7 +18,7 @@ const IconButton: React.FC<ButtonProps> = ({
     const [ripples, setRipples] = useState<RippleInterface[]>([])
 
     const buttonSize = IconButtonSizes(size)
-    const buttonAppearance = ButtonAppearance(color, appearance)
+    const buttonVariant = ButtonVariant(color, variant)
 
     const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
         const rect = e.currentTarget.getBoundingClientRect()
@@ -43,14 +43,14 @@ const IconButton: React.FC<ButtonProps> = ({
             disabled={disabled}
             className={className}
             $fluid={fluid}
-            $appearance={buttonAppearance}
+            $variant={buttonVariant}
             onClick={handleClick}
             $buttonSize={buttonSize}
             {...rest}>
             {children}
             {ripples.map(ripple => (
                 <RippleContainer
-                    $appearance={appearance}
+                    $variant={variant}
                     key={ripple.id}
                     style={{
                         top: ripple.y - 10,

package/components/InputOpt/InputOpt.styles.ts

@@ -0,0 +1,75 @@
+import styled, { css } from 'styled-components'
+import { spacing, fontSize, fontWeight, shadow, lineHeight } from '@liguelead/foundation'
+import { parseColor } from '../../utils'
+
+export const OptWrapper = styled.div`
+  display: flex;
+  gap: ${spacing.spacing16}px;
+`
+
+interface OptBoxProps {
+  $disabled?: boolean;
+  $error?: boolean;
+}
+
+export const OptBox = styled.input<OptBoxProps>`
+  width: ${spacing.spacing36}px;
+  height: ${spacing.spacing36}px;
+  text-align: center;
+  font-size: ${fontSize.fontSize14}px;
+  font-weight: ${fontWeight.fontWeight400};
+  border: 1px solid ${({ theme }) => parseColor(theme.colors.neutral400)};
+  background: ${({ theme }) => parseColor(theme.colors.white)};
+  color: ${({ theme }) => parseColor(theme.colors.neutral1100)};
+  border-radius: 4px;
+  outline: none;
+  transition: border-color .15s ease, box-shadow .15s ease;
+
+  ${({ $error, theme }) =>
+    $error &&
+    css`
+      border-color: ${parseColor(theme.colors.danger100)};
+    `}
+
+  &:focus {
+    ${({ $error, theme }) =>
+      $error
+        ? css`
+            border-color: ${parseColor(theme.colors.danger200)};
+            box-shadow: 0 0 0 3px ${parseColor(theme.colors.danger100)}40;
+          `
+        : css`
+            border-color: ${parseColor(theme.colors.neutral700)};
+            box-shadow: ${shadow.focusShadow};
+          `}
+  }
+
+  ${({ $disabled, theme }) =>
+    $disabled &&
+    css`
+      opacity: 0.5;
+      cursor: not-allowed;
+      border-color: ${parseColor(theme.colors.neutral400)};
+      background: ${parseColor(theme.colors.neutral100)};
+    `}
+`
+
+export const OtpSeparator = styled.span`
+  color: ${({ theme }) => parseColor(theme.colors.neutral700)};
+  font-size: 20px;
+  user-select: none;
+`
+
+export const OtpSeparatorContainer = styled.div`
+  display: flex;
+  align-items: center;
+`
+
+export const OptHelperText = styled.span<{ $error?: boolean }>`
+  display: block;
+  margin-top: ${spacing.spacing8}px;
+  font-size: ${fontSize.fontSize12}px;
+  line-height: ${lineHeight.lineHeight16}px;
+  color: ${({ theme, $error }) =>
+    $error ? parseColor(theme.colors.danger100) : parseColor(theme.colors.neutral700)};
+`