duration-input-react 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Rafael Cotta
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,117 @@
+# duration-input-react
+
+[![npm](https://img.shields.io/npm/v/duration-input-react)](https://www.npmjs.com/package/duration-input-react)
+[![npm downloads](https://img.shields.io/npm/dw/duration-input-react)](https://www.npmjs.com/package/duration-input-react)
+[![License](https://img.shields.io/npm/l/duration-input-react)](./LICENSE)
+[![Repo](https://img.shields.io/badge/github-rcotta%2Fduration--input-181717?logo=github)](https://github.com/rcotta/duration-input)
+[![Issues](https://img.shields.io/github/issues/rcotta/duration-input)](https://github.com/rcotta/duration-input/issues)
+
+Controlled React + TypeScript input for duration intervals.
+
+This component was created to handle time period inputs (durations), not clock time inputs (time of day).
+
+## Repository
+
+https://github.com/rcotta/duration-input
+
+## Features
+
+- Single `<input />` with dynamic `:` mask
+- Modes: `ss`, `mm`, `hh`, `mm:ss`, `hh:mm`, `hh:mm:ss`
+- Controlled value as total seconds (`number`)
+- Numeric, segment-aware editing
+- Dynamic leading-segment width from configured max (`max*`)
+- Better mobile behavior via `beforeinput` + `onChange` fallback
+- Built-in clamping/validation per mode
+
+## Installation
+
+```bash
+npm install duration-input-react
+```
+
+## Exports
+
+```ts
+import { DurationInput } from 'duration-input-react';
+import type { DurationInputProps, DurationMode } from 'duration-input-react';
+```
+
+## API
+
+```ts
+type DurationInputProps = Omit<
+  React.InputHTMLAttributes<HTMLInputElement>,
+  'value' | 'onChange' | 'type'
+> & {
+  value: number; // total seconds
+  onChange: (seconds: number) => void;
+  mode: 'ss' | 'mm' | 'hh' | 'mm:ss' | 'hh:mm' | 'hh:mm:ss';
+
+  maxHours?: number;
+  maxMinutes?: number;
+  maxSeconds?: number;
+};
+```
+
+## Validation rules
+
+- `hh`: clamps with `maxHours` when provided; otherwise unbounded
+- `mm`/`mm:ss`: clamps with `maxMinutes` when provided
+- `hh:mm`/`hh:mm:ss`: minutes clamp to `0..59`
+- `ss`: clamps with `maxSeconds` when provided
+- Modes with segmented seconds (`mm:ss`, `hh:mm:ss`) clamp seconds to `0..59`
+
+## Editing behavior
+
+- `Ctrl+A` + `Backspace/Delete` clears and moves caret to start
+- `Backspace` at end shifts digits right (helpful on mobile)
+- `onChange` only fires when total seconds actually changes
+
+## Usage
+
+```tsx
+import { useState } from 'react';
+import { DurationInput } from 'duration-input-react';
+
+export function Example() {
+  const [seconds, setSeconds] = useState(0);
+
+  return (
+    <DurationInput
+      value={seconds}
+      onChange={setSeconds}
+      mode="hh:mm:ss"
+      maxHours={99}
+      aria-label="Duration"
+      name="duration"
+    />
+  );
+}
+```
+
+## Demo
+
+The project contains a local demo app with PT-BR and EN pages.
+
+```bash
+cd demo
+npm install
+npm run dev
+```
+
+Pages:
+- PT-BR: `http://localhost:5173/index.html`
+- EN: `http://localhost:5173/en.html`
+
+## Development
+
+```bash
+cd demo
+npm test
+npm run build
+```
+
+## License
+
+MIT

package/dist/index.cjs

@@ -0,0 +1,412 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  DurationInput: () => DurationInput
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/components/ui/DurationInput.tsx
+var import_react = require("react");
+
+// src/components/ui/duration-input.utils.ts
+var EMPTY_VALUES = { hh: 0, mm: 0, ss: 0 };
+var NAVIGATION_KEYS = /* @__PURE__ */ new Set(["ArrowLeft", "ArrowRight", "Tab", "Home", "End"]);
+var EDIT_SHORTCUT_KEYS = /* @__PURE__ */ new Set(["a", "c", "v", "x", "z", "y"]);
+function assertNever(value) {
+  throw new Error(`Unsupported duration mode: ${String(value)}`);
+}
+function getModeSegments(mode) {
+  switch (mode) {
+    case "hh:mm:ss":
+      return ["hh", "mm", "ss"];
+    case "hh:mm":
+      return ["hh", "mm"];
+    case "mm:ss":
+      return ["mm", "ss"];
+    case "hh":
+      return ["hh"];
+    case "mm":
+      return ["mm"];
+    case "ss":
+      return ["ss"];
+    default:
+      return assertNever(mode);
+  }
+}
+function clamp(n, min, max) {
+  if (!Number.isFinite(n) || Number.isNaN(n)) return min;
+  if (n < min) return min;
+  if (max !== void 0 && n > max) return max;
+  return n;
+}
+function applyModeValidation(mode, values, limits) {
+  const normalized = { ...values };
+  if (mode.includes("hh")) {
+    normalized.hh = clamp(normalized.hh, 0, limits.maxHours);
+  }
+  if (mode === "mm" || mode === "mm:ss") {
+    normalized.mm = clamp(normalized.mm, 0, limits.maxMinutes);
+  } else if (mode.includes("mm")) {
+    normalized.mm = clamp(normalized.mm, 0, 59);
+  }
+  if (mode === "ss") {
+    normalized.ss = clamp(normalized.ss, 0, limits.maxSeconds);
+  } else if (mode.includes("ss")) {
+    normalized.ss = clamp(normalized.ss, 0, 59);
+  }
+  return normalized;
+}
+function secondsToSegments(mode, totalSeconds, limits) {
+  const safeSeconds = Math.max(0, Math.floor(Number.isFinite(totalSeconds) ? totalSeconds : 0));
+  const values = {
+    hh: Math.floor(safeSeconds / 3600),
+    mm: Math.floor(safeSeconds % 3600 / 60),
+    ss: safeSeconds % 60
+  };
+  if (mode === "hh") {
+    values.hh = Math.floor(safeSeconds / 3600);
+    values.mm = 0;
+    values.ss = 0;
+  }
+  if (mode === "mm") {
+    values.hh = 0;
+    values.mm = Math.floor(safeSeconds / 60);
+    values.ss = 0;
+  }
+  if (mode === "ss") {
+    values.hh = 0;
+    values.mm = 0;
+    values.ss = safeSeconds;
+  }
+  if (mode === "mm:ss") {
+    values.hh = 0;
+    values.mm = Math.floor(safeSeconds / 60);
+    values.ss = safeSeconds % 60;
+  }
+  return applyModeValidation(mode, values, limits);
+}
+function segmentsToSeconds(mode, values) {
+  const hh = mode.includes("hh") ? values.hh : 0;
+  const mm = mode.includes("mm") ? values.mm : 0;
+  const ss = mode.includes("ss") ? values.ss : 0;
+  const total = hh * 3600 + mm * 60 + ss;
+  return Number.isFinite(total) && !Number.isNaN(total) ? total : 0;
+}
+function getDigitsForLimit(limit) {
+  if (limit === void 0 || !Number.isFinite(limit) || Number.isNaN(limit)) return 2;
+  return Math.max(2, String(Math.max(0, Math.floor(limit))).length);
+}
+function getSegmentWidths(mode, limits) {
+  const widths = { hh: 2, mm: 2, ss: 2 };
+  if (mode === "hh" || mode === "hh:mm" || mode === "hh:mm:ss") {
+    widths.hh = getDigitsForLimit(limits.maxHours);
+  }
+  if (mode === "mm" || mode === "mm:ss") {
+    widths.mm = getDigitsForLimit(limits.maxMinutes);
+  }
+  if (mode === "ss") {
+    widths.ss = getDigitsForLimit(limits.maxSeconds);
+  }
+  return widths;
+}
+function getDisplayWidth(value, minWidth) {
+  return Math.max(minWidth, String(Math.max(0, value)).length);
+}
+function formatDisplay(mode, values, widths) {
+  return getModeSegments(mode).map((key) => String(values[key]).padStart(getDisplayWidth(values[key], widths[key]), "0")).join(":");
+}
+function parseRawInput(raw, mode) {
+  const segments = getModeSegments(mode);
+  const parsed = { ...EMPTY_VALUES };
+  const cleaned = raw.trim();
+  if (!cleaned) return parsed;
+  if (cleaned.includes(":")) {
+    const parts = cleaned.split(":").slice(0, segments.length);
+    segments.forEach((segment, index) => {
+      const digits2 = (parts[index] ?? "").replace(/\D/g, "");
+      parsed[segment] = digits2 ? Number.parseInt(digits2, 10) : 0;
+    });
+    return parsed;
+  }
+  const digits = cleaned.replace(/\D/g, "");
+  if (!digits) return parsed;
+  if (segments.length === 1) {
+    parsed[segments[0]] = Number.parseInt(digits, 10);
+    return parsed;
+  }
+  let end = digits.length;
+  for (let idx = segments.length - 1; idx >= 0; idx -= 1) {
+    const key = segments[idx];
+    if (idx === 0) {
+      const chunk2 = digits.slice(0, end);
+      parsed[key] = chunk2 ? Number.parseInt(chunk2, 10) : 0;
+      break;
+    }
+    const start = Math.max(0, end - 2);
+    const chunk = digits.slice(start, end);
+    parsed[key] = chunk ? Number.parseInt(chunk, 10) : 0;
+    end = start;
+  }
+  return parsed;
+}
+function normalizeRaw(mode, raw, limits, widths) {
+  const parsed = parseRawInput(raw, mode);
+  const values = applyModeValidation(mode, parsed, limits);
+  return {
+    values,
+    display: formatDisplay(mode, values, widths),
+    seconds: segmentsToSeconds(mode, values)
+  };
+}
+function getRanges(display, mode) {
+  const keys = getModeSegments(mode);
+  const parts = display.split(":");
+  let offset = 0;
+  return keys.map((key, index) => {
+    const part = parts[index] ?? "";
+    const start = offset;
+    const end = start + part.length;
+    offset = end + 1;
+    return { key, start, end };
+  });
+}
+function findRangeAtPosition(ranges, pos) {
+  for (const range of ranges) {
+    if (pos >= range.start && pos <= range.end) return range;
+  }
+  return null;
+}
+function isEditingShortcut(event) {
+  if (!(event.ctrlKey || event.metaKey)) return false;
+  return EDIT_SHORTCUT_KEYS.has(event.key.toLowerCase());
+}
+function replaceSelection(display, start, end, value) {
+  return `${display.slice(0, start)}${value}${display.slice(end)}`;
+}
+
+// src/components/ui/DurationInput.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+function DurationInput({
+  value,
+  onChange,
+  mode,
+  maxHours,
+  maxMinutes,
+  maxSeconds,
+  disabled = false,
+  inputMode = "numeric",
+  ...inputProps
+}) {
+  const inputRef = (0, import_react.useRef)(null);
+  const pendingCaretRef = (0, import_react.useRef)(null);
+  const limits = (0, import_react.useMemo)(() => ({ maxHours, maxMinutes, maxSeconds }), [maxHours, maxMinutes, maxSeconds]);
+  const widths = (0, import_react.useMemo)(() => getSegmentWidths(mode, limits), [mode, limits]);
+  const externalDisplay = (0, import_react.useMemo)(() => {
+    const values = secondsToSegments(mode, value, limits);
+    return formatDisplay(mode, values, widths);
+  }, [mode, value, limits, widths]);
+  const [isEditing, setIsEditing] = (0, import_react.useState)(false);
+  const [draftDisplay, setDraftDisplay] = (0, import_react.useState)(externalDisplay);
+  const activeDisplay = isEditing ? draftDisplay : externalDisplay;
+  (0, import_react.useEffect)(() => {
+    if (pendingCaretRef.current === null || !inputRef.current) return;
+    const caret = pendingCaretRef.current;
+    inputRef.current.setSelectionRange(caret, caret);
+    pendingCaretRef.current = null;
+  }, [draftDisplay]);
+  const commitNormalized = (normalized, nextCaret) => {
+    if (nextCaret !== void 0) {
+      pendingCaretRef.current = Math.min(nextCaret, normalized.display.length);
+    }
+    if (normalized.display !== draftDisplay) {
+      setDraftDisplay(normalized.display);
+    }
+    if (normalized.seconds !== value) {
+      onChange(normalized.seconds);
+    }
+  };
+  const applyRaw = (raw, nextCaret) => {
+    const normalized = normalizeRaw(mode, raw, limits, widths);
+    commitNormalized(normalized, nextCaret);
+  };
+  const moveCaret = (nextCaret) => {
+    const input = inputRef.current;
+    if (!input) return;
+    const boundedCaret = Math.min(nextCaret, activeDisplay.length);
+    input.setSelectionRange(boundedCaret, boundedCaret);
+  };
+  const applyDisplayEdit = (nextDisplay, nextCaret) => {
+    const boundedCaret = Math.min(nextCaret, nextDisplay.length);
+    if (nextDisplay === activeDisplay) {
+      moveCaret(boundedCaret);
+      return;
+    }
+    applyRaw(nextDisplay, boundedCaret);
+  };
+  const applyDeleteShiftAtEnd = () => {
+    const digits = activeDisplay.replace(/\D/g, "");
+    const shiftedDigits = digits.slice(0, -1);
+    const normalized = normalizeRaw(mode, shiftedDigits, limits, widths);
+    commitNormalized(normalized, normalized.display.length);
+  };
+  const handleDeleteKey = (key, cursor, selectionEnd) => {
+    const hasSelection = selectionEnd !== cursor;
+    const selectedAll = hasSelection && cursor === 0 && selectionEnd === activeDisplay.length;
+    if (selectedAll) {
+      applyRaw("", 0);
+      return true;
+    }
+    if (!hasSelection && key === "Backspace" && cursor === activeDisplay.length) {
+      applyDeleteShiftAtEnd();
+      return true;
+    }
+    const leftIsColon = key === "Backspace" && cursor > 0 && activeDisplay[cursor - 1] === ":";
+    const currentIsColon = activeDisplay[cursor] === ":";
+    if (leftIsColon || currentIsColon) {
+      const nextCursor = key === "Backspace" ? Math.max(0, cursor - 1) : Math.min(activeDisplay.length, cursor + 1);
+      moveCaret(nextCursor);
+      return true;
+    }
+    return false;
+  };
+  const handleDigitInsertion = (digit, cursor, selectionEnd) => {
+    const ranges = getRanges(activeDisplay, mode);
+    const targetRange = findRangeAtPosition(ranges, cursor);
+    if (!targetRange) return;
+    const segments = getModeSegments(mode);
+    const leadingSegment = segments[0];
+    const isLeadingSegment = targetRange.key === leadingSegment;
+    const hasSelection = selectionEnd !== cursor;
+    if (hasSelection) {
+      const nextDisplay2 = replaceSelection(activeDisplay, cursor, selectionEnd, digit);
+      applyDisplayEdit(nextDisplay2, cursor + 1);
+      return;
+    }
+    if (isLeadingSegment && cursor >= targetRange.end) {
+      const insertIndex = targetRange.end;
+      const nextDisplay2 = replaceSelection(activeDisplay, insertIndex, insertIndex, digit);
+      applyDisplayEdit(nextDisplay2, insertIndex + 1);
+      return;
+    }
+    let writeIndex = cursor;
+    if (activeDisplay[writeIndex] === ":") writeIndex += 1;
+    if (writeIndex >= activeDisplay.length) return;
+    const nextDisplay = replaceSelection(activeDisplay, writeIndex, writeIndex + 1, digit);
+    const localPos = writeIndex - targetRange.start;
+    const segmentLength = targetRange.end - targetRange.start;
+    let nextCaret = writeIndex + 1;
+    const reachedSegmentEnd = localPos >= segmentLength - 1;
+    if (reachedSegmentEnd && !isLeadingSegment) {
+      const afterSegment = targetRange.end + 1;
+      nextCaret = nextDisplay[afterSegment] === ":" ? afterSegment + 1 : afterSegment;
+    }
+    if (nextCaret < nextDisplay.length && nextDisplay[nextCaret] === ":") {
+      nextCaret += 1;
+    }
+    applyDisplayEdit(nextDisplay, nextCaret);
+  };
+  const handleBeforeInput = (event) => {
+    const input = inputRef.current;
+    if (!input) return;
+    const native = event.nativeEvent;
+    if (native.isComposing) return;
+    const cursor = input.selectionStart ?? 0;
+    const selectionEnd = input.selectionEnd ?? cursor;
+    if (native.inputType === "insertText") {
+      const text = native.data ?? "";
+      if (!text) return;
+      event.preventDefault();
+      if (/^\d$/.test(text)) {
+        handleDigitInsertion(text, cursor, selectionEnd);
+      }
+      return;
+    }
+    if (native.inputType === "deleteContentBackward") {
+      event.preventDefault();
+      handleDeleteKey("Backspace", cursor, selectionEnd);
+      return;
+    }
+    if (native.inputType === "deleteContentForward") {
+      event.preventDefault();
+      handleDeleteKey("Delete", cursor, selectionEnd);
+    }
+  };
+  const handleKeyDown = (event) => {
+    const input = inputRef.current;
+    if (!input) return;
+    if (event.altKey) {
+      return;
+    }
+    if (event.ctrlKey || event.metaKey) {
+      if (isEditingShortcut(event)) return;
+      if (event.key.length === 1) {
+        event.preventDefault();
+      }
+      return;
+    }
+    if (NAVIGATION_KEYS.has(event.key)) {
+      return;
+    }
+    const cursor = input.selectionStart ?? 0;
+    const selectionEnd = input.selectionEnd ?? cursor;
+    if (event.key === "Backspace" || event.key === "Delete") {
+      const handled = handleDeleteKey(event.key, cursor, selectionEnd);
+      if (handled) event.preventDefault();
+      return;
+    }
+    if (!/^\d$/.test(event.key)) {
+      if (event.key.length === 1) event.preventDefault();
+      return;
+    }
+    event.preventDefault();
+    handleDigitInsertion(event.key, cursor, selectionEnd);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "input",
+    {
+      ...inputProps,
+      ref: inputRef,
+      type: "text",
+      inputMode,
+      value: activeDisplay,
+      disabled,
+      onFocus: () => {
+        setIsEditing(true);
+        setDraftDisplay(externalDisplay);
+      },
+      onBlur: () => {
+        const normalized = normalizeRaw(mode, draftDisplay, limits, widths);
+        commitNormalized(normalized);
+        setIsEditing(false);
+      },
+      onBeforeInput: handleBeforeInput,
+      onKeyDown: handleKeyDown,
+      onChange: (event) => {
+        applyRaw(event.target.value);
+      }
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  DurationInput
+});

package/dist/index.d.cts

@@ -0,0 +1,16 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { InputHTMLAttributes } from 'react';
+
+type DurationMode = 'ss' | 'mm' | 'hh' | 'mm:ss' | 'hh:mm' | 'hh:mm:ss';
+
+type DurationInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange' | 'type'> & {
+    value: number;
+    onChange: (seconds: number) => void;
+    mode: DurationMode;
+    maxHours?: number;
+    maxMinutes?: number;
+    maxSeconds?: number;
+};
+declare function DurationInput({ value, onChange, mode, maxHours, maxMinutes, maxSeconds, disabled, inputMode, ...inputProps }: DurationInputProps): react_jsx_runtime.JSX.Element;
+
+export { DurationInput, type DurationInputProps, type DurationMode };

package/dist/index.d.ts

@@ -0,0 +1,16 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { InputHTMLAttributes } from 'react';
+
+type DurationMode = 'ss' | 'mm' | 'hh' | 'mm:ss' | 'hh:mm' | 'hh:mm:ss';
+
+type DurationInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange' | 'type'> & {
+    value: number;
+    onChange: (seconds: number) => void;
+    mode: DurationMode;
+    maxHours?: number;
+    maxMinutes?: number;
+    maxSeconds?: number;
+};
+declare function DurationInput({ value, onChange, mode, maxHours, maxMinutes, maxSeconds, disabled, inputMode, ...inputProps }: DurationInputProps): react_jsx_runtime.JSX.Element;
+
+export { DurationInput, type DurationInputProps, type DurationMode };

package/dist/index.js

@@ -0,0 +1,385 @@
+// src/components/ui/DurationInput.tsx
+import { useEffect, useMemo, useRef, useState } from "react";
+
+// src/components/ui/duration-input.utils.ts
+var EMPTY_VALUES = { hh: 0, mm: 0, ss: 0 };
+var NAVIGATION_KEYS = /* @__PURE__ */ new Set(["ArrowLeft", "ArrowRight", "Tab", "Home", "End"]);
+var EDIT_SHORTCUT_KEYS = /* @__PURE__ */ new Set(["a", "c", "v", "x", "z", "y"]);
+function assertNever(value) {
+  throw new Error(`Unsupported duration mode: ${String(value)}`);
+}
+function getModeSegments(mode) {
+  switch (mode) {
+    case "hh:mm:ss":
+      return ["hh", "mm", "ss"];
+    case "hh:mm":
+      return ["hh", "mm"];
+    case "mm:ss":
+      return ["mm", "ss"];
+    case "hh":
+      return ["hh"];
+    case "mm":
+      return ["mm"];
+    case "ss":
+      return ["ss"];
+    default:
+      return assertNever(mode);
+  }
+}
+function clamp(n, min, max) {
+  if (!Number.isFinite(n) || Number.isNaN(n)) return min;
+  if (n < min) return min;
+  if (max !== void 0 && n > max) return max;
+  return n;
+}
+function applyModeValidation(mode, values, limits) {
+  const normalized = { ...values };
+  if (mode.includes("hh")) {
+    normalized.hh = clamp(normalized.hh, 0, limits.maxHours);
+  }
+  if (mode === "mm" || mode === "mm:ss") {
+    normalized.mm = clamp(normalized.mm, 0, limits.maxMinutes);
+  } else if (mode.includes("mm")) {
+    normalized.mm = clamp(normalized.mm, 0, 59);
+  }
+  if (mode === "ss") {
+    normalized.ss = clamp(normalized.ss, 0, limits.maxSeconds);
+  } else if (mode.includes("ss")) {
+    normalized.ss = clamp(normalized.ss, 0, 59);
+  }
+  return normalized;
+}
+function secondsToSegments(mode, totalSeconds, limits) {
+  const safeSeconds = Math.max(0, Math.floor(Number.isFinite(totalSeconds) ? totalSeconds : 0));
+  const values = {
+    hh: Math.floor(safeSeconds / 3600),
+    mm: Math.floor(safeSeconds % 3600 / 60),
+    ss: safeSeconds % 60
+  };
+  if (mode === "hh") {
+    values.hh = Math.floor(safeSeconds / 3600);
+    values.mm = 0;
+    values.ss = 0;
+  }
+  if (mode === "mm") {
+    values.hh = 0;
+    values.mm = Math.floor(safeSeconds / 60);
+    values.ss = 0;
+  }
+  if (mode === "ss") {
+    values.hh = 0;
+    values.mm = 0;
+    values.ss = safeSeconds;
+  }
+  if (mode === "mm:ss") {
+    values.hh = 0;
+    values.mm = Math.floor(safeSeconds / 60);
+    values.ss = safeSeconds % 60;
+  }
+  return applyModeValidation(mode, values, limits);
+}
+function segmentsToSeconds(mode, values) {
+  const hh = mode.includes("hh") ? values.hh : 0;
+  const mm = mode.includes("mm") ? values.mm : 0;
+  const ss = mode.includes("ss") ? values.ss : 0;
+  const total = hh * 3600 + mm * 60 + ss;
+  return Number.isFinite(total) && !Number.isNaN(total) ? total : 0;
+}
+function getDigitsForLimit(limit) {
+  if (limit === void 0 || !Number.isFinite(limit) || Number.isNaN(limit)) return 2;
+  return Math.max(2, String(Math.max(0, Math.floor(limit))).length);
+}
+function getSegmentWidths(mode, limits) {
+  const widths = { hh: 2, mm: 2, ss: 2 };
+  if (mode === "hh" || mode === "hh:mm" || mode === "hh:mm:ss") {
+    widths.hh = getDigitsForLimit(limits.maxHours);
+  }
+  if (mode === "mm" || mode === "mm:ss") {
+    widths.mm = getDigitsForLimit(limits.maxMinutes);
+  }
+  if (mode === "ss") {
+    widths.ss = getDigitsForLimit(limits.maxSeconds);
+  }
+  return widths;
+}
+function getDisplayWidth(value, minWidth) {
+  return Math.max(minWidth, String(Math.max(0, value)).length);
+}
+function formatDisplay(mode, values, widths) {
+  return getModeSegments(mode).map((key) => String(values[key]).padStart(getDisplayWidth(values[key], widths[key]), "0")).join(":");
+}
+function parseRawInput(raw, mode) {
+  const segments = getModeSegments(mode);
+  const parsed = { ...EMPTY_VALUES };
+  const cleaned = raw.trim();
+  if (!cleaned) return parsed;
+  if (cleaned.includes(":")) {
+    const parts = cleaned.split(":").slice(0, segments.length);
+    segments.forEach((segment, index) => {
+      const digits2 = (parts[index] ?? "").replace(/\D/g, "");
+      parsed[segment] = digits2 ? Number.parseInt(digits2, 10) : 0;
+    });
+    return parsed;
+  }
+  const digits = cleaned.replace(/\D/g, "");
+  if (!digits) return parsed;
+  if (segments.length === 1) {
+    parsed[segments[0]] = Number.parseInt(digits, 10);
+    return parsed;
+  }
+  let end = digits.length;
+  for (let idx = segments.length - 1; idx >= 0; idx -= 1) {
+    const key = segments[idx];
+    if (idx === 0) {
+      const chunk2 = digits.slice(0, end);
+      parsed[key] = chunk2 ? Number.parseInt(chunk2, 10) : 0;
+      break;
+    }
+    const start = Math.max(0, end - 2);
+    const chunk = digits.slice(start, end);
+    parsed[key] = chunk ? Number.parseInt(chunk, 10) : 0;
+    end = start;
+  }
+  return parsed;
+}
+function normalizeRaw(mode, raw, limits, widths) {
+  const parsed = parseRawInput(raw, mode);
+  const values = applyModeValidation(mode, parsed, limits);
+  return {
+    values,
+    display: formatDisplay(mode, values, widths),
+    seconds: segmentsToSeconds(mode, values)
+  };
+}
+function getRanges(display, mode) {
+  const keys = getModeSegments(mode);
+  const parts = display.split(":");
+  let offset = 0;
+  return keys.map((key, index) => {
+    const part = parts[index] ?? "";
+    const start = offset;
+    const end = start + part.length;
+    offset = end + 1;
+    return { key, start, end };
+  });
+}
+function findRangeAtPosition(ranges, pos) {
+  for (const range of ranges) {
+    if (pos >= range.start && pos <= range.end) return range;
+  }
+  return null;
+}
+function isEditingShortcut(event) {
+  if (!(event.ctrlKey || event.metaKey)) return false;
+  return EDIT_SHORTCUT_KEYS.has(event.key.toLowerCase());
+}
+function replaceSelection(display, start, end, value) {
+  return `${display.slice(0, start)}${value}${display.slice(end)}`;
+}
+
+// src/components/ui/DurationInput.tsx
+import { jsx } from "react/jsx-runtime";
+function DurationInput({
+  value,
+  onChange,
+  mode,
+  maxHours,
+  maxMinutes,
+  maxSeconds,
+  disabled = false,
+  inputMode = "numeric",
+  ...inputProps
+}) {
+  const inputRef = useRef(null);
+  const pendingCaretRef = useRef(null);
+  const limits = useMemo(() => ({ maxHours, maxMinutes, maxSeconds }), [maxHours, maxMinutes, maxSeconds]);
+  const widths = useMemo(() => getSegmentWidths(mode, limits), [mode, limits]);
+  const externalDisplay = useMemo(() => {
+    const values = secondsToSegments(mode, value, limits);
+    return formatDisplay(mode, values, widths);
+  }, [mode, value, limits, widths]);
+  const [isEditing, setIsEditing] = useState(false);
+  const [draftDisplay, setDraftDisplay] = useState(externalDisplay);
+  const activeDisplay = isEditing ? draftDisplay : externalDisplay;
+  useEffect(() => {
+    if (pendingCaretRef.current === null || !inputRef.current) return;
+    const caret = pendingCaretRef.current;
+    inputRef.current.setSelectionRange(caret, caret);
+    pendingCaretRef.current = null;
+  }, [draftDisplay]);
+  const commitNormalized = (normalized, nextCaret) => {
+    if (nextCaret !== void 0) {
+      pendingCaretRef.current = Math.min(nextCaret, normalized.display.length);
+    }
+    if (normalized.display !== draftDisplay) {
+      setDraftDisplay(normalized.display);
+    }
+    if (normalized.seconds !== value) {
+      onChange(normalized.seconds);
+    }
+  };
+  const applyRaw = (raw, nextCaret) => {
+    const normalized = normalizeRaw(mode, raw, limits, widths);
+    commitNormalized(normalized, nextCaret);
+  };
+  const moveCaret = (nextCaret) => {
+    const input = inputRef.current;
+    if (!input) return;
+    const boundedCaret = Math.min(nextCaret, activeDisplay.length);
+    input.setSelectionRange(boundedCaret, boundedCaret);
+  };
+  const applyDisplayEdit = (nextDisplay, nextCaret) => {
+    const boundedCaret = Math.min(nextCaret, nextDisplay.length);
+    if (nextDisplay === activeDisplay) {
+      moveCaret(boundedCaret);
+      return;
+    }
+    applyRaw(nextDisplay, boundedCaret);
+  };
+  const applyDeleteShiftAtEnd = () => {
+    const digits = activeDisplay.replace(/\D/g, "");
+    const shiftedDigits = digits.slice(0, -1);
+    const normalized = normalizeRaw(mode, shiftedDigits, limits, widths);
+    commitNormalized(normalized, normalized.display.length);
+  };
+  const handleDeleteKey = (key, cursor, selectionEnd) => {
+    const hasSelection = selectionEnd !== cursor;
+    const selectedAll = hasSelection && cursor === 0 && selectionEnd === activeDisplay.length;
+    if (selectedAll) {
+      applyRaw("", 0);
+      return true;
+    }
+    if (!hasSelection && key === "Backspace" && cursor === activeDisplay.length) {
+      applyDeleteShiftAtEnd();
+      return true;
+    }
+    const leftIsColon = key === "Backspace" && cursor > 0 && activeDisplay[cursor - 1] === ":";
+    const currentIsColon = activeDisplay[cursor] === ":";
+    if (leftIsColon || currentIsColon) {
+      const nextCursor = key === "Backspace" ? Math.max(0, cursor - 1) : Math.min(activeDisplay.length, cursor + 1);
+      moveCaret(nextCursor);
+      return true;
+    }
+    return false;
+  };
+  const handleDigitInsertion = (digit, cursor, selectionEnd) => {
+    const ranges = getRanges(activeDisplay, mode);
+    const targetRange = findRangeAtPosition(ranges, cursor);
+    if (!targetRange) return;
+    const segments = getModeSegments(mode);
+    const leadingSegment = segments[0];
+    const isLeadingSegment = targetRange.key === leadingSegment;
+    const hasSelection = selectionEnd !== cursor;
+    if (hasSelection) {
+      const nextDisplay2 = replaceSelection(activeDisplay, cursor, selectionEnd, digit);
+      applyDisplayEdit(nextDisplay2, cursor + 1);
+      return;
+    }
+    if (isLeadingSegment && cursor >= targetRange.end) {
+      const insertIndex = targetRange.end;
+      const nextDisplay2 = replaceSelection(activeDisplay, insertIndex, insertIndex, digit);
+      applyDisplayEdit(nextDisplay2, insertIndex + 1);
+      return;
+    }
+    let writeIndex = cursor;
+    if (activeDisplay[writeIndex] === ":") writeIndex += 1;
+    if (writeIndex >= activeDisplay.length) return;
+    const nextDisplay = replaceSelection(activeDisplay, writeIndex, writeIndex + 1, digit);
+    const localPos = writeIndex - targetRange.start;
+    const segmentLength = targetRange.end - targetRange.start;
+    let nextCaret = writeIndex + 1;
+    const reachedSegmentEnd = localPos >= segmentLength - 1;
+    if (reachedSegmentEnd && !isLeadingSegment) {
+      const afterSegment = targetRange.end + 1;
+      nextCaret = nextDisplay[afterSegment] === ":" ? afterSegment + 1 : afterSegment;
+    }
+    if (nextCaret < nextDisplay.length && nextDisplay[nextCaret] === ":") {
+      nextCaret += 1;
+    }
+    applyDisplayEdit(nextDisplay, nextCaret);
+  };
+  const handleBeforeInput = (event) => {
+    const input = inputRef.current;
+    if (!input) return;
+    const native = event.nativeEvent;
+    if (native.isComposing) return;
+    const cursor = input.selectionStart ?? 0;
+    const selectionEnd = input.selectionEnd ?? cursor;
+    if (native.inputType === "insertText") {
+      const text = native.data ?? "";
+      if (!text) return;
+      event.preventDefault();
+      if (/^\d$/.test(text)) {
+        handleDigitInsertion(text, cursor, selectionEnd);
+      }
+      return;
+    }
+    if (native.inputType === "deleteContentBackward") {
+      event.preventDefault();
+      handleDeleteKey("Backspace", cursor, selectionEnd);
+      return;
+    }
+    if (native.inputType === "deleteContentForward") {
+      event.preventDefault();
+      handleDeleteKey("Delete", cursor, selectionEnd);
+    }
+  };
+  const handleKeyDown = (event) => {
+    const input = inputRef.current;
+    if (!input) return;
+    if (event.altKey) {
+      return;
+    }
+    if (event.ctrlKey || event.metaKey) {
+      if (isEditingShortcut(event)) return;
+      if (event.key.length === 1) {
+        event.preventDefault();
+      }
+      return;
+    }
+    if (NAVIGATION_KEYS.has(event.key)) {
+      return;
+    }
+    const cursor = input.selectionStart ?? 0;
+    const selectionEnd = input.selectionEnd ?? cursor;
+    if (event.key === "Backspace" || event.key === "Delete") {
+      const handled = handleDeleteKey(event.key, cursor, selectionEnd);
+      if (handled) event.preventDefault();
+      return;
+    }
+    if (!/^\d$/.test(event.key)) {
+      if (event.key.length === 1) event.preventDefault();
+      return;
+    }
+    event.preventDefault();
+    handleDigitInsertion(event.key, cursor, selectionEnd);
+  };
+  return /* @__PURE__ */ jsx(
+    "input",
+    {
+      ...inputProps,
+      ref: inputRef,
+      type: "text",
+      inputMode,
+      value: activeDisplay,
+      disabled,
+      onFocus: () => {
+        setIsEditing(true);
+        setDraftDisplay(externalDisplay);
+      },
+      onBlur: () => {
+        const normalized = normalizeRaw(mode, draftDisplay, limits, widths);
+        commitNormalized(normalized);
+        setIsEditing(false);
+      },
+      onBeforeInput: handleBeforeInput,
+      onKeyDown: handleKeyDown,
+      onChange: (event) => {
+        applyRaw(event.target.value);
+      }
+    }
+  );
+}
+export {
+  DurationInput
+};

package/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "duration-input-react",
+  "version": "0.1.0",
+  "description": "Controlled React input for duration intervals",
+  "license": "MIT",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "sideEffects": false,
+  "keywords": [
+    "react",
+    "duration",
+    "time",
+    "input",
+    "typescript"
+  ],
+  "engines": {
+    "node": ">=18"
+  },
+  "scripts": {
+    "clean": "rimraf dist",
+    "build": "tsup src/index.ts --format esm,cjs --dts --clean",
+    "typecheck": "tsc --noEmit",
+    "prepublishOnly": "npm run build"
+  },
+  "peerDependencies": {
+    "react": ">=18"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.12",
+    "rimraf": "^6.1.1",
+    "tsup": "^8.3.5",
+    "typescript": "^5.6.3"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}