@liguelead/design-system 0.0.11 → 0.0.13

package/components/Checkbox/Checkbox.styles.ts

@@ -2,7 +2,8 @@ import {
     spacing,
     fontSize,
     fontWeight,
-    radius
+    radius,
+    shadow
 } from '@liguelead/foundation'
 import { parseColor } from '../../utils'
 import styled, { css } from 'styled-components'
@@ -32,8 +33,9 @@ export const CheckboxWrapper = styled.label`
 export const CustomCheckbox = styled.span<{
     checked: boolean
     disabled?: boolean
+    error?: boolean
 }>`
-    ${({ checked, theme, disabled }) => css`
+    ${({ checked, theme, disabled, error }) => css`
         width: ${spacing.spacing16}px;
         height: ${spacing.spacing16}px;
         border: 1px solid ${checked
@@ -52,11 +54,17 @@ export const CustomCheckbox = styled.span<{
         overflow: hidden;
 
         ${disabled &&
-        css`
-            background-color: transparent;
-            border-color: ${parseColor(theme.colors.neutral400)}70;
-            cursor: not-allowed;
-        `}
+            css`
+                background-color: transparent;
+                border-color: ${parseColor(theme.colors.neutral400)}70;
+                cursor: not-allowed;
+            `}
+
+        ${error &&
+            css`
+                border-color: ${parseColor(theme.colors.danger200)};
+                box-shadow: ${shadow.errorShadow};
+            `}
 
         &::after {
             content: '';
@@ -98,18 +106,19 @@ export const Label = styled.span<{ disabled?: boolean }>`
 
     color: ${({ theme, disabled }) =>
         disabled
-            ? `${parseColor(theme.colors.neutral1100)}70`
-            : parseColor(theme.colors.neutral1100)};
+            ? `${parseColor(theme.colors.textDark)}70`
+            : parseColor(theme.colors.textDark)};
 `
 
-export const CustomLabel = styled(Text)<{ disabled?: boolean }>`
+export const CustomLabel = styled(Text)<{ disabled?: boolean; error?: boolean }>`
     font-size: ${fontSize.fontSize12}px;
     font-weight: ${fontWeight.fontWeight400};
     line-height: 8px;
 
-    color: ${({ theme, disabled }) =>
+    color: ${({ theme, disabled, error }) =>
         disabled
             ? `${parseColor(theme.colors.textMedium)}70`
+            : error
+            ? parseColor(theme.colors.danger200)
             : parseColor(theme.colors.textMedium)};
-
 `

package/components/Checkbox/Checkbox.tsx

@@ -21,6 +21,8 @@ const Checkbox: React.FC<CheckboxProps> = ({
     disabled = false,
     register,
     className,
+    error,
+    children,
     description,
     ...rest
 }) => {
@@ -64,8 +66,8 @@ const Checkbox: React.FC<CheckboxProps> = ({
             <CustomCheckbox
                 checked={internalChecked}
                 disabled={disabled}
-                onClick={handleRipple}
-            >
+                error={!!error}
+                onClick={handleRipple}>
                 {ripples.map(ripple => (
                     <RippleContainer
                         key={ripple.id}
@@ -82,13 +84,12 @@ const Checkbox: React.FC<CheckboxProps> = ({
                 ))}
             </CustomCheckbox>
             <div>
-                {label && <Label disabled={disabled}>{label}</Label>}
-                <CustomLabel
-                    disabled={disabled}
-                    weight="fontWeight400"
-                >
-                    {description}
-                </CustomLabel>
+                {label ? <Label disabled={disabled}>{label}</Label> : children}
+                {(description || error) && (
+                    <CustomLabel disabled={disabled} weight="fontWeight400">
+                        {error?.message || description}
+                    </CustomLabel>
+                )}
             </div>
         </CheckboxWrapper>
     )

package/components/Checkbox/Checkbox.types.ts

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

package/components/InputOpt/InputOpt.styles.ts

@@ -2,16 +2,22 @@ import styled, { css } from 'styled-components'
 import { spacing, fontSize, fontWeight, shadow, lineHeight } from '@liguelead/foundation'
 import { parseColor } from '../../utils'
 
-export const OptWrapper = styled.div`
-  display: flex;
-  gap: ${spacing.spacing16}px;
-`
-
 interface OptBoxProps {
   $disabled?: boolean;
   $error?: boolean;
 }
 
+export const OptWrapper = styled.div`
+  display: flex;
+  gap: ${spacing.spacing8}px;
+`
+
+export const OptContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${spacing.spacing4}px;
+`
+
 export const OptBox = styled.input<OptBoxProps>`
   width: ${spacing.spacing36}px;
   height: ${spacing.spacing36}px;
@@ -36,7 +42,7 @@ export const OptBox = styled.input<OptBoxProps>`
       $error
         ? css`
             border-color: ${parseColor(theme.colors.danger200)};
-            box-shadow: 0 0 0 3px ${parseColor(theme.colors.danger100)}40;
+            box-shadow: ${shadow.errorShadow};
           `
         : css`
             border-color: ${parseColor(theme.colors.neutral700)};
@@ -55,9 +61,9 @@ export const OptBox = styled.input<OptBoxProps>`
 `
 
 export const OtpSeparator = styled.span`
-  color: ${({ theme }) => parseColor(theme.colors.neutral700)};
-  font-size: 20px;
-  user-select: none;
+  width: 14px;
+  border: 1px solid ${({ theme }) => parseColor(theme.colors.neutral700)};
+  border-radius: 8px;
 `
 
 export const OtpSeparatorContainer = styled.div`
@@ -67,7 +73,6 @@ export const OtpSeparatorContainer = styled.div`
 
 export const OptHelperText = styled.span<{ $error?: boolean }>`
   display: block;
-  margin-top: ${spacing.spacing8}px;
   font-size: ${fontSize.fontSize12}px;
   line-height: ${lineHeight.lineHeight16}px;
   color: ${({ theme, $error }) =>

package/components/InputOpt/InputOpt.tsx

@@ -6,6 +6,7 @@ import {
   OtpSeparator,
   OptHelperText,
   OtpSeparatorContainer,
+  OptContainer,
 } from './InputOpt.styles'
 
 import { 
@@ -17,6 +18,9 @@ import {
   focusFirstEmpty
 } from './utils'
 
+import Text from '../Text'
+import RequiredAsterisk from '../RequiredAsterisk'
+
 const InputOpt: React.FC<InputOptProps> = ({
   length = 6,
   value,
@@ -25,7 +29,8 @@ const InputOpt: React.FC<InputOptProps> = ({
   autoFocus = true,
   disabled = false,
   placeholderChar = '',
-  name = 'otp',
+  label,
+  requiredSymbol = false,
   className,
   inputMode = 'numeric',
   helperText,
@@ -105,9 +110,19 @@ const InputOpt: React.FC<InputOptProps> = ({
   }
 
   return (
-    <>
+    <OptContainer
+      className={`${className || ''} ${error ? 'error' : ''}`.trim()}
+    >
+      {label && (
+          <Text
+            size="body02"
+            tag='label'
+            weight='fontWeight500'
+          >
+            {label} {requiredSymbol && <RequiredAsterisk/> }
+          </Text>
+      )}
       <OptWrapper
-        className={`${className || ''} ${error ? 'error' : ''}`.trim()}
         aria-disabled={disabled}
         aria-invalid={!!error}
         role="group"
@@ -134,7 +149,7 @@ const InputOpt: React.FC<InputOptProps> = ({
             />
             {(i + 1) % 2 === 0 && i < length - 1 && (
               <OtpSeparatorContainer>
-                <OtpSeparator>-</OtpSeparator>
+                <OtpSeparator/>
               </OtpSeparatorContainer>
             )}
           </React.Fragment>
@@ -146,7 +161,7 @@ const InputOpt: React.FC<InputOptProps> = ({
           {helperText}
         </OptHelperText>
       )}
-    </>
+    </OptContainer>
   )
 }
 

package/components/InputOpt/InputOpt.types.ts

@@ -6,7 +6,8 @@ export interface InputOptProps {
   autoFocus?: boolean;
   disabled?: boolean;
   placeholderChar?: string;
-  name?: string;
+  label?: string;
+  requiredSymbol?: boolean;
   className?: string;
   inputMode?: 'numeric' | 'text';
   helperText?: string;

package/components/RequiredAsterisk/RequiredAsterisk.style.ts

@@ -0,0 +1,6 @@
+import { parseColor } from "package/utils"
+import styled from "styled-components"
+
+export const StyledAsterisk = styled.span`
+    color: ${({ theme }) => parseColor(theme.colors.primary)};
+`

package/components/RequiredAsterisk/RequiredAsterisk.tsx

@@ -0,0 +1,7 @@
+import { StyledAsterisk } from "./RequiredAsterisk.style";
+
+const RequiredAsterisk = () => {
+  return <StyledAsterisk>*</StyledAsterisk>;
+};
+
+export default RequiredAsterisk;

package/components/RequiredAsterisk/index.ts

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

package/components/Select/Select.states.tsx

@@ -1,27 +1,30 @@
 import { parseColor } from '../../utils'
 import { useTheme } from 'styled-components'
 import { TextFieldStates } from './Select.types'
+import { shadow } from '@liguelead/foundation'
 
 export const SelectStates = (state: keyof TextFieldStates) => {
     const theme = useTheme()
     const states: TextFieldStates = {
         error: {
             input: `
-                border: 1px solid ${parseColor(theme.colors.danger100)};
+                border: 1px solid ${parseColor(theme.colors.danger200)};
                 color: ${parseColor(theme.colors.textDark)};
                 &:focus {
-                    border-color: ${parseColor(theme.colors.danger100)};
+                    border-color: ${parseColor(theme.colors.danger200)};
+                    box-shadow: ${shadow.errorShadow};
                 }
             `,
-            label: `color: ${parseColor(theme.colors.danger100)};`,
-            helperText: `color: ${parseColor(theme.colors.danger100)};`
+            label: `color: ${parseColor(theme.colors.textDark)};`,
+            helperText: `color: ${parseColor(theme.colors.danger200)};`
         },
         default: {
             input: `
-                border: 1px solid ${parseColor(theme.colors.neutral700)};
+                border: 1px solid ${parseColor(theme.colors.neutral400)};
                 color: ${parseColor(theme.colors.textDark)};
                 &:focus {
-                    border-color: ${parseColor(theme.colors.primary)};
+                    border-color: ${parseColor(theme.colors.neutral700)};
+                    box-shadow: ${shadow.focusShadow};
                 }
             `,
             label: `color: ${parseColor(theme.colors.textDark)};`,
@@ -32,7 +35,7 @@ export const SelectStates = (state: keyof TextFieldStates) => {
                 border: 1px solid ${parseColor(theme.colors.neutral400)};
                 color: ${parseColor(theme.colors.neutral600)};
             `,
-            label: `color: ${parseColor(theme.colors.neutral1100)};`,
+            label: `color: ${parseColor(theme.colors.textDark)};`,
             helperText: `color: ${parseColor(theme.colors.textMedium)};`
         }
     }

package/components/Select/Select.styles.ts

@@ -22,14 +22,13 @@ export const InputWrapper = styled.div`
 
 export const Label = styled.label`
     display: block;
-    font-weight: ${fontWeight.fontWeight600};
-    margin-bottom: ${spacing.spacing4}px;
+    font-weight: ${fontWeight.fontWeight500};
     font-size: ${fontSize.fontSize14}px;
 `
 
 export const HelperText = styled.span<{ error?: boolean }>`
     font-size: ${fontSize.fontSize12}px;
-    line-height: ${lineHeight.lineHeight12}px;
+    line-height: ${lineHeight.lineHeight16}px;
 `
 
 export const IconWrapper = styled.div<{ 
@@ -145,6 +144,9 @@ export const BorderWrapper = styled.div`
 export const Wrapper = styled.div<StyledInputProps>`
     position: relative;
     width: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: ${spacing.spacing4}px;
     cursor: pointer;
     ${({ $themefication, size }) => `
         ${StyledInput} {

package/components/Select/Select.tsx

@@ -15,6 +15,7 @@ import { SelectStates } from './Select.states'
 import { textFieldSizes } from './Select.sizes'
 import { SelectProps, StateInterface } from './Select.types'
 import getState from '../TextField/utils/getState'
+import RequiredAsterisk from '../RequiredAsterisk'
 
 const Select = forwardRef<HTMLInputElement, SelectProps>(
     (
@@ -26,8 +27,10 @@ const Select = forwardRef<HTMLInputElement, SelectProps>(
             leftIcon,
             size = 'md',
             options,
+            placeholder,
             className,
             disabled = false,
+            requiredSymbol = false,
             handleLeftIcon,
             register
         },
@@ -60,10 +63,12 @@ const Select = forwardRef<HTMLInputElement, SelectProps>(
             <Wrapper
                 className={className}
                 size={textFieldSize}
-                $themefication={textFieldState}>
+                $themefication={textFieldState}
+            >
                 <input
                     type="hidden"
                     value={selectValue}
+                    placeholder={placeholder}
                     ref={instance => {
                         if (typeof ref === 'function') {
                             ref(instance)
@@ -75,7 +80,9 @@ const Select = forwardRef<HTMLInputElement, SelectProps>(
                     onChange={register?.onChange}
                     onBlur={register?.onBlur}
                 />
-                <Label>{label}</Label>
+                <Label>
+                    {label} {requiredSymbol && <RequiredAsterisk />}
+                </Label>
                 {disabled ? (
                     <InputWrapper className="is-disabled">
                         {leftIcon && (

package/components/Select/Select.types.ts

@@ -4,6 +4,8 @@ export interface SelectProps<TFieldValues extends FieldValues = FieldValues> {
     disabled?: boolean
     error?: TFieldValues
     label?: string
+    placeholder?: string
+    requiredSymbol? :boolean
     options: Array<{ label: string; value: string }>
     value?: string
     defaultValue?: string
@@ -17,7 +19,7 @@ export interface SelectProps<TFieldValues extends FieldValues = FieldValues> {
 
 export interface StateInterface {
     input: string
-    label: string
+    label?: string
     helperText: string
 }
 

package/components/TextField/TextField.states.tsx

@@ -25,8 +25,8 @@ export const TextFieldStates = (state: keyof TextFieldStates) => {
                     box-shadow: ${shadow.errorShadow};
                 }
             `,
-            label: `color: ${parseColor(theme.colors.danger100)};`,
-            helperText: `color: ${parseColor(theme.colors.danger100)};`,
+            label: `color: ${parseColor(theme.colors.textDark)};`,
+            helperText: `color: ${parseColor(theme.colors.danger200)};`,
         },
         default: {
             input: `
@@ -46,6 +46,7 @@ export const TextFieldStates = (state: keyof TextFieldStates) => {
                 box-shadow: 0 1px 2px 0 #0000000D;
                 opacity: 0.5;
             `,
+            label: `color: ${parseColor(theme.colors.textDark)};`,
             helperText: `color: ${parseColor(theme.colors.neutral500)};`,
         }
     }

package/components/TextField/TextField.styles.ts

@@ -21,8 +21,7 @@ export const InputWrapper = styled.div`
 
 export const Label = styled.label`
     display: block;
-    font-weight: ${fontWeight.fontWeight600};
-    margin-bottom: ${spacing.spacing4}px;
+    font-weight: ${fontWeight.fontWeight500};
     font-size: ${fontSize.fontSize14}px;
 `
 
@@ -65,6 +64,9 @@ export const StyledInput = styled.input.withConfig({
 export const Wrapper = styled.div<StyledInputProps>`
     position: relative;
     width: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: ${spacing.spacing4}px;
     ${({ $themefication, size }) => `
         ${StyledInput} {
             ${$themefication.input}
@@ -75,11 +77,7 @@ export const Wrapper = styled.div<StyledInputProps>`
             ${size.label}
         }
         ${HelperText} {
-            ${$themefication.label} 
+            ${$themefication.helperText}
         }
     `}
 `
-
-export const RequiredAsterisk = styled.span`
-    color: ${({ theme }) => parseColor(theme.colors.primary)};
-`

package/components/TextField/TextField.tsx

@@ -2,17 +2,17 @@ import React, { forwardRef, useState } from 'react'
 import { TextFieldProps } from './TextField.types'
 import { StateInterface, TextFieldStates } from './TextField.states'
 import {
-    Label,
     HelperText,
     IconWrapper,
     InputWrapper,
+    Label,
     StyledInput,
-    Wrapper,
-    RequiredAsterisk
+    Wrapper
 } from './TextField.styles'
 import { textFieldSizes } from './TextField.sizes'
 import { Eye, EyeClosed } from '@phosphor-icons/react'
 import  getState  from './utils/getState'
+import RequiredAsterisk from '../RequiredAsterisk'
 
 const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
     (
@@ -31,6 +31,7 @@ const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
             type = 'text',
             value,
             register,
+            requiredSymbol = false,
             placeholder,
             ...props
         },
@@ -72,7 +73,7 @@ const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
                 $themefication={textFieldState}
             >
                 <Label>
-                    {label} {props.required && <RequiredAsterisk>*</RequiredAsterisk>}
+                    {label} {requiredSymbol && <RequiredAsterisk />}
                 </Label>
                 <InputWrapper>
                     {leftIcon && (

package/components/TextField/TextField.types.ts

@@ -17,6 +17,7 @@ export interface TextFieldProps<TFieldValues extends FieldValues = FieldValues>
     leftIcon?: React.ReactNode
     rightIcon?: React.ReactNode
     error?: TFieldValues
+    requiredSymbol?: boolean
     type?: 'text' | 'password' | 'email' | 'number'
     register?: UseFormRegisterReturn<string>
 }

package/components/Toaster/Toaster.style.ts

@@ -0,0 +1,100 @@
+import styled, { css } from 'styled-components'
+import { parseColor } from '../../utils'
+import { ToastContainer } from 'react-toastify'
+
+export const ToasterStyledContainer = styled(ToastContainer)`
+    ${({ theme }) => css`
+
+    /* Colored Theme */
+
+    .Toastify__toast-theme--colored.Toastify__toast--success {
+      background-color: ${parseColor(theme.colors?.success100)};
+      color: ${parseColor(theme.colors?.textLight)};
+
+      .Toastify__progress-bar-theme--colored {
+        background: ${parseColor(theme.colors?.success50)};
+        opacity: 0.5;
+      }
+    }
+
+    .Toastify__toast-theme--colored.Toastify__toast--error {
+      background-color: ${parseColor(theme.colors?.danger200)};
+      color: ${parseColor(theme.colors?.textLight)};
+
+      .Toastify__progress-bar-theme--colored {
+        background: ${parseColor(theme.colors?.danger50)};
+        opacity: 0.5;
+      }
+    }
+
+    .Toastify__toast-theme--colored.Toastify__toast--warning {
+      background-color: ${parseColor(theme.colors?.warning100)};
+      color: ${parseColor(theme.colors?.textDark)};
+
+      .Toastify__progress-bar-theme--colored {
+        background: ${parseColor(theme.colors?.warning50)};
+        opacity: 0.5;
+      }
+    }
+
+    .Toastify__toast-theme--colored.Toastify__toast--info {
+      background-color: ${parseColor(theme.colors?.info100)};
+      color: ${parseColor(theme.colors?.textLight)};
+
+      .Toastify__progress-bar-theme--colored {
+        background: ${parseColor(theme.colors?.info50)};
+        opacity: 0.5;
+      }
+    }
+
+    /* Light Theme */
+
+    .Toastify__toast-theme--light.Toastify__toast--success {
+      color: ${parseColor(theme.colors?.textDark)};
+
+      .Toastify__toast-icon {
+        color: ${parseColor(theme.colors?.success100)};
+      }
+      
+      .Toastify__progress-bar-theme--light {
+        background: ${parseColor(theme.colors?.success100)};
+      }
+    }
+
+    .Toastify__toast-theme--light.Toastify__toast--error {
+      color: ${parseColor(theme.colors?.textDark)};  
+
+      .Toastify__toast-icon {
+        color: ${parseColor(theme.colors?.danger200)};
+      }
+      .Toastify__progress-bar-theme--light {
+        background: ${parseColor(theme.colors?.danger200)};
+      }
+    }
+
+    .Toastify__toast-theme--light.Toastify__toast--warning {
+      color: ${parseColor(theme.colors?.textDark)};  
+
+      .Toastify__toast-icon {
+        color: ${parseColor(theme.colors?.warning100)};
+      }
+
+      .Toastify__progress-bar-theme--light {
+        background: ${parseColor(theme.colors?.warning100)};
+      }
+    }
+
+    .Toastify__toast-theme--light.Toastify__toast--info {
+      color: ${parseColor(theme.colors?.textDark)};  
+
+      .Toastify__toast-icon {
+        color: ${parseColor(theme.colors?.info100)};
+      }
+
+      .Toastify__progress-bar-theme--light {
+        background: ${parseColor(theme.colors?.info100)};
+      }
+    }
+
+  `}
+`

package/components/Toaster/Toaster.ts

@@ -0,0 +1,26 @@
+import { toast, ToastOptions } from "react-toastify"
+
+const defaultOptions: ToastOptions = {
+  position: 'top-right',
+  hideProgressBar: false,
+  closeOnClick: true,
+  pauseOnHover: true,
+  draggable: true,
+  theme: 'light'
+}
+
+const Toaster = {
+  success: (message: string, options?: ToastOptions) =>
+    toast.success(message, { ...defaultOptions, ...options }),
+
+  error: (message: string, options?: ToastOptions) =>
+    toast.error(message, { ...defaultOptions, ...options }),
+
+  warning: (message: string, options?: ToastOptions) =>
+    toast.warning(message, { ...defaultOptions, ...options }),
+
+  info: (message: string, options?: ToastOptions) =>
+    toast.info(message, { ...defaultOptions, ...options })
+}
+
+export default Toaster;

package/components/Toaster/ToasterProvider.tsx

@@ -0,0 +1,10 @@
+import 'react-toastify/dist/ReactToastify.css'
+import { ToasterStyledContainer } from './Toaster.style'
+
+const ToastProvider = () => {
+  return(
+      <ToasterStyledContainer newestOnTop />
+  ) 
+}
+
+export default ToastProvider;

package/components/Toaster/index.ts

@@ -0,0 +1,2 @@
+export { default as ToastProvider } from './ToasterProvider';
+export { default as Toaster } from './Toaster';

package/components/index.ts

@@ -12,3 +12,4 @@ export { default as Select } from './Select'
 export { default as SegmentedButton } from './SegmentedButton'
 export { default as LinkButton } from './LinkButton'
 export { default as RadioButton } from './RadioButton'
+export { ToastProvider, Toaster } from './Toaster'

package/package.json

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