@dafaz-ui/react 3.0.4 → 4.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dafaz-ui/react",
-  "version": "3.0.4",
+  "version": "4.0.0",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",

package/src/components/CheckBox/index.tsx

@@ -10,11 +10,12 @@ export function CheckBox({
   id,
   label,
   size,
+  disabled = false,
   ...props
 }: CheckboxIUProps & CheckboxProps) {
   return (
-    <Label htmlFor={id} size={size}>
-      <CheckBoxUI id={id} {...props} size={size}>
+    <Label disabled={disabled} htmlFor={id} size={size}>
+      <CheckBoxUI disabled={disabled} id={id} {...props} size={size}>
         <CheckBoxIndicator asChild size={size}>
           <Check weight="bold" />
         </CheckBoxIndicator>

package/src/components/CheckBox/styles.ts

@@ -28,6 +28,11 @@ export const CheckBoxUI = styled(Checkbox.Root, {
     borderColor: '$dafaz600',
   },
 
+  '&:disabled': {
+    opacity: 0.5,
+    cursor: 'not-allowed',
+  },
+
   variants: {
     size: {
       lg: {
@@ -48,7 +53,7 @@ export const CheckBoxUI = styled(Checkbox.Root, {
     },
   },
   defaultVariants: {
-    size: 'lg',
+    size: 'md',
   },
 })
 
@@ -90,7 +95,7 @@ export const CheckBoxIndicator = styled(Checkbox.Indicator, {
     },
   },
   defaultVariants: {
-    size: 'lg',
+    size: 'md',
   },
 })
 
@@ -106,6 +111,12 @@ export const Label = styled('label', {
   alignItems: 'center',
 
   variants: {
+    disabled: {
+      true: {
+        opacity: 0.5,
+        cursor: 'not-allowed',
+      },
+    },
     size: {
       lg: {
         fontSize: '$xl',
@@ -119,10 +130,12 @@ export const Label = styled('label', {
     },
   },
   defaultVariants: {
-    size: 'lg',
+    disabled: false,
+    size: 'md',
   },
 })
 
 export interface CheckboxIUProps extends ComponentProps<typeof CheckBoxUI> {
   size?: 'sm' | 'md' | 'lg'
+  disabled?: boolean
 }

package/src/components/Radio/RadioItem/index.tsx

@@ -15,16 +15,17 @@ export function RadioItem({
   label,
   id,
   size,
+  disabled = false,
   ...props
 }: RadioItemProps & RadioItemUIProps) {
   return (
     <RadioItemContainer key={id}>
-      <RadioItemUI id={id} {...props} size={size}>
+      <RadioItemUI disabled={disabled} id={id} {...props} size={size}>
         <RadioIndicator asChild size={size}>
           <Check weight="bold" />
         </RadioIndicator>
       </RadioItemUI>
-      <Label htmlFor={id} size={size}>
+      <Label disabled={disabled} htmlFor={id} size={size}>
         {label}
       </Label>
     </RadioItemContainer>

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',
@@ -54,7 +58,7 @@ export const RadioItemUI = styled(RadioGroup.Item, {
     },
   },
   defaultVariants: {
-    size: 'lg',
+    size: 'md',
   },
 })
 
@@ -96,7 +100,7 @@ export const RadioIndicator = styled(RadioGroup.Indicator, {
     },
   },
   defaultVariants: {
-    size: 'lg',
+    size: 'md',
   },
 })
 
@@ -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,7 +131,8 @@ export const Label = styled('label', {
     },
   },
   defaultVariants: {
-    size: 'lg',
+    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: {},
@@ -16,7 +21,7 @@ export const RadioUI = styled(RadioGroup.Root, {
     },
   },
   defaultVariants: {
-    size: 'lg',
+    size: 'md',
   },
 })
 

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'