scrubtime 0.1.0 → 0.2.0

package/dist/index.cjs

@@ -44,7 +44,9 @@ function DraggableValue({
   const isDragging = (0, import_react.useRef)(false);
   const hasDragged = (0, import_react.useRef)(false);
   const startX = (0, import_react.useRef)(0);
+  const startY = (0, import_react.useRef)(0);
   const lastX = (0, import_react.useRef)(0);
+  const lastY = (0, import_react.useRef)(0);
   const accumulatedDelta = (0, import_react.useRef)(0);
   const onDeltaRef = (0, import_react.useRef)(onDelta);
   onDeltaRef.current = onDelta;
@@ -86,6 +88,48 @@ function DraggableValue({
     },
     [disabled, sensitivity, isEditing]
   );
+  const handleTouchStart = (0, import_react.useCallback)(
+    (e) => {
+      if (disabled || isEditing) return;
+      const touch = e.touches[0];
+      isDragging.current = true;
+      hasDragged.current = false;
+      startX.current = touch.clientX;
+      startY.current = touch.clientY;
+      lastX.current = touch.clientX;
+      lastY.current = touch.clientY;
+      accumulatedDelta.current = 0;
+      const handleTouchMove = (e2) => {
+        if (!isDragging.current) return;
+        const touch2 = e2.touches[0];
+        const totalDeltaX = Math.abs(touch2.clientX - startX.current);
+        const totalDeltaY = Math.abs(touch2.clientY - startY.current);
+        if (totalDeltaX > DRAG_THRESHOLD || totalDeltaY > DRAG_THRESHOLD) {
+          hasDragged.current = true;
+          e2.preventDefault();
+        }
+        const deltaX = touch2.clientX - lastX.current;
+        const deltaY = touch2.clientY - lastY.current;
+        const deltaValue = (deltaX - deltaY) / sensitivity;
+        accumulatedDelta.current += deltaValue;
+        const wholeDelta = Math.trunc(accumulatedDelta.current);
+        if (wholeDelta !== 0) {
+          accumulatedDelta.current -= wholeDelta;
+          onDeltaRef.current(wholeDelta);
+        }
+        lastX.current = touch2.clientX;
+        lastY.current = touch2.clientY;
+      };
+      const handleTouchEnd = () => {
+        isDragging.current = false;
+        document.removeEventListener("touchmove", handleTouchMove);
+        document.removeEventListener("touchend", handleTouchEnd);
+      };
+      document.addEventListener("touchmove", handleTouchMove, { passive: false });
+      document.addEventListener("touchend", handleTouchEnd);
+    },
+    [disabled, sensitivity, isEditing]
+  );
   const displayValue = formatValue ? formatValue(value) : String(value);
   const handleClick = (0, import_react.useCallback)(() => {
     if (disabled || hasDragged.current) return;
@@ -128,7 +172,8 @@ function DraggableValue({
         type: "text",
         inputMode: "numeric",
         value: editValue,
-        onChange: (e) => setEditValue(e.target.value),
+        onChange: (e) => setEditValue(e.target.value.replace(/\D/g, "").slice(-2)),
+        onFocus: (e) => e.target.select(),
         onBlur: commitEdit,
         onKeyDown: handleKeyDown,
         className: `scrubtime-value scrubtime-value--editing ${className || ""}`,
@@ -140,6 +185,7 @@ function DraggableValue({
     "div",
     {
       onMouseDown: handleMouseDown,
+      onTouchStart: handleTouchStart,
       onClick: handleClick,
       onKeyDown: handleDivKeyDown,
       className: `scrubtime-value ${className || ""} ${disabled ? "scrubtime-value--disabled" : ""}`,
@@ -220,7 +266,7 @@ function TimePicker({
             onDelta: handleHoursDelta,
             onSet: handleHoursSet,
             disabled,
-            sensitivity: dragSensitivity,
+            sensitivity: dragSensitivity * 2,
             min: 0,
             max: 23,
             className: "scrubtime-hours"
@@ -235,7 +281,7 @@ function TimePicker({
             onSet: handleMinutesSet,
             formatValue: (v) => String(v).padStart(2, "0"),
             disabled,
-            sensitivity: dragSensitivity,
+            sensitivity: dragSensitivity / 2,
             min: 0,
             max: 59,
             className: "scrubtime-minutes"

package/dist/index.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts","../src/TimePicker.tsx"],"sourcesContent":["export { TimePicker } from './TimePicker';\nexport type { TimePickerProps } from './TimePicker';\n","import { useRef, useCallback, useState } from 'react';\n\nexport interface TimePickerProps {\n  /** Current time value in \"H:mm\" or \"HH:mm\" format */\n  value: string;\n  /** Callback fired when time changes */\n  onChange: (value: string) => void;\n  /** Optional label displayed above the picker */\n  label?: string;\n  /** Custom class name for the root element */\n  className?: string;\n  /** Disable the picker */\n  disabled?: boolean;\n  /** Slider step in minutes (default: 15) */\n  sliderStep?: number;\n  /** Drag sensitivity - pixels per unit change (default: 3) */\n  dragSensitivity?: number;\n  /** Number of equal parts to divide the 24h range into (default: 4 = labels at 0,6,12,18,24) */\n  divisions?: number;\n}\n\ninterface DraggableValueProps {\n  value: number;\n  onDelta: (delta: number) => void;\n  onSet: (value: number) => void;\n  formatValue?: (v: number) => string;\n  className?: string;\n  disabled?: boolean;\n  sensitivity: number;\n  min: number;\n  max: number;\n}\n\nconst DRAG_THRESHOLD = 3;\n\nfunction DraggableValue({\n  value,\n  onDelta,\n  onSet,\n  formatValue,\n  className,\n  disabled,\n  sensitivity,\n  min,\n  max,\n}: DraggableValueProps) {\n  const [isEditing, setIsEditing] = useState(false);\n  const [editValue, setEditValue] = useState('');\n  const isDragging = useRef(false);\n  const hasDragged = useRef(false);\n  const startX = useRef(0);\n  const lastX = useRef(0);\n  const accumulatedDelta = useRef(0);\n  const onDeltaRef = useRef(onDelta);\n  onDeltaRef.current = onDelta;\n\n  const handleMouseDown = useCallback(\n    (e: React.MouseEvent) => {\n      if (disabled || isEditing) return;\n\n      isDragging.current = true;\n      hasDragged.current = false;\n      startX.current = e.clientX;\n      lastX.current = e.clientX;\n      accumulatedDelta.current = 0;\n      document.body.style.cursor = 'ew-resize';\n      document.body.style.userSelect = 'none';\n\n      const handleMouseMove = (e: MouseEvent) => {\n        if (!isDragging.current) return;\n\n        const totalDeltaX = Math.abs(e.clientX - startX.current);\n        if (totalDeltaX > DRAG_THRESHOLD) {\n          hasDragged.current = true;\n        }\n\n        const deltaX = e.clientX - lastX.current;\n        const deltaValue = deltaX / sensitivity;\n        accumulatedDelta.current += deltaValue;\n\n        const wholeDelta = Math.trunc(accumulatedDelta.current);\n        if (wholeDelta !== 0) {\n          accumulatedDelta.current -= wholeDelta;\n          onDeltaRef.current(wholeDelta);\n        }\n        lastX.current = e.clientX;\n      };\n\n      const handleMouseUp = () => {\n        isDragging.current = false;\n        document.body.style.cursor = '';\n        document.body.style.userSelect = '';\n        document.removeEventListener('mousemove', handleMouseMove);\n        document.removeEventListener('mouseup', handleMouseUp);\n      };\n\n      document.addEventListener('mousemove', handleMouseMove);\n      document.addEventListener('mouseup', handleMouseUp);\n    },\n    [disabled, sensitivity, isEditing]\n  );\n\n  const displayValue = formatValue ? formatValue(value) : String(value);\n\n  const handleClick = useCallback(() => {\n    if (disabled || hasDragged.current) return;\n    setEditValue(displayValue);\n    setIsEditing(true);\n  }, [disabled, displayValue]);\n\n  const handleDivKeyDown = useCallback(\n    (e: React.KeyboardEvent) => {\n      if (disabled) return;\n      if (/^[0-9]$/.test(e.key)) {\n        e.preventDefault();\n        setEditValue(e.key);\n        setIsEditing(true);\n      }\n    },\n    [disabled]\n  );\n\n  const commitEdit = useCallback(() => {\n    const parsed = parseInt(editValue, 10);\n    if (!isNaN(parsed)) {\n      const clamped = Math.max(min, Math.min(max, parsed));\n      onSet(clamped);\n    }\n    setIsEditing(false);\n  }, [editValue, min, max, onSet]);\n\n  const handleKeyDown = useCallback(\n    (e: React.KeyboardEvent) => {\n      if (e.key === 'Enter') {\n        commitEdit();\n      } else if (e.key === 'Escape') {\n        setIsEditing(false);\n      }\n    },\n    [commitEdit]\n  );\n\n  if (isEditing) {\n    return (\n      <input\n        type=\"text\"\n        inputMode=\"numeric\"\n        value={editValue}\n        onChange={(e) => setEditValue(e.target.value)}\n        onBlur={commitEdit}\n        onKeyDown={handleKeyDown}\n        className={`scrubtime-value scrubtime-value--editing ${className || ''}`}\n        autoFocus\n      />\n    );\n  }\n\n  return (\n    <div\n      onMouseDown={handleMouseDown}\n      onClick={handleClick}\n      onKeyDown={handleDivKeyDown}\n      className={`scrubtime-value ${className || ''} ${disabled ? 'scrubtime-value--disabled' : ''}`}\n      role=\"spinbutton\"\n      aria-valuenow={value}\n      aria-disabled={disabled}\n      tabIndex={disabled ? -1 : 0}\n    >\n      {displayValue}\n    </div>\n  );\n}\n\nfunction parseTime(time: string): { hours: number; minutes: number } {\n  const [h, m] = time.split(':').map(Number);\n  return { hours: h || 0, minutes: m || 0 };\n}\n\nfunction formatTime(hours: number, minutes: number): string {\n  return `${hours}:${String(minutes).padStart(2, '0')}`;\n}\n\nfunction clampTotalMinutes(totalMins: number): number {\n  return Math.max(0, Math.min(23 * 60 + 59, totalMins));\n}\n\nexport function TimePicker({\n  value,\n  onChange,\n  label,\n  className,\n  disabled = false,\n  sliderStep = 15,\n  dragSensitivity = 3,\n  divisions = 4,\n}: TimePickerProps) {\n  const labelCount = divisions + 1;\n  const { hours, minutes } = parseTime(value);\n  const totalMinutes = hours * 60 + minutes;\n\n  const handleSliderChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    if (disabled) return;\n    const mins = clampTotalMinutes(parseInt(e.target.value));\n    const h = Math.floor(mins / 60);\n    const m = mins % 60;\n    onChange(formatTime(h, m));\n  };\n\n  const handleHoursDelta = useCallback(\n    (delta: number) => {\n      const newHours = Math.max(0, Math.min(23, hours + delta));\n      onChange(formatTime(newHours, minutes));\n    },\n    [hours, minutes, onChange]\n  );\n\n  const handleHoursSet = useCallback(\n    (newHours: number) => {\n      onChange(formatTime(newHours, minutes));\n    },\n    [minutes, onChange]\n  );\n\n  const handleMinutesDelta = useCallback(\n    (delta: number) => {\n      const newTotalMinutes = clampTotalMinutes(totalMinutes + delta);\n      const h = Math.floor(newTotalMinutes / 60);\n      const m = newTotalMinutes % 60;\n      onChange(formatTime(h, m));\n    },\n    [totalMinutes, onChange]\n  );\n\n  const handleMinutesSet = useCallback(\n    (newMinutes: number) => {\n      onChange(formatTime(hours, newMinutes));\n    },\n    [hours, onChange]\n  );\n\n  return (\n    <div className={`scrubtime ${className || ''} ${disabled ? 'scrubtime--disabled' : ''}`}>\n      {label && <label className=\"scrubtime-label\">{label}</label>}\n\n      <div className=\"scrubtime-container\">\n        <div className=\"scrubtime-display\">\n          <DraggableValue\n            value={hours}\n            onDelta={handleHoursDelta}\n            onSet={handleHoursSet}\n            disabled={disabled}\n            sensitivity={dragSensitivity}\n            min={0}\n            max={23}\n            className=\"scrubtime-hours\"\n          />\n          <span className=\"scrubtime-separator\">:</span>\n          <DraggableValue\n            value={minutes}\n            onDelta={handleMinutesDelta}\n            onSet={handleMinutesSet}\n            formatValue={(v) => String(v).padStart(2, '0')}\n            disabled={disabled}\n            sensitivity={dragSensitivity}\n            min={0}\n            max={59}\n            className=\"scrubtime-minutes\"\n          />\n        </div>\n\n        <div className=\"scrubtime-slider-container\">\n          <input\n            type=\"range\"\n            min={0}\n            max={23 * 60 + 59}\n            step={sliderStep}\n            value={totalMinutes}\n            onChange={handleSliderChange}\n            disabled={disabled}\n            tabIndex={-1}\n            className=\"scrubtime-slider\"\n            aria-label=\"Time slider\"\n          />\n          <div className=\"scrubtime-slider-labels\">\n            {Array.from({ length: labelCount }, (_, i) => {\n              const hour = Math.round((24 / divisions) * i);\n              const percent = (i / divisions) * 100;\n              return (\n                <span key={i} style={{ left: `${percent}%` }}>\n                  {hour}\n                </span>\n              );\n            })}\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,mBAA8C;AAgJxC;AA/GN,IAAM,iBAAiB;AAEvB,SAAS,eAAe;AAAA,EACtB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAwB;AACtB,QAAM,CAAC,WAAW,YAAY,QAAI,uBAAS,KAAK;AAChD,QAAM,CAAC,WAAW,YAAY,QAAI,uBAAS,EAAE;AAC7C,QAAM,iBAAa,qBAAO,KAAK;AAC/B,QAAM,iBAAa,qBAAO,KAAK;AAC/B,QAAM,aAAS,qBAAO,CAAC;AACvB,QAAM,YAAQ,qBAAO,CAAC;AACtB,QAAM,uBAAmB,qBAAO,CAAC;AACjC,QAAM,iBAAa,qBAAO,OAAO;AACjC,aAAW,UAAU;AAErB,QAAM,sBAAkB;AAAA,IACtB,CAAC,MAAwB;AACvB,UAAI,YAAY,UAAW;AAE3B,iBAAW,UAAU;AACrB,iBAAW,UAAU;AACrB,aAAO,UAAU,EAAE;AACnB,YAAM,UAAU,EAAE;AAClB,uBAAiB,UAAU;AAC3B,eAAS,KAAK,MAAM,SAAS;AAC7B,eAAS,KAAK,MAAM,aAAa;AAEjC,YAAM,kBAAkB,CAACA,OAAkB;AACzC,YAAI,CAAC,WAAW,QAAS;AAEzB,cAAM,cAAc,KAAK,IAAIA,GAAE,UAAU,OAAO,OAAO;AACvD,YAAI,cAAc,gBAAgB;AAChC,qBAAW,UAAU;AAAA,QACvB;AAEA,cAAM,SAASA,GAAE,UAAU,MAAM;AACjC,cAAM,aAAa,SAAS;AAC5B,yBAAiB,WAAW;AAE5B,cAAM,aAAa,KAAK,MAAM,iBAAiB,OAAO;AACtD,YAAI,eAAe,GAAG;AACpB,2BAAiB,WAAW;AAC5B,qBAAW,QAAQ,UAAU;AAAA,QAC/B;AACA,cAAM,UAAUA,GAAE;AAAA,MACpB;AAEA,YAAM,gBAAgB,MAAM;AAC1B,mBAAW,UAAU;AACrB,iBAAS,KAAK,MAAM,SAAS;AAC7B,iBAAS,KAAK,MAAM,aAAa;AACjC,iBAAS,oBAAoB,aAAa,eAAe;AACzD,iBAAS,oBAAoB,WAAW,aAAa;AAAA,MACvD;AAEA,eAAS,iBAAiB,aAAa,eAAe;AACtD,eAAS,iBAAiB,WAAW,aAAa;AAAA,IACpD;AAAA,IACA,CAAC,UAAU,aAAa,SAAS;AAAA,EACnC;AAEA,QAAM,eAAe,cAAc,YAAY,KAAK,IAAI,OAAO,KAAK;AAEpE,QAAM,kBAAc,0BAAY,MAAM;AACpC,QAAI,YAAY,WAAW,QAAS;AACpC,iBAAa,YAAY;AACzB,iBAAa,IAAI;AAAA,EACnB,GAAG,CAAC,UAAU,YAAY,CAAC;AAE3B,QAAM,uBAAmB;AAAA,IACvB,CAAC,MAA2B;AAC1B,UAAI,SAAU;AACd,UAAI,UAAU,KAAK,EAAE,GAAG,GAAG;AACzB,UAAE,eAAe;AACjB,qBAAa,EAAE,GAAG;AAClB,qBAAa,IAAI;AAAA,MACnB;AAAA,IACF;AAAA,IACA,CAAC,QAAQ;AAAA,EACX;AAEA,QAAM,iBAAa,0BAAY,MAAM;AACnC,UAAM,SAAS,SAAS,WAAW,EAAE;AACrC,QAAI,CAAC,MAAM,MAAM,GAAG;AAClB,YAAM,UAAU,KAAK,IAAI,KAAK,KAAK,IAAI,KAAK,MAAM,CAAC;AACnD,YAAM,OAAO;AAAA,IACf;AACA,iBAAa,KAAK;AAAA,EACpB,GAAG,CAAC,WAAW,KAAK,KAAK,KAAK,CAAC;AAE/B,QAAM,oBAAgB;AAAA,IACpB,CAAC,MAA2B;AAC1B,UAAI,EAAE,QAAQ,SAAS;AACrB,mBAAW;AAAA,MACb,WAAW,EAAE,QAAQ,UAAU;AAC7B,qBAAa,KAAK;AAAA,MACpB;AAAA,IACF;AAAA,IACA,CAAC,UAAU;AAAA,EACb;AAEA,MAAI,WAAW;AACb,WACE;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,WAAU;AAAA,QACV,OAAO;AAAA,QACP,UAAU,CAAC,MAAM,aAAa,EAAE,OAAO,KAAK;AAAA,QAC5C,QAAQ;AAAA,QACR,WAAW;AAAA,QACX,WAAW,4CAA4C,aAAa,EAAE;AAAA,QACtE,WAAS;AAAA;AAAA,IACX;AAAA,EAEJ;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAa;AAAA,MACb,SAAS;AAAA,MACT,WAAW;AAAA,MACX,WAAW,mBAAmB,aAAa,EAAE,IAAI,WAAW,8BAA8B,EAAE;AAAA,MAC5F,MAAK;AAAA,MACL,iBAAe;AAAA,MACf,iBAAe;AAAA,MACf,UAAU,WAAW,KAAK;AAAA,MAEzB;AAAA;AAAA,EACH;AAEJ;AAEA,SAAS,UAAU,MAAkD;AACnE,QAAM,CAAC,GAAG,CAAC,IAAI,KAAK,MAAM,GAAG,EAAE,IAAI,MAAM;AACzC,SAAO,EAAE,OAAO,KAAK,GAAG,SAAS,KAAK,EAAE;AAC1C;AAEA,SAAS,WAAW,OAAe,SAAyB;AAC1D,SAAO,GAAG,KAAK,IAAI,OAAO,OAAO,EAAE,SAAS,GAAG,GAAG,CAAC;AACrD;AAEA,SAAS,kBAAkB,WAA2B;AACpD,SAAO,KAAK,IAAI,GAAG,KAAK,IAAI,KAAK,KAAK,IAAI,SAAS,CAAC;AACtD;AAEO,SAAS,WAAW;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX,aAAa;AAAA,EACb,kBAAkB;AAAA,EAClB,YAAY;AACd,GAAoB;AAClB,QAAM,aAAa,YAAY;AAC/B,QAAM,EAAE,OAAO,QAAQ,IAAI,UAAU,KAAK;AAC1C,QAAM,eAAe,QAAQ,KAAK;AAElC,QAAM,qBAAqB,CAAC,MAA2C;AACrE,QAAI,SAAU;AACd,UAAM,OAAO,kBAAkB,SAAS,EAAE,OAAO,KAAK,CAAC;AACvD,UAAM,IAAI,KAAK,MAAM,OAAO,EAAE;AAC9B,UAAM,IAAI,OAAO;AACjB,aAAS,WAAW,GAAG,CAAC,CAAC;AAAA,EAC3B;AAEA,QAAM,uBAAmB;AAAA,IACvB,CAAC,UAAkB;AACjB,YAAM,WAAW,KAAK,IAAI,GAAG,KAAK,IAAI,IAAI,QAAQ,KAAK,CAAC;AACxD,eAAS,WAAW,UAAU,OAAO,CAAC;AAAA,IACxC;AAAA,IACA,CAAC,OAAO,SAAS,QAAQ;AAAA,EAC3B;AAEA,QAAM,qBAAiB;AAAA,IACrB,CAAC,aAAqB;AACpB,eAAS,WAAW,UAAU,OAAO,CAAC;AAAA,IACxC;AAAA,IACA,CAAC,SAAS,QAAQ;AAAA,EACpB;AAEA,QAAM,yBAAqB;AAAA,IACzB,CAAC,UAAkB;AACjB,YAAM,kBAAkB,kBAAkB,eAAe,KAAK;AAC9D,YAAM,IAAI,KAAK,MAAM,kBAAkB,EAAE;AACzC,YAAM,IAAI,kBAAkB;AAC5B,eAAS,WAAW,GAAG,CAAC,CAAC;AAAA,IAC3B;AAAA,IACA,CAAC,cAAc,QAAQ;AAAA,EACzB;AAEA,QAAM,uBAAmB;AAAA,IACvB,CAAC,eAAuB;AACtB,eAAS,WAAW,OAAO,UAAU,CAAC;AAAA,IACxC;AAAA,IACA,CAAC,OAAO,QAAQ;AAAA,EAClB;AAEA,SACE,6CAAC,SAAI,WAAW,aAAa,aAAa,EAAE,IAAI,WAAW,wBAAwB,EAAE,IAClF;AAAA,aAAS,4CAAC,WAAM,WAAU,mBAAmB,iBAAM;AAAA,IAEpD,6CAAC,SAAI,WAAU,uBACb;AAAA,mDAAC,SAAI,WAAU,qBACb;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,OAAO;AAAA,YACP,SAAS;AAAA,YACT,OAAO;AAAA,YACP;AAAA,YACA,aAAa;AAAA,YACb,KAAK;AAAA,YACL,KAAK;AAAA,YACL,WAAU;AAAA;AAAA,QACZ;AAAA,QACA,4CAAC,UAAK,WAAU,uBAAsB,eAAC;AAAA,QACvC;AAAA,UAAC;AAAA;AAAA,YACC,OAAO;AAAA,YACP,SAAS;AAAA,YACT,OAAO;AAAA,YACP,aAAa,CAAC,MAAM,OAAO,CAAC,EAAE,SAAS,GAAG,GAAG;AAAA,YAC7C;AAAA,YACA,aAAa;AAAA,YACb,KAAK;AAAA,YACL,KAAK;AAAA,YACL,WAAU;AAAA;AAAA,QACZ;AAAA,SACF;AAAA,MAEA,6CAAC,SAAI,WAAU,8BACb;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,KAAK;AAAA,YACL,KAAK,KAAK,KAAK;AAAA,YACf,MAAM;AAAA,YACN,OAAO;AAAA,YACP,UAAU;AAAA,YACV;AAAA,YACA,UAAU;AAAA,YACV,WAAU;AAAA,YACV,cAAW;AAAA;AAAA,QACb;AAAA,QACA,4CAAC,SAAI,WAAU,2BACZ,gBAAM,KAAK,EAAE,QAAQ,WAAW,GAAG,CAAC,GAAG,MAAM;AAC5C,gBAAM,OAAO,KAAK,MAAO,KAAK,YAAa,CAAC;AAC5C,gBAAM,UAAW,IAAI,YAAa;AAClC,iBACE,4CAAC,UAAa,OAAO,EAAE,MAAM,GAAG,OAAO,IAAI,GACxC,kBADQ,CAEX;AAAA,QAEJ,CAAC,GACH;AAAA,SACF;AAAA,OACF;AAAA,KACF;AAEJ;","names":["e"]}
+{"version":3,"sources":["../src/index.ts","../src/TimePicker.tsx"],"sourcesContent":["export { TimePicker } from './TimePicker';\nexport type { TimePickerProps } from './TimePicker';\n","import { useRef, useCallback, useState } from 'react';\n\nexport interface TimePickerProps {\n  /** Current time value in \"H:mm\" or \"HH:mm\" format */\n  value: string;\n  /** Callback fired when time changes */\n  onChange: (value: string) => void;\n  /** Optional label displayed above the picker */\n  label?: string;\n  /** Custom class name for the root element */\n  className?: string;\n  /** Disable the picker */\n  disabled?: boolean;\n  /** Slider step in minutes (default: 15) */\n  sliderStep?: number;\n  /** Drag sensitivity - pixels per unit change (default: 3) */\n  dragSensitivity?: number;\n  /** Number of equal parts to divide the 24h range into (default: 4 = labels at 0,6,12,18,24) */\n  divisions?: number;\n}\n\ninterface DraggableValueProps {\n  value: number;\n  onDelta: (delta: number) => void;\n  onSet: (value: number) => void;\n  formatValue?: (v: number) => string;\n  className?: string;\n  disabled?: boolean;\n  sensitivity: number;\n  min: number;\n  max: number;\n}\n\nconst DRAG_THRESHOLD = 3;\n\nfunction DraggableValue({\n  value,\n  onDelta,\n  onSet,\n  formatValue,\n  className,\n  disabled,\n  sensitivity,\n  min,\n  max,\n}: DraggableValueProps) {\n  const [isEditing, setIsEditing] = useState(false);\n  const [editValue, setEditValue] = useState('');\n  const isDragging = useRef(false);\n  const hasDragged = useRef(false);\n  const startX = useRef(0);\n  const startY = useRef(0);\n  const lastX = useRef(0);\n  const lastY = useRef(0);\n  const accumulatedDelta = useRef(0);\n  const onDeltaRef = useRef(onDelta);\n  onDeltaRef.current = onDelta;\n\n  const handleMouseDown = useCallback(\n    (e: React.MouseEvent) => {\n      if (disabled || isEditing) return;\n\n      isDragging.current = true;\n      hasDragged.current = false;\n      startX.current = e.clientX;\n      lastX.current = e.clientX;\n      accumulatedDelta.current = 0;\n      document.body.style.cursor = 'ew-resize';\n      document.body.style.userSelect = 'none';\n\n      const handleMouseMove = (e: MouseEvent) => {\n        if (!isDragging.current) return;\n\n        const totalDeltaX = Math.abs(e.clientX - startX.current);\n        if (totalDeltaX > DRAG_THRESHOLD) {\n          hasDragged.current = true;\n        }\n\n        const deltaX = e.clientX - lastX.current;\n        const deltaValue = deltaX / sensitivity;\n        accumulatedDelta.current += deltaValue;\n\n        const wholeDelta = Math.trunc(accumulatedDelta.current);\n        if (wholeDelta !== 0) {\n          accumulatedDelta.current -= wholeDelta;\n          onDeltaRef.current(wholeDelta);\n        }\n        lastX.current = e.clientX;\n      };\n\n      const handleMouseUp = () => {\n        isDragging.current = false;\n        document.body.style.cursor = '';\n        document.body.style.userSelect = '';\n        document.removeEventListener('mousemove', handleMouseMove);\n        document.removeEventListener('mouseup', handleMouseUp);\n      };\n\n      document.addEventListener('mousemove', handleMouseMove);\n      document.addEventListener('mouseup', handleMouseUp);\n    },\n    [disabled, sensitivity, isEditing]\n  );\n\n  const handleTouchStart = useCallback(\n    (e: React.TouchEvent) => {\n      if (disabled || isEditing) return;\n\n      const touch = e.touches[0];\n      isDragging.current = true;\n      hasDragged.current = false;\n      startX.current = touch.clientX;\n      startY.current = touch.clientY;\n      lastX.current = touch.clientX;\n      lastY.current = touch.clientY;\n      accumulatedDelta.current = 0;\n\n      const handleTouchMove = (e: TouchEvent) => {\n        if (!isDragging.current) return;\n\n        const touch = e.touches[0];\n        const totalDeltaX = Math.abs(touch.clientX - startX.current);\n        const totalDeltaY = Math.abs(touch.clientY - startY.current);\n        if (totalDeltaX > DRAG_THRESHOLD || totalDeltaY > DRAG_THRESHOLD) {\n          hasDragged.current = true;\n          e.preventDefault(); // Prevent scrolling once dragging starts\n        }\n\n        const deltaX = touch.clientX - lastX.current;\n        const deltaY = touch.clientY - lastY.current;\n        // Horizontal: right = increase, left = decrease\n        // Vertical: up = increase, down = decrease\n        const deltaValue = (deltaX - deltaY) / sensitivity;\n        accumulatedDelta.current += deltaValue;\n\n        const wholeDelta = Math.trunc(accumulatedDelta.current);\n        if (wholeDelta !== 0) {\n          accumulatedDelta.current -= wholeDelta;\n          onDeltaRef.current(wholeDelta);\n        }\n        lastX.current = touch.clientX;\n        lastY.current = touch.clientY;\n      };\n\n      const handleTouchEnd = () => {\n        isDragging.current = false;\n        document.removeEventListener('touchmove', handleTouchMove);\n        document.removeEventListener('touchend', handleTouchEnd);\n      };\n\n      document.addEventListener('touchmove', handleTouchMove, { passive: false });\n      document.addEventListener('touchend', handleTouchEnd);\n    },\n    [disabled, sensitivity, isEditing]\n  );\n\n  const displayValue = formatValue ? formatValue(value) : String(value);\n\n  const handleClick = useCallback(() => {\n    if (disabled || hasDragged.current) return;\n    setEditValue(displayValue);\n    setIsEditing(true);\n  }, [disabled, displayValue]);\n\n  const handleDivKeyDown = useCallback(\n    (e: React.KeyboardEvent) => {\n      if (disabled) return;\n      if (/^[0-9]$/.test(e.key)) {\n        e.preventDefault();\n        setEditValue(e.key);\n        setIsEditing(true);\n      }\n    },\n    [disabled]\n  );\n\n  const commitEdit = useCallback(() => {\n    const parsed = parseInt(editValue, 10);\n    if (!isNaN(parsed)) {\n      const clamped = Math.max(min, Math.min(max, parsed));\n      onSet(clamped);\n    }\n    setIsEditing(false);\n  }, [editValue, min, max, onSet]);\n\n  const handleKeyDown = useCallback(\n    (e: React.KeyboardEvent) => {\n      if (e.key === 'Enter') {\n        commitEdit();\n      } else if (e.key === 'Escape') {\n        setIsEditing(false);\n      }\n    },\n    [commitEdit]\n  );\n\n  if (isEditing) {\n    return (\n      <input\n        type=\"text\"\n        inputMode=\"numeric\"\n        value={editValue}\n        onChange={(e) => setEditValue(e.target.value.replace(/\\D/g, '').slice(-2))}\n        onFocus={(e) => e.target.select()}\n        onBlur={commitEdit}\n        onKeyDown={handleKeyDown}\n        className={`scrubtime-value scrubtime-value--editing ${className || ''}`}\n        autoFocus\n      />\n    );\n  }\n\n  return (\n    <div\n      onMouseDown={handleMouseDown}\n      onTouchStart={handleTouchStart}\n      onClick={handleClick}\n      onKeyDown={handleDivKeyDown}\n      className={`scrubtime-value ${className || ''} ${disabled ? 'scrubtime-value--disabled' : ''}`}\n      role=\"spinbutton\"\n      aria-valuenow={value}\n      aria-disabled={disabled}\n      tabIndex={disabled ? -1 : 0}\n    >\n      {displayValue}\n    </div>\n  );\n}\n\nfunction parseTime(time: string): { hours: number; minutes: number } {\n  const [h, m] = time.split(':').map(Number);\n  return { hours: h || 0, minutes: m || 0 };\n}\n\nfunction formatTime(hours: number, minutes: number): string {\n  return `${hours}:${String(minutes).padStart(2, '0')}`;\n}\n\nfunction clampTotalMinutes(totalMins: number): number {\n  return Math.max(0, Math.min(23 * 60 + 59, totalMins));\n}\n\nexport function TimePicker({\n  value,\n  onChange,\n  label,\n  className,\n  disabled = false,\n  sliderStep = 15,\n  dragSensitivity = 3,\n  divisions = 4,\n}: TimePickerProps) {\n  const labelCount = divisions + 1;\n  const { hours, minutes } = parseTime(value);\n  const totalMinutes = hours * 60 + minutes;\n\n  const handleSliderChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    if (disabled) return;\n    const mins = clampTotalMinutes(parseInt(e.target.value));\n    const h = Math.floor(mins / 60);\n    const m = mins % 60;\n    onChange(formatTime(h, m));\n  };\n\n  const handleHoursDelta = useCallback(\n    (delta: number) => {\n      const newHours = Math.max(0, Math.min(23, hours + delta));\n      onChange(formatTime(newHours, minutes));\n    },\n    [hours, minutes, onChange]\n  );\n\n  const handleHoursSet = useCallback(\n    (newHours: number) => {\n      onChange(formatTime(newHours, minutes));\n    },\n    [minutes, onChange]\n  );\n\n  const handleMinutesDelta = useCallback(\n    (delta: number) => {\n      const newTotalMinutes = clampTotalMinutes(totalMinutes + delta);\n      const h = Math.floor(newTotalMinutes / 60);\n      const m = newTotalMinutes % 60;\n      onChange(formatTime(h, m));\n    },\n    [totalMinutes, onChange]\n  );\n\n  const handleMinutesSet = useCallback(\n    (newMinutes: number) => {\n      onChange(formatTime(hours, newMinutes));\n    },\n    [hours, onChange]\n  );\n\n  return (\n    <div className={`scrubtime ${className || ''} ${disabled ? 'scrubtime--disabled' : ''}`}>\n      {label && <label className=\"scrubtime-label\">{label}</label>}\n\n      <div className=\"scrubtime-container\">\n        <div className=\"scrubtime-display\">\n          <DraggableValue\n            value={hours}\n            onDelta={handleHoursDelta}\n            onSet={handleHoursSet}\n            disabled={disabled}\n            sensitivity={dragSensitivity * 2}\n            min={0}\n            max={23}\n            className=\"scrubtime-hours\"\n          />\n          <span className=\"scrubtime-separator\">:</span>\n          <DraggableValue\n            value={minutes}\n            onDelta={handleMinutesDelta}\n            onSet={handleMinutesSet}\n            formatValue={(v) => String(v).padStart(2, '0')}\n            disabled={disabled}\n            sensitivity={dragSensitivity / 2}\n            min={0}\n            max={59}\n            className=\"scrubtime-minutes\"\n          />\n        </div>\n\n        <div className=\"scrubtime-slider-container\">\n          <input\n            type=\"range\"\n            min={0}\n            max={23 * 60 + 59}\n            step={sliderStep}\n            value={totalMinutes}\n            onChange={handleSliderChange}\n            disabled={disabled}\n            tabIndex={-1}\n            className=\"scrubtime-slider\"\n            aria-label=\"Time slider\"\n          />\n          <div className=\"scrubtime-slider-labels\">\n            {Array.from({ length: labelCount }, (_, i) => {\n              const hour = Math.round((24 / divisions) * i);\n              const percent = (i / divisions) * 100;\n              return (\n                <span key={i} style={{ left: `${percent}%` }}>\n                  {hour}\n                </span>\n              );\n            })}\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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","names":["e","touch"]}

package/dist/index.js

@@ -18,7 +18,9 @@ function DraggableValue({
   const isDragging = useRef(false);
   const hasDragged = useRef(false);
   const startX = useRef(0);
+  const startY = useRef(0);
   const lastX = useRef(0);
+  const lastY = useRef(0);
   const accumulatedDelta = useRef(0);
   const onDeltaRef = useRef(onDelta);
   onDeltaRef.current = onDelta;
@@ -60,6 +62,48 @@ function DraggableValue({
     },
     [disabled, sensitivity, isEditing]
   );
+  const handleTouchStart = useCallback(
+    (e) => {
+      if (disabled || isEditing) return;
+      const touch = e.touches[0];
+      isDragging.current = true;
+      hasDragged.current = false;
+      startX.current = touch.clientX;
+      startY.current = touch.clientY;
+      lastX.current = touch.clientX;
+      lastY.current = touch.clientY;
+      accumulatedDelta.current = 0;
+      const handleTouchMove = (e2) => {
+        if (!isDragging.current) return;
+        const touch2 = e2.touches[0];
+        const totalDeltaX = Math.abs(touch2.clientX - startX.current);
+        const totalDeltaY = Math.abs(touch2.clientY - startY.current);
+        if (totalDeltaX > DRAG_THRESHOLD || totalDeltaY > DRAG_THRESHOLD) {
+          hasDragged.current = true;
+          e2.preventDefault();
+        }
+        const deltaX = touch2.clientX - lastX.current;
+        const deltaY = touch2.clientY - lastY.current;
+        const deltaValue = (deltaX - deltaY) / sensitivity;
+        accumulatedDelta.current += deltaValue;
+        const wholeDelta = Math.trunc(accumulatedDelta.current);
+        if (wholeDelta !== 0) {
+          accumulatedDelta.current -= wholeDelta;
+          onDeltaRef.current(wholeDelta);
+        }
+        lastX.current = touch2.clientX;
+        lastY.current = touch2.clientY;
+      };
+      const handleTouchEnd = () => {
+        isDragging.current = false;
+        document.removeEventListener("touchmove", handleTouchMove);
+        document.removeEventListener("touchend", handleTouchEnd);
+      };
+      document.addEventListener("touchmove", handleTouchMove, { passive: false });
+      document.addEventListener("touchend", handleTouchEnd);
+    },
+    [disabled, sensitivity, isEditing]
+  );
   const displayValue = formatValue ? formatValue(value) : String(value);
   const handleClick = useCallback(() => {
     if (disabled || hasDragged.current) return;
@@ -102,7 +146,8 @@ function DraggableValue({
         type: "text",
         inputMode: "numeric",
         value: editValue,
-        onChange: (e) => setEditValue(e.target.value),
+        onChange: (e) => setEditValue(e.target.value.replace(/\D/g, "").slice(-2)),
+        onFocus: (e) => e.target.select(),
         onBlur: commitEdit,
         onKeyDown: handleKeyDown,
         className: `scrubtime-value scrubtime-value--editing ${className || ""}`,
@@ -114,6 +159,7 @@ function DraggableValue({
     "div",
     {
       onMouseDown: handleMouseDown,
+      onTouchStart: handleTouchStart,
       onClick: handleClick,
       onKeyDown: handleDivKeyDown,
       className: `scrubtime-value ${className || ""} ${disabled ? "scrubtime-value--disabled" : ""}`,
@@ -194,7 +240,7 @@ function TimePicker({
             onDelta: handleHoursDelta,
             onSet: handleHoursSet,
             disabled,
-            sensitivity: dragSensitivity,
+            sensitivity: dragSensitivity * 2,
             min: 0,
             max: 23,
             className: "scrubtime-hours"
@@ -209,7 +255,7 @@ function TimePicker({
             onSet: handleMinutesSet,
             formatValue: (v) => String(v).padStart(2, "0"),
             disabled,
-            sensitivity: dragSensitivity,
+            sensitivity: dragSensitivity / 2,
             min: 0,
             max: 59,
             className: "scrubtime-minutes"

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/TimePicker.tsx"],"sourcesContent":["import { useRef, useCallback, useState } from 'react';\n\nexport interface TimePickerProps {\n  /** Current time value in \"H:mm\" or \"HH:mm\" format */\n  value: string;\n  /** Callback fired when time changes */\n  onChange: (value: string) => void;\n  /** Optional label displayed above the picker */\n  label?: string;\n  /** Custom class name for the root element */\n  className?: string;\n  /** Disable the picker */\n  disabled?: boolean;\n  /** Slider step in minutes (default: 15) */\n  sliderStep?: number;\n  /** Drag sensitivity - pixels per unit change (default: 3) */\n  dragSensitivity?: number;\n  /** Number of equal parts to divide the 24h range into (default: 4 = labels at 0,6,12,18,24) */\n  divisions?: number;\n}\n\ninterface DraggableValueProps {\n  value: number;\n  onDelta: (delta: number) => void;\n  onSet: (value: number) => void;\n  formatValue?: (v: number) => string;\n  className?: string;\n  disabled?: boolean;\n  sensitivity: number;\n  min: number;\n  max: number;\n}\n\nconst DRAG_THRESHOLD = 3;\n\nfunction DraggableValue({\n  value,\n  onDelta,\n  onSet,\n  formatValue,\n  className,\n  disabled,\n  sensitivity,\n  min,\n  max,\n}: DraggableValueProps) {\n  const [isEditing, setIsEditing] = useState(false);\n  const [editValue, setEditValue] = useState('');\n  const isDragging = useRef(false);\n  const hasDragged = useRef(false);\n  const startX = useRef(0);\n  const lastX = useRef(0);\n  const accumulatedDelta = useRef(0);\n  const onDeltaRef = useRef(onDelta);\n  onDeltaRef.current = onDelta;\n\n  const handleMouseDown = useCallback(\n    (e: React.MouseEvent) => {\n      if (disabled || isEditing) return;\n\n      isDragging.current = true;\n      hasDragged.current = false;\n      startX.current = e.clientX;\n      lastX.current = e.clientX;\n      accumulatedDelta.current = 0;\n      document.body.style.cursor = 'ew-resize';\n      document.body.style.userSelect = 'none';\n\n      const handleMouseMove = (e: MouseEvent) => {\n        if (!isDragging.current) return;\n\n        const totalDeltaX = Math.abs(e.clientX - startX.current);\n        if (totalDeltaX > DRAG_THRESHOLD) {\n          hasDragged.current = true;\n        }\n\n        const deltaX = e.clientX - lastX.current;\n        const deltaValue = deltaX / sensitivity;\n        accumulatedDelta.current += deltaValue;\n\n        const wholeDelta = Math.trunc(accumulatedDelta.current);\n        if (wholeDelta !== 0) {\n          accumulatedDelta.current -= wholeDelta;\n          onDeltaRef.current(wholeDelta);\n        }\n        lastX.current = e.clientX;\n      };\n\n      const handleMouseUp = () => {\n        isDragging.current = false;\n        document.body.style.cursor = '';\n        document.body.style.userSelect = '';\n        document.removeEventListener('mousemove', handleMouseMove);\n        document.removeEventListener('mouseup', handleMouseUp);\n      };\n\n      document.addEventListener('mousemove', handleMouseMove);\n      document.addEventListener('mouseup', handleMouseUp);\n    },\n    [disabled, sensitivity, isEditing]\n  );\n\n  const displayValue = formatValue ? formatValue(value) : String(value);\n\n  const handleClick = useCallback(() => {\n    if (disabled || hasDragged.current) return;\n    setEditValue(displayValue);\n    setIsEditing(true);\n  }, [disabled, displayValue]);\n\n  const handleDivKeyDown = useCallback(\n    (e: React.KeyboardEvent) => {\n      if (disabled) return;\n      if (/^[0-9]$/.test(e.key)) {\n        e.preventDefault();\n        setEditValue(e.key);\n        setIsEditing(true);\n      }\n    },\n    [disabled]\n  );\n\n  const commitEdit = useCallback(() => {\n    const parsed = parseInt(editValue, 10);\n    if (!isNaN(parsed)) {\n      const clamped = Math.max(min, Math.min(max, parsed));\n      onSet(clamped);\n    }\n    setIsEditing(false);\n  }, [editValue, min, max, onSet]);\n\n  const handleKeyDown = useCallback(\n    (e: React.KeyboardEvent) => {\n      if (e.key === 'Enter') {\n        commitEdit();\n      } else if (e.key === 'Escape') {\n        setIsEditing(false);\n      }\n    },\n    [commitEdit]\n  );\n\n  if (isEditing) {\n    return (\n      <input\n        type=\"text\"\n        inputMode=\"numeric\"\n        value={editValue}\n        onChange={(e) => setEditValue(e.target.value)}\n        onBlur={commitEdit}\n        onKeyDown={handleKeyDown}\n        className={`scrubtime-value scrubtime-value--editing ${className || ''}`}\n        autoFocus\n      />\n    );\n  }\n\n  return (\n    <div\n      onMouseDown={handleMouseDown}\n      onClick={handleClick}\n      onKeyDown={handleDivKeyDown}\n      className={`scrubtime-value ${className || ''} ${disabled ? 'scrubtime-value--disabled' : ''}`}\n      role=\"spinbutton\"\n      aria-valuenow={value}\n      aria-disabled={disabled}\n      tabIndex={disabled ? -1 : 0}\n    >\n      {displayValue}\n    </div>\n  );\n}\n\nfunction parseTime(time: string): { hours: number; minutes: number } {\n  const [h, m] = time.split(':').map(Number);\n  return { hours: h || 0, minutes: m || 0 };\n}\n\nfunction formatTime(hours: number, minutes: number): string {\n  return `${hours}:${String(minutes).padStart(2, '0')}`;\n}\n\nfunction clampTotalMinutes(totalMins: number): number {\n  return Math.max(0, Math.min(23 * 60 + 59, totalMins));\n}\n\nexport function TimePicker({\n  value,\n  onChange,\n  label,\n  className,\n  disabled = false,\n  sliderStep = 15,\n  dragSensitivity = 3,\n  divisions = 4,\n}: TimePickerProps) {\n  const labelCount = divisions + 1;\n  const { hours, minutes } = parseTime(value);\n  const totalMinutes = hours * 60 + minutes;\n\n  const handleSliderChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    if (disabled) return;\n    const mins = clampTotalMinutes(parseInt(e.target.value));\n    const h = Math.floor(mins / 60);\n    const m = mins % 60;\n    onChange(formatTime(h, m));\n  };\n\n  const handleHoursDelta = useCallback(\n    (delta: number) => {\n      const newHours = Math.max(0, Math.min(23, hours + delta));\n      onChange(formatTime(newHours, minutes));\n    },\n    [hours, minutes, onChange]\n  );\n\n  const handleHoursSet = useCallback(\n    (newHours: number) => {\n      onChange(formatTime(newHours, minutes));\n    },\n    [minutes, onChange]\n  );\n\n  const handleMinutesDelta = useCallback(\n    (delta: number) => {\n      const newTotalMinutes = clampTotalMinutes(totalMinutes + delta);\n      const h = Math.floor(newTotalMinutes / 60);\n      const m = newTotalMinutes % 60;\n      onChange(formatTime(h, m));\n    },\n    [totalMinutes, onChange]\n  );\n\n  const handleMinutesSet = useCallback(\n    (newMinutes: number) => {\n      onChange(formatTime(hours, newMinutes));\n    },\n    [hours, onChange]\n  );\n\n  return (\n    <div className={`scrubtime ${className || ''} ${disabled ? 'scrubtime--disabled' : ''}`}>\n      {label && <label className=\"scrubtime-label\">{label}</label>}\n\n      <div className=\"scrubtime-container\">\n        <div className=\"scrubtime-display\">\n          <DraggableValue\n            value={hours}\n            onDelta={handleHoursDelta}\n            onSet={handleHoursSet}\n            disabled={disabled}\n            sensitivity={dragSensitivity}\n            min={0}\n            max={23}\n            className=\"scrubtime-hours\"\n          />\n          <span className=\"scrubtime-separator\">:</span>\n          <DraggableValue\n            value={minutes}\n            onDelta={handleMinutesDelta}\n            onSet={handleMinutesSet}\n            formatValue={(v) => String(v).padStart(2, '0')}\n            disabled={disabled}\n            sensitivity={dragSensitivity}\n            min={0}\n            max={59}\n            className=\"scrubtime-minutes\"\n          />\n        </div>\n\n        <div className=\"scrubtime-slider-container\">\n          <input\n            type=\"range\"\n            min={0}\n            max={23 * 60 + 59}\n            step={sliderStep}\n            value={totalMinutes}\n            onChange={handleSliderChange}\n            disabled={disabled}\n            tabIndex={-1}\n            className=\"scrubtime-slider\"\n            aria-label=\"Time slider\"\n          />\n          <div className=\"scrubtime-slider-labels\">\n            {Array.from({ length: labelCount }, (_, i) => {\n              const hour = Math.round((24 / divisions) * i);\n              const percent = (i / divisions) * 100;\n              return (\n                <span key={i} style={{ left: `${percent}%` }}>\n                  {hour}\n                </span>\n              );\n            })}\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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","names":["e"]}
+{"version":3,"sources":["../src/TimePicker.tsx"],"sourcesContent":["import { useRef, useCallback, useState } from 'react';\n\nexport interface TimePickerProps {\n  /** Current time value in \"H:mm\" or \"HH:mm\" format */\n  value: string;\n  /** Callback fired when time changes */\n  onChange: (value: string) => void;\n  /** Optional label displayed above the picker */\n  label?: string;\n  /** Custom class name for the root element */\n  className?: string;\n  /** Disable the picker */\n  disabled?: boolean;\n  /** Slider step in minutes (default: 15) */\n  sliderStep?: number;\n  /** Drag sensitivity - pixels per unit change (default: 3) */\n  dragSensitivity?: number;\n  /** Number of equal parts to divide the 24h range into (default: 4 = labels at 0,6,12,18,24) */\n  divisions?: number;\n}\n\ninterface DraggableValueProps {\n  value: number;\n  onDelta: (delta: number) => void;\n  onSet: (value: number) => void;\n  formatValue?: (v: number) => string;\n  className?: string;\n  disabled?: boolean;\n  sensitivity: number;\n  min: number;\n  max: number;\n}\n\nconst DRAG_THRESHOLD = 3;\n\nfunction DraggableValue({\n  value,\n  onDelta,\n  onSet,\n  formatValue,\n  className,\n  disabled,\n  sensitivity,\n  min,\n  max,\n}: DraggableValueProps) {\n  const [isEditing, setIsEditing] = useState(false);\n  const [editValue, setEditValue] = useState('');\n  const isDragging = useRef(false);\n  const hasDragged = useRef(false);\n  const startX = useRef(0);\n  const startY = useRef(0);\n  const lastX = useRef(0);\n  const lastY = useRef(0);\n  const accumulatedDelta = useRef(0);\n  const onDeltaRef = useRef(onDelta);\n  onDeltaRef.current = onDelta;\n\n  const handleMouseDown = useCallback(\n    (e: React.MouseEvent) => {\n      if (disabled || isEditing) return;\n\n      isDragging.current = true;\n      hasDragged.current = false;\n      startX.current = e.clientX;\n      lastX.current = e.clientX;\n      accumulatedDelta.current = 0;\n      document.body.style.cursor = 'ew-resize';\n      document.body.style.userSelect = 'none';\n\n      const handleMouseMove = (e: MouseEvent) => {\n        if (!isDragging.current) return;\n\n        const totalDeltaX = Math.abs(e.clientX - startX.current);\n        if (totalDeltaX > DRAG_THRESHOLD) {\n          hasDragged.current = true;\n        }\n\n        const deltaX = e.clientX - lastX.current;\n        const deltaValue = deltaX / sensitivity;\n        accumulatedDelta.current += deltaValue;\n\n        const wholeDelta = Math.trunc(accumulatedDelta.current);\n        if (wholeDelta !== 0) {\n          accumulatedDelta.current -= wholeDelta;\n          onDeltaRef.current(wholeDelta);\n        }\n        lastX.current = e.clientX;\n      };\n\n      const handleMouseUp = () => {\n        isDragging.current = false;\n        document.body.style.cursor = '';\n        document.body.style.userSelect = '';\n        document.removeEventListener('mousemove', handleMouseMove);\n        document.removeEventListener('mouseup', handleMouseUp);\n      };\n\n      document.addEventListener('mousemove', handleMouseMove);\n      document.addEventListener('mouseup', handleMouseUp);\n    },\n    [disabled, sensitivity, isEditing]\n  );\n\n  const handleTouchStart = useCallback(\n    (e: React.TouchEvent) => {\n      if (disabled || isEditing) return;\n\n      const touch = e.touches[0];\n      isDragging.current = true;\n      hasDragged.current = false;\n      startX.current = touch.clientX;\n      startY.current = touch.clientY;\n      lastX.current = touch.clientX;\n      lastY.current = touch.clientY;\n      accumulatedDelta.current = 0;\n\n      const handleTouchMove = (e: TouchEvent) => {\n        if (!isDragging.current) return;\n\n        const touch = e.touches[0];\n        const totalDeltaX = Math.abs(touch.clientX - startX.current);\n        const totalDeltaY = Math.abs(touch.clientY - startY.current);\n        if (totalDeltaX > DRAG_THRESHOLD || totalDeltaY > DRAG_THRESHOLD) {\n          hasDragged.current = true;\n          e.preventDefault(); // Prevent scrolling once dragging starts\n        }\n\n        const deltaX = touch.clientX - lastX.current;\n        const deltaY = touch.clientY - lastY.current;\n        // Horizontal: right = increase, left = decrease\n        // Vertical: up = increase, down = decrease\n        const deltaValue = (deltaX - deltaY) / sensitivity;\n        accumulatedDelta.current += deltaValue;\n\n        const wholeDelta = Math.trunc(accumulatedDelta.current);\n        if (wholeDelta !== 0) {\n          accumulatedDelta.current -= wholeDelta;\n          onDeltaRef.current(wholeDelta);\n        }\n        lastX.current = touch.clientX;\n        lastY.current = touch.clientY;\n      };\n\n      const handleTouchEnd = () => {\n        isDragging.current = false;\n        document.removeEventListener('touchmove', handleTouchMove);\n        document.removeEventListener('touchend', handleTouchEnd);\n      };\n\n      document.addEventListener('touchmove', handleTouchMove, { passive: false });\n      document.addEventListener('touchend', handleTouchEnd);\n    },\n    [disabled, sensitivity, isEditing]\n  );\n\n  const displayValue = formatValue ? formatValue(value) : String(value);\n\n  const handleClick = useCallback(() => {\n    if (disabled || hasDragged.current) return;\n    setEditValue(displayValue);\n    setIsEditing(true);\n  }, [disabled, displayValue]);\n\n  const handleDivKeyDown = useCallback(\n    (e: React.KeyboardEvent) => {\n      if (disabled) return;\n      if (/^[0-9]$/.test(e.key)) {\n        e.preventDefault();\n        setEditValue(e.key);\n        setIsEditing(true);\n      }\n    },\n    [disabled]\n  );\n\n  const commitEdit = useCallback(() => {\n    const parsed = parseInt(editValue, 10);\n    if (!isNaN(parsed)) {\n      const clamped = Math.max(min, Math.min(max, parsed));\n      onSet(clamped);\n    }\n    setIsEditing(false);\n  }, [editValue, min, max, onSet]);\n\n  const handleKeyDown = useCallback(\n    (e: React.KeyboardEvent) => {\n      if (e.key === 'Enter') {\n        commitEdit();\n      } else if (e.key === 'Escape') {\n        setIsEditing(false);\n      }\n    },\n    [commitEdit]\n  );\n\n  if (isEditing) {\n    return (\n      <input\n        type=\"text\"\n        inputMode=\"numeric\"\n        value={editValue}\n        onChange={(e) => setEditValue(e.target.value.replace(/\\D/g, '').slice(-2))}\n        onFocus={(e) => e.target.select()}\n        onBlur={commitEdit}\n        onKeyDown={handleKeyDown}\n        className={`scrubtime-value scrubtime-value--editing ${className || ''}`}\n        autoFocus\n      />\n    );\n  }\n\n  return (\n    <div\n      onMouseDown={handleMouseDown}\n      onTouchStart={handleTouchStart}\n      onClick={handleClick}\n      onKeyDown={handleDivKeyDown}\n      className={`scrubtime-value ${className || ''} ${disabled ? 'scrubtime-value--disabled' : ''}`}\n      role=\"spinbutton\"\n      aria-valuenow={value}\n      aria-disabled={disabled}\n      tabIndex={disabled ? -1 : 0}\n    >\n      {displayValue}\n    </div>\n  );\n}\n\nfunction parseTime(time: string): { hours: number; minutes: number } {\n  const [h, m] = time.split(':').map(Number);\n  return { hours: h || 0, minutes: m || 0 };\n}\n\nfunction formatTime(hours: number, minutes: number): string {\n  return `${hours}:${String(minutes).padStart(2, '0')}`;\n}\n\nfunction clampTotalMinutes(totalMins: number): number {\n  return Math.max(0, Math.min(23 * 60 + 59, totalMins));\n}\n\nexport function TimePicker({\n  value,\n  onChange,\n  label,\n  className,\n  disabled = false,\n  sliderStep = 15,\n  dragSensitivity = 3,\n  divisions = 4,\n}: TimePickerProps) {\n  const labelCount = divisions + 1;\n  const { hours, minutes } = parseTime(value);\n  const totalMinutes = hours * 60 + minutes;\n\n  const handleSliderChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    if (disabled) return;\n    const mins = clampTotalMinutes(parseInt(e.target.value));\n    const h = Math.floor(mins / 60);\n    const m = mins % 60;\n    onChange(formatTime(h, m));\n  };\n\n  const handleHoursDelta = useCallback(\n    (delta: number) => {\n      const newHours = Math.max(0, Math.min(23, hours + delta));\n      onChange(formatTime(newHours, minutes));\n    },\n    [hours, minutes, onChange]\n  );\n\n  const handleHoursSet = useCallback(\n    (newHours: number) => {\n      onChange(formatTime(newHours, minutes));\n    },\n    [minutes, onChange]\n  );\n\n  const handleMinutesDelta = useCallback(\n    (delta: number) => {\n      const newTotalMinutes = clampTotalMinutes(totalMinutes + delta);\n      const h = Math.floor(newTotalMinutes / 60);\n      const m = newTotalMinutes % 60;\n      onChange(formatTime(h, m));\n    },\n    [totalMinutes, onChange]\n  );\n\n  const handleMinutesSet = useCallback(\n    (newMinutes: number) => {\n      onChange(formatTime(hours, newMinutes));\n    },\n    [hours, onChange]\n  );\n\n  return (\n    <div className={`scrubtime ${className || ''} ${disabled ? 'scrubtime--disabled' : ''}`}>\n      {label && <label className=\"scrubtime-label\">{label}</label>}\n\n      <div className=\"scrubtime-container\">\n        <div className=\"scrubtime-display\">\n          <DraggableValue\n            value={hours}\n            onDelta={handleHoursDelta}\n            onSet={handleHoursSet}\n            disabled={disabled}\n            sensitivity={dragSensitivity * 2}\n            min={0}\n            max={23}\n            className=\"scrubtime-hours\"\n          />\n          <span className=\"scrubtime-separator\">:</span>\n          <DraggableValue\n            value={minutes}\n            onDelta={handleMinutesDelta}\n            onSet={handleMinutesSet}\n            formatValue={(v) => String(v).padStart(2, '0')}\n            disabled={disabled}\n            sensitivity={dragSensitivity / 2}\n            min={0}\n            max={59}\n            className=\"scrubtime-minutes\"\n          />\n        </div>\n\n        <div className=\"scrubtime-slider-container\">\n          <input\n            type=\"range\"\n            min={0}\n            max={23 * 60 + 59}\n            step={sliderStep}\n            value={totalMinutes}\n            onChange={handleSliderChange}\n            disabled={disabled}\n            tabIndex={-1}\n            className=\"scrubtime-slider\"\n            aria-label=\"Time slider\"\n          />\n          <div className=\"scrubtime-slider-labels\">\n            {Array.from({ length: labelCount }, (_, i) => {\n              const hour = Math.round((24 / divisions) * i);\n              const percent = (i / divisions) * 100;\n              return (\n                <span key={i} style={{ left: `${percent}%` }}>\n                  {hour}\n                </span>\n              );\n            })}\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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","names":["e","touch"]}

package/dist/styles.css

@@ -73,6 +73,7 @@
   padding: 0.5rem;
   cursor: ew-resize;
   user-select: none;
+  touch-action: none;
   color: var(--scrubtime-text);
   transition: background-color 0.15s ease;
 }
@@ -126,6 +127,7 @@
   border-radius: 0.25rem;
   cursor: pointer;
   margin: 0;
+  touch-action: pan-x;
 }
 
 .scrubtime-slider::-webkit-slider-thumb {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "scrubtime",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "A React time picker with draggable scrubber and slider - minimal clicks, maximum control",
   "author": "falkenhawk",
   "license": "MIT",