@liguelead/design-system 0.0.16 → 0.0.18

package/components/Alert/Alert.style.ts

@@ -0,0 +1,23 @@
+import styled from 'styled-components';
+import { parseColor } from 'package/utils';
+import {spacing, radius} from '@liguelead/foundation'
+
+export const AlertContainer = styled.div<{ $variant: string }>`
+  padding: ${spacing.spacing8}px;
+  border: 1px solid ${({theme}) => parseColor(theme.colors.neutral200)};
+  background-color: ${({theme}) => parseColor(theme.colors.background)};
+  color: ${({theme}) => parseColor(theme.colors.text)};
+  border-radius: ${radius.radius4}px;
+
+  ${({ $variant }) => $variant}
+`;
+
+export const AlertContent = styled.div`
+  display: flex;
+  gap: 8px;
+`;
+
+export const AlertButtonContainer = styled.div`
+  display: flex;
+  justify-content: flex-end;
+`;

package/components/Alert/Alert.tsx

@@ -0,0 +1,55 @@
+import Text from '../Text'
+import LinkButton from '../LinkButton'
+
+import {
+    AlertButtonContainer,
+    AlertContainer,
+    AlertContent
+} from './Alert.style'
+import { AlertVariant } from './Alert.variants'
+import { TAlertProps } from './Alert.types'
+import { iconsByVariant } from './IconVariant'
+
+const Alert = ({
+    variant = 'default',
+    buttonLabel,
+    className,
+    description,
+    href,
+    children,
+    title,
+    hasButton
+}: TAlertProps) => {
+    const alertVariant = AlertVariant(variant)
+
+    return (
+        <AlertContainer $variant={alertVariant} className={className}>
+            <AlertContent>
+                {iconsByVariant(variant)}
+                <div>
+                    <Text
+                        size="body03"
+                        color="textDark"
+                        weight="fontWeight600"
+                        className="mb-4">
+                        {title}
+                    </Text>
+                    {description ? (
+                        <Text size="body02" color="textMedium">
+                            {description}
+                        </Text>
+                    ) : (
+                        children
+                    )}
+                </div>
+            </AlertContent>
+            {hasButton && (
+                <AlertButtonContainer>
+                    <LinkButton href={href || ''}>{buttonLabel}</LinkButton>
+                </AlertButtonContainer>
+            )}
+        </AlertContainer>
+    )
+}
+
+export default Alert

package/components/Alert/Alert.types.ts

@@ -0,0 +1,10 @@
+export type TAlertProps = {
+    buttonLabel?: string
+    href?: string
+    children?: React.ReactNode
+    hasButton?: boolean
+    className?: string
+    description?: string
+    variant?: 'default' | 'danger' | 'warning' | 'info' | 'success'
+    title: string
+}

package/components/Alert/Alert.variants.ts

@@ -0,0 +1,68 @@
+import { parseColor } from 'package/utils'
+import { useTheme } from 'styled-components'
+
+type TVariant = 'success' | 'danger' | 'warning' | 'info' | 'default'
+
+export const AlertVariant = (variant: TVariant) => {
+  const theme = useTheme()
+
+  const variants = {
+    success: `
+    border-left: 8px solid ${parseColor(theme.colors.success100)};
+    & svg {
+      fill: ${parseColor(theme.colors.success100)};
+      width: 24px;
+      height: 24px;
+    }
+
+    & a {
+      color: ${parseColor(theme.colors.success100)};
+    }
+  `,
+    danger: `
+    border-left: 8px solid ${parseColor(theme.colors.danger200)};
+    & svg {
+      fill: ${parseColor(theme.colors.danger200)};
+      width: 24px;
+      height: 24px;
+    }
+
+    & a {
+      color: ${parseColor(theme.colors.danger200)};
+    }
+  `,
+    warning: `
+    border-left: 8px solid ${parseColor(theme.colors.warning100)};
+    & svg {
+      fill: ${parseColor(theme.colors.warning100)};
+      width: 24px;
+      height: 24px;
+    }
+
+    & a {
+      color: ${parseColor(theme.colors.warning100)};
+    }
+  `,
+    info: `
+    border-left: 8px solid ${parseColor(theme.colors.info100)};
+    & svg {
+      fill: ${parseColor(theme.colors.info100)};
+      width: 24px;
+      height: 24px;
+    }
+
+    & a {
+      color: ${parseColor(theme.colors.info100)};
+    }
+  `,
+    default: `
+    border-left: 8px solid ${parseColor(theme.colors.primary)};
+
+    & a {
+      color: ${parseColor(theme.colors.primary)};
+    }
+  `
+  }
+
+  return variants[variant]
+}

package/components/Alert/IconVariant.tsx

@@ -0,0 +1,22 @@
+import { TAlertProps } from "./Alert.types"
+import {
+    CheckCircleIcon,
+    WarningCircleIcon,
+    WarningIcon,
+    InfoIcon
+} from '@phosphor-icons/react'
+
+export const iconsByVariant = (variant: TAlertProps['variant']) => {
+    switch (variant) {
+        case 'success':
+            return <CheckCircleIcon />
+        case 'danger':
+            return <WarningCircleIcon />
+        case 'warning':
+            return <WarningIcon />
+        case 'info':
+            return <InfoIcon />
+        default:
+            return <></>
+    }
+}

package/components/Alert/index.ts

@@ -0,0 +1 @@
+export { default } from "./Alert"

package/components/Button/Button.appearance.ts

@@ -1,6 +1,6 @@
 import { ButtonVariantTypes} from './Button.types'
-import {colorType} from 'types'
-import {useTheme} from 'styled-components'
+import { colorType } from '../../../types'
+import { useTheme } from 'styled-components'
 import {darkenOrLighten, getTextColor, parseColor} from '../../utils'
 
 export const ButtonVariant = (

package/components/Button/Button.types.ts

@@ -1,4 +1,4 @@
-import { colorType } from 'types'
+import { colorType } from '../../../types'
 
 export type ButtonSizeTypes = 'sm' | 'md' | 'lg'
 export type ButtonVariantTypes = 'solid' | 'outline' | 'ghost'

package/components/Checkbox/Checkbox.styles.ts

@@ -7,7 +7,6 @@ import {
 } from '@liguelead/foundation'
 import { parseColor } from '../../utils'
 import styled, { css } from 'styled-components'
-import Text from '../Text'
 
 export const CheckboxWrapper = styled.label`
     display: flex;
@@ -33,9 +32,9 @@ export const CheckboxWrapper = styled.label`
 export const CustomCheckbox = styled.span<{
     checked: boolean
     disabled?: boolean
-    error?: boolean
+    $hasError?: boolean
 }>`
-    ${({ checked, theme, disabled, error }) => css`
+    ${({ checked, theme, disabled, $hasError }) => css`
         width: ${spacing.spacing16}px;
         height: ${spacing.spacing16}px;
         border: 1px solid ${checked
@@ -60,7 +59,7 @@ export const CustomCheckbox = styled.span<{
                 cursor: not-allowed;
             `}
 
-        ${error &&
+        ${$hasError &&
             css`
                 border-color: ${parseColor(theme.colors.danger200)};
                 box-shadow: ${shadow.errorShadow};
@@ -100,7 +99,7 @@ export const RippleContainer = styled.span`
     }
 `
 
-export const Label = styled.span<{ disabled?: boolean }>`
+export const Label = styled.label<{ disabled?: boolean }>`
     font-size: ${fontSize.fontSize14}px;
     font-weight: ${fontWeight.fontWeight500};
 
@@ -110,15 +109,15 @@ export const Label = styled.span<{ disabled?: boolean }>`
             : parseColor(theme.colors.textDark)};
 `
 
-export const CustomLabel = styled(Text)<{ disabled?: boolean; error?: boolean }>`
+export const CustomLabel = styled.p<{ disabled?: boolean; $hasError?: boolean }>`
     font-size: ${fontSize.fontSize12}px;
     font-weight: ${fontWeight.fontWeight400};
     line-height: 8px;
 
-    color: ${({ theme, disabled, error }) =>
+    color: ${({ theme, disabled, $hasError }) =>
         disabled
             ? `${parseColor(theme.colors.textMedium)}70`
-            : error
+            : $hasError
             ? parseColor(theme.colors.danger200)
             : parseColor(theme.colors.textMedium)};
 `

package/components/Checkbox/Checkbox.tsx

@@ -21,9 +21,9 @@ const Checkbox: React.FC<CheckboxProps> = ({
     disabled = false,
     register,
     className,
-    error,
     children,
     description,
+    $hasError,
     ...rest
 }) => {
     const [internalChecked, setInternalChecked] = useState<boolean>(
@@ -66,7 +66,7 @@ const Checkbox: React.FC<CheckboxProps> = ({
             <CustomCheckbox
                 checked={internalChecked}
                 disabled={disabled}
-                error={!!error}
+                $hasError={$hasError}
                 onClick={handleRipple}>
                 {ripples.map(ripple => (
                     <RippleContainer
@@ -85,9 +85,9 @@ const Checkbox: React.FC<CheckboxProps> = ({
             </CustomCheckbox>
             <div>
                 {label ? <Label disabled={disabled}>{label}</Label> : children}
-                {(description || error) && (
-                    <CustomLabel disabled={disabled} weight="fontWeight400">
-                        {error?.message || description}
+                {(description || $hasError) && (
+                    <CustomLabel disabled={disabled} $hasError={$hasError}>
+                        {description}
                     </CustomLabel>
                 )}
             </div>

package/components/Checkbox/Checkbox.types.ts

@@ -1,9 +1,9 @@
-import { FieldValues, UseFormRegisterReturn } from 'react-hook-form'
+import { UseFormRegisterReturn } from 'react-hook-form'
 
-export interface CheckboxProps<TFieldValues extends FieldValues = FieldValues> {
+export interface CheckboxProps {
     label?: string
     checked?: boolean
-    error?: TFieldValues
+    $hasError?: boolean
     description?: string
     children?: React.ReactNode
     onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void

package/components/DatePicker/DatePicker.tsx

@@ -70,7 +70,7 @@ const DatePickerCustom = forwardRef<HTMLInputElement, DatePickerProps>(
                                 </ButtonDatePicker>
                             </DropdownMenu.Trigger>
                             <DropdownContent>
-                                {years.map(option => (
+                                {years.map((option: number) => (
                                     <DropdownItem
                                         key={option}
                                         onSelect={() => {

package/components/Dialog/Dialog.style.ts

@@ -0,0 +1,62 @@
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import styled from 'styled-components';
+import { spacing, shadow } from '@liguelead/foundation';
+import { parseColor } from '../../utils';
+
+export const Overlay = styled(DialogPrimitive.Overlay)`
+  background: rgba(0, 0, 0, 0.3);
+  position: fixed;
+  inset: 0;
+`
+
+export const Content = styled(DialogPrimitive.Content)<{$centerContent?: boolean}>`
+  background: #fff;
+  border: 1px solid ${({ theme }) => parseColor(theme.colors.neutral300)};
+  box-shadow: 0 4px 15px -3px rgba(0, 0, 0, 0.1);
+  border-radius: 8px;
+  padding: ${spacing.spacing24}px;
+  display: flex;
+  flex-direction: column;
+  align-items: ${({ $centerContent }) => ($centerContent ? 'center' : 'flex-start')};
+
+  min-width: 425px;
+  max-width: 90vw;
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+`
+export const CloseDialogIconButton = styled.button`
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  background: none;
+  border: none;
+  border-radius: 8px;
+  padding: 0px 2px;
+
+  & svg {
+    color: ${({ theme }) => parseColor(theme.colors.neutral700)};
+  }
+
+  &:hover svg {
+    color: ${({ theme }) => parseColor(theme.colors.neutral900)};
+  }
+  
+  &:focus {
+    box-shadow: ${shadow.focusShadow};
+  }
+`
+export const ChildrenContainer = styled.div`
+  margin-top: ${spacing.spacing24}px;
+  width: 100%;
+`
+
+export const ButtonContainer = styled.div<{$centerContent?: boolean}>`
+  width: 100%;
+  display: flex;
+  justify-content: ${({ $centerContent }) => ($centerContent ? 'center' : 'flex-end')};
+  flex-direction: ${({ $centerContent }) => ($centerContent ? 'column-reverse' : 'row')};
+  gap: ${spacing.spacing12}px;
+  margin-top: ${spacing.spacing24}px;
+`;

package/components/Dialog/Dialog.tsx

@@ -0,0 +1,113 @@
+import * as DialogPrimitive from "@radix-ui/react-dialog"
+import { XIcon } from "@phosphor-icons/react"
+
+import {
+  ButtonContainer,
+  ChildrenContainer,
+  CloseDialogIconButton,
+  Content,
+  Overlay
+} from "./Dialog.style"
+import { TDialogProps } from "./Dialog.types"
+
+import Button from "../Button"
+import Text from "../Text"
+
+export const Dialog: React.FC<TDialogProps> = ({
+  open,
+  onOpenChange,
+  title,
+  description,
+  trigger,
+  children,
+  onConfirm,
+  variant = 'default',
+  className,
+  confirmLabel = 'Confirmar',
+  cancelLabel = 'Cancelar',
+  centerContent = false,
+}: TDialogProps) => {
+  return (
+    <DialogPrimitive.Root
+      open={open} 
+      onOpenChange={onOpenChange}
+    >
+      {trigger
+        && <DialogPrimitive.Trigger asChild className={className}>
+            {trigger}
+          </DialogPrimitive.Trigger>
+      }
+
+      <DialogPrimitive.Portal>
+        <Overlay />
+
+        <Content
+          className={className}
+          $centerContent={centerContent}
+          onInteractOutside={(event) => {
+            if (variant === 'danger') event.preventDefault()
+          }}
+          onEscapeKeyDown={(event) => {
+            if (variant === 'danger') event.preventDefault()
+          }}
+        >
+          {title && (
+            <DialogPrimitive.Title>
+              <Text
+                isTitle
+                tag='h1'
+                size="heading01"
+                weight="fontWeight500"
+                color='textDark'
+              >
+                {title}
+              </Text>
+            </DialogPrimitive.Title>
+          )}
+
+          {description && (
+            <DialogPrimitive.Description>
+              <Text
+                tag='p'
+                size="body02"
+                weight="fontWeight400"
+                color='textMedium'
+              >
+                {description}
+              </Text>
+            </DialogPrimitive.Description>
+          )}
+
+          <ChildrenContainer>
+              {children}
+            </ChildrenContainer>
+
+          <ButtonContainer $centerContent={centerContent}>
+            <DialogPrimitive.Close asChild>
+              <Button
+                variant="outline"
+              >
+                {cancelLabel}
+              </Button>
+            </DialogPrimitive.Close>
+
+            <Button
+              onClick={onConfirm}
+              >
+              {confirmLabel}
+            </Button>
+          </ButtonContainer>
+          {variant === 'danger' ? null : (
+            <DialogPrimitive.Close asChild>
+              <CloseDialogIconButton aria-label="Fechar">
+                <XIcon size={16} />
+              </CloseDialogIconButton>
+            </DialogPrimitive.Close>
+          )}
+        </Content>
+      </DialogPrimitive.Portal>
+    </DialogPrimitive.Root>
+  )
+};
+
+export default Dialog;

package/components/Dialog/Dialog.types.ts

@@ -0,0 +1,17 @@
+import { ReactNode } from "react"
+
+export type TDialogProps = {
+  open?: boolean
+  onOpenChange?: (open: boolean) => void
+  title: string
+  description?: string
+  className?: string
+  trigger?: ReactNode
+  children: ReactNode
+  onConfirm?: () => void
+  confirmLabel?: string
+  cancelLabel?: string
+  disableClose?: boolean
+  centerContent?: boolean
+  variant?: 'default' | 'danger'
+}

package/components/Dialog/index.ts

@@ -0,0 +1 @@
+export { default } from "./Dialog";

package/components/InputOpt/InputOpt.styles.ts

@@ -9,7 +9,7 @@ interface OptBoxProps {
 
 export const OptWrapper = styled.div`
   display: flex;
-  gap: ${spacing.spacing8}px;
+  justify-content: space-between;
 `
 
 export const OptContainer = styled.div`

package/components/InputOpt/InputOpt.tsx

@@ -131,7 +131,9 @@ const InputOpt: React.FC<InputOptProps> = ({
         {Array.from({ length }).map((_, i) => (
           <React.Fragment key={i}>
             <OptBox
-              ref={el => (refs.current[i] = el)}
+              ref={(el) => {
+                refs.current[i] = el
+              }}
               $disabled={disabled}
               $error={!!error}
               value={internal[i] || ''}

package/components/PageWrapper/PageWrapper.tsx

@@ -1,6 +1,6 @@
 import {parseColor} from '../../utils'
 import styled from 'styled-components'
-import {colorType} from 'types'
+import {colorType} from '../../../types'
 import {spacing, SpacingInterface} from '@liguelead/foundation'
 
 type SpacingType = keyof SpacingInterface

package/components/SegmentedButton/SegmentedButton.types.ts

@@ -1,4 +1,4 @@
-import { colorType } from 'types'
+import { colorType } from '../../../types'
 type SegmentedButtonType = {
     label: string
     action?: () => void

package/components/Text/Text.types.ts

@@ -1,4 +1,4 @@
-import { colorType } from 'types'
+import { colorType } from '../../../types'
 import { ReactNode } from 'react'
 
 type AlignType = 'left' | 'center' | 'right' | 'justify'
@@ -7,6 +7,7 @@ type SizeType =
     | 'span01'
     | 'body01'
     | 'body02'
+    | 'body03'
     | 'heading01'
     | 'heading02'
     | 'heading03'

package/components/Toaster/Toaster.style.ts

@@ -1,10 +1,23 @@
 import styled, { css } from 'styled-components'
 import { parseColor } from '../../utils'
 import { ToastContainer } from 'react-toastify'
+import { spacing, fontSize, radius, fontWeight } from "@liguelead/foundation"
 
 export const ToasterStyledContainer = styled(ToastContainer)`
     ${({ theme }) => css`
 
+    .Toastify__toast {
+      border-radius: ${radius.radius4}px;
+      font-size: ${fontSize.fontSize14}px;
+      white-space: pre-line;
+      color: ${parseColor(theme.colors?.textDark)};
+      font-weight: ${fontWeight.fontWeight500};
+    }
+
+    .Toastify__toast-icon {
+      width: ${spacing.spacing20}px;
+    }
+
     /* Colored Theme */
 
     .Toastify__toast-theme--colored.Toastify__toast--success {

package/components/index.ts

@@ -1,3 +1,4 @@
+export { default as Alert } from './Alert'
 export { default as Button } from './Button'
 export { default as Checkbox } from './Checkbox'
 export { default as DatePicker } from './DatePicker'
@@ -13,3 +14,4 @@ export { default as SegmentedButton } from './SegmentedButton'
 export { default as LinkButton } from './LinkButton'
 export { default as RadioButton } from './RadioButton'
 export { ToastProvider, Toaster } from './Toaster'
+export { default as Dialog } from './Dialog'

package/package.json

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