sprint-asia-custom-component 0.1.167 → 0.1.168

package/dist/index.js

@@ -29145,6 +29145,14 @@
     }, props.subtitle))))))));
   };
 
+  const formatNumber = val => {
+    if (!val) return "";
+    return val.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".");
+  };
+  const parseNumber = val => {
+    if (!val) return "";
+    return val.replace(/\./g, ""); // hapus titik biar jadi angka murni
+  };
   const TextInput = ({
     title = "",
     rightComponent = null,
@@ -29165,15 +29173,27 @@
   }) => {
     const [isFocused, setIsFocused] = React.useState(false);
     const [showPassword, setShowPassword] = React.useState(false);
-    const handleFocus = () => {
-      setIsFocused(true);
-    };
-    const handleBlur = () => {
-      setIsFocused(false);
-    };
-    const handleTogglePasswordVisibility = () => {
-      setShowPassword(!showPassword);
+    const handleFocus = () => setIsFocused(true);
+    const handleBlur = () => setIsFocused(false);
+    const handleTogglePasswordVisibility = () => setShowPassword(!showPassword);
+    const handleChange = e => {
+      let val = e.target.value;
+      if (type === "number") {
+        // hapus semua karakter non digit
+        const raw = parseNumber(val.replace(/\D/g, ""));
+        // kirim angka murni ke parent
+        onChangeInput({
+          ...e,
+          target: {
+            ...e.target,
+            value: raw
+          }
+        });
+        return;
+      }
+      onChangeInput(e);
     };
+    const displayValue = type === "number" ? value ? formatNumber(value) : "" : value;
     return /*#__PURE__*/React__default["default"].createElement("div", {
       className: `w-full ${className}`
     }, /*#__PURE__*/React__default["default"].createElement("div", {
@@ -29194,27 +29214,27 @@
                 ${mode === "primary" && "text-black"}
                 ${mode === "disable" && "text-neutral50"}
                 ${mode === "danger" && "text-danger500"}
-                `
+              `
     })), /*#__PURE__*/React__default["default"].createElement("input", {
       min: minimum !== null && minimum !== undefined && type === "number" ? minimum : undefined,
       max: maximum !== null && maximum !== undefined && type === "number" ? maximum : undefined,
-      type: type === "password" ? showPassword ? "text" : "password" : type,
+      type: type === "password" ? showPassword ? "text" : "password" : "text" // number tetap text
+      ,
       className: `py-2.5 px-4 w-full font-normal text-sm text-black 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 === "white" && "bg-white border-neutral50"}
-                        ${mode === "danger" && "bg-danger50 border-danger500 focus:outline-2 outline-danger500"}
-                        ${leftIcon || leftAdornment ? "pl-8" : "pl-3"}
-                        ${leftIcon && leftAdornment ? "pl-16" : "pl-3"}
-                        ${rightIcon || rightAdornment ? "pr-8" : "pr-3"}
-                        ${rightIcon && rightAdornment ? "pr-16" : "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 === "white" && "bg-white border-neutral50"}
+            ${mode === "danger" && "bg-danger50 border-danger500 focus:outline-2 outline-danger500"}
+            ${leftIcon || leftAdornment ? "pl-8" : "pl-3"}
+            ${leftIcon && leftAdornment ? "pl-16" : "pl-3"}
+            ${rightIcon || rightAdornment ? "pr-8" : "pr-3"}
+            ${rightIcon && rightAdornment ? "pr-16" : "pr-3"}`,
       placeholder: placeholder,
-      "data-mask": "000.000.000-00",
       disabled: mode === "disable",
-      value: value,
-      onChange: onChangeInput,
+      value: displayValue,
+      onChange: handleChange,
       onFocus: handleFocus,
       onBlur: handleBlur
     }), type === "password" && /*#__PURE__*/React__default["default"].createElement("span", {
@@ -29234,7 +29254,7 @@
                 ${mode === "primary" && "text-neutral50"}
                 ${mode === "disable" && "text-neutral50"}
                 ${mode === "danger" && "text-danger500"}
-                `
+              `
     }))), footer && /*#__PURE__*/React__default["default"].createElement("div", {
       className: "mt-1"
     }, mode === "danger" ? /*#__PURE__*/React__default["default"].createElement("div", {

package/package.json

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

package/src/components/textinput/index.js

@@ -1,6 +1,16 @@
 import React, { useState } from "react";
 import { PiEyeClosedLight, PiEye, PiInfo } from "react-icons/pi";
 
+const formatNumber = (val) => {
+  if (!val) return "";
+  return val.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".");
+};
+
+const parseNumber = (val) => {
+  if (!val) return "";
+  return val.replace(/\./g, ""); // hapus titik biar jadi angka murni
+};
+
 const TextInput = ({
   title = "",
   rightComponent = null,
@@ -22,25 +32,39 @@ const TextInput = ({
   const [isFocused, setIsFocused] = useState(false);
   const [showPassword, setShowPassword] = useState(false);
 
-  const handleFocus = () => {
-    setIsFocused(true);
-  };
+  const handleFocus = () => setIsFocused(true);
+  const handleBlur = () => setIsFocused(false);
+  const handleTogglePasswordVisibility = () => setShowPassword(!showPassword);
 
-  const handleBlur = () => {
-    setIsFocused(false);
-  };
+  const handleChange = (e) => {
+    let val = e.target.value;
 
-  const handleTogglePasswordVisibility = () => {
-    setShowPassword(!showPassword);
+    if (type === "number") {
+      // hapus semua karakter non digit
+      const raw = parseNumber(val.replace(/\D/g, ""));
+      // kirim angka murni ke parent
+      onChangeInput({
+        ...e,
+        target: { ...e.target, value: raw },
+      });
+      return;
+    }
+
+    onChangeInput(e);
   };
 
+  const displayValue =
+    type === "number" ? (value ? formatNumber(value) : "") : value;
+
   return (
     <div className={`w-full ${className}`}>
       <div className="flex w-full items-center">
         {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>}
+            {isRequired && (
+              <p className="text-sm font-normal text-danger500 ml-1">*</p>
+            )}
           </div>
         )}
         {rightComponent}
@@ -56,34 +80,51 @@ const TextInput = ({
                 ${mode === "primary" && "text-black"}
                 ${mode === "disable" && "text-neutral50"}
                 ${mode === "danger" && "text-danger500"}
-                `}
+              `}
             />
           )}
         </section>
 
         <input
-          min={minimum !== null && minimum !== undefined && type === "number" ? minimum : undefined}
-          max={maximum !== null && maximum !== undefined && type === "number" ? maximum : undefined}
-          type={type === "password" ? (showPassword ? "text" : "password") : type}
+          min={
+            minimum !== null && minimum !== undefined && type === "number"
+              ? minimum
+              : undefined
+          }
+          max={
+            maximum !== null && maximum !== undefined && type === "number"
+              ? maximum
+              : undefined
+          }
+          type={
+            type === "password" ? (showPassword ? "text" : "password") : "text"
+          } // number tetap text
           className={`py-2.5 px-4 w-full font-normal text-sm text-black rounded-md border
-                        ${!value &&
-            mode === "default" &&
-            "bg-neutral20 border-neutral50 focus:outline-2 outline-primary500"
+            ${
+              !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 === "white" && "bg-white border-neutral50"}
+            ${
+              mode === "danger" &&
+              "bg-danger50 border-danger500 focus:outline-2 outline-danger500"
             }
-                        ${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 === "white" && "bg-white border-neutral50"}
-                        ${mode === "danger" && "bg-danger50 border-danger500 focus:outline-2 outline-danger500"}
-                        ${leftIcon || leftAdornment ? "pl-8" : "pl-3"}
-                        ${leftIcon && leftAdornment ? "pl-16" : "pl-3"}
-                        ${rightIcon || rightAdornment ? "pr-8" : "pr-3"}
-                        ${rightIcon && rightAdornment ? "pr-16" : "pr-3"}`}
+            ${leftIcon || leftAdornment ? "pl-8" : "pl-3"}
+            ${leftIcon && leftAdornment ? "pl-16" : "pl-3"}
+            ${rightIcon || rightAdornment ? "pr-8" : "pr-3"}
+            ${rightIcon && rightAdornment ? "pr-16" : "pr-3"}`}
           placeholder={placeholder}
-          data-mask="000.000.000-00"
           disabled={mode === "disable"}
-          value={value}
-          onChange={onChangeInput}
+          value={displayValue}
+          onChange={handleChange}
           onFocus={handleFocus}
           onBlur={handleBlur}
         />
@@ -94,9 +135,19 @@ const TextInput = ({
             onClick={handleTogglePasswordVisibility}
           >
             {showPassword ? (
-              <PiEye size={16} className={`text-black ${mode === "danger" && "text-danger500"}`} />
+              <PiEye
+                size={16}
+                className={`text-black ${
+                  mode === "danger" && "text-danger500"
+                }`}
+              />
             ) : (
-              <PiEyeClosedLight size={16} className={`text-black ${mode === "danger" && "text-danger500"}`} />
+              <PiEyeClosedLight
+                size={16}
+                className={`text-black ${
+                  mode === "danger" && "text-danger500"
+                }`}
+              />
             )}
           </span>
         )}
@@ -110,7 +161,7 @@ const TextInput = ({
                 ${mode === "primary" && "text-neutral50"}
                 ${mode === "disable" && "text-neutral50"}
                 ${mode === "danger" && "text-danger500"}
-                `}
+              `}
             />
           )}
         </section>
@@ -134,4 +185,4 @@ const TextInput = ({
   );
 };
 
-export default TextInput;
+export default TextInput;