@liguelead/design-system 0.0.6 → 0.0.8

package/components/Button/Button.styles.ts

@@ -29,14 +29,14 @@ export const StyledButton = styled.button<StyledButtonProps>`
 `
 
 export const RippleContainer = styled.span<{
-    appearance: string
+    $appearance: string
 }>`
     position: absolute;
     border-radius: 50%;
     transform: scale(0);
     animation: ripple 0.4s linear;
-    background-color: ${({ appearance }) =>
-        appearance === 'solid'
+    background-color: ${({ $appearance }) =>
+        $appearance === 'solid'
             ? 'rgba(255, 255, 255, 0.5)'
             : 'rgba(0, 0, 0, 0.2)'};
     pointer-events: none;

package/components/Button/Button.tsx

@@ -1,70 +1,76 @@
-
-import { useState } from 'react';
+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 { ButtonAppearance } from './Button.appearance'
 
 const Button: React.FC<ButtonProps> = ({
-  appearance = "solid",
-  children,
-  className,
-  color = "primary",
-  disabled,
-  fluid = false,
-  size = "md",
-  onClick,
-  type = "button",
-  ...rest
+    appearance = 'solid',
+    children,
+    className,
+    color = 'primary',
+    disabled,
+    fluid = false,
+    size = 'md',
+    onClick,
+    type = 'button',
+    ...rest
 }) => {
+    const [ripples, setRipples] = useState<RippleInterface[]>([])
 
-  const [ripples, setRipples] = useState<RippleInterface[]>([]);
+    const buttonSize = ButtonSizes(size)
+    const buttonAppearance = ButtonAppearance(color, appearance)
 
-  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 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]);
+        const newRipple: RippleInterface = {
+            id: `${Date.now()}-${Math.random()}`,
+            x,
+            y
+        }
+        setRipples(prev => [...prev, newRipple])
 
-    // Chama o onClick fornecido
-    if (onClick) {
-      onClick(e);
+        // 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>
-  );
-};
+    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;
+export default Button

package/components/Button/Button.types.ts

@@ -1,4 +1,4 @@
-import {colorType} from 'types'
+import { colorType } from 'types'
 
 export type ButtonSizeTypes = 'xs' | 'sm' | 'md' | 'lg'
 export type ButtonAppearanceTypes = 'solid' | 'outline' | 'ghost'
@@ -13,6 +13,7 @@ export interface ButtonProps {
     color?: colorType
     onClick?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void
     type?: 'button' | 'submit' | 'reset'
+    style?: React.CSSProperties
 }
 
 export interface RippleInterface {

package/components/Checkbox/Checkbox.styles.ts

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

package/components/Checkbox/Checkbox.tsx

@@ -0,0 +1,40 @@
+import React, { useState } from 'react'
+import { CheckboxProps } from './Checkbox.types'
+import { CheckboxWrapper, CustomCheckbox, Label } from './Checkbox.styles'
+
+const Checkbox: React.FC<CheckboxProps> = ({
+    label,
+    checked,
+    onChange,
+    disabled = false,
+    register,
+    className,
+    ...rest
+}) => {
+    // Estado interno para alternar caso `checked` não seja controlado externamente
+    const [internalChecked, setInternalChecked] = useState<boolean>(
+        checked || false
+    )
+
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        onChange?.(e)
+        setInternalChecked(!internalChecked) // Alterna o estado internamente
+    }
+
+    return (
+        <CheckboxWrapper className={className}>
+            <input
+                {...register}
+                type="checkbox"
+                checked={internalChecked}
+                onChange={handleChange}
+                disabled={disabled}
+                {...rest}
+            />
+            <CustomCheckbox checked={internalChecked} disabled={disabled} />
+            {label && <Label disabled={disabled}>{label}</Label>}
+        </CheckboxWrapper>
+    )
+}
+
+export default Checkbox

package/components/Checkbox/Checkbox.types.ts

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

package/components/Checkbox/index.tsx

@@ -0,0 +1,2 @@
+export { default } from './Checkbox'
+export type { CheckboxProps } from './Checkbox.types'

package/components/DatePicker/DatePicker.styles.ts

@@ -0,0 +1,66 @@
+import { parseColor } from '../../utils'
+import styled from 'styled-components'
+import { Content, Item } from '@radix-ui/react-dropdown-menu'
+import { spacing } from '@liguelead/foundation'
+
+export const ArrownDatePicker = styled.button.attrs(() => ({ type: 'button' }))`
+    background-color: transparent;
+    border: 0;
+    outline: 0;
+    padding: 0;
+    cursor: pointer;
+    height: 32px;
+    width: 32px;
+    border-radius: 4px;
+    overflow: hidden;
+    transition: 0.2s all linear;
+    color: ${({ theme }) => parseColor(theme.colors.primaryDark)};
+    &:hover {
+        color: ${({ theme }) => parseColor(theme.colors.white)};
+        background: ${({ theme }) => parseColor(theme.colors.primary)};
+    }
+`
+
+export const ButtonDatePicker = styled.button.attrs(() => ({ type: 'button' }))`
+    background-color: transparent;
+    border: 0;
+    outline: 0;
+    padding: ${spacing.spacing4}px;
+    cursor: pointer;
+    border-radius: 4px;
+    overflow: hidden;
+    transition: 0.2s all linear;
+    color: ${({ theme }) => parseColor(theme.colors.primaryDark)};
+    &:hover {
+        color: ${({ theme }) => parseColor(theme.colors.white)};
+        background: ${({ theme }) => parseColor(theme.colors.primary)};
+    }
+`
+
+export const HeaderSelectWrapper = styled.div`
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+    gap: 4px;
+    padding: 0px 4px;
+`
+
+export const DropdownContent = styled(Content)`
+    background-color: white;
+    border-radius: 4px;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
+    padding: 4px;
+    max-height: 300px;
+    overflow-y: auto;
+    z-index: 10;
+`
+
+export const DropdownItem = styled(Item)`
+    padding: 8px 12px;
+    font-size: 14px;
+    cursor: pointer;
+    &:hover {
+        background-color: ${({ theme }) => parseColor(theme.colors.primary)};
+        color: ${({ theme }) => parseColor(theme.colors.white)};
+    }
+`

package/components/DatePicker/DatePicker.tsx

@@ -0,0 +1,135 @@
+import * as DropdownMenu from '@radix-ui/react-dropdown-menu'
+import {
+    Calendar,
+    CaretLeft,
+    CaretRight,
+    CaretDown
+} from '@phosphor-icons/react'
+import { getYear, getMonth } from 'date-fns'
+import { range } from 'lodash'
+import { ptBR } from 'date-fns/locale'
+import { forwardRef, useState } from 'react'
+import TextField from '../TextField'
+import { DatePickerProps, Months } from './DatePicker.types'
+import {
+    ButtonDatePicker,
+    HeaderSelectWrapper,
+    DropdownContent,
+    DropdownItem,
+    ArrownDatePicker
+} from './DatePicker.styles'
+import DatePicker from 'react-datepicker'
+
+const DatePickerCustom = forwardRef<HTMLInputElement, DatePickerProps>(
+    (
+        {
+            label,
+            error,
+            startYear = 1990,
+            endYear = 0,
+            startDate = new Date(),
+            icon = false,
+            onChange,
+            size = 'md',
+            register,
+            ...rest
+        }: DatePickerProps,
+        ref
+    ) => {
+        const [pickerStartDate, setPickerStartDate] = useState<Date | null>(
+            startDate
+        )
+        const lastYear =
+            endYear > startYear ? endYear + 1 : getYear(new Date()) + 1
+        const years = range(startYear, lastYear, 1)
+
+        return (
+            <DatePicker
+                {...register}
+                {...rest}
+                locale={ptBR}
+                renderCustomHeader={({
+                    date,
+                    changeYear,
+                    changeMonth,
+                    decreaseMonth,
+                    increaseMonth,
+                    prevMonthButtonDisabled,
+                    nextMonthButtonDisabled
+                }) => (
+                    <HeaderSelectWrapper>
+                        <ArrownDatePicker
+                            onClick={decreaseMonth}
+                            disabled={prevMonthButtonDisabled}>
+                            <CaretLeft size={24} weight="bold" />
+                        </ArrownDatePicker>
+                        <DropdownMenu.Root modal={false}>
+                            <DropdownMenu.Trigger asChild>
+                                <ButtonDatePicker>
+                                    {getYear(date)} <CaretDown size={16} />
+                                </ButtonDatePicker>
+                            </DropdownMenu.Trigger>
+                            <DropdownContent>
+                                {years.map(option => (
+                                    <DropdownItem
+                                        key={option}
+                                        onSelect={() => {
+                                            changeYear(option)
+                                        }}>
+                                        {option}
+                                    </DropdownItem>
+                                ))}
+                            </DropdownContent>
+                        </DropdownMenu.Root>
+                        <DropdownMenu.Root modal={false}>
+                            <DropdownMenu.Trigger asChild>
+                                <ButtonDatePicker>
+                                    {Months[getMonth(date)]}{' '}
+                                    <CaretDown size={16} />
+                                </ButtonDatePicker>
+                            </DropdownMenu.Trigger>
+                            <DropdownContent>
+                                {Months.map((month, index) => (
+                                    <DropdownItem
+                                        key={month}
+                                        onSelect={() => {
+                                            changeMonth(index)
+                                        }}>
+                                        {month}
+                                    </DropdownItem>
+                                ))}
+                            </DropdownContent>
+                        </DropdownMenu.Root>
+
+                        <ArrownDatePicker
+                            onClick={increaseMonth}
+                            disabled={nextMonthButtonDisabled}>
+                            <CaretRight size={24} weight="bold" />
+                        </ArrownDatePicker>
+                    </HeaderSelectWrapper>
+                )}
+                dateFormat="dd/MM/yyyy"
+                selected={pickerStartDate}
+                onChange={(date: Date | null) => {
+                    if (!date) {
+                        return
+                    }
+                    setPickerStartDate(date)
+                    onChange?.(date)
+                }}
+                customInput={
+                    <TextField
+                        error={error}
+                        size={size}
+                        ref={ref}
+                        leftIcon={icon && <Calendar size={22} weight="bold" />}
+                        label={label}
+                        className="example-custom-input"
+                    />
+                }
+            />
+        )
+    }
+)
+
+export default DatePickerCustom

package/components/DatePicker/DatePicker.types.ts

@@ -0,0 +1,29 @@
+import { FieldValues, UseFormRegister } from 'react-hook-form'
+
+export const Months = [
+    'Janeiro',
+    'Fevereiro',
+    'Março',
+    'Abril',
+    'Maio',
+    'Junho',
+    'Julho',
+    'Agosto',
+    'Setembro',
+    'Outubro',
+    'Novembro',
+    'Dezembro'
+]
+
+export type DatePickerProps = {
+    endYear?: number
+    label: string
+    startYear?: number
+    onChange?: (date: Date) => void
+    error?: FieldValues
+    startDate?: Date
+    className?: string
+    icon?: boolean
+    size?: 'sm' | 'md' | 'lg'
+    register?: UseFormRegister<Date>
+}

package/components/DatePicker/index.ts

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

package/components/IconButton/IconButton.tsx

@@ -1,67 +1,70 @@
-import { useState } from "react";
-import { ButtonProps, RippleInterface } from "../Button/Button.types";
-import { ButtonAppearance } from "../Button/Button.appearance";
+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";
+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 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]);
-    
+        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);
+            onClick(e)
         }
-      };
-  
+    }
+
     return (
         <StyledButton
             disabled={disabled}
             className={className}
             $fluid={fluid}
-            $appearance={buttonAppearance} 
-            onClick={handleClick} 
+            $appearance={buttonAppearance}
+            onClick={handleClick}
             $buttonSize={buttonSize}
-            {...rest}
-        >
+            {...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>
-    );
-  };
+            {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;
+export default IconButton

package/components/SegmentedButton/SegmentedButton.styles.ts

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