next-helios-fe 1.6.25 → 1.6.27

package/package.json

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

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

@@ -4,17 +4,19 @@ import { Icon } from "@iconify/react";
 
 export interface ColorProps
   extends React.InputHTMLAttributes<HTMLInputElement> {
+  label?: string;
+  description?: string;
   options?: {
     width?: "full" | "fit";
     height?: "short" | "medium" | "high";
   };
-  label?: string;
   onClipboardClick?: (value: string) => void;
 }
 
 export const Color: React.FC<ColorProps> = ({
   options,
   label,
+  description,
   onClipboardClick,
   ...rest
 }) => {
@@ -47,15 +49,23 @@ export const Color: React.FC<ColorProps> = ({
 
   return (
     <label className={`grid gap-2 ${width}`}>
-      {label && (
-        <span
-          className={`text-sm select-none ${
-            rest.required && "after:content-['*'] after:ml-1 after:text-danger"
-          }`}
-        >
-          {label}
-        </span>
-      )}
+      <div className="flex justify-between items-center">
+        {label && (
+          <span
+            className={`text-sm select-none ${
+              rest.required &&
+              "after:content-['*'] after:ml-1 after:text-danger"
+            }`}
+          >
+            {label}
+          </span>
+        )}
+        {description && (
+          <span title={description} className="text-sm text-primary-dark">
+            <Icon icon="octicon:info-16" />
+          </span>
+        )}
+      </div>
       <div className="flex gap-4">
         <div className="relative flex flex-col">
           <button

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

@@ -6,6 +6,7 @@ import dayjs from "dayjs";
 
 export interface DateProps extends React.InputHTMLAttributes<HTMLInputElement> {
   label?: string;
+  description?: string;
   options?: {
     enableSelectRange?: boolean;
     width?: "full" | "fit";
@@ -13,7 +14,12 @@ export interface DateProps extends React.InputHTMLAttributes<HTMLInputElement> {
   };
 }
 
-export const Date: React.FC<DateProps> = ({ options, label, ...rest }) => {
+export const Date: React.FC<DateProps> = ({
+  options,
+  label,
+  description,
+  ...rest
+}) => {
   const [tempValue, setTempValue] = useState<any>([
     dayjs().startOf("day"),
     dayjs().endOf("day"),
@@ -40,16 +46,23 @@ export const Date: React.FC<DateProps> = ({ options, label, ...rest }) => {
   return (
     <div className="flex items-end">
       <label className={`grid gap-2 ${width}`}>
-        {label && (
-          <span
-            className={`text-sm select-none ${
-              rest.required &&
-              "after:content-['*'] after:ml-1 after:text-danger"
-            }`}
-          >
-            {label}
-          </span>
-        )}
+        <div className="flex justify-between items-center">
+          {label && (
+            <span
+              className={`text-sm select-none ${
+                rest.required &&
+                "after:content-['*'] after:ml-1 after:text-danger"
+              }`}
+            >
+              {label}
+            </span>
+          )}
+          {description && (
+            <span title={description} className="text-sm text-primary-dark">
+              <Icon icon="octicon:info-16" />
+            </span>
+          )}
+        </div>
         <div className="relative flex items-center">
           <input
             type="text"

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

@@ -1,16 +1,24 @@
 "use client";
 import React from "react";
+import { Icon } from "@iconify/react";
 
 export interface EmailProps
   extends React.InputHTMLAttributes<HTMLInputElement> {
+  label?: string;
+  description?: string;
   options?: {
     width?: "full" | "fit";
     height?: "short" | "medium" | "high";
+    hideInputDetail?: boolean;
   };
-  label?: string;
 }
 
-export const Email: React.FC<EmailProps> = ({ options, label, ...rest }) => {
+export const Email: React.FC<EmailProps> = ({
+  options,
+  label,
+  description,
+  ...rest
+}) => {
   const width = options?.width === "fit" ? "w-fit" : "w-full";
   const height =
     options?.height === "short"
@@ -21,15 +29,32 @@ export const Email: React.FC<EmailProps> = ({ options, label, ...rest }) => {
 
   return (
     <label className={`grid gap-2 ${width}`}>
-      {label && (
-        <span
-          className={`text-sm select-none ${
-            rest.required && "after:content-['*'] after:ml-1 after:text-danger"
-          }`}
-        >
-          {label}
-        </span>
-      )}
+      <div className="flex justify-between">
+        {label && (
+          <span
+            className={`text-sm select-none ${
+              rest.required &&
+              "after:content-['*'] after:ml-1 after:text-danger"
+            }`}
+          >
+            {label}
+          </span>
+        )}
+        {!options?.hideInputDetail && (
+          <div className="flex items-center gap-2">
+            {(rest.minLength || rest.maxLength) && (
+              <span className="text-sm select-none">
+                {rest.minLength || 0}/{rest.maxLength || "∞"}
+              </span>
+            )}
+            {description && (
+              <span title={description} className="text-sm text-primary-dark">
+                <Icon icon="octicon:info-16" />
+              </span>
+            )}
+          </div>
+        )}
+      </div>
       <input
         type="email"
         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}`}

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

@@ -3,6 +3,8 @@ import React, { useState, useEffect, useRef } from "react";
 import { Icon } from "@iconify/react";
 
 export interface FileProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  label?: string;
+  description?: string;
   options?: {
     variant?: "basic" | "drag&drop";
     buttonVariant?: "basic" | "button";
@@ -10,15 +12,16 @@ export interface FileProps extends React.InputHTMLAttributes<HTMLInputElement> {
     buttonOnly?: boolean;
     width?: "full" | "fit";
     height?: "short" | "medium" | "high";
+    hideInputDetail?: boolean;
   };
-  label?: string;
   defaultValue?: any[];
   value?: any[];
 }
 
 export const File: React.FC<FileProps> = ({
-  options,
   label,
+  description,
+  options,
   defaultValue,
   value,
   ...rest
@@ -54,16 +57,39 @@ export const File: React.FC<FileProps> = ({
 
   return (
     <label className={`grid gap-2 ${width}`}>
-      {label && (
-        <span
-          className={`text-sm select-none ${
-            rest.required && "after:content-['*'] after:ml-1 after:text-danger"
-          }`}
-        >
-          {label}
-        </span>
+      {!options?.buttonOnly && (
+        <div className="flex justify-between">
+          {label && (
+            <span
+              className={`text-sm select-none ${
+                rest.required &&
+                "after:content-['*'] after:ml-1 after:text-danger"
+              }`}
+            >
+              {label}
+            </span>
+          )}
+          {!options?.hideInputDetail && (
+            <div className="flex items-center gap-2">
+              {options?.variant !== "drag&drop" && options?.maxSizeInMb && (
+                <span className="text-sm select-none">
+                  {options?.maxSizeInMb} MB
+                </span>
+              )}
+              {description && (
+                <span title={description} className="text-sm text-primary-dark">
+                  <Icon icon="octicon:info-16" />
+                </span>
+              )}
+            </div>
+          )}
+        </div>
       )}
-      <div className="flex flex-row-reverse items-center gap-4">
+      <div
+        className={`flex items-center gap-4 ${
+          !options?.buttonOnly && "flex-row-reverse"
+        }`}
+      >
         {options?.variant !== "drag&drop" ? (
           <div
             className={`relative flex-1 items-center ${

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

@@ -4,14 +4,21 @@ import { Icon } from "@iconify/react";
 
 export interface NumberProps
   extends React.InputHTMLAttributes<HTMLInputElement> {
+  label?: string;
+  description?: string;
   options?: {
     width?: "full" | "fit";
     height?: "short" | "medium" | "high";
+    hideInputDetail?: boolean;
   };
-  label?: string;
 }
 
-export const Number: React.FC<NumberProps> = ({ options, label, ...rest }) => {
+export const Number: React.FC<NumberProps> = ({
+  options,
+  label,
+  description,
+  ...rest
+}) => {
   const inputRef = useRef<HTMLInputElement>(null);
   const width = options?.width === "fit" ? "w-fit" : "w-full";
   const height =
@@ -23,15 +30,33 @@ export const Number: React.FC<NumberProps> = ({ options, label, ...rest }) => {
 
   return (
     <label className={`grid gap-2 ${width}`}>
-      {label && (
-        <span
-          className={`text-sm select-none ${
-            rest.required && "after:content-['*'] after:ml-1 after:text-danger"
-          }`}
-        >
-          {label}
-        </span>
-      )}
+      <div className="flex justify-between">
+        {label && (
+          <span
+            className={`text-sm select-none ${
+              rest.required &&
+              "after:content-['*'] after:ml-1 after:text-danger"
+            }`}
+          >
+            {label}
+          </span>
+        )}
+        {!options?.hideInputDetail && (
+          <div className="flex items-center gap-2">
+            {(rest.min || rest.max) && (
+              <span className="text-sm select-none">
+                {rest.min || rest.min === 0 ? rest.min : "∞"}/
+                {rest.max || rest.max === 0 ? rest.max : "∞"}
+              </span>
+            )}
+            {description && (
+              <span title={description} className="text-sm text-primary-dark">
+                <Icon icon="octicon:info-16" />
+              </span>
+            )}
+          </div>
+        )}
+      </div>
       <div className="relative flex items-center">
         <input
           ref={inputRef}

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

@@ -4,16 +4,19 @@ import { Icon } from "@iconify/react";
 
 export interface PasswordProps
   extends React.InputHTMLAttributes<HTMLInputElement> {
+  label?: string;
+  description?: string;
   options?: {
     width?: "full" | "fit";
     height?: "short" | "medium" | "high";
+    hideInputDetail?: boolean;
   };
-  label?: string;
 }
 
 export const Password: React.FC<PasswordProps> = ({
   options,
   label,
+  description,
   ...rest
 }) => {
   const [show, setShow] = useState(false);
@@ -27,15 +30,32 @@ export const Password: React.FC<PasswordProps> = ({
 
   return (
     <label className={`grid gap-2 ${width}`}>
-      {label && (
-        <span
-          className={`text-sm select-none ${
-            rest.required && "after:content-['*'] after:ml-1 after:text-danger"
-          }`}
-        >
-          {label}
-        </span>
-      )}
+      <div className="flex justify-between">
+        {label && (
+          <span
+            className={`text-sm select-none ${
+              rest.required &&
+              "after:content-['*'] after:ml-1 after:text-danger"
+            }`}
+          >
+            {label}
+          </span>
+        )}
+        {!options?.hideInputDetail && (
+          <div className="flex items-center gap-2">
+            {(rest.minLength || rest.maxLength) && (
+              <span className="text-sm select-none">
+                {rest.minLength || 0}/{rest.maxLength || "∞"}
+              </span>
+            )}
+            {description && (
+              <span title={description} className="text-sm text-primary-dark">
+                <Icon icon="octicon:info-16" />
+              </span>
+            )}
+          </div>
+        )}
+      </div>
       <div className="relative flex items-center">
         <input
           type={show ? "text" : "password"}

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

@@ -1,36 +1,59 @@
 "use client";
-import React from "react";
+import React, { useRef } from "react";
+import { Icon } from "@iconify/react";
 
 export interface RangeProps
   extends React.InputHTMLAttributes<HTMLInputElement> {
+  label?: string;
+  description?: string;
+  theme?: string;
   options?: {
     width?: "full" | "fit";
+    hideInputDetail?: boolean;
   };
-  label?: string;
-  theme?: string;
 }
 
 export const Range: React.FC<RangeProps> = ({
   options,
   label,
+  description,
   theme,
   ...rest
 }) => {
+  const inputRef = useRef<HTMLInputElement>(null);
   const width = options?.width === "fit" ? "w-fit" : "w-full";
 
   return (
     <label className={`grid gap-2 ${width}`}>
-      {label && (
-        <span
-          className={`text-sm select-none ${
-            rest.required && "after:content-['*'] after:ml-1 after:text-danger"
-          }`}
-        >
-          {label}
-        </span>
-      )}
+      <div className="flex justify-between">
+        {label && (
+          <span
+            className={`text-sm select-none ${
+              rest.required &&
+              "after:content-['*'] after:ml-1 after:text-danger"
+            }`}
+          >
+            {label}
+          </span>
+        )}
+        {!options?.hideInputDetail && (
+          <div className="flex items-center gap-2">
+            {(rest.min || rest.max) && (
+              <span className="text-sm select-none">
+                {rest.min || 0}/{rest.max || 100}
+              </span>
+            )}
+            {description && (
+              <span title={description} className="text-sm text-primary-dark">
+                <Icon icon="octicon:info-16" />
+              </span>
+            )}
+          </div>
+        )}
+      </div>
       <div className="flex gap-2">
         <input
+          ref={inputRef}
           type="range"
           className={`flex-1 border-default border cursor-pointer accent-primary focus:outline-none focus:ring-0 focus:ring-offset-0 disabled:accent-secondary-dark disabled:cursor-default ${
             theme && "border-0"
@@ -38,10 +61,8 @@ export const Range: React.FC<RangeProps> = ({
           style={{ accentColor: theme }}
           {...rest}
         />
-        {(rest.value || rest.defaultValue) && (
-          <span className="w-7 text-right">
-            {rest.value || rest.defaultValue}
-          </span>
+        {inputRef.current?.value && (
+          <span className="w-7 text-right">{inputRef.current?.value}</span>
         )}
       </div>
     </label>

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

@@ -1,15 +1,23 @@
 "use client";
 import React from "react";
+import { Icon } from "@iconify/react";
 
 export interface TextProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  label?: string;
+  description?: string;
   options?: {
     width?: "full" | "fit";
     height?: "short" | "medium" | "high";
+    hideInputDetail?: boolean;
   };
-  label?: string;
 }
 
-export const Text: React.FC<TextProps> = ({ options, label, ...rest }) => {
+export const Text: React.FC<TextProps> = ({
+  options,
+  label,
+  description,
+  ...rest
+}) => {
   const width = options?.width === "fit" ? "w-fit" : "w-full";
   const height =
     options?.height === "short"
@@ -20,15 +28,32 @@ export const Text: React.FC<TextProps> = ({ options, label, ...rest }) => {
 
   return (
     <label className={`grid gap-2 ${width}`}>
-      {label && (
-        <span
-          className={`text-sm select-none ${
-            rest.required && "after:content-['*'] after:ml-1 after:text-danger"
-          }`}
-        >
-          {label}
-        </span>
-      )}
+      <div className="flex justify-between">
+        {label && (
+          <span
+            className={`text-sm select-none ${
+              rest.required &&
+              "after:content-['*'] after:ml-1 after:text-danger"
+            }`}
+          >
+            {label}
+          </span>
+        )}
+        {!options?.hideInputDetail && (
+          <div className="flex items-center gap-2">
+            {(rest.minLength || rest.maxLength) && (
+              <span className="text-sm select-none">
+                {rest.minLength || 0}/{rest.maxLength || "∞"}
+              </span>
+            )}
+            {description && (
+              <span title={description} className="text-sm text-primary-dark">
+                <Icon icon="octicon:info-16" />
+              </span>
+            )}
+          </div>
+        )}
+      </div>
       <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}`}

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

@@ -5,14 +5,20 @@ import { Icon } from "@iconify/react";
 import dayjs from "dayjs";
 
 export interface TimeProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  label?: string;
+  description?: string;
   options?: {
     width?: "full" | "fit";
     height?: "short" | "medium" | "high";
   };
-  label?: string;
 }
 
-export const Time: React.FC<TimeProps> = ({ options, label, ...rest }) => {
+export const Time: React.FC<TimeProps> = ({
+  options,
+  label,
+  description,
+  ...rest
+}) => {
   const [tempValue, setTempValue] = useState(dayjs().format("hh:mm a"));
   const dropdownRef = useRef<HTMLButtonElement>(null);
   const hoursRef = useRef<HTMLDivElement>(null);
@@ -145,16 +151,23 @@ export const Time: React.FC<TimeProps> = ({ options, label, ...rest }) => {
   return (
     <div className="flex items-end">
       <label className={`grid gap-2 ${width}`}>
-        {label && (
-          <span
-            className={`text-sm select-none ${
-              rest.required &&
-              "after:content-['*'] after:ml-1 after:text-danger"
-            }`}
-          >
-            {label}
-          </span>
-        )}
+        <div className="flex justify-between items-center">
+          {label && (
+            <span
+              className={`text-sm select-none ${
+                rest.required &&
+                "after:content-['*'] after:ml-1 after:text-danger"
+              }`}
+            >
+              {label}
+            </span>
+          )}
+          {description && (
+            <span title={description} className="text-sm text-primary-dark">
+              <Icon icon="octicon:info-16" />
+            </span>
+          )}
+        </div>
         <div className="relative flex items-center">
           <input
             type="text"

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

@@ -1,28 +1,30 @@
 "use client";
 import React, { useState, useEffect, useRef } from "react";
-import { Icon } from "@iconify/react";
 import { createPortal } from "react-dom";
+import { Icon } from "@iconify/react";
 
 export interface AutocompleteProps
   extends React.SelectHTMLAttributes<HTMLSelectElement> {
-  options?: {
-    width?: "full" | "fit";
-    height?: "short" | "medium" | "high";
-  };
-  label?: string;
   menus: {
     label: string;
     value: string;
     [key: string]: any;
   }[];
+  label?: string;
   placeholder?: string;
+  description?: string;
+  options?: {
+    width?: "full" | "fit";
+    height?: "short" | "medium" | "high";
+  };
 }
 
 export const Autocomplete: React.FC<AutocompleteProps> = ({
-  options,
-  label,
   menus,
+  label,
   placeholder,
+  description,
+  options,
   ...rest
 }) => {
   const [tempValue, setTempValue] = useState("");
@@ -116,15 +118,23 @@ export const Autocomplete: React.FC<AutocompleteProps> = ({
 
   return (
     <label className={`grid gap-2 ${width}`}>
-      {label && (
-        <span
-          className={`text-sm select-none ${
-            rest.required && "after:content-['*'] after:ml-1 after:text-danger"
-          }`}
-        >
-          {label}
-        </span>
-      )}
+      <div className="flex justify-between items-center">
+        {label && (
+          <span
+            className={`text-sm select-none ${
+              rest.required &&
+              "after:content-['*'] after:ml-1 after:text-danger"
+            }`}
+          >
+            {label}
+          </span>
+        )}
+        {description && (
+          <span title={description} className="text-sm text-primary-dark">
+            <Icon icon="octicon:info-16" />
+          </span>
+        )}
+      </div>
       <div className="relative" ref={triggerRef}>
         <div
           className="relative flex items-center cursor-pointer"