Export multiple workspaces

src-web/components/core/Checkbox.tsx

@@ -8,10 +8,21 @@ interface Props {
   onChange: (checked: boolean) => void;
   disabled?: boolean;
   className?: string;
+  inputWrapperClassName?: string;
+  indeterminate?: boolean;
   hideLabel?: boolean;
 }
 
-export function Checkbox({ checked, onChange, className, disabled, title, hideLabel }: Props) {
+export function Checkbox({
+  checked,
+  indeterminate,
+  onChange,
+  className,
+  inputWrapperClassName,
+  disabled,
+  title,
+  hideLabel,
+}: Props) {
   return (
     <HStack
       as="label"
@@ -19,16 +30,19 @@ export function Checkbox({ checked, onChange, className, disabled, title, hideLa
       alignItems="center"
       className={classNames(className, 'text-gray-900 text-sm', disabled && 'opacity-disabled')}
     >
-      <div className="relative flex">
+      <div className={classNames(inputWrapperClassName, 'relative flex')}>
         <input
           aria-hidden
-          className="appearance-none w-4 h-4 flex-shrink-0 border border-gray-200 rounded focus:border-focus outline-none ring-0"
+          className={classNames(
+            'opacity-50 appearance-none w-4 h-4 flex-shrink-0 border border-[currentColor]',
+            'rounded focus:border-focus focus:opacity-100 outline-none ring-0',
+          )}
           type="checkbox"
           disabled={disabled}
           onChange={() => onChange(!checked)}
         />
         <div className="absolute inset-0 flex items-center justify-center">
-          <Icon size="sm" icon={checked ? 'check' : 'empty'} />
+          <Icon size="sm" icon={indeterminate ? 'minus' : checked ? 'check' : 'empty'} />
         </div>
       </div>
       {/*<button*/}