@mbao01/common 0.0.50 → 0.0.52

package/dist/types/components/Form/Checkbox/Checkbox.d.ts

@@ -1,6 +1,9 @@
-import * as React from "react";
-declare const Checkbox: React.ForwardRefExoticComponent<Omit<React.HTMLProps<HTMLInputElement>, "type" | "ref" | "size"> & {
+import { CheckboxProps } from './types';
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+declare const Checkbox: import('react').ForwardRefExoticComponent<Omit<CheckboxProps, "checked" | "onCheckedChange"> & import('react').RefAttributes<HTMLButtonElement>>;
+declare const CheckboxControlled: import('react').ForwardRefExoticComponent<Omit<CheckboxPrimitive.CheckboxProps & import('react').RefAttributes<HTMLButtonElement>, "ref"> & {
     variant?: "accent" | "error" | "info" | "primary" | "secondary" | "success" | "warning" | undefined;
     size?: "xs" | "sm" | "md" | "lg" | undefined;
-} & React.RefAttributes<HTMLInputElement>>;
-export { Checkbox };
+    rounded?: "xs" | "sm" | "md" | "lg" | undefined;
+} & import('react').RefAttributes<HTMLButtonElement>>;
+export { Checkbox, CheckboxControlled };

package/dist/types/components/Form/Checkbox/constants.d.ts

@@ -1,4 +1,9 @@
 export declare const getCheckboxClasses: (props?: ({
     variant?: "accent" | "error" | "info" | "primary" | "secondary" | "success" | "warning" | null | undefined;
     size?: "xs" | "sm" | "md" | "lg" | null | undefined;
+    rounded?: "xs" | "sm" | "md" | "lg" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const getCheckboxIndicatorClasses: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const getCheckboxIconClasses: (props?: ({
+    size?: "xs" | "sm" | "md" | "lg" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;

package/dist/types/components/Form/Checkbox/index.d.ts

@@ -1 +1 @@
-export { Checkbox } from './Checkbox';
+export { Checkbox, CheckboxControlled } from './Checkbox';

package/dist/types/components/Form/Checkbox/types.d.ts

@@ -1,3 +1,5 @@
+import { ComponentPropsWithoutRef } from 'react';
 import { VariantProps } from '../../../libs';
 import { getCheckboxClasses } from './constants';
-export type CheckboxProps = Omit<React.HTMLProps<HTMLInputElement>, "size" | "ref" | "type"> & VariantProps<typeof getCheckboxClasses>;
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+export type CheckboxProps = ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root> & VariantProps<typeof getCheckboxClasses>;

package/dist/types/components/Form/index.d.ts

@@ -7,7 +7,7 @@ export { Range } from './Range';
 export { Select } from './Select';
 export { Slider } from './Slider';
 export { Switch } from './Switch';
-export { Checkbox } from './Checkbox';
+export { Checkbox, CheckboxControlled } from './Checkbox';
 export { TagsInput } from './TagsInput';
 export { Textarea } from './Textarea';
 export { TextField } from './TextField';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mbao01/common",
   "private": false,
-  "version": "0.0.50",
+  "version": "0.0.52",
   "type": "module",
   "author": "Ayomide Bakare",
   "license": "MIT",
@@ -171,5 +171,5 @@
     "react-dom": "^18.2.0",
     "typescript": "^5.2.2"
   },
-  "gitHead": "1a3e0a5b712ff6dbb8fc8265056caedc28b2c00c"
+  "gitHead": "66624310b556bb7c79fb90088b8594188ba134f3"
 }

package/src/components/Form/Checkbox/Checkbox.tsx

@@ -1,18 +1,58 @@
-import * as React from "react";
+import type { ElementRef } from "react";
+import { forwardRef, useState } from "react";
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+import { CheckIcon, MinusIcon } from "lucide-react";
 import { cn } from "../../../utilities";
-import { getCheckboxClasses } from "./constants";
+import {
+  getCheckboxClasses,
+  getCheckboxIconClasses,
+  getCheckboxIndicatorClasses,
+} from "./constants";
 import { type CheckboxProps } from "./types";
 
-const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
-  ({ className, size, variant, ...props }, ref) => (
-    <input
-      ref={ref}
-      type="checkbox"
-      className={cn(getCheckboxClasses({ size, variant }), className)}
-      {...props}
-    />
-  )
+const CheckboxRoot = forwardRef<ElementRef<typeof CheckboxPrimitive.Root>, CheckboxProps>(
+  (
+    { className, size, rounded, variant, checked, onCheckedChange, defaultChecked, ...props },
+    ref
+  ) => {
+    return (
+      <CheckboxPrimitive.Root
+        ref={ref}
+        checked={checked}
+        defaultChecked={defaultChecked}
+        onCheckedChange={onCheckedChange}
+        className={cn(getCheckboxClasses({ size, rounded, variant }), className)}
+        {...props}
+      >
+        <CheckboxPrimitive.Indicator className={cn(getCheckboxIndicatorClasses())}>
+          {checked === "indeterminate" && (
+            <MinusIcon className={cn(getCheckboxIconClasses({ size }))} />
+          )}
+          {checked === true && <CheckIcon className={cn(getCheckboxIconClasses({ size }))} />}
+        </CheckboxPrimitive.Indicator>
+      </CheckboxPrimitive.Root>
+    );
+  }
 );
+CheckboxRoot.displayName = CheckboxPrimitive.Root.displayName;
+
+const Checkbox = forwardRef<
+  ElementRef<typeof CheckboxPrimitive.Root>,
+  Omit<CheckboxProps, "checked" | "onCheckedChange">
+>(({ defaultChecked, ...props }, ref) => {
+  const [checked, setChecked] = useState<CheckboxPrimitive.CheckedState | undefined>(
+    defaultChecked
+  );
+
+  return <CheckboxRoot ref={ref} checked={checked} onCheckedChange={setChecked} {...props} />;
+});
 Checkbox.displayName = "Checkbox";
 
-export { Checkbox };
+const CheckboxControlled = forwardRef<ElementRef<typeof CheckboxPrimitive.Root>, CheckboxProps>(
+  (props, ref) => {
+    return <CheckboxRoot ref={ref} {...props} />;
+  }
+);
+CheckboxControlled.displayName = "CheckboxControlled";
+
+export { Checkbox, CheckboxControlled };

package/src/components/Form/Checkbox/constants.ts

@@ -1,21 +1,48 @@
 import { cva } from "../../../libs";
 
-export const getCheckboxClasses = cva("checkbox", {
-  variants: {
-    variant: {
-      primary: "checkbox-primary",
-      secondary: "checkbox-secondary",
-      accent: "checkbox-accent",
-      success: "checkbox-success",
-      warning: "checkbox-warning",
-      info: "checkbox-info",
-      error: "checkbox-error",
+export const getCheckboxClasses = cva(
+  "peer flex items-center justify-center h-4 w-4 shrink-0 rounded-sm border focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-base-content disabled:cursor-not-allowed disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        primary:
+          "border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-content",
+        secondary:
+          "border-secondary data-[state=checked]:bg-secondary data-[state=checked]:text-secondary-content",
+        accent:
+          "border-accent data-[state=checked]:bg-accent data-[state=checked]:text-accent-content",
+        success:
+          "border-success data-[state=checked]:bg-success data-[state=checked]:text-success-content",
+        warning:
+          "border-warning data-[state=checked]:bg-warning data-[state=checked]:text-warning-content",
+        info: "border-info data-[state=checked]:bg-info data-[state=checked]:text-info-content",
+        error: "border-error data-[state=checked]:bg-error data-[state=checked]:text-error-content",
+      },
+      size: {
+        xs: "h-3 w-3",
+        sm: "h-4 w-4",
+        md: "h-5 w-5",
+        lg: "h-7 w-7",
+      },
+      rounded: {
+        xs: "rounded-xs",
+        sm: "rounded-sm",
+        md: "rounded-md",
+        lg: "rounded-lg",
+      },
     },
+  }
+);
+
+export const getCheckboxIndicatorClasses = cva("flex items-center justify-center text-current");
+
+export const getCheckboxIconClasses = cva("h-3.5 w-3.5", {
+  variants: {
     size: {
-      xs: "checkbox-xs",
-      sm: "checkbox-sm",
-      md: "checkbox-md",
-      lg: "checkbox-lg",
+      xs: "h-2.5 w-2.5",
+      sm: "h-3 w-3",
+      md: "h-4 w-4",
+      lg: "h-6 w-6",
     },
   },
 });

package/src/components/Form/Checkbox/index.ts

@@ -1 +1 @@
-export { Checkbox } from "./Checkbox";
+export { Checkbox, CheckboxControlled } from "./Checkbox";

package/src/components/Form/Checkbox/types.ts

@@ -1,5 +1,7 @@
+import { ComponentPropsWithoutRef } from "react";
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
 import { type VariantProps } from "../../../libs";
 import { getCheckboxClasses } from "./constants";
 
-export type CheckboxProps = Omit<React.HTMLProps<HTMLInputElement>, "size" | "ref" | "type"> &
+export type CheckboxProps = ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root> &
   VariantProps<typeof getCheckboxClasses>;

package/src/components/Form/index.ts

@@ -7,7 +7,7 @@ export { Range } from "./Range";
 export { Select } from "./Select";
 export { Slider } from "./Slider";
 export { Switch } from "./Switch";
-export { Checkbox } from "./Checkbox";
+export { Checkbox, CheckboxControlled } from "./Checkbox";
 export { TagsInput } from "./TagsInput";
 export { Textarea } from "./Textarea";
 export { TextField } from "./TextField";