Add support for disabled selects

components/Select/index.scss

@@ -24,6 +24,11 @@
     }
   }
 
+  &.Disabled:hover {
+    background-color: var(--input-bg);
+    cursor: not-allowed;
+  }
+
   &[data-placeholder] > span:not(.SelectIcon) {
     color: var(--text-secondary);
   }

components/Select/index.tsx

@@ -30,6 +30,14 @@ const Select = React.forwardRef<HTMLButtonElement, Props>(function Select(
   const [open, setOpen] = useState(false)
   const [value, setValue] = useState('')
 
+  const triggerClasses = classNames(
+    {
+      SelectTrigger: true,
+      Disabled: props.disabled,
+    },
+    props.triggerClass
+  )
+
   useEffect(() => {
     setOpen(props.open)
   }, [props.open])
@@ -67,14 +75,18 @@ const Select = React.forwardRef<HTMLButtonElement, Props>(function Select(
       onOpenChange={props.onOpenChange}
     >
       <RadixSelect.Trigger
-        className={classNames('SelectTrigger', props.triggerClass)}
+        className={triggerClasses}
         placeholder={props.placeholder}
         ref={forwardedRef}
       >
         <RadixSelect.Value placeholder={props.placeholder} />
+        {!props.disabled ? (
           <RadixSelect.Icon className="SelectIcon">
             <ArrowIcon />
           </RadixSelect.Icon>
+        ) : (
+          ''
+        )}
       </RadixSelect.Trigger>
 
       <RadixSelect.Portal className="Select">