@liguelead/design-system 0.0.1

package/components/Button/Button.appearance.ts

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

package/components/Button/Button.sizes.ts

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

package/components/Button/Button.styles.ts

@@ -0,0 +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;
+        }
+    }
+`

package/components/Button/Button.tsx

@@ -0,0 +1,70 @@
+
+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 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) => prev.filter((r) => r.id !== ripple.id))
+          }
+        />
+      ))}
+    </StyledButton>
+  );
+};
+
+export default Button;

package/components/Button/Button.types.ts

@@ -0,0 +1,22 @@
+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'
+}
+
+export interface RippleInterface {
+    id: string
+    x: number
+    y: number
+}

package/components/Button/index.ts

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

package/components/IconButton/IconButton.sizes.ts

@@ -0,0 +1,41 @@
+import { spacing } from '@liguelead/foundation'
+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;
+        & svg {
+            width: ${spacing.spacing16}px !important;
+            height: ${spacing.spacing16}px;
+        }
+      `,
+    md: `
+        padding: ${spacing.spacing12}px ${spacing.spacing12}px;
+        border-radius: ${spacing.spacing4}px;
+        & svg {
+            width: ${spacing.spacing20}px;
+            height: ${spacing.spacing20}px;
+        }
+    `,
+    lg: `
+        padding: ${spacing.spacing12}px ${spacing.spacing12}px;
+        border-radius: ${spacing.spacing4}px;
+        & svg {
+            width: ${spacing.spacing32}px;
+            height: ${spacing.spacing32}px;
+        }
+    `
+  }
+
+  return sizes[size]
+}

package/components/IconButton/IconButton.tsx

@@ -0,0 +1,67 @@
+import { useState } from "react";
+import { ButtonProps, RippleInterface } from "../Button/Button.types";
+import { ButtonAppearance } from "../Button/Button.appearance";
+import { IconButtonSizes } from './IconButton.sizes'
+import { RippleContainer, StyledButton } from "../Button/Button.styles";
+
+const IconButton: React.FC<ButtonProps> = ({ 
+        appearance = "solid", 
+        children,
+        className,
+        color ="primary",
+        disabled,
+        fluid = false,
+        size = "md",
+        onClick,
+        ...rest
+    }) => {
+
+    const [ripples, setRipples] = useState<RippleInterface[]>([]);
+
+    const buttonSize = IconButtonSizes(size)
+    const buttonAppearance = ButtonAppearance(color, appearance)
+  
+    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}
+            {...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) => prev.filter((r) => r.id !== ripple.id))
+            }
+        />
+      ))}
+      </StyledButton>
+    );
+  };
+
+export default IconButton;

package/components/IconButton/index.ts

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

package/components/PageWrapper/PageWrapper.tsx

@@ -0,0 +1,31 @@
+import {parseColor} from '../../utils'
+import styled from 'styled-components'
+import {colorType} from 'types'
+import {spacing, SpacingInterface} from '@liguelead/foundation'
+
+type SpacingType = keyof SpacingInterface
+
+interface WrapperProps {
+    width?: string
+    bgColor?: colorType
+    padding?: SpacingType
+}
+
+const PageWrapper = styled.div.withConfig({
+    shouldForwardProp: prop => !['bgColor', 'width', 'padding'].includes(prop)
+})<WrapperProps>`
+    width: 100%;
+    height: 100%;
+    max-width: ${({width}) => width + 'px' || '100%'};
+    margin: 0 auto;
+    padding: ${({padding}) =>
+        padding ? spacing[padding] + 'px' : spacing.spacing16 + 'px'};
+    border-radius: 4px;
+    background: ${({bgColor, theme}) =>
+        bgColor
+            ? parseColor(theme.colors[bgColor])
+            : parseColor(theme.colors.white)};
+    border: 1px solid ${({theme}) => parseColor(theme.colors.neutral300)};
+`
+
+export default PageWrapper

package/components/PageWrapper/index.ts

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

package/components/Text/Text.styles.ts

@@ -0,0 +1,43 @@
+import {parseColor} from '../../utils'
+import styled, {css} from 'styled-components'
+import {
+    fontSize,
+    fontWeight,
+    lineHeight,
+    fontFamily
+} from '@liguelead/foundation'
+import {TextProps} from './Text'
+
+type BodyProps = Omit<TextProps, 'tag'>
+
+const Body = styled.p.withConfig({
+    shouldForwardProp: prop =>
+        !['color', 'margin', 'isTitle', 'size', 'align', 'weight'].includes(
+            prop
+        )
+})<BodyProps>`
+    position: relative;
+
+    ${({
+        align = 'left',
+        color = 'neutral800',
+        isTitle = false,
+        theme,
+        size = 'body01'
+    }) => css`
+        text-align: ${align};
+        color: ${parseColor(theme.colors[color] || theme.colors.neutral800)};
+        font-family: '${isTitle
+                ? fontFamily[theme.fonts.headings]
+                : fontFamily[theme.fonts.default]}',
+            sans-serif;
+        font-weight: ${fontWeight[theme.typography[size]?.fontWeight] ||
+        'normal'};
+        font-size: ${fontSize[theme.typography[size]?.fontSize] ||
+        fontSize.fontSize16}px;
+        line-height: ${lineHeight[theme.typography[size]?.lineHeight] ||
+        lineHeight.lineHeight24}px;
+    `}
+`
+
+export {Body}

package/components/Text/Text.tsx

@@ -0,0 +1,65 @@
+import React from 'react'
+import {Body} from './Text.styles'
+import {colorType} from 'types'
+
+type AlignType = 'left' | 'center' | 'right' | 'justify'
+type SizeType =
+    | 'span01'
+    | 'body01'
+    | 'body02'
+    | 'heading01'
+    | 'heading02'
+    | 'heading03'
+    | 'heading04'
+type TagType =
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'p'
+    | 'span'
+    | 'label'
+    | 'small'
+    | 'b'
+    | 'i'
+    | 'em'
+    | 'td'
+    | 'div'
+    | 'a'
+
+export interface TextProps {
+    align?: AlignType
+    children?: React.ReactNode
+    color?: colorType
+    isTitle?: boolean
+    tag?: TagType
+    size?: SizeType
+    weight?: string
+    className?: string
+}
+
+const Text: React.FC<TextProps> = ({
+    align,
+    children,
+    color = 'neutral1000',
+    isTitle,
+    tag = 'p',
+    size,
+    ...rest
+}) => {
+    return (
+        <Body
+            as={tag}
+            align={align}
+            color={color}
+            size={size}
+            isTitle={isTitle}
+            {...rest}>
+            {children}
+        </Body>
+    )
+}
+
+export default Text

package/components/Text/index.ts

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

package/components/TextField/TextField.sizes.ts

@@ -0,0 +1,58 @@
+import { fontSize, lineHeight, spacing } from '@liguelead/foundation'
+
+export type TextFieldSize = 'sm' | 'md' | 'lg'
+
+export type TextFieldSizeType = {
+  input: string
+  label: string
+}
+
+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]
+}

package/components/TextField/TextField.states.tsx

@@ -0,0 +1,76 @@
+import {parseColor} from '../../utils'
+import {useTheme} from 'styled-components'
+import {fontWeight, fontSize} from '@liguelead/foundation'
+
+export interface StateInterface {
+    input: string
+    label: string
+    helperText: string
+    animation?: string
+}
+
+interface TextFieldStates {
+    error: StateInterface
+    default: StateInterface
+    disabled: StateInterface
+}
+
+export const TextFieldStates = (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 + 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 {
+                    color: ${parseColor(theme.colors.primary)};
+                    font-weight: ${fontWeight.fontWeight600};
+                }
+            `,
+            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: 1px 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]
+}