@liguelead/design-system 0.0.9 → 0.0.11

package/components/Select/Select.styles.ts

@@ -1,148 +1,162 @@
-import styled from 'styled-components'
-import { TextFieldSizeType, StateInterface } from './Select.types'
-import {
-    fontSize,
-    fontWeight,
-    lineHeight,
-    spacing
-} from '@liguelead/foundation'
-import { parseColor } from '../../utils'
-import { Content, Item } from '@radix-ui/react-select'
-
-interface StyledInputProps {
-    size: TextFieldSizeType
-    $themefication: StateInterface
-}
-
-export const InputWrapper = styled.div`
-    position: relative;
-    width: 100%;
-`
-
-export const FloatingLabel = styled.label`
-    position: absolute;
-    top: 50%;
-    left: 12px;
-    transform: translateY(-50%);
-    font-weight: ${fontWeight.fontWeight600};
-    transition: all 0.2s ease;
-    pointer-events: none;
-    background-color: white;
-    padding: 0 4px;
-    &.is-open {
-        color: ${({ theme }) => parseColor(theme.colors.primary)} !important;
-    }
-`
-
-export const HelperText = styled.span<{ error?: boolean }>`
-    font-size: ${fontSize.fontSize12}px;
-    line-height: ${lineHeight.lineHeight12}px;
-    padding-left: ${spacing.spacing16}px;
-`
-
-export const IconWrapper = styled.div<{ $right?: boolean; $error?: boolean }>`
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    position: absolute;
-    top: 0px;
-    height: 100%;
-    cursor: pointer;
-    ${({ $right }) => ($right ? 'right: 0px;' : 'left: 0px;')}
-    padding: 0px ${spacing.spacing16}px;
-
-    & svg {
-        width: 20px;
-        height: 20px;
-        fill: ${({ theme, $error }) =>
-            $error
-                ? parseColor(theme.colors.danger100)
-                : parseColor(theme.colors.neutral700)};
-        transition: fill 0.2s ease;
-    }
-`
-
-export const StyledContent = styled(Content)`
-    padding: 0px;
-    background-color: #fff;
-    min-width: var(--radix-select-trigger-width, auto);
-    width: 100%;
-    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
-    border: 1px solid ${({ theme }) => parseColor(theme.colors.neutral500)};
-    border-top: 0px;
-    max-height: var(--radix-select-content-height, 314px);
-    overflow-y: scroll !important;
-    z-index: 10;
-    & .RadixSelectViewport {
-        max-height: 200px; /* Limite de altura do dropdown */
-        overflow-y: auto; /* Adiciona o scroll quando necessário */
-        scrollbar-width: thin; /* Personaliza a largura do scroll (opcional) */
-    }
-`
-
-export const StyledItem = styled(Item)`
-    padding: ${spacing.spacing12}px ${spacing.spacing20}px;
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    transition: all 0.2s ease;
-    cursor: pointer;
-    &:hover {
-        background-color: ${({ theme }) => parseColor(theme.colors.neutral200)};
-    }
-    &[data-state='checked'] {
-        background-color: ${({ theme }) =>
-            parseColor(theme.colors.primaryLight)};
-    }
-`
-
-export const StyledInput = styled.input.withConfig({
-    shouldForwardProp: prop => !['control', 'errors', 'rules'].includes(prop)
-})`
-    width: 100%;
-    border-radius: 4px;
-    outline: none;
-    transition: border-color 0.2s ease;
-    background: transparent;
-    &.is-open {
-        border-color: ${({ theme }) =>
-            parseColor(theme.colors.primary)} !important;
-    }
-`
-
-export const BorderWrapper = styled.div`
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    pointer-events: none;
-    border: 2px solid #ccc;
-    border-radius: 4px;
-    background-color: transparent;
-    z-index: -1;
-
-    ${StyledInput}:focus ~ & {
-        border-color: ${({ theme }) => theme.colors.primary};
-    }
-`
-
-export const Wrapper = styled.div<StyledInputProps>`
-    position: relative;
-    width: 100%;
-    cursor: pointer;
-    ${({ $themefication, size }) => `
-            ${StyledInput} {
-                ${$themefication.animation}
-                ${$themefication.input}
-                ${size.input}
-            }
-            ${FloatingLabel} {
-                ${$themefication.label}
-                ${size.label}
-            }
-            ${HelperText} {
-                ${$themefication.label} 
-            }
-        `}
-`
+import styled from 'styled-components'
+import { TextFieldSizeType, StateInterface } from './Select.types'
+import {
+    fontSize,
+    fontWeight,
+    lineHeight,
+    spacing,
+    shadow
+} from '@liguelead/foundation'
+import { parseColor } from '../../utils'
+import { Content, Item } from '@radix-ui/react-select'
+
+interface StyledInputProps {
+    size: TextFieldSizeType
+    $themefication: StateInterface
+}
+
+export const InputWrapper = styled.div`
+    position: relative;
+    width: 100%;
+`
+
+export const Label = styled.label`
+    display: block;
+    font-weight: ${fontWeight.fontWeight600};
+    margin-bottom: ${spacing.spacing4}px;
+    font-size: ${fontSize.fontSize14}px;
+`
+
+export const HelperText = styled.span<{ error?: boolean }>`
+    font-size: ${fontSize.fontSize12}px;
+    line-height: ${lineHeight.lineHeight12}px;
+`
+
+export const IconWrapper = styled.div<{ 
+    $right?: boolean;
+    $error?: boolean;
+    $disabled?: boolean;
+}>` ${({theme, $error, $disabled, $right }) =>`
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    position: absolute;
+    top: 0px;
+    height: 100%;
+    cursor: pointer;
+    ${$right ? 'right: 0px;' : 'left: 0px;'}
+    padding: 0px ${spacing.spacing16}px;
+
+    & svg {
+        width: 16px;
+        height: 16px;
+        fill: ${$error
+                ? parseColor(theme.colors.danger200)
+                : $disabled
+                ? parseColor(theme.colors.neutral400)
+                : parseColor(theme.colors.neutral800)};
+        transition: fill 0.2s ease;
+        cursor: ${$disabled ? 'not-allowed' : 'pointer'};
+    }
+`}
+`
+
+export const StyledContent = styled(Content)`
+    padding: 0px;
+    background-color: #fff;
+    min-width: var(--radix-select-trigger-width, auto);
+    width: 100%;
+    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
+    border: 1px solid ${({ theme }) => parseColor(theme.colors.neutral500)};
+    border-top: 0px;
+    max-height: var(--radix-select-content-height, 314px);
+    overflow-y: scroll !important;
+    z-index: 10;
+
+    & .RadixSelectViewport {
+        max-height: 200px; /* Limite de altura do dropdown */
+        overflow-y: auto; /* Adiciona o scroll quando necessário */
+        scrollbar-width: thin; /* Personaliza a largura do scroll (opcional) */
+    }
+`
+
+export const StyledItem = styled(Item)`
+    padding: ${spacing.spacing12}px ${spacing.spacing20}px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 8px; /* mantém espaçamento interno caso adicionemos ícones à esquerda futuramente */
+    transition: all 0.2s ease;
+    cursor: pointer;
+
+    &:hover {
+        background-color: ${({ theme }) => parseColor(theme.colors.primaryLight)};
+    }
+
+    &[data-state='checked'] {
+        background-color: ${({ theme }) =>
+            parseColor(theme.colors.primary)};
+        color: ${({ theme }) => parseColor(theme.colors.white)};
+    }
+`
+
+export const StyledInput = styled.input.withConfig({
+    shouldForwardProp: prop => !['control', 'errors', 'rules'].includes(prop)
+})`
+    width: 100%;
+    border-radius: 4px;
+    outline: none;
+    transition: border-color 0.2s ease;
+    background: transparent;
+    cursor: pointer;
+
+    &:focus {
+        box-shadow: ${shadow.focusShadow}
+    }
+
+    &.is-open {
+        border-color: ${({ theme }) =>
+            parseColor(theme.colors.neutral800)} !important;
+        box-shadow: ${shadow.focusShadow}
+    }
+
+    &:disabled {
+        cursor: not-allowed;
+    }
+`
+
+export const BorderWrapper = styled.div`
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    pointer-events: none;
+    border: 2px solid #ccc;
+    border-radius: 4px;
+    background-color: transparent;
+    z-index: -1;
+
+    ${StyledInput}:focus ~ & {
+        border-color: ${({ theme }) => theme.colors.primary};
+    }
+`
+
+export const Wrapper = styled.div<StyledInputProps>`
+    position: relative;
+    width: 100%;
+    cursor: pointer;
+    ${({ $themefication, size }) => `
+        ${StyledInput} {
+            ${$themefication.input}
+            ${size.input}
+        }
+        ${HelperText} {
+            ${$themefication.helperText}
+        }
+        ${Label} {
+            ${$themefication.label}
+            ${size.label}
+        }
+    `}
+`

package/components/Select/Select.tsx

@@ -1,144 +1,152 @@
-import { forwardRef, useState } from 'react'
-import * as RadixSelect from '@radix-ui/react-select'
-import { CaretDown, Plus } from '@phosphor-icons/react'
-import {
-    FloatingLabel,
-    HelperText,
-    IconWrapper,
-    InputWrapper,
-    StyledContent,
-    StyledInput,
-    StyledItem,
-    Wrapper
-} from './Select.styles'
-import { SelectStates } from './Select.states'
-import { textFieldSizes } from './Select.sizes'
-import TextField, { getState } from '../TextField/TextField'
-import { SelectProps, StateInterface } from './Select.types'
-
-const Select = forwardRef<HTMLInputElement, SelectProps>(
-    (
-        {
-            label,
-            defaultValue,
-            error,
-            helperText,
-            leftIcon,
-            size = 'md',
-            options,
-            className,
-            disabled = false,
-            handleLeftIcon,
-            register
-        },
-        ref
-    ) => {
-        const [selectValue, setSelectValue] = useState(
-            defaultValue ?? options[0]?.value
-        )
-        const [open, setOpen] = useState(false)
-
-        const handleOnChange = (value: string) => {
-            if (value) {
-                setSelectValue(value)
-                register?.onChange({
-                    target: {
-                        name: register.name,
-                        value
-                    }
-                })
-            }
-        }
-
-        const state = getState(disabled, !!error)
-        const textFieldState: StateInterface = SelectStates(state)
-        const textFieldSize = textFieldSizes(size, !!leftIcon, false)
-        const selectedLabel =
-            options.find(option => option.value === selectValue)?.label ?? ''
-
-        return (
-            <Wrapper
-                className={className}
-                size={textFieldSize}
-                $themefication={textFieldState}>
-                <input
-                    type="hidden"
-                    value={selectValue}
-                    ref={instance => {
-                        if (typeof ref === 'function') {
-                            ref(instance)
-                        } else if (ref) {
-                            ref.current = instance
-                        }
-                        register?.ref(instance)
-                    }}
-                    onChange={register?.onChange}
-                    onBlur={register?.onBlur}
-                />
-                {!disabled ? (
-                    <RadixSelect.Root
-                        value={selectValue}
-                        onOpenChange={open => setOpen(open)}
-                        defaultValue={defaultValue}
-                        onValueChange={(value: string) =>
-                            handleOnChange(value)
-                        }>
-                        <RadixSelect.Trigger asChild>
-                            <InputWrapper>
-                                {leftIcon && (
-                                    <IconWrapper onClick={handleLeftIcon}>
-                                        {leftIcon}
-                                    </IconWrapper>
-                                )}
-                                <IconWrapper $right $error={!!error}>
-                                    <CaretDown weight="fill" size={14} />
-                                </IconWrapper>
-                                <StyledInput
-                                    readOnly
-                                    style={{ cursor: 'pointer !important' }}
-                                    value={selectedLabel}
-                                    placeholder=" "
-                                    className={open ? 'is-open' : ''}
-                                />
-                                <FloatingLabel
-                                    className={open ? 'is-open' : ''}>
-                                    {label}
-                                </FloatingLabel>
-                            </InputWrapper>
-                        </RadixSelect.Trigger>
-                        <StyledContent
-                            asChild
-                            sideOffset={0}
-                            position="popper"
-                            align="start"
-                            className="RadixSelectContent">
-                            <RadixSelect.Viewport className="RadixSelectViewport">
-                                {options.map(option => (
-                                    <StyledItem
-                                        key={option.value}
-                                        value={option.value}>
-                                        <Plus width={20} />
-                                        {option.label}
-                                    </StyledItem>
-                                ))}
-                            </RadixSelect.Viewport>
-                        </StyledContent>
-                    </RadixSelect.Root>
-                ) : (
-                    <TextField
-                        leftIcon={leftIcon}
-                        rightIcon={<CaretDown weight="fill" size={14} />}
-                        label={label}
-                        size={size}
-                        disabled
-                    />
-                )}
-                {(helperText || error) && (
-                    <HelperText>{error?.message || helperText}</HelperText>
-                )}
-            </Wrapper>
-        )
-    }
-)
-
-export default Select
+import { forwardRef, useState } from 'react'
+import * as RadixSelect from '@radix-ui/react-select'
+import { CaretDownIcon, CheckIcon } from '@phosphor-icons/react'
+import {
+    HelperText,
+    IconWrapper,
+    InputWrapper,
+    StyledContent,
+    StyledInput,
+    StyledItem,
+    Wrapper,
+    Label
+} from './Select.styles'
+import { SelectStates } from './Select.states'
+import { textFieldSizes } from './Select.sizes'
+import { SelectProps, StateInterface } from './Select.types'
+import getState from '../TextField/utils/getState'
+
+const Select = forwardRef<HTMLInputElement, SelectProps>(
+    (
+        {
+            label,
+            defaultValue,
+            error,
+            helperText,
+            leftIcon,
+            size = 'md',
+            options,
+            className,
+            disabled = false,
+            handleLeftIcon,
+            register
+        },
+        ref
+    ) => {
+        const [selectValue, setSelectValue] = useState(
+            defaultValue ?? options[0]?.value
+        )
+        const [open, setOpen] = useState(false)
+
+        const handleOnChange = (value: string) => {
+            if (value) {
+                setSelectValue(value)
+                register?.onChange({
+                    target: {
+                        name: register.name,
+                        value
+                    }
+                })
+            }
+        }
+
+        const state = getState(disabled, !!error)
+        const textFieldState: StateInterface = SelectStates(state)
+        const textFieldSize = textFieldSizes(size, !!leftIcon, false)
+        const selectedLabel =
+            options.find(option => option.value === selectValue)?.label ?? ''
+
+        return (
+            <Wrapper
+                className={className}
+                size={textFieldSize}
+                $themefication={textFieldState}>
+                <input
+                    type="hidden"
+                    value={selectValue}
+                    ref={instance => {
+                        if (typeof ref === 'function') {
+                            ref(instance)
+                        } else if (ref) {
+                            ref.current = instance
+                        }
+                        register?.ref(instance)
+                    }}
+                    onChange={register?.onChange}
+                    onBlur={register?.onBlur}
+                />
+                <Label>{label}</Label>
+                {disabled ? (
+                    <InputWrapper className="is-disabled">
+                        {leftIcon && (
+                            <IconWrapper onClick={handleLeftIcon} $disabled={disabled}>
+                                {leftIcon}
+                            </IconWrapper>
+                        )}
+                        <IconWrapper $right $error={!!error} $disabled={disabled}>
+                            <CaretDownIcon weight="fill" size={14} />
+                        </IconWrapper>
+                        <StyledInput
+                            disabled
+                            readOnly
+                            value={selectedLabel}
+                            className="is-disabled"
+                        />
+                    </InputWrapper>
+                ) : (
+                    <RadixSelect.Root
+                        value={selectValue}
+                        onOpenChange={open => setOpen(open)}
+                        defaultValue={defaultValue}
+                        onValueChange={(value: string) =>
+                            handleOnChange(value)
+                        }>
+                        <RadixSelect.Trigger asChild disabled={disabled}>
+                            <InputWrapper>
+                                {leftIcon && (
+                                    <IconWrapper onClick={handleLeftIcon}>
+                                        {leftIcon}
+                                    </IconWrapper>
+                                )}
+                                <IconWrapper $right $error={!!error}>
+                                    <CaretDownIcon weight="fill" size={14} />
+                                </IconWrapper>
+                                <StyledInput
+                                    readOnly
+                                    style={{ cursor: 'pointer !important' }}
+                                    value={selectedLabel}
+                                    className={open ? 'is-open' : ''}
+                                />
+                            </InputWrapper>
+                        </RadixSelect.Trigger>
+                        <StyledContent
+                            asChild
+                            sideOffset={0}
+                            position="popper"
+                            align="start"
+                            className="RadixSelectContent">
+                            <RadixSelect.Viewport className="RadixSelectViewport">
+                                {options.map(option => (
+                                    <StyledItem
+                                        key={option.value}
+                                        value={option.value}
+                                    >
+                                        <span>{option.label}</span>
+                                        {option.value === selectValue && (
+                                            <CheckIcon weight="bold" />
+                                        )}
+                                    </StyledItem>
+                                ))}
+                            </RadixSelect.Viewport>
+                        </StyledContent>
+                    </RadixSelect.Root>
+                )}
+                {(helperText || error) && (
+                    <HelperText>{error?.message || helperText}</HelperText>
+                )}
+            </Wrapper>
+        )
+    }
+)
+
+export default Select