@liguelead/design-system 0.0.9 → 0.0.11

package/components/Button/Button.appearance.ts

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

package/components/Button/Button.sizes.ts

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

package/components/Button/Button.styles.ts

@@ -1,50 +1,46 @@
-import styled from 'styled-components'
-import { ButtonProps } from './Button.types'
-
-interface StyledButtonProps extends ButtonProps {
-    $appearance: string
-    $buttonSize: string
-    $fluid: boolean
-}
-
-export const StyledButton = styled.button<StyledButtonProps>`
-    position: relative;
-    display: flex;
-    outline: none !important;
-    justify-content: center;
-    align-items: center;
-    width: ${({ $fluid }) => ($fluid ? '100%' : 'auto')};
-    ${({ $buttonSize }) => $buttonSize}
-    overflow: hidden;
-    cursor: pointer;
-    outline: none;
-    transition: background-color 0.3s, box-shadow 0.3s;
-    ${({ $appearance }) => $appearance}
-
-    &: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);
-    }
-`
-
-export const RippleContainer = styled.span<{
-    $appearance: 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)'};
-    pointer-events: none;
-
-    @keyframes ripple {
-        to {
-            transform: scale(9);
-            opacity: 0;
-        }
-    }
-`
+import styled from 'styled-components'
+import { ButtonProps } from './Button.types'
+import { shadow } from '@liguelead/foundation'
+
+export interface StyledButtonProps extends ButtonProps {
+    $variant: string
+    $buttonSize: string
+    $fluid: boolean
+}
+
+export const StyledButton = styled.button<StyledButtonProps>`
+    position: relative;
+    display: flex;
+    outline: none !important;
+    justify-content: center;
+    align-items: center;
+    width: ${({ $fluid }) => ($fluid ? '100%' : 'auto')};
+    ${({ $buttonSize }) => $buttonSize}
+    overflow: hidden;
+    cursor: pointer;
+    outline: none;
+    transition: background-color 0.3s, box-shadow 0.3s;
+    ${({ $variant }) => $variant}
+
+    &:focus {
+        box-shadow: ${shadow.focusShadow};
+    }
+`
+
+export const RippleContainer = styled.span<{
+    $variant: string
+}>`
+    position: absolute;
+    border-radius: 50%;
+    transform: scale(0);
+    animation: ripple 0.4s linear;
+    background-color:rgba(255, 255, 255, 0.5);
+    pointer-events: none;
+
+    @keyframes ripple {
+        to {
+            transform: scale(9);
+            opacity: 0;
+        }
+    }
+`

package/components/Button/Button.tsx

@@ -1,76 +1,76 @@
-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'
-
-const Button: React.FC<ButtonProps> = ({
-    appearance = 'solid',
-    children,
-    className,
-    color = 'primary',
-    disabled,
-    fluid = false,
-    size = 'md',
-    onClick,
-    type = 'button',
-    ...rest
-}) => {
-    const [ripples, setRipples] = useState<RippleInterface[]>([])
-
-    const buttonSize = ButtonSizes(size)
-    const buttonAppearance = ButtonAppearance(color, appearance)
-
-    const removeRipple = (ripples: RippleInterface[], rippleId: string) => {
-        return ripples.filter(r => r.id !== rippleId)
-    }
-
-    const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
-        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])
-
-        // Chama o onClick fornecido
-        if (onClick) {
-            onClick(e)
-        }
-    }
-
-    return (
-        <StyledButton
-            disabled={disabled}
-            className={className}
-            $fluid={fluid}
-            $appearance={buttonAppearance}
-            onClick={handleClick}
-            $buttonSize={buttonSize}
-            type={type}
-            {...rest}>
-            {children}
-            {ripples.map(ripple => (
-                <RippleContainer
-                    $appearance={appearance}
-                    key={ripple.id}
-                    style={{
-                        top: ripple.y - 10,
-                        left: ripple.x - 10,
-                        width: 20,
-                        height: 20
-                    }}
-                    onAnimationEnd={() =>
-                        setRipples(prev => removeRipple(prev, ripple.id))
-                    }
-                />
-            ))}
-        </StyledButton>
-    )
-}
-
-export default Button
+import { useState } from 'react'
+import { StyledButton, RippleContainer } from './Button.styles'
+import { RippleInterface, ButtonProps } from './Button.types'
+import { ButtonSizes } from './Button.sizes'
+import { ButtonVariant } from './Button.appearance'
+
+const Button: React.FC<ButtonProps> = ({
+    variant = 'solid',
+    children,
+    className,
+    color = 'primary',
+    disabled,
+    fluid = false,
+    size = 'md',
+    onClick,
+    type = 'button',
+    ...rest
+}) => {
+    const [ripples, setRipples] = useState<RippleInterface[]>([])
+
+    const buttonSize = ButtonSizes(size)
+    const buttonVariant = ButtonVariant(color, variant)
+
+    const removeRipple = (ripples: RippleInterface[], rippleId: string) => {
+        return ripples.filter(r => r.id !== rippleId)
+    }
+
+    const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
+        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])
+
+        // Chama o onClick fornecido
+        if (onClick) {
+            onClick(e)
+        }
+    }
+
+    return (
+        <StyledButton
+            disabled={disabled}
+            className={className}
+            $fluid={fluid}
+            $variant={buttonVariant}
+            onClick={handleClick}
+            $buttonSize={buttonSize}
+            type={type}
+            {...rest}>
+            {children}
+            {ripples.map(ripple => (
+                <RippleContainer
+                    $variant={variant}
+                    key={ripple.id}
+                    style={{
+                        top: ripple.y - 10,
+                        left: ripple.x - 10,
+                        width: 20,
+                        height: 20
+                    }}
+                    onAnimationEnd={() =>
+                        setRipples(prev => removeRipple(prev, ripple.id))
+                    }
+                />
+            ))}
+        </StyledButton>
+    )
+}
+
+export default Button

package/components/Button/Button.types.ts

@@ -1,23 +1,23 @@
-import { colorType } from 'types'
-
-export type ButtonSizeTypes = 'xs' | 'sm' | 'md' | 'lg'
-export type ButtonAppearanceTypes = 'solid' | 'outline' | 'ghost'
-
-export interface ButtonProps {
-    appearance?: ButtonAppearanceTypes
-    children: React.ReactNode
-    className?: string
-    disabled?: boolean
-    fluid?: boolean
-    size?: ButtonSizeTypes
-    color?: colorType
-    onClick?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void
-    type?: 'button' | 'submit' | 'reset'
-    style?: React.CSSProperties
-}
-
-export interface RippleInterface {
-    id: string
-    x: number
-    y: number
-}
+import { colorType } from 'types'
+
+export type ButtonSizeTypes = 'sm' | 'md' | 'lg'
+export type ButtonVariantTypes = 'solid' | 'outline' | 'ghost'
+
+export interface ButtonProps {
+    variant?: ButtonVariantTypes
+    children: React.ReactNode
+    className?: string
+    disabled?: boolean
+    fluid?: boolean
+    size?: ButtonSizeTypes
+    color?: colorType
+    onClick?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void
+    type?: 'button' | 'submit' | 'reset'
+    style?: React.CSSProperties
+}
+
+export interface RippleInterface {
+    id: string
+    x: number
+    y: number
+}

package/components/Button/index.ts

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