feat: add Input.Checkbox

packages/kamalion-ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kamalion/ui",
-  "version": "1.1.2",
+  "version": "1.2.0",
   "type": "module",
   "private": false,
   "repository": {

packages/kamalion-ui/src/components/Input/InputCheckbox.tsx

@@ -0,0 +1,52 @@
+import * as React from "react";
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+import { FaCheck } from "react-icons/fa6";
+import { cn } from "../..";
+import { useFormContext } from "react-hook-form";
+
+export type InputCheckboxState = CheckboxPrimitive.CheckedState;
+
+type InputCheckboxProps = {
+  noControl?: boolean;
+};
+
+const InputCheckbox = React.forwardRef<
+  React.ElementRef<typeof CheckboxPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root> & InputCheckboxProps
+>(({ className, noControl, name, checked, onCheckedChange, ...props }, ref) => {
+  const formContext = useFormContext();
+
+  if (!name) return null;
+
+  const uncontrolled = !formContext || !formContext.control || noControl;
+
+  checked = uncontrolled ? checked : formContext.watch(name);
+
+  return (
+    <CheckboxPrimitive.Root
+      ref={ref}
+      className={cn(
+        "peer h-5 w-5 mt-[1px] shrink-0 rounded border border-primary",
+        "ring-offset-background focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+        "disabled:cursor-not-allowed disabled:opacity-50",
+        "data-[state=checked]:border-emerald-400 data-[state=checked]:bg-emerald-400 data-[state=checked]:text-white",
+        "transition-all",
+        className,
+      )}
+      {...props}
+      id={name}
+      checked={checked}
+      onCheckedChange={(val) => {
+        uncontrolled ? onCheckedChange!(val) : formContext.setValue(name, val);
+      }}
+    >
+      <CheckboxPrimitive.Indicator className={cn("flex items-center justify-center text-current")}>
+        <FaCheck className="h-3 w-3" />
+      </CheckboxPrimitive.Indicator>
+    </CheckboxPrimitive.Root>
+  );
+});
+
+InputCheckbox.displayName = "InputCheckbox";
+
+export { InputCheckbox };

packages/kamalion-ui/src/components/Input/index.tsx

@@ -1,3 +1,4 @@
+import { InputCheckbox } from "./InputCheckbox";
 import { InputDatePicker } from "./InputDatePicker";
 import { InputLabel } from "./InputLabel";
 import { InputMask } from "./InputMask";
@@ -18,4 +19,5 @@ export const Input = {
   SelectItem: InputSelectItem,
   Number: InputNumber,
   Mask: InputMask,
+  Checkbox: InputCheckbox,
 };