sprint-asia-custom-component 0.1.92 → 0.1.93

package/dist/index.js

@@ -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.93",
   "private": false,
   "dependencies": {
     "@headlessui/react": "^1.7.18",

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
 };