@lets-events/react 10.1.0 → 10.1.1

package/.turbo/turbo-build.log

@@ -1,20 +1,19 @@
 
 
-> @lets-events/react@10.1.0 build
+> @lets-events/react@10.1.1 build
 > tsup src/index.tsx  --format esm,cjs --dts --external react
 
-CLI Building entry: src/index.tsx
+CLI Building entry: src/index.tsx
 CLI Using tsconfig: tsconfig.json
 CLI tsup v8.4.0
 CLI Target: es6
 ESM Build start
 CJS Build start
-ESM dist/index.mjs 273.05 KB
-ESM ⚡️ Build success in 364ms
-CJS dist/index.js 281.40 KB
-CJS ⚡️ Build success in 364ms
+CJS dist/index.js 283.08 KB
+CJS ⚡️ Build success in 11472ms
+ESM dist/index.mjs 274.71 KB
+ESM ⚡️ Build success in 11473ms
 DTS Build start
-DTS ⚡️ Build success in 7135ms
+DTS ⚡️ Build success in -4645ms
 DTS dist/index.d.mts 338.38 KB
 DTS dist/index.d.ts  338.38 KB
-⠙

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @lets-events/react
 
+## 10.1.1
+
+### Patch Changes
+
+- Input of TimerPicker
+
 ## 10.1.0
 
 ### Minor Changes

package/dist/index.js

@@ -7974,8 +7974,21 @@ var InputStyled = styled("input", {
     color: "$dark400",
     border: "1px solid $dark200",
     cursor: "not-allowed"
+  },
+  inputMode: "numeric",
+  "&::-webkit-inner-spin-button": {
+    WebkitAppearance: "none",
+    margin: 0
+  },
+  "&::-webkit-outer-spin-button": {
+    WebkitAppearance: "none",
+    margin: 0
+  },
+  "&[type='number']": {
+    MozAppearance: "textfield"
   }
 });
+var pad = (num) => String(num).padStart(2, "0");
 function TimePicker({
   selected,
   setSelected,
@@ -7983,25 +7996,21 @@ function TimePicker({
 }) {
   const [hours, setHours] = (0, import_react5.useState)("00");
   const [minutes, setMinutes] = (0, import_react5.useState)("00");
+  const [rawHours, setRawHours] = (0, import_react5.useState)("00");
+  const [rawMinutes, setRawMinutes] = (0, import_react5.useState)("00");
   const [isOpen, setIsOpen] = (0, import_react5.useState)(false);
   const dropdownRef = (0, import_react5.useRef)(null);
   useOnClickOutside(dropdownRef, () => setIsOpen(false));
-  const pad = (num) => String(num).padStart(2, "0");
-  const handleInputValue = (0, import_react5.useCallback)(
-    (time) => {
-      setSelected(time);
-      setIsOpen(false);
-    },
-    [setSelected]
-  );
   const handleIncrement = (0, import_react5.useCallback)(
     (type) => {
       if (type === "hours") {
         const next = (parseInt(hours) + 1) % 24;
         setHours(pad(next));
+        setRawHours(pad(next));
       } else {
         const next = (parseInt(minutes) + 1) % 60;
         setMinutes(pad(next));
+        setRawMinutes(pad(next));
       }
     },
     [hours, minutes]
@@ -8011,9 +8020,11 @@ function TimePicker({
       if (type === "hours") {
         const prev = (parseInt(hours) - 1 + 24) % 24;
         setHours(pad(prev));
+        setRawHours(pad(prev));
       } else {
         const prev = (parseInt(minutes) - 1 + 60) % 60;
         setMinutes(pad(prev));
+        setRawMinutes(pad(prev));
       }
     },
     [hours, minutes]
@@ -8084,10 +8095,39 @@ function TimePicker({
                   /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
                     InputStyled,
                     {
-                      value: unit === "hours" ? hours : minutes,
-                      onChange: (e) => handleInputValue(e.target.value),
+                      inputMode: "numeric",
+                      pattern: "[0-9]*",
                       type: "text",
-                      placeholder: "00"
+                      placeholder: "00",
+                      value: unit === "hours" ? rawHours : rawMinutes,
+                      onChange: (e) => {
+                        const rawValue = e.target.value.replace(/\D/g, "");
+                        if (unit === "hours") {
+                          setRawHours(rawValue);
+                        } else {
+                          setRawMinutes(rawValue);
+                        }
+                      },
+                      onBlur: () => {
+                        let num = 0;
+                        if (unit === "hours") {
+                          num = Math.min(parseInt(rawHours || "0", 10), 23);
+                          const padded = pad(num);
+                          setHours(padded);
+                          setRawHours(padded);
+                        } else {
+                          num = Math.min(parseInt(rawMinutes || "0", 10), 59);
+                          const padded = pad(num);
+                          setMinutes(padded);
+                          setRawMinutes(padded);
+                        }
+                      },
+                      onPaste: (e) => {
+                        const paste = e.clipboardData.getData("Text");
+                        if (!/^\d{1,2}$/.test(paste)) {
+                          e.preventDefault();
+                        }
+                      }
                     }
                   ),
                   /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
@@ -8136,7 +8176,10 @@ function TimePicker({
               type: "button",
               variant: "text",
               color: "brand",
-              onClick: () => handleInputValue(`${hours}:${minutes}`),
+              onClick: () => {
+                setSelected(`${hours}:${minutes}`);
+                setIsOpen(false);
+              },
               typography: "buttonMedium",
               fontWeight: "medium",
               children: "Aplicar"

package/dist/index.mjs

@@ -7888,8 +7888,21 @@ var InputStyled = styled("input", {
     color: "$dark400",
     border: "1px solid $dark200",
     cursor: "not-allowed"
+  },
+  inputMode: "numeric",
+  "&::-webkit-inner-spin-button": {
+    WebkitAppearance: "none",
+    margin: 0
+  },
+  "&::-webkit-outer-spin-button": {
+    WebkitAppearance: "none",
+    margin: 0
+  },
+  "&[type='number']": {
+    MozAppearance: "textfield"
   }
 });
+var pad = (num) => String(num).padStart(2, "0");
 function TimePicker({
   selected,
   setSelected,
@@ -7897,25 +7910,21 @@ function TimePicker({
 }) {
   const [hours, setHours] = useState2("00");
   const [minutes, setMinutes] = useState2("00");
+  const [rawHours, setRawHours] = useState2("00");
+  const [rawMinutes, setRawMinutes] = useState2("00");
   const [isOpen, setIsOpen] = useState2(false);
   const dropdownRef = useRef2(null);
   useOnClickOutside(dropdownRef, () => setIsOpen(false));
-  const pad = (num) => String(num).padStart(2, "0");
-  const handleInputValue = useCallback(
-    (time) => {
-      setSelected(time);
-      setIsOpen(false);
-    },
-    [setSelected]
-  );
   const handleIncrement = useCallback(
     (type) => {
       if (type === "hours") {
         const next = (parseInt(hours) + 1) % 24;
         setHours(pad(next));
+        setRawHours(pad(next));
       } else {
         const next = (parseInt(minutes) + 1) % 60;
         setMinutes(pad(next));
+        setRawMinutes(pad(next));
       }
     },
     [hours, minutes]
@@ -7925,9 +7934,11 @@ function TimePicker({
       if (type === "hours") {
         const prev = (parseInt(hours) - 1 + 24) % 24;
         setHours(pad(prev));
+        setRawHours(pad(prev));
       } else {
         const prev = (parseInt(minutes) - 1 + 60) % 60;
         setMinutes(pad(prev));
+        setRawMinutes(pad(prev));
       }
     },
     [hours, minutes]
@@ -7998,10 +8009,39 @@ function TimePicker({
                   /* @__PURE__ */ jsx15(
                     InputStyled,
                     {
-                      value: unit === "hours" ? hours : minutes,
-                      onChange: (e) => handleInputValue(e.target.value),
+                      inputMode: "numeric",
+                      pattern: "[0-9]*",
                       type: "text",
-                      placeholder: "00"
+                      placeholder: "00",
+                      value: unit === "hours" ? rawHours : rawMinutes,
+                      onChange: (e) => {
+                        const rawValue = e.target.value.replace(/\D/g, "");
+                        if (unit === "hours") {
+                          setRawHours(rawValue);
+                        } else {
+                          setRawMinutes(rawValue);
+                        }
+                      },
+                      onBlur: () => {
+                        let num = 0;
+                        if (unit === "hours") {
+                          num = Math.min(parseInt(rawHours || "0", 10), 23);
+                          const padded = pad(num);
+                          setHours(padded);
+                          setRawHours(padded);
+                        } else {
+                          num = Math.min(parseInt(rawMinutes || "0", 10), 59);
+                          const padded = pad(num);
+                          setMinutes(padded);
+                          setRawMinutes(padded);
+                        }
+                      },
+                      onPaste: (e) => {
+                        const paste = e.clipboardData.getData("Text");
+                        if (!/^\d{1,2}$/.test(paste)) {
+                          e.preventDefault();
+                        }
+                      }
                     }
                   ),
                   /* @__PURE__ */ jsx15(
@@ -8050,7 +8090,10 @@ function TimePicker({
               type: "button",
               variant: "text",
               color: "brand",
-              onClick: () => handleInputValue(`${hours}:${minutes}`),
+              onClick: () => {
+                setSelected(`${hours}:${minutes}`);
+                setIsOpen(false);
+              },
               typography: "buttonMedium",
               fontWeight: "medium",
               children: "Aplicar"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lets-events/react",
-  "version": "10.1.0",
+  "version": "10.1.1",
   "description": "",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",

package/src/components/TimePicker.tsx

@@ -81,6 +81,18 @@ export const InputStyled = styled("input", {
     border: "1px solid $dark200",
     cursor: "not-allowed",
   },
+  inputMode: "numeric",
+  "&::-webkit-inner-spin-button": {
+    WebkitAppearance: "none",
+    margin: 0,
+  },
+  "&::-webkit-outer-spin-button": {
+    WebkitAppearance: "none",
+    margin: 0,
+  },
+  "&[type='number']": {
+    MozAppearance: "textfield",
+  },
 });
 
 export type TimePickerProps = {
@@ -88,6 +100,7 @@ export type TimePickerProps = {
   setSelected: React.Dispatch<React.SetStateAction<string | undefined>>;
   position?: "bottom" | "top";
 };
+const pad = (num: number) => String(num).padStart(2, "0");
 
 export function TimePicker({
   selected,
@@ -96,29 +109,23 @@ export function TimePicker({
 }: TimePickerProps) {
   const [hours, setHours] = useState("00");
   const [minutes, setMinutes] = useState("00");
+  const [rawHours, setRawHours] = useState("00");
+  const [rawMinutes, setRawMinutes] = useState("00");
   const [isOpen, setIsOpen] = useState(false);
   const dropdownRef = useRef(null);
 
   useOnClickOutside(dropdownRef, () => setIsOpen(false));
 
-  const pad = (num: number) => String(num).padStart(2, "0");
-
-  const handleInputValue = useCallback(
-    (time: string) => {
-      setSelected(time);
-      setIsOpen(false);
-    },
-    [setSelected]
-  );
-
   const handleIncrement = useCallback(
     (type: "hours" | "minutes") => {
       if (type === "hours") {
         const next = (parseInt(hours) + 1) % 24;
         setHours(pad(next));
+        setRawHours(pad(next));
       } else {
         const next = (parseInt(minutes) + 1) % 60;
         setMinutes(pad(next));
+        setRawMinutes(pad(next));
       }
     },
     [hours, minutes]
@@ -128,9 +135,11 @@ export function TimePicker({
       if (type === "hours") {
         const prev = (parseInt(hours) - 1 + 24) % 24;
         setHours(pad(prev));
+        setRawHours(pad(prev));
       } else {
         const prev = (parseInt(minutes) - 1 + 60) % 60;
         setMinutes(pad(prev));
+        setRawMinutes(pad(prev));
       }
     },
     [hours, minutes]
@@ -189,10 +198,39 @@ export function TimePicker({
                   </svg>
                 </Button>
                 <InputStyled
-                  value={unit === "hours" ? hours : minutes}
-                  onChange={(e) => handleInputValue(e.target.value)}
+                  inputMode="numeric"
+                  pattern="[0-9]*"
                   type="text"
                   placeholder="00"
+                  value={unit === "hours" ? rawHours : rawMinutes}
+                  onChange={(e) => {
+                    const rawValue = e.target.value.replace(/\D/g, "");
+                    if (unit === "hours") {
+                      setRawHours(rawValue);
+                    } else {
+                      setRawMinutes(rawValue);
+                    }
+                  }}
+                  onBlur={() => {
+                    let num = 0;
+                    if (unit === "hours") {
+                      num = Math.min(parseInt(rawHours || "0", 10), 23);
+                      const padded = pad(num);
+                      setHours(padded);
+                      setRawHours(padded);
+                    } else {
+                      num = Math.min(parseInt(rawMinutes || "0", 10), 59);
+                      const padded = pad(num);
+                      setMinutes(padded);
+                      setRawMinutes(padded);
+                    }
+                  }}
+                  onPaste={(e) => {
+                    const paste = e.clipboardData.getData("Text");
+                    if (!/^\d{1,2}$/.test(paste)) {
+                      e.preventDefault();
+                    }
+                  }}
                 />
                 <Button
                   type="button"
@@ -225,7 +263,10 @@ export function TimePicker({
               type="button"
               variant="text"
               color="brand"
-              onClick={() => handleInputValue(`${hours}:${minutes}`)}
+              onClick={() => {
+                setSelected(`${hours}:${minutes}`);
+                setIsOpen(false);
+              }}
               typography="buttonMedium"
               fontWeight="medium"
             >