scrubtime 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 falkenhawk
+
+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,144 @@
+# scrubtime
+
+A React time picker with draggable scrubber and slider — minimal clicks, maximum control.
+
+[![Live Demo](https://img.shields.io/badge/Live%20Demo-Try%20it%20now-blue?style=for-the-badge)](https://falkenhawk.github.io/scrubtime/)
+
+![npm](https://img.shields.io/npm/v/scrubtime)
+![npm bundle size](https://img.shields.io/bundlephobia/minzip/scrubtime)
+![license](https://img.shields.io/npm/l/scrubtime)
+
+## Features
+
+- **Draggable scrubber** — Click and drag on hours/minutes to adjust values (like Figma, Blender, After Effects)
+- **Horizontal slider** — Quick selection with configurable step intervals
+- **Minimal clicks** — Designed for efficiency
+- **Fully accessible** — Keyboard navigation and ARIA support
+- **Customizable** — CSS variables for easy theming
+- **Lightweight** — No dependencies besides React
+- **TypeScript** — Full type support
+
+## Installation
+
+```bash
+npm install scrubtime
+# or
+yarn add scrubtime
+# or
+pnpm add scrubtime
+```
+
+## Usage
+
+```tsx
+import { useState } from 'react';
+import { TimePicker } from 'scrubtime';
+import 'scrubtime/styles.css'; // Import default styles
+
+function App() {
+  const [time, setTime] = useState('14:30');
+
+  return (
+    <TimePicker
+      value={time}
+      onChange={setTime}
+      label="Select time"
+    />
+  );
+}
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `value` | `string` | required | Time in "H:mm" or "HH:mm" format |
+| `onChange` | `(value: string) => void` | required | Called when time changes |
+| `label` | `string` | - | Optional label above picker |
+| `className` | `string` | - | Custom class for root element |
+| `disabled` | `boolean` | `false` | Disable the picker |
+| `sliderStep` | `number` | `15` | Slider step in minutes |
+| `dragSensitivity` | `number` | `3` | Pixels per unit when dragging |
+| `divisions` | `number` | `4` | Number of equal parts to divide the 24h range (4 = labels at 0, 6, 12, 18, 24) |
+
+## Interaction
+
+### Dragging (Scrubber)
+
+- **Hours**: Click and drag left/right to decrease/increase (0-23, clamped)
+- **Minutes**: Click and drag to change. Crossing 0 or 59 automatically adjusts the hour
+
+### Slider
+
+- Drag the slider for quick 15-minute jumps (configurable via `sliderStep`)
+- Snaps to step intervals
+
+### Keyboard
+
+- Focus the value and use arrow keys to adjust
+
+## Customization
+
+### CSS Variables
+
+Override these variables to customize the appearance:
+
+```css
+:root {
+  --scrubtime-bg: #27272a;
+  --scrubtime-bg-hover: #3f3f46;
+  --scrubtime-border: #3f3f46;
+  --scrubtime-text: #ffffff;
+  --scrubtime-text-muted: #71717a;
+  --scrubtime-value-bg: #3f3f46;
+  --scrubtime-slider-bg: #3f3f46;
+  --scrubtime-slider-thumb: #3b82f6;
+  --scrubtime-slider-thumb-border: #1e3a5f;
+  --scrubtime-radius: 0.75rem;
+  --scrubtime-radius-sm: 0.5rem;
+  --scrubtime-font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
+}
+```
+
+### Without Default Styles
+
+Don't import the CSS and style the classes yourself:
+
+```tsx
+import { TimePicker } from 'scrubtime';
+// Don't import styles.css
+
+// Style these classes:
+// .scrubtime
+// .scrubtime-label
+// .scrubtime-container
+// .scrubtime-display
+// .scrubtime-value
+// .scrubtime-hours
+// .scrubtime-minutes
+// .scrubtime-separator
+// .scrubtime-slider-container
+// .scrubtime-slider
+// .scrubtime-slider-labels
+```
+
+### With Tailwind CSS
+
+You can use Tailwind by passing a className and not importing the default styles:
+
+```tsx
+<TimePicker
+  value={time}
+  onChange={setTime}
+  className="[&_.scrubtime-container]:bg-zinc-800 [&_.scrubtime-value]:bg-zinc-700"
+/>
+```
+
+## Browser Support
+
+- Chrome, Firefox, Safari, Edge (latest versions)
+- Requires React 18+
+
+## License
+
+MIT © [falkenhawk](https://github.com/falkenhawk)

package/dist/index.cjs

@@ -0,0 +1,274 @@
+"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, {
+  TimePicker: () => TimePicker
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/TimePicker.tsx
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var DRAG_THRESHOLD = 3;
+function DraggableValue({
+  value,
+  onDelta,
+  onSet,
+  formatValue,
+  className,
+  disabled,
+  sensitivity,
+  min,
+  max
+}) {
+  const [isEditing, setIsEditing] = (0, import_react.useState)(false);
+  const [editValue, setEditValue] = (0, import_react.useState)("");
+  const isDragging = (0, import_react.useRef)(false);
+  const hasDragged = (0, import_react.useRef)(false);
+  const startX = (0, import_react.useRef)(0);
+  const lastX = (0, import_react.useRef)(0);
+  const accumulatedDelta = (0, import_react.useRef)(0);
+  const onDeltaRef = (0, import_react.useRef)(onDelta);
+  onDeltaRef.current = onDelta;
+  const handleMouseDown = (0, import_react.useCallback)(
+    (e) => {
+      if (disabled || isEditing) return;
+      isDragging.current = true;
+      hasDragged.current = false;
+      startX.current = e.clientX;
+      lastX.current = e.clientX;
+      accumulatedDelta.current = 0;
+      document.body.style.cursor = "ew-resize";
+      document.body.style.userSelect = "none";
+      const handleMouseMove = (e2) => {
+        if (!isDragging.current) return;
+        const totalDeltaX = Math.abs(e2.clientX - startX.current);
+        if (totalDeltaX > DRAG_THRESHOLD) {
+          hasDragged.current = true;
+        }
+        const deltaX = e2.clientX - lastX.current;
+        const deltaValue = deltaX / sensitivity;
+        accumulatedDelta.current += deltaValue;
+        const wholeDelta = Math.trunc(accumulatedDelta.current);
+        if (wholeDelta !== 0) {
+          accumulatedDelta.current -= wholeDelta;
+          onDeltaRef.current(wholeDelta);
+        }
+        lastX.current = e2.clientX;
+      };
+      const handleMouseUp = () => {
+        isDragging.current = false;
+        document.body.style.cursor = "";
+        document.body.style.userSelect = "";
+        document.removeEventListener("mousemove", handleMouseMove);
+        document.removeEventListener("mouseup", handleMouseUp);
+      };
+      document.addEventListener("mousemove", handleMouseMove);
+      document.addEventListener("mouseup", handleMouseUp);
+    },
+    [disabled, sensitivity, isEditing]
+  );
+  const displayValue = formatValue ? formatValue(value) : String(value);
+  const handleClick = (0, import_react.useCallback)(() => {
+    if (disabled || hasDragged.current) return;
+    setEditValue(displayValue);
+    setIsEditing(true);
+  }, [disabled, displayValue]);
+  const handleDivKeyDown = (0, import_react.useCallback)(
+    (e) => {
+      if (disabled) return;
+      if (/^[0-9]$/.test(e.key)) {
+        e.preventDefault();
+        setEditValue(e.key);
+        setIsEditing(true);
+      }
+    },
+    [disabled]
+  );
+  const commitEdit = (0, import_react.useCallback)(() => {
+    const parsed = parseInt(editValue, 10);
+    if (!isNaN(parsed)) {
+      const clamped = Math.max(min, Math.min(max, parsed));
+      onSet(clamped);
+    }
+    setIsEditing(false);
+  }, [editValue, min, max, onSet]);
+  const handleKeyDown = (0, import_react.useCallback)(
+    (e) => {
+      if (e.key === "Enter") {
+        commitEdit();
+      } else if (e.key === "Escape") {
+        setIsEditing(false);
+      }
+    },
+    [commitEdit]
+  );
+  if (isEditing) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "input",
+      {
+        type: "text",
+        inputMode: "numeric",
+        value: editValue,
+        onChange: (e) => setEditValue(e.target.value),
+        onBlur: commitEdit,
+        onKeyDown: handleKeyDown,
+        className: `scrubtime-value scrubtime-value--editing ${className || ""}`,
+        autoFocus: true
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      onMouseDown: handleMouseDown,
+      onClick: handleClick,
+      onKeyDown: handleDivKeyDown,
+      className: `scrubtime-value ${className || ""} ${disabled ? "scrubtime-value--disabled" : ""}`,
+      role: "spinbutton",
+      "aria-valuenow": value,
+      "aria-disabled": disabled,
+      tabIndex: disabled ? -1 : 0,
+      children: displayValue
+    }
+  );
+}
+function parseTime(time) {
+  const [h, m] = time.split(":").map(Number);
+  return { hours: h || 0, minutes: m || 0 };
+}
+function formatTime(hours, minutes) {
+  return `${hours}:${String(minutes).padStart(2, "0")}`;
+}
+function clampTotalMinutes(totalMins) {
+  return Math.max(0, Math.min(23 * 60 + 59, totalMins));
+}
+function TimePicker({
+  value,
+  onChange,
+  label,
+  className,
+  disabled = false,
+  sliderStep = 15,
+  dragSensitivity = 3,
+  divisions = 4
+}) {
+  const labelCount = divisions + 1;
+  const { hours, minutes } = parseTime(value);
+  const totalMinutes = hours * 60 + minutes;
+  const handleSliderChange = (e) => {
+    if (disabled) return;
+    const mins = clampTotalMinutes(parseInt(e.target.value));
+    const h = Math.floor(mins / 60);
+    const m = mins % 60;
+    onChange(formatTime(h, m));
+  };
+  const handleHoursDelta = (0, import_react.useCallback)(
+    (delta) => {
+      const newHours = Math.max(0, Math.min(23, hours + delta));
+      onChange(formatTime(newHours, minutes));
+    },
+    [hours, minutes, onChange]
+  );
+  const handleHoursSet = (0, import_react.useCallback)(
+    (newHours) => {
+      onChange(formatTime(newHours, minutes));
+    },
+    [minutes, onChange]
+  );
+  const handleMinutesDelta = (0, import_react.useCallback)(
+    (delta) => {
+      const newTotalMinutes = clampTotalMinutes(totalMinutes + delta);
+      const h = Math.floor(newTotalMinutes / 60);
+      const m = newTotalMinutes % 60;
+      onChange(formatTime(h, m));
+    },
+    [totalMinutes, onChange]
+  );
+  const handleMinutesSet = (0, import_react.useCallback)(
+    (newMinutes) => {
+      onChange(formatTime(hours, newMinutes));
+    },
+    [hours, onChange]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: `scrubtime ${className || ""} ${disabled ? "scrubtime--disabled" : ""}`, children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("label", { className: "scrubtime-label", children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "scrubtime-container", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "scrubtime-display", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          DraggableValue,
+          {
+            value: hours,
+            onDelta: handleHoursDelta,
+            onSet: handleHoursSet,
+            disabled,
+            sensitivity: dragSensitivity,
+            min: 0,
+            max: 23,
+            className: "scrubtime-hours"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "scrubtime-separator", children: ":" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          DraggableValue,
+          {
+            value: minutes,
+            onDelta: handleMinutesDelta,
+            onSet: handleMinutesSet,
+            formatValue: (v) => String(v).padStart(2, "0"),
+            disabled,
+            sensitivity: dragSensitivity,
+            min: 0,
+            max: 59,
+            className: "scrubtime-minutes"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "scrubtime-slider-container", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "input",
+          {
+            type: "range",
+            min: 0,
+            max: 23 * 60 + 59,
+            step: sliderStep,
+            value: totalMinutes,
+            onChange: handleSliderChange,
+            disabled,
+            tabIndex: -1,
+            className: "scrubtime-slider",
+            "aria-label": "Time slider"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "scrubtime-slider-labels", children: Array.from({ length: labelCount }, (_, i) => {
+          const hour = Math.round(24 / divisions * i);
+          const percent = i / divisions * 100;
+          return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { left: `${percent}%` }, children: hour }, i);
+        }) })
+      ] })
+    ] })
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  TimePicker
+});
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +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":"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","names":["e"]}

package/dist/index.d.cts

@@ -0,0 +1,23 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface TimePickerProps {
+    /** Current time value in "H:mm" or "HH:mm" format */
+    value: string;
+    /** Callback fired when time changes */
+    onChange: (value: string) => void;
+    /** Optional label displayed above the picker */
+    label?: string;
+    /** Custom class name for the root element */
+    className?: string;
+    /** Disable the picker */
+    disabled?: boolean;
+    /** Slider step in minutes (default: 15) */
+    sliderStep?: number;
+    /** Drag sensitivity - pixels per unit change (default: 3) */
+    dragSensitivity?: number;
+    /** Number of equal parts to divide the 24h range into (default: 4 = labels at 0,6,12,18,24) */
+    divisions?: number;
+}
+declare function TimePicker({ value, onChange, label, className, disabled, sliderStep, dragSensitivity, divisions, }: TimePickerProps): react_jsx_runtime.JSX.Element;
+
+export { TimePicker, type TimePickerProps };

package/dist/index.d.ts

@@ -0,0 +1,23 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface TimePickerProps {
+    /** Current time value in "H:mm" or "HH:mm" format */
+    value: string;
+    /** Callback fired when time changes */
+    onChange: (value: string) => void;
+    /** Optional label displayed above the picker */
+    label?: string;
+    /** Custom class name for the root element */
+    className?: string;
+    /** Disable the picker */
+    disabled?: boolean;
+    /** Slider step in minutes (default: 15) */
+    sliderStep?: number;
+    /** Drag sensitivity - pixels per unit change (default: 3) */
+    dragSensitivity?: number;
+    /** Number of equal parts to divide the 24h range into (default: 4 = labels at 0,6,12,18,24) */
+    divisions?: number;
+}
+declare function TimePicker({ value, onChange, label, className, disabled, sliderStep, dragSensitivity, divisions, }: TimePickerProps): react_jsx_runtime.JSX.Element;
+
+export { TimePicker, type TimePickerProps };

package/dist/index.js

@@ -0,0 +1,247 @@
+// src/TimePicker.tsx
+import { useRef, useCallback, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var DRAG_THRESHOLD = 3;
+function DraggableValue({
+  value,
+  onDelta,
+  onSet,
+  formatValue,
+  className,
+  disabled,
+  sensitivity,
+  min,
+  max
+}) {
+  const [isEditing, setIsEditing] = useState(false);
+  const [editValue, setEditValue] = useState("");
+  const isDragging = useRef(false);
+  const hasDragged = useRef(false);
+  const startX = useRef(0);
+  const lastX = useRef(0);
+  const accumulatedDelta = useRef(0);
+  const onDeltaRef = useRef(onDelta);
+  onDeltaRef.current = onDelta;
+  const handleMouseDown = useCallback(
+    (e) => {
+      if (disabled || isEditing) return;
+      isDragging.current = true;
+      hasDragged.current = false;
+      startX.current = e.clientX;
+      lastX.current = e.clientX;
+      accumulatedDelta.current = 0;
+      document.body.style.cursor = "ew-resize";
+      document.body.style.userSelect = "none";
+      const handleMouseMove = (e2) => {
+        if (!isDragging.current) return;
+        const totalDeltaX = Math.abs(e2.clientX - startX.current);
+        if (totalDeltaX > DRAG_THRESHOLD) {
+          hasDragged.current = true;
+        }
+        const deltaX = e2.clientX - lastX.current;
+        const deltaValue = deltaX / sensitivity;
+        accumulatedDelta.current += deltaValue;
+        const wholeDelta = Math.trunc(accumulatedDelta.current);
+        if (wholeDelta !== 0) {
+          accumulatedDelta.current -= wholeDelta;
+          onDeltaRef.current(wholeDelta);
+        }
+        lastX.current = e2.clientX;
+      };
+      const handleMouseUp = () => {
+        isDragging.current = false;
+        document.body.style.cursor = "";
+        document.body.style.userSelect = "";
+        document.removeEventListener("mousemove", handleMouseMove);
+        document.removeEventListener("mouseup", handleMouseUp);
+      };
+      document.addEventListener("mousemove", handleMouseMove);
+      document.addEventListener("mouseup", handleMouseUp);
+    },
+    [disabled, sensitivity, isEditing]
+  );
+  const displayValue = formatValue ? formatValue(value) : String(value);
+  const handleClick = useCallback(() => {
+    if (disabled || hasDragged.current) return;
+    setEditValue(displayValue);
+    setIsEditing(true);
+  }, [disabled, displayValue]);
+  const handleDivKeyDown = useCallback(
+    (e) => {
+      if (disabled) return;
+      if (/^[0-9]$/.test(e.key)) {
+        e.preventDefault();
+        setEditValue(e.key);
+        setIsEditing(true);
+      }
+    },
+    [disabled]
+  );
+  const commitEdit = useCallback(() => {
+    const parsed = parseInt(editValue, 10);
+    if (!isNaN(parsed)) {
+      const clamped = Math.max(min, Math.min(max, parsed));
+      onSet(clamped);
+    }
+    setIsEditing(false);
+  }, [editValue, min, max, onSet]);
+  const handleKeyDown = useCallback(
+    (e) => {
+      if (e.key === "Enter") {
+        commitEdit();
+      } else if (e.key === "Escape") {
+        setIsEditing(false);
+      }
+    },
+    [commitEdit]
+  );
+  if (isEditing) {
+    return /* @__PURE__ */ jsx(
+      "input",
+      {
+        type: "text",
+        inputMode: "numeric",
+        value: editValue,
+        onChange: (e) => setEditValue(e.target.value),
+        onBlur: commitEdit,
+        onKeyDown: handleKeyDown,
+        className: `scrubtime-value scrubtime-value--editing ${className || ""}`,
+        autoFocus: true
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      onMouseDown: handleMouseDown,
+      onClick: handleClick,
+      onKeyDown: handleDivKeyDown,
+      className: `scrubtime-value ${className || ""} ${disabled ? "scrubtime-value--disabled" : ""}`,
+      role: "spinbutton",
+      "aria-valuenow": value,
+      "aria-disabled": disabled,
+      tabIndex: disabled ? -1 : 0,
+      children: displayValue
+    }
+  );
+}
+function parseTime(time) {
+  const [h, m] = time.split(":").map(Number);
+  return { hours: h || 0, minutes: m || 0 };
+}
+function formatTime(hours, minutes) {
+  return `${hours}:${String(minutes).padStart(2, "0")}`;
+}
+function clampTotalMinutes(totalMins) {
+  return Math.max(0, Math.min(23 * 60 + 59, totalMins));
+}
+function TimePicker({
+  value,
+  onChange,
+  label,
+  className,
+  disabled = false,
+  sliderStep = 15,
+  dragSensitivity = 3,
+  divisions = 4
+}) {
+  const labelCount = divisions + 1;
+  const { hours, minutes } = parseTime(value);
+  const totalMinutes = hours * 60 + minutes;
+  const handleSliderChange = (e) => {
+    if (disabled) return;
+    const mins = clampTotalMinutes(parseInt(e.target.value));
+    const h = Math.floor(mins / 60);
+    const m = mins % 60;
+    onChange(formatTime(h, m));
+  };
+  const handleHoursDelta = useCallback(
+    (delta) => {
+      const newHours = Math.max(0, Math.min(23, hours + delta));
+      onChange(formatTime(newHours, minutes));
+    },
+    [hours, minutes, onChange]
+  );
+  const handleHoursSet = useCallback(
+    (newHours) => {
+      onChange(formatTime(newHours, minutes));
+    },
+    [minutes, onChange]
+  );
+  const handleMinutesDelta = useCallback(
+    (delta) => {
+      const newTotalMinutes = clampTotalMinutes(totalMinutes + delta);
+      const h = Math.floor(newTotalMinutes / 60);
+      const m = newTotalMinutes % 60;
+      onChange(formatTime(h, m));
+    },
+    [totalMinutes, onChange]
+  );
+  const handleMinutesSet = useCallback(
+    (newMinutes) => {
+      onChange(formatTime(hours, newMinutes));
+    },
+    [hours, onChange]
+  );
+  return /* @__PURE__ */ jsxs("div", { className: `scrubtime ${className || ""} ${disabled ? "scrubtime--disabled" : ""}`, children: [
+    label && /* @__PURE__ */ jsx("label", { className: "scrubtime-label", children: label }),
+    /* @__PURE__ */ jsxs("div", { className: "scrubtime-container", children: [
+      /* @__PURE__ */ jsxs("div", { className: "scrubtime-display", children: [
+        /* @__PURE__ */ jsx(
+          DraggableValue,
+          {
+            value: hours,
+            onDelta: handleHoursDelta,
+            onSet: handleHoursSet,
+            disabled,
+            sensitivity: dragSensitivity,
+            min: 0,
+            max: 23,
+            className: "scrubtime-hours"
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: "scrubtime-separator", children: ":" }),
+        /* @__PURE__ */ jsx(
+          DraggableValue,
+          {
+            value: minutes,
+            onDelta: handleMinutesDelta,
+            onSet: handleMinutesSet,
+            formatValue: (v) => String(v).padStart(2, "0"),
+            disabled,
+            sensitivity: dragSensitivity,
+            min: 0,
+            max: 59,
+            className: "scrubtime-minutes"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "scrubtime-slider-container", children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "range",
+            min: 0,
+            max: 23 * 60 + 59,
+            step: sliderStep,
+            value: totalMinutes,
+            onChange: handleSliderChange,
+            disabled,
+            tabIndex: -1,
+            className: "scrubtime-slider",
+            "aria-label": "Time slider"
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: "scrubtime-slider-labels", children: Array.from({ length: labelCount }, (_, i) => {
+          const hour = Math.round(24 / divisions * i);
+          const percent = i / divisions * 100;
+          return /* @__PURE__ */ jsx("span", { style: { left: `${percent}%` }, children: hour }, i);
+        }) })
+      ] })
+    ] })
+  ] });
+}
+export {
+  TimePicker
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +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":";AAAA,SAAS,QAAQ,aAAa,gBAAgB;AAgJxC,cAqGE,YArGF;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,IAAI,SAAS,KAAK;AAChD,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,EAAE;AAC7C,QAAM,aAAa,OAAO,KAAK;AAC/B,QAAM,aAAa,OAAO,KAAK;AAC/B,QAAM,SAAS,OAAO,CAAC;AACvB,QAAM,QAAQ,OAAO,CAAC;AACtB,QAAM,mBAAmB,OAAO,CAAC;AACjC,QAAM,aAAa,OAAO,OAAO;AACjC,aAAW,UAAU;AAErB,QAAM,kBAAkB;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,cAAc,YAAY,MAAM;AACpC,QAAI,YAAY,WAAW,QAAS;AACpC,iBAAa,YAAY;AACzB,iBAAa,IAAI;AAAA,EACnB,GAAG,CAAC,UAAU,YAAY,CAAC;AAE3B,QAAM,mBAAmB;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,aAAa,YAAY,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,gBAAgB;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,mBAAmB;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,iBAAiB;AAAA,IACrB,CAAC,aAAqB;AACpB,eAAS,WAAW,UAAU,OAAO,CAAC;AAAA,IACxC;AAAA,IACA,CAAC,SAAS,QAAQ;AAAA,EACpB;AAEA,QAAM,qBAAqB;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,mBAAmB;AAAA,IACvB,CAAC,eAAuB;AACtB,eAAS,WAAW,OAAO,UAAU,CAAC;AAAA,IACxC;AAAA,IACA,CAAC,OAAO,QAAQ;AAAA,EAClB;AAEA,SACE,qBAAC,SAAI,WAAW,aAAa,aAAa,EAAE,IAAI,WAAW,wBAAwB,EAAE,IAClF;AAAA,aAAS,oBAAC,WAAM,WAAU,mBAAmB,iBAAM;AAAA,IAEpD,qBAAC,SAAI,WAAU,uBACb;AAAA,2BAAC,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,oBAAC,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,qBAAC,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,oBAAC,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,oBAAC,UAAa,OAAO,EAAE,MAAM,GAAG,OAAO,IAAI,GACxC,kBADQ,CAEX;AAAA,QAEJ,CAAC,GACH;AAAA,SACF;AAAA,OACF;AAAA,KACF;AAEJ;","names":["e"]}

package/dist/styles.css

@@ -0,0 +1,190 @@
+/* scrubtime - Default Styles
+ * These styles can be customized via CSS variables or overridden entirely.
+ */
+
+:root {
+  --scrubtime-bg: #27272a;
+  --scrubtime-bg-hover: #3f3f46;
+  --scrubtime-border: #3f3f46;
+  --scrubtime-text: #ffffff;
+  --scrubtime-text-muted: #71717a;
+  --scrubtime-value-bg: #3f3f46;
+  --scrubtime-slider-bg: #3f3f46;
+  --scrubtime-slider-thumb: #3b82f6;
+  --scrubtime-slider-thumb-border: #1e3a5f;
+  --scrubtime-radius: 0.75rem;
+  --scrubtime-radius-sm: 0.5rem;
+  --scrubtime-font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
+}
+
+/* Light mode support */
+@media (prefers-color-scheme: light) {
+  :root {
+    --scrubtime-bg: #f4f4f5;
+    --scrubtime-bg-hover: #e4e4e7;
+    --scrubtime-border: #d4d4d8;
+    --scrubtime-text: #18181b;
+    --scrubtime-text-muted: #71717a;
+    --scrubtime-value-bg: #e4e4e7;
+    --scrubtime-slider-bg: #d4d4d8;
+  }
+}
+
+.scrubtime {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.scrubtime--disabled {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+.scrubtime-label {
+  font-size: 0.875rem;
+  color: var(--scrubtime-text-muted);
+}
+
+.scrubtime-container {
+  background: var(--scrubtime-bg);
+  border: 1px solid var(--scrubtime-border);
+  border-radius: var(--scrubtime-radius);
+  padding: 0.75rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.scrubtime-display {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.25rem;
+}
+
+.scrubtime-value {
+  width: 3.5rem;
+  background: var(--scrubtime-value-bg);
+  border-radius: var(--scrubtime-radius-sm);
+  text-align: center;
+  font-size: 1.5rem;
+  font-family: var(--scrubtime-font-mono);
+  padding: 0.5rem;
+  cursor: ew-resize;
+  user-select: none;
+  color: var(--scrubtime-text);
+  transition: background-color 0.15s ease;
+}
+
+.scrubtime-value:hover:not(.scrubtime-value--disabled) {
+  background: var(--scrubtime-bg-hover);
+}
+
+.scrubtime-value:focus {
+  outline: 2px solid var(--scrubtime-slider-thumb);
+  outline-offset: 2px;
+}
+
+.scrubtime-value--disabled {
+  cursor: not-allowed;
+}
+
+.scrubtime-value--editing {
+  width: 3.5rem;
+  border: none;
+  font-size: 1.5rem;
+  font-family: var(--scrubtime-font-mono);
+  background: var(--scrubtime-value-bg);
+  color: var(--scrubtime-text);
+  text-align: center;
+  border-radius: var(--scrubtime-radius-sm);
+  padding: 0.5rem;
+  outline: 2px solid var(--scrubtime-slider-thumb);
+  outline-offset: 0;
+  box-sizing: border-box;
+}
+
+.scrubtime-separator {
+  font-size: 1.5rem;
+  font-family: var(--scrubtime-font-mono);
+  color: var(--scrubtime-text-muted);
+}
+
+.scrubtime-slider-container {
+  display: flex;
+  flex-direction: column;
+  --thumb-width: 1.25rem;
+}
+
+.scrubtime-slider {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 100%;
+  height: 0.5rem;
+  background: var(--scrubtime-slider-bg);
+  border-radius: 0.25rem;
+  cursor: pointer;
+  margin: 0;
+}
+
+.scrubtime-slider::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 1.25rem;
+  height: 1.25rem;
+  background: var(--scrubtime-slider-thumb);
+  border-radius: 50%;
+  cursor: pointer;
+  border: 2px solid var(--scrubtime-slider-thumb-border);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+  transition: transform 0.1s ease;
+}
+
+.scrubtime-slider::-webkit-slider-thumb:hover {
+  transform: scale(1.1);
+}
+
+.scrubtime-slider::-webkit-slider-thumb:active {
+  transform: scale(0.95);
+}
+
+.scrubtime-slider::-moz-range-thumb {
+  width: 1.25rem;
+  height: 1.25rem;
+  background: var(--scrubtime-slider-thumb);
+  border-radius: 50%;
+  cursor: pointer;
+  border: 2px solid var(--scrubtime-slider-thumb-border);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+}
+
+.scrubtime-slider:focus {
+  outline: none;
+}
+
+.scrubtime-slider:focus::-webkit-slider-thumb {
+  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
+}
+
+.scrubtime-slider:disabled {
+  cursor: not-allowed;
+}
+
+.scrubtime-slider-labels {
+  position: relative;
+  height: 1em;
+  font-size: 0.625rem;
+  color: var(--scrubtime-text-muted);
+  margin-top: 0.25rem;
+  /* Inset to match thumb travel range */
+  margin-left: calc(var(--thumb-width) / 2);
+  margin-right: calc(var(--thumb-width) / 2 + 1px);
+}
+
+.scrubtime-slider-labels span {
+  position: absolute;
+  transform: translateX(-50%);
+  width: 2ch;
+  text-align: center;
+}

package/package.json

@@ -0,0 +1,78 @@
+{
+  "name": "scrubtime",
+  "version": "0.1.0",
+  "description": "A React time picker with draggable scrubber and slider - minimal clicks, maximum control",
+  "author": "falkenhawk",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/falkenhawk/scrubtime.git"
+  },
+  "homepage": "https://github.com/falkenhawk/scrubtime#readme",
+  "bugs": {
+    "url": "https://github.com/falkenhawk/scrubtime/issues"
+  },
+  "keywords": [
+    "react",
+    "time-picker",
+    "timepicker",
+    "scrubber",
+    "draggable",
+    "slider",
+    "input",
+    "component",
+    "ui"
+  ],
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    },
+    "./styles.css": "./dist/styles.css"
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "sideEffects": [
+    "*.css"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "lint": "eslint src --ext .ts,.tsx",
+    "lint:fix": "eslint src --ext .ts,.tsx --fix",
+    "format": "prettier --write \"src/**/*.{ts,tsx}\"",
+    "typecheck": "tsc --noEmit",
+    "prepublishOnly": "npm run build"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.0",
+    "@types/react-dom": "^18.3.0",
+    "@typescript-eslint/eslint-plugin": "^8.0.0",
+    "@typescript-eslint/parser": "^8.0.0",
+    "eslint": "^9.0.0",
+    "eslint-plugin-react": "^7.35.0",
+    "eslint-plugin-react-hooks": "^5.0.0",
+    "prettier": "^3.3.0",
+    "react": "^18.3.0",
+    "react-dom": "^18.3.0",
+    "tsup": "^8.3.0",
+    "typescript": "^5.6.0"
+  }
+}