@liguelead/design-system 0.0.35 → 0.0.37

package/components/Alert/Alert.stories.tsx

@@ -55,6 +55,11 @@ Componente de alerta para comunicar mensagens de feedback ao usuário.
       control: 'text',
       description: 'URL do botão de ação',
     },
+    openNewTab: {
+      control: 'boolean',
+      description: 'Abre o link do botão em uma nova aba',
+      table: { defaultValue: { summary: 'false' } },
+    },
   },
 }
 
@@ -87,13 +92,14 @@ export const TodasVariantes: Story = {
 export const ComBotao: Story = {
   name: 'Com botão de ação',
   parameters: {
-    docs: { description: { story: 'Use `hasButton` quando houver uma ação clara para o usuário tomar.' } },
+    docs: { description: { story: 'Use `hasButton` quando houver uma ação clara para o usuário tomar. Use `openNewTab` para abrir o link em nova aba.' } },
   },
   render: () => (
     <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
-      <Alert variant="info" title="Nova versão disponível" description="Uma atualização está pronta para ser instalada." hasButton buttonLabel="Atualizar agora" href="#" />
-      <Alert variant="warning" title="Sessão expirando" description="Sua sessão expira em 5 minutos." hasButton buttonLabel="Renovar sessão" href="#" />
-      <Alert variant="danger" title="Falha no pagamento" description="Não foi possível processar seu pagamento." hasButton buttonLabel="Tentar novamente" href="#" />
+      <Alert variant="info" title="Nova versão disponível" description="Uma atualização está pronta para ser instalada." hasButton buttonLabel="Atualizar agora" href="#" openNewTab={false} />
+      <Alert variant="warning" title="Sessão expirando" description="Sua sessão expira em 5 minutos." hasButton buttonLabel="Renovar sessão" href="#" openNewTab={false} />
+      <Alert variant="danger" title="Falha no pagamento" description="Não foi possível processar seu pagamento." hasButton buttonLabel="Tentar novamente" href="#" openNewTab={false} />
+      <Alert variant="info" title="Documentação disponível" description="Acesse a documentação completa no portal." hasButton buttonLabel="Ver documentação" href="#" openNewTab />
     </div>
   ),
 }

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'
 
@@ -17,10 +18,12 @@ const Alert = ({
     description,
     href,
     children,
+    openNewTab,
     title,
     hasButton
 }: TAlertProps) => {
-    const alertVariant = AlertVariant(variant)
+    const theme = useTheme()
+    const alertVariant = AlertVariant(variant, theme)
 
     return (
         <AlertContainer $variant={alertVariant} className={className}>
@@ -45,7 +48,12 @@ const Alert = ({
             </AlertContent>
             {hasButton && (
                 <AlertButtonContainer>
-                    <LinkButton href={href || ''}>{buttonLabel}</LinkButton>
+                    <LinkButton
+                        href={href || ''}
+                        target={openNewTab ? '_blank' : undefined}
+                    >
+                        {buttonLabel}
+                    </LinkButton>
                 </AlertButtonContainer>
             )}
         </AlertContainer>

package/components/Alert/Alert.types.ts

@@ -7,4 +7,5 @@ export type TAlertProps = {
     description?: string
     variant?: 'default' | 'danger' | 'warning' | 'info' | 'success'
     title: string
+    openNewTab?: boolean
 }

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/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/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/Skeleton/Skeleton.stories.tsx

@@ -0,0 +1,126 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import Skeleton from './Skeleton'
+
+const meta: Meta<typeof Skeleton> = {
+    title: 'Feedback/Skeleton',
+    component: Skeleton,
+    parameters: {
+        layout: 'centered',
+        docs: {
+            description: {
+                component: `
+Componente de loading skeleton baseado em \`react-loading-skeleton\`.
+
+**Quando usar:**
+- Enquanto dados estão sendo carregados da API
+- Para evitar layout shift e melhorar a percepção de performance
+- Substitua o conteúdo real pelo Skeleton durante o estado de loading
+        `,
+            },
+        },
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        width: {
+            control: 'text',
+            description: 'Largura do skeleton (px, %, rem...)',
+        },
+        height: {
+            control: 'text',
+            description: 'Altura do skeleton',
+        },
+        count: {
+            control: { type: 'number', min: 1, max: 10 },
+            description: 'Quantidade de linhas',
+            table: { defaultValue: { summary: '1' } },
+        },
+        circle: {
+            control: 'boolean',
+            description: 'Formato circular (avatar)',
+            table: { defaultValue: { summary: 'false' } },
+        },
+        borderRadius: {
+            control: 'text',
+            description: 'Border radius customizado',
+        },
+        inline: {
+            control: 'boolean',
+            description: 'Exibe inline',
+            table: { defaultValue: { summary: 'false' } },
+        },
+    },
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+    args: {
+        width: 200,
+        height: 20,
+    },
+}
+
+export const MultiplaLinhas: Story = {
+    name: 'Múltiplas linhas',
+    parameters: {
+        docs: { description: { story: 'Use `count` para simular blocos de texto.' } },
+    },
+    render: () => (
+        <div style={{ width: 320 }}>
+            <Skeleton count={4} height={16} />
+        </div>
+    ),
+}
+
+export const Circular: Story = {
+    name: 'Avatar circular',
+    parameters: {
+        docs: { description: { story: 'Use `circle` para avatares.' } },
+    },
+    render: () => (
+        <div style={{ display: 'flex', gap: 12, alignItems: 'center' }}>
+            <Skeleton circle width={32} height={32} />
+            <Skeleton circle width={40} height={40} />
+            <Skeleton circle width={56} height={56} />
+        </div>
+    ),
+}
+
+export const Card: Story = {
+    name: 'Card de conteúdo',
+    parameters: {
+        docs: { description: { story: 'Exemplo de skeleton para um card com avatar + texto.' } },
+    },
+    render: () => (
+        <div style={{ display: 'flex', flexDirection: 'column', gap: 12, width: 320 }}>
+            <div style={{ display: 'flex', gap: 12, alignItems: 'center' }}>
+                <Skeleton circle width={40} height={40} />
+                <div style={{ flex: 1 }}>
+                    <Skeleton height={14} width="60%" />
+                    <Skeleton height={12} width="40%" />
+                </div>
+            </div>
+            <Skeleton height={120} borderRadius={8} />
+            <Skeleton count={3} height={14} />
+        </div>
+    ),
+}
+
+export const Tabela: Story = {
+    name: 'Linhas de tabela',
+    parameters: {
+        docs: { description: { story: 'Simula linhas de uma tabela carregando.' } },
+    },
+    render: () => (
+        <div style={{ display: 'flex', flexDirection: 'column', gap: 8, width: 480 }}>
+            {Array.from({ length: 5 }).map((_, i) => (
+                <div key={i} style={{ display: 'flex', gap: 16 }}>
+                    <Skeleton width={120} height={16} />
+                    <Skeleton width={160} height={16} />
+                    <Skeleton width={80} height={16} />
+                </div>
+            ))}
+        </div>
+    ),
+}

package/components/Skeleton/Skeleton.styles.ts

@@ -0,0 +1,15 @@
+import styled from 'styled-components'
+import { radius } from '@liguelead/foundation'
+import { parseColor } from '../../utils'
+
+export const SkeletonWrapper = styled.div<{ $inline?: boolean }>`
+    display: ${({ $inline }) => ($inline ? 'inline-flex' : 'flex')};
+    flex-direction: column;
+    gap: 4px;
+`
+
+export const SkeletonThemeWrapper = styled.div`
+    --base-color: ${({ theme }) => parseColor(theme.colors.neutral200)};
+    --highlight-color: ${({ theme }) => parseColor(theme.colors.neutral100)};
+    border-radius: ${radius.radius4}px;
+`

package/components/Skeleton/Skeleton.tsx

@@ -0,0 +1,38 @@
+import ReactSkeleton, { SkeletonTheme } from 'react-loading-skeleton'
+import 'react-loading-skeleton/dist/skeleton.css'
+import { useTheme } from 'styled-components'
+import { parseColor } from '../../utils'
+import { SkeletonWrapper } from './Skeleton.styles'
+import { SkeletonProps } from './Skeleton.types'
+
+const Skeleton: React.FC<SkeletonProps> = ({
+    width,
+    height,
+    borderRadius,
+    circle = false,
+    count = 1,
+    className,
+    inline = false,
+}) => {
+    const theme = useTheme()
+
+    return (
+        <SkeletonTheme
+            baseColor={parseColor(theme.colors.neutral200)}
+            highlightColor={parseColor(theme.colors.neutral100)}
+        >
+            <SkeletonWrapper $inline={inline} className={className}>
+                <ReactSkeleton
+                    width={width}
+                    height={height}
+                    borderRadius={borderRadius}
+                    circle={circle}
+                    count={count}
+                    inline={inline}
+                />
+            </SkeletonWrapper>
+        </SkeletonTheme>
+    )
+}
+
+export default Skeleton

package/components/Skeleton/Skeleton.types.ts

@@ -0,0 +1,9 @@
+export interface SkeletonProps {
+    width?: string | number
+    height?: string | number
+    borderRadius?: string | number
+    circle?: boolean
+    count?: number
+    className?: string
+    inline?: boolean
+}

package/components/Skeleton/index.ts

@@ -0,0 +1,2 @@
+export { default as Skeleton } from './Skeleton'
+export type { SkeletonProps } from './Skeleton.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/Tabs/Tabs.tsx

@@ -15,6 +15,8 @@ const Tabs: React.FC<TabsProps> = ({
             {items.map(item => (
                 <Button
                     key={item.key}
+                    aria-controls={`tab-${item.key}`}
+                    aria-selected={activeKey === item.key}
                     variant={activeKey === item.key ? 'solid' : 'neutralGhost'}
                     color={activeKey === item.key ? 'primary' : undefined}
                     size="sm"

package/components/TextField/TextField.tsx

@@ -138,9 +138,11 @@ const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
                     className={className}
                     size={textFieldSize}
                     $themefication={textFieldState}>
-                    <Label>
-                        {label} {requiredSymbol && <RequiredAsterisk />}
-                    </Label>
+                    {label && (
+                        <Label>
+                            {label} {requiredSymbol && <RequiredAsterisk />}
+                        </Label>
+                    )}
                     <InputWrapper
                         as="label"
                         onDragOver={handleDragOver}
@@ -181,10 +183,13 @@ const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
             <Wrapper
                 className={className}
                 size={textFieldSize}
-                $themefication={textFieldState}>
-                <Label>
-                    {label} {requiredSymbol && <RequiredAsterisk />}
-                </Label>
+                $themefication={textFieldState}
+            >
+                {label && (
+                    <Label>
+                        {label} {requiredSymbol && <RequiredAsterisk />}
+                    </Label>
+                )}
                 <InputWrapper>
                     {leftIcon && (
                         <IconWrapper onClick={handleLeftIcon}>

package/components/Toaster/Toaster.ts

@@ -1,4 +1,4 @@
-import { toast, ToastOptions } from "react-toastify"
+import { toast, ToastOptions } from 'react-toastify'
 
 const defaultOptions: ToastOptions = {
   position: 'top-right',
@@ -11,23 +11,6 @@ const defaultOptions: ToastOptions = {
 
 export type ToastType = 'success' | 'error' | 'warning' | 'info'
 
-export const triggerToast = (type: ToastType, message: string, options?: ToastOptions) => {
-  const mergedOptions = { ...defaultOptions, ...options }
-  
-  switch (type) {
-    case 'success':
-      return toast.success(message, mergedOptions)
-    case 'error':
-      return toast.error(message, mergedOptions)
-    case 'warning':
-      return toast.warning(message, mergedOptions)
-    case 'info':
-      return toast.info(message, mergedOptions)
-    default:
-      return toast(message, mergedOptions)
-  }
-}
-
 const Toaster = {
   success: (message: string, options?: ToastOptions) =>
     toast.success(message, { ...defaultOptions, ...options }),
@@ -42,4 +25,7 @@ const Toaster = {
     toast.info(message, { ...defaultOptions, ...options })
 }
 
-export default Toaster;
+export const triggerToast = (type: ToastType, message: string, options?: ToastOptions) =>
+  Toaster[type](message, options)
+
+export default Toaster

package/components/index.ts

@@ -21,3 +21,5 @@ export { Combobox } from './Combobox'
 export { default as SplitButton } from './SplitButton'
 export { default as Table } from './Table'
 export { default as Tabs } from './Tabs'
+export { Skeleton } from './Skeleton'
+export type { SkeletonProps } from './Skeleton'

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@liguelead/design-system",
-    "version": "0.0.35",
+    "version": "0.0.37",
     "type": "module",
     "main": "components/index.ts",
     "publishConfig": {
@@ -25,7 +25,8 @@
         "react-toastify": "^11.0.5",
         "cmdk": "^1.1.1",
         "date-fns": "^2.30.0",
-        "@tanstack/react-table": "^8.0.0"
+        "@tanstack/react-table": "^8.0.0",
+        "react-loading-skeleton": "^3.5.0"
     },
     "scripts": {
         "lint": "eslint ."