@dafaz-ui/react 2.1.0 → 2.2.0

package/src/components/Text/index.tsx

@@ -0,0 +1,20 @@
+import type { ReactNode } from 'react'
+import { TextUI, TextUIProps } from './styles'
+
+interface TextProps {
+  children: ReactNode
+}
+
+export function Text({
+  children,
+  size = 'md',
+  ...props
+}: TextUIProps & TextProps) {
+  return (
+    <TextUI size={size} {...props}>
+      {children}
+    </TextUI>
+  )
+}
+
+Text.displayName = 'Text'

package/src/components/{Text.tsx → Text/styles.ts}

@@ -1,7 +1,7 @@
-import type { ComponentProps, ElementType } from 'react'
-import { styled } from '../styles'
+import { ComponentProps, ElementType } from 'react'
+import { styled } from '../../styles'
 
-export const Text = styled('p', {
+export const TextUI = styled('p', {
   fontFamily: '$web',
   lineHeight: '$base',
   margin: 0,
@@ -24,8 +24,7 @@ export const Text = styled('p', {
   },
 })
 
-export interface TextProps extends ComponentProps<typeof Text> {
+export interface TextUIProps extends ComponentProps<typeof TextUI> {
   as?: ElementType
-  content: string
   size?: 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'
 }

package/src/components/TextInput/index.tsx

@@ -0,0 +1,53 @@
+import {
+  forwardRef,
+  useState,
+  ComponentProps,
+  ElementRef,
+  type ChangeEvent,
+} from 'react'
+import { InputContainer, InputUI, Sufix } from './styles'
+
+export interface TextInputProps extends ComponentProps<typeof InputUI> {
+  required?: boolean
+  requiredText?: string
+  withShadow?: boolean
+  placeholder?: string
+  type?: string
+}
+
+export const TextInput = forwardRef<ElementRef<typeof InputUI>, TextInputProps>(
+  (
+    {
+      withShadow = false,
+      required = true,
+      requiredText = 'Opcional',
+      ...props
+    }: TextInputProps,
+    ref,
+  ) => {
+    const [hiddenOptional, setHiddenOptional] = useState(required)
+
+    function handleOnChange(event: ChangeEvent<HTMLInputElement>) {
+      if (!required) {
+        if (event.target.value === '') {
+          setHiddenOptional(false)
+        } else {
+          setHiddenOptional(true)
+        }
+      }
+    }
+
+    return (
+      <InputContainer withShadow={withShadow}>
+        <InputUI ref={ref} onChange={handleOnChange} {...props} />
+        {!hiddenOptional && (
+          <Sufix style={{ marginLeft: `-${requiredText.length / 2}rem` }}>
+            {requiredText}
+          </Sufix>
+        )}
+      </InputContainer>
+    )
+  },
+)
+
+TextInput.displayName = 'Input'

package/src/components/TextInput/styles.ts

@@ -0,0 +1,68 @@
+import { styled } from '../../styles'
+
+export const InputContainer = styled('div', {
+  margin: 0,
+  backgroundColor: 'transparent',
+  borderBottom: '2px solid $dafaz600',
+  borderRadius: '$md',
+  boxSizing: 'border-box',
+  display: 'flex',
+  alignItems: 'baseline',
+  padding: '$1 $2',
+
+  transition: 'border 0.2s linear',
+
+  '&:has(input:focus)': {
+    borderBottom: '2px solid $dafaz400',
+  },
+
+  '&:has(input:disabled)': {
+    opacity: 0.5,
+    cursor: 'not-allowed',
+  },
+
+  variants: {
+    withShadow: {
+      true: {
+        boxShadow: 'inset 0 2.5rem #444',
+      },
+    },
+  },
+  defaultVariants: {
+    withShadow: false,
+  },
+})
+
+export const InputUI = styled('input', {
+  margin: 0,
+  fontFamily: '$app',
+  fontSize: '$xl',
+  color: '$white',
+  backgroundColor: 'transparent',
+  border: 'none',
+
+  '&::-ms-reveal': {
+    filter: 'invert(100%)',
+  },
+
+  '&::placeholder': {
+    fontWeight: '$regular',
+    color: '$white',
+    opacity: 0.75,
+  },
+
+  '&:focus': {
+    outline: 0,
+  },
+})
+
+export const Sufix = styled('span', {
+  fontFamily: '$app',
+  fontSize: '$sm',
+  color: '$white',
+  fontStyle: 'italic',
+
+  '&:has(input:focus)': {
+    visibility: 'hidden',
+  },
+})

package/src/index.tsx

@@ -1,4 +1,7 @@
+export * from './components/Box'
 export * from './components/Button'
 export * from './components/Text'
+export * from './components/Heading'
+export * from './components/TextInput'
 
 export * from './styles'