@dafaz-ui/react 2.0.1 → 2.2.0

package/src/components/Button/index.tsx

@@ -0,0 +1,21 @@
+import type { ReactNode } from 'react'
+import { ButtonUI, ButtonUIProps } from './styles'
+
+interface ButtonProps {
+  children: ReactNode
+}
+
+export function Button({
+  children,
+  variant = 'primary',
+  size = 'md',
+  ...props
+}: ButtonUIProps & ButtonProps) {
+  return (
+    <ButtonUI variant={variant} size={size} {...props}>
+      {children}
+    </ButtonUI>
+  )
+}
+
+ButtonUI.displayName = 'Button'

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

@@ -1,9 +1,8 @@
-import type { ComponentProps } from '@stitches/react'
-import { styled } from '../styles'
-import type { ElementType } from 'react'
+import type { ComponentProps, ElementType } from 'react'
+import { styled } from '../../styles'
 
 /** Primary UI component for user interaction */
-export const Button = styled('button', {
+export const ButtonUI = styled('button', {
   all: 'unset',
   borderRadius: '$md',
   fontSize: '$md',
@@ -25,11 +24,6 @@ export const Button = styled('button', {
     cursor: 'not-allowed',
   },
 
-  svg: {
-    width: '$4',
-    height: '$4',
-  },
-
   variants: {
     variant: {
       primary: {
@@ -76,29 +70,48 @@ export const Button = styled('button', {
     size: {
       sm: {
         height: 38,
+        fontSize: '$sm',
       },
       md: {
         height: 46,
+        fontSize: '$lg',
+      },
+      lg: {
+        height: 54,
+        fontSize: '$xl',
       },
     },
-  },
+    flat: {
+      true: {
+        border: 0,
+        background: 'transparent',
 
+        '&:disabled': {
+          color: '$gray200',
+          background: 'transparent',
+          border: 'none',
+        },
+      },
+      false: {},
+    },
+  },
   defaultVariants: {
     variant: 'primary',
     size: 'md',
+    flat: false,
   },
 })
 
-export interface ButtonProps extends ComponentProps<typeof Button> {
+export interface ButtonUIProps extends ComponentProps<typeof ButtonUI> {
   as?: ElementType
   /** How large should the button be? */
-  size?: 'sm' | 'md'
+  size?: 'sm' | 'md' | 'lg'
   /** Optional click handler */
   onClick?: () => void
-  /** Button contents */
-  label: string
   /** Button is disable? */
   disabled?: boolean
   //** Button UI mode */
   variant?: 'primary' | 'secondary' | 'tertiary'
+  //** Flat mode */
+  flat?: boolean
 }

package/src/components/Heading/index.tsx

@@ -0,0 +1,12 @@
+import type { ReactNode } from 'react'
+import { HeadingUI, HeadingUIProps } from './styles'
+
+interface HeadingProps {
+  children: ReactNode
+}
+
+export function Heading({ children, ...props }: HeadingUIProps & HeadingProps) {
+  return <HeadingUI {...props}>{children}</HeadingUI>
+}
+
+Heading.displayName = 'Heading'

package/src/components/Heading/styles.ts

@@ -0,0 +1,36 @@
+import { ComponentProps, ElementType } from 'react'
+import { styled } from '../../styles'
+
+export const HeadingUI = styled('h2', {
+  fontFamily: '$web',
+  lineHeight: '$shorter',
+  margin: 0,
+
+  variants: {
+    mode: {
+      default: {
+        color: '$dafaz400',
+      },
+      white: {
+        color: '$white',
+      },
+    },
+    size: {
+      sm: { fontSize: '$lg' },
+      md: { fontSize: '$xl' },
+      lg: { fontSize: '$2xl' },
+      xl: { fontSize: '3rem' },
+      '2xl': { fontSize: '4rem' },
+    },
+  },
+  defaultVariants: {
+    mode: 'default',
+    size: 'lg',
+  },
+})
+
+export interface HeadingUIProps extends ComponentProps<typeof HeadingUI> {
+  as?: ElementType
+  size?: 'sm' | 'md' | 'lg' | 'xl' | '2xl'
+  mode?: 'default' | 'white'
+}

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/styles.ts

@@ -0,0 +1,30 @@
+import { ComponentProps, ElementType } from 'react'
+import { styled } from '../../styles'
+
+export const TextUI = styled('p', {
+  fontFamily: '$web',
+  lineHeight: '$base',
+  margin: 0,
+  color: '$white',
+
+  variants: {
+    size: {
+      xxs: { fontSize: '$xxs' },
+      xs: { fontSize: '$xs' },
+      sm: { fontSize: '$sm' },
+      md: { fontSize: '$md' },
+      lg: { fontSize: '$lg' },
+      xl: { fontSize: '$xl' },
+      '2xl': { fontSize: '$2xl' },
+    },
+  },
+
+  defaultVariants: {
+    size: 'md',
+  },
+})
+
+export interface TextUIProps extends ComponentProps<typeof TextUI> {
+  as?: ElementType
+  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,3 +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'