next-helios-fe 1.3.4 → 1.3.6

package/package.json

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

package/src/components/content-container/modal/index.tsx

@@ -16,7 +16,7 @@ interface ModalProps {
   };
   action?: React.ReactNode;
   open: boolean;
-  onClose: (open: boolean) => void;
+  onClose: () => void;
 }
 
 export const Modal: React.FC<ModalProps> = ({
@@ -32,7 +32,7 @@ export const Modal: React.FC<ModalProps> = ({
     if (!options?.disableClose) {
       document.addEventListener("keydown", (e) => {
         if (e.key === "Escape") {
-          onClose(false);
+          onClose && onClose();
         }
       });
     }
@@ -71,7 +71,7 @@ export const Modal: React.FC<ModalProps> = ({
                     type="button"
                     className="flex justify-center items-center rounded-full px-1 py-1 text-slate-400 hover:bg-secondary-light"
                     onClick={() => {
-                      onClose(false);
+                      onClose && onClose();
                     }}
                   >
                     <Icon icon="pajamas:close" className="text-2xl" />
@@ -97,7 +97,7 @@ export const Modal: React.FC<ModalProps> = ({
                       border: true,
                     }}
                     onClick={() => {
-                      onClose(false);
+                      onClose && onClose();
                     }}
                   >
                     Close

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";