@liguelead/design-system 0.0.8 → 0.0.10

package/components/Checkbox/Checkbox.tsx

@@ -1,40 +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
+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

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

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

package/components/DatePicker/DatePicker.styles.ts

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

@@ -1,135 +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
+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

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

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

package/components/IconButton/IconButton.sizes.ts

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