sprint-asia-custom-component 0.1.92 → 0.1.94

package/dist/index.js

@@ -48292,7 +48292,7 @@
         wordBreak: "break-word"
       },
       className: "text-neutral5"
-    }, data), /*#__PURE__*/React__default["default"].createElement("div", {
+    }, data === "" ? "-" : data), /*#__PURE__*/React__default["default"].createElement("div", {
       className: "flex justify-end"
     }, /*#__PURE__*/React__default["default"].createElement("p", {
       style: {
@@ -48484,7 +48484,7 @@
       style: {
         fontSize: "8px"
       }
-    }, /*#__PURE__*/React__default["default"].createElement("p", null, data))), /*#__PURE__*/React__default["default"].createElement("div", {
+    }, /*#__PURE__*/React__default["default"].createElement("p", null, data === "" ? "-" : data))), /*#__PURE__*/React__default["default"].createElement("div", {
       className: "w-full bg-white absolute bottom-0 p-2 rounded-md-lb rounded-b-xl"
     }, /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement("div", {
       className: "flex justify-center"
@@ -48541,7 +48541,7 @@
       style: {
         fontSize: "8px"
       }
-    }, /*#__PURE__*/React__default["default"].createElement("p", null, data))), /*#__PURE__*/React__default["default"].createElement("div", {
+    }, /*#__PURE__*/React__default["default"].createElement("p", null, data === "" ? "-" : data))), /*#__PURE__*/React__default["default"].createElement("div", {
       className: "w-full bg-white absolute bottom-0 p-2 rounded-md-lb rounded-b-xl"
     }, /*#__PURE__*/React__default["default"].createElement("div", {
       className: "flex justify-between mb-2 items-center"
@@ -48562,6 +48562,95 @@
     })))))));
   };
 
+  const TextArea = ({
+    title = "",
+    leftIcon = null,
+    rightIcon = null,
+    placeholder = "",
+    footer = null,
+    type = "text",
+    mode = "default",
+    isRequired = true,
+    value,
+    onChangeInput,
+    className = ""
+  }) => {
+    const [isFocused, setIsFocused] = React.useState(false);
+    const [showPassword, setShowPassword] = React.useState(false);
+    const handleFocus = () => {
+      setIsFocused(true);
+    };
+    const handleBlur = () => {
+      setIsFocused(false);
+    };
+    const handleTogglePasswordVisibility = () => {
+      setShowPassword(!showPassword);
+    };
+    return /*#__PURE__*/React__default["default"].createElement("div", {
+      className: `w-full ${className}`
+    }, title && /*#__PURE__*/React__default["default"].createElement("div", {
+      className: "flex"
+    }, /*#__PURE__*/React__default["default"].createElement("p", {
+      className: "text-sm font-normal text-black mb-1"
+    }, title), isRequired && /*#__PURE__*/React__default["default"].createElement("p", {
+      className: "text-sm font-normal text-danger500 ml-1"
+    }, "*")), /*#__PURE__*/React__default["default"].createElement("div", {
+      className: "relative rounded-md"
+    }, leftIcon && /*#__PURE__*/React__default["default"].createElement("span", {
+      className: "absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none"
+    }, /*#__PURE__*/React__default["default"].createElement(PiInfo, {
+      size: 16,
+      className: `
+                        ${mode === "primary" && "text-black"}
+                        ${mode === "disable" && "text-neutral50"}
+                        ${mode === "danger" && "text-danger500"}
+                        `
+    })), /*#__PURE__*/React__default["default"].createElement("textarea", {
+      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" && /*#__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, {
+      size: 16,
+      className: `text-black ${mode === "danger" && "text-danger500"}`
+    }) : /*#__PURE__*/React__default["default"].createElement(PiEyeClosedLight, {
+      size: 16,
+      className: `text-black ${mode === "danger" && "text-danger500"}`
+    })), rightIcon && /*#__PURE__*/React__default["default"].createElement("span", {
+      className: "absolute inset-y-0 right-0 pr-4 flex items-center pointer-events-none"
+    }, /*#__PURE__*/React__default["default"].createElement(PiInfo, {
+      size: 16,
+      className: `
+                        ${mode === "primary" && "text-black"}
+                        ${mode === "disable" && "text-neutral50"}
+                        ${mode === "danger" && "text-danger500"}
+                        `
+    }))), footer && /*#__PURE__*/React__default["default"].createElement("div", null, mode === "danger" ? /*#__PURE__*/React__default["default"].createElement("div", {
+      className: "flex"
+    }, /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement(PiInfo, {
+      size: 16,
+      className: "text-danger500"
+    })), /*#__PURE__*/React__default["default"].createElement("p", {
+      className: "text-danger500 text-xs ml-1"
+    }, footer)) : /*#__PURE__*/React__default["default"].createElement("p", {
+      className: "text-black text-xs"
+    }, footer)));
+  };
+
   exports.Alert = Alert;
   exports.BillerList = BillerList;
   exports.BillerProductList = BillerProductList;
@@ -48617,6 +48706,7 @@
   exports.Stepper = Stepper;
   exports.Switch = Switch;
   exports.TabBar = TabBar;
+  exports.TextArea = TextArea;
   exports.TextEditor = TextEditor;
   exports.TextInput = TextInput;
   exports.VerticalStepBar = VerticalStepBar;

package/package.json

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

package/src/components/customphone/index.js

@@ -105,7 +105,7 @@ const CustomPhone = ({ mode = "Empty", data }) => {
                 </div>
                 <div className="bg-white py-1 px-2 rounded-md w-32 drop-shadow-2xl">
                   <p style={{ fontSize: "8px", wordBreak: "break-word" }} className="text-neutral5">
-                    {data}
+                    {data === "" ? "-" : data}
                   </p>
                   <div className="flex justify-end">
                     <p style={{ fontSize: "8px" }} className="text-neutral80">
@@ -253,7 +253,7 @@ const CustomPhone = ({ mode = "Empty", data }) => {
               </div>
               <div className="w-full bg-white px-2">
                 <div className="p-4" style={{ fontSize: "8px" }}>
-                  <p>{data}</p>
+                  <p>{data === "" ? "-" : data}</p>
                 </div>
               </div>
               <div className="w-full bg-white absolute bottom-0 p-2 rounded-md-lb rounded-b-xl">
@@ -297,7 +297,7 @@ const CustomPhone = ({ mode = "Empty", data }) => {
               </div>
               <div className="w-full bg-white px-2 py-4">
                 <div className="w-40 bg-neutral30 rounded-lg p-2" style={{ fontSize: "8px" }}>
-                  <p>{data}</p>
+                  <p>{data === "" ? "-" : data}</p>
                 </div>
               </div>
               <div className="w-full bg-white absolute bottom-0 p-2 rounded-md-lb rounded-b-xl">

package/src/index.js

@@ -88,6 +88,7 @@ import Footer from "./components/footer";
 import Header from "./components/header";
 import TextEditor from "./components/texteditor";
 import CustomPhone from "./components/customphone";
+import TextArea from "./components/textarea";
 
 export {
   Header,
@@ -147,5 +148,6 @@ export {
   ModalDeposit,
   DescriptionFile,
   TextEditor,
-  CustomPhone
+  CustomPhone,
+  TextArea
 };