next-helios-fe 1.8.6 → 1.8.8

package/package.json

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

package/src/components/content-container/drawer.tsx

@@ -61,7 +61,7 @@ export const Drawer: React.FC<DrawerProps> = ({
               </div>
               <button
                 type="button"
-                className="flex justify-center items-center rounded-full p-1 text-slate-400 hover:bg-secondary-light"
+                className="flex justify-center items-center rounded-full p-1 text-disabled hover:bg-secondary-light"
                 onClick={() => {
                   setOpen(false);
                 }}

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

@@ -68,10 +68,10 @@ export const Modal: React.FC<ModalProps> = ({
               <span className="text-lg">{title}</span>
               {!options?.disableClose && (
                 <div className="flex items-center gap-2">
-                  <span className="text-sm text-slate-400">[esc]</span>
+                  <span className="text-sm text-disabled">[esc]</span>
                   <button
                     type="button"
-                    className="flex justify-center items-center rounded-full px-1 py-1 text-slate-400 hover:bg-secondary-light"
+                    className="flex justify-center items-center rounded-full px-1 py-1 text-disabled hover:bg-secondary-light"
                     onClick={() => {
                       onClose && onClose();
                     }}

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

@@ -108,7 +108,10 @@ export const Wizard: WizardComponent = ({
                             setActiveTab(index);
                           }}
                         >
-                          <Icon icon={tab.icon} className="text-2xl pointer-events-none" />
+                          <Icon
+                            icon={tab.icon}
+                            className="text-2xl pointer-events-none"
+                          />
                         </button>
                       </div>
                       <div className="flex flex-col items-center text-center">
@@ -135,7 +138,7 @@ export const Wizard: WizardComponent = ({
       <div className="flex justify-between">
         <button
           type="button"
-          className="flex items-center gap-2 text-primary hover:text-primary-dark disabled:text-slate-400"
+          className="flex items-center gap-2 text-primary hover:text-primary-dark disabled:text-disabled"
           disabled={activeTab === 0}
           onClick={() => {
             setActiveTab((prev) => prev - 1);
@@ -148,7 +151,7 @@ export const Wizard: WizardComponent = ({
         </button>
         <button
           type="button"
-          className="flex items-center gap-2 text-primary hover:text-primary-dark disabled:text-slate-400"
+          className="flex items-center gap-2 text-primary hover:text-primary-dark disabled:text-disabled"
           disabled={activeTab === childrenList.length - 1}
           onClick={() => {
             setActiveTab((prev) => prev + 1);

package/src/components/dialog/index.tsx

@@ -84,7 +84,7 @@ export const Dialog: React.FC<DialogProps> = ({
             <div className="flex justify-end gap-4">
               <button
                 type="button"
-                className={`disabled:text-slate-400 disabled:pointer-events-none ${actionVariant}`}
+                className={`disabled:text-disabled disabled:pointer-events-none ${actionVariant}`}
                 disabled={loading}
                 onClick={() => {
                   action.onClick && action.onClick();

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

@@ -47,7 +47,7 @@ export const Checkbox: React.FC<CheckboxProps> = ({
         <div className="flex items-center gap-2">
           <span
             className={`flex-1 text-sm select-none ${
-              rest.disabled ? "text-slate-400" : "cursor-pointer"
+              rest.disabled ? "text-disabled" : "cursor-pointer"
             }`}
           >
             {label}

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

@@ -75,7 +75,7 @@ export const Color: React.FC<ColorProps> = ({
         <div className="relative flex flex-col">
           <button
             type="button"
-            className={`h-full px-4 border-default border rounded-md text-slate-400 cursor-pointer 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={`h-full px-4 border-default border rounded-md text-disabled cursor-pointer focus:outline-none focus:ring-1 focus:ring-primary focus:shadow focus:shadow-primary focus:border-primary-dark disabled:bg-secondary-light disabled:text-disabled ${height}`}
             style={{ backgroundColor: tempValue }}
             tabIndex={-1}
             onClick={() => {
@@ -99,14 +99,14 @@ export const Color: React.FC<ColorProps> = ({
         <div className="relative flex-1 flex items-center">
           <input
             type="text"
-            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}`}
+            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-silent focus:outline-none focus:ring-1 focus:ring-primary focus:shadow focus:shadow-primary focus:border-primary-dark disabled:bg-secondary-light disabled:text-disabled ${height}`}
             placeholder={rest.placeholder}
             value={tempValue}
             onChange={(e) => setTempValue(e.target.value.toUpperCase())}
           />
           <button
             type="button"
-            className="absolute right-4 p-1 rounded-full text-xl text-slate-400 cursor-pointer hover:bg-secondary-light"
+            className="absolute right-4 p-1 rounded-full text-xl text-disabled cursor-pointer hover:bg-secondary-light"
             tabIndex={-1}
             onClick={(e) => {
               e.preventDefault();

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

@@ -111,7 +111,7 @@ export const Date: React.FC<DateProps> = ({
         <div className="relative flex items-center">
           <input
             type="text"
-            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}`}
+            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-silent focus:outline-none focus:ring-1 focus:ring-primary focus:shadow focus:shadow-primary focus:border-primary-dark disabled:bg-secondary-light disabled:text-disabled ${height}`}
             disabled={rest.disabled}
             readOnly
             value={
@@ -128,7 +128,7 @@ export const Date: React.FC<DateProps> = ({
           />
           <button
             type="button"
-            className="absolute right-4 p-1 rounded-full text-xl text-slate-400 cursor-pointer hover:bg-secondary-light"
+            className="absolute right-4 p-1 rounded-full text-xl text-disabled cursor-pointer hover:bg-secondary-light"
             tabIndex={-1}
             disabled={rest.disabled}
             onClick={(e) => {

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

@@ -61,7 +61,7 @@ export const Email: React.FC<EmailProps> = ({
       )}
       <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}`}
+        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-silent focus:outline-none focus:ring-1 focus:ring-primary focus:shadow focus:shadow-primary focus:border-primary-dark disabled:bg-secondary-light disabled:text-disabled ${height}`}
         {...rest}
       />
     </label>

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

@@ -105,7 +105,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}`}
+              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-disabled ${height}`}
               onChange={(e) => {
                 if (rest.onChange) {
                   rest.onChange({
@@ -120,7 +120,7 @@ export const File: React.FC<FileProps> = ({
             <span
               className={`absolute px-4 pointer-events-none ${
                 tempFile.length === 0 &&
-                "text-slate-300 duration-300 translate-x-0 peer-focus/file:translate-x-1"
+                "text-silent duration-300 translate-x-0 peer-focus/file:translate-x-1"
               }`}
             >
               {tempFile[0]?.name ?? rest.placeholder}
@@ -194,14 +194,14 @@ export const File: React.FC<FileProps> = ({
                   tempFile.length !== 0 ? "mdi:file-outline" : "mynaui:upload"
                 }
                 className={`text-5xl ${
-                  tempFile.length !== 0 ? "" : "text-slate-400"
+                  tempFile.length !== 0 ? "" : "text-disabled"
                 }`}
               />
               <div className="flex flex-col gap-2 items-center">
                 {tempFile.length !== 0 ? (
                   <span>{tempFile[0]?.name}</span>
                 ) : (
-                  <div className="flex gap-2 text-slate-400">
+                  <div className="flex gap-2 text-disabled">
                     <span className="underline underline-offset-2">
                       Click to upload
                     </span>
@@ -210,7 +210,7 @@ export const File: React.FC<FileProps> = ({
                 )}
                 <span
                   className={`text-sm font-light ${
-                    tempFile.length !== 0 ? "" : "text-slate-400"
+                    tempFile.length !== 0 ? "" : "text-disabled"
                   }`}
                 >
                   {tempFile.length !== 0

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

@@ -65,7 +65,7 @@ export const Number: React.FC<NumberProps> = ({
         <input
           ref={inputRef}
           type="number"
-          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}`}
+          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-silent focus:outline-none focus:ring-1 focus:ring-primary focus:shadow focus:shadow-primary focus:border-primary-dark disabled:bg-secondary-light disabled:text-disabled ${height}`}
           {...rest}
         />
         <div className="absolute right-4 flex gap-2">

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

@@ -63,12 +63,12 @@ export const Password: React.FC<PasswordProps> = ({
       <div className="relative flex items-center">
         <input
           type={show ? "text" : "password"}
-          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}`}
+          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-silent focus:outline-none focus:ring-1 focus:ring-primary focus:shadow focus:shadow-primary focus:border-primary-dark disabled:bg-secondary-light disabled:text-disabled ${height}`}
           {...rest}
         />
         <button
           type="button"
-          className="absolute right-4 p-1 rounded-full text-xl text-slate-400 cursor-pointer hover:bg-secondary-light"
+          className="absolute right-4 p-1 rounded-full text-xl text-disabled cursor-pointer hover:bg-secondary-light"
           tabIndex={-1}
           onClick={(e) => {
             e.preventDefault();

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

@@ -46,7 +46,7 @@ export const Radio: React.FC<RadioProps> = ({
         <div className="flex items-center gap-2">
           <span
             className={`flex-1 text-sm select-none ${
-              rest.disabled ? "text-slate-400" : "cursor-pointer"
+              rest.disabled ? "text-disabled" : "cursor-pointer"
             }`}
           >
             {label}

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

@@ -23,17 +23,17 @@ export const Search: React.FC<SearchProps> = ({ options, ...rest }) => {
     <label className={`relative flex items-center ${width}`}>
       <Icon
         icon="ic:round-search"
-        className="absolute left-3 text-lg text-slate-400"
+        className="absolute left-3 text-lg text-disabled"
       />
       <input
         type="search"
-        className={`w-full px-9 pe-4 border-default border rounded-md bg-secondary-bg placeholder:duration-300 placeholder:translate-x-0 [&::-webkit-search-cancel-button]:appearance-none 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 px-9 pe-4 border-default border rounded-md bg-secondary-bg placeholder:duration-300 placeholder:translate-x-0 [&::-webkit-search-cancel-button]:appearance-none focus:placeholder:translate-x-1 placeholder:text-silent focus:outline-none focus:ring-1 focus:ring-primary focus:shadow focus:shadow-primary focus:border-primary-dark disabled:bg-secondary-light disabled:text-disabled ${height}`}
         {...rest}
       />
       {rest.value && (
         <div
           className={
-            "absolute right-4 p-1 rounded-full text-xl text-slate-400 cursor-pointer hover:bg-secondary-light"
+            "absolute right-4 p-1 rounded-full text-xl text-disabled cursor-pointer hover:bg-secondary-light"
           }
           onClick={() => {
             rest.onChange &&

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

@@ -60,7 +60,7 @@ export const Text: React.FC<TextProps> = ({
       )}
       <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 px-4 border-default border rounded-md bg-secondary-bg placeholder:duration-300 placeholder:translate-x-0 focus:placeholder:translate-x-1 placeholder:text-silent focus:outline-none focus:ring-1 focus:ring-primary focus:shadow focus:shadow-primary focus:border-primary-dark disabled:bg-secondary-light disabled:text-disabled ${height}`}
         {...rest}
       />
     </label>

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

@@ -184,7 +184,7 @@ export const Time: React.FC<TimeProps> = ({
         <div className="relative flex items-center">
           <input
             type="time"
-            className={`w-full ps-4 pe-14 border-default border rounded-md bg-secondary-bg placeholder:duration-300 placeholder:translate-x-0 [&::-webkit-calendar-picker-indicator]:hidden 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 [&::-webkit-calendar-picker-indicator]:hidden focus:placeholder:translate-x-1 placeholder:text-silent focus:outline-none focus:ring-1 focus:ring-primary focus:shadow focus:shadow-primary focus:border-primary-dark disabled:bg-secondary-light disabled:text-disabled ${height}`}
             value={tempValue}
             onChange={(e) => {
               setTempValue(e.target.value);
@@ -193,7 +193,7 @@ export const Time: React.FC<TimeProps> = ({
           />
           <button
             type="button"
-            className="absolute right-4 p-1 rounded-full text-xl text-slate-400 cursor-pointer hover:bg-secondary-light"
+            className="absolute right-4 p-1 rounded-full text-xl text-disabled cursor-pointer hover:bg-secondary-light"
             tabIndex={-1}
             disabled={rest.disabled}
             onClick={(e) => {

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

@@ -138,7 +138,7 @@ export const Autocomplete: React.FC<AutocompleteProps> = ({
         >
           <input
             type="text"
-            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}`}
+            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-silent focus:outline-none focus:ring-1 focus:ring-primary focus:shadow focus:shadow-primary focus:border-primary-dark disabled:bg-secondary-light disabled:text-disabled ${height}`}
             placeholder={placeholder}
             required={rest.required}
             disabled={rest.disabled}
@@ -152,7 +152,7 @@ export const Autocomplete: React.FC<AutocompleteProps> = ({
               setTempFilter("");
             }}
           />
-          <div className="absolute right-4 text-xl text-slate-400 pointer-events-none">
+          <div className="absolute right-4 text-xl text-disabled pointer-events-none">
             <Icon icon={`gravity-ui:chevron-${openDropdown ? "up" : "down"}`} />
           </div>
         </div>

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

@@ -4,7 +4,10 @@ import { Dropdown } from "../../../components";
 import { Icon } from "@iconify/react";
 
 export interface MultipleSelectProps
-  extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange" | "value"> {
+  extends Omit<
+    React.HTMLAttributes<HTMLDivElement>,
+    "defaultvalue" | "value" | "onChange"
+  > {
   menus: {
     label: string;
     value: string;
@@ -45,7 +48,9 @@ export const MultipleSelect: React.FC<MultipleSelectProps> = ({
   const [openDropdown, setOpenDropdown] = useState(false);
   const [dropdownWidth, setDropdownWidth] = useState<number>(0);
   const [dropdownHeight, setDropdownHeight] = useState<number>(0);
-  const inputRef = useRef<HTMLDivElement>(null);
+  const fakeInputRef = useRef<HTMLDivElement>(null);
+  const itemContainerRef = useRef<HTMLDivElement>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
   const dropdownRef = useRef<HTMLButtonElement>(null);
   const width = options?.width === "fit" ? "w-fit" : "w-full";
   const height =
@@ -77,6 +82,22 @@ export const MultipleSelect: React.FC<MultipleSelectProps> = ({
       });
   }, [tempValue]);
 
+  useEffect(() => {
+    if (tempValue.length === 0) {
+      fakeInputRef.current;
+    }
+  }, [tempValue]);
+
+  useEffect(() => {
+    if (tempValue.length === 0) {
+      inputRef.current?.setCustomValidity(
+        "Please select some items in the list."
+      );
+    } else {
+      inputRef.current?.setCustomValidity("");
+    }
+  }, [tempValue]);
+
   return (
     <div className="flex flex-row-reverse items-end">
       <label className={`grid gap-2 ${width}`}>
@@ -103,7 +124,7 @@ export const MultipleSelect: React.FC<MultipleSelectProps> = ({
         )}
         <div className="relative flex items-center">
           <div
-            ref={inputRef}
+            ref={fakeInputRef}
             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"
@@ -119,24 +140,27 @@ export const MultipleSelect: React.FC<MultipleSelectProps> = ({
               setOpenDropdown(true);
               dropdownRef.current?.click();
               setDropdownWidth(
-                inputRef?.current?.getBoundingClientRect()?.width || 0
+                fakeInputRef?.current?.getBoundingClientRect()?.width || 0
               );
               setDropdownHeight(
-                inputRef?.current?.getBoundingClientRect()?.height || 0
+                fakeInputRef?.current?.getBoundingClientRect()?.height || 0
               );
             }}
             {...rest}
           >
             {!tempValue || tempValue?.length === 0 ? (
               <span
-                className={`text-slate-300 select-none duration-300 ${
+                className={`text-silent select-none duration-300 ${
                   openDropdown ? "translate-x-1" : "translate-x-0"
                 }`}
               >
                 {placeholder}
               </span>
             ) : (
-              <div className="flex flex-wrap gap-2 h-min pointer-events-none invisible">
+              <div
+                ref={itemContainerRef}
+                className="flex flex-wrap gap-2 w-full h-min pointer-events-none invisible"
+              >
                 {tempValue?.map((item) => {
                   return (
                     <div
@@ -157,15 +181,20 @@ export const MultipleSelect: React.FC<MultipleSelectProps> = ({
                 })}
               </div>
             )}
-            <div className="ms-auto text-xl text-slate-400 pointer-events-none">
+            <div className="ms-auto text-xl text-disabled pointer-events-none">
               <Icon
                 icon={`gravity-ui:chevron-${openDropdown ? "up" : "down"}`}
               />
             </div>
           </div>
+          <input
+            ref={inputRef}
+            type="text"
+            className="absolute bottom-0 -z-10 w-full border-0 focus:ring-0"
+          />
           <div
-            className="absolute flex flex-wrap gap-2 h-min ps-4 pe-14 pointer-events-none"
-            style={{ width: dropdownWidth - 52 }}
+            className="absolute left-4 flex flex-wrap gap-2 h-min pointer-events-none"
+            style={{ width: itemContainerRef.current?.clientWidth }}
           >
             {tempValue?.map((item) => {
               return (

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

@@ -1595,7 +1595,7 @@ export const PhoneNumber: React.FC<PhoneNumberProps> = ({
       <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">
-            <span className="text-slate-400">
+            <span className="text-disabled">
               {countryCodes.find(
                 (item) => item.code === tempValue[0].split(" ")[1]
               )?.dial_code || ""}
@@ -1603,7 +1603,7 @@ export const PhoneNumber: React.FC<PhoneNumberProps> = ({
           </div>
           <input
             type="number"
-            className={`w-full ps-16 pe-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}`}
+            className={`w-full ps-16 pe-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-silent focus:outline-none focus:ring-1 focus:ring-primary focus:shadow focus:shadow-primary focus:border-primary-dark disabled:bg-secondary-light disabled:text-disabled ${height}`}
             value={tempValue[1]}
             onChange={(e) => {
               setTempValue((prev) => [prev[0], e.target.value]);
@@ -1614,7 +1614,7 @@ export const PhoneNumber: React.FC<PhoneNumberProps> = ({
           <div className="relative" ref={triggerRef}>
             <input
               type="text"
-              className={`max-w-[92px] w-min 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 disabled:cursor-default ${height}`}
+              className={`max-w-[92px] w-min px-4 border-default border rounded-md bg-secondary-bg placeholder:duration-300 placeholder:translate-x-0 focus:placeholder:translate-x-1 placeholder:text-silent focus:outline-none focus:ring-1 focus:ring-primary focus:shadow focus:shadow-primary focus:border-primary-dark disabled:bg-secondary-light disabled:text-disabled disabled:cursor-default ${height}`}
               disabled={rest.disabled}
               value={tempValue[0]}
               onChange={(e) => {

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

@@ -53,7 +53,7 @@ export const Pin: React.FC<PinProps> = ({
       )}
       <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}`}
+          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-silent focus:outline-none focus:ring-1 focus:ring-primary focus:shadow focus:shadow-primary focus:border-primary-dark disabled:bg-secondary-light disabled:text-disabled ${height}`}
           length={6}
           validate={/^[0-9]$/}
           onChange={(value) => {

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

@@ -98,7 +98,7 @@ export const Rating: React.FC<RatingProps> = ({
                   }
                 }}
                 className={`duration-300 ease-in-out ${starHeight} ${
-                  rest.disabled ? "text-slate-400" : "text-warning"
+                  rest.disabled ? "text-disabled" : "text-warning"
                 }`}
               >
                 <Icon

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

@@ -58,7 +58,7 @@ export const Secret: React.FC<SecretProps> = ({
       <div className="relative flex items-center">
         <input
           type="text"
-          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}`}
+          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-silent focus:outline-none focus:ring-1 focus:ring-primary focus:shadow focus:shadow-primary focus:border-primary-dark disabled:bg-secondary-light disabled:text-disabled ${height}`}
           value={show ? value : value ? value.slice(0, 3) + ".." : ""}
           disabled
           {...rest}
@@ -66,7 +66,7 @@ export const Secret: React.FC<SecretProps> = ({
         <div className="absolute right-4 flex">
           <button
             type="button"
-            className="p-1 rounded-full text-xl text-slate-400 cursor-pointer hover:bg-secondary-light"
+            className="p-1 rounded-full text-xl text-disabled cursor-pointer hover:bg-secondary-light"
             tabIndex={-1}
             onClick={(e) => {
               e.preventDefault();
@@ -77,7 +77,7 @@ export const Secret: React.FC<SecretProps> = ({
           </button>
           <button
             type="button"
-            className="p-1 rounded-full text-xl text-slate-400 cursor-pointer hover:bg-secondary-light"
+            className="p-1 rounded-full text-xl text-disabled cursor-pointer hover:bg-secondary-light"
             tabIndex={-1}
             onClick={(e) => {
               e.preventDefault();

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

@@ -61,6 +61,14 @@ export const Select: React.FC<SelectProps> = ({
     }
   }, [rest.value, rest.defaultValue]);
 
+  useEffect(() => {
+    if (!tempValue) {
+      inputRef.current?.setCustomValidity("Please select an item in the list.");
+    } else {
+      inputRef.current?.setCustomValidity("");
+    }
+  }, [tempValue]);
+
   return (
     <div className="flex flex-row-reverse items-end">
       <label className={`grid gap-2 ${width}`}>
@@ -90,7 +98,7 @@ export const Select: React.FC<SelectProps> = ({
           <input
             ref={inputRef}
             type="text"
-            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} ${
+            className={`w-full ps-4 pe-14 border rounded-md bg-secondary-bg cursor-pointer caret-transparent placeholder:duration-300 placeholder:text-silent 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-disabled 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"
@@ -98,12 +106,12 @@ export const Select: React.FC<SelectProps> = ({
             placeholder={placeholder}
             required={rest.required}
             disabled={rest.disabled}
-            readOnly
             value={
               tempValue
                 ? menus.find((item) => item.value === tempValue)?.label
                 : ""
             }
+            onChange={(e) => {}}
             onClick={(e) => {
               e.preventDefault();
               setOpenDropdown(true);
@@ -113,7 +121,7 @@ export const Select: React.FC<SelectProps> = ({
               );
             }}
           />
-          <div className="absolute right-4 text-xl text-slate-400 pointer-events-none">
+          <div className="absolute right-4 text-xl text-disabled pointer-events-none">
             <Icon icon={`gravity-ui:chevron-${openDropdown ? "up" : "down"}`} />
           </div>
         </div>
@@ -174,7 +182,7 @@ export const Select: React.FC<SelectProps> = ({
                     <button
                       key={index}
                       type="button"
-                      className="flex justify-between items-center min-w-40 w-full my-0.5 px-4 py-2 rounded-md text-sm text-left hover:bg-secondary-light disabled:text-slate-400"
+                      className="flex justify-between items-center min-w-40 w-full my-0.5 px-4 py-2 rounded-md text-sm text-left hover:bg-secondary-light disabled:text-disabled"
                       disabled={item.disabled}
                       onClick={() => {
                         setTempValue(item.value);

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

@@ -61,7 +61,7 @@ export const Textarea: React.FC<TextareaProps> = ({
       )}
       <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}`}
+        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-silent focus:outline-none focus:ring-1 focus:ring-primary focus:shadow focus:shadow-primary focus:border-primary-dark disabled:bg-secondary-light disabled:text-disabled ${height}`}
         {...rest}
       />
     </label>

package/src/components/syntax-highlighter/index.tsx

@@ -31,7 +31,7 @@ export const SyntaxHighlighter: React.FC<SyntaxHighlighterProps> = ({
         {codeString}
       </SH>
       <div
-        className="absolute top-4 right-4 p-1 rounded-full text-xl text-slate-400 cursor-pointer hover:bg-secondary-light"
+        className="absolute top-4 right-4 p-1 rounded-full text-xl text-disabled cursor-pointer hover:bg-secondary-light"
         onClick={(e) => {
           e.preventDefault();
           navigator.clipboard.writeText(codeString);