@dafaz-ui/react 4.0.19 → 7.0.0

package/src/components/MultiSelect/styles.ts

@@ -0,0 +1,146 @@
+import { styled } from '../../styles'
+import type { ComponentProps, CSSProperties } from 'react'
+
+export const Button = styled('button', {
+  backgroundColor: 'transparent',
+  border: 'none',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  color: 'white',
+  marginBottom: '-3px',
+
+  cursor: 'pointer',
+
+  zIndex: 5,
+
+  variants: {
+    size: {
+      lg: {
+        height: '$10',
+        width: '$10',
+      },
+      md: {
+        height: '$8',
+        width: '$8',
+      },
+      sm: {
+        height: '$6',
+        width: '$6',
+      },
+    },
+  },
+  defaultVariants: {
+    size: 'lg',
+  },
+})
+
+export const SelectUI = styled('div', {
+  zIndex: 3,
+  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',
+
+  boxShadow: '0 3px 2px -2px $colors$gray400',
+
+  '&:hover': {
+    borderBottom: '2px solid $dafaz400',
+  },
+
+  '&.clicked': {
+    borderBottom: '2px solid $dafaz400',
+  },
+
+  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', {
+  padding: '$3 $2',
+  marginTop: '2px',
+
+  border: '1px solid $gray400',
+  boxSizing: 'border-box',
+  borderRadius: '$md',
+
+  position: 'absolute',
+  zIndex: 2,
+  minWidth: '100%',
+  maxWidth: '24.5rem',
+
+  background: '$gray800',
+
+  fontFamily: '$app',
+  color: '$white',
+  fontWeight: '$regular',
+  cursor: 'pointer',
+
+  '&.closed': {
+    display: 'none',
+  },
+
+  '&.opened': {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '$3',
+  },
+})
+
+export interface SelectContainerUIProps
+  extends ComponentProps<typeof SelectContainerUI> {
+  className?: string
+  style?: CSSProperties
+}

package/src/components/Radio/RadioItem/index.tsx

@@ -6,6 +6,7 @@ import {
   RadioItemUI,
   type RadioItemUIProps,
 } from './styles'
+import { useId } from 'react'
 
 interface RadioItemProps {
   label: string
@@ -13,19 +14,20 @@ interface RadioItemProps {
 
 export function RadioItem({
   label,
-  id,
   size,
   disabled = false,
   ...props
 }: RadioItemProps & RadioItemUIProps) {
+  const htmlId = useId()
+
   return (
-    <RadioItemContainer key={id}>
-      <RadioItemUI disabled={disabled} id={id} {...props} size={size}>
+    <RadioItemContainer>
+      <RadioItemUI disabled={disabled} id={htmlId} {...props} size={size}>
         <RadioIndicator asChild size={size}>
           <Check weight="bold" />
         </RadioIndicator>
       </RadioItemUI>
-      <Label disabled={disabled} htmlFor={id} size={size}>
+      <Label disabled={disabled} htmlFor={htmlId} size={size}>
         {label}
       </Label>
     </RadioItemContainer>

package/src/components/Radio/RadioItem/styles.ts

@@ -1,4 +1,4 @@
-import type { ComponentProps } from 'react'
+import type { ComponentProps, CSSProperties } from 'react'
 import { keyframes, styled } from '../../../styles'
 import * as RadioGroup from '@radix-ui/react-radio-group'
 
@@ -18,6 +18,8 @@ export const RadioItemUI = styled(RadioGroup.Item, {
   display: 'flex',
   justifyContent: 'center',
   alignItems: 'center',
+
+  boxShadow: '1.3px 1.3px 4px -1px $colors$dafaz600',
   transition: 'border 0.2s linear',
 
   '&:disabled': {
@@ -138,4 +140,5 @@ export const Label = styled('label', {
 
 export interface RadioItemUIProps extends ComponentProps<typeof RadioItemUI> {
   size?: 'sm' | 'md' | 'lg'
+  style?: CSSProperties
 }

package/src/components/Radio/index.tsx

@@ -1,5 +1,6 @@
 import { RadioUI, RadioUIProps } from './styles'
 import { RadioItem } from './RadioItem'
+import { forwardRef, type ElementRef } from 'react'
 
 interface Item {
   id: string
@@ -9,30 +10,44 @@ interface Item {
 
 interface RadioGroupProps extends RadioUIProps {
   items: Item[]
+  value?: string | undefined
+  onValueChange?: ((value: string) => void) | undefined
 }
 
-export function Radio({
-  items,
-  size,
-  disabled = false,
-  ...props
-}: RadioGroupProps) {
-  return (
-    <RadioUI disabled={disabled} {...props}>
-      {items.map((item) => {
-        return (
-          <RadioItem
-            key={item.id}
-            id={item.id}
-            label={item.label}
-            value={item.value}
-            size={size}
-            disabled={disabled}
-          />
-        )
-      })}
-    </RadioUI>
-  )
-}
+export const Radio = forwardRef<ElementRef<typeof RadioUI>, RadioGroupProps>(
+  (
+    {
+      items,
+      size,
+      disabled = false,
+      onValueChange,
+      value,
+      ...props
+    }: RadioGroupProps,
+    ref,
+  ) => {
+    return (
+      <RadioUI
+        ref={ref}
+        disabled={disabled}
+        {...props}
+        onValueChange={onValueChange}
+        value={value}
+      >
+        {items.map((item) => {
+          return (
+            <RadioItem
+              key={item.id}
+              label={item.label}
+              value={item.value}
+              size={size}
+              disabled={disabled}
+            />
+          )
+        })}
+      </RadioUI>
+    )
+  },
+)
 
 Radio.displayName = 'Radio'

package/src/components/Radio/styles.ts

@@ -1,4 +1,4 @@
-import type { ComponentProps } from 'react'
+import type { ComponentProps, CSSProperties } from 'react'
 import { styled } from '../../styles'
 import * as RadioGroup from '@radix-ui/react-radio-group'
 
@@ -27,4 +27,5 @@ export const RadioUI = styled(RadioGroup.Root, {
 
 export interface RadioUIProps extends ComponentProps<typeof RadioUI> {
   size?: 'sm' | 'md' | 'lg'
+  style?: CSSProperties
 }

package/src/components/Select/index.tsx

@@ -1,6 +1,7 @@
-import { SelectUI, SelectUIProps, OptionUI } from './styles'
+import { CaretDown } from '@phosphor-icons/react'
+import { SelectUI, SelectUIProps, OptionUI, SelectContainer } from './styles'
 
-import { ChangeEvent, useState } from 'react'
+import { forwardRef, ChangeEvent, useState, type ElementRef } from 'react'
 
 interface Item {
   id: string
@@ -8,45 +9,58 @@ interface Item {
   value: string
 }
 
-interface SelectProps {
+interface SelectProps extends SelectUIProps {
+  id: string
   items: Item[]
   placeholder?: string
 }
 
-export function Select({
-  size,
-  placeholder,
-  items,
-  ...props
-}: SelectUIProps & SelectProps) {
-  const [value, setValue] = useState('')
+export const Select = forwardRef<ElementRef<typeof SelectUI>, SelectProps>(
+  ({ id, size, placeholder, items, ...props }: SelectProps, ref) => {
+    const [value, setValue] = useState('')
 
-  function handleSelect(event: ChangeEvent<HTMLSelectElement>) {
-    setValue(() => {
-      return event.target.value
-    })
-  }
+    function handleSelect(event: ChangeEvent<HTMLSelectElement>) {
+      setValue(() => {
+        return event.target.value
+      })
+    }
 
-  return (
-    <SelectUI
-      size={size}
-      {...props}
-      value={value}
-      onChange={handleSelect}
-      style={{ opacity: value != '' ? 1 : 0.75 }}
-    >
-      <OptionUI className="placeholder" value="">
-        {placeholder}
-      </OptionUI>
-      {items.map((item) => {
-        return (
-          <OptionUI key={item.id} value={item.value}>
-            {item.label}
+    return (
+      <SelectContainer size={size}>
+        <SelectUI
+          id={id}
+          ref={ref}
+          size={size}
+          {...props}
+          value={value}
+          onChange={handleSelect}
+          style={{ opacity: value != '' ? 1 : 0.75 }}
+        >
+          <OptionUI className="placeholder" value="">
+            {placeholder}
           </OptionUI>
-        )
-      })}
-    </SelectUI>
-  )
-}
+          {items.map((item) => {
+            return (
+              <OptionUI key={item.id} value={item.value}>
+                {item.label}
+              </OptionUI>
+            )
+          })}
+        </SelectUI>
+        <span
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            paddingLeft: '1rem',
+            marginRight: '0.7rem',
+            marginLeft: '-3rem',
+          }}
+        >
+          <CaretDown size={24} weight="bold" />
+        </span>
+      </SelectContainer>
+    )
+  },
+)
 
 Select.displayName = 'Select'

package/src/components/Select/styles.ts

@@ -1,35 +1,102 @@
 import type { ComponentProps } from 'react'
 import { styled } from '../../styles'
 
-export const SelectUI = styled('select', {
-  gap: '$2',
-  overflow: 'hidden',
-
-  background: 'transparent',
-  border: 'none',
+export const SelectContainer = styled('div', {
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
 
   fontFamily: '$app',
   color: '$white',
-  fontWeight: '$regular',
+
   cursor: 'pointer',
 
+  width: '100%',
+  maxWidth: '24.5rem',
+
   boxSizing: 'border-box',
   borderRadius: '$md',
   borderBottom: '2px solid $dafaz600',
+  boxShadow: '0 3px 2px -2px $colors$gray400',
+
   transition: 'border 0.2s linear',
 
+  '&:disabled': {
+    cursor: 'not-allowed',
+    opacity: 0.5,
+  },
+
+  '&:active': {
+    borderBottom: '2px solid $dafaz400',
+  },
+
+  '&:hover': {
+    borderBottom: '2px solid $dafaz400',
+  },
+
+  variants: {
+    size: {
+      lg: {
+        fontSize: '$xl',
+        svg: {
+          width: '$5',
+          height: '$5',
+        },
+      },
+      md: {
+        fontSize: '$lg',
+        svg: {
+          width: '$4',
+          height: '$4',
+        },
+      },
+      sm: {
+        fontSize: '$sm',
+        svg: {
+          width: '$3',
+          height: '$3',
+        },
+      },
+    },
+  },
+  defaultVariants: {
+    size: 'lg',
+  },
+})
+
+interface SelectContainer extends ComponentProps<typeof SelectContainer> {
+  size?: 'sm' | 'md' | 'lg'
+}
+
+export const SelectUI = styled('select', {
+  zIndex: 1,
+  '-moz-appearance': 'none',
+  '-webkit-appearance': 'none',
+  appearance: 'none',
+
+  overflow: 'hidden',
+  background: 'transparent',
+  border: 'none',
+
+  fontFamily: '$app',
+  color: '$white',
+  fontWeight: '$regular',
+  cursor: 'pointer',
+
   width: '100%',
+  maxWidth: '24.5rem',
+
   margin: 0,
   padding: '$1 $1',
 
-  '&:focus': {
-    outline: 0,
-    borderBottom: '2px solid $dafaz400',
-  },
+  marginLeft: '$1',
 
   '&:disabled': {
     opacity: 0.5,
-    cursor: 'not-allowed',
+  },
+
+  '&:focus': {
+    outline: 0,
   },
 
   variants: {

package/src/components/Separator/index.tsx

@@ -0,0 +1,7 @@
+import { SeparatorUI, SeparatorUIProps } from './styles'
+
+export function Separator({ size, color, style, ...props }: SeparatorUIProps) {
+  return <SeparatorUI size={size} color={color} style={style} {...props} />
+}
+
+Separator.displayName = 'Separator'

package/src/components/Separator/styles.ts

@@ -0,0 +1,51 @@
+import type { ComponentProps, CSSProperties } from 'react'
+import { styled } from '../../styles'
+
+export const SeparatorUI = styled('hr', {
+  width: '100%',
+  borderStyle: 'solid',
+
+  variants: {
+    color: {
+      primary: {
+        borderColor: '$dafaz400',
+      },
+      lightGray: {
+        borderColor: '$gray100',
+      },
+      darkGray: {
+        borderColor: '$gray800',
+      },
+      white: {
+        borderColor: '$white',
+      },
+      black: {
+        borderColor: '$black',
+      },
+    },
+    size: {
+      lg: {
+        borderWidth: '2px',
+      },
+      md: {
+        borderWidth: '1px',
+      },
+      sm: {
+        borderWidth: '0.75px',
+      },
+      xs: {
+        borderWidth: '0.5px',
+      },
+    },
+  },
+  defaultVariants: {
+    color: 'primary',
+    size: 'lg',
+  },
+})
+
+export interface SeparatorUIProps extends ComponentProps<typeof SeparatorUI> {
+  size?: 'xs' | 'md' | 'sm' | 'lg'
+  color?: 'primary' | 'lightGray' | 'darkGray' | 'white' | 'black'
+  style?: CSSProperties
+}

package/src/components/Text/index.tsx

@@ -7,11 +7,12 @@ interface TextProps {
 
 export function Text({
   children,
-  size = 'md',
+  size,
+  color,
   ...props
 }: TextUIProps & TextProps) {
   return (
-    <TextUI size={size} {...props}>
+    <TextUI size={size} color={color} {...props}>
       {children}
     </TextUI>
   )

package/src/components/Text/styles.ts

@@ -1,11 +1,10 @@
-import { ComponentProps, ElementType } from 'react'
+import { ComponentProps, ElementType, type CSSProperties } from 'react'
 import { styled } from '../../styles'
 
 export const TextUI = styled('p', {
   fontFamily: '$web',
   lineHeight: '$base',
   margin: 0,
-  color: '$white',
 
   variants: {
     size: {
@@ -16,15 +15,37 @@ export const TextUI = styled('p', {
       lg: { fontSize: '$lg' },
       xl: { fontSize: '$xl' },
       '2xl': { fontSize: '$2xl' },
+      '3xl': { fontSize: '$3xl' },
+      '4xl': { fontSize: '$4xl' },
+    },
+    color: {
+      white: {
+        color: '$white',
+      },
+      black: {
+        color: 'black',
+      },
+      primary: {
+        color: '$dafaz400',
+      },
+      lightGray: {
+        color: '$gray400',
+      },
+      darkGray: {
+        color: '$gray800',
+      },
     },
   },
 
   defaultVariants: {
     size: 'md',
+    color: 'white',
   },
 })
 
 export interface TextUIProps extends ComponentProps<typeof TextUI> {
   as?: ElementType
-  size?: 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'
+  size?: 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl'
+  color?: 'white' | 'black' | 'primary' | 'lightGray' | 'darkGray'
+  style?: CSSProperties
 }

package/src/components/TextArea/index.tsx

@@ -1,21 +1,29 @@
-import type { ReactNode } from 'react'
+import { forwardRef, ElementRef, type ReactNode } from 'react'
 import { TextAreaUI, type TextAreaUIProps } from './styles'
 
-interface TextAreaProps {
-  children?: ReactNode
+interface TextAreaProps extends TextAreaUIProps {
+  id: string
   placeholder?: string
   disabled?: boolean
+  children?: ReactNode
 }
 
-export function TextArea({
-  children,
-  ...props
-}: TextAreaUIProps & TextAreaProps) {
+export const TextArea = forwardRef<
+  ElementRef<typeof TextAreaUI>,
+  TextAreaProps
+>(({ id, disabled, placeholder, children, ...props }: TextAreaProps, ref) => {
   return (
-    <TextAreaUI rows={3} {...props}>
+    <TextAreaUI
+      ref={ref}
+      rows={3}
+      id={id}
+      placeholder={placeholder}
+      disabled={disabled}
+      {...props}
+    >
       {children}
     </TextAreaUI>
   )
-}
+})
 
 TextArea.displayName = 'TextArea'