@liguelead/design-system 0.0.37 → 0.0.39

package/components/Button/Button.types.ts

@@ -3,7 +3,7 @@ import { colorType } from '../../types'
 export type ButtonSizeTypes = 'sm' | 'md' | 'lg'
 export type ButtonVariantTypes = 'solid' | 'outline' | 'ghost' | 'neutralOutline' | 'neutralGhost'
 
-export interface ButtonProps {
+export interface ButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'color' | 'onClick'> {
     variant?: ButtonVariantTypes
     children: React.ReactNode
     className?: string

package/components/Combobox/Combobox.styles.ts

@@ -80,7 +80,7 @@ export const PopoverContent = styled(Popover.Content)<{
     $width: number | string
 }>`
     width: ${({ $width }) =>
-        typeof $width === 'number' ? `${$width}px` : $width};
+        typeof $width === 'number' ? `${$width}px` : $width === '100%' ? 'var(--radix-popover-trigger-width)' : $width};
     background: ${({ theme }) => parseColor(theme.colors.white)};
     border: 1px solid ${({ theme }) => parseColor(theme.colors.neutral400)};
     border-radius: 4px;

package/components/Combobox/Combobox.tsx

@@ -33,7 +33,7 @@ const Combobox = (props: ComboboxProps) => {
         searchPlaceholder = 'Pesquisar',
         emptyText = 'Sem resultados.',
         disabled = false,
-        width = 280,
+        width = '100%',
         size = 'md',
         onCreate,
         createLabel = 'Adicionar novo'

package/components/RadioCardGroup/RadioCardGroup.stories.tsx

@@ -0,0 +1,203 @@
+import { useState } from 'react'
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { ArticleNyTimesIcon, ChatCircleIcon, EnvelopeSimpleIcon } from '@phosphor-icons/react'
+import RadioCardGroup from './RadioCardGroup'
+
+const LONG_DESC = 'Ideal para comunicações diretas com alta taxa de entrega. Suporta texto simples, links e variáveis personalizadas. Amplamente compatível com todos os dispositivos móveis, sem necessidade de internet ou aplicativo instalado.'
+
+const meta: Meta<typeof RadioCardGroup> = {
+    title: 'Form/RadioCardGroup',
+    component: RadioCardGroup,
+    parameters: { layout: 'centered' },
+    tags: ['autodocs'],
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+    render: () => {
+        const [selected, setSelected] = useState('sms')
+        return (
+            <div style={{ width: 320 }}>
+                <RadioCardGroup
+                    name="channel"
+                    value={selected}
+                    onChange={setSelected}
+                    options={[
+                        {
+                            value: 'sms',
+                            label: 'SMS',
+                            icon: <ChatCircleIcon size={20} />,
+                            description: LONG_DESC,
+                            descriptionMaxLines: 2,
+                            badgesLabel: 'O que contém:',
+                            badges: ['Texto até 1.600 caracteres'],
+                        },
+                        {
+                            value: 'email',
+                            label: 'E-mail',
+                            icon: <EnvelopeSimpleIcon size={20} />,
+                            description: 'Envio de mensagens por e-mail.',
+                            badgesLabel: 'O que contém:',
+                            badges: ['Texto', 'Imagens', 'Links'],
+                        },
+                        {
+                            value: 'rcs',
+                            label: 'RCS',
+                            icon: <ArticleNyTimesIcon size={20} />,
+                            description: 'Mensagens ricas com mídia.',
+                            badgesLabel: 'O que contém:',
+                            badges: ['Texto', 'Imagens', 'Botões', 'Carrossel'],
+                        },
+                    ]}
+                />
+            </div>
+        )
+    },
+}
+
+export const WithSeeMore: Story = {
+    name: 'Ver mais (descrição longa)',
+    render: () => {
+        const [selected, setSelected] = useState('a')
+        return (
+            <div style={{ width: 320 }}>
+                <RadioCardGroup
+                    name="see-more"
+                    value={selected}
+                    onChange={setSelected}
+                    options={[
+                        {
+                            value: 'a',
+                            label: 'Canal A',
+                            icon: <ChatCircleIcon size={20} />,
+                            description: LONG_DESC,
+                            descriptionMaxLines: 2,
+                            badges: ['Feature 1', 'Feature 2'],
+                        },
+                        {
+                            value: 'b',
+                            label: 'Canal B',
+                            icon: <EnvelopeSimpleIcon size={20} />,
+                            description: 'Descrição curta, sem botão de ver mais.',
+                            badges: ['Feature 3'],
+                        },
+                    ]}
+                />
+            </div>
+        )
+    },
+}
+
+export const Scrollable: Story = {
+    name: 'Com scroll thin',
+    render: () => {
+        const [selected, setSelected] = useState('a')
+        return (
+            <div style={{ width: 320 }}>
+                <RadioCardGroup
+                    name="scroll"
+                    value={selected}
+                    onChange={setSelected}
+                    scrollable
+                    maxHeight="300px"
+                    options={Array.from({ length: 6 }, (_, i) => ({
+                        value: String(i),
+                        label: `Opção ${i + 1}`,
+                        icon: <ChatCircleIcon size={20} />,
+                        description: `Descrição da opção ${i + 1}.`,
+                        badges: [`Badge ${i + 1}`],
+                    }))}
+                />
+            </div>
+        )
+    },
+}
+
+export const TwoColumns: Story = {
+    name: '2 colunas',
+    render: () => {
+        const [selected, setSelected] = useState('a')
+        return (
+            <div style={{ width: 600 }}>
+                <RadioCardGroup
+                    name="grid"
+                    value={selected}
+                    onChange={setSelected}
+                    columns={2}
+                    options={[
+                        { value: 'a', label: 'SMS', icon: <ChatCircleIcon size={20} />, description: 'Texto simples.', badges: ['160 chars'] },
+                        { value: 'b', label: 'E-mail', icon: <EnvelopeSimpleIcon size={20} />, description: 'HTML completo.', badges: ['Ilimitado'] },
+                        { value: 'c', label: 'RCS', icon: <ArticleNyTimesIcon size={20} />, description: 'Mídia rica.', badges: ['Botões', 'Carrossel'] },
+                        { value: 'd', label: 'Push', icon: <ChatCircleIcon size={20} />, description: 'Notificação push.', badges: ['Deep link'] },
+                    ]}
+                />
+            </div>
+        )
+    },
+}
+
+export const WithoutIcon: Story = {
+    render: () => {
+        const [selected, setSelected] = useState('a')
+        return (
+            <div style={{ width: 320 }}>
+                <RadioCardGroup
+                    name="plan"
+                    value={selected}
+                    onChange={setSelected}
+                    options={[
+                        { value: 'a', label: 'Plano Básico', description: 'Funcionalidades essenciais.', badgesLabel: 'Inclui:', badges: ['5 usuários', '10GB'] },
+                        { value: 'b', label: 'Plano Pro', description: 'Para times maiores.', badgesLabel: 'Inclui:', badges: ['Ilimitado', '100GB', 'Suporte'] },
+                    ]}
+                />
+            </div>
+        )
+    },
+}
+
+export const Disabled: Story = {
+    render: () => (
+        <div style={{ width: 320 }}>
+            <RadioCardGroup
+                name="disabled"
+                value="a"
+                disabled
+                options={[
+                    {
+                        value: 'a',
+                        label: 'Opção desabilitada',
+                        icon: <ChatCircleIcon size={20} />,
+                        description: 'Este grupo está desabilitado.',
+                        badges: ['Indisponível'],
+                    },
+                ]}
+            />
+        </div>
+    ),
+}
+
+export const CardWidth: Story = {
+    name: 'Largura dos cards (min/max)',
+    render: () => {
+        const [selected, setSelected] = useState('a')
+        return (
+            <div style={{ width: 700 }}>
+                <RadioCardGroup
+                    name="width"
+                    value={selected}
+                    onChange={setSelected}
+                    columns={3}
+                    minCardWidth="160px"
+                    maxCardWidth="240px"
+                    options={[
+                        { value: 'a', label: 'SMS', icon: <ChatCircleIcon size={20} />, description: 'Texto simples.', badges: ['160 chars'] },
+                        { value: 'b', label: 'E-mail', icon: <EnvelopeSimpleIcon size={20} />, description: 'HTML completo.', badges: ['Ilimitado'] },
+                        { value: 'c', label: 'RCS', icon: <ArticleNyTimesIcon size={20} />, description: 'Mídia rica.', badges: ['Botões'] },
+                    ]}
+                />
+            </div>
+        )
+    },
+}

package/components/RadioCardGroup/RadioCardGroup.styles.ts

@@ -0,0 +1,199 @@
+import styled from 'styled-components'
+import { fontSize, fontWeight, lineHeight, radius, spacing } from '@liguelead/foundation'
+import { parseColor } from '../../utils'
+
+export const CardWrapper = styled.label<{
+    $checked?: boolean
+    $disabled?: boolean
+    $error?: boolean
+    $columns?: number
+    $minCardWidth?: string
+    $maxCardWidth?: string
+}>`
+    display: flex;
+    flex-direction: column;
+    gap: ${spacing.spacing16}px;
+    padding: ${spacing.spacing24}px;
+    border-radius: ${radius.radius8}px;
+    border: 1px solid ${({ theme, $checked, $error }) =>
+        $error
+            ? parseColor(theme.colors.danger200)
+            : $checked
+            ? parseColor(theme.colors.primary)
+            : parseColor(theme.colors.neutral400)};
+    background: ${({ theme, $checked, $error }) =>
+        $checked && !$error
+            ? parseColor(theme.colors.primaryLight)
+            : parseColor(theme.colors.white)};
+    cursor: ${({ $disabled }) => ($disabled ? 'not-allowed' : 'pointer')};
+    opacity: ${({ $disabled }) => ($disabled ? 0.5 : 1)};
+    transition: border-color 0.2s ease, background 0.2s ease;
+    flex: ${({ $columns }) => ($columns ? `1 1 calc(${100 / $columns}% - ${spacing.spacing12}px)` : '1 1 100%')};
+    min-width: ${({ $minCardWidth }) => $minCardWidth ?? '0'};
+    max-width: ${({ $maxCardWidth }) => $maxCardWidth ?? 'none'};
+
+    &:hover:not([data-disabled='true']) {
+        border-color: ${({ theme, $error }) =>
+            $error
+                ? parseColor(theme.colors.danger200)
+                : parseColor(theme.colors.primary)};
+    }
+`
+
+export const CardRadioRow = styled.div`
+    display: flex;
+    align-items: flex-start;
+    gap: ${spacing.spacing12}px;
+`
+
+export const RadioCircle = styled.input`
+    appearance: none;
+    width: ${spacing.spacing16}px;
+    height: ${spacing.spacing16}px;
+    min-width: ${spacing.spacing16}px;
+    border: 1px solid ${({ theme }) => parseColor(theme.colors.neutral400)};
+    border-radius: 50%;
+    background: ${({ theme }) => parseColor(theme.colors.white)};
+    position: relative;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    margin-top: 2px;
+
+    &:checked {
+        border-color: ${({ theme }) => parseColor(theme.colors.neutral300)};
+
+        &::after {
+            content: '';
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            width: 8px;
+            height: 8px;
+            border-radius: 50%;
+            background: ${({ theme }) => parseColor(theme.colors.primary)};
+        }
+    }
+
+    &:disabled {
+        cursor: not-allowed;
+        border-color: ${({ theme }) => parseColor(theme.colors.neutral400)};
+        background: ${({ theme }) => parseColor(theme.colors.neutral100)};
+    }
+`
+
+export const CardTitleRow = styled.div`
+    display: flex;
+    align-items: center;
+    gap: 6px;
+`
+
+export const CardIconWrapper = styled.div`
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 20px;
+    height: 20px;
+    flex-shrink: 0;
+
+    svg {
+        width: 20px;
+        height: 20px;
+        color: ${({ theme }) => parseColor(theme.colors.neutral1000)};
+    }
+`
+
+export const Divider = styled.div`
+    width: 100%;
+    height: 1px;
+    background: ${({ theme }) => parseColor(theme.colors.neutral300)};
+`
+
+export const CardContent = styled.div`
+    display: flex;
+    flex-direction: column;
+    gap: ${spacing.spacing8}px;
+`
+
+export const DescriptionWrapper = styled.div<{ $expanded: boolean; $maxLines: number }>`
+    position: relative;
+    overflow: hidden;
+    max-height: ${({ $expanded, $maxLines }) =>
+        $expanded ? 'none' : `calc(${lineHeight.lineHeight16}px * ${$maxLines})`};
+`
+
+export const DescriptionText = styled.p`
+    font-size: ${fontSize.fontSize12}px;
+    font-weight: ${fontWeight.fontWeight400};
+    line-height: ${lineHeight.lineHeight16}px;
+    color: ${({ theme }) => parseColor(theme.colors.textDark)};
+    margin: 0;
+`
+
+export const SeeMoreButton = styled.button`
+    background: none;
+    border: none;
+    padding: 0;
+    cursor: pointer;
+    font-size: ${fontSize.fontSize12}px;
+    font-weight: ${fontWeight.fontWeight500};
+    line-height: ${lineHeight.lineHeight16}px;
+    color: ${({ theme }) => parseColor(theme.colors.primary)};
+    text-align: left;
+    margin-top: 2px;
+
+    &:hover {
+        text-decoration: underline;
+    }
+`
+
+export const BadgesSection = styled.div`
+    display: flex;
+    flex-direction: column;
+    gap: ${spacing.spacing8}px;
+`
+
+export const BadgesLabel = styled.p`
+    font-size: ${fontSize.fontSize12}px;
+    font-weight: ${fontWeight.fontWeight500};
+    line-height: ${lineHeight.lineHeight16}px;
+    color: ${({ theme }) => parseColor(theme.colors.textMedium)};
+    margin: 0;
+    white-space: nowrap;
+`
+
+export const BadgesList = styled.div`
+    display: flex;
+    flex-wrap: wrap;
+    gap: ${spacing.spacing4}px;
+    align-items: center;
+`
+
+export const GroupWrapper = styled.div<{ $columns?: number; $minCardWidth?: string; $scrollable?: boolean; $maxHeight?: string }>`
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: ${({ $columns }) => ($columns ? 'row' : 'column')};
+    gap: ${spacing.spacing12}px;
+    width: 100%;
+
+    ${({ $scrollable, $maxHeight }) => $scrollable && `
+        overflow-y: auto;
+        max-height: ${$maxHeight ?? '400px'};
+        padding-right: ${spacing.spacing4}px;
+
+        scrollbar-width: thin;
+        scrollbar-color: #7c7c83 #cfcfd1;
+
+        &::-webkit-scrollbar {
+            width: 8px;
+        }
+        &::-webkit-scrollbar-track {
+            background: #cfcfd1;
+            border-radius: 100px;
+        }
+        &::-webkit-scrollbar-thumb {
+            background: #7c7c83;
+            border-radius: 100px;
+        }
+    `}
+`

package/components/RadioCardGroup/RadioCardGroup.tsx

@@ -0,0 +1,159 @@
+import { useState, useRef, useEffect } from 'react'
+import { Badge } from '../Badge'
+import { RadioCardGroupProps } from './RadioCardGroup.types'
+import {
+    GroupWrapper,
+    CardWrapper,
+    CardRadioRow,
+    RadioCircle,
+    CardTitleRow,
+    CardIconWrapper,
+    Divider,
+    CardContent,
+    DescriptionWrapper,
+    DescriptionText,
+    SeeMoreButton,
+    BadgesSection,
+    BadgesLabel,
+    BadgesList,
+} from './RadioCardGroup.styles'
+import Text from '../Text'
+
+const DEFAULT_MAX_LINES = 3
+
+interface DescriptionWithToggleProps {
+    text: string
+    maxLines?: number
+}
+
+const DescriptionWithToggle = ({ text, maxLines = DEFAULT_MAX_LINES }: DescriptionWithToggleProps) => {
+    const [expanded, setExpanded] = useState(false)
+    const [isClamped, setIsClamped] = useState(false)
+    const ref = useRef<HTMLParagraphElement>(null)
+
+    useEffect(() => {
+        const el = ref.current
+        if (!el) return
+        setIsClamped(el.scrollHeight > el.clientHeight + 1)
+    }, [text, maxLines])
+
+    return (
+        <>
+            <DescriptionWrapper $expanded={expanded} $maxLines={maxLines}>
+                <DescriptionText ref={ref}>{text}</DescriptionText>
+            </DescriptionWrapper>
+            {(isClamped || expanded) && (
+                <SeeMoreButton
+                    type="button"
+                    onClick={(e) => {
+                        e.preventDefault()
+                        e.stopPropagation()
+                        setExpanded(v => !v)
+                    }}
+                >
+                    {expanded ? 'Ver menos' : 'Ver mais'}
+                </SeeMoreButton>
+            )}
+        </>
+    )
+}
+
+const RadioCardGroup = <TFieldValues extends object = object>({
+    name,
+    options,
+    value,
+    onChange,
+    disabled = false,
+    className,
+    error,
+    columns,
+    minCardWidth,
+    maxCardWidth,
+    scrollable,
+    maxHeight,
+    ...rest
+}: RadioCardGroupProps<TFieldValues>) => {
+    const hasError = !!error
+
+    return (
+        <GroupWrapper
+            className={className}
+            $columns={columns}
+            $minCardWidth={minCardWidth}
+            $scrollable={scrollable}
+            $maxHeight={maxHeight}
+            {...rest}
+        >
+            {options.map((option) => {
+                const isChecked = value === option.value
+                const isDisabled = disabled || !!option.disabled
+
+                return (
+                    <CardWrapper
+                        key={option.value}
+                        $checked={isChecked}
+                        $disabled={isDisabled}
+                        $error={hasError}
+                        $columns={columns}
+                        $minCardWidth={minCardWidth}
+                        $maxCardWidth={maxCardWidth}
+                        data-disabled={isDisabled}
+                    >
+                        <CardRadioRow>
+                            <RadioCircle
+                                type="radio"
+                                name={name}
+                                value={option.value}
+                                checked={isChecked}
+                                disabled={isDisabled}
+                                onChange={(e) => {
+                                    option.register?.onChange(e)
+                                    onChange?.(option.value)
+                                }}
+                                {...option.register}
+                            />
+                            <CardTitleRow>
+                                {option.icon && (
+                                    <CardIconWrapper>{option.icon}</CardIconWrapper>
+                                )}
+                                <Text color="textDark" weight="fontWeight500" size="body02" tag="p">
+                                    {option.label}
+                                </Text>
+                            </CardTitleRow>
+                        </CardRadioRow>
+
+                        {(option.description || (option.badges && option.badges.length > 0)) && (
+                            <>
+                                <Divider />
+                                <CardContent>
+                                    {option.description && (
+                                        <DescriptionWithToggle
+                                            text={option.description}
+                                            maxLines={option.descriptionMaxLines}
+                                        />
+                                    )}
+                                    {option.badges && option.badges.length > 0 && (
+                                        <BadgesSection>
+                                            {option.badgesLabel && (
+                                                <BadgesLabel>{option.badgesLabel}</BadgesLabel>
+                                            )}
+                                            <BadgesList>
+                                                {option.badges.map((badge, i) => (
+                                                    <Badge key={i} color={isChecked ? 'primary' : 'primaryLight'}>
+                                                        {badge}
+                                                    </Badge>
+                                                ))}
+                                            </BadgesList>
+                                        </BadgesSection>
+                                    )}
+                                </CardContent>
+                            </>
+                        )}
+                    </CardWrapper>
+                )
+            })}
+        </GroupWrapper>
+    )
+}
+
+export default RadioCardGroup

package/components/RadioCardGroup/RadioCardGroup.types.ts

@@ -0,0 +1,29 @@
+import React from 'react'
+import { FieldValues, UseFormRegisterReturn } from 'react-hook-form'
+
+export interface RadioCardOption {
+    value: string
+    label: string
+    icon?: React.ReactNode
+    description?: string
+    descriptionMaxLines?: number
+    badges?: string[]
+    badgesLabel?: string
+    disabled?: boolean
+    register?: UseFormRegisterReturn<string>
+}
+
+export interface RadioCardGroupProps<TFieldValues extends FieldValues = FieldValues>
+    extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
+    name: string
+    options: RadioCardOption[]
+    value?: string
+    onChange?: (value: string) => void
+    disabled?: boolean
+    error?: TFieldValues
+    columns?: number
+    minCardWidth?: string
+    maxCardWidth?: string
+    scrollable?: boolean
+    maxHeight?: string
+}

package/components/RadioCardGroup/index.ts

@@ -0,0 +1,2 @@
+export { default } from './RadioCardGroup'
+export type { RadioCardGroupProps, RadioCardOption } from './RadioCardGroup.types'

package/components/Stepper/Stepper.appearance.ts

@@ -0,0 +1,57 @@
+import { css } from 'styled-components'
+import { useTheme } from 'styled-components'
+import { parseColor } from '../../utils'
+import { StepState } from './Stepper.types'
+
+export const StepIndicatorAppearance = ($state: StepState) => {
+    const theme = useTheme()
+    const colors = theme.colors
+
+    if ($state === 'completed') {
+        return css`
+            width: 28px;
+            height: 28px;
+            background-color: ${parseColor(colors.primary)};
+            border: 2px solid ${parseColor(colors.primary)};
+            color: ${parseColor(colors.white)};
+        `
+    }
+
+    if ($state === 'active') {
+        return css`
+            width: 28px;
+            height: 28px;
+            background-color: transparent;
+            border: 2.5px solid ${parseColor(colors.primary)};
+            color: ${parseColor(colors.primary)};
+            box-shadow: 0 0 0 4px ${parseColor(colors.primary)}22;
+        `
+    }
+
+    if ($state === 'error') {
+        return css`
+            width: 28px;
+            height: 28px;
+            background-color: transparent;
+            border: 2px solid ${parseColor(colors.danger200)};
+            color: ${parseColor(colors.danger200)};
+        `
+    }
+
+    return css`
+        width: 28px;
+        height: 28px;
+        background-color: transparent;
+        border: none;
+        color: transparent;
+
+        &::before {
+            content: '';
+            display: block;
+            width: 10px;
+            height: 10px;
+            border-radius: 50%;
+            background-color: ${parseColor(colors.neutral400)};
+        }
+    `
+}