@liguelead/design-system 0.0.26 → 0.0.27

package/components/Button/Button.appearance.ts

@@ -53,8 +53,8 @@ export const ButtonVariant = (
         }
         &:disabled {
             background-color: transparent;
-            color: ${parseColor(theme.colors.neutral1100)}80;
-            border-color: ${parseColor(theme.colors.neutral400)};
+            color: ${parsedColor}80;
+            border-color: ${parsedColor}80;
             cursor: not-allowed;
         }
     `,
@@ -68,7 +68,7 @@ export const ButtonVariant = (
         }
         &:disabled {
             background-color: transparent;
-            color: ${parseColor(theme.colors.neutral1100)}80;
+            color: ${parsedColor}80;
             cursor: not-allowed;
         }
     `,

package/components/Combobox/Combobox.styles.ts

@@ -0,0 +1,269 @@
+import styled from 'styled-components'
+import * as Popover from '@radix-ui/react-popover'
+import { Command } from 'cmdk'
+import {
+    fontSize,
+    fontWeight,
+    lineHeight,
+    shadow,
+    spacing
+} from '@liguelead/foundation'
+import { parseColor } from '../../utils'
+import { StyledInput } from '../TextField/TextField.styles'
+import { TextFieldSizeType } from '../TextField/TextField.sizes'
+import { StateInterface } from '../TextField/TextField.states'
+import Text from '../Text'
+
+type TStyledInputProps =  {
+    size: TextFieldSizeType
+    $themefication: StateInterface
+}
+
+export const TriggerButton = styled(StyledInput).attrs({ as: 'button' })<{
+    $width: number | string
+}>`
+    width: ${({ $width }) =>
+        typeof $width === 'number' ? `${$width}px` : $width};
+    border-radius: 4px;
+    padding-right: ${spacing.spacing16}px !important;
+    background: transparent;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: ${spacing.spacing8}px;
+    cursor: pointer;
+    text-align: left;
+    transition: border-color 0.2s ease, box-shadow 0.2s ease;
+
+    &:hover:not(:disabled) {
+        border-color: ${({ theme }) => parseColor(theme.colors.neutral700)};
+    }
+
+    &:focus-visible {
+        border-color: ${({ theme }) => parseColor(theme.colors.neutral700)};
+        box-shadow: ${shadow.focusShadow};
+        outline: none;
+    }
+
+    &:disabled {
+        cursor: not-allowed;
+        background: transparent;
+    }
+`
+
+export const Label = styled.label`
+    display: block;
+    font-weight: ${fontWeight.fontWeight500};
+    font-size: ${fontSize.fontSize14}px;
+`
+
+export const HelperText = styled.span<{ error?: boolean }>`
+    font-size: ${fontSize.fontSize12}px;
+    line-height: ${lineHeight.lineHeight16}px;
+`
+
+export const TriggerLabel = styled.span`
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+`
+
+export const TriggerIcon = styled.span`
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    color: ${({ theme }) => parseColor(theme.colors.neutral700)};
+`
+
+export const PopoverContent = styled(Popover.Content)<{
+    $width: number | string
+}>`
+    width: ${({ $width }) =>
+        typeof $width === 'number' ? `${$width}px` : $width};
+    background: ${({ theme }) => parseColor(theme.colors.white)};
+    border: 1px solid ${({ theme }) => parseColor(theme.colors.neutral400)};
+    border-radius: 4px;
+    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.08);
+    z-index: 10;
+`
+
+export const CommandRoot = styled(Command)`
+    width: 100%;
+`
+
+export const SearchRow = styled.div`
+    display: flex;
+    align-items: center;
+    gap: ${spacing.spacing8}px;
+    padding: ${spacing.spacing8}px ${spacing.spacing12}px;
+    border-bottom: 1px solid ${({ theme }) => parseColor(theme.colors.neutral200)};
+`
+
+export const SearchIcon = styled.div`
+    width: 16px;
+    height: 16px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    color: ${({ theme }) => parseColor(theme.colors.textDark)};
+`
+
+export const CommandInput = styled(Command.Input)`
+    width: 100%;
+    border: 0;
+    outline: none;
+    font-size: ${fontSize.fontSize14}px;
+    line-height: ${lineHeight.lineHeight20}px;
+    color: ${({ theme }) => parseColor(theme.colors.textDark)};
+    background: transparent;
+
+    &::placeholder {
+        color: ${({ theme }) => parseColor(theme.colors.textMedium)};
+    }
+`
+
+export const List = styled(Command.List)`
+    max-height: 260px;
+    overflow: auto;
+    padding-top: ${spacing.spacing8}px;
+
+    &::-webkit-scrollbar {
+        width: 10px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+        background: ${({ theme }) => parseColor(theme.colors.neutral200)};
+        border-radius: 999px;
+        border: 3px solid ${({ theme }) => parseColor(theme.colors.white)};
+    }
+`
+
+export const Empty = styled(Command.Empty)`
+    padding: ${spacing.spacing8}px ${spacing.spacing12}px;
+`
+
+export const GroupHeading = styled.div`
+    padding: ${spacing.spacing12}px ${spacing.spacing12}px ${spacing.spacing4}px;
+    font-size: ${fontSize.fontSize12}px;
+    font-weight: ${fontWeight.fontWeight500};
+    color: ${({ theme }) => parseColor(theme.colors.textMedium)};
+`
+
+export const GroupWrap = styled(Command.Group)`
+    background: transparent;
+`
+
+export const ItemRow = styled(Command.Item)`
+    height: ${spacing.spacing36}px;
+    padding: 0 ${spacing.spacing12}px;
+    margin-bottom: ${spacing.spacing4}px;
+    display: flex;
+    align-items: center;
+    gap: ${spacing.spacing8}px;
+    font-size: ${fontSize.fontSize14}px;
+    color: ${({ theme }) => parseColor(theme.colors.textDark)};
+    cursor: pointer;
+    user-select: none;
+    transition: background-color 0.2s ease;
+
+    &[data-disabled='true'] {
+        opacity: 0.6;
+        cursor: not-allowed;
+    }
+
+    &:last-child {
+        margin-bottom: 0;
+    }
+
+    &[data-variant='multi'][data-is-selected='true'] {
+        background: transparent;
+    }
+
+    &[data-variant='single'][data-is-selected='true'] {
+        background: ${({ theme }) => parseColor(theme.colors.primary)};
+        color: ${({ theme }) => parseColor(theme.colors.white)};
+    }
+
+    &:hover:not([data-disabled='true']):not([data-is-selected='true']:not([data-variant='multi'])) {
+        background: ${({ theme }) => parseColor(theme.colors.primaryLight)};
+    }
+`
+
+export const ItemLabel = styled(Text)`
+    padding-left: 4px;
+`;
+
+
+export const RightIcon = styled.span`
+    margin-left: auto;
+    padding: ${spacing.spacing8}px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    color: inherit;
+`
+
+export const Checkbox = styled.span<{ $checked: boolean }>`
+    width: 16px;
+    height: 16px;
+    border-radius: 4px;
+    border: 1px solid ${({ theme }) => parseColor(theme.colors.neutral400)};
+    background: ${({ $checked, theme }) =>
+        $checked
+            ? parseColor(theme.colors.primary)
+            : parseColor(theme.colors.white)};
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+
+    svg {
+        color: ${({ theme }) => parseColor(theme.colors.white)};
+    }
+`
+
+export const Footer = styled.div`
+    border-top: 1px solid ${({ theme }) => parseColor(theme.colors.neutral200)};
+    padding-top: ${spacing.spacing8}px;
+    margin-top: ${spacing.spacing8}px;
+`
+
+export const AddNewRow = styled.button`
+    width: 100%;
+    height: ${spacing.spacing36}px;
+    border: 0;
+    background: transparent;
+    border-radius: 4px;
+    display: flex;
+    align-items: center;
+    gap: ${spacing.spacing8}px;
+    padding: 0 ${spacing.spacing12}px;
+    cursor: pointer;
+    color: ${({ theme }) => parseColor(theme.colors.textDark)};
+    font-size: ${fontSize.fontSize14}px;
+
+    &:hover {
+        background: ${({ theme }) => parseColor(theme.colors.primaryLight)};
+    }
+`
+
+export const Wrapper = styled.div<TStyledInputProps>`
+    position: relative;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: ${spacing.spacing4}px;
+    ${({ $themefication, size }) => `
+        ${TriggerButton} {
+            ${$themefication.input}
+            ${size.input}
+        }
+        ${HelperText} {
+            ${$themefication.helperText}
+        }
+        ${Label} {
+            ${$themefication.label}
+            ${size.label}
+        }
+    `}
+`

package/components/Combobox/Combobox.tsx

@@ -0,0 +1,266 @@
+import { useMemo, useState } from 'react'
+
+import {
+    MagnifyingGlassIcon,
+    CheckIcon,
+    PlusIcon,
+    CaretDownIcon
+} from '@phosphor-icons/react'
+
+import Text from '../Text'
+import { ComboboxProps } from './Combobox.types'
+
+import RequiredAsterisk from '../RequiredAsterisk'
+import getState from '../TextField/utils/getState'
+import { TextFieldStates } from '../TextField/TextField.states'
+import { textFieldSizes } from '../TextField/TextField.sizes'
+
+import * as Popover from '@radix-ui/react-popover'
+import * as s  from './Combobox.styles'
+import { isMultiProps, normalizeData } from './utils'
+
+const Combobox = (props: ComboboxProps) => {
+    const {
+        className,
+        label,
+        helperText,
+        error,
+        requiredSymbol = false,
+        leftIcon,
+        items,
+        groups,
+        onChange,
+        placeholder = 'Selecionar',
+        searchPlaceholder = 'Pesquisar',
+        emptyText = 'Sem resultados.',
+        disabled = false,
+        width = 280,
+        size = 'md',
+        onCreate,
+        createLabel = 'Adicionar novo'
+    } = props
+
+    const [open, setOpen] = useState(false)
+    const { groups: g } = normalizeData(items, groups)
+    const state = getState(disabled, !!error)
+    const textFieldState = TextFieldStates(state)
+    const textFieldSize = textFieldSizes(size, false, true)
+
+    const isMulti = isMultiProps(props)
+    const flatItems = useMemo(() => g.flatMap(x => x.items), [g])
+    const selectedValue = isMulti ? undefined : props.value
+    const selected = selectedValue
+        ? flatItems.find(i => i.value === selectedValue)
+        : undefined
+    const selectedValues = isMulti ? props.values ?? [] : []
+    const selectedLabels = isMulti
+        ? flatItems
+                .filter(i => selectedValues.includes(i.value))
+                .map(i => i.label)
+        : []
+    const triggerText = isMulti
+        ? selectedLabels.length === 0
+            ? placeholder
+            : selectedLabels.join(', ')
+        : selected?.label ?? placeholder
+
+    const toggle = (value: string) => {
+        if (!isMulti) return
+        const next = selectedValues.includes(value)
+            ? selectedValues.filter(x => x !== value)
+            : [...selectedValues, value]
+        ;(onChange as ((values: string[]) => void) | undefined)?.(next)
+    }
+
+    return (
+        <s.Wrapper
+            className={className}
+            size={textFieldSize}
+            $themefication={textFieldState}>
+            {label && (
+                <s.Label>
+                    {label} {requiredSymbol && <RequiredAsterisk />}
+                </s.Label>
+            )}
+            <Popover.Root open={open} onOpenChange={setOpen}>
+                <Popover.Trigger asChild>
+                    <s.TriggerButton
+                        type="button"
+                        role="combobox"
+                        aria-expanded={open}
+                        aria-invalid={!!error}
+                        disabled={disabled}
+                        $width={width}>
+                        <s.TriggerLabel>
+                            <Text
+                                tag="span"
+                                size="body02"
+                                color={
+                                    isMulti
+                                        ? selectedLabels.length
+                                            ? 'textDark'
+                                            : 'textMedium'
+                                        : selected
+                                        ? 'textDark'
+                                        : 'textMedium'
+                                }>
+                                {triggerText}
+                            </Text>
+                        </s.TriggerLabel>
+                        <s.TriggerIcon aria-hidden>
+                            <CaretDownIcon weight="fill" size={16} />
+                        </s.TriggerIcon>
+                    </s.TriggerButton>
+                </Popover.Trigger>
+
+                <Popover.Portal>
+                    <s.PopoverContent sideOffset={-1} $width={width} align="start">
+                        <s.CommandRoot>
+                            <s.SearchRow>
+                                <s.SearchIcon>
+                                    <MagnifyingGlassIcon size={16} />
+                                </s.SearchIcon>
+                                <s.CommandInput placeholder={searchPlaceholder} />
+                            </s.SearchRow>
+
+                            <s.List>
+                                <s.Empty>
+                                    <Text
+                                        tag="span"
+                                        size="body02"
+                                        color="textMedium"
+                                    >
+                                        {emptyText}
+                                    </Text>
+                                </s.Empty>
+
+                                {g.map((group, idx) => (
+                                    <s.GroupWrap
+                                        key={`${group.heading}-${idx}`}
+                                        heading={group.heading}>
+                                        {group.heading ? (
+                                            <s.GroupHeading>
+                                                <Text
+                                                    tag="span"
+                                                    size="span01"
+                                                    color="textMedium">
+                                                    {group.heading}
+                                                </Text>
+                                            </s.GroupHeading>
+                                        ) : null}
+
+                                        {group.items.map(item => {
+                                            const isSelected =
+                                                item.value === selectedValue
+                                            const isChecked =
+                                                isMulti &&
+                                                selectedValues.includes(
+                                                    item.value
+                                                )
+                                            return (
+                                                <s.ItemRow
+                                                    key={item.value}
+                                                    value={item.label}
+                                                    disabled={item.disabled}
+                                                    onSelect={() => {
+                                                        if (item.disabled)
+                                                            return
+                                                        if (isMulti) {
+                                                            toggle(item.value)
+                                                            return
+                                                        }
+                                                        ;(
+                                                            onChange as
+                                                                | ((
+                                                                        value: string
+                                                                    ) => void)
+                                                                | undefined
+                                                        )?.(item.value)
+                                                        setOpen(false)
+                                                    }}
+                                                    data-selected={
+                                                        isMulti
+                                                            ? isChecked
+                                                                ? 'true'
+                                                                : 'false'
+                                                            : isSelected
+                                                            ? 'true'
+                                                            : 'false'
+                                                    }
+                                                    data-is-selected={
+                                                        isMulti
+                                                            ? isChecked
+                                                                ? 'true'
+                                                                : 'false'
+                                                            : isSelected
+                                                            ? 'true'
+                                                            : 'false'
+                                                    }
+                                                    data-variant={
+                                                        isMulti ? 'multi' : 'single'
+                                                    }>
+                                                    {isMulti ? (
+                                                        <s.Checkbox
+                                                            $checked={
+                                                                isChecked
+                                                            }>
+                                                            {isChecked ? (
+                                                                <CheckIcon
+                                                                    size={12}
+                                                                    weight="bold"
+                                                                />
+                                                            ) : null}
+                                                        </s.Checkbox>
+                                                    ) : null}
+                                                    {leftIcon ? leftIcon : null}
+                                                    <s.ItemLabel
+                                                        tag="span"
+                                                        size="body02"
+                                                        color={
+                                                            !isMulti && isSelected
+                                                                ? 'white'
+                                                                : 'textDark'
+                                                        }>
+                                                        {item.label}
+                                                    </s.ItemLabel>
+                                                    {!isMulti && isSelected && (
+                                                        <s.RightIcon>
+                                                            <CheckIcon
+                                                                size={16}
+                                                                weight="bold"
+                                                            />
+                                                        </s.RightIcon>
+                                                    )}
+                                                </s.ItemRow>
+                                            )
+                                        })}
+                                    </s.GroupWrap>
+                                ))}
+                            </s.List>
+
+                            {onCreate && (
+                                <s.Footer>
+                                    <s.AddNewRow
+                                        type="button"
+                                        onClick={() => {
+                                            onCreate()
+                                        }}>
+                                        <PlusIcon size={16} />
+                                        <Text tag="span" size="body02">
+                                            {createLabel}
+                                        </Text>
+                                    </s.AddNewRow>
+                                </s.Footer>
+                            )}
+                        </s.CommandRoot>
+                    </s.PopoverContent>
+                </Popover.Portal>
+            </Popover.Root>
+            {(helperText || error) && (
+                <s.HelperText>{error?.message || helperText}</s.HelperText>
+            )}
+        </s.Wrapper>
+    )
+}
+
+export default Combobox

package/components/Combobox/Combobox.types.ts

@@ -0,0 +1,45 @@
+import { FieldValues } from 'react-hook-form'
+import React from 'react'
+import { TextFieldSize } from '../TextField/TextField.sizes'
+
+export type Item = { value: string; label: string; disabled?: boolean }
+export type Group = { heading: string; items: Item[] }
+
+export type BaseProps<TFieldValues extends FieldValues = FieldValues> = {
+    className?: string
+    label?: string
+    helperText?: string
+    error?: TFieldValues
+    requiredSymbol?: boolean
+    leftIcon?: React.ReactNode
+    placeholder?: string
+    searchPlaceholder?: string
+    emptyText?: string
+    disabled?: boolean
+    width?: number | string
+    size?: TextFieldSize
+    groups?: Group[]
+    items?: Item[]
+    onCreate?: () => void
+    createLabel?: string
+}
+
+export type ComboboxVariant = 'single' | 'multi'
+
+export type ComboboxSingleProps<TFieldValues extends FieldValues = FieldValues> =
+    BaseProps<TFieldValues> & {
+        variant?: 'single'
+        value?: string
+        onChange?: (value: string) => void
+    }
+
+export type ComboboxMultiProps<TFieldValues extends FieldValues = FieldValues> =
+    BaseProps<TFieldValues> & {
+        variant: 'multi'
+        values?: string[]
+        onChange?: (values: string[]) => void
+    }
+
+export type ComboboxProps<TFieldValues extends FieldValues = FieldValues> =
+    | ComboboxSingleProps<TFieldValues>
+    | ComboboxMultiProps<TFieldValues>

package/components/Combobox/index.ts

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

package/components/Combobox/utils/index.ts

@@ -0,0 +1,9 @@
+import { ComboboxMultiProps, ComboboxProps, Group, Item } from "../Combobox.types"
+
+export const normalizeData = (items?: Item[], groups?: Group[]) => {
+    if (groups?.length) return { groups }
+    return { groups: items ? [{ heading: '', items }] : [] }
+}
+
+export const isMultiProps = (props: ComboboxProps): props is ComboboxMultiProps =>
+    props.variant === 'multi'

package/components/index.ts

@@ -15,3 +15,4 @@ export { default as LinkButton } from './LinkButton'
 export { default as RadioButton } from './RadioButton'
 export { ToastProvider, Toaster } from './Toaster'
 export { default as Dialog } from './Dialog'
+export { Combobox } from './Combobox'

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@liguelead/design-system",
-    "version": "0.0.26",
+    "version": "0.0.27",
     "type": "module",
     "main": "components/index.ts",
     "publishConfig": {