Select converted to tailwind

0xsequence · Jan 14, 2025 · 312d6cc · 312d6cc
1 parent 0f63838
commit 312d6cc
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 20 deletions.
diff --git a/src/components/Field/Field.tsx b/src/components/Field/Field.tsx
@@ -1,3 +1,4 @@
+import { clsx } from 'clsx'
 import { ElementType, ReactNode } from 'react'
 
 import { Box, PolymorphicComponent, PolymorphicProps } from '~/components/Box'
@@ -19,7 +20,7 @@ export interface FieldProps {
 // TODO: handle isRequired in label?
 
 export const Field: PolymorphicComponent<FieldProps, 'div'> = <
-  T extends ElementType
+  T extends ElementType,
 >(
   props: PolymorphicProps<FieldProps, T>
 ) => {
@@ -29,6 +30,7 @@ export const Field: PolymorphicComponent<FieldProps, 'div'> = <
     description,
     labelLocation = 'top',
     children,
+    className,
     ...rest
   } = props
 
@@ -60,7 +62,7 @@ export const Field: PolymorphicComponent<FieldProps, 'div'> = <
   return (
     <Box
       as="label"
-      className={styles.labelVariants({ labelLocation })}
+      className={clsx(styles.labelVariants({ labelLocation }), className)}
       htmlFor={id}
       {...rest}
     >

diff --git a/src/components/Select/Select.tsx b/src/components/Select/Select.tsx
@@ -1,18 +1,37 @@
 import * as SelectPrimitive from '@radix-ui/react-select'
-import { clsx } from 'clsx'
+import { cva, VariantProps } from 'class-variance-authority'
 import { forwardRef, ReactNode, Ref } from 'react'
 
-import { Box } from '~/components/Box'
 import { Field, FieldProps } from '~/components/Field'
 import { ChevronDownIcon } from '~/icons'
+import { cn } from '~/utils'
 
-import {
-  contentStyle,
-  optionStyle,
-  triggerStyle,
-  TriggerVariants,
-  triggerVariants,
-} from './styles.css'
+import { textVariants } from '../Text'
+
+const triggerVariants = cva(
+  [
+    textVariants({ variant: 'normal' }),
+    'inline-flex items-center justify-between gap-1 p-4 h-[52px] bg-transparent',
+    'text-base font-medium text-text-100 select-none cursor-pointer border-none',
+    'shadow-[0_0_0_1px_theme(colors.border.normal)_inset]',
+    'focus:outline-none focus-within:outline-none focus-within:opacity-100',
+    'focus-within:ring-2 focus-within:ring-offset-0 ring-inset outline-none',
+    '[&:has(:disabled)]:cursor-default [&:has(:disabled)]:opacity-50',
+    '[&:has(:disabled):hover]:cursor-default [&:has(:disabled):hover]:opacity-50',
+  ],
+  {
+    variants: {
+      borderRadius: {
+        xs: 'rounded',
+        sm: 'rounded-lg',
+        md: 'rounded-xl',
+      },
+    },
+    defaultVariants: {
+      borderRadius: 'md',
+    },
+  }
+)
 
 type SelectOption = {
   className?: string
@@ -22,13 +41,14 @@ type SelectOption = {
 }
 
 export type SelectProps = FieldProps &
-  TriggerVariants &
+  VariantProps<typeof triggerVariants> &
   SelectPrimitive.SelectProps & {
     disabled?: boolean
     id?: string
     name: string
     placeholder?: string
     options: SelectOption[]
+    className?: string
   }
 
 const SelectItem = forwardRef(
@@ -38,7 +58,13 @@ const SelectItem = forwardRef(
   ) => {
     return (
       <SelectPrimitive.Item
-        className={clsx(optionStyle, className)}
+        className={cn(
+          textVariants({ variant: 'normal' }),
+          'flex justify-between items-center px-4 py-3 h-[52px] cursor-pointer',
+          'text-base text-text-100 opacity-100 data-[disabled]:cursor-default data-[disabled]:opacity-50 focus:outline-none hover:outline-none',
+          'data-[highlighted]:bg-background-secondary data-[state=checked]:bg-background-control',
+          className
+        )}
         {...props}
         ref={ref}
       >
@@ -60,32 +86,37 @@ export const Select = forwardRef(
       name,
       options,
       placeholder,
+      className,
       ...rest
     } = props
 
     return (
       <Field
         disabled={disabled}
-        display="grid"
         id={id ?? name}
         label={label}
         labelLocation={labelLocation}
         description={description}
-        whiteSpace="nowrap"
+        className="grid whitespace-nowrap"
       >
-        <SelectPrimitive.Root disabled={disabled} name={name} {...rest}>
+        <SelectPrimitive.Root
+          disabled={disabled}
+          name={name}
+          {...rest}
+          defaultOpen
+        >
           <SelectPrimitive.Trigger
             id={id ?? name}
-            className={clsx(triggerStyle, triggerVariants({ borderRadius }))}
+            className={cn(triggerVariants({ borderRadius }), className)}
             ref={ref}
           >
             <SelectPrimitive.Value placeholder={placeholder} />
-            <Box as={SelectPrimitive.Icon} display="inline-flex">
+            <SelectPrimitive.Icon className="inline-flex">
               <ChevronDownIcon />
-            </Box>
+            </SelectPrimitive.Icon>
           </SelectPrimitive.Trigger>
 
-          <SelectPrimitive.Content className={contentStyle}>
+          <SelectPrimitive.Content className="backdrop-blur bg-button-glass rounded-lg overflow-hidden z-30 ring-2 ring-offset-0 ring-inset">
             <SelectPrimitive.Viewport>
               <SelectPrimitive.Group>
                 {options.map(({ value, label, ...rest }) => (