@dafaz-ui/react 2.2.2 → 3.0.0

package/src/components/Radio/RadioItem/styles.ts

@@ -0,0 +1,130 @@
+import type { ComponentProps } from 'react'
+import { keyframes, styled } from '../../../styles'
+import * as RadioGroup from '@radix-ui/react-radio-group'
+
+export const RadioItemContainer = styled('div', {
+  display: 'flex',
+  alignItems: 'center',
+  gap: '$2',
+})
+
+export const RadioItemUI = styled(RadioGroup.Item, {
+  all: 'unset',
+  borderRadius: '$full',
+  lineHeight: 0,
+  cursor: 'pointer',
+  overflow: 'hidden',
+  boxSizing: 'border-box',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  borderBottom: '2px solid $dafaz600',
+  transition: 'border 0.1s linear',
+
+  '&:focus,&[data-state="checked"]': {
+    backgroundColor: '$dafaz600',
+    borderColor: '$dafaz600',
+  },
+
+  '&[data-state="unchecked"]': {
+    backgroundColor: '$gray800',
+  },
+
+  '&:hover': {
+    borderColor: '$dafaz600',
+  },
+
+  variants: {
+    size: {
+      lg: {
+        width: '$7',
+        height: '$7',
+        borderBottom: '2px solid $dafaz600',
+      },
+      md: {
+        width: '$5',
+        height: '$5',
+        borderBottom: '1px solid $dafaz600',
+      },
+      sm: {
+        width: '$5',
+        height: '$5',
+        borderBottom: '0.5px solid $dafaz600',
+      },
+    },
+  },
+  defaultVariants: {
+    size: 'lg',
+  },
+})
+
+const slideIn = keyframes({
+  from: { transform: 'translateY(-100%)' },
+  to: { transform: 'translateY(0)' },
+})
+
+const slideOut = keyframes({
+  from: { transform: 'translateY(0)' },
+  to: { transform: 'translateY(100%)' },
+})
+
+export const RadioIndicator = styled(RadioGroup.Indicator, {
+  color: '$white',
+
+  '&[data-state="checked"]': {
+    animation: `${slideIn} 200ms ease-out`,
+  },
+
+  '&[data-state="unchecked"]': {
+    animation: `${slideOut} 200ms ease-out`,
+  },
+
+  variants: {
+    size: {
+      lg: {
+        width: '$5',
+        height: '$5',
+      },
+      md: {
+        width: '$4',
+        height: '$4',
+      },
+      sm: {
+        width: '$3',
+        height: '$3',
+      },
+    },
+  },
+  defaultVariants: {
+    size: 'lg',
+  },
+})
+
+export const Label = styled('label', {
+  fontFamily: '$app',
+  lineHeight: 0,
+  color: '$white',
+  fontWeight: '$regular',
+  cursor: 'pointer',
+
+  variants: {
+    size: {
+      lg: {
+        fontSize: '$xl',
+      },
+      md: {
+        fontSize: '$lg',
+      },
+      sm: {
+        fontSize: '$md',
+      },
+    },
+  },
+  defaultVariants: {
+    size: 'lg',
+  },
+})
+
+export interface RadioItemUIProps extends ComponentProps<typeof RadioItemUI> {
+  size?: 'sm' | 'md' | 'lg'
+}

package/src/components/Radio/index.tsx

@@ -0,0 +1,29 @@
+import { RadioUI, RadioUIProps } from './styles'
+import { RadioItem } from './RadioItem'
+
+interface Item {
+  id: string
+  label: string
+  value: string
+}
+
+interface RadioGroupProps extends RadioUIProps {
+  items: Item[]
+}
+
+export function Radio({ items, size, ...props }: RadioGroupProps) {
+  return (
+    <RadioUI {...props}>
+      {items.map((item) => {
+        return (
+          <RadioItem
+            id={item.id}
+            label={item.label}
+            value={item.value}
+            size={size}
+          />
+        )
+      })}
+    </RadioUI>
+  )
+}

package/src/components/Radio/styles.ts

@@ -0,0 +1,25 @@
+import type { ComponentProps } from 'react'
+import { styled } from '../../styles'
+import * as RadioGroup from '@radix-ui/react-radio-group'
+
+export const RadioUI = styled(RadioGroup.Root, {
+  all: 'unset',
+  display: 'flex',
+  flexDirection: 'column',
+  gap: '$4',
+
+  variants: {
+    size: {
+      lg: {},
+      md: {},
+      sm: {},
+    },
+  },
+  defaultVariants: {
+    size: 'lg',
+  },
+})
+
+export interface RadioUIProps extends ComponentProps<typeof RadioUI> {
+  size?: 'sm' | 'md' | 'lg'
+}

package/src/components/TextArea/index.tsx

@@ -0,0 +1,21 @@
+import type { ReactNode } from 'react'
+import { TextAreaUI, type TextAreaUIProps } from './styles'
+
+interface TextAreaProps {
+  children?: ReactNode
+  placeholder?: string
+  disabled?: boolean
+}
+
+export function TextArea({
+  children,
+  ...props
+}: TextAreaUIProps & TextAreaProps) {
+  return (
+    <TextAreaUI rows={3} {...props}>
+      {children}
+    </TextAreaUI>
+  )
+}
+
+TextArea.displayName = 'TextArea'

package/src/components/TextArea/styles.ts

@@ -0,0 +1,40 @@
+import type { ComponentProps } from 'react'
+import { styled } from '../../styles'
+
+export const TextAreaUI = styled('textarea', {
+  fontFamily: '$app',
+  fontSize: '$lg',
+  color: '$white',
+  fontWeight: '$regular',
+  resize: 'vertical',
+
+  border: '0.7px solid $gray400',
+
+  margin: 0,
+  backgroundColor: 'transparent',
+  borderBottom: '2px solid $dafaz600',
+  borderRadius: '$md',
+  boxSizing: 'border-box',
+  display: 'flex',
+  alignItems: 'baseline',
+  width: '100%',
+  padding: '$1 $2',
+
+  '&:focus': {
+    outline: 0,
+  },
+
+  '&:disabled': {
+    opacity: 0.5,
+    cursor: 'not-allowed',
+  },
+
+  '&::placeholder': {
+    fontSize: '$xl',
+    fontWeight: '$regular',
+    color: '$white',
+    opacity: 0.75,
+  },
+})
+
+export interface TextAreaUIProps extends ComponentProps<typeof TextAreaUI> {}

package/src/components/TextInput/index.tsx

@@ -50,4 +50,4 @@ export const TextInput = forwardRef<ElementRef<typeof InputUI>, TextInputProps>(
   },
 )
 
-TextInput.displayName = 'Input'
+TextInput.displayName = 'TextInput'

package/src/index.tsx

@@ -1,7 +1,10 @@
 export * from './components/Box'
 export * from './components/Button'
-export * from './components/Text'
+export * from './components/CheckBox'
 export * from './components/Heading'
+export * from './components/Radio'
+export * from './components/Text'
+export * from './components/TextArea'
 export * from './components/TextInput'
 
 export * from './styles'