sprint-asia-custom-component 0.1.68 → 0.1.69

package/dist/index.js

@@ -24068,7 +24068,8 @@
     isEdited = true,
     mode = "default",
     footer = null,
-    currentOption = ""
+    currentOption = "",
+    className = ""
   }) => {
     const [isOpen, setIsOpen] = React.useState(false);
     const dropdownRef = React.useRef(null);
@@ -24101,7 +24102,7 @@
       return val.value === currentOption;
     });
     return /*#__PURE__*/React__default["default"].createElement("div", {
-      className: "relative inline-block text-left w-full",
+      className: `relative inline-block text-left w-full ${className}`,
       ref: dropdownRef
     }, title && /*#__PURE__*/React__default["default"].createElement("div", {
       className: "flex"
@@ -28924,11 +28925,12 @@
     rightIcon = null,
     placeholder = "",
     footer = null,
-    type = 'text',
+    type = "text",
     mode = "default",
     isRequired = true,
     value,
-    onChangeInput
+    onChangeInput,
+    className = ""
   }) => {
     const [isFocused, setIsFocused] = React.useState(false);
     const [showPassword, setShowPassword] = React.useState(false);
@@ -28942,7 +28944,7 @@
       setShowPassword(!showPassword);
     };
     return /*#__PURE__*/React__default["default"].createElement("div", {
-      className: "w-full"
+      className: `w-full ${className}`
     }, title && /*#__PURE__*/React__default["default"].createElement("div", {
       className: "flex"
     }, /*#__PURE__*/React__default["default"].createElement("p", {
@@ -28961,22 +28963,22 @@
                         ${mode === "danger" && "text-danger500"}
                         `
     })), /*#__PURE__*/React__default["default"].createElement("input", {
-      type: type === 'password' ? showPassword ? 'text' : 'password' : type,
+      type: type === "password" ? showPassword ? "text" : "password" : type,
       className: `py-2.5 px-4 w-full font-normal text-sm text-neutral300 rounded-md border
-                        ${!value && mode === "default" && 'bg-neutral20 border-neutral50 focus:outline-2 outline-primary500'}
-                        ${value && mode === "default" && 'bg-neutral20 border-black focus:outline-2 outline-primary500'}
-                        ${isFocused && mode === "default" && 'bg-neutral20 border-primary500'}
-                        ${mode === "disable" && 'bg-neutral30 border-neutral50'}
-                        ${mode === "danger" && 'bg-danger50 border-danger500 focus:outline-2 outline-danger500'}
-                        ${leftIcon ? 'pl-10' : 'pl-3'}
-                        ${rightIcon ? 'pr-10' : 'pr-3'}`,
+                        ${!value && mode === "default" && "bg-neutral20 border-neutral50 focus:outline-2 outline-primary500"}
+                        ${value && mode === "default" && "bg-neutral20 border-black focus:outline-2 outline-primary500"}
+                        ${isFocused && mode === "default" && "bg-neutral20 border-primary500"}
+                        ${mode === "disable" && "bg-neutral30 border-neutral50"}
+                        ${mode === "danger" && "bg-danger50 border-danger500 focus:outline-2 outline-danger500"}
+                        ${leftIcon ? "pl-10" : "pl-3"}
+                        ${rightIcon ? "pr-10" : "pr-3"}`,
       placeholder: placeholder,
       disabled: mode === "disable",
       value: value,
       onChange: onChangeInput,
       onFocus: handleFocus,
       onBlur: handleBlur
-    }), type === 'password' && /*#__PURE__*/React__default["default"].createElement("span", {
+    }), type === "password" && /*#__PURE__*/React__default["default"].createElement("span", {
       className: "absolute inset-y-0 right-0 pr-4 flex items-center cursor-pointer",
       onClick: handleTogglePasswordVisibility
     }, showPassword ? /*#__PURE__*/React__default["default"].createElement(PiEye, {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "sprint-asia-custom-component",
   "main": "dist/index.js",
-  "version": "0.1.68",
+  "version": "0.1.69",
   "private": false,
   "dependencies": {
     "@headlessui/react": "^1.7.18",

package/src/components/dropdown/dropdownText/index.js

@@ -11,6 +11,7 @@ const DropdownText = ({
   mode = "default",
   footer = null,
   currentOption = "",
+  className = "",
 }) => {
   const [isOpen, setIsOpen] = useState(false);
   const dropdownRef = useRef(null);
@@ -47,7 +48,7 @@ const DropdownText = ({
   });
 
   return (
-    <div className="relative inline-block text-left w-full" ref={dropdownRef}>
+    <div className={`relative inline-block text-left w-full ${className}`} ref={dropdownRef}>
       {title && (
         <div className="flex">
           <p className="text-sm font-normal text-black mb-1">{title}</p>

package/src/components/textinput/index.js

@@ -1,106 +1,122 @@
-import React, { useState } from 'react';
-import { PiEyeClosedLight, PiEye, PiInfo } from 'react-icons/pi';
+import React, { useState } from "react";
+import { PiEyeClosedLight, PiEye, PiInfo } from "react-icons/pi";
 
 const TextInput = ({
-    title = "",
-    leftIcon = null,
-    rightIcon = null,
-    placeholder = "",
-    footer = null,
-    type = 'text',
-    mode = "default",
-    isRequired = true,
-    value,
-    onChangeInput
+  title = "",
+  leftIcon = null,
+  rightIcon = null,
+  placeholder = "",
+  footer = null,
+  type = "text",
+  mode = "default",
+  isRequired = true,
+  value,
+  onChangeInput,
+  className = "",
 }) => {
-    const [isFocused, setIsFocused] = useState(false);
-    const [showPassword, setShowPassword] = useState(false);
+  const [isFocused, setIsFocused] = useState(false);
+  const [showPassword, setShowPassword] = useState(false);
 
-    const handleFocus = () => {
-        setIsFocused(true);
-    };
+  const handleFocus = () => {
+    setIsFocused(true);
+  };
 
-    const handleBlur = () => {
-        setIsFocused(false);
-    };
+  const handleBlur = () => {
+    setIsFocused(false);
+  };
 
-    const handleTogglePasswordVisibility = () => {
-        setShowPassword(!showPassword);
-    };
+  const handleTogglePasswordVisibility = () => {
+    setShowPassword(!showPassword);
+  };
 
-    return (
-        <div className='w-full'>
-            {title &&
-                <div className='flex'>
-                    <p className="text-sm font-normal text-black mb-1">{title}</p>
-                    {
-                        isRequired && <p className="text-sm font-normal text-danger500 ml-1">*</p>
-                    }
-                </div>
-            }
+  return (
+    <div className={`w-full ${className}`}>
+      {title && (
+        <div className="flex">
+          <p className="text-sm font-normal text-black mb-1">{title}</p>
+          {isRequired && <p className="text-sm font-normal text-danger500 ml-1">*</p>}
+        </div>
+      )}
 
-            <div className="relative rounded-md">
-                {leftIcon && (
-                    <span className="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
-                        <PiInfo size={16} className={`
+      <div className="relative rounded-md">
+        {leftIcon && (
+          <span className="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
+            <PiInfo
+              size={16}
+              className={`
                         ${mode === "primary" && "text-black"}
                         ${mode === "disable" && "text-neutral50"}
                         ${mode === "danger" && "text-danger500"}
-                        `}/>
-                    </span>
-                )}
+                        `}
+            />
+          </span>
+        )}
 
-                <input
-                    type={type === 'password' ? (showPassword ? 'text' : 'password') : type}
-                    className={`py-2.5 px-4 w-full font-normal text-sm text-neutral300 rounded-md border
-                        ${!value && mode === "default" && 'bg-neutral20 border-neutral50 focus:outline-2 outline-primary500'}
-                        ${value && mode === "default" && 'bg-neutral20 border-black focus:outline-2 outline-primary500'}
-                        ${isFocused && mode === "default" && 'bg-neutral20 border-primary500'}
-                        ${mode === "disable" && 'bg-neutral30 border-neutral50'}
-                        ${mode === "danger" && 'bg-danger50 border-danger500 focus:outline-2 outline-danger500'}
-                        ${leftIcon ? 'pl-10' : 'pl-3'}
-                        ${rightIcon ? 'pr-10' : 'pr-3'}`}
-                    placeholder={placeholder}
-                    disabled={mode === "disable"}
-                    value={value}
-                    onChange={onChangeInput}
-                    onFocus={handleFocus}
-                    onBlur={handleBlur}
-                />
+        <input
+          type={type === "password" ? (showPassword ? "text" : "password") : type}
+          className={`py-2.5 px-4 w-full font-normal text-sm text-neutral300 rounded-md border
+                        ${
+                          !value &&
+                          mode === "default" &&
+                          "bg-neutral20 border-neutral50 focus:outline-2 outline-primary500"
+                        }
+                        ${value && mode === "default" && "bg-neutral20 border-black focus:outline-2 outline-primary500"}
+                        ${isFocused && mode === "default" && "bg-neutral20 border-primary500"}
+                        ${mode === "disable" && "bg-neutral30 border-neutral50"}
+                        ${mode === "danger" && "bg-danger50 border-danger500 focus:outline-2 outline-danger500"}
+                        ${leftIcon ? "pl-10" : "pl-3"}
+                        ${rightIcon ? "pr-10" : "pr-3"}`}
+          placeholder={placeholder}
+          disabled={mode === "disable"}
+          value={value}
+          onChange={onChangeInput}
+          onFocus={handleFocus}
+          onBlur={handleBlur}
+        />
 
-                {type === 'password' && (
-                    <span className="absolute inset-y-0 right-0 pr-4 flex items-center cursor-pointer" onClick={handleTogglePasswordVisibility}>
-                        {showPassword ? <PiEye size={16} className={`text-black ${mode === "danger" && "text-danger500"}`} /> : <PiEyeClosedLight size={16} className={`text-black ${mode === "danger" && "text-danger500"}`} />}
-                    </span>
-                )}
+        {type === "password" && (
+          <span
+            className="absolute inset-y-0 right-0 pr-4 flex items-center cursor-pointer"
+            onClick={handleTogglePasswordVisibility}
+          >
+            {showPassword ? (
+              <PiEye size={16} className={`text-black ${mode === "danger" && "text-danger500"}`} />
+            ) : (
+              <PiEyeClosedLight size={16} className={`text-black ${mode === "danger" && "text-danger500"}`} />
+            )}
+          </span>
+        )}
 
-                {rightIcon && (
-                    <span className="absolute inset-y-0 right-0 pr-4 flex items-center pointer-events-none">
-                        <PiInfo size={16} className={`
+        {rightIcon && (
+          <span className="absolute inset-y-0 right-0 pr-4 flex items-center pointer-events-none">
+            <PiInfo
+              size={16}
+              className={`
                         ${mode === "primary" && "text-black"}
                         ${mode === "disable" && "text-neutral50"}
                         ${mode === "danger" && "text-danger500"}
-                        `}/>
-                    </span>
-                )}
-            </div>
+                        `}
+            />
+          </span>
+        )}
+      </div>
 
-            {footer && (
-                <div className='mt-1'>
-                    {mode === "danger" ? (
-                        <div className='flex'>
-                            <div>
-                                <PiInfo size={16} className='text-danger500' />
-                            </div>
-                            <p className="text-danger500 text-xs ml-1">{footer}</p>
-                        </div>
-                    ) : (
-                        <p className="text-black text-xs">{footer}</p>
-                    )}
-                </div>
-            )}
+      {footer && (
+        <div className="mt-1">
+          {mode === "danger" ? (
+            <div className="flex">
+              <div>
+                <PiInfo size={16} className="text-danger500" />
+              </div>
+              <p className="text-danger500 text-xs ml-1">{footer}</p>
+            </div>
+          ) : (
+            <p className="text-black text-xs">{footer}</p>
+          )}
         </div>
-    );
+      )}
+    </div>
+  );
 };
 
-export default TextInput;
+export default TextInput;