@liguelead/design-system 0.0.8 → 0.0.10

package/components/Button/Button.appearance.ts

@@ -1,62 +1,62 @@
-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 {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]
+}

package/components/Button/Button.sizes.ts

@@ -1,41 +1,41 @@
-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 } 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]
+}

package/components/Button/Button.styles.ts

@@ -1,50 +1,50 @@
-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'
+
+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;
+        }
+    }
+`

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 { 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

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 = '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
+}

package/components/Button/index.ts

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

package/components/Checkbox/Checkbox.styles.ts

@@ -1,66 +1,66 @@
-import { spacing } from '@liguelead/foundation'
-import { parseColor } from '../../utils'
-import styled from 'styled-components'
-
-export const CheckboxWrapper = styled.label`
-    display: flex;
-    align-items: center;
-    cursor: pointer;
-    position: relative;
-    user-select: none;
-    gap: 8px;
-    font-size: 14px;
-
-    input {
-        position: absolute;
-        opacity: 0;
-        width: 0;
-        height: 0;
-    }
-`
-
-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'};
-
-    ${({ 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 }) => (checked ? 'block' : 'none')};
-        background-color: white;
-
-        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;
-    }
-`
-
-export const Label = styled.span<{ disabled?: boolean }>`
-    font-size: 14px;
-    font-weight: 500;
-    color: ${({ theme, disabled }) =>
-        disabled
-            ? parseColor(theme.colors.neutral500)
-            : parseColor(theme.colors.neutral900)};
-`
+import { spacing } from '@liguelead/foundation'
+import { parseColor } from '../../utils'
+import styled from 'styled-components'
+
+export const CheckboxWrapper = styled.label`
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+    position: relative;
+    user-select: none;
+    gap: 8px;
+    font-size: 14px;
+
+    input {
+        position: absolute;
+        opacity: 0;
+        width: 0;
+        height: 0;
+    }
+`
+
+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'};
+
+    ${({ 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 }) => (checked ? 'block' : 'none')};
+        background-color: white;
+
+        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;
+    }
+`
+
+export const Label = styled.span<{ disabled?: boolean }>`
+    font-size: 14px;
+    font-weight: 500;
+    color: ${({ theme, disabled }) =>
+        disabled
+            ? parseColor(theme.colors.neutral500)
+            : parseColor(theme.colors.neutral900)};
+`