@liguelead/design-system 0.0.16 → 0.0.17

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

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