@liguelead/design-system 0.0.9 → 0.0.11

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,34 @@
-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 = {
+    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.spacing8}px ${spacing.spacing4}px;
+        border-radius: ${spacing.spacing4}px;
+        min-width: ${spacing.spacing36}px;
+        & svg {
+            width: ${spacing.spacing16}px;
+            height: ${spacing.spacing16}px;
+        }
+    `,
+    lg: `
+        padding: ${spacing.spacing12}px ${spacing.spacing12}px;
+        border-radius: ${spacing.spacing4}px;
+        & svg {
+            width: ${spacing.spacing16}px;
+            height: ${spacing.spacing16}px;
+        }
+    `
+  }
+
+  return sizes[size]
+}

package/components/IconButton/IconButton.tsx

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

package/components/IconButton/index.ts

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

package/components/InputOpt/InputOpt.styles.ts

@@ -0,0 +1,75 @@
+import styled, { css } from 'styled-components'
+import { spacing, fontSize, fontWeight, shadow, lineHeight } from '@liguelead/foundation'
+import { parseColor } from '../../utils'
+
+export const OptWrapper = styled.div`
+  display: flex;
+  gap: ${spacing.spacing16}px;
+`
+
+interface OptBoxProps {
+  $disabled?: boolean;
+  $error?: boolean;
+}
+
+export const OptBox = styled.input<OptBoxProps>`
+  width: ${spacing.spacing36}px;
+  height: ${spacing.spacing36}px;
+  text-align: center;
+  font-size: ${fontSize.fontSize14}px;
+  font-weight: ${fontWeight.fontWeight400};
+  border: 1px solid ${({ theme }) => parseColor(theme.colors.neutral400)};
+  background: ${({ theme }) => parseColor(theme.colors.white)};
+  color: ${({ theme }) => parseColor(theme.colors.neutral1100)};
+  border-radius: 4px;
+  outline: none;
+  transition: border-color .15s ease, box-shadow .15s ease;
+
+  ${({ $error, theme }) =>
+    $error &&
+    css`
+      border-color: ${parseColor(theme.colors.danger100)};
+    `}
+
+  &:focus {
+    ${({ $error, theme }) =>
+      $error
+        ? css`
+            border-color: ${parseColor(theme.colors.danger200)};
+            box-shadow: 0 0 0 3px ${parseColor(theme.colors.danger100)}40;
+          `
+        : css`
+            border-color: ${parseColor(theme.colors.neutral700)};
+            box-shadow: ${shadow.focusShadow};
+          `}
+  }
+
+  ${({ $disabled, theme }) =>
+    $disabled &&
+    css`
+      opacity: 0.5;
+      cursor: not-allowed;
+      border-color: ${parseColor(theme.colors.neutral400)};
+      background: ${parseColor(theme.colors.neutral100)};
+    `}
+`
+
+export const OtpSeparator = styled.span`
+  color: ${({ theme }) => parseColor(theme.colors.neutral700)};
+  font-size: 20px;
+  user-select: none;
+`
+
+export const OtpSeparatorContainer = styled.div`
+  display: flex;
+  align-items: center;
+`
+
+export const OptHelperText = styled.span<{ $error?: boolean }>`
+  display: block;
+  margin-top: ${spacing.spacing8}px;
+  font-size: ${fontSize.fontSize12}px;
+  line-height: ${lineHeight.lineHeight16}px;
+  color: ${({ theme, $error }) =>
+    $error ? parseColor(theme.colors.danger100) : parseColor(theme.colors.neutral700)};
+`