Field converted to tailwind

0xsequence · Jan 16, 2025 · ec4b56e · ec4b56e
1 parent 0e629b5
commit ec4b56e
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 20 deletions.
diff --git a/src/components/Checkbox/Checkbox.tsx b/src/components/Checkbox/Checkbox.tsx
@@ -56,11 +56,10 @@ export const Checkbox = forwardRef(
     return (
       <Field
         disabled={disabled}
-        display="flex"
         id={id ?? name}
         label={label}
         labelLocation={labelLocation}
-        whiteSpace="nowrap"
+        className="whitespace-nowrap"
       >
         <CheckboxPrimitive.Root
           className={cn(checkboxVariants({ size }), className)}

diff --git a/src/components/Field/Field.tsx b/src/components/Field/Field.tsx
@@ -1,29 +1,35 @@
-import { clsx } from 'clsx'
-import { ElementType, ReactNode } from 'react'
+import { cva, VariantProps } from 'class-variance-authority'
+import { ReactNode } from 'react'
 
-import { Box, PolymorphicComponent, PolymorphicProps } from '~/components/Box'
 import { Text } from '~/components/Text'
+import { cn } from '~/utils'
 
-import * as styles from './styles.css'
+const fieldVariants = cva('flex', {
+  variants: {
+    labelLocation: {
+      top: ['flex-col', 'items-stretch', 'gap-3'],
+      left: ['flex-row', 'items-center', 'gap-3', 'grid-cols-[1fr_2fr]'],
+      right: ['flex-row', 'items-center', 'gap-3', 'grid-cols-[2fr_1fr]'],
+      hidden: ['gap-0'],
+    },
+  },
+})
 
-export interface FieldProps {
+export interface FieldProps extends VariantProps<typeof fieldVariants> {
   id?: string
   label?: string | ReactNode
   description?: string | ReactNode
-  labelLocation?: 'left' | 'right' | 'top' | 'hidden'
   disabled?: boolean
   required?: boolean // TODO
   error?: string // TODO
+  className?: string
+  children?: ReactNode
 }
 
 // TODO: handle error text and secondary description label
 // TODO: handle isRequired in label?
 
-export const Field: PolymorphicComponent<FieldProps, 'div'> = <
-  T extends ElementType,
->(
-  props: PolymorphicProps<FieldProps, T>
-) => {
+export const Field = (props: FieldProps) => {
   const {
     id,
     label,
@@ -36,7 +42,7 @@ export const Field: PolymorphicComponent<FieldProps, 'div'> = <
 
   const renderLabel = () =>
     label || description ? (
-      <Box flexDirection="column" gap="0.5">
+      <div className="flex flex-col gap-0.5">
         {label && (
           <Text
             variant="small"
@@ -56,19 +62,18 @@ export const Field: PolymorphicComponent<FieldProps, 'div'> = <
             {description}
           </Text>
         )}
-      </Box>
+      </div>
     ) : null
 
   return (
-    <Box
-      as="label"
-      className={clsx(styles.labelVariants({ labelLocation }), className)}
+    <label
+      className={cn(fieldVariants({ labelLocation }), className)}
       htmlFor={id}
       {...rest}
     >
-      {['left', 'top', 'hidden'].includes(labelLocation) && renderLabel()}
+      {['left', 'top', 'hidden'].includes(labelLocation!) && renderLabel()}
       {children}
       {labelLocation === 'right' && renderLabel()}
-    </Box>
+    </label>
   )
 }