react-input-mask-format 2.2.0 → 2.3.0

package/README.md

@@ -10,7 +10,11 @@ Made with attention to UX.
 
 A maintained fork of [react-input-mask](https://github.com/sanniassin/react-input-mask).
 
-## What's new in 2.2
+## What's new in 2.3
+
+- `react-input-mask-format/time` — HH:MM (24h) masked input with clamping, see [Time](#time--react-input-mask-formattime)
+
+### 2.2
 
 - `useMask` hook — mask your own `<input>` with no wrapper component, see [useMask hook](#usemask-hook)
 - `react-input-mask-format/number` — numeric & currency masking, a lightweight `react-number-format` alternative, see [Numeric & currency](#numeric--currency--react-input-mask-formatnumber)
@@ -242,6 +246,59 @@ The main differences: `decimalScale` **truncates** rather than rounds while
 typing, and this package ships a single `NumberFormat` (no separate
 `PatternFormat` — use the mask engine / `<InputMask>` for pattern masks).
 
+## Time — `react-input-mask-format/time`
+
+A separate, tree-shakeable entry for formatting times in 24-hour format (HH:MM).
+
+```tsx
+import { TimeFormat, useTimeFormat, formatTime } from "react-input-mask-format/time";
+
+// controlled component
+<TimeFormat value={time} onValueChange={(v) => setTime(v.value)} />
+
+// bring-your-own input (e.g. a design-system Input)
+const ref = useTimeFormat({ onValueChange: (v) => setTime(v.value) });
+<input ref={ref} />
+
+formatTime("2999"); // "23:59"
+```
+
+`onValueChange` receives `{ value, formattedValue, hours, minutes }`:
+
+```txt
+typing "1234"  →  value "12:34"  formattedValue "12:34"  hours 12  minutes 34
+typing "12"    →  value ""       formattedValue "12:"     hours 12  minutes undefined
+```
+
+`value` remains empty until both hours and minutes are complete. The canonical
+`value` always uses `:` as the separator, regardless of the display `separator`
+option.
+
+**Clamping**: When hours are complete (two digits), they're clamped to ≤23.
+When minutes are complete, they're clamped to ≤59. A single digit is never
+clamped.
+
+Because an incomplete time has an empty canonical `value`, a controlled parent
+that resets `value` to `""` won't visibly clear a partially-typed field; to
+force-clear it, remount the input with a changed React `key`.
+
+Options: `separator` (default `:`).
+
+There is also a ref hook and the pure helpers:
+
+```tsx
+import { useTimeFormat, formatTime, parseTime } from "react-input-mask-format/time";
+
+const ref = useTimeFormat({ separator: ":" });
+// <input ref={ref} />
+
+formatTime("2999", { separator: ":" }); // "23:59"
+parseTime("14:30");                      // { value: "14:30", formattedValue: "14:30", hours: 14, minutes: 30 }
+```
+
+**Reserved for a later minor release**: seconds (HH:MM:SS) and 12-hour format
+with AM/PM.
+
 ### `maskPlaceholder`
 
 ```jsx

package/dist/time.cjs

@@ -0,0 +1,240 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/time/index.ts
+var time_exports = {};
+__export(time_exports, {
+  TimeFormat: () => TimeFormat,
+  formatTime: () => formatTime,
+  parseTime: () => parseTime,
+  useTimeFormat: () => useTimeFormat
+});
+module.exports = __toCommonJS(time_exports);
+
+// src/time/time-format.tsx
+var import_react = __toESM(require("react"), 1);
+
+// src/time/format-time.ts
+function tokenizeTime(raw) {
+  const digits = String(raw != null ? raw : "").replace(/\D/g, "").slice(0, 4);
+  let hours = digits.slice(0, 2);
+  let minutes = digits.slice(2, 4);
+  if (hours.length === 2) {
+    hours = String(Math.min(parseInt(hours, 10), 23)).padStart(2, "0");
+  }
+  if (minutes.length === 2) {
+    minutes = String(Math.min(parseInt(minutes, 10), 59)).padStart(2, "0");
+  }
+  return { hours, minutes };
+}
+function buildFormatted(parts, separator) {
+  const { hours, minutes } = parts;
+  if (hours === "") return "";
+  if (hours.length < 2) return hours;
+  if (minutes === "") return hours + separator;
+  return hours + separator + minutes;
+}
+function formatTime(input, options) {
+  var _a;
+  const separator = (_a = options == null ? void 0 : options.separator) != null ? _a : ":";
+  return buildFormatted(tokenizeTime(input), separator);
+}
+
+// src/time/parse-time.ts
+function collapseTrailingSeparator(raw, previous, separator) {
+  return previous.endsWith(separator) && raw === previous.slice(0, -separator.length) ? raw.slice(0, -1) : raw;
+}
+function parseTime(formatted, options) {
+  var _a;
+  const separator = (_a = options == null ? void 0 : options.separator) != null ? _a : ":";
+  const parts = tokenizeTime(formatted);
+  const formattedValue = buildFormatted(parts, separator);
+  const hours = parts.hours.length === 2 ? parseInt(parts.hours, 10) : void 0;
+  const minutes = parts.minutes.length === 2 ? parseInt(parts.minutes, 10) : void 0;
+  const value = hours !== void 0 && minutes !== void 0 ? `${parts.hours}:${parts.minutes}` : "";
+  return { value, formattedValue, hours, minutes };
+}
+function digitsBeforeCaret(value, caret) {
+  let count = 0;
+  for (let i = 0; i < caret && i < value.length; i++) {
+    if (value[i] >= "0" && value[i] <= "9") count++;
+  }
+  return count;
+}
+function caretAfterDigits(formatted, digitsBefore) {
+  if (digitsBefore <= 0) {
+    const first = formatted.search(/\d/);
+    return first === -1 ? formatted.length : first;
+  }
+  let seen = 0;
+  for (let i = 0; i < formatted.length; i++) {
+    if (formatted[i] >= "0" && formatted[i] <= "9") {
+      seen++;
+      if (seen === digitsBefore) return i + 1;
+    }
+  }
+  return formatted.length;
+}
+function resolveCaret(values, digitsBefore, options) {
+  var _a;
+  const separator = (_a = options == null ? void 0 : options.separator) != null ? _a : ":";
+  const caret = caretAfterDigits(values.formattedValue, digitsBefore);
+  if (separator && values.formattedValue.slice(caret, caret + separator.length) === separator) {
+    return caret + separator.length;
+  }
+  return caret;
+}
+
+// src/utils/input.ts
+function setInputSelection(input, start, end) {
+  if (end === void 0) {
+    end = start;
+  }
+  input.setSelectionRange(start, end);
+}
+function isInputFocused(input) {
+  const inputDocument = input.ownerDocument;
+  return inputDocument.hasFocus() && inputDocument.activeElement === input;
+}
+
+// src/time/time-format.tsx
+var TimeFormat = (0, import_react.forwardRef)(function TimeFormat2(props, forwardedRef) {
+  const { value = "", onValueChange, separator, ...domProps } = props;
+  const options = { separator };
+  const innerRef = (0, import_react.useRef)(null);
+  const caretRef = (0, import_react.useRef)(null);
+  const lastValuesRef = (0, import_react.useRef)(null);
+  const [, forceUpdate] = (0, import_react.useReducer)((n) => n + 1, 0);
+  const last = lastValuesRef.current;
+  const formatted = last !== null && (value === last.value || value === last.formattedValue) ? last.formattedValue : formatTime(value != null ? value : "", options);
+  function handleChange(event) {
+    var _a, _b;
+    const el = event.target;
+    const caret = (_a = el.selectionStart) != null ? _a : el.value.length;
+    const raw = collapseTrailingSeparator(el.value, formatted, (_b = options.separator) != null ? _b : ":");
+    const digits = digitsBeforeCaret(raw, caret);
+    const values = parseTime(raw, options);
+    caretRef.current = resolveCaret(values, digits, options);
+    lastValuesRef.current = values;
+    forceUpdate();
+    onValueChange == null ? void 0 : onValueChange(values);
+  }
+  (0, import_react.useLayoutEffect)(() => {
+    const el = innerRef.current;
+    if (el && caretRef.current !== null && isInputFocused(el)) {
+      setInputSelection(el, caretRef.current, caretRef.current);
+      caretRef.current = null;
+    }
+  });
+  function setRef(el) {
+    innerRef.current = el;
+    if (typeof forwardedRef === "function") forwardedRef(el);
+    else if (forwardedRef)
+      forwardedRef.current = el;
+  }
+  return /* @__PURE__ */ import_react.default.createElement("input", { ...domProps, ref: setRef, value: formatted, onChange: handleChange });
+});
+TimeFormat.displayName = "TimeFormat";
+
+// src/time/use-time-format.ts
+var import_react2 = require("react");
+
+// src/set-native-value.ts
+function setNativeValue(input, value) {
+  const descriptor = Object.getOwnPropertyDescriptor(
+    HTMLInputElement.prototype,
+    "value"
+  );
+  const setter = descriptor && descriptor.set;
+  if (setter) {
+    setter.call(input, value);
+  } else {
+    input.value = value;
+  }
+}
+
+// src/time/use-time-format.ts
+var IS_JSDOM = typeof navigator !== "undefined" && navigator.userAgent.includes("jsdom");
+function useTimeFormat(options) {
+  const optionsRef = (0, import_react2.useRef)(options);
+  optionsRef.current = options;
+  const inputRef = (0, import_react2.useRef)(null);
+  const handlerRef = (0, import_react2.useRef)(null);
+  return (0, import_react2.useCallback)((el) => {
+    if (el) {
+      let previous = el.value;
+      const handler = () => {
+        var _a, _b, _c;
+        const opts = optionsRef.current;
+        const caret = (_a = el.selectionStart) != null ? _a : el.value.length;
+        const raw = collapseTrailingSeparator(el.value, previous, (_b = opts.separator) != null ? _b : ":");
+        const digits = digitsBeforeCaret(raw, caret);
+        const values = parseTime(raw, opts);
+        setNativeValue(el, values.formattedValue);
+        previous = values.formattedValue;
+        if (isInputFocused(el)) {
+          const next = resolveCaret(values, digits, opts);
+          setInputSelection(el, next, next);
+        }
+        if (IS_JSDOM) {
+          queueMicrotask(() => {
+            if (el.value !== values.formattedValue) return;
+            el.value = values.formattedValue;
+            if (isInputFocused(el)) {
+              const c = resolveCaret(values, digits, opts);
+              setInputSelection(el, c, c);
+            }
+          });
+        }
+        (_c = opts.onValueChange) == null ? void 0 : _c.call(opts, values);
+      };
+      el.addEventListener("input", handler);
+      handlerRef.current = handler;
+      inputRef.current = el;
+      if (el.value) {
+        setNativeValue(el, formatTime(el.value, optionsRef.current));
+        previous = formatTime(el.value, optionsRef.current);
+      }
+    } else {
+      if (inputRef.current && handlerRef.current) {
+        inputRef.current.removeEventListener("input", handlerRef.current);
+      }
+      inputRef.current = null;
+      handlerRef.current = null;
+    }
+  }, []);
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  TimeFormat,
+  formatTime,
+  parseTime,
+  useTimeFormat
+});
+//# sourceMappingURL=time.cjs.map

package/dist/time.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/time/index.ts","../src/time/time-format.tsx","../src/time/format-time.ts","../src/time/parse-time.ts","../src/utils/input.ts","../src/time/use-time-format.ts","../src/set-native-value.ts"],"sourcesContent":["export { TimeFormat } from \"./time-format\";\nexport type { TimeFormatProps } from \"./time-format\";\nexport { useTimeFormat } from \"./use-time-format\";\nexport type { UseTimeFormatOptions } from \"./use-time-format\";\nexport { formatTime } from \"./format-time\";\nexport { parseTime } from \"./parse-time\";\nexport type { TimeFormatOptions, TimeFormatValues } from \"./types\";\n","import React, { forwardRef, useLayoutEffect, useReducer, useRef } from \"react\";\nimport type { TimeFormatOptions, TimeFormatValues } from \"./types\";\nimport { formatTime } from \"./format-time\";\nimport {\n  collapseTrailingSeparator,\n  parseTime,\n  digitsBeforeCaret,\n  resolveCaret,\n} from \"./parse-time\";\nimport { isInputFocused, setInputSelection } from \"../utils/input\";\n\nexport interface TimeFormatProps\n  extends TimeFormatOptions,\n    Omit<React.InputHTMLAttributes<HTMLInputElement>, \"value\" | \"onChange\"> {\n  value?: string;\n  onValueChange?: (values: TimeFormatValues) => void;\n}\n\nexport const TimeFormat = forwardRef<HTMLInputElement, TimeFormatProps>(function TimeFormat(\n  props,\n  forwardedRef\n) {\n  const { value = \"\", onValueChange, separator, ...domProps } = props;\n  const options: TimeFormatOptions = { separator };\n\n  const innerRef = useRef<HTMLInputElement | null>(null);\n  const caretRef = useRef<number | null>(null);\n  const lastValuesRef = useRef<TimeFormatValues | null>(null);\n\n  const [, forceUpdate] = useReducer((n: number) => n + 1, 0);\n\n  const last = lastValuesRef.current;\n  const formatted =\n    last !== null && (value === last.value || value === last.formattedValue)\n      ? last.formattedValue\n      : formatTime(value ?? \"\", options);\n\n  function handleChange(event: React.ChangeEvent<HTMLInputElement>): void {\n    const el = event.target;\n    const caret = el.selectionStart ?? el.value.length;\n    const raw = collapseTrailingSeparator(el.value, formatted, options.separator ?? \":\");\n    const digits = digitsBeforeCaret(raw, caret);\n    const values = parseTime(raw, options);\n    caretRef.current = resolveCaret(values, digits, options);\n    lastValuesRef.current = values;\n    forceUpdate();\n    onValueChange?.(values);\n  }\n\n  useLayoutEffect(() => {\n    const el = innerRef.current;\n    if (el && caretRef.current !== null && isInputFocused(el)) {\n      setInputSelection(el, caretRef.current, caretRef.current);\n      caretRef.current = null;\n    }\n  });\n\n  function setRef(el: HTMLInputElement | null): void {\n    innerRef.current = el;\n    if (typeof forwardedRef === \"function\") forwardedRef(el);\n    else if (forwardedRef)\n      (forwardedRef as React.MutableRefObject<HTMLInputElement | null>).current = el;\n  }\n\n  return <input {...domProps} ref={setRef} value={formatted} onChange={handleChange} />;\n});\n\nTimeFormat.displayName = \"TimeFormat\";\n","import type { TimeFormatOptions } from \"./types\";\n\nexport interface TimeParts {\n  hours: string;\n  minutes: string;\n}\n\nexport function tokenizeTime(raw: string | number): TimeParts {\n  const digits = String(raw ?? \"\").replace(/\\D/g, \"\").slice(0, 4);\n  let hours = digits.slice(0, 2);\n  let minutes = digits.slice(2, 4);\n  if (hours.length === 2) {\n    hours = String(Math.min(parseInt(hours, 10), 23)).padStart(2, \"0\");\n  }\n  if (minutes.length === 2) {\n    minutes = String(Math.min(parseInt(minutes, 10), 59)).padStart(2, \"0\");\n  }\n  return { hours, minutes };\n}\n\nexport function buildFormatted(parts: TimeParts, separator: string): string {\n  const { hours, minutes } = parts;\n  if (hours === \"\") return \"\";\n  if (hours.length < 2) return hours;\n  if (minutes === \"\") return hours + separator;\n  return hours + separator + minutes;\n}\n\nexport function formatTime(input: string | number, options?: TimeFormatOptions): string {\n  const separator = options?.separator ?? \":\";\n  return buildFormatted(tokenizeTime(input), separator);\n}\n","import type { TimeFormatOptions, TimeFormatValues } from \"./types\";\nimport { tokenizeTime, buildFormatted } from \"./format-time\";\n\nexport function collapseTrailingSeparator(\n  raw: string,\n  previous: string,\n  separator: string\n): string {\n  return previous.endsWith(separator) && raw === previous.slice(0, -separator.length)\n    ? raw.slice(0, -1)\n    : raw;\n}\n\nexport function parseTime(formatted: string, options?: TimeFormatOptions): TimeFormatValues {\n  const separator = options?.separator ?? \":\";\n  const parts = tokenizeTime(formatted);\n  const formattedValue = buildFormatted(parts, separator);\n  const hours = parts.hours.length === 2 ? parseInt(parts.hours, 10) : undefined;\n  const minutes = parts.minutes.length === 2 ? parseInt(parts.minutes, 10) : undefined;\n  const value =\n    hours !== undefined && minutes !== undefined ? `${parts.hours}:${parts.minutes}` : \"\";\n  return { value, formattedValue, hours, minutes };\n}\n\nexport function digitsBeforeCaret(value: string, caret: number): number {\n  let count = 0;\n  for (let i = 0; i < caret && i < value.length; i++) {\n    if (value[i] >= \"0\" && value[i] <= \"9\") count++;\n  }\n  return count;\n}\n\nfunction caretAfterDigits(formatted: string, digitsBefore: number): number {\n  if (digitsBefore <= 0) {\n    const first = formatted.search(/\\d/);\n    return first === -1 ? formatted.length : first;\n  }\n  let seen = 0;\n  for (let i = 0; i < formatted.length; i++) {\n    if (formatted[i] >= \"0\" && formatted[i] <= \"9\") {\n      seen++;\n      if (seen === digitsBefore) return i + 1;\n    }\n  }\n  return formatted.length;\n}\n\nexport function resolveCaret(\n  values: TimeFormatValues,\n  digitsBefore: number,\n  options?: TimeFormatOptions\n): number {\n  const separator = options?.separator ?? \":\";\n  const caret = caretAfterDigits(values.formattedValue, digitsBefore);\n  if (separator && values.formattedValue.slice(caret, caret + separator.length) === separator) {\n    return caret + separator.length;\n  }\n  return caret;\n}\n","import type { Selection } from \"../types\";\n\nexport function setInputSelection(\n  input: HTMLInputElement,\n  start: number,\n  end?: number\n): void {\n  if (end === undefined) {\n    end = start;\n  }\n  input.setSelectionRange(start, end);\n}\n\nexport function getInputSelection(input: HTMLInputElement): Required<Selection> {\n  const start = input.selectionStart;\n  const end = input.selectionEnd;\n\n  return {\n    start,\n    end,\n    length: (end ?? 0) - (start ?? 0)\n  };\n}\n\nexport function isInputFocused(input: HTMLInputElement): boolean {\n  const inputDocument = input.ownerDocument;\n  return inputDocument.hasFocus() && inputDocument.activeElement === input;\n}\n","import { useRef, useCallback } from \"react\";\nimport type React from \"react\";\nimport type { TimeFormatValues } from \"./types\";\nimport type { TimeFormatOptions } from \"./types\";\nimport { formatTime } from \"./format-time\";\nimport {\n  collapseTrailingSeparator,\n  parseTime,\n  digitsBeforeCaret,\n  resolveCaret,\n} from \"./parse-time\";\nimport { setNativeValue } from \"../set-native-value\";\nimport { isInputFocused, setInputSelection } from \"../utils/input\";\n\nexport interface UseTimeFormatOptions extends TimeFormatOptions {\n  onValueChange?: (values: TimeFormatValues) => void;\n}\n\nconst IS_JSDOM =\n  typeof navigator !== \"undefined\" && navigator.userAgent.includes(\"jsdom\");\n\nexport function useTimeFormat(\n  options: UseTimeFormatOptions\n): React.RefCallback<HTMLInputElement> {\n  const optionsRef = useRef(options);\n  optionsRef.current = options;\n\n  const inputRef = useRef<HTMLInputElement | null>(null);\n  const handlerRef = useRef<((event: Event) => void) | null>(null);\n\n  return useCallback((el: HTMLInputElement | null) => {\n    if (el) {\n      let previous = el.value;\n      const handler = (): void => {\n        const opts = optionsRef.current;\n        const caret = el.selectionStart ?? el.value.length;\n        const raw = collapseTrailingSeparator(el.value, previous, opts.separator ?? \":\");\n        const digits = digitsBeforeCaret(raw, caret);\n        const values = parseTime(raw, opts);\n        setNativeValue(el, values.formattedValue);\n        previous = values.formattedValue;\n        if (isInputFocused(el)) {\n          const next = resolveCaret(values, digits, opts);\n          setInputSelection(el, next, next);\n        }\n        // JSDOM-ONLY: resync @testing-library/user-event v14's shadow-value cache.\n        // setNativeValue above bypasses React's value tracker; under jsdom that\n        // leaves user-event's per-input shadow value stale, corrupting masking from\n        // ~the 4th keystroke. A plain (idempotent) reassignment resyncs it.\n        // MUST NOT run in a real browser: there, microtasks drain BETWEEN event\n        // listeners, so this write would fight React; real browsers read the live\n        // DOM and need no resync. onValueChange (below) is called directly, not via\n        // React's tracker, so it is unaffected in either environment.\n        if (IS_JSDOM) {\n          queueMicrotask(() => {\n            if (el.value !== values.formattedValue) return;\n            el.value = values.formattedValue;\n            if (isInputFocused(el)) {\n              const c = resolveCaret(values, digits, opts);\n              setInputSelection(el, c, c);\n            }\n          });\n        }\n        opts.onValueChange?.(values);\n      };\n      el.addEventListener(\"input\", handler);\n      handlerRef.current = handler;\n      inputRef.current = el;\n      if (el.value) {\n        setNativeValue(el, formatTime(el.value, optionsRef.current));\n        previous = formatTime(el.value, optionsRef.current);\n      }\n    } else {\n      if (inputRef.current && handlerRef.current) {\n        inputRef.current.removeEventListener(\"input\", handlerRef.current);\n      }\n      inputRef.current = null;\n      handlerRef.current = null;\n    }\n  }, []);\n}\n","// Write to input.value through the native prototype setter so React's\n// internal value tracker stays stale. The user's keystroke `input` event then\n// bubbles into React's root listener, which sees masked value != stale tracker\n// and fires the consumer's onChange with the masked value. Using the tracked\n// (React-wrapped) setter instead would suppress that onChange.\nexport function setNativeValue(input: HTMLInputElement, value: string): void {\n  const descriptor = Object.getOwnPropertyDescriptor(\n    HTMLInputElement.prototype,\n    \"value\"\n  );\n  const setter = descriptor && descriptor.set;\n  if (setter) {\n    setter.call(input, value);\n  } else {\n    input.value = value;\n  }\n}\n"],"mappings":"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","names":["TimeFormat","React","import_react"]}

package/dist/time.d.cts

@@ -0,0 +1,28 @@
+import React__default from 'react';
+
+interface TimeFormatOptions {
+    separator?: string;
+}
+interface TimeFormatValues {
+    value: string;
+    formattedValue: string;
+    hours: number | undefined;
+    minutes: number | undefined;
+}
+
+interface TimeFormatProps extends TimeFormatOptions, Omit<React__default.InputHTMLAttributes<HTMLInputElement>, "value" | "onChange"> {
+    value?: string;
+    onValueChange?: (values: TimeFormatValues) => void;
+}
+declare const TimeFormat: React__default.ForwardRefExoticComponent<TimeFormatProps & React__default.RefAttributes<HTMLInputElement>>;
+
+interface UseTimeFormatOptions extends TimeFormatOptions {
+    onValueChange?: (values: TimeFormatValues) => void;
+}
+declare function useTimeFormat(options: UseTimeFormatOptions): React__default.RefCallback<HTMLInputElement>;
+
+declare function formatTime(input: string | number, options?: TimeFormatOptions): string;
+
+declare function parseTime(formatted: string, options?: TimeFormatOptions): TimeFormatValues;
+
+export { TimeFormat, type TimeFormatOptions, type TimeFormatProps, type TimeFormatValues, type UseTimeFormatOptions, formatTime, parseTime, useTimeFormat };

package/dist/time.d.ts

@@ -0,0 +1,28 @@
+import React__default from 'react';
+
+interface TimeFormatOptions {
+    separator?: string;
+}
+interface TimeFormatValues {
+    value: string;
+    formattedValue: string;
+    hours: number | undefined;
+    minutes: number | undefined;
+}
+
+interface TimeFormatProps extends TimeFormatOptions, Omit<React__default.InputHTMLAttributes<HTMLInputElement>, "value" | "onChange"> {
+    value?: string;
+    onValueChange?: (values: TimeFormatValues) => void;
+}
+declare const TimeFormat: React__default.ForwardRefExoticComponent<TimeFormatProps & React__default.RefAttributes<HTMLInputElement>>;
+
+interface UseTimeFormatOptions extends TimeFormatOptions {
+    onValueChange?: (values: TimeFormatValues) => void;
+}
+declare function useTimeFormat(options: UseTimeFormatOptions): React__default.RefCallback<HTMLInputElement>;
+
+declare function formatTime(input: string | number, options?: TimeFormatOptions): string;
+
+declare function parseTime(formatted: string, options?: TimeFormatOptions): TimeFormatValues;
+
+export { TimeFormat, type TimeFormatOptions, type TimeFormatProps, type TimeFormatValues, type UseTimeFormatOptions, formatTime, parseTime, useTimeFormat };

package/dist/time.js

@@ -0,0 +1,178 @@
+import {
+  isInputFocused,
+  setInputSelection,
+  setNativeValue
+} from "./chunk-CEZXZ7IJ.js";
+
+// src/time/time-format.tsx
+import React, { forwardRef, useLayoutEffect, useReducer, useRef } from "react";
+
+// src/time/format-time.ts
+function tokenizeTime(raw) {
+  const digits = String(raw != null ? raw : "").replace(/\D/g, "").slice(0, 4);
+  let hours = digits.slice(0, 2);
+  let minutes = digits.slice(2, 4);
+  if (hours.length === 2) {
+    hours = String(Math.min(parseInt(hours, 10), 23)).padStart(2, "0");
+  }
+  if (minutes.length === 2) {
+    minutes = String(Math.min(parseInt(minutes, 10), 59)).padStart(2, "0");
+  }
+  return { hours, minutes };
+}
+function buildFormatted(parts, separator) {
+  const { hours, minutes } = parts;
+  if (hours === "") return "";
+  if (hours.length < 2) return hours;
+  if (minutes === "") return hours + separator;
+  return hours + separator + minutes;
+}
+function formatTime(input, options) {
+  var _a;
+  const separator = (_a = options == null ? void 0 : options.separator) != null ? _a : ":";
+  return buildFormatted(tokenizeTime(input), separator);
+}
+
+// src/time/parse-time.ts
+function collapseTrailingSeparator(raw, previous, separator) {
+  return previous.endsWith(separator) && raw === previous.slice(0, -separator.length) ? raw.slice(0, -1) : raw;
+}
+function parseTime(formatted, options) {
+  var _a;
+  const separator = (_a = options == null ? void 0 : options.separator) != null ? _a : ":";
+  const parts = tokenizeTime(formatted);
+  const formattedValue = buildFormatted(parts, separator);
+  const hours = parts.hours.length === 2 ? parseInt(parts.hours, 10) : void 0;
+  const minutes = parts.minutes.length === 2 ? parseInt(parts.minutes, 10) : void 0;
+  const value = hours !== void 0 && minutes !== void 0 ? `${parts.hours}:${parts.minutes}` : "";
+  return { value, formattedValue, hours, minutes };
+}
+function digitsBeforeCaret(value, caret) {
+  let count = 0;
+  for (let i = 0; i < caret && i < value.length; i++) {
+    if (value[i] >= "0" && value[i] <= "9") count++;
+  }
+  return count;
+}
+function caretAfterDigits(formatted, digitsBefore) {
+  if (digitsBefore <= 0) {
+    const first = formatted.search(/\d/);
+    return first === -1 ? formatted.length : first;
+  }
+  let seen = 0;
+  for (let i = 0; i < formatted.length; i++) {
+    if (formatted[i] >= "0" && formatted[i] <= "9") {
+      seen++;
+      if (seen === digitsBefore) return i + 1;
+    }
+  }
+  return formatted.length;
+}
+function resolveCaret(values, digitsBefore, options) {
+  var _a;
+  const separator = (_a = options == null ? void 0 : options.separator) != null ? _a : ":";
+  const caret = caretAfterDigits(values.formattedValue, digitsBefore);
+  if (separator && values.formattedValue.slice(caret, caret + separator.length) === separator) {
+    return caret + separator.length;
+  }
+  return caret;
+}
+
+// src/time/time-format.tsx
+var TimeFormat = forwardRef(function TimeFormat2(props, forwardedRef) {
+  const { value = "", onValueChange, separator, ...domProps } = props;
+  const options = { separator };
+  const innerRef = useRef(null);
+  const caretRef = useRef(null);
+  const lastValuesRef = useRef(null);
+  const [, forceUpdate] = useReducer((n) => n + 1, 0);
+  const last = lastValuesRef.current;
+  const formatted = last !== null && (value === last.value || value === last.formattedValue) ? last.formattedValue : formatTime(value != null ? value : "", options);
+  function handleChange(event) {
+    var _a, _b;
+    const el = event.target;
+    const caret = (_a = el.selectionStart) != null ? _a : el.value.length;
+    const raw = collapseTrailingSeparator(el.value, formatted, (_b = options.separator) != null ? _b : ":");
+    const digits = digitsBeforeCaret(raw, caret);
+    const values = parseTime(raw, options);
+    caretRef.current = resolveCaret(values, digits, options);
+    lastValuesRef.current = values;
+    forceUpdate();
+    onValueChange == null ? void 0 : onValueChange(values);
+  }
+  useLayoutEffect(() => {
+    const el = innerRef.current;
+    if (el && caretRef.current !== null && isInputFocused(el)) {
+      setInputSelection(el, caretRef.current, caretRef.current);
+      caretRef.current = null;
+    }
+  });
+  function setRef(el) {
+    innerRef.current = el;
+    if (typeof forwardedRef === "function") forwardedRef(el);
+    else if (forwardedRef)
+      forwardedRef.current = el;
+  }
+  return /* @__PURE__ */ React.createElement("input", { ...domProps, ref: setRef, value: formatted, onChange: handleChange });
+});
+TimeFormat.displayName = "TimeFormat";
+
+// src/time/use-time-format.ts
+import { useRef as useRef2, useCallback } from "react";
+var IS_JSDOM = typeof navigator !== "undefined" && navigator.userAgent.includes("jsdom");
+function useTimeFormat(options) {
+  const optionsRef = useRef2(options);
+  optionsRef.current = options;
+  const inputRef = useRef2(null);
+  const handlerRef = useRef2(null);
+  return useCallback((el) => {
+    if (el) {
+      let previous = el.value;
+      const handler = () => {
+        var _a, _b, _c;
+        const opts = optionsRef.current;
+        const caret = (_a = el.selectionStart) != null ? _a : el.value.length;
+        const raw = collapseTrailingSeparator(el.value, previous, (_b = opts.separator) != null ? _b : ":");
+        const digits = digitsBeforeCaret(raw, caret);
+        const values = parseTime(raw, opts);
+        setNativeValue(el, values.formattedValue);
+        previous = values.formattedValue;
+        if (isInputFocused(el)) {
+          const next = resolveCaret(values, digits, opts);
+          setInputSelection(el, next, next);
+        }
+        if (IS_JSDOM) {
+          queueMicrotask(() => {
+            if (el.value !== values.formattedValue) return;
+            el.value = values.formattedValue;
+            if (isInputFocused(el)) {
+              const c = resolveCaret(values, digits, opts);
+              setInputSelection(el, c, c);
+            }
+          });
+        }
+        (_c = opts.onValueChange) == null ? void 0 : _c.call(opts, values);
+      };
+      el.addEventListener("input", handler);
+      handlerRef.current = handler;
+      inputRef.current = el;
+      if (el.value) {
+        setNativeValue(el, formatTime(el.value, optionsRef.current));
+        previous = formatTime(el.value, optionsRef.current);
+      }
+    } else {
+      if (inputRef.current && handlerRef.current) {
+        inputRef.current.removeEventListener("input", handlerRef.current);
+      }
+      inputRef.current = null;
+      handlerRef.current = null;
+    }
+  }, []);
+}
+export {
+  TimeFormat,
+  formatTime,
+  parseTime,
+  useTimeFormat
+};
+//# sourceMappingURL=time.js.map

package/dist/time.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/time/time-format.tsx","../src/time/format-time.ts","../src/time/parse-time.ts","../src/time/use-time-format.ts"],"sourcesContent":["import React, { forwardRef, useLayoutEffect, useReducer, useRef } from \"react\";\nimport type { TimeFormatOptions, TimeFormatValues } from \"./types\";\nimport { formatTime } from \"./format-time\";\nimport {\n  collapseTrailingSeparator,\n  parseTime,\n  digitsBeforeCaret,\n  resolveCaret,\n} from \"./parse-time\";\nimport { isInputFocused, setInputSelection } from \"../utils/input\";\n\nexport interface TimeFormatProps\n  extends TimeFormatOptions,\n    Omit<React.InputHTMLAttributes<HTMLInputElement>, \"value\" | \"onChange\"> {\n  value?: string;\n  onValueChange?: (values: TimeFormatValues) => void;\n}\n\nexport const TimeFormat = forwardRef<HTMLInputElement, TimeFormatProps>(function TimeFormat(\n  props,\n  forwardedRef\n) {\n  const { value = \"\", onValueChange, separator, ...domProps } = props;\n  const options: TimeFormatOptions = { separator };\n\n  const innerRef = useRef<HTMLInputElement | null>(null);\n  const caretRef = useRef<number | null>(null);\n  const lastValuesRef = useRef<TimeFormatValues | null>(null);\n\n  const [, forceUpdate] = useReducer((n: number) => n + 1, 0);\n\n  const last = lastValuesRef.current;\n  const formatted =\n    last !== null && (value === last.value || value === last.formattedValue)\n      ? last.formattedValue\n      : formatTime(value ?? \"\", options);\n\n  function handleChange(event: React.ChangeEvent<HTMLInputElement>): void {\n    const el = event.target;\n    const caret = el.selectionStart ?? el.value.length;\n    const raw = collapseTrailingSeparator(el.value, formatted, options.separator ?? \":\");\n    const digits = digitsBeforeCaret(raw, caret);\n    const values = parseTime(raw, options);\n    caretRef.current = resolveCaret(values, digits, options);\n    lastValuesRef.current = values;\n    forceUpdate();\n    onValueChange?.(values);\n  }\n\n  useLayoutEffect(() => {\n    const el = innerRef.current;\n    if (el && caretRef.current !== null && isInputFocused(el)) {\n      setInputSelection(el, caretRef.current, caretRef.current);\n      caretRef.current = null;\n    }\n  });\n\n  function setRef(el: HTMLInputElement | null): void {\n    innerRef.current = el;\n    if (typeof forwardedRef === \"function\") forwardedRef(el);\n    else if (forwardedRef)\n      (forwardedRef as React.MutableRefObject<HTMLInputElement | null>).current = el;\n  }\n\n  return <input {...domProps} ref={setRef} value={formatted} onChange={handleChange} />;\n});\n\nTimeFormat.displayName = \"TimeFormat\";\n","import type { TimeFormatOptions } from \"./types\";\n\nexport interface TimeParts {\n  hours: string;\n  minutes: string;\n}\n\nexport function tokenizeTime(raw: string | number): TimeParts {\n  const digits = String(raw ?? \"\").replace(/\\D/g, \"\").slice(0, 4);\n  let hours = digits.slice(0, 2);\n  let minutes = digits.slice(2, 4);\n  if (hours.length === 2) {\n    hours = String(Math.min(parseInt(hours, 10), 23)).padStart(2, \"0\");\n  }\n  if (minutes.length === 2) {\n    minutes = String(Math.min(parseInt(minutes, 10), 59)).padStart(2, \"0\");\n  }\n  return { hours, minutes };\n}\n\nexport function buildFormatted(parts: TimeParts, separator: string): string {\n  const { hours, minutes } = parts;\n  if (hours === \"\") return \"\";\n  if (hours.length < 2) return hours;\n  if (minutes === \"\") return hours + separator;\n  return hours + separator + minutes;\n}\n\nexport function formatTime(input: string | number, options?: TimeFormatOptions): string {\n  const separator = options?.separator ?? \":\";\n  return buildFormatted(tokenizeTime(input), separator);\n}\n","import type { TimeFormatOptions, TimeFormatValues } from \"./types\";\nimport { tokenizeTime, buildFormatted } from \"./format-time\";\n\nexport function collapseTrailingSeparator(\n  raw: string,\n  previous: string,\n  separator: string\n): string {\n  return previous.endsWith(separator) && raw === previous.slice(0, -separator.length)\n    ? raw.slice(0, -1)\n    : raw;\n}\n\nexport function parseTime(formatted: string, options?: TimeFormatOptions): TimeFormatValues {\n  const separator = options?.separator ?? \":\";\n  const parts = tokenizeTime(formatted);\n  const formattedValue = buildFormatted(parts, separator);\n  const hours = parts.hours.length === 2 ? parseInt(parts.hours, 10) : undefined;\n  const minutes = parts.minutes.length === 2 ? parseInt(parts.minutes, 10) : undefined;\n  const value =\n    hours !== undefined && minutes !== undefined ? `${parts.hours}:${parts.minutes}` : \"\";\n  return { value, formattedValue, hours, minutes };\n}\n\nexport function digitsBeforeCaret(value: string, caret: number): number {\n  let count = 0;\n  for (let i = 0; i < caret && i < value.length; i++) {\n    if (value[i] >= \"0\" && value[i] <= \"9\") count++;\n  }\n  return count;\n}\n\nfunction caretAfterDigits(formatted: string, digitsBefore: number): number {\n  if (digitsBefore <= 0) {\n    const first = formatted.search(/\\d/);\n    return first === -1 ? formatted.length : first;\n  }\n  let seen = 0;\n  for (let i = 0; i < formatted.length; i++) {\n    if (formatted[i] >= \"0\" && formatted[i] <= \"9\") {\n      seen++;\n      if (seen === digitsBefore) return i + 1;\n    }\n  }\n  return formatted.length;\n}\n\nexport function resolveCaret(\n  values: TimeFormatValues,\n  digitsBefore: number,\n  options?: TimeFormatOptions\n): number {\n  const separator = options?.separator ?? \":\";\n  const caret = caretAfterDigits(values.formattedValue, digitsBefore);\n  if (separator && values.formattedValue.slice(caret, caret + separator.length) === separator) {\n    return caret + separator.length;\n  }\n  return caret;\n}\n","import { useRef, useCallback } from \"react\";\nimport type React from \"react\";\nimport type { TimeFormatValues } from \"./types\";\nimport type { TimeFormatOptions } from \"./types\";\nimport { formatTime } from \"./format-time\";\nimport {\n  collapseTrailingSeparator,\n  parseTime,\n  digitsBeforeCaret,\n  resolveCaret,\n} from \"./parse-time\";\nimport { setNativeValue } from \"../set-native-value\";\nimport { isInputFocused, setInputSelection } from \"../utils/input\";\n\nexport interface UseTimeFormatOptions extends TimeFormatOptions {\n  onValueChange?: (values: TimeFormatValues) => void;\n}\n\nconst IS_JSDOM =\n  typeof navigator !== \"undefined\" && navigator.userAgent.includes(\"jsdom\");\n\nexport function useTimeFormat(\n  options: UseTimeFormatOptions\n): React.RefCallback<HTMLInputElement> {\n  const optionsRef = useRef(options);\n  optionsRef.current = options;\n\n  const inputRef = useRef<HTMLInputElement | null>(null);\n  const handlerRef = useRef<((event: Event) => void) | null>(null);\n\n  return useCallback((el: HTMLInputElement | null) => {\n    if (el) {\n      let previous = el.value;\n      const handler = (): void => {\n        const opts = optionsRef.current;\n        const caret = el.selectionStart ?? el.value.length;\n        const raw = collapseTrailingSeparator(el.value, previous, opts.separator ?? \":\");\n        const digits = digitsBeforeCaret(raw, caret);\n        const values = parseTime(raw, opts);\n        setNativeValue(el, values.formattedValue);\n        previous = values.formattedValue;\n        if (isInputFocused(el)) {\n          const next = resolveCaret(values, digits, opts);\n          setInputSelection(el, next, next);\n        }\n        // JSDOM-ONLY: resync @testing-library/user-event v14's shadow-value cache.\n        // setNativeValue above bypasses React's value tracker; under jsdom that\n        // leaves user-event's per-input shadow value stale, corrupting masking from\n        // ~the 4th keystroke. A plain (idempotent) reassignment resyncs it.\n        // MUST NOT run in a real browser: there, microtasks drain BETWEEN event\n        // listeners, so this write would fight React; real browsers read the live\n        // DOM and need no resync. onValueChange (below) is called directly, not via\n        // React's tracker, so it is unaffected in either environment.\n        if (IS_JSDOM) {\n          queueMicrotask(() => {\n            if (el.value !== values.formattedValue) return;\n            el.value = values.formattedValue;\n            if (isInputFocused(el)) {\n              const c = resolveCaret(values, digits, opts);\n              setInputSelection(el, c, c);\n            }\n          });\n        }\n        opts.onValueChange?.(values);\n      };\n      el.addEventListener(\"input\", handler);\n      handlerRef.current = handler;\n      inputRef.current = el;\n      if (el.value) {\n        setNativeValue(el, formatTime(el.value, optionsRef.current));\n        previous = formatTime(el.value, optionsRef.current);\n      }\n    } else {\n      if (inputRef.current && handlerRef.current) {\n        inputRef.current.removeEventListener(\"input\", handlerRef.current);\n      }\n      inputRef.current = null;\n      handlerRef.current = null;\n    }\n  }, []);\n}\n"],"mappings":";;;;;;;AAAA,OAAO,SAAS,YAAY,iBAAiB,YAAY,cAAc;;;ACOhE,SAAS,aAAa,KAAiC;AAC5D,QAAM,SAAS,OAAO,oBAAO,EAAE,EAAE,QAAQ,OAAO,EAAE,EAAE,MAAM,GAAG,CAAC;AAC9D,MAAI,QAAQ,OAAO,MAAM,GAAG,CAAC;AAC7B,MAAI,UAAU,OAAO,MAAM,GAAG,CAAC;AAC/B,MAAI,MAAM,WAAW,GAAG;AACtB,YAAQ,OAAO,KAAK,IAAI,SAAS,OAAO,EAAE,GAAG,EAAE,CAAC,EAAE,SAAS,GAAG,GAAG;AAAA,EACnE;AACA,MAAI,QAAQ,WAAW,GAAG;AACxB,cAAU,OAAO,KAAK,IAAI,SAAS,SAAS,EAAE,GAAG,EAAE,CAAC,EAAE,SAAS,GAAG,GAAG;AAAA,EACvE;AACA,SAAO,EAAE,OAAO,QAAQ;AAC1B;AAEO,SAAS,eAAe,OAAkB,WAA2B;AAC1E,QAAM,EAAE,OAAO,QAAQ,IAAI;AAC3B,MAAI,UAAU,GAAI,QAAO;AACzB,MAAI,MAAM,SAAS,EAAG,QAAO;AAC7B,MAAI,YAAY,GAAI,QAAO,QAAQ;AACnC,SAAO,QAAQ,YAAY;AAC7B;AAEO,SAAS,WAAW,OAAwB,SAAqC;AA5BxF;AA6BE,QAAM,aAAY,wCAAS,cAAT,YAAsB;AACxC,SAAO,eAAe,aAAa,KAAK,GAAG,SAAS;AACtD;;;AC5BO,SAAS,0BACd,KACA,UACA,WACQ;AACR,SAAO,SAAS,SAAS,SAAS,KAAK,QAAQ,SAAS,MAAM,GAAG,CAAC,UAAU,MAAM,IAC9E,IAAI,MAAM,GAAG,EAAE,IACf;AACN;AAEO,SAAS,UAAU,WAAmB,SAA+C;AAb5F;AAcE,QAAM,aAAY,wCAAS,cAAT,YAAsB;AACxC,QAAM,QAAQ,aAAa,SAAS;AACpC,QAAM,iBAAiB,eAAe,OAAO,SAAS;AACtD,QAAM,QAAQ,MAAM,MAAM,WAAW,IAAI,SAAS,MAAM,OAAO,EAAE,IAAI;AACrE,QAAM,UAAU,MAAM,QAAQ,WAAW,IAAI,SAAS,MAAM,SAAS,EAAE,IAAI;AAC3E,QAAM,QACJ,UAAU,UAAa,YAAY,SAAY,GAAG,MAAM,KAAK,IAAI,MAAM,OAAO,KAAK;AACrF,SAAO,EAAE,OAAO,gBAAgB,OAAO,QAAQ;AACjD;AAEO,SAAS,kBAAkB,OAAe,OAAuB;AACtE,MAAI,QAAQ;AACZ,WAAS,IAAI,GAAG,IAAI,SAAS,IAAI,MAAM,QAAQ,KAAK;AAClD,QAAI,MAAM,CAAC,KAAK,OAAO,MAAM,CAAC,KAAK,IAAK;AAAA,EAC1C;AACA,SAAO;AACT;AAEA,SAAS,iBAAiB,WAAmB,cAA8B;AACzE,MAAI,gBAAgB,GAAG;AACrB,UAAM,QAAQ,UAAU,OAAO,IAAI;AACnC,WAAO,UAAU,KAAK,UAAU,SAAS;AAAA,EAC3C;AACA,MAAI,OAAO;AACX,WAAS,IAAI,GAAG,IAAI,UAAU,QAAQ,KAAK;AACzC,QAAI,UAAU,CAAC,KAAK,OAAO,UAAU,CAAC,KAAK,KAAK;AAC9C;AACA,UAAI,SAAS,aAAc,QAAO,IAAI;AAAA,IACxC;AAAA,EACF;AACA,SAAO,UAAU;AACnB;AAEO,SAAS,aACd,QACA,cACA,SACQ;AAnDV;AAoDE,QAAM,aAAY,wCAAS,cAAT,YAAsB;AACxC,QAAM,QAAQ,iBAAiB,OAAO,gBAAgB,YAAY;AAClE,MAAI,aAAa,OAAO,eAAe,MAAM,OAAO,QAAQ,UAAU,MAAM,MAAM,WAAW;AAC3F,WAAO,QAAQ,UAAU;AAAA,EAC3B;AACA,SAAO;AACT;;;AFxCO,IAAM,aAAa,WAA8C,SAASA,YAC/E,OACA,cACA;AACA,QAAM,EAAE,QAAQ,IAAI,eAAe,WAAW,GAAG,SAAS,IAAI;AAC9D,QAAM,UAA6B,EAAE,UAAU;AAE/C,QAAM,WAAW,OAAgC,IAAI;AACrD,QAAM,WAAW,OAAsB,IAAI;AAC3C,QAAM,gBAAgB,OAAgC,IAAI;AAE1D,QAAM,CAAC,EAAE,WAAW,IAAI,WAAW,CAAC,MAAc,IAAI,GAAG,CAAC;AAE1D,QAAM,OAAO,cAAc;AAC3B,QAAM,YACJ,SAAS,SAAS,UAAU,KAAK,SAAS,UAAU,KAAK,kBACrD,KAAK,iBACL,WAAW,wBAAS,IAAI,OAAO;AAErC,WAAS,aAAa,OAAkD;AArC1E;AAsCI,UAAM,KAAK,MAAM;AACjB,UAAM,SAAQ,QAAG,mBAAH,YAAqB,GAAG,MAAM;AAC5C,UAAM,MAAM,0BAA0B,GAAG,OAAO,YAAW,aAAQ,cAAR,YAAqB,GAAG;AACnF,UAAM,SAAS,kBAAkB,KAAK,KAAK;AAC3C,UAAM,SAAS,UAAU,KAAK,OAAO;AACrC,aAAS,UAAU,aAAa,QAAQ,QAAQ,OAAO;AACvD,kBAAc,UAAU;AACxB,gBAAY;AACZ,mDAAgB;AAAA,EAClB;AAEA,kBAAgB,MAAM;AACpB,UAAM,KAAK,SAAS;AACpB,QAAI,MAAM,SAAS,YAAY,QAAQ,eAAe,EAAE,GAAG;AACzD,wBAAkB,IAAI,SAAS,SAAS,SAAS,OAAO;AACxD,eAAS,UAAU;AAAA,IACrB;AAAA,EACF,CAAC;AAED,WAAS,OAAO,IAAmC;AACjD,aAAS,UAAU;AACnB,QAAI,OAAO,iBAAiB,WAAY,cAAa,EAAE;AAAA,aAC9C;AACP,MAAC,aAAiE,UAAU;AAAA,EAChF;AAEA,SAAO,oCAAC,WAAO,GAAG,UAAU,KAAK,QAAQ,OAAO,WAAW,UAAU,cAAc;AACrF,CAAC;AAED,WAAW,cAAc;;;AGnEzB,SAAS,UAAAC,SAAQ,mBAAmB;AAkBpC,IAAM,WACJ,OAAO,cAAc,eAAe,UAAU,UAAU,SAAS,OAAO;AAEnE,SAAS,cACd,SACqC;AACrC,QAAM,aAAaC,QAAO,OAAO;AACjC,aAAW,UAAU;AAErB,QAAM,WAAWA,QAAgC,IAAI;AACrD,QAAM,aAAaA,QAAwC,IAAI;AAE/D,SAAO,YAAY,CAAC,OAAgC;AAClD,QAAI,IAAI;AACN,UAAI,WAAW,GAAG;AAClB,YAAM,UAAU,MAAY;AAjClC;AAkCQ,cAAM,OAAO,WAAW;AACxB,cAAM,SAAQ,QAAG,mBAAH,YAAqB,GAAG,MAAM;AAC5C,cAAM,MAAM,0BAA0B,GAAG,OAAO,WAAU,UAAK,cAAL,YAAkB,GAAG;AAC/E,cAAM,SAAS,kBAAkB,KAAK,KAAK;AAC3C,cAAM,SAAS,UAAU,KAAK,IAAI;AAClC,uBAAe,IAAI,OAAO,cAAc;AACxC,mBAAW,OAAO;AAClB,YAAI,eAAe,EAAE,GAAG;AACtB,gBAAM,OAAO,aAAa,QAAQ,QAAQ,IAAI;AAC9C,4BAAkB,IAAI,MAAM,IAAI;AAAA,QAClC;AASA,YAAI,UAAU;AACZ,yBAAe,MAAM;AACnB,gBAAI,GAAG,UAAU,OAAO,eAAgB;AACxC,eAAG,QAAQ,OAAO;AAClB,gBAAI,eAAe,EAAE,GAAG;AACtB,oBAAM,IAAI,aAAa,QAAQ,QAAQ,IAAI;AAC3C,gCAAkB,IAAI,GAAG,CAAC;AAAA,YAC5B;AAAA,UACF,CAAC;AAAA,QACH;AACA,mBAAK,kBAAL,8BAAqB;AAAA,MACvB;AACA,SAAG,iBAAiB,SAAS,OAAO;AACpC,iBAAW,UAAU;AACrB,eAAS,UAAU;AACnB,UAAI,GAAG,OAAO;AACZ,uBAAe,IAAI,WAAW,GAAG,OAAO,WAAW,OAAO,CAAC;AAC3D,mBAAW,WAAW,GAAG,OAAO,WAAW,OAAO;AAAA,MACpD;AAAA,IACF,OAAO;AACL,UAAI,SAAS,WAAW,WAAW,SAAS;AAC1C,iBAAS,QAAQ,oBAAoB,SAAS,WAAW,OAAO;AAAA,MAClE;AACA,eAAS,UAAU;AACnB,iBAAW,UAAU;AAAA,IACvB;AAAA,EACF,GAAG,CAAC,CAAC;AACP;","names":["TimeFormat","useRef","useRef"]}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-input-mask-format",
   "description": "Masked input component for React",
-  "version": "2.2.0",
+  "version": "2.3.0",
   "type": "module",
   "homepage": "https://github.com/Temirtator/react-input-mask-format",
   "license": "MIT",
@@ -62,6 +62,10 @@
       "import": { "types": "./dist/number.d.ts", "default": "./dist/number.js" },
       "require": { "types": "./dist/number.d.cts", "default": "./dist/number.cjs" }
     },
+    "./time": {
+      "import": { "types": "./dist/time.d.ts", "default": "./dist/time.js" },
+      "require": { "types": "./dist/time.d.cts", "default": "./dist/time.cjs" }
+    },
     "./package.json": "./package.json"
   },
   "sideEffects": false,
@@ -72,7 +76,8 @@
     { "path": "dist/index.js", "limit": "6 KB" },
     { "path": "dist/presets.js", "limit": "2 KB" },
     { "path": "dist/validators.js", "limit": "2 KB" },
-    { "path": "dist/number.js", "limit": "2.5 KB" }
+    { "path": "dist/number.js", "limit": "2.5 KB" },
+    { "path": "dist/time.js", "limit": "2 KB" }
   ],
   "scripts": {
     "build": "tsup",