@liguelead/design-system 0.0.36 → 0.0.38

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="primary">
+                                                        {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/SplitButton/SplitButton.tsx

@@ -25,7 +25,7 @@ const SplitButton: React.FC<SplitButtonProps> = ({
     className
 }) => {
     const theme = useTheme()
-    const buttonVariant = ButtonVariant(color, variant)
+    const buttonVariant = ButtonVariant(color, variant, theme)
     const buttonSize = ButtonSizes(size)
     const triggerSize = SplitButtonTriggerSizes(size)
 

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)};
+        }
+    `
+}

package/components/Stepper/Stepper.stories.tsx

@@ -0,0 +1,300 @@
+import { useState } from 'react'
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { Stepper } from './Stepper'
+import Button from '../Button'
+
+const steps = [
+    { label: 'Seus dados', description: 'Nome e e-mail' },
+    { label: 'Empresa', description: 'Dados da empresa' },
+    { label: 'Convidar time', description: 'Colabore com sua equipe' },
+]
+
+const meta: Meta<typeof Stepper> = {
+    title: 'Navigation/Stepper',
+    component: Stepper,
+    parameters: {
+        layout: 'padded',
+        docs: {
+            description: {
+                component: `
+Componente Stepper para indicar progresso em processos multi-etapas.
+
+**Orientações:**
+- \`horizontal\` — padrão, ideal para fluxos com poucas etapas
+- \`vertical\` — ideal para etapas com descrições longas ou em painéis laterais
+
+**Controle de estado:**
+- O prop \`currentStep\` (0-indexed) define qual etapa está ativa
+- Etapas anteriores ao \`currentStep\` são marcadas como concluídas automaticamente
+        `,
+            },
+        },
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        orientation: {
+            control: 'select',
+            options: ['horizontal', 'vertical'],
+            description: 'Orientação do stepper',
+            table: { defaultValue: { summary: 'horizontal' } },
+        },
+        currentStep: {
+            control: { type: 'number', min: 0, max: 2 },
+            description: 'Índice da etapa atual (0-indexed)',
+        },
+        steps: {
+            control: false,
+            description: 'Array de etapas com label e description opcional',
+        },
+    },
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+    args: {
+        steps,
+        currentStep: 1,
+        orientation: 'horizontal',
+    },
+}
+
+export const Horizontal: Story = {
+    name: 'Horizontal',
+    parameters: {
+        docs: {
+            description: { story: 'Orientação padrão, ideal para fluxos lineares.' },
+        },
+    },
+    render: () => {
+        const [current, setCurrent] = useState(0)
+        return (
+            <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
+                <Stepper steps={steps} currentStep={current} orientation="horizontal" />
+                <div style={{ display: 'flex', gap: 8 }}>
+                    <Button
+                        variant="outline"
+                        size="sm"
+                        onClick={() => setCurrent(c => Math.max(0, c - 1))}
+                        disabled={current === 0}
+                    >
+                        Anterior
+                    </Button>
+                    <Button
+                        size="sm"
+                        onClick={() => setCurrent(c => Math.min(steps.length - 1, c + 1))}
+                        disabled={current === steps.length - 1}
+                    >
+                        Próximo
+                    </Button>
+                </div>
+            </div>
+        )
+    },
+}
+
+export const Vertical: Story = {
+    name: 'Vertical',
+    parameters: {
+        docs: {
+            description: { story: 'Orientação vertical, ideal para painéis laterais ou etapas com descrições longas.' },
+        },
+    },
+    render: () => {
+        const [current, setCurrent] = useState(0)
+        return (
+            <div style={{ display: 'flex', flexDirection: 'column', gap: 24, maxWidth: 320 }}>
+                <Stepper steps={steps} currentStep={current} orientation="vertical" />
+                <div style={{ display: 'flex', gap: 8 }}>
+                    <Button
+                        variant="outline"
+                        size="sm"
+                        onClick={() => setCurrent(c => Math.max(0, c - 1))}
+                        disabled={current === 0}
+                    >
+                        Anterior
+                    </Button>
+                    <Button
+                        size="sm"
+                        onClick={() => setCurrent(c => Math.min(steps.length - 1, c + 1))}
+                        disabled={current === steps.length - 1}
+                    >
+                        Próximo
+                    </Button>
+                </div>
+            </div>
+        )
+    },
+}
+
+export const SemDescricao: Story = {
+    name: 'Sem descrição',
+    parameters: {
+        docs: {
+            description: { story: 'Stepper apenas com labels, sem descrições.' },
+        },
+    },
+    args: {
+        steps: [
+            { label: 'Etapa 1' },
+            { label: 'Etapa 2' },
+            { label: 'Etapa 3' },
+            { label: 'Etapa 4' },
+        ],
+        currentStep: 2,
+        orientation: 'horizontal',
+    },
+}
+
+export const PrimeiraEtapa: Story = {
+    name: 'Primeira etapa',
+    args: {
+        steps,
+        currentStep: 0,
+        orientation: 'horizontal',
+    },
+}
+
+export const UltimaEtapa: Story = {
+    name: 'Última etapa',
+    args: {
+        steps,
+        currentStep: steps.length - 1,
+        orientation: 'horizontal',
+    },
+}
+
+// ─── Form multi-step example ────────────────────────────────────────────────
+
+import { useForm } from 'react-hook-form'
+import { zodResolver } from '@hookform/resolvers/zod'
+import { z } from 'zod'
+import TextField from '../TextField'
+
+const formSteps = [
+    { label: 'Seus dados', description: 'Nome e e-mail' },
+    { label: 'Empresa', description: 'Dados da empresa' },
+    { label: 'Senha', description: 'Crie sua senha' },
+]
+
+const formSchema = z
+    .object({
+        name: z.string().min(3, 'Nome deve ter ao menos 3 caracteres'),
+        email: z.string().email('E-mail inválido'),
+        company: z.string().min(2, 'Nome da empresa obrigatório'),
+        role: z.string().min(2, 'Cargo obrigatório'),
+        password: z.string().min(6, 'Mínimo 6 caracteres'),
+        confirm: z.string(),
+    })
+    .refine(d => d.password === d.confirm, {
+        message: 'As senhas não coincidem',
+        path: ['confirm'],
+    })
+
+type FormData = z.infer<typeof formSchema>
+
+const stepFields: (keyof FormData)[][] = [
+    ['name', 'email'],
+    ['company', 'role'],
+    ['password', 'confirm'],
+]
+
+type StepFormProps = {
+    form: ReturnType<typeof useForm<FormData>>
+    onNext: () => void
+    onBack?: () => void
+}
+
+const StepForm0: React.FC<StepFormProps> = ({ form, onNext }) => {
+    const { register, formState: { errors }, trigger } = form
+    const handleNext = async () => {
+        if (await trigger(stepFields[0])) onNext()
+    }
+    return (
+        <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
+            <TextField label="Nome completo" register={register('name')} error={errors.name} requiredSymbol />
+            <TextField label="E-mail" type="email" register={register('email')} error={errors.email} requiredSymbol />
+            <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
+                <Button size="sm" onClick={handleNext}>Próximo</Button>
+            </div>
+        </div>
+    )
+}
+
+const StepForm1: React.FC<StepFormProps> = ({ form, onNext, onBack }) => {
+    const { register, formState: { errors }, trigger } = form
+    const handleNext = async () => {
+        if (await trigger(stepFields[1])) onNext()
+    }
+    return (
+        <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
+            <TextField label="Empresa" register={register('company')} error={errors.company} requiredSymbol />
+            <TextField label="Cargo" register={register('role')} error={errors.role} requiredSymbol />
+            <div style={{ display: 'flex', gap: 8, justifyContent: 'flex-end' }}>
+                <Button size="sm" variant="outline" onClick={onBack}>Anterior</Button>
+                <Button size="sm" onClick={handleNext}>Próximo</Button>
+            </div>
+        </div>
+    )
+}
+
+const StepForm2: React.FC<StepFormProps> = ({ form, onNext, onBack }) => {
+    const { register, formState: { errors }, trigger } = form
+    const handleNext = async () => {
+        if (await trigger(stepFields[2])) onNext()
+    }
+    return (
+        <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
+            <TextField label="Senha" type="password" register={register('password')} error={errors.password} requiredSymbol />
+            <TextField label="Confirmar senha" type="password" register={register('confirm')} error={errors.confirm} requiredSymbol />
+            <div style={{ display: 'flex', gap: 8, justifyContent: 'flex-end' }}>
+                <Button size="sm" variant="outline" onClick={onBack}>Anterior</Button>
+                <Button size="sm" onClick={handleNext}>Finalizar</Button>
+            </div>
+        </div>
+    )
+}
+
+export const FormMultiStep: Story = {
+    name: 'Formulário multi-step',
+    parameters: {
+        docs: {
+            description: {
+                story: 'Dados preservados ao voltar entre etapas. Um único `useForm` no pai com `trigger` parcial por step.',
+            },
+        },
+    },
+    render: () => {
+        const [current, setCurrent] = useState(0)
+        const [done, setDone] = useState(false)
+
+        const form = useForm<FormData>({
+            resolver: zodResolver(formSchema),
+            mode: 'onTouched',
+        })
+
+        const next = () => setCurrent(c => c + 1)
+        const back = () => setCurrent(c => c - 1)
+        const finish = () => setDone(true)
+        const reset = () => { setCurrent(0); setDone(false); form.reset() }
+
+        return (
+            <div style={{ display: 'flex', flexDirection: 'column', gap: 24, maxWidth: 480 }}>
+                <Stepper steps={formSteps} currentStep={done ? formSteps.length : current} orientation="horizontal" />
+                {done ? (
+                    <div style={{ display: 'flex', flexDirection: 'column', gap: 12, alignItems: 'center', padding: 24 }}>
+                        <p style={{ margin: 0, fontWeight: 600 }}>Cadastro concluído!</p>
+                        <Button size="sm" variant="outline" onClick={reset}>Recomeçar</Button>
+                    </div>
+                ) : (
+                    <>
+                        {current === 0 && <StepForm0 form={form} onNext={next} />}
+                        {current === 1 && <StepForm1 form={form} onNext={next} onBack={back} />}
+                        {current === 2 && <StepForm2 form={form} onNext={finish} onBack={back} />}
+                    </>
+                )}
+            </div>
+        )
+    },
+}