@dafaz-ui/react 4.0.19 → 7.0.0

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>
     )
   },

package/src/components/TextInput/styles.ts

@@ -7,9 +7,10 @@ export const InputContainer = styled('div', {
   borderRadius: '$md',
   boxSizing: 'border-box',
   display: 'flex',
-  alignItems: 'baseline',
   width: '100%',
 
+  boxShadow: '0 3px 2px -2px $colors$gray400',
+
   transition: 'border 0.2s linear',
 
   '&:has(input:focus)': {
@@ -21,7 +22,42 @@ export const InputContainer = styled('div', {
     cursor: 'not-allowed',
   },
 
+  button: {
+    border: 0,
+    background: 'none',
+    marginRight: '0.5rem',
+    cursor: 'pointer',
+
+    svg: {
+      opacity: 0.75,
+      color: '$white',
+      marginBottom: '-0.3rem',
+    },
+  },
   variants: {
+    size: {
+      lg: {
+        fontSize: '$xl',
+        svg: {
+          width: '$5',
+          height: '$5',
+        },
+      },
+      md: {
+        fontSize: '$lg',
+        svg: {
+          width: '$5',
+          height: '$5',
+        },
+      },
+      sm: {
+        fontSize: '$md',
+        svg: {
+          width: '$4',
+          height: '$4',
+        },
+      },
+    },
     withShadow: {
       true: {
         boxShadow: 'inset 0 3rem #444',
@@ -29,6 +65,7 @@ export const InputContainer = styled('div', {
     },
   },
   defaultVariants: {
+    size: 'lg',
     withShadow: false,
   },
 })
@@ -36,7 +73,6 @@ export const InputContainer = styled('div', {
 export const InputUI = styled('input', {
   margin: 0,
   fontFamily: '$app',
-  fontSize: '$xl',
   color: '$white',
   backgroundColor: 'transparent',
   border: 'none',
@@ -44,7 +80,11 @@ export const InputUI = styled('input', {
   padding: '$1 $2',
 
   '&::-ms-reveal': {
-    filter: 'invert(100%)',
+    display: 'none',
+  },
+
+  '&::-ms-clear': {
+    display: 'none',
   },
 
   '&::placeholder': {
@@ -56,6 +96,23 @@ export const InputUI = styled('input', {
   '&:focus': {
     outline: 0,
   },
+
+  variants: {
+    size: {
+      lg: {
+        fontSize: '$xl',
+      },
+      md: {
+        fontSize: '$lg',
+      },
+      sm: {
+        fontSize: '$md',
+      },
+    },
+  },
+  defaultVariants: {
+    size: 'lg',
+  },
 })
 
 export const Sufix = styled('span', {

package/src/index.tsx

@@ -4,8 +4,10 @@ export * from './components/CheckBox'
 export * from './components/Heading'
 export * from './components/Radio'
 export * from './components/Select'
+export * from './components/Separator'
 export * from './components/Text'
 export * from './components/TextArea'
 export * from './components/TextInput'
+export * from './components/MultiSelect'
 
 export * from './styles'