@dafaz-ui/react 4.0.19 → 6.0.5

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.6rem',
+            marginLeft: '-3rem',
+          }}
+        >
+          <CaretDown size={24} weight="bold" />
+        </span>
+      </SelectContainer>
+    )
+  },
+)
 
 Select.displayName = 'Select'

package/src/components/Select/styles.ts

@@ -1,35 +1,100 @@
 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',
 
-  width: '100%',
-  margin: 0,
-  padding: '$1 $1',
+  '&:disabled': {
+    cursor: 'not-allowed',
+    opacity: 0.5,
+  },
 
-  '&:focus': {
-    outline: 0,
+  '&: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',
+
   '&: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'

package/src/components/TextArea/styles.ts

@@ -1,4 +1,4 @@
-import type { ComponentProps } from 'react'
+import type { ComponentProps, CSSProperties } from 'react'
 import { styled } from '../../styles'
 
 export const TextAreaUI = styled('textarea', {
@@ -8,6 +8,7 @@ export const TextAreaUI = styled('textarea', {
   fontWeight: '$regular',
   resize: 'vertical',
 
+  boxShadow: '0 3px 2px -2px $colors$gray400',
   border: '0.7px solid $gray400',
 
   margin: 0,
@@ -19,9 +20,11 @@ export const TextAreaUI = styled('textarea', {
   alignItems: 'baseline',
   width: '100%',
   padding: '$1 $2',
+  transition: 'border 0.2s linear',
 
   '&:focus': {
     outline: 0,
+    borderBottom: '2px solid $dafaz400',
   },
 
   '&:disabled': {
@@ -37,4 +40,6 @@ export const TextAreaUI = styled('textarea', {
   },
 })
 
-export interface TextAreaUIProps extends ComponentProps<typeof TextAreaUI> {}
+export interface TextAreaUIProps extends ComponentProps<typeof TextAreaUI> {
+  style?: CSSProperties
+}

package/src/components/TextInput/index.tsx

@@ -4,16 +4,20 @@ import {
   ComponentProps,
   ElementRef,
   type ChangeEvent,
+  type CSSProperties,
 } from 'react'
 import { InputContainer, InputUI, Sufix } from './styles'
+import { Eye, EyeSlash } from '@phosphor-icons/react'
 
 export interface TextInputProps extends ComponentProps<typeof InputUI> {
+  size?: 'lg' | 'md' | 'sm'
   required?: boolean
   requiredText?: string
   withShadow?: boolean
   placeholder?: string
-  type?: string
-  id: string
+  type?: React.HTMLInputTypeAttribute | undefined
+  style?: CSSProperties
+  id?: string
 }
 
 export const TextInput = forwardRef<ElementRef<typeof InputUI>, TextInputProps>(
@@ -23,11 +27,14 @@ export const TextInput = forwardRef<ElementRef<typeof InputUI>, TextInputProps>(
       required = true,
       requiredText = 'Opcional',
       id,
+      type = 'text',
+      size,
       ...props
     }: TextInputProps,
     ref,
   ) => {
     const [hiddenOptional, setHiddenOptional] = useState(required)
+    const [isPasswordVisible, setIsPasswordVisible] = useState(false)
 
     function handleOnChange(event: ChangeEvent<HTMLInputElement>) {
       if (!required) {
@@ -40,13 +47,40 @@ export const TextInput = forwardRef<ElementRef<typeof InputUI>, TextInputProps>(
     }
 
     return (
-      <InputContainer withShadow={withShadow}>
-        <InputUI id={id} ref={ref} onChange={handleOnChange} {...props} />
+      <InputContainer size={size} withShadow={withShadow}>
+        <InputUI
+          id={id}
+          ref={ref}
+          size={size}
+          onChange={handleOnChange}
+          type={!isPasswordVisible ? type : 'text'}
+          {...props}
+        />
         {!hiddenOptional && (
           <Sufix style={{ marginLeft: `-${requiredText.length / 2}rem` }}>
             {requiredText}
           </Sufix>
         )}
+        {type === 'password' && isPasswordVisible && (
+          <button
+            type="button"
+            onClick={() => {
+              setIsPasswordVisible(false)
+            }}
+          >
+            <EyeSlash size={24} />
+          </button>
+        )}
+        {type === 'password' && !isPasswordVisible && (
+          <button
+            type="button"
+            onClick={() => {
+              setIsPasswordVisible(true)
+            }}
+          >
+            <Eye size={24} />
+          </button>
+        )}
       </InputContainer>
     )
   },