next-helios-fe 1.3.4 → 1.3.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "next-helios-fe",
-  "version": "1.3.4",
+  "version": "1.3.5",
   "description": "",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/components/form/input/checkbox.tsx

@@ -1,9 +1,10 @@
 "use client";
-import React from "react";
+import React, { useState, useEffect } from "react";
 
 export interface CheckboxProps
   extends React.InputHTMLAttributes<HTMLInputElement> {
   options?: {
+    variant?: "basic" | "switch";
     disableHover?: boolean;
   };
   label?: string;
@@ -16,11 +17,32 @@ export const Checkbox: React.FC<CheckboxProps> = ({
   theme,
   ...rest
 }) => {
+  const [tempChecked, setTempChecked] = useState(false);
+
+  useEffect(() => {
+    if (rest.checked) {
+      setTempChecked(rest.checked as boolean);
+      return;
+    } else if (rest.defaultChecked) {
+      setTempChecked(rest.defaultChecked as boolean);
+      return;
+    }
+  }, [rest.value, rest.defaultValue]);
+
+  useEffect(() => {
+    if (tempChecked) {
+      rest.onChange &&
+        rest.onChange({
+          target: { checked: tempChecked } as HTMLInputElement,
+        } as any);
+    }
+  }, [tempChecked]);
+
   return (
     <label
-      className={`flex items-center w-fit ${
+      className={`group/checkbox flex items-center ${
         !options?.disableHover ? "gap-2" : "gap-4"
-      }`}
+      } ${options?.variant === "switch" ? "justify-between w-full" : "w-fit"}`}
     >
       <div
         className={`flex justify-center items-center ${
@@ -28,7 +50,7 @@ export const Checkbox: React.FC<CheckboxProps> = ({
         } ${
           !options?.disableHover &&
           "w-8 h-8 rounded-full hover:bg-secondary-light"
-        }`}
+        } ${options?.variant === "switch" && "hidden"}`}
       >
         <input
           type="checkbox"
@@ -36,6 +58,10 @@ export const Checkbox: React.FC<CheckboxProps> = ({
             theme && "border-0"
           }`}
           style={{ backgroundColor: theme }}
+          checked={tempChecked}
+          onChange={(e) => {
+            setTempChecked(e.target.checked);
+          }}
           {...rest}
         />
       </div>
@@ -48,6 +74,13 @@ export const Checkbox: React.FC<CheckboxProps> = ({
           {label}
         </span>
       )}
+      <div
+        className={`flex items-center justify-start w-8 h-5 border rounded-full bg-secondary-bg overflow-hidden cursor-pointer duration-300 group-has-[:checked]/checkbox:justify-end group-has-[:checked]/checkbox:bg-primary ${
+          options?.variant !== "switch" && "hidden"
+        }`}
+      >
+        <div className="w-4 h-4 rounded-full bg-primary duration-300 group-has-[:checked]/checkbox:bg-secondary-bg"></div>
+      </div>
     </label>
   );
 };

package/src/components/form/input/file.tsx

@@ -4,7 +4,7 @@ import { Icon } from "@iconify/react";
 
 export interface FileProps extends React.InputHTMLAttributes<HTMLInputElement> {
   options?: {
-    variant?: "default" | "drag&drop";
+    variant?: "basic" | "drag&drop";
     maxSizeInMb?: number;
     buttonOnly?: boolean;
     width?: "full" | "fit";