@dafaz-ui/react 2.1.0 → 2.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,20 @@
1
+ import type { ReactNode } from 'react'
2
+ import { TextUI, TextUIProps } from './styles'
3
+
4
+ interface TextProps {
5
+ children: ReactNode
6
+ }
7
+
8
+ export function Text({
9
+ children,
10
+ size = 'md',
11
+ ...props
12
+ }: TextUIProps & TextProps) {
13
+ return (
14
+ <TextUI size={size} {...props}>
15
+ {children}
16
+ </TextUI>
17
+ )
18
+ }
19
+
20
+ Text.displayName = 'Text'
@@ -1,7 +1,7 @@
1
- import type { ComponentProps, ElementType } from 'react'
2
- import { styled } from '../styles'
1
+ import { ComponentProps, ElementType } from 'react'
2
+ import { styled } from '../../styles'
3
3
 
4
- export const Text = styled('p', {
4
+ export const TextUI = styled('p', {
5
5
  fontFamily: '$web',
6
6
  lineHeight: '$base',
7
7
  margin: 0,
@@ -24,8 +24,7 @@ export const Text = styled('p', {
24
24
  },
25
25
  })
26
26
 
27
- export interface TextProps extends ComponentProps<typeof Text> {
27
+ export interface TextUIProps extends ComponentProps<typeof TextUI> {
28
28
  as?: ElementType
29
- content: string
30
29
  size?: 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'
31
30
  }
@@ -0,0 +1,53 @@
1
+ import {
2
+ forwardRef,
3
+ useState,
4
+ ComponentProps,
5
+ ElementRef,
6
+ type ChangeEvent,
7
+ } from 'react'
8
+ import { InputContainer, InputUI, Sufix } from './styles'
9
+
10
+ export interface TextInputProps extends ComponentProps<typeof InputUI> {
11
+ required?: boolean
12
+ requiredText?: string
13
+ withShadow?: boolean
14
+ placeholder?: string
15
+ type?: string
16
+ }
17
+
18
+ export const TextInput = forwardRef<ElementRef<typeof InputUI>, TextInputProps>(
19
+ (
20
+ {
21
+ withShadow = false,
22
+ required = true,
23
+ requiredText = 'Opcional',
24
+ ...props
25
+ }: TextInputProps,
26
+ ref,
27
+ ) => {
28
+ const [hiddenOptional, setHiddenOptional] = useState(required)
29
+
30
+ function handleOnChange(event: ChangeEvent<HTMLInputElement>) {
31
+ if (!required) {
32
+ if (event.target.value === '') {
33
+ setHiddenOptional(false)
34
+ } else {
35
+ setHiddenOptional(true)
36
+ }
37
+ }
38
+ }
39
+
40
+ return (
41
+ <InputContainer withShadow={withShadow}>
42
+ <InputUI ref={ref} onChange={handleOnChange} {...props} />
43
+ {!hiddenOptional && (
44
+ <Sufix style={{ marginLeft: `-${requiredText.length / 2}rem` }}>
45
+ {requiredText}
46
+ </Sufix>
47
+ )}
48
+ </InputContainer>
49
+ )
50
+ },
51
+ )
52
+
53
+ TextInput.displayName = 'Input'
@@ -0,0 +1,68 @@
1
+ import { styled } from '../../styles'
2
+
3
+ export const InputContainer = styled('div', {
4
+ margin: 0,
5
+ backgroundColor: 'transparent',
6
+ borderBottom: '2px solid $dafaz600',
7
+ borderRadius: '$md',
8
+ boxSizing: 'border-box',
9
+ display: 'flex',
10
+ alignItems: 'baseline',
11
+ padding: '$1 $2',
12
+
13
+ transition: 'border 0.2s linear',
14
+
15
+ '&:has(input:focus)': {
16
+ borderBottom: '2px solid $dafaz400',
17
+ },
18
+
19
+ '&:has(input:disabled)': {
20
+ opacity: 0.5,
21
+ cursor: 'not-allowed',
22
+ },
23
+
24
+ variants: {
25
+ withShadow: {
26
+ true: {
27
+ boxShadow: 'inset 0 3rem #444',
28
+ },
29
+ },
30
+ },
31
+ defaultVariants: {
32
+ withShadow: false,
33
+ },
34
+ })
35
+
36
+ export const InputUI = styled('input', {
37
+ margin: 0,
38
+ fontFamily: '$app',
39
+ fontSize: '$xl',
40
+ color: '$white',
41
+ backgroundColor: 'transparent',
42
+ border: 'none',
43
+
44
+ '&::-ms-reveal': {
45
+ filter: 'invert(100%)',
46
+ },
47
+
48
+ '&::placeholder': {
49
+ fontWeight: '$regular',
50
+ color: '$white',
51
+ opacity: 0.75,
52
+ },
53
+
54
+ '&:focus': {
55
+ outline: 0,
56
+ },
57
+ })
58
+
59
+ export const Sufix = styled('span', {
60
+ fontFamily: '$app',
61
+ fontSize: '$sm',
62
+ color: '$white',
63
+ fontStyle: 'italic',
64
+
65
+ '&:has(input:focus)': {
66
+ visibility: 'hidden',
67
+ },
68
+ })
package/src/index.tsx CHANGED
@@ -1,4 +1,7 @@
1
+ export * from './components/Box'
1
2
  export * from './components/Button'
2
3
  export * from './components/Text'
4
+ export * from './components/Heading'
5
+ export * from './components/TextInput'
3
6
 
4
7
  export * from './styles'