@mbao01/common 0.0.51 → 0.0.52

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

@@ -1,7 +1,9 @@
+import { CheckboxProps } from './types';
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
-declare const Checkbox: import('react').ForwardRefExoticComponent<Omit<Omit<CheckboxPrimitive.CheckboxProps & import('react').RefAttributes<HTMLButtonElement>, "ref">, "checked" | "onCheckedChange"> & {
+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;
     rounded?: "xs" | "sm" | "md" | "lg" | undefined;
 } & import('react').RefAttributes<HTMLButtonElement>>;
-export { Checkbox };
+export { Checkbox, CheckboxControlled };

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

@@ -2,4 +2,4 @@ import { ComponentPropsWithoutRef } from 'react';
 import { VariantProps } from '../../../libs';
 import { getCheckboxClasses } from './constants';
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
-export type CheckboxProps = Omit<ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>, "checked" | "onCheckedChange"> & VariantProps<typeof getCheckboxClasses>;
+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.51",
+  "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": "4719b1effc0e198fed741e9001b853016f2563f6"
+  "gitHead": "66624310b556bb7c79fb90088b8594188ba134f3"
 }

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

@@ -10,17 +10,17 @@ import {
 } from "./constants";
 import { type CheckboxProps } from "./types";
 
-const Checkbox = forwardRef<ElementRef<typeof CheckboxPrimitive.Root>, CheckboxProps>(
-  ({ className, size, rounded, variant, defaultChecked, ...props }, ref) => {
-    const [checked, setChecked] = useState<CheckboxPrimitive.CheckedState | undefined>(
-      defaultChecked
-    );
-
+const CheckboxRoot = forwardRef<ElementRef<typeof CheckboxPrimitive.Root>, CheckboxProps>(
+  (
+    { className, size, rounded, variant, checked, onCheckedChange, defaultChecked, ...props },
+    ref
+  ) => {
     return (
       <CheckboxPrimitive.Root
         ref={ref}
         checked={checked}
-        onCheckedChange={setChecked}
+        defaultChecked={defaultChecked}
+        onCheckedChange={onCheckedChange}
         className={cn(getCheckboxClasses({ size, rounded, variant }), className)}
         {...props}
       >
@@ -34,6 +34,25 @@ const Checkbox = forwardRef<ElementRef<typeof CheckboxPrimitive.Root>, CheckboxP
     );
   }
 );
-Checkbox.displayName = CheckboxPrimitive.Root.displayName;
+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";
+
+const CheckboxControlled = forwardRef<ElementRef<typeof CheckboxPrimitive.Root>, CheckboxProps>(
+  (props, ref) => {
+    return <CheckboxRoot ref={ref} {...props} />;
+  }
+);
+CheckboxControlled.displayName = "CheckboxControlled";
 
-export { Checkbox };
+export { Checkbox, CheckboxControlled };

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

@@ -1,7 +1,7 @@
 import { cva } from "../../../libs";
 
 export const getCheckboxClasses = cva(
-  "peer flex items-center justify-center h-6 w-6 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",
+  "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: {
@@ -19,10 +19,10 @@ export const getCheckboxClasses = cva(
         error: "border-error data-[state=checked]:bg-error data-[state=checked]:text-error-content",
       },
       size: {
-        xs: "h-4 w-4",
-        sm: "h-5 w-5",
-        md: "h-6 w-6",
-        lg: "h-8 w-8",
+        xs: "h-3 w-3",
+        sm: "h-4 w-4",
+        md: "h-5 w-5",
+        lg: "h-7 w-7",
       },
       rounded: {
         xs: "rounded-xs",
@@ -36,12 +36,12 @@ export const getCheckboxClasses = cva(
 
 export const getCheckboxIndicatorClasses = cva("flex items-center justify-center text-current");
 
-export const getCheckboxIconClasses = cva("h-4 w-4", {
+export const getCheckboxIconClasses = cva("h-3.5 w-3.5", {
   variants: {
     size: {
       xs: "h-2.5 w-2.5",
-      sm: "h-3.5 w-3.5",
-      md: "h-5 w-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

@@ -3,8 +3,5 @@ import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
 import { type VariantProps } from "../../../libs";
 import { getCheckboxClasses } from "./constants";
 
-export type CheckboxProps = Omit<
-  ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>,
-  "checked" | "onCheckedChange"
-> &
+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";