@liguelead/design-system 0.0.9 → 0.0.11

package/components/Checkbox/Checkbox.styles.ts

@@ -1,66 +1,115 @@
-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,
+    fontSize,
+    fontWeight,
+    radius
+} from '@liguelead/foundation'
+import { parseColor } from '../../utils'
+import styled, { css } from 'styled-components'
+import Text from '../Text'
+
+export const CheckboxWrapper = styled.label`
+    display: flex;
+    align-items: start;
+    cursor: pointer;
+    position: relative;
+    user-select: none;
+    gap: 8px;
+    font-size: ${fontSize.fontSize14}px;
+
+    input {
+        position: absolute;
+        opacity: 0;
+        width: 0;
+        height: 0;
+    }
+
+    input:focus + span {
+        box-shadow: 0 0 0 3px #A3A3A350}
+    }
+`
+
+export const CustomCheckbox = styled.span<{
+    checked: boolean
+    disabled?: boolean
+}>`
+    ${({ checked, theme, disabled }) => css`
+        width: ${spacing.spacing16}px;
+        height: ${spacing.spacing16}px;
+        border: 1px solid ${checked
+            ? parseColor(theme.colors.primary)
+            : parseColor(theme.colors.neutral400)};
+        border-radius: ${radius.radius4}px;
+        display: flex;
+        top: 2px;
+        align-items: center;
+        justify-content: center;
+        transition: all 0.2s ease-in-out;
+        background-color: ${checked
+            ? parseColor(theme.colors.primary)
+            : 'transparent'};
+        position: relative;
+        overflow: hidden;
+
+        ${disabled &&
+        css`
+            background-color: transparent;
+            border-color: ${parseColor(theme.colors.neutral400)}70;
+            cursor: not-allowed;
+        `}
+
+        &::after {
+            content: '';
+            width: 16px;
+            height: 16px;
+            display: ${checked ? 'block' : 'none'};
+            background-color: white;
+            z-index: 1;
+
+            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 RippleContainer = styled.span`
+    position: absolute;
+    border-radius: 50%;
+    transform: scale(0);
+    animation: ripple 0.4s linear;
+    background-color: rgba(255, 255, 255, 0.6);
+    pointer-events: none;
+    z-index: 0;
+
+    @keyframes ripple {
+        to {
+            transform: scale(3.5);
+            opacity: 0;
+        }
+    }
+`
+
+export const Label = styled.span<{ disabled?: boolean }>`
+    font-size: ${fontSize.fontSize14}px;
+    font-weight: ${fontWeight.fontWeight500};
+
+    color: ${({ theme, disabled }) =>
+        disabled
+            ? `${parseColor(theme.colors.neutral1100)}70`
+            : parseColor(theme.colors.neutral1100)};
+`
+
+export const CustomLabel = styled(Text)<{ disabled?: boolean }>`
+    font-size: ${fontSize.fontSize12}px;
+    font-weight: ${fontWeight.fontWeight400};
+    line-height: 8px;
+
+    color: ${({ theme, disabled }) =>
+        disabled
+            ? `${parseColor(theme.colors.textMedium)}70`
+            : parseColor(theme.colors.textMedium)};
+
+`

package/components/Checkbox/Checkbox.tsx

@@ -1,40 +1,97 @@
-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,
+    CustomLabel,
+    Label,
+    RippleContainer
+} from './Checkbox.styles'
+
+interface RippleInterface {
+    id: string
+    x: number
+    y: number
+}
+
+const Checkbox: React.FC<CheckboxProps> = ({
+    label,
+    checked,
+    onChange,
+    disabled = false,
+    register,
+    className,
+    description,
+    ...rest
+}) => {
+    const [internalChecked, setInternalChecked] = useState<boolean>(
+        checked || false
+    )
+    const [ripples, setRipples] = useState<RippleInterface[]>([])
+
+    const removeRipple = (ripples: RippleInterface[], rippleId: string) => {
+        return ripples.filter(r => r.id !== rippleId)
+    }
+
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        onChange?.(e)
+        setInternalChecked(!internalChecked)
+    }
+
+    const handleRipple = (e: React.MouseEvent<HTMLSpanElement>) => {
+        if (disabled) return
+        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])
+    }
+
+    return (
+        <CheckboxWrapper className={className}>
+            <input
+                {...register}
+                type="checkbox"
+                checked={internalChecked}
+                onChange={handleChange}
+                disabled={disabled}
+                {...rest}
+            />
+            <CustomCheckbox
+                checked={internalChecked}
+                disabled={disabled}
+                onClick={handleRipple}
+            >
+                {ripples.map(ripple => (
+                    <RippleContainer
+                        key={ripple.id}
+                        style={{
+                            top: ripple.y - 10,
+                            left: ripple.x - 10,
+                            width: 20,
+                            height: 20
+                        }}
+                        onAnimationEnd={() =>
+                            setRipples(prev => removeRipple(prev, ripple.id))
+                        }
+                    />
+                ))}
+            </CustomCheckbox>
+            <div>
+                {label && <Label disabled={disabled}>{label}</Label>}
+                <CustomLabel
+                    disabled={disabled}
+                    weight="fontWeight400"
+                >
+                    {description}
+                </CustomLabel>
+            </div>
+        </CheckboxWrapper>
+    )
+}
+
+export default Checkbox

package/components/Checkbox/Checkbox.types.ts

@@ -1,11 +1,12 @@
-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
+    description?: string
+    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)};
+    }
+`