@dafaz-ui/react 4.0.19 → 6.0.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dafaz-ui/react",
-  "version": "4.0.19",
+  "version": "6.0.5",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",

package/src/components/Box/styles.ts

@@ -1,37 +1,91 @@
-import type { CSS } from '@stitches/react'
 import { styled } from '../../styles'
-import type { ComponentProps, ElementType } from 'react'
+import type { ComponentProps, ElementType, CSSProperties } from 'react'
 
 export const BoxUI = styled('div', {
   padding: '$4',
 
   variants: {
+    withShadow: {
+      true: {
+        boxShadow: '1px 1px 2px $colors$gray800',
+      },
+    },
     stretch: {
       true: {
         width: '100%',
+        '> div': {
+          paddingLeft: 0,
+        },
       },
       false: {
-        width: '18.4375rem',
+        width: '24.5rem',
+
+        '> div': {
+          paddingLeft: 0,
+        },
       },
     },
-    dark: {
-      true: {
+    color: {
+      dark: {
         background: '$gray800',
       },
-      false: {
+      primary: {
+        background: '$dafaz400',
+      },
+      secondary: {
+        background: '$dafaz800',
+      },
+      light: {
+        background: '$dafaz100',
+      },
+      transparent: {
         background: 'transparent',
       },
     },
+    rounded: {
+      px: {
+        borderRadius: '$px',
+      },
+      sm: {
+        borderRadius: '$sm',
+      },
+      md: {
+        borderRadius: '$md',
+      },
+      full: {
+        borderRadius: '$full',
+      },
+    },
+    direction: {
+      none: {},
+      row: {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+      },
+      column: {
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center',
+      },
+    },
   },
   defaultVariants: {
-    stretch: false,
-    dark: false,
+    stretch: true,
+    color: 'dark',
+    rounded: 'px',
+    withShadow: false,
+    direction: 'row',
   },
 })
 
 export interface BoxUIProps extends ComponentProps<typeof BoxUI> {
   as?: ElementType
   stretch?: boolean
-  dark?: boolean
-  css?: CSS
+  color?: 'dark' | 'primary' | 'secondary' | 'light' | 'transparent'
+  rounded?: 'px' | 'sm' | 'md' | 'full'
+  withShadow?: boolean
+  style?: CSSProperties
+  direction?: 'row' | 'column' | 'none'
 }

package/src/components/Button/index.tsx

@@ -3,7 +3,7 @@ import { ButtonUI, ButtonUIProps } from './styles'
 
 interface ButtonProps {
   children: ReactNode
-  type: string
+  type?: string
   form?: string
 }
 

package/src/components/Button/styles.ts

@@ -1,4 +1,4 @@
-import type { ComponentProps, ElementType } from 'react'
+import type { ComponentProps, CSSProperties, ElementType } from 'react'
 import { styled } from '../../styles'
 
 /** Primary UI component for user interaction */
@@ -11,6 +11,7 @@ export const ButtonUI = styled('button', {
   textAlign: 'center',
   minWidth: 120,
   boxSizing: 'border-box',
+  boxShadow: '3px 3px 2px -2px $colors$gray400',
 
   display: 'flex',
   alignItems: 'center',
@@ -20,6 +21,8 @@ export const ButtonUI = styled('button', {
 
   cursor: 'pointer',
 
+  transition: 'background 0.2s linear',
+
   '&:disabled': {
     cursor: 'not-allowed',
   },
@@ -29,10 +32,9 @@ export const ButtonUI = styled('button', {
       primary: {
         color: '$white',
         background: '$dafaz600',
-        opacity: 0.8,
 
         '&:not(:disabled):hover': {
-          opacity: 1,
+          background: '$dafaz400',
         },
 
         '&:disabled': {
@@ -40,13 +42,15 @@ export const ButtonUI = styled('button', {
         },
       },
       secondary: {
+        transition: 'border, color 0.2s linear',
+
         fontWeight: '$medium',
         color: '$dafaz600',
         border: '2px solid $dafaz600',
-        opacity: 0.8,
 
         '&:not(:disabled):hover': {
-          opacity: 1,
+          color: '$dafaz400',
+          border: '2px solid $dafaz400',
         },
 
         '&:disabled': {
@@ -55,11 +59,13 @@ export const ButtonUI = styled('button', {
         },
       },
       tertiary: {
+        transition: 'color 0.2s linear',
+        boxShadow: 'none',
         fontWeight: '$medium',
-        color: '$gray400',
+        color: '$gray100',
 
         '&:not(:disabled):hover': {
-          color: '$gray800',
+          opacity: 0.9,
         },
 
         '&:disabled': {
@@ -114,4 +120,5 @@ export interface ButtonUIProps extends ComponentProps<typeof ButtonUI> {
   variant?: 'primary' | 'secondary' | 'tertiary'
   //** Flat mode */
   flat?: boolean
+  style?: CSSProperties
 }

package/src/components/CheckBox/index.tsx

@@ -1,52 +1,36 @@
-import { forwardRef, useEffect, useState, type ElementRef } from 'react'
+import { forwardRef, useId, type ElementRef } from 'react'
 import { CheckBoxIndicator, CheckBoxUI, Label, CheckboxIUProps } from './styles'
 import { Check } from '@phosphor-icons/react'
 
-interface CheckboxProps extends CheckboxIUProps {
-  id: string
+interface CheckboxItemProps extends CheckboxIUProps {
   label: string
-  checked: boolean
-  value: string | number | readonly string[] | undefined
-  onCheckedChange: (checked: boolean) => void
+  handleOnChange?: (checked: boolean, id?: string) => void
 }
 
 export const CheckBox = forwardRef<
   ElementRef<typeof CheckBoxUI>,
-  CheckboxProps
+  CheckboxItemProps
 >(
   (
     {
-      id,
       label,
       size,
       disabled = false,
-      checked = false,
-      onCheckedChange,
-      value,
+      handleOnChange,
       ...props
-    }: CheckboxProps,
+    }: CheckboxItemProps,
     ref,
   ) => {
-    const [checkValue, setCheckValue] = useState(checked ? value : undefined)
-
-    useEffect(() => {
-      if (checked) {
-        setCheckValue(value)
-      } else {
-        setCheckValue(undefined)
-      }
-    }, [checked, value])
+    const htmlId = useId()
 
     return (
-      <Label htmlFor={id} disabled={disabled} size={size}>
+      <Label htmlFor={htmlId} disabled={disabled} size={size}>
         <CheckBoxUI
           ref={ref}
-          checked={checked}
-          onCheckedChange={onCheckedChange}
           disabled={disabled}
-          id={id}
+          id={htmlId}
           size={size}
-          value={checkValue}
+          onCheckedChange={handleOnChange}
           {...props}
         >
           <CheckBoxIndicator asChild size={size}>

package/src/components/CheckBox/styles.ts

@@ -1,6 +1,6 @@
 import * as Checkbox from '@radix-ui/react-checkbox'
 import { styled, keyframes } from '../../styles'
-import type { ComponentProps } from 'react'
+import type { ComponentProps, CSSProperties } from 'react'
 
 export const CheckBoxUI = styled(Checkbox.Root, {
   all: 'unset',
@@ -14,6 +14,7 @@ export const CheckBoxUI = styled(Checkbox.Root, {
   alignItems: 'center',
   transition: 'border 0.2s linear',
   border: '2px solid $gray400',
+  boxShadow: '1.3px 1.3px 4px -1px $colors$dafaz600',
 
   '&:focus,&[data-state="checked"]': {
     backgroundColor: '$dafaz600',
@@ -136,4 +137,5 @@ export const Label = styled('label', {
 export interface CheckboxIUProps extends ComponentProps<typeof CheckBoxUI> {
   size?: 'sm' | 'md' | 'lg'
   disabled?: boolean
+  style?: CSSProperties
 }

package/src/components/Heading/index.tsx

@@ -1,7 +1,7 @@
 import type { ReactNode } from 'react'
 import { HeadingUI, HeadingUIProps } from './styles'
 
-interface HeadingProps {
+export interface HeadingProps {
   children: ReactNode
 }
 

package/src/components/Heading/styles.ts

@@ -1,4 +1,4 @@
-import { ComponentProps, ElementType } from 'react'
+import { ComponentProps, ElementType, type CSSProperties } from 'react'
 import { styled } from '../../styles'
 
 export const HeadingUI = styled('h2', {
@@ -7,30 +7,44 @@ export const HeadingUI = styled('h2', {
   margin: 0,
 
   variants: {
-    mode: {
-      default: {
-        color: '$dafaz400',
-      },
+    size: {
+      sm: { fontSize: '$2xl' },
+      md: { fontSize: '$3xl' },
+      lg: { fontSize: '$4xl' },
+      xl: { fontSize: '$5xl' },
+      '2xl': { fontSize: '$6xl' },
+      '3xl': { fontSize: '$7xl' },
+      '4xl': { fontSize: '$8xl' },
+      '5xl': { fontSize: '$9xl' },
+      '6xl': { fontSize: '$10xl' },
+    },
+    color: {
       white: {
         color: '$white',
       },
-    },
-    size: {
-      sm: { fontSize: '$lg' },
-      md: { fontSize: '$xl' },
-      lg: { fontSize: '$2xl' },
-      xl: { fontSize: '3rem' },
-      '2xl': { fontSize: '4rem' },
+      black: {
+        color: 'black',
+      },
+      primary: {
+        color: '$dafaz400',
+      },
+      lightGray: {
+        color: '$gray400',
+      },
+      darkGray: {
+        color: '$gray800',
+      },
     },
   },
   defaultVariants: {
-    mode: 'default',
+    color: 'white',
     size: 'lg',
   },
 })
 
 export interface HeadingUIProps extends ComponentProps<typeof HeadingUI> {
   as?: ElementType
-  size?: 'sm' | 'md' | 'lg' | 'xl' | '2xl'
-  mode?: 'default' | 'white'
+  size?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl'
+  color: 'white' | 'black' | 'primary' | 'lightGray' | 'darkGray'
+  style?: CSSProperties
 }

package/src/components/MultiSelect/index.tsx

@@ -0,0 +1,232 @@
+import { CaretDown, X } from '@phosphor-icons/react'
+import { CheckBox } from '../CheckBox'
+import { SelectUI, SelectContainerUI, SelectUIProps } from './styles'
+
+import {
+  forwardRef,
+  useEffect,
+  useState,
+  type ChangeEvent,
+  type ElementRef,
+  type MouseEvent,
+} from 'react'
+
+interface Item {
+  id: string
+  label: string
+  value: string
+}
+
+interface SelectContainerProps extends SelectUIProps {
+  id: string
+  items: Item[]
+  placeholder?: string
+  name?: string
+  value?: string[]
+  onChange?: (e: ChangeEvent<HTMLInputElement>) => void
+}
+
+export const MultiSelect = forwardRef<
+  ElementRef<typeof SelectUI>,
+  SelectContainerProps
+>(
+  (
+    { id, size, items, placeholder, onChange, ...props }: SelectContainerProps,
+    ref,
+  ) => {
+    const [values, setValues] = useState([
+      { id: '', label: '', value: '', isChecked: false },
+    ])
+    const [selectedValue, setSelectedValue] = useState([''])
+    const [clickClass, setClickClass] = useState(false)
+
+    useEffect(() => {
+      items.map((item) =>
+        setValues((state) => {
+          const values = state.filter((item) => item.id !== '')
+          return [
+            ...values,
+            {
+              id: item.id,
+              label: item.label,
+              value: item.value,
+              isChecked: false,
+            },
+          ].sort((a, b) => (a.label > b.label ? 1 : -1))
+        }),
+      )
+    }, [items])
+
+    useEffect(() => {
+      setClickClass(false)
+      values.map((item) => {
+        if (item.isChecked) {
+          setSelectedValue((state) => {
+            const alreadyChecked = state.find((obj) => obj === item.value)
+            if (alreadyChecked) {
+              return state
+            } else {
+              return [...state, item.value]
+            }
+          })
+        } else {
+          setSelectedValue((state) => {
+            const itemsChecked = state.filter((obj) => obj !== item.value)
+            return itemsChecked
+          })
+        }
+      })
+    }, [values, items, setValues])
+
+    function handleOnValueChange(id: string) {
+      setClickClass(() => false)
+      setValues((state) => {
+        const items = state.filter((item) => item.id !== id)
+        const item = state.find((item) => item.id === id)
+
+        if (item) {
+          return [
+            {
+              id: item.id,
+              label: item.label,
+              value: item.value,
+              isChecked: !item.isChecked,
+            },
+            ...items,
+          ].sort((a, b) => (a.label > b.label ? 1 : -1))
+        }
+        return state
+      })
+
+      values.map((item) => {
+        if (item.isChecked) {
+          setSelectedValue((state) => {
+            const alreadyChecked = state.find((obj) => obj === item.value)
+            if (alreadyChecked) {
+              return state
+            } else {
+              return [...state, item.value]
+            }
+          })
+        } else {
+          setSelectedValue((state) => {
+            const itemsChecked = state.filter((obj) => obj !== item.value)
+            return itemsChecked
+          })
+        }
+      })
+    }
+
+    function handleOnClick() {
+      setClickClass((state) => !state)
+    }
+
+    function handleRemoveItem(e: MouseEvent<HTMLElement>, id: string) {
+      handleOnValueChange(id)
+    }
+
+    function updateSelectComponent(item: string) {
+      const checkedItem = selectedValue.find((obj) => obj === item)
+
+      if (checkedItem) {
+        return selectedValue.filter((obj) => obj !== item)
+      } else {
+        return [...selectedValue.filter((obj) => obj !== ''), item].sort(
+          (a, b) => (a > b ? 1 : -1),
+        )
+      }
+    }
+
+    const itemsChecked = values
+      .filter((item) => item.isChecked === true)
+      .sort((a, b) => (a.label > b.label ? 1 : -1))
+
+    return (
+      <SelectUI
+        ref={ref}
+        id={id}
+        size={size}
+        onClick={handleOnClick}
+        onBlur={handleOnClick}
+        value={selectedValue}
+        onChange={onChange}
+        className={clickClass ? 'clicked' : ''}
+        {...props}
+      >
+        {(itemsChecked.length > 0 &&
+          itemsChecked.map((item) => {
+            return (
+              <div key={`opt:${item.id}`}>
+                <div
+                  style={{
+                    display: 'flex',
+                    justifyContent: 'space-between',
+                    width: '100%',
+                    marginTop: '0.2rem',
+                    alignItems: 'center',
+                  }}
+                >
+                  <span>{item.label}</span>
+                  <button
+                    style={{
+                      all: 'unset',
+                      display: 'flex',
+                      alignItems: 'center',
+                      paddingLeft: '1rem',
+                    }}
+                    type="button"
+                    onClick={(e) => handleRemoveItem(e, item.id)}
+                  >
+                    <X size={24} weight="bold" />
+                  </button>
+                </div>
+              </div>
+            )
+          })) ||
+          (itemsChecked.length === 0 && (
+            <div>
+              <div
+                style={{
+                  display: 'flex',
+                  justifyContent: 'space-between',
+                  width: '100%',
+                  alignItems: 'center',
+                }}
+              >
+                <span style={{ opacity: 0.75 }}>{placeholder}</span>
+                <span
+                  style={{
+                    display: 'flex',
+                    alignItems: 'center',
+                    paddingLeft: '1rem',
+                  }}
+                >
+                  <CaretDown size={24} weight="bold" />
+                </span>
+              </div>
+            </div>
+          ))}
+
+        <SelectContainerUI onMouseOutCapture={handleOnClick}>
+          {values.map((item) => {
+            return (
+              <CheckBox
+                name={`chk${item.id}`}
+                size={size}
+                key={item.id}
+                label={item.label}
+                checked={item.isChecked}
+                value={updateSelectComponent(item.value)}
+                handleOnChange={async () => {
+                  handleOnValueChange(item.id)
+                }}
+              />
+            )
+          })}
+        </SelectContainerUI>
+      </SelectUI>
+    )
+  },
+)
+
+MultiSelect.displayName = 'MultiSelect'

package/src/components/MultiSelect/styles.ts

@@ -0,0 +1,116 @@
+import { styled } from '../../styles'
+import type { ComponentProps, CSSProperties } from 'react'
+
+export const SelectUI = styled('div', {
+  width: '100%',
+  maxWidth: '24.5rem',
+
+  position: 'relative',
+  display: 'inline-block',
+
+  fontFamily: '$app',
+  color: '$white',
+  fontWeight: '$regular',
+  cursor: 'pointer',
+
+  margin: 0,
+  backgroundColor: 'transparent',
+  borderBottom: '2px solid $dafaz600',
+  borderRadius: '$md',
+  boxSizing: 'border-box',
+  transition: 'border 0.2s linear',
+
+  padding: '$1 $2',
+
+  boxShadow: '0 3px 2px -2px $colors$gray400',
+
+  '&:hover': {
+    borderBottom: '2px solid $dafaz400',
+  },
+
+  '&.clicked': {
+    borderBottom: '2px solid $dafaz400',
+
+    '&:hover': {
+      '> div': {
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'start',
+        gap: '$3',
+      },
+    },
+  },
+
+  variants: {
+    disabled: {
+      true: {
+        opacity: 0.5,
+        cursor: 'not-allowed',
+      },
+    },
+    size: {
+      lg: {
+        fontSize: '$xl',
+        svg: {
+          width: '$5',
+          height: '$5',
+        },
+      },
+      md: {
+        fontSize: '$lg',
+        svg: {
+          width: '$4',
+          height: '$4',
+        },
+      },
+      sm: {
+        fontSize: '$md',
+        svg: {
+          width: '$3',
+          height: '$3',
+        },
+      },
+    },
+  },
+  defaultVariants: {
+    disabled: false,
+    size: 'lg',
+  },
+})
+
+export interface SelectUIProps extends ComponentProps<typeof SelectUI> {
+  size?: 'sm' | 'md' | 'lg'
+  disabled?: boolean
+  style?: CSSProperties
+}
+
+export const SelectContainerUI = styled('div', {
+  marginTop: '0.4rem',
+  marginLeft: '-0.5rem',
+  padding: '$3 $2',
+
+  border: '1px solid $gray400',
+  boxSizing: 'border-box',
+  borderRadius: '$md',
+
+  display: 'none',
+
+  position: 'absolute',
+  zIndex: 999,
+  minWidth: '100%',
+  maxWidth: '24.5rem',
+
+  background: '$gray800',
+
+  fontFamily: '$app',
+  color: '$white',
+  fontWeight: '$regular',
+  cursor: 'pointer',
+
+  '&:hover': {
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'start',
+    gap: '$3',
+  },
+})