next-helios-fe 1.3.3 → 1.3.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "next-helios-fe",
-  "version": "1.3.3",
+  "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

@@ -1,10 +1,10 @@
 "use client";
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useRef } from "react";
 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";
@@ -22,6 +22,7 @@ export const File: React.FC<FileProps> = ({
   value,
   ...rest
 }) => {
+  const inputRef = useRef<HTMLInputElement>(null);
   const [tempFile, setTempFile] = useState<any>([]);
   const width = options?.width === "fit" ? "w-fit" : "w-full";
   const height =
@@ -78,6 +79,7 @@ export const File: React.FC<FileProps> = ({
             }`}
           >
             <input
+              ref={inputRef}
               type="file"
               className={`peer/file w-full px-4 border-default border rounded-md bg-secondary-bg text-transparent file:hidden focus:outline-none focus:ring-1 focus:ring-primary focus:shadow focus:shadow-primary focus:border-primary-dark disabled:bg-secondary-light disabled:text-slate-400 ${height}`}
               onChange={(e) => {
@@ -184,6 +186,9 @@ export const File: React.FC<FileProps> = ({
             type="button"
             className="p-2 rounded-full hover:bg-secondary-light"
             disabled={rest.disabled}
+            onClick={() => {
+              inputRef.current?.click();
+            }}
           >
             <Icon icon="mi:attachment" className="text-xl" />
           </button>