@dafaz-ui/react 3.0.5 → 4.0.0

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

@@ -21,6 +21,10 @@ export const RadioItemUI = styled(RadioGroup.Item, {
   borderBottom: '2px solid $dafaz600',
   transition: 'border 0.1s linear',
 
+  '&:disabled': {
+    cursor: 'not-allowed',
+  },
+
   '&:focus,&[data-state="checked"]': {
     backgroundColor: '$dafaz600',
     borderColor: '$dafaz600',
@@ -108,6 +112,12 @@ export const Label = styled('label', {
   cursor: 'pointer',
 
   variants: {
+    disabled: {
+      true: {
+        opacity: 0.5,
+        cursor: 'not-allowed',
+      },
+    },
     size: {
       lg: {
         fontSize: '$xl',
@@ -121,6 +131,7 @@ export const Label = styled('label', {
     },
   },
   defaultVariants: {
+    disabled: false,
     size: 'md',
   },
 })

package/src/components/Radio/index.tsx

@@ -5,15 +5,21 @@ interface Item {
   id: string
   label: string
   value: string
+  disabled: boolean
 }
 
 interface RadioGroupProps extends RadioUIProps {
   items: Item[]
 }
 
-export function Radio({ items, size, ...props }: RadioGroupProps) {
+export function Radio({
+  items,
+  size,
+  disabled = false,
+  ...props
+}: RadioGroupProps) {
   return (
-    <RadioUI {...props}>
+    <RadioUI disabled={disabled} {...props}>
       {items.map((item) => {
         return (
           <RadioItem
@@ -21,6 +27,7 @@ export function Radio({ items, size, ...props }: RadioGroupProps) {
             label={item.label}
             value={item.value}
             size={size}
+            disabled={disabled}
           />
         )
       })}

package/src/components/Radio/styles.ts

@@ -8,6 +8,11 @@ export const RadioUI = styled(RadioGroup.Root, {
   flexDirection: 'column',
   gap: '$4',
 
+  '&:disabled': {
+    opacity: 0.5,
+    cursor: 'not-allowed',
+  },
+
   variants: {
     size: {
       lg: {},

package/src/components/Select/index.tsx

@@ -0,0 +1,36 @@
+import { SelectUI, SelectUIProps, OptionUI } from './styles'
+
+interface Item {
+  id: string
+  label: string
+  value: string
+}
+
+interface SelectProps {
+  items: Item[]
+  placeholder?: string
+}
+
+export function Select({
+  size,
+  placeholder,
+  items,
+  ...props
+}: SelectUIProps & SelectProps) {
+  return (
+    <SelectUI size={size} {...props} defaultValue="">
+      <OptionUI className="placeholder" value="">
+        {placeholder}
+      </OptionUI>
+      {items.map((item) => {
+        return (
+          <OptionUI key={item.id} value={item.value}>
+            {item.label}
+          </OptionUI>
+        )
+      })}
+    </SelectUI>
+  )
+}
+
+Select.displayName = 'Select'

package/src/components/Select/styles.ts

@@ -0,0 +1,83 @@
+import type { ComponentProps } from 'react'
+import { styled } from '../../styles'
+
+export const SelectUI = styled('select', {
+  gap: '$2',
+  overflow: 'hidden',
+
+  background: 'transparent',
+  border: 'none',
+
+  fontFamily: '$app',
+  color: '$white',
+  fontWeight: '$regular',
+  cursor: 'pointer',
+
+  boxSizing: 'border-box',
+  borderRadius: '$md',
+  borderBottom: '2px solid $dafaz600',
+  transition: 'border 0.2s linear',
+
+  width: '100%',
+  margin: 0,
+  padding: '$1 $2',
+
+  '&:focus': {
+    outline: 0,
+    borderBottom: '2px solid $dafaz400',
+  },
+
+  '&:disabled': {
+    opacity: 0.5,
+    cursor: 'not-allowed',
+  },
+
+  variants: {
+    size: {
+      lg: {
+        fontSize: '$xl',
+      },
+      md: {
+        fontSize: '$lg',
+      },
+      sm: {
+        fontSize: '$md',
+      },
+    },
+  },
+
+  defaultVariants: {
+    size: 'md',
+  },
+})
+
+export interface SelectUIProps extends ComponentProps<typeof SelectUI> {
+  size?: 'sm' | 'md' | 'lg'
+}
+
+export const OptionUI = styled('option', {
+  backgroundColor: '$gray800',
+
+  '&.placeholder': {
+    backgroundColor: '$gray400',
+  },
+
+  variants: {
+    size: {
+      lg: {
+        fontSize: '$xl',
+      },
+      md: {
+        fontSize: '$lg',
+      },
+      sm: {
+        fontSize: '$md',
+      },
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+  },
+})
+
+export interface OptionUIProps extends ComponentProps<typeof OptionUI> {}

package/src/components/TextArea/styles.ts

@@ -30,7 +30,7 @@ export const TextAreaUI = styled('textarea', {
   },
 
   '&::placeholder': {
-    fontSize: '$xl',
+    fontSize: '$lg',
     fontWeight: '$regular',
     color: '$white',
     opacity: 0.75,

package/src/index.tsx

@@ -3,6 +3,7 @@ export * from './components/Button'
 export * from './components/CheckBox'
 export * from './components/Heading'
 export * from './components/Radio'
+export * from './components/Select'
 export * from './components/Text'
 export * from './components/TextArea'
 export * from './components/TextInput'