next-helios-fe 1.6.22 → 1.6.24

package/package.json

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

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

@@ -1,5 +1,5 @@
 "use client";
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import { Icon } from "@iconify/react";
 import { Window, type WindowProps } from "./window";
 
@@ -13,19 +13,29 @@ interface TabProps {
     variant?: "vertical" | "horizontal";
     border?: boolean;
   };
+  onChangeTab?: (tab: any) => void;
 }
 
 interface TabComponent extends React.FC<TabProps> {
   Window: React.FC<WindowProps>;
 }
 
-export const Tab: TabComponent = ({ children, tabs, options }) => {
+export const Tab: TabComponent = ({ children, tabs, options, onChangeTab }) => {
   const childrenList = React.Children.toArray(children);
   const windowList = childrenList.filter((child) => {
     return (child as React.ReactElement).type === Tab.Window;
   });
   const [activeTab, setActiveTab] = useState(0);
 
+  useEffect(() => {
+    if (onChangeTab) {
+      onChangeTab({
+        index: activeTab,
+        title: tabs[activeTab].title,
+      });
+    }
+  }, [activeTab]);
+
   return (
     <div
       className={`flex w-full h-full overlow-hidden ${

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

@@ -1,5 +1,5 @@
 "use client";
-import React, { useState, useEffect } from "react";
+import React from "react";
 
 export interface CheckboxProps
   extends React.InputHTMLAttributes<HTMLInputElement> {
@@ -17,27 +17,6 @@ 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={`group/checkbox flex items-center ${
@@ -58,10 +37,6 @@ export const Checkbox: React.FC<CheckboxProps> = ({
             theme && "border-0"
           }`}
           style={{ backgroundColor: theme }}
-          checked={tempChecked}
-          onChange={(e) => {
-            setTempChecked(e.target.checked);
-          }}
           {...rest}
         />
       </div>

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

@@ -84,7 +84,7 @@ export const Color: React.FC<ColorProps> = ({
         <div className="relative flex-1 flex items-center">
           <input
             type="text"
-            className={`w-full px-4 border-default border rounded-md bg-secondary-bg placeholder:duration-300 placeholder:translate-x-0 focus:placeholder:translate-x-1 placeholder:text-slate-300 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}`}
+            className={`w-full ps-4 pe-14 border-default border rounded-md bg-secondary-bg placeholder:duration-300 placeholder:translate-x-0 focus:placeholder:translate-x-1 placeholder:text-slate-300 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}`}
             placeholder={rest.placeholder}
             value={tempValue}
             onChange={(e) => setTempValue(e.target.value.toUpperCase())}

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

@@ -53,7 +53,7 @@ export const Date: React.FC<DateProps> = ({ options, label, ...rest }) => {
         <div className="relative flex items-center">
           <input
             type="text"
-            className={`accent-primary w-full px-4 border-default border rounded-md bg-secondary-bg placeholder:duration-300 placeholder:translate-x-0 focus:placeholder:translate-x-1 placeholder:text-slate-300 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}`}
+            className={`w-full ps-4 pe-14 border-default border rounded-md bg-secondary-bg placeholder:duration-300 placeholder:translate-x-0 focus:placeholder:translate-x-1 placeholder:text-slate-300 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}`}
             value={
               selectedRange === "Custom" || !options?.enableSelectRange
                 ? `${
@@ -93,15 +93,11 @@ export const Date: React.FC<DateProps> = ({ options, label, ...rest }) => {
             </button>
           }
         >
-          <div
-            className={`flex gap-2 md:w-full overflow-auto md:overflow-clip ${
-              options?.enableSelectRange ? "w-80" : "w-full"
-            }`}
-          >
+          <div className="flex gap-2 w-fit overflow-auto md:overflow-clip">
             {options?.enableSelectRange && (
-              <div className="w-full">
+              <div className="w-40">
                 <button
-                  className="min-w-40 w-full my-0.5 px-4 py-2 rounded-md text-sm text-left hover:bg-secondary-light disabled:bg-primary-transparent disabled:text-primary"
+                  className="w-40 my-0.5 px-4 py-2 rounded-md text-sm text-left hover:bg-secondary-light disabled:bg-primary-transparent disabled:text-primary"
                   disabled={selectedRange === "Today"}
                   onClick={() => {
                     setSelectedRange("Today");
@@ -114,7 +110,7 @@ export const Date: React.FC<DateProps> = ({ options, label, ...rest }) => {
                   Today
                 </button>
                 <button
-                  className="min-w-40 w-full my-0.5 px-4 py-2 rounded-md text-sm text-left hover:bg-secondary-light disabled:bg-primary-transparent disabled:text-primary"
+                  className="w-40 my-0.5 px-4 py-2 rounded-md text-sm text-left hover:bg-secondary-light disabled:bg-primary-transparent disabled:text-primary"
                   disabled={selectedRange === "Yesterday"}
                   onClick={() => {
                     setSelectedRange("Yesterday");
@@ -127,7 +123,7 @@ export const Date: React.FC<DateProps> = ({ options, label, ...rest }) => {
                   Yesterday
                 </button>
                 <button
-                  className="min-w-40 w-full my-0.5 px-4 py-2 rounded-md text-sm text-left hover:bg-secondary-light disabled:bg-primary-transparent disabled:text-primary"
+                  className="w-40 my-0.5 px-4 py-2 rounded-md text-sm text-left hover:bg-secondary-light disabled:bg-primary-transparent disabled:text-primary"
                   disabled={selectedRange === "Last 7 days"}
                   onClick={() => {
                     setSelectedRange("Last 7 days");
@@ -140,7 +136,7 @@ export const Date: React.FC<DateProps> = ({ options, label, ...rest }) => {
                   Last 7 days
                 </button>
                 <button
-                  className="min-w-40 w-full my-0.5 px-4 py-2 rounded-md text-sm text-left hover:bg-secondary-light disabled:bg-primary-transparent disabled:text-primary"
+                  className="w-40 my-0.5 px-4 py-2 rounded-md text-sm text-left hover:bg-secondary-light disabled:bg-primary-transparent disabled:text-primary"
                   disabled={selectedRange === "Last 30 days"}
                   onClick={() => {
                     setSelectedRange("Last 30 days");
@@ -153,7 +149,7 @@ export const Date: React.FC<DateProps> = ({ options, label, ...rest }) => {
                   Last 30 days
                 </button>
                 <button
-                  className="min-w-40 w-full my-0.5 px-4 py-2 rounded-md text-sm text-left hover:bg-secondary-light disabled:bg-primary-transparent disabled:text-primary"
+                  className="w-40 my-0.5 px-4 py-2 rounded-md text-sm text-left hover:bg-secondary-light disabled:bg-primary-transparent disabled:text-primary"
                   disabled={selectedRange === "Custom"}
                   onClick={() => {
                     setSelectedRange("Custom");
@@ -171,9 +167,7 @@ export const Date: React.FC<DateProps> = ({ options, label, ...rest }) => {
               options={{
                 enableSelectRange: options?.enableSelectRange ?? false,
               }}
-              value={
-                options?.enableSelectRange ? tempValue : tempValue[0]
-              }
+              value={options?.enableSelectRange ? tempValue : tempValue[0]}
               onChange={(value) => {
                 setSelectedRange("Custom");
                 if (options?.enableSelectRange) {

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

@@ -28,10 +28,10 @@ export const File: React.FC<FileProps> = ({
   const width = options?.width === "fit" ? "w-fit" : "w-full";
   const height =
     options?.height === "short"
-      ? "py-1"
+      ? "h-[35px]"
       : options?.height === "high"
-      ? "py-2"
-      : "py-1.5";
+      ? "h-[43px]"
+      : "h-[39px]";
 
   useEffect(() => {
     document

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

@@ -1,5 +1,5 @@
 "use client";
-import React, { useState, useEffect } from "react";
+import React, { useRef } from "react";
 import { Icon } from "@iconify/react";
 
 export interface NumberProps
@@ -12,7 +12,7 @@ export interface NumberProps
 }
 
 export const Number: React.FC<NumberProps> = ({ options, label, ...rest }) => {
-  const [tempValue, setTempValue] = useState("");
+  const inputRef = useRef<HTMLInputElement>(null);
   const width = options?.width === "fit" ? "w-fit" : "w-full";
   const height =
     options?.height === "short"
@@ -21,23 +21,6 @@ export const Number: React.FC<NumberProps> = ({ options, label, ...rest }) => {
       ? "py-2"
       : "py-1.5";
 
-  useEffect(() => {
-    if (rest.value) {
-      setTempValue(rest.value as string);
-      return;
-    } else if (rest.defaultValue || rest.defaultValue === 0) {
-      setTempValue(rest.defaultValue as string);
-      return;
-    }
-  }, [rest.value, rest.defaultValue]);
-
-  useEffect(() => {
-    rest.onChange &&
-      rest.onChange({
-        target: { value: tempValue } as HTMLInputElement,
-      } as React.ChangeEvent<HTMLInputElement>);
-  }, [tempValue]);
-
   return (
     <label className={`grid gap-2 ${width}`}>
       {label && (
@@ -51,10 +34,9 @@ export const Number: React.FC<NumberProps> = ({ options, label, ...rest }) => {
       )}
       <div className="relative flex items-center">
         <input
+          ref={inputRef}
           type="number"
-          className={`w-full px-4 border-default border rounded-md bg-secondary-bg [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none placeholder:duration-300 placeholder:translate-x-0 focus:placeholder:translate-x-1 placeholder:text-slate-300 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}`}
-          value={tempValue}
-          onChange={(e) => setTempValue(e.target.value)}
+          className={`w-full ps-4 pe-20 border-default border rounded-md bg-secondary-bg [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none placeholder:duration-300 placeholder:translate-x-0 focus:placeholder:translate-x-1 placeholder:text-slate-300 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}`}
           {...rest}
         />
         <div className="absolute right-4 flex gap-2">
@@ -64,11 +46,7 @@ export const Number: React.FC<NumberProps> = ({ options, label, ...rest }) => {
             tabIndex={-1}
             disabled={rest.disabled}
             onClick={() => {
-              setTempValue(
-                (
-                  (parseInt(tempValue) || 0) - ((rest.step as number) || 1)
-                ).toString()
-              );
+              inputRef.current?.stepDown();
             }}
           >
             <Icon icon="ic:round-minus" className="text-lg" />
@@ -79,11 +57,7 @@ export const Number: React.FC<NumberProps> = ({ options, label, ...rest }) => {
             tabIndex={-1}
             disabled={rest.disabled}
             onClick={() => {
-              setTempValue(
-                (
-                  (parseInt(tempValue) || 0) + ((rest.step as number) || 1)
-                ).toString()
-              );
+              inputRef.current?.stepUp();
             }}
           >
             <Icon icon="ic:round-plus" className="text-lg" />

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

@@ -39,7 +39,7 @@ export const Password: React.FC<PasswordProps> = ({
       <div className="relative flex items-center">
         <input
           type={show ? "text" : "password"}
-          className={`w-full px-4 border-default border rounded-md bg-secondary-bg placeholder:duration-300 placeholder:translate-x-0 focus:placeholder:translate-x-1 placeholder:text-slate-300 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}`}
+          className={`w-full ps-4 pe-14 border-default border rounded-md bg-secondary-bg placeholder:duration-300 placeholder:translate-x-0 focus:placeholder:translate-x-1 placeholder:text-slate-300 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}`}
           {...rest}
         />
         <button

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

@@ -1,5 +1,5 @@
 "use client";
-import React, { useState, useEffect } from "react";
+import React from "react";
 
 export interface RangeProps
   extends React.InputHTMLAttributes<HTMLInputElement> {
@@ -16,26 +16,8 @@ export const Range: React.FC<RangeProps> = ({
   theme,
   ...rest
 }) => {
-  const [tempValue, setTempValue] = useState("0");
   const width = options?.width === "fit" ? "w-fit" : "w-full";
 
-  useEffect(() => {
-    if (rest.value) {
-      setTempValue(rest.value as string);
-      return;
-    } else if (rest.defaultValue) {
-      setTempValue(rest.defaultValue as string);
-      return;
-    }
-  }, [rest.value, rest.defaultValue]);
-
-  useEffect(() => {
-    rest.onChange &&
-      rest.onChange({
-        target: { value: tempValue } as HTMLInputElement,
-      } as React.ChangeEvent<HTMLInputElement>);
-  }, [tempValue]);
-
   return (
     <label className={`grid gap-2 ${width}`}>
       {label && (
@@ -54,13 +36,13 @@ export const Range: React.FC<RangeProps> = ({
             theme && "border-0"
           }`}
           style={{ accentColor: theme }}
-          value={tempValue}
-          onChange={(e) => setTempValue(e.target.value.toString())}
           {...rest}
         />
-        <span className="w-7 text-right">
-          {rest.value || rest.defaultValue || tempValue}
-        </span>
+        {(rest.value || rest.defaultValue) && (
+          <span className="w-7 text-right">
+            {rest.value || rest.defaultValue}
+          </span>
+        )}
       </div>
     </label>
   );

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

@@ -158,7 +158,7 @@ export const Time: React.FC<TimeProps> = ({ options, label, ...rest }) => {
         <div className="relative flex items-center">
           <input
             type="text"
-            className={`accent-primary w-full px-4 border-default border rounded-md bg-secondary-bg placeholder:duration-300 placeholder:translate-x-0 focus:placeholder:translate-x-1 placeholder:text-slate-300 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}`}
+            className={`w-full ps-4 pe-14 border-default border rounded-md bg-secondary-bg placeholder:duration-300 placeholder:translate-x-0 focus:placeholder:translate-x-1 placeholder:text-slate-300 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}`}
             value={tempValue}
             {...rest}
           />
@@ -190,16 +190,16 @@ export const Time: React.FC<TimeProps> = ({ options, label, ...rest }) => {
             </button>
           }
         >
-          <div className="flex gap-2 w-80 md:w-full overflow-auto md:overflow-clip">
+          <div className="flex gap-2 w-fit overflow-auto md:overflow-clip">
             <div
               ref={hoursRef}
-              className="w-20 h-80 overflow-auto [&::-webkit-scrollbar]:hidden"
+              className="w-16 h-80 overflow-auto [&::-webkit-scrollbar]:hidden"
             >
               {hours.map((item, index) => (
                 <button
                   key={index}
                   type="button"
-                  className={`w-full my-0.5 px-4 py-2 rounded-md text-sm text-left text-default ${
+                  className={`w-full my-0.5 px-4 py-2 rounded-md text-sm text-center text-default ${
                     tempValue.split(":")[0] === item
                       ? "bg-primary-transparent cursor-default"
                       : "hover:bg-secondary-light"
@@ -219,13 +219,13 @@ export const Time: React.FC<TimeProps> = ({ options, label, ...rest }) => {
             </div>
             <div
               ref={minutesRef}
-              className="w-20 h-80 overflow-auto [&::-webkit-scrollbar]:hidden"
+              className="w-16 h-80 overflow-auto [&::-webkit-scrollbar]:hidden"
             >
               {minutes.map((item, index) => (
                 <button
                   key={index}
                   type="button"
-                  className={`w-full my-0.5 px-4 py-2 rounded-md text-sm text-left text-default ${
+                  className={`w-full my-0.5 px-4 py-2 rounded-md text-sm text-center text-default ${
                     tempValue.split(":")[1].split(" ")[0] === item
                       ? "bg-primary-transparent cursor-default"
                       : "hover:bg-secondary-light "
@@ -243,12 +243,12 @@ export const Time: React.FC<TimeProps> = ({ options, label, ...rest }) => {
                 </button>
               ))}
             </div>
-            <div className="w-20 h-80 overflow-auto [&::-webkit-scrollbar]:hidden">
+            <div className="w-16 h-80 overflow-auto [&::-webkit-scrollbar]:hidden">
               {ampm.map((item, index) => (
                 <button
                   key={index}
                   type="button"
-                  className={`w-full my-0.5 px-4 py-2 rounded-md text-sm text-left text-default ${
+                  className={`w-full my-0.5 px-4 py-2 rounded-md text-sm text-center text-default ${
                     tempValue.split(" ")[1] === item
                       ? "bg-primary-transparent cursor-default"
                       : "hover:bg-secondary-light "

package/src/components/form/other/autocomplete.tsx

@@ -132,7 +132,7 @@ export const Autocomplete: React.FC<AutocompleteProps> = ({
         >
           <input
             type="text"
-            className={`w-full px-4 border-default border rounded-md bg-secondary-bg placeholder:duration-300 placeholder:translate-x-0 focus:placeholder:translate-x-1 placeholder:text-slate-300 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}`}
+            className={`w-full ps-4 pe-14 border-default border rounded-md bg-secondary-bg placeholder:duration-300 placeholder:translate-x-0 focus:placeholder:translate-x-1 placeholder:text-slate-300 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}`}
             placeholder={placeholder}
             required={rest.required}
             disabled={rest.disabled}

package/src/components/form/other/multipleSelect.tsx

@@ -90,7 +90,7 @@ export const MultipleSelect: React.FC<MultipleSelectProps> = ({
         <div className="relative flex items-center">
           <div
             ref={inputRef}
-            className={`group/button flex justify-between items-center gap-2 w-full min-h-10 px-4 border rounded-md caret-transparent focus:outline-none focus:ring-1 focus:ring-primary focus:shadow focus:shadow-primary focus:border-primary-dark ${height} ${
+            className={`group/button flex justify-between items-center gap-2 w-full min-h-10 ps-4 pe-14 border rounded-md caret-transparent focus:outline-none focus:ring-1 focus:ring-primary focus:shadow focus:shadow-primary focus:border-primary-dark ${height} ${
               disabled
                 ? "bg-secondary-light cursor-default pointer-events-none"
                 : "bg-secondary-bg cursor-pointer"
@@ -150,7 +150,7 @@ export const MultipleSelect: React.FC<MultipleSelectProps> = ({
             </div>
           </div>
           <div
-            className="absolute flex flex-wrap gap-2 h-min px-4 pointer-events-none"
+            className="absolute flex flex-wrap gap-2 h-min ps-4 pe-14 pointer-events-none"
             style={{ width: dropdownWidth - 52 }}
           >
             {tempValue?.map((item) => {

package/src/components/form/other/secret.tsx

@@ -43,7 +43,7 @@ export const Secret: React.FC<SecretProps> = ({
       <div className="relative flex items-center">
         <input
           type="text"
-          className={`w-full px-4 border-default border rounded-md bg-secondary-bg placeholder:duration-300 placeholder:translate-x-0 focus:placeholder:translate-x-1 placeholder:text-slate-300 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}`}
+          className={`w-full ps-4 pe-20 border-default border rounded-md bg-secondary-bg placeholder:duration-300 placeholder:translate-x-0 focus:placeholder:translate-x-1 placeholder:text-slate-300 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}`}
           value={show ? value : value ? value.slice(0, 3) + ".." : ""}
           disabled
           {...rest}

package/src/components/form/other/select.tsx

@@ -82,7 +82,7 @@ export const Select: React.FC<SelectProps> = ({
           <input
             ref={inputRef}
             type="text"
-            className={`w-full px-4 border rounded-md bg-secondary-bg cursor-pointer caret-transparent placeholder:duration-300 placeholder:text-slate-300 focus:placeholder:translate-x-1 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 disabled:cursor-default ${height} ${
+            className={`w-full ps-4 pe-14 border rounded-md bg-secondary-bg cursor-pointer caret-transparent placeholder:duration-300 placeholder:text-slate-300 focus:placeholder:translate-x-1 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 disabled:cursor-default ${height} ${
               openDropdown
                 ? "placeholder:translate-x-1 outline-none ring-1 ring-primary shadow shadow-primary border-primary-dark"
                 : "border-default placeholder:translate-x-0"