@liguelead/design-system 0.0.36 → 0.0.38

package/components/Alert/Alert.style.ts

@@ -13,7 +13,7 @@ export const AlertContainer = styled.div<{ $variant: string }>`
 
 export const AlertContent = styled.div`
   display: flex;
-  gap: 8px;
+  gap: ${spacing.spacing8}px;
 `;
 
 export const AlertButtonContainer = styled.div`

package/components/Alert/Alert.tsx

@@ -1,3 +1,4 @@
+import { useTheme } from 'styled-components'
 import Text from '../Text'
 import LinkButton from '../LinkButton'
 
@@ -21,7 +22,8 @@ const Alert = ({
     title,
     hasButton
 }: TAlertProps) => {
-    const alertVariant = AlertVariant(variant)
+    const theme = useTheme()
+    const alertVariant = AlertVariant(variant, theme)
 
     return (
         <AlertContainer $variant={alertVariant} className={className}>

package/components/Alert/Alert.variants.ts

@@ -1,11 +1,9 @@
 import { parseColor } from '../../utils'
-import { useTheme } from 'styled-components'
+import { DefaultTheme } from 'styled-components'
 
 type TVariant = 'success' | 'danger' | 'warning' | 'info' | 'default'
 
-export const AlertVariant = (variant: TVariant) => {
-  const theme = useTheme()
-
+export const AlertVariant = (variant: TVariant, theme: DefaultTheme) => {
   const variants = {
     success: `
     border-left: 8px solid ${parseColor(theme.colors.success100)};

package/components/Button/Button.appearance.ts

@@ -1,15 +1,14 @@
 import { ButtonVariantTypes } from './Button.types'
 import { colorType } from '../../types'
-import { useTheme } from 'styled-components'
+import { DefaultTheme } from 'styled-components'
 import { darkenOrLighten, getTextColor, parseColor, getHoverColor } from '../../utils'
 
 
 export const ButtonVariant = (
     color: colorType,
-    variant: ButtonVariantTypes
+    variant: ButtonVariantTypes,
+    theme: DefaultTheme
 ) => {
-    const theme = useTheme();
-
     const colorValue = theme.colors[color];
 
     if (!colorValue) {

package/components/Button/Button.styles.ts

@@ -11,7 +11,6 @@ export interface StyledButtonProps extends ButtonProps {
 export const StyledButton = styled.button<StyledButtonProps>`
     position: relative;
     display: flex;
-    outline: none !important;
     justify-content: center;
     align-items: center;
     width: ${({ $fullWidth }) => ($fullWidth ? '100%' : 'auto')};

package/components/Button/Button.tsx

@@ -1,4 +1,5 @@
 import { useState } from 'react'
+import { useTheme } from 'styled-components'
 import { StyledButton, RippleContainer } from './Button.styles'
 import { RippleInterface, ButtonProps } from './Button.types'
 import { ButtonSizes } from './Button.sizes'
@@ -16,14 +17,11 @@ const Button: React.FC<ButtonProps> = ({
     type = 'button',
     ...rest
 }) => {
+    const theme = useTheme()
     const [ripples, setRipples] = useState<RippleInterface[]>([])
 
     const buttonSize = ButtonSizes(size)
-    const buttonVariant = ButtonVariant(color, variant)
-
-    const removeRipple = (ripples: RippleInterface[], rippleId: string) => {
-        return ripples.filter(r => r.id !== rippleId)
-    }
+    const buttonVariant = ButtonVariant(color, variant, theme)
 
     const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
         const rect = e.currentTarget.getBoundingClientRect()
@@ -37,7 +35,6 @@ const Button: React.FC<ButtonProps> = ({
         }
         setRipples(prev => [...prev, newRipple])
 
-        // Chama o onClick fornecido
         if (onClick) {
             onClick(e)
         }
@@ -65,7 +62,7 @@ const Button: React.FC<ButtonProps> = ({
                         height: 20
                     }}
                     onAnimationEnd={() =>
-                        setRipples(prev => removeRipple(prev, ripple.id))
+                        setRipples(prev => prev.filter(r => r.id !== ripple.id))
                     }
                 />
             ))}

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/Checkbox/Checkbox.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import { CheckboxProps } from './Checkbox.types'
 import {
     CheckboxWrapper,
@@ -31,9 +31,9 @@ const Checkbox: React.FC<CheckboxProps> = ({
     )
     const [ripples, setRipples] = useState<RippleInterface[]>([])
 
-    const removeRipple = (ripples: RippleInterface[], rippleId: string) => {
-        return ripples.filter(r => r.id !== rippleId)
-    }
+    useEffect(() => {
+        if (checked !== undefined) setInternalChecked(checked)
+    }, [checked])
 
     const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
         onChange?.(e)
@@ -78,7 +78,7 @@ const Checkbox: React.FC<CheckboxProps> = ({
                             height: 20
                         }}
                         onAnimationEnd={() =>
-                            setRipples(prev => removeRipple(prev, ripple.id))
+                            setRipples(prev => prev.filter(r => r.id !== ripple.id))
                         }
                     />
                 ))}

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/Dialog/Dialog.style.ts

@@ -9,6 +9,7 @@ export const Overlay = styled(DialogPrimitive.Overlay)`
   background: rgba(0, 0, 0, 0.3);
   position: fixed;
   inset: 0;
+  z-index: 9999;
 `
 
 export const Content = styled(DialogPrimitive.Content)<{$centerContent?: boolean}>`
@@ -27,7 +28,7 @@ export const Content = styled(DialogPrimitive.Content)<{$centerContent?: boolean
   top: 8vh;
   left: 50%;
   transform: translateX(-50%);
-  z-index: 99999;
+  z-index: 10000;
 `
 
 export const TitleDescriptionContainer = styled.div<{$centerContent?: boolean, $variant?: variant}>`

package/components/Dialog/Dialog.tsx

@@ -40,7 +40,7 @@ export const Dialog: React.FC<TDialogProps> = ({
       onOpenChange={onOpenChange}
     >
       {trigger
-        && <DialogPrimitive.Trigger asChild className={className} >
+        && <DialogPrimitive.Trigger asChild>
             {trigger}
           </DialogPrimitive.Trigger>
       }
@@ -85,15 +85,13 @@ export const Dialog: React.FC<TDialogProps> = ({
           )}
 
           <ButtonContainer $centerContent={centerContent}>
-            <DialogPrimitive.Close asChild>
-              {cancelButton && (
-                <Button
-                  variant="neutralOutline"
-                >
+            {cancelButton && (
+              <DialogPrimitive.Close asChild>
+                <Button variant="neutralOutline">
                   {cancelLabel}
                 </Button>
-              )}
-            </DialogPrimitive.Close>
+              </DialogPrimitive.Close>
+            )}
 
             {confirmButton && (
               <Button

package/components/IconButton/IconButton.tsx

@@ -1,4 +1,5 @@
 import { useState } from 'react'
+import { useTheme } from 'styled-components'
 import { ButtonProps, RippleInterface } from '../Button/Button.types'
 import { ButtonVariant } from '../Button/Button.appearance'
 import { IconButtonSizes } from './IconButton.sizes'
@@ -15,10 +16,11 @@ const IconButton: React.FC<ButtonProps> = ({
     onClick,
     ...rest
 }) => {
+    const theme = useTheme()
     const [ripples, setRipples] = useState<RippleInterface[]>([])
 
     const buttonSize = IconButtonSizes(size)
-    const buttonVariant = ButtonVariant(color, variant)
+    const buttonVariant = ButtonVariant(color, variant, theme)
 
     const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
         const rect = e.currentTarget.getBoundingClientRect()

package/components/LinkButton/LinkButton.tsx

@@ -1,4 +1,5 @@
 import React, { useState } from 'react'
+import { useTheme } from 'styled-components'
 import { LinkAnchor, StyledLinkButton } from './LinkButton.style'
 import { RippleContainer } from '../Button/Button.styles'
 import { RippleInterface } from '../Button/Button.types'
@@ -19,8 +20,9 @@ const LinkButton: React.FC<LinkButtonProps> = ({
   size = 'md',
   ...rest
 }) => {
+  const theme = useTheme()
   const [ripples, setRipples] = useState<RippleInterface[]>([])
-  const buttonVariant = ButtonVariant(color, variant)
+  const buttonVariant = ButtonVariant(color, variant, theme)
   const buttonSize = LinkButtonSizes(size)
 
   const handleClick = (e: React.MouseEvent<HTMLAnchorElement>) => {

package/components/PageWrapper/PageWrapper.tsx

@@ -16,7 +16,7 @@ const PageWrapper = styled.div.withConfig({
 })<WrapperProps>`
     width: 100%;
     height: 100%;
-    max-width: ${({width}) => width + 'px' || '100%'};
+    max-width: ${({width}) => width ? width + 'px' : '100%'};
     margin: 0 auto;
     padding: ${({padding}) =>
         padding ? spacing[padding] + 'px' : spacing.spacing16 + 'px'};

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,198 @@
+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;
+    }
+`
+
+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;
+        }
+    `}
+`