next-helios-fe 1.6.24 → 1.6.26

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"

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

@@ -5,17 +5,18 @@ import { Icon } from "@iconify/react";
 
 export interface MultipleSelectProps
   extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange" | "value"> {
-  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";
+  };
   required?: boolean;
   disabled?: boolean;
   value?: string[];
@@ -32,6 +33,7 @@ export const MultipleSelect: React.FC<MultipleSelectProps> = ({
   label,
   menus,
   placeholder,
+  description,
   required,
   disabled,
   value,
@@ -78,19 +80,27 @@ export const MultipleSelect: React.FC<MultipleSelectProps> = ({
   return (
     <div className="flex flex-row-reverse items-end">
       <label className={`grid gap-2 ${width}`}>
-        {label && (
-          <span
-            className={`text-sm select-none ${
-              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 ${
+                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">
           <div
             ref={inputRef}
-            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} ${
+            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} ${
               disabled
                 ? "bg-secondary-light cursor-default pointer-events-none"
                 : "bg-secondary-bg cursor-pointer"
@@ -209,7 +219,7 @@ export const MultipleSelect: React.FC<MultipleSelectProps> = ({
                 <button
                   key={index}
                   type="button"
-                  className="min-w-40 w-full my-0.5 px-4 py-2 rounded-md text-sm text-left text-default hover:bg-secondary-light disabled:bg-primary-transparent"
+                  className="min-w-40 w-full my-0.5 ps-4 pe-14 py-2 rounded-md text-sm text-left text-default hover:bg-secondary-light disabled:bg-primary-transparent"
                   disabled={
                     tempValue?.find((i) => i === item.value) ? true : false
                   }

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

@@ -1,14 +1,16 @@
 "use client";
 import React, { useState, useEffect, useRef } from "react";
 import { createPortal } from "react-dom";
+import { Icon } from "@iconify/react";
 
 export interface PhoneNumberProps
   extends React.InputHTMLAttributes<HTMLInputElement> {
+  label?: string;
+  description?: string;
   options?: {
     width?: "full" | "fit";
     height?: "short" | "medium" | "high";
   };
-  label?: string;
   getPhoneNumber?: (value: string) => void;
 }
 
@@ -1470,6 +1472,7 @@ const countryCodes = [
 export const PhoneNumber: React.FC<PhoneNumberProps> = ({
   options,
   label,
+  description,
   getPhoneNumber,
   ...rest
 }) => {
@@ -1567,15 +1570,23 @@ export const PhoneNumber: React.FC<PhoneNumberProps> = ({
 
   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 flex-row-reverse gap-4">
         <div className="relative flex-1 flex items-center">
           <div className="absolute left-0 flex justify-center w-14 border-r">

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

@@ -1,19 +1,22 @@
 "use client";
 import React from "react";
 import { PinField } from "react-pin-field";
+import { Icon } from "@iconify/react";
 
 export interface PinProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  label?: string;
+  description?: string;
   options?: {
     height?: "short" | "medium" | "high";
     length: number;
   };
-  label?: string;
   onChange?: (e: any) => void;
 }
 
 export const Pin: React.FC<PinProps> = ({
   options,
   label,
+  description,
   onChange,
   ...rest
 }) => {
@@ -26,15 +29,23 @@ export const Pin: React.FC<PinProps> = ({
 
   return (
     <label className="grid gap-2 w-fit">
-      {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 items-center gap-4">
         <PinField
           className={`text-center w-10 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/other/secret.tsx

@@ -4,11 +4,12 @@ import { Icon } from "@iconify/react";
 
 export interface SecretProps
   extends React.InputHTMLAttributes<HTMLInputElement> {
+  label?: string;
+  description?: string;
   options?: {
     width?: "full" | "fit";
     height?: "short" | "medium" | "high";
   };
-  label?: string;
   value?: string;
   onClipboardClick?: (value: string) => void;
 }
@@ -16,6 +17,7 @@ export interface SecretProps
 export const Secret: React.FC<SecretProps> = ({
   options,
   label,
+  description,
   value,
   onClipboardClick,
   ...rest
@@ -31,15 +33,23 @@ export const Secret: React.FC<SecretProps> = ({
 
   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 flex items-center">
         <input
           type="text"

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

@@ -5,17 +5,18 @@ import { Icon } from "@iconify/react";
 
 export interface SelectProps
   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 Select: React.FC<SelectProps> = ({
@@ -23,6 +24,7 @@ export const Select: React.FC<SelectProps> = ({
   label,
   menus,
   placeholder,
+  description,
   ...rest
 }) => {
   const [tempValue, setTempValue] = useState("");
@@ -68,16 +70,23 @@ export const Select: React.FC<SelectProps> = ({
   return (
     <div className="flex flex-row-reverse 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 cursor-pointer">
           <input
             ref={inputRef}

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

@@ -1,18 +1,21 @@
 "use client";
 import React from "react";
+import { Icon } from "@iconify/react";
 
 export interface TextareaProps
   extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+  label?: string;
+  description?: string;
   options?: {
     width?: "full" | "fit";
     height?: "short" | "medium" | "high";
   };
-  label?: string;
 }
 
 export const Textarea: React.FC<TextareaProps> = ({
   options,
   label,
+  description,
   ...rest
 }) => {
   const width = options?.width === "fit" ? "w-fit" : "w-full";
@@ -25,15 +28,30 @@ export const Textarea: React.FC<TextareaProps> = ({
 
   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>
+        )}
+        <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>
       <textarea
         rows={rest.rows || 10}
         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}`}