@liguelead/design-system 0.0.36 → 0.0.37

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/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/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/package.json

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