[filigran-ui] Modify checkbox

FiligranHQ · Aug 22, 2024 · 229dc14 · 229dc14
1 parent a0d050e
commit 229dc14
Showing 1 changed file with 26 additions and 15 deletions.
diff --git a/packages/filigran-ui/src/components/clients/checkbox.tsx b/packages/filigran-ui/src/components/clients/checkbox.tsx
@@ -2,27 +2,38 @@
 
 import * as React from 'react'
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox'
-import {Check} from 'lucide-react'
 
 import {cn} from '../../lib/utils'
+import {CheckBoldIcon, CheckIndeterminateSmallBoldIcon} from 'filigran-icon'
 
 const Checkbox = React.forwardRef<
   React.ElementRef<typeof CheckboxPrimitive.Root>,
   React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
->(({className, ...props}, ref) => (
-  <CheckboxPrimitive.Root
-    ref={ref}
-    className={cn(
-      'peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',
-      className
-    )}
-    {...props}>
-    <CheckboxPrimitive.Indicator
-      className={cn('flex items-center justify-center text-current')}>
-      <Check className="h-4 w-4" />
-    </CheckboxPrimitive.Indicator>
-  </CheckboxPrimitive.Root>
-))
+>(({className, checked, ...props}, ref) => {
+  console.log(props)
+  return (
+    <CheckboxPrimitive.Root
+      ref={ref}
+      className={cn(
+        'peer h-[1.125rem] w-[1.125rem] shrink-0 rounded-md border border-border-neutral ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',
+        className
+      )}
+      checked={checked}
+      {...props}>
+      <CheckboxPrimitive.Indicator
+        className={cn(
+          'flex h-full flex-1 items-center justify-center text-current'
+        )}>
+        {/* In case the checked is not controlled, the checked props is undefined */}
+        {checked === undefined && <CheckBoldIcon className="w-[0.625rem]" />}
+        {checked === true && <CheckBoldIcon className="w-[0.625rem]" />}
+        {checked === 'indeterminate' && (
+          <CheckIndeterminateSmallBoldIcon className="w-2 text-border-neutral" />
+        )}
+      </CheckboxPrimitive.Indicator>
+    </CheckboxPrimitive.Root>
+  )
+})
 Checkbox.displayName = CheckboxPrimitive.Root.displayName
 
 export {Checkbox}